kd-aiot-frontend/src/views/classifyManage/itemInformation/details.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="page-title">
        <el-page-header @back="goBack">
          <div slot="content" class="pageContent">
            <div>物品详情</div>
            <el-form class="topform">
              <el-form-item label="物品类型" label-width="70px">
                <span>{{ itemValue }}</span>
              </el-form-item>
            </el-form>
          </div>
        </el-page-header>
      </div>
      <div class="table-container">
        <div class="tree-col">
          <ItemDetail ref="itemDetailRef" :customForm="customForm" />
        </div>
        <div class="attribute-row">
          <RowDetail
            ref="rowDetailRef"
            :customForm="customForm"
            :defaultNum="defaultNum"
          />
          <div
            class="row-table"
            v-if="defaultNum != '8' && defaultNum != '2' && defaultNum != '5'"
          >
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane
                label="匹配产品"
                name="product"
                v-if="defaultNum == '3' || defaultNum == '6'"
              >
                <!-- 数据表格 -->
                <ele-pro-table
                  ref="table"
                  :columns="columns_product"
                  :datasource="productData"
                  :needPage="false"
                  height="calc(100vh - 265px)"
                  full-height="calc(100vh - 116px)"
                  tool-class="ele-toolbar-form"
                  cache-key="systemOrgUserTable"
                >
                </ele-pro-table>
              </el-tab-pane>
              <el-tab-pane
                label="匹配模具"
                name="mould"
                v-if="defaultNum == '1' || defaultNum == '4'"
              >
                <!-- 数据表格 -->
                <ele-pro-table
                  ref="table"
                  :columns="columns_mould"
                  :datasource="mouldData"
                  :needPage="false"
                  height="calc(100vh - 265px)"
                  full-height="calc(100vh - 116px)"
                  tool-class="ele-toolbar-form"
                  cache-key="systemOrgUserTable"
                >
                </ele-pro-table>
              </el-tab-pane>
              <el-tab-pane
                label="匹配备品备件"
                name="part"
                v-if="defaultNum == '1'"
              >
                <!-- 数据表格 -->
                <ele-pro-table
                  ref="table"
                  :columns="columns_part"
                  :datasource="partData"
                  :needPage="false"
                  height="calc(100vh - 265px)"
                  full-height="calc(100vh - 116px)"
                  tool-class="ele-toolbar-form"
                  cache-key="systemOrgUserTable"
                >
                </ele-pro-table>
              </el-tab-pane>
              <el-tab-pane label="BOM表" name="bom" v-if="defaultNum == '4'">
                <!-- 数据表格 -->
                <ele-pro-table
                  ref="table"
                  :columns="columns_bom"
                  :datasource="bomData"
                  :needPage="false"
                  height="calc(100vh - 265px)"
                  full-height="calc(100vh - 116px)"
                  tool-class="ele-toolbar-form"
                  cache-key="systemOrgUserTable"
                >
                  <!-- 表头工具栏 -->
                  <template v-slot:toolbar>
                    <div class="bom-top">
                      <div class="top-input">
                        <span>基本数量</span>
                        <div class="input-box">{{ customForm.basicNum }}</div>
                        <span>{{ customForm.measuringUnit }}</span>
                      </div>
                    </div>
                  </template>
                  <!-- 操作列 -->
                  <template v-slot:num="{ row, $index }">
                    {{ row.num }}
                  </template>
                </ele-pro-table>
              </el-tab-pane>
              <el-tab-pane
                label="匹配设备"
                name="facility"
                v-if="defaultNum == '6' || defaultNum == '7'"
              >
                <!-- 数据表格 -->
                <ele-pro-table
                  ref="table"
                  :columns="columns_facility"
                  :datasource="facilityData"
                  :needPage="false"
                  height="calc(100vh - 265px)"
                  full-height="calc(100vh - 116px)"
                  tool-class="ele-toolbar-form"
                  cache-key="systemOrgUserTable"
                >
                </ele-pro-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import matchMixins from './components/match-mixins';
  import ItemDetail from './components/ItemDetail';
  import RowDetail from './components/RowDetail';
  import dictMixins from '@/mixins/dictMixins';
  import { getDetails } from '@/api/classifyManage/itemInformation';
  export default {
    components: { ItemDetail, RowDetail },
    mixins: [dictMixins, matchMixins],
    data () {
      return {
        // typeList: [
        //   { id: 1, value: '1  生产设备', prefix: '1', code: 1 },
        //   { id: 2, value: '2  舟皿', prefix: '2', code: 2 },
        //   { id: 3, value: '5  周转车', prefix: '5', code: 5 },
        //   { id: 4, value: '6  模具', prefix: '6', code: 6 },
        //   { id: 5, value: '7  备品备件', prefix: '7', code: 7 },
        //   { id: 6, value: '3  物料', prefix: '3', code: 3 },
        //   { id: 7, value: '4  产品', prefix: '4', code: 4 },
        //   { id: 8, value: '8  耗材', prefix: '8', code: 8 }
        // ],
        defaultNum: '1',
        // itemForm:{
        //   priceType:0, dateType:0,
        // },
        customForm: {
          addList: []
        },
        activeName: 'product',
        productData: [],
        mouldData: [],
        partData: [],
        bomData: [],
        facilityData: [],
        pagination: {
          page: 1,
          size: 10,
          total: 0
        },
        itemValue: ''
      };
    },
    computed: {
      prefix () {
        const obj =
          (this.dict[this.dictEnum['分类编号']] || []).find(
            (itm) => itm.dictCode === this.defaultNum
          ) || {};
        return obj && obj.dictValue;
      },
      typeList () {
        const noList = this.dict[this.dictEnum['分类编号']] || [];

        return (this.dict[this.dictEnum['类型用途']] || []).map((item) => {
          const obj =
            noList.find((itm) => itm.dictCode === item.dictCode) || {};
          return {
            ...item,
            value: `${obj.dictValue} ${item.dictValue}`,
            name: item.dictValue,
            prefix: obj.dictValue,
            code: item.dictCode
          };
        });
      }
    },
    async created () {
      await this.requestDict('分类编号');
      await this.requestDict('类型用途');
      this.getDetilInfo(this.$route.query.id);
    },
    methods: {
      async getDetilInfo (id) {
        const data = await getDetails(id);
        this.customForm = data;
        this.defaultNum = data.type;
        this.formatterValue(data.type);
        this.setDefault(data.type);
        for (const key in this.customForm.categoryVoRelationMap) {
          this.matchList(key, this.customForm.categoryVoRelationMap);
        }
      },

      formatterValue (code) {
        this.typeList.map((item) => {
          if (item.code == code) {
            this.itemValue = item.value;
          }
        });
      },

      goBack () {
        this.$router.go(-1);
      },
      // 显示默认选中的tab
      setDefault (val) {
        switch (val) {
          case '3': {
            this.activeName = 'product';
            break;
          }
          case '1': {
            this.activeName = 'mould';
            break;
          }
          case '4': {
            this.activeName = 'mould';
            break;
          }
          case '6': {
            this.activeName = 'product';
            break;
          }
          case '7': {
            this.activeName = 'facility';
            break;
          }
          default:
            break;
        }
      },

      matchList (key, data) {
        switch (key) {
          case '1': {
            this.facilityData = data[key];
            break;
          }
          case '6': {
            this.mouldData = data[key];
            break;
          }
          case '7': {
            this.partData = data[key];
            break;
          }
          case '4': {
            this.productData = data[key];
            break;
          }
          case '3': {
            this.bomData = data[key];
            break;
          }
          default:
            break;
        }
      },

      handleDelete (index, row) {},

      //点击添加打开弹窗
      clickAdd () {
        this.$refs.addDialogRef.equipmentdialog = true;
      },

      handleCurrent (page) {
        this.pagination.page = page;
        // this._getList(this.params)
      },
      handleSize (size) {
        this.pagination.page = 1;
        this.pagination.size = size;
        // this._getList(this.params)
      }

      // 物品类型格式化
      // classificationCodeFormatter (row) {
      //   let itemName = '';
      //   this.typeList.map((item) => {
      //     if (item.code == row.type) {
      //       itemName = item.value;
      //     }
      //   });
      //   return itemName;
      // }
    }
  };
</script>

<style lang="scss" scoped>
  .ele-body {
    :deep(.page-title) {
      border-bottom: 1px solid #eaeefb;
      padding-bottom: 8px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      .el-page-header__left {
        display: flex;
        align-items: center;
      }
      .pageContent {
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #303133;
        .topform {
          margin-left: 30px;
          display: flex;
          align-items: center;
          .el-form-item {
            margin-bottom: 0;
          }
        }
      }
    }
    .table-container {
      flex: 1;
      display: flex;
      overflow: hidden;
      .tree-col {
        margin-right: 10px;
        width: 25%;
        min-width: 250px;
        overflow: auto;
        padding: 20px 20px 20px 10px;
        background-color: #fff;
        margin-top: 10px;
        border: 1px solid #e6ebf5;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      }
    }

    :deep(.attribute-row) {
      padding: 20px 5px;
      background: #fff;
      margin-top: 10px;
      overflow: auto;
      flex: 1;
      border: 1px solid #e6ebf5;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      position: relative;
      .row-table {
        width: 100%;
        margin: 20px auto 0;
        .table-box {
          width: 100%;
          margin: 10px auto;
          min-height: 400px;
        }
        .bom-top {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          .top-input {
            margin-left: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            .input-box {
              width: 150px;
              margin: 0 10px;
              display: inline-box;
            }
          }
        }
      }
      .page-footer-btn {
        background: #fff;
        z-index: 1;
        position: fixed;
        bottom: 40px;
        right: 80px;
        text-align: right;
        width: 50%;
      }
    }
  }
</style>