kd-aiot-frontend/src/views/material/BOMmanage/components/detailedList.vue

<template>
  <div class="ele-body">
    <BOMSearch @search="reload" :statusOpt="statusOpt" />
    <!-- :header-cell-style="headerCellStyle" -->
    <ele-pro-table
      ref="table"
      :key="tableKey"
      :columns="columns"
      :pagination="pagination"
      :datasource="datasource"
      :page-size="20"
      cache-key="routed_detailed_list"
      class="dict-table"
      tool-class="ele-toolbar-actions"
      :height="tableHeight"
      @fullscreen-change="fullscreenChange"
    >
      <template v-slot:toolbar>
        <div class="toolbar_box">
          <div
            v-if="
              attributeData.status != 1 && attributeData.approvalStatus != 1
            "
          >
            <el-button
              type="primary"
              size="mini"
              @click="handleAdd"
              v-if="!isWt && attributeData.attributeType != 4"
              >新增</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="handleSave"
              v-if="!isWt"
              >保存</el-button
            >
          </div>
          <div class="toolbar_box_right"
            ><span>基本数量</span>
            <el-input
              placeholder="请输入"
              v-model.number="attributeData.baseCount"
              disabled
            >
              <template #append>
                {{
                  attributeData.category && attributeData.category.measuringUnit
                }}</template
              >
            </el-input>
          </div>
        </div>
      </template>
      <!-- 用量 -->
      <template v-slot:dosageHead="{ column }">
        <div>
          <span class="is-required">{{ column.label }}</span>
        </div>
      </template>

      <template v-slot:dosage="{ row }">
        <el-input
          v-model="row.dosage"
          placeholder="请输入"
          size="mini"
          style="width: 90px"
          :disabled="
            attributeData.approvalStatus == 1 ||
            attributeData.approvalStatus == 2 ||
            isWt
          "
          @input="handleInput(row)"
        >
        </el-input>
      </template>

      <template v-slot:versions="{ row }"> V{{ row.versions }}.0 </template>

      <template v-slot:rootCategoryLevelId="{ row }"
        >{{ rootCategoryLevelIdText(row.rootCategoryLevelId) }}
      </template>

      <template v-slot:produceType="{ row }">
        <el-select
          v-model="row.produceType"
          filterable
          multiple
          disabled
          class="ele-block"
          size="mini"
        >
          <el-option
            v-for="item in produceTypeList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </template>

      <template v-slot:attributeType="{ row }">
        <!-- <el-select
          v-model="row.attributeType"
          filterable
          disabled
          class="ele-block"
          size="mini"
        >
          <el-option
            v-for="item in attributeList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select> -->
        {{ attributeTypeText(row.attributeType) }}
      </template>

      <template v-slot:componentAttribute="{ row }">
        <div>
          <el-select
            v-model="row.componentAttribute"
            filterable
            multiple
            disabled
            class="ele-block"
            size="mini"
          >
            <el-option
              v-for="item in sxtList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </div>
      </template>

      <template v-slot:resourceBomVersion="{ row }">
        <div>
          <el-select
            v-model="row.resourceBomVersion"
            class="ele-block"
            size="mini"
            :disabled="row.approvalStatus == 2 || row.approvalStatus == 1"
            @change="resourceBomVersionFn($event, row)"
          >
            <el-option
              v-for="item in row.resourceBomVersionList"
              :key="item.versions"
              :value="item.versions"
              :label="'V' + item.versions + '.0'"
            ></el-option>
          </el-select>
        </div>
        <!-- <div v-if="!row.id">
          <el-select
            v-model="row.resourceBomVersion"
            disabled
            class="ele-block"
            size="mini"
            @change="resourceBomVersionFn($event, row)"
          >
            <el-option
              v-for="item in row.resourceBomVersionList"
              :key="item.versions"
              :value="item.versions"
              :label="'V' + item.versions + '.0'"
            ></el-option>
          </el-select>
        </div>

        <div v-else-if="row.resourceBomVersion">
          {{ 'V' + row.resourceBomVersion + '.0' }}
        </div> -->
      </template>

      <template v-slot:materielDesignation="{ row }">
        <el-input
          v-model="row.materielDesignation"
          placeholder="请输入物料代号"
          size="mini"
          style="width: 120px"
        >
        </el-input>
      </template>

      <template v-slot:supplierId="{ row }">
        <el-select
          v-model="row.supplierId"
          size="mini"
          clearable
          class="ele-block"
          filterable
          placeholder="请选择供应商"
        >
          <el-option
            v-for="(item, index) in gysList"
            :key="item.id + index"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </template>

      <template v-slot:factories="{ row }">
        <div style="display: flex">
          <el-input
            v-model="row.factories"
            disabled
            :value="row.factories"
            placeholder="请选择生产厂家"
            size="mini"
            style="width: 120px"
          >
          </el-input>
          <!--  -->
          <el-button
            type="primary"
            @click="factoriesFn(row.code)"
            v-if="row.approvalStatus != 2 && row.approvalStatus != 1"
            >选择</el-button
          >
          <!-- <el-select v-model="row.factories" size="mini" clearable class="ele-block" filterable placeholder="请选择生产厂家">
            <el-option v-for="(item, index) in sccjList" :key="item.id + index" :value="item.id"
              :label="item.name"></el-option>
          </el-select> -->
        </div>

        <!-- <el-input v-model="row.factories" placeholder="请输入生产厂家" size="mini" style="width: 120px">
        </el-input> -->
      </template>

      <!-- 表头工具栏 -->
      <template v-slot:action="{ row, $index }">
        <el-link
          v-if="
            attributeData.approvalStatus != 1 &&
            attributeData.approvalStatus != 2 &&
            !isWt
          "
          type="danger"
          :underline="false"
          icon="el-icon-delete"
          @click="handleDel(row, $index)"
        >
          删除
        </el-link>
      </template>
    </ele-pro-table>

    <bomTreeDialog ref="bomTreeDialogRef" @reload="bomClose" />

    <standardOutput
      ref="standardOutputRefs"
      @selection="chooseStandardList"
    ></standardOutput>

    <clientDialog
      ref="clientSelectionRef"
      @success="confirmSelection"
    ></clientDialog>
  </div>
</template>

<script>
  import BOMSearch from './BOM-search.vue';
  import {
    getBomPageCategoryId,
    contactList,
    deleteBomTreeList,
    updateBatchBOM,
    sourceBomVersion
  } from '@/api/material/BOM';

  import clientDialog from './clientDialog.vue';

  import { getByCode } from '@/api/system/dictionary-data';

  import bomTreeDialog from './bomTreeDialog.vue';
  import { produceTypeList } from '@/enum/dict.js';

  import standardOutput from './standardOutput.vue';
  export default {
    name: 'SystemDictionary',
    components: { BOMSearch, bomTreeDialog, standardOutput, clientDialog },

    data() {
      return {
        produceTypeList,
        pagination: {
          tableTotal: 0
        },
        // 表格列配置
        columns: [
          {
            label: '序号',
            columnKey: 'index',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: 'BOM编码',
            showOverflowTooltip: true,
            width: 120
          },
          {
            prop: 'categoryCode',
            label: '物品编码',
            showOverflowTooltip: true,
            width: 120
          },
          {
            prop: 'name',
            label: '名称',
            width: 150
          },

          {
            prop: 'level',
            label: '层级'
          },

          {
            prop: 'brandNum',
            label: '牌号'
          },

          {
            prop: 'modelType',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'rootCategoryLevelId',
            slot: 'rootCategoryLevelId',
            label: '物品分类',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'dosage',
            slot: 'dosage',
            label: '用量',
            width: 100,
            headerSlot: 'dosageHead'
          },

          {
            prop: 'measuringUnit',
            label: '计量单位',
            showOverflowTooltip: true
          },

          {
            prop: 'produceType',
            slot: 'produceType',
            label: '生产类型',
            width: 260
          },
          {
            prop: 'attributeType',
            slot: 'attributeType',
            label: '存货类型',
            width: 260
          },
          {
            prop: 'componentAttribute',
            slot: 'componentAttribute',
            label: '属性类型',
            width: 260
          },

          {
            prop: 'materielDesignation',
            slot: 'materielDesignation',
            label: '物料代号',
            width: 150
          },

          {
            prop: 'supplierId',
            slot: 'supplierId',
            label: '供应商',
            width: 150
          },

          {
            prop: 'factories',
            slot: 'factories',
            label: '生产厂家',
            width: 180
          },
          {
            prop: 'resourceBomVersion',
            slot: 'resourceBomVersion',
            label: '来源版本',
            width: 180
          },
          {
            prop: 'versions',
            slot: 'versions',
            label: '版本'
          },

          {
            prop: 'status ',
            label: '状态',
            formatter: (row) => {
              return this.statusOpt[+row.status];
            }
          },

          {
            prop: 'createName',
            label: '创建人',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建日期',
            width: 160
          },
          {
            action: 'action',
            slot: 'action',
            fixed: 'right',
            label: '操作',
            width: 120
          }
        ],
        statusOpt: {
          '': '全部',
          0: '草稿',
          1: '已发布'
        },
        dictList: [
          {
            label: '加工',
            value: 1
          },

          {
            label: '装配',
            value: 3
          }
        ],

        attributeList: [
          // {
          //   label: '总装',
          //   value: 1
          // },
          // {
          //   label: '部件',
          //   value: 2
          // },
          // {
          //   label: '零件',
          //   value: 3
          // },
          // {
          //   label: '原材料',
          //   value: 4
          // }
        ],

        sxtList: [
          {
            label: '自制件',
            value: 1
          },
          {
            label: '采购件',
            value: 2
          },
          {
            label: '外协件',
            value: 3
          },
          {
            label: '受托件',
            value: 4
          }
        ],

        rootCategoryLevelIdList: [
          {
            label: '产品',
            value: 9
          },
          {
            label: '物料',
            value: 1
          },
          {
            label: '生产设备',
            value: 4
          },
          {
            label: '模具',
            value: 5
          },
          {
            label: '备品备件',
            value: 6
          },
          {
            label: '零部件',
            value: 3
          },
          {
            label: '舟皿',
            value: 8
          },
          {
            label: '消耗材料',
            value: 10
          },
          {
            label: '包装材料',
            value: 13
          },
          {
            label: '生产辅助设备',
            value: 14
          },
          {
            label: '仪表计量设备',
            value: 15
          },
          {
            label: '会计科目',
            value: 23
          },
          {
            label: '周转盘',
            value: 26
          },
          {
            label: '废品',
            value: 28
          },
          {
            label: '周转车',
            value: 7
          }
        ],

        isList: false,
        isId: null,
        tableKey: '',
        list: [], //表格数据
        listTow: [],
        newList: [],
        gysList: [],
        sccjList: [],
        newTreeId: null,
        responsesList: [],
        tableHeight: 'calc(100vh - 450px)'
        // dictList: []
      };
    },

    created() {
      this.getAttriButeList('inventory_type');
      // this.getDictList('productionType');
      // this.getZeroPartPros('zeroPartPros');
      this.getContactList();
    },
    mounted() {},

    props: {
      attributeData: {
        type: Object,
        default: {}
      },
      isWt: {
        type: Boolean,
        default: false
      },
      treeId: {
        type: String,
        default: ''
      },

      isTemp: {
        type: Number,
        default: 0
      }
    },

    watch: {
      treeId: {
        handler(val) {
          this.newTreeId = val;
        },
        deep: true,
        immediate: true
      },

      'attributeData.id': {
        handler(val) {
          this.$nextTick(() => {
            console.log(val, '66666666');

            this.reload();
          });
        },
        deep: true,
        immediate: true
      },
      data: {
        handler(val) {
          console.log(val);
          // this.$nextTick(() => {
          //   this.reload();
          // });
        },
        deep: true,
        immediate: true
      }
    },
    // computed: {
    //   processedItems() {
    //     return this.list.map(item => {
    //       // 处理逻辑
    //       console.log(item);
    //       // return processedItem;
    //     });
    //   }
    // },

    mounted() {},

    methods: {
      attributeTypeText(v) {
        if (v) {
          let a = this.attributeList.find((item) => item.value == v);
          return a ? a.label : '';
        }
      },

      async getAttriButeList(code) {
        let { data: res } = await getByCode(code);
        this.attributeList = res.map((item) => {
          let values = Object.keys(item);
          return {
            value: Number(values[0]),
            label: item[values[0]]
          };
        });
      },

      rootCategoryLevelIdText(v) {
        console.log(v, '111111');
        console.log(
          this.rootCategoryLevelIdList,
          'this.rootCategoryLevelIdList'
        );

        if (v) {
          let a = this.rootCategoryLevelIdList.find((item) => item.value == v);
          return a ? a.label : '';
        }
      },

      handleInput(item) {
        let newVal = item.dosage.replace(/[^\d.]/g, '');

        // 2. 不能以点开头
        if (newVal.startsWith('.')) {
          newVal = '';
        }

        // 3. 只允许出现一个小数点
        const firstDotIndex = newVal.indexOf('.');
        if (firstDotIndex !== -1) {
          newVal =
            newVal.slice(0, firstDotIndex + 1) +
            newVal.slice(firstDotIndex + 1).replace(/\./g, '');
        }

        const match = newVal.match(/^(\d+)(\.\d{0,4})?/);
        item.dosage = match ? match[0] : '';

        // 4. 更新数据
        // item.dosage = newVal;
      },

      factoriesFn(code) {
        this.isId = code;
        this.$refs.clientSelectionRef.open();
      },
      // 选择工厂
      confirmSelection(obj) {
        let list = this.$refs.table.getData();
        list.map((v) => {
          if (v.code == this.isId) {
            v.factories = obj.name;
          }
        });
        console.log(list, 'list');
        // arr.factories = obj.name;
        this.$nextTick(() => {
          this.list = [...list];
          this.listTow = JSON.parse(JSON.stringify(this.list));

          this.$refs.table.setData(this.list);
          this.updateFn();
          this.tableKey = Date.now();
        });

        this.$forceUpdate();
      },

      updateFn(list) {
        this.isList = true;
        this.reload();
        setTimeout(() => {
          this.isList = false;
        }, 1000);
      },

      /* 表格数据源 */
      async datasource({ where, page, limit }) {
        // let that = this;
        // console.log(getBomPageCategoryId({
        //   ...where,
        //   pageNum: page,
        //   size: limit,
        //   id: this.attributeData.id,
        //   bomType: this.attributeData.bomType
        // }));

        // return new Promise((resolve, reject) => {

        //   getBomPageCategoryId({
        //     ...where,
        //     pageNum: page,
        //     size: limit,
        //     id: that.attributeData.id,
        //     bomType: that.attributeData.bomType
        //   }).then((res) => {
        //     console.log(res, '111111111111');

        //     if(res.list && res.list.length ){

        //     const arrays = []
        //     res.list.map((item) => {
        //       arrays.push(item.categoryId);

        //     });

        //     that.getResourceBomVersionListFn(arrays).then(v => {
        //       v.map(element => {
        //         res.list.map((item2, i) => {
        //           if (element.categoryId == item2.id) {
        //             item2.resourceBomVersionList.push(element);
        //           }
        //           item2.resourceBomVersion = item2.resourceBomVersionList[0].versions;
        //           item2.resourceBomId = item2.resourceBomVersionList[0].resourceBomId;
        //           // item2.id ="";
        //         })
        //       })
        //       this.$nextTick(() => {
        //         resolve(res);
        //       })
        //     })
        //   }
        //   })
        //     .catch((err) => {
        //       reject(err);
        //     });
        // });

        let data = await getBomPageCategoryId({
          ...where,
          pageNum: page,
          size: limit,
          id: this.attributeData.id,
          bomType: this.attributeData.bomType
        });

        if (this.isList) {
          data = this.listTow;
        }

        // data.list.forEach((item) => {
        //   if (!item.supplierId && item.supplierList.length != 0) {
        //     item.supplierId = item.supplierList[0].id;
        //   }
        // });

        // console.log(data, 'data');

        return data;
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ where });
      },

      async getDictList(code) {
        let { data: res } = await getByCode(code);

        this.dictList = res.map((item) => {
          let values = Object.keys(item);
          return {
            value: Number(values[0]),
            label: item[values[0]]
          };
        });
      },

      // async getZeroPartPros(code) {
      //   let { data: res } = await getByCode(code);
      //   let sxtList = res.map((item) => {
      //     let values = Object.keys(item);
      //     return {
      //       value: Number(values[0]),
      //       label: item[values[0]]
      //     };
      //   });
      //   this.$nextTick(() => {
      //     this.$set(this, 'sxtList', sxtList);
      //   });

      // },

      getContactList() {
        let param = {
          pageNum: 1,
          type: 2,
          size: -1,
          status: 1
        };
        contactList(param).then((res) => {
          this.gysList = res.list;
        });
      },

      handleAdd() {
        // // 打开树形对话框
        // this.$refs.bomTreeDialogRef.open(
        //   this.attributeData.bomType,
        //   this.attributeData.versions,
        //   this.attributeData.categoryId,
        //   this.newTreeId,
        //   this.isTemp
        // );

        let _list = this.$refs.table.getData() ?? [];

        this.$refs.standardOutputRefs.open(_list);
      },

      // 勾选
      async chooseStandardList(data) {
        const that = this;
        const arrays = [];
        data.map((m) => {
          m.parentId = this.newTreeId;
          m.createTime = '';
          m.bomType = this.attributeData.bomType;
          m.level = Number(this.attributeData.level) + 1;
          m.categoryCode = m.code;
          m.code = '';
          m.versions = this.attributeData.versions;
          m.categoryId = m.id;
          // m.dosage = 1;
          m.componentAttribute = m.componentAttribute;
          m.rootCategoryLevelId = m.categoryLevelPathIdParent;
          m.resourceBomVersionList = [];
          arrays.push(m.id);
        });

        this.getResourceBomVersionListFn(arrays).then((v) => {
          if (v.length) {
            v.map((element) => {
              data.map((item2, i) => {
                if (element.categoryId == item2.id) {
                  item2.resourceBomVersionList.push(element);
                }
                if (item2.resourceBomVersionList.length) {
                  item2.resourceBomVersion =
                    item2.resourceBomVersionList[0].versions;
                  item2.resourceBomId =
                    item2.resourceBomVersionList[0].resourceBomId;
                }

                setTimeout(() => {
                  item2.id = '';
                }, 100);
              });
            });
          }

          this.$nextTick(() => {
            data.map((v) => {
              v.id = '';
            });

            this.list = [...data, ...this.$refs.table.getData()];

            this.$refs.table._data.tableTotal = this.list.length;

            this.$refs.table.setData(this.list);
          });
        });

        // this.$nextTick(() => {
        //   this.list = [...data, ...this.$refs.table.getData()];
        //   console.log(this.list,'9999999999');
        //   // this.$refs.table.setData(this.list);
        //   console.log(this.$refs.table._data,'this.$refs.table');
        //   // this.$refs.table._data.tableData = [];
        //   //
        //   // this.$set(this.$refs.table._data,"tableData",this.list);

        //   // this.bomClose();
        // });
      },

      resourceBomVersionFn(e, row) {
        let arr = row.resourceBomVersionList.find((item) => item.versions == e);
        row.resourceBomVersion = arr.versions;
        row.resourceBomId = arr.id;
        this.$forceUpdate();
        console.log(row);
      },

      async getResourceBomVersionListFn(id) {
        return new Promise((resolve, reject) => {
          sourceBomVersion({
            bomType: this.attributeData.bomType,
            categoryIds: id
          }).then((res) => {
            resolve(res.data);
          });
        });
      },

      bomClose() {
        this.$nextTick(() => {
          this.$refs.table.reload({
            pageNum: 1
          });
        });
      },

      handleDel(row, i) {
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            if (row.id) {
              deleteBomTreeList([row.id]).then((msg) => {
                this.$message.success('删除' + msg);
                this.$refs.table.reload({
                  pageNum: 1
                });
              });
            } else {
              let _list = this.$refs.table.getData() ?? [];
              _list.splice(i, 1);
              // _list = _list.filter((item) => item.id !== row.id);
              this.$refs.table.setData(_list);
            }
          })
          .catch(() => {});
      },

      fullscreenChange(fullscreen) {
        if (fullscreen) {
          this.tableHeight = 'calc(100vh - 120px)';
        } else {
          this.tableHeight = 'calc(100vh - 450px)';
        }
      },

      handleSave() {
        let _list = this.$refs.table.getData() ?? [];

        if (_list.length == 0) {
          return this.$message.info('明细表最少有一条数据');
        }
        let list = JSON.parse(JSON.stringify(_list));

        console.log(list, 'list');

        const arr = list.every((v) => {
          return v.dosage && v.quantity !== '';
        });

        if (!arr) {
          return this.$message.info('用量不能为空');
        }

        // console.log(list);
        // return

        updateBatchBOM(list).then((res) => {
          if (res) {
            this.$message.success('保存成功');
            this.reload();
            // this.$refs.table.reload({
            //   pageNum: 1
            // });
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ele-body {
    height: 100%;

    ::v-deep .el-card {
      height: 100%;

      .el-card__body {
        height: 100%;
        display: flex;
        flex-direction: column;

        .dict-table {
          flex: 1;
          overflow: hidden;
          display: flex;
          flex-direction: column;

          .el-table {
            flex: 1;
            overflow-y: auto;
          }
        }
      }
    }
  }

  .toolbar_box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .toolbar_box_right {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;

      > span {
        width: 150px;
      }

      > div {
        margin-left: 10px;
      }
    }
  }
</style>