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="attachFile1">
            <span @click="attachDetail(dataForm.attachFile1)">{{dataForm.attachFile1 == null ? '' : dataForm.attachFile1[0].fileName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="资料:" prop="attachFile2">
            <span @click="attachDetail(dataForm.attachFile1)">{{dataForm.attachFile2 == null ? '' : dataForm.attachFile2[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
          prop="attachList2"
          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
          prop="materialCnt"
          header-align="center"
          align="center"
          min-width="140"
          :show-tooltip-when-overflow="true"
          label="库存数">
        </el-table-column>
        <el-table-column
          prop="planCnt"
          header-align="center"
          align="center"
          min-width="140"
          :show-tooltip-when-overflow="true"
          label="订单计划数量">
        </el-table-column>
        <el-table-column
          fixed="right"
          prop="projectName"
          header-align="center"
          align="center"
          width="120"
          :show-tooltip-when-overflow="true"
          label="处置">
          <template slot-scope="scope">
            <div class="radio-wrapper">
              <el-radio-group v-model="scope.row.disposal" class="radio-group-wrap">
                <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>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          prop="projectName"
          header-align="center"
          align="center"
          width="120"
          :show-tooltip-when-overflow="true"
          label="工艺">
          <template slot-scope="scope">
            <el-radio-group v-model="scope.row.isTechnology" class="radio-group-wrap">
              <el-radio :label="1" style="margin-left:0">需要</el-radio>
              <el-radio :label="2" style="margin-left:0">不需要</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onChose">取消</el-button>
      <el-button
        type="primary"
        @click="dataFormSubmit()"
        v-reClick
        >确定</el-button
      >
    </span>

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

<script>
import UserComponent from '../common/user-component'
import AttachDetailDialog from '../common/attach-detail-dialog'
export default {
  name: 'plan-assign',
  components: { UserComponent, AttachDetailDialog },
  computed: {},
  data () {
    return {
      readonly: false,
      id: 0,
      dataForm: {
        proProductList:[]
      },
      dataRule: {},
      dataList: [],
      dataListLoading: false
    }
  },
  created () {},
  beforeDestroy () {},
  methods: {
    onChose () {
      this.$emit('onChose')
    },
    async init (item, readonly) {
      let id = item.productionManagementId;
      if(readonly){
        this.readonly = 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;
            } else {
              this.$message.error(data.msg)
            }
          })

      this.dataList = [{disposal:'', isTechnology:''}]

      this.visible = true
    },
    validateField (type) {
      this.$refs.dataForm.validateField(type)
    },
    attachDetail (attachList) {
      this.$nextTick(() => {
        this.$refs.attachDetail.init(attachList)
      })
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/biz-service/projProduction/assign`),
            method: 'post',
            data: this.$http.adornData({
              productionManagementId: this.dataForm.productionManagementId,
              responsibilityPerson: this.dataForm.responsibilityPerson
            })
          }).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)
            }
          })
        }
      })
    },
    selectChange (val) {
      this.dataForm.responsibilityPerson = val
    }
  }
}
</script>

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

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