vue2-client 1.14.84 → 1.14.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.14.84",
+  "version": "1.14.85",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/XFormTable/XFormTable.vue

@@ -361,6 +361,13 @@ export default {
     extraHeight: {
       type: Number,
       default: 80
+    },
+    // 额外参数，用于控制组件行为
+    extraParams: {
+      type: Object,
+      default: () => {
+        return {}
+      }
     }
   },
   watch: {

package/src/base-client/components/his/XQuestionnaire/XQuestionnaire.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="list-container" style="display: flex;">
     <template v-for="(config, index) in configs">
-      <x-questionnaire-item :queryParamsName="config" :ref="el => setItemRef(el, index)" :key="`questionnaire-${index}`"></x-questionnaire-item>
+      <x-questionnaire-item :fixedQueryForm="conditions[index]" :queryParamsName="config" :ref="el => setItemRef(el, index)" :key="`questionnaire-${index}`"></x-questionnaire-item>
     </template>
   </div>
 </template>
@@ -26,24 +26,37 @@ export default {
   data () {
     return {
       configs: [],
-      questionnaireItemRefs: [] // 存储子组件实例
+      questionnaireItemRefs: [], // 存储子组件实例
+      conditions: []
     }
   },
-  created () {
-    this.getData(this.queryParamsName)
-  },
   methods: {
     // 获取配置
-    async getData (queryParamsName) {
+    async getData (queryParamsName, conditions) {
       const that = this
       getConfigByName(queryParamsName, 'af-his', res => {
-        that.configs = res.configs || []
+        if (res.configs) {
+          that.configs = []
+        }
+        for (let i = 0; i < res.configs.length; i++) {
+          const condition = i < conditions.length ? conditions[i] : {}
+          that.configs.push(res.configs[i])
+          that.conditions.push(condition)
+        }
       })
     },
     setItemRef (el, index) {
       if (el) {
         this.questionnaireItemRefs[index] = el // 保存实例
       }
+    },
+    init (conditions) {
+      this.getData(this.queryParamsName, conditions)
+    },
+    refreshList (index, condition) {
+      if (index < this.conditions.length) {
+        this.conditions[index] = condition
+      }
     }
   },
 }

package/src/base-client/components/his/XQuestionnaire/XQuestionnaireDemo.vue

@@ -9,14 +9,23 @@ export default {
     return {
       queryParamsName: 'surgeryRiskAssessConfig'
     }
+  },
+  methods: {
+    init () {
+      console.log(this)
+      this.$refs.questionnaireRef.init([{ id: 10 }, { id: 20 }, { id: 10 }])
+    }
   }
 }
 </script>
 
 <template>
   <div style="display: flex">
-    <x-questionnaire :queryParamsName="queryParamsName">
+    <x-questionnaire ref="questionnaireRef" :queryParamsName="queryParamsName">
     </x-questionnaire>
+    <a-button type="primary" @click="init">
+      初始化
+    </a-button>
   </div>
 </template>
 

package/src/base-client/components/his/XQuestionnaire/XQuestionnaireItem.vue

@@ -195,9 +195,6 @@ export default {
         this.refreshList(val)
       }
     }
-  },
-  beforeDestroy () {
-    this.clearAllTimers()
   }
 }
 </script>

package/src/base-client/components/his/XShiftSchedule/XShiftSchedule.vue

@@ -7,17 +7,19 @@
     <span slot="time" class="time-title">
       <span v-for="(item, index) in configData.timePeriod" :key="index">{{ item }}</span>
     </span>
-    <a-button slot="lastWeek" icon="left" size="large" @click="handleLastWeek" />
-    <div v-for="(item, index) in weekDays" :key="index" :slot="item.key" class="time-title">
-      <span>{{item.title}}</span>
-      <span>{{ currentWeekDates[index].toLocaleDateString() }}</span>
+    <div v-for="(item, index) in weekDays" :key="index" :slot="item.key">
+      <a-button slot="lastWeek" icon="left" size="large" @click="handleLastWeek" v-if="item.title == '周一'" />
+      <div class="time-title">
+        <span>{{item.title}}</span>
+        <span>{{ currentWeekDates[index].toLocaleDateString() }}</span>
+      </div>
+      <a-button slot="nextWeek" icon="right" size="large" @click="handleNextWeek" v-if="item.title == '周日'"/>
     </div>
     <template :slot="day.key" slot-scope="text, record" v-for="day in shiftTable">
       <div class="time-title" :key="day.key">
         <a-button v-for="(item, index) in record[day.key]" :key="index" @click="handleShiftChange(day.key, index, record)">{{ item === 1 || item === '1' ? '坐诊' : '休息' }}</a-button>
       </div>
     </template>
-    <a-button slot="nextWeek" icon="right" size="large" @click="handleNextWeek" />
     <template slot="sk_limit" slot-scope="text, record">
       <a-input-number id="inputNumber" v-model="record.sk_limit" :min="configData.sk_limitMin" :max="configData.sk_limitMax" />
     </template>
@@ -49,29 +51,12 @@ export default {
         return { title, key }
       })],
       // 排班时间表
-      shiftTable: [
-        {
-          dataIndex: 'lastWeek',
-          key: 'lastWeek',
-          slots: { title: 'lastWeek' },
-          scopedSlots: { customRender: 'lastWeekTitle' },
-          align: 'center',
-          width: 80
-        },
-        ...['周一', '周二', '周三', '周四', '周五', '周六', '周日'].map((title, index) => {
+      shiftTable: [...['周一', '周二', '周三', '周四', '周五', '周六', '周日'].map((title, index) => {
           const key = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'][index]
           return {
-            key, dataIndex: key, scopedSlots: { customRender: key }, slots: { title: key }, align: 'center', width: 120
+            key, dataIndex: key, scopedSlots: { customRender: key }, slots: { title: key }, align: 'center', width: key === 'Monday' || key === 'Sunday' ? 150 : 120
           }
         }),
-        {
-          dataIndex: 'nextWeek',
-          key: 'nextWeek',
-          slots: { title: 'nextWeek' },
-          scopedSlots: { customRender: 'nextWeekTitle' },
-          align: 'center',
-          width: 80
-        },
         {
           title: '排班数',
           key: 'sk_limit',

package/src/base-client/components/layout/XPageView/RenderRow.vue

@@ -1,61 +1,87 @@
 <template>
-  <div class="liuli_page_render_row">
-    <a-row type="flex">
-      <!-- 对于row类型，需要遍历children -->
-      <a-col :key="`page-col-${col.id}`" v-for="col in (row.type === 'row' ? row.children : [row])" :span="col.span ? col.span : 24">
-        <template v-if="col.type === 'row'">
-          <render-row
-            v-for="(nestedRow, index) in col.children"
-            :row="nestedRow"
-            :key="`page-col-${col.id}-${index}`" />
-        </template>
+  <a-row
+    type="flex"
+    :gutter="row.gutter || 0"
+    :align="row.align || 'top'"
+    :justify="row.justify || 'start'"
+  >
+    <a-col
+      v-for="col in getColumns"
+      :key="`page-col-${col.id}`"
+      :span="col.span || 24"
+      :xs="col.xs"
+      :sm="col.sm"
+      :md="col.md"
+      :lg="col.lg"
+      :xl="col.xl"
+      :xxl="col.xxl"
+    >
+      <!-- 行类型，递归渲染子行 -->
+      <template v-if="col.type === 'row'">
+        <render-row
+          v-for="(nestedRow, index) in col.children"
+          :row="nestedRow"
+          :key="`nested-row-${col.id}-${index}`"
+        />
+      </template>
+
+      <!-- 组件类型，渲染动态组件 -->
+      <template v-else>
         <component
-          v-if="col.type !== 'row'"
-          :ref="setRef(col.id)"
-          :is="getComponentType(col.type)"
-          v-bind="col.props">
-          <template v-if="col.children">
+          :ref="(el) => registerComponentRef(col.id, el)"
+          :is="resolveComponentType(col.type)"
+          v-bind="col.props"
+        >
+          <!-- 如果组件有子组件，递归渲染子行 -->
+          <template v-if="col.children?.length">
             <render-row
               v-for="(nestedRow, index) in col.children"
               :row="nestedRow"
-              :key="`page-col-${col.id}-${index}`" />
+              :key="`comp-child-${col.id}-${index}`"
+            />
           </template>
         </component>
-      </a-col>
-    </a-row>
-  </div>
+      </template>
+    </a-col>
+  </a-row>
 </template>
 
 <script setup>
-import { defineProps, inject } from 'vue'
+import { defineProps, inject, computed } from 'vue'
 
+// 注入注册组件方法
 const registerComponent = inject('registerComponent')
 
+// 支持的组件类型映射
 const components = {
-  XTreeView: () => import('@vue2-client/base-client/components/layout/XTreeView'),
+  XFormTable: () => import('@vue2-client/base-client/components/common/XFormTable'),
   XAddNativeForm: () => import('@vue2-client/base-client/components/common/XAddNativeForm'),
   XErrorView: () => import('@vue2-client/base-client/components/layout/XPageView/XErrorView')
 }
 
-defineProps({
+// 定义属性
+const props = defineProps({
   row: {
     type: Object,
     required: true
   }
 })
 
-const getComponentType = (type) => {
+// 获取列数组
+const getColumns = computed(() => {
+  return props.row.type === 'row' ? props.row.children : [props.row]
+})
+
+// 解析组件类型
+const resolveComponentType = (type) => {
+  if (!type) return components.XErrorView
   return components[type] || components.XErrorView
 }
 
-const setRef = (id) => {
-  return (el) => {
-    if (el) {
-      console.warn(id)
-      console.warn(el)
-      registerComponent(id, el)
-      return id
-    }
+// 注册组件引用
+const registerComponentRef = (id, el) => {
+  if (el) {
+    registerComponent(id, el)
   }
 }
 </script>

package/src/base-client/components/layout/XPageView/XErrorView.vue

@@ -1,11 +1,22 @@
 <script setup>
-
+// 无需使用 props
 </script>
 
 <template>
-  <div>渲染失败</div>
+  <div class="liuli-error-view">
+    <a-result status="error" title="组件渲染失败">
+      <template #extra>
+        <a-button type="primary">重试</a-button>
+      </template>
+    </a-result>
+  </div>
 </template>
 
 <style scoped lang="less">
-
+.liuli-error-view {
+  padding: 16px;
+  text-align: center;
+  color: #ff4d4f;
+  font-size: 14px;
+}
 </style>

package/src/base-client/components/layout/XPageView/XPageView.vue

@@ -2,71 +2,89 @@
 import { getConfigByName } from '@vue2-client/services/api/common'
 import { reactive, ref, provide } from 'vue'
 import RenderRow from './RenderRow'
-import Exp500 from '@vue2-client/pages/exception/500.vue'
+import XErrorView from '@vue2-client/base-client/components/layout/XPageView/XErrorView.vue'
 
+// 页面布局配置
 const layout = ref(null)
 
-// 加载状态，0：加载中，1：已加载，2：出现错误
-const loaded = ref(0)
+// 加载状态：0-加载中，1-已加载，2-出现错误
+const loadingStatus = {
+  LOADING: 0,
+  LOADED: 1,
+  ERROR: 2
+}
+const loaded = ref(loadingStatus.LOADING)
 
-// 声明组件总数
+// 组件计数
 const componentTotal = ref(0)
-
-// 注册组件总数
 const registerComponentTotal = ref(0)
 
-// 组件注册集
+// 组件注册集合
 const componentRefMap = reactive({})
 
-// 通用参数
-const data = {
+// 数据上下文
+const dataContext = reactive({
   comps: componentRefMap,
   func: {
-    getConfigByName: getConfigByName
+    getConfigByName
   }
-}
+})
 
 /**
  * 初始化构建页面组件
- * @param params
  */
-function init (params) {
-  const {
-    configName,
-    configValue,
-    serviceName
-  } = params
-  loaded.value = 0
-  const getConfigAfter = (res) => {
-    if (res == null) {
-      loaded.value = 2
+const init = (params) => {
+  const { configName, configValue, serviceName } = params
+
+  // 重置状态
+  loaded.value = loadingStatus.LOADING
+  componentTotal.value = 0
+  registerComponentTotal.value = 0
+  Object.keys(componentRefMap).forEach(key => delete componentRefMap[key])
+
+  const processConfig = (config) => {
+    if (!config) {
+      loaded.value = loadingStatus.ERROR
       return
     }
-    layout.value = res
-    // 设置组件总量
+
+    layout.value = config
     setComponentTotal(layout.value.children)
-    loaded.value = 1
+    loaded.value = loadingStatus.LOADED
   }
+
   if (configName) {
-    getConfigByName(configName, serviceName, getConfigAfter)
+    getConfigByName(configName, serviceName, processConfig)
+  } else if (configValue) {
+    try {
+      const config = typeof configValue === 'string' ? JSON.parse(configValue) : configValue
+      processConfig(config)
+    } catch (error) {
+      console.error('配置解析错误:', error)
+      loaded.value = loadingStatus.ERROR
+    }
   } else {
-    getConfigAfter(JSON.parse(configValue))
+    loaded.value = loadingStatus.ERROR
   }
 }
 
 /**
  * 注册组件
- * @param name 组件名称
- * @param vm 组件实例
  */
-function registerComponent (name, vm) {
+const registerComponent = (name, vm) => {
+  if (!vm) return
+
   componentRefMap[name] = vm
-  registerComponentTotal.value = registerComponentTotal.value + 1
-  console.info(`总组件数量：${componentTotal.value}，已注册数量：${registerComponentTotal.value}`)
+  registerComponentTotal.value++
+  console.debug(`总组件数量：${componentTotal.value}，已注册数量：${registerComponentTotal.value}`)
+
   // 初始化页面
-  initPage()
+  if (layout.value?.onMounted && registerComponentTotal.value === 1) {
+    initPage()
+  }
+
+  // 所有组件都已注册完成
   if (registerComponentTotal.value >= componentTotal.value) {
-    // 注册事件
     registerEvents(layout.value.children)
   }
 }
@@ -75,26 +93,33 @@ provide('registerComponent', registerComponent)
 /**
  * 初始化页面
  */
-function initPage () {
-  if (layout.value.onMounted) {
-    // eslint-disable-next-line no-eval
-    const onMountedFun = eval('(' + layout.value.onMounted + ')')
-    onMountedFun(data)
+const initPage = () => {
+  if (!layout.value?.onMounted) return
+
+  try {
+    // 使用 Function 构造函数替代 eval
+    // eslint-disable-next-line no-new-func
+    const onMountedFun = new Function('data', `return (${layout.value.onMounted})(data)`)
+    onMountedFun(dataContext)
+  } catch (error) {
+    console.error('页面初始化错误:', error)
   }
 }
 
 /**
  * 设置需要注册的组件总数
- * @param children 组件集合
  */
-function setComponentTotal (children) {
+const setComponentTotal = (children) => {
+  if (!children?.length) return
+
   children.forEach((child) => {
     // 如果不是row类型，追加组件数量
     if (child.type !== 'row') {
-      componentTotal.value = componentTotal.value + 1
+      componentTotal.value++
     }
+
     // 递归追加子组件数量
-    if (child.children) {
+    if (child.children?.length) {
       setComponentTotal(child.children)
     }
   })
@@ -102,54 +127,96 @@ function setComponentTotal (children) {
 
 /**
  * 注册组件事件
- * @param children 组件集合
  */
-function registerEvents (children) {
+const registerEvents = (children) => {
+  if (!children?.length) return
+
   children.forEach((child) => {
     // 如果有事件，注册它们
     if (child.event) {
       Object.entries(child.event).forEach(([eventName, handler]) => {
-        // eslint-disable-next-line no-eval
-        const eventHandler = eval('(' + handler + ')')
-        const componentInstance = componentRefMap[child.id]
-        if (componentInstance) {
-          // 创建一个包装函数以传递额外参数
-          const wrappedHandler = function (...args) {
-            // 这里可以传递额外的参数，例如：
-            eventHandler.call(componentInstance, ...args, data)
+        try {
+          // 使用 Function 构造函数替代 eval
+          // eslint-disable-next-line no-new-func
+          const eventHandler = new Function('...args', `return (${handler})(...args)`)
+          const componentInstance = componentRefMap[child.id]
+
+          if (componentInstance) {
+            componentInstance.$on(eventName, (...args) => {
+              eventHandler.call(componentInstance, ...args, dataContext)
+            })
           }
-          componentInstance.$on(eventName, wrappedHandler)
+        } catch (error) {
+          console.error(`注册事件 ${eventName} 错误:`, error)
         }
       })
     }
 
     // 递归注册子组件的事件
-    if (child.children) {
+    if (child.children?.length) {
       registerEvents(child.children)
     }
   })
 }
 
-defineExpose({
-  init
-})
-
+// 导出组件接口
+defineExpose({ init })
 </script>
 
 <template>
-  <div class="liuli_page">
-    <div class="liuli_page_main" v-if="loaded === 1">
-      <render-row
-        v-for="row in layout.children"
-        :key="row.id"
-        :row="row"
-      />
-    </div>
-    <div class="liuli_page_error" v-else-if="loaded === 2">
-      <exp500></exp500>
-    </div>
-  </div>
+  <a-row
+    type="flex"
+    :gutter="layout?.gutter || 0"
+    :align="layout?.align || 'top'"
+    :justify="layout?.justify || 'start'"
+    class="liuli-page">
+    <template v-if="loaded === loadingStatus.LOADED">
+      <template v-if="layout.children?.length">
+        <a-col v-for="row in layout.children" :key="`page-col-${row.id}`">
+          <render-row :row="row"/>
+        </a-col>
+      </template>
+      <template v-else>
+        <div class="liuli-page__empty">
+          <a-empty description="无页面内容" />
+        </div>
+      </template>
+    </template>
+
+    <template v-else-if="loaded === loadingStatus.LOADING">
+      <div class="liuli-page__loading">
+        <a-spin tip="页面加载中..." />
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="liuli-page__error">
+        <XErrorView />
+      </div>
+    </template>
+  </a-row>
 </template>
 
 <style scoped lang="less">
+.liuli-page {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  &__content {
+    min-height: 100px;
+  }
+
+  &__loading, &__error, &__empty {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    min-height: 200px;
+  }
+
+  &__error {
+    width: 100%;
+  }
+}
 </style>

package/src/base-client/components/layout/XPageView/index.js

@@ -1,3 +1 @@
-import XPageView from './XPageView'
-
-export default XPageView
+export { default } from './XPageView'

package/src/base-client/components/layout/XPageView/index.md

@@ -1,38 +1,77 @@
 # XPageView
 
-JSON配置构建页面的根容器组件
+基于 JSON 配置动态构建页面的容器组件，具有高度的灵活性和可扩展性。
 
-引用方式：
+## 使用方法
 
 ```vue
 <template>
-  <x-page-view ref="xPageView"></x-page-view>
+  <x-page-view ref="pageView" />
 </template>
-<script>
-  import XPageView from '@vue2-client/base-client/components/layout/XPageView'
-
-  export default {
-    components: {
-      XPageView
-    },
-    mounted () {
-      this.initView()
-    },
-    methods: {
-      // 初始化组件
-      initView () {
-        this.$refs.xPageView.init({
-          configName: 'templateTreeConfig',
-          serviceName: 'af-his'
-        })
-      }
-    }
-  }
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import XPageView from '@vue2-client/base-client/components/layout/XPageView'
+
+const pageView = ref(null)
+
+onMounted(() => {
+  initView()
+})
+
+const initView = () => {
+  pageView.value.init({
+    configName: 'templateTreeConfig',
+    serviceName: 'af-his'
+  })
+}
 </script>
 ```
 
 ## API
 
-| 参数           | 说明      | 类型       | 默认值 |
-|--------------|---------|----------|-----|
-| init(params) | 初始化组件   | function | -   |
+### 属性
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| - | - | - | - |
+
+### 方法
+
+| 方法名 | 说明 | 参数 |
+| --- | --- | --- |
+| init | 初始化页面组件 | `{ configName, configValue, serviceName }` |
+
+### 参数说明
+
+| 参数名 | 说明 | 类型 | 必填 |
+| --- | --- | --- | --- |
+| configName | 配置名称，用于从服务端获取配置 | String | 二选一 |
+| configValue | 配置的JSON数据，可以是字符串或对象 | String/Object | 二选一 |
+| serviceName | 服务名称 | String | 是 |
+
+## 结构化配置项
+
+```json
+{
+  "children": [
+    {
+      "type": "row",
+      "id": "row1",
+      "gutter": 16,
+      "children": [
+        {
+          "type": "XFormTable",
+          "id": "table1",
+          "span": 24,
+          "props": { ... },
+          "event": {
+            "change": "function(val, data) { console.log(val) }"
+          }
+        }
+      ]
+    }
+  ],
+  "onMounted": "function(data) { console.log('页面已加载') }"
+}
+```

package/src/pages/XPageViewExample/index.vue

@@ -8,19 +8,52 @@ onMounted(() => {
   xPageViewRef.value.init({
     configValue: `{
         "type": "page",
-        "onMounted": "function (data) {data.comps['xTreeView1'].init({configName: 'templateTreeConfig',serviceName: 'af-his',env: 'dev'})}",
+        "onMounted": "function (data) {}",
+        "gutter": [16, 16],
         "children": [
             {
-                "id": "xTreeView1",
-                "type": "XTreeView",
+                "id": "row1",
+                "type": "row",
+                "gutter": 16,
+                "children": [
+                  {
+                    "id": "xFormTable2",
+                    "span": "12",
+                    "type": "XFormTable",
+                    "event": {
+                    },
+                    "props": {
+                      "serviceName": "af-system",
+                      "queryParamsName": "crud_dictionary_manage"
+                    },
+                    "children": [
+                    ]
+                  },
+                  {
+                    "id": "xFormTable3",
+                    "span": "12",
+                    "type": "XFormTable",
+                    "event": {
+                    },
+                    "props": {
+                      "serviceName": "af-system",
+                      "queryParamsName": "crud_dictionary_manage"
+                    },
+                    "children": [
+                    ]
+                  }
+                ]
+            },
+            {
+                "id": "xFormTable",
+                "type": "XFormTable",
                 "event": {
-                    "itemChecked": "function itemChecked (node, data) { if (node.type === 'all' || node.type === 'folder') { data.comps['xTreeViewAddNativeForm1'].close();return} data.func.getConfigByName('编辑模板数据Form', 'af-his', (res) => { data.comps['xTreeViewAddNativeForm1'].init({serviceName: 'af-his',formItems: res.formJson,showSubmitBtn: false,title: '收费',businessType: '新增',getDataParams: { content: {pms_patient_id: 1,template_id: node.id}}})})}"
+                },
+                "props": {
+                  "serviceName": "af-system",
+                  "queryParamsName": "crud_dictionary_manage"
                 },
                 "children": [
-                    {
-                        "id": "xTreeViewAddNativeForm1",
-                        "type": "XAddNativeForm"
-                    }
                 ]
             }
         ]