feature:选择用户组件封装

src/components/select/SelectUser.vue

@@ -0,0 +1,214 @@
+<template>
+  <el-dialog append-to-body :title="title" :visible.sync="innerVisible" width="40%">
+    <el-row class="transfer">
+      <el-col :span="12">
+        <header>
+          <el-input
+            v-model="queryForm.keyWords"
+            clearable
+            placeholder="请输入关键字"
+            suffix-icon="el-icon-search"
+            @change="search" />
+        </header>
+        <el-dropdown>
+          <span class="el-dropdown-link">
+            按字母顺序查看
+            <i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item>按创建顺序查看</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <ul v-infinite-scroll="fetchData" class="options" :infinite-scroll-disabled="disabled">
+          <li v-for="(item, index) in options" :key="index" @click="transfer(index)">
+            <span>{{ item.userName }}</span>
+            <i class="el-icon-arrow-right"></i>
+          </li>
+        </ul>
+      </el-col>
+      <el-col :span="12">
+        <header>
+          <span>已选： {{ selected.length }}个员工</span>
+          <el-button :disabled="selected.length == 0" type="text" @click="clear">清空</el-button>
+        </header>
+        <ul class="options">
+          <li v-for="(item, index) in selected" :key="index" @click="goBack(index)">
+            <span>{{ item.userName }}</span>
+          </li>
+        </ul>
+      </el-col>
+    </el-row>
+    <span slot="footer">
+      <el-button size="mini" type="primary" @click="save">保存</el-button>
+      <el-button size="mini" @click="innerVisible = false">取消</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+  import userApi from '@/api/system/user'
+
+  export default {
+    name: 'SelectUser',
+    props: {
+      title: {
+        type: String,
+        default: '选择',
+      },
+      multiple: Boolean,
+      queryParams: {
+        type: Object,
+        default() {
+          return {}
+        },
+      },
+    },
+    data() {
+      return {
+        innerVisible: false,
+        queryForm: {
+          keyWords: '',
+          pageNum: 1,
+          pageSize: 50,
+        },
+        disabled: false,
+        total: 0,
+        list: [],
+        options: [],
+        selected: [],
+      }
+    },
+    mounted() {
+      // this.fetchData()
+    },
+    methods: {
+      open() {
+        this.innerVisible = true
+      },
+      save() {
+        this.innerVisible = false
+        this.$emit('save', this.selected)
+      },
+      search() {
+        this.queryForm.pageNum = 1
+        this.fetchData('new')
+      },
+      async fetchData(type) {
+        let query = Object.assign(this.queryForm, this.queryParams)
+        const {
+          data: { list, total },
+        } = await userApi.getList(query)
+        this.total = total
+        if (list && list.length > 0) {
+          for (let index in list) {
+            list[index].sort = (this.queryForm.pageNum - 1) * this.queryForm.pageSize + index
+          }
+          if (type === 'new') {
+            this.list = list
+            this.options = list
+          } else {
+            this.list = this.list.concat(list)
+            this.options = this.options.concat(list)
+          }
+          this.queryForm.pageNum++
+        }
+        // 禁用加载请求
+        this.disabled = false
+        if (this.list.length >= this.total) {
+          this.disabled = true
+        }
+      },
+
+      transfer(index) {
+        if (!this.multiple && this.selected.length === 1) {
+          this.$message({
+            type: 'warning',
+            message: '只能选择一个员工，请勿多选！',
+          })
+          return
+        }
+        const arr = this.options.splice(index, 1)
+        if (arr[0]) this.selected.push(arr[0])
+        this.selected.sort(function (a, b) {
+          return a.sort - b.sort
+        })
+      },
+      goBack(index) {
+        const arr = this.selected.splice(index, 1)
+        if (arr[0]) this.options.push(arr[0])
+        this.options.sort(function (a, b) {
+          return a.sort - b.sort
+        })
+      },
+      clear() {
+        this.selected = []
+        this.options = this.list
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .transfer {
+    height: 500px;
+    border: 1px solid #ebeef5;
+
+    .el-col {
+      height: 100%;
+
+      &:first-child {
+        border-right: 1px solid #ebeef5;
+      }
+
+      .el-dropdown {
+        height: 50px;
+        line-height: 50px;
+        margin: 0 8px;
+        width: calc(100% - 16px);
+        border-bottom: 1px solid #ebeef5;
+
+        span {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+      }
+
+      .options {
+        margin: 0;
+        padding: 0 10px;
+        list-style: none;
+        height: 400px;
+        overflow-y: auto;
+
+        li {
+          height: 50px;
+          line-height: 50px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 1px solid #ebeef5;
+
+          & i {
+            transition: all 0.3s;
+            cursor: pointer;
+
+            &:hover {
+              color: #1d66dc;
+              font-weight: bold;
+            }
+          }
+        }
+      }
+    }
+
+    header {
+      height: 50px;
+      padding: 9px 8px;
+      border-bottom: 1px solid #ebeef5;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+</style>

src/views/customer/components/Allocate.vue

@@ -7,12 +7,7 @@
  * @FilePath: \opms_frontend\src\views\customer\components\allocate.vue
 -->
 <template>
-  <el-dialog
-    title="分配客户"
-    :visible.sync="visible"
-    width="30%"
-    @close="handleClose">
-    <Transfer ref="transfer" />
+  <el-dialog title="分配客户" :visible.sync="visible" width="30%" @close="handleClose">
     <el-form label-width="80px" :model="form">
       <el-form-item label="销售代表">
         <el-input v-model="form.allocate" readonly>
@@ -24,28 +19,25 @@
       <el-button size="mini" type="primary">保存</el-button>
       <el-button size="mini" @click="visible = false">取消</el-button>
     </span>
+    <!--    <Transfer ref="transfer" />-->
+    <select-user ref="selectUser" :query-params="{ roles: ['Sales', 'SalesManager'] }" @save="selectUser" />
   </el-dialog>
 </template>
 
 <script>
-  import Transfer from './Transfer.vue'
+  // import Transfer from './Transfer.vue'
+  import SelectUser from '@/components/select/SelectUser'
+
   export default {
     components: {
-      Transfer,
+      // Transfer,
+      SelectUser,
     },
     data() {
       const generateData = () => {
         const data = []
         const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都']
-        const pinyin = [
-          'shanghai',
-          'beijing',
-          'guangzhou',
-          'shenzhen',
-          'nanjing',
-          'xian',
-          'chengdu',
-        ]
+        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu']
         cities.forEach((city, index) => {
           data.push({
             label: city,
@@ -69,7 +61,11 @@
     methods: {
       handleClose() {},
       choose() {
-        this.$refs.transfer.innerVisible = true
+        // this.$refs.transfer.innerVisible = true
+        this.$refs.selectUser.open()
+      },
+      selectUser(userList) {
+        console.log(userList)
       },
     },
   }

src/views/customer/openSea.vue

@@ -22,29 +22,15 @@
         <el-input v-model="queryForm.custLevel" placeholder="客户级别" />
       </el-col>
       <el-col :span="8">
-        <el-button icon="el-icon-plus" type="primary" @click="fetchData">
-          查询
-        </el-button>
+        <el-button icon="el-icon-plus" type="primary" @click="fetchData">查询</el-button>
         <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
       </el-col>
     </el-row>
     <vab-query-form>
       <vab-query-form-left-panel :span="12">
-        <el-button
-          icon="el-icon-plus"
-          type="primary"
-          @click="$refs.edit.init()">
-          新建
-        </el-button>
-        <el-button
-          icon="el-icon-plus"
-          type="primary"
-          @click="$refs.allocate.visible = true">
-          分配
-        </el-button>
-        <el-button icon="el-icon-plus" type="primary" @click="handleReceive">
-          领取
-        </el-button>
+        <el-button icon="el-icon-plus" type="primary" @click="$refs.edit.init()">新建</el-button>
+        <el-button icon="el-icon-plus" type="primary" @click="$refs.allocate.visible = true">分配</el-button>
+        <el-button icon="el-icon-plus" type="primary" @click="handleReceive">领取</el-button>
       </vab-query-form-left-panel>
       <vab-query-form-right-panel :span="12">
         <el-button icon="el-icon-download" />
@@ -69,21 +55,14 @@
           {{ scope.row.custStatus == 10 ? '正常' : '异常' }}
         </template>
       </el-table-column>
-      <el-table-column
-        align="center"
-        label="最后跟进时间"
-        prop="followUpDate" />
+      <el-table-column align="center" label="最后跟进时间" prop="followUpDate" />
       <el-table-column align="center" label="创建人" prop="createdName" />
       <el-table-column align="center" label="创建时间" prop="createdTime" />
       <el-table-column align="center" label="操作">
         <template slot-scope="scope">
           <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
-          <el-button type="text" @click="handleDetail(scope.row)">
-            详情
-          </el-button>
-          <el-button type="text" @click="handleDelete(scope.row)">
-            删除
-          </el-button>
+          <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
+          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -96,10 +75,7 @@
       @current-change="handleCurrentChange"
       @size-change="handleSizeChange" />
     <!-- 新增编辑客户弹窗 -->
-    <Edit
-      ref="edit"
-      @createContact="createContact"
-      @customerSave="customerSave" />
+    <Edit ref="edit" @createContact="createContact" @customerSave="customerSave" />
     <!-- 新建联系人弹窗 -->
     <Contact ref="contact" />
     <!-- 分配客户 -->
@@ -113,6 +89,7 @@
   import Contact from './components/Contact'
   import Edit from './components/Edit'
   import Allocate from './components/Allocate'
+
   export default {
     name: 'OpenSea',
     components: {
@@ -235,9 +212,7 @@
           type: 'warning',
         })
           .then(async () => {
-            const [err, res] = await to(
-              api.receiveCustomer({ ids: arr.join() })
-            )
+            const [err, res] = await to(api.receiveCustomer({ ids: arr.join() }))
             if (err) return
             if (res.code == 200) {
               this.$message({