From 8231542d77a49f80a49434be6ca8bfb3ae9e1efe Mon Sep 17 00:00:00 2001
From: XiaoRuby <3114200645@qq.com>
Date: 星期一, 28 八月 2023 09:26:21 +0800
Subject: [PATCH] 8-28
---
src/views/standardLibrary/index.vue | 403 ++++++++++++++++++++++++++++-----------------------------
1 files changed, 198 insertions(+), 205 deletions(-)
diff --git a/src/views/standardLibrary/index.vue b/src/views/standardLibrary/index.vue
index b5d5c68..5277b3b 100644
--- a/src/views/standardLibrary/index.vue
+++ b/src/views/standardLibrary/index.vue
@@ -2,7 +2,10 @@
<div class="standard-library-main">
<div class="content-main">
<div class="library-bom" style="width: 300px">
- <el-input v-model="filterText" placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�" />
+ <el-input
+ v-model="filterText"
+ placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�"
+ ></el-input>
<el-button type="text">鍏ㄩ儴</el-button>
<el-tree
ref="tree"
@@ -20,37 +23,24 @@
</div>
<div class="library-table" style="width: 80%">
<div class="table-header">
- <div class="search-bar">
- <el-form ref="form" :inline="true" :model="searchData">
- <el-form-item>
- <span>鍘熸潗鏂欑紪鐮侊細</span>
- <el-input
- v-model="searchData.keyword"
- placeholder="璇疯緭鍏ヤ汉鍛樺悕绉�/鍘熸潗鏂欏悕绉�"
- >
- <i slot="prefix" class="el-input__icon el-icon-search" />
- </el-input>
- </el-form-item>
- <el-form-item>
- <span>鍘熸潗鏂欏悕绉帮細</span>
- <el-input
- v-model="searchData.keyword"
- placeholder="璇疯緭鍏ュ師鏉愭枡鍚嶇О"
- >
- <i slot="prefix" class="el-input__icon el-icon-search" />
- </el-input>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="filteredTableData"
- >鏌ヨ</el-button
- >
- <el-button type="primary" plain @click="resetBtn"
- >閲嶇疆</el-button
- >
- </el-form-item>
- </el-form>
- </div>
<div class="serve-btn">
+ <span class="tipMsg">{{ msg !== "" ? msg : "" }}</span>
+ <el-select
+ v-model="versionValue"
+ @change="changeSelect"
+ placeholder="璇烽�夋嫨鐗堟湰鍙�"
+ >
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ <el-button type="primary" @click="addVersionFun"
+ >鏂板鐗堟湰鍙�</el-button
+ >
<el-button
type="primary"
icon="el-icon-plus"
@@ -60,7 +50,6 @@
<el-button
class="top_div_button"
icon="el-icon-delete-solid"
- size="small"
style="color: #00a5ff"
@click="deleteListClick"
>鍒犻櫎</el-button
@@ -68,52 +57,17 @@
</div>
</div>
<div class="table-box">
- <!-- <el-table
- ref="tableData"
- row-key="id"
- max-height="680"
- :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
- :cell-style="{ textAlign: 'left' }"
- :header-cell-style="{
- border: '0px',
- background: '#f5f7fa',
- color: '#606266',
- boxShadow: 'inset 0 1px 0 #ebeef5',
- textAlign: 'left',
- }"
- :data="tableData"
- style="width: 100%"
- >
- <el-table-column type="index" label="搴忓彿" width="100px">
- <template v-if="scope.row.index + 1" slot-scope="scope">
- {{ scope.row.index + 1 }}
- </template>
- </el-table-column>
- <el-table-column prop="father" label="鍚嶇О" width="320px">
- <template slot-scope="scope">
- <el-tag
- size="mini"
- :type="scope.row.father ? '' : 'success'"
- :style="{ borderRadius: '40%', marginRight: '12px' }"
- >{{ scope.row.father ? "01" : "02" }}</el-tag
- >
- {{ scope.row.father || scope.row.name }}
- </template>
- </el-table-column>
- <el-table-column prop="unit" label="鍗曚綅" width="300px" />
- <el-table-column prop="required" label="鏍囧噯" width="300px" />
- <el-table-column prop="internal" label="鍐呮帶鍒�" width="300px" />
- </el-table> -->
<el-table
:data="tableData"
style="width: 100%; margin-bottom: 20px"
- row-key="name"
+ row-key="id"
border
height="calc(100vh - 250px)"
default-expand-all
ref="multipleTable"
@select="selectTr"
@select-all="selectAll"
+ @selection-change="handleSelectionChange"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column type="selection" label="搴忓彿"> </el-table-column>
@@ -142,22 +96,30 @@
label="鍗曚綅"
sortable
></el-table-column>
+ <el-table-column label="鏍囧噯鍊�" sortable>
+ <template scope="scope">
+ <el-input
+ v-if="scope.row.edit === true || scope.row.code === '[2]'"
+ @blur="requiredOnfocus(scope)"
+ v-model="scope.row.required"
+ placeholder="璇疯緭鍏ユ爣鍑嗗��"
+ ></el-input>
+ </template>
+ </el-table-column>
+ <el-table-column prop="internal" label="鍐呮帶鍊�" sortable>
+ <template scope="scope">
+ <el-input
+ v-if="scope.row.edit === true || scope.row.code === '[2]'"
+ @blur="requiredOnfocus(scope)"
+ v-model="scope.row.internal"
+ placeholder="璇疯緭鍏ュ唴鎺у��"
+ ></el-input>
+ </template>
+ </el-table-column>
</el-table>
<!-- 寮瑰嚭琛ㄥ崟椤� -->
<div>
<!-- -->
- </div>
- <div>
- <!-- 鍒嗛〉鍣� -->
- <!-- <el-pagination
- :current-page="pageParams.pageNo"
- :page-sizes="[10, 15, 20, 25]"
- :page-size="pageParams.pageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="pageParams.total"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- /> -->
</div>
</div>
</div>
@@ -210,18 +172,24 @@
import {
getMaterialList,
getProductList,
- getProductSonList,
addMaterial,
addStandards,
addSpecifications,
deleteListApi,
+ blurUpdateApi,
+ getVersion,
+ addVersion,
} from "@/api/standardLibrary";
import { selectproductModelApi } from "@/api/basicData/index";
export default {
data() {
return {
+ options: [],
+ versionValue: "",
deleteList: [],
+ msg: "",
+ isAllSelect: false,
addTreeFormVisible: false,
filterText: "",
// 鏍囧噯搴揵om鏍�
@@ -232,18 +200,8 @@
label: "name",
value: "id",
},
- // 鏌ヨ鏉′欢
- searchData: {
- keyword: "",
- },
tableData: [],
oldtableData: [],
- // 鍒嗛〉鍙傛暟
- pageParams: {
- pageNo: 1,
- pageSize: 12,
- total: 0,
- },
tablespecifications: [],
// 閫変腑鐨勮妭鐐规暟鎹�
selectData: {},
@@ -261,25 +219,64 @@
created() {
this.getStandardTree();
},
+ mounted() {},
methods: {
+ async initSelect() {
+ this.options = [];
+ this.versionValue = "";
+ const response = await getVersion({
+ specificationsId: this.selectData.id,
+ });
+ if (response.code === 200 && response.data.length > 0) {
+ this.getTableByClick(this.selectData, response.data[0]);
+ for (let i = 0; i < response.data.length; i++) {
+ this.options.push({
+ value: response.data[i],
+ label: "V" + response.data[i],
+ });
+ this.versionValue = response.data[0];
+ }
+ }
+ },
+ changeSelect() {
+ this.tableData = [];
+ this.getTableByClick(this.selectData, this.versionValue);
+ },
+ async insertVersion() {
+ const resp = await addVersion({ specificationsId: this.selectData.id });
+ if (resp.code === 200) {
+ this.initSelect();
+ this.$message({
+ type: "success",
+ message: resp.message,
+ });
+ }
+ },
+ addVersionFun() {
+ this.$confirm("纭娣诲姞鏂扮殑鐗堟湰鍙峰悧?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ this.insertVersion();
+ })
+ .catch(() => {});
+ },
filterNode(value, data) {
if (!value) return true;
- return data.label.indexOf(value) !== -1;
+ return data.name.indexOf(value) !== -1;
},
// 鑾峰彇bom鏍戠殑鏍囧噯鏁版嵁
async getStandardTree() {
const { data } = await getMaterialList();
- console.log(data);
this.standardTree = data.map((item) => {
let name = null;
switch (item.type) {
- case 1:
+ case 0:
name = "鍘熸潗鏂�";
break;
- case 2:
- name = "鍗婃垚鍝�";
- break;
- case 3:
+ case 1:
name = "鎴愬搧";
break;
}
@@ -289,19 +286,16 @@
name,
};
});
- console.log(this.standardTree);
// formTypeOptions
// 榛樿绗竴涓洓绾ц妭鐐规悳绱紝鏂板閰嶇疆椤�
const treeOptions = JSON.parse(JSON.stringify(this.standardTree));
this.getDefault(treeOptions, 0);
- console.log(treeOptions);
this.formTypeOptions = treeOptions;
this.$nextTick().then(() => {
const firstNode = document.querySelector(
".el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node"
);
firstNode.click();
- // console.log(firstNode)
});
},
getDefault(arr, index) {
@@ -313,86 +307,59 @@
item.children = null;
}
}
- // else {
- // // if ('children' in item) {
- // // //
- // // } else {
- // // // console.log(index, item)
- // // }
- // }
}
},
// 鐐瑰嚮bom鏍戣妭鐐规柟娉�
async nodeClick(data, node, element) {
- // console.log('data', data)
- // console.log('children' in data)
// 鏄瓙鑺傜偣
if (node.level === 4) {
- console.log(data, node);
+ this.getParentData(node.parent, node.data.name);
// 瀛樹笅閫変腑鑺傜偣
this.selectData = data;
- // eslint-disable-next-line prefer-const
- this.getTableByClick(data);
+ this.getTableByClick(data, this.versionValue);
+ this.initSelect();
}
if (!("children" in data)) {
return;
}
},
- async getTableByClick(data) {
- // eslint-disable-next-line prefer-const
- let {
- data: { row, total },
- } = await getProductList({
- pageNo: this.pageParams.pageNo,
- pageSize: this.pageParams.pageSize,
- specificationsId: data.id,
- });
- // console.log(row)
- this.pageParams.total = total;
- row = row.map((item, index) => ({ ...item, index }));
- for (const item of row) {
- if (item.children) {
- const res = await getProductSonList({ fatherName: item.father });
- item.children = res.data;
- item.id = item.father;
+ // 鑾峰彇鏍戣矾寰�
+ getParentData(node, name) {
+ if (node !== null) {
+ if (node.data.name !== undefined) {
+ this.msg = node.data.name + " > " + name;
}
+ this.getParentData(node.parent, this.msg);
}
- this.tableData = row;
+ },
+ async getTableByClick(data, versionVal) {
+ await getProductList({
+ specificationsId: data.id,
+ version: versionVal,
+ }).then((res) => {
+ res.data.forEach((i) => {
+ if (i.name === undefined) {
+ i.name = i.children[0].name;
+ i.unit = i.children[0].unit;
+ i.id = i.children[0].id;
+ i.required = i.children[0].required;
+ i.internal = i.children[0].internal;
+ i.edit = true;
+ delete i.children;
+ }
+ });
+ this.tableData = res.data;
+ this.selectDataList();
+ });
},
specificationDetails(row) {
// 璺宠浆浜у搧瑙勬牸璇︽儏椤�
this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`);
},
- handleSizeChange(val) {
- console.log(`姣忛〉 ${val} 鏉);
- this.pageParams.pageSize = val;
- this.getTableByClick(this.selectData);
- },
- handleCurrentChange(val) {
- console.log(`褰撳墠椤�: ${val}`);
- this.pageParams.pageNo = val;
- this.getTableByClick(this.selectData);
- },
- // 鏌ヨ鎸夐挳
- filteredTableData() {
- this.oldtableData = this.tableData;
- // 鏍规嵁杈撳叆鐨勫叧閿瓧寰楀埌杩囨护鍚庣殑鏁版嵁锛屽鏋滄湁灏辨妸杩囨护鍚庣殑鏁版嵁灞曠ず鍦ㄩ〉闈笂
- const filteredtabledata = this.tableData.filter((item) => {
- return item.name.includes(this.searchData.keyword);
- });
- // console.log('filteredtabledata', filteredtabledata)
- this.tableData = filteredtabledata;
- },
- // 閲嶇疆鎸夐挳
- resetBtn() {
- this.searchData.keyword = "";
- this.tableData = this.oldtableData;
- },
renderContent(h, { node, data, store }) {
- // console.log('data', data)
- // console.log('node', node)
// 鍒ゆ柇鏄惁鏄埗鑺傜偣鎴栨枃浠跺す
const isFolder = "children" in data;
+ console.log(`output->data`, isFolder);
return (
<span class="tree-node">
{isFolder ? (
@@ -414,7 +381,6 @@
},
async subAddTreeForm() {
this.addTreeFormVisible = false;
- console.log(this.addTreeForm.addTypeArr.length);
let res = null;
try {
switch (this.addTreeForm.addTypeArr.length) {
@@ -444,14 +410,14 @@
this.$message.error("娣诲姞澶辫触");
}
- console.log(res);
this.$message.success("娣诲姞鎴愬姛");
- this.addTreeForm = {};
+ this.addTreeForm = {
+ addTypeArr: [],
+ };
this.getStandardTree();
- this.getTableByClick(this.selectData);
+ this.getTableByClick(this.selectData, this.versionValue);
},
changeCascader(data) {
- console.log(data);
this.addTreeForm.addTypeArr = data;
},
closeAddTreeForm() {
@@ -498,23 +464,6 @@
this.isAllSelect = !this.isAllSelect;
let data = this.tableData;
this.toggleSelect(data, this.isAllSelect, "all");
- // 鑷畾涔�
- if (this.isAllSelect) {
- val.forEach((i) => {
- let isExist = false;
- this.deleteList.findIndex((c) => {
- if (c === i.id) {
- isExist = true;
- }
- });
- if (!isExist && i.id !== undefined) {
- this.deleteList.push(i.id);
- }
- });
- } else {
- this.deleteList.splice(0, this.deleteList.length);
- }
- // 鑷畾涔夌粨鏉�
},
//閫夋嫨鏌愯
selectTr(selection, row) {
@@ -523,17 +472,6 @@
this.isAllSelect = row.isChecked;
this.toggleSelect(row, row.isChecked, "tr");
});
- if (row.isChecked === true) {
- this.deleteList.push(row.id);
- } else if (row.isChecked === false) {
- this.deleteList.findIndex((c, index) => {
- if (c === row.id) {
- this.deleteList.splice(index, 1);
- return;
- }
- });
- }
- console.log(`output->this.deleteList`, this.deleteList);
},
//閫掑綊瀛愮骇
toggleSelect(data, flag, type) {
@@ -567,6 +505,15 @@
}
});
},
+ handleSelectionChange(val) {
+ this.deleteList = [];
+ val.forEach((v) => {
+ if (v.id !== undefined) {
+ this.deleteList.push(v.id);
+ }
+ });
+ console.log(`output->this.deleteList`, this.deleteList);
+ },
// 琛ㄦ牸鏍戝叏閮ㄩ�変腑閰嶇疆 缁撴潫
deleteListClick() {
deleteListApi(this.deleteList).then((res) => {
@@ -574,6 +521,22 @@
message: res.message,
type: "success",
});
+ this.getTableByClick(this.selectData, this.versionValue);
+ });
+ },
+ async requiredOnfocus(scope) {
+ let obj = {
+ id: scope.row.id,
+ required: scope.row.required,
+ internal: scope.row.internal,
+ };
+
+ await blurUpdateApi(obj).then((res) => {
+ this.$message({
+ message: res.message,
+ type: "success",
+ });
+ this.getTableByClick(this.selectData, this.versionValue);
});
},
},
@@ -587,13 +550,6 @@
padding-left: 23px !important;
}
}
-// .dialogform {
-// transform: translate(-50%, -50%);
-// top: 50% !important;
-// left: 50% !important;
-// width: 1000px;
-// height: 800px;
-// }
.standard-library-main {
width: 100vh;
height: 100%;
@@ -654,6 +610,7 @@
.table-header {
display: flex;
justify-content: space-between;
+ width: 100%;
.el-form-item {
margin-bottom: 30px !important;
}
@@ -665,12 +622,6 @@
display: flex;
flex-direction: column;
justify-content: space-between;
-
- .el-table {
- // flex: 1;
- // max-height: 680px;
- // overflow-y: scroll;
- }
> div:nth-child(3) {
// height: 20px;
display: flex;
@@ -689,4 +640,46 @@
}
}
}
+.search-bar {
+ .el-input {
+ position: relative;
+ font-size: 0.07292rem;
+ display: inline-block;
+ width: 70%;
+ }
+}
+.firstDiv {
+ float: left;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background-color: #eff5ff;
+ margin-top: 5px;
+ justify-content: center;
+ display: flex;
+ align-items: center;
+ margin-right: 8px;
+}
+.el-tag.el-tag {
+ border-color: transparent;
+ background-color: transparent;
+}
+.el-tag.el-tag:hover {
+ border-color: transparent;
+ background-color: transparent;
+}
+.serve-btn {
+ width: 100%;
+ padding-bottom: 6px;
+ text-align: right;
+ .el-select {
+ margin-right: 10px;
+ }
+}
+.tipMsg {
+ float: left;
+ font-size: 16px;
+ font-weight: 500;
+ color: #999999;
+}
</style>
--
Gitblit v1.9.3