JeecgBoot 2.1.1 代码生成器AI版本发布

2026-02-06 02:25:30 +08:00 · 2019-10-18 18:37:41 +08:00
parent 9e8b97a0d9
commit 04c0ea55f2
267 changed files with 16761 additions and 26860 deletions
--- a/ant-design-vue-jeecg/src/components/jeecgbiz/JSelectBizComponent/JSelectBizComponentModal.vue
+++ b/ant-design-vue-jeecg/src/components/jeecgbiz/JSelectBizComponent/JSelectBizComponentModal.vue
@ -0,0 +1,206 @@
+<template>
+  <a-modal
+    centered
+    :title="name + '选择'"
+    :width="900"
+    :visible="visible"
+    @ok="handleOk"
+    @cancel="close"
+    cancelText="关闭">
+
+    <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 :placeholder="'请输入' + (queryParamText||name)" v-model="queryParam[valueKey]"></a-input>
+                </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-table
+          size="small"
+          bordered
+          rowKey="id"
+          :columns="columns"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :scroll="{ y: 240 }"
+          :rowSelection="{selectedRowKeys, onChange: onSelectChange, type: multiple ? 'checkbox':'radio'}"
+          :customRow="customRowFn"
+          @change="handleTableChange">
+        </a-table>
+
+      </a-col>
+      <a-col :span="8">
+        <a-card :title="'已选' + name" :bordered="false" :head-style="{padding:0}" :body-style="{padding:0}">
+
+          <a-table rowKey="id" size="small" bordered v-bind="selectedTable">
+              <span slot="action" slot-scope="text, record, index">
+                <a @click="handleDeleteSelected(record, index)">删除</a>
+              </span>
+          </a-table>
+
+        </a-card>
+      </a-col>
+    </a-row>
+  </a-modal>
+</template>
+
+<script>
+  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+
+  export default {
+    name: 'JSelectBizComponentModal',
+    mixins: [JeecgListMixin],
+    props: {
+      value: {
+        type: Array,
+        default: () => []
+      },
+      visible: {
+        type: Boolean,
+        default: false
+      },
+      valueKey: {
+        type: String,
+        required: true
+      },
+      multiple: {
+        type: Boolean,
+        default: true
+      },
+
+      name: {
+        type: String,
+        default: ''
+      },
+      listUrl: {
+        type: String,
+        required: true,
+        default: ''
+      },
+      displayKey: {
+        type: String,
+        default: null
+      },
+      propColumns: {
+        type: Array,
+        default: () => []
+      },
+      // 查询条件文字
+      queryParamText: {
+        type: String,
+        default: null
+      },
+
+    },
+    data() {
+      return {
+        // 表头
+        columns: this.propColumns,
+        // 已选择列表
+        selectedTable: {
+          pagination: false,
+          scroll: { y: 240 },
+          columns: [
+            this.propColumns[0],
+            { title: '操作', dataIndex: 'action', align: 'center', width: 60, scopedSlots: { customRender: 'action' }, }
+          ],
+          dataSource: [],
+        },
+        url: { list: this.listUrl }
+      }
+    },
+    watch: {
+      value: {
+        immediate: true,
+        handler(val) {
+          this.valueWatchHandler(val)
+        }
+      },
+      dataSource: {
+        deep: true,
+        handler(val) {
+          let options = val.map(data => ({ label: data[this.displayKey || this.valueKey], value: data[this.valueKey] }))
+          this.$emit('ok', options)
+          this.valueWatchHandler(this.value)
+        }
+      },
+      selectionRows: {
+        immediate: true,
+        deep: true,
+        handler(val) {
+          this.selectedTable.dataSource = val
+        },
+      },
+    },
+
+    methods: {
+
+      /** 关闭弹窗 */
+      close() {
+        this.$emit('update:visible', false)
+      },
+
+      valueWatchHandler(val) {
+        let dataSource = []
+        let selectedRowKeys = []
+        val.forEach(item => {
+          this.dataSource.forEach(data => {
+            if (data[this.valueKey] === item) {
+              dataSource.push(data)
+              selectedRowKeys.push(data.id)
+            }
+          })
+        })
+        this.selectedTable.dataSource = dataSource
+        this.selectedRowKeys = selectedRowKeys
+      },
+
+      /** 完成选择 */
+      handleOk() {
+        let value = this.selectedTable.dataSource.map(data => data[this.valueKey])
+        this.$emit('input', value)
+        this.close()
+      },
+
+      /** 删除已选择的 */
+      handleDeleteSelected(record, index) {
+        this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record.id), 1)
+        this.selectedTable.dataSource.splice(index, 1)
+      },
+
+      customRowFn(record) {
+        if (!this.multiple) {
+          return {
+            on: {
+              click: () => {
+                this.selectedRowKeys = [record.id]
+                this.selectedTable.dataSource = [record]
+              }
+            }
+          }
+        }
+        return {}
+      },
+
+    }
+  }
+</script>
+<style lang="less" scoped>
+</style>
--- a/ant-design-vue-jeecg/src/components/jeecgbiz/JSelectBizComponent/README.md
+++ b/ant-design-vue-jeecg/src/components/jeecgbiz/JSelectBizComponent/README.md
@ -0,0 +1,26 @@
+# JSelectBizComponent
+
+Jeecg 选择组件的公共可复用组件
+
+## 引用方式
+
+```js
+import JSelectBizComponent from '@/src/components/jeecgbiz/JSelectBizComponent'
+
+export default {
+  components: { JSelectBizComponent }
+}
+```
+
+## 参数
+
+### 配置参数
+
+- `name`:`String` 显示名字，例如选择部门就填写'部门'
+- `listUrl`:`String` 数据请求地址，必须是封装了分页的地址
+- `displayKey`:`String` 显示在标签上的字段 key
+- `returnKeys`:`Array` v-model 绑定的 keys，是个数组，默认使用第二项，当配置了 `returnId=true` 就返回第一项
+- `returnId`:`Boolean` 返回ID，设为true后将返回配置的 `returnKeys` 中的第一项
+- `selectButtonText`:`String` 选择按钮的文字
+- `queryParamText`:`String` 查询条件显示文字
+- `columns`:`Array` 列配置项，与a-table的列配置项相同，会将第一项配置成已选择的列表
--- a/ant-design-vue-jeecg/src/components/jeecgbiz/JSelectBizComponent/index.vue
+++ b/ant-design-vue-jeecg/src/components/jeecgbiz/JSelectBizComponent/index.vue
@ -0,0 +1,157 @@
+<template>
+  <a-row class="j-select-biz-component-box" type="flex" :gutter="8">
+    <a-col class="left">
+      <a-select
+        mode="multiple"
+        :placeholder="placeholder"
+        v-model="selectValue"
+        :options="selectOptions"
+        allowClear
+        :disabled="disabled"
+        :open="false"
+        style="width: 100%;"
+      />
+    </a-col>
+
+    <a-col class="right">
+      <a-button type="primary" icon="search" :disabled="disabled" @click="visible=true">{{selectButtonText}}</a-button>
+    </a-col>
+
+    <j-select-biz-component-modal
+      v-model="selectValue"
+      :name="name" :listUrl="listUrl" :returnKeys="returnKeys" :displayKey="displayKey"
+      :propColumns="columns" :queryParamText="queryParamText" :multiple="multiple"
+      :visible.sync="visible"
+      :valueKey="valueKey"
+      @ok="selectOptions=$event"
+    />
+  </a-row>
+</template>
+
+<script>
+  import JSelectBizComponentModal from './JSelectBizComponentModal'
+
+  export default {
+    name: 'JSelectBizComponent',
+    components: { JSelectBizComponentModal },
+    props: {
+      value: {
+        type: String,
+        default: ''
+      },
+      /** 是否返回 id，默认 false，返回 code */
+      returnId: {
+        type: Boolean,
+        default: false
+      },
+      placeholder: {
+        type: String,
+        default: '请选择'
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 是否支持多选，默认 true
+      multiple: {
+        type: Boolean,
+        default: true
+      },
+
+      /* 可复用属性 */
+
+      // 被选择的名字，例如选择部门就填写'部门'
+      name: {
+        type: String,
+        default: ''
+      },
+      // list 接口地址
+      listUrl: {
+        type: String,
+        required: true,
+        default: ''
+      },
+      // 显示的 Key
+      displayKey: {
+        type: String,
+        default: null
+      },
+      // 返回的 key
+      returnKeys: {
+        type: Array,
+        default: () => ['id', 'id']
+      },
+      // 选择按钮文字
+      selectButtonText: {
+        type: String,
+        default: '选择'
+      },
+      // 查询条件文字
+      queryParamText: {
+        type: String,
+        default: null
+      },
+      // columns
+      columns: {
+        type: Array,
+        default: () => []
+      }
+
+    },
+    data() {
+      return {
+        selectValue: [],
+        selectOptions: [],
+        visible: false
+      }
+    },
+    computed: {
+      valueKey() {
+        return this.returnId ? this.returnKeys[0] : this.returnKeys[1]
+      }
+    },
+    watch: {
+      value: {
+        immediate: true,
+        handler(val) {
+          if (val) {
+            this.selectValue = val.split(',')
+          } else {
+            this.selectValue = []
+          }
+        }
+      },
+      selectValue: {
+        deep: true,
+        handler(val) {
+          const data = val.join(',')
+          this.$emit('input', data)
+          this.$emit('change', data)
+        }
+      }
+    },
+    methods: {}
+  }
+</script>
+
+<style lang="scss">
+  .j-select-biz-component-box {
+    .ant-select-search__field {
+      display: none !important;
+    }
+  }
+</style>
+<style lang="scss" scoped>
+  .j-select-biz-component-box {
+
+    $width: 82px;
+
+    .left {
+      width: calc(100% - #{$width} - 8px);
+    }
+
+    .right {
+      width: #{$width};
+    }
+  }
+</style>