JeecgBoot 2.3 里程碑版本发布，支持微服务和单体自由切换、提供新行编辑表格JVXETable

2026-02-05 18:15:28 +08:00 · 2020-09-13 18:23:23 +08:00
parent 65d1e6a879
commit 7f30a186df
533 changed files with 187550 additions and 36942 deletions
--- a/ant-design-vue-jeecg/src/components/jeecgbiz/JSelectBizComponent/JSelectBizComponentModal.vue
+++ b/ant-design-vue-jeecg/src/components/jeecgbiz/JSelectBizComponent/JSelectBizComponentModal.vue
@ -12,25 +12,21 @@
    <a-row :gutter="18">
      <a-col :span="16">
        <!-- 查询区域 -->
-        <div class="table-page-search-wrapper">
-          <a-form layout="inline">
-            <a-row :gutter="24">
-
-              <a-col :span="14">
-                <a-form-item :label="(queryParamText||name)">
-                  <a-input v-model="queryParam[queryParamCode||valueKey]" :placeholder="'请输入' + (queryParamText||name)" @pressEnter="searchQuery"/>
-                </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-                    <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
-                  </span>
-              </a-col>
-
-            </a-row>
-          </a-form>
-        </div>
+        <a-form layout="inline" class="j-inline-form">
+          <!-- 固定条件 -->
+          <a-form-item :label="(queryParamText||name)">
+            <a-input v-model="queryParam[queryParamCode||valueKey]" :placeholder="'请输入' + (queryParamText||name)" @pressEnter="searchQuery"/>
+          </a-form-item>
+          <!-- 动态生成的查询条件 -->
+          <j-select-biz-query-item v-if="queryConfig.length>0" v-show="showMoreQueryItems" :queryParam="queryParam" :queryConfig="queryConfig" @pressEnter="searchQuery"/>
+          <!-- 按钮 -->
+          <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+          <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+          <a v-if="queryConfig.length>0" @click="showMoreQueryItems=!showMoreQueryItems" style="margin-left: 8px">
+            {{ showMoreQueryItems ? '收起' : '展开' }}
+            <a-icon :type="showMoreQueryItems ? 'up' : 'down'"/>
+          </a>
+        </a-form>

        <a-table
          size="middle"
@ -67,11 +63,12 @@
  import Ellipsis from '@/components/Ellipsis'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { cloneObject, pushIfNotExist } from '@/utils/util'
+  import JSelectBizQueryItem from './JSelectBizQueryItem'

  export default {
    name: 'JSelectBizComponentModal',
    mixins: [JeecgListMixin],
-    components: { Ellipsis },
+    components: {Ellipsis, JSelectBizQueryItem},
    props: {
      value: {
        type: Array,
@ -127,6 +124,11 @@
        type: String,
        default: null
      },
+      // 查询配置
+      queryConfig: {
+        type: Array,
+        default: () => []
+      },
      rowKey: {
        type: String,
        default: 'id'
@ -169,6 +171,7 @@
        },
        options: [],
        dataSourceMap: {},
+        showMoreQueryItems: false,
      }
    },
    computed: {
@ -299,11 +302,13 @@
        this.$emit('input', value)
        this.close()
      },
-
      /** 删除已选择的 */
      handleDeleteSelected(record, index) {
        this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record[this.rowKey]), 1)
-        this.selectedTable.dataSource.splice(index, 1)
+        //update--begin--autor:wangshuai-----date:20200722------for：JSelectBizComponent组件切换页数值问题------
+        this.selectedTable.dataSource.splice(this.selectedTable.dataSource.indexOf(record), 1)
+        this.innerValue.splice(this.innerValue.indexOf(record[this.valueKey]), 1)
+        //update--begin--autor:wangshuai-----date:20200722------for：JSelectBizComponent组件切换页数值问题------
      },

      customRowFn(record) {
@ -332,4 +337,29 @@
  }
 </script>
 <style lang="less" scoped>
+  .full-form-item {
+    display: flex;
+    margin-right: 0;
+
+    /deep/ .ant-form-item-control-wrapper {
+      flex: 1 1;
+      display: inline-block;
+    }
+  }
+
+  .j-inline-form {
+    /deep/ .ant-form-item {
+      margin-bottom: 12px;
+    }
+
+    /deep/ .ant-form-item-label {
+      line-height: 32px;
+      width: auto;
+    }
+
+    /deep/ .ant-form-item-control {
+      height: 32px;
+      line-height: 32px;
+    }
+  }
 </style>
--- a/ant-design-vue-jeecg/src/components/jeecgbiz/JSelectBizComponent/JSelectBizQueryItem.js
+++ b/ant-design-vue-jeecg/src/components/jeecgbiz/JSelectBizComponent/JSelectBizQueryItem.js
@ -0,0 +1,48 @@
+export default {
+  name: 'JSelectBizQueryItem',
+  props: {
+    queryParam: Object,
+    queryConfig: Array,
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    renderQueryItem() {
+      return this.queryConfig.map(queryItem => {
+        const {key, label, placeholder, dictCode, props, customRender} = queryItem
+        const options = {
+          props: {},
+          on: {
+            pressEnter: () => this.$emit('pressEnter'),
+          }
+        }
+        if (props != null) {
+          Object.assign(options.props, props)
+        }
+        if (placeholder === undefined) {
+          if (dictCode) {
+            options.props['placeholder'] = `请选择${label}`
+          } else {
+            options.props['placeholder'] = `请输入${label}`
+          }
+        } else {
+          options.props['placeholder'] = placeholder
+        }
+
+        let input
+        if (typeof customRender === 'function') {
+          input = customRender.call(this, {key, options, queryParam: this.queryParam})
+        } else if (dictCode) {
+          input = <j-dict-select-tag {...options} vModel={this.queryParam[key]} dictCode={dictCode} style="width:180px;"/>
+        } else {
+          input = <a-input {...options} vModel={this.queryParam[key]}/>
+        }
+        return <a-form-item key={key} label={label}>{input}</a-form-item>
+      })
+    },
+  },
+  render() {
+    return <span>{this.renderQueryItem()}</span>
+  },
+}
--- a/ant-design-vue-jeecg/src/components/jeecgbiz/JSelectMultiUser.vue
+++ b/ant-design-vue-jeecg/src/components/jeecgbiz/JSelectMultiUser.vue
@ -11,12 +11,19 @@
 </template>

 <script>
+  import JDate from '@comp/jeecg/JDate'
  import JSelectBizComponent from './JSelectBizComponent'

  export default {
    name: 'JSelectMultiUser',
-    components: { JSelectBizComponent },
-    props: ['value'],
+    components: {JDate, JSelectBizComponent},
+    props: {
+      value: null, // any type
+      queryConfig: {
+        type: Array,
+        default: () => []
+      },
+    },
    data() {
      return {
        url: { list: '/sys/user/list' },
@ -33,12 +40,32 @@
          displayKey: 'realname',
          returnKeys: ['id', 'username'],
          queryParamText: '账号',
-        }
+        },
+        // 多条件查询配置
+        queryConfigDefault: [
+          {
+            key: 'sex',
+            label: '性别',
+            // 如果包含 dictCode，那么就会显示成下拉框
+            dictCode: 'sex',
+          },
+          {
+            key: 'birthday',
+            label: '生日',
+            placeholder: '请选择出生日期',
+            // 如果想要使用局部注册的组件，就必须要使用箭头函数
+            customRender: ({key, queryParam, options}) => {
+              return <j-date {...options} vModel={queryParam[key]} style="width:180px;"/>
+            },
+          },
+        ],
      }
    },
    computed: {
      attrs() {
-        return Object.assign(this.default, this.$attrs)
+        return Object.assign(this.default, this.$attrs, {
+          queryConfig: this.queryConfigDefault.concat(this.queryConfig)
+        })
      }
    }
  }
--- a/ant-design-vue-jeecg/src/components/jeecgbiz/modal/JSelectDepartModal.vue
+++ b/ant-design-vue-jeecg/src/components/jeecgbiz/modal/JSelectDepartModal.vue
@ -12,6 +12,7 @@
      <a-input-search style="margin-bottom: 1px" placeholder="请输入部门名称按回车进行搜索" @search="onSearch" />
      <a-tree
        checkable
+        class="my-dept-select-tree"
        :treeData="treeData"
        :checkStrictly="true"
        @check="onCheck"
@ -237,6 +238,11 @@

 </script>

-<style scoped>
+<style lang="less" scoped>
+  // 限制部门选择树高度，避免部门太多时点击确定不便
+  .my-dept-select-tree{
+    height: 350px;
+    overflow-y: scroll;
+  }

 </style>