X-web/src/views/modules/production/plan-submit.vue

<template>
  <div>
    <div class="my-title">处理</div>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="auto">
      <el-row class="my-row">
        <el-col :span="6">
          <el-form-item label="项目名称:" prop="projectName">
            <span>{{ dataForm.projectName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="任务号:" prop="orderCode">
            <span>{{ dataForm.orderCode }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="技术协议:" prop="attachList1">
            <span class="attch-file" @click="attachDetail(dataForm.attachList1)">{{ dataForm.attachList1 == null ||
              dataForm.attachList1.length == 0 ? '' : dataForm.attachList1[0].fileName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="资料:" prop="attachList2">
            <span class="attch-file" @click="attachDetail(dataForm.attachList2)">{{ dataForm.attachList2 == null ||
              dataForm.attachList2.length == 0 ? '' : dataForm.attachList2[0].fileName }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-table :data="dataForm.proProductList" border v-loading="dataListLoading" style="width: 100%;">
        <el-table-column label="序号" type="index" width="100" align="center">
        </el-table-column>
        <el-table-column prop="productName" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="名称">
        </el-table-column>
        <el-table-column prop="mapNumber" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="图号">
        </el-table-column>
        <el-table-column prop="versionNumber" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="版本号">
        </el-table-column>
        <el-table-column header-align="center" align="center" min-width="140" :show-tooltip-when-overflow="true"
          label="简图">
          <template slot-scope="scope">
            <el-button :disabled="!scope.row.attachList2 || scope.row.attachList2.length === 0" type="text" size="small"
              @click="attachDetail(scope.row.attachList2)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="unit" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="单位">
        </el-table-column>
        <el-table-column prop="cnt" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="单套数量">
        </el-table-column>
        <el-table-column prop="productSpec" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="材料规格">
        </el-table-column>
        <el-table-column prop="size" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="净尺寸">
        </el-table-column>
        <el-table-column prop="projectName" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="表处理">
        </el-table-column>
        <el-table-column prop="heatTreatment" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="热处理">
        </el-table-column>
        <el-table-column prop="projectName" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="关重性">
        </el-table-column>
        <el-table-column prop="notes" header-align="center" align="center" min-width="140"
          :show-tooltip-when-overflow="true" label="备注">
        </el-table-column>
        <el-table-column fixed="right" prop="materialCnt" header-align="center" align="center" width="70"
          :show-tooltip-when-overflow="true" label="库存数">
        </el-table-column>
        <el-table-column fixed="right" prop="planCnt" header-align="center" align="center" width="100"
          :show-tooltip-when-overflow="true" label="计划数量">
          <template slot-scope="scope">
            <el-form-item :prop="'proProductList.' + scope.$index + '.planCnt'" :rules="dataRule.planCnt"
              label-width="0">
              <el-input v-model="scope.row.planCnt" style="width:80px" :disabled="disabled"
                @input="scope.row.planCnt = scope.row.planCnt.replace(/[^\d]/g, '')" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column fixed="right" prop="disposal" header-align="center" align="center" width="90"
          :show-tooltip-when-overflow="true" label="处置">
          <template slot-scope="scope">
            <div class="radio-wrapper">
              <el-form-item :prop="'proProductList.' + scope.$index + '.disposal'" :rules="dataRule.disposal"
                label-width="0">
                <el-radio-group v-model="scope.row.disposal" class="radio-group-wrap" :disabled="disabled">
                  <el-radio :label="2" style="margin-left:0">采购件</el-radio>
                  <el-radio :label="3" style="margin-left:0">委外件</el-radio>
                  <el-radio :label="1" style="margin-left:0">自制件</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" prop="isTechnology" header-align="center" align="center" width="90"
          :show-tooltip-when-overflow="true" label="工艺">
          <template slot-scope="scope">
            <el-form-item :prop="'proProductList.' + scope.$index + '.isTechnology'" :rules="dataRule.isTechnology"
              label-width="0">
              <el-radio-group v-model="scope.row.isTechnology" class="radio-group-wrap" :disabled="disabled">
                <el-radio :label="1" style="margin-left:0">需要</el-radio>
                <el-radio :label="2" style="margin-left:0">不需要</el-radio>
              </el-radio-group>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onChose">取消</el-button>
      <el-button v-if="!disabled" type="primary" @click="dataFormSubmit()" v-reClick>提交</el-button>
    </span>

    <attach-detail-dialog ref="attachDetail" />
  </div>
</template>

<script>
import AttachDetailDialog from '../common/attach-detail-dialog'
export default {
  name: 'plan-submit',
  components: { AttachDetailDialog },
  computed: {},
  data() {
    return {
      disabled: false,
      id: 0,
      dataForm: {
        proProductList: []
      },
      dataRule: {
        planCnt: [{ required: true, message: '请输入', trigger: 'blur' }],
        disposal: [{ required: true, message: '请选择', trigger: 'change' }],
        isTechnology: [{ required: true, message: '请选择', trigger: 'change' }]
      },
      dataList: [],
      dataListLoading: false,
      expandedRowKeys: [],
      treeMap: new Map()
    }
  },
  created() { },
  beforeDestroy() { },
  methods: {
    onChose() {
      this.$emit('onChose')
    },
    async init(item, readonly) {
      let id = item.productionManagementId
      if (readonly) {
        this.disabled = true
      }

      this.$http({
        url: this.$http.adornUrl(`/biz-service/projProduction/info/${id}`),
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === '200') {
          this.dataForm = data.data
          data.data.proProductList.map(item => {
            if (item.proProductList != null && item.proProductList.length > 0) {
              item.proProductList.map(item2 => {
                this.dataForm.proProductList.push(item2)
              })
            }
          })

          console.log(this.dataForm)
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    validateField(type) {
      this.$refs.dataForm.validateField(type)
    },
    attachDetail(attachList) {
      this.$nextTick(() => {
        this.$refs.attachDetail.init(attachList)
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          let data = {
            orderCode: this.dataForm.orderCode,
            proProductList: this.dataForm.proProductList
          }

          let index = this.dataForm.proProductList.findIndex(item => item.isTechnology == null)
          if (index > -1) {
            this.$message.error("请勾选 工艺")
            return
          }

          console.log('data', data)

          this.$http({
            url: this.$http.adornUrl(`/biz-service/projProduction/submitPlan`),
            method: 'post',
            data: this.$http.adornData(data)
          }).then(({ data }) => {
            if (data && data.code === '200') {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.onChose()
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    handleExpandChange(row, expanded) {
      console.log(row, expanded)
      if (expanded) {
        this.expandedRowKeys.push(row.productId)
      } else {
        const index = this.expandedRowKeys.indexOf(row.productId)
        if (index !== -1) {
          this.expandedRowKeys.splice(index, 1)
        }
      }
    },
    loadingData(row, treeNode, resolve) {
      console.log('loadingData')
      if (!this.treeMap.has(row.productId)) {
        this.treeMap.set(row.productId, { row, treeNode, resolve })
      }

      row.children = row.proProductList
      resolve(row.proProductList)
    },
  }
}
</script>

<style>
.my-row {
  margin-bottom: 20px;
}

.radio-group-wrap {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px 0px;
  /* 行列间距控制 */
}

.attch-file {
  cursor: pointer;
  color: #3e8ef7;
}
</style>