feat(teachingDemo): 新增工艺路线与BOM教学演示模块

云

107 分钟以前 47bae1f938f915206e3934ea960aff975e5738c9

 src/views/officeProcessAutomation/ApproveManage/approve-template/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,852 @@
<!--OA模块：审批模板-->

<template>

  <div class="app-container approve-template-page">

    <div class="search_form mb20">

      <div class="search_fields">

        <span class="search_title">模板名称：</span>

        <el-input

          v-model="searchForm.keyword"

          style="width: 220px"

          placeholder="搜索名称或说明"

          clearable

          :prefix-icon="Search"

          @keyup.enter="handleQuery"

        />

        <el-checkbox v-model="searchForm.enabledOnly" class="ml12" @change="handleQuery">

          ä»…显示启用

        </el-checkbox>

        <el-button type="primary" :icon="Search" class="ml10" @click="handleQuery">搜索</el-button>

        <el-button :icon="RefreshRight" @click="resetSearch">重置</el-button>

      </div>

      <div class="search_actions">

        <el-button type="primary" :icon="Plus" @click="openFormDialog('add')">新建模板</el-button>

      </div>

    </div>



    <div class="table_list">

      <PIMTable

        rowKey="id"

        :column="tableColumn"

        :tableData="tableData"

        :page="page"

        :isSelection="false"

        :tableLoading="tableLoading"

        :total="page.total"

        @pagination="pagination"

      />

    </div>



    <!-- æ–°å»º / ç¼–辑 -->

    <el-dialog

      v-model="formDialog.visible"

      :title="formDialog.title"

      width="1020px"

      append-to-body

      destroy-on-close

      class="template-form-dialog"

      @closed="onFormDialogClosed"

    >

      <el-form

        v-if="formDialog.visible"

        ref="formRef"

        :model="form"

        :rules="formRules"

        label-width="100px"

      >

        <el-row :gutter="20">

          <el-col :span="8">

            <el-form-item label="模板名称" prop="templateName">

              <el-input
                v-model="form.templateName"
                placeholder="如：项目立项审批"
                maxlength="50"
                show-word-limit
                :disabled="isEditingBuiltin"
              />

            </el-form-item>

          </el-col>

          <el-col :span="8">

            <el-form-item label="模板类型" prop="businessType">

              <el-select
                v-model="form.businessType"
                placeholder="请选择"
                style="width: 100%"
                :disabled="isEditingBuiltin"
              >

                <el-option

                  v-for="opt in templateTypeOptions"

                  :key="`tpl-type-${opt.value}`"

                  :label="opt.label"

                  :value="opt.value"

                />

              </el-select>

            </el-form-item>

          </el-col>

          <el-col :span="8">

            <el-form-item label="启用状态">

              <el-switch v-model="form.enabled" active-text="启用" inactive-text="停用" />

            </el-form-item>

          </el-col>

        </el-row>

        <el-form-item label="模板说明">

          <el-input

            v-model="form.description"

            type="textarea"

            :rows="2"

            placeholder="简要说明该模板的适用场景"

            maxlength="200"

            show-word-limit

          />

        </el-form-item>

        <el-form-item label="填报配置">

          <FormConfigEditor
            v-model="form.formConfigData"
            :exclude-template-id="form.id"
            :disable-import="isEditingBuiltin"
            :locked-field-uids="isEditingBuiltin ? form.lockedFormFieldUids : []"
          />

          <p class="flow-tip">配置提交审批时需填写的表单项，保存后写入 formConfig（JSON）。</p>

        </el-form-item>

        <el-form-item label="审批流程" required>

          <TemplateFlowEditor v-model="form.flowNodes" :user-options="flowUserOptions" />

          <p class="flow-tip">

            æŒ‰é¡ºåºæµè½¬ï¼šå¯ä¸ºæ¯ä¸ªèŠ‚点添加多名审批人；会签需全部通过，或签任一人通过即可进入下一节点。

          </p>

        </el-form-item>

        <el-form-item label="附件">

          <div class="upload-block">

            <FileUpload v-model:file-list="form.storageBlobDTOs" :limit="10" button-text="点击选择文件" />

          </div>

          <p class="flow-tip">可上传模板说明文档、制度文件等（选填）。</p>

        </el-form-item>

      </el-form>

      <template #footer>

        <el-button type="primary" @click="onSubmitForm">保 å­˜</el-button>

        <el-button @click="formDialog.visible = false">取 æ¶ˆ</el-button>

      </template>

    </el-dialog>



    <!-- è¯¦æƒ… -->

    <el-dialog v-model="detailDialog.visible" title="模板详情" width="880px" append-to-body destroy-on-close>

      <div v-loading="detailLoading" class="detail-dialog-body">

      <el-descriptions :column="2" border>

        <el-descriptions-item label="模板名称">{{ detailRow.templateName }}</el-descriptions-item>

        <el-descriptions-item label="模板类型">{{ templateTypeLabel(detailRow.businessType) }}</el-descriptions-item>

        <el-descriptions-item label="状态">

          <el-tag :type="detailRow.enabled !== false ? 'success' : 'info'" size="small">

            {{ detailRow.enabled !== false ? "启用" : "停用" }}

          </el-tag>

        </el-descriptions-item>

        <el-descriptions-item label="说明" :span="2">{{ detailRow.description || "—" }}</el-descriptions-item>

        <el-descriptions-item label="填报提示" :span="2">

          {{ detailFormConfig.summaryPlaceholder || "—" }}

        </el-descriptions-item>

        <el-descriptions-item label="创建人">{{ detailRow.createdUserName || "—" }}</el-descriptions-item>

        <el-descriptions-item label="创建时间">{{ formatDisplayTime(detailRow.createdTime) }}</el-descriptions-item>

        <el-descriptions-item label="更新时间">{{ formatDisplayTime(detailRow.updatedTime) }}</el-descriptions-item>

      </el-descriptions>

      <el-divider content-position="left">填报项（{{ detailFormConfig.fields?.length || 0 }} é¡¹ï¼‰</el-divider>

      <el-table

        v-if="detailFormConfig.fields?.length"

        :data="detailFormConfig.fields"

        border

        size="small"

        class="mb16"

      >

        <el-table-column prop="label" label="显示名称" min-width="120" />

        <el-table-column prop="key" label="字段标识" min-width="100" />

        <el-table-column label="类型" width="100">

          <template #default="{ row }">{{ formFieldTypeLabel(row.type) }}</template>

        </el-table-column>

        <el-table-column label="选项来源" width="100">

          <template #default="{ row }">

            {{ row.type === 'select' ? selectOptionSourceLabel(row.optionSource) : '—' }}

          </template>

        </el-table-column>

        <el-table-column label="必填" width="70" align="center">

          <template #default="{ row }">{{ row.required !== false ? "是" : "否" }}</template>

        </el-table-column>

        <el-table-column label="默认值" min-width="120" show-overflow-tooltip>

          <template #default="{ row }">{{ formatDefaultValueDisplay(row) }}</template>

        </el-table-column>

      </el-table>

      <el-empty v-else description="未配置填报项" :image-size="48" class="mb16" />

      <el-divider content-position="left">审批流程（{{ detailRow.flowNodes?.length || 0 }} ä¸ªèŠ‚点）</el-divider>

      <div v-if="detailRow.flowNodes?.length" class="detail-flow">

        <div v-for="(node, index) in detailRow.flowNodes" :key="index" class="detail-node">

          <div class="detail-node-head">

            <span class="detail-node-order">节点 {{ index + 1 }}</span>

            <el-tag size="small" :type="node.signMode === 'or_sign' ? 'warning' : 'primary'">

              {{ nodeSignModeLabel(node.signMode) }}

            </el-tag>

          </div>

          <div class="detail-approvers">

            <el-tag

              v-for="a in node.approvers"

              :key="String(a.approverId)"

              class="detail-approver-tag"

              effect="plain"

            >

              {{ a.approverName || "—" }}

            </el-tag>

            <span v-if="!node.approvers?.length" class="text-muted">未配置审批人</span>

          </div>

          <el-icon v-if="index < detailRow.flowNodes.length - 1" class="detail-arrow"><ArrowRight /></el-icon>

        </div>

      </div>

      <el-empty v-else description="暂无流程节点" :image-size="60" />

      <el-divider content-position="left">附件（{{ detailAttachments.length }} ä¸ªï¼‰</el-divider>

      <template v-if="detailAttachments.length">

        <div class="detail-attachment-list">
          <div
            v-for="(f, i) in detailAttachments"
            :key="i"
            class="detail-attachment-item"
            @click="openAttachmentFile(f)"
          >
            <el-icon class="attachment-icon"><Document /></el-icon>
            <span class="attachment-name">{{ attachmentDisplayName(f) }}</span>
            <el-icon class="attachment-download"><Download /></el-icon>
          </div>
        </div>

      </template>

      <el-empty v-else description="暂无附件" :image-size="48" />

      </div>

      <template #footer>

        <el-button @click="detailDialog.visible = false">关 é—­</el-button>

        <el-button type="primary" @click="editFromDetail">编 è¾‘</el-button>

      </template>

    </el-dialog>

  </div>

</template>



<script setup>

import { ArrowRight, Document, Download, Plus, RefreshRight } from "@element-plus/icons-vue";

import { ElMessage } from "element-plus";

import { computed, nextTick, onMounted, ref } from "vue";

import { userListNoPageByTenantId } from "@/api/system/user.js";

import FileUpload from "@/components/AttachmentUpload/file/index.vue";

import FormConfigEditor from "./components/FormConfigEditor.vue";

import TemplateFlowEditor from "./components/TemplateFlowEditor.vue";

import { formatDisplayTime, mapAttachmentsFromApi } from "./approveTemplateConstants.js";

import { formatDefaultValueDisplay, formFieldTypeLabel, parseFormConfigToData } from "./formConfigUtils.js";
import { selectOptionSourceLabel } from "./selectOptionSource.js";

import { useApproveTemplate } from "./useApproveTemplate.js";



const {

  Search,

  templateTypeOptions,

  loadTemplateTypeOptions,

  templateTypeLabel,

  nodeSignModeLabel,

  searchForm,

  tableLoading,

  page,

  tableData,

  tableColumn,

  formDialog,

  form,

  formRef,

  formRules,

  isEditingBuiltin,

  detailDialog,

  detailRow,

  detailLoading,

  fetchTemplateList,

  handleQuery,

  resetSearch,

  pagination,

  openFormDialog,

  openDetail,

  submitForm,

} = useApproveTemplate();



const flowUserOptions = ref([]);



const detailFormConfig = computed(() =>

  parseFormConfigToData(detailRow.value?.formConfigData ?? detailRow.value?.formConfig)

);



const detailAttachments = computed(() => mapAttachmentsFromApi(detailRow.value));



function attachmentDisplayName(file) {

  if (!file) return "未命名";

  return file.name || file.originalFilename || file.fileName || "未命名";

}

function openAttachmentFile(file) {
  const url = file?.url || file?.previewURL || file?.downloadURL || file?.previewUrl || "";
  if (url) {
    window.open(url, "_blank");
  } else {
    ElMessage.warning("无法打开该附件");
  }
}


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 = [];

  }

}



async function onSubmitForm() {

  const ret = await submitForm();

  if (ret?.message) {

    ElMessage.warning(ret.message);

    return;

  }

  if (ret?.ok) ElMessage.success("保存成功");

}



function onFormDialogClosed() {

  formRef.value?.resetFields?.();

}



async function editFromDetail() {

  const row = detailRow.value;

  detailDialog.visible = false;

  await nextTick();

  openFormDialog("edit", row);

}



onMounted(() => {

  loadUsers();

  loadTemplateTypeOptions();

  fetchTemplateList();

});

</script>



<style scoped>

.mb20 {

  margin-bottom: 20px;

}

.mb16 {

  margin-bottom: 16px;

}

.mb16.el-empty {

  padding: 8px 0;

}

.ml10 {

  margin-left: 10px;

}

.ml12 {

  margin-left: 12px;

}

.search_form {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

}

.search_fields {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 4px;

}

.search_actions {

  display: flex;

  gap: 8px;

}

.flow-tip {

  font-size: 12px;

  color: var(--el-text-color-secondary);

  margin: 8px 0 0;

  line-height: 1.5;

}

.detail-flow {

  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

  gap: 8px;

}

.detail-node {

  position: relative;

  min-width: 180px;

  max-width: 240px;

  padding: 12px;

  border: 1px solid var(--el-border-color-lighter);

  border-radius: 8px;

  background: var(--el-fill-color-lighter);

}

.detail-node-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 8px;

}

.detail-node-order {

  font-weight: 600;

  font-size: 13px;

}

.detail-approvers {

  display: flex;

  flex-wrap: wrap;

  gap: 4px;

}

.detail-approver-tag {

  margin: 0;

}

.detail-arrow {

  position: absolute;

  right: -20px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--el-text-color-placeholder);

}

.detail-dialog-body {

  min-height: 120px;

}

.upload-block {

  width: 100%;

}

.detail-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-attachment-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--el-fill-color-light);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.detail-attachment-item:hover {
  background: var(--el-fill-color);
}

.attachment-icon {
  font-size: 16px;
  color: var(--el-text-color-regular);
}

.attachment-name {
  font-size: 14px;
  color: var(--el-text-color-primary);
}

.attachment-download {
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.text-muted {

  font-size: 12px;

  color: var(--el-text-color-placeholder);

}

.template-form-dialog :deep(.el-dialog__body) {

  padding-top: 8px;

}

</style>