发起变更审批流程弹框板块修改

src/views/my/initiateChange/modules/footer.vue

@@ -1,14 +1,9 @@
 <!-- 通用底部操作 -->
 <script setup lang="ts">
 import { computed, inject, ref, watch } from 'vue';
-import { storeToRefs } from 'pinia';
 import { Icon } from '@iconify/vue'
-import { useChangeStore } from '@/store/modules/change';
 import { useAiAnalysisApi } from '@/service/api/change';
 
-const changeStore = useChangeStore();
-const { getStepsInfo } = storeToRefs(changeStore);
-
 const props = defineProps([
     'type',
     'currentId',
@@ -17,8 +12,9 @@ const props = defineProps([
     'currentForm',
     'confirmed',
     'members',
+    'steps'
 ])
-const emit = defineEmits(['save','submit','confirmTab','regenerate']);
+const emit = defineEmits(['save','submit','confirmTab','regenerate','update:steps']);
 
 watch(() => props.confirmed, (newVal:boolean) => {
     confirmed.value = newVal;
@@ -33,6 +29,16 @@ const regenerateLoading = ref<boolean>(false);
 const submitLoading = ref<boolean>(false);
 const confirmed = ref<boolean>(false);
 
+// 专业
+const SPECIALTIES = [
+  { label: '生产', value: '生产' },
+  { label: '技术', value: '技术' },
+  { label: '仪表', value: '仪表' },
+  { label: '电气', value: '电气' },
+  { label: '设备', value: '设备' },
+  { label: '安全', value: '安全' },
+  { label: '质量', value: '质量' }
+];
 // 是否重新生成
 const regenerateTypes = ref<Record<string, boolean>>({
     'form':false,
@@ -43,23 +49,21 @@ const regenerateTypes = ref<Record<string, boolean>>({
     'close':false,
 });
 
-// 存储每个步骤选中的审核人 user_id
-const approvers = ref<Record<number, number[]>>({})
-const stepList = ref<any[]>([]);
 const flowList = ref<any[]>([]);
+const currentSteps = ref<any>(null);
+// 监听步骤变化，更新本地步骤
+watch(() => props.steps, (v:any) => {
+  currentSteps.value = v;
+},{ immediate: true })
+
 // 审批链
 const approvalFlowText = computed(() => {
-  if (!stepList.value || stepList.value.length === 0) return '暂无步骤'
+  if (!currentSteps.value || currentSteps.value.length === 0) return '暂无步骤'
   // 按 step_order 排序
-  const sorted = [...stepList.value].sort((a, b) => a.step_order - b.step_order)
+  const sorted = [...currentSteps.value].sort((a, b) => a.step_order - b.step_order)
   return sorted.map(item => item.name).join(' → ')
 })
 
-// 清空审批人
-const clearApprovers = () => {
-    approvers.value = {};
-}
-
 // 打开审批流程抽屉
 const openApprovalDrawer = () => {
     if(props.type==='form'){
@@ -67,13 +71,6 @@ const openApprovalDrawer = () => {
           return window.$message?.warning('请先选择变更类型、变更等级、变更时限');
         }
     }
-    stepList.value = getStepsInfo.value;
-    if(Object.keys(approvers.value).length === 0){
-        const result = Object.fromEntries(
-            stepList.value.map((step: any) => [step.id, step.members.map((m: any) => m.user_id)])
-        );
-        approvers.value = result;
-    }
     approvalDrawerShow.value = true;
 }
 
@@ -93,7 +90,7 @@ const transformFlowInfo = (steps: any[]) => {
 
 // 审批链
 const approvalChain = computed(() => {
-    let template = getStepsInfo.value;
+    let template = props.steps;
     if (!template || template.length === 0) return '暂无审批步骤'
     flowList.value = transformFlowInfo(template);
     const parts = flowList.value.map((step: any) => {
@@ -158,32 +155,71 @@ const submitApply = () => {
     emit('submit');
 }
 
-// 更新选中审批人 user_id
-const updateApprover = (stepId: number, usersId: number[]) => {
-  approvers.value[stepId] = usersId
-}
-// 匹配审批人
-function matchApprovers(steps: any[], mapping: Record<number, number[]>) {
-  const result = [];
-  for (const [stepId, usersId] of Object.entries(mapping)) {
-    const step = steps.find(s => s.id === Number(stepId));
-    if (step) {
-        const members = props.members.filter((m: any) => usersId.includes(m.user_id));
-        step.members = members || []; // 更新 step 的 members 属性
-        result.push(step);
-    }
-  }
-  return result;
-}
 // 完成设置
 const finishApprover = async () => {
-    const matched = matchApprovers(stepList.value, approvers.value);
-    changeStore.setStepsInfo(matched);
+    emit('update:steps', currentSteps.value);
     window.$message?.success("审批流程设置完成");
     approvalDrawerShow.value = false;
 }
 
-defineExpose({clearApprovers, setRegenerateLoading})
+/**
+ * 在组织树中根据 user_id 查找用户信息
+ * @param {Array} tree - 组织树数据
+ * @param {string|number} targetUserId - 要查找的 user_id
+ * @returns {Object|null} - 返回 { userLabel, parentLabel, parentValue } 或 null
+ */
+function findUserInTree(tree: any[], targetUserId: string | number) {
+  for (const org of tree) {
+    const children = org.children || [];
+    for (const user of children) {
+      if (String(user.user_id) === String(targetUserId)) {
+        return {
+          user_name: user.label,
+          org_name: org.label,
+          org_id: org.value
+        };
+      }
+    }
+  }
+  return null; // 未找到
+}
+// 设置专业会签步骤
+const setStepCountersign = (target: any, v: boolean) => {
+  currentSteps.value.forEach((s:any) => {
+    s.countersign = s === target ? v : false;
+    if (!s.countersign) s.members.forEach((m:any) => { m.specialty = ""; m.is_sign = 0; });
+  });
+}
+// 选择专业
+const selectSpecialty = (idx: number, mIdx: number, v: string | null) => {
+  currentSteps.value[idx].members[mIdx].specialty = v ?? null;
+}
+// 选择是否必须参与会签
+const selectSign = (idx: number, mIdx: number, v: number) => {
+  currentSteps.value[idx].members[mIdx].is_sign = v;
+}
+// 当前打开人员选择器的步骤（步骤行「＋」按钮切换）
+const pickerStepId = ref<number | null>(null);
+const pick = ref<string | null>(null);
+const togglePicker = (s: any) => {
+  pickerStepId.value = pickerStepId.value === s.unique_id ? null : s.unique_id;
+  pick.value = null;
+}
+// 添加审批步骤人员
+const addMember = (s: any, v: string | null) => {
+  if (v && !s.members.some((m:any) => m.user_name === v)){
+    let info = findUserInTree(props.members, v);
+    s.members.push({ user_id: Number(v), user_name: info?.user_name || '', org_id: info?.org_id || '', org_name: info?.org_name || '', specialty: "", is_sign: 0 });
+    pick.value = null;
+    pickerStepId.value = null;
+  } 
+}
+// 删除审批步骤人员
+const delMember = (s: any, p: number) => {
+  s.members = s.members.filter((m:any) => m.user_id !== p);
+}
+
+defineExpose({setRegenerateLoading})
 
 </script>
 
@@ -225,7 +261,7 @@ defineExpose({clearApprovers, setRegenerateLoading})
             <span class="min-w-0 truncate">
                 审核：{{ approvalChain }}
             </span>
-            <NButton v-if="getStepsInfo && getStepsInfo.length" ghost size="small" type="primary" :disabled="btnDisabled" @click="openApprovalDrawer">
+            <NButton v-if="currentSteps && currentSteps.length" ghost size="small" type="primary" :disabled="btnDisabled" @click="openApprovalDrawer">
                 <Icon icon="octicon:sliders-24" class="size-14px" />
                 审批流程设置
             </NButton>
@@ -239,22 +275,63 @@ defineExpose({clearApprovers, setRegenerateLoading})
     </div>
 </div>
 <!-- 审批流程设置 -->
-<NDrawer v-model:show="approvalDrawerShow" placement="right" width="28rem">
+<NDrawer v-model:show="approvalDrawerShow" placement="right" width="37rem">
   <NDrawerContent>
     <template #header>
       <div class="text-base font-semibold text-slate-800">审批流程设置</div>
     </template>
     <div class="h-full space-y-4 overflow-y-auto">
         <p class="text-xs leading-relaxed text-slate-400">审批链：{{ approvalFlowText }}。专业会签人由申请表「涉及专业」勾选自动增减，可在此调整人选；重要变更自动追加安全审查与分管领导终批。</p>
-        <div class="rounded-lg border p-3" v-for="(item,index) in stepList" :key="item.id">
-            <div class="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-700">
-                <NTag type="info" size="small">{{Number(index)+1}}</NTag> {{item.name}} {{item.countersign ? '（专业会签）' : ''}}
+        <div v-for="(s, idx) in currentSteps" :key="s.id" class="rounded-lg border border-slate-100 bg-slate-50/40 p-3">
+            <div class="flex flex-wrap items-center gap-2">
+                <NTag type="info" size="small">{{Number(idx)+1}}</NTag>
+                <p class="text-sm">{{s.name}}</p>
+                <NCheckbox :checked="s.countersign" size="small" @update:checked="(v) => setStepCountersign(s, v)">
+                    <span class="text-xs text-slate-500">专业会签步骤</span>
+                </NCheckbox>
+                <NButton ghost type="primary" size="tiny" @click="togglePicker(s)" title="添加预设人员" class="ml-auto">
+                    <Icon icon="ic:round-plus" class="size-16px" />
+                </NButton>
+            </div>
+            <!-- 预设人员：人员必选；仅会签步骤可选择专业（必选），且人员可勾选「必须进行专业会签」 -->
+            <div class="mt-2 flex gap-2 pl-8">
+            <span class="shrink-0 text-xs leading-7 text-slate-400">预设人员:</span>
+            <div class="min-w-0 flex-1 space-y-1.5">
+                <div v-for="(m, mIdx) in s.members" :key="m.id" class="flex min-h-7 flex-wrap items-center gap-2">
+                    <span class="shrink-0 truncate text-xs font-medium text-slate-700">{{ m.user_name }}</span>
+                    <template v-if="s.countersign">
+                        <span class="text-xs text-slate-400"><span class="text-red-500">*</span>专业:</span>
+                        <NSelect :value="m.specialty || null" clearable size="small" placeholder="请选择专业" class="w-28"
+                        :options="SPECIALTIES"
+                        @update:value="(v) => selectSpecialty(Number(idx), Number(mIdx), v)"
+                        />
+                        <NCheckbox :checked="m.is_sign" size="small"
+                        :checked-value="1"
+                        :unchecked-value="0"
+                        @update:checked="(v) => selectSign(Number(idx), Number(mIdx), v)"
+                        >
+                        <span class="text-xs text-slate-500">必须参与会签</span>
+                        </NCheckbox>
+                    </template>
+                    <NButton text type="error" @click="delMember(s, m.user_id)" title="删除该人员">
+                        <Icon icon="iconamoon:trash" class="size-16px" />
+                    </NButton>
+                </div>
+                <p v-if="s.countersign && s.members.length" class="text-[11px] leading-5 text-slate-400">
+                必须参与会签：勾选的人员必须参与专业会签，未勾选的人员为可选会签（按需参加）
+                </p>
+                <NCascader v-if="pickerStepId === s.unique_id" :value="pick" :options="props.members"
+                placeholder="请选择人员" size="small" check-strategy="child" :show-path="false" expand-trigger="click"
+                class="w-56" :on-update:value="(v) => addMember(s, v)" />
+
+                <span v-if="s.members.length === 0" class="text-xs leading-7 text-slate-300">未预设</span>
+            </div>
             </div>
-            <NSelect :value="approvers[item.id]" multiple :options="props.members" label-field="full_name" value-field="user_id"
-            @update:value="(v) => updateApprover(item.id, v)" />
         </div>
-        <NButton v-if="stepList.length" type="primary" class="w-full" @click="finishApprover">完成设置</NButton>
     </div>
+    <template #footer>
+        <NButton v-if="currentSteps.length" type="primary" class="w-full" @click="finishApprover">完成设置</NButton>
+    </template>
   </NDrawerContent>
 </NDrawer>
 </template>