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 area datePicker 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: '序号', type: 'seq', width: 80 },
        {
            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 },
        {
            title: '操作',
            minWidth: 150,
            fixed: 'right',
            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>
<style lang="scss" scoped>
.fixed-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
}
.el-form {
    width: 96%;
    height: 400px;
    margin: 0 auto;
    overflow-y: auto;
    padding-top: 20px;
}
.dialog-footer {
    padding: 10px;
}
/* 调整标签的换行行为 */
.label_over_warp::v-deep .el-form-item__label {
    // white-space: pre-line !important;
    line-height: 16px !important;
}
::v-deep .el-form-item {
    padding: 0 10px;
    height: auto !important;
}
::v-deep .el-form-item__label {
    justify-content: flex-start !important;
}
.form-label-left-align {
    text-align: left;
}
::v-deep .el-input-number .el-input__inner {
    text-align: left;
}
.no_required::v-deep .el-form-item__label {
    padding-left: 10px !important;
}
::v-deep .el-input {
    width: 200px !important;
}
::v-deep .el-select {
    width: 200px !important;
}
::v-deep .required_position {
    position: relative;
    .required_icon {
        position: absolute;
        left: -10px;
        margin-top: 8px;
        color: #f56c6c;
        margin-left: 20px;
        margin-right: 10px;
    }
    .required_icon_white {
        color: #fff;
        position: absolute;
        left: -10px;
        padding-left: 10px;
        margin: 8px 10px 0 10px;
    }
    .required_text {
        // padding-left: 20px;
    }
    .el-form-item__label {
        padding-left: 10px;
    }
}
// ::v-deep .tabs_form{
//     height:300px !important;
// }
</style>