From 18f93f25e8aea5eb0a35a5526fa8de7f4553b75f Mon Sep 17 00:00:00 2001 From: licp <lichunping@guanfang.com.cn> Date: 星期三, 24 四月 2024 18:33:58 +0800 Subject: [PATCH] 合并 --- src/views/plan/manufacturingorder/productorder-form.vue | 209 +++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 197 insertions(+), 12 deletions(-) diff --git a/src/views/plan/manufacturingorder/productorder-form.vue b/src/views/plan/manufacturingorder/productorder-form.vue index 081be95..126761a 100644 --- a/src/views/plan/manufacturingorder/productorder-form.vue +++ b/src/views/plan/manufacturingorder/productorder-form.vue @@ -265,47 +265,71 @@ </el-form-item> </el-col> </el-row> - <el-row> <el-col :span="24" class="productorder-operates-col"> - <el-card class="productorder-operates"> + <el-card class="productorder-operates" > + <!-- <el-row> + <el-col :span="2" class="frame1">搴忓彿 + </el-col> + <el-col :span="4" class="frame1">宸ュ簭鍙� + </el-col> + <el-col :span="5" class="frame1">宸ュ簭鎻忚堪 + </el-col> + <el-col :span="9" class="frame1">闆朵欢 + </el-col> + <el-col :span="3" class="frame1">鎿嶄綔 + </el-col> + </el-row> --> <el-table + id="operationTable" ref="operationTable" + class="basic-template-table" :data="operations" - style="width: 100%;" height="593px" + border highlight-current-row :default-sort="{ prop: 'operationOrder' }" @row-click="operationRowClick" > <el-table-column prop="operationOrder" + min-width="50" label="搴忓彿" - ></el-table-column> + > + <template slot-scope="scope"> + <div style="display:flex"> + <span style="width:20px;"> + <i class="icon aufontAll h-icon-all-drag"></i + ></span> + <span>{{ scope.row.operationOrder }}</span> + </div> + </template> + </el-table-column> <el-table-column prop="operationNo" header-align="center" align="center" + min-width="100" label="宸ュ簭鍙�" ></el-table-column> <el-table-column prop="operationName" header-align="center" align="center" + min-width="100" label="宸ュ簭鎻忚堪" ></el-table-column> - <el-table-column prop="partName" header-align="center" - align="center" + min-width="100px" label="闆朵欢" ></el-table-column> - <el-table-column prop="remark" header-align="center" align="center" + min-width="50" label="鎿嶄綔" > <template slot-scope="scope"> @@ -318,6 +342,41 @@ </template> </el-table-column> </el-table> + <!-- <zttdraggable + :forceFallback="true" + :list="operations" + :animation="200" + fallbackClass="fallbackStyle" + ghostClass="item_ghost" + @end="dragEnd" + :default-sort="{ prop: 'operationOrder' }" + @choose="operationRowClick" + > + <div + :class="{ dragItem: true, active: x.active }" + v-for="(x, i) in operations" + :key="i" + > + <el-row> + <el-col :span="2" class="frame">{{ i+1 }} + </el-col> + <el-col :span="4" class="frame">{{ x.operationNo }} + </el-col> + <el-col :span="5" class="frame">{{ x.operationName }} + </el-col> + <el-col :span="9" class="frame">{{ x.partName }} + </el-col> + <el-col :span="3" class="frame"> + <el-button + type="text" + size="mini" + @click="openOrderOperation(x)" + >缂栬緫 + </el-button> + </el-col> + </el-row> + </div> + </zttdraggable> --> </el-card> </el-col> </el-row> @@ -926,7 +985,27 @@ /> </div> </template> -<style> +<style lang="scss"> +.frame{ + display: flex; + justify-content: center; + align-items: center; + height: 100px; + // border-width: 1px; + // border-color: rgb(129, 129, 129); + // border-style: solid; + font-size: 15px; +} +.frame1{ + display: flex; + justify-content: center; + align-items: center; + height: 50px; + // border-width: 1px; + // border-color: rgb(129, 129, 129); + // border-style: solid; + font-size: 15px; +} .productorder-basic { background-color: #fff; height: 150px; @@ -965,6 +1044,7 @@ .productorder-operates { height: 605px; border: 1px solid #ddd; + overflow: auto; } .productorder-params-template { @@ -993,12 +1073,40 @@ .productorder-operates-col { margin-bottom: 0px; } +.basic-template-table .el-table__body .el-table__row td:first-child .cell { + padding-left: 0px; + padding-right: 0px; +} + +.basic-template-table .el-table__body .el-table__row:hover { + cursor: move; +} + +.basic-template-table .el-table__body .el-table__row:hover .icon { + display: inline-block; +} + +.basic-template-table .el-table__body .el-table__row .icon { + color: rgba(0, 0, 0, 0.45); + font-size: 12px; + line-height: 18px; + display: none; +} + +.aufontAll { + font-family: aufontAll !important; + font-size: 14px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} </style> <style scoped> /deep/ .el-input-number.is-without-controls .el-input__inner { text-align: start; } + </style> <script> import { @@ -1016,7 +1124,8 @@ addRoutingTemplateParamLedForOrder, updateMoBom, delMoBom, - bomSelectChange + bomSelectChange, + changeOrder, } from '@/api/plan/manufacturingorder' import { qryMoSamplingRule, delMoSamplingRule } from '@/api/plan/mosamplingrule' import { @@ -1046,7 +1155,7 @@ import spotCheckRule from './orderSpotCheckRule' import spotCheckRuleEdit from './orderSpotCheckRuleEdit' import { mapGetters } from 'vuex' - +import zttdraggable from 'vuedraggable' export default { components: { CustomerOrder, @@ -1062,7 +1171,8 @@ operationDialog, insertOperationDialog, spotCheckRule, - spotCheckRuleEdit + spotCheckRuleEdit, + zttdraggable }, data() { @@ -1173,6 +1283,7 @@ } }, mounted() { + this.rowDrop() window.addEventListener( 'hashchange', () => { @@ -1332,6 +1443,70 @@ } }, methods: { + rowDrop() { + const that = this + const tbody = document.querySelector( + '#operationTable .el-table__body-wrapper tbody' + ) + Sortable.create(tbody, { + // 缁撴潫鎷栨嫿 + onEnd({ newIndex, oldIndex }) { + if (newIndex > oldIndex) { + // 涓嬬Щ + that.operations + .filter((e) => e.operationOrder == oldIndex + 1) + .forEach((e) => (e.operationOrder = 'x')) + that.operations + .filter((e) => e.operationOrder > oldIndex + 1 && e.operationOrder <= newIndex + 1) + .forEach((e) => (e.operationOrder = e.operationOrder - 1)) + that.operations + .filter((e) => e.operationOrder == 'x') + .forEach((e) => (e.operationOrder = newIndex + 1)) + } else if (oldIndex > newIndex) { + // 涓婄Щ + that.operations + .filter((e) => e.operationOrder == oldIndex + 1) + .forEach((e) => (e.operationOrder = 'x')) + that.operations + .filter((e) => e.operationOrder < oldIndex + 1 && e.operationOrder >= newIndex + 1) + .forEach((e) => (e.operationOrder = e.operationOrder + 1)) + that.operations + .filter((e) => e.operationOrder == 'x') + .forEach((e) => (e.operationOrder = newIndex + 1)) + } + // 鎷栨嫿缁撴潫鍚庯紝淇濆瓨鏂扮殑鎺掑簭 + let data = that.operations.map(el =>{ + return { + id:el.id, + operationOrder:el.operationOrder, + } + }) + changeOrder(data).then().catch(error => { + console.error(error) + }); + } + }) + }, + dragEnd(e){ + this.operations.forEach((e, i) => { + e.index = i + 1 + e.operationOrder = i+1 + }) + console.log(this.operations,"鎷栨嫿缁撴潫kk"); + this.dragEndstart() + }, + dragEndstart(){ + let data = this.operations.map(el =>{ + return { + id:el.id, + operationOrder:el.operationOrder, + } + }) + changeOrder(data).then((res) =>{ + }).catch(error => { + console.error(error) + }); + }, getSysParam(paramKey) { getSysParam(paramKey).then((response) => { var paramVal = response.data.data @@ -1596,7 +1771,7 @@ }, // 2.tabs-宸ヨ壓璺嚎 //宸ヨ壓鏂囦欢閫夋嫨 - + // 宸ヨ壓璺嚎閫夋嫨 routingSelectChanged(routingId) { this.currentRouting = this.dataForm.routingList.find( @@ -1670,6 +1845,8 @@ }, // 鐐瑰嚮宸ヨ壓宸ュ簭琛岃Е鍙戞牎楠屽伐鑹烘槸鍚︿慨鏀癸紝鑻ヤ慨鏀瑰垯涓嶅彲鎿嶄綔锛岄渶鍏堜繚瀛橈紝鑻ユ湭淇敼锛屽垯鍙煡璇㈠嚭瀵瑰簲鐨勫弬鏁伴泦 operationRowClick(row) { + // const row = this.operations[event.oldIndex] + console.log(row); if (this.dataForm.id != null && this.dataForm.id !== 0) { this.routingOperationId = row.technologyRoutingOperationId this.moRoutingOperationId = row.id @@ -1923,6 +2100,14 @@ }, // 淇濆瓨鎵�鏈夊弬鏁扮殑淇敼 saveAllParamChange() { + this.templateParamList.forEach(e=>{ + if(e.paramValue!=null){ + e.paramValue=e.paramValue.replace(',','锛�').replace('(','锛�').replace(')','锛�') + if (!isNaN(e.paramValue)) { + e.paramValue='='+e.paramValue + } + } + }) const paramJson = { routingOperationParam: this.templateParamList } putRoutingTemplateParamForOrder(paramJson).then((response) => { const data = response.data -- Gitblit v1.9.3