kd-aiot-frontend/src/views/indicator/definition.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <seek-page :seekList="seekList" @search="search"></seek-page>
      <ele-pro-table
        ref="table"
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        :cache-key="cacheKeyUrl"
        autoAmendPage
      >
        <!-- <template v-slot:toolbar>
          <el-button type="primary" size="mini">新建</el-button>
        </template> -->
        <template v-slot:action="{ row }">
          <el-button type="text" size="mini" @click="openDetails(row)"
            >查看条件</el-button
          >
        </template>
      </ele-pro-table>
    </el-card>
    <definitionDetials ref="detailsRef"></definitionDetials>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
  import { getIndicatorDefinitionPage } from '@/api/indicator';
  import { getAllEnable } from '@/api/indicator/index.js';
  import definitionDetials from './components/definitionDetials.vue';
  import list from '@/i18n/lang/zh_CN/list';

  export default {
    mixins: [dictMixins, tableColumnsMixin],
    components: { definitionDetials },
    data() {
      return {
        columns: [
          {
            width: 50,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            label: '序号'
          },
          {
            prop: 'businessName',
            label: '业务类型',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true,
            formatter: (row) => {
              return row.businessName + '-' + row.indicatorName;
            }
          },
          {
            prop: 'enable',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150,
            formatter: (row) => {
              return row.enable == 1 ? '启用' : '禁用';
            }
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 220,
            align: 'center',
            resizable: false,
            fixed: 'right',
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        cacheKeyUrl: 'main-259271505-definition-table',
        allEnable: []
      };
    },
    computed: {
      seekList() {
        return [
          {
            label: '业务类型',
            value: 'businessType',
            type: 'select',
            placeholder: '请输入',
            planList: this.allEnable.map((item) => ({
              label: item.businessName,
              value: item.businessType
            }))
          },
          {
            label: '考核指标',
            value: 'indicatorName',
            type: 'input',
            placeholder: '请输入'
          }
        ];
      }
    },
    created() {
      this.getAllEnable();
    },
    methods: {
      // 刷新表格
      reload(where = {}) {
        this.$refs.table.reload({
          where
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        // 参数
        const body = {
          ...where,
          ...order,
          pageNum: page,
          size: limit
        };
        return getIndicatorDefinitionPage(body);
      },
      search(where) {
        this.reload(where);
      },
      // 查看详情
      openDetails(row) {
        console.log('row', row);
        const businessTypeItem = this.allEnable.find(
          (item) => item.businessType == row.businessType
        );
        const indicatorDefinitions =
          businessTypeItem?.indicatorDefinitions.find(
            (item) => item.indicator == row.indicator
          );
        this.$refs.detailsRef?.open(
          indicatorDefinitions?.indicatorConditionDefinitions || []
        );
      },
      // 获取所有启用的业务类型
      async getAllEnable() {
        const data = await getAllEnable();
        this.allEnable = data;
        console.log('this.allEnable', this.allEnable);
      }
    }
  };
</script>

<style></style>