vue2-client 1.2.0 → 1.2.1

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

@@ -1,255 +1,255 @@
-# XTable
-
-动态表格控件，根据JSON配置生成一个完整的动态表格
-
-
-## 何时使用
-
-当需要一个动态生成的表格时
-
-
-引用方式：
-
-```javascript
-import XTable from '@vue2-client/base-client/components/XTable/XTable'
-
-export default {
-    components: {
-      XTable
-    }
-}
-```
-
-
-
-## 代码演示
-
-```html
-<x-table
-  v-if="loaded"
-  :json-data="json"
-  :queryParamsName="queryParamsName"
-  @loadData="loadData"
-  :form="form"
-/>
-```
-
-## API
-
-| 参数              | 说明                       | 类型     | 默认值  |
-|-----------------|--------------------------|--------|------|
-| jsonData        | JSON配置，根据[工具>查询配置生成]功能生成 | Object | {}   |
-| queryParamsName | 查询配置JSON文件名              | String | null |
-| loadData        | 数据的加载事件                  | event  | -    |
-| form            | 查询表单                     | Object | {}   |
-| fixedQueryForm  | 固定查询表单,会和查询表单合并查询        | Object | {}   |
-| @action         | 表格详情列的单击事件               | event  | -    |
-
-## 例子1
-----
-（基础使用）
-
-```vue
-<template>
-  <x-table
-    v-if="loaded"
-    :json-data="columnItemJson"
-    :queryParamsName="queryParamsName"
-    @loadData="loadData"
-    @action="toDetail"
-    :form="form"
-  />
-</template>
-
-<script>
-  import XTable from '@vue2-client/base-client/components/XTable/XTable'
-
-  export default {
-    components: {
-      XTable
-    },
-    data() {
-      return {
-        // 加载查询参数JSON配置文件是否完成
-        loaded: false,
-        // 从查询参数JSON配置中得到的生成表格列的JSON
-        columnItemJson: undefined,
-        // 表单
-        form: {},
-        // 查询配置文件名
-        queryParamsName: 'instructQueryParams',
-      }
-    },
-    created() {
-      this.getQueryJson()
-    },
-    methods: {
-      // 加载查询参数JSON配置文件
-      getQueryJson() {
-        this.columnItemJson = [
-          {
-            "scopedSlots":{
-              "customRender":"id"
-            },
-            "slotType":"ellipsis",
-            "dataIndex":"id",
-            "width":108,
-            "title":"编号",
-            "slotValue":8
-          },
-          {
-            "scopedSlots":{
-              "customRender":"f_userinfo_code"
-            },
-            "slotType":"ellipsis",
-            "dataIndex":"f_userinfo_code",
-            "width":164,
-            "title":"用户编号",
-            "slotValue":16
-          },
-          {
-            "scopedSlots":{
-              "customRender":"f_meternumber"
-            },
-            "slotType":"ellipsis",
-            "dataIndex":"f_meternumber",
-            "width":164,
-            "title":"表号",
-            "slotValue":16
-          },
-          {
-            "scopedSlots":{
-              "customRender":"f_user_name"
-            },
-            "slotType":"ellipsis",
-            "dataIndex":"f_user_name",
-            "width":164,
-            "title":"用户姓名",
-            "slotValue":16
-          },
-          {
-            "scopedSlots":{
-              "customRender":"f_address"
-            },
-            "slotType":"ellipsis",
-            "dataIndex":"f_address",
-            "width":220,
-            "title":"用户地址",
-            "slotValue":24
-          },
-          {
-            "scopedSlots":{
-              "customRender":"f_instruct_type"
-            },
-            "slotType":"ellipsis",
-            "dataIndex":"f_instruct_type",
-            "width":164,
-            "title":"指令类型",
-            "slotValue":16
-          },
-          {
-            "scopedSlots":{
-              "customRender":"f_instruct_title"
-            },
-            "slotType":"ellipsis",
-            "dataIndex":"f_instruct_title",
-            "width":164,
-            "title":"指令说明",
-            "slotValue":16
-          },
-          {
-            "scopedSlots":{
-              "customRender":"f_instruct_state"
-            },
-            "slotType":"badge",
-            "dataIndex":"f_instruct_state",
-            "title":"指令状态",
-            "slotKeyMap":"instructStateMap"
-          },
-          {
-            "scopedSlots":{
-              "customRender":"f_receive_state"
-            },
-            "slotType":"ellipsis",
-            "dataIndex":"f_receive_state",
-            "width":164,
-            "title":"响应结果",
-            "slotValue":16
-          },
-          {
-            "scopedSlots":{
-              "customRender":"f_instruct_date"
-            },
-            "slotType":"dateTime",
-            "dataIndex":"f_instruct_date",
-            "width":160,
-            "title":"生成时间"
-          },
-          {
-            "scopedSlots":{
-              "customRender":"f_inputtor"
-            },
-            "slotType":"ellipsis",
-            "dataIndex":"f_inputtor",
-            "width":164,
-            "title":"操作人",
-            "slotValue":16
-          },
-          {
-            "scopedSlots":{
-              "customRender":"action"
-            },
-            "slotType":"action",
-            "dataIndex":"action",
-            "title":"操作"
-          }
-        ]
-        this.loaded = true
-      },
-      // 加载表格数据
-      loadData (requestParameters, callback) {
-        // 你可以在requestParameters中追加传递给后台的额外参数
-        // 发起通用查询请求
-        const result = query(requestParameters)
-        // 将结果回调给表格
-        callback(result)
-      },
-      // 点击操作列时的方法
-      toDetail (record, id) {
-        console.debug('你点击了操作列：'+record)
-      }
-    }
-  }
-</script>
-```
-
-注意事项
-----
-
-> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果
->
-> 以上示例查询参数配置为后台生成后的结果，此处为了方便调试，所以直接写在了代码中，实际使用请通过发起请求获取查询参数配置
-```vue
-<script>
-  import { commonApi } from '@vue2-client/base-client/api/common'
-  import Vue from 'vue'
-
-  export default {
-    data () {
-      return {
-        // 查询配置文件名
-        queryParamsName: 'instructQueryParams'
-      }
-    },
-    methods: {
-      getColumnsJson () {
-        Vue.resetpost(commonApi.getColumnsJson, {str: this.queryParamsName}).then((res) => {
-          this.formItemJson = res.formJson
-          this.columnItemJson = res.columnJson
-          this.loaded = true
-        })
-      }
-    }
-  }
-</script>
-```
+# XTable
+
+动态表格控件，根据JSON配置生成一个完整的动态表格
+
+
+## 何时使用
+
+当需要一个动态生成的表格时
+
+
+引用方式：
+
+```javascript
+import XTable from '@vue2-client/base-client/components/XTable/XTable'
+
+export default {
+    components: {
+      XTable
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<x-table
+  v-if="loaded"
+  :json-data="json"
+  :queryParamsName="queryParamsName"
+  @loadData="loadData"
+  :form="form"
+/>
+```
+
+## API
+
+| 参数              | 说明                       | 类型     | 默认值  |
+|-----------------|--------------------------|--------|------|
+| jsonData        | JSON配置，根据[工具>查询配置生成]功能生成 | Object | {}   |
+| queryParamsName | 查询配置JSON文件名              | String | null |
+| loadData        | 数据的加载事件                  | event  | -    |
+| form            | 查询表单                     | Object | {}   |
+| fixedQueryForm  | 固定查询表单,会和查询表单合并查询        | Object | {}   |
+| @action         | 表格详情列的单击事件               | event  | -    |
+
+## 例子1
+----
+（基础使用）
+
+```vue
+<template>
+  <x-table
+    v-if="loaded"
+    :json-data="columnItemJson"
+    :queryParamsName="queryParamsName"
+    @loadData="loadData"
+    @action="toDetail"
+    :form="form"
+  />
+</template>
+
+<script>
+  import XTable from '@vue2-client/base-client/components/XTable/XTable'
+
+  export default {
+    components: {
+      XTable
+    },
+    data() {
+      return {
+        // 加载查询参数JSON配置文件是否完成
+        loaded: false,
+        // 从查询参数JSON配置中得到的生成表格列的JSON
+        columnItemJson: undefined,
+        // 表单
+        form: {},
+        // 查询配置文件名
+        queryParamsName: 'instructQueryParams',
+      }
+    },
+    created() {
+      this.getQueryJson()
+    },
+    methods: {
+      // 加载查询参数JSON配置文件
+      getQueryJson() {
+        this.columnItemJson = [
+          {
+            "scopedSlots":{
+              "customRender":"id"
+            },
+            "slotType":"ellipsis",
+            "dataIndex":"id",
+            "width":108,
+            "title":"编号",
+            "slotValue":8
+          },
+          {
+            "scopedSlots":{
+              "customRender":"f_userinfo_code"
+            },
+            "slotType":"ellipsis",
+            "dataIndex":"f_userinfo_code",
+            "width":164,
+            "title":"用户编号",
+            "slotValue":16
+          },
+          {
+            "scopedSlots":{
+              "customRender":"f_meternumber"
+            },
+            "slotType":"ellipsis",
+            "dataIndex":"f_meternumber",
+            "width":164,
+            "title":"表号",
+            "slotValue":16
+          },
+          {
+            "scopedSlots":{
+              "customRender":"f_user_name"
+            },
+            "slotType":"ellipsis",
+            "dataIndex":"f_user_name",
+            "width":164,
+            "title":"用户姓名",
+            "slotValue":16
+          },
+          {
+            "scopedSlots":{
+              "customRender":"f_address"
+            },
+            "slotType":"ellipsis",
+            "dataIndex":"f_address",
+            "width":220,
+            "title":"用户地址",
+            "slotValue":24
+          },
+          {
+            "scopedSlots":{
+              "customRender":"f_instruct_type"
+            },
+            "slotType":"ellipsis",
+            "dataIndex":"f_instruct_type",
+            "width":164,
+            "title":"指令类型",
+            "slotValue":16
+          },
+          {
+            "scopedSlots":{
+              "customRender":"f_instruct_title"
+            },
+            "slotType":"ellipsis",
+            "dataIndex":"f_instruct_title",
+            "width":164,
+            "title":"指令说明",
+            "slotValue":16
+          },
+          {
+            "scopedSlots":{
+              "customRender":"f_instruct_state"
+            },
+            "slotType":"badge",
+            "dataIndex":"f_instruct_state",
+            "title":"指令状态",
+            "slotKeyMap":"instructStateMap"
+          },
+          {
+            "scopedSlots":{
+              "customRender":"f_receive_state"
+            },
+            "slotType":"ellipsis",
+            "dataIndex":"f_receive_state",
+            "width":164,
+            "title":"响应结果",
+            "slotValue":16
+          },
+          {
+            "scopedSlots":{
+              "customRender":"f_instruct_date"
+            },
+            "slotType":"dateTime",
+            "dataIndex":"f_instruct_date",
+            "width":160,
+            "title":"生成时间"
+          },
+          {
+            "scopedSlots":{
+              "customRender":"f_inputtor"
+            },
+            "slotType":"ellipsis",
+            "dataIndex":"f_inputtor",
+            "width":164,
+            "title":"操作人",
+            "slotValue":16
+          },
+          {
+            "scopedSlots":{
+              "customRender":"action"
+            },
+            "slotType":"action",
+            "dataIndex":"action",
+            "title":"操作"
+          }
+        ]
+        this.loaded = true
+      },
+      // 加载表格数据
+      loadData (requestParameters, callback) {
+        // 你可以在requestParameters中追加传递给后台的额外参数
+        // 发起通用查询请求
+        const result = query(requestParameters)
+        // 将结果回调给表格
+        callback(result)
+      },
+      // 点击操作列时的方法
+      toDetail (record, id) {
+        console.debug('你点击了操作列：'+record)
+      }
+    }
+  }
+</script>
+```
+
+注意事项
+----
+
+> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果
+>
+> 以上示例查询参数配置为后台生成后的结果，此处为了方便调试，所以直接写在了代码中，实际使用请通过发起请求获取查询参数配置
+```vue
+<script>
+  import { commonApi } from '@vue2-client/base-client/api/common'
+  import Vue from 'vue'
+
+  export default {
+    data () {
+      return {
+        // 查询配置文件名
+        queryParamsName: 'instructQueryParams'
+      }
+    },
+    methods: {
+      getColumnsJson () {
+        Vue.resetpost(commonApi.getColumnsJson, {str: this.queryParamsName}).then((res) => {
+          this.formItemJson = res.formJson
+          this.columnItemJson = res.columnJson
+          this.loaded = true
+        })
+      }
+    }
+  }
+</script>
+```