|
@@ -1,97 +1,82 @@
|
|
|
<template>
|
|
|
- <el-dialog
|
|
|
- v-model="state.dialogVisible"
|
|
|
- draggable
|
|
|
- title="特提申请"
|
|
|
- width="50%"
|
|
|
- append-to-body
|
|
|
- destroy-on-close
|
|
|
- @close="close"
|
|
|
- >
|
|
|
- <div class="collapse-container pb1">
|
|
|
- <el-form label-width="110px" ref="ruleFormRef" :model="state.ruleForm">
|
|
|
- <el-row :gutter="35">
|
|
|
- <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.title }} </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="申请人"> {{ userInfos.name }} </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="申请部门"> {{ userInfos.orgName }} </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="申请时间"> {{ formatDate(Date(), 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="特提节点" prop="traceId" :rules="[{ required: true, message: '请选择特提节点', trigger: 'change' }]">
|
|
|
- <el-select
|
|
|
- v-model="state.ruleForm.traceId"
|
|
|
- placeholder="请选择特提节点"
|
|
|
- class="w100"
|
|
|
- @change="selectTrace"
|
|
|
- >
|
|
|
- <el-option v-for="item in traces" :value="item.id" :key="item.id" :label="item.name">
|
|
|
- <span style="float: left">{{ item.name }}</span>
|
|
|
- <span style="float: right; color: var(--el-text-color-secondary); font-size: var(--el-font-size-extra-small)">{{
|
|
|
- item.acceptorOrgName
|
|
|
- }}</span>
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-if="state.ruleForm.traceId">
|
|
|
- <el-form-item label="特提部门" prop="orgName">
|
|
|
- {{ state.ruleForm.orgName }}
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="特提原因" prop="cause" :rules="[{ required: true, message: '请选择特提原因', trigger: 'change' }]">
|
|
|
- <el-select
|
|
|
- v-model="state.ruleForm.cause"
|
|
|
- placeholder="请选择特提原因"
|
|
|
- class="w100"
|
|
|
- >
|
|
|
- <el-option v-for="item in specialReason" :value="item.dicDataName" :key="item.dicDataName" :label="item.dicDataName" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <el-form-item label="特提理由" prop="reason" :rules="[{ required: true, message: '请填写特提理由', trigger: 'blur' }]">
|
|
|
- <el-input
|
|
|
- v-model="state.ruleForm.reason"
|
|
|
- type="textarea"
|
|
|
- :autosize="{ minRows: 6, maxRows: 10 }"
|
|
|
- placeholder="请填写特提理由"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <el-form-item label="附件" prop="handleResult" :rules="[{ required: false, message: '请选择附件', trigger: 'change' }]">
|
|
|
- <annex-list name="特提附件" ref="annexListRef" businessId="" classify="特提申请" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <template #footer>
|
|
|
+ <el-dialog v-model="state.dialogVisible" draggable title="特提申请" width="50%" append-to-body destroy-on-close @close="close">
|
|
|
+ <div class="collapse-container pb1">
|
|
|
+ <el-form label-width="110px" ref="ruleFormRef" :model="state.ruleForm">
|
|
|
+ <el-row :gutter="35">
|
|
|
+ <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.title }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
+ <el-form-item label="申请人"> {{ userInfos.name }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
+ <el-form-item label="申请部门"> {{ userInfos.orgName }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
+ <el-form-item label="申请时间"> {{ formatDate(Date(), 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
+ <el-form-item label="特提节点" prop="nextStepCode" :rules="[{ required: true, message: '请选择特提节点', trigger: 'change' }]">
|
|
|
+ <el-select v-model="state.ruleForm.nextStepCode" placeholder="请选择特提节点" class="w100" @change="selectTrace">
|
|
|
+ <el-option v-for="item in steps" :value="item.key" :key="item.key" :label="item.value"> </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-if="state.ruleForm.nextStepCode">
|
|
|
+ <el-form-item label="办理对象" prop="nextHandlers" :rules="[{ required: true, message: '请选择办理对象', trigger: 'change' }]">
|
|
|
+ <el-select
|
|
|
+ v-model="state.ruleForm.nextHandlers"
|
|
|
+ placeholder="请选择办理对象"
|
|
|
+ value-key="key"
|
|
|
+ clearable
|
|
|
+ collapse-tags
|
|
|
+ collapse-tags-tooltip
|
|
|
+ multiple
|
|
|
+ filterable
|
|
|
+ class="w100"
|
|
|
+ >
|
|
|
+ <el-option v-for="item in stepsItems" :value="item" :key="item.key" :label="item.value"> </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
+ <el-form-item label="特提原因" prop="cause" :rules="[{ required: true, message: '请选择特提原因', trigger: 'change' }]">
|
|
|
+ <el-select v-model="state.ruleForm.cause" placeholder="请选择特提原因" class="w100">
|
|
|
+ <el-option v-for="item in specialReason" :value="item.dicDataName" :key="item.dicDataName" :label="item.dicDataName" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="特提理由" prop="reason" :rules="[{ required: true, message: '请填写特提理由', trigger: 'blur' }]">
|
|
|
+ <el-input v-model="state.ruleForm.reason" type="textarea" :autosize="{ minRows: 6, maxRows: 10 }" placeholder="请填写特提理由" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-form-item label="附件" prop="handleResult" :rules="[{ required: false, message: '请选择附件', trigger: 'change' }]">
|
|
|
+ <annex-list name="特提附件" ref="annexListRef" businessId="" 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(ruleFormRef)" :loading="state.loading">提交</el-button>
|
|
|
</span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
<script setup lang="ts" name="SpecialDialog">
|
|
|
-import {defineAsyncComponent, reactive, ref} from 'vue';
|
|
|
-import {ElMessage, FormInstance} from 'element-plus';
|
|
|
-import {storeToRefs} from 'pinia';
|
|
|
-import {useUserInfo} from '/@/stores/userInfo';
|
|
|
-import {formatDate} from '/@/utils/formatTime';
|
|
|
-import {specialApplyBase,specialApply} from '/@/api/business/special';
|
|
|
+import { defineAsyncComponent, reactive, ref } from 'vue';
|
|
|
+import { ElMessage, FormInstance } from 'element-plus';
|
|
|
+import { storeToRefs } from 'pinia';
|
|
|
+import { useUserInfo } from '/@/stores/userInfo';
|
|
|
+import { formatDate } from '/@/utils/formatTime';
|
|
|
+import { specialApplyBase, specialApply } from '/@/api/business/special';
|
|
|
|
|
|
// 引入组件
|
|
|
const AnnexList = defineAsyncComponent(() => import('/@/components/AnnexList/index.vue'));
|
|
@@ -100,76 +85,89 @@ const AnnexList = defineAsyncComponent(() => import('/@/components/AnnexList/ind
|
|
|
const emit = defineEmits(['updateList']);
|
|
|
// 定义变量内容
|
|
|
const state = reactive<any>({
|
|
|
- dialogVisible: false, // 是否显示弹窗
|
|
|
- loading: false, // 是否显示加载
|
|
|
- ruleForm: {
|
|
|
- traceId: null, // 特提节点
|
|
|
- cause:null, // 特提原因
|
|
|
- reason: null, // 特提理由
|
|
|
- },
|
|
|
- orderDetail: {}, // 工单详情
|
|
|
+ dialogVisible: false, // 是否显示弹窗
|
|
|
+ loading: false, // 是否显示加载
|
|
|
+ ruleForm: {
|
|
|
+ nextStepCode: null, // 特提节点
|
|
|
+ cause: null, // 特提原因
|
|
|
+ reason: null, // 特提理由
|
|
|
+ nextHandlers: [], // 处理对象
|
|
|
+ },
|
|
|
+ orderDetail: {}, // 工单详情
|
|
|
+ workflowId: null, // 工作流id
|
|
|
});
|
|
|
const ruleFormRef = ref<RefType>();
|
|
|
const storesUserInfo = useUserInfo();
|
|
|
const { userInfos } = storeToRefs(storesUserInfo); // 用户信息
|
|
|
const specialReason = ref<EmptyArrayType>([]); // 特提理由
|
|
|
-const traces = ref<EmptyArrayType>([]); // 特提节点
|
|
|
+const steps = ref<EmptyArrayType>([]); // 特提节点
|
|
|
+const stepsItems = ref<EmptyArrayType>([]); // 处理对象
|
|
|
/**
|
|
|
* @description 打开弹窗
|
|
|
* @param {object} val 工单详情
|
|
|
* @param {boolean} audit 是否是审核
|
|
|
*/
|
|
|
const isAudit = ref<boolean>(false);
|
|
|
-const openDialog = (val: any,audit=false) => {
|
|
|
- state.orderDetail = val;
|
|
|
- isAudit.value = audit;
|
|
|
- specialApplyBase(val.workflowId).then((res: any) => {
|
|
|
- specialReason.value = res.result.specialReason ?? [];
|
|
|
- traces.value = res.result.traces ?? [];
|
|
|
- });
|
|
|
- state.dialogVisible = true;
|
|
|
+const openDialog = async (val: any, audit = false) => {
|
|
|
+ state.orderDetail = val;
|
|
|
+ state.workflowId = val.workflowId;
|
|
|
+ isAudit.value = audit;
|
|
|
+ state.loading = true;
|
|
|
+ state.dialogVisible = true;
|
|
|
+ try {
|
|
|
+ const [baseRes] = await Promise.all([specialApplyBase(val.workflowId)]);
|
|
|
+ steps.value = baseRes.result?.step?.steps ?? [];
|
|
|
+ specialReason.value = baseRes.result.specialReason ?? [];
|
|
|
+ console.log(baseRes);
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e);
|
|
|
+ } finally {
|
|
|
+ state.loading = false;
|
|
|
+ }
|
|
|
};
|
|
|
// 关闭弹窗
|
|
|
const closeDialog = () => {
|
|
|
- state.dialogVisible = false;
|
|
|
+ state.dialogVisible = false;
|
|
|
};
|
|
|
-const close = ()=>{
|
|
|
- ruleFormRef.value?.clearValidate();
|
|
|
- ruleFormRef.value?.resetFields();
|
|
|
-}
|
|
|
-// 选择节点确定部门
|
|
|
+const close = () => {
|
|
|
+ ruleFormRef.value?.clearValidate();
|
|
|
+ ruleFormRef.value?.resetFields();
|
|
|
+};
|
|
|
+// 选择节点确定办理对象
|
|
|
const selectTrace = (val: any) => {
|
|
|
- const trace = traces.value.find((item) => item.id === val);
|
|
|
- state.ruleForm.orgId = trace?.acceptorOrgId;
|
|
|
- state.ruleForm.orgName = trace?.acceptorOrgName;
|
|
|
+ const step = steps.value.find((item) => item.key === val);
|
|
|
+ state.ruleForm.nextStepName = step?.value;
|
|
|
+ ruleFormRef.value?.resetFields('nextHandlers');
|
|
|
+ stepsItems.value = step?.items ?? [];
|
|
|
};
|
|
|
// 提交
|
|
|
const annexListRef = ref<RefType>(); // 附件列表
|
|
|
const onSubmit = (formEl: FormInstance | undefined) => {
|
|
|
- if (!formEl) return;
|
|
|
- formEl.validate((valid: boolean) => {
|
|
|
- if (!valid) return;
|
|
|
- state.loading = true;
|
|
|
- let request = {
|
|
|
- ...state.ruleForm,
|
|
|
- orderId: state.orderDetail.id,
|
|
|
- files: annexListRef.value?.fileList,
|
|
|
- audit:isAudit.value
|
|
|
- };
|
|
|
- specialApply(request)
|
|
|
- .then((res: any) => {
|
|
|
- state.loading = false;
|
|
|
- closeDialog();
|
|
|
- emit('updateList');
|
|
|
- ElMessage.success('操作成功');
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- state.loading = false;
|
|
|
- });
|
|
|
- });
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.validate((valid: boolean) => {
|
|
|
+ if (!valid) return;
|
|
|
+ state.loading = true;
|
|
|
+ let request = {
|
|
|
+ ...state.ruleForm,
|
|
|
+ workflowId: state.workflowId,
|
|
|
+ orderId: state.orderDetail.id,
|
|
|
+ files: annexListRef.value?.fileList,
|
|
|
+ audit: isAudit.value,
|
|
|
+ };
|
|
|
+ specialApply(request)
|
|
|
+ .then((res: any) => {
|
|
|
+ state.loading = false;
|
|
|
+ closeDialog();
|
|
|
+ emit('updateList');
|
|
|
+ ElMessage.success('操作成功');
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ state.loading = false;
|
|
|
+ });
|
|
|
+ });
|
|
|
};
|
|
|
defineExpose({
|
|
|
- openDialog,
|
|
|
- closeDialog,
|
|
|
+ openDialog,
|
|
|
+ closeDialog,
|
|
|
});
|
|
|
</script>
|