vue2-client 1.2.109 → 1.2.112

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

@@ -1,96 +1,96 @@
-# XFormTable
-
-动态查询控件，进一步整合了XTable和XForm
-
-
-## 何时使用
-
-当需要一个通用的表单，表格一体化控件时
-
-
-引用方式：
-
-```javascript
-import XFormTable from '@vue2-client/base-client/components/XFormTable/XFormTable'
-
-export default {
-  components: {
-    XFormTable
-  }
-}
-```
-
-
-
-## 代码演示
-
-```html
-<x-form-table
-  title="业务名称"
-  :queryParamsName="queryParamsName">
-</x-form-table>
-```
-
-## API
-
-| 参数                 | 说明                      | 类型      | 默认值   |
-|--------------------|-------------------------|---------|-------|
-| title              | 业务名称                    | String  | ''    |
-| queryParamsName    | 查询配置JSON文件名             | String  | null  |
-| queryParamsJson    | 查询配置文件Json，用于查询配置生成器的预览 | Object  | null  |
-| logicName          | 通过logic获取表单表格配置         | String  | null  |
-| logicParam         | 执行logic传递的参数            | Object  | null  |
-| fixedQueryForm     | 固定查询表单,会和查询表单合并查询       | Object  | {}    |
-| fixedAddForm       | 固定新增表单，会和新增表单合并         | Object  | {}    |
-| isExports          | 是否显示导出按钮                | Boolean | true  |
-| viewMode           | 是否为预览模式                 | Boolean | false |
-| @action            | 表格详情列的单击事件              | event   | -     |
-| @afterSubmit       | 增改提交后的回调方法              | event   | -     |
-| @afterDelete       | 删除提交后的回调方法              | event   | -     |
-| @afterSearchSubmit | 查询提交后的回调方法              | event   | -     |
- | @afterQuery        | 表格查询后的回调方法              | event   | -     |
- | @selectRow         | 选择表格列后的回调方法             | event   | -     |
-## 例子1
-----
-（基础使用）
-
-```vue
-<template>
-  <x-form-table
-    :queryParamsName="queryParamsName"
-    @action="toDetail">
-  </x-form-table>
-</template>
-
-<script>
-import XFormTable from '@vue2-client/base-client/components/XFormTable/XFormTable'
-
-export default {
-  components: {
-    XFormTable
-  },
-  data () {
-    return {
-      // 查询配置文件名
-      queryParamsName: 'logQueryParams'
-    }
-  },
-  methods: {
-    toDetail (record, id) {
-      console.debug("您选择了项："+ id)
-    }
-  }
-}
-</script>
-```
-
-注意事项
-----
-
-> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果
->
-> 本组件已支持临时表的创建，当表名以##（两个井号）开头，则认为在创建临时表。
->
-> 临时表会在连接断开时自动销毁
->
-> 临时表仅做展示数据用，增，改，删，需要传入对应的自定义事件。自定义处理方式
+# XFormTable
+
+动态查询控件，进一步整合了XTable和XForm
+
+
+## 何时使用
+
+当需要一个通用的表单，表格一体化控件时
+
+
+引用方式：
+
+```javascript
+import XFormTable from '@vue2-client/base-client/components/XFormTable/XFormTable'
+
+export default {
+  components: {
+    XFormTable
+  }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<x-form-table
+  title="业务名称"
+  :queryParamsName="queryParamsName">
+</x-form-table>
+```
+
+## API
+
+| 参数                 | 说明                      | 类型      | 默认值   |
+|--------------------|-------------------------|---------|-------|
+| title              | 业务名称                    | String  | ''    |
+| queryParamsName    | 查询配置JSON文件名             | String  | null  |
+| queryParamsJson    | 查询配置文件Json，用于查询配置生成器的预览 | Object  | null  |
+| logicName          | 通过logic获取表单表格配置         | String  | null  |
+| logicParam         | 执行logic传递的参数            | Object  | null  |
+| fixedQueryForm     | 固定查询表单,会和查询表单合并查询       | Object  | {}    |
+| fixedAddForm       | 固定新增表单，会和新增表单合并         | Object  | {}    |
+| isExports          | 是否显示导出按钮                | Boolean | true  |
+| viewMode           | 是否为预览模式                 | Boolean | false |
+| @action            | 表格详情列的单击事件              | event   | -     |
+| @afterSubmit       | 增改提交后的回调方法              | event   | -     |
+| @afterDelete       | 删除提交后的回调方法              | event   | -     |
+| @afterSearchSubmit | 查询提交后的回调方法              | event   | -     |
+ | @afterQuery        | 表格查询后的回调方法              | event   | -     |
+ | @selectRow         | 选择表格列后的回调方法             | event   | -     |
+## 例子1
+----
+（基础使用）
+
+```vue
+<template>
+  <x-form-table
+    :queryParamsName="queryParamsName"
+    @action="toDetail">
+  </x-form-table>
+</template>
+
+<script>
+import XFormTable from '@vue2-client/base-client/components/XFormTable/XFormTable'
+
+export default {
+  components: {
+    XFormTable
+  },
+  data () {
+    return {
+      // 查询配置文件名
+      queryParamsName: 'logQueryParams'
+    }
+  },
+  methods: {
+    toDetail (record, id) {
+      console.debug("您选择了项："+ id)
+    }
+  }
+}
+</script>
+```
+
+注意事项
+----
+
+> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果
+>
+> 本组件已支持临时表的创建，当表名以##（两个井号）开头，则认为在创建临时表。
+>
+> 临时表会在连接断开时自动销毁
+>
+> 临时表仅做展示数据用，增，改，删，需要传入对应的自定义事件。自定义处理方式

package/src/base-client/components/iot/DeviceDetailsView/DeviceDetailsView.vue

@@ -1,232 +1,232 @@
-<template>
-  <a-drawer
-    title="设备详情"
-    placement="right"
-    :width="isMobile ? screenWidth : screenWidth * 0.85"
-    :visible="visible"
-    @close="onClose"
-  >
-    <a-spin :spinning="loadDeviceDetails">
-      <a-page-header :title="'设备号：' + details.f_device_no">
-        <div class="row">
-          <div class="content">
-            <a-descriptions size="small" :column="isMobile ? 1 : 2">
-              <a-descriptions-item label="设备IOT标识">{{ details.deviceid }}</a-descriptions-item>
-              <<a-descriptions-item/>
-              <a-descriptions-item label="创建时间">{{ details.f_input_date }}</a-descriptions-item>
-              <a-descriptions-item label="创建人">{{ details.f_inputtor }}</a-descriptions-item>
-            </a-descriptions>
-          </div>
-          <div class="extra">
-            <a-row class="status-list">
-              <a-col :xs="12" :sm="24">
-                <div class="text">设备状态</div>
-                <div class="heading">
-                  <x-badge badge-key="deviceStateMap" :value="details.f_state" :is-external-text="true"/>
-                </div>
-              </a-col>
-            </a-row>
-            <p></p>
-          </div>
-        </div>
-        <!-- actions -->
-        <template v-slot:extra>
-          <a-button-group style="margin-right: 4px;">
-            <a-button type="dashed" @click="initView" :loading="loadDeviceDetails">刷新</a-button>
-          </a-button-group>
-          <a-button-group style="margin-right: 4px;">
-          </a-button-group>
-        </template>
-        <template slot="footer">
-          <a-tabs :default-active-key="tabActiveKey" :activeKey="tabActiveKey" @change="handleTabChange" style="margin-bottom: 23px;">
-            <template v-for="value in tabList">
-              <a-tab-pane :key="value.key" :tab="value.tab"/>
-            </template>
-          </a-tabs>
-          <div v-if="!loadDeviceDetails">
-            <device-details-main :details="details" v-if="tabActiveKey === '1'"/>
-            <device-details-read :device-id="details.id" v-if="tabActiveKey === '2'"/>
-            <device-details-instruct :device-no="details.f_device_no" v-if="tabActiveKey === '3'"/>
-            <device-details-singular :device-id="details.id" v-if="tabActiveKey === '4'"/>
-            <device-details-instruct-operate :device="details" v-if="tabActiveKey === '5'"/>
-            <device-details-count :device-id="details.id" v-if="tabActiveKey === '6'"/>
-          </div>
-        </template>
-      </a-page-header>
-    </a-spin>
-  </a-drawer>
-</template>
-
-<script>
-import { DeviceDetailsMain, DeviceDetailsCount, DeviceDetailsInstruct, DeviceDetailsRead, DeviceDetailsSingular, DeviceDetailsInstructOperate } from '@vue2-client/base-client/components/iot/DeviceDetailsView/part'
-import { DeviceDetailsViewApi, post } from '@vue2-client/services/api'
-import { mapState } from 'vuex'
-
-export default {
-  name: 'DeviceDetailsView',
-  components: {
-    DeviceDetailsMain,
-    DeviceDetailsCount,
-    DeviceDetailsInstruct,
-    DeviceDetailsRead,
-    DeviceDetailsSingular,
-    DeviceDetailsInstructOperate
-  },
-  data () {
-    return {
-      // 页面宽度
-      screenWidth: document.documentElement.clientWidth,
-      // Tab页签
-      tabActiveKey: '1',
-      // 设备详情
-      details: {
-        f_device_no: '',
-        f_imei: '',
-        f_imsi: '',
-        f_state: '正常',
-        f_device_id: '',
-        f_manufactor: '',
-        f_brand: '',
-        f_alias: '',
-        f_model: '',
-        f_input_date: '',
-        f_inputtor: ''
-      },
-      tabList: [
-        { key: '1', tab: '基本' },
-        { key: '2', tab: '抄表' },
-        { key: '3', tab: '指令' },
-        { key: '4', tab: '异常' },
-        { key: '5', tab: '指令操作' },
-        { key: '6', tab: '数据分析' }
-      ],
-      // 设备详情加载
-      loadDeviceDetails: true
-    }
-  },
-  mounted () {
-    this.initView()
-  },
-  computed: {
-    ...mapState('account', { currUser: 'user' }),
-    ...mapState('setting', ['isMobile'])
-  },
-  props: {
-    deviceNo: {
-      type: String || Number,
-      required: true
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    // 初始化组件
-    initView () {
-      this.tabActiveKey = '1'
-      this.getIotDevice(this.deviceNo)
-    },
-    onClose () {
-      this.$emit('update:visible', false)
-    },
-    // 获取设备详情信息
-    getIotDevice (deviceNo) {
-      this.loadDeviceDetails = true
-      return post(DeviceDetailsViewApi.getDeviceDetails, {
-        id: deviceNo
-      }).then(res => {
-        this.details = res
-        this.loadDeviceDetails = false
-      }, err => {
-        this.loadDeviceDetails = false
-        console.error(err)
-      })
-    },
-    // Tab切换
-    handleTabChange (key) {
-      this.tabActiveKey = key
-    }
-  },
-  watch: {
-    'visible' (val) {
-      if (val) {
-        this.initView()
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.business {
-  color: #ffffff;
-}
-.business:enabled:hover {
-  background-color: #85CE61 !important;
-  border-color: #85CE61 !important;
-}
-.business:enabled {
-  background-color: #67c23a;
-  border-color: #67c23a;
-}
-.business:disabled {
-  color: rgba(0, 0, 0, 0.25);
-}
-.detail-layout {
-  margin-left: 44px;
-}
-.text {
-  color: rgba(0, 0, 0, .45);
-}
-
-.heading {
-  color: rgba(0, 0, 0, .85);
-  font-size: 20px;
-}
-
-.no-data {
-  color: rgba(0, 0, 0, .25);
-  text-align: center;
-  line-height: 64px;
-  font-size: 16px;
-
-  i {
-    font-size: 24px;
-    margin-right: 16px;
-    position: relative;
-    top: 3px;
-  }
-}
-
-.mobile {
-  .detail-layout {
-    margin-left: unset;
-  }
-  .text {
-
-  }
-  .status-list {
-    text-align: left;
-  }
-}
-
-.row {
-  display: flex;
-
-  .content {
-    -webkit-box-flex: 1;
-    flex: auto;
-    -ms-flex: auto;
-  }
-
-  .extra {
-    flex: 0 1 auto;
-    -webkit-box-flex: 0;
-    -ms-flex: 0 1 auto;
-    min-width: 242px;
-    margin-left: 88px;
-    text-align: right;
-  }
-}
-</style>
+<template>
+  <a-drawer
+    title="设备详情"
+    placement="right"
+    :width="isMobile ? screenWidth : screenWidth * 0.85"
+    :visible="visible"
+    @close="onClose"
+  >
+    <a-spin :spinning="loadDeviceDetails">
+      <a-page-header :title="'设备号：' + details.f_device_no">
+        <div class="row">
+          <div class="content">
+            <a-descriptions size="small" :column="isMobile ? 1 : 2">
+              <a-descriptions-item label="设备IOT标识">{{ details.deviceid }}</a-descriptions-item>
+              <<a-descriptions-item/>
+              <a-descriptions-item label="创建时间">{{ details.f_input_date }}</a-descriptions-item>
+              <a-descriptions-item label="创建人">{{ details.f_inputtor }}</a-descriptions-item>
+            </a-descriptions>
+          </div>
+          <div class="extra">
+            <a-row class="status-list">
+              <a-col :xs="12" :sm="24">
+                <div class="text">设备状态</div>
+                <div class="heading">
+                  <x-badge badge-key="deviceStateMap" :value="details.f_state" :is-external-text="true"/>
+                </div>
+              </a-col>
+            </a-row>
+            <p></p>
+          </div>
+        </div>
+        <!-- actions -->
+        <template v-slot:extra>
+          <a-button-group style="margin-right: 4px;">
+            <a-button type="dashed" @click="initView" :loading="loadDeviceDetails">刷新</a-button>
+          </a-button-group>
+          <a-button-group style="margin-right: 4px;">
+          </a-button-group>
+        </template>
+        <template slot="footer">
+          <a-tabs :default-active-key="tabActiveKey" :activeKey="tabActiveKey" @change="handleTabChange" style="margin-bottom: 23px;">
+            <template v-for="value in tabList">
+              <a-tab-pane :key="value.key" :tab="value.tab"/>
+            </template>
+          </a-tabs>
+          <div v-if="!loadDeviceDetails">
+            <device-details-main :details="details" v-if="tabActiveKey === '1'"/>
+            <device-details-read :device-id="details.id" v-if="tabActiveKey === '2'"/>
+            <device-details-instruct :device-no="details.f_device_no" v-if="tabActiveKey === '3'"/>
+            <device-details-singular :device-id="details.id" v-if="tabActiveKey === '4'"/>
+            <device-details-instruct-operate :device="details" v-if="tabActiveKey === '5'"/>
+            <device-details-count :device-id="details.id" v-if="tabActiveKey === '6'"/>
+          </div>
+        </template>
+      </a-page-header>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script>
+import { DeviceDetailsMain, DeviceDetailsCount, DeviceDetailsInstruct, DeviceDetailsRead, DeviceDetailsSingular, DeviceDetailsInstructOperate } from '@vue2-client/base-client/components/iot/DeviceDetailsView/part'
+import { DeviceDetailsViewApi, post } from '@vue2-client/services/api'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'DeviceDetailsView',
+  components: {
+    DeviceDetailsMain,
+    DeviceDetailsCount,
+    DeviceDetailsInstruct,
+    DeviceDetailsRead,
+    DeviceDetailsSingular,
+    DeviceDetailsInstructOperate
+  },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // Tab页签
+      tabActiveKey: '1',
+      // 设备详情
+      details: {
+        f_device_no: '',
+        f_imei: '',
+        f_imsi: '',
+        f_state: '正常',
+        f_device_id: '',
+        f_manufactor: '',
+        f_brand: '',
+        f_alias: '',
+        f_model: '',
+        f_input_date: '',
+        f_inputtor: ''
+      },
+      tabList: [
+        { key: '1', tab: '基本' },
+        { key: '2', tab: '抄表' },
+        { key: '3', tab: '指令' },
+        { key: '4', tab: '异常' },
+        { key: '5', tab: '指令操作' },
+        { key: '6', tab: '数据分析' }
+      ],
+      // 设备详情加载
+      loadDeviceDetails: true
+    }
+  },
+  mounted () {
+    this.initView()
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    ...mapState('setting', ['isMobile'])
+  },
+  props: {
+    deviceNo: {
+      type: String || Number,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    // 初始化组件
+    initView () {
+      this.tabActiveKey = '1'
+      this.getIotDevice(this.deviceNo)
+    },
+    onClose () {
+      this.$emit('update:visible', false)
+    },
+    // 获取设备详情信息
+    getIotDevice (deviceNo) {
+      this.loadDeviceDetails = true
+      return post(DeviceDetailsViewApi.getDeviceDetails, {
+        id: deviceNo
+      }).then(res => {
+        this.details = res
+        this.loadDeviceDetails = false
+      }, err => {
+        this.loadDeviceDetails = false
+        console.error(err)
+      })
+    },
+    // Tab切换
+    handleTabChange (key) {
+      this.tabActiveKey = key
+    }
+  },
+  watch: {
+    'visible' (val) {
+      if (val) {
+        this.initView()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.business {
+  color: #ffffff;
+}
+.business:enabled:hover {
+  background-color: #85CE61 !important;
+  border-color: #85CE61 !important;
+}
+.business:enabled {
+  background-color: #67c23a;
+  border-color: #67c23a;
+}
+.business:disabled {
+  color: rgba(0, 0, 0, 0.25);
+}
+.detail-layout {
+  margin-left: 44px;
+}
+.text {
+  color: rgba(0, 0, 0, .45);
+}
+
+.heading {
+  color: rgba(0, 0, 0, .85);
+  font-size: 20px;
+}
+
+.no-data {
+  color: rgba(0, 0, 0, .25);
+  text-align: center;
+  line-height: 64px;
+  font-size: 16px;
+
+  i {
+    font-size: 24px;
+    margin-right: 16px;
+    position: relative;
+    top: 3px;
+  }
+}
+
+.mobile {
+  .detail-layout {
+    margin-left: unset;
+  }
+  .text {
+
+  }
+  .status-list {
+    text-align: left;
+  }
+}
+
+.row {
+  display: flex;
+
+  .content {
+    -webkit-box-flex: 1;
+    flex: auto;
+    -ms-flex: auto;
+  }
+
+  .extra {
+    flex: 0 1 auto;
+    -webkit-box-flex: 0;
+    -ms-flex: 0 1 auto;
+    min-width: 242px;
+    margin-left: 88px;
+    text-align: right;
+  }
+}
+</style>