Jeecg-Boot 2.1.0 版本发布，Online表单开发&在线代码生成器（迟到的版本）

ant-design-vue-jeecg/src/views/jeecg/modules/JEditableTable/DefaultTable.vue

@@ -0,0 +1,250 @@
+<template>
+
+  <div>
+    <a-button @click="handleTableCheck" type="primary">表单验证</a-button>
+    <span style="padding-left:8px;"></span>
+    <a-tooltip placement="top" title="获取值，忽略表单验证" :autoAdjustOverflow="true">
+      <a-button @click="handleTableGet" type="primary">获取值</a-button>
+    </a-tooltip>
+    <span style="padding-left:8px;"></span>
+    <a-tooltip placement="top" title="模拟加载1000条数据" :autoAdjustOverflow="true">
+      <a-button @click="handleTableSet" type="primary">设置值</a-button>
+    </a-tooltip>
+
+
+    <j-editable-table
+      ref="editableTable"
+      :loading="loading"
+      :columns="columns"
+      :dataSource="dataSource"
+      :rowNumber="true"
+      :rowSelection="true"
+      :actionButton="true"
+      :dragSort="true"
+      style="margin-top: 8px;"
+      @selectRowChange="handleSelectRowChange">
+
+      <template v-slot:action="props">
+        <a @click="handleDelete(props)">{{ props.text }}</a>
+      </template>
+
+    </j-editable-table>
+  </div>
+
+</template>
+
+<script>
+  import moment from 'moment'
+  import { FormTypes } from '@/utils/JEditableTableUtil'
+  import { randomUUID, randomNumber } from '@/utils/util'
+  import JEditableTable from '@/components/jeecg/JEditableTable'
+
+  export default {
+    name: 'DefaultTable',
+    components: { JEditableTable },
+    data() {
+      return {
+        loading: false,
+        columns: [
+          {
+            title: '字段名称',
+            key: 'dbFieldName',
+            // width: '19%',
+            width: '300px',
+            type: FormTypes.input,
+            defaultValue: '',
+            placeholder: '请输入${title}',
+            validateRules: [
+              {
+                required: true, // 必填
+                message: '请输入${title}' // 显示的文本
+              },
+              {
+                pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则
+                message: '${title}必须以字母开头，可包含数字、下划线、横杠'
+              }
+            ]
+          },
+          {
+            title: '文件域',
+            key: 'upload',
+            type: FormTypes.upload,
+            // width: '19%',
+            width: '300px',
+            placeholder: '点击上传',
+            token: true,
+            responseName: 'message',
+            action: window._CONFIG['domianURL'] + '/sys/common/upload'
+          },
+          {
+            title: '字段类型',
+            key: 'dbFieldType',
+            // width: '18%',
+            width: '300px',
+            type: FormTypes.select,
+            options: [ // 下拉选项
+              { title: 'String', value: 'string' },
+              { title: 'Integer', value: 'int' },
+              { title: 'Double', value: 'double' },
+              { title: 'Boolean', value: 'boolean' }
+            ],
+            allowInput: true,
+            defaultValue: '',
+            placeholder: '请选择${title}',
+            validateRules: [{ required: true, message: '请选择${title}' }]
+          },
+          {
+            title: '性别（字典）',
+            key: 'sex_dict',
+            width: '300px',
+            type: FormTypes.select,
+            options: [],
+            dictCode: 'sex',
+            placeholder: '请选择${title}',
+            validateRules: [{ required: true, message: '请选择${title}' }]
+          },
+          {
+            title: '多选测试',
+            key: 'multipleSelect',
+            // width: '18%',
+            width: '300px',
+            type: FormTypes.select,
+            props: { 'mode': 'multiple' }, // 支持多选
+            options: [
+              { title: 'String', value: 'string' },
+              { title: 'Integer', value: 'int' },
+              { title: 'Double', value: 'double' },
+              { title: 'Boolean', value: 'boolean' }
+            ],
+            defaultValue: ['int', 'boolean'], // 多个默认项
+            // defaultValue: 'string,double,int', // 也可使用这种方式
+            placeholder: '这里可以多选',
+            validateRules: [{ required: true, message: '请选择${title}' }]
+          },
+          {
+            title: '字段长度',
+            key: 'dbLength',
+            // width: '8%',
+            width: '100px',
+            type: FormTypes.inputNumber,
+            defaultValue: 32,
+            placeholder: '${title}',
+            validateRules: [{ required: true, message: '请输入${title}' }]
+          },
+          {
+            title: '日期',
+            key: 'datetime',
+            // width: '22%',
+            width: '320px',
+            type: FormTypes.datetime,
+            defaultValue: '2019-4-30 14:52:22',
+            placeholder: '请选择${title}',
+            validateRules: [{ required: true, message: '请选择${title}' }]
+          },
+          {
+            title: '可以为空',
+            key: 'isNull',
+            // width: '8%',
+            width: '100px',
+            type: FormTypes.checkbox,
+            customValue: ['Y', 'N'], // true ,false
+            defaultChecked: false
+          },
+          {
+            title: '操作',
+            key: 'action',
+            // width: '8%',
+            width: '100px',
+            type: FormTypes.slot,
+            slotName: 'action',
+            defaultValue: '删除'
+          }
+
+        ],
+        dataSource: [],
+        selectedRowIds: []
+      }
+    },
+    mounted() {
+      this.randomData(23, false)
+    },
+    methods: {
+
+      /** 表单验证 */
+      handleTableCheck() {
+        this.$refs.editableTable.getValues((error) => {
+          if (error === 0) {
+            this.$message.success('验证通过')
+          } else {
+            this.$message.error('验证未通过')
+          }
+        })
+      },
+      /** 获取值，忽略表单验证 */
+      handleTableGet() {
+        this.$refs.editableTable.getValues((error, values) => {
+          console.log('values:', values)
+        }, false)
+        console.log('deleteIds:', this.$refs.editableTable.getDeleteIds())
+
+        this.$message.info('获取值成功，请看控制台输出')
+
+      },
+      /** 模拟加载1000条数据 */
+      handleTableSet() {
+        this.randomData(1000, true)
+      },
+
+      handleSelectRowChange(selectedRowIds) {
+        this.selectedRowIds = selectedRowIds
+      },
+
+      /* 随机生成数据 */
+      randomData(size, loading = false) {
+        if (loading) {
+          this.loading = true
+        }
+
+        let randomDatetime = () => {
+          let time = parseInt(randomNumber(1000, 9999999999999))
+          return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
+        }
+
+        let begin = Date.now()
+        let values = []
+        for (let i = 0; i < size; i++) {
+          values.push({
+            id: randomUUID(),
+            dbFieldName: `name_${i + 1}`,
+            // dbFieldTxt: randomString(10),
+            multipleSelect: ['string', ['int', 'double', 'boolean'][randomNumber(0, 2)]],
+            dbFieldType: ['string', 'int', 'double', 'boolean'][randomNumber(0, 3)],
+            dbLength: randomNumber(0, 233),
+            datetime: randomDatetime(),
+            isNull: ['Y', 'N'][randomNumber(0, 1)]
+          })
+        }
+
+        this.dataSource = values
+        let end = Date.now()
+        let diff = end - begin
+
+        if (loading && diff < size) {
+          setTimeout(() => {
+            this.loading = false
+          }, size - diff)
+        }
+
+      },
+
+      handleDelete(props) {
+        let { rowId, target } = props
+        target.removeRows(rowId)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

ant-design-vue-jeecg/src/views/jeecg/modules/JEditableTable/ReadOnlyTable.vue

@@ -0,0 +1,70 @@
+<template>
+  <j-editable-table
+    :columns="columns"
+    :dataSource="dataSource"
+    :rowNumber="true"
+    :rowSelection="true"
+    :maxHeight="400"
+    :disabled="true"
+  />
+</template>
+
+<script>
+  import { FormTypes } from '@/utils/JEditableTableUtil'
+  import JEditableTable from '@/components/jeecg/JEditableTable'
+
+  export default {
+    name: 'ReadOnlyTable',
+    components: { JEditableTable },
+    data() {
+      return {
+
+        columns: [
+          {
+            title: '输入框',
+            key: 'input',
+            type: FormTypes.input,
+            placeholder: '清输入'
+          },
+          {
+            title: '下拉框',
+            key: 'select',
+            type: FormTypes.select,
+            options: [
+              { title: 'String', value: 'string' },
+              { title: 'Integer', value: 'int' },
+              { title: 'Double', value: 'double' },
+              { title: 'Boolean', value: 'boolean' }
+            ],
+            placeholder: '请选择'
+          },
+          {
+            title: '多选框',
+            key: 'checkbox',
+            type: FormTypes.checkbox,
+            customValue: [true, false]
+          },
+          {
+            title: '日期',
+            key: 'datetime',
+            type: FormTypes.datetime
+          }
+        ],
+        dataSource: [
+          { input: 'hello', select: 'int', checkbox: true, datetime: '2019-6-17 14:50:48' },
+          { input: 'world', select: 'string', checkbox: false, datetime: '2019-6-16 14:50:48' },
+          { input: 'one', select: 'double', checkbox: true, datetime: '2019-6-17 15:50:48' },
+          { input: 'two', select: 'boolean', checkbox: false, datetime: '2019-6-14 14:50:48' },
+          { input: 'three', select: '', checkbox: false, datetime: '2019-6-13 14:50:48' }
+        ]
+      }
+    },
+    mounted() {
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

ant-design-vue-jeecg/src/views/jeecg/modules/JEditableTable/ThreeLinkage.vue

@@ -0,0 +1,129 @@
+<template>
+  <j-editable-table
+    :columns="columns"
+    :dataSource="dataSource"
+    :rowNumber="true"
+    :actionButton="true"
+    :rowSelection="true"
+    :maxHeight="400"
+    @valueChange="handleValueChange"
+  />
+</template>
+
+<script>
+  import { FormTypes } from '@/utils/JEditableTableUtil'
+  import JEditableTable from '@/components/jeecg/JEditableTable'
+
+  export default {
+    name: 'ThreeLinkage',
+    components: { JEditableTable },
+    data() {
+      return {
+        columns: [
+          {
+            title: '省/直辖市/自治区',
+            key: 's1',
+            type: FormTypes.select,
+            width: '240px',
+            options: [],
+            placeholder: '请选择${title}'
+          },
+          {
+            title: '市',
+            key: 's2',
+            type: FormTypes.select,
+            width: '240px',
+            options: [],
+            placeholder: '请选择${title}'
+          },
+          {
+            title: '县/区',
+            key: 's3',
+            type: FormTypes.select,
+            width: '240px',
+            options: [],
+            placeholder: '请选择${title}'
+          }
+        ],
+        dataSource: [],
+
+        mockData: [
+          { label: '北京市', value: '110000', parent: null },
+          { label: '天津市', value: '120000', parent: null },
+          { label: '河北省', value: '130000', parent: null },
+          { label: '上海市', value: '310000', parent: null },
+
+          { label: '北京市', value: '110100', parent: '110000' },
+          { label: '天津市市', value: '120100', parent: '120000' },
+          { label: '石家庄市', value: '130100', parent: '130000' },
+          { label: '唐山市', value: '130200', parent: '130000' },
+          { label: '秦皇岛市', value: '130300', parent: '130000' },
+          { label: '上海市', value: '310100', parent: '310000' },
+
+          { label: '东城区', value: '110101', parent: '110100' },
+          { label: '西城区', value: '110102', parent: '110100' },
+          { label: '朝阳区', value: '110105', parent: '110100' },
+          { label: '和平区', value: '120101', parent: '120000' },
+          { label: '河东区', value: '120102', parent: '120000' },
+          { label: '河西区', value: '120103', parent: '120000' },
+          { label: '黄浦区', value: '310101', parent: '310100' },
+          { label: '徐汇区', value: '310104', parent: '310100' },
+          { label: '长宁区', value: '310105', parent: '310100' },
+          { label: '长安区', value: '130102', parent: '130100' },
+          { label: '桥西区', value: '130104', parent: '130100' },
+          { label: '新华区', value: '130105', parent: '130100' },
+          { label: '路南区', value: '130202', parent: '130200' },
+          { label: '路北区', value: '130203', parent: '130200' },
+          { label: '古冶区', value: '130204', parent: '130200' },
+          { label: '海港区', value: '130302', parent: '130300' },
+          { label: '山海关区', value: '130303', parent: '130300' },
+          { label: '北戴河区', value: '130304', parent: '130300' },
+        ]
+      }
+    },
+    mounted() {
+      // 初始化数据
+      this.columns[0].options = this.request(null)
+    },
+    methods: {
+
+      request(parentId) {
+        return this.mockData.filter(i => i.parent === parentId)
+      },
+
+      /** 当选项被改变时，联动其他组件 */
+      handleValueChange(event) {
+        const { type, row, column, value, target } = event
+
+        if (type === FormTypes.select) {
+
+          // 第一列
+          if (column.key === 's1') {
+            // 设置第二列的 options
+            this.columns[1].options = this.request(value)
+            // 清空后两列的数据
+            target.setValues([{
+              rowKey: row.id,
+              values: { s2: '', s3: '' }
+            }])
+            this.columns[2].options = []
+          } else
+          // 第二列
+          if (column.key === 's2') {
+            this.columns[2].options = this.request(value)
+            target.setValues([{
+              rowKey: row.id,
+              values: { s3: '' }
+            }])
+          }
+        }
+
+      }
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>