|
|
@@ -1,120 +1,256 @@
|
|
|
<template>
|
|
|
- <el-card class="box-card">
|
|
|
- <byTable
|
|
|
- :source="sourceList.data"
|
|
|
- :pagination="sourceList.pagination"
|
|
|
- :config="config"
|
|
|
- :loading="loading"
|
|
|
- :selectConfig="selectConfig"
|
|
|
- highlight-current-row
|
|
|
- @get-list="getList">
|
|
|
- <template #amount="{ item }">
|
|
|
- <div>
|
|
|
- <span style="padding-right: 4px">{{ item.currency }}</span>
|
|
|
- <span>{{ moneyFormat(item.amount, 2) }}</span>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <el-input v-model="filterTree" placeholder="请输入BOM分类" />
|
|
|
+ <el-tree
|
|
|
+ ref="treeCategory"
|
|
|
+ :data="categoryTreeData"
|
|
|
+ :props="{ children: 'children', label: 'name' }"
|
|
|
+ node-key="id"
|
|
|
+ default-expand-all
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ :indent="10"
|
|
|
+ :filter-node-method="filterNodeMethod"
|
|
|
+ @node-click="handleNodeClick" />
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <byTable
|
|
|
+ :hideTable="true"
|
|
|
+ :hidePagination="true"
|
|
|
+ :source="sourceList.data"
|
|
|
+ :pagination="sourceList.pagination"
|
|
|
+ :config="config"
|
|
|
+ :loading="loading"
|
|
|
+ :searchConfig="searchConfig"
|
|
|
+ highlight-current-row
|
|
|
+ :action-list="[
|
|
|
+ {
|
|
|
+ text: '新增',
|
|
|
+ action: () => openModal(),
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ @get-list="getList"
|
|
|
+ @clickReset="clickReset">
|
|
|
+ </byTable>
|
|
|
+ <el-table :data="sourceList.data" row-key="id" default-expand-all>
|
|
|
+ <el-table-column prop="name" label="分类名称" min-width="180" />
|
|
|
+ <el-table-column prop="sort" label="排序" align="center" width="100" />
|
|
|
+ <el-table-column label="操作" align="center" width="180">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" @click="addChildNode(row)" text>添加子节点</el-button>
|
|
|
+ <el-button type="primary" @click="clickUpdate(row)" v-if="row.parentId" text>编辑</el-button>
|
|
|
+ <el-button type="primary" @click="clickDelete(row)" v-if="row.parentId" text>删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-dialog :title="modalType == 'add' ? '新增分类' : '编辑分类'" v-if="openDialog" v-model="openDialog" width="400">
|
|
|
+ <!-- <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
|
|
|
+ <template #parentId>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <el-cascader
|
|
|
+ v-model="formData.data.parentId"
|
|
|
+ :options="sourceList.data"
|
|
|
+ :props="{ checkStrictly: true, value: 'id', label: 'name', emitPath: false }"
|
|
|
+ clearable
|
|
|
+ style="width: 100%" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </byForm> -->
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="openDialog = false" size="large">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm()" v-loading="btnLoading" size="large">确 定</el-button>
|
|
|
</template>
|
|
|
- </byTable>
|
|
|
- </el-card>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import byTable from "@/components/byTable/index";
|
|
|
+import byForm from "@/components/byForm/index";
|
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
-const orderStatus = ref([]);
|
|
|
+const filterTree = ref("");
|
|
|
+const treeCategory = ref(null);
|
|
|
+const categoryTreeData = ref([]);
|
|
|
+const getTreeList = () => {
|
|
|
+ proxy.post("/bomClassify/tree", {}).then((res) => {
|
|
|
+ categoryTreeData.value = res;
|
|
|
+ });
|
|
|
+};
|
|
|
+getTreeList();
|
|
|
+watch(filterTree, (val) => {
|
|
|
+ treeCategory.value.filter(val);
|
|
|
+});
|
|
|
+const filterNodeMethod = (value, data) => {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.name.includes(value);
|
|
|
+};
|
|
|
+const handleNodeClick = (val) => {
|
|
|
+ console.log(val);
|
|
|
+};
|
|
|
const sourceList = ref({
|
|
|
- data: [{ code: "踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩从" }, {}],
|
|
|
+ data: [],
|
|
|
pagination: {
|
|
|
- total: 1000,
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 10,
|
|
|
- keyword: "",
|
|
|
- status: "",
|
|
|
- payStatus: "",
|
|
|
+ total: 0,
|
|
|
+ name: "",
|
|
|
},
|
|
|
});
|
|
|
-const selectConfig = computed(() => {
|
|
|
+const loading = ref(false);
|
|
|
+const searchConfig = computed(() => {
|
|
|
return [
|
|
|
{
|
|
|
- label: "质检状态",
|
|
|
- prop: "status",
|
|
|
- data: [],
|
|
|
- },
|
|
|
- {
|
|
|
- label: "订单类型",
|
|
|
- prop: "payStatus",
|
|
|
- data: [],
|
|
|
+ type: "input",
|
|
|
+ prop: "name",
|
|
|
+ label: "分类名称",
|
|
|
},
|
|
|
{
|
|
|
- label: "结论",
|
|
|
- prop: "payStatus",
|
|
|
- data: [],
|
|
|
+ type: "select",
|
|
|
+ prop: "species",
|
|
|
+ dictKey: "bom_species",
|
|
|
+ label: "种类",
|
|
|
},
|
|
|
];
|
|
|
});
|
|
|
const config = computed(() => {
|
|
|
+ return [];
|
|
|
+});
|
|
|
+const getList = async (req) => {
|
|
|
+ sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
|
|
|
+ loading.value = true;
|
|
|
+ proxy.post("/bomClassify/tree", sourceList.value.pagination).then((res) => {
|
|
|
+ sourceList.value.data = res;
|
|
|
+ setTimeout(() => {
|
|
|
+ loading.value = false;
|
|
|
+ }, 200);
|
|
|
+ });
|
|
|
+};
|
|
|
+getList();
|
|
|
+const clickReset = () => {
|
|
|
+ treeCategory.setCurrentKey(null);
|
|
|
+ getList({ name: "" });
|
|
|
+};
|
|
|
+const modalType = ref("add");
|
|
|
+const submit = ref(null);
|
|
|
+const openDialog = ref(false);
|
|
|
+const formOption = reactive({
|
|
|
+ inline: true,
|
|
|
+ labelWidth: 100,
|
|
|
+ itemWidth: 100,
|
|
|
+ rules: [],
|
|
|
+});
|
|
|
+const formData = reactive({
|
|
|
+ data: {},
|
|
|
+});
|
|
|
+const formConfig = computed(() => {
|
|
|
return [
|
|
|
{
|
|
|
- attrs: {
|
|
|
- label: "采购单号",
|
|
|
- prop: "code",
|
|
|
- "min-width": 180,
|
|
|
- },
|
|
|
+ type: "slot",
|
|
|
+ prop: "parentId",
|
|
|
+ slotName: "parentId",
|
|
|
+ label: "上级分类",
|
|
|
},
|
|
|
- // {
|
|
|
- // attrs: {
|
|
|
- // label: "供应商",
|
|
|
- // prop: "sellCorporationId",
|
|
|
- // "min-width": 220,
|
|
|
- // },
|
|
|
- // render(type) {
|
|
|
- // return proxy.dictValueLabel(type, supplierList.value);
|
|
|
- // },
|
|
|
- // },
|
|
|
{
|
|
|
- attrs: {
|
|
|
- label: "操作",
|
|
|
- width: 160,
|
|
|
- align: "center",
|
|
|
- fixed: "right",
|
|
|
- },
|
|
|
- renderHTML(row) {
|
|
|
- return [];
|
|
|
- },
|
|
|
+ type: "input",
|
|
|
+ prop: "name",
|
|
|
+ label: "分类名称",
|
|
|
+ itemType: "text",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ prop: "code",
|
|
|
+ label: "分类编码",
|
|
|
+ itemType: "text",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "number",
|
|
|
+ prop: "sort",
|
|
|
+ label: "排序",
|
|
|
+ precision: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ prop: "remark",
|
|
|
+ label: "备注",
|
|
|
+ itemType: "textarea",
|
|
|
},
|
|
|
];
|
|
|
});
|
|
|
-const getDict = () => {
|
|
|
- proxy.getDictOne(["order_status"]).then((res) => {
|
|
|
- if (res["order_status"] && res["order_status"].length > 0) {
|
|
|
- orderStatus.value = res["order_status"].map((x) => ({
|
|
|
- label: x.dictValue,
|
|
|
- value: x.dictKey,
|
|
|
- }));
|
|
|
- }
|
|
|
+const rules = ref({
|
|
|
+ parentId: [{ required: true, message: "请选择上级分类", trigger: "change" }],
|
|
|
+ name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
|
|
|
+ code: [{ required: true, message: "请输入分类编码", trigger: "blur" }],
|
|
|
+});
|
|
|
+const btnLoading = ref(false);
|
|
|
+const openModal = () => {
|
|
|
+ modalType.value = "add";
|
|
|
+ formData.data = {};
|
|
|
+ btnLoading.value = false;
|
|
|
+ openDialog.value = true;
|
|
|
+};
|
|
|
+const addChildNode = (row) => {
|
|
|
+ modalType.value = "add";
|
|
|
+ formData.data = {
|
|
|
+ parentId: row.id,
|
|
|
+ };
|
|
|
+ btnLoading.value = false;
|
|
|
+ openDialog.value = true;
|
|
|
+};
|
|
|
+const submitForm = () => {
|
|
|
+ submit.value.handleSubmit(() => {
|
|
|
+ btnLoading.value = true;
|
|
|
+ proxy.post("/bomClassify/" + modalType.value, formData.data).then(
|
|
|
+ () => {
|
|
|
+ ElMessage({
|
|
|
+ message: modalType.value == "add" ? "添加成功" : "编辑成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ openDialog.value = false;
|
|
|
+ btnLoading.value = false;
|
|
|
+ getList();
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ console.log(err);
|
|
|
+ btnLoading.value = false;
|
|
|
+ }
|
|
|
+ );
|
|
|
});
|
|
|
};
|
|
|
-getDict();
|
|
|
-const getList = async (req) => {
|
|
|
- console.log(req);
|
|
|
- // sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
|
|
|
- // loading.value = true;
|
|
|
- // proxy.post("/ehsdPurchase/page", sourceList.value.pagination).then((res) => {
|
|
|
- // console.log(res);
|
|
|
- // sourceList.value.data = res.rows;
|
|
|
- // sourceList.value.pagination.total = res.total;
|
|
|
- // setTimeout(() => {
|
|
|
- // loading.value = false;
|
|
|
- // }, 200);
|
|
|
- // });
|
|
|
+const clickUpdate = (row) => {
|
|
|
+ modalType.value = "edit";
|
|
|
+ formData.data = {
|
|
|
+ id: row.id,
|
|
|
+ parentId: row.parentId,
|
|
|
+ name: row.name,
|
|
|
+ code: row.code,
|
|
|
+ sort: row.sort,
|
|
|
+ remark: row.remark,
|
|
|
+ };
|
|
|
+ btnLoading.value = false;
|
|
|
+ openDialog.value = true;
|
|
|
+};
|
|
|
+const clickDelete = (row) => {
|
|
|
+ ElMessageBox.confirm("你是否确认此操作", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ }).then(() => {
|
|
|
+ proxy.post("/bomClassify/delete", { id: row.id }).then(() => {
|
|
|
+ ElMessage({ message: "删除成功", type: "success" });
|
|
|
+ getList();
|
|
|
+ });
|
|
|
+ });
|
|
|
};
|
|
|
-getList();
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-.tenant {
|
|
|
- padding: 10px;
|
|
|
-}
|
|
|
-</style>
|
|
|
+<style lang="scss" scoped></style>
|
