From 3f24fbc89959ec4aa9f3308e1af453e43d504ac5 Mon Sep 17 00:00:00 2001 From: charles <981744753@qq.com> Date: 星期三, 10 七月 2024 20:04:16 +0800 Subject: [PATCH] feat:完成车间管理部分的重构 --- src/views/systemSetting/silkStandardSetting/index.vue | 396 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 390 insertions(+), 6 deletions(-) diff --git a/src/views/systemSetting/silkStandardSetting/index.vue b/src/views/systemSetting/silkStandardSetting/index.vue index 7584acc..6ff2501 100644 --- a/src/views/systemSetting/silkStandardSetting/index.vue +++ b/src/views/systemSetting/silkStandardSetting/index.vue @@ -1,21 +1,405 @@ <template> - <div class="container"></div> + <div class="silkStandardSetting-container"> + <div class="filter-card"> + <CommonSearch :show-add="false" :amount-view="false" placeholder="璇疯緭鍏ュ叧閿瘝" @searchClick="onFilterSearch"> + <template slot="leftButton"> + <el-button size="small" type="primary" @click="addBtnClick">鏂板</el-button> + <el-button size="small" type="primary" @click="refreshClick">鍒锋柊</el-button> + <el-button size="small" type="primary" @click="printClick" disabled>鎵撳嵃</el-button> + </template> + </CommonSearch> + </div> + <div class="body-card"> + <div class="edit-save" @click="editSaveClick"> + <div class="edit-save-icon"> + <i :class="isEdit ? 'el-icon-unlock' : 'el-icon-lock'"></i> + </div> + <div class="edit-sace-label">{{ isEdit ? "閿佸畾淇濆瓨" : "鐣岄潰璁捐" }}</div> + </div> + <div> + <SilkTableList + :detail-enter="isEdit" + :silk-table-list="silkTableList" + @inputContent="inputContent" + @addProjectClick="addBtnClick" + :isEdit='isEdit' + @clearupProject="clearupProject" + @deleteClick="clearupProject" + @addColumnClick="addColumnClick" + @clearupColumn="clearupColumn" + @addColumnInputChange="addColumnInputChange" + > + </SilkTableList> + </div> + </div> + </div> </template> <script> +import SilkTableList from "@/views/systemSetting/silkStandardSetting/components/silkTableList" +import { getRankStandard, saveRankStandard } from "@/api/systemSetting/silkStandardSetting" +import { getDataByType } from "@/api/data" export default { name: "silkStandardSetting", props: {}, - components: {}, + components: { SilkTableList }, mixins: [], computed: {}, data() { - return {} + return { + isEdit: false, + silkTableList: {}, + tableData: [], + defaultColumn: [ + { + label: "妫�鏌ラ」鐩悕绉�", + prop: "checkItem", + projectName: true, + isCallMethod: true, + getCallMethod: this.getCheckItemName, + }, + { label: "寮�濮嬬氦搴�", prop: "startFineness", inputFloat: true }, + { label: "缁撴潫绾ゅ害", prop: "endFineness", inputFloat: true }, + { label: "閲庣氦", prop: "rankA", inputFloat: true }, + { label: "澶ч噹", prop: "rankB", inputFloat: true }, + { label: "鐗归噹", prop: "rankC", inputFloat: true } + ], + tableColumn: [], + dataObj: { + checkItem: 1, + startFineness: 0, + endFineness: 0, + rankA: 0, + rankB: 0, + rankC: 0 + }, + projectOptions: getDataByType("projectOptions"), + rankObj: {}, + columnInputList: [], + dynamicsRanks: [], + } }, - created() {}, - methods: {} + created() { + this.setTableForm() + this.getData() + }, + methods: { + // 鑾峰彇鏁版嵁 + getData() { + getRankStandard().then((res) => { + console.log(res) + if (res.code === 200) { + if (res.data.length > 0) { + this.tableData = [] + this.tableColumn = [ + { + label: "妫�鏌ラ」鐩悕绉�", + prop: "checkItem", + projectName: true, + isCallMethod: true, + getCallMethod: this.getCheckItemName, + }, + { label: "寮�濮嬬氦搴�", prop: "startFineness", inputFloat: true }, + { label: "缁撴潫绾ゅ害", prop: "endFineness", inputFloat: true }, + { label: "閲庣氦", prop: "rankA", inputFloat: true }, + { label: "澶ч噹", prop: "rankB", inputFloat: true }, + { label: "鐗归噹", prop: "rankC", inputFloat: true } + ] + // this.tableColumn=this.defaultColumn + this.columnDataProcess(res.data[0].dynamicsRanks) + this.rankObj = {} + this.allDataProcess(res.data) + } + } + }) + }, + // 鏁翠綋鏁版嵁澶勭悊 + allDataProcess(dataList) { + let rankList = dataList.map((ite) => { + for (let i = 0; i < ite.dynamicsRanks.length; i++) { + this.$set(this.rankObj, ite.dynamicsRanks[i].rankProp, ite.dynamicsRanks[i].rankValue) + this.$set(this.dataObj, ite.dynamicsRanks[i].rankProp, 0) + } + return { + ...ite, + ...this.rankObj + } + }) + this.tableData = rankList || [] + this.silkTableList.tableData = this.tableData + }, + // 鍒椾俊鎭暟鎹鐞� + columnDataProcess(data) { + this.columnInputList = data.map((ite) => { + return { ...ite } + }) + let list = data.map((item) => { + return { + label: item.rankName, + prop: item.rankProp, + inputFloat: true + } + }) + let currentIndex=0 + this.tableColumn.map((item, index) => { + if (item.prop == 'rankA') { + currentIndex = index + } + }) + for (let j = 0; j < list.length; j++) { + this.tableColumn.splice(currentIndex+j, 0, list[j]) + } + this.silkTableList.tableColumn = this.tableColumn + }, + setTableForm() { + this.silkTableList = { + tableData: this.tableData, + isReturn: false, + tableColumn: [ + { label: "妫�鏌ラ」鐩悕绉�", prop: "checkItem", projectName: true }, + { label: "寮�濮嬬氦搴�", prop: "startFineness", inputFloat: true }, + { label: "缁撴潫绾ゅ害", prop: "endFineness", inputFloat: true }, + { label: "閲庣氦", prop: "rankA", inputFloat: true }, + { label: "澶ч噹", prop: "rankB", inputFloat: true }, + { label: "鐗归噹", prop: "rankC", inputFloat: true } + ] + } + this.tableColumn=this.silkTableList.tableColumn + }, + // 鎼滅储 + onFilterSearch(searchText) { + console.log(searchText) + }, + // 鏂板 + addBtnClick() { + console.log(this.silkTableList.tableData,'===1') + console.log(this.tableData,'===2') + if(this.isEdit){ + this.silkTableList.tableData.push({ + projectName: "", + start: 0, + end: 0, + price1: 0, + price2: 0, + price3: 0 + }) + this.tableData=this.silkTableList.tableData + }else{ + this.$message.error('璇峰厛瑙i攣鍐嶆柊澧烇紒') + } + + }, + // 鍒锋柊 + refreshClick() { + this.getData() + }, + // 鎵撳嵃 + printClick() {}, + // 鍒楄〃杈撳叆鍥炶皟 + inputContent(val, prop, scope) { + console.log(val, prop, scope) + let list = this.tableData.map((item, index) => { + let dynamicsRanks = this.columnInputList.map((ite) => { + if (ite.rankProp == prop) { + ite.rankValue = val + } + return { + ...ite + } + }) + if (index === scope.$index) { + item[prop] = val + item.dynamicsRanks = dynamicsRanks + } + return { + ...item + } + }) + console.log(list) + this.tableData = list + }, + // 鍒犻櫎 + clearupProject(data, index) { + this.$confirm('纭畾瑕佸垹闄ゅ悧, 鏄惁缁х画?', '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + this.tableData.splice(index, 1) + this.silkTableList.tableData=this.tableData + }).catch(() => { + }); + }, + // 淇濆瓨缂栬緫鎸夐挳鍒囨崲 + editSaveClick() { + let isOk=false; + this.silkTableList.tableColumn.map((item)=>{ + if(!item.label||!item.prop){ + isOk=true + } + }) + if(isOk){ + this.$message.error('璇峰厛濉啓瀹屾垚琛ㄥご锛�') + return true; + } + this.isEdit = !this.isEdit + this.silkTableList.tableData.map((item)=>{ + item.addColumn=false; + }) + + let tableData=JSON.parse( + JSON.stringify(this.silkTableList.tableData) + ); + // if(tableData.length==0&&!this.isEdit){ + // this.$message.error('璇峰厛鏂板鍐嶄繚瀛�!') + // return true; + // } + if (!this.isEdit) { + let params = this.saveParam(tableData) + saveRankStandard({ + rankStandard: params + }).then((res) => { + if (res.code == 200) { + this.$message.success("淇濆瓨鎴愬姛") + this.getData() + } + }) + } + }, + saveParam(tableData) { + for(let i in tableData){ + tableData[i].dynamicsRanks=[] + for(let j in this.columnInputList){ + tableData[i].dynamicsRanks.push({ + rankName:this.columnInputList[j].rankName, + rankProp:this.columnInputList[j].rankProp, + rankValue:tableData[i][this.columnInputList[j].rankProp] + }) + } + } + let saveList = tableData.map((item) => { + return { + checkItem: item.checkItem, + dynamicsRanks: item.dynamicsRanks, + endFineness: item.endFineness, + lineId: item.lineId || "", + rankA: item.rankA, + rankB: item.rankB, + rankC: item.rankC, + startFineness: item.startFineness + } + }) + return saveList + }, + // 娣诲姞鍒� + addColumnClick() { + let currentIndex=0 + this.tableColumn.map((item, index) => { + if (item.prop == 'rankA') { + currentIndex = index + } + }) + let num=0 + if(this.tableColumn.length>0){ + if(this.tableColumn[Number(currentIndex)-1].prop.indexOf('prop')!=-1){ + num=this.tableColumn[Number(currentIndex)-1].prop.slice(4) + } + } + let propStr = "prop" + (Number(num)+1) + + this.tableColumn.splice(currentIndex, 0, { label: "", prop: propStr, inputFloat: true, addColumn: true }) + this.$set(this.dataObj, propStr, 0) + this.$set(this.rankObj, propStr, 0) + this.columnInputList.push({ rankProp: propStr, rankName: "", rankValue: 0 }) + this.silkTableList.tableColumn = this.tableColumn + let allList = this.tableData.map((item) => { + return { + ...item, + [propStr]: 0 + } + }) + this.tableData = allList + this.silkTableList.tableData = allList + this.$forceUpdate() + }, + // 鍒犻櫎鍒� + clearupColumn(prop) { + let currentIndex = 0 + this.tableColumn.map((item, index) => { + if (item.prop == prop) { + currentIndex = index + } + }) + let columnInputIndex=0 + this.columnInputList.forEach((item,index) => { + if (item.rankProp == prop) { + columnInputIndex = index + } + }) + this.columnInputList.splice(columnInputIndex,1) + this.tableColumn.splice(currentIndex, 1) + this.silkTableList.tableColumn = this.tableColumn + this.$delete(this.dataObj, prop) + }, + // 鍒楄〃澶磋緭鍏ュ洖璋� + addColumnInputChange(val, prop) { + this.columnInputList.forEach((item) => { + if (item.rankProp == prop) { + item.rankName = val + } + }) + }, + getCheckItemName(val) { + if (val) { + for (let i in this.projectOptions) { + if (this.projectOptions[i].id == val) { + return this.projectOptions[i].value + } + } + } else { + return "--" + } + } + } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> -<style lang="scss" scoped></style> +<style lang="scss" scoped> +.silkStandardSetting-container { + height: 100%; + .filter-card { + margin: 20px 30px; + height: 80px; + display: flex; + align-items: center; + padding: 0 20px 0 20px; + border-radius: 4px; + background-color: #fff; + } + .body-card { + margin: 0 30px; + background-color: #fff; + padding: 10px 15px; + height: calc(100% - 180px); + border-radius: 4px; + .edit-save { + width:100px; + padding:0 10px; + display: flex; + align-items: center; + margin-bottom: 10px; + cursor: pointer; + .edit-save-icon { + font-size: 24px; + color: #5582f3; + } + .edit-sace-label { + margin-left: 10px; + font-size: 14px; + color: #000000d8; + } + } + } +} +</style> -- Gitblit v1.8.0