@ebiz/designer-components 0.1.13 → 0.1.15

package/package.json

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

package/src/components/EbizApproval.vue

@@ -1,101 +1,77 @@
 <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 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 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>
+              <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>
-
-            <!-- 抄送人部分 -->
-            <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>
+              </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" @change="handleApproverSelect"
+      :single="true" />
+    <ebiz-employee-selector :showDefault="false" v-model:visible="showCCSelector" @change="handleCCSelect" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -111,20 +87,13 @@ 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' | 'limited' // 查询类型
-  limitedType?:'organization' | 'role'
-  limitedMap?:LimitItem[]
+  type?: 'organization' | 'role' | 'all' // 查询类型
   value?: string // 查询值
   showRootOrg?: boolean // 是否显示顶层组织
   childDeptEnable?: boolean // 是否包含子部门
@@ -137,8 +106,6 @@ const props = withDefaults(defineProps<Props>(), {
   ccList: () => [],
   key: '',
   id: 0,
-  limitedType:'role',
-  limitedMap:()=>[],
   required: true,
   showRootOrg: true,
   childDeptEnable: false,
@@ -149,22 +116,23 @@ const props = withDefaults(defineProps<Props>(), {
 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 || [];
-          })
-        }
-    })
+  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)
@@ -181,7 +149,8 @@ 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)
+    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,
@@ -195,8 +164,9 @@ 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)
+    console.log(ccEmployees.value, 161, val)
     emit('change', {
       type: 'cc',
       ids: val,
@@ -214,20 +184,6 @@ 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(
       {},
@@ -235,9 +191,9 @@ const fetchEmployeeList = async () => {
       '/process/userList'
     )
     employeeList.value = response || [];
-      if(props.id) {
-        fetchHistory();
-      }
+    if (props.id) {
+      fetchHistory();
+    }
   } catch (error) {
     employeeList.value = []
   } finally {
@@ -247,20 +203,15 @@ const fetchEmployeeList = async () => {
 
 // 处理审批人选择
 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])) {
+  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]];
-   tempApprover.value = [];
+  console.log(selectedApprover.value, 200)
+  tempApprover.value = [];
 }
 
 // 处理抄送人选择
@@ -269,28 +220,19 @@ const handleCCSelect = (data: []) => {
 }
 
 // 移除人员
-const removeEmployee = (idOrInx: any, type: 'approver' | 'cc',isLimited=false) => {
+const removeEmployee = (employee: Employee, type: 'approver' | 'cc') => {
   if (type === 'approver') {
-    if(isLimited) {
-      selectedApprover.value[idOrInx] = 0;
-      selectedApprover.value = [...selectedApprover.value];
-      return;
+    if (props.required && props.approverList.length <= 1) {
+      return
     }
-    const newList = props.approverList.filter(id => id !== idOrInx);
+    const newList = props.approverList.filter(id => id !== employee.id);
     selectedApprover.value = newList;
   } else {
-    const newList = props.ccList.filter(id => id !== idOrInx);
+    const newList = props.ccList.filter(id => id !== employee.id);
     selectedCC.value = newList;
   }
 }
 
-const nowAdd =ref(0);
-
-const addLimitedApprover = (inx:number) => {
-  nowAdd.value = inx;
-  showApproverSelector.value = true;
-}
-
 // 处理添加审批人
 const handleAddApprover = () => {
   showApproverSelector.value = true
@@ -342,6 +284,7 @@ watch([() => props.type, () => props.value, () => props.showRootOrg, () => props
 
   .approver-list,
   .cc-list {
+
     .approver-row,
     .cc-row {
       display: flex;
@@ -366,6 +309,7 @@ watch([() => props.type, () => props.value, () => props.showRootOrg, () => props
         gap: 8px;
         cursor: pointer;
         user-select: none;
+
         &.no-delete {
           margin-right: 0;
         }
@@ -387,4 +331,4 @@ watch([() => props.type, () => props.value, () => props.showRootOrg, () => props
     margin-top: 24px;
   }
 }
-</style> 
+</style>