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"
      :columns="columns"
      :datasource="datasource"
      :initLoad="false"
      class="dict-table"
      tool-class="ele-toolbar-actions"
    >
      <template v-slot:toolbar>
        <div class="toolbar_box">
          <div>
            <el-button type="primary" size="mini" @click="handleAdd"
              >新增</el-button
            >
            <el-button type="primary" size="mini" @click="handleAdd"
              >保存</el-button
            >
          </div>
          <div class="toolbar_box_right"
            ><span>基本数量</span>
            <el-input
              placeholder="请输入"
              v-model.number="attributeData.baseCount"
            >
            </el-input>
            <DictSelection dictName="计量单位" v-model="attributeData.unit"
          /></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:produceType="{ row }">
        <el-select
          v-model="row.produceType"
          filterable
          multiple
          collapse-tags
          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: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 }">
        <el-input
          v-model="row.factories"
          placeholder="请输入生产厂家"
          size="mini"
          style="width: 120px"
        >
        </el-input>
      </template>

      <!-- 表头工具栏 -->
      <template v-slot:action="{ row }">
        <el-link
          type="danger"
          :underline="false"
          icon="el-icon-delete"
          @click="handleDel(row)"
        >
          删除
        </el-link>
      </template>
    </ele-pro-table>

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

<script>
  import BOMSearch from './BOM-search.vue';
  import {
    getBomPageCategoryId,
    contactList,
    deleteBomTreeList
  } from '@/api/material/BOM';
  import { getByCode } from '@/api/system/dictionary-data';

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

    data() {
      return {
        // 表格列配置
        columns: [
          {
            label: '序号',
            columnKey: 'index',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryCode',
            label: '编码',
            showOverflowTooltip: true,
            width: 120
          },
          {
            prop: 'categoryName',
            label: '名称',
            width: 150
          },

          {
            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: 160
          },

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

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

          {
            prop: 'factories',
            slot: 'factories',
            label: '生产厂家',
            width: 180
          },

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

        gysList: [],

        attrObj: {},
        newTreeId: null,

        dictList: []
      };
    },

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

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

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

    watch: {
      attributeData(val) {
        this.attrObj = val;
        this.$refs.table.setData([]);
        this.$nextTick(() => {
          this.$refs.table.reload({
            pageNum: 1
          });
        });
      },

      treeId(val) {
        this.newTreeId = val;
      }
    },

    methods: {
      /* 表格数据源 */
      datasource({ where, page, limit }) {
        if (!this.attrObj.id) {
          return false;
        }

        return getBomPageCategoryId({
          ...where,
          pageNum: page,
          size: limit,
          id: this.attrObj.id,
          bomType: this.attrObj.bomType
        });
      },

      /* 刷新表格 */
      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
        );
      },

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

      handleDel(row) {
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            deleteBomTreeList([row.id]).then((msg) => {
              this.$message.success('删除' + msg);
              this.$refs.table.reload({
                pageNum: 1
              });
            });
          })
          .finally(() => {});
      }
    }
  };
</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>