From 65c6a24024ad223ba2bdffee2c4c3d47b2d3f456 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期四, 12 三月 2026 17:36:23 +0800
Subject: [PATCH] 下发流程修改、产品维护增加拉取数据
---
src/views/basicData/product/index.vue | 1305 ++++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 887 insertions(+), 418 deletions(-)
diff --git a/src/views/basicData/product/index.vue b/src/views/basicData/product/index.vue
index 3f0921a..c6a9795 100644
--- a/src/views/basicData/product/index.vue
+++ b/src/views/basicData/product/index.vue
@@ -2,67 +2,72 @@
<div class="app-container product-view">
<div class="left">
<div>
- <el-input
- v-model="search"
- style="width: 210px"
- placeholder="杈撳叆鍏抽敭瀛楄繘琛屾悳绱�"
- @change="searchFilter"
- @clear="searchFilter"
- clearable
- prefix-icon="Search"
- />
- <el-button
- type="primary"
- @click="openProDia('addOne')"
- style="margin-left: 10px"
- >鏂板浜у搧澶х被</el-button
- >
+ <el-input v-model="search"
+ style="width: 210px"
+ placeholder="杈撳叆鍏抽敭瀛楄繘琛屾悳绱�"
+ @change="searchFilter"
+ @clear="searchFilter"
+ clearable
+ prefix-icon="Search" />
+ <el-button type="primary"
+ @click="openProDia1('addOne')"
+ style="margin-left: 10px">鏂板浜у搧澶х被</el-button>
+ <el-button type="primary"
+ @click="getloadData"
+ style="margin-left: 10px">鎷夊彇鏁版嵁</el-button>
</div>
<div ref="containerRef">
- <el-tree
- ref="tree"
- v-loading="treeLoad"
- :data="list"
- @node-click="handleNodeClick"
- :expand-on-click-node="false"
- :default-expanded-keys="expandedKeys"
- :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-tree ref="tree"
+ v-loading="treeLoad"
+ :data="list"
+ @node-click="handleNodeClick"
+ :expand-on-click-node="false"
+ :default-expanded-keys="expandedKeys"
+ :filter-node-method="filterNode"
+ :props="{ children: 'children', label: 'label' }"
+ highlight-current
+ node-key="id"
+ class="product-tree-scroll">
<template #default="{ node, data }">
<div class="custom-tree-node">
<span class="tree-node-content">
- <el-icon class="orange-icon">
+ <el-icon class="tree-icon">
<component :is="data.children && data.children.length > 0
? node.expanded ? 'FolderOpened' : 'Folder' : 'Tickets'" />
</el-icon>
- {{ data.label }}
+ <span class="tree-node-label">{{ data.label }}</span>
</span>
- <div>
- <el-button
- type="primary"
- link
- @click="openProDia('edit', data)"
- >
+ <div v-if="data.isLeaf">
+ <el-button type="primary"
+ link
+ @click="openProDia('edit', data)">
缂栬緫
</el-button>
- <el-button type="primary" link @click="openProDia('add', data)" :disabled="node.level >= 3">
+ <el-button v-if="!node.childNodes.length"
+ style="margin-left: 4px"
+ type="danger"
+ link
+ @click="remove(node, data)">
+ 鍒犻櫎
+ </el-button>
+ </div>
+ <div v-else>
+ <!-- 澶х被 -->
+ <el-button type="primary"
+ link
+ @click="openProDia1('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"
- type="danger"
- link
- @click="remove(node, data)"
- >
+ <el-button style="margin-left: 4px"
+ type="danger"
+ v-if="!node.childNodes.length"
+ link
+ @click="remove1(node, data)">
鍒犻櫎
</el-button>
</div>
@@ -72,102 +77,189 @@
</div>
</div>
<div class="right">
- <div style="margin-bottom: 10px" v-if="isShowButton">
- <el-button type="primary" @click="openModelDia('add')">
+ <div style="margin-bottom: 10px"
+ v-if="isShowButton">
+ <el-button type="primary"
+ @click="openModelDia('add')">
鏂板瑙勬牸鍨嬪彿
</el-button>
- <ImportExcel @uploadSuccess="getModelList" />
- <el-button
- type="danger"
- @click="handleDelete"
- style="margin-left: 10px"
- plain
- >
+ <ImportExcel :product-id="currentId"
+ @uploadSuccess="getModelList" />
+ <el-button type="danger"
+ @click="handleDelete"
+ style="margin-left: 10px"
+ plain>
鍒犻櫎
</el-button>
</div>
- <PIMTable
- rowKey="id"
- :column="tableColumn"
- :tableData="tableData"
- :page="page"
- :isSelection="true"
- @selection-change="handleSelectionChange"
- :tableLoading="tableLoading"
- @pagination="pagination"
- ></PIMTable>
+ <PIMTable rowKey="id"
+ :column="tableColumn"
+ :tableData="tableData"
+ :isSelection="true"
+ :isShowPagination="false"
+ @selection-change="handleSelectionChange"
+ :tableLoading="tableLoading"></PIMTable>
</div>
- <el-dialog v-model="productDia" title="浜у搧" width="400px" @keydown.enter.prevent>
- <el-form
- :model="form"
- label-width="140px"
- label-position="top"
- :rules="rules"
- ref="formRef"
- >
+ <el-dialog v-model="productDia"
+ title="浜у搧"
+ width="400px"
+ @keydown.enter.prevent>
+ <el-form :model="form"
+ label-width="140px"
+ label-position="top"
+ :rules="rules"
+ ref="formRef">
<el-row :gutter="30">
<el-col :span="24">
- <el-form-item label="浜у搧鍚嶇О锛�" prop="productName">
- <el-input
- v-model="form.productName"
- placeholder="璇疯緭鍏ヤ骇鍝佸悕绉�"
- clearable
- @keydown.enter.prevent
- />
+ <el-form-item label="浜у搧鍚嶇О锛�"
+ prop="materialName">
+ <el-input v-model="form.materialName"
+ placeholder="璇疯緭鍏ヤ骇鍝佸悕绉�"
+ maxlength="20"
+ show-word-limit
+ clearable
+ @keydown.enter.prevent />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="30">
+ <el-col :span="24">
+ <el-form-item label="瀛樿揣绫诲埆锛�"
+ prop="inventoryCategoryId">
+ <el-select v-model="form.inventoryCategoryId"
+ placeholder="璇烽�夋嫨瀛樿揣绫诲埆"
+ clearable
+ style="width: 100%">
+ <el-option v-for="item in inventoryCategoryList"
+ :key="item.id"
+ :label="item.configName"
+ :value="item.id" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="30">
+ <el-col :span="24">
+ <el-form-item label="鐗╂枡绫诲瀷锛�"
+ prop="materialTypeId">
+ <el-select v-model="form.materialTypeId"
+ placeholder="璇烽�夋嫨鐗╂枡绫诲瀷"
+ clearable
+ style="width: 100%">
+ <el-option v-for="item in materialTypeList"
+ :key="item.id"
+ :label="item.configName"
+ :value="item.id" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="30">
+ <el-col :span="24">
+ <el-form-item label="鍩烘湰鍗曚綅锛�"
+ prop="baseUnit">
+ <el-input v-model="form.baseUnit"
+ placeholder="璇疯緭鍏ュ熀鏈崟浣�"
+ clearable
+ @keydown.enter.prevent />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="30">
+ <el-col :span="24">
+ <el-form-item label="澶囨敞锛�">
+ <el-input v-model="form.remark"
+ placeholder="璇疯緭鍏ュ娉�"
+ type="textarea"
+ :rows="3"
+ clearable
+ @keydown.enter.prevent />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
- <el-button type="primary" @click="submitForm">纭</el-button>
+ <el-button type="primary"
+ @click="submitForm">纭</el-button>
<el-button @click="closeProDia">鍙栨秷</el-button>
</div>
</template>
</el-dialog>
- <el-dialog
- v-model="modelDia"
- title="瑙勬牸鍨嬪彿"
- width="400px"
- @close="closeModelDia"
- @keydown.enter.prevent
- >
- <el-form
- :model="modelForm"
- label-width="140px"
- label-position="top"
- :rules="modelRules"
- ref="modelFormRef"
- >
+ <el-dialog v-model="modelDia"
+ title="瑙勬牸鍨嬪彿"
+ width="400px"
+ @close="closeModelDia"
+ @keydown.enter.prevent>
+ <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
- @keydown.enter.prevent
- />
+ <el-form-item label="瑙勬牸鍨嬪彿锛�"
+ prop="specification">
+ <el-input v-model="modelForm.specification"
+ placeholder="璇疯緭鍏ヨ鏍煎瀷鍙�"
+ clearable
+ @keydown.enter.prevent />
</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
- @keydown.enter.prevent
- />
+ <el-form-item label="渚涘簲鏂瑰紡锛�"
+ prop="supplyType">
+ <el-select v-model="modelForm.supplyType"
+ placeholder="璇烽�夋嫨渚涘簲鏂瑰紡"
+ clearable
+ style="width: 100%">
+ <el-option label="鑷埗"
+ value="鑷埗" />
+ <el-option label="澶栬喘"
+ value="澶栬喘" />
+ </el-select>
</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 type="primary"
+ @click="submitModelForm">纭</el-button>
<el-button @click="closeModelDia">鍙栨秷</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ <el-dialog v-model="configDia"
+ title="浜у搧澶х被"
+ width="400px"
+ @keydown.enter.prevent>
+ <el-form :model="configForm"
+ label-width="140px"
+ label-position="top"
+ :rules="configRules"
+ ref="configFormRef">
+ <el-row :gutter="30">
+ <el-col :span="24">
+ <el-form-item label="閰嶇疆鍚嶇О锛�"
+ prop="configName">
+ <el-input v-model="configForm.configName"
+ placeholder="璇疯緭鍏ラ厤缃悕绉�"
+ maxlength="20"
+ show-word-limit
+ clearable
+ @keydown.enter.prevent />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button type="primary"
+ @click="submitConfigForm">纭</el-button>
+ <el-button @click="closeConfigDia">鍙栨秷</el-button>
</div>
</template>
</el-dialog>
@@ -175,324 +267,701 @@
</template>
<script setup>
-import { ref } from "vue";
-import { ElMessageBox } from "element-plus";
-import {
- addOrEditProduct,
- addOrEditProductModel,
- delProduct,
- delProductModel,
- modelListPage,
- productTreeList,
-} from "@/api/basicData/product.js";
-import ImportExcel from "./ImportExcel/index.vue";
+ import { ref } from "vue";
+ import { ElMessageBox } from "element-plus";
+ import {
+ addOrEditProduct,
+ updateOrEditProduct,
+ getinventoryCategoryList,
+ getmaterialTypeList,
+ addOrEditProductModel,
+ updateOrEditProductModel,
+ delProduct,
+ delProductModel,
+ modelListPage,
+ productTreeList,
+ addOrEditProductConfig,
+ updateOrEditProductConfig,
+ delProductConfig,
+ loadData,
+ } from "@/api/basicData/newProduct.js";
+ import ImportExcel from "./ImportExcel/index.vue";
-const { proxy } = getCurrentInstance();
-const tree = ref(null);
-const containerRef = ref(null);
+ const { proxy } = getCurrentInstance();
+ const tree = ref(null);
+ const containerRef = ref(null);
-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([]);
-const tableColumn = ref([
- {
- label: "瑙勬牸鍨嬪彿",
- prop: "model",
- },
- {
- label: "鍗曚綅",
- prop: "unit",
- },
- {
- dataType: "action",
- label: "鎿嶄綔",
- align: "center",
- operation: [
- {
- name: "缂栬緫",
- type: "text",
- clickFun: (row) => {
- openModelDia("edit", row);
- },
- },
- ],
- },
-]);
-const tableData = ref([]);
-const tableLoading = ref(false);
-const isShowButton = ref(false);
-const selectedRows = ref([]);
-const page = reactive({
- current: 1,
- size: 10,
- total: 0,
-});
-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, modelForm, modelRules } = toRefs(data);
-// 鏌ヨ浜у搧鏍�
-const getProductTreeList = () => {
- treeLoad.value = true;
- productTreeList()
- .then((res) => {
- list.value = res;
- list.value.forEach((a) => {
- expandedKeys.value.push(a.label);
- });
- treeLoad.value = false;
- })
- .catch((err) => {
- treeLoad.value = false;
- });
-};
-// 杩囨护浜у搧鏍�
-const searchFilter = () => {
- proxy.$refs.tree.filter(search.value);
-};
-// 鎵撳紑浜у搧寮规
-const openProDia = (type, data) => {
- operationType.value = type;
- productDia.value = true;
- 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 if (operationType.value === "addOne") {
- form.value.id = "";
- form.value.parentId = "";
- } else {
- form.value.id = currentId.value;
- form.value.parentId = "";
- }
- addOrEditProduct(form.value).then((res) => {
- proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
- closeProDia();
+ const productDia = ref(false);
+ const modelDia = ref(false);
+ const configDia = ref(false);
+ const modelOperationType = ref("");
+ const configOperationType = ref("");
+ const search = ref("");
+ const currentId = ref("");
+ const currentParentId = ref("");
+ const operationType = ref("");
+ const treeLoad = ref(false);
+ const list = ref([]);
+ const expandedKeys = ref([]);
+ const inventoryCategoryList = ref([]);
+ const materialTypeList = ref([]);
+
+ const getloadData = () => {
+ loadData()
+ .then(res => {
+ getInventoryCategoryList();
+ getMaterialTypeList();
getProductTreeList();
+ tableData.value = [];
+ isShowButton.value = false;
+ })
+ .catch(err => {
+ console.error("鎷夊彇澶辫触:", err);
});
- }
- });
-};
-// 鍏抽棴浜у搧寮规
-const closeProDia = () => {
- proxy.$refs.formRef.resetFields();
- productDia.value = false;
-};
+ };
-// 鍒犻櫎浜у搧
-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) => {
- // 鍒ゆ柇鏄惁涓哄彾瀛愯妭鐐�
- isShowButton.value = !(val.children && val.children.length > 0);
- // 鍙湁鍙跺瓙鑺傜偣鎵嶆墽琛屼互涓嬮�昏緫
- 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 getInventoryCategoryList = () => {
+ getinventoryCategoryList()
+ .then(res => {
+ inventoryCategoryList.value = res.data.map(item => ({
+ id: item.id,
+ configName: item.configName,
+ }));
+ })
+ .catch(err => {
+ console.error("鑾峰彇瀛樿揣绫诲埆澶辫触:", err);
});
- }
- });
-};
-// 鍏抽棴鍨嬪彿寮规
-const closeModelDia = () => {
- proxy.$refs.modelFormRef.resetFields();
- modelDia.value = false;
-};
-// 琛ㄦ牸閫夋嫨鏁版嵁
-const handleSelectionChange = (selection) => {
- selectedRows.value = selection;
-};
+ };
-// 鏌ヨ瑙勬牸鍨嬪彿
-const pagination = (obj) => {
- page.current = obj.page;
- page.size = obj.limit;
- getModelList();
-};
-const getModelList = () => {
- tableLoading.value = true;
- modelListPage({
- id: currentId.value,
- current: page.current,
- size: page.size,
- }).then((res) => {
- console.log("res", res);
- tableData.value = res.records;
- page.total = res.total;
- tableLoading.value = false;
+ // 鑾峰彇鐗╂枡绫诲瀷鍒楄〃
+ const getMaterialTypeList = () => {
+ getmaterialTypeList()
+ .then(res => {
+ materialTypeList.value = res.data.map(item => ({
+ id: item.id,
+ configName: item.configName,
+ }));
+ })
+ .catch(err => {
+ console.error("鑾峰彇鐗╂枡绫诲瀷澶辫触:", err);
+ });
+ };
+ const tableColumn = ref([
+ {
+ label: "瑙勬牸鍨嬪彿",
+ prop: "materialName",
+ },
+ {
+ label: "瑙勬牸",
+ prop: "specification",
+ },
+ {
+ label: "鍗曚綅",
+ prop: "baseUnit",
+ },
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ operation: [
+ {
+ name: "缂栬緫",
+ type: "text",
+ clickFun: row => {
+ openModelDia("edit", row);
+ },
+ },
+ ],
+ },
+ ]);
+ const tableData = ref([]);
+ const tableLoading = ref(false);
+ const isShowButton = ref(false);
+ const selectedRows = ref([]);
+
+ const data = reactive({
+ form: {
+ materialTypeId: null,
+ inventoryCategoryId: null,
+ materialName: "",
+ baseUnit: "",
+ remark: "",
+ },
+ rules: {
+ materialName: [
+ { required: true, message: "璇疯緭鍏�", trigger: "blur" },
+ { max: 20, message: "浜у搧鍚嶇О涓嶈兘瓒呰繃20涓瓧绗�", trigger: "blur" },
+ ],
+ inventoryCategoryId: [
+ { required: true, message: "璇烽�夋嫨", trigger: "change" },
+ ],
+ baseUnit: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ },
+ modelForm: {
+ specification: "",
+ supplyType: "",
+ id: null,
+ },
+ modelRules: {
+ specification: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ supplyType: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }],
+ },
+ configForm: {
+ configName: "",
+ type: 1,
+ id: null,
+ },
+ configRules: {
+ configName: [
+ { required: true, message: "璇疯緭鍏�", trigger: "blur" },
+ { max: 20, message: "閰嶇疆鍚嶇О涓嶈兘瓒呰繃20涓瓧绗�", trigger: "blur" },
+ ],
+ },
});
-};
-// 鍒犻櫎瑙勬牸鍨嬪彿
-const handleDelete = () => {
- let ids = [];
- if (selectedRows.value.length > 0) {
- ids = selectedRows.value.map((item) => item.id);
- } else {
- proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
- return;
- }
- ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎鎻愮ず", {
- confirmButtonText: "纭",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- })
- .then(() => {
- tableLoading.value = true;
- delProductModel(ids)
- .then((res) => {
- proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
- getModelList();
- })
- .finally(() => {
- tableLoading.value = false;
- });
- })
- .catch(() => {
- proxy.$modal.msg("宸插彇娑�");
+ const { form, rules, modelForm, modelRules, configForm, configRules } =
+ toRefs(data);
+ // 鏌ヨ浜у搧鏍�
+ const getProductTreeList = () => {
+ treeLoad.value = true;
+ productTreeList()
+ .then(res => {
+ // 杞崲鏂扮殑鏁版嵁鏍煎紡
+ const newList = [];
+ expandedKeys.value = [];
+ for (const category of res.data) {
+ // 娣诲姞鍒嗙被鑺傜偣
+ const categoryNode = {
+ label: category.configName,
+ id: category.configId,
+ isLeaf: false,
+ children: category.materialList.map(item => ({
+ id: item.id,
+ isLeaf: true,
+ label: item.materialName,
+ inventoryCategoryId: item.inventoryCategoryId,
+ materialTypeId: item.materialTypeId,
+ remark: item.remark,
+ baseUnit: item.baseUnit,
+ })),
+ };
+ newList.push(categoryNode);
+ expandedKeys.value.push(category.configName);
+ }
+ list.value = newList;
+ treeLoad.value = false;
+ })
+ .catch(err => {
+ treeLoad.value = false;
+ });
+ };
+ // 杩囨护浜у搧鏍�
+ const searchFilter = () => {
+ proxy.$refs.tree.filter(search.value);
+ };
+ // 鎵撳紑浜у搧寮规
+ const openProDia = (type, data) => {
+ operationType.value = type;
+ productDia.value = true;
+ // 閲嶇疆琛ㄥ崟
+ form.value = {
+ materialName: "",
+ inventoryCategoryId: null,
+ baseUnit: "",
+ remark: "",
+ materialTypeId: null,
+ };
+ console.log(data);
+ if (type === "edit" && data) {
+ // 缂栬緫妯″紡锛屽洖濉暟鎹�
+ form.value.materialName = data.label || "";
+ form.value.inventoryCategoryId = data.inventoryCategoryId || null;
+ form.value.baseUnit = data.baseUnit || "";
+ form.value.remark = data.remark || "";
+ form.value.materialTypeId = data.materialTypeId || null;
+ form.value.id = data.id || null;
+ } else {
+ form.value.materialTypeId = data.id || null;
+ }
+ };
+ // 鎵撳紑浜у搧澶х被寮规
+ const openProDia1 = (type, data) => {
+ configOperationType.value = type;
+ configDia.value = true;
+ // 閲嶇疆琛ㄥ崟
+ configForm.value = {
+ configName: "",
+ type: 1,
+ id: null,
+ };
+ if (type === "edit" && data) {
+ // 缂栬緫妯″紡锛屽洖濉暟鎹�
+ configForm.value.configName = data.label || "";
+ configForm.value.id = data.id || null;
+ }
+ };
+ // 鎵撳紑瑙勬牸鍨嬪彿寮规
+ const openModelDia = (type, data) => {
+ modelOperationType.value = type;
+ modelDia.value = true;
+ // 閲嶇疆鎵�鏈夊瓧娈�
+ modelForm.value.specification = "";
+ modelForm.value.supplyType = "";
+ modelForm.value.id = null;
+
+ if (type === "edit" && data) {
+ // 缂栬緫妯″紡锛屽洖濉暟鎹�
+ modelForm.value.specification = data.specification || "";
+ modelForm.value.supplyType = data.supplyType || "";
+ modelForm.value.id = data.skuId || null;
+ }
+ };
+ // 鎻愪氦浜у搧鍚嶇О淇敼
+ const submitForm = () => {
+ proxy.$refs.formRef.validate(valid => {
+ if (valid) {
+ // 鏋勫缓鎻愪氦鍙傛暟
+ // const params = {
+ // materialTypeId: null,
+ // inventoryCategoryId: form.value.inventoryCategoryId,
+ // materialName: form.value.materialName,
+ // baseUnit: form.value.baseUnit,
+ // remark: form.value.remark,
+ // };
+
+ // if (operationType.value === "add") {
+ // // 娣诲姞瀛愮骇锛屼紶鐖剁骇鐨刬d浣滀负 materialTypeId
+ // params.materialTypeId = currentId.value;
+ // } else if (operationType.value === "addOne") {
+ // // 娣诲姞涓�绾э紝materialTypeId 涓� null
+ // params.materialTypeId = null;
+ // } else {
+ // // 缂栬緫锛屼紶褰撳墠id浣滀负 materialTypeId
+ // params.materialTypeId = currentId.value;
+ // }
+ console.log(form.value);
+ console.log(operationType.value);
+ if (operationType.value != "edit") {
+ addOrEditProduct(form.value).then(res => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeProDia();
+ getProductTreeList();
+ });
+ } else {
+ updateOrEditProduct(form.value).then(res => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeProDia();
+ getProductTreeList();
+ });
+ }
+ }
});
-};
-// 璋冪敤tree杩囨护鏂规硶 涓枃鑻辫繃婊�
-const filterNode = (value, data, node) => {
- if (!value) {
- //濡傛灉鏁版嵁涓虹┖锛屽垯杩斿洖true,鏄剧ず鎵�鏈夌殑鏁版嵁椤�
- return true;
- }
- // 鏌ヨ鍒楄〃鏄惁鏈夊尮閰嶆暟鎹紝灏嗗�煎皬鍐欙紝鍖归厤鑻辨枃鏁版嵁
- let val = value.toLowerCase();
- return chooseNode(val, data, node); // 璋冪敤杩囨护浜屽眰鏂规硶
-};
-// 杩囨护鐖惰妭鐐� / 瀛愯妭鐐� (濡傛灉杈撳叆鐨勫弬鏁版槸鐖惰妭鐐逛笖鑳藉尮閰嶏紝鍒欒繑鍥炶鑺傜偣浠ュ強鍏朵笅鐨勬墍鏈夊瓙鑺傜偣锛涘鏋滃弬鏁版槸瀛愯妭鐐癸紝鍒欒繑鍥炶鑺傜偣鐨勭埗鑺傜偣銆俷ame鏄腑鏂囧瓧绗︼紝enName鏄嫳鏂囧瓧绗�.
-const chooseNode = (value, data, node) => {
- if (data.label.indexOf(value) !== -1) {
- return true;
- }
- const level = node.level;
- // 濡傛灉浼犲叆鐨勮妭鐐规湰韬氨鏄竴绾ц妭鐐瑰氨涓嶇敤鏍￠獙浜�
- if (level === 1) {
- return false;
- }
- // 鍏堝彇褰撳墠鑺傜偣鐨勭埗鑺傜偣
- let parentData = node.parent;
- // 閬嶅巻褰撳墠鑺傜偣鐨勭埗鑺傜偣
- let index = 0;
- while (index < level - 1) {
- // 濡傛灉鍖归厤鍒扮洿鎺ヨ繑鍥烇紝姝ゅname鍊兼槸涓枃瀛楃锛宔nName鏄嫳鏂囧瓧绗︺�傚垽鏂尮閰嶄腑鑻辨枃杩囨护
- if (parentData.data.label.indexOf(value) !== -1) {
+ };
+ // 鍏抽棴浜у搧寮规
+ const closeProDia = () => {
+ proxy.$refs.formRef.resetFields();
+ // 鎵嬪姩閲嶇疆闈炶〃鍗曞瓧娈�
+ form.value.materialTypeId = null;
+ form.value.remark = "";
+ productDia.value = false;
+ };
+ // 鎻愪氦浜у搧澶х被淇敼
+ const submitConfigForm = () => {
+ proxy.$refs.configFormRef.validate(valid => {
+ if (valid) {
+ const params = {
+ configName: configForm.value.configName,
+ type: 1,
+ };
+ if (configOperationType.value === "edit") {
+ params.id = configForm.value.id;
+ updateOrEditProductConfig(params).then(res => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeConfigDia();
+ getProductTreeList();
+ });
+ } else {
+ addOrEditProductConfig(params).then(res => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeConfigDia();
+ getProductTreeList();
+ });
+ }
+ }
+ });
+ };
+ // 鍏抽棴浜у搧澶х被寮规
+ const closeConfigDia = () => {
+ proxy.$refs.configFormRef.resetFields();
+ configDia.value = false;
+ };
+ // 鍒犻櫎浜у搧澶х被
+ const remove1 = (node, data) => {
+ let ids = [];
+ ids.push(data.id);
+ ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎鎻愮ず", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ tableLoading.value = true;
+ delProductConfig(ids)
+ .then(res => {
+ proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+ getProductTreeList();
+ })
+ .finally(() => {
+ tableLoading.value = false;
+ });
+ })
+ .catch(() => {
+ proxy.$modal.msg("宸插彇娑�");
+ });
+ };
+ // 鍒犻櫎浜у搧
+ 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) => {
+ // 鐐瑰嚮闈炲彾瀛愯妭鐐规椂锛屼笉鎵ц浠ヤ笅閫昏緫
+ if (!val.isLeaf) {
+ return;
+ }
+ // 鍒ゆ柇鏄惁涓哄彾瀛愯妭鐐�
+ isShowButton.value = !(val.children && val.children.length > 0);
+ // 鍙湁鍙跺瓙鑺傜偣鎵嶆墽琛屼互涓嬮�昏緫
+ currentId.value = val.id;
+ currentParentId.value = val.parentId;
+ getModelList();
+ };
+
+ // 鎻愪氦瑙勬牸鍨嬪彿淇敼
+ const submitModelForm = () => {
+ proxy.$refs.modelFormRef.validate(valid => {
+ if (valid) {
+ // 鏋勫缓鎻愪氦鍙傛暟
+ const params = {
+ materialId: currentId.value,
+ specification: modelForm.value.specification,
+ supplyType: modelForm.value.supplyType,
+ };
+ if (modelOperationType.value === "add") {
+ // 娣诲姞瑙勬牸鍨嬪彿
+ addOrEditProductModel(params).then(res => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeModelDia();
+ getModelList();
+ });
+ } else if (modelOperationType.value === "edit") {
+ // 淇敼瑙勬牸鍨嬪彿
+ params.id = modelForm.value.id;
+ updateOrEditProductModel(params).then(res => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeModelDia();
+ getModelList();
+ });
+ }
+ }
+ });
+ };
+ // 鍏抽棴鍨嬪彿寮规
+ const closeModelDia = () => {
+ proxy.$refs.modelFormRef.resetFields();
+ modelDia.value = false;
+ };
+ // 琛ㄦ牸閫夋嫨鏁版嵁
+ const handleSelectionChange = selection => {
+ selectedRows.value = selection;
+ };
+
+ // 鏌ヨ瑙勬牸鍨嬪彿
+ const getModelList = () => {
+ if (!currentId.value) {
+ return;
+ }
+ tableLoading.value = true;
+ modelListPage({
+ materialId: currentId.value,
+ }).then(res => {
+ console.log("res", res);
+ tableData.value = res.data;
+ tableLoading.value = false;
+ });
+ };
+ // 鍒犻櫎瑙勬牸鍨嬪彿
+ const handleDelete = () => {
+ let ids = [];
+ if (selectedRows.value.length > 0) {
+ ids = selectedRows.value.map(item => item.skuId);
+ } else {
+ proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
+ return;
+ }
+ ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎鎻愮ず", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ tableLoading.value = true;
+ delProductModel(ids)
+ .then(res => {
+ proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+ getModelList();
+ })
+ .finally(() => {
+ tableLoading.value = false;
+ });
+ })
+ .catch(() => {
+ proxy.$modal.msg("宸插彇娑�");
+ });
+ };
+ // 璋冪敤tree杩囨护鏂规硶 涓枃鑻辫繃婊�
+ const filterNode = (value, data, node) => {
+ if (!value) {
+ //濡傛灉鏁版嵁涓虹┖锛屽垯杩斿洖true,鏄剧ず鎵�鏈夌殑鏁版嵁椤�
return true;
}
- // 鍚﹀垯鐨勮瘽鍐嶅線涓婁竴灞傚仛鍖归厤
- parentData = parentData.parent;
- index++;
- }
- // 娌″尮閰嶅埌杩斿洖false
- return false;
-};
-getProductTreeList();
+ // 鏌ヨ鍒楄〃鏄惁鏈夊尮閰嶆暟鎹紝灏嗗�煎皬鍐欙紝鍖归厤鑻辨枃鏁版嵁
+ let val = value.toLowerCase();
+ return chooseNode(val, data, node); // 璋冪敤杩囨护浜屽眰鏂规硶
+ };
+ // 杩囨护鐖惰妭鐐� / 瀛愯妭鐐� (濡傛灉杈撳叆鐨勫弬鏁版槸鐖惰妭鐐逛笖鑳藉尮閰嶏紝鍒欒繑鍥炶鑺傜偣浠ュ強鍏朵笅鐨勬墍鏈夊瓙鑺傜偣锛涘鏋滃弬鏁版槸瀛愯妭鐐癸紝鍒欒繑鍥炶鑺傜偣鐨勭埗鑺傜偣銆俷ame鏄腑鏂囧瓧绗︼紝enName鏄嫳鏂囧瓧绗�.
+ const chooseNode = (value, data, node) => {
+ if (data.label.indexOf(value) !== -1) {
+ return true;
+ }
+ const level = node.level;
+ // 濡傛灉浼犲叆鐨勮妭鐐规湰韬氨鏄竴绾ц妭鐐瑰氨涓嶇敤鏍￠獙浜�
+ if (level === 1) {
+ return false;
+ }
+ // 鍏堝彇褰撳墠鑺傜偣鐨勭埗鑺傜偣
+ let parentData = node.parent;
+ // 閬嶅巻褰撳墠鑺傜偣鐨勭埗鑺傜偣
+ let index = 0;
+ while (index < level - 1) {
+ // 濡傛灉鍖归厤鍒扮洿鎺ヨ繑鍥烇紝姝ゅname鍊兼槸涓枃瀛楃锛宔nName鏄嫳鏂囧瓧绗︺�傚垽鏂尮閰嶄腑鑻辨枃杩囨护
+ if (parentData.data.label.indexOf(value) !== -1) {
+ return true;
+ }
+ // 鍚﹀垯鐨勮瘽鍐嶅線涓婁竴灞傚仛鍖归厤
+ parentData = parentData.parent;
+ index++;
+ }
+ // 娌″尮閰嶅埌杩斿洖false
+ return false;
+ };
+ // 椤甸潰鍔犺浇鏃惰幏鍙栨暟鎹�
+ getInventoryCategoryList();
+ getMaterialTypeList();
+ getProductTreeList();
</script>
<style scoped>
-.product-view {
- display: flex;
-}
-.left {
- width: 380px;
- padding: 16px;
- background: #ffffff;
-}
-.right {
- width: calc(100% - 380px);
- padding: 16px;
- margin-left: 20px;
- background: #ffffff;
-}
-.custom-tree-node {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-size: 14px;
- padding-right: 8px;
-}
-.tree-node-content {
- display: flex;
- align-items: center; /* 鍨傜洿灞呬腑 */
- height: 100%;
-}
-.orange-icon {
- color: orange;
- font-size: 18px;
- margin-right: 8px; /* 鍥炬爣涓庢枃瀛椾箣闂村姞鐐归棿璺� */
-}
+ .product-view {
+ display: flex;
+ min-height: 100vh;
+ background-color: #f5f7fa;
+ padding: 20px;
+ gap: 20px;
+ }
+ .left {
+ width: 465px;
+ min-width: 465px;
+ background: #ffffff;
+ border-radius: 8px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ }
+ .left > div:first-child {
+ padding: 16px;
+ border-bottom: 1px solid #e4e7ed;
+ background-color: #fafafa;
+ }
+ .left > div:last-child {
+ flex: 1;
+ overflow: hidden;
+ }
+ .right {
+ flex: 1;
+ min-width: 0;
+ background: #ffffff;
+ border-radius: 8px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ }
+ .right > div:first-child {
+ padding: 16px;
+ border-bottom: 1px solid #e4e7ed;
+ background-color: #fafafa;
+ }
+ .right > div:last-child {
+ flex: 1;
+ overflow: auto;
+ padding: 16px;
+ }
+ .custom-tree-node {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 14px;
+ padding: 8px 12px;
+ margin: 2px 0;
+ border-radius: 4px;
+ transition: all 0.3s ease;
+ }
+ .custom-tree-node:hover {
+ background-color: #f5f7fa;
+ }
+ .tree-node-content {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ align-items: center;
+ height: 100%;
+ overflow: hidden;
+ }
+ .tree-node-content .tree-icon {
+ flex-shrink: 0;
+ }
+ .tree-node-label {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-weight: 500;
+ color: #303133;
+ }
+ .tree-icon {
+ color: #409eff;
+ font-size: 18px;
+ margin-right: 10px;
+ transition: color 0.3s ease;
+ }
+ .custom-tree-node:hover .tree-icon {
+ color: #66b1ff;
+ }
+ .product-tree-scroll {
+ height: calc(100vh - 240px);
+ overflow-y: auto;
+ scrollbar-width: thin;
+ scrollbar-color: #c0c4cc #f5f7fa;
+ }
+ .product-tree-scroll::-webkit-scrollbar {
+ width: 6px;
+ }
+ .product-tree-scroll::-webkit-scrollbar-track {
+ background: #f5f7fa;
+ border-radius: 3px;
+ }
+ .product-tree-scroll::-webkit-scrollbar-thumb {
+ background: #c0c4cc;
+ border-radius: 3px;
+ }
+ .product-tree-scroll::-webkit-scrollbar-thumb:hover {
+ background: #909399;
+ }
+ .el-button {
+ border-radius: 4px;
+ font-size: 13px;
+ }
+ .el-button--primary {
+ background-color: #fff;
+ border-color: #409eff;
+ color: #409eff;
+ }
+ .el-button--primary.is-link {
+ background-color: transparent;
+ border-color: transparent;
+ color: #409eff;
+ }
+ .el-button--primary.is-link:hover {
+ background-color: transparent;
+ border-color: transparent;
+ color: #0033ff;
+ }
+ .el-button--primary:hover {
+ background-color: #e3f1ff;
+ border-color: #66b1ff;
+ }
+ .el-input {
+ border-radius: 4px;
+ }
+ .el-input__wrapper {
+ border-radius: 4px;
+ }
+ .el-dialog {
+ border-radius: 8px;
+ }
+ .el-dialog__header {
+ border-bottom: 1px solid #e4e7ed;
+ padding: 16px 20px;
+ }
+ .el-dialog__title {
+ font-size: 16px;
+ font-weight: 600;
+ color: #303133;
+ }
+ .el-dialog__body {
+ padding: 20px;
+ }
+ .el-form-item {
+ margin-bottom: 16px;
+ }
+ .el-form-item__label {
+ font-weight: 500;
+ color: #606266;
+ }
+ .dialog-footer {
+ display: flex;
+ justify-content: flex-end;
+ gap: 10px;
+ padding: 16px 20px;
+ border-top: 1px solid #e4e7ed;
+ background-color: #fafafa;
+ }
+ .PIMTable {
+ border-radius: 4px;
+ overflow: hidden;
+ }
+ .el-table {
+ border-radius: 4px;
+ }
+ .el-table th {
+ background-color: #fafafa;
+ font-weight: 600;
+ color: #303133;
+ }
+ .el-table tr:hover {
+ background-color: #f5f7fa;
+ }
</style>
--
Gitblit v1.9.3