af-mobile-client-vue3 1.0.70 → 1.0.71

package/src/components/data/XCellList/index.vue

@@ -1,22 +1,23 @@
 <script setup lang="ts">
-import {computed, defineEmits, defineProps, ref, watch} from 'vue'
+import { computed, defineEmits, defineProps, ref, watch } from 'vue'
 import {
   BackTop as VanBackTop,
+  Button as VanButton,
   Col as VanCol,
   List as VanList,
+  Popover as VanPopover,
   PullRefresh as VanPullRefresh,
   Row as VanRow,
   Search as VanSearch,
-  Button as VanButton,
   Space as VanSpace,
-  Popover as VanPopover,
+  showConfirmDialog,
 } from 'vant'
 import XBadge from '@af-mobile-client-vue3/components/data/XBadge/index.vue'
-import {getConfigByName, query} from '@af-mobile-client-vue3/services/api/common'
+import { getConfigByName, query } from '@af-mobile-client-vue3/services/api/common'
 import LoadError from '@af-mobile-client-vue3/views/common/LoadError.vue'
 import XCellListFilter from '@af-mobile-client-vue3/components/data/XCellListFilter/index.vue'
 
-const {configName, serviceName} = withDefaults(defineProps<{
+const { configName, serviceName } = withDefaults(defineProps<{
   configName?: string
   fixQueryForm?: object
   idKey?: string
@@ -28,7 +29,7 @@ const {configName, serviceName} = withDefaults(defineProps<{
   serviceName: undefined,
 })
 
-const emit = defineEmits(['toDetail'])
+const emit = defineEmits(['toDetail', 'addOption'])
 
 const orderVal = ref(undefined)
 
@@ -49,6 +50,9 @@ const detailColumns = ref([])
 // 底部列
 const footColumns = ref([])
 
+// 所有的复杂操作列
+const allActions = ref([])
+
 // 复杂操作列前三项
 const mainActions = ref([])
 
@@ -91,6 +95,9 @@ const isLastPage = ref(false)
 
 const conditionParams = ref(undefined)
 
+// 主要按钮的状态
+const buttonState = ref(undefined)
+
 initComponent()
 
 // 组件初始化
@@ -102,28 +109,21 @@ function initComponent() {
       if (item.slotType === 'badge')
         item.dictName = item.slotKeyMap
 
-      if (item.mobileColumnType === 'mobile_header_column')
+      if (item.mobileColumnType === 'mobile_header_column') {
         mainColumns.value.push(item)
-
-      else if (item.mobileColumnType === 'mobile_subtitle_column')
+      }
+      else if (item.mobileColumnType === 'mobile_subtitle_column') {
         subTitleColumns.value.push(item)
-
-      else if (item.mobileColumnType === 'mobile_details_column')
+      }
+      else if (item.mobileColumnType === 'mobile_details_column') {
         detailColumns.value.push(item)
-
-      else if (item.mobileColumnType === 'mobile_footer_column')
+      }
+      else if (item.mobileColumnType === 'mobile_footer_column') {
         footColumns.value.push(item)
-
-      else if (item.slotType === 'action') {
-        if (item.actionArr) {
-          for (let j = 0; j < item.actionArr.length; j++) {
-            if (j < 3){
-              mainActions.value.push({text: item.actionArr[j].text, func: item.actionArr[j].func})
-            }else {
-              otherActions.value.push({text: item.actionArr[j].text, func: item.actionArr[j].func})
-            }
-          }
-        }
+      }
+      else if (item.slotType === 'action' && item.actionArr) {
+        for (let j = 0; j < item.actionArr.length; j++)
+          allActions.value.push({ text: item.actionArr[j].text, func: item.actionArr[j].func })
       }
 
       if (result.showSortIcon && item.sortable) {
@@ -135,7 +135,16 @@ function initComponent() {
     }
     configContent.value = result
     formQueryList.value = result.formJson
-  },serviceName)
+
+    if (result.buttonState) {
+      buttonState.value = result.buttonState
+      if (buttonState.value.edit && buttonState.value.edit === true)
+        allActions.value.push({ text: '修改', func: 'updateRow' })
+      if (buttonState.value.delete && buttonState.value.delete === true)
+        allActions.value.push({ text: '删除', func: 'deleteRow' })
+    }
+    splitArrayAt(allActions.value, 3)
+  }, serviceName)
 }
 
 // 刷新数据
@@ -178,7 +187,6 @@ function onLoad() {
       if (res.data.length === 0)
         isLastPage.value = true
 
-
       for (const item of res.data)
         list.value.push(item)
       if (list.value.length >= res.totalCount)
@@ -197,6 +205,12 @@ function onLoad() {
   }
 }
 
+// 区分主要操作列与其他操作列
+function splitArrayAt<T>(array: T[], index: number) {
+  mainActions.value = array.slice(0, index)
+  otherActions.value = array.slice(index)
+}
+
 watch(() => searchValue.value, (newVal) => {
   if (newVal === '')
     onRefresh()
@@ -217,19 +231,37 @@ function handleFunctionStyle(funcString, param) {
     const func = new Function(paramName, matches[2])
 
     return func(param)
-  } catch (error) {
+  }
+  catch (error) {
     return {}
   }
 }
 
 // 逆序排列主要按钮
-const reversedMainActions = computed(()=>{
+const reversedMainActions = computed(() => {
   return [...mainActions.value].reverse()
 })
 
 // 设置 Popover 的事件
-const onSelectMenu = (item:any,event:any) => {
-  emit(event.func,item)
+function onSelectMenu(item: any, event: any) {
+  if (event.text === '删除') {
+    showConfirmDialog({
+      title: '删除',
+      message:
+        '请确认是否删除！！！',
+    }).then(() => {
+      emit(event.func, item)
+    }).catch(() => {
+    })
+  }
+  else {
+    emit(event.func, item)
+  }
+}
+
+// 抛出新增按钮的事件
+function addOption() {
+  emit('addOption', totalCount.value)
 }
 </script>
 
@@ -244,14 +276,16 @@ const onSelectMenu = (item:any,event:any) => {
           @search="onRefresh"
         />
       </VanCol>
-      <VanCol span="2">
+      <VanCol span="2" class = "search-icon">
         <XCellListFilter
           v-model:sortord-val="sortordVal"
           v-model:order-val="orderVal"
           v-model:condition-params="conditionParams"
           :order-list="orderList"
           :form-query="formQueryList"
+          :button-state="buttonState"
           @on-refresh="onRefresh"
+          @add-option="addOption"
         />
       </VanCol>
     </VanRow>
@@ -268,16 +302,22 @@ const onSelectMenu = (item:any,event:any) => {
             <div v-for="(item, index) in list" :key="`card_${index}`" class="card_item_main">
               <VanRow gutter="20" class="card_item_header" align="center" @click="emit('toDetail', item)">
                 <VanCol v-for="(column) in mainColumns" :key="`main_${column.dataIndex}`" :span="18">
-                  <p class="card_item_title"
-                     :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])">
+                  <p
+                    class="card_item_title"
+                    :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
+                  >
                     {{ item[column.dataIndex] ? item[column.dataIndex] : '--' }}
                   </p>
                 </VanCol>
                 <VanCol v-for="(column) in subTitleColumns" :key="`subtitle_${column.dataIndex}`" :span="6">
-                  <p class="card_item_subtitle"
-                     :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])">
-                    <XBadge :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
-                            :dict-name="column.dictName" :dict-value="item[column.dataIndex]"/>
+                  <p
+                    class="card_item_subtitle"
+                    :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
+                  >
+                    <XBadge
+                      :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
+                      :dict-name="column.dictName" :dict-value="item[column.dataIndex]"
+                    />
                   </p>
                 </VanCol>
               </VanRow>
@@ -285,10 +325,12 @@ const onSelectMenu = (item:any,event:any) => {
                 <VanCol v-for="column of detailColumns" :key="`details_${column.dataIndex}`" :span="column.span">
                   <p>
                     <span :style="handleFunctionStyle(column.styleFunctionForTitle, item[column.dataIndex])">{{
-                        column.title
-                      }}: </span>
-                    <XBadge :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
-                            :dict-name="column.dictName" :dict-value="item[column.dataIndex]"/>
+                      column.title
+                    }}: </span>
+                    <XBadge
+                      :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
+                      :dict-name="column.dictName" :dict-value="item[column.dataIndex]"
+                    />
                   </p>
                 </VanCol>
               </VanRow>
@@ -296,30 +338,41 @@ const onSelectMenu = (item:any,event:any) => {
                 <VanCol v-for="column of footColumns" :key="`foot_${column.dataIndex}`" :span="12">
                   <p>
                     <span :style="handleFunctionStyle(column.styleFunctionForTitle, item[column.dataIndex])">{{
-                        column.title
-                      }}: </span>
-                    <XBadge :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
-                            :dict-name="column.dictName" :dict-value="item[column.dataIndex]"/>
+                      column.title
+                    }}: </span>
+                    <XBadge
+                      :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
+                      :dict-name="column.dictName" :dict-value="item[column.dataIndex]"
+                    />
                   </p>
                 </VanCol>
               </VanRow>
-              <VanRow gutter="20" class="card_item_bottom">
+              <VanRow v-if="allActions.length > 0" gutter="20" class="card_item_bottom">
                 <VanCol span="4">
                   <VanPopover
                     v-model:show="showPopover[index]"
                     placement="bottom-start"
                     :actions="otherActions"
-                    @select="onSelectMenu(item,$event)"
+                    @select="onSelectMenu(item, $event)"
                   >
                     <template #reference>
-                      <VanButton v-show="otherActions && otherActions.length != 0" class="custom-button" size="small" icon="ellipsis" type="default"/>
+                      <VanButton
+                        v-show="otherActions && otherActions.length !== 0" class="custom-button" size="small"
+                        icon="ellipsis" type="default"
+                      />
                     </template>
                   </VanPopover>
                 </VanCol>
                 <VanCol span="20">
                   <VanRow justify="end">
                     <VanSpace>
-                      <VanButton v-for="button in reversedMainActions" type="primary" size="small" @click="emit(button.func,item)">
+                      <VanButton
+                        v-for="button in reversedMainActions"
+                        :key="button.func"
+                        type="primary"
+                        size="small"
+                        @click="emit(button.func, item)"
+                      >
                         {{ button.text }}
                       </VanButton>
                     </VanSpace>
@@ -330,10 +383,10 @@ const onSelectMenu = (item:any,event:any) => {
           </VanList>
         </template>
         <template v-else>
-          <LoadError/>
+          <LoadError />
         </template>
       </VanPullRefresh>
-      <VanBackTop/>
+      <VanBackTop />
     </div>
   </div>
 </template>
@@ -341,7 +394,7 @@ const onSelectMenu = (item:any,event:any) => {
 <style scoped lang="less">
 #XCellList {
   height: calc(94vh - var(--van-nav-bar-height) - 5px);
-
+  --van-search-padding:5px;
   .main {
     overflow-y: auto;
     height: 100%;
@@ -403,15 +456,21 @@ const onSelectMenu = (item:any,event:any) => {
 
   .filter-condition {
     :deep(.van-search) {
-      padding: 0 var(--van-search-padding);
+      padding: var(--van-search-padding);
+    }
+    .search-icon{
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
-
     :deep(.van-search__content) {
       border-radius: 8px;
     }
-    .title-search {
-      height: 4vh;
-    }
+
+    //.title-search {
+    //  height: 4vh;
+    //}
+
     :deep(.van-dropdown-menu__bar) {
       height: calc(4vh - 4px);
       box-shadow: none;