| | |
| | | <el-button type="primary" @click="openProDia('add')" style="margin-left: 10px">新增产品</el-button> |
| | | </div> |
| | | <div> |
| | | <el-tree ref="tree" v-loading="treeLoad" :data="list" |
| | | <el-tree ref="tree" v-loading="treeLoad" :data="list" @node-click="handleNodeClick" |
| | | :expand-on-click-node="false" |
| | | :default-expanded-keys="expandedKeys" :draggable="true" :filter-node-method="filterNode" |
| | | :props="{ children: 'children', label: 'label' }" highlight-current node-key="label" |
| | | :props="{ children: 'children', label: 'label' }" highlight-current node-key="id" |
| | | style="height: calc(100vh - 190px);overflow-y: scroll;scrollbar-width: none;"> |
| | | <template #default="{ node, data }"> |
| | | <div class="custom-tree-node"> |
| | |
| | | </div> |
| | | <div class="right"> |
| | | <div style="margin-bottom: 10px"> |
| | | <el-button type="primary" @click="modelDia = true">新增规格型号</el-button> |
| | | <el-button type="primary" @click="openModelDia('add')">新增规格型号</el-button> |
| | | <el-button type="danger" @click="handleDelete" style="margin-left: 10px" plain>删除</el-button> |
| | | </div> |
| | | <PIMTable :column="tableColumn" :tableData="tableData" :page="page" :isSelection="true" :handleSelectionChange="handleSelectionChange" |
| | | :tableLoading="tableLoading" @pagination="pagination" :total="total"></PIMTable> |
| | | </div> |
| | | <el-dialog :visible.sync="productDia" title="产品" width="400px"> |
| | | <el-dialog v-model="productDia" title="产品" width="400px"> |
| | | <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef"> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="24"> |
| | |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | <el-dialog v-model="modelDia" title="产品" width="400px"> |
| | | <el-form :model="modelForm" label-width="140px" label-position="top" :rules="modelRules" ref="modelFormRef"> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="规格型号:" prop="model"> |
| | | <el-input v-model="modelForm.model" placeholder="请输入规格型号" clearable/> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="单位:" prop="unit"> |
| | | <el-input v-model="modelForm.unit" placeholder="请输入单位" clearable/> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button type="primary" @click="submitModelForm">确认</el-button> |
| | | <el-button @click="closeProDia">取消</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {ref} from "vue"; |
| | | import {listCustomer} from "@/api/basicData/customerFile.js"; |
| | | import {ElMessageBox} from "element-plus"; |
| | | import {productTreeList} from "@/api/basicData/product.js"; |
| | | import { |
| | | addOrEditProduct, |
| | | addOrEditProductModel, |
| | | delProduct, delProductModel, |
| | | modelList, |
| | | productTreeList |
| | | } from "@/api/basicData/product.js"; |
| | | const { proxy } = getCurrentInstance() |
| | | |
| | | const productDia = ref(false) |
| | | const modelDia = ref(false) |
| | | const modelOperationType = ref('') |
| | | const search = ref('') |
| | | const currentId = ref('') |
| | | const currentParentId = ref('') |
| | | const operationType = ref('') |
| | | const treeLoad = ref(false) |
| | | const list = ref([]) |
| | | const expandedKeys = ref([]) |
| | |
| | | }, |
| | | { |
| | | label: '单位', |
| | | prop: 'model', |
| | | prop: 'unit', |
| | | }, |
| | | { |
| | | dataType: "action", |
| | |
| | | name: "编辑", |
| | | type: "text", |
| | | clickFun: (row) => { |
| | | openForm('edit', row); |
| | | openModelDia('edit', row); |
| | | }, |
| | | }, |
| | | ], |
| | |
| | | current: 1, |
| | | size: 10, |
| | | }) |
| | | const productDia = ref(false) |
| | | const modelDia = ref(false) |
| | | const data = reactive({ |
| | | form: { |
| | | productName: '', |
| | | }, |
| | | rules: { |
| | | productName: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | }, |
| | | modelForm: { |
| | | model: '', |
| | | unit: '', |
| | | }, |
| | | modelRules: { |
| | | model: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | unit: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | } |
| | | }) |
| | | const { form, rules } = toRefs(data) |
| | | const { form, rules, modelForm, modelRules } = toRefs(data) |
| | | // 查询产品树 |
| | | const getProductTreeList = () => { |
| | | treeLoad.value = true; |
| | | productTreeList().then(res => { |
| | |
| | | treeLoad.value = false; |
| | | }) |
| | | } |
| | | // 过滤产品树 |
| | | const searchFilter = () => { |
| | | proxy.$refs.tree.filter(search.value); |
| | | } |
| | | // 打开产品弹框 |
| | | const openProDia = (type, data) => { |
| | | operationType.value = type; |
| | | productDia.value = true |
| | | console.log('openEditDia', data) |
| | | form.value.productName = '' |
| | | if (type === 'edit') { |
| | | form.value.productName = data.productName |
| | | } |
| | | } |
| | | // 打开规格型号弹框 |
| | | const openModelDia = (type, data) => { |
| | | modelOperationType.value = type; |
| | | modelDia.value = true |
| | | modelForm.value.model = '' |
| | | modelForm.value.model = '' |
| | | modelForm.value.id = '' |
| | | if (type === 'edit') { |
| | | modelForm.value = {...data} |
| | | } |
| | | } |
| | | // 提交产品名称修改 |
| | | const submitForm = () => { |
| | | proxy.$refs.formRef.validate(valid => { |
| | | if (valid) { |
| | | if (operationType.value === 'add') { |
| | | form.value.parentId = currentId.value |
| | | form.value.id = '' |
| | | } else { |
| | | form.value.id = currentId.value |
| | | form.value.parentId = '' |
| | | } |
| | | addOrEditProduct(form.value).then(res => { |
| | | proxy.$modal.msgSuccess("提交成功") |
| | | closeProDia() |
| | | getProductTreeList() |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | // 关闭产品弹框 |
| | | const closeProDia = () => { |
| | | proxy.$refs.formRef.resetFields(); |
| | | productDia.value = false; |
| | | } |
| | | const remove = (value) => { |
| | | // 删除产品 |
| | | const remove = (node, data) => { |
| | | let ids = [] |
| | | ids.push(data.id) |
| | | ElMessageBox.confirm( |
| | | '选中的内容将被删除,是否确认删除?', |
| | | '删除提示', { |
| | | confirmButtonText: '确认', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | } |
| | | ).then(() => { |
| | | tableLoading.value = true |
| | | delProduct(ids).then(res => { |
| | | proxy.$modal.msgSuccess("删除成功") |
| | | getProductTreeList() |
| | | }).finally(() => { |
| | | tableLoading.value = false |
| | | }) |
| | | }).catch(() => { |
| | | proxy.$modal.msg("已取消") |
| | | }) |
| | | } |
| | | // 选择产品 |
| | | const handleNodeClick = (val, node, el) => { |
| | | currentId.value = val.id |
| | | currentParentId.value = val.parentId |
| | | getModelList() |
| | | } |
| | | |
| | | |
| | | // 提交规格型号修改 |
| | | const submitModelForm = () => { |
| | | proxy.$refs.modelFormRef.validate(valid => { |
| | | if (valid) { |
| | | modelForm.value.productId = currentId.value |
| | | addOrEditProductModel(modelForm.value).then(res => { |
| | | proxy.$modal.msgSuccess("提交成功") |
| | | closeModelDia() |
| | | getModelList() |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | // 关闭产品弹框 |
| | | const closeModelDia = () => { |
| | | proxy.$refs.modelFormRef.resetFields(); |
| | | modelDia.value = false; |
| | | } |
| | | // 表格选择数据 |
| | | const handleSelectionChange = (selection) => { |
| | | selectedRows.value = selection |
| | | } |
| | | // 删除 |
| | | |
| | | // 查询规格型号 |
| | | const pagination = ({ current, limit }) => { |
| | | page.current = current; |
| | | page.size = limit; |
| | | getModelList() |
| | | } |
| | | const getModelList = () => { |
| | | tableLoading.value = true |
| | | modelList({id: currentId.value}).then(res => { |
| | | tableLoading.value = false |
| | | tableData.value = res |
| | | }) |
| | | } |
| | | // 删除规格型号 |
| | | const handleDelete = () => { |
| | | let ids = [] |
| | | if (selectedRows.value.length > 0) { |
| | |
| | | } |
| | | ).then(() => { |
| | | tableLoading.value = true |
| | | delCustomer(ids).then(res => { |
| | | delProductModel(ids).then(res => { |
| | | proxy.$modal.msgSuccess("删除成功") |
| | | getList() |
| | | getModelList() |
| | | }).finally(() => { |
| | | tableLoading.value = false |
| | | }) |
| | | }).catch(() => { |
| | | proxy.$modal.msg("已取消") |
| | | }) |
| | | } |
| | | // 查询规格型号 |
| | | const pagination = ({ current, limit }) => { |
| | | page.current = current; |
| | | page.size = limit; |
| | | getList() |
| | | } |
| | | const getList = () => { |
| | | tableLoading.value = true |
| | | listCustomer({...searchForm.value, ...page}).then(res => { |
| | | tableLoading.value = false |
| | | tableData.value = res.rows |
| | | total.value = res.total |
| | | }) |
| | | } |
| | | // 调用tree过滤方法 中文英过滤 |