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

<template>
  <div class="ele-body">

    <BOMSearch @search="reload" :statusOpt="statusOpt" />
    <ele-pro-table ref="table" :key="tableKey" :columns="columns" :datasource="datasource" class="dict-table"
      tool-class="ele-toolbar-actions">

      <template v-slot:toolbar>
        <div class="toolbar_box">
          <div v-if="attributeData.status != 1">
            <el-button type="primary" size="mini" @click="handleAdd">新增</el-button>
            <el-button type="primary" size="mini" @click="handleSave">保存</el-button>
          </div>
          <div class="toolbar_box_right"><span>基本数量</span>
            <el-input placeholder="请输入" v-model.number="attributeData.baseCount">
              <template #append>
                {{
                  attributeData.category && attributeData.category.measuringUnit
                }}</template>
            </el-input>
          </div>
        </div>
      </template>
      <!-- 用量 -->
      <template v-slot:dosage="{ row }">

        <el-input v-model="row.dosage" placeholder="请输入" size="mini" style="width: 68px">
        </el-input>
      </template>

      <template v-slot:versions="{ row }"> V{{ row.versions }}.0 </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 dictList" :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>
      </template>


      <template v-slot:resourceBomVersion="{ row }">
        <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 v-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)">选择</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 }">
        <el-link v-if="attributeData.status != 1" type="danger" :underline="false" icon="el-icon-delete"
          @click="handleDel(row)">
          删除
        </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 standardOutput from './standardOutput.vue';
export default {
  name: 'SystemDictionary',
  components: { BOMSearch, bomTreeDialog, standardOutput, clientDialog },

  data() {
    return {
      // 表格列配置
      columns: [
        {
          label: '序号',
          columnKey: 'index',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'code',
          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: 'dosage',
          slot: 'dosage',
          label: '用量',
          width: 100
        },

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

        {
          prop: 'produceType',
          slot: 'produceType',
          label: '生产类型',
          width: 260
        },

        {
          prop: 'attributeType',
          slot: 'attributeType',
          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: '已发布'
      },

      attributeList: [
        {
          label: '总装',
          value: 1
        },
        {
          label: '部件',
          value: 2
        },
        {
          label: '零件',
          value: 3
        },
        {
          label: '原材料',
          value: 4
        }
      ],
      isList:false,
      isId: null,
      tableKey:"",
      list: [],//表格数据
      listTow:[],
      newList: [],
      gysList: [],
      sccjList: [],
      newTreeId: null,
      responsesList: [],
      dictList: []
    };
  },

  created() {
    this.getDictList('productionType');

    this.getContactList();
  },
  mounted() { },
  props: {
    attributeData: {
      type: Object,
      default: {}
    },

    treeId: {
      type: String,
      default: ''
    },

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

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

    attributeData: {
      handler(val) {
        this.$nextTick(() => {
          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;
  //     });
  //   }
  // },


  methods: {
    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));

        console.log(this.listTow,'listTowlistTowlistTowlistTow');
        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);
    },

    /* 表格数据源 */
    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 =  getBomPageCategoryId({
        ...where,
        pageNum: page,
        size: limit,
        id: this.attributeData.id,
        bomType: this.attributeData.bomType
      });
      if(this.isList){
        data= this.listTow;
      }
      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]]
        };
      });
    },

    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 = []
      console.log(data, '99999999');

      data.map((m) => {
        m.parentId = this.newTreeId;
        m.createTime = '';
        m.bomType = this.attributeData.bomType;
        m.level = Number(this.attributeData.level) + 1;
        m.versions = this.attributeData.versions;
        m.categoryId = m.id;
        m.rootCategoryLevelId = m.categoryLevelPathIdParent;
        m.resourceBomVersionList = [];
        arrays.push(m.id)

        // Promise.all(arrays).then(responses => {
        //   // 默认选择第一个
        //   console.log(responses,responses[0].length,66666666);
        //   if(responses[0].length){
        //     m.resourceBomVersionList=responses[0];
        //     m.resourceBomVersion = responses[0][0].versions;
        //     m.resourceBomId = responses[0][0].resourceBomId;
        //   }else{
        //     m.resourceBomVersionList=[];
        //     m.resourceBomVersion = '';
        //     m.resourceBomId = '';
        //   }
        //   this.responsesList = responses;
        // })
        // m.id = '';
      });
      console.log(data);

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

              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.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);
      console.log(arr, 'eeeeeeeeee');
      this.$forceUpdate();
      row.resourceBomVersion = arr.versions;
      row.resourceBomId = arr.resourceBomId;
      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) {
      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 = _list.filter((item) => item.id !== row.id);
            this.$refs.table.setData(_list);
          }

        })
        .finally(() => { });
    },

    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('用量不能为空')
      }
      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>