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

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

    <TableHeader area nextFlag theCurrentTime showTimeAll ref="TableHeaderRef" showExport showCustomColumn>
        <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'
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
// 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',
    filename: '用户投诉',
    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: '操作',fixed: 'right',
            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' + (VITE_FLAG ? '4' : ''),
                            query: {
                                type: 4,
                                t: Date.now()
                            }
                        })
                    }
                }
            ]
        }
    ],
    beforeSearchFun: () => {
        tableStore.table.params.currentPage = tableStore.table.params.pageNum
    },
    exportProcessingData: () => {
        tableStore.table.allData = tableStore.table.allData.filter(item => {
            item.dealState = item.dealState == 0 ? '未解决' : item.dealState == 1 ? '已解决' : '/'
            item.detectionFlag = item.detectionFlag == 0 ? '否' : item.detectionFlag == 1 ? '是' : '/'

            return item
        })
    }
})

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

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