From ef4e46f182aee6253805e66286dee847c573cbde Mon Sep 17 00:00:00 2001 From: licp <lichunping@guanfang.com.cn> Date: 星期三, 22 五月 2024 17:18:34 +0800 Subject: [PATCH] 完成原材料、产品检验、过程检,包装检键盘切换输入框 --- src/views/quality/packageinspect/packageInspect-form.vue | 529 ++++++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 437 insertions(+), 92 deletions(-) diff --git a/src/views/quality/packageinspect/packageInspect-form.vue b/src/views/quality/packageinspect/packageInspect-form.vue index 4f825f5..020ed5e 100644 --- a/src/views/quality/packageinspect/packageInspect-form.vue +++ b/src/views/quality/packageinspect/packageInspect-form.vue @@ -62,74 +62,171 @@ </el-row> </el-form> </div> - <div class="packageInspect-detail"> - <el-row :gutter="10" style="width:100%;z-index: 10;height:50px;"> - <el-col :span="20">妫�楠岄」鐩�</el-col> - <el-col :span="2"> - <el-button v-if="resultVal=='' || resultVal==null" style="width:100%" size="small" @click="clickAddLine()">娣诲姞妫�楠岄」鐩�</el-button> - </el-col> - <el-col :span="2"> - <el-button v-if="resultVal=='' || resultVal==null" style="width:100%" type="primary" size="small" - @click="savePackIns()">淇濆瓨</el-button> - </el-col> - </el-row> - <el-row style="width:100%;"> - <el-col :span="24"> - <el-table - :header-cell-style="{textAlign:'center',color:'black',backgroundColor:'#fafafa'}" - :cell-style="{textAlign:'center'}" - ref="table" - :data="list" - border - style="width: 100%;" - height="400" - row-key="randomId" class="l-mes" - default-expand-all - :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> - <el-table-column type="index" label="搴忓彿" width="60"> - </el-table-column> - <el-table-column prop="name" label="椤圭洰" width="260"> - <template slot-scope="scope"> - <el-input :readonly="resultVal!=null" v-if="scope.row.children" class="inline-input" style="width:90%;" v-model="scope.row.name" - placeholder="璇疯緭鍏ラ」鐩悕绉�"></el-input> - </template> - </el-table-column> - <el-table-column prop="required" label="瑕佹眰" width="260"> - <template slot-scope="scope"> - <div v-if="!scope.row.children"> - <el-input :readonly="resultVal!=null" v-model="scope.row.required" - placeholder="璇疯緭鍏ヨ姹�"></el-input> - </div> - </template> - </el-table-column> - <el-table-column prop="note" label="妫�楠屾弿杩�" width="260" > - <template slot-scope="scope"> - <div v-if="!scope.row.children"> - <el-input :readonly="resultVal!=null" v-model="scope.row.note" placeholder="妫�楠屾弿杩�"></el-input> - </div> - </template> - </el-table-column> - <el-table-column prop="testState" label="缁撹" min-width="150"> - <template slot-scope="scope"> - <el-select style="width:100%" :disabled="resultVal!=null" @change="changeResult" v-model="scope.row.result" v-if="!scope.row.children"> - <el-option label="鍚堟牸" value="鍚堟牸"></el-option> - <el-option label="涓嶅悎鏍�" value="涓嶅悎鏍�"></el-option> - </el-select> - </template> - </el-table-column> - <el-table-column v-if="resultVal=='' || resultVal==null" fixed="right" style="background-color: white;" label="鎿嶄綔" width="200"> - <template slot-scope="scope"> - <el-button v-if="scope.row.children" icon="el-icon-circle-plus-outline" type="text" @click="clickAddChildren(scope.row,scope.$index)">娣诲姞琛�</el-button> - <el-button v-if="!scope.row.children" icon="el-icon-circle-close" type="text" - @click="clickDelLine(scope.row,scope.$index,scope.row.children!=null)">鍙栨秷</el-button> - <el-button v-if="scope.row.children" icon="el-icon-circle-close" type="text" - @click="clickDelLine(scope.row,scope.$index,scope.row.children!=null)">鍒犻櫎椤圭洰</el-button> + <div> + <el-tabs class="packageInspect-detail" @tab-click="tabsClick"> + <el-tab-pane label="妫�楠岄」鐩�"> + <el-row> + <el-col :span="24" style="text-align: right;"> + <el-dropdown @command="handleCommand" v-if="isShow && (resultVal==null || resultVal=='')"> + <el-button size="mini" style="margin-right: 10px;" type="primary" > + 鍒囨崲妫�楠岄」妯℃澘<i class="el-icon-arrow-down el-icon--right"></i> + </el-button> + <el-dropdown-menu slot="dropdown"> + <el-dropdown-item :key="index" v-for="(item,index) in inspectMoulds" :command="item.father">{{item.father}}</el-dropdown-item> + </el-dropdown-menu> + </el-dropdown> + <el-button v-if="resultVal=='' || resultVal==null" size="mini" @click="clickAddLine()">娣诲姞妫�楠岄」鐩�</el-button> + <el-button v-if="resultVal=='' || resultVal==null" type="primary" size="mini" + @click="savePackIns()">淇濆瓨</el-button> + </el-col> + </el-row> + <el-row> + <el-col :span="24"> + <el-table + :header-cell-style="{textAlign:'center',color:'black',backgroundColor:'#fafafa'}" + :cell-style="{textAlign:'center'}" + ref="table" + :data="list" + border + style="width: 100%;" + height="400" + row-key="randomId" class="l-mes" + default-expand-all + :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> + <el-table-column type="index" prop="parentIndex" label="搴忓彿" width="60"> + <template scope="scope"> + <span v-if="scope.row.isIndex">{{scope.row.parentIndex}}</span> + </template> + </el-table-column> + <el-table-column prop="name" label="椤圭洰" min-width="160"> + <template slot-scope="scope"> + <el-input :readonly="resultVal!=null || !scope.row.isEdit" v-if="scope.row.children" class="inline-input" style="width:80%;" v-model="scope.row.name" + placeholder="璇疯緭鍏ラ」鐩悕绉�" + :id="'project'+scope.$index" + @keyup.native="moveFocus($event, scope.$index, 'project')"></el-input> + </template> + </el-table-column> + <el-table-column prop="required" label="瑕佹眰" min-width="160"> + <template slot-scope="scope"> + <div v-if="!scope.row.children"> + <el-tooltip :content="scope.row.required"> + <el-input :readonly="resultVal!=null || !scope.row.isEdit" + v-model="scope.row.required" + placeholder="璇疯緭鍏ヨ姹�" + :id="'standard'+scope.$index" + @keyup.native="moveFocus($event, scope.$index, 'standard')"></el-input> + </el-tooltip> + </div> + </template> + </el-table-column> + <el-table-column prop="note" label="妫�楠屾弿杩�" min-width="160"> + <template slot-scope="scope"> + <div v-if="!scope.row.children"> + <el-input :readonly="resultVal!=null" v-model="scope.row.note" placeholder="妫�楠屾弿杩�" + :id="`remark`+scope.$index" + @keyup.native="moveFocus($event, scope.$index, `remark`)"></el-input> + </div> + </template> + </el-table-column> + <el-table-column prop="testState" label="缁撹" min-width="150"> + <template slot-scope="scope"> + <el-select style="width:100%" :disabled="resultVal!=null" @change="changeResult" v-model="scope.row.result" v-if="!scope.row.children"> + <el-option label="鍚堟牸" value="鍚堟牸"></el-option> + <el-option label="涓嶅悎鏍�" value="涓嶅悎鏍�"></el-option> + <el-option label="涓嶉�傜敤" value="涓嶉�傜敤"></el-option> + </el-select> + </template> + </el-table-column> + <el-table-column v-if="resultVal=='' || resultVal==null" fixed="right" style="background-color: white;" label="鎿嶄綔" width="200"> + <template slot-scope="scope"> + <el-button v-if="scope.row.children && scope.row.isEdit" icon="el-icon-circle-plus-outline" type="text" @click="clickAddChildren(scope.row,scope.$index)">娣诲姞琛�</el-button> + <el-button v-if="!scope.row.children && scope.row.isEdit" icon="el-icon-circle-close" type="text" + @click="clickDelLine(scope.row,scope.$index,scope.row.children!=null)">鍙栨秷</el-button> + <el-button v-if="scope.row.children && scope.row.isEdit" icon="el-icon-circle-close" type="text" + @click="clickDelLine(scope.row,scope.$index,scope.row.children!=null)">鍒犻櫎椤圭洰</el-button> + </template> + </el-table-column> + </el-table> + </el-col> + </el-row> + </el-tab-pane> + <el-tab-pane label="闄勪欢涓婁紶" type="card"> + <div style="display: flex;justify-content:flex-end;"> + <div></div> + </div> + <div + v-loading="progrecessFileLoading" + element-loading-text="璇风◢绛夛紝鏂囦欢涓婁紶涓�" + > + <el-upload + drag + ref="upload" + action="/mes/attachment/upload" + :auto-upload="true" + :headers="headers" + :before-upload="submitUpload" + :on-success="uploadSuccess" + :data="paramData" + :with-credentials="true" + :show-file-list="false" + > + <i class="el-icon-upload"></i> + <div class="el-upload__text"> + 灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em> + </div> + </el-upload> + </div> + <el-table :data="processConfigFileTableData" height="260px"> + <el-table-column + prop="rawInsNo" + align="center" + width="120" + label="鍘熸潗鏂欐楠岀紪鍙�" + show-overflow-tooltip + ></el-table-column> + <el-table-column + prop="originalFileName" + align="center" + label="鍘熸枃浠跺悕" + width="200" + ></el-table-column> + <el-table-column prop="fileName" align="center" label="鏂囦欢鍚庣紑"></el-table-column> + <el-table-column prop="createUser" align="center" label="涓婁紶浜�"></el-table-column> + <el-table-column + prop="createTime" + align="center" + label="涓婁紶鏃堕棿" + show-overflow-tooltip + ></el-table-column> + <el-table-column prop="updateUser" align="center" label="鏇存柊浜�"> + </el-table-column> + <el-table-column + prop="updateTime" + align="center" + label="鏇存柊鏃堕棿" + show-overflow-tooltip + ></el-table-column> + <el-table-column align="center" label="鎿嶄綔"> + <template slot-scope="scope"> + <el-button + @click="delProcessConfigFile(scope.row)" + type="text" + size="small" + :disabled="(resultVal!=null && resultVal!='')" + >鍒犻櫎</el-button + > + <el-button + @click="downloadProcessConfigFile(scope.row)" + type="text" + size="small" + >涓嬭浇</el-button + > </template> - </el-table-column> + </el-table-column> </el-table> - </el-col> - </el-row> + </el-tab-pane> + </el-tabs> </div> <div class="packageInspect-result"> <el-row> @@ -140,8 +237,8 @@ <el-table class="l-mes" border height="90" :data="conclusionTable" ref="conclusion" v-model="conclusion" :header-cell-style="{textAlign:'center',color:'black',backgroundColor:'#fafafa'}" :cell-style="{textAlign:'center'}"> - <el-table-column prop="packageNo" label="鍖呰缂栧彿"></el-table-column> - <el-table-column prop="userName" label="妫�楠屽憳"></el-table-column> + <el-table-column prop="packageNo" label="鍖呰缂栧彿" width="200" show-overflow-tooltip></el-table-column> + <el-table-column prop="userName" label="妫�楠屽憳" width="200" show-overflow-tooltip></el-table-column> <el-table-column prop="result" label="妫�楠岀粨璁�"> <template slot-scope="scope"> <el-select :disabled="resultVal!=null" style="width:100%" v-model="scope.row.result"> @@ -184,12 +281,32 @@ updatePackageInspectById, getCustomer, } from '@/api/quality/packageInspect' +import { + getProcessConfigFiles, + deleteProcessConfigFile, + downloadProcessConfigFile + } from '@/api/quality/attachment' +import {getAllTemplateByEnable} from '@/api/quality/packageInspectTemp' +import { getStore } from '@/util/store' export default { - computed:{}, + computed:{ + }, components:{ }, data(){ return{ + progrecessFileLoading: false, + processConfigFileTableData: [], + headers: { + Authorization: 'Bearer ' + getStore({ name: 'access_token' }) + }, + paramData: { + rawInsNo: '', + lineNumber: '', + type: 4 + }, + inspectMoulds: [], + isShow: true, submitData: { id:null, result: null, @@ -224,6 +341,7 @@ result: '' }], dataRule: {}, + keyfield:['project','standard','remark'], } }, beforeUpdate(){ @@ -240,7 +358,9 @@ this.resultVal=val } } + this.getAllInspect() this.init() + }, watch:{ dialogVisible(newVal){ @@ -250,21 +370,98 @@ } }, methods:{ + delProcessConfigFile(row) { + this.$confirm('鏄惁鍒犻櫎璇ラ檮浠�', '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning', + closeOnClickModal: false + }).then(function() { + return deleteProcessConfigFile(row.id) + }).then((data) => { + this.getConfigFiles() + }) + }, + getConfigFiles() { + const param = { + no: this.dataForm.packInsNo, + lineNumber: this.dataForm.id, + type: 4 + } + getProcessConfigFiles(param).then((res) => { + this.processConfigFileTableData = res.data.data + }) + }, + downloadProcessConfigFile(row) { + downloadProcessConfigFile({ + bucket: row.bucketName, + fileName: row.fileName, + originalFileName: row.originalFileName + }) + }, + submitUpload() { + this.paramData.no = this.dataForm.packInsNo + this.paramData.lineNumber = this.dataForm.id + this.progrecessFileLoading = true + }, + uploadSuccess() { + this.progrecessFileLoading = false + this.getConfigFiles() + }, + tabsClick(tab,even){ + if(tab.index == 1){ + this.getConfigFiles(); + } + }, + checkShowState(){ + let num = 0 + this.list.forEach(ele=>{ + if(ele.children){ + ele.children.forEach(c=>{ + if(c.pid){ + num+=1 + } + }) + } + }) + this.isShow = num==0 + }, + getAllInspect(){ + getAllTemplateByEnable().then(res=>{ + if(res.status===200){ + this.inspectMoulds = res.data.data + } + }).catch(error=>{ + console.error(error) + }) + }, + handleCommand(command) { + this.inspectMoulds.forEach(ele=>{ + if(ele.father==command){ + this.init(ele.children) + } + }) + }, changeResult(){ let result = '' let data = this.list + let passNum = 0 + let unPassNum = 0 if(data){ - result='鍚堟牸' data.forEach(item=>{ if(item.children){ item.children.forEach(ele=>{ if(ele.result=='涓嶅悎鏍�'){ - result='涓嶅悎鏍�' + unPassNum+=1 + } + if(ele.result=='鍚堟牸'){ + passNum+=1 } }) } }) } + result = (passNum+unPassNum)>0 ? unPassNum>0 ? '涓嶅悎鏍�' :'鍚堟牸' : '' this.conclusionTable[0].result = result }, //涓婃姤 @@ -316,13 +513,17 @@ clickAddLine() { this.list.push({ name: '', + isIndex : true, + parentIndex : this.list.length + 1, randomId: Math.random(), + isEdit: true, children: [{ name: '', note: '', required: '', result: '', randomId: Math.random(), + isEdit: true, }] }) }, @@ -334,6 +535,7 @@ required: '', result: '', randomId: Math.random(), + isEdit: true, }) }, // 鍒犻櫎琛� @@ -387,22 +589,51 @@ }) } }, - init(){ - if(this.dataForm.id){ - fetchListById(this.dataForm.id).then(res=>{ + init(dataList){ + const _than = this + if(_than.dataForm.id){ + fetchListById(_than.dataForm.id).then(res=>{ let data = res.data.data - this.dataForm.packInsNo = data.packInsNo - this.dataForm.packageNo = data.packageNo - this.dataForm.contractNo = data.contractNo - this.dataForm.customerName = data.customerName - this.dataForm.projectName = data.projectName - this.dataForm.createTime = data.createTime - this.dataForm.createUser = data.createUser - this.list = [] + _than.dataForm.packInsNo = data.packInsNo + _than.dataForm.packageNo = data.packageNo + _than.dataForm.contractNo = data.contractNo + _than.dataForm.customerName = data.customerName + _than.dataForm.projectName = data.projectName + _than.dataForm.createTime = data.createTime + _than.dataForm.createUser = data.createUser + _than.list = [] let userNameList = [] - data.packageInsProductS.forEach(item => { + if(dataList){ + let tempList = [] + dataList.forEach((ele,index)=>{ + let obj = { + randomId: Math.random(), + name: ele.inspectName, + isIndex: true, + parentIndex: index+1, + children: [] + } + if(ele.children){ + ele.children.forEach(e=>{ + obj.children.push({ + required: e.inspectRequired, + randomId: Math.random(), + isEdit: false, + note: '', + result: '' + }) + }) + } + tempList.push(obj) + }) + _than.list = tempList + } + data.packageInsProductS.forEach((item,index) => { if (item.children) { let ele = { + isIndex: true, + parentIndex: index+1, + isEdit: true, randomId: Math.random(), name: null, children: [] @@ -415,6 +646,7 @@ let o = { name: item.name, randomId: Math.random(), + isEdit: true, required: obj.required, pid: obj.pid, note: obj.note?obj.note:'', @@ -422,26 +654,139 @@ } ele.children.push(o) }) - this.list.push(ele) + _than.list.push(ele) } }) - this.conclusionTable = [{ + + _than.conclusionTable = [{ packageNo: data.packageNo, userName: Array.from(new Set(userNameList)).join(','), result: null }] - this.$nextTick(()=>{ - if(this.list.length>0){ - this.changeResult() + _than.$nextTick(()=>{ + if(_than.list.length>0){ + _than.changeResult() + _than.checkShowState() } }) }).catch(error=>{ - this.$message.error("鑾峰彇澶辫触",error) + _than.$message.error("鑾峰彇澶辫触",error) }) }else{ - this.conclusionTable = [] + _than.conclusionTable = [] } }, + moveFocus(event, index, key) { + console.log(key, index,key) + let keyfield = this.keyfield; + // enter閿� + // if (event.keyCode === 13) { // 鍥炶溅 + // if (index === this.getLen() - 1 && key === keyfield[keyfield.length - 1]) { // 鏈�鍚庝竴琛屾渶鍚庝竴涓� + // console.log('鏈�鍚庝竴琛屾渶鍚庝竴涓棤娉曞洖杞�') + // return + // } + // this.$nextTick(() => { + // event.target.blur() + // }) + // if (key === keyfield[keyfield.length - 1]) { // 褰撳墠琛屾渶鍚庝竴涓�,璺宠浆涓嬩竴琛岀涓�涓� + + // } else { // 璺宠浆涓嬩竴涓� + // const nextkeyindex = keyfield.findIndex(k => k === key) + 1 + // this.$nextTick(() => { + // document.getElementById(keyfield[nextkeyindex] + index).focus() + // }) + // } + // } + + // 鍚戜笂 =38 + if (event.keyCode === 38) { + console.log('鍚戜笂') + if (index === 0) { // 绗竴琛� + console.log('绗竴琛屾棤娉曞悜涓�') + return + } + document.getElementById(key + index).blur() + let i = 0; + while (true){ + let dom = document.getElementById(key + (index - 1-i)) + if(dom){ + dom.focus() + return + }else if((index-1-i)==0){ + return + } + i++ + } + } + + // 涓� = 40 + if (event.keyCode === 40) { + console.log('鍚戜笅') + if (index === this.getLen() - 1) { // 鏈�鍚庝竴琛� + console.log('鏈�鍚庝竴琛屾棤娉曞悜涓�') + return + } + document.getElementById(key + index).blur() + this.$nextTick(() => { + let i = 0; + while (true){ + let dom = document.getElementById(key + (index + 1+i)) + console.log(dom,key + (index + 1+i)) + if(dom){ + dom.focus() + return + }else if((index+1+i)==this.getLen() - 1){ + return + } + i++ + } + }) + } + + // 宸� = 37 + if (event.keyCode === 37) { + console.log('鍚戝乏') + if (index === 0 && key === keyfield[0]) { // 绗竴琛岀涓�涓� + console.log('绗竴琛岀涓�涓棤娉曞悜宸�') + return + } + document.getElementById(key + index).blur() + const prevkeyindex = keyfield.findIndex(k => k === key) - 1 + this.$nextTick(() => { + let dom = document.getElementById(keyfield[prevkeyindex] + index) + if(dom){ + dom.focus() + } + }) + } + + // 鍙� = 39 + if (event.keyCode === 39) { + console.log('鍚戝彸') + if (index === this.getLen() - 1 && key === keyfield[keyfield.length - 1]) { // 鏈�鍚庝竴琛屾渶鍚庝竴涓� + console.log('鏈�鍚庝竴琛屾渶鍚庝竴涓棤娉曞悜鍙�') + return + } + document.getElementById(key + index).blur() + const nextkeyindex = keyfield.findIndex(k => k === key) + 1 + this.$nextTick(() => { + let dom = document.getElementById(keyfield[nextkeyindex] + index) + if(dom){ + dom.focus() + } + }) + } + }, + getLen(){ + let arr = [] + this.list.forEach(item => { + arr.push(item) + item.children.forEach(child => { + arr.push(child) + }) + }) + return arr.length + } }, } </script> @@ -449,14 +794,14 @@ <style> .packageInspect-detail { width: 100%; - height: 490px; + height: 520px; padding: 10px 20px; - display: flex; border: 1px solid #ddd; background-color: #fff; margin-top: 10px; box-sizing: border-box; - flex-wrap: wrap; + /* display: flex; + flex-wrap: wrap; */ } .packageInspect-result { -- Gitblit v1.9.3