vue2-client 0.1.0 → 1.1.0

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

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

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

@@ -0,0 +1,42 @@
+# CreateQuery 完整查询配置生成
+
+提供完整查询配置生成的快捷组件
+
+
+
+## 何时使用
+
+允许生成完整查询配置
+
+
+
+引用方式：
+
+```javascript
+import CreateQuery from '@/base-client/components/CreateQuery'
+
+export default {
+    components: {
+      CreateQuery
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<create-query
+  :toEditJson="toEditJson"
+  :visible.sync="createQueryVisible"
+/>
+```
+
+## API
+
+| 参数               | 说明                                       | 类型      | 默认值       |
+|------------------|------------------------------------------|---------|-----------|
+| visible          | 是否显示                                     | Boolean | false     |
+| toEditJson       | 要编辑的json 当 visible 从false变成true时解析加载到页面上 | Object  | undefined |
+| @saveQueryParams | 查询配置点击保存后事件                              | event   | -         |

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

@@ -0,0 +1,540 @@
+<template>
+  <a-drawer
+    title="基础表单配置生成"
+    placement="right"
+    :width="isMobile ? screenWidth : screenWidth * 0.85"
+    :visible="visible"
+    @close="onClose"
+  >
+    <a-row :gutter="24">
+      <a-col :xl="14" :lg="12" :md="12" :sm="24" :xs="24">
+        <a-form-model
+          ref="businessCreateForm"
+          :rules="rules"
+          :model="form"
+          :label-col="labelCol"
+          :wrapper-col="wrapperCol"
+        >
+          <a-form-model-item label="参数组名称" prop="group">
+            <a-input v-model="form.group" placeholder="设置表单项的组名，如：设置上报参数" />
+          </a-form-model-item>
+          <a-form-model-item label="参数组描述" prop="describe">
+            <a-input v-model="form.describe" placeholder="简单描述参数组，如：用于配置物联网设备的上报参数" />
+          </a-form-model-item>
+          <a-form-model-item label="数据字段" prop="column">
+            <a-button type="primary" @click="addColumnItem()">增加</a-button>
+            <div v-for="(columnItem, index) in form.column" :key="index">
+              <a-row :gutter="16">
+                <a-col :span="16">
+                  <span style="font-weight: bold">{{ columnItem.title }}（{{ columnItem.key }}）</span>
+                </a-col>
+                <a-col v-if="index > 0 && form.column.length > 1" :span="2">
+                  <a-icon type="up-square" @click="upColumnItem(columnItem.key,index)"/>
+                </a-col>
+                <a-col v-if="(index !== form.column.length - 1) && form.column.length > 1" :span="2">
+                  <a-icon type="down-square" @click="downColumnItem(columnItem.key,index)"/>
+                </a-col>
+                <a-col :span="2">
+                  <a-icon type="edit" @click="editColumnItem(columnItem.key,index)"/>
+                </a-col>
+                <a-col :span="2">
+                  <a-icon type="close" @click="removeColumnItem(columnItem.key,index)"/>
+                </a-col>
+              </a-row>
+            </div>
+          </a-form-model-item>
+        </a-form-model>
+        <a-modal
+          title="数据字段配置"
+          :visible="dataColumnVisible"
+          :width="1000"
+          :zIndex="1001"
+          @cancel="modelCancel"
+          @ok="submitItem">
+          <a-form-model
+            ref="itemForm"
+            :rules="itemRules"
+            :model="item">
+            <a-row :gutter="16">
+              <a-col :span="8">
+                <a-form-model-item label="表单项名" prop="key">
+                  <a-input v-model="item.key" placeholder="请输入表单项名" ref="key">
+                    <a-popover slot="suffix" title="关于表单项名" placement="bottom">
+                      <template slot="content">
+                        <p>设置表单项的名称</p>
+                      </template>
+                      <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                    </a-popover>
+                  </a-input>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-model-item label="表单项中文名" prop="title">
+                  <a-input v-model="item.title" placeholder="请输入表单项中文名，如：姓名" />
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+            <template>
+              <a-row :gutter="16">
+                <a-col :span="8">
+                  <a-form-model-item label="表单类型" prop="formType">
+                    <a-select v-model="item.formType" placeholder="表单类型，可选">
+                      <a-select-option key="input">输入框</a-select-option>
+                      <a-select-option key="select">选择框</a-select-option>
+                      <a-select-option key="rangePicker">日期范围选择框</a-select-option>
+                      <a-select-option key="monthPicker">月份选择框</a-select-option>
+                      <a-select-option key="datePicker">单日选择框</a-select-option>
+                      <a-select-option key="cascader">级联选择框</a-select-option>
+                      <a-select-option key="textarea">文本域</a-select-option>
+                      <a-popover slot="suffixIcon" title="关于表单类型" placement="bottom">
+                        <template slot="content">
+                          <p>预览设置的表单类型</p>
+                          <a-input-group compact style="width: 400px;">
+                            <a-input value="输入框" style="width: 20%" readOnly/>
+                            <a-input style="width: 80%" placeholder="请输入"/>
+                          </a-input-group>
+                          <br/>
+                          <a-input-group compact style="width: 400px;">
+                            <a-input value="选择框" style="width: 20%" readOnly/>
+                            <a-select style="width: 80%" placeholder="请选择"/>
+                          </a-input-group>
+                          <br/>
+                          <a-input-group compact style="width: 400px;">
+                            <a-input value="日期范围选择框" style="width: 20%" readOnly/>
+                            <a-range-picker style="width: 80%" :show-time="true" format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" />
+                          </a-input-group>
+                          <br/>
+                          <a-input-group compact style="width: 400px;">
+                            <a-input value="月份选择框" style="width: 20%" readOnly/>
+                            <a-month-picker style="width: 80%"/>
+                          </a-input-group>
+                          <br/>
+                          <a-input-group compact style="width: 400px;">
+                            <a-input value="单日选择框" style="width: 20%" readOnly/>
+                            <a-date-picker style="width: 80%"/>
+                          </a-input-group>
+                          <br/>
+                          <a-input-group compact style="width: 400px;">
+                            <a-input value="级联选择框" style="width: 20%" readOnly/>
+                            <a-cascader style="width: 80%" placeholder="请选择"/>
+                          </a-input-group>
+                          <a-input-group compact style="width: 400px;">
+                            <a-input value="文本域" style="width: 20%" readOnly/>
+                            <a-textarea style="width: 80%" placeholder="请输入" :rows="4"/>
+                          </a-input-group>
+                        </template>
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                      </a-popover>
+                    </a-select>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-model-item label="表单水印" prop="placeholder">
+                    <a-input v-model="item.placeholder" placeholder="表单水印（placeholder），可选" />
+                  </a-form-model-item>
+                </a-col>
+              </a-row>
+              <a-row :gutter="16">
+                <a-col :span="8">
+                  <a-form-model-item label="数据源类型" prop="selectType" v-if="item.formType === 'select' || item.formType === 'cascader'">
+                    <a-select v-model="item.selectType" placeholder="请选择数据源类型" @change="changeSelectKey(item)">
+                      <a-select-option key="key">字典键</a-select-option>
+                      <a-select-option key="fixArray">固定集合</a-select-option>
+                      <a-select-option key="logic">业务逻辑</a-select-option>
+                      <a-popover
+                        slot="suffixIcon"
+                        title="关于下拉框或级联框数据源类型"
+                        placement="bottom">
+                        <template slot="content">
+                          <p>设置下拉框或级联框的数据源</p>
+                          <p>数据源类型分为三种，你可以根据需要选择</p>
+                          <p>字典键：选项从字典表(t_dictionary)获取，你只需要选择字典键的名称即可</p>
+                          <p>业务逻辑名称：选项通过发起http请求调用指定的Logic接口获取</p>
+                          <p>固定集合：选项为静态值，JSONArray格式</p>
+                        </template>
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                      </a-popover>
+                    </a-select>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-model-item label="数据源" prop="selectKey" v-if="(item.formType === 'select' || item.formType === 'cascader') && item.selectType">
+                    <a-select
+                      show-search
+                      v-model="item.selectKey"
+                      v-if="item.selectType === 'key'"
+                      placeholder="请选择字典键"
+                      :filter-option="filterOption"
+                      @change="changeSelectKey(item)"
+                    >
+                      <template>
+                        <a-select-option
+                          v-for="(optionItem,index) in option"
+                          :key="index"
+                          :value="Object.keys(optionItem)[0]">{{ optionItem[Object.keys(optionItem)[0]] }}
+                        </a-select-option>
+                      </template>
+                    </a-select>
+                    <a-input v-model="item.selectKey" v-if="item.selectType === 'logic'" placeholder="请输入业务逻辑名称"/>
+                    <a-textarea v-model="item.selectKey" v-if="item.selectType === 'fixArray'" placeholder="请录入数据源" />
+                  </a-form-model-item>
+                </a-col>
+              </a-row>
+              <a-form-model-item label="表单校验类型" prop="rule">
+                <a-row :gutter="16">
+                  <a-col :span="8">
+                    <a-select v-model="item.rule.type" placeholder="校验类型，可选">
+                      <a-select-option key="string">字符串</a-select-option>
+                      <a-select-option key="number">数字</a-select-option>
+                      <a-select-option key="boolean">布尔值</a-select-option>
+                      <a-select-option key="regexp">正则表达式</a-select-option>
+                      <a-select-option key="integer">整数</a-select-option>
+                      <a-select-option key="float">小数</a-select-option>
+                      <a-select-option key="array">数组或集合</a-select-option>
+                      <a-select-option key="date">日期</a-select-option>
+                      <a-select-option key="email">邮箱</a-select-option>
+                      <a-popover slot="suffixIcon" title="关于表单校验类型" placement="bottom">
+                        <template slot="content">
+                          <p>设置表单项的校验类型，默认字符串类型</p>
+                          <p>你也可以设置该表单项是否必填</p>
+                        </template>
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                      </a-popover>
+                    </a-select>
+                  </a-col>
+                  <a-col :span="8">
+                    <a-radio-group v-model="item.rule.required" v-if="item.rule.type" default-value="true" button-style="solid">
+                      <a-radio-button value="true">
+                        必选项
+                      </a-radio-button>
+                      <a-radio-button value="false">
+                        非必选项
+                      </a-radio-button>
+                    </a-radio-group>
+                  </a-col>
+                </a-row>
+              </a-form-model-item>
+            </template>
+          </a-form-model>
+        </a-modal>
+        <a-button type="primary" @click="view">操作</a-button>
+      </a-col>
+      <a-col :xl="10" :lg="12" :md="12" :sm="24" :xs="24">
+        <a-card :bordered="false" title="预览" size="small" style="overflow: auto">
+          <json-viewer :copyable="{copyText: '复制', copiedText: '已复制'}" :value="result" :expand-depth="parseInt('100')" style="overflow: auto;max-height: 440px"></json-viewer>
+        </a-card>
+      </a-col>
+    </a-row>
+    <x-add-form
+      business-title="效果预览"
+      business-type="新增"
+      :visible.sync="modelVisible"
+      :json-data="formItems"
+      @onSubmit="submit"/>
+  </a-drawer>
+</template>
+
+<script>
+import XAddForm from '@/base-client/components/common/XAddForm/XAddForm'
+import JsonViewer from 'vue-json-viewer'
+import FileSaver from 'file-saver'
+import { mapState } from 'vuex'
+import { post } from '@/services/api/restTools'
+import { commonApi } from '@/services/api/common'
+
+export default {
+  name: 'CreateSimpleFormQuery',
+  components: {
+    JsonViewer,
+    XAddForm
+  },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // 效果预览模态框是否展示
+      modelVisible: false,
+      // 数据列配置模态框是否展示
+      dataColumnVisible: false,
+      // 数据列操作类型：新增，修改
+      type: '新增',
+      labelCol: { span: 4 },
+      wrapperCol: { span: 14 },
+      form: {
+        group: '',
+        describe: '',
+        column: []
+      },
+      result: {},
+      item: {
+        key: '',
+        title: '',
+        rule: {}
+      },
+      itemMap: {},
+      selectIndex: null,
+      selectType: undefined,
+      rules: {
+        group: [{ required: true, message: '请输入参数组名称', trigger: 'blur' }],
+        describe: [{ required: true, message: '请输入参数组描述', trigger: 'blur' }]
+      },
+      itemRules: {
+        key: [{ required: true, message: '请输入表单项名', trigger: 'blur' }],
+        title: [{ required: true, message: '请输入中文名称', trigger: 'blur' }],
+        selectType: [{ required: true, message: '请选择数据源类型', trigger: 'change' }],
+        selectKey: [{ required: true, message: '请输入数据源内容', trigger: 'blur' }]
+      },
+      formItems: [],
+      // 字典键集合
+      option: []
+    }
+  },
+  mounted () {
+    this.initView()
+  },
+  computed: {
+    ...mapState('setting', ['isMobile'])
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    toEditJson: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    visible (rel) {
+      if (rel) {
+        this.initView()
+      }
+      if (rel && this.toEditJson) {
+        this.form = Object.assign(
+          {
+            group: '',
+            describe: '',
+            column: []
+          }, this.toEditJson
+        )
+        for (const columnItem of this.form.column) {
+          // 必选项兼容处理
+          if (columnItem.rule && !isNaN(columnItem.rule.required)) {
+            columnItem.rule.required = columnItem.rule.required.toString()
+          }
+          // 下拉框数据源兼容处理
+          if ((columnItem.formType === 'select' || columnItem.formType === 'cascader') && columnItem.selectKey) {
+            // 数据源为logic
+            if (columnItem.selectKey instanceof String && columnItem.selectKey.startsWith('logic@')) {
+              columnItem.selectType = 'logic'
+            } else if (columnItem.selectKey instanceof Array || this.isJSON(columnItem.selectKey)) {
+              // 数据源为固定json集合
+              if (columnItem.selectKey instanceof Array) {
+                columnItem.selectKey = JSON.stringify(columnItem.selectKey)
+              }
+              columnItem.selectType = 'fixArray'
+            } else {
+              columnItem.selectType = 'key'
+            }
+          }
+          this.itemMap[columnItem.key] = Object.assign({
+            key: '',
+            title: '',
+            rule: {}
+          }, columnItem)
+        }
+      }
+    }
+  },
+  methods: {
+    // 初始化组件
+    initView () {
+      this.result = {}
+      post(commonApi.getDictionaryParam, {}).then(res => {
+        this.option = res
+      })
+    },
+    onClose () {
+      this.$emit('update:visible', false)
+    },
+    filterOption (input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
+    },
+    onModelClose () {
+      this.modelVisible = false
+    },
+    addColumnItem () {
+      this.type = '新增'
+      this.dataColumnVisible = true
+    },
+    editColumnItem (key, index) {
+      if (this.itemMap[key]) {
+        this.type = '修改'
+        this.item = this.itemMap[key]
+        this.selectIndex = index
+        this.dataColumnVisible = true
+      } else {
+        this.$message.warn('编辑失败')
+      }
+    },
+    removeColumnItem (key, index) {
+      const _this = this
+      this.$confirm({
+        title: '您确定要删除该数据项？',
+        content: '删除的数据项无法恢复',
+        okText: '确定',
+        okType: 'danger',
+        cancelText: '取消',
+        onOk () {
+          delete _this.itemMap[key]
+          _this.form.column.splice(index, 1)
+        }
+      })
+    },
+    upColumnItem (key, index) {
+      const newIndex = index - 1
+      const itemA = this.form.column[newIndex]
+      const itemB = this.form.column[index]
+      this.form.column.splice(index, 1, itemA)
+      this.form.column.splice(newIndex, 1, itemB)
+    },
+    downColumnItem (key, index) {
+      const newIndex = index + 1
+      const itemA = this.form.column[newIndex]
+      const itemB = this.form.column[index]
+      this.form.column.splice(index, 1, itemA)
+      this.form.column.splice(newIndex, 1, itemB)
+    },
+    submitItem () {
+      this.$refs.itemForm.validate(valid => {
+        if (valid) {
+          this.itemHandle()
+        }
+      })
+    },
+    itemHandle () {
+      const str = JSON.stringify(this.item)
+      const item = JSON.parse(str)
+      this.itemMap[item.key] = JSON.parse(str)
+      // 表单类型为输入框
+      if (item.formType && item.formType === 'input') {
+        delete item.formType
+      }
+      // 校验类型
+      if (!item.rule.type) {
+        delete item.rule
+      } else {
+        if (item.rule.required) {
+          item.rule.required = item.rule.required.toString() === 'true'
+        } else {
+          item.rule.required = true
+        }
+      }
+      // 下拉框
+      if ((item.formType === 'select' || item.formType === 'cascader') && item.selectKey) {
+        // 数据源为logic
+        if (item.selectType === 'logic') {
+          item.selectKey = 'logic@' + item.selectKey
+        } else if (item.selectType === 'fixArray') {
+          // 数据源为固定json集合
+          if (!this.isJSON(item.selectKey)) {
+            this.$message.warning('下拉框数据源不是JSON集合')
+            return
+          }
+        }
+        delete item.selectType
+      } else {
+        delete item.selectType
+        delete item.selectKey
+      }
+      if (this.type === '新增') {
+        this.form.column.push(item)
+      } else {
+        this.form.column[this.selectIndex] = item
+      }
+      this.item = {
+        key: '',
+        title: '',
+        rule: {}
+      }
+      this.$message.success('增加成功')
+      this.dataColumnVisible = false
+    },
+    // 判断是否为json字符串
+    isJSON (str) {
+      if (typeof str == 'string') {
+        try {
+          const obj = JSON.parse(str)
+          return !!(typeof obj == 'object' && obj)
+        } catch (e) {
+          return false
+        }
+      }
+    },
+    exportJson () {
+      const data = JSON.stringify(this.form, null, 2)
+      const blob = new Blob([data], { type: 'application/json' })
+      FileSaver.saveAs(blob, `SimpleFormQuery.json`)
+      this.$message.success('导出成功!')
+    },
+    viewHandle (then) {
+      if (this.form.column.length === 0) {
+        this.$message.error('你没有增加任何数据字段')
+        return
+      }
+      this.result = JSON.parse(JSON.stringify(this.form))
+      for (const item of this.result.column) {
+        if (item.selectType === 'fixArray') {
+          item.selectKey = JSON.parse(item.selectKey)
+        }
+      }
+      then()
+    },
+    view () {
+      this.$refs.businessCreateForm.validate(valid => {
+        if (valid) {
+          this.viewHandle(() => {
+            post(commonApi.getColumnsJson, { queryObject: this.result }).then(res => {
+              this.formItems = res.formJson
+              this.modelVisible = true
+            })
+          })
+        }
+      })
+    },
+    submit () {
+      this.onModelClose()
+      this.$refs.businessCreateForm.validate(valid => {
+          if (valid) {
+            this.viewHandle(() => {
+              // saveQueryParams
+              this.$emit('saveSimpleFormQueryParams', this.result)
+            })
+          }
+      })
+    },
+    modelCancel () {
+      this.dataColumnVisible = false
+      // 延迟是为了避免编辑数据窗口关闭时重置表单导致的闪烁
+      setTimeout(() => {
+        this.item = {
+          key: '',
+          title: '',
+          rule: {}
+        }
+      }, 100)
+    },
+    changeSelectKey (item) {
+      if (item.selectType === 'key' && item.selectKey) {
+        item.slot.type = 'badge'
+        item.slotKeyMap = item.selectKey
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+</style>

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

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

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

@@ -0,0 +1,42 @@
+# CreateSimpleFormQuery 基础表单配置生成（仅新增场景）
+
+提供基础表单配置生成（仅新增场景）的快捷组件
+
+
+
+## 何时使用
+
+允许生成基础表单的配置
+
+
+
+引用方式：
+
+```javascript
+import CreateSimpleFormQuery from '@/base-client/components/CreateSimpleFormQuery'
+
+export default {
+    components: {
+      CreateSimpleFormQuery
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<create-simple-form-query
+  :toEditJson="toEditJson"
+  :visible.sync="createSimpleFormVisible"
+/>
+```
+
+## API
+
+| 参数                         | 说明                                       | 类型      | 默认值       |
+|----------------------------|------------------------------------------|---------|-----------|
+| visible                    | 是否显示                                     | Boolean | false     |
+| toEditJson                 | 要编辑的json 当 visible 从false变成true时解析加载到页面上 | Object  | undefined |
+| @saveSimpleFormQueryParams | 基础表单配置点击保存后事件                            | event   | -         |

package/src/{components → base-client/components/common}/CustomColumnsDrawer/CustomColumnsDrawer.vue

@@ -45,6 +45,27 @@ export default {
       checkAll: true
     }
   },
+  mounted () {
+    let index = 0
+    this.columnsMeta.forEach((item) => {
+      // 组织表格列选择项
+      const rowData = {
+        label: item.title,
+        value: item.dataIndex
+      }
+      if (index === 0) {
+        rowData.disabled = true
+        index++
+      } else {
+        // 如果存在固定列，则设置为不可选择项
+        rowData.disabled = item.fixed !== undefined
+      }
+      // 放入表格列选择项集合中
+      this.columnsList.push(rowData)
+      // 放入默认选择项
+      this.selectColumnsList.push(rowData.value)
+    })
+  },
   methods: {
     onChange (checkedValues) {
       // 控制全选样式
@@ -73,21 +94,6 @@ export default {
     }
   },
   watch: {
-    'columnsMeta' (val) {
-      val.forEach((item) => {
-        // 组织表格列选择项
-        const rowData = {
-          label: item.title,
-          value: item.dataIndex
-        }
-        // 如果存在固定列，则设置为不可选择项
-        rowData.disabled = item.fixed !== undefined
-        // 放入表格列选择项集合中
-        this.columnsList.push(rowData)
-        // 放入默认选择项
-        this.selectColumnsList.push(rowData.value)
-      })
-    },
     'selectColumnsList' (val) {
       const selectColumns = []
       // 遍历选中项，放入表格列中