vue2-client 0.1.0 → 1.1.0

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

@@ -0,0 +1,262 @@
+<template>
+  <div>
+    <custom-columns-drawer
+      :visible.sync="visible"
+      :columns.sync="tableColumns"
+      :columns-meta="jsonData"/>
+    <a-row :gutter="48">
+      <a-col>
+        <span :style="{ float: 'left', overflow: 'hidden', marginBottom: '8px' }">
+          <slot name="expand"></slot>
+        </span>
+      </a-col>
+      <a-col>
+        <span :style="{ float: 'right', overflow: 'hidden', marginBottom: '8px' }">
+          <a-button-group>
+            <a-button @click="toggleIsFormShow">
+              <a-icon :style="iconStyle" type="vertical-align-top"/>
+            </a-button>
+            <a-button @click="refresh(true)">
+              <a-icon :style="iconStyle" type="reload" />
+            </a-button>
+            <a-button @click="showDrawer">
+              <a-icon :style="iconStyle" type="table" />
+            </a-button>
+            <a-button @click="exports">
+              <a-icon :style="iconStyle" type="cloud-download"/>
+            </a-button>
+          </a-button-group>
+        </span>
+      </a-col>
+    </a-row>
+    <s-table
+      ref="table"
+      size="default"
+      :rowKey="rowKey"
+      :columns="tableColumns"
+      :data="loadData"
+      :alert="true"
+      :rowSelection="rowSelection"
+      showPagination="auto"
+      :scroll="{ x: scrollXWidth, y: scrollYWidth }"
+    >
+      <template
+        v-for="(item, index) in tableColumns"
+        :slot="item.dataIndex"
+        slot-scope="text, record">
+        <!-- 文本溢出省略(ellipsis) -->
+        <span :key="index" v-if="item.slotType === 'ellipsis'">
+          <ellipsis :length="item.slotValue" tooltip>{{ text === '' ? '--' : text }}</ellipsis>
+        </span>
+        <!-- 徽标(badge) -->
+        <span :key="index" v-else-if="item.slotType === 'badge'">
+          <x-badge :badge-key="item.slotKeyMap" :value="text" />
+        </span>
+        <!-- 日期(date) -->
+        <span :key="index" v-else-if="item.slotType === 'date'">
+          {{ format(text,'yyyy-MM-dd') }}
+        </span>
+        <!-- 日期时间(datetime) -->
+        <span :key="index" v-else-if="item.slotType === 'dateTime'">
+          {{ format(text,'yyyy-MM-dd hh:mm:ss') }}
+        </span>
+        <!-- 操作列(action) -->
+        <span :key="index" v-else-if="item.slotType === 'action'">
+          <a @click="action(record)">{{ item.slotValue }}</a>
+        </span>
+      </template>
+    </s-table>
+  </div>
+</template>
+<script>
+import { Ellipsis, STable } from '@/components'
+import { formatDate } from '@/utils/util'
+import { exportJson } from '@/utils/excel/Export2Excel'
+
+export default {
+  name: 'XTable',
+  components: {
+    STable,
+    Ellipsis
+  },
+  data () {
+    return {
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        // 取到表格携带的表单参数
+        const requestParameters = Object.assign({}, parameter)
+        // 取到父组件传入的表单参数
+        const conditionParams = Object.assign(this.fixedQueryForm, this.form)
+        // 如果适用了综合筛选表单，则进行数据处理
+        if (conditionParams.rowIdName) {
+          const rowIdName = conditionParams.rowIdName
+          const rowIdValue = conditionParams.rowIdValue
+          delete conditionParams.rowIdName
+          delete conditionParams.rowIdValue
+          if (rowIdValue) {
+            conditionParams[rowIdName] = rowIdValue
+          }
+        }
+        // 如果传了燃气公司字段，则进行数据处理
+        if (conditionParams.orgName) {
+          requestParameters.orgName = conditionParams.orgName
+          delete conditionParams.orgName
+        }
+        requestParameters.conditionParams = conditionParams
+        requestParameters.queryParamsName = this.queryParamsName
+        requestParameters.queryParams = this.queryParams
+        // 加载数据
+        return this.loadTableData(requestParameters)
+      },
+      rowKey: undefined,
+      scrollXWidth: 1600,
+      scrollYWidth: 437,
+      selectedRowKeys: [],
+      selectedRows: [],
+      // 数据列
+      tableColumns: this.jsonData,
+      // 是否显示展示列抽屉
+      visible: false,
+      dataSource: [],
+      // 图标样式
+      iconStyle: {
+        position: 'relative',
+        top: '1px'
+      }
+    }
+  },
+  watch: {
+    form (rel) {
+      this.form = rel
+      this.refresh(true)
+    },
+    jsonData () {
+      this.initTableParams()
+    }
+  },
+  props: {
+    jsonData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    queryParamsName: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    },
+    // 查询参数对象, 用于没有对应查询配置文件名时
+    queryParams: {
+      type: Object,
+      default: null
+    },
+    form: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 固定查询表单
+    fixedQueryForm: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  computed: {
+    rowSelection () {
+      return {
+        selectedRowKeys: this.selectedRowKeys,
+        onChange: this.onSelectChange
+      }
+    }
+  },
+  mounted () {
+    this.initTableParams()
+  },
+  methods: {
+    exports () {
+      const tHeader = this.tableColumns.filter(res => res.slotType !== 'action').map(res => res.title)
+      const filterVal = this.tableColumns.map(res => res.dataIndex)
+      const list = this.dataSource
+      const data = this.formatJson(filterVal, list)
+      exportJson(tHeader, data, new Date())
+    },
+    formatJson (filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    badgeFilter (key, value) {
+      return this.$appdata.getParam(key, value)
+    },
+    initTableParams () {
+      let totalWidth = 0
+      this.rowKey = this.tableColumns[0].dataIndex
+      for (let i = 0; i < this.tableColumns.length; i++) {
+        const item = this.tableColumns[i]
+        if (item.dataIndex === 'action') {
+          item.fixed = 'right'
+          item.width = 70
+        }
+        if (item.width) {
+          totalWidth = totalWidth + item.width
+        } else {
+          totalWidth = totalWidth + 180
+        }
+      }
+      const width = document.documentElement.clientWidth
+      if (width >= 1600) {
+        this.scrollYWidth = 429
+      } else if (width >= 1200) {
+        this.scrollYWidth = 390
+      } else {
+        this.scrollYWidth = 343
+      }
+      // 横向滚动长度大于所有宽度，才能实现固定表头
+      this.scrollXWidth = totalWidth
+    },
+    loadTableData (requestParameters) {
+      let data = []
+      this.$emit('loadData', requestParameters, val => {
+        data = val
+      })
+      const _this = this
+       data.then(res => {
+         _this.dataSource = res.data
+      })
+      return data
+    },
+    action (record) {
+      this.$emit('action', record, record[this.jsonData[0].dataIndex])
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+      this.$emit('selectRow', selectedRowKeys)
+    },
+    clearRowKeys () {
+      this.$refs.table.clearSelected()
+    },
+    /**
+     * 表格重新加载方法
+     * 如果参数为 true, 则强制刷新到第一页
+     */
+    refresh (bool) {
+      this.$refs.table.refresh(bool)
+    },
+    format (date, format) {
+      return formatDate(date, format)
+    },
+    showDrawer () {
+      this.visible = true
+    },
+    toggleIsFormShow () {
+      this.$emit('toggleIsFormShow')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+</style>

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

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

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

@@ -0,0 +1,255 @@
+# XTable
+
+动态表格控件，根据JSON配置生成一个完整的动态表格
+
+
+## 何时使用
+
+当需要一个动态生成的表格时
+
+
+引用方式：
+
+```javascript
+import XTable from '@/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 '@/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 '@/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>
+```

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

@@ -0,0 +1,105 @@
+<template>
+  <div id="XTreeOne">
+    <component-layout-one :siderProps="{width: leftWidth,collapsible: collapsible,collapsedWidth: collapsedWidth,theme: 'light'}">
+      <template slot="left">
+        <div class="bg-white pd-20" :style="{height: treeHeight}">
+          <a-input-search style="margin-bottom: 8px" placeholder="Search" allow-clear @change="onChange" />
+          <a-tree
+            :tree-data="searchData"
+            @select="onSelect">
+            <template #title="{ title }">
+              <span v-if="title.indexOf(searchValue) > -1">
+                {{ title.substr(0, title.indexOf(searchValue)) }}
+                <span style="color: #f50">{{ searchValue }}</span>
+                {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
+              </span>
+              <span v-else>{{ title }}</span>
+            </template>
+          </a-tree>
+        </div>
+      </template>
+      <slot></slot>
+    </component-layout-one>
+  </div>
+</template>
+
+<script>
+  import ComponentLayoutOne from '@/layouts/ComponentLayoutOne'
+  export default {
+    name: 'XTreeOne',
+    components: { ComponentLayoutOne },
+    props: {
+      // 左侧宽度
+      leftWidth: {
+        type: [Number, String],
+        default: () => {
+          return 200
+        }
+      },
+      // 左侧是否可收起
+      collapsible: {
+        type: Boolean,
+        default: true
+      },
+      // 左侧收起后宽度
+      collapsedWidth: {
+        type: Number,
+        default: 0
+      },
+      // Tree 树形控件数据
+      // array<{key, title, children, [disabled, selectable]}>
+      treeData: {
+        type: Array,
+        required: true
+      },
+      treeHeight: {
+        type: String,
+        default: '85vh'
+      }
+    },
+    data () {
+      return {
+        // 用于展示筛选出的数据
+        searchData: [],
+        // 查询值
+        searchValue: ''
+      }
+    },
+    created () {
+    },
+    mounted () {
+    },
+    watch: {
+      'treeData' () {
+        // 添加title插槽
+        for (const index of this.treeData.keys()) {
+          this.treeData[index].scopedSlots = { title: 'title' }
+        }
+        this.searchData = Object.assign([], this.treeData)
+      }
+    },
+    methods: {
+      onChange (e) {
+        const name = e.target.value
+        this.searchValue = name
+        this.searchData = []
+        for (const row of this.treeData) {
+          if (row.title.indexOf(name) > -1) {
+            this.searchData.push(row)
+          }
+        }
+      },
+      onSelect (selectedKeys, e) {
+        this.$emit('onSelect', selectedKeys, e)
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  #XTreeOne {
+    .pd-20 {
+      padding: 20px;
+    }
+  }
+</style>

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

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