af-mobile-client-vue3 1.0.54

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

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import {
+  Col as VanCol,
+  Icon as VanIcon,
+  Row as VanRow,
+  Skeleton as VanSkeleton,
+} from 'vant'
+import 'animate.css'
+
+const { title, describe, extra, loading, statusBar } = defineProps<{
+  title?: string
+  describe?: string
+  extra?: string
+  loading?: boolean
+  statusBar?: { icon: string, color: string }
+}>()
+</script>
+
+<template>
+  <div class="main">
+    <VanSkeleton title :row="20" :loading="loading" class="skeleton-box">
+      <VanIcon
+        v-if="statusBar"
+        :color="statusBar.color"
+        :name="statusBar.icon"
+        class="status-icon animate__animated animate__rotateInDownRight"
+        size="70"
+      />
+      <VanRow class="detail-header">
+        <VanCol span="16">
+          <slot name="detailHeaderTitle">
+            <div class="detail-header-title">
+              {{ title }}
+            </div>
+          </slot>
+          <slot name="detailHeaderDescribe">
+            <div class="detail-header-describe">
+              {{ describe }}
+            </div>
+          </slot>
+        </VanCol>
+        <VanCol span="8">
+          <span class="detail-header-extra">
+            {{ extra }}
+          </span>
+        </VanCol>
+      </VanRow>
+      <div class="detail-content-box">
+        <slot name="detailContent" />
+      </div>
+      <slot name="extraAction"/>
+    </VanSkeleton>
+  </div>
+</template>
+
+<style scoped lang="less">
+.main {
+  background-color: #f7f8fa;
+  overflow-y: auto;
+  height: 92vh;
+  .skeleton-box {
+    margin-top: 1vh;
+  }
+  .status-icon {
+    opacity: 0.5;
+    position: absolute;
+    top: 13vh;
+    right: 3vh;
+    transform: translate(-50%, -50%) rotate(-20deg);
+  }
+  .status-icon:before {
+    opacity: 0.5;
+    transform: rotate(-20deg);
+  }
+  .status-icon:after {
+    opacity: 0.5;
+    transform: rotate(-20deg);
+  }
+  .detail-header {
+    margin-top: 1vh;
+    padding: 1vh 2vh 1vh 2vh;
+    background-color: white;
+    .detail-header-title {
+      font-size: 15px;
+      margin-bottom: 5px;
+    }
+    .detail-header-describe {
+      font-size: 13px;
+      color: var(--van-text-color-2);
+    }
+    .detail-header-extra {
+      width: 100%;
+      display: inline-block;
+      text-align: right;
+      font-size: 28px;
+      color: #1989fa;
+      font-weight: bold;
+    }
+  }
+  .detail-content-box {
+    background-color: white;
+    margin-top: 1vh;
+    padding: 1vh 2vh 2vh 2vh;
+  }
+}
+</style>

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

@@ -0,0 +1,358 @@
+<script setup lang="ts">
+import { defineEmits, defineProps, ref, watch } from 'vue'
+import {
+  BackTop as VanBackTop,
+  Col as VanCol,
+  List as VanList,
+  PullRefresh as VanPullRefresh,
+  Row as VanRow,
+  Search as VanSearch,
+} 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 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<{
+  configName?: string
+  fixQueryForm?: object
+  idKey?: string
+  serviceName?: string
+}>(), {
+  configName: '',
+  fixQueryForm: null,
+  idKey: 'o_id',
+  serviceName: undefined,
+})
+
+const emit = defineEmits(['toDetail'])
+
+const orderVal = ref(undefined)
+
+const sortordVal = ref(undefined)
+
+// 配置内容
+const configContent = ref({})
+
+// 主列
+const mainColumns = ref([])
+
+// 副标题列
+const subTitleColumns = ref([])
+
+// 详情列
+const detailColumns = ref([])
+
+// 底部列
+const footColumns = ref([])
+
+// 数据集
+const list = ref([])
+
+// 排序集
+const orderList = ref([])
+
+// 表单查询数组
+const formQueryList = ref([])
+
+// 当前页数
+const pageNo = ref(1)
+
+// 每页数量
+const pageSize = 20
+
+const searchValue = ref('')
+
+const inputSpan = ref(22)
+
+// 数据加载状态
+const loading = ref(false)
+const refreshing = ref(false)
+const finished = ref(false)
+const isError = ref(false)
+const finishedText = ref('加载完成')
+// 避免查询多次
+const isLastPage = ref(false)
+
+const conditionParams = ref(undefined)
+
+initComponent()
+
+// 组件初始化
+function initComponent() {
+  getConfigByName(configName, (result) => {
+    for (let i = 0; i < result.columnJson.length; i++) {
+      const item = result.columnJson[i]
+      item.span = item.flexSpan
+      if (item.slotType === 'badge')
+        item.dictName = item.slotKeyMap
+
+      if (item.mobileColumnType === 'mobile_header_column')
+        mainColumns.value.push(item)
+
+      else if (item.mobileColumnType === 'mobile_subtitle_column')
+        subTitleColumns.value.push(item)
+
+      else if (item.mobileColumnType === 'mobile_details_column')
+        detailColumns.value.push(item)
+
+      else if (item.mobileColumnType === 'mobile_footer_column')
+        footColumns.value.push(item)
+
+      if (item.sortable) {
+        orderList.value.push({
+          title: item.title,
+          value: item.dataIndex,
+        })
+      }
+    }
+    if (orderList.value.length === 0)
+      inputSpan.value = 24
+    configContent.value = result
+    formQueryList.value = result.formJson
+  })
+}
+
+// 刷新数据
+function onRefresh() {
+  isError.value = false
+  setTimeout(() => {
+    // 重新加载数据
+    // 将 loading 设置为 true，表示处于加载状态
+    refreshing.value = true
+    finishedText.value = '加载完成'
+    finished.value = false
+    loading.value = true
+    onLoad()
+  }, 100)
+}
+
+// 加载数据
+function onLoad() {
+  if (refreshing.value) {
+    list.value = []
+    pageNo.value = 1
+    isLastPage.value = false
+  }
+  if (!isLastPage.value) {
+    let searchVal = searchValue.value
+    if (searchVal === '')
+      searchVal = undefined
+    query({
+      queryParamsName: configName,
+      pageNo: pageNo.value,
+      pageSize,
+      conditionParams: {
+        $queryValue: searchVal,
+        ...conditionParams.value,
+      },
+      sortField: orderVal?.value,
+      sortOrder: sortordVal?.value,
+    }, serviceName).then((res: any) => {
+      if (res.data.length === 0) {
+        isLastPage.value = true
+      }
+      for (const item of res.data)
+        list.value.push(item)
+      if (list.value.length >= res.totalCount)
+        finished.value = true
+      else
+        pageNo.value = pageNo.value + 1
+    }).catch(() => {
+      finishedText.value = ''
+      finished.value = true
+      isError.value = true
+    }).finally(() => {
+      // 加载状态结束
+      loading.value = false
+      refreshing.value = false
+    })
+  }
+}
+
+watch(() => searchValue.value, (newVal) => {
+  if (newVal === '')
+    onRefresh()
+})
+
+function handleFunctionStyle(funcString, param) {
+  try {
+    if (!funcString || funcString === '')
+      return {}
+
+    // 匹配参数名、函数体
+    const innerFuncRegex = /function\s+\w*\((\w+)\)\s*\{([\s\S]*)\}/
+    const matches = funcString.match(innerFuncRegex)
+
+    const paramName = matches[1] // 提取参数名
+
+    // eslint-disable-next-line no-new-func
+    const func = new Function(paramName, matches[2])
+
+    return func(param)
+  }
+  catch (error) {
+    return {}
+  }
+}
+</script>
+
+<template>
+  <div id="XCellList">
+    <VanRow class="filter-condition">
+      <VanCol :span="inputSpan">
+        <VanSearch
+          v-model="searchValue"
+          class="title-search"
+          clearable
+          @search="onRefresh"
+        />
+      </VanCol>
+      <VanCol v-if="orderList.length > 0" span="2">
+        <XCellListFilter
+          v-model:sortord-val="sortordVal"
+          v-model:order-val="orderVal"
+          v-model:condition-params="conditionParams"
+          :order-list="orderList"
+          :form-query="formQueryList"
+          @on-refresh="onRefresh"
+        />
+      </VanCol>
+    </VanRow>
+    <div class="main">
+      <VanPullRefresh v-model="refreshing" :success-text="finishedText" head-height="70" @refresh="onRefresh">
+        <template v-if="!isError">
+          <VanList
+            v-model:loading="loading"
+            class="list_main"
+            :finished="finished"
+            finished-text="本来无一物，何处惹尘埃"
+            @load="onLoad"
+          >
+            <div v-for="(item, index) in list" :key="`card_${index}`" class="card_item_main" @click="emit('toDetail', item)">
+              <VanRow gutter="20" class="card_item_header" align="center">
+                <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] }}
+                  </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>
+                </VanCol>
+              </VanRow>
+              <VanRow gutter="20" class="card_item_details">
+                <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]" />
+                  </p>
+                </VanCol>
+              </VanRow>
+              <VanRow gutter="20" class="card_item_footer">
+                <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]" />
+                  </p>
+                </VanCol>
+              </VanRow>
+            </div>
+          </VanList>
+        </template>
+        <template v-else>
+          <LoadError />
+        </template>
+      </VanPullRefresh>
+      <VanBackTop />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+#XCellList {
+  height: calc(94vh - var(--van-nav-bar-height) - 5px);
+  .main {
+    overflow-y: auto;
+    height: 100%;
+    background-color: var(--van-background);
+    padding: var(--van-padding-base) var(--van-padding-sm);
+
+    p {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin: 0;
+    }
+
+    .card_item_main {
+      background-color: var(--van-background-2);
+      border-radius: var(--van-radius-lg);
+      margin: 0 0 var(--van-padding-xs) 0;
+      padding: var(--van-padding-sm);
+      .card_item_header {
+        margin-bottom: var(--van-padding-base);
+        .card_item_title {
+          font-size: var(--van-font-size-lg);
+        }
+        .card_item_subtitle {
+          font-size: var(--van-font-size-xs);
+          color: var(--van-text-color-2);
+          text-align: right;
+        }
+      }
+      .card_item_details {
+        margin-bottom: var(--van-padding-base);
+        font-size: var(--van-font-size-sm);
+        color: #666;
+        .van-col {
+          margin-bottom: 2px;
+        }
+      }
+      .card_item_footer {
+        font-size: var(--van-font-size-sm);
+        color: var(--van-text-color-2);
+        .van-col:last-child {
+          text-align: right;
+        }
+        .van-col:first-child {
+          text-align: left;
+        }
+      }
+    }
+  }
+  .filter-condition {
+    :deep(.van-search) {
+      padding: 0 var(--van-search-padding);
+    }
+    :deep(.van-search__content) {
+      border-radius: 8px;
+    }
+    .title-search {
+      height: 4vh;
+    }
+    :deep(.van-dropdown-menu__bar) {
+      height: calc(4vh - 4px);
+      box-shadow: none;
+    }
+    :deep(.van-dropdown-menu__title) {
+      padding: 0;
+    }
+    :deep(.van-dropdown-menu__title--down:after) {
+      display: none;
+    }
+    :deep(.van-dropdown-menu__title:after) {
+      display: none;
+    }
+    :deep(.van-dropdown-item__content) {
+      position: absolute;
+      max-height: var(--van-dropdown-menu-content-max-height);
+    }
+    :deep(.van-dropdown-menu__item) {
+      align-items: flex-start;
+      justify-content: flex-start;
+    }
+  }
+}
+</style>