klp-oa/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue

<template>
  <span>
    <el-select v-model="selected" :placeholder="placeholder" filterable clearable :loading="loading"
      style="width: 100%" :value-key="'rawMaterialId'">
      <template #empty>
        <el-button v-if="canAdd" @click="add" icon="el-icon-plus">未搜索到原材料，点击添加</el-button>
        <div v-else style="padding: 10px;">未搜索到原材料</div>
      </template>
      <el-option v-for="item in rawMaterialList" :key="item.rawMaterialId"
        :label="`${item.rawMaterialName}（${item.rawMaterialCode}）`" :value="item.rawMaterialId">
        <div class="option-label">
          <span class="material-name">{{ item.rawMaterialName }}</span>
          <span class="material-code">{{ item.rawMaterialCode }}</span>
        </div>
      </el-option>
    </el-select>
    <el-dialog v-if="canAdd" :visible.sync="addDialogVisible" title="添加原材料" width="700px" append-to-body>
      <el-steps align-center :active="activeStep" finish-status="success">
        <!-- 新增原材料的步骤 -->
        <el-step title="创建原材料"></el-step>
        <!-- 创建BOM的步骤 -->
        <el-step title="填写BOM信息"></el-step>
      </el-steps>

      <el-form ref="form" v-if="activeStep === 0" :model="addForm" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="原材料编号" prop="rawMaterialCode">
              <el-input v-model="addForm.rawMaterialCode" placeholder="请输入原材料编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原材料名称" prop="rawMaterialName">
              <el-input v-model="addForm.rawMaterialName" placeholder="请输入原材料名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="owner">
              <el-input v-model="addForm.owner" :multiple="false" placeholder="请填写负责人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计量单位" prop="unit">
              <el-input v-model="addForm.unit" placeholder="请输入计量单位" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-if="activeStep === 0" slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">创建原材料</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

      <BomPanel v-if="activeStep === 1" :id="bomId" :itemId="itemId" :type="addForm.type" @addBom="handleBom" />
    </el-dialog>
  </span>

</template>

<script>
import { mapGetters } from "vuex";
import { addRawMaterial } from '@/api/wms/rawMaterial';
import BomPanel from '../BomPanel/index.vue';

export default {
  name: "RawMaterialSelect",
  props: {
    value: [String, null],
    placeholder: {
      type: String,
      default: "请选择原材料"
    },
    canAdd: {
      type: Boolean,
      default: false
    }
  },
  components: {
    BomPanel
  },
  data() {
    return {
      options: [],
      selected: this.value,
      loading: false,
      addForm: {
        rawMaterialCode: undefined,
        rawMaterialName: undefined,
        owner: undefined,
        unit: undefined,
        type: 'raw_material'
      },
      addDialogVisible: false,
      rules: {
        rawMaterialCode: [
          { required: true, message: "原材料编号不能为空", trigger: "blur" }
        ],
        rawMaterialName: [
          { required: true, message: "原材料名称不能为空", trigger: "blur" }
        ],
        owner: [
          { required: true, message: "负责人不能为空", trigger: "blur" }
        ],
      },
      buttonLoading: false,
      itemId: undefined,
      activeStep: 0,
      bomId: undefined,
    };
  },
  watch: {
    value(val) {
      this.selected = val;
    },
    selected(val) {
      this.$emit("input", val);
      this.$emit('change', this.rawMaterialList.find(p => p.rawMaterialId === val));
    }
  },
  mounted() {
    if (this.rawMaterialList.length < 0) {
      this.$store.dispatch('category/getRawMaterialMap')
    }
  },
  computed: {
    ...mapGetters(['rawMaterialList'])
  },
  methods: {
    async onChange(val) {
      const rawMaterial = this.options.find(p => p.rawMaterialId === val);
      this.$emit('change', rawMaterial);
    },
    add() {
      this.addDialogVisible = true;
      this.addForm = {
        rawMaterialCode: undefined,
        rawMaterialName: undefined,
        owner: undefined,
        unit: undefined,
        type: 'raw_material'
      };
      this.bomId = undefined;
      this.itemId = undefined;
    },
    handleBom(bom) {
      this.bomId = bom.bomId;
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          // console.log(this.addForm);
          addRawMaterial(this.addForm).then(res => {
            this.$modal && this.$modal.msgSuccess("创建原材料成功");
            this.$store.dispatch('category/getRawMaterialMap');
            console.log(res);
            this.itemId = res.rawMaterialId;
            this.$emit('input', res.rawMaterialId);
            this.activeStep = 1;
          }).finally(() => {
            this.buttonLoading = false;
          });
        }
      });
    },
    cancel() {
      this.addDialogVisible = false;
      this.addForm = {
        rawMaterialCode: undefined,
        rawMaterialName: undefined,
        owner: undefined,
        unit: undefined,
        type: 'raw_material'
      };
    }
  }
};
</script>

<style scoped>
.option-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.material-name {
  font-size: 14px;
  color: #333;
}

.material-code {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}
</style>