kd-aiot-frontend/src/views/material/materialBOM/components/edit-dialog.vue

<template>
  <ele-modal custom-class="ele-dialog-form" :visible.sync="visible" v-if="visible" :title="title" width="80%"
    @close="cancel">
    <headerTitle title="基本信息"></headerTitle>
    <el-form label-width="100px" ref="form" :model="form" :rules="rules">
      <el-row>
        <el-col :span="8" label-width="100px">
          <el-form-item label="BOM编码" prop="code">
            <el-input placeholder="自动生成" disabled v-model="form.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="BOM名称" prop="name">
            <el-input placeholder="请输入" v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属工厂" prop="factoryId">
            <factorySelect v-model="form.factoryId" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品编码" prop="categoryCode">
            <el-input placeholder="请输入" v-model="form.categoryCode" @click.native="selectProd"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品名称" prop="categoryName">
            <el-input placeholder="请选择" disabled v-model="form.categoryName"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="版本号" prop="version">
            <el-input placeholder="请选择" disabled v-model="form.version"></el-input>
          </el-form-item>
        </el-col>

        <!-- 
        <el-col :span="8">
          <el-form-item label="分类层级" prop="categoryType">
            <el-select v-model="form.categoryType" placeholder="请选择" class="w100">
              <el-option v-for="item in categoryList" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>

          </el-form-item>
        </el-col> -->

        <el-col :span="8">
          <el-form-item label="生产版本:" prop="produceVersionId">
            <el-select v-model="form.produceVersionId" filterable placeholder="请选择" :style="{ width: '100%' }">
              <el-option v-for="item in versionList" :key="item.id" :label="item.code + '-' + item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="基本数量" prop="baseCount">
            <el-row>
              <el-col :span="16">
                <el-input placeholder="请输入" v-model.number="form.baseCount">
                </el-input></el-col>
              <el-col :span="2">&nbsp;</el-col>
              <el-col :span="6">
                <DictSelection dictName="计量单位" v-model="form.baseCountUnit" />
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态" prop="status">
            <el-select :disabled="title == '新建'" clearable v-model="form.status" placeholder="请选择" class="w100">
              <el-option v-for="item in Object.entries(statusOpt)" :key="item[0]" :label="item[1]"
                :value="item[0]"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <ele-pro-table ref="table" :columns="columns" :datasource="tableData" height="calc(100vh - 550px)" :need-page="false">
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-button type="primary" @click="add">添加</el-button>
      </template>
      <template v-slot:action="{ row, $index }">
        <el-link type="primary" @click="handleDel(row, $index)">删除</el-link>
      </template>
      <template v-slot:subCode="{ row }">
        <el-input v-model="row.subCode" placeholder="请输入"></el-input>
      </template>
      <template v-slot:unit="{ row }">
        <DictSelection dictName="计量单位" v-model="row.unit"></DictSelection>
      </template>
      <template v-slot:count="{ row }">
        <el-input v-model="row.count" placeholder="请输入" @input="(value) =>
        (row.count = value.replace(
          /^(-)*(\d+)\.(\d\d\d\d\d\d).*$/,
          '$1$2.$3'
        ))
          "></el-input>
      </template>
      <template v-slot:categoryName="{ row, $index }">
        <el-input :value="row.categoryName" placeholder="请选择" @click.native="categorySelect(row, $index)"></el-input>
      </template>
    </ele-pro-table>

    <div slot="footer" class="footer">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>

    <ProductModal ref="productRefs" @changeProduct='determineChoose' />

  </ele-modal>
</template>

<script>
import ProductModal from '@/views/technology/productParam/components/ProductModal.vue'

import factorySelect from '@/components/CommomSelect/factory-select.vue';
import { getCode } from '@/api/codeManagement/index.js';
import { getVersionCode, bomSave, bomUpdate, getById, detailPage } from '@/api/material/BOM';
import { pageList } from '@/api/technology/version/version.js';
export default {
  components: { ProductModal, factorySelect },
  props: {
    statusOpt: Object
  },
  data() {

    var baseCountVa = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请输入基本数量'));
      } else if (this.form.baseCountUnit == '') {
        callback(new Error('请选择基本数量单位'));
      } else {
        callback();
      }
    };

    return {
      visible: false,
      title: '',
      row: {},
      form: {
        code: '',
        name: '',
        type: 0,
        factoryId: '',
        categoryCode: '',
        categoryId: '',
        categoryName: '',
        version: '',
        categoryType: '',
        baseCount: '',
        baseCountUnit: '',
        status: '-1',

      },
      removeSubBomIdList: [],

      categoryList: [
        {
          value: 1,
          label: '产品'
        },
        {
          value: 2,
          label: '部件'
        },
        {
          value: 3,
          label: '零件'
        }

      ],
      tableData: [],
      versionList: [],
      columns: [
        {
          type: 'index',
          width: 55,
          align: 'center'
        },
        {
          label: '子项编号',
          prop: 'subCode',
          slot: 'subCode',
          action: 'subCode'
        },
        {
          label: '物料名称',
          prop: 'categoryName',
          slot: 'categoryName',
          action: 'categoryName'
        },
        {
          label: '物料编码',
          prop: 'categoryCode'
        },
        {
          label: '牌号',
          prop: 'brandNum'
        },
        {
          label: '型号',
          prop: 'modelType'
        },
        {
          label: '净重',
          slot: 'count',
          action: 'count'
        },
        {
          label: '重量单位',
          slot: 'unit',
          action: 'unit'
        },
        {
          action: 'action',
          slot: 'action',
          label: '操作'
        }
      ],
      rules: {
        name: [
          { required: true, message: '请输入BOM名称', trigger: 'blur' }
        ],
        factoryId: [
          { required: true, message: '请输入所属工厂', trigger: 'change' }
        ],
        categoryCode: [
          { required: true, message: '请输入产品编码', trigger: 'blur' }
        ],

        baseCount: [
          { validator: baseCountVa, trigger: 'blur' }
        ]
      },

      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
    };
  },
  methods: {
    async open(type, row) {
      this.title = type;
      this.row = row;
      this.getVersionList()
      this.visible = true;
      if (type == '新建') {
        this._getCode();
      } else {
        this.isUpdate = true
        this._getById(row.id);


        const res = await detailPage({ pageNum: 1, size: -1, bomId: row.id })
        this.tableData = res.list



      }
    },
    add() {
      let subCode = '0010';
      if (this.tableData.length) {
        let max = Math.max(...this.tableData.map((i) => i.subCode)) + 10 + '';

        if (max.length < 4) {
          max = new Array(4 - max.length).fill('0').join('') + max;
        }
        subCode = max.substring(0, max.length - 1) + '0';
      }

      this.tableData.push({
        subCode,
        categoryId: '',
        categoryName: '',
        brandNum: '',
        count: '',
        modelType: '',
        unit: ''
      });
    },
    async _getCode() {
      const code = await getCode('bom_code');
      this.form.code = code;
    },
    selectProd() {
      this.$refs.productRefs.open(this.form, '选择产品', '9')
      
    },


    categorySelect(row, idx) {
      this.$refs.productRefs.open(row, '选择物料', '1', idx)
    },

    determineChoose(title, row, idx) {
      if (title == '选择产品') {
        this.$set(this.form, 'categoryName', row.name)
        this.$set(this.form, 'categoryId', row.id)
        this.$set(this.form, 'categoryCode', row.code)
        this.getVersion()
       

      }
      else if (title == '选择物料') {
        this.$set(this.tableData[idx], 'categoryName', row.name)
        this.$set(this.tableData[idx], 'categoryId', row.id)
        this.$set(this.tableData[idx], 'categoryCode', row.code)
        this.$set(this.tableData[idx], 'unit', row.measuringUnit)
        this.$set(this.tableData[idx], 'brandNum', row.brandNum)
        this.$set(this.tableData[idx], 'modelType', row.modelType)

      }

    },




    async getVersion() {
      const res = await getVersionCode(this.form.categoryId);
      this.form.version = res
    },

    async getVersionList() {
      const res = await pageList({
        pageNum: 1,
        size: 100
      });
      this.versionList = res.list
    },


    save() {

      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        this.loading = true;
        if (!this.isUpdate) {
          delete this.form.id;
        } else {
          this.form.removeSubBomIdList = this.removeSubBomIdList
        }

        const data = {
          ...this.form,
          subDetailList: this.tableData
        };

        const saveOrUpdate = this.isUpdate ? bomUpdate : bomSave;
        saveOrUpdate(data)
          .then((msg) => {
            this.loading = false;
            this.$message.success(msg);
            this.cancel()
            this.$emit('done');
          })
          .catch((e) => {
            this.loading = false;
          });

      });

    },



    handleDel(row, index) {
      this.tableData.splice(index, 1);
      if (row?.id) {
        this.removeSubBomIdList.push(row.id)
      }
    },
    cancel() {
      this.visible = false
    },

    async _getById(id) {
      const data = await getById(id);
      this.form = data;
      this.form.status = this.form.status + ''
    },


  }
};
</script>