车间订单处理工艺文件工序排序错误问题

chenhj

2 天以前 a3c7a21828653c2c74c20b1f69baf6a9fbfb8e1c

 src/views/plan/manufacturingorder/productorder-form.vue

@@ -7,8 +7,11 @@
        <h2 v-if="!editable">查看-车间订单</h2>
      </div>
      <div class="btn-group header-right" v-if="editable">
        <el-button :disabled="isSubmit" v-thinclick="`dataFormSubmit`"
          type="primary">保存</el-button
        <el-button
          :disabled="isSubmit"
          v-thinclick="`dataFormSubmit`"
          type="primary"
          >保存</el-button
        >
      </div>
    </div>
@@ -65,15 +68,15 @@
            </el-col>
            <el-col :span="6">
              <el-form-item label="零件" prop="partId">
                <el-tooltip class="item" effect="dark" :content="partStr" >
                <el-input v-model="partStr" placeholder="" readonly>
                  <el-button
                    v-if="!this.dataForm.id"
                    slot="append"
                    icon="el-icon-search"
                    @click="openRoutingDialog()"
                  ></el-button>
                </el-input>
                <el-tooltip class="item" effect="dark" :content="partStr">
                  <el-input v-model="partStr" placeholder="" readonly>
                    <el-button
                      v-if="!this.dataForm.id"
                      slot="append"
                      icon="el-icon-search"
                      @click="openRoutingDialog()"
                    ></el-button>
                  </el-input>
                </el-tooltip>
              </el-form-item>
            </el-col>
@@ -91,7 +94,7 @@
            <el-col :span="4">
              <el-form-item label="完成数量" prop="qtyFinished">
                <el-input-number
                  style= "width: 90%"
                  style="width: 90%"
                  v-model="dataForm.qtyFinished"
                  placeholder=""
                  :controls="false"
@@ -128,11 +131,15 @@
                ></el-input>
              </el-form-item>
            </el-col> -->
             <el-col :span="5">
            <el-col :span="5">
              <el-form-item label="备注" prop="remark">
                <el-tooltip class="item" effect="dark" :content="dataForm.remark">
                <el-input v-model="dataForm.remark" placeholder="">
                </el-input>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="dataForm.remark"
                >
                  <el-input v-model="dataForm.remark" placeholder="">
                  </el-input>
                </el-tooltip>
              </el-form-item>
            </el-col>
@@ -154,8 +161,23 @@
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="工艺文件" prop="technologyDocumentName">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="dataForm.technologyDocumentName"
                >
                  <el-input
                    v-model="dataForm.technologyDocumentName"
                    placeholder=""
                  >
                  </el-input>
                </el-tooltip>
              </el-form-item>
            </el-col>
          </el-row>
            <!-- <el-col
          <!-- <el-col
              :span="2"
              v-if="permissions.plan_manufacturingorder_bom_sure"
            >
@@ -181,7 +203,7 @@
                </el-switch>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="2">
          <!-- <el-col :span="2">
              <el-form-item
                label="IFS车间订单接收时报告工序"
                prop="isReportOperation"
@@ -191,7 +213,7 @@
                </el-switch>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="2">
          <!-- <el-col :span="2">
              <el-form-item label="BOM确认">
                <el-switch >
                </el-switch>
@@ -209,7 +231,6 @@
                </el-switch>
              </el-form-item>
            </el-col> -->

        </div>
        <div class="productorder-detail">
          <el-card class="productorder-list">
@@ -231,7 +252,7 @@
                            <el-option
                              v-for="item in dataForm.routingList"
                              :key="item.id"
                              :label="item.routingNo "
                              :label="item.routingNo"
                              :value="item.id"
                            >
                            </el-option>
@@ -257,47 +278,92 @@
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="24" class="productorder-operates-col">
                        <el-card class="productorder-operates">
                          <div style="display:flex;justify-content:flex-end;">
<!--                            <el-button-->
<!--                              style="padding: 3px 0;margin-right:10px;"-->
<!--                              type="text"-->
<!--                              size="medium"-->
<!--                              @click="refresh"-->
<!--                              >刷新-->
<!--                            </el-button>-->
                            <el-button
                              style="padding: 3px 0;margin-right:10px;"
                              type="text"
                              size="medium"
                              @click="addOrderOperation"
                              >添加
                            </el-button>
                          </div>
                          <!-- <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
                            :key="operationIndex"
                            :data-operation-index="operationIndex"
                            id="operationTable"
                            ref="operationTable"
                            class="basic-template-table"
                            :data="operations"
                            style="width: 100%;"
                            row-key="id"
                            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">
@@ -307,9 +373,51 @@
                                  @click.stop="openOrderOperation(scope.row)"
                                  >编辑
                                </el-button>
                                <el-button
                                  style="color:#f56c6c;"
                                  type="text"
                                  size="mini"
                                  @click.stop="deleteOrderOperation(scope.row)"
                                  >删除
                                </el-button>
                              </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>
@@ -481,7 +589,7 @@
                          </el-table>
                        </el-card>
                      </el-tab-pane>
                     <!--  <el-tab-pane
                      <!--  <el-tab-pane
                        label="检测标准"
                        key="tb1"
                        id="tb1"
@@ -918,7 +1026,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;
@@ -957,6 +1085,7 @@
.productorder-operates {
  height: 605px;
  border: 1px solid #ddd;
  overflow: auto;
}

.productorder-params-template {
@@ -985,6 +1114,33 @@
.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>
@@ -1008,7 +1164,9 @@
  addRoutingTemplateParamLedForOrder,
  updateMoBom,
  delMoBom,
  bomSelectChange
  bomSelectChange,
  changeOrder,
  addMoRoutingOperation
} from '@/api/plan/manufacturingorder'
import { qryMoSamplingRule, delMoSamplingRule } from '@/api/plan/mosamplingrule'
import {
@@ -1038,7 +1196,7 @@
import spotCheckRule from './orderSpotCheckRule'
import spotCheckRuleEdit from './orderSpotCheckRuleEdit'
import { mapGetters } from 'vuex'

import zttdraggable from 'vuedraggable'
export default {
  components: {
    CustomerOrder,
@@ -1054,12 +1212,13 @@
    operationDialog,
    insertOperationDialog,
    spotCheckRule,
    spotCheckRuleEdit
    spotCheckRuleEdit,
    zttdraggable
  },

  data() {
    return {
      componentsTable:[],
      componentsTable: [],
      typeOptions: [],
      paramTemplateSelArr: [],
      paramTemplateSelCol: 'operationTemplateNo',
@@ -1113,17 +1272,24 @@
        endDate: null,
        manufactureAttr: 'N',
        isReportOperation: false,
        outPutBatchList: []
        outPutBatchList: [],
        technologyDocumentId: null,
        technologyDocumentName: null
      },
      currentRow: [],
      currentRouting: {}, // 当前选择的工艺
      operations: [], // 当前选择工艺对应的工序
      operationIndex: 10,
      operationSortable: null,
      currentBom: {}, // 当前选择的产品结构
      components: [], // 当前选择产品结构对应的结构组件
      factoryOptions: [],
      operationTemplateList: [], // 参数集
      templateParamList: [], // 参数
      dataRule: {
        technologyDocumentName: [
          { required: true, message: '工艺文件不能为空', trigger: 'blur' }
        ],
        workshopTypeCode: [
          { required: true, message: '车间订单类型不能为空', trigger: 'blur' }
        ],
@@ -1160,6 +1326,7 @@
    }
  },
  mounted() {
    this.rowDrop()
    window.addEventListener(
      'hashchange',
      () => {
@@ -1170,6 +1337,12 @@
      },
      false
    )
  },
  beforeDestroy() {
    if (this.operationSortable) {
      this.operationSortable.destroy()
      this.operationSortable = null
    }
  },
  created() {
    this.dataForm.id = Number(this.$route.query.id)
@@ -1234,8 +1407,7 @@
        }
      }
    },
    components(newVal,oldVal){
    },
    components(newVal, oldVal) {},
    currentRouting(newValue, oldValue) {
      if (newValue && newValue.id) {
        if (this.dataForm.id != null && this.dataForm.id !== 0) {
@@ -1294,6 +1466,9 @@
        dataType: '生产要求',
        routingOperationId: newValue
      })
    },
    operationIndex() {
      this.rowDrop()
    }
  },
  computed: {
@@ -1319,6 +1494,96 @@
    }
  },
  methods: {
    rowDrop() {
      if (this.operationSortable) {
        this.operationSortable.destroy()
        this.operationSortable = null
      }

      this.$nextTick(() => {
        requestAnimationFrame(() => {
          const that = this
          const root =
            this.$el.querySelector(
              `#operationTable[data-operation-index="${this.operationIndex}"]`
            ) || this.$el.querySelector('#operationTable')
          const tbody = root
            ? root.querySelector('.el-table__body-wrapper tbody')
            : null
          if (!tbody) return

          this.operationSortable = 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))
              }
              // 拖拽结束后，保存新的排序
              const 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() {
      const 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
@@ -1387,7 +1652,7 @@
    },
    // 查询当前车间订单信息
    getOrderInfo() {
      let that=this
      const that = this
      getManufacturingOrder(this.dataForm.id).then((response) => {
        this.dataForm = response.data.data
        // 把工艺挂上去
@@ -1420,13 +1685,7 @@
      checkPart(value, this.dataForm.workshopTypeCode)
        .then((response) => {
          const manufacturingOrderDTO = response.data.data
          /* this.dataForm.routingList = manufacturingOrderDTO.routingList.filter(
            (e) => e.bomTypeDb === this.dataForm.workshopTypeCode
          ) */
          this.dataForm.routingList = manufacturingOrderDTO.routingList
          /* this.dataForm.bomList = manufacturingOrderDTO.bomList.filter(
            (e) => e.bomTypeDb === this.dataForm.workshopTypeCode
          ) */
          this.dataForm.bomList = manufacturingOrderDTO.bomList
          this.dataForm.technologyRoutingId =
            manufacturingOrderDTO.technologyRoutingId
@@ -1488,6 +1747,7 @@
          } else {
            this.dataForm.bomRoot = null
          }

          if (this.dataForm.id) {
            putManufacturingOrder(this.dataForm)
              .then((response) => {
@@ -1562,10 +1822,13 @@
      this.showRouting = true
    },
    selectRouting(param) {
      console.log(param)
      if (param) {
        this.dataForm.partNo = param.partNo
        this.dataForm.partName = param.partName
        this.dataForm.partId = param.partId
        this.dataForm.technologyDocumentId = param.id
        this.dataForm.technologyDocumentName = param.name
        this.$refs.dataForm.validateField('partId', (valid) => {})
      }
    },
@@ -1585,6 +1848,8 @@
      })
    },
    // 2.tabs-工艺路线
    // 工艺文件选择

    // 工艺路线选择
    routingSelectChanged(routingId) {
      this.currentRouting = this.dataForm.routingList.find(
@@ -1658,6 +1923,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
@@ -1911,6 +2178,17 @@
    },
    // 保存所有参数的修改
    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
@@ -2017,45 +2295,70 @@
        }
      }
    },
    // 删除当前工序
    deleteOrderOperation(row) {
      deleteMoRoutingOperation(row.id).then((response) => {
        const resData = response.data
        if (resData.code === 0) {
          const delOperation = this.operations.find((item) => {
            return item.id === row.id
          })
          const delIndex = this.operations.indexOf(delOperation)
          this.operations.splice(delIndex, 1)

          // 查找当前的选中的工序id
          const selectedOperation = this.operations.find((item) => {
            return item.id === this.moRoutingOperationId
          })
          // 存在选中的工序
          if (selectedOperation) {
            this.operationRowClick(selectedOperation)
          } else {
            // 不存在选中的工序，若this.operations不为空，则取第一条工序，若为空，则清空相关工序
            if (this.operations.length > 0) {
              this.operationRowClick(this.operations[0])
            } else {
              // 取消选中高亮
              this.$refs.operationTable.setCurrentRow()
              // 清空当前工艺工序id、清空routingTemplateId、清空参数集operationTemplateList、清空参数templateParamList
              this.routingOperationId = null
              this.moRoutingOperationId = null
              this.moRoutingOperationName = null
              this.routingTemplateId = null
              this.operationTemplateList = []
              this.templateParamList = []
            }
          }
          this.$message.success('订单工序删除成功')
    refresh() {
      getMoRoutingOption(this.dataForm.id).then((response) => {
        if (response.data.code === 0) {
          this.operations = response.data.data
          this.operationIndex += 1
        } else {
          this.$message.error('订单工序删除失败')
          this.operations = []
        }
      })
    },
    // 删除当前工序
    deleteOrderOperation(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteMoRoutingOperation(row.id).then((response) => {
            const resData = response.data
            if (resData.code === 0) {
              const delOperation = this.operations.find((item) => {
                return item.id === row.id
              })
              const delIndex = this.operations.indexOf(delOperation)
              this.operations.splice(delIndex, 1)

              // 查找当前的选中的工序id
              const selectedOperation = this.operations.find((item) => {
                return item.id === this.moRoutingOperationId
              })
              // 存在选中的工序
              if (selectedOperation) {
                this.operationRowClick(selectedOperation)
              } else {
                // 不存在选中的工序，若this.operations不为空，则取第一条工序，若为空，则清空相关工序
                if (this.operations.length > 0) {
                  this.operationRowClick(this.operations[0])
                } else {
                  // 取消选中高亮
                  this.$refs.operationTable.setCurrentRow()
                  // 清空当前工艺工序id、清空routingTemplateId、清空参数集operationTemplateList、清空参数templateParamList
                  this.routingOperationId = null
                  this.moRoutingOperationId = null
                  this.routingTemplateId = null
                  this.operationTemplateList = []
                  this.templateParamList = []
                }
              }
              this.$message.success('订单工序删除成功')
              getMoRoutingOption(this.dataForm.id).then((response) => {
                if (response.data.code === 0) {
                  this.operations = response.data.data
                  this.operationIndex += 1
                } else {
                  this.operations = []
                }
              })
            } else {
              this.$message.error('订单工序删除失败')
            }
          })
        })
        .catch(() => {})
    },
    // 弹出基础工序列表
    addOrderOperation() {
@@ -2088,6 +2391,28 @@
    },
    // 新增工序
    addOperation(operation) {
      operation.moId = this.dataForm.id
      operation.moRoutingId = this.dataForm.technologyRoutingId
      operation.operationId = operation.id
      operation.partId = this.dataForm.partId
      operation.loc = null
      operation.operationOrder = this.operations.length + 1
      operation.id = null
      addMoRoutingOperation(operation).then((response) => {
        const data = response.data
        if (data.code === 0) {
          getMoRoutingOption(this.dataForm.id).then((response) => {
            if (response.data.code === 0) {
              this.operations = response.data.data
              this.operationIndex += 1
            } else {
              this.operations = []
            }
          })
        } else {
          this.$message.error('添加失败')
        }
      })
    },
    insertOperation(operation) {},
    structSelectionChange(val) {