| | |
| | | <div class="app-container"> |
| | | <div class="search_form mb20"> |
| | | <div class="search_fields"> |
| | | <span class="search_title">审批类型:</span> |
| | | <span class="search_title">模板类型:</span> |
| | | <el-select |
| | | v-model="searchForm.approvalType" |
| | | placeholder="请选择审批类型" |
| | | v-model="searchForm.businessType" |
| | | placeholder="请选择模板类型" |
| | | clearable |
| | | filterable |
| | | style="width: 200px" |
| | | > |
| | | <el-option |
| | | v-for="opt in APPROVAL_TYPE_OPTIONS" |
| | | v-for="opt in searchBusinessTypeOptions" |
| | | :key="`search-biz-type-${opt.value}`" |
| | | :label="opt.label" |
| | | :value="opt.value" |
| | | /> |
| | | </el-select> |
| | | <span class="search_title" style="margin-left: 12px">审批状态:</span> |
| | | <el-select |
| | | v-model="searchForm.status" |
| | | placeholder="请选择审批状态" |
| | | clearable |
| | | style="width: 140px" |
| | | > |
| | | <el-option |
| | | v-for="opt in APPROVAL_STATUS_SEARCH_OPTIONS" |
| | | :key="opt.value" |
| | | :label="opt.label" |
| | | :value="opt.value" |
| | | /> |
| | | </el-select> |
| | | <span class="search_title" style="margin-left: 12px">申请人名称:</span> |
| | | <el-input |
| | | v-model="searchForm.applicantKeyword" |
| | | style="width: 200px" |
| | | placeholder="请输入申请人名称" |
| | | clearable |
| | | :prefix-icon="Search" |
| | | @keyup.enter="handleQuery" |
| | | /> |
| | | <span class="search_title" style="margin-left: 12px">创建时间:</span> |
| | | <el-date-picker |
| | | v-model="searchForm.createTimeRange" |
| | |
| | | @closed="resetSubmitDialogState" |
| | | > |
| | | <template v-if="submitDialog.step === 1 && !isSubmitEdit"> |
| | | <p class="template-hint">请选择已启用的审批模板,系统将按模板配置引导填报。</p> |
| | | <p class="template-hint">请先选择模板类型,再选择该类型下已启用的审批模板。</p> |
| | | <div v-loading="submitTemplatesLoading" class="template-grid"> |
| | | <div |
| | | v-for="card in submitTemplateCards" |
| | | :key="card.key" |
| | | v-for="opt in submitBusinessTypeOptions" |
| | | :key="`biz-type-${opt.value}`" |
| | | class="template-card" |
| | | @click="onTemplatePick(card)" |
| | | :class="{ 'is-disabled': !countTemplatesByBusinessType(opt.value) }" |
| | | @click="onBusinessTypePick(opt.value)" |
| | | > |
| | | <span class="template-card-type" :style="approvalTypeStyle(card.approvalType)"> |
| | | {{ card.label }} |
| | | <span class="template-card-type">{{ opt.label }}</span> |
| | | <span class="template-card-desc"> |
| | | {{ countTemplatesByBusinessType(opt.value) }} 个可用模板 |
| | | </span> |
| | | <span class="template-card-desc">{{ card.summaryPlaceholder }}</span> |
| | | </div> |
| | | <el-empty |
| | | v-if="!submitTemplatesLoading && !submitTemplateCards.length" |
| | | description="暂无可用审批模板" |
| | | v-if="!submitTemplatesLoading && !submitBusinessTypeOptions.length" |
| | | description="暂无模板类型" |
| | | :image-size="80" |
| | | class="template-empty" |
| | | /> |
| | | </div> |
| | | </template> |
| | | |
| | | <template v-else-if="submitDialog.step === 2 && !isSubmitEdit"> |
| | | <p class="template-hint"> |
| | | 当前类型:{{ selectedBusinessTypeLabel || "—" }},请选择具体审批模板。 |
| | | <el-button type="primary" link class="ml8" @click="backToBusinessTypePick">更换类型</el-button> |
| | | </p> |
| | | <ApprovalTemplatePicker |
| | | :cards="submitTemplateCards" |
| | | :loading="submitTemplatesLoading" |
| | | @pick="onTemplatePick" |
| | | /> |
| | | </template> |
| | | |
| | | <template v-else> |
| | | <div v-loading="submitTemplatesLoading && !isSubmitEdit"> |
| | | <el-form ref="submitFormRef" :model="submitForm" :rules="submitFormRules" label-width="120px"> |
| | | <el-form-item label="审批类型"> |
| | | <el-form-item v-if="isSubmitEdit" label="审批类型"> |
| | | <span class="approve-type-cell" :style="approvalTypeStyle(activeTemplate.approvalType)"> |
| | | {{ activeTemplate.label }} |
| | | </span> |
| | | <el-button |
| | | v-if="!isSubmitEdit" |
| | | type="primary" |
| | | link |
| | | class="ml12" |
| | | @click="backToTemplatePick" |
| | | > |
| | | 更换模板 |
| | | </el-button> |
| | | </el-form-item> |
| | | <FormPayloadFields |
| | | <ApprovalTemplateFormSection |
| | | :active-template="activeTemplate" |
| | | :fields="submitFormFields" |
| | | :form-payload="submitForm.formPayload" |
| | | v-model:flow-nodes="submitForm.flowNodes" |
| | | v-model:attachments="submitForm.storageBlobDTOs" |
| | | :template-attachments="submitForm.templateAttachments" |
| | | :user-options="flowUserOptions" |
| | | :show-template-name="!isSubmitEdit" |
| | | :allow-change-template="!isSubmitEdit" |
| | | @change-template="backToTemplatePick" |
| | | /> |
| | | <el-form-item label="审批流程" required> |
| | | <TemplateFlowEditor v-model="submitForm.flowNodes" :user-options="flowUserOptions" /> |
| | | <p class="flow-tip"> |
| | | 按顺序流转:可为每个节点添加多名审批人;会签需全部通过,或签任一人通过即可进入下一节点。 |
| | | </p> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | </template> |
| | | |
| | | <template #footer> |
| | | <el-button |
| | | v-if="submitDialog.step === 2 || isSubmitEdit" |
| | | v-if="submitDialog.step === 3 || isSubmitEdit" |
| | | type="primary" |
| | | :loading="submitSaving" |
| | | @click="onSubmitInstance" |
| | | > |
| | | {{ isSubmitEdit ? "保 存" : "提 交" }} |
| | | </el-button> |
| | | <el-button |
| | | v-if="submitDialog.step === 2 && !isSubmitEdit" |
| | | @click="backToBusinessTypePick" |
| | | > |
| | | 上一步 |
| | | </el-button> |
| | | <el-button @click="submitDialog.visible = false"> |
| | | {{ submitDialog.step === 1 && !isSubmitEdit ? "取 消" : "关 闭" }} |
| | |
| | | import { Plus, RefreshRight } from "@element-plus/icons-vue"; |
| | | import { ElMessage } from "element-plus"; |
| | | import { onMounted, ref } from "vue"; |
| | | import { userListNoPageByTenantId } from "@/api/system/user.js"; |
| | | import TemplateFlowEditor from "../approve-template/components/TemplateFlowEditor.vue"; |
| | | import FormPayloadFields from "./components/FormPayloadFields.vue"; |
| | | import ApprovalTemplateFormSection from "../approve-shared/components/ApprovalTemplateFormSection.vue"; |
| | | import ApprovalTemplatePicker from "../approve-shared/components/ApprovalTemplatePicker.vue"; |
| | | import { useFlowUserOptions } from "../approve-shared/useFlowUserOptions.js"; |
| | | import { formatDisplayTime } from "../approve-template/approveTemplateConstants.js"; |
| | | import { approvalTypeStyle } from "./approveListConstants.js"; |
| | | import ApproveDetailPanel from "./components/ApproveDetailPanel.vue"; |
| | |
| | | const al = useApproveList(); |
| | | const { |
| | | Search, |
| | | APPROVAL_TYPE_OPTIONS, |
| | | APPROVAL_STATUS_SEARCH_OPTIONS, |
| | | searchBusinessTypeOptions, |
| | | loadSearchBusinessTypeOptions, |
| | | submitBusinessTypeOptions, |
| | | submitTemplateCards, |
| | | selectedBusinessTypeLabel, |
| | | countTemplatesByBusinessType, |
| | | submitTemplatesLoading, |
| | | onBusinessTypePick, |
| | | backToBusinessTypePick, |
| | | approvalTypeLabel, |
| | | approvalActionLabel, |
| | | searchForm, |
| | |
| | | openApprove, |
| | | } = al; |
| | | |
| | | const flowUserOptions = ref([]); |
| | | |
| | | function unwrapArray(payload) { |
| | | if (Array.isArray(payload)) return payload; |
| | | if (payload?.data && Array.isArray(payload.data)) return payload.data; |
| | | if (payload?.rows && Array.isArray(payload.rows)) return payload.rows; |
| | | return []; |
| | | } |
| | | |
| | | function isActiveUser(u) { |
| | | if (u.delFlag === "2" || u.delFlag === 2) return false; |
| | | if (u.status == null) return true; |
| | | return String(u.status) === "0"; |
| | | } |
| | | |
| | | async function loadUsers() { |
| | | try { |
| | | const res = await userListNoPageByTenantId(); |
| | | flowUserOptions.value = unwrapArray(res).filter(isActiveUser); |
| | | } catch { |
| | | flowUserOptions.value = []; |
| | | } |
| | | } |
| | | const { flowUserOptions, loadFlowUsers } = useFlowUserOptions(); |
| | | |
| | | async function onSubmitInstance() { |
| | | const ok = await submitInstanceForm(); |
| | |
| | | } |
| | | |
| | | onMounted(() => { |
| | | loadUsers(); |
| | | loadFlowUsers(); |
| | | loadSearchBusinessTypeOptions(); |
| | | handleQuery(); |
| | | }); |
| | | </script> |
| | |
| | | border-color: var(--el-color-primary); |
| | | box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06)); |
| | | } |
| | | .template-card.is-disabled { |
| | | opacity: 0.5; |
| | | cursor: not-allowed; |
| | | } |
| | | .template-card.is-disabled:hover { |
| | | border-color: var(--el-border-color-lighter); |
| | | box-shadow: none; |
| | | } |
| | | .ml8 { |
| | | margin-left: 8px; |
| | | } |
| | | .template-card-type { |
| | | display: inline-block; |
| | | padding: 2px 8px; |