admin-sjzx/src/views/pqs/supervise/plan/components/effectProblem/index.vue

<template>
    <div class="default-main">
        <!-- <el-dialog
        v-model="dialogFormVisible"
        title="技术监督计划实施问题"
        width="90%"
        :append-to-body="true"
        :before-close="close"
        :close-on-click-modal="false"
        draggable
        custom-class="fixed-dialog"
        @closed="close"
    > -->
        <TableHeader :showSearch="false" ref="TableHeaderRef">
            <!-- <template #select>
            <el-form-item label="用户名称">
                <el-input v-model="tableStore.table.params.searchValue" clearable></el-input>
            </el-form-item>
            <el-form-item label="所在地市">
                <el-select v-model="tableStore.table.params.loadType" clearable placeholder="请选择所在地市">
                    <el-option
                        v-for="item in areaOptionList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
        </template> -->
            <template #operation>
                <el-button icon="el-icon-Plus" type="primary" @click="addFormModel">新增</el-button>
                <el-button icon="el-icon-Back" @click="go(-1)">返回</el-button>
                <!-- <el-button icon="el-icon-Download" @click="exportEvent" type="primary">导出</el-button> -->
            </template>
        </TableHeader>
        <Table ref="tableRefs" />
        <!-- </el-dialog> -->
        <addForm ref="addFormRef" :planId="planId" @onSubmit="effectTableStore.index()"></addForm>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, defineExpose, defineProps, defineEmits, watch, onUnmounted } from 'vue'
import { useDictData } from '@/stores/dictData'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import addForm from './addForm.vue'
import { queryByAllCode } from '@/api/system-boot/dictTree'
import { useAdminInfo } from '@/stores/adminInfo'
import { uploadFile } from '@/api/system-boot/file'
import { addPlanFormData, getUserByDeptId } from '@/api/supervision-boot/plan/index'
import { getAreaList } from '@/api/common'
import Area from '@/components/form/area/index.vue'
defineOptions({
    name: 'PlanEffectProblem'
})
const emits = defineEmits([''])
const props = defineProps({
    effectProblemForm: {
        type: Object,
        default: () => ({})
    }
})
const planId: any = ref('')
const dictData = useDictData()
const dialogFormVisible = ref(false)
const tableRefs = ref()
//字典获取问题类型
const problemTypeList = dictData.getBasicData('problem_type')
//字典整改情况
const rectificationStatusList = dictData.getBasicData('rectification_type')
//字典问题等级
const problemLevelList = dictData.getBasicData('problem_level_type')
const effectTableStore = new TableStore({
    url: '/supervision-boot/superProblem/pageProblem',
    // publicHeight: 65,
    method: 'POST',
    column: [
        { title: '序号', width: 80,formatter: (row: any) => {
        return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
      } },
        {
            field: 'problemDesc',
            title: '问题描述',
            minWidth: 170,
            formatter: (row: any) => {
                return row.cellValue ? row.cellValue : '/'
            }
        },
        {
            field: 'problemLevel',
            title: '问题等级',
            minWidth: 170,
            formatter: (row: any) => {
                return problemLevelList.filter(item => item.id === row.cellValue)[0]?.name
            }
        },
        {
            field: 'problemLevelReason',
            title: '定级依据',
            minWidth: 170,
            formatter: (row: any) => {
                return row.cellValue ? row.cellValue : '/'
            }
        },
        {
            field: 'problemType',
            title: '问题类型',
            minWidth: 170,
            formatter: (row: any) => {
                return problemTypeList.filter(item => item.id === row.cellValue)[0]?.name
            }
        },
        { field: 'rectificationMeasure', title: '整改措施', minWidth: 170 },
        { field: 'rectificationProgramme', title: '整改方案', minWidth: 170 },
        {
            field: 'rectificationStatus',
            title: '整改情况',
            minWidth: 170,
            formatter: (row: any) => {
                return rectificationStatusList.filter(item => item.id === row.cellValue)[0]?.name
            }
        },
        {
            field: 'rectificationTime',
            title: '整改时间',
            minWidth: 170,
            formatter: (row: any) => {
                return row.cellValue.replace('T', ' ')
            }
        },
        { field: 'remark', title: '备注', minWidth: 170 },
        {
            field: 'createBy',
            title: '填报人',
            minWidth: 80,
            formatter: (row: any) => {
                return dictData.state.userList.filter(item => item.id == row.cellValue)[0]?.name
            }
        },
        {
             title: '操作',fixed: 'right',
            minWidth: 150,
       
            render: 'buttons',
            buttons: [
                {
                    name: 'productSetting',
                    title: '详情',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
                    click: row => {
                        handleDetail(row)
                    }
                },
                {
                    name: 'productSetting',
                    title: '修改',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
                    disabled: row => {
                        return true
                    },
                    click: row => {
                        handleEdit(row)
                    }
                }
            ]
        }
    ],
    beforeSearchFun: () => {
        effectTableStore.table.params.orgNo = effectTableStore.table.params.deptIndex
    }
})
const { query } = useRoute() // 查询参数
const { go } = useRouter() // 路由
const queryId = query.id as unknown as string // 从 URL 传递过来的 id 编号
planId.value = queryId
watch(
    () => queryId,
    (val, oldVal) => {
        if (val) {
            effectTableStore.table.params.planId = val
            effectTableStore.index()
        }
    },
    {
        deep: true,
        immediate: true
    }
)
provide('tableStore', effectTableStore)
const open = () => {
    dialogFormVisible.value = true
}
const close = () => {
    dialogFormVisible.value = false
    // emits('onSubmit')
}
//新增
const addFormRef = ref()
const addFormModel = () => {
    addFormRef.value.open({}, 'add')
}
//详情
const handleDetail = (row: any) => {
    addFormRef.value.open(row, 'detail')
}
//修改
const handleEdit = (row: any) => {
    console.log(row)
}
onMounted(() => {})
defineExpose({ open })
</script>