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

<template>
  <ele-modal :visible.sync="visible" v-if="visible" :title="title" width="80%" @close="cancel">
    <headerTitle title="基本信息"></headerTitle>
    <el-form label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="BOM编码" prop="code">
            <el-input
              placeholder="自动生成"
              disabled
              v-model="formData.code"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="BOM名称" prop="name">
            <el-input placeholder="请输入" v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属工厂" prop="factoryId">
            <factorySelect v-model="formData.factoryId" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品编码" prop="categoryCode">
            <el-input
              placeholder="请输入"
              v-model="formData.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="formData.categoryName"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="分类层级" prop="categoryType">
 

            <el-select
              v-model="formData.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="baseCount">
            <el-row >
              <el-col :span="16">
                <el-input
                  placeholder="请输入"
                  v-model.number="formData.baseCount"
                >
                </el-input
              ></el-col>
              <el-col :span="2">&nbsp;</el-col>
              <el-col :span="6"
                ><DictSelection
                  dictName="计量单位"
                  v-model="formData.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="formData.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 - 350px)"
      :need-page="false"
    >
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-button type="primary" @click="add">添加</el-button>
      </template>
      <template v-slot:action="{ $index }">
        <el-link type="primary" @click="handleDel($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 }">
        <el-input
          :value="row.categoryName"
          placeholder="请选择"
          @click.native="categorySelect(row)"
        ></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>
    <materialDialog ref="materialDialogRef" />
    <productDialog ref="productDialogRef" />
  </ele-modal>
</template>

<script>
  import materialDialog from '@/components/SelectDialog/materialDialog';
  import productDialog from '@/components/SelectDialog/productDialog';
  import factorySelect from '@/components/CommomSelect/factory-select.vue';
  import { getCode } from '@/api/codeManagement/index.js';
  export default {
    components: { materialDialog, factorySelect, productDialog },
    props: {
      statusOpt: Object
    },
    data () {
      return {
        visible: false,
        title: '',
        row: {},
        formData: {
          code: '',
          name: '',
          factoryId: '',
          categoryCode: '',
          categoryId: '',
          categoryName: '',
          categoryType: '',
          baseCount: '',
          baseCountUnit: '',
          status: '-1'
        },
        categoryList: [
          {
            value: '1',
            label: '产品'
          },
          {
            value: '2',
            label: '部件'
          },
          {
            value: '3',
            label: '零件'
          }

        ],
        tableData: [],
        columns: [
          {
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            label: '子项编号',
            prop: 'subCode',
            slot: 'subCode',
            action: 'subCode'
          },
          {
            label: '物料名称',
            prop: 'categoryName',
            slot: 'categoryName',
            action: 'categoryName'
          },
          {
            label: '物料编码',
            prop: 'categoryId'
          },
          {
            label: '牌号',
            prop: 'brandNum'
          },
          {
            label: '型号',
            prop: 'modelType'
          },
          {
            label: '需量（子）',
            slot: 'count',
            action: 'count'
          },
          {
            label: '单位',
            slot: 'unit',
            action: 'unit'
          },
          {
            action: 'action',
            slot: 'action',
            label: '操作'
          }
        ]
      };
    },
    methods: {
      open (type, row) {
        this.title = type;
        this.row = row;
        this.visible = true;
        if (type == '新建') {
          this._getCode();
        }
      },
      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.formData.code = code;
      },
      selectProd () {
        this.$refs.productDialogRef.open(this.formData, (res) => {
          this.formData.categoryCode = res.code;
          this.formData.categoryId = res.id;
          this.formData.categoryName = res.name;
          console.log(res);
        });
      },
      categorySelect (row) {
        this.$refs.materialDialogRef.open(row, (res) => {
          row.categoryName = res.name;
          row.categoryId = res.id;
          row.unit = res.measuringUnit;
          row.modelType = res.modelType;
          row.brandNum = res.brandNum;
        });
      },
      save () {},
      handleDel (index) {
        this.tableData.splice(index, 1);
      },
      cancel () {
        this.visible = false
      }
    }
  };
</script>