CA3.0/src/views/newScene/index.vue

<template>
  <div class="newScene">
    <div class="newScene-head flex">
      <div class="manageTitle">预警报警场景</div>
      <el-button type="primary" plain @click="handleAdd" size="small">新增</el-button>
    </div>
    <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="newScene-content">
      <el-table v-el-table-infinite-scroll="load" :data="tableData" border height="100%" style="width: 100%">
        <!-- <el-table-column prop="alarmsceneID" label="场景ID">
        </el-table-column> -->
        <el-table-column prop="alarmsceneName" label="场景描述">
        </el-table-column>
        <el-table-column prop="alarmscenerule" label="场景规则">
        </el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="handleEdit(scope.row)" size="small">编辑规则</el-button>
            <el-button type="primary" plain @click="handleEditCj(scope.row)" size="small">编辑策略</el-button>
            <el-button type="danger" plain @click="handleRemove(scope.row)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--高级查询-->
    <Dialog :flag="dialogFlag" width="852px">
      <AdvanceQuery :tableColMunt="tableCols" :tableMix="tableMix" @getColData="getColData" @dialogHide="dialogHide" />
    </Dialog>
    <!--删除-->
    <Dialog :flag="rmFlag">
      <div class="airportInfoDialog">
        <div class="title del-title">删除</div>
        <div class="content del-content">
          <span class="el-icon-error error r10"></span>您是否确认删除<span class="error l10">{{ remObj.alarmsceneName }}</span>
          ？
        </div>
        <div class="foot right Delfoot">
          <el-button size="medium" class="r24" @click="tableRemove" type="danger">删除</el-button>
          <el-button size="medium" @click="rmFlag = false">取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import Dialog from "@/layout/components/Dialog/index.vue";
import AdvanceQuery from './components/advanceQuery.vue';
import { getAuthData } from "@/utils/validate";
import { Query, newData, modifyData, moveData } from "@/api/webApi";
import pb from '@/layout/mixin/publicFunc'
export default {
  name: 'NewScene',
  mixins: [pb],
  components: { Dialog, AdvanceQuery },
  data () {
    return {
      dialogFlag: false,
      tableCols: [], //表头数据
      tableMix: [],
      tableData: [],
      page: 0,
      pageSize: 20,
      dataContent: {},
      authId: '',
      noMore: false,
      loading: false,
      urlParams: '',
      serviceId: '',
      queryId: '',
      dataType: 'add',
      remObj: {},
      rmFlag: false,
    }
  },
  created () {
    const { query } = this.$route
    const { auth_id } = this.$route.meta
    const { arrs } = getAuthData(auth_id)
    const table = arrs.filter(item => item.auth_type == 4)
    this.urlParams = query
    if (table && table.length) {
      const obj = table[0]
      this.authId = obj.auth_id
      this.queryId = obj.queryTemplateID
    } else {
      if (auth_id) {
        this.queryId = auth_id
        this.authId = auth_id
      }
    }
    this.getRule()
  },
  methods: {
    //获取高级查询条件
    getColData (val) {
      const chName = []
      const arr = [...val]
      const arrAll = _.cloneDeep(this.tableCols)
      arrAll.forEach(item => {
        arr.map(p => {
          if (item.columnName == p.column) {
            const column = item.columnLabel
            const comparator = this.formatFh(p.comparator)
            const value = p.value
            const connector = p.connector == 'and' ? '并且' : '或者'
            const alarmsceneName = column + comparator + value + connector
            chName.push(alarmsceneName)
          }
        })
      })
      if (this.dataType == 'add') {
        this.dataChange(arr, chName, 1)
      } else {
        this.dataChange(arr, chName, 2)
      }
    },
    //新增
    async dataChange (a1, a2, event) {
      const newVal = []
      const newObj = {}
      const obj = {
        alarmsceneName: a2.join(''),
        alarmscenerule: JSON.stringify(a1)
      }
      newObj.Value = obj
      if (event == 2) {
        newObj.filter = {
          alarmsceneID: this.remObj.alarmsceneID
        }
      }
      newVal.push(newObj)
      const result = event == 1 ? await newData({
        serviceId: this.serviceId,
        dataContent: newVal,
        event: `${event}`
      }) : await modifyData({
        serviceId: this.serviceId,
        dataContent: newVal,
        event: `${event}`
      })
      if (result.code == 0) {
        this.$message.success(result.message)
        this.resetTable()
        this.load()
      } else {
        this.$message.error(result.message)
        this.dialogFlag = false
      }
    },
    //新增
    handleAdd () {
      this.dataType = 'add'
      this.dialogFlag = true
    },
    //编辑
    handleEdit (row) {
      this.dataType = 'edit'
      this.dialogFlag = true
      this.remObj = row
      this.tableMix = JSON.parse(row.alarmscenerule)
    },
    handleEditCj (row) {
      this.$router.push({
        path: 'alarmstrategySetting',
        query: {
          alarmsceneID: row.alarmsceneID
        }
      })
    },
    //删除
    handleRemove (row) {
      this.rmFlag = true
      this.remObj = row
    },
    //表格-删除-确认
    async tableRemove () {
      const { code } = await moveData({
        serviceId: this.serviceId,
        dataContent: [
          {
            alarmsceneID: this.remObj.alarmsceneID
          }
        ],
        event: '3'
      })
      if (code == 0) {
        this.$message.success('删除成功')
        this.resetTable()
        this.load()
      } else {
        this.$message.success('删除失败')
      }
      this.rmFlag = false
    },
    formatFh (fh) {
      switch (fh) {
        case '=':
          return '等于'
          break;
        case '>':
          return '大于'
          break;
        case '<':
          return '小于'
          break;
        case '>=':
          return '大于等于'
          break;
        case '<=':
          return '小于等于'
          break;
        default:
          break;
      }
    },
    //高级查询关闭
    dialogHide () {
      this.dialogFlag = false
    },
    load () {
      if (this.noMore || this.loading) {
        return
      }
      this.getQuery(this.queryId)
    },
    resetTable () {
      this.dataContent = {}
      this.page = 0;
      this.noMore = false;
      this.tableData = [];
    },
    async getRule () {
      const { code, returnData } = await this.getQueryList(200252)
      if (code == 0 && returnData && returnData.length) {
        const arrData = []
        const arrObj = [...returnData][0]
        for (const key in arrObj) {
          const ele = arrObj[key]
          const obj = {
            "columnName": key,
            "columnLabel": ele,
            "needShow": 1,
          }
          arrData.push(obj)
        }
        this.tableCols = arrData
      } else {

      }
    },
    //获取表格数据
    async getQuery (id, dataContent = this.dataContent) {
      try {
        this.loading = true;
        const { code, returnData } = await Query({
          serviceId: id,
          page: ++this.page,
          pageSize: this.pageSize,
          dataContent,
          authId: this.authId,
          event: '0'
        });
        if (code == 0) {
          if (returnData.length === 0) {
            this.page--;
            this.noMore = true;
            this.loading = false;
          }
          this.tableData.push(...returnData);
          // this.tableCols = columnset;
          this.serviceId = id;
          setTimeout(() => {
            this.loading = false;
          }, 100);
        } else {
          this.page--;
          this.loading = false;
          this.$message.error("获取表格数据失败");
        }
      } catch (error) {
        this.page--;
        this.loading = false;
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.newScene {
  padding: 24px;
  height: calc(100vh - 100px);
  &-head {
    margin-bottom: 22px;
  }
  &-content {
    height: calc(100% - 40px);
    ::v-deep .el-table {
      thead {
        .cell {
          color: #000;
        }
      }
      .cell {
        text-align: center;
      }
    }
  }
}
</style>