hotline-web/src/views/knowledge/apply/my/component/Knowledge-my-apply-detail.vue

<template>
	<div class="knowledge-my-apply-detail-container">
		<el-dialog title="申请详情" v-model="state.dialogVisible" draggable  width="769px">
			<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="100px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="申请类型" class="mb10">
							{{ state.ruleForm.knowledgeApplyType === 0 ? '新增' : '更新' }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="诉求处理部门" class="mb10">
							{{ state.ruleForm.department }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="申请人" class="mb10">
							{{ state.ruleForm.creationName }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="申请部门" class="mb10">
							{{ state.ruleForm.creationBMName }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="state.ruleForm.expiredTime">
						<el-form-item label="截止时间" class="mb10">
							{{ formatDate(state.ruleForm.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="诉求内容" class="mb10">
							{{ state.ruleForm.content }}
						</el-form-item>
					</el-col>
					<el-divider />
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="state.ruleForm.kbTitle">
						<el-form-item label="关联知识" class="mb10">
							<el-button link type="primary" @click="onPreview">{{ state.ruleForm.kbTitle }}</el-button>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="state.ruleForm.processor">
						<el-form-item label="处理人" class="mb10">
							{{ state.ruleForm.processor }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="state.ruleForm.handleTime">
						<el-form-item label="处理完成时间" class="mb10">
							{{ formatDate(state.ruleForm.handleTime, 'YYYY-mm-dd HH:MM:SS') }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="state.ruleForm.returnTime">
						<el-form-item label="退回时间" class="mb10">
							{{ formatDate(state.ruleForm.returnTime, 'YYYY-mm-dd HH:MM:SS') }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="state.ruleForm.opinion">
						<el-form-item label="备注" class="mb10">
							{{ state.ruleForm.opinion }}
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeDialog" class="default-button">关 闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="knowledgeMyApplyDetail">
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { formatDate } from '/@/utils/formatTime';
import { KnowledgeApplyDetail } from '/@/api/knowledge/apply';

// 定义变量内容
const ruleFormRef = ref<any>(); // 表单ref
const router = useRouter(); // 路由
const state = reactive<any>({
	dialogVisible: false,
	ruleForm: {
    knowledgeApplyType: 1,  // 申请类型
    department: '', // 诉求处理部门
    creationName: '', // 申请人
    creationBMName: '', // 申请部门
    expiredTime: '', // 截止时间
    content: '', // 诉求内容
    kbTitle: '', // 关联知识
    processor: '', // 处理人
    handleTime: '', // 处理完成时间
    returnTime: '', // 退回时间
    opinion: '', // 备注
	},
	orgData: [], // 机构数据
	loading: false, // 加载状态
});
// 打开弹窗
const openDialog = async (row: any) => {
	state.loading = true;
	try {
		const res: any = await KnowledgeApplyDetail(row.id);
		state.ruleForm = res.result ?? {};
		state.dialogVisible = true;
		state.loading = false;
	} catch (error) {
		state.loading = false;
	}
};
// 预览
const onPreview = () => {
	router.push({
		name: 'knowledgePreview',
		params: {
			id: state.ruleForm.kbid,
			tagsViewName: '知识预览',
		},
	});
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>