kd-aiot-frontend-qms/src/views/inspectionPlan/components/edit.vue

<!-- 用户编辑弹窗 -->
<template>
  <el-dialog
    class="ele-dialog-form"
    :title="title"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="1200px"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="编码:" prop="code">
            <el-input
              clearable
              v-model="form.code"
              placeholder="请输入"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="名称:" prop="name">
            <el-input
              clearable
              v-model="form.name"
              placeholder="请输入"
              :disabled="type == 'detail' || type == 'issued'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划类型:" prop="type">
            <DictSelection
              dictName="质检计划类型"
              @change="planChange"
              v-model="form.type"
              clearable
              :disabled="type == 'detail' || type == 'issued'"
            ></DictSelection>
          </el-form-item>
        </el-col>

        <!-- <el-col :span="12">
          <el-form-item label="质检工具:" prop="inspectionTool">
            <el-input v-model="form.inspectionTool"></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="计划来源:" prop="planSource">
            <el-select
              v-model="form.planSource"
              placeholder="请选择"
              style="width: 100%"
              clearable
              @change="planSourceChange"
              :disabled="type == 'detail' || type == 'issued'"
            >
              <el-option
                :label="item.label"
                v-for="item in sourceList"
                :key="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划来源编码:" prop="planSourceCode">
            <el-input v-model="form.planSourceCode" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="自动派单:" prop="autoOrder">
            <el-select
              v-model="form.autoOrder"
              placeholder="请选择"
              style="width: 100%"
              :disabled="type == 'detail' || type == 'issued'"
            >
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="批号:" prop="batchNo">
            <el-input v-model="form.batchNo" disabled />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="产品名称:" prop="productName">
            <el-input
              v-model="form.productName"
              readonly=""
              @click.native="addProduct"
              :disabled="type == 'detail'||type == 'issued'"

            />
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="8">
          <el-form-item label="产品编码:" prop="productCode">
            <el-input v-model="form.productCode" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品规格:" prop="specification">
            <el-input v-model="form.specification" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品牌号:" prop="brandNo">
            <el-input v-model="form.brandNo" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="数量:" prop="productNumber">
            <el-input
              v-model="form.productNumber"
              :disabled="type == 'detail'||type == 'issued'"

            />
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item
            label="执行部门"
            prop="groupId"
            :rules="{
              required: form.autoOrder || type == 'issued' ? true : false,
              message: '请选择',
              trigger: 'blur'
            }"
          >
            <deptSelect
              :disabled="type == 'detail'"
              v-model="form.groupId"
              @changeGroup="searchDeptNodeClick"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="执行人员"
            prop="executeId"
            :rules="{
              required: form.autoOrder || type == 'issued' ? true : false,
              message: '请选择',
              trigger: 'blur'
            }"
          >
            <el-select
              :disabled="type == 'detail'"
              v-model="form.executeId"
              @change="changeExecutor"
              size="small"
              style="width: 100%"
              filterable
            >
              <el-option
                v-for="item in executorList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划开始时间:" prop="planStartTime">
            <el-date-picker
              :disabled="type == 'detail'"
              class="w100"
              v-model="form.planStartTime"
              type="date"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划结束时间:" prop="planEndTime">
            <el-date-picker
              :disabled="type == 'detail'"
              class="w100"
              v-model="form.planEndTime"
              type="date"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-table :data="form.productList" border height="30vh">
        <el-table-column label="产品编码" align="center" prop="productCode">
        </el-table-column>
        <el-table-column label="产品名称" align="center" prop="productName">
        </el-table-column>

        <el-table-column label="规格" align="center" prop="specification">
        </el-table-column>
        <el-table-column label="牌号" align="center" prop="brandNo">
        </el-table-column>
        <el-table-column label="数量" align="center" prop="productNumber">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.productNumber"
              :disabled="type == 'detail' || type == 'issued'"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="70"
          v-if="!form.planSourceCode"
        >
          <template slot-scope="scope">
            <el-link
              type="danger"
              :underline="false"
              @click="handleDeleteItem(scope.$index, scope.row.id)"
            >
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="add-product" @click="addProduct">
        <i class="el-icon-circle-plus-outline"></i>
      </div>
      <EquipmentDialog ref="equipmentRefs" @choose="choose" :type="1" />
      <productionPlan ref="productionPlanRef" @choose="choose" />
      <workOrder ref="workOrderRef" @choose="choose" />
      <produceOrder ref="produceOrderRef" @choose="choose" />
      <warehousing ref="warehousingRef" @choose="choose" />
    </el-form>

    <template v-slot:footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button
        v-if="type != 'detail' && type != 'issued'"
        type="primary"
        :loading="loading"
        @click="save"
      >
        保存
      </el-button>
      <el-button
        v-if="type == 'issued'"
        type="primary"
        :loading="loading"
        @click="save"
      >
        下发
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
import { save, update, planIssued } from '@/api/inspectionPlan';
import EquipmentDialog from '../../../views/inspectionWork/components/EquipmentDialog';
import productionPlan from './productionPlan';
import workOrder from './workOrder';
import produceOrder from './produceOrder';
import warehousing from './warehousing';
import { getUserPage } from '@/api/system/organization';
import deptSelect from '@/components/CommomSelect/dept-select.vue';
export default {
  components: {
    EquipmentDialog,
    deptSelect,
    productionPlan,
    workOrder,
    produceOrder,
    warehousing
  },
  data() {
    const defaultForm = function () {
      return {
        id: '',
        code: '',
        planSourceId: '',
        planSourceCode: '',
        name: '',
        autoOrder: 0,
        duration: '',
        status: '',
        approvalUserId: '',
        executeId: '',
        groupId: '',
        groupName: '',
        planStartTime: '',
        planEndTime: '',
        // productCode: '',
        // productName: '',
        // specification: '',
        // brandNo: '',
        // productNumber: '',
        executeName: '',
        planSource: '',
        batchNo: '',
        productList: []
      };
    };
    return {
      defaultForm,
      // 表单数据
      form: { ...defaultForm() },
      sourceList: [],
      // 表单验证规则
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }]
        // productName: [{ required: true, message: '请选择', trigger: 'blur' }]
      },
      visible: false,
      type: null,
      title: null,
      loading: false,
      listPage: [],
      executorList: []
    };
  },
  watch: {
    'form.type'(val) {
      this.sourceList =
        val == 1
          ? [{ label: '入库申请单', value: '1' }]
          : [
              { label: '生产计划', value: '2' },
              { label: '生产订单', value: '3' },
              { label: '生产工单', value: '4' }
            ];
    }
  },
  created() {},
  methods: {
    open(type, row) {
      this.title =
        type == 'add'
          ? '新增'
          : type == 'edit'
          ? '编辑'
          : type == 'issued'
          ? '下发'
          : '详情';
      this.type = type;
      if (this.type != 'add') {
        this.form = JSON.parse(JSON.stringify(row));
        this.getUserList({ groupId: this.form.groupId });
      }
      this.visible = true;
    },
    planChange(value) {
      this.form.planSource = '';
      this.choose({});
    },

    planSourceChange() {
      this.choose({});
    },
    handleDeleteItem(index) {
      this.form.productList.splice(index, 1);
    },
    addProduct() {
      if (this.form.planSource == 1) {
        this.$refs.warehousingRef.open();
      } else if (this.form.planSource == 2) {
        this.$refs.productionPlanRef.open();
      } else if (this.form.planSource == 3) {
        this.$refs.workOrderRef.open();
      } else if (this.form.planSource == 4) {
        this.$refs.produceOrderRef.open();
      } else {
        this.$refs.equipmentRefs.open();
      }
    },
    /* 保存编辑 */
    save() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        if (this.form.productList.length == 0) {
          this.$message.error('请选择产品！');

          return;
        }
        this.loading = true;
        if (this.type == 'add') {
          delete this.form.id;
        }
        console.log(this.type);
        let URL =
          this.type == 'add' ? save : this.type == 'edit' ? update : planIssued;
        URL(this.form)
          .then((msg) => {
            this.loading = false;
            this.$message.success(msg);
            this.handleClose();
            this.$emit('done');
          })
          .catch((e) => {
            this.loading = false;
          });
      });
    },
    choose(data) {
      let arr = [];
      if (Array.isArray(data)) {
        data.forEach((item) => {
          arr.push({
            productCode: item.code,
            productName: item.name,
            specification: item.specification,
            brandNo: item.brandNum,
            productNumber: ''
          });
        });
      } else {
        arr = data.productName
          ? [
              {
                productCode: data.productCode,
                productName: data.productName,
                specification: data.model,
                brandNo: data.brandNo,
                productNumber: data.productNumber
              }
            ]
          : [];
      }

      this.form.planSourceId = data.id;
      this.form.planSourceCode = data.code;
      this.form.batchNo = data.batchNo;
      this.form.productList = arr;
    },

    //选择部门(搜索)
    searchDeptNodeClick(info, row) {
      if (info) {
        const params = { groupId: info };
        this.getUserList(params);
        this.form.groupName = row.name;
      } else {
        this.form.executeGroupId = null;
      }
    },
    // 获取审核人列表、巡点检人员
    async getUserList(params) {
      try {
        let data = { pageNum: 1, size: -1 };
        // 如果传了参数就是获取巡点检人员数据
        if (params) {
          data = Object.assign(data, params);
        }
        const res = await getUserPage(data);
        this.executorList = res.list;
      } catch (error) {}
    },
    // 执行人选择
    changeExecutor(val) {
      if (val) {
        this.form.executeId = val;
        this.form.executeName = this.executorList.filter(
          (item) => item.id === val
        )[0].name;
      }
    },
    restForm() {
      this.form = { ...this.defaultForm() };
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },
    handleClose() {
      this.restForm();
      this.visible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.location-warp {
  display: flex;

  .detail {
    margin-left: 10px;
  }
}
:deep(.el-form-item__content .el-input-group__prepend) {
  background-color: #fff;
}
:deep(
    .el-dialog:not(.ele-dialog-form)
      .el-dialog__body
      .el-form
      .el-form-item:last-child
  ) {
  margin-bottom: 22px;
}
.add-product {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 30px;
  color: #1890ff;
  margin: 10px 0;
  cursor: pointer;
}
</style>