| | |
| | | <div> |
| | | <el-input |
| | | v-model="search" |
| | | style="width: 240px" |
| | | style="width: 210px" |
| | | placeholder="输入关键字进行搜索" |
| | | @change="searchFilter" |
| | | @clear="searchFilter" |
| | | clearable |
| | | prefix-icon="Search" |
| | | /> |
| | | <el-button type="primary" @click="openProDia('add')" style="margin-left: 10px">新增产品</el-button> |
| | | <el-button type="primary" @click="openProDia('addOne')" style="margin-left: 10px">新增产品大类</el-button> |
| | | </div> |
| | | <div> |
| | | <div ref="containerRef"> |
| | | <el-tree ref="tree" v-loading="treeLoad" :data="list" @node-click="handleNodeClick" |
| | | :expand-on-click-node="false" |
| | | :expand-on-click-node="false" default-expand-all |
| | | :default-expanded-keys="expandedKeys" :draggable="true" :filter-node-method="filterNode" |
| | | :props="{ children: 'children', label: 'label' }" highlight-current node-key="id" |
| | | style="height: calc(100vh - 190px);overflow-y: scroll;scrollbar-width: none;"> |
| | |
| | | <el-button type="primary" link @click="openProDia('edit', data)"> |
| | | 编辑 |
| | | </el-button> |
| | | <!-- 修改此处 --> |
| | | <el-button type="primary" link @click="openProDia('add', data)"> |
| | | 添加产品 |
| | | </el-button> |
| | | <el-button |
| | | v-if="!node.childNodes.length" |
| | | style="margin-left: 4px" |
| | |
| | | </div> |
| | | </div> |
| | | <div class="right"> |
| | | <div style="margin-bottom: 10px"> |
| | | <div style="margin-bottom: 10px" v-if="isShowButton"> |
| | | <el-button type="primary" @click="openModelDia('add')">新增规格型号</el-button> |
| | | <el-button type="danger" @click="handleDelete" style="margin-left: 10px" plain>删除</el-button> |
| | | </div> |
| | |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | <el-dialog v-model="modelDia" title="产品" width="400px"> |
| | | <el-dialog v-model="modelDia" title="规格型号" width="400px" @close="closeModelDia"> |
| | | <el-form :model="modelForm" label-width="140px" label-position="top" :rules="modelRules" ref="modelFormRef"> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button type="primary" @click="submitModelForm">确认</el-button> |
| | | <el-button @click="closeProDia">取消</el-button> |
| | | <el-button @click="closeModelDia">取消</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | |
| | | productTreeList |
| | | } from "@/api/basicData/product.js"; |
| | | const { proxy } = getCurrentInstance() |
| | | const tree = ref(null) |
| | | const containerRef = ref(null) |
| | | |
| | | const productDia = ref(false) |
| | | const modelDia = ref(false) |
| | |
| | | ]) |
| | | const tableData = ref([]) |
| | | const tableLoading = ref(false) |
| | | const isShowButton = ref(false) |
| | | const total = ref(0) |
| | | const selectedRows = ref([]) |
| | | const page = reactive({ |
| | |
| | | if (operationType.value === 'add') { |
| | | form.value.parentId = currentId.value |
| | | form.value.id = '' |
| | | } else if (operationType.value === 'addOne') { |
| | | form.value.id = '' |
| | | form.value.parentId = '' |
| | | } else { |
| | | form.value.id = currentId.value |
| | | form.value.parentId = '' |
| | |
| | | } |
| | | // 选择产品 |
| | | const handleNodeClick = (val, node, el) => { |
| | | // 判断是否为叶子节点 |
| | | isShowButton.value = !(val.children && val.children.length > 0); |
| | | // 只有叶子节点才执行以下逻辑 |
| | | currentId.value = val.id |
| | | currentParentId.value = val.parentId |
| | | getModelList() |
| | |
| | | } |
| | | }) |
| | | } |
| | | // 关闭产品弹框 |
| | | // 关闭型号弹框 |
| | | const closeModelDia = () => { |
| | | proxy.$refs.modelFormRef.resetFields(); |
| | | modelDia.value = false; |