af-mobile-client-vue3 1.1.15 → 1.1.17

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

@@ -1,807 +1,807 @@
-<script setup lang="ts">
-import XBadge from '@af-mobile-client-vue3/components/data/XBadge/index.vue'
-import XCellListFilter from '@af-mobile-client-vue3/components/data/XCellListFilter/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 {
-  showConfirmDialog,
-  BackTop as VanBackTop,
-  Button as VanButton,
-  Col as VanCol,
-  Icon as VanIcon,
-  List as VanList,
-  Popover as VanPopover,
-  PullRefresh as VanPullRefresh,
-  Row as VanRow,
-  Search as VanSearch,
-  Space as VanSpace,
-  Tag as VanTag,
-} from 'vant'
-import { computed, defineEmits, defineProps, onBeforeMount, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
-
-const { configName, serviceName, fixQueryForm } = withDefaults(defineProps<{
-  configName?: string
-  fixQueryForm?: object
-  idKey?: string
-  serviceName?: string
-  scanOptions?: {
-    show?: boolean // 是否显示扫码按钮
-    type?: string | string[] // 显示类型：可以是单个类型或类型数组 'nfc' / ['scan', 'nfc']
-    defaultMode?: string // 默认模式
-  }
-}>(), {
-  configName: '',
-  fixQueryForm: null,
-  idKey: 'o_id',
-  serviceName: undefined,
-  scanOptions: undefined,
-})
-
-const emit = defineEmits(['toDetail', 'update', 'deleteRow', 'add'])
-
-const router = useRouter()
-
-const orderVal = ref(undefined)
-
-const sortordVal = ref(undefined)
-
-// 配置内容
-const configContent = ref({})
-
-// 主列
-const mainColumns = ref([])
-
-// 副标题列
-const subTitleColumns = ref([])
-
-// 详情列
-const detailColumns = ref([])
-
-// 标签列
-const tagList = ref([])
-
-// 标题按钮列
-const btnList = ref([])
-
-// 底部列
-const footColumns = ref([])
-
-// 所有的复杂操作列
-const allActions = ref([])
-
-// 复杂操作列前三项
-const mainActions = ref([])
-
-// 复杂操作列其余项
-const otherActions = ref([])
-
-// 数据集
-const list = ref([])
-
-// 每个 Popover 的显示状态
-const showPopover = ref<boolean[]>(list.value.map(() => false))
-
-// 排序集
-const orderList = ref([])
-
-// 表单查询数组
-const formQueryList = ref([])
-
-// 总数据
-const totalCount = ref(0)
-
-// 当前页数
-const pageNo = ref(1)
-
-// 每页数量
-const pageSize = 20
-
-const searchValue = ref('')
-
-// 数据加载状态
-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)
-
-// 主要按钮的状态
-const buttonState = ref(undefined)
-
-// 新增or查询的表单配置
-const groupFormItems = ref({})
-const title = ref('')
-
-onBeforeMount(() => {
-  initComponent()
-})
-
-// 组件初始化
-function initComponent() {
-  getConfigByName(configName, (result) => {
-    groupFormItems.value = result
-    title.value = result?.title
-    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)
-      }
-      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,
-            customFunction: item.actionArr[j].customFunction,
-          })
-        }
-      }
-
-      if (item.showTitleBtn)
-        btnList.value.push(item)
-
-      if (result.showSortIcon && item.sortable) {
-        orderList.value.push({
-          title: item.title,
-          value: item.dataIndex,
-        })
-      }
-    }
-    configContent.value = result
-    formQueryList.value = result.formJson
-
-    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)
-}
-
-// 刷新数据
-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,
-        ...fixQueryForm,
-        ...conditionParams.value,
-      },
-      sortField: orderVal?.value,
-      sortOrder: sortordVal?.value,
-    }, serviceName).then((res: any) => {
-      totalCount.value = res.totalCount
-      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
-    })
-  }
-}
-
-// 区分主要操作列与其他操作列
-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()
-})
-
-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 {
-    return {}
-  }
-}
-
-// 逆序排列主要按钮
-const reversedMainActions = computed(() => {
-  return [...mainActions.value].reverse()
-})
-
-// 设置 Popover 的事件
-function onSelectMenu(item: any, event: any) {
-  if (event.text === '删除') {
-    showConfirmDialog({
-      title: '删除',
-      message:
-        '请确认是否删除！！！',
-    }).then(() => {
-      emit(event.func, item)
-    }).catch(() => {
-    })
-  }
-  else if (event.text === '修改') {
-    // 触发update事件，父组件可以监听并处理
-    // 使用isHandledByParent标志来跟踪是否已经被父组件处理
-    let isHandledByParent = false
-
-    // 使用一个自定义事件来获取父组件的处理结果
-    const handledByParent = (handled: boolean) => {
-      isHandledByParent = handled
-    }
-
-    // 触发update事件，将回调函数作为第二个参数传递给父组件
-    emit('update', item, handledByParent)
-
-    // 如果父组件已处理，则不执行默认行为
-    if (isHandledByParent) {
-      return
-    }
-
-    // 默认行为 - 导航到XForm页面
-    router.push({
-      name: 'XForm',
-      // params: { id: item },
-      query: {
-        groupFormItems: JSON.stringify(groupFormItems.value),
-        serviceName,
-        formData: JSON.stringify(item),
-        mode: '修改',
-      },
-    })
-    // emit('addOption', totalCount.value)
-  }
-  else {
-    emit(event.func, item)
-  }
-}
-
-// 抛出新增按钮的事件
-function addOption() {
-  // 触发update事件，父组件可以监听并处理
-  // 使用isHandledByParent标志来跟踪是否已经被父组件处理
-  let isHandledByParent = false
-
-  // 使用一个自定义事件来获取父组件的处理结果
-  const handledByParent = (handled: boolean) => {
-    isHandledByParent = handled
-  }
-
-  // 触发update事件，将回调函数作为第二个参数传递给父组件
-  emit('add', handledByParent)
-
-  // 如果父组件已处理，则不执行默认行为
-  if (isHandledByParent) {
-    return
-  }
-
-  // 默认行为 - 导航到XForm页面
-  router.push({
-    name: 'XForm',
-    // params: { id: totalCount.value },
-    query: {
-      groupFormItems: JSON.stringify(groupFormItems.value),
-      serviceName,
-      formData: JSON.stringify({}),
-      mode: '新增',
-    },
-  })
-  // emit('addOption', totalCount.value)
-}
-
-// 处理按钮点击
-function handleButtonClick(btn, item) {
-  emit(`${btn.btnIcon}`, item)
-}
-
-// 处理自定义函数
-function evaluateCustomFunction(funcString: string | undefined, record: any, index: number): boolean {
-  try {
-    // 如果 customFunction 不存在，返回 true 表示正常显示
-    if (!funcString || funcString === '')
-      return true
-
-    // 匹配参数名、函数体
-    const innerFuncRegex = /function\s*\((\w+)\s*,\s*(\w+)\)\s*\{([\s\S]*)\}/
-    const matches = funcString.match(innerFuncRegex)
-
-    if (!matches)
-      return true
-
-    const [, param1, param2, functionBody] = matches
-
-    // eslint-disable-next-line no-new-func
-    const func = new Function(param1, param2, functionBody)
-    return func(record, index)
-  }
-  catch (error) {
-    console.error('Error evaluating custom function:', error)
-    return true
-  }
-}
-</script>
-
-<template>
-  <div id="XCellList">
-    <VanRow class="filter-condition">
-      <VanCol>
-        <VanSearch
-          v-model="searchValue"
-          class="title-search"
-          clearable
-          placeholder="综合查询框..."
-          shape="round"
-          @search="onRefresh"
-        />
-      </VanCol>
-      <VanCol class="search-icon">
-        <XCellListFilter
-          v-model:sortord-val="sortordVal"
-          v-model:order-val="orderVal"
-          v-model:condition-params="conditionParams"
-          :fix-query-form="fixQueryForm"
-          :service-name="serviceName"
-          :order-list="orderList"
-          :form-query="formQueryList"
-          :button-state="buttonState"
-          :scan-options="scanOptions"
-          @on-refresh="onRefresh"
-          @add-option="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">
-          <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">
-              <VanRow gutter="20" class="card_item_header" align="center" @click="emit('toDetail', item)">
-                <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
-                        v-for="btn in btnList"
-                        :key="btn.dataIndex"
-                        class="action-button"
-                        :icon="btn.btnIcon"
-                        size="small"
-                        @click.stop="handleButtonClick(btn, 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>
-                    {{ `${column.title}: ` }}
-                    <XBadge
-                      :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
-                      :dict-name="column.dictName" :dict-value="item[column.dataIndex]"
-                      :service-name="serviceName"
-                    />
-                  </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"
-                        >
-                          <div class="tag-content">
-                            <VanIcon v-if="column.tagIcon" :name="column.tagIcon" class="tag-icon" />
-                            <span class="tag-title">{{ column.title }}：</span>
-                            <XBadge
-                              :dict-name="column.dictName"
-                              :dict-value="item[column.dataIndex]"
-                              :service-name="serviceName"
-                            />
-                          </div>
-                        </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>
-                    <XBadge
-                      :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
-                      :dict-name="column.dictName" :dict-value="item[column.dataIndex]"
-                      :service-name="serviceName"
-                    />
-                  </p>
-                </VanCol>
-              </VanRow>
-              <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.filter(action => evaluateCustomFunction(action.customFunction, item, index))"
-                    @select="onSelectMenu(item, $event)"
-                  >
-                    <template #reference>
-                      <div
-                        v-show="otherActions && otherActions.length !== 0 && otherActions.some(action => evaluateCustomFunction(action.customFunction, item, index))"
-                        class="more-button"
-                      >
-                        <span>⋯</span>
-                      </div>
-                    </template>
-                  </VanPopover>
-                </VanCol>
-                <VanCol span="20">
-                  <VanRow justify="end">
-                    <VanSpace>
-                      <VanButton
-                        v-for="button in reversedMainActions"
-                        v-show="evaluateCustomFunction(button.customFunction, item, index)"
-                        :key="button.func"
-                        type="primary"
-                        size="small"
-                        class="action-btn"
-                        @click="onSelectMenu(item, button)"
-                      >
-                        {{ button.text }}
-                      </VanButton>
-                    </VanSpace>
-                  </VanRow>
-                </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);
-  --van-search-padding:5px;
-  --van-dropdown-menu-title-padding: 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);
-
-        .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);
-              }
-            }
-          }
-        }
-      }
-
-      .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;
-            }
-            .tag-content {
-              display: flex;
-              align-items: center;
-              white-space: nowrap;
-            }
-            .tag-icon {
-              margin-right: 4px;
-              font-size: 14px;
-              display: inline-flex;
-              align-items: center;
-            }
-            .tag-title {
-              font-weight: normal;
-            }
-          }
-        }
-      }
-
-      .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);
-        margin-bottom: 15px;
-
-        .van-col:last-child {
-          text-align: right;
-        }
-
-        .van-col:first-child {
-          text-align: left;
-        }
-      }
-    }
-  }
-
-  .filter-condition {
-    display: flex;
-    align-items: center;
-    padding: 8px 12px;
-    background-color: #fff;
-    :deep(.van-search) {
-      width: 100%;
-      padding: var(--van-search-padding);
-      background-color: transparent;
-    }
-    :deep(.van-search__content) {
-      border-radius: 5px;
-      background-color: #f5f5f5;
-      padding: 4px 8px;
-    }
-    :deep(.van-field__left-icon) {
-      color: #999;
-    }
-    :deep(.van-cell) {
-      background-color: transparent;
-    }
-    :deep(.van-field__control::placeholder) {
-      color: #999;
-      font-size: 14px;
-    }
-    .van-col {
-      &:first-child {
-        flex: 1;
-        min-width: 0;
-      }
-      &:last-child {
-        flex-shrink: 0;
-      }
-    }
-    .search-icon {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      height: 100%;
-      padding: 0;
-    }
-  }
-
-  .custom-button {
-    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>
+<script setup lang="ts">
+import XBadge from '@af-mobile-client-vue3/components/data/XBadge/index.vue'
+import XCellListFilter from '@af-mobile-client-vue3/components/data/XCellListFilter/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 {
+  showConfirmDialog,
+  BackTop as VanBackTop,
+  Button as VanButton,
+  Col as VanCol,
+  Icon as VanIcon,
+  List as VanList,
+  Popover as VanPopover,
+  PullRefresh as VanPullRefresh,
+  Row as VanRow,
+  Search as VanSearch,
+  Space as VanSpace,
+  Tag as VanTag,
+} from 'vant'
+import { computed, defineEmits, defineProps, onBeforeMount, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+const { configName, serviceName, fixQueryForm } = withDefaults(defineProps<{
+  configName?: string
+  fixQueryForm?: object
+  idKey?: string
+  serviceName?: string
+  scanOptions?: {
+    show?: boolean // 是否显示扫码按钮
+    type?: string | string[] // 显示类型：可以是单个类型或类型数组 'nfc' / ['scan', 'nfc']
+    defaultMode?: string // 默认模式
+  }
+}>(), {
+  configName: '',
+  fixQueryForm: null,
+  idKey: 'o_id',
+  serviceName: undefined,
+  scanOptions: undefined,
+})
+
+const emit = defineEmits(['toDetail', 'update', 'deleteRow', 'add'])
+
+const router = useRouter()
+
+const orderVal = ref(undefined)
+
+const sortordVal = ref(undefined)
+
+// 配置内容
+const configContent = ref({})
+
+// 主列
+const mainColumns = ref([])
+
+// 副标题列
+const subTitleColumns = ref([])
+
+// 详情列
+const detailColumns = ref([])
+
+// 标签列
+const tagList = ref([])
+
+// 标题按钮列
+const btnList = ref([])
+
+// 底部列
+const footColumns = ref([])
+
+// 所有的复杂操作列
+const allActions = ref([])
+
+// 复杂操作列前三项
+const mainActions = ref([])
+
+// 复杂操作列其余项
+const otherActions = ref([])
+
+// 数据集
+const list = ref([])
+
+// 每个 Popover 的显示状态
+const showPopover = ref<boolean[]>(list.value.map(() => false))
+
+// 排序集
+const orderList = ref([])
+
+// 表单查询数组
+const formQueryList = ref([])
+
+// 总数据
+const totalCount = ref(0)
+
+// 当前页数
+const pageNo = ref(1)
+
+// 每页数量
+const pageSize = 20
+
+const searchValue = ref('')
+
+// 数据加载状态
+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)
+
+// 主要按钮的状态
+const buttonState = ref(undefined)
+
+// 新增or查询的表单配置
+const groupFormItems = ref({})
+const title = ref('')
+
+onBeforeMount(() => {
+  initComponent()
+})
+
+// 组件初始化
+function initComponent() {
+  getConfigByName(configName, (result) => {
+    groupFormItems.value = result
+    title.value = result?.title
+    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)
+      }
+      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,
+            customFunction: item.actionArr[j].customFunction,
+          })
+        }
+      }
+
+      if (item.showTitleBtn)
+        btnList.value.push(item)
+
+      if (result.showSortIcon && item.sortable) {
+        orderList.value.push({
+          title: item.title,
+          value: item.dataIndex,
+        })
+      }
+    }
+    configContent.value = result
+    formQueryList.value = result.formJson
+
+    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)
+}
+
+// 刷新数据
+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,
+        ...fixQueryForm,
+        ...conditionParams.value,
+      },
+      sortField: orderVal?.value,
+      sortOrder: sortordVal?.value,
+    }, serviceName).then((res: any) => {
+      totalCount.value = res.totalCount
+      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
+    })
+  }
+}
+
+// 区分主要操作列与其他操作列
+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()
+})
+
+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 {
+    return {}
+  }
+}
+
+// 逆序排列主要按钮
+const reversedMainActions = computed(() => {
+  return [...mainActions.value].reverse()
+})
+
+// 设置 Popover 的事件
+function onSelectMenu(item: any, event: any) {
+  if (event.text === '删除') {
+    showConfirmDialog({
+      title: '删除',
+      message:
+        '请确认是否删除！！！',
+    }).then(() => {
+      emit(event.func, item)
+    }).catch(() => {
+    })
+  }
+  else if (event.text === '修改') {
+    // 触发update事件，父组件可以监听并处理
+    // 使用isHandledByParent标志来跟踪是否已经被父组件处理
+    let isHandledByParent = false
+
+    // 使用一个自定义事件来获取父组件的处理结果
+    const handledByParent = (handled: boolean) => {
+      isHandledByParent = handled
+    }
+
+    // 触发update事件，将回调函数作为第二个参数传递给父组件
+    emit('update', item, handledByParent)
+
+    // 如果父组件已处理，则不执行默认行为
+    if (isHandledByParent) {
+      return
+    }
+
+    // 默认行为 - 导航到XForm页面
+    router.push({
+      name: 'XForm',
+      // params: { id: item },
+      query: {
+        groupFormItems: JSON.stringify(groupFormItems.value),
+        serviceName,
+        formData: JSON.stringify(item),
+        mode: '修改',
+      },
+    })
+    // emit('addOption', totalCount.value)
+  }
+  else {
+    emit(event.func, item)
+  }
+}
+
+// 抛出新增按钮的事件
+function addOption() {
+  // 触发update事件，父组件可以监听并处理
+  // 使用isHandledByParent标志来跟踪是否已经被父组件处理
+  let isHandledByParent = false
+
+  // 使用一个自定义事件来获取父组件的处理结果
+  const handledByParent = (handled: boolean) => {
+    isHandledByParent = handled
+  }
+
+  // 触发update事件，将回调函数作为第二个参数传递给父组件
+  emit('add', handledByParent)
+
+  // 如果父组件已处理，则不执行默认行为
+  if (isHandledByParent) {
+    return
+  }
+
+  // 默认行为 - 导航到XForm页面
+  router.push({
+    name: 'XForm',
+    // params: { id: totalCount.value },
+    query: {
+      groupFormItems: JSON.stringify(groupFormItems.value),
+      serviceName,
+      formData: JSON.stringify({}),
+      mode: '新增',
+    },
+  })
+  // emit('addOption', totalCount.value)
+}
+
+// 处理按钮点击
+function handleButtonClick(btn, item) {
+  emit(`${btn.btnIcon}`, item)
+}
+
+// 处理自定义函数
+function evaluateCustomFunction(funcString: string | undefined, record: any, index: number): boolean {
+  try {
+    // 如果 customFunction 不存在，返回 true 表示正常显示
+    if (!funcString || funcString === '')
+      return true
+
+    // 匹配参数名、函数体
+    const innerFuncRegex = /function\s*\((\w+)\s*,\s*(\w+)\)\s*\{([\s\S]*)\}/
+    const matches = funcString.match(innerFuncRegex)
+
+    if (!matches)
+      return true
+
+    const [, param1, param2, functionBody] = matches
+
+    // eslint-disable-next-line no-new-func
+    const func = new Function(param1, param2, functionBody)
+    return func(record, index)
+  }
+  catch (error) {
+    console.error('Error evaluating custom function:', error)
+    return true
+  }
+}
+</script>
+
+<template>
+  <div id="XCellList">
+    <VanRow class="filter-condition">
+      <VanCol>
+        <VanSearch
+          v-model="searchValue"
+          class="title-search"
+          clearable
+          placeholder="综合查询框..."
+          shape="round"
+          @search="onRefresh"
+        />
+      </VanCol>
+      <VanCol class="search-icon">
+        <XCellListFilter
+          v-model:sortord-val="sortordVal"
+          v-model:order-val="orderVal"
+          v-model:condition-params="conditionParams"
+          :fix-query-form="fixQueryForm"
+          :service-name="serviceName"
+          :order-list="orderList"
+          :form-query="formQueryList"
+          :button-state="buttonState"
+          :scan-options="scanOptions"
+          @on-refresh="onRefresh"
+          @add-option="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">
+          <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">
+              <VanRow gutter="20" class="card_item_header" align="center" @click="emit('toDetail', item)">
+                <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
+                        v-for="btn in btnList"
+                        :key="btn.dataIndex"
+                        class="action-button"
+                        :icon="btn.btnIcon"
+                        size="small"
+                        @click.stop="handleButtonClick(btn, 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>
+                    {{ `${column.title}: ` }}
+                    <XBadge
+                      :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
+                      :dict-name="column.dictName" :dict-value="item[column.dataIndex]"
+                      :service-name="serviceName"
+                    />
+                  </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"
+                        >
+                          <div class="tag-content">
+                            <VanIcon v-if="column.tagIcon" :name="column.tagIcon" class="tag-icon" />
+                            <span class="tag-title">{{ column.title }}：</span>
+                            <XBadge
+                              :dict-name="column.dictName"
+                              :dict-value="item[column.dataIndex]"
+                              :service-name="serviceName"
+                            />
+                          </div>
+                        </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>
+                    <XBadge
+                      :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
+                      :dict-name="column.dictName" :dict-value="item[column.dataIndex]"
+                      :service-name="serviceName"
+                    />
+                  </p>
+                </VanCol>
+              </VanRow>
+              <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.filter(action => evaluateCustomFunction(action.customFunction, item, index))"
+                    @select="onSelectMenu(item, $event)"
+                  >
+                    <template #reference>
+                      <div
+                        v-show="otherActions && otherActions.length !== 0 && otherActions.some(action => evaluateCustomFunction(action.customFunction, item, index))"
+                        class="more-button"
+                      >
+                        <span>⋯</span>
+                      </div>
+                    </template>
+                  </VanPopover>
+                </VanCol>
+                <VanCol span="20">
+                  <VanRow justify="end">
+                    <VanSpace>
+                      <VanButton
+                        v-for="button in reversedMainActions"
+                        v-show="evaluateCustomFunction(button.customFunction, item, index)"
+                        :key="button.func"
+                        type="primary"
+                        size="small"
+                        class="action-btn"
+                        @click="onSelectMenu(item, button)"
+                      >
+                        {{ button.text }}
+                      </VanButton>
+                    </VanSpace>
+                  </VanRow>
+                </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);
+  --van-search-padding:5px;
+  --van-dropdown-menu-title-padding: 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);
+
+        .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);
+              }
+            }
+          }
+        }
+      }
+
+      .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;
+            }
+            .tag-content {
+              display: flex;
+              align-items: center;
+              white-space: nowrap;
+            }
+            .tag-icon {
+              margin-right: 4px;
+              font-size: 14px;
+              display: inline-flex;
+              align-items: center;
+            }
+            .tag-title {
+              font-weight: normal;
+            }
+          }
+        }
+      }
+
+      .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);
+        margin-bottom: 15px;
+
+        .van-col:last-child {
+          text-align: right;
+        }
+
+        .van-col:first-child {
+          text-align: left;
+        }
+      }
+    }
+  }
+
+  .filter-condition {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    background-color: #fff;
+    :deep(.van-search) {
+      width: 100%;
+      padding: var(--van-search-padding);
+      background-color: transparent;
+    }
+    :deep(.van-search__content) {
+      border-radius: 5px;
+      background-color: #f5f5f5;
+      padding: 4px 8px;
+    }
+    :deep(.van-field__left-icon) {
+      color: #999;
+    }
+    :deep(.van-cell) {
+      background-color: transparent;
+    }
+    :deep(.van-field__control::placeholder) {
+      color: #999;
+      font-size: 14px;
+    }
+    .van-col {
+      &:first-child {
+        flex: 1;
+        min-width: 0;
+      }
+      &:last-child {
+        flex-shrink: 0;
+      }
+    }
+    .search-icon {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      height: 100%;
+      padding: 0;
+    }
+  }
+
+  .custom-button {
+    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>