vue2-client 1.4.1 → 1.4.3

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

@@ -1,310 +1,310 @@
-<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>
-        <create-simple-form-query-item ref="queryItem" @itemHandle="itemHandle" @getColumn="getColumn"/>
-        <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 CreateSimpleFormQueryItem from './CreateSimpleFormQueryItem'
-import XAddForm from '@vue2-client/base-client/components/common/XAddForm/XAddForm'
-import JsonViewer from 'vue-json-viewer'
-import FileSaver from 'file-saver'
-import { mapState } from 'vuex'
-import { commonApi, post } from '@vue2-client/services/api'
-export default {
-  name: 'CreateSimpleFormQuery',
-  components: {
-    CreateSimpleFormQueryItem,
-    JsonViewer,
-    XAddForm
-  },
-  data () {
-    return {
-      // 页面宽度
-      screenWidth: document.documentElement.clientWidth,
-      // 效果预览模态框是否展示
-      modelVisible: false,
-      // 数据列操作类型：新增，修改
-      type: '新增',
-      labelCol: { span: 4 },
-      wrapperCol: { span: 14 },
-      form: {
-        group: '',
-        describe: '',
-        column: []
-      },
-      result: {},
-      itemMap: {},
-      selectIndex: null,
-      selectType: undefined,
-      joinArray: [],
-      rules: {
-        group: [{ required: true, message: '请输入参数组名称', trigger: 'blur' }],
-        describe: [{ 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 && columnItem.rule.required && columnItem.rule.required !== 'false') {
-            columnItem.rule.required = columnItem.rule.required.toString()
-          } else {
-            if (!columnItem.rule) {
-              columnItem.rule = {}
-            }
-            columnItem.rule.required = 'false'
-          }
-          // 数据源加载方式兼容处理
-          if (columnItem.lazyLoad && columnItem.lazyLoad !== 'false') {
-            columnItem.lazyLoad = columnItem.lazyLoad.toString()
-          } else {
-            columnItem.lazyLoad = 'false'
-          }
-          // 下拉框数据源兼容处理
-          if ((columnItem.formType === 'select' || columnItem.formType === 'cascader') && columnItem.selectKey) {
-            // 数据源为logic
-            if (columnItem.selectKey.toString().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: '',
-            pathKey: '',
-            rule: {
-              required: 'false'
-            }
-          }, 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
-    },
-    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)
-    },
-    itemHandle (item, type) {
-      console.log(JSON.stringify(item))
-      this.itemMap[item.key] = item
-      if (type === '新增') {
-        this.form.column.push(item)
-      } else {
-        this.$set(this.form.column, this.selectIndex, item)
-      }
-      this.$message.success(`${type}成功`)
-      this.$refs.queryItem.flashModal(false)
-    },
-    addColumnItem () {
-      this.type = '新增'
-      this.$refs.queryItem.addColumnItemExecute()
-    },
-    editColumnItem (key, index) {
-      if (this.itemMap[key]) {
-        this.$refs.queryItem.editColumnItemExecute(this.itemMap[key])
-        this.selectIndex = index
-      } else {
-        this.$message.warn('编辑失败')
-      }
-    },
-    getColumn (callback) {
-      callback(JSON.parse(JSON.stringify(this.form.column)))
-    },
-    // 判断是否为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)
-          })
-        }
-      })
-    },
-  }
-}
-</script>
-<style lang="less" scoped>
-</style>
+<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>
+        <create-simple-form-query-item ref="queryItem" @itemHandle="itemHandle" @getColumn="getColumn"/>
+        <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 CreateSimpleFormQueryItem from './CreateSimpleFormQueryItem'
+import XAddForm from '@vue2-client/base-client/components/common/XAddForm/XAddForm'
+import JsonViewer from 'vue-json-viewer'
+import FileSaver from 'file-saver'
+import { mapState } from 'vuex'
+import { commonApi, post } from '@vue2-client/services/api'
+export default {
+  name: 'CreateSimpleFormQuery',
+  components: {
+    CreateSimpleFormQueryItem,
+    JsonViewer,
+    XAddForm
+  },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // 效果预览模态框是否展示
+      modelVisible: false,
+      // 数据列操作类型：新增，修改
+      type: '新增',
+      labelCol: { span: 4 },
+      wrapperCol: { span: 14 },
+      form: {
+        group: '',
+        describe: '',
+        column: []
+      },
+      result: {},
+      itemMap: {},
+      selectIndex: null,
+      selectType: undefined,
+      joinArray: [],
+      rules: {
+        group: [{ required: true, message: '请输入参数组名称', trigger: 'blur' }],
+        describe: [{ 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 && columnItem.rule.required && columnItem.rule.required !== 'false') {
+            columnItem.rule.required = columnItem.rule.required.toString()
+          } else {
+            if (!columnItem.rule) {
+              columnItem.rule = {}
+            }
+            columnItem.rule.required = 'false'
+          }
+          // 数据源加载方式兼容处理
+          if (columnItem.lazyLoad && columnItem.lazyLoad !== 'false') {
+            columnItem.lazyLoad = columnItem.lazyLoad.toString()
+          } else {
+            columnItem.lazyLoad = 'false'
+          }
+          // 下拉框数据源兼容处理
+          if ((columnItem.formType === 'select' || columnItem.formType === 'cascader') && columnItem.selectKey) {
+            // 数据源为logic
+            if (columnItem.selectKey.toString().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: '',
+            pathKey: '',
+            rule: {
+              required: 'false'
+            }
+          }, 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
+    },
+    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)
+    },
+    itemHandle (item, type) {
+      console.log(JSON.stringify(item))
+      this.itemMap[item.key] = item
+      if (type === '新增') {
+        this.form.column.push(item)
+      } else {
+        this.$set(this.form.column, this.selectIndex, item)
+      }
+      this.$message.success(`${type}成功`)
+      this.$refs.queryItem.flashModal(false)
+    },
+    addColumnItem () {
+      this.type = '新增'
+      this.$refs.queryItem.addColumnItemExecute()
+    },
+    editColumnItem (key, index) {
+      if (this.itemMap[key]) {
+        this.$refs.queryItem.editColumnItemExecute(this.itemMap[key])
+        this.selectIndex = index
+      } else {
+        this.$message.warn('编辑失败')
+      }
+    },
+    getColumn (callback) {
+      callback(JSON.parse(JSON.stringify(this.form.column)))
+    },
+    // 判断是否为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)
+          })
+        }
+      })
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+</style>