vue2-client 1.22.11 → 1.22.13

package/src/base-client/components/common/XDetailsView/index.js

@@ -1,3 +1,3 @@
-import XDetailsView from './XDetailsView'
-
-export default XDetailsView
+import XDetailsView from './XDetailsView'
+
+export default XDetailsView

package/src/base-client/components/common/XForm/index.md

@@ -1,178 +1,178 @@
-# XForm
-
-动态表单控件，根据JSON配置生成一个完整的动态表单
-
-
-## 何时使用
-
-当需要一个动态生成的表单时
-
-
-引用方式：
-
-```javascript
-import XForm from '@vue2-client/base-client/components/XForm/XForm'
-
-export default {
-    components: {
-      XForm
-    }
-}
-```
-
-
-
-## 代码演示
-
-```html
-<x-form
-  :json-data="json"
-  :isExports="true"
-  @onSubmit="onSubmit">
-</x-form>
-```
-
-## API
-
-| 参数        | 说明                       | 类型      | 默认值  |
-|-----------|--------------------------|---------|------|
-| jsonData  | JSON配置，根据[工具>查询配置生成]功能生成 | Object  | {}   |
-| isExports | 是否显示导出按钮                 | Boolean | true |
-| getDataParams | 调用logic获取数据源的追加参数 | Object | - |
-| @onSubmit | 表单的提交事件                  | event   | -    |
-
-## 例子1
-----
-（基础使用）
-
-```vue
-<template>
-  <x-form
-    v-if="loaded"
-    :json-data="formItemJson"
-    :isExports="false"
-    @onSubmit="onSubmit">
-  </x-form>
-</template>
-
-<script>
-  import XForm from '@vue2-client/base-client/components/XForm/XForm'
-
-  export default {
-    components: {
-      XForm
-    },
-    data () {
-      return {
-        // 加载查询参数JSON配置文件是否完成
-        loaded: false,
-        // 从查询参数JSON配置中得到的生成表单的JSON
-        formItemJson: undefined,
-        // 表单
-        form: {}
-      }
-    },
-    created () {
-      this.getQueryJson()
-    },
-    methods: {
-      // 加载查询参数JSON配置文件
-      getQueryJson () {
-        this.formItemJson = [
-          {
-            "name":"燃气公司",
-            "keyName":"orgList",
-            "model":"orgName",
-            "placeholder":"请选择",
-            "type":"select"
-          },
-          {
-            "name":"用户地址",
-            "model":"f_address",
-            "type":"input"
-          },
-          {
-            "name":"指令类型",
-            "keyName":"指令类型",
-            "model":"f_instruct_type",
-            "placeholder":"请选择",
-            "type":"select"
-          },
-          {
-            "name":"指令说明",
-            "model":"f_instruct_title",
-            "placeholder":"请输入指令说明",
-            "type":"input"
-          },
-          {
-            "name":"指令状态",
-            "keyName":"指令状态",
-            "model":"f_instruct_state",
-            "placeholder":"请选择",
-            "type":"select"
-          },
-          {
-            "name":"响应结果",
-            "model":"f_receive_state",
-            "placeholder":"请输入响应结果",
-            "type":"input"
-          },
-          {
-            "name":"生成时间",
-            "model":"f_instruct_date",
-            "type":"rangePicker"
-          },
-          {
-            "name":"操作人",
-            "model":"f_inputtor",
-            "placeholder":"请输入操作人员",
-            "type":"input"
-          }
-        ]
-        this.loaded = true
-      },
-      // 表单提交方法
-      onSubmit (res) {
-        // 如果通过校验
-        if (res.valid) {
-          // 表单赋值
-          this.form = res.form
-        } else {
-          return false
-        }
-      }
-    }
-  }
-</script>
-```
-
-注意事项
-----
-
-> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果
->
-> 以上示例查询参数配置为后台生成后的结果，此处为了方便调试，所以直接写在了代码中，实际使用请通过发起请求获取查询参数配置，如下：
-```vue
-<script>
-  import { commonApi } from '@vue2-client/base-client/api/common'
-  import Vue from 'vue'
-
-  export default {
-    data () {
-      return {
-        // 查询配置文件名
-        queryParamsName: 'instructQueryParams'
-      }
-    },
-    methods: {
-      getConfig () {
-        Vue.resetpost(commonApi.getConfig, {str: this.queryParamsName}).then((res) => {
-          this.formItemJson = res.formJson
-          this.columnItemJson = res.columnJson
-          this.loaded = true
-        })
-      }
-    }
-  }
-</script>
-```
+# XForm
+
+动态表单控件，根据JSON配置生成一个完整的动态表单
+
+
+## 何时使用
+
+当需要一个动态生成的表单时
+
+
+引用方式：
+
+```javascript
+import XForm from '@vue2-client/base-client/components/XForm/XForm'
+
+export default {
+    components: {
+      XForm
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<x-form
+  :json-data="json"
+  :isExports="true"
+  @onSubmit="onSubmit">
+</x-form>
+```
+
+## API
+
+| 参数        | 说明                       | 类型      | 默认值  |
+|-----------|--------------------------|---------|------|
+| jsonData  | JSON配置，根据[工具>查询配置生成]功能生成 | Object  | {}   |
+| isExports | 是否显示导出按钮                 | Boolean | true |
+| getDataParams | 调用logic获取数据源的追加参数 | Object | - |
+| @onSubmit | 表单的提交事件                  | event   | -    |
+
+## 例子1
+----
+（基础使用）
+
+```vue
+<template>
+  <x-form
+    v-if="loaded"
+    :json-data="formItemJson"
+    :isExports="false"
+    @onSubmit="onSubmit">
+  </x-form>
+</template>
+
+<script>
+  import XForm from '@vue2-client/base-client/components/XForm/XForm'
+
+  export default {
+    components: {
+      XForm
+    },
+    data () {
+      return {
+        // 加载查询参数JSON配置文件是否完成
+        loaded: false,
+        // 从查询参数JSON配置中得到的生成表单的JSON
+        formItemJson: undefined,
+        // 表单
+        form: {}
+      }
+    },
+    created () {
+      this.getQueryJson()
+    },
+    methods: {
+      // 加载查询参数JSON配置文件
+      getQueryJson () {
+        this.formItemJson = [
+          {
+            "name":"燃气公司",
+            "keyName":"orgList",
+            "model":"orgName",
+            "placeholder":"请选择",
+            "type":"select"
+          },
+          {
+            "name":"用户地址",
+            "model":"f_address",
+            "type":"input"
+          },
+          {
+            "name":"指令类型",
+            "keyName":"指令类型",
+            "model":"f_instruct_type",
+            "placeholder":"请选择",
+            "type":"select"
+          },
+          {
+            "name":"指令说明",
+            "model":"f_instruct_title",
+            "placeholder":"请输入指令说明",
+            "type":"input"
+          },
+          {
+            "name":"指令状态",
+            "keyName":"指令状态",
+            "model":"f_instruct_state",
+            "placeholder":"请选择",
+            "type":"select"
+          },
+          {
+            "name":"响应结果",
+            "model":"f_receive_state",
+            "placeholder":"请输入响应结果",
+            "type":"input"
+          },
+          {
+            "name":"生成时间",
+            "model":"f_instruct_date",
+            "type":"rangePicker"
+          },
+          {
+            "name":"操作人",
+            "model":"f_inputtor",
+            "placeholder":"请输入操作人员",
+            "type":"input"
+          }
+        ]
+        this.loaded = true
+      },
+      // 表单提交方法
+      onSubmit (res) {
+        // 如果通过校验
+        if (res.valid) {
+          // 表单赋值
+          this.form = res.form
+        } else {
+          return false
+        }
+      }
+    }
+  }
+</script>
+```
+
+注意事项
+----
+
+> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果
+>
+> 以上示例查询参数配置为后台生成后的结果，此处为了方便调试，所以直接写在了代码中，实际使用请通过发起请求获取查询参数配置，如下：
+```vue
+<script>
+  import { commonApi } from '@vue2-client/base-client/api/common'
+  import Vue from 'vue'
+
+  export default {
+    data () {
+      return {
+        // 查询配置文件名
+        queryParamsName: 'instructQueryParams'
+      }
+    },
+    methods: {
+      getConfig () {
+        Vue.resetpost(commonApi.getConfig, {str: this.queryParamsName}).then((res) => {
+          this.formItemJson = res.formJson
+          this.columnItemJson = res.columnJson
+          this.loaded = true
+        })
+      }
+    }
+  }
+</script>
+```

package/src/base-client/components/common/XFormGroupDetails/index.js

@@ -1,3 +1,3 @@
-import XFormGroupDetails from './XFormGroupDetails'
-
-export default XFormGroupDetails
+import XFormGroupDetails from './XFormGroupDetails'
+
+export default XFormGroupDetails

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

@@ -0,0 +1,205 @@
+<template>
+  <div>
+    <template v-if="summaryStatConfig">
+      <div v-if="loading" class="summary-stat-loading">加载中...</div>
+      <a-row v-else :gutter="16">
+        <a-col
+          style="margin-bottom: 12px"
+          v-for="(item, index) in summaryStatConfig.items"
+          :key="index"
+          :span="item.span || 6"
+        >
+          <a-card :body-style="{ padding: '16px' }" class="summary-stat-card">
+            <div class="stat-content">
+              <div class="stat-icon" :style="getItemIconStyle(item)">
+                <a-icon :type="item.icon || 'dashboard'" />
+              </div>
+              <div class="stat-info">
+                <div class="stat-title">{{ item.title }}</div>
+                <div class="stat-value" :style="getItemValueStyle(item)">
+                  <span v-if="item.prefix" class="stat-prefix">{{ item.prefix }}</span>
+                  <span>{{ getItemFormattedValue(item) }}</span>
+                  <span v-if="item.suffix" class="stat-suffix">{{ item.suffix }}</span>
+                </div>
+              </div>
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+    </template>
+  </div>
+</template>
+
+<script>
+import { runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'SummaryStatCard',
+  props: {
+    serviceName: {
+      type: String,
+      default: undefined
+    },
+    summaryStatConfig: {
+      type: Object,
+      default: process.env.VUE_APP_SYSTEM_NAME
+    }
+  },
+  data() {
+    return {
+      logicResult: null,
+      loading: false,
+      error: null
+    }
+  },
+  computed: {
+  },
+  watch: {
+    summaryStatConfig: {
+      handler() {
+        if (this.summaryStatConfig && this.summaryStatConfig.dataSource) {
+          this.fetchLogicData()
+        } else {
+          this.logicResult = null
+          this.error = null
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    async fetchLogicData() {
+      if (!this.summaryStatConfig || !this.summaryStatConfig.dataSource) {
+        this.logicResult = null
+        return
+      }
+      this.loading = true
+      this.error = null
+      try {
+        const res = await runLogic(this.summaryStatConfig.dataSource, {}, this.serviceName)
+        this.logicResult = res?.data || res
+      } catch (e) {
+        this.error = e
+        this.logicResult = null
+      } finally {
+        this.loading = false
+      }
+    },
+    getItemValue(item) {
+      if (!this.logicResult || !item.dataField) return null
+      return this.logicResult[item.dataField]
+    },
+    getItemFormattedValue(item) {
+      const val = this.getItemValue(item)
+      if (val === null || val === undefined) return '-'
+      const num = Number(val)
+      if (isNaN(num)) return val
+      if (num >= 10000) {
+        return (num / 10000).toFixed(1) + 'w'
+      }
+      return num.toLocaleString()
+    },
+    getItemIconStyle(item) {
+      const iconSize = item.iconSize || 32
+      return {
+        width: iconSize + 'px',
+        height: iconSize + 'px',
+        borderRadius: '8px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: (iconSize * 0.6) + 'px',
+        backgroundColor: (item.iconColor || '#1890ff') + '20',
+        color: item.iconColor || '#1890ff'
+      }
+    },
+    getItemValueStyle(item) {
+      return {
+        fontSize: (item.fontSize || 24) + 'px',
+        color: item.color || '#333333'
+      }
+    },
+    formattedValue() {
+      const num = Number(this.value)
+      if (isNaN(num)) return this.value
+      if (num >= 10000) {
+        return (num / 10000).toFixed(1) + 'w'
+      }
+      return num.toLocaleString()
+    },
+    iconStyle() {
+      const iconSize = this.config.iconSize || 32
+      return {
+        width: iconSize + 'px',
+        height: iconSize + 'px',
+        borderRadius: '8px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: (iconSize * 0.6) + 'px',
+        backgroundColor: this.config.iconColor + '20',
+        color: this.config.iconColor
+      }
+    },
+    valueStyle() {
+      return {
+        fontSize: (this.config.fontSize || 24) + 'px',
+        color: this.config.color || '#333333'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.summary-stat-card {
+  border-radius: 8px;
+  transition: box-shadow 0.3s;
+
+  &:hover {
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  .stat-content {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .stat-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .stat-title {
+    font-size: 14px;
+    color: #8c8c8c;
+    margin-bottom: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .stat-value {
+    font-weight: 600;
+    line-height: 1.2;
+    display: flex;
+    align-items: baseline;
+    gap: 2px;
+  }
+
+  .stat-prefix,
+  .stat-suffix {
+    font-size: 14px;
+    font-weight: normal;
+  }
+}
+
+.summary-stat-loading,
+.summary-stat-error {
+  padding: 16px;
+  text-align: center;
+  color: #999;
+}
+</style>

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

@@ -15,6 +15,7 @@
       <a-row style="height: 12px" v-if="xTreeConfigName"></a-row>
       <div v-show="!loading">
         <template v-if="!loadError">
+          <SummaryStatCard v-if="realQueryConfig.summaryStatConfig" :summaryStatConfig="realQueryConfig.summaryStatConfig" :serviceName="serviceName" />
           <x-add-form
             ref="xAddForm"
             @onLocalSubmit="onLocalSubmit"
@@ -222,10 +223,12 @@ import { executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
 import { getRealKeyData } from '@vue2-client/utils/util'
 import * as util from '@vue2-client/utils/util'
 import UserInfoDetailManage from '@vue2-client/pages/userInfoDetailManage/index.vue'
+import SummaryStatCard from '@/base-client/components/common/XFormTable/SummaryStatCard.vue'
 
 export default {
   name: 'XFormTable',
   components: {
+    SummaryStatCard,
     UserInfoDetailManage,
     XTreePro,
     XTable,

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

@@ -30,7 +30,7 @@ export default {
   data() {
     return {
       // 查询配置文件名
-      queryParamsName: 'UserFilesListCRUD',
+      queryParamsName: 'Test01CRUD',
       // 查询配置左侧tree
       xTreeConfigName: 'addressType',
       // 新增表单固定值