|
|
@@ -0,0 +1,177 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ v-model="state.dialogVisible"
|
|
|
+ draggable
|
|
|
+ title="甄别修改理由"
|
|
|
+ ref="dialogRef"
|
|
|
+ @mouseup="mouseup"
|
|
|
+ :style="'transform: ' + state.transform + ';'"
|
|
|
+ append-to-body
|
|
|
+ destroy-on-close
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ @close="close"
|
|
|
+ >
|
|
|
+ <div v-loading="state.loading">
|
|
|
+ <el-form :model="state.discernForm" label-width="110px" ref="discernFormRef">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
+ <el-form-item label="工单编码"> {{ state.orderDetail.no }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
+ <el-form-item label="工单标题"> {{ state.orderDetail.order?.title }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
+ <el-form-item label="申请人"> {{ state.orderDetail.creatorName }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
+ <el-form-item label="申请部门"> {{ state.orderDetail.creatorOrgName }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col>
|
|
|
+ <el-form-item label="申请时间"> {{ formatDate(state.orderDetail.creationTime, '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="申请理由" prop="content" :rules="[{ required: true, message: '请填写甄别申请理由', trigger: 'blur' }]">
|
|
|
+ <common-advice
|
|
|
+ @chooseAdvice="chooseAdviceDiscern"
|
|
|
+ v-model="state.discernForm.content"
|
|
|
+ placeholder="请填写甄别申请理由"
|
|
|
+ :loading="state.loading"
|
|
|
+ :commonEnum="commonEnum.Discriminate"
|
|
|
+ :maxlength="AppConfigInfo.handleOpinionWordLimit"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="附件">
|
|
|
+ <annex-list
|
|
|
+ name="甄别附件"
|
|
|
+ ref="discernAnnexListRef"
|
|
|
+ v-model:format="handleFilesDiscern"
|
|
|
+ :businessId="state.orderDetail.orderId"
|
|
|
+ v-model="state.discernForm.files"
|
|
|
+ classify="甄别上传"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>-->
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="closeDialog" class="default-button">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="onSubmit(discernFormRef)" :loading="state.loading">确定</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { defineAsyncComponent, reactive, ref } from 'vue';
|
|
|
+import { ElMessage, FormInstance } from 'element-plus';
|
|
|
+import { commonEnum } from '@/utils/constants';
|
|
|
+import { discernUpdateReason, screenDetail } from '@/api/business/discern';
|
|
|
+import { transformFile } from '@/utils/tools';
|
|
|
+import { formatDate } from '@/utils/formatTime';
|
|
|
+import { useAppConfig } from '@/stores/appConfig';
|
|
|
+import { storeToRefs } from 'pinia';
|
|
|
+
|
|
|
+// 引入组件
|
|
|
+const CommonAdvice = defineAsyncComponent(() => import('@/components/CommonAdvice/index.vue')); // 常用意见
|
|
|
+const AnnexList = defineAsyncComponent(() => import('@/components/AnnexList/index.vue')); // 附件列表
|
|
|
+// 定义子组件向父组件传值/事件
|
|
|
+const emit = defineEmits(['orderProcessSuccess', 'orderProcessFailed']);
|
|
|
+// 定义变量内容
|
|
|
+const state = reactive<any>({
|
|
|
+ dialogVisible: false, // 弹窗显示隐藏
|
|
|
+ discernForm: {
|
|
|
+ //流程表单
|
|
|
+ content: '', // 甄别理由
|
|
|
+ id:null,// 甄别id
|
|
|
+ files:[],// 附件
|
|
|
+ },
|
|
|
+ nextStepOptions: [], // 下一节点
|
|
|
+ handlerOptions: [], // 办理对象
|
|
|
+ transform: 'translate(0px, 0px)', // 滚动条位置
|
|
|
+ loading: false, // 提交按钮loading
|
|
|
+ workflowId: '', // 流程id
|
|
|
+ handlerClassifies: [], //撤回办理对象
|
|
|
+ handleId: '', // 流程处理ID
|
|
|
+ annexName: '', // 附件标题
|
|
|
+ inputPlaceholder: '', // 意见提示
|
|
|
+ orderDetail: {}, // 工单详情
|
|
|
+});
|
|
|
+const appConfigStore = useAppConfig();
|
|
|
+const { AppConfigInfo } = storeToRefs(appConfigStore); // 系统配置信息
|
|
|
+// 打开弹窗
|
|
|
+const openDialog = async (val: any) => {
|
|
|
+ state.dialogVisible = true;
|
|
|
+ state.loading = true;
|
|
|
+ try {
|
|
|
+ const { result } = await screenDetail(val.id);
|
|
|
+ state.discernForm.id = val.id;
|
|
|
+ state.discernForm.content = result.content ?? {};
|
|
|
+ state.orderDetail = result;
|
|
|
+ state.discernForm.files = transformFile(result.files);
|
|
|
+ } finally {
|
|
|
+ state.loading = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+const discernFormRef = ref<RefType>(); //甄别申请表单组件
|
|
|
+// 设置抽屉
|
|
|
+const dialogRef = ref<RefType>();
|
|
|
+const mouseup = () => {
|
|
|
+ state.transform = dialogRef.value.dialogContentRef.$el.style.transform;
|
|
|
+};
|
|
|
+// 关闭弹窗
|
|
|
+const closeDialog = () => {
|
|
|
+ state.dialogVisible = false;
|
|
|
+};
|
|
|
+// 重置表单方法
|
|
|
+const restForm = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.resetFields();
|
|
|
+ formEl.clearValidate();
|
|
|
+ state.discernForm.files = [];
|
|
|
+};
|
|
|
+// 选择常用意见 填入填写框 甄别
|
|
|
+const chooseAdviceDiscern = (item: any) => {
|
|
|
+ state.discernForm.content += item.content;
|
|
|
+};
|
|
|
+const afterSubmit = (emitType?: 'orderProcessSuccess' | 'orderProcessFailed', showMessage?: boolean, message?: string) => {
|
|
|
+ state.loading = false;
|
|
|
+ closeDialog();
|
|
|
+ const msg = message ?? '操作成功';
|
|
|
+ if (showMessage) ElMessage.success(msg);
|
|
|
+ if (emitType) emit(emitType);
|
|
|
+};
|
|
|
+const close = () => {
|
|
|
+ restForm(discernFormRef.value);
|
|
|
+};
|
|
|
+// 提交
|
|
|
+const handleFilesDiscern = ref<EmptyArrayType>([]); // 甄别附件
|
|
|
+const onSubmit = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.validate((valid: boolean) => {
|
|
|
+ if (!valid) return;
|
|
|
+ state.loading = true;
|
|
|
+ const request = {
|
|
|
+ screenId: state.discernForm.id,
|
|
|
+ content: state.discernForm.content,
|
|
|
+ files: handleFilesDiscern.value,
|
|
|
+ };
|
|
|
+ discernUpdateReason(request)
|
|
|
+ .then(() => {
|
|
|
+ afterSubmit('orderProcessSuccess', true, '甄别修改理由成功');
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ afterSubmit('orderProcessFailed');
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+// 暴露变量
|
|
|
+defineExpose({
|
|
|
+ openDialog,
|
|
|
+ closeDialog,
|
|
|
+});
|
|
|
+</script>
|
zhangchong