bonus-ui/src/views/base/warning/index.vue

<template>
  <!-- 工程管理页面 -->
  <div class="app-container" style="display: flex">
    <div class="sel-ops">
      <div
        :class="['single-opt', { isActive: item.dictCode === currentLefIndex }]"
        v-for="item in lefSelList"
        :key="item.dictCode"
        @click="selChange(item)"
      >
        {{ item.dictLabel }}
      </div>
    </div>
    <!-- 表格 -->
    <TableModel
      :formLabel="formLabel"
      :columnsList="columnsList"
      :request-api="queryWarningListApi"
      ref="tableRef"
      @transIdList="getIdList"
      :show-right-tools="false"
      style="flex: 1"
    >
      <template slot="btn" slot-scope="{ queryParams }">
        <el-button type="primary" @click="handleAddData()" icon="el-icon-plus" size="mini"
        >新增配置</el-button>
        <el-button type="warning" @click="handleExportData(                    
                    exportList,
                    'base/tbWarnConfig/export',
                    '预警配置',
                    queryParams)" icon="el-icon-plus" size="mini"
        >导出数据</el-button
        >
      </template>
      <template slot="handle" slot-scope="{ data }">
        <el-button
          type="primary"
          size="mini"
          @click="handleEditData(data)"
        >编辑</el-button
        >
        <el-button
          type="danger"
          size="mini"
          @click="handleDeleteData({'id':data.id}, deleteWarningApi)"
        >删除</el-button
        >
      </template>
<!--      <template slot="isMatch" slot-scope="{ data }">
        {{ data.proId == null ? '不匹配' : '匹配' }}
      </template>-->
    </TableModel>

    <!-- 新增以及修改时的弹框 -->
    <DialogModel
      :dialogConfig="dialogConfig"
      @closeDialogOuter="closeDialogOuter"
    >
      <template slot="outerContent">
        <!-- 新增以及修改数据的表单组件 -->
        <FormWarning
          :editParams="editParams"
          @closeDialog="closeDialog"
          :form-count="currentLefIndex"
        />
      </template>
    </DialogModel>
  </div>
</template>

<script>
import { formLabel, columnsList, dialogConfig, queryProvinces } from './config'
import { commonMixin } from '../mixins/common'
import {
  queryWarningListApi,
  queryLefSelApi,
  deleteWarningApi
} from '@/api/base/warning'
import FormWarning from './components/form-warning.vue'
export default {
  name: 'ProjectDepart',
  methods: {
    queryWarningListApi,
    deleteWarningApi,
    getIdList(idList) {
      this.exportList = []
      idList.forEach(item => {
        this.exportList.push(item.id)
      })
    },
    selChange(v) {
      console.log(v)
      this.currentLefIndex = v.dictCode
      switch (v.dictCode) {
        case 116:
          this.columnsList = [
            { t_props: 'configName', t_label: '配置名称', },
            { t_props: 'configVal1Str', t_label: '温度阈值' },
            { t_props: 'configVal2Str', t_label: '湿度阈值' },
            { t_props: 'configVal3Str', t_label: '噪声', },
            { t_props: 'configVal4Str', t_label: 'PM2.5', },
            { t_props: 'configVal5Str', t_label: 'PM10', },
            { t_props: 'configVal6Str', t_label: '风速', },
          ]
          break;
        case 117:
          this.columnsList = [
            { t_props: 'configName', t_label: '配置名称', },
            { t_props: 'configVal1Str', t_label: '倾角阈值' },
          ]
          break;
        case 118:
          this.columnsList = [
            { t_props: 'configName', t_label: '配置名称', },
            { t_props: 'configVal1Str', t_label: '拉力阈值' },
          ]
          break;
        case 119:
          this.columnsList = [
            { t_props: 'configName', t_label: '配置名称', },
            { t_props: 'configVal1Str', t_label: '含氧量阈值' },
            { t_props: 'configVal2Str', t_label: '一氧化碳阈值' },
            { t_props: 'configVal3Str', t_label: '可燃气体阈值' },
            { t_props: 'configVal4Str', t_label: '硫化氢阈值' },
          ]
          break;
          case 133:
          this.columnsList = [
            { t_props: 'configName', t_label: '配置名称', },
            { t_props: 'configVal1Str', t_label: '测量阈值' },
            { t_props: 'configVal2Str', t_label: '变化阈值' },
            { t_props: 'configVal3Str', t_label: '累加阈值' },
            { t_props: 'configVal4Str', t_label: '基础沉降阈值' },
          ]
          break;
          case 134:
          this.columnsList = [
            { t_props: 'configName', t_label: '配置名称', },
            { t_props: 'configVal1Str', t_label: '测量阈值' },
            { t_props: 'configVal2Str', t_label: '变化阈值' },
            { t_props: 'configVal3Str', t_label: '累加阈值' },
            { t_props: 'configVal4Str', t_label: '基础沉降阈值' },
          ]
          break;
      }
      this.$refs.tableRef.queryTableList({
        configuType: v.dictCode
      })
    },
    handExport(){

    }
  },
  mixins: [commonMixin],
  components: {
    FormWarning
  },
  created() {
    queryLefSelApi({
      dictType: 'dev_type'
    }).then(res => {
      this.currentLefIndex = res.data[0].dictCode
      this.$refs.tableRef.queryTableList({
        configuType: this.currentLefIndex
      })
      /* this.sendRigCode = {
        configuType: this.currentLefIndex
      } */
      this.lefSelList = res.data.slice(0, 4).concat(res.data.slice(-2));
    }).catch(err => {})
  },
  data() {
    return {
      // 搜索区表单配置项
      formLabel,
      // 表格导出id列表
      exportList: [],
      // 列表区配置项
      columnsList,
      // 弹框区配置项
      dialogConfig,
      // 新建时弹框标题
      addDialogTitle: '新建配置',
      // 修改时弹框标题
      editDialogTitle: '修改配置',
      lefSelList: [],
      currentLefIndex: undefined,
      sendRigCode: undefined
    }
  },
}
</script>

<style lang="scss" scoped>

  .sel-ops{

    width: 16%;
    height: 100%;
    margin-right: 20px;

    .single-opt{

      box-sizing: border-box;
      padding: 10px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2px solid #C1C1C0;
      margin-bottom: 8px;
      border-radius: 10px;
      font-size: 14px;
      cursor: pointer;

    }

    .isActive{

      border: none;
      background-color: #1890FF;
      color: #fff;

    }

  }

</style>