kd-aiot-frontend/src/views/rulesManagement/meteringManagement/index.vue

<template>
  <div id="meteringManagement">
    <div class="mian">
      <div class="tree_box">
        <div class="control">
          <el-button icon="el-icon-plus" type="primary" @click="addType('新增')"
          v-if="$hasPermission('main:categorymeasure:save')"
            >新增</el-button
          >
          <el-button
            v-if="currentObj.id&&$hasPermission('main:categorymeasure:update')"
            icon="el-icon-edit"
            type="success"
            @click="addType('修改')"
            >修改</el-button
          >
          <!-- <el-button icon="el-icon-delete" type="danger" @click="deleted()"
            >删除</el-button
          > -->
        </div>
        <el-tree
          class="tree"
          ref="tree"
          highlight-current
          node-key="id"
          :expand-on-click-node="false"
          :default-expand-all="true"
          :data="typeList"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
      <div class="list">
        <div class="search_bar">
          <el-input
            placeholder="请输入编码或名称关键词"
            v-model="name"
            clearable
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search" @click="search"
              >搜索</el-button
            >
          </el-input>
        </div>
        <div class="table_box">
          <ele-pro-table
            ref="table"
            :columns="columns"
            :initLoad="false"
            :needPage="false"
            :datasource="datasource"
          >
            <!-- 表头工具栏 -->
            <template v-slot:toolbar>
              <el-button
                v-if="currentObj.id&&$hasPermission('main:categorymeasure:save')"
                size="small"
                type="primary"
                icon="el-icon-plus"
                class="ele-btn-icon"
                @click="openEdit('新增')"
              >
                新增
              </el-button>
            </template>
            <template v-slot:action="{ row }">
              <el-link
                type="primary"
                :underline="false"
                icon="el-icon-edit"
                @click="openEdit('修改', row)"
                v-if="$hasPermission('main:categorymeasure:update')"
              >
                修改
              </el-link>
            </template>
          </ele-pro-table>
        </div>
      </div>
    </div>
    <baseDialog ref="baseDialogRef" @reload="getPages"></baseDialog>
    <typeDialog ref="typeDialogRef" @reload="getTypeList"></typeDialog>
  </div>
</template>

<script>
  import { getCategorymeasureList } from '@/api/ruleManagement/meteringManagement.js';
  import baseDialog from './baseDialog.vue';
  import typeDialog from './typeDialog.vue';
  export default {
    components: { baseDialog, typeDialog },
    data() {
      return {
        currentObj: {
          id: '',
          name: ''
        },
        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            type: 'index',
            label: '序号',
            width: 50,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: '编码',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '名称',
            showOverflowTooltip: true
          },
          {
            prop: 'parentName',
            label: '分组',
            showOverflowTooltip: true
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 200,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ],

        name: '',
        tableData: [
          {
            name: '包',
            code: 'bao'
          },
          {
            name: '包',
            code: 'bao'
          }
        ],
        typeList: [
          {
            label: '长度(length)',
            children: []
          },
          {
            label: '数量(quantity)',
            children: []
          },
          {
            label: '重量(weight)',
            children: []
          }
        ],
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      };
    },
    async mounted() {
      this.getTypeList(); // 获取侧边栏分类列表
    },
    methods: {
      search() {
        this.getPages({
          name: this.name,
          parentId: this.currentObj.id ? this.currentObj.id : ''
        });
      },
      async getTypeList() {
        this.currentObj = {};
        this.typeList = await getCategorymeasureList({ parentId: 0 });
        this.getPages();
      },
      addType(type) {
        // if (!this.currentObj.id) {
        //   return this.$message.warning('请选择分类');
        // }
        if (type == '新增') {
          this.$refs.typeDialogRef.open(type);
        } else {
          this.$refs.typeDialogRef.open(type, this.currentObj.id);
        }
      },
      deleted() {
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
          .catch(() => {});
      },
      getPages(where) {
        this.$refs.table.reload({ where });
      },
      datasource({ page, limit, where, order }) {
        console.log('where', where);
        return getCategorymeasureList({
          ...where
        });
      },
      handleNodeClick(data) {
        this.currentObj = data;
        this.getPages({ parentId: data.id });
        console.log(data);
      },
      openEdit(type, row) {
        if (type == '新增') {
          this.$refs.baseDialogRef.open(type, this.currentObj);
        } else {
          this.$refs.baseDialogRef.open(type, this.currentObj, row.id);
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  #meteringManagement {
    height: calc(100vh - 96px);
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    .mian {
      height: 100%;
      width: 100%;
      border-radius: 4px;
      display: flex;
      .tree_box {
        flex: 0 0 240px;
        background-color: #fff;
        margin-right: 10px;
        display: flex;
        flex-direction: column;
        border: 1px solid #ddd;
        .control {
          flex: 0 0 50px;
          padding: 10px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          background-color: #fafafa;
          border-bottom: 1px solid #ddd;
        }
        .tree {
          flex: 1 0 auto;
          height: 0;
          padding: 10px;
          box-sizing: border-box;
          overflow: auto;
        }
      }
      .list {
        flex: 1;
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #ddd;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        .search_bar {
          height: 50px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          > div {
            width: 300px;
          }
        }
        .table_box {
          flex: 1 0 auto;
          height: 0;
          overflow: hidden;
          > div {
            height: 100%;
            display: flex;
            flex-direction: column;
          }
        }
      }
    }
  }
</style>