af-mobile-client-vue3 1.0.87 → 1.0.90

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.0.87",
+  "version": "1.0.90",
   "description": "Vue + Vite component lib",
   "license": "MIT",
   "engines": {

package/src/components/core/XSelect/index.vue

@@ -67,7 +67,7 @@ const resultLabel = computed({
       return ''
     const res = props.columns.filter((item) => {
       const data = props.offOption ? item : item[props.option.value]
-      return data === resultValue.value[0]
+      return data === resultValue.value
     })
     return res.length ? (props.offOption ? res[0] : res[0][props.option.text]) : ''
   },
@@ -89,8 +89,8 @@ function search(val) {
 }
 
 function onConfirm(value, _index) {
-  // resultValue.value = props.offOption ? value.selectedValues : value.selectedValues[0]
-  resultValue.value = value.selectedValues
+  resultValue.value = props.offOption ? value.selectedValues : value.selectedValues[0]
+  // resultValue.value = value.selectedValues
   selectedOption.value = value.selectedOptions
   show.value = !show.value
   emits('confirm', value.selectedValues[0], value.selectedOptions)

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

@@ -10,6 +10,7 @@ import {
   Row as VanRow,
   Search as VanSearch,
   Space as VanSpace,
+  Tag as VanTag,
   showConfirmDialog,
 } from 'vant'
 import XBadge from '@af-mobile-client-vue3/components/data/XBadge/index.vue'
@@ -30,7 +31,7 @@ const { configName, serviceName, fixQueryForm } = withDefaults(defineProps<{
   serviceName: undefined,
 })
 
-const emit = defineEmits(['toDetail', 'addOption'])
+const emit = defineEmits(['toDetail', 'addOption', 'handleCall', 'handleLocation'])
 
 const router = useRouter()
 
@@ -50,6 +51,9 @@ const subTitleColumns = ref([])
 // 详情列
 const detailColumns = ref([])
 
+// 标签列
+const tagList = ref([])
+
 // 底部列
 const footColumns = ref([])
 
@@ -85,7 +89,7 @@ const pageSize = 20
 
 const searchValue = ref('')
 
-const inputSpan = ref(22)
+const inputSpan = ref(20)
 
 // 数据加载状态
 const loading = ref(false)
@@ -132,6 +136,9 @@ function initComponent() {
       else if (item.mobileColumnType === 'mobile_footer_column') {
         footColumns.value.push(item)
       }
+      else if (item.mobileColumnType === 'mobile_tag_column') {
+        tagList.value.push(item)
+      }
       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 })
@@ -298,6 +305,16 @@ function addOption() {
   })
   // emit('addOption', totalCount.value)
 }
+
+// 处理拨打电话
+// function handleCall(item: any) {
+//   emit('handleCall', item)
+// }
+
+// 处理查看位置
+// function handleLocation(item: any) {
+//   emit('handleLocation', item)
+// }
 </script>
 
 <template>
@@ -308,10 +325,12 @@ function addOption() {
           v-model="searchValue"
           class="title-search"
           clearable
+          placeholder="搜索信息..."
+          shape="round"
           @search="onRefresh"
         />
       </VanCol>
-      <VanCol span="2" class="search-icon">
+      <VanCol span="4" class="search-icon">
         <XCellListFilter
           v-model:sortord-val="sortordVal"
           v-model:order-val="orderVal"
@@ -326,6 +345,7 @@ function addOption() {
         />
       </VanCol>
     </VanRow>
+    <slot name="search-after" />
     <div class="main">
       <VanPullRefresh v-model="refreshing" :success-text="finishedText" head-height="70" @refresh="onRefresh">
         <template v-if="!isError">
@@ -338,33 +358,49 @@ function addOption() {
           >
             <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])"
-                  >
-                    {{ 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]"
-                      :service-name="serviceName"
-                    />
-                  </p>
+                <VanCol :span="24">
+                  <div class="title-row">
+                    <div v-for="(column) in mainColumns" :key="`main_${column.dataIndex}`" class="main-title">
+                      <p
+                        class="card_item_title"
+                        :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
+                      >
+                        {{ item[column.dataIndex] ? item[column.dataIndex] : '--' }}
+                      </p>
+                    </div>
+                    <div v-for="(column) in subTitleColumns" :key="`subtitle_${column.dataIndex}`" class="sub-title">
+                      <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]"
+                          :service-name="serviceName"
+                        />
+                      </p>
+                    </div>
+                    <!-- <div class="action-buttons">
+                      <VanButton
+                        class="action-button"
+                        icon="phone"
+                        size="small"
+                        @click.stop="handleCall(item)"
+                      />
+                      <VanButton
+                        class="action-button"
+                        icon="location"
+                        size="small"
+                        @click.stop="handleLocation(item)"
+                      />
+                    </div> -->
+                  </div>
                 </VanCol>
               </VanRow>
               <VanRow gutter="20" class="card_item_details" @click="emit('toDetail', item)">
                 <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>
+                    {{ column.title }}：
                     <XBadge
                       :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
                       :dict-name="column.dictName" :dict-value="item[column.dataIndex]"
@@ -373,12 +409,40 @@ function addOption() {
                   </p>
                 </VanCol>
               </VanRow>
+              <VanRow v-if="tagList.length > 0" gutter="20" class="tag-row" @click="emit('toDetail', item)">
+                <VanCol :span="24">
+                  <div class="tag-container">
+                    <div class="tag-wrapper">
+                      <VanCol
+                        v-for="column of tagList"
+                        :key="`tag_${column.dataIndex}`"
+                        :span="column.flexSpan"
+                        class="tag-col"
+                      >
+                        <VanTag
+                          :text-color="column.tagColor"
+                          :color="column.tagBorderColor"
+                          round
+                          size="medium"
+                          class="tag-item"
+                        >
+                          {{ column.title }}：<XBadge
+                          :dict-name="column.dictName"
+                          :dict-value="item[column.dataIndex]"
+                          :service-name="serviceName"
+                        />
+                        </VanTag>
+                      </VanCol>
+                    </div>
+                  </div>
+                </VanCol>
+              </VanRow>
               <VanRow gutter="20" class="card_item_footer" @click="emit('toDetail', item)">
                 <VanCol v-for="column of footColumns" :key="`foot_${column.dataIndex}`" :span="12">
                   <p>
-                    <span :style="handleFunctionStyle(column.styleFunctionForTitle, item[column.dataIndex])">{{
-                      column.title
-                    }}: </span>
+                    <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]"
@@ -396,10 +460,12 @@ function addOption() {
                     @select="onSelectMenu(item, $event)"
                   >
                     <template #reference>
-                      <VanButton
-                        v-show="otherActions && otherActions.length !== 0" class="custom-button" size="small"
-                        icon="ellipsis" type="default"
-                      />
+                      <div
+                        v-show="otherActions && otherActions.length !== 0"
+                        class="more-button"
+                      >
+                        <span>⋯</span>
+                      </div>
                     </template>
                   </VanPopover>
                 </VanCol>
@@ -411,6 +477,7 @@ function addOption() {
                         :key="button.func"
                         type="primary"
                         size="small"
+                        class="action-btn"
                         @click="onSelectMenu(item, button)"
                       >
                         {{ button.text }}
@@ -457,14 +524,93 @@ function addOption() {
       .card_item_header {
         margin-bottom: var(--van-padding-base);
 
-        .card_item_title {
-          font-size: var(--van-font-size-lg);
+        .title-row {
+          display: flex;
+          align-items: center;
+          margin-bottom: 8px;
+          width: 100%;
+
+          .main-title {
+            display: inline-flex;
+            align-items: center;
+            .card_item_title {
+              font-size: var(--van-font-size-lg);
+              margin: 0;
+            }
+          }
+
+          .sub-title {
+            display: inline-flex;
+            align-items: center;
+            margin-left: 4px;
+            .card_item_subtitle {
+              font-size: var(--van-font-size-xs);
+              color: var(--van-text-color-2);
+              margin: 0;
+            }
+          }
+
+          .action-buttons {
+            display: flex;
+            align-items: center;
+            margin-left: auto;
+            .action-button {
+              margin-left: 4px;
+              width: 36px;
+              height: 36px;
+              padding: 0;
+              border: none;
+              color: var(--van-primary-color);
+              background-color: rgba(25, 137, 250, 0.3);
+              border-radius: 4px;
+              font-size: 20px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              &:active {
+                opacity: 0.7;
+                background-color: rgba(25, 137, 250, 0.5);
+              }
+            }
+          }
         }
+      }
 
-        .card_item_subtitle {
-          font-size: var(--van-font-size-xs);
-          color: var(--van-text-color-2);
-          text-align: right;
+      .tag-row {
+        margin-bottom: var(--van-padding-base);
+      }
+
+      .tag-container {
+        width: 100%;
+        .tag-wrapper {
+          display: flex;
+          flex-wrap: wrap;
+          padding: 0 !important;
+          align-items: center;
+          width: 100%;
+          margin: 0 -8px;
+
+          .tag-col {
+            display: flex;
+            align-items: center;
+            padding: 0 8px;
+            min-height: 32px;
+          }
+
+          .tag-item {
+            width: auto;
+            text-align: left;
+            font-size: var(--van-font-size-xs);
+            display: flex;
+            align-items: center;
+            margin: 4px 0;
+            justify-content: center;
+            :deep(.van-tag) {
+              width: fit-content;
+              display: inline-flex;
+              align-items: center;
+            }
+          }
         }
       }
 
@@ -495,50 +641,35 @@ function addOption() {
   }
 
   .filter-condition {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    background-color: #fff;
     :deep(.van-search) {
       padding: var(--van-search-padding);
-    }
-    .search-icon{
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100%;  // 确保高度与搜索框一致
-      padding: var(--van-search-padding);  // 使用与搜索框相同的内边距
+      background-color: transparent;
     }
     :deep(.van-search__content) {
-      border-radius: 8px;
-    }
-
-    //.title-search {
-    //  height: 4vh;
-    //}
-
-    :deep(.van-dropdown-menu__bar) {
-      height: calc(4vh - 4px);
-      box-shadow: none;
+      border-radius: 5px;
+      background-color: #f5f5f5;
+      padding: 4px 8px;
     }
-
-    :deep(.van-dropdown-menu__title) {
-      padding: 0;
+    :deep(.van-field__left-icon) {
+      color: #999;
     }
-
-    :deep(.van-dropdown-menu__title--down:after) {
-      display: none;
+    :deep(.van-cell) {
+      background-color: transparent;
     }
-
-    :deep(.van-dropdown-menu__title:after) {
-      display: none;
+    :deep(.van-field__control::placeholder) {
+      color: #999;
+      font-size: 14px;
     }
-
-    :deep(.van-dropdown-item__content) {
-      position: absolute;
-      max-height: var(--van-dropdown-menu-content-max-height);
-    }
-
-    :deep(.van-dropdown-menu__item) {
+    .search-icon {
       display: flex;
       align-items: center;
       justify-content: center;
+      height: 100%;
+      padding: var(--van-search-padding);
     }
   }
 
@@ -546,5 +677,31 @@ function addOption() {
     border: none !important;
     box-shadow: none !important;
   }
+
+  .more-button {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #666;
+    cursor: pointer;
+    font-size: 20px;
+    background-color: #f7f8fa;
+    border-radius: 4px;
+    span {
+      line-height: 1;
+      margin-top: -2px;
+    }
+    &:active {
+      opacity: 0.7;
+      background-color: #ebedf0;
+    }
+  }
+  .action-btn {
+    min-width: 80px;
+    border-radius: 20px;
+    font-size: 14px;
+  }
 }
 </style>

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

@@ -103,10 +103,12 @@ onMounted(() => {
 
 <template>
   <div id="XCellListFilter">
-    <VanDropdownMenu :close-on-click-outside="false">
+    <VanDropdownMenu :close-on-click-outside="false" class="filter-dropdown-menu">
       <VanDropdownItem ref="listFilterMenu">
         <template #title>
-          <VanIcon name="filter-o" size="23" />
+          <div class="filter-icon-box">
+            <VanIcon name="apps-o" size="24" class="filter-icon" />
+          </div>
         </template>
         <div class="order-condition">
           <template v-if="props.orderList.length > 0">
@@ -165,6 +167,25 @@ onMounted(() => {
 
 <style scoped lang="less">
 #XCellListFilter {
+  .filter-dropdown-menu {
+    :deep(.van-dropdown-menu__bar) {
+      box-shadow: none;
+      height: auto;
+    }
+    :deep(.van-dropdown-menu__item) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .filter-icon {
+    color: #333;
+    background-color: rgba(245,245,245);
+  }
+  .filter-icon-box {
+    border-radius: 10px;
+    background-color: rgba(245,245,245);
+  }
   .order-condition {
     // padding-bottom: 10px;
     max-height: calc(var(--van-picker-toolbar-height) + var(--van-padding-base) + var(--van-tabs-line-height) + 35vh);