@ebiz/designer-components 0.1.12 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/EbizApproval.vue

@@ -13,16 +13,16 @@
                     </span>
                 </div>
                 <div class="approver-list">
-                    <div class="approver-row">
+                    <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" :class="{ 'no-delete': required && approvers.length <= 1 }">
+                                <div class="user-info">
                                     <span class="approver-name">{{ approver.name }}</span>
-                                    <t-icon v-if="!required || approvers.length > 1" name="close" size="16px"
-                                        @click="removeEmployee(approver, 'approver')" />
+                                    <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" />
@@ -34,6 +34,29 @@
                             添加审批人
                         </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>
 
@@ -52,7 +75,7 @@
                                 </t-avatar>
                                 <div class="user-info">
                                     <span class="cc-name">{{ cc.name }}</span>
-                                    <t-icon name="close" size="16px" @click="removeEmployee(cc, 'cc')" />
+                                    <t-icon name="close" size="16px" @click="removeEmployee(cc.id, 'cc')" />
                                 </div>
                             </div>
                         </template>
@@ -88,13 +111,20 @@ interface Employee {
   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' // 查询类型
+  type?: 'organization' | 'role' | 'all' | 'limited' // 查询类型
+  limitedType?:'organization' | 'role'
+  limitedMap?:LimitItem[]
   value?: string // 查询值
   showRootOrg?: boolean // 是否显示顶层组织
   childDeptEnable?: boolean // 是否包含子部门
@@ -107,6 +137,8 @@ const props = withDefaults(defineProps<Props>(), {
   ccList: () => [],
   key: '',
   id: 0,
+  limitedType:'role',
+  limitedMap:()=>[],
   required: true,
   showRootOrg: true,
   childDeptEnable: false,
@@ -133,7 +165,6 @@ const fetchHistory = () => {
     })
 }
 
-
 // 状态变量
 const showApproverSelector = ref(false)
 const showCCSelector = ref(false)
@@ -150,8 +181,7 @@ 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)
+    approvers.value = val.map(id => employeeList.value.find(emp => emp.id == id) || null)
     emit('change', {
       type: 'approver',
       ids: val,
@@ -165,7 +195,6 @@ const selectedApprover = computed({
 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', {
@@ -185,6 +214,20 @@ const getAvatarText = (name: string) => {
 // 获取员工列表
 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(
       {},
@@ -204,14 +247,19 @@ const fetchEmployeeList = async () => {
 
 // 处理审批人选择
 const handleApproverSelect = (data: []) => {
-  console.log(data,195)
   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]];
-  console.log(selectedApprover.value,200)
    tempApprover.value = [];
 }
 
@@ -221,19 +269,28 @@ const handleCCSelect = (data: []) => {
 }
 
 // 移除人员
-const removeEmployee = (employee: Employee, type: 'approver' | 'cc') => {
+const removeEmployee = (idOrInx: any, type: 'approver' | 'cc',isLimited=false) => {
   if (type === 'approver') {
-    if (props.required && props.approverList.length <= 1) {
-      return
+    if(isLimited) {
+      selectedApprover.value[idOrInx] = 0;
+      selectedApprover.value = [...selectedApprover.value];
+      return;
     }
-    const newList = props.approverList.filter(id => id !== employee.id);
+    const newList = props.approverList.filter(id => id !== idOrInx);
     selectedApprover.value = newList;
   } else {
-    const newList = props.ccList.filter(id => id !== employee.id);
+    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