1.sop工艺 变成批量绑定

小小儁爺

2026-04-28 709fa95bc62e339ec74d8d8084b7380a62a8474f

 src/views/sopManager/sopRoute.vue

@@ -184,29 +184,43 @@
      v-el-drag-dialog
      title="文件上传"
      :visible.sync="dialogVisible"
      width="800px"
      width="1000px"
      :close-on-click-modal="false"
      top="15vh"
      top="5vh"
      @closed="handleClose"
      @close="handleClose"
    >
      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">
        <el-form-item label="产品信息" prop="partcode">
          <el-select
            v-model="dialogForm.partcode"
        <el-form-item label="产品信息">
          <el-button
            v-waves
            type="primary"
            style="width: 200px"
            placeholder="请选择"
            filterable
            :popper-append-to-body="false"
            @change="partcodeChange"
          >
            <el-option
              v-for="item in partcodeArr"
              :key="item.partcode"
              :label="item.partname+' / '+item.partcode"
              :value="item.partcode"
            />
          </el-select>
            icon="el-icon-circle-plus-outline"
            @click="selectSuitpart"
          >选择物料
          </el-button>
          <div v-if="multipleSelection.length>0">
            已选择{{ multipleSelection.length }}个物料
          </div>
          <!--          <div v-if="dialogForm.partcode.toString().trim().length>0">-->
          <!--            已选择{{ dialogForm.partcode }} {{ dialogForm.partname }}-->
          <!--          </div>-->
          <!--          <el-select-->
          <!--            v-model="dialogForm.partcode"-->
          <!--            style="width: 200px"-->
          <!--            placeholder="请选择"-->
          <!--            filterable-->
          <!--            :popper-append-to-body="false"-->
          <!--            @change="partcodeChange"-->
          <!--          >-->
          <!--            <el-option-->
          <!--              v-for="item in partcodeArr"-->
          <!--              :key="item.partcode"-->
          <!--              :label="item.partname+' / '+item.partcode"-->
          <!--              :value="item.partcode"-->
          <!--            />-->
          <!--          </el-select>-->
        </el-form-item>
        <el-form-item
          v-if="mesSetting.route"
@@ -236,6 +250,7 @@
            style="width: 200px"
            placeholder="请选择"
            filterable
            multiple
            collapse-tags
            :popper-append-to-body="false"
            @change="stepcodeChange"
@@ -265,9 +280,6 @@
            />
          </el-select>
        </el-form-item>
        <el-form-item label="版本号">
          <el-input v-model="dialogForm.fileversion" disabled style="width: 200px" />
        </el-form-item>
        <el-form-item label="文件上传" prop="Files">
          <div style="width: 200px;">
            <el-upload
@@ -279,9 +291,8 @@
              :on-exceed="handleExceed"
              :auto-upload="false"
              :multiple="false"
              accept=".mp4,.pdf,.png,.jpeg,.jpg,.svg,.txt,.xlsx,.xls"
            >
              <!--              accept=".mp4,.pdf"-->
              <!--              accept=".mp4,.pdf,.png,.jpeg,.jpg"-->
              <el-button
                v-waves
                type="primary"
@@ -291,6 +302,60 @@
              </el-button>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label-width="120" label="对应版本号">
          <el-table
            :data="versionList"
            border
            style="width: 800px"
            :header-cell-style="this.$headerCellStyle"
            :cell-style="this.$cellStyle"
            height="300"
          >
            <el-table-column
              type="index"
              label="序号"
              width="60"
              align="center"
            />
            <el-table-column
              prop="materielcode"
              label="物料编码"

              show-tooltip-when-overflow
            />
            <el-table-column
              prop="materielname"
              label="物料名称"

              show-tooltip-when-overflow
            />
            <el-table-column
              prop="materielspec"
              label="规格型号"

              show-tooltip-when-overflow
            />
            <el-table-column
              prop="stepcode"
              label="工序编码"
              width="100"
              align="center"
            />
            <el-table-column
              prop="stepname"
              label="工序名称"
              width="100"
              align="center"
            />
            <el-table-column
              prop="file_version"
              label="版本号"
              width="100"
              align="center"
            />
          </el-table>

        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
@@ -307,16 +372,212 @@
      </span>
    </el-dialog>

    <!--选择物料-->
    <el-dialog
      v-el-drag-dialog
      :title="dialogForm.suitobject==='P'?'选择物料':'选择物料类别'"
      :visible.sync="dialogVisibleSuitobject"
      width="1460px"
      :close-on-click-modal="false"
      top="5vh"
      @closed="handleCloseSuitobject"
      @close="handleCloseSuitobject"
    >

      <div style="display: flex">
        <div style="width: 300px;margin-right: 20px;background:#fff">

          <div style="margin: 20px 10px 0 10px;display: flex;justify-content: space-between;">
            <div style="display: flex;">
              <div
                style="width: 5px;height: 100%;border-radius: 5px;"
                :style="{background:$store.state.settings.theme}"
              />
              <div style="margin-left: 8px;">存货档案</div>
            </div>
          </div>

          <el-tree
            ref="treeLeftRef"
            style="padding: 10px;overflow: auto;height: 600px;"
            :data="treeLeft"
            node-key="code"
            highlight-current
            :props="defaultPropsLeft"
            :default-expand-all="true"
            :expand-on-click-node="false"
            @node-click="getTMaterielData"
          />
        </div>
        <div
          style=" width:calc(100% - 300px);"
        >
          <div class="bodyTopFormGroup">
            <el-form
              ref="suitobjectForm"
              :model="suitobjectForm"
              label-width="80px"
              inline
              style="display: flex;"
            >
              <div class="elForm">
                <el-form-item label="存货编码" style=" display: flex;">
                  <el-input
                    v-model="suitobjectForm.partcode"
                    placeholder="请输入"
                    :style="{minWidth:'100px',width:150+'px'}"
                  />
                </el-form-item>
                <el-form-item label="存货名称" style=" display: flex;">
                  <el-input
                    v-model="suitobjectForm.partname"
                    placeholder="请输入"
                    :style="{minWidth:'100px',width:150+'px'}"
                  />
                </el-form-item>
                <el-form-item label="存货规格" style=" display: flex;">
                  <el-input
                    v-model="suitobjectForm.partspec"
                    placeholder="请输入"
                    :style="{minWidth:'100px',width:150+'px'}"
                  />
                </el-form-item>

              </div>
              <div class="bodySearchReset">
                <el-button
                  v-waves
                  type="primary"
                  icon="el-icon-search"
                  @click="getTMaterielData($refs.treeLeftRef.getCurrentNode())"
                >查询
                </el-button>
                <el-button
                  v-waves
                  type="info"
                  icon="el-icon-refresh"
                  @click="resetSuitobject"
                >重置
                </el-button>
              </div>
            </el-form>
          </div>

          <div class="elTableDiv">
            <el-table
              ref="tableDataRef3"
              class="tableFixed"
              :data="suitobjectTableData"
              height="520"
              border
              row-class-name="custom-row"
              highlight-current-row
              :header-cell-style="this.$headerCellStyle"
              :cell-style="this.$cellStyle"
              :row-key="getRowKey"
              @select-all="handleSelectionAllChange"
              @select="handleSelectionChange"
            >
              <!--              @row-click="rowClick2"-->
              <el-table-column
                width="50"
                type="selection"
                :reserve-selection="true"
                fixed
              >
                <!--                <template slot-scope="{row}">-->
                <!--                  <el-radio-->
                <!--                    v-model="dialogForm.partcode"-->
                <!--                    :label="row.partcode"-->
                <!--                    style="color: transparent;padding-left: 10px;"-->
                <!--                  />-->
                <!--                </template>-->
              </el-table-column>
              <el-table-column
                prop="rowNum"
                width="70"
                fixed
                label="序号"
              />
              <el-table-column
                prop="partcode"
                label="存货编码"
              />
              <el-table-column
                prop="partname"
                label="存货名称"
                show-tooltip-when-overflow
                min-width="200"
              />
              <el-table-column
                prop="partspec"
                label="规格型号"
              >
                <template slot-scope="{row}">
                  {{ row.partspec ? row.partspec : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="is_retdproc"
                label="是否绑定工艺"
              >
                <template slot-scope="{row}">
                  <el-tag v-if="row.is_retdproc==='Y'" size="small" type="success">已绑定</el-tag>
                  <el-tag v-else size="small" type="danger">未绑定</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="idinventoryclassname"
                label="所属类别"
              />
            </el-table>
          </div>

          <!--分页-->
          <pagination
            :total="suitobjectTotal"
            :page.sync="suitobjectForm.page"
            :limit.sync="suitobjectForm.rows"
            align="right"
            layout="total,prev, pager, next,sizes,jumper"
            popper-class="select_bottom"
            @pagination="getTMaterielData($refs.treeLeftRef.getCurrentNode())"
          />

        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancelSuitobject">返 回</el-button>
          <el-button
            v-waves
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            type="primary"
            @click="dialogVisibleConfirmSuitobject"
          >确 认</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { ProcessSopAddSeave, ProcessSopDeleteSeave, ProcessSopSearch, ProcessSopMaxVersion } from '@/api/SopManager'
import {
  ProcessSopAddSeave,
  ProcessSopDeleteSeave,
  ProcessSopSearch,
  ProcessSopMaxVersion,
  ProcessSopPartSelectRpute
} from '@/api/SopManager'
import waves from '@/directive/waves'
import elDragDialog from '@/directive/el-drag-dialog'
import { PartSelect } from '@/api/ProductModel'
import { PartSelect, TMaterielClassTree, TMaterielData } from '@/api/ProductModel'
import { PartSelectRpute, RouteSelectStep } from '@/api/basicSettings'
import arrayToTree from 'array-to-tree'

export default {
  name: 'SopRoute',
@@ -333,8 +594,8 @@
      form: {
        check: 'N', // 是否选中最高版本
        search: '', // 搜索关键字
        prop: 'lm_date', // 排序字段
        order: 'desc', // 排序字段
        prop: 'materielcode,routecode,stepcode', // 排序字段
        order: 'asc', // 排序字段
        page: 1, // 第几页
        rows: 20 // 每页多少条
      },
@@ -345,8 +606,10 @@
      dialogVisible: false,
      dialogForm: {
        partcode: '', // 设备类型编码
        partname: '', //

        route: '', // 物料编码
        stepcode: '',
        stepcode: [],
        defilename: '',
        filetypecode: '', // 文件类型编码
        Files: '', // 文件
@@ -378,7 +641,35 @@
        { code: 'P002', name: '检验指导书' },
        { code: 'P003', name: '图纸' }
      ],
      mesSetting: JSON.parse(localStorage.getItem('mesSetting'))
      mesSetting: JSON.parse(localStorage.getItem('mesSetting')),

      dialogVisibleSuitobject: false,
      treeLeft: [
        {
          code: '-1',
          name: '全部'
        }
      ], // 左侧树
      treeLeftArr: [],
      defaultPropsLeft: {
        children: 'children',
        label: 'name'
      },

      suitobjectTableData: [],
      suitobjectForm: {
        inventoryclasscode: '',
        partcode: '',
        partname: '',
        partspec: '',
        page: 1,
        rows: 20,
        prop: 'lm_date', // 排序字段
        order: 'desc' // 排序字段
      },
      suitobjectTotal: 0,
      multipleSelection: [],
      versionList: []

    }
  },
@@ -387,17 +678,127 @@
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getProcessSopSearch()
    this.getPartSelect()
    // this.getPartSelect()
    this.getTMaterielClassTree()
  },
  created() {
    this.getProcessSopSearch()
    this.getPartSelect()
    // this.getPartSelect()
    this.getTMaterielClassTree()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    getRowKey(row) {
      return row.partcode
    },
    handleSelectionAllChange(val) {
      this.multipleSelection = JSON.parse(JSON.stringify(val))
    },
    handleSelectionChange(val, row) {
      const arrAll = JSON.parse(JSON.stringify(val))
      if (this.multipleSelection.filter((item) => item.partcode === row.partcode).length === 0) {
        this.multipleSelection = arrAll
      } else {
        this.multipleSelection = arrAll.filter((item) => item.partcode !== row.partcode)
      }
    },
    selectSuitpart() {
      this.dialogVisibleSuitobject = true
      this.$nextTick(() => {
        this.$refs.treeLeftRef.setCurrentKey('-1')
        this.getTMaterielData(this.$refs.treeLeftRef.getCurrentNode())
      })
    },
    handleCloseSuitobject() {
      this.suitobjectForm = {
        inventoryclasscode: '',
        partcode: '',
        partname: '',
        partspec: '',
        page: 1,
        rows: 20,
        prop: 'lm_date', // 排序字段
        order: 'desc' // 排序字段
      }
    },
    dialogVisibleCancelSuitobject() {
      this.dialogVisibleSuitobject = false
    },

    async  dialogVisibleConfirmSuitobject() {
      const { data: res } = await ProcessSopPartSelectRpute(this.multipleSelection.map(i => i.partcode))
      // await this.partcodeChange(this.dialogForm.partcode)
      if (this.mesSetting.route) {
        this.routeArr = res
      } else {
        this.stepcodeArr = res
      }
      this.dialogForm.route = ''
      this.dialogForm.stepcode = []
      this.dialogVisibleSuitobject = false

      this.versionList = []
      // await this.stepcodeChange()
    },

    rowClick2(row, event, column) {
      this.dialogForm.partcode = row.partcode
      this.dialogForm.partname = this.suitobjectTableData.find(i => i.partcode === row.partcode).partname
      // this.dialogForm.partspec = this.partcodeArr.find(i => i.partcode === row.partcode).partspec
    },

    resetSuitobject() {
      this.suitobjectForm.inventoryclasscode = ''
      this.suitobjectForm.partcode = ''
      this.suitobjectForm.partname = ''
      this.suitobjectForm.partspec = ''
      this.$refs.treeLeftRef.setCurrentKey('-1')
      this.getTMaterielData(this.$refs.treeLeftRef.getCurrentNode())
    },
    async getTMaterielClassTree() {
      const res = await TMaterielClassTree()
      res.data.forEach(i => {
        i.idparent = i.idparent ? i.idparent : '-1'
      })
      this.treeLeftArr = res.data
      this.treeLeftArr.forEach(e => {
        e.name = e.code + ' ' + e.name
      })
      this.treeLeft = arrayToTree(this.treeLeft.concat(res.data), {
        parentProperty: 'idparent',
        customID: 'code',
        childrenProperty: 'children'
      })
    },
    async getTMaterielData(node) {
      const result = this.getChildrenCodeMethod(node, [])
      if (result.includes('-1')) {
        result.shift()
      }
      this.suitobjectForm.inventoryclasscode = result.join(',')
      const res = await TMaterielData(this.suitobjectForm)

      this.suitobjectTableData = res.data
      this.suitobjectTotal = res.count

      this.$nextTick(() => {
        this.$refs.tableDataRef3.doLayout()
      })
    },
    // 递归取子集的所有code
    getChildrenCodeMethod(node, result) {
      result.push(node.code)
      if (node.children && node.children.length > 0) {
        node.children.forEach(i => {
          this.getChildrenCodeMethod(i, result)
        })
      }
      return result
    },

    async getPartSelect() {
      const { data: res } = await PartSelect()
      this.partcodeArr = res
@@ -442,7 +843,7 @@
        this.stepcodeArr = res
      }
      this.dialogForm.route = ''
      this.dialogForm.stepcode = ''
      this.dialogForm.stepcode = []
      await this.stepcodeChange()
    },
    async routeChange() {
@@ -452,19 +853,20 @@
      }
      const { data: res } = await RouteSelectStep(data)
      this.stepcodeArr = res
      this.dialogForm.stepcode = ''
      this.dialogForm.stepcode = []
      await this.stepcodeChange()
    },
    async stepcodeChange() {
      if (this.dialogForm.partcode && this.dialogForm.stepcode && this.dialogForm.filetypecode) {
      if (this.multipleSelection && this.dialogForm.filetypecode) {
        const data = {
          partcode: this.dialogForm.partcode,
          // partcode: this.dialogForm.partcode,
          partcode: this.multipleSelection.map(i => i.partcode),
          routecode: this.dialogForm.route,
          stepcode: this.dialogForm.stepcode,
          filetypecode: this.dialogForm.filetypecode
        }
        const { data: res } = await ProcessSopMaxVersion(data)
        this.dialogForm.fileversion = res
        this.versionList = res
      }
    },

@@ -517,8 +919,11 @@
      this.dialogForm.fileversion = ''
      this.dialogForm.stepcode = ''
      this.dialogForm.Files = ''
      this.multipleSelection = []
      this.versionList = []
      this.$refs.uploadFileRef.clearFiles()
      this.$refs.dialogForm.clearValidate()
      this.$refs.tableDataRef3.clearSelection()
    },
    // 对话框取消
    dialogVisibleCancel() {
@@ -527,25 +932,46 @@
    },
    // 对话框确认
    dialogVisibleConfirm() {
      console.log(this.$refs.uploadFileRef.uploadFiles[0])
      // console.log(this.$refs.uploadFileRef.uploadFiles[0])
      if (!this.$refs.uploadFileRef.uploadFiles[0]) {
        this.$message.info('请选择文件上传！')
        return this.$message.info('请选择文件上传！')
      }

      const isLt100M = this.$refs.uploadFileRef.uploadFiles[0].size / 1024 / 1024 <= 1024
      const isLt100M = this.$refs.uploadFileRef.uploadFiles[0].size / 1024 / 1024 <= 10
      if (!isLt100M) {
        return this.$message.info('请检查，上传文件大小不能超过1024MB!')
        return this.$message.info('请检查，上传文件大小不能超过10MB!')
      }

      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          if (this.multipleSelection.length === 0) {
            return this.$message.info('请先选择产品！')
          }

          // const sopPartVersionList = []
          // this.versionList.forEach(i => {
          //   sopPartVersionList.push({
          //     PartCode: i.materielcode,
          //     Routecode: this.dialogForm.route,
          //     StepCode: i.stepcode,
          //     Version: i.file_version
          //   })
          // })

          const formData = new FormData()
          formData.append('partcode', this.dialogForm.partcode)
          formData.append('routecode', this.dialogForm.route)
          formData.append('stepcode', this.dialogForm.stepcode)
          this.versionList.forEach((i, index) => {
            formData.append(`sopPartVersionList[${index}].PartCode`, i.materielcode)
            formData.append(`sopPartVersionList[${index}].Routecode`, this.dialogForm.route)
            formData.append(`sopPartVersionList[${index}].StepCode`, i.stepcode)
            formData.append(`sopPartVersionList[${index}].Version`, i.file_version)
          })
          // formData.append('sopPartVersionList', JSON.stringify(sopPartVersionList).toString())
          // formData.append('partcode', this.dialogForm.partcode)
          // formData.append('routecode', this.dialogForm.route)
          // formData.append('stepcode', this.dialogForm.stepcode)
          formData.append('filename', this.$refs.uploadFileRef.uploadFiles[0].name)
          formData.append('filetypecode', this.dialogForm.filetypecode)
          formData.append('version', this.dialogForm.fileversion)
          // formData.append('version', this.dialogForm.fileversion)
          formData.append('file', this.$refs.uploadFileRef.uploadFiles[0].raw)
          // for (var [key, value] of formData) {
          //   console.log(key, value)
@@ -580,8 +1006,16 @@
}
</script>

<style lang="scss" scoped>
.elTableDiv {
  ::v-deep .el-radio__label {
    display: none !important;
  }
}
</style>
<style>
.el-table .custom-row {
  background: #f8f8fa;
}

</style>