yyb
14 小时以前 97081b89ee45da49b8dbb4173ab45df031fe3c0d
src/views/officeProcessAutomation/ApproveManage/approve-list/index.vue
@@ -3,30 +3,35 @@
  <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"
@@ -77,67 +82,79 @@
      @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 ? "取 消" : "关 闭" }}
@@ -261,9 +278,9 @@
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";
@@ -273,9 +290,16 @@
const al = useApproveList();
const {
  Search,
  APPROVAL_TYPE_OPTIONS,
  APPROVAL_STATUS_SEARCH_OPTIONS,
  searchBusinessTypeOptions,
  loadSearchBusinessTypeOptions,
  submitBusinessTypeOptions,
  submitTemplateCards,
  selectedBusinessTypeLabel,
  countTemplatesByBusinessType,
  submitTemplatesLoading,
  onBusinessTypePick,
  backToBusinessTypePick,
  approvalTypeLabel,
  approvalActionLabel,
  searchForm,
@@ -311,29 +335,7 @@
  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();
@@ -368,7 +370,8 @@
}
onMounted(() => {
  loadUsers();
  loadFlowUsers();
  loadSearchBusinessTypeOptions();
  handleQuery();
});
</script>
@@ -434,6 +437,17 @@
  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;