kd-aiot-frontend-ems/src/views/useEnergyZoning/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <!-- 数据表格 -->
      <ele-pro-table
        :page-size="defPageSize"
        ref="table"
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        :default-expand-all="false"
        :need-page="false"
        @columns-change="handleColumnChange"
        :selection.sync="selection"
        :cache-key="cacheKeyUrl"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openEdit('add')"
            v-if="$hasPermission('main:basicarea:save') && !isModal"
          >
            添加
          </el-button>
          <el-button class="ele-btn-icon" size="small" @click="expandAll">
            展开全部
          </el-button>
          <el-button class="ele-btn-icon" size="small" @click="foldAll">
            折叠全部
          </el-button>
        </template>
        <!-- 标题列 -->
        <template v-slot:areaImg="{ row }">
          <fileMain v-model="row.areaImg" type="view"></fileMain>
        </template>

        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="openEdit('update', row)"
            v-if="$hasPermission('main:basicarea:update')"
          >
            修改
          </el-link>
          <el-popconfirm
            class="ele-action"
            title="确定要删除吗？"
            @confirm="remove(row)"
            v-if="row.id != 99999 && $hasPermission('main:basicarea:delete')"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-s-goods"
            @click="openPriceScheme(row)"
          >
            用能价格方案
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <!-- 编辑弹窗 -->
    <area-edit
      v-if="showEdit"
      :visibleFlag.sync="showEdit"
      ref="areaEditRef"
      :data="editData"
      :parent-id="parentId"
      :organization-list="dataTree"
      @done="reload"
    />
    <!-- 用能价格方案弹窗 -->
    <energyPriceConfig
      v-if="showPriceScheme"
      ref="energyPriceConfigRef"
      @success="handlePriceSchemeSuccess"
    />
  </div>
</template>

<script>
  import tabMixins from '@/mixins/tableColumnsMixin';

  import areaEdit from './components/area-edit.vue';
  import energyPriceConfig from './components/energyPriceConfig.vue';

  import {
    basicAreaDeleteAPI,
    basicAreaPageAPI,
    energyPricingConfiguration
  } from '@/api/regionalManage';

  import dictMixins from '@/mixins/dictMixins';

  export default {
    props: {
      isModal: {
        type: Boolean,
        default: false
      }
    },
    mixins: [tabMixins, dictMixins],
    name: 'SystemOrganization',
    components: { areaEdit, energyPriceConfig },
    data() {
      return {
        // 加载状态
        loading: false,
        // 列表数据
        data: [],
        dataTree: [],
        // 选中数据
        current: null,
        // 是否显示表单弹窗
        showEdit: false,
        // 编辑回显数据
        editData: null,
        // 上级id
        selection: [],
        parentId: null,
        dictList: {},
        cacheKeyUrl: 'fb2f4315-enterpriseModel-organization',
        columnsVersion: 1,
        // 价格方案弹窗
        showPriceScheme: false,
        priceSchemeRow: null,
        disabledList: []
      };
    },
    computed: {
      // 表格列配置
      columns() {
        const version = this.columnsVersion;
        return [
          {
            columnKey: 'index',
            type: 'index',
            width: 45,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            columnKey: 'selection',
            type: 'selection',
            align: 'center',
            isNone: !this.isModal,
            // selectable: (row, index) => {
            //   return !this.disabledList.includes(row.id);
            // },
            width: 55
          },
          {
            prop: 'name',
            label: '区域名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110,
            slot: 'name'
          },
          {
            prop: 'areaCode',
            label: '区域编码',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'areaImg',
            label: '地图/示意图',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110,
            slot: 'areaImg'
          },
          {
            prop: 'areaLevel',
            label: '区域等级',
            showOverflowTooltip: true,
            align: 'center',
            formatter: (row, column) => {
              return this.getDictValue('区域等级', row.areaLevel);
            },
            minWidth: 110
          },
          {
            prop: 'areaType',
            label: '区域类型',
            showOverflowTooltip: true,
            align: 'center',
            formatter: (row, column) => {
              return this.getDictValue('区域类型', row.areaType);
            },
            minWidth: 110
          },
          {
            prop: 'areaSort',
            label: '排序',
            showOverflowTooltip: true,
            align: 'center',
            width: 60
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 250,
            align: 'center',
            resizable: false,
            isNone: this.isModal,
            slot: 'action',
            showOverflowTooltip: true
          }
        ].filter((item) => !item.isNone);
      }
    },
    created() {
      this.requestDict('区域类型');
      this.requestDict('区域等级');
    },
    methods: {
      /* 查询 */
      async datasource() {
        const data = await basicAreaPageAPI({
          pageNum: 1,
          size: 9999
        });
        this.data = this.$util.toTreeData({
          data: data,
          idField: 'id',
          parentIdField: 'parentId'
        });
        this.dataTree = [
          {
            name: '顶级区域',
            id: '0',
            children: this.data
          }
        ];
        return this.data;
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload();
      },
      /* 展开全部 */
      expandAll() {
        this.$refs.table.toggleRowExpansionAll(true);
      },
      /* 折叠全部 */
      foldAll() {
        this.$refs.table.toggleRowExpansionAll(false);
      },
      /* 显示编辑 */
      openEdit(type, row) {
        this.showEdit = true;
        this.$nextTick(() => {
          this.$refs.areaEditRef.init(type, row);
        });
      },
      getTabelValue() {
        return this.selection;
      },
      setValue(value = []) {
        this.selection = [];
        this.$refs.table.clearSelection()
        // this.disabledList = value;
      },
      /* 删除 */
      remove(row) {
        this.$confirm('确定要删除选中的区域吗?', '提示', {
          type: 'warning'
        })
          .then(() => {
            const loading = this.$loading({ lock: true });
            basicAreaDeleteAPI([row.id])
              .then((msg) => {
                loading.close();
                this.$message.success(msg);
                this.reload();
              })
              .catch((e) => {
                loading.close();
                // this.$message.error(e.message);
              });
          })
          .catch(() => {});
      },
      /* 打开用能价格方案 */
      openPriceScheme(row) {
        this.priceSchemeRow = row;
        this.showPriceScheme = true;
        this.$nextTick(() => {
          this.$refs.energyPriceConfigRef.open(row);
        });
      },
      /* 价格方案配置成功 */
      handlePriceSchemeSuccess(data) {
        energyPricingConfiguration(data).then((res) => {
          this.$message.success('配置成功');
          this.reload();
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .sys-organization-list {
    height: calc(100vh - 264px);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
  }

  .sys-organization-list :deep(.el-tree-node__content) {
    height: 30px;

    & > .el-tree-node__expand-icon {
      margin-left: 10px;
    }
  }
</style>