kd-aiot-frontend-mes/src/views/produceOrder/components/unpackDialog.vue

<template>
  <ele-modal
    width="60vw"
    :visible.sync="visible"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    :title="'拆分工单'"
  >
    <div class="form-wrapper">
      <el-form
        :model="requestData"
        label-width="0"
        :show-message="false"
        ref="formRef"
      >
        <el-descriptions title="" :column="2" border>
          <el-descriptions-item label="工单号">
            {{ formData.code }}</el-descriptions-item
          >
          <el-descriptions-item label="产品编码">
            {{ formData.productCode }}</el-descriptions-item
          >
          <el-descriptions-item label="产品名称">{{
            formData.productName
          }}</el-descriptions-item>
          <el-descriptions-item label="牌号|型号">
            {{ formData.brandNo }}|{{ formData.model }}</el-descriptions-item
          >
          <el-descriptions-item label="要求成型数量">{{
            formData.formingNum
          }}</el-descriptions-item>
		  <el-descriptions-item label="计划开始时间">{{
		    formData.planStartTime
		  }}</el-descriptions-item>
          <el-descriptions-item
            label="成型数量"
            label-class-name="produce-create-bg"
            content-class-name="produce-create-bg"
          >
            <span slot="label" class="label-required">成型数量</span>
            <el-form-item prop="formingNum" required>
              <el-input v-model="requestData.formingNum"></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item
            label="计划开始时间"
            label-class-name="produce-create-bg"
            content-class-name="produce-create-bg"
          >
            <span slot="label" class="label-required">计划开始时间</span>

            <el-form-item prop="planStartTime" required class="w100">
              <el-date-picker
                class="w100"
                v-model="requestData.planStartTime"
                type="date"
                value-format="yyyy-MM-dd"
              ></el-date-picker> </el-form-item
          ></el-descriptions-item>
          <el-descriptions-item
            label="设备编码/名称"
            label-class-name="produce-create-bg"
            content-class-name="produce-create-bg"
          >
            <span slot="label" class="label-required">设备编码/名称</span>
            <el-form-item prop="deviceName" required
              ><el-input
                @click.native="getEquip"
                :value="
                  requestData.deviceName &&
                  `${requestData.deviceName}(${requestData.deviceCode})`
                "
              ></el-input> </el-form-item
          ></el-descriptions-item>
        </el-descriptions>
      </el-form>
    </div>
    <div slot="footer">
      <el-button plain @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
    <equipmentDailog
      ref="equipmentDailogRef"
      :produceVersionId="produceVersionId"
    />
  </ele-modal>
</template>

<script>
  import { save, update } from '@/api/produceOrder/index.js';
  import equipmentDailog from '@/components/EquipmentDailog/equipment-dailog';
  export default {
    components: { equipmentDailog },
    data () {
      return {
        visible: false,
        produceVersionId: '',
        formData: {},
		requestData:{}
      };
    },
    methods: {
      open (row) {
        this.visible = true;
		this.formData = row
		this.produceVersionId = row.produceVersionId
		if(row.planStartTime){
			this.requestData.planStartTime = row.planStartTime
		}
      },
      // codeChoose () {
      //   this.$refs.apsPlanOrderRef.open(this.formData.productCode, (res) => {
      //     if (this.formData.productCode != res.productCode) {
      //       this.formData.deviceCode = '';
      //       this.formData.deviceName = '';
      //       this.formData.deviceId = '';
      //     }
      //     this.formData.productionPlanCode = res.code;
      //     this.formData.productionPlanId = res.id;
      //     this.formData.productCode = res.productCode;
      //     this.formData.productName = res.productName;
      //     this.formData.brandNo = res.brandNo;
      //     this.formData.model = res.model;
      //     this.formData.productNum = res.productNum;
      //     this.formData.requiredFormingNum = res.requiredFormingNum;
      //     this.produceVersionId = res.produceVersionId;
      //   });
      // },
      getEquip () {
        // if (!this.produceVersionId) {
        //   return this.$message.error('请先选择计划');
        // }
        this.$refs.equipmentDailogRef.openSingle(
          [this.requestData.deviceCode],
          (res) => {
            this.requestData.deviceCode = res.code;
            this.requestData.deviceName = res.name;
            this.requestData.deviceId = res.id;
          }
        );
      },
      cancel () {
        this.formData = {};
		this.requestData = {};
        this.visible = false;
      },
      confirm () {
        this.$refs.formRef.validate(async (value) => {
          if (value) {
            const res = await save(this.requestData);
            this.$message.success('操作成功！');
            this.$emit('success');
            this.cancel();
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .label-required {
    &::after {
      content: '*';
      color: var(--color-danger);
      font-size: 1.2em;
    }
  }
  .form-wrapper {
    :deep(.el-form) {
      .el-form-item {
        margin-bottom: 0 !important;
      }
    }
  }
</style>
<style lang="scss">
  .produce-create-bg {
    background-color: var(--color-primary) !important;
    color: #fff !important;
  }
</style>