kd-aiot-frontend-qms/src/views/inspectionWork/components/sampleDisposeDialog.vue

<template>
  <ele-modal
    :title="title"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="80%"
    :maxable="true"
  >
    <el-form ref="form1" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="处置方式：" prop="disposeType">
        <el-select
          v-model="formData.disposeType"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in disposeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <template v-if="formData.disposeType == 6">
        <el-row>
          <el-col :span="24">
            <el-form-item label="留样日期：" prop="sampleDate" align="center">
              <el-date-picker
                class="w100"
                v-model="formData.sampleDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请输入"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6"> </el-col>
        </el-row>
        <el-row style="margin-top: 12px">
          <el-col :span="24">
            <el-form-item
              label="留样条件："
              prop="sampleCondition"
              align="center"
            >
              <el-input
                v-model="formData.sampleCondition"
                placeholder="请输入"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 12px">
          <el-col :span="24">
            <el-form-item
              label="生产商/受托生产："
              prop="producerManufacturer"
              align="center"
            >
              <el-input
                v-model="formData.producerManufacturer"
                placeholder="请输入"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 12px">
          <el-col :span="24">
            <el-form-item label="留样地点：" prop="samplePlace" align="center">
              <el-input
                type="textarea"
                v-model="formData.samplePlace"
                placeholder="请输入"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 12px">
          <el-col :span="24">
            <el-form-item label="留样备注：" prop="sampleRemark" align="center">
              <el-input
                type="textarea"
                v-model="formData.sampleRemark"
                placeholder="请输入"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin-top: 12px">
          <el-col :span="24"> </el-col>
        </el-row>
      </template>

      <template v-if="this.formData.disposeType !== 8">
        <el-form-item label="入库仓库：" prop="depotId" align="center">
          <el-select style="width: 100%" v-model="formData.depotId">
            <el-option
              v-for="item in warehouseList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
              @click.native="chooseWarehouse(item)"
            ></el-option>
          </el-select>
        </el-form-item>
      </template>

      <!-- <el-row>
        <el-col :span="6">
          <el-form-item label="处置方式" prop="disposalStatus" align="center">
            <el-select
              v-model="formData.disposalStatus"
              placeholder="请选择"
              style="width: 100%"
              v-if="qualityType == 1"
              clearable
            >
              <el-option
                v-for="item in disposalStatusListType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="formData.disposalStatus"
              placeholder="请选择"
              style="width: 100%"
              v-else
              clearable
            >
              <el-option
                v-for="item in disposalStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="formData.disposalStatus == 3">
          <el-form-item
            label="处置仓库"
            prop="disposeWarehouseId"
            align="center"
          >
            <el-select
              v-model="formData.disposeWarehouseId"
              placeholder="请选择"
              style="width: 100%"
              clearable
              @change="handleWarehouseChange"
              filterable
            >
              <el-option
                v-for="item in warehouseList"
                :key="item.disposeWarehouseId"
                :label="item.disposeWarehouseName"
                :value="item.disposeWarehouseId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="留样日期" prop="sampleDate" align="center">
            <el-date-picker
              class="w100"
              v-model="formData.sampleDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请输入"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="处置时间:" prop="disposeTime">
            <el-date-picker
              class="w100"
              v-model="formData.disposeTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请输入"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-top: 12px">
        <el-col :span="24">
          <el-form-item label="留样条件" prop="sampleCondition" align="center">
            <el-input
              v-model="formData.sampleCondition"
              placeholder="请输入"
              style="width: 100%"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-top: 12px">
        <el-col :span="24">
          <el-form-item
            label="生产商/受托生产"
            prop="producerManufacturer"
            align="center"
          >
            <el-input
              v-model="formData.producerManufacturer"
              placeholder="请输入"
              style="width: 100%"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-top: 12px">
        <el-col :span="24">
          <el-form-item label="留样地点" prop="samplePlace" align="center">
            <el-input
              type="textarea"
              v-model="formData.samplePlace"
              placeholder="请输入"
              style="width: 100%"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-top: 12px">
        <el-col :span="24">
          <el-form-item label="留样备注" prop="sampleRemark" align="center">
            <el-input
              type="textarea"
              v-model="formData.sampleRemark"
              placeholder="请输入"
              style="width: 100%"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
    <template v-slot:footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleConfirm"> 确认 </el-button>
    </template>
  </ele-modal>
</template>

<script>
  // import { warehouseList } from '@/api/inspectionWork';

  import { getWarehouseList } from '@/api/samplemanagement';

  export default {
    components: {},
    data() {
      return {
        allList: [
          { value: 1, label: '返工' },
          { value: 2, label: '返修' },
          { value: 3, label: '报废' },
          { value: 4, label: '降级使用' },
          { value: 5, label: '让步接收' },
          { value: 6, label: '留样' },
          { value: 7, label: '消耗' },
          { value: 8, label: '回用/归批' },
          { value: 9, label: '转试销' },
          { value: 10, label: '退货' }
        ],
        title: '',
        visible: false,
        rowIndex: 0,
        type: '',
        formData: {
          disposeType: '',
          sampleDate: '',
          sampleCondition: '',
          producerManufacturer: '',
          samplePlace: '',
          sampleRemark: '',
          depotId: '',
          depotName: ''
        },
        qualityType: '',
        warehouseList: [],
        // 表单验证规则
        rules: {
          disposeType: [
            {
              required: true,
              message: '请选择处置方式',
              trigger: 'blur'
            }
          ],
          depotId: [
            { required: true, message: '请选择仓库', trigger: 'change' }
          ]
        },
        disposalStatusList: [
          {
            value: 1,
            label: '返工'
          },
          {
            value: 2,
            label: '返修'
          },
          {
            value: 3,
            label: '报废'
          },
          {
            value: 4,
            label: '降级使用'
          },
          {
            value: 5,
            label: '让步接收'
          },
          {
            value: 6,
            label: '留样'
          },
          {
            value: 7,
            label: '消耗'
          },
          {
            value: 8,
            label: '回用'
          },
          {
            value: 9,
            label: '转试销'
          }
        ],
        disposalStatusListType: [
          {
            value: 5,
            label: '让步接收'
          },
          {
            value: 9,
            label: '退货'
          }
        ]
      };
    },
    computed: {
      disposeList() {
        if (this.$route.query.qualityType == 1) {
          return this.allList.filter((item) => [5, 10].includes(item.value));
        }
        if (
          this.$route.query.qualityType == 2 ||
          this.$route.query.qualityType == 3
        ) {
          return this.allList.filter(
            (item) => item.value !== 8 && item.value !== 10
          );
        } else {
          return this.allList;
        }
      }
    },

    async created() {
      // this.getWarehouseList();
      this.warehouseList = await getWarehouseList();
    },
    methods: {
      handleWarehouseChange(val) {
        this.warehouseList.findIndex((item) => {
          if (item.disposeWarehouseId == val) {
            this.formData.disposeWarehouseName = item.disposeWarehouseName;
          }
        });
      },
      // async getWarehouseList() {
      //   let res = await warehouseList({});
      //   this.warehouseList = res.map((item) => {
      //     item.disposeWarehouseName = item.name;
      //     item.disposeWarehouseId = item.id;
      //     return {
      //       ...item
      //     };
      //   });
      // },
      async openDispose(index, row, type, qualityType) {
        if (index != null) {
          this.formData = JSON.parse(JSON.stringify(row));
        } else {
          this.formData = {};
        }
        console.log(this.formData);

        this.visible = true;
        this.rowIndex = index;
        this.type = type;
        this.qualityType = qualityType;
      },
      handleClose() {
        this.visible = false;
      },
      handleConfirm() {
        this.$refs.form1.validate((valid) => {
          if (valid) {
            this.$emit('handleDisposeConfirm', this.formData, this.rowIndex);

            this.visible = false;
          }
        });
      },
      chooseWarehouse(item) {
        console.log(item);
        this.formData.depotId = item.id;
        this.formData.depotName = item.name;
      }
    },
    watch: {
      'formData.disposeType': {
        handler(newVal, oldVal) {
          this.formData.sampleCondition = '';
          this.formData.sampleDate = '';
          this.formData.samplePlace = '';
          this.formData.sampleRemark = '';
          this.formData.producerManufacturer = '';
          this.formData.depotId = '';
          this.formData.depotName = '';
        },
        // immediate: true
      }
    }
  };
</script>