czh-20260414-实现分发功能的前端

2026-04-14 10:03:00 +08:00
parent 6650905733
commit f42296180b
7 changed files with 2839 additions and 0 deletions
@@ -0,0 +1,351 @@
+<template>
+  <div class="sz-distribute-demo-container">
+    <a-card title="SzDistribute 分发方案组件示例" style="margin-bottom: 16px">
+      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" style="max-width: 600px">
+        <a-form-item label="密级（secLevel）">
+          <a-radio-group v-model:value="formData.secLevel">
+            <a-radio :value="1">非密</a-radio>
+            <a-radio :value="2">内部</a-radio>
+            <a-radio :value="3">秘密</a-radio>
+            <a-radio :value="4">机密</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="角色（role）">
+          <a-radio-group v-model:value="formData.role">
+            <a-radio :value="1">领导（role=1）</a-radio>
+            <a-radio :value="2">部门负责人（role=2）</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="当前部门ID">
+          <a-input v-model:value="formData.departId" placeholder="输入部门ID" />
+        </a-form-item>
+        <a-form-item label="公文ID（docId）">
+          <a-input v-model:value="formData.docId" placeholder="输入公文ID（可选，用于排除已分发部门）" />
+        </a-form-item>
+        <a-form-item label="是否特殊">
+          <a-switch v-model:checked="isSpecialChecked" />
+        </a-form-item>
+      </a-form>
+
+      <a-divider />
+
+      <SzDistribute
+        ref="distributeRef"
+        title="分发方案"
+        :secLevel="formData.secLevel"
+        :role="formData.role"
+        :departId="formData.departId"
+        :docId="formData.docId"
+        :isSpecial="isSpecialChecked ? 1 : 0"
+        v-model:checkedMainDepartIds="formData.checkedMainDepartIds"
+        v-model:checkedAssistDepartIds="formData.checkedAssistDepartIds"
+        v-model:checkedReadDepartIds="formData.checkedReadDepartIds"
+        v-model:checkedUsernames="formData.checkedUsernames"
+        v-model:checkedReadUsernames="formData.checkedReadUsernames"
+        v-model:reasons="formData.reasons"
+        @change="handleDistributeChange"
+        @update:checkedDepartIds="handleCheckedDepartIdsChange"
+      />
+
+      <div style="margin-top: 16px">
+        <a-space>
+          <a-button type="primary" @click="handleSave" :loading="saving">模拟保存</a-button>
+          <a-button @click="handleReset">重置</a-button>
+        </a-space>
+      </div>
+    </a-card>
+
+    <a-card title="输入字段（Input）" style="margin-bottom: 16px">
+      <a-descriptions :column="1" size="small" bordered>
+        <a-descriptions-item label="密级（secLevel）">
+          {{ formData.secLevel }} - {{ formData.secLevel === 1 ? '非密' : formData.secLevel === 2 ? '内部' : formData.secLevel === 3 ? '秘密' : '机密' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="角色（role）">
+          {{ formData.role }} - {{ formData.role === 1 ? '领导' : '部门负责人' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="当前部门ID（departId）">
+          {{ formData.departId || '(空)' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="公文ID（docId）">
+          {{ formData.docId || '(空)' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="是否特殊（isSpecial）">
+          {{ isSpecialChecked ? '是（1）' : '否（0）' }}
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-card>
+
+    <a-card title="输出字段（Output）" style="margin-bottom: 16px">
+      <a-descriptions :column="1" size="small" bordered>
+        <a-descriptions-item label="主办部门IDs（checkedMainDepartIds）">
+          {{ formData.checkedMainDepartIds || '(空)' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="协办部门IDs（checkedAssistDepartIds）">
+          {{ formData.checkedAssistDepartIds || '(空)' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="阅文部门IDs（checkedReadDepartIds）">
+          {{ formData.checkedReadDepartIds || '(空)' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="办文人员用户名（checkedUsernames）">
+          {{ formData.checkedUsernames || '(空)' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="阅文人员用户名（checkedReadUsernames）">
+          {{ formData.checkedReadUsernames || '(空)' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="分发意见（reasons）">
+          {{ formData.reasons || '(空)' }}
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-card>
+
+    <a-card title="字段含义说明" style="margin-bottom: 16px">
+      <a-collapse>
+        <a-collapse-panel key="input" header="输入字段说明">
+          <a-table :columns="inputColumns" :data-source="inputFields" :pagination="false" size="small" />
+        </a-collapse-panel>
+        <a-collapse-panel key="output" header="输出字段说明">
+          <a-table :columns="outputColumns" :data-source="outputFields" :pagination="false" size="small" />
+        </a-collapse-panel>
+      </a-collapse>
+    </a-card>
+
+    <a-card title="事件日志">
+      <div class="event-log-wrapper">
+        <a-button size="small" @click="eventLogs = []" style="margin-bottom: 8px">清空日志</a-button>
+        <div class="event-log-list">
+          <div v-for="(log, idx) in eventLogs" :key="idx" class="event-log-item">
+            <a-tag :color="log.type === 'success' ? 'green' : log.type === 'error' ? 'red' : 'blue'" size="small">
+              {{ log.type }}
+            </a-tag>
+            <span class="log-time">{{ log.time }}</span>
+            <span class="log-msg">{{ log.message }}</span>
+          </div>
+          <div v-if="eventLogs.length === 0" class="empty-log">暂无日志</div>
+        </div>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed, onMounted } from 'vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { useUserStore } from '/@/store/modules/user';
+import SzDistribute from '/@/components/semri/distributeComponent/SzDistribute.vue';
+
+const { createMessage } = useMessage();
+const userStore = useUserStore();
+const userInfo = computed(() => userStore.getUserInfo);
+
+const distributeRef = ref<InstanceType<typeof SzDistribute> | null>(null);
+
+onMounted(() => {
+  addLog('info', '页面初始化');
+  addLog('info', `当前用户信息: ${JSON.stringify(userInfo.value)}`);
+  
+  if (!formData.departId && userInfo.value?.orgCode) {
+    formData.departId = userInfo.value.orgCode;
+    addLog('info', `自动获取当前用户部门ID: ${formData.departId}`);
+  } else if (!formData.departId) {
+    addLog('warn', '当前用户没有部门信息，请手动输入部门ID或选择一个测试部门ID');
+    // 提供一些测试用的部门ID
+    addLog('info', '测试提示：可以使用部门ID如 "a7d898d8964111efb0b2a4e2a1f0467d" 进行测试');
+  } else {
+    addLog('info', `使用手动输入的部门ID: ${formData.departId}`);
+  }
+});
+const eventLogs = ref<any[]>([]);
+const saving = ref(false);
+const isSpecialChecked = ref(false);
+
+const inputColumns = [
+  { title: '字段名', dataIndex: 'name', key: 'name', width: 200 },
+  { title: '类型', dataIndex: 'type', key: 'type', width: 100 },
+  { title: '必填', dataIndex: 'required', key: 'required', width: 80 },
+  { title: '说明', dataIndex: 'description', key: 'description' },
+];
+
+const inputFields = [
+  {
+    name: 'secLevel',
+    type: 'Number',
+    required: '是',
+    description: '文件密级，1=非密、2=内部、3=秘密、4=机密。用于控制显示的人员密级范围，只显示人员密级 > 文件密级的用户',
+  },
+  {
+    name: 'role',
+    type: 'Number',
+    required: '是',
+    description: '当前用户角色，1=领导、2=部门负责人。不同的角色有不同的分发权限和界面展示',
+  },
+  {
+    name: 'departId',
+    type: 'String',
+    required: '是',
+    description: '当前登录用户的部门ID，用于确定当前部门，以便在分发时排除当前部门',
+  },
+  {
+    name: 'docId',
+    type: 'String',
+    required: '否',
+    description: '公文ID（可选），用于查询已分发的部门，在重新分发时排除已分发的部门',
+  },
+  {
+    name: 'isSpecial',
+    type: 'Number',
+    required: '否',
+    description: '是否特殊分发，0=否、1=是。特殊分发可能有不同的权限控制或业务逻辑',
+  },
+];
+
+const outputColumns = [
+  { title: '字段名', dataIndex: 'name', key: 'name', width: 200 },
+  { title: '类型', dataIndex: 'type', key: 'type', width: 100 },
+  { title: '格式', dataIndex: 'format', key: 'format', width: 200 },
+  { title: '说明', dataIndex: 'description', key: 'description' },
+];
+
+const outputFields = [
+  {
+    name: 'checkedMainDepartIds',
+    type: 'String',
+    format: '逗号分隔的ID字符串',
+    description: '主办部门ID列表，多个部门用逗号分隔，如："dept1,dept2,dept3"',
+  },
+  {
+    name: 'checkedAssistDepartIds',
+    type: 'String',
+    format: '逗号分隔的ID字符串',
+    description: '协办部门ID列表，多个部门用逗号分隔，用于标识协助办理的部门',
+  },
+  {
+    name: 'checkedReadDepartIds',
+    type: 'String',
+    format: '逗号分隔的ID字符串',
+    description: '阅文部门ID列表，多个部门用逗号分隔，用于标识仅需要阅读公文的部门',
+  },
+  {
+    name: 'checkedUsernames',
+    type: 'String',
+    format: '逗号分隔的用户名字符串',
+    description: '办文人员用户名列表，多个用户用逗号分隔，用于标识需要办理公文的具体人员',
+  },
+  {
+    name: 'checkedReadUsernames',
+    type: 'String',
+    format: '逗号分隔的用户名字符串',
+    description: '阅文人员用户名列表，多个用户用逗号分隔，用于标识仅需要阅读公文的具体人员',
+  },
+  {
+    name: 'reasons',
+    type: 'String',
+    format: '文本字符串',
+    description: '分发意见或备注，用于记录分发的说明或意见',
+  },
+];
+
+const formData = reactive({
+  secLevel: 3,
+  role: 1 as number,
+  departId: '',
+  docId: '',
+  isSpecial: 0,
+  checkedMainDepartIds: '',
+  checkedAssistDepartIds: '',
+  checkedReadDepartIds: '',
+  checkedUsernames: '',
+  checkedReadUsernames: '',
+  reasons: '',
+});
+
+function addLog(type: string, message: string) {
+  const now = new Date();
+  const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
+  eventLogs.value.unshift({ type, message, time });
+  if (eventLogs.value.length > 50) eventLogs.value.pop();
+}
+
+function handleDistributeChange(data: any) {
+  addLog('info', `分发方案变更: ${data}`);
+}
+
+function handleCheckedDepartIdsChange(data: string) {
+  addLog('info', `已选部门IDs: ${data}`);
+}
+
+async function handleSave() {
+  saving.value = true;
+  addLog('info', '开始模拟保存...');
+  try {
+    await new Promise((resolve) => setTimeout(resolve, 800));
+    addLog('success', `保存成功！主办部门: ${formData.checkedMainDepartIds || '无'}，协办部门: ${formData.checkedAssistDepartIds || '无'}，阅文部门: ${formData.checkedReadDepartIds || '无'}，办文人员: ${formData.checkedUsernames || '无'}，阅文人员: ${formData.checkedReadUsernames || '无'}`);
+  } catch (error: any) {
+    addLog('error', `保存失败: ${error.message || '未知错误'}`);
+  } finally {
+    saving.value = false;
+  }
+}
+
+function handleReset() {
+  formData.secLevel = 3;
+  formData.role = 1;
+  formData.departId = '';
+  formData.docId = '';
+  formData.isSpecial = 0;
+  isSpecialChecked.value = false;
+  formData.checkedMainDepartIds = '';
+  formData.checkedAssistDepartIds = '';
+  formData.checkedReadDepartIds = '';
+  formData.checkedUsernames = '';
+  formData.checkedReadUsernames = '';
+  formData.reasons = '';
+  eventLogs.value = [];
+  addLog('info', '表单已重置');
+}
+</script>
+
+<style lang="less" scoped>
+.sz-distribute-demo-container {
+  padding: 16px;
+}
+
+.event-log-wrapper {
+  .event-log-list {
+    max-height: 300px;
+    overflow-y: auto;
+    background: #fafafa;
+    border-radius: 4px;
+    padding: 8px;
+  }
+
+  .event-log-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 0;
+    border-bottom: 1px solid #f0f0f0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .log-time {
+      font-size: 12px;
+      color: #8c8c8c;
+      flex-shrink: 0;
+    }
+
+    .log-msg {
+      font-size: 13px;
+      color: #262626;
+    }
+  }
+
+  .empty-log {
+    text-align: center;
+    color: #8c8c8c;
+    font-size: 13px;
+    padding: 16px 0;
+  }
+}
+</style>