web_dist/src/views/target-management/target-dict/TargetReportConfig.vue

<template>
    <el-row :gutter="5">
        <el-col :span="6">
            <ReportTree v-if="isShowTree" :reportTreeData="reportTreeData" @treeNodeClick="treeNodeClick" />
        </el-col>
        <el-col :span="18">
            <PageLayer>
                <template #header class="hd-cl">
                    <el-button type="primary" icon="Plus" @click="addForm(ruleFormRef)"
                        style="margin-left: 10px">新增</el-button>
                    <el-button type="primary" icon="Edit" @click="editForm(ruleFormRef)"
                        style="margin-left: 10px">编辑</el-button>
                    <el-button type="primary" icon="Check" @click="submitForm(ruleFormRef)"
                        style="margin-left: 10px">保存</el-button>
                    <el-button type="primary" icon="Refresh" @click="resetForm(ruleFormRef)"
                        style="margin-left: 10px">重置</el-button>
                    <el-button type="primary" style="margin-left: 10px" @click="reportLevel()"> 报表分组类型配置 </el-button>
                    <el-button type="primary" style="margin-left: 10px" @click="reportDetails()"> 报表页面详情配置 </el-button>
                </template>
                <template #main>
                    <el-form ref="ruleFormRef" :model="reportForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                        :size="formSize" status-icon :disabled="isDisabledForm">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="报表名称" prop="reportName">
                                    <el-input v-model="reportForm.reportName" minlength="1" maxlength="256"
                                        show-word-limit />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="报表编码" prop="reportId">
                                    <el-input v-model="reportForm.reportId" minlength="1" maxlength="12" show-word-limit />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="报表类型" prop="reportType">
                                    <!-- <el-input v-model="reportForm.reportType" minlength="1" maxlength="12"
                                        show-word-limit /> -->
                                    <el-select v-model="reportForm.reportType" placeholder="请选择报表类型">
                                        <el-option v-for="item in reportTypeList" :key="item.reportType"
                                            :label="item.reportLabel" :value="item.reportType">
                                            <span style="float: left">{{ item.reportType }}</span>
                                            <span
                                                style="float: right; color: var(--el-text-color-secondary); font-size: 13px; ">
                                                {{ item.reportLabel }}
                                            </span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="聚合sql" prop="gatherSql">
                                    <el-input v-model="reportForm.gatherSql" minlength="1" maxlength="256"
                                        show-word-limit />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="单位" prop="unit">
                                    <el-input v-model="reportForm.unit" minlength="0" maxlength="8" show-word-limit />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="报表分组类型" prop="level">
                                    <el-input v-model="reportForm.level" minlength="1" maxlength="12" show-word-limit />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="基础sql" prop="baseSql">
                            <el-input v-model="reportForm.baseSql" type="textarea" :rows="8" />
                        </el-form-item>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="菜单id" prop="menuId">
                                    <el-input v-model.number="reportForm.menuId" minlength="0" maxlength="12"
                                        show-word-limit />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="面板排序" prop="sort">
                                    <el-input v-model.number="reportForm.sort" minlength="0" maxlength="12"
                                        show-word-limit />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="指标排序" prop="reportSort">
                                    <el-input v-model="reportForm.reportSort" minlength="0" maxlength="256"
                                        show-word-limit />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="是否财务报表" prop="isCw">
                                    <el-switch v-model="reportForm.isCw" active-value="Y" inactive-value="N"
                                        active-color="#13ce66" inactive-color="#ff4949" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="是否医技报表" prop="isYj">
                                    <el-switch v-model="reportForm.isYj" active-value="Y" inactive-value="N"
                                        active-color="#13ce66" inactive-color="#ff4949" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="是否有效" prop="flag">
                                    <el-switch v-model="reportForm.flag" active-value="Y" inactive-value="N"
                                        active-color="#13ce66" inactive-color="#ff4949" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <el-divider />
                    <el-form ref="ruleFormRef" label-width="120px" :model="sqlForm" class="demo-ruleForm" :size="formSize">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="开始时间">
                                    <el-form-item prop="startTime">
                                        <el-date-picker v-model="sqlForm.startTime" type="date" label="选择时间"
                                            placeholder="选择时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                                    </el-form-item>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="结束时间">
                                    <el-form-item prop="endTime">
                                        <el-date-picker v-model="sqlForm.endTime" type="date" label="选择时间"
                                            placeholder="选择时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                                    </el-form-item>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="计算结果测试" prop="childResult">
                                    <el-input v-model="sqlForm.calcResult" type="textarea" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item>
                                    <el-button type="primary" @click="sqlExecute(ruleFormRef)"> 指标运行结果 </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <el-dialog v-model="showReportLevel" :close-on-click-modal="false" :close-on-press-escape="false"
                        :title="reportLevelTitle" width="80%" height="70%">
                        <ReportLevel :reportLevelDetail="reportLevelDetail" />
                    </el-dialog>
                </template>
            </PageLayer>
        </el-col>
    </el-row>
</template>
<script setup name="TargetDictInfo" lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import ReportTree from '../target-comm/ReportTree.vue'
import PageLayer from '../../../layout/PageLayer.vue'
import { ElMessage } from 'element-plus'
import { formatDate } from '../../../utils/date'
import type { FormInstance, FormRules } from 'element-plus'
import { selectReportDictTree, selectReportDict, selectReportType, reportSqlExecute, selectReportLevel, saveReportBaseInfo } from '../../../api/target-management/report-dict'
import ReportLevel from '../target-comm/ReportLevel.vue'
import { queryDept } from '../../../api/public-api'

const reportTreeData = ref({
    data: [{}],
    height: 900,
})

const isShowTree = ref(false)
// 是否开启Form表单编辑
const isDisabledForm = ref(false)
const deptWardList = ref([])
const nowDay = new Date()
const ds = formatDate(nowDay)
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const reportTypeList = ref([
    {
        reportType: '',
        reportLabel: ''
    }
])

const deptMethod = (val: string) => {
    queryDept(val).then((res: any) => {
        deptWardList.value = res
    })
}

const queryParam = reactive({
    reportId: '', // 报表id
    reportName: '', // 报表名称
    reportType: '', // 报表类型
    startTime: '', // 开始时间
    endTime: '', // 结束时间
})

const sqlForm = $ref({
    gatherSql: '', // 聚合sql
    baseSql: '', // 基础sql
    startTime: ds, // 开始时间
    endTime: ds, // 结束时间
    calcResult: '', // 计算结果
})

let reportForm = $ref({
    reportId: '', // 报表id
    reportName: '', // 报表名称
    reportType: '', // 报表类型
    unit: '', // 单位
    level: '', // 报表分组类型
    gatherSql: '', // 聚合sql
    baseSql: '', // 基础sql
    displayType: '', // 展示类型
    menuId: '', // 菜单id
    sort: '', // 面板排序
    reportSort: '', // 报表统计排序
    isCw: 'N', // 是否财务报表大屏显示指标（Y: 是）
    isYj: 'N', // 是否医技报表大屏显示指标（Y: 是）
    flag: 'Y', // 是否有效
})

onMounted(() => {
    nextTick(() => {
        queryParam.startTime = ds + ' 00:00:00'
        queryParam.endTime = ds + ' 23:59:59'
        sqlForm.startTime = ds + ' 00:00:00'
        sqlForm.endTime = ds + ' 23:59:59'
        queryReportDictTree()
        deptMethod('')
        reportTypeQt()
    })
})

const rules = $ref<FormRules>({
    reportId: [
        { required: true, message: '请填写报表id', trigger: 'blur' },
        { min: 1, max: 12, message: '报表id长度范围1-12个字符', trigger: 'blur' },
    ],
    reportName: [
        { required: true, message: '请填写报表名称', trigger: 'blur' },
        { min: 1, max: 256, message: '报表名称长度范围1-256个字符', trigger: 'blur' },
    ],
    reportType: [
        { required: true, message: '请填写报表类型', trigger: 'blur' },
    ],
    gatherSql: [
        { required: true, message: '请填写聚合函数sql', trigger: 'blur' },
    ],
    baseSql: [
        { required: true, message: '请填写基础sql', trigger: 'blur' },
    ],
})

// 查询指标字典树
const queryReportDictTree = () => {
    isShowTree.value == true ? false : true
    queryParam.reportId = ''
    selectReportDictTree(queryParam)
        .then((res: any) => {
            reportTreeData.value.data = res
            isShowTree.value = true
        });
}

// 查询报表类型字典
const reportTypeQt = () => {
    selectReportType()
        .then((res: any) => {
            reportTypeList.value = res
        });
}

// ------  接收树页面传来的数据 -------
const treeNodeClick = async (data: any, node: any, obj: any) => {
    if (node.data) {
        queryParam.reportId = node.data.id
        let pid = data.pid
        if (pid === 'zbJc' || queryParam.reportId === 'zbJc') {
            ElMessage({
                type: "info",
                message: "请选择一个正确的指标报表！",
                duration: 2500,
                showClose: true,
            });
            return
        } else {
            if (!isDisabledForm.value) {
                isDisabledForm.value = true
            }
            ruleFormRef.value?.resetFields()
            sqlForm.calcResult = ''

            // 查询指标字典
            let selectReportDictRes = await selectReportDict(queryParam)
            reportForm = selectReportDictRes[0]
        }
    }
}

// ---------- 新增报表 ------------
const addForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return

    if (isDisabledForm.value) {
        isDisabledForm.value = false
    }

    formEl.resetFields()
    reportForm = {}
    ruleFormRef.value?.resetFields()
    sqlForm.calcResult = ''

}

// ---------- 编辑报表 ------------
const editForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return

    if (isDisabledForm.value) {
        isDisabledForm.value = false
    }

}

// ---------- 保存报表 ------------
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return

    if (reportForm.reportId == '') {
        ElMessage({
            type: "info",
            message: '指标报表信息不全，请确认!',
            duration: 2500,
            showClose: true,
        });
        return
    }

    await formEl.validate((valid, fields) => {
        if (valid) {
            if (reportForm.gatherSql == '' || reportForm.baseSql == '' || reportForm.reportName == '') {
                ElMessage({
                    type: "info",
                    message: '指标报表信息不全，请确认!',
                    duration: 2500,
                    showClose: true,
                });
                return
            }

            saveReportBaseInfo(reportForm).then((res: any) => {
                ElMessage({
                    type: "success",
                    message: res.cg,
                    duration: 2500,
                    showClose: true,
                });

                if (!isDisabledForm.value) {
                    isDisabledForm.value = true
                }

                queryReportDictTree()
            });
        } else {

            queryReportDictTree()
            return
        }
    })

}

// ---------- 重置报表 ------------
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return

    if (isDisabledForm.value) {
        isDisabledForm.value = false
    }

    formEl.resetFields()
    reportForm = {}
    ruleFormRef.value?.resetFields()
    sqlForm.calcResult = ''
}

// --------------- sql运行 ----------------
const sqlExecute = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    // 验证是否填写完整
    if (reportForm.reportId === '') {
        ElMessage({
            type: "info",
            message: "报表信息不全，请确认！",
            duration: 2500,
            showClose: true,
        });
        return
    }

    if (reportForm.baseSql === '') {
        ElMessage({
            type: "info",
            message: "未编写基础sql，请检查!",
            duration: 2500,
            showClose: true,
        });
        return
    }

    if (sqlForm.startTime === '' || sqlForm.endTime === '') {
        ElMessage({
            type: "info",
            message: "时间条件未选择，请确认！",
            duration: 2500,
            showClose: true,
        });
        return
    }

    // sql测试
    sqlForm.gatherSql = reportForm.gatherSql
    sqlForm.baseSql = reportForm.baseSql
    reportSqlExecute(sqlForm)
        .then((res: any) => {
            let r = JSON.parse(JSON.stringify(res))
            sqlForm.calcResult = r.r1

        });

}

// --------------- 报表分组类型配置 -------------------
const showReportLevel = ref(false)
const reportLevelTitle = ref('报表分组类型配置')
const reportLevelDetail = ref({})
const reportLevel = () => {
    const param = {
        reportId: reportForm.reportId,
        level: reportForm.level,
    }
    selectReportLevel(param).then((res: any) => {
        showReportLevel.value = true
        reportLevelDetail.value = res
    })
}

const reportDetails = () => {
}
</script>
<style lang="scss" scoped deep>
.hd-cl {
    margin-bottom: 1px !important;
}

:deep(.el-textarea.is-disabled .el-textarea__inner) {
    color: #1146f3;
}
</style>