af-mobile-client-vue3 1.1.23 → 1.1.24

package/package.json

@@ -1,111 +1,100 @@
-{
-  "name": "af-mobile-client-vue3",
-  "type": "module",
-  "version": "1.1.23",
-  "description": "Vue + Vite component lib",
-  "license": "MIT",
-  "engines": {
-    "node": ">=18.12.0",
-    "pnpm": ">=8.15.0"
-  },
-  "scripts": {
-    "dev": "cross-env MOCK_SERVER_PORT=8086 vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "build:dev": "vue-tsc --noEmit && vite build --mode=development",
-    "preview": "vite preview",
-    "lint": "eslint . && vue-tsc --noEmit",
-    "lint:fix": "eslint . --fix",
-    "test": "vitest",
-    "release": "bumpp --commit --push --tag"
-  },
-  "dependencies": {
-    "@micro-zoe/micro-app": "1.0.0-rc.24",
-    "@vant/area-data": "^2.0.0",
-    "@unhead/vue": "^2.0.5",
-    "@vant/touch-emulator": "^1.4.0",
-    "@vant/use": "^1.6.0",
-    "@vueuse/core": "^13.1.0",
-    "@iconify/vue": "4.3.0",
-    "animate.css": "^4.1.1",
-    "axios": "^1.8.4",
-    "crypto-js": "^4.2.0",
-    "echarts": "^5.6.0",
-    "lodash-es": "^4.17.21",
-    "nprogress": "^0.2.0",
-    "ol": "^10.5.0",
-    "pinia": "^3.0.2",
-    "pinia-plugin-persistedstate": "^4.2.0",
-    "qs": "^6.14.0",
-    "resize-detector": "^0.3.0",
-    "store": "^2.0.12",
-    "vant": "^4.9.18",
-    "vconsole": "^3.15.1",
-    "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
-  },
-  "devDependencies": {
-    "@antfu/eslint-config": "^4.12.0",
-    "@iconify/json": "2.2.318",
-    "@types/crypto-js": "^4.2.2",
-    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.14.1",
-    "@types/nprogress": "^0.2.3",
-    "@types/store": "^2.0.5",
-    "@unocss/eslint-plugin": "^66.1.0-beta.11",
-    "@unocss/preset-rem-to-px": "66.1.0-beta.11",
-    "@vitejs/plugin-legacy": "^6.0.2",
-    "@vitejs/plugin-vue": "^5.2.3",
-    "autoprefixer": "^10.4.21",
-    "bumpp": "^10.1.0",
-    "commitizen": "^4.3.1",
-    "consola": "^3.4.2",
-    "cross-env": "^7.0.3",
-    "cz-emoji-chinese": "^0.3.1",
-    "eslint": "^9.24.0",
-    "eslint-ts-patch": "^8.57.0-0",
-    "husky": "^9.1.7",
-    "less": "^4.3.0",
-    "mockjs": "^1.1.0",
-    "postcss-mobile-forever": "^5.0.0",
-    "rollup": "^4.40.0",
-    "terser": "^5.39.0",
-    "typescript": "^5.8.3",
-    "unocss": "^66.1.0-beta.11",
-    "unplugin-auto-import": "^19.1.2",
-    "unplugin-vue-components": "^28.4.1",
-    "unplugin-vue-router": "^0.12.0",
-    "vite": "^6.2.6",
-    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-mock-dev-server": "^1.8.5",
-    "vite-plugin-pwa": "^1.0.0",
-    "vite-plugin-sitemap": "^0.7.1",
-    "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-vconsole": "^2.1.1",
-    "vite-plugin-vue-devtools": "^7.7.2",
-    "vite-plugin-vue-layouts": "^0.11.0",
-    "vitest": "^3.1.1",
-    "vue-tsc": "^2.2.8"
-  },
-  "pnpm": {
-    "peerDependencyRules": {
-      "ignoreMissing": [
-        "postcss",
-        "esbuild"
-      ],
-      "allowedVersions": {
-        "rollup": "^4.x"
-      }
-    }
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-emoji-chinese"
-    },
-    "cz-emoji-chinese": {
-      "skipQuestions": [
-        "body",
-        "scope"
-      ]
-    }
-  }
-}
+{
+  "name": "af-mobile-client-vue3",
+  "type": "module",
+  "version": "1.1.24",
+  "description": "Vue + Vite component lib",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.12.0",
+    "pnpm": ">=8.15.0"
+  },
+  "dependencies": {
+    "@micro-zoe/micro-app": "1.0.0-rc.24",
+    "@vant/area-data": "^2.0.0",
+    "@unhead/vue": "^2.0.5",
+    "@vant/touch-emulator": "^1.4.0",
+    "@vant/use": "^1.6.0",
+    "@vueuse/core": "^13.1.0",
+    "@iconify/vue": "4.3.0",
+    "animate.css": "^4.1.1",
+    "axios": "^1.8.4",
+    "crypto-js": "^4.2.0",
+    "echarts": "^5.6.0",
+    "lodash-es": "^4.17.21",
+    "nprogress": "^0.2.0",
+    "ol": "^10.5.0",
+    "pinia": "^3.0.2",
+    "pinia-plugin-persistedstate": "^4.2.0",
+    "qs": "^6.14.0",
+    "resize-detector": "^0.3.0",
+    "store": "^2.0.12",
+    "vant": "^4.9.18",
+    "vconsole": "^3.15.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^4.12.0",
+    "@iconify/json": "2.2.318",
+    "@types/crypto-js": "^4.2.2",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^22.14.1",
+    "@types/nprogress": "^0.2.3",
+    "@types/store": "^2.0.5",
+    "@unocss/eslint-plugin": "^66.1.0-beta.11",
+    "@unocss/preset-rem-to-px": "66.1.0-beta.11",
+    "@vitejs/plugin-legacy": "^6.0.2",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "autoprefixer": "^10.4.21",
+    "bumpp": "^10.1.0",
+    "commitizen": "^4.3.1",
+    "consola": "^3.4.2",
+    "cross-env": "^7.0.3",
+    "cz-emoji-chinese": "^0.3.1",
+    "eslint": "^9.24.0",
+    "eslint-ts-patch": "^8.57.0-0",
+    "husky": "^9.1.7",
+    "less": "^4.3.0",
+    "mockjs": "^1.1.0",
+    "postcss-mobile-forever": "^5.0.0",
+    "rollup": "^4.40.0",
+    "terser": "^5.39.0",
+    "typescript": "^5.8.3",
+    "unocss": "^66.1.0-beta.11",
+    "unplugin-auto-import": "^19.1.2",
+    "unplugin-vue-components": "^28.4.1",
+    "unplugin-vue-router": "^0.12.0",
+    "vite": "^6.2.6",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-mock-dev-server": "^1.8.5",
+    "vite-plugin-pwa": "^1.0.0",
+    "vite-plugin-sitemap": "^0.7.1",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-vconsole": "^2.1.1",
+    "vite-plugin-vue-devtools": "^7.7.2",
+    "vite-plugin-vue-layouts": "^0.11.0",
+    "vitest": "^3.1.1",
+    "vue-tsc": "^2.2.8"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-emoji-chinese"
+    },
+    "cz-emoji-chinese": {
+      "skipQuestions": [
+        "body",
+        "scope"
+      ]
+    }
+  },
+  "scripts": {
+    "dev": "cross-env MOCK_SERVER_PORT=8086 vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "build:dev": "vue-tsc --noEmit && vite build --mode=development",
+    "preview": "vite preview",
+    "lint": "eslint . && vue-tsc --noEmit",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest",
+    "release": "bumpp --commit --push --tag"
+  }
+}

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

@@ -76,32 +76,28 @@ function valueChange(value: string | string[]) {
   <div id="XGridDropOption">
     <template v-if="props.multiple">
       <VanCheckboxGroup v-model="checked as string[]" direction="horizontal" @change="valueChange">
-        <VanGrid :gutter="props.gutter" :border="false" :column-num="props.columnNum">
-          <VanGridItem v-for="colRow in props.columns" :key="colRow[props.columnsFieldNames.text]">
-            <template #default>
-              <VanCheckbox :name="colRow[props.columnsFieldNames.value]">
-                <VanButton type="default" size="small" :class="{ 'select-text-col': classSel(colRow) }">
-                  {{ colRow[props.columnsFieldNames.text] }}
-                </VanButton>
-              </VanCheckbox>
-            </template>
-          </VanGridItem>
-        </VanGrid>
+        <div class="option-container">
+          <div v-for="colRow in props.columns" :key="colRow[props.columnsFieldNames.text]" class="option-item">
+            <VanCheckbox :name="colRow[props.columnsFieldNames.value]">
+              <VanButton type="default" size="small" :class="{ 'select-text-col': classSel(colRow) }">
+                {{ colRow[props.columnsFieldNames.text] }}
+              </VanButton>
+            </VanCheckbox>
+          </div>
+        </div>
       </VanCheckboxGroup>
     </template>
     <template v-else>
       <VanRadioGroup v-model="checked" direction="horizontal" @change="valueChange">
-        <VanGrid :gutter="props.gutter" :border="false" :column-num="props.columnNum">
-          <VanGridItem v-for="colRow in props.columns" :key="colRow[props.columnsFieldNames.text]">
-            <template #default>
-              <VanRadio :name="colRow[props.columnsFieldNames.value]">
-                <VanButton type="default" size="small" :class="{ 'select-text-col': classSel(colRow) }">
-                  {{ colRow[props.columnsFieldNames.text] }}
-                </VanButton>
-              </VanRadio>
-            </template>
-          </VanGridItem>
-        </VanGrid>
+        <div class="option-container">
+          <div v-for="colRow in props.columns" :key="colRow[props.columnsFieldNames.text]" class="option-item">
+            <VanRadio :name="colRow[props.columnsFieldNames.value]">
+              <VanButton type="default" size="small" :class="{ 'select-text-col': classSel(colRow) }">
+                {{ colRow[props.columnsFieldNames.text] }}
+              </VanButton>
+            </VanRadio>
+          </div>
+        </div>
       </VanRadioGroup>
     </template>
   </div>
@@ -116,10 +112,18 @@ function valueChange(value: string | string[]) {
   --van-radio-label-margin: 0px;
   --van-button-default-border-color: 'rgb(247,248,250)';
 
-  .van-grid {
+  .option-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
     width: 100%;
   }
 
+  .option-item {
+    flex: 0 1 auto;
+    min-width: fit-content;
+  }
+
   .select-text-col {
     color: blue;
   }
@@ -140,6 +144,7 @@ function valueChange(value: string | string[]) {
   :deep(.van-button)  {
     width: 100%;
     background-color: rgb(247,248,250);
+    white-space: nowrap;
   }
   :deep(.van-checkbox__label)  {
     width: 100%;

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

@@ -3,6 +3,7 @@ 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 { getRangeByType } from '@af-mobile-client-vue3/utils/queryFormDefaultRangePicker'
+import { executeStrFunctionByContext } from '@af-mobile-client-vue3/utils/runEvalFunction'
 import LoadError from '@af-mobile-client-vue3/views/common/LoadError.vue'
 import {
   showConfirmDialog,
@@ -18,7 +19,7 @@ import {
   Space as VanSpace,
   Tag as VanTag,
 } from 'vant'
-import { computed, defineEmits, defineProps, onBeforeMount, ref, watch } from 'vue'
+import { computed, defineEmits, defineProps, getCurrentInstance, onBeforeMount, ref, useSlots, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 const { configName, serviceName, fixQueryForm } = withDefaults(defineProps<{
@@ -39,7 +40,14 @@ const { configName, serviceName, fixQueryForm } = withDefaults(defineProps<{
   scanOptions: undefined,
 })
 
-const emit = defineEmits(['toDetail', 'update', 'deleteRow', 'add'])
+const emit = defineEmits<{
+  (e: 'toDetail', item: any): void
+  (e: 'update', item: any, handledByParent: any): void
+  (e: 'deleteRow', item: any): void
+  (e: 'add'): void
+  (e: string, item: any): void
+  (e: 'updateCondition', params: any): void
+}>()
 
 const router = useRouter()
 
@@ -122,6 +130,11 @@ const buttonState = ref(undefined)
 const groupFormItems = ref({})
 const title = ref('')
 
+const slots = useSlots()
+
+// 当前组件实例（不推荐使用，可能会在后续的版本更迭中调整，暂时用来绑定函数的上下文）
+const currInst = getCurrentInstance()
+
 onBeforeMount(() => {
   initComponent()
 })
@@ -325,23 +338,24 @@ watch(() => searchValue.value, (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])
+// 配置中心->表单项展示函数
+function handleFunctionStyle(funcString, record) {
+  if (!funcString) {
+    return {}
+  }
 
-    return func(param)
+  try {
+    // 同步执行函数
+    const obj = executeStrFunctionByContext(currInst, funcString, [record])
+    // 如果返回的是对象，则直接返回
+    if (obj && typeof obj === 'object') {
+      return obj
+    }
+    // 其他情况返回空对象
+    return {}
   }
-  catch {
+  catch (error) {
+    console.error('Error in handleFunctionStyle:', error)
     return {}
   }
 }
@@ -462,12 +476,39 @@ function evaluateCustomFunction(funcString: string | undefined, record: any, ind
     return true
   }
 }
+
+// 更新查询条件并刷新
+function updateConditionAndRefresh(params: any) {
+  // 更新 conditionParams
+  if (!conditionParams.value) {
+    conditionParams.value = {}
+  }
+  if (params) {
+    // 遍历参数，更新对应的表单值
+    Object.entries(params).forEach(([key, value]) => {
+      // 找到对应的表单项
+      const formItem = formQueryList.value.find(item => item.model === key)
+      if (formItem) {
+        // 更新表单项的值
+        conditionParams.value[key] = value
+      }
+    })
+  }
+
+  // 触发刷新
+  onRefresh()
+}
+
+// 暴露方法给父组件
+defineExpose({
+  updateConditionAndRefresh,
+})
 </script>
 
 <template>
   <div id="XCellList">
     <VanRow class="filter-condition">
-      <VanCol>
+      <VanCol class="search-col">
         <VanSearch
           v-model="searchValue"
           class="title-search"
@@ -477,6 +518,14 @@ function evaluateCustomFunction(funcString: string | undefined, record: any, ind
           @search="onRefresh"
         />
       </VanCol>
+      <!-- 动态插槽区域 -->
+      <template v-for="(_, name) in slots" :key="name">
+        <template v-if="typeof name === 'string' && name.startsWith('search-right-')">
+          <div class="filter-icon-box">
+            <slot :name="name" />
+          </div>
+        </template>
+      </template>
       <VanCol class="search-icon">
         <XCellListFilter
           v-model:sortord-val="sortordVal"
@@ -511,7 +560,7 @@ function evaluateCustomFunction(funcString: string | undefined, record: any, ind
                     <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])"
+                        :style="handleFunctionStyle(column.styleFunctionForValue, item)"
                       >
                         {{ item[column.dataIndex] ? item[column.dataIndex] : '--' }}
                       </p>
@@ -519,10 +568,10 @@ function evaluateCustomFunction(funcString: string | undefined, record: any, ind
                     <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])"
+                        :style="handleFunctionStyle(column.styleFunctionForValue, item)"
                       >
                         <XBadge
-                          :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
+                          :style="handleFunctionStyle(column.styleFunctionForValue, item)"
                           :dict-name="column.dictName" :dict-value="item[column.dataIndex]"
                           :service-name="serviceName"
                         />
@@ -546,7 +595,7 @@ function evaluateCustomFunction(funcString: string | undefined, record: any, ind
                   <p>
                     {{ `${column.title}: ` }}
                     <XBadge
-                      :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
+                      :style="handleFunctionStyle(column.styleFunctionForValue, item)"
                       :dict-name="column.dictName" :dict-value="item[column.dataIndex]"
                       :service-name="serviceName"
                     />
@@ -588,11 +637,11 @@ function evaluateCustomFunction(funcString: string | undefined, record: any, ind
               <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])">
+                    <span :style="handleFunctionStyle(column.styleFunctionForTitle, item)">
                       {{ column.title }}:
                     </span>
                     <XBadge
-                      :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
+                      :style="handleFunctionStyle(column.styleFunctionForValue, item)"
                       :dict-name="column.dictName" :dict-value="item[column.dataIndex]"
                       :service-name="serviceName"
                     />
@@ -650,8 +699,8 @@ function evaluateCustomFunction(funcString: string | undefined, record: any, ind
 <style scoped lang="less">
 #XCellList {
   height: calc(94vh - var(--van-nav-bar-height) - 5px);
-  --van-search-padding:5px;
-  --van-dropdown-menu-title-padding: 5px;
+  --van-search-padding: 3px;
+  --van-dropdown-menu-title-padding: 3px;
   --van-cell-vertical-padding: 0px;
   .main {
     overflow-y: auto;
@@ -810,6 +859,7 @@ function evaluateCustomFunction(funcString: string | undefined, record: any, ind
     align-items: center;
     padding: 8px 12px;
     background-color: #fff;
+    gap: 5px;
     :deep(.van-search) {
       width: 100%;
       padding: var(--van-search-padding);
@@ -831,20 +881,31 @@ function evaluateCustomFunction(funcString: string | undefined, record: any, ind
       font-size: 14px;
     }
     .van-col {
-      &:first-child {
+      display: flex;
+      align-items: center;
+      &.search-col {
         flex: 1;
         min-width: 0;
       }
-      &:last-child {
+      &.search-icon {
         flex-shrink: 0;
+        padding: 0;
       }
     }
-    .search-icon {
+    .filter-icon-box {
       display: flex;
       align-items: center;
-      justify-content: flex-end;
-      height: 100%;
-      padding: 0;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      border-radius: 10px;
+      background-color: rgba(245,245,245);
+      cursor: pointer;
+      position: relative;
+      z-index: 1;
+      &:active {
+        opacity: 0.7;
+      }
     }
   }
 

package/src/components/data/XReportGrid/XReportDemo.vue

@@ -1,33 +1,33 @@
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import XReport from './XReport.vue'
-
-const mainRef = ref()
-
-onMounted(() => {
-  // 初始化逻辑
-})
-</script>
-
-<template>
-  <div id="test">
-    <van-card :bordered="false">
-      <XReport
-        ref="mainRef"
-        :use-oss-for-img="false"
-        config-name="nurseWorkstationCover"
-        server-name="af-his"
-        :show-img-in-cell="true"
-        :display-only="true"
-        :edit-mode="false"
-        :show-save-button="false"
-        :no-padding="true"
-        :dont-format="true"
-      />
-    </van-card>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import XReport from './XReport.vue'
+
+const mainRef = ref()
+
+onMounted(() => {
+  // 初始化逻辑
+})
+</script>
+
+<template>
+  <div id="test">
+    <van-card :bordered="false">
+      <XReport
+        ref="mainRef"
+        :use-oss-for-img="false"
+        config-name="nurseWorkstationCover"
+        server-name="af-his"
+        :show-img-in-cell="true"
+        :display-only="true"
+        :edit-mode="false"
+        :show-save-button="false"
+        :no-padding="true"
+        :dont-format="true"
+      />
+    </van-card>
+  </div>
+</template>
+
+<style scoped>
+
+</style>