digital-medicine-front/src/views/h5-custom/list/index.vue

<template>
    <div class="p-2">
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div class="search" v-show="showSearch">
                <el-form :model="queryParams" ref="queryFormRef" label-width="100px">
                    <el-row :gutter="15">
                        <el-col :xl="6" :lg="8" :sm="12">
                            <el-form-item label="模版类别" prop="tplType">
                                <el-select v-model="queryParams.tplType" style="width: 100%;" placeholder="请选择审核状态" clearable>
                                    <el-option v-for="dict in class_type" :key="dict.value" :label="dict.label" :value="dict.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8" :sm="12">
                            <el-form-item label="企业名称" prop="cpyName">
                                <el-input v-model="queryParams.cpyName" placeholder="请输入企业名称" clearable @keyup.enter="handleQuery" />
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8" :sm="12">
                            <el-form-item label="信用代码" prop="creditCode">
                                <el-input v-model="queryParams.creditCode" placeholder="请输入信用代码" clearable @keyup.enter="handleQuery" />
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8" :sm="12">
                            <el-form-item label="审核状态" prop="status">
                                <el-select v-model="queryParams.status" style="width: 100%;" placeholder="请选择审核状态" clearable>
                                    <el-option v-for="dict in cpy_res_status" :key="dict.value" :label="dict.label" :value="dict.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8" :sm="12">
                            <el-form-item>
                                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </transition>
        <el-card shadow="never">
            <el-table v-loading="loading" :data="list" border>
                <el-table-column type="index" width="55" title="序号" align="center" />
                <el-table-column label="模版类别" align="center">
                    <template #default="{ row }">
                        {{ selectDictLabel(class_type, row.tplType) || '-' }}
                    </template>
                </el-table-column>
                <el-table-column label="企业名称" min-width="150" align="center" prop="cpyName" />
                <el-table-column label="统一社会信用代码" min-width="100" align="center" prop="creditCode" />
                <el-table-column label="模版名称" min-width="150" align="center" prop="tplName" />
                <el-table-column label="提交人" align="center" prop="lastModUserName" />
                <el-table-column label="提交时间" align="center" prop="lastModTime" />
                <el-table-column label="审核状态" align="center">
                    <template #default="{ row }">
                        {{ selectDictLabel(cpy_res_status, row.status) || '-' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300" fixed="right" class-name="small-padding fixed-width">
                    <template #default="{ row }">
                        <el-button @click="h5Preview(row)" text type="primary">预览</el-button>
                        <template v-if="row.status === '0'">
                            <el-button @click="handleApproval(row, '1')" text type="success">审核通过</el-button>
                            <el-button @click="handleApproval(row, '2')" text type="danger">审核不通过</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
        </el-card>
    </div>
    <H5ModelLook v-if="showH5Tem" v-model:show="showH5Tem" title="模版预览" :src="temSrc"></H5ModelLook>
</template>

<script setup name="H5-custom-list" lang="ts">
import { h5TplApprove, h5TplList } from '@/api/h5-custom';
import { colNoData } from '@/utils/models';
import { H5ModelLook } from '@/views/components';

import { CircleCheck, CircleClose } from '@element-plus/icons-vue';
import { getCurrentInstance, reactive, ref, toRefs } from 'vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { class_type, cpy_res_status } = toRefs<any>(proxy?.useDict('class_type', 'cpy_res_status'));
const list = ref<any[]>([]);
const showH5Tem = ref(false);
const temSrc = ref('');
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();

const data = reactive<any>({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        cpyName: undefined,
        tplType: undefined,
        tel: undefined,
        creditCode: undefined,
        status: '0'
    },
});
const { queryParams, form } = toRefs(data);
// 模版预览
const h5Preview = (row: any) => {
    const { appid } = row
    const mapId: any = {
        '1838028510242902017': 'a/',
        '1785120816244535298': ''
    }
    temSrc.value = import.meta.env.VITE_H5_URL + (mapId[appid] || '') + 'pages/index/tem-preview?id=' + row.id + '&myl=1&state=' + new Date().getTime();
    showH5Tem.value = true;
};
// 审批办理
const handleApproval = async (row: any, res: string) => {
    const { cpyName } = row;
    if (res === '1') {
        ElMessageBox.confirm('模版审核通过?', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'success',
            icon: markRaw(CircleCheck)
        })
            .then(() => {
                const params = {
                    targetId: row.id,
                    res
                };
                approvalAjax(params);
            })
            .catch(() => {
                proxy?.$modal.msgWarning('取消审核');
            });
    } else {
        ElMessageBox.prompt('模版审核不通过', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            inputPlaceholder: '不通过理由',
            inputErrorMessage: '请填写不通过理由',
            type: 'error',
            icon: markRaw(CircleClose),
            inputValidator: (value) => {
                return value ? true : false;
            }
        })
            .then(({ value }) => {
                const params = {
                    targetId: row.id,
                    res,
                    msg: value
                };
                approvalAjax(params);
            })
            .catch(() => {
                proxy?.$modal.msgWarning('取消审核');
            });
    }
};
const approvalAjax = async (params: any) => {
    proxy?.$modal.loading('审核中...');
    const res = await h5TplApprove(params).catch(() => { });
    proxy?.$modal.closeLoading();
    if (!res) return;
    proxy?.$modal.msgSuccess('操作完成');
    getList();
};
/** 查询企业备案信息列表 */
const getList = async () => {
    loading.value = true;
    const res = await h5TplList(queryParams.value);
    list.value = res.rows;
    total.value = res.total;
    loading.value = false;
};

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};
onMounted(() => {
    getList();
});
</script>