From e6d5c7d4b9e813a649b8e36152c863f87552cb1d Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Sun, 10 May 2020 22:06:32 +0800
Subject: [PATCH] company filter

---
 test_client/src/api/crm.js             |  11 +-
 test_client/src/views/crm/company.vue  |  47 +++-
 test_client/src/views/crm/consumer.vue | 285 +++++++++++++++----------
 test_server/crm/views.py               |  12 +-
 4 files changed, 227 insertions(+), 128 deletions(-)

diff --git a/test_client/src/api/crm.js b/test_client/src/api/crm.js
index 6149046..8ce4497 100644
--- a/test_client/src/api/crm.js
+++ b/test_client/src/api/crm.js
@@ -1,9 +1,10 @@
 import request from '@/utils/request'
 
-export function getCompanyList() {
+export function getCompanyList(query) {
   return request({
     url: '/crm/company/',
     method: 'get',
+    params: query
   })
 }
 export function createCompany(data) {
@@ -55,6 +56,14 @@ export function deleteConsumer(id) {
   })
 }
 
+export function deleteConsumers(data) {
+  return request({
+    url: `/crm/consumer/deletes/`,
+    method: 'post',
+    data
+  })
+}
+
 export function importConsumer(data) {
   return request({
     url: `/crm/consumer/import/`,
diff --git a/test_client/src/views/crm/company.vue b/test_client/src/views/crm/company.vue
index e445d88..2bab58f 100644
--- a/test_client/src/views/crm/company.vue
+++ b/test_client/src/views/crm/company.vue
@@ -2,15 +2,22 @@
   <div class="app-container">
         <div style="margin-top:10px">
           <el-input
-            v-model="search"
+            v-model="listQuery.search"
             placeholder="输入部门名称进行搜索"
             style="width: 200px;"
             class="filter-item"
+            @keyup.enter.native="handleFilter"
           />
           <el-button type="primary" @click="handleAdd" icon="el-icon-plus">新增</el-button>
+                <el-button
+        class="filter-item"
+        type="primary"
+        icon="el-icon-refresh-left"
+        @click="resetFilter"
+      >刷新重置</el-button>
         </div>
         <el-table
-          :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
+          :data="tableData.results"
           style="width: 100%;margin-top:10px;"
           border
           fit
@@ -50,7 +57,13 @@
             </template>
           </el-table-column>
         </el-table>
-
+    <pagination
+      v-show="tableData.count>0"
+      :total="tableData.count"
+      :page.sync="listQuery.page"
+      :limit.sync="listQuery.limit"
+      @pagination="getList"
+    />
     <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑单位':'新增单位'" >
       <el-form :model="company" label-width="80px" label-position="right" :rules="rule1" ref="companyForm">
         <el-form-item label="名称" prop="name">
@@ -69,6 +82,7 @@
 import { getCompanyList, createCompany, deleteCompany, updateCompany } from "@/api/crm";
 import { deepClone } from "@/utils";
 import checkPermission from "@/utils/permission";
+import Pagination from "@/components/Pagination"
 
 
 
@@ -76,16 +90,21 @@ const defaultCompany = {
         id: "",
         name: "",
       };
+const listQuery = {
+  page: 1,
+  limit: 20,
+  search: ""
+}
 export default {
+  components: { Pagination },
   data() {
     return {
       company: {
         id: "",
         name: "",
       },
-      search:'',
-      tableData: [],
-      companyData:[],
+      listQuery:listQuery,
+      tableData: {count:0},
       listLoading: true,
       dialogVisible: false,
       dialogType: "new",
@@ -106,17 +125,23 @@ export default {
     checkPermission,
     getList() {
       this.listLoading = true
-      getCompanyList().then(response => {
-        this.tableData = response.data;
+      getCompanyList(this.listQuery).then(response => {
+        this.tableData = response.data
         this.listLoading = false
       });
     },
     resetFilter() {
+      this.listQuery = {
+        page: 1,
+        limit: 20,
+        search: ""
+      };
+      this.getList();
+    },
+    handleFilter() {
+      this.listQuery.page = 1;
       this.getList();
     },
-    // handleFilter() {
-    //   let newData = this.companyData.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()))
-    // },
     handleAdd() {
       this.company = Object.assign({}, defaultCompany);
       this.dialogType = "new";
diff --git a/test_client/src/views/crm/consumer.vue b/test_client/src/views/crm/consumer.vue
index d3d0749..1968abd 100644
--- a/test_client/src/views/crm/consumer.vue
+++ b/test_client/src/views/crm/consumer.vue
@@ -5,9 +5,12 @@
         v-model="listQuery.company"
         placeholder="所属单位"
         clearable
+        filterable
         style="width: 200px"
         class="filter-item"
         @change="handleFilter"
+        remote
+        :remote-method="searchCompany"
       >
         <el-option
           v-for="item in companyData"
@@ -30,7 +33,7 @@
           :label="item.display_name"
           :value="item.key"
         />
-      </el-select> -->
+      </el-select>-->
       <el-input
         v-model="listQuery.search"
         placeholder="姓名/手机号/单位"
@@ -45,35 +48,44 @@
         icon="el-icon-refresh-left"
         @click="resetFilter"
       >刷新重置</el-button>
-      <el-checkbox v-model="showCreate" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
-        创建时间
-      </el-checkbox>
+      <el-checkbox
+        v-model="showCreate"
+        class="filter-item"
+        style="margin-left:15px;"
+        @change="tableKey=tableKey+1"
+      >创建时间</el-checkbox>
     </div>
     <div style="margin-top:10px">
       <el-button type="primary" @click="handleAddUser" icon="el-icon-plus">新增</el-button>
       <el-popover
-      type="primary"
-  placement="top"
-  width="160"
-  v-if="checkPermission(['consumer_import'])"
-  v-model="popovervisible"
-  >
-  <p>导入用户前,请下载模板并按格式录入.</p>
-  <div style="text-align: left; margin: 0;">
-    <el-link href="/media/muban/user.xlsx" target="_blank" @click="popovervisible = false" type="primary">下载模板</el-link>
-    <el-upload
-  :action="uploadUrl"
-  :on-success="handleUploadSuccess"
-  accept=".xlsx"
-  :headers="myHeaders"
-  :show-file-list ="false"
-  >
-  <el-button size="small" type="primary" @click="popovervisible = false">上传导入</el-button>
-</el-upload>
-  </div>
-  <el-button slot="reference" icon="el-icon-upload2">Excel导入</el-button>
-</el-popover>
-<el-button type="primary" icon="el-icon-download" @click="exportConsumer">导出Excel</el-button>
+        type="primary"
+        placement="top"
+        width="160"
+        v-if="checkPermission(['consumer_import'])"
+        v-model="popovervisible"
+      >
+        <p>导入用户前,请下载模板并按格式录入.</p>
+        <div style="text-align: left; margin: 0;">
+          <el-link
+            href="/media/muban/user.xlsx"
+            target="_blank"
+            @click="popovervisible = false"
+            type="primary"
+          >下载模板</el-link>
+          <el-upload
+            :action="uploadUrl"
+            :on-success="handleUploadSuccess"
+            accept=".xlsx"
+            :headers="myHeaders"
+            :show-file-list="false"
+          >
+            <el-button size="small" type="primary" @click="popovervisible = false">上传导入</el-button>
+          </el-upload>
+        </div>
+        <el-button slot="reference" icon="el-icon-upload2">Excel导入</el-button>
+      </el-popover>
+      <el-button type="primary" icon="el-icon-download" @click="exportConsumer">导出Excel</el-button>
+      <el-button type="danger" icon="el-icon-delete" @click="handleDeletes">批量删除</el-button>
     </div>
     <el-table
       :data="consumerList"
@@ -84,12 +96,13 @@
       highlight-current-row
       max-height="600"
       @sort-change="changeSort"
+      @selection-change="handleSelectionChange"
     >
-      <el-table-column type="index" width="50"></el-table-column>
+      <el-table-column type="selection" width="55"></el-table-column>
       <el-table-column align="center" label="姓名">
         <template slot-scope="scope">{{ scope.row.name }}</template>
       </el-table-column>
-      <el-table-column align="header-center" label="手机号" sortable='custom' prop="username">
+      <el-table-column align="header-center" label="手机号" sortable="custom" prop="username">
         <template slot-scope="scope">{{ scope.row.username }}</template>
       </el-table-column>
       <el-table-column align="header-center" label="小程序OpenId">
@@ -98,27 +111,23 @@
       <el-table-column align="header-center" label="微信昵称">
         <template slot-scope="scope">{{ scope.row.nickname }}</template>
       </el-table-column>
-      <el-table-column align="header-center" label="单位" sortable='custom' prop="company">
+      <el-table-column align="header-center" label="单位" sortable="custom" prop="company">
         <template
           slot-scope="scope"
           v-if="scope.row.company_name != null"
         >{{ scope.row.company_name }}</template>
       </el-table-column>
       <el-table-column align="center" label="缴费学科">
-        <template slot-scope="scope" >
-          <el-tag
-    v-for="item in scope.row.subjects_name"
-    :key="item">
-    {{ item }}
-  </el-tag>
+        <template slot-scope="scope">
+          <el-tag v-for="item in scope.row.subjects_name" :key="item">{{ item }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="工作类别" sortable='custom' prop="workscope">
-        <template slot-scope="scope" >
+      <el-table-column align="center" label="工作类别" sortable="custom" prop="workscope">
+        <template slot-scope="scope">
           <el-tag v-if="scope.row.workscope_name">{{ scope.row.workscope_name }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="创建日期" sortable='custom' prop="create_time" v-if="showCreate">
+      <el-table-column label="创建日期" sortable="custom" prop="create_time" v-if="showCreate">
         <template slot-scope="scope">
           <span>{{ scope.row.create_time }}</span>
         </template>
@@ -168,37 +177,42 @@
           <el-input v-model="consumer.username" placeholder="手机号" />
         </el-form-item>
         <el-form-item label="单位" prop="company">
-          <el-select v-model="consumer.company" placeholder="单位" style="width:100%" clearable>
-    <el-option
-      v-for="item in companyData"
-      :key="item.value"
-      :label="item.label"
-      :value="item.value"
-      >
-    </el-option>
-  </el-select>
-  </el-form-item>
-  <el-form-item label="缴费学科" prop="subjects">
-          <el-select v-model="consumer.subjects" placeholder="缴费学科" style="width:100%" multiple>
-    <el-option
-      v-for="item in subjectData"
-      :key="item.value"
-      :label="item.label"
-      :value="item.value"
-      >
-    </el-option>
-  </el-select>
+          <el-select
+            v-model="consumer.company"
+            placeholder="单位"
+            style="width:100%"
+            clearable
+            filterable
+            remote
+            :remote-method="searchCompany"
+          >
+            <el-option
+              v-for="item in companyData"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
         </el-form-item>
-  <el-form-item label="工作类别" prop="workscope">
-      <el-select v-model="consumer.workscope" placeholder="工作类别" style="width:100%" clearable>
-    <el-option
-      v-for="item in workscopeData"
-      :key="item.value"
-      :label="item.label"
-      :value="item.value"
-      >
-    </el-option>
-  </el-select>
+        <el-form-item label="缴费学科" prop="subjects">
+          <el-select v-model="consumer.subjects" placeholder="缴费学科" style="width:100%" multiple>
+            <el-option
+              v-for="item in subjectData"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="工作类别" prop="workscope">
+          <el-select v-model="consumer.workscope" placeholder="工作类别" style="width:100%" clearable>
+            <el-option
+              v-for="item in workscopeData"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
         </el-form-item>
       </el-form>
       <div style="text-align:right;">
@@ -216,10 +230,11 @@ import {
   deleteConsumer,
   updateConsumer,
   importConsumer,
-  exportConsumer
+  exportConsumer,
+  deleteConsumers
 } from "@/api/crm";
-import { getSubjectAll } from "@/api/question"
-import { getWorkScopeAll } from "@/api/examtest"
+import { getSubjectAll } from "@/api/question";
+import { getWorkScopeAll } from "@/api/examtest";
 import { getCompanyList } from "@/api/crm";
 import { genTree, deepClone } from "@/utils";
 import checkPermission from "@/utils/permission";
@@ -232,13 +247,13 @@ const defaultConsumer = {
   name: "",
   username: "",
   company: null,
-  subjects:[],
-  workscope:null
+  subjects: [],
+  workscope: null
 };
 const listQuery = {
   page: 1,
   limit: 20,
-  search:''
+  search: ""
 };
 export default {
   components: { Pagination },
@@ -261,7 +276,7 @@ export default {
       listQuery: {
         page: 1,
         limit: 20,
-        search:''
+        search: ""
       },
       enabledOptions: [
         { key: "true", display_name: "已缴" },
@@ -271,7 +286,9 @@ export default {
       dialogType: "new",
       rule1: {
         name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
-        username: [{ required: true, message: "请输入手机号", trigger: "change" }]
+        username: [
+          { required: true, message: "请输入手机号", trigger: "change" }
+        ]
         // password: [
         //   { required: true, message: "请输入密码", trigger: "change" }
         // ],
@@ -280,7 +297,8 @@ export default {
       treeLoding: false,
       companyData: [],
       subjectData: [],
-      workscopeData:[],
+      workscopeData: [],
+      selects: []
     };
   },
   computed: {},
@@ -294,27 +312,26 @@ export default {
     checkPermission,
     handleUploadSuccess(res, file) {
       if (res.code == 200) {
-        const loading = this.$loading({text:"正在导入中..."})
+        const loading = this.$loading({ text: "正在导入中..." });
         importConsumer(res.data).then(response => {
-          loading.close()
-          if(response.code==200){
-          this.$message({
-          message: '导入成功',
-          type: 'success'
-        });
-        this.getList(listQuery)
-          }else if(response.code==206){
+          loading.close();
+          if (response.code == 200) {
             this.$message({
-          message: '部分未成功' + response.data,
-          type: 'success'
-        });
-        this.getList(listQuery)
-          }else{
+              message: "导入成功",
+              type: "success"
+            });
+            this.getList(listQuery);
+          } else if (response.code == 206) {
+            this.$message({
+              message: "部分未成功" + response.data,
+              type: "success"
+            });
+            this.getList(listQuery);
+          } else {
             this.$message.error(response.msg);
           }
-        
-      });
-      }else{
+        });
+      } else {
         this.$message.error("Excel上传失败!");
       }
     },
@@ -333,7 +350,14 @@ export default {
     getCompanyList() {
       this.treeLoding = true;
       getCompanyList().then(response => {
-        this.companyData = genTree(response.data);
+        this.companyData = genTree(response.data.results);
+        this.treeLoding = false;
+      });
+    },
+    searchCompany(val) {
+      this.treeLoding = true;
+      getCompanyList({search:val}).then(response => {
+        this.companyData = genTree(response.data.results);
         this.treeLoding = false;
       });
     },
@@ -351,7 +375,7 @@ export default {
       this.listQuery = {
         page: 1,
         limit: 20,
-        search: ''
+        search: ""
       };
       this.getList();
     },
@@ -393,12 +417,39 @@ export default {
           console.error(err);
         });
     },
+    handleDeletes() {
+      if(this.selects.length){
+        this.$confirm("确认删除这"+ this.selects.length + "位用户吗?将丢失数据!", "警告", {
+          confirmButtonText: "确认",
+          cancelButtonText: "取消",
+          type: "error"
+        })
+          .then(async () => {
+            const { code } = await deleteConsumers({ ids: this.selects });
+            if (code >= 200) {
+              this.getList()
+              this.$message({
+                type: "success",
+                message: "成功删除!"
+              });
+            }
+          })
+          .catch(err => {
+            console.error(err);
+          });
+      }else{
+        this.$message({
+          message: '请先选择',
+          type: 'warning'
+        });
+      }
+    },
     async confirmUser(form) {
       this.$refs[form].validate(valid => {
         if (valid) {
           const isEdit = this.dialogType === "edit";
           if (isEdit) {
-            let consumer = this.consumer
+            let consumer = this.consumer;
             updateConsumer(this.consumer.id, consumer).then(res => {
               // for (let index = 0; index < this.consumerList.length; index++) {
               //   if (this.consumerList[index].id === this.consumer.id) {
@@ -410,9 +461,9 @@ export default {
               //     break;
               //   }
               // }
-              this.getList()
+              this.getList();
               this.dialogVisible = false;
-              if(res.code >=200){
+              if (res.code >= 200) {
                 this.$notify({
                   title: "成功",
                   message: "编辑成功",
@@ -420,7 +471,6 @@ export default {
                   duration: 2000
                 });
               }
-              
             });
           } else {
             createConsumer(this.consumer).then(res => {
@@ -428,15 +478,14 @@ export default {
               // this.consumerList.unshift(this.consumer)
               this.getList();
               this.dialogVisible = false;
-              if(res.code >=200){
+              if (res.code >= 200) {
                 this.$notify({
-                title: "成功",
-                message: "新增成功",
-                type: "success",
-                duration: 2000
-              });
+                  title: "成功",
+                  message: "新增成功",
+                  type: "success",
+                  duration: 2000
+                });
               }
-              
             });
           }
         } else {
@@ -447,19 +496,25 @@ export default {
     exportConsumer() {
       const loading = this.$loading();
       exportConsumer(this.listQuery).then(response => {
-        loading.close()
+        loading.close();
         window.open(response.data.path, "_blank");
       });
     },
-    changeSort (val) {
-      if(val.order == 'ascending'){
-        this.listQuery.ordering = val.prop
-      }else{
-        this.listQuery.ordering = '-' + val.prop
+    changeSort(val) {
+      if (val.order == "ascending") {
+        this.listQuery.ordering = val.prop;
+      } else {
+        this.listQuery.ordering = "-" + val.prop;
       }
-    
-      this.getList()
 
+      this.getList();
+    },
+    handleSelectionChange(val) {
+      let selects = [];
+      for (var i = 0; i < val.length; i++) {
+        selects.push(val[i].id);
+      }
+      this.selects = selects;
     }
   }
 };
diff --git a/test_server/crm/views.py b/test_server/crm/views.py
index 96dd355..ab36ff7 100644
--- a/test_server/crm/views.py
+++ b/test_server/crm/views.py
@@ -65,7 +65,7 @@ class CompanyViewSet(ModelViewSet):
         {'put': 'company_update'}, {'delete': 'company_delete'}]
     queryset = Company.objects.filter(is_delete=0).all()
     serializer_class = CompanySerializer
-    pagination_class = None #不分页
+    pagination_class = CommonPagination
     filter_backends = [DjangoFilterBackend,SearchFilter, OrderingFilter]
     search_fields = ('^name',)
     ordering_fields = ('id',)
@@ -114,6 +114,16 @@ class ConsumerViewSet(ModelViewSet):
                 PaySubject.objects.get_or_create(consumer = instance, subject__id=i, defaults={'consumer':instance,'subject':Questioncat.objects.get(id=i)})
         return Response(serializer.data)
 
+    @action(methods=['post'], detail=False, url_name='consumer_deletes',perms_map=[{'*':'consumer_deletes'}])
+    def deletes(self, request):
+        """
+        批量删除用户
+        """
+        ids = request.data.get('ids', None)
+        if ids:
+            Consumer.objects.filter(id__in = ids).delete()
+            return Response(status=status.HTTP_200_OK)
+
     @action(methods=['get'], detail=False,
             url_path='subjectpaid', url_name='subject_paid',perms_map=[{'*':'my_subject'}])
     def has_paid(self, request):