admin-sjzx/src/views/pqs/supervise/terminal/components/sensitiveUserTable.vue

<template>
  <div>
    <TableHeader ref='TableHeaderRef'>
      <template #select>
        <el-form-item label='用户名称'>
          <el-input v-model='tableStore.table.params.projectName' clearable></el-input>
        </el-form-item>
        <el-form-item label='所属地市'>
          <el-select v-model='tableStore.table.params.city' clearable placeholder='请选择所属地市'>
            <el-option
                v-for='item in areaOptionList'
                :key='item.id'
                :label='item.name'
                :value='item.name'
            ></el-option>
          </el-select>
        </el-form-item>
      </template>
      <template #operation>
        <el-button icon='el-icon-Download' type='primary' @click='exportExcelTemplate'>模板下载</el-button>
        <el-button icon='el-icon-Download' type='primary' @click='importUserData'>批量导入</el-button>
      </template>
    </TableHeader>
    <Table ref='tableRef' />
    <el-dialog title='详情' width='80%' v-model='dialogShow'>
      <DetailInfo :id='userId'></DetailInfo>
    </el-dialog>
    <sensitive-user-popup ref='sensitiveUserPopup' />
  </div>

</template>
<script setup lang='ts'>
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import DetailInfo from '../../interfere/components/undocumented/detail.vue'
import { downloadSensitiveUserTemplate } from '@/api/supervision-boot/userReport/form'
import SensitiveUserPopup from './sensitiveUserPopup.vue'

const dictData = useDictData()
const sensitiveUserPopup = ref()
const TableHeaderRef = ref()
const areaOptionList = dictData.getBasicData('jibei_area')
const loadLevelOptionList = dictData.getBasicData('load_level')
const powerSupplyInfoOptionList = dictData.getBasicData('supply_condition')
const tableStore = new TableStore({
  url: '/supervision-boot/userReport/getSensitiveUserPage',
  publicHeight: 65,
  method: 'POST',
  column: [
    {
      title: '序号',
      width: 60,
      formatter: (row: any) => {
        return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
      }
    },
    { field: 'projectName', title: '用户名称', minWidth: 170 },
    { field: 'city', title: '所属地市', minWidth: 80 },
    // { field: 'responsibleDepartment', title: '归口管理部门', minWidth: 130 },
    {
      field: 'userStatus',
      title: '用户状态',
      minWidth: 100,
      render: 'tag',
      custom: {
        0: 'primary',
        1: 'primary',
        2: 'success',
        3: 'warning'
      },
      replaceValue: {
        0: '可研',
        1: '建设',
        2: '运行',
        3: '退运'
      }
    },
    { field: 'substation', title: '变电站', minWidth: 100 },
    {
      field: 'userReportSensitivePO.loadLevel', title: '负荷级别', minWidth: 170,
      formatter: (row: any) => {
        return loadLevelOptionList.filter(item => item.id === row.cellValue)[0]?.name
      }
    },
    {
      field: 'userReportSensitivePO.powerSupplyInfo', title: '供电电源情况', minWidth: 170,
      formatter: (row: any) => {
        return powerSupplyInfoOptionList.filter(item => item.id === row.cellValue)[0]?.name
      }
    },
    {
      title: '操作',
      minWidth: 150,
      fixed: 'right',
      render: 'buttons',
      buttons: [
        {
          name: 'productSetting',
          title: '详细信息',
          type: 'primary',
          icon: 'el-icon-EditPen',
          render: 'basicButton',
          click: row => {
            lookInfo(row.id)
          }
        }
      ]
    }
  ],

  beforeSearchFun: () => {
    tableStore.table.params.orgNo = tableStore.table.params.deptIndex
  }
})
tableStore.table.params.city = ''
tableStore.table.params.projectName = ''
tableStore.table.params.loadType = ''
tableStore.table.params.userName = ''
tableStore.table.params.relationUserName = ''
tableStore.table.params.aisFileUpload = ''

const userId = ref()
const dialogShow = ref(false)

const lookInfo = (id: string) => {
  userId.value = id
  dialogShow.value = true
}

provide('tableStore', tableStore)
onMounted(() => {
  tableStore.index()
})


/**获取用户性质*/
const getUserTypeName = (userType: any) => {
  if (userType === 0) {
    return '新建电网工程'
  }
  if (userType === 1) {
    return '扩建电网工程'
  }
  if (userType === 2) {
    return '新建非线性负荷用户'
  }
  if (userType === 3) {
    return '扩建非线性负荷用户'
  }
  if (userType === 4) {
    return '新建新能源发电站'
  }
  if (userType === 5) {
    return '扩建新能源发电站'
  }
  if (userType === 6) {
    return '敏感及重要用户'
  }
  return '新建电网工程'
}


//导出模板
const exportExcelTemplate = () => {
  downloadSensitiveUserTemplate().then((res: any) => {
    let blob = new Blob([res], {
      type: 'application/vnd.ms-excel'
    })
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = '敏感及重要用户模板'
    document.body.appendChild(link)
    link.click()
    link.remove()
  })
}

//批量导入用户数据
const importUserData = () => {
  sensitiveUserPopup.value.open('导入敏感及重要用户')
}


</script>