@ebiz/designer-components 0.1.11 → 0.1.13

package/src/components/EbizApproval.vue

@@ -1,333 +1,390 @@
-<template>
-    <div class="ebiz-approval">
-        <t-card>
-            <!-- 审批人部分 -->
-            <div class="approval-section">
-                <div class="approval-title">审批流程</div>
-
-                <div class="section-header">
-                    <t-icon name="user" class="section-icon" />
-                    <span class="section-title">
-                        审批人
-                        <span class="required" v-if="required">*</span>
-                    </span>
-                </div>
-                <div class="approver-list">
-                    <div class="approver-row">
-                        <template v-for="(approver, index) in approvers" :key="index">
-                            <div class="approver-item">
-                                <t-avatar :image="approver.avatar" size="small">
-                                    {{ getAvatarText(approver.name) }}
-                                </t-avatar>
-                                <div class="user-info" :class="{ 'no-delete': required && approvers.length <= 1 }">
-                                    <span class="approver-name">{{ approver.name }}</span>
-                                    <t-icon v-if="!required || approvers.length > 1" name="close" size="16px"
-                                        @click="removeEmployee(approver, 'approver')" />
-                                </div>
-                            </div>
-                            <t-icon v-if="index < approvers.length - 1" name="chevron-right" class="arrow-icon" />
-                        </template>
-                        <t-button theme="default" variant="text" @click="handleAddApprover" v-if="canEdit">
-                            <template #icon>
-                                <t-icon name="add" />
-                            </template>
-                            添加审批人
-                        </t-button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 抄送人部分 -->
-            <div v-if="showCC" class="cc-section">
-                <div class="section-header">
-                    <t-icon name="user-add" class="section-icon" />
-                    <span class="section-title">抄送人</span>
-                </div>
-                <div class="cc-list">
-                    <div class="cc-row">
-                        <template v-for="(cc, index) in ccEmployees" :key="index">
-                            <div class="cc-item">
-                                <t-avatar :image="cc.avatar" size="small">
-                                    {{ getAvatarText(cc.name) }}
-                                </t-avatar>
-                                <div class="user-info">
-                                    <span class="cc-name">{{ cc.name }}</span>
-                                    <t-icon name="close" size="16px" @click="removeEmployee(cc, 'cc')" />
-                                </div>
-                            </div>
-                        </template>
-                        <t-button theme="default" variant="text" @click="handleAddCC" v-if="canEdit">
-                            <template #icon>
-                                <t-icon name="add" />
-                            </template>
-                            添加抄送人
-                        </t-button>
-                    </div>
-                </div>
-            </div>
-        </t-card>
-
-        <!-- 审批人选择弹窗 -->
-        <ebiz-employee-selector  :showDefault="false" v-model:visible="showApproverSelector" v-model:value="tempApprover"
-            @change="handleApproverSelect" :single="true" />
-        <ebiz-employee-selector  :showDefault="false" v-model:visible="showCCSelector" v-model:value="selectedCC" @change="handleCCSelect"
-        />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, computed } from 'vue'
-import { Icon as TIcon, Avatar as TAvatar, Card as TCard, Button as TButton, Dialog as TDialog } from 'tdesign-vue-next'
-import EbizEmployeeSelector from './EbizEmployeeSelector.vue'
-import dataService from '../apiService/simpleDataService'
-
-interface Employee {
-  id: string | number
-  name: string
-  no: string
-  avatar?: string
-}
-
-interface Props {
-  approverList: (string | number)[] // 选中的审批人ID列表
-  ccList: (string | number)[] // 选中的抄送人ID列表
-  key: string // 审批流程的唯一标识
-  id: number // 审批流程的编号
-  required: boolean // 是否必填
-  type?: 'organization' | 'role' | 'all' // 查询类型
-  value?: string // 查询值
-  showRootOrg?: boolean // 是否显示顶层组织
-  childDeptEnable?: boolean // 是否包含子部门
-  showCC?: boolean // 是否显示抄送人模块
-  canEdit?: boolean // 是否可以编辑审批人,抄送人
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  approverList: () => [],
-  ccList: () => [],
-  key: '',
-  id: 0,
-  required: true,
-  showRootOrg: true,
-  childDeptEnable: false,
-  showCC: true,
-  canEdit: true
-})
-
-const emit = defineEmits(['update:approverList', 'update:ccList', 'change'])
-
-const fetchHistory = () => {
-    dataService.fetch({
-        bussinessKey: props.id?props.id.toString():null,
-        type: props.key
-    }, {}, '/tasks/process/detail').then(res=>{
-        selectedApprover.value = res?.variables?.form?.approverList ?? [];
-        selectedCC.value = res?.variables?.form?.ccList ?? [];
-        if(!selectedApprover.value.length){
-          dataService.fetch({
-            apiKey: "offer_Application"
-          }, {},"/appdata/process?key=offer_Application").then(res=>{
-            selectedApprover.value = res?.data?.at(0)?.approve_list || [];
-          })
-        }
-    })
-}
-
-
-// 状态变量
-const showApproverSelector = ref(false)
-const showCCSelector = ref(false)
-const employeeList = ref<Employee[]>([])
-const loading = ref(false)
-const tempApprover = ref([])
-// 计算属性：已选审批人列表
-const approvers = ref<Employee[]>([])
-
-// 计算属性：已选抄送人列表
-const ccEmployees = ref<Employee[]>([])
-
-// 计算属性：审批人选择器的值
-const selectedApprover = computed({
-  get: () => props.approverList,
-  set: (val) => {
-    approvers.value = val.map(id => employeeList.value.find(emp => emp.id == id)).filter(Boolean)
-    console.log(approvers.value,val)
-    emit('change', {
-      type: 'approver',
-      ids: val,
-      employees: approvers.value
-    })
-    emit('update:approverList', val)
-  }
-})
-
-// 计算属性：抄送人选择器的值
-const selectedCC = computed({
-  get: () => props.ccList,
-  set: (val) => {
-
-    ccEmployees.value = val.map(id => employeeList.value.find(emp => emp.id == id)).filter(Boolean)
-    console.log(ccEmployees.value,161,val)
-    emit('change', {
-      type: 'cc',
-      ids: val,
-      employees: ccEmployees.value
-    })
-    emit('update:ccList', val)
-  }
-})
-
-// 获取头像文字
-const getAvatarText = (name: string) => {
-  return name ? name.charAt(0) : ''
-}
-
-// 获取员工列表
-const fetchEmployeeList = async () => {
-  loading.value = true
-  try {
-    const response = await dataService.fetch(
-      {},
-      {},
-      '/process/userList'
-    )
-    employeeList.value = response || [];
-      if(props.id) {
-        fetchHistory();
-      }
-  } catch (error) {
-    employeeList.value = []
-  } finally {
-    loading.value = false
-  }
-}
-
-// 处理审批人选择
-const handleApproverSelect = (data: []) => {
-  console.log(data,195)
-  if(!data[0]) return;
-  if(selectedApprover.value.includes(data[0])) {
-    let index = selectedApprover.value.indexOf(data[0]);
-    selectedApprover.value.splice(index, 1);
-  };
-  selectedApprover.value = [...selectedApprover.value, data[0]];
-  console.log(selectedApprover.value,200)
-   tempApprover.value = [];
-}
-
-// 处理抄送人选择
-const handleCCSelect = (data: []) => {
-  selectedCC.value = data;
-}
-
-// 移除人员
-const removeEmployee = (employee: Employee, type: 'approver' | 'cc') => {
-  if (type === 'approver') {
-    if (props.required && props.approverList.length <= 1) {
-      return
-    }
-    const newList = props.approverList.filter(id => id !== employee.id);
-    selectedApprover.value = newList;
-  } else {
-    const newList = props.ccList.filter(id => id !== employee.id);
-    selectedCC.value = newList;
-  }
-}
-
-// 处理添加审批人
-const handleAddApprover = () => {
-  showApproverSelector.value = true
-}
-
-// 处理添加抄送人
-const handleAddCC = () => {
-  showCCSelector.value = true
-}
-
-
-// 监听查询条件变化
-watch([() => props.type, () => props.value, () => props.showRootOrg, () => props.childDeptEnable], () => {
-  fetchEmployeeList()
-}, { immediate: true })
-</script>
-
-<style lang="less" scoped>
-.ebiz-approval {
-  .approval-section {
-    margin-bottom: 24px;
-  }
-
-  .approval-title {
-    font-size: 16px;
-    font-weight: 500;
-    margin-bottom: 16px;
-  }
-
-  .section-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 16px;
-
-    .section-icon {
-      margin-right: 8px;
-    }
-
-    .section-title {
-      font-size: 14px;
-      color: var(--td-text-color-primary);
-
-      .required {
-        color: var(--td-error-color);
-        margin-left: 4px;
-      }
-    }
-  }
-
-  .approver-list,
-  .cc-list {
-    .approver-row,
-    .cc-row {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-
-    .approver-item,
-    .cc-item {
-      display: flex;
-      align-items: center;
-      padding: 4px 8px;
-      background: var(--td-bg-color-container);
-      border: 1px solid var(--td-component-border);
-      border-radius: 3px;
-
-      .user-info {
-        margin-left: 8px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        cursor: pointer;
-        user-select: none;
-        &.no-delete {
-          margin-right: 0;
-        }
-      }
-
-      .approver-name,
-      .cc-name {
-        font-size: 14px;
-        color: var(--td-text-color-primary);
-      }
-    }
-
-    .arrow-icon {
-      color: var(--td-text-color-secondary);
-    }
-  }
-
-  .cc-section {
-    margin-top: 24px;
-  }
-}
+<template>
+    <div class="ebiz-approval">
+        <t-card>
+            <!-- 审批人部分 -->
+            <div class="approval-section">
+                <div class="approval-title">审批流程</div>
+
+                <div class="section-header">
+                    <t-icon name="user" class="section-icon" />
+                    <span class="section-title">
+                        审批人
+                        <span class="required" v-if="required">*</span>
+                    </span>
+                </div>
+                <div class="approver-list">
+                    <div class="approver-row" v-if="props.type != 'limited'">
+                        <template v-for="(approver, index) in approvers" :key="index">
+                            <div class="approver-item">
+                                <t-avatar :image="approver.avatar" size="small">
+                                    {{ getAvatarText(approver.name) }}
+                                </t-avatar>
+                                <div class="user-info">
+                                    <span class="approver-name">{{ approver.name }}</span>
+                                    <t-icon name="close" size="16px"
+                                        @click="removeEmployee(approver.id, 'approver')" />
+                                </div>
+                            </div>
+                            <t-icon v-if="index < approvers.length - 1" name="chevron-right" class="arrow-icon" />
+                        </template>
+                        <t-button theme="default" variant="text" @click="handleAddApprover" v-if="canEdit">
+                            <template #icon>
+                                <t-icon name="add" />
+                            </template>
+                            添加审批人
+                        </t-button>
+                    </div>
+                  <div v-else class="approver-row">
+                    <div style="display:flex;align-items:center" v-for="(i,inx) in props.limitedMap" :key="inx">
+                      <template v-if="approvers[inx]">
+                        <div class="approver-item">
+                          <t-avatar :image="approvers[inx].avatar" size="small">
+                            {{ getAvatarText(approvers[inx].name) }}
+                          </t-avatar>
+                          <div class="user-info">
+                            <span class="approver-name">{{ approvers[inx].name }}</span>
+                            <t-icon name="close" size="16px"
+                                    @click="removeEmployee(inx, 'approver',true)" />
+                          </div>
+                        </div>
+                        <t-icon name="chevron-right" class="arrow-icon" v-if="inx!=props.limitedMap.length-1"/>
+                      </template>
+                      <t-button v-else theme="default" variant="text"  @click="addLimitedApprover(inx)" v-if="canEdit">
+                        <template #icon>
+                          <t-icon name="add" />
+                        </template>
+                        添加{{i.label}}
+                      </t-button>
+                      </div>
+                  </div>
+                </div>
+            </div>
+
+            <!-- 抄送人部分 -->
+            <div v-if="showCC" class="cc-section">
+                <div class="section-header">
+                    <t-icon name="user-add" class="section-icon" />
+                    <span class="section-title">抄送人</span>
+                </div>
+                <div class="cc-list">
+                    <div class="cc-row">
+                        <template v-for="(cc, index) in ccEmployees" :key="index">
+                            <div class="cc-item">
+                                <t-avatar :image="cc.avatar" size="small">
+                                    {{ getAvatarText(cc.name) }}
+                                </t-avatar>
+                                <div class="user-info">
+                                    <span class="cc-name">{{ cc.name }}</span>
+                                    <t-icon name="close" size="16px" @click="removeEmployee(cc.id, 'cc')" />
+                                </div>
+                            </div>
+                        </template>
+                        <t-button theme="default" variant="text" @click="handleAddCC" v-if="canEdit">
+                            <template #icon>
+                                <t-icon name="add" />
+                            </template>
+                            添加抄送人
+                        </t-button>
+                    </div>
+                </div>
+            </div>
+        </t-card>
+
+        <!-- 审批人选择弹窗 -->
+        <ebiz-employee-selector  :showDefault="false" v-model:visible="showApproverSelector" v-model:value="tempApprover"
+            @change="handleApproverSelect" :single="true" />
+        <ebiz-employee-selector  :showDefault="false" v-model:visible="showCCSelector" v-model:value="selectedCC" @change="handleCCSelect"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { Icon as TIcon, Avatar as TAvatar, Card as TCard, Button as TButton, Dialog as TDialog } from 'tdesign-vue-next'
+import EbizEmployeeSelector from './EbizEmployeeSelector.vue'
+import dataService from '../apiService/simpleDataService'
+
+interface Employee {
+  id: string | number
+  name: string
+  no: string
+  avatar?: string
+}
+
+interface LimitItem{
+  label:string,
+  value:string
+}
+
+interface Props {
+  approverList: (string | number)[] // 选中的审批人ID列表
+  ccList: (string | number)[] // 选中的抄送人ID列表
+  key: string // 审批流程的唯一标识
+  id: number // 审批流程的编号
+  required: boolean // 是否必填
+  type?: 'organization' | 'role' | 'all' | 'limited' // 查询类型
+  limitedType?:'organization' | 'role'
+  limitedMap?:LimitItem[]
+  value?: string // 查询值
+  showRootOrg?: boolean // 是否显示顶层组织
+  childDeptEnable?: boolean // 是否包含子部门
+  showCC?: boolean // 是否显示抄送人模块
+  canEdit?: boolean // 是否可以编辑审批人,抄送人
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  approverList: () => [],
+  ccList: () => [],
+  key: '',
+  id: 0,
+  limitedType:'role',
+  limitedMap:()=>[],
+  required: true,
+  showRootOrg: true,
+  childDeptEnable: false,
+  showCC: true,
+  canEdit: true
+})
+
+const emit = defineEmits(['update:approverList', 'update:ccList', 'change'])
+
+const fetchHistory = () => {
+    dataService.fetch({
+        bussinessKey: props.id?props.id.toString():null,
+        type: props.key
+    }, {}, '/tasks/process/detail').then(res=>{
+        selectedApprover.value = res?.variables?.form?.approverList ?? [];
+        selectedCC.value = res?.variables?.form?.ccList ?? [];
+        if(!selectedApprover.value.length){
+          dataService.fetch({
+            apiKey: "offer_Application"
+          }, {},"/appdata/process?key=offer_Application").then(res=>{
+            selectedApprover.value = res?.data?.at(0)?.approve_list || [];
+          })
+        }
+    })
+}
+
+// 状态变量
+const showApproverSelector = ref(false)
+const showCCSelector = ref(false)
+const employeeList = ref<Employee[]>([])
+const loading = ref(false)
+const tempApprover = ref([])
+// 计算属性：已选审批人列表
+const approvers = ref<Employee[]>([])
+
+// 计算属性：已选抄送人列表
+const ccEmployees = ref<Employee[]>([])
+
+// 计算属性：审批人选择器的值
+const selectedApprover = computed({
+  get: () => props.approverList,
+  set: (val) => {
+    approvers.value = val.map(id => employeeList.value.find(emp => emp.id == id) || null)
+    emit('change', {
+      type: 'approver',
+      ids: val,
+      employees: approvers.value
+    })
+    emit('update:approverList', val)
+  }
+})
+
+// 计算属性：抄送人选择器的值
+const selectedCC = computed({
+  get: () => props.ccList,
+  set: (val) => {
+    ccEmployees.value = val.map(id => employeeList.value.find(emp => emp.id == id)).filter(Boolean)
+    console.log(ccEmployees.value,161,val)
+    emit('change', {
+      type: 'cc',
+      ids: val,
+      employees: ccEmployees.value
+    })
+    emit('update:ccList', val)
+  }
+})
+
+// 获取头像文字
+const getAvatarText = (name: string) => {
+  return name ? name.charAt(0) : ''
+}
+
+// 获取员工列表
+const fetchEmployeeList = async () => {
+  loading.value = true
+  if(props.type === 'limited') {
+    switch(props.limitedType) {
+      case 'organization':
+        break;
+      case 'role':{
+        Promise.all(props.limitedMap.map(i=>dataService.fetch({
+          roleKeyWord:i.value
+        },{},'/process/userList'))).then(res=>{
+          selectedApprover.value = new Array(res.length).fill(0);
+        })
+        break;
+      }
+    }
+  }
+  try {
+    const response = await dataService.fetch(
+      {},
+      {},
+      '/process/userList'
+    )
+    employeeList.value = response || [];
+      if(props.id) {
+        fetchHistory();
+      }
+  } catch (error) {
+    employeeList.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+// 处理审批人选择
+const handleApproverSelect = (data: []) => {
+  if(!data[0]) return;
+  if(props.type === 'limited') {
+    selectedApprover.value[nowAdd.value] = data[0];
+    selectedApprover.value = [...selectedApprover.value];
+    nowAdd.value = 0;
+    tempApprover.value = [];
+    return;
+  }
+  if(selectedApprover.value.includes(data[0])) {
+    let index = selectedApprover.value.indexOf(data[0]);
+    selectedApprover.value.splice(index, 1);
+  };
+  selectedApprover.value = [...selectedApprover.value, data[0]];
+   tempApprover.value = [];
+}
+
+// 处理抄送人选择
+const handleCCSelect = (data: []) => {
+  selectedCC.value = data;
+}
+
+// 移除人员
+const removeEmployee = (idOrInx: any, type: 'approver' | 'cc',isLimited=false) => {
+  if (type === 'approver') {
+    if(isLimited) {
+      selectedApprover.value[idOrInx] = 0;
+      selectedApprover.value = [...selectedApprover.value];
+      return;
+    }
+    const newList = props.approverList.filter(id => id !== idOrInx);
+    selectedApprover.value = newList;
+  } else {
+    const newList = props.ccList.filter(id => id !== idOrInx);
+    selectedCC.value = newList;
+  }
+}
+
+const nowAdd =ref(0);
+
+const addLimitedApprover = (inx:number) => {
+  nowAdd.value = inx;
+  showApproverSelector.value = true;
+}
+
+// 处理添加审批人
+const handleAddApprover = () => {
+  showApproverSelector.value = true
+}
+
+// 处理添加抄送人
+const handleAddCC = () => {
+  showCCSelector.value = true
+}
+
+
+// 监听查询条件变化
+watch([() => props.type, () => props.value, () => props.showRootOrg, () => props.childDeptEnable], () => {
+  fetchEmployeeList()
+}, { immediate: true })
+</script>
+
+<style lang="less" scoped>
+.ebiz-approval {
+  .approval-section {
+    margin-bottom: 24px;
+  }
+
+  .approval-title {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 16px;
+  }
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .section-icon {
+      margin-right: 8px;
+    }
+
+    .section-title {
+      font-size: 14px;
+      color: var(--td-text-color-primary);
+
+      .required {
+        color: var(--td-error-color);
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .approver-list,
+  .cc-list {
+    .approver-row,
+    .cc-row {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .approver-item,
+    .cc-item {
+      display: flex;
+      align-items: center;
+      padding: 4px 8px;
+      background: var(--td-bg-color-container);
+      border: 1px solid var(--td-component-border);
+      border-radius: 3px;
+
+      .user-info {
+        margin-left: 8px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        user-select: none;
+        &.no-delete {
+          margin-right: 0;
+        }
+      }
+
+      .approver-name,
+      .cc-name {
+        font-size: 14px;
+        color: var(--td-text-color-primary);
+      }
+    }
+
+    .arrow-icon {
+      color: var(--td-text-color-secondary);
+    }
+  }
+
+  .cc-section {
+    margin-top: 24px;
+  }
+}
 </style>