af-mobile-client-vue3 1.0.71 → 1.0.73

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

@@ -1,507 +1,542 @@
-<script setup lang="ts">
-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,
-  Space as VanSpace,
-  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 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', 'addOption'])
-
-const orderVal = ref(undefined)
-
-const sortordVal = ref(undefined)
-
-// 配置内容
-const configContent = ref({})
-
-// 主列
-const mainColumns = ref([])
-
-// 副标题列
-const subTitleColumns = ref([])
-
-// 详情列
-const detailColumns = 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 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)
-
-// 主要按钮的状态
-const buttonState = 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)
-      }
-      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) {
-        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,
-        ...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 (error) {
-    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 {
-    emit(event.func, item)
-  }
-}
-
-// 抛出新增按钮的事件
-function addOption() {
-  emit('addOption', totalCount.value)
-}
-</script>
-
-<template>
-  <div id="XCellList">
-    <VanRow class="filter-condition">
-      <VanCol :span="inputSpan">
-        <VanSearch
-          v-model="searchValue"
-          class="title-search"
-          clearable
-          @search="onRefresh"
-        />
-      </VanCol>
-      <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>
-    <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 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]"
-                    />
-                  </p>
-                </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>
-                    <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" @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]"
-                    />
-                  </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"
-                    @select="onSelectMenu(item, $event)"
-                  >
-                    <template #reference>
-                      <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"
-                        :key="button.func"
-                        type="primary"
-                        size="small"
-                        @click="emit(button.func, item)"
-                      >
-                        {{ 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;
-  .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);
-        margin-bottom: 15px;
-
-        .van-col:last-child {
-          text-align: right;
-        }
-
-        .van-col:first-child {
-          text-align: left;
-        }
-      }
-    }
-  }
-
-  .filter-condition {
-    :deep(.van-search) {
-      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;
-    //}
-
-    :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;
-    }
-  }
-
-  .custom-button {
-    border: none !important;
-    box-shadow: none !important;
-  }
-}
-</style>
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, onBeforeMount, 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,
+  Space as VanSpace,
+  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 LoadError from '@af-mobile-client-vue3/views/common/LoadError.vue'
+import XCellListFilter from '@af-mobile-client-vue3/components/data/XCellListFilter/index.vue'
+import { useRouter } from 'vue-router'
+
+const { configName, serviceName, fixQueryForm } = withDefaults(defineProps<{
+  configName?: string
+  fixQueryForm?: object
+  idKey?: string
+  serviceName?: string
+}>(), {
+  configName: '',
+  fixQueryForm: null,
+  idKey: 'o_id',
+  serviceName: undefined,
+})
+
+const emit = defineEmits(['toDetail', 'addOption'])
+
+const router = useRouter()
+
+const orderVal = ref(undefined)
+
+const sortordVal = ref(undefined)
+
+// 配置内容
+const configContent = ref({})
+
+// 主列
+const mainColumns = ref([])
+
+// 副标题列
+const subTitleColumns = ref([])
+
+// 详情列
+const detailColumns = 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 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)
+
+// 主要按钮的状态
+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.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) {
+        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,
+        ...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 (error) {
+    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 === '修改') {
+    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() {
+  router.push({
+    name: 'XForm',
+    // params: { id: totalCount.value },
+    query: {
+      groupFormItems: JSON.stringify(groupFormItems.value),
+      serviceName,
+      formData: JSON.stringify({}),
+      mode: '新增',
+    },
+  })
+  // emit('addOption', totalCount.value)
+}
+</script>
+
+<template>
+  <div id="XCellList">
+    <VanRow class="filter-condition">
+      <VanCol :span="inputSpan">
+        <VanSearch
+          v-model="searchValue"
+          class="title-search"
+          clearable
+          @search="onRefresh"
+        />
+      </VanCol>
+      <VanCol span="2" class="search-icon">
+        <XCellListFilter
+          v-model:sortord-val="sortordVal"
+          v-model:order-val="orderVal"
+          v-model:condition-params="conditionParams"
+          :fix-query-form="fixQueryForm"
+          :order-list="orderList"
+          :form-query="formQueryList"
+          :button-state="buttonState"
+          @on-refresh="onRefresh"
+          @add-option="addOption"
+        />
+      </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">
+              <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]"
+                    />
+                  </p>
+                </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>
+                    <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" @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]"
+                    />
+                  </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"
+                    @select="onSelectMenu(item, $event)"
+                  >
+                    <template #reference>
+                      <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"
+                        :key="button.func"
+                        type="primary"
+                        size="small"
+                        @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;
+  .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);
+        margin-bottom: 15px;
+
+        .van-col:last-child {
+          text-align: right;
+        }
+
+        .van-col:first-child {
+          text-align: left;
+        }
+      }
+    }
+  }
+
+  .filter-condition {
+    :deep(.van-search) {
+      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;
+    //}
+
+    :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;
+    }
+  }
+
+  .custom-button {
+    border: none !important;
+    box-shadow: none !important;
+  }
+}
+</style>