初始化

src/api/system/account.js

@@ -17,3 +17,6 @@ export const saveItem = params => {
 };
 export const delItem = ({ id, ...params }) =>
   api.del(`/yxl-back-end/framework/uiac/role/del/${id}`, params);
+
+export const getSelectList = params =>
+  api.get(`/yxl-back-end/framework/uiac/account/search-select`, params);

src/containers/ToolbarContainer.vue

@@ -102,6 +102,12 @@
               :params="field.params"
               :clearable="true"
             />
+            <AccountSelect
+              v-if="field.type === 'AccountSelect'"
+              v-model="form[field.name]"
+              :params="field.params"
+              :clearable="true"
+            />
           </el-form-item>
         </el-col>
       </el-row>

src/containers/accountSelect/AccountSelect.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-select
+    v-model="vModel"
+    placeholder="请选择"
+    filterable
+    remote
+    :remote-method="remoteMethod"
+    clearable
+    v-bind="$attrs"
+    @change="onChange"
+  >
+    <el-option v-for="item in options" :key="item.id" :value="item.id">
+      <span style="float: left">{{ item.nickname }}</span>
+      <span style="float: right; color: #8492a6; font-size: 13px">{{
+        item.mobileNumber
+      }}</span>
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import { getSelectList } from '@/api/system/account';
+
+export default {
+  name: 'AccountSelect',
+
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    firstLoad: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      vModel: this.value,
+      options: []
+    };
+  },
+
+  watch: {
+    value: {
+      handler(val) {
+        this.vModel = val;
+      },
+      immediate: true
+    }
+  },
+
+  mounted() {
+    this.firstLoad && this.loadData();
+  },
+
+  methods: {
+    onChange(value) {
+      this.$emit('input', value || null);
+    },
+
+    remoteMethod(query) {
+      if (query === '') {
+        this.loadData();
+      } else {
+        this.loadData(query);
+      }
+    },
+
+    async loadData(keyword = '') {
+      const params = {};
+      if (keyword) {
+        params.keyword = keyword;
+      }
+      const { success, data, msg } = await getSelectList(params);
+      if (success) {
+        this.options = data;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/containers/index.js

@@ -1,9 +1,11 @@
 import Vue from 'vue';
+import AccountSelect from './accountSelect/AccountSelect.vue';
 import ActivitySelect from './ActivitySelect/ActivitySelect.vue';
 import IssueTypeSelect from './issueType/IssueTypeSelect.vue';
 import SceneSelect from './sceneSelect/SceneSelect.vue';
 import ToolbarContainer from './ToolbarContainer.vue';
 
+Vue.component('AccountSelect', AccountSelect);
 Vue.component('ActivitySelect', ActivitySelect);
 Vue.component('IssueTypeSelect', IssueTypeSelect);
 Vue.component('SceneSelect', SceneSelect);