admin-sjzx/src/views/pqs/supervise/electricalEnergy/components1/complaints.vue

<template>
  <!-- 用户投诉 -->
  <!-- 2 有新增 发起 预警单 -->

  <TableHeader area datePicker nextFlag theCurrentTime ref="TableHeaderRef">
    <template v-slot:select>
      <el-form-item label="是否解决">
        <el-select v-model="tableStore.table.params.dealState" clearable placeholder="请选择是否解决">
          <el-option v-for="item in dealStateList" :key="item.value" :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </template>
    <template v-slot:operation>
      <el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
    </template>
  </TableHeader>
  <Table ref="tableRef" />
  <!-- 新增 -->
  <complaintsForm ref="formRef" @onSubmit="tableStore.index()" />
  <!-- 详情 -->
  <detail ref="detailRef" />
</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 { ElMessage, ElMessageBox } from 'element-plus'
import { useDictData } from '@/stores/dictData'
import complaintsForm from './form/complaintsForm.vue'
import { useRouter } from 'vue-router'
import { sureInitiateWarningLeaflet } from '@/api/process-boot/electricitymanagement'
import detail from './complaintsDetail.vue';
// Steady_Statis
const dictData = useDictData()
const exceeded = dictData.getBasicData('Steady_Statis')
const tableRef = ref()
const planAddRef = ref()
const formRef = ref()
const TableHeaderRef = ref()
const detailRef = ref()
const router = useRouter() // 路由对象
const dealStateList = ref([
  {
    label: '未解决',
    value: '0'
  },

])
const tableStore = new TableStore({
  url: '/supervision-boot/SupervisionUserComplaint/list',
  publicHeight: 65,
  method: 'POST',
  column: [
    {
      title: '序号',

      align: 'center',
      width: 80,
      formatter: (row: any) => {
        return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
      }
    },
    { field: 'userName', title: '用户名称' },
    { field: 'userNumber', title: '用户编号' },
    { field: 'dutyOrgName', title: '负责单位', minWidth: '80' },
    // { field: 'userCategory', title: '用户类别' },

    { field: 'complaintText', title: '投诉内容' },
    { field: 'steadyIndicator', title: '稳态指标' },
    { field: 'transientIndicators', title: '暂态指标' },
    {
      field: 'monitorName',
      title: '监测点名称',
      formatter: (row: any) => {
        return row.cellValue ? row.cellValue : '/'
      }
    },
    {
      field: 'detectionFlag',
      title: '是否实现监测',

      render: 'tag',
      custom: {
        0: 'warning',
        1: 'primary',

      },
      replaceValue: {
        0: '否',
        1: '是',

      }
    },

    {
      field: 'createBy',
      title: '填报人',
      minWidth: 80,
      formatter: (row: any) => {
        return dictData.state.userList.filter(item => item.id == row.cellValue)[0]?.name
      }
    },
    {
      field: 'dealState',
      title: '是否解决',

      render: 'tag',
      custom: {
        0: 'warning',
        1: 'primary',
        null: 'info'
      },
      replaceValue: {
        0: '未解决',
        1: '已解决',
        null: '/'
      }
    },
    {
      title: '操作',
      minWidth: 120,
      align: 'center',
      render: 'buttons',
      buttons: [
        {
          name: 'edit',
          title: '发起告警单',
          type: 'warning',
          icon: 'el-icon-Open',
          render: 'basicButton',
          disabled: row => {
            return row.dealState != 0
          },
          // popconfirm: {
          //     confirmButtonText: '确认',
          //     cancelButtonText: '取消',
          //     confirmButtonType: 'primary',
          //     title: '请确认发起告警单!'
          // },
          click: async row => {
            const { value } = await ElMessageBox.prompt('', '整改意见', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',

              inputType: 'textarea',
              inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
              inputErrorMessage: '请输入整改意见'
            })
            sureInitiateWarningLeaflet({ id: row.id, reformAdvice: value }).then(res => {
              ElMessage.success('发起告警单成功！')
              tableStore.index()
            })

          }
        },
        {
          name: 'edit',
          title: '详情',
          type: 'primary',
          icon: 'el-icon-Open',
          render: 'basicButton',
          disabled: row => {
            return row.dealState == 0
          },

          click: row => {
            detailRef.value.open({
              row: row,
              title: '详情',

            })

          }
        },
        {
          name: 'edit',
          title: '查看告警单',
          type: 'primary',
          icon: 'el-icon-Open',
          render: 'basicButton',
          disabled: row => {
            return row.initiateWarningFlag == 0
          },
          click: row => {
            router.push({
              name: 'supervision/supervision/manage',
              query: {
                type: 1,
                t: Date.now()
              }
            })
          }
        }
      ]
    }
  ],
  beforeSearchFun: () => {
    tableStore.table.params.currentPage = tableStore.table.params.pageNum
  },
  loadCallback: () => {
    // tableStore.table.data = [
    //     {
    //         userName: '东润开阳堡光伏电站用户',
    //         userId: '8115771123274',
    //         complaintContent: '终端频繁重启',
    //         complaintTime: '2024-05-16'
    //     }
    // ]
  }
})

provide('tableStore', tableStore)
tableStore.table.params.dealState = ''
onMounted(() => {
  tableStore.index()
})
// 新增
const add = () => {
  formRef.value.open({ text: '新增投诉' })
}
</script>

<style scoped lang="scss"></style>