SafetyAlertSystem-ui/src/views/base/warnAlert/index.vue

<template>
  <!-- 工程管理页面 -->
  <div class="app-container">
    <!-- 表格 -->
    <TableModel
      :formLabel="formLabel"
      :columnsList="columnsList"
      :request-api="queryWarnAlertListApi"
      ref="tableRef"
    >
      <template slot="btn" slot-scope="{ queryParams }">
        <el-button
          @click="
            handleExportData(
              exportList,
              'base/tbDevAttribute/export',
              '异常记录',
              queryParams
            )
          "
          icon="el-icon-upload2"
          size="mini"
          >导出数据</el-button
        >
      </template>
      <template slot="handle" slot-scope="{ data }">
        <el-button
          type="primary"
          size="mini"
          v-if="data.status === '未处置'"
          @click="handleWarnData(data)"
          >处理</el-button
        >
        <span v-else>-</span>
      </template>
      <template slot="warnName" slot-scope="{ data }">
        <span v-if="data.warnName == null || data.warnName === ''">无</span>
        <span v-else>{{ data.warnName }}</span>
      </template>

      <template slot="remarks" slot-scope="{ data }">
<!--        <span v-if="data.remarks == null || data.remarks === ''">-</span>-->
        <span>{{ data.remarks || '-' }}</span>
      </template>
    </TableModel>

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

<script>
import {
  formLabel,
  columnsList,
  dialogConfig,
  queryDeviceTypes,
} from "./config";
import { commonMixin } from "../mixins/common";
import { queryWarnAlertListApi } from "@/api/base/warnAlert";
import FormWarnAlert from "./components/form-warnAlert.vue";
export default {
  name: "WarnAlert",
  methods: {
    queryWarnAlertListApi,
    handleWarnData(v) {
      this.editParams = v;
      this.dialogConfig.outerVisible = true;
      this.dialogConfig.outerTitle = "处理异常记录";
      // this.dialogConfig.dialogWidth = '50%'
      // this.dialogConfig.dialogHeight = '50%'
      // this.dialogConfig.dialogType = 'exam'
    },
  },

  mixins: [commonMixin],
  components: {
    FormWarnAlert,
  },
  created() {
    queryDeviceTypes();
  },
  data() {
    return {
      // 搜索区表单配置项
      formLabel,
      // 表格导出id列表
      dialogConfig,
      exportList: [],
      // 列表区配置项
      columnsList,
      // 弹框区配置项
    };
  },
};
</script>