!12 表单中的部门选择、用户选择组件化

Merge pull request !12 from wanghaitong/Feat_histone

_web/src/components/DepartmentSelect/DepartmentSelect.vue

@@ -0,0 +1,48 @@
+ <template>
+  <a-tree-select
+    :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
+    allowClear
+    :treeData="orgTree"
+    :placeholder="placeholder"
+    treeDefaultExpandAll
+    @change="onchange"
+  >
+    <span slot="title" slot-scope="{ id }">{{ id }}</span>
+  </a-tree-select>
+</template>
+<script>
+import { getOrgTree } from '@/api/modular/system/orgManage'
+
+export default {
+  name: 'DepartSelect',
+  props: {
+    placeholder: {
+      type: String
+    },
+    value: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      orgTree: []
+    }
+  },
+  created() {
+    this.getOrgData()
+  },
+  methods: {
+    getOrgData() {
+      getOrgTree().then((res) => {
+        this.orgTree = res
+      })
+    },
+    /**
+     * 选择树机构，初始化机构名称于表单中
+     */
+    onchange (value) {
+      this.$emit('change', value)
+    }
+  }
+}
+</script>

_web/src/components/DepartmentSelect/index.js

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

_web/src/components/UserSelect/UserSelect.vue

@@ -0,0 +1,77 @@
+<template>
+  <a-select
+    :mode="model"
+    showSearch
+    :value="selectValue"
+    :filter-option="false"
+    :placeholder="placeholder"
+    :not-found-content="fetching ? undefined : null"
+    @search="fetchUser"
+    @change="handleChange"
+  >
+    <a-spin v-if="fetching" slot="notFoundContent" size="small" />
+    <a-select-option v-for="d in data" :key="d.value">
+      {{ d.text }}
+    </a-select-option>
+  </a-select>
+</template>
+<script>
+import debounce from 'lodash/debounce'
+import { getUserPage } from '@/api/modular/system/userManage'
+
+export default {
+  name: 'UserSelect',
+  props: {
+    placeholder: {
+      type: String
+    },
+    value: {
+      type: String
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const multiple = this.multiple
+    this.fetchUser = debounce(this.fetchUser, 800)
+    return {
+      data: [],
+      fetching: false,
+      selectValue: multiple ? [] : undefined,
+      model: multiple ? 'multiple' : 'default'
+    }
+  },
+  methods: {
+    fetchUser(key) {
+      console.log('fetching user', key)
+      this.data = []
+      this.fetching = true
+
+      const params = {
+        pageNo: 1,
+        pageSize: 10,
+        searchValue: key
+      }
+      this.userFetching = true
+
+      getUserPage(params).then((res) => {
+        this.data = res.rows.map(user => ({
+          text: `${user.name} ${user.account}`,
+          value: user.id
+        }))
+      }).finally(() => {
+        this.fetching = false
+      })
+    },
+    handleChange(value) {
+      Object.assign(this, {
+        selectValue: value,
+        fetching: false
+      })
+      this.$emit('change', value)
+    }
+  }
+}
+</script>

_web/src/components/UserSelect/index.js

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

xiaonuo-base/xiaonuo-gen/src/main/resources/template/addForm.vue.vm

@@ -26,6 +26,20 @@
           has-feedback
         >
 #end
+#if (${column.effectType} == "user")
+    #if (${column.whetherRequired} == "Y")
+      <user-select placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}', {rules: [{required: true, message: '请输入${column.columnComment}！'}]}]" />
+    #else
+      <user-select placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}']" />
+    #end
+#end
+#if (${column.effectType} == "depart")
+    #if (${column.whetherRequired} == "Y")
+      <depart-select placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}', {rules: [{required: true, message: '请输入${column.columnComment}！'}]}]" />
+    #else
+      <depart-select placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}']" />
+    #end
+#end
 #if (${column.effectType} == "input")
 #if (${column.whetherRequired} == "Y")
           <a-input placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}', {rules: [{required: true, message: '请输入${column.columnComment}！'}]}]" />

xiaonuo-base/xiaonuo-gen/src/main/resources/template/editForm.vue.vm

@@ -28,6 +28,20 @@
           has-feedback
         >
 #end
+#if (${column.effectType} == "user")
+    #if (${column.whetherRequired} == "Y")
+      <user-select placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}', {rules: [{required: true, message: '请输入${column.columnComment}！'}]}]" />
+    #else
+      <user-select placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}']" />
+    #end
+#end
+#if (${column.effectType} == "depart")
+    #if (${column.whetherRequired} == "Y")
+      <depart-select placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}', {rules: [{required: true, message: '请输入${column.columnComment}！'}]}]" />
+    #else
+      <depart-select placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}']" />
+    #end
+#end
 #if (${column.effectType} == "input")
 #if (${column.whetherRequired} == "Y")
           <a-input placeholder="请输入${column.columnComment}" v-decorator="['${column.javaName}', {rules: [{required: true, message: '请输入${column.columnComment}！'}]}]" />