kd-aiot-frontend-aps/src/views/materialPlan/components/plan-edit-dialog.vue

<template>
  <ele-modal
    :visible.sync="visible"
    :closed="cancel"
    :title="`${type == 'add' ? '创建' : '编辑'}配料计划`"
    custom-class="ele-dialog-form"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form
      :model="formData"
      ref="formRef"
      label-width="120px"
      class="ele-body"
      :rules="rules"
    >
      <el-row :gutter="32">
        <el-col :span="12">
          <el-form-item label="选择物料" prop="materialName">
            <el-input
              placeholder="请选择"
              :value="
                formData.materialName &&
                `${formData.materialName}(${formData.materialCode})`
              "
              @click.native="chooseMateriel"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产版本" prop="produceVersionName">
            <el-input
              :disabled="!formData.materialName"
              :placeholder="!formData.materialName ? '请选择物料' : '请选择'"
              v-model="formData.produceVersionName"
              @click.native="chooseVersion"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="牌号" prop="brandNo">
            <el-input v-model="formData.brandNo" disabled></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="工艺路线名称" prop="brandNo">
            <el-input v-model="formData.aaa"></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="要求交付日期" prop="deliveryTime">
            <el-date-picker
              style="width: 100%"
              v-model="formData.deliveryTime"
              :pickerOptions="{
                disabledDate: (time) =>
                  time.getTime() <
                  new Date(new Date().setHours(0, 0, 0, 0)).getTime()
              }"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="工艺路线版本" prop="brandNo">
            <el-input v-model="formData.aaa"></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="生产重量" prop="num">
            <!-- <el-input v-model.number="formData.num">
              
            </el-input> -->
            <el-row>
              <el-col :span="21">
                <el-input-number
                  placeholder="请输入"
                  class="w100"
                  v-model="formData.num"
                  :controls="false"
                  :precision="3"
                  :min="0"
                ></el-input-number>
              </el-col>
              <el-col :span="3" style="text-align: center">
                {{ formData.unit || 'kg' }}
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计划备注" prop="notes">
            <el-input v-model="formData.notes" placeholder="请选择"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>

    <!-- 选择物料 -->
    <ChooseMaterial
      ref="chooseRef"
      @success="handleChooseMaterial"
    ></ChooseMaterial>
    <!-- 选择生产版本 -->
    <ProductionVersion
      ref="versionRef"
      :productCode="formData.materialCode"
      @confirm="versionConfirm"
    ></ProductionVersion>
  </ele-modal>
</template>

<script>
  import ChooseMaterial from '@/components/CreatePlan/ChooseMaterial.vue';
  import ProductionVersion from '@/components/CreatePlan/ProductionVersion.vue';
  import { save, update } from '@/api/materialPlan/index';
  import dayjs from 'dayjs';
  export default {
    components: {
      ChooseMaterial,
      ProductionVersion
    },
    data () {
      return {
        visible: false,
        type: 'add',
        rules: {
          materialName: [
            {
              required: true,
              message: '请选择物料',
              trigger: ['blur', 'change']
            }
          ],
          produceVersionName: [
            {
              required: true,
              message: '请选择生产版本',
              trigger: ['blur', 'change']
            }
          ],
          deliveryTime: [
            {
              required: true,
              message: '请选择要求交付日期',
              trigger: ['blur', 'change']
            }
          ],
          num: [
            {
              required: true,
              message: '请输入生产重量',
              trigger: ['blur', 'change']
            }
          ]
        },
        formData: {
          deliveryTime: dayjs(new Date()).format('YYYY-MM-DD'),
          num: null,
          notes: '',
          categoryId: '',
          unit: '',
          brandNo: '',
          model: '',
          produceVersionName: '',
          materialCode: '',
          materialName: ''
        }
      };
    },
    methods: {
      async open (type, row = {}) {
        this.type = type;
        this.formData = Object.assign({}, this.formData, row);
        this.visible = true;
      },
      chooseMateriel () {
        this.$refs.chooseRef.open(this.formData.categoryId);
      },
      handleChooseMaterial (row) {
        this.formData = Object.assign({}, this.formData, {
          materialName: row.name,
          categoryId: row.id,
          materialCode: row.code,
          brandNo: row.brandNum,
          model: row.modelType,
          unit: row.measuringUnit
        });
      },
      confirm () {
        this.$refs.formRef.validate(async (value) => {
          if (value) {
            const request = this.type == 'add' ? save : update;

            // if (this.type == 'add') {
            //   this.formData.produceVersionId = '1684162877351866369';
            //   this.formData.produceVersionName = '挤压合金生产';
            // }
            await request(this.formData);
            this.$message.success('保存成功！');
            this.$emit('success');
            this.cancel();
          }
        });
      },
      cancel () {
        this.visible = false;
        this.formData = {};
        this.$refs.formRef.resetFields();
      },
      versionConfirm (cur) {
        console.log(cur, '2222W33000000920');
        this.formData.produceVersionId = cur.produceVersionId;
        this.formData.produceVersionName = cur.produceVersionName;
      },

      chooseVersion () {
        if (!this.formData.materialName) {
          return this.$message.error('请选择物料');
        }
        this.$refs.versionRef.open(1);
      }
    }
  };
</script>