hotline-web/src/views/business/publish/components/Order-publish.vue

<template>
	<el-dialog v-model="state.dialogVisible" draggable :title="dialogTitle" ref="dialogRef" append-to-body destroy-on-close @close="close">
		<div class="collapse-container">
			<el-form label-width="100px" ref="ruleFormRef" :model="state.ruleForm" v-loading="state.loading">
				<el-row :gutter="10" class="w100">
					<template v-if="isZGZFW">
						<el-divider content-position="left">
							<el-text tag="b" size="large"> 中国政府网 </el-text>
						</el-divider>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="是否公开" prop="proPublishState" :rules="[{ required: false, message: '请选择是否公开', trigger: 'change' }]">
								<el-radio-group v-model="state.ruleForm.proPublishState" :disabled="disabled">
									<el-radio :value="true">公开</el-radio>
									<el-radio :value="false">不公开</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="反馈人电话" prop="feedBackPhone" :rules="[{ required: false, message: '请填写反馈人电话', trigger: 'blur' }]">
								<el-input placeholder="请填写反馈人电话" v-model="state.ruleForm.feedBackPhone" clearable :disabled="disabled"></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24" v-if="!state.ruleForm.proPublishState">
							<el-form-item label="不公开原因" prop="noPubReason" :rules="[{ required: true, message: '请填写不公开原因', trigger: 'blur' }]">
								<el-input
									type="textarea"
									placeholder="请填写不公开原因"
									:autosize="{ minRows: 6, maxRows: 10 }"
									v-model="state.ruleForm.noPubReason"
									:disabled="disabled"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24" v-if="state.ruleForm.proPublishState">
							<el-form-item label="答复口径" prop="answerContent" :rules="[{ required: true, message: '请填写答复口径', trigger: 'blur' }]">
								<el-input
									type="textarea"
									placeholder="请填写答复口径"
									:autosize="{ minRows: 6, maxRows: 10 }"
									v-model="state.ruleForm.answerContent"
									:disabled="disabled"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="是否联系" prop="isContact" :rules="[{ required: true, message: '请选择是否联系', trigger: 'change' }]">
								<el-radio-group v-model="state.ruleForm.isContact" :disabled="disabled">
									<el-radio :value="true">是</el-radio>
									<el-radio :value="false">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="是否评价" prop="isVisited" :rules="[{ required: true, message: '请选择是否评价', trigger: 'change' }]">
								<el-radio-group v-model="state.ruleForm.isVisited" :disabled="disabled">
									<el-radio :value="true">是</el-radio>
									<el-radio :value="false">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<el-form-item
								label="网民评价"
								prop="netizen"
								:rules="[{ required: state.ruleForm.isVisited, message: '请选择网民评价', trigger: 'change' }]"
							>
								<el-radio-group v-model="state.ruleForm.netizen" :disabled="disabled">
									<el-radio :value="item.key" v-for="item in netizenEvaluateType" :key="item.key">{{ item.value }}</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
							<el-form-item
								label="评价内容"
								prop="evaluateContent"
								:rules="[{ required: state.ruleForm.netizen === '0' && state.ruleForm.isVisited, message: '请填写评价内容', trigger: 'blur' }]"
							>
								<el-input
									type="textarea"
									placeholder="请填写评价内容"
									:autosize="{ minRows: 6, maxRows: 10 }"
									v-model="state.ruleForm.evaluateContent"
									:disabled="disabled"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
							<el-form-item label="备注" prop="remark" :rules="[{ required: false, message: '请填写备注', trigger: 'blur' }]">
								<el-input
									type="textarea"
									placeholder="请填写备注"
									:autosize="{ minRows: 6, maxRows: 10 }"
									v-model="state.ruleForm.remark"
									:disabled="disabled"
								></el-input>
							</el-form-item>
						</el-col>
					</template>
					<el-divider content-position="left">
						<el-text tag="b" size="large"> 市工单发布内容 </el-text>
					</el-divider>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="工单标题"> {{ state.publishDetail.orderTitle }} </el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="整改后标题" prop="arrangeTitle" :rules="[{ required: false, message: '请填写整改后标题', trigger: 'blur' }]">
							<el-input placeholder="请填写整改后标题" v-model="state.ruleForm.arrangeTitle" clearable :disabled="disabled"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="工单内容" class="formatted-text"> {{ state.publishDetail.content }} </el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="整改后内容" prop="arrangeContent" :rules="[{ required: false, message: '请填写整改后内容', trigger: 'blur' }]">
							<el-input
								placeholder="请填写整改后内容"
								type="textarea"
								:autosize="{ minRows: 6, maxRows: 10 }"
								v-model="state.ruleForm.arrangeContent"
								:disabled="disabled"
								show-word-limit
								:maxlength="5000"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="办理结果" class="formatted-text"> {{ state.publishDetail.actualOpinion }}</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="整改后结果" prop="arrangeOpinion" :rules="[{ required: false, message: '请填写整改后内容', trigger: 'blur' }]">
							<el-input
								type="textarea"
								:placeholder="arrangeOpinionPlaceholder"
								:autosize="{ minRows: 6, maxRows: 10 }"
								v-model="state.ruleForm.arrangeOpinion"
								:disabled="disabled"
								show-word-limit
								:maxlength="arrangeOpinionMaxLength"
							></el-input>
						</el-form-item>
					</el-col>
					<!--		省工单是否可以选择意愿是否公开			-->
					<el-col v-if="isProvincePublic">
						<el-form-item label="诉求人意愿是否公开" label-width="140px">
							{{ state.publishDetail.isPublic ? '是' : '否' }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="是否公开" prop="publishState">
							<el-radio-group v-model="state.ruleForm.publishState" :disabled="publishDisabled" @change="selectPublishState">
								<el-radio :value="false">否</el-radio>
								<el-radio :value="true">是</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<!--		省工单是否可以选择意愿是否公开			-->
					<template v-if="isProvincePublic">
						<el-col v-if="!state.ruleForm.publishState">
							<el-form-item label="不公开理由" prop="noPubReason" :rules="[{ required: true, message: '请填写不公开理由', trigger: 'blur' }]">
								<el-input
									type="textarea"
									placeholder="请填写不公开理由"
									:autosize="{ minRows: 6, maxRows: 10 }"
									v-model="state.ruleForm.noPubReason"
									:disabled="disabled"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col v-if="state.ruleForm.publishState">
							<el-form-item label="" prop="isOpenReview" :rules="[{ required: true, message: '请填写不公开理由', trigger: 'blur' }]">
								<el-checkbox v-model="state.ruleForm.isOpenReview" disabled>已开展保密审查</el-checkbox>
							</el-form-item>
						</el-col>
					</template>

					<!--	工单标记 随手拍特殊需求 发布时必填	-->
					<el-col v-if="isSnapshot">
						<el-form-item label="工单标记" prop="snapshotLabel" :rules="[{ required: true, message: '请选择工单标记', trigger: 'change' }]">
							<el-select
								v-model="state.ruleForm.snapshotLabel"
								multiple
								collapse-tags
								collapse-tags-tooltip
								:max-collapse-tags="5"
								placeholder="请选择工单标记"
								value-key="dicDataValue"
								clearable
								@change="handleSnapshotLabel"
							>
								<el-option
									v-for="item in snapshotLabel"
									:key="item.dicDataValue"
									:label="item.dicDataName"
									:value="item"
									:disabled="disabled"
									class="w100"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<!--					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="处理结果" prop="resolve" :rules="[{ required: true, message: '请选择处理结果', trigger: 'change' }]">
							<el-radio-group v-model="state.ruleForm.resolve" :disabled="disabled">
								<el-radio :value="true">已得到解决</el-radio>
								<el-radio :value="false">未得到解决</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>-->
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="实际办理部门">
							{{ state.publishDetail.actualHandleOrgName?.value }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="idNamesArray.length">
						<el-form-item label="需回访部门" prop="idNames" :rules="[{ required: false, message: '请选择需回访部门', trigger: 'blur' }]">
							<el-checkbox-group v-model="state.ruleForm.idNames" :disabled="disabled">
								<el-checkbox :value="item" v-for="item in idNamesArray" :key="item.key">{{ item.value }}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<template #footer v-if="!disabled">
			<span class="dialog-footer">
				<el-button @click="closeDialog" class="default-button" :loading="state.loading">取 消</el-button>
				<el-button type="primary" @click="onReturn" title="业务信件退回" v-auth="'business:publish:return'" :loading="state.loading">
					退回
				</el-button>
				<el-button
					type="primary"
					@click="onRedo"
					title="业务信件重办"
					v-auth="'business:publish:redo'"
					:loading="state.loading"
					v-if="['ZiGong', 'LuZhou'].includes(themeConfig.appScope)"
				>
					重办
				</el-button>
				<el-button type="primary" @click="onPublish(ruleFormRef)" v-if="!disabled" :loading="state.loading">发布</el-button>
			</span>
		</template>
	</el-dialog>
	<!-- 工单退回 -->
	<order-publish-return ref="orderPublishReturnRef" @updateList="updateList" />
	<order-publish-redo ref="orderPublishRedoRef" @updateList="updateList" />
</template>
<script setup lang="ts" name="orderPublishDetail">
import { computed, reactive, ref, defineAsyncComponent } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import { baseData, publishOrderDetail } from '@/api/business/publish';
import { publishOrder } from '@/api/todo/publish';
import { useThemeConfig } from '@/stores/themeConfig';
import { storeToRefs } from 'pinia';
import { useAppConfig } from '@/stores/appConfig';

const OrderPublishReturn = defineAsyncComponent(() => import('@/views/business/publish/components/Order-publish-return.vue')); // 工单退回
const OrderPublishRedo = defineAsyncComponent(() => import('@/views/business/publish/components/Order-publish-redo.vue')); // 工单重办
// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);
// 定义变量内容
const state = reactive<any>({
	dialogVisible: false, // 是否显示弹窗
	loading: false, // 是否显示加载
	ruleForm: {
		proPublishState: false, // 是否公开
		isContact: true, // 是否联系
		isVisited: true, // 是否评价
		feedBackPhone: '', // 反馈人电话
		noPubReason: '', // 不公开原因
		answerContent: '', // 答复口径
		arrangeContent: '', // 整改后内容
		arrangeOpinion: '', // 整改后结果
		idNames: [], // 需回访部门
		publishState: false, // 门户是否公开
		resolve: null, // 处理结果
		snapshotLabel: [],
		isOpenReview: null, // 是否开展保密审查
	},
	orderDetail: {}, // 工单详情
	publishDetail: {}, // 发布详情
});
const ruleFormRef = ref<RefType>(); // 表单ref
const idNamesArray = ref<EmptyArrayType>([]); // 部门列表
const disabled = ref<boolean>(false); //是否查看详情
const dialogTitle = ref<string>('发布详情'); // 弹窗标题
const netizenEvaluateType = ref<EmptyArrayType>([]);
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
/*
 * @param row 工单详情
 * @param isDisabled 是否查看详情
 * @description 打开弹窗
 * */
const isSnapshot = ref<boolean>(false); // 是否是随手拍
const snapshotLabel = ref<EmptyArrayType>([]); // 工单标记多选框
const publishDisabled = ref<boolean>(false); // 是否公开禁用
const isProvincePublic = ref<boolean>(false); //  省工单是否可以选择意愿是否公开
const openDialog = async (row: any, isDisabled: boolean = false) => {
	disabled.value = isDisabled;
	state.loading = true;
	state.dialogVisible = true;
	try {
		if (isDisabled) {
			state.orderDetail = row.order ?? {};
			const [response, res] = await Promise.all([publishOrderDetail(row.id), baseData(state.orderDetail.id)]);
			state.ruleForm = response.result ?? {};
			isSnapshot.value = response.result.isSnapshot ?? false;
			snapshotLabel.value = res.result?.snapshotLabel ?? [];
			state.ruleForm.netizen = response.result?.netizenEvaluate?.key;
			state.publishDetail = res.result ?? {};
			idNamesArray.value = res.result?.idNames ?? [];
			netizenEvaluateType.value = res.result?.netizenEvaluateType ?? [];
			dialogTitle.value = '发布详情';
			state.loading = false;
		} else {
			state.orderDetail = row ?? {};
			const res = await baseData(state.orderDetail.id);
			state.publishDetail = res.result ?? {};
			isSnapshot.value = res.result.isSnapshot ?? false;
			snapshotLabel.value = res.result?.snapshotLabel ?? [];
			state.ruleForm.arrangeTitle = state.publishDetail.orderTitle;
			state.ruleForm.arrangeContent = state.publishDetail.content;
			state.ruleForm.arrangeOpinion = state.publishDetail.actualOpinion;
			idNamesArray.value = res.result?.idNames ?? [];
			netizenEvaluateType.value = res.result?.netizenEvaluateType ?? [];
			dialogTitle.value = '工单发布';
			isProvincePublic.value = res.result?.isProvincePublic;
			publishDisabled.value = res.result?.isProvincePublic === false; // 诉求人意愿是否公开 否 禁用是否公开按钮
			state.loading = false;
			state.dialogVisible = true;
		}
	} catch (e) {
		console.log(e);
		state.loading = false;
	}
};
// 中国政府网特殊字段
const isZGZFW = computed(() => {
	return state.orderDetail.receiveProvinceNo?.includes('ZGZFW');
});
// 选择是否公开
const selectPublishState = (val: any) => {
	state.ruleForm.isOpenReview = !!val;
	// 如果选了否需要吧不公开理由清空
	if (!val) {
		state.ruleForm.noPubReason = null;
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
const close = () => {
	ruleFormRef.value.clearValidate();
	ruleFormRef.value.resetFields();
};
// 选择工单标记、
const handleSnapshotLabel = (val: any) => {
	state.ruleForm.snapshotLabels = val.map((item: any) => {
		return {
			key: item.dicDataValue,
			value: item.dicDataName,
		};
	});
};
// 发布
const onPublish = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		state.loading = true;
		let idNames: EmptyArrayType;
		state.ruleForm.netizenEvaluate = netizenEvaluateType.value.find((item) => item.key === state.ruleForm.netizen);
		if (state.ruleForm.idNames.length > 0) {
			// 如果选择了部门
			idNames = [...state.ruleForm.idNames];
		} else {
			idNames = [{ key: state.publishDetail.actualHandleOrgName?.key, value: state.publishDetail.actualHandleOrgName?.value }];
		}
		const request = {
			...state.ruleForm,
			idNames,
			id: state.orderDetail.id,
		};
		publishOrder(request)
			.then(() => {
				ElMessage.success('发布成功');
				state.loading = false;
				closeDialog();
				emit('updateList');
			})
			.catch(() => {
				state.loading = false;
			});
	});
};
// 退回
const orderPublishReturnRef = ref<RefType>(); // 工单退回ref
const onReturn = () => {
	orderPublishReturnRef.value.openDialog(state.orderDetail);
};
// 重办
const orderPublishRedoRef = ref<RefType>();
const onRedo = () => {
	orderPublishRedoRef.value.openDialog(state.orderDetail);
};
// 重办和退回成功
const updateList = () => {
	closeDialog();
	emit('updateList');
};
const appConfigStore = useAppConfig();
const { AppConfigInfo } = storeToRefs(appConfigStore); // 系统配置信息
// 限制  *国办工单FINISH_NOTE超出一千字
const arrangeOpinionMaxLength = computed(() => {
	if (state.orderDetail.receiveProvinceNo?.includes('GJZWFWPT')) {
		return AppConfigInfo.value.nationalPlatformWordLimit;
	} else {
		return 5000;
	}
});
// 提示
const arrangeOpinionPlaceholder = computed(() => {
	if (state.orderDetail.receiveProvinceNo?.includes('GJZWFWPT')) {
		return `请填写整改后办件结果(国家政务服务平台不超过${AppConfigInfo.value.nationalPlatformWordLimit}字)`;
	} else {
		return '请填写整改后办件结果';
	}
});
defineExpose({
	openDialog,
	closeDialog,
});
</script>