company filter

This commit is contained in:
caoqianming 2020-05-10 22:06:32 +08:00
parent ab7f9a85a0
commit e6d5c7d4b9
4 changed files with 227 additions and 128 deletions

View File

@ -1,9 +1,10 @@
import request from '@/utils/request' import request from '@/utils/request'
export function getCompanyList() { export function getCompanyList(query) {
return request({ return request({
url: '/crm/company/', url: '/crm/company/',
method: 'get', method: 'get',
params: query
}) })
} }
export function createCompany(data) { 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) { export function importConsumer(data) {
return request({ return request({
url: `/crm/consumer/import/`, url: `/crm/consumer/import/`,

View File

@ -2,15 +2,22 @@
<div class="app-container"> <div class="app-container">
<div style="margin-top:10px"> <div style="margin-top:10px">
<el-input <el-input
v-model="search" v-model="listQuery.search"
placeholder="输入部门名称进行搜索" placeholder="输入部门名称进行搜索"
style="width: 200px;" style="width: 200px;"
class="filter-item" class="filter-item"
@keyup.enter.native="handleFilter"
/> />
<el-button type="primary" @click="handleAdd" icon="el-icon-plus">新增</el-button> <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> </div>
<el-table <el-table
:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" :data="tableData.results"
style="width: 100%;margin-top:10px;" style="width: 100%;margin-top:10px;"
border border
fit fit
@ -50,7 +57,13 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </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-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑单位':'新增单位'" >
<el-form :model="company" label-width="80px" label-position="right" :rules="rule1" ref="companyForm"> <el-form :model="company" label-width="80px" label-position="right" :rules="rule1" ref="companyForm">
<el-form-item label="名称" prop="name"> <el-form-item label="名称" prop="name">
@ -69,6 +82,7 @@
import { getCompanyList, createCompany, deleteCompany, updateCompany } from "@/api/crm"; import { getCompanyList, createCompany, deleteCompany, updateCompany } from "@/api/crm";
import { deepClone } from "@/utils"; import { deepClone } from "@/utils";
import checkPermission from "@/utils/permission"; import checkPermission from "@/utils/permission";
import Pagination from "@/components/Pagination"
@ -76,16 +90,21 @@ const defaultCompany = {
id: "", id: "",
name: "", name: "",
}; };
const listQuery = {
page: 1,
limit: 20,
search: ""
}
export default { export default {
components: { Pagination },
data() { data() {
return { return {
company: { company: {
id: "", id: "",
name: "", name: "",
}, },
search:'', listQuery:listQuery,
tableData: [], tableData: {count:0},
companyData:[],
listLoading: true, listLoading: true,
dialogVisible: false, dialogVisible: false,
dialogType: "new", dialogType: "new",
@ -106,17 +125,23 @@ export default {
checkPermission, checkPermission,
getList() { getList() {
this.listLoading = true this.listLoading = true
getCompanyList().then(response => { getCompanyList(this.listQuery).then(response => {
this.tableData = response.data; this.tableData = response.data
this.listLoading = false this.listLoading = false
}); });
}, },
resetFilter() { resetFilter() {
this.listQuery = {
page: 1,
limit: 20,
search: ""
};
this.getList();
},
handleFilter() {
this.listQuery.page = 1;
this.getList(); this.getList();
}, },
// handleFilter() {
// let newData = this.companyData.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()))
// },
handleAdd() { handleAdd() {
this.company = Object.assign({}, defaultCompany); this.company = Object.assign({}, defaultCompany);
this.dialogType = "new"; this.dialogType = "new";

View File

@ -5,9 +5,12 @@
v-model="listQuery.company" v-model="listQuery.company"
placeholder="所属单位" placeholder="所属单位"
clearable clearable
filterable
style="width: 200px" style="width: 200px"
class="filter-item" class="filter-item"
@change="handleFilter" @change="handleFilter"
remote
:remote-method="searchCompany"
> >
<el-option <el-option
v-for="item in companyData" v-for="item in companyData"
@ -30,7 +33,7 @@
:label="item.display_name" :label="item.display_name"
:value="item.key" :value="item.key"
/> />
</el-select> --> </el-select>-->
<el-input <el-input
v-model="listQuery.search" v-model="listQuery.search"
placeholder="姓名/手机号/单位" placeholder="姓名/手机号/单位"
@ -45,35 +48,44 @@
icon="el-icon-refresh-left" icon="el-icon-refresh-left"
@click="resetFilter" @click="resetFilter"
>刷新重置</el-button> >刷新重置</el-button>
<el-checkbox v-model="showCreate" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1"> <el-checkbox
创建时间 v-model="showCreate"
</el-checkbox> class="filter-item"
style="margin-left:15px;"
@change="tableKey=tableKey+1"
>创建时间</el-checkbox>
</div> </div>
<div style="margin-top:10px"> <div style="margin-top:10px">
<el-button type="primary" @click="handleAddUser" icon="el-icon-plus">新增</el-button> <el-button type="primary" @click="handleAddUser" icon="el-icon-plus">新增</el-button>
<el-popover <el-popover
type="primary" type="primary"
placement="top" placement="top"
width="160" width="160"
v-if="checkPermission(['consumer_import'])" v-if="checkPermission(['consumer_import'])"
v-model="popovervisible" v-model="popovervisible"
> >
<p>导入用户前,请下载模板并按格式录入.</p> <p>导入用户前,请下载模板并按格式录入.</p>
<div style="text-align: left; margin: 0;"> <div style="text-align: left; margin: 0;">
<el-link href="/media/muban/user.xlsx" target="_blank" @click="popovervisible = false" type="primary">下载模板</el-link> <el-link
<el-upload href="/media/muban/user.xlsx"
:action="uploadUrl" target="_blank"
:on-success="handleUploadSuccess" @click="popovervisible = false"
accept=".xlsx" type="primary"
:headers="myHeaders" >下载模板</el-link>
:show-file-list ="false" <el-upload
> :action="uploadUrl"
<el-button size="small" type="primary" @click="popovervisible = false">上传导入</el-button> :on-success="handleUploadSuccess"
</el-upload> accept=".xlsx"
</div> :headers="myHeaders"
<el-button slot="reference" icon="el-icon-upload2">Excel导入</el-button> :show-file-list="false"
</el-popover> >
<el-button type="primary" icon="el-icon-download" @click="exportConsumer">导出Excel</el-button> <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> </div>
<el-table <el-table
:data="consumerList" :data="consumerList"
@ -84,12 +96,13 @@
highlight-current-row highlight-current-row
max-height="600" max-height="600"
@sort-change="changeSort" @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="姓名"> <el-table-column align="center" label="姓名">
<template slot-scope="scope">{{ scope.row.name }}</template> <template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column> </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> <template slot-scope="scope">{{ scope.row.username }}</template>
</el-table-column> </el-table-column>
<el-table-column align="header-center" label="小程序OpenId"> <el-table-column align="header-center" label="小程序OpenId">
@ -98,27 +111,23 @@
<el-table-column align="header-center" label="微信昵称"> <el-table-column align="header-center" label="微信昵称">
<template slot-scope="scope">{{ scope.row.nickname }}</template> <template slot-scope="scope">{{ scope.row.nickname }}</template>
</el-table-column> </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 <template
slot-scope="scope" slot-scope="scope"
v-if="scope.row.company_name != null" v-if="scope.row.company_name != null"
>{{ scope.row.company_name }}</template> >{{ scope.row.company_name }}</template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="缴费学科"> <el-table-column align="center" label="缴费学科">
<template slot-scope="scope" > <template slot-scope="scope">
<el-tag <el-tag v-for="item in scope.row.subjects_name" :key="item">{{ item }}</el-tag>
v-for="item in scope.row.subjects_name"
:key="item">
{{ item }}
</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="工作类别" sortable='custom' prop="workscope"> <el-table-column align="center" label="工作类别" sortable="custom" prop="workscope">
<template slot-scope="scope" > <template slot-scope="scope">
<el-tag v-if="scope.row.workscope_name">{{ scope.row.workscope_name }}</el-tag> <el-tag v-if="scope.row.workscope_name">{{ scope.row.workscope_name }}</el-tag>
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<span>{{ scope.row.create_time }}</span> <span>{{ scope.row.create_time }}</span>
</template> </template>
@ -168,37 +177,42 @@
<el-input v-model="consumer.username" placeholder="手机号" /> <el-input v-model="consumer.username" placeholder="手机号" />
</el-form-item> </el-form-item>
<el-form-item label="单位" prop="company"> <el-form-item label="单位" prop="company">
<el-select v-model="consumer.company" placeholder="单位" style="width:100%" clearable> <el-select
<el-option v-model="consumer.company"
v-for="item in companyData" placeholder="单位"
:key="item.value" style="width:100%"
:label="item.label" clearable
:value="item.value" filterable
> remote
</el-option> :remote-method="searchCompany"
</el-select> >
</el-form-item> <el-option
<el-form-item label="缴费学科" prop="subjects"> v-for="item in companyData"
<el-select v-model="consumer.subjects" placeholder="缴费学科" style="width:100%" multiple> :key="item.value"
<el-option :label="item.label"
v-for="item in subjectData" :value="item.value"
:key="item.value" ></el-option>
:label="item.label" </el-select>
:value="item.value"
>
</el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="工作类别" prop="workscope"> <el-form-item label="缴费学科" prop="subjects">
<el-select v-model="consumer.workscope" placeholder="工作类别" style="width:100%" clearable> <el-select v-model="consumer.subjects" placeholder="缴费学科" style="width:100%" multiple>
<el-option <el-option
v-for="item in workscopeData" v-for="item in subjectData"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
> ></el-option>
</el-option> </el-select>
</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-item>
</el-form> </el-form>
<div style="text-align:right;"> <div style="text-align:right;">
@ -216,10 +230,11 @@ import {
deleteConsumer, deleteConsumer,
updateConsumer, updateConsumer,
importConsumer, importConsumer,
exportConsumer exportConsumer,
deleteConsumers
} from "@/api/crm"; } from "@/api/crm";
import { getSubjectAll } from "@/api/question" import { getSubjectAll } from "@/api/question";
import { getWorkScopeAll } from "@/api/examtest" import { getWorkScopeAll } from "@/api/examtest";
import { getCompanyList } from "@/api/crm"; import { getCompanyList } from "@/api/crm";
import { genTree, deepClone } from "@/utils"; import { genTree, deepClone } from "@/utils";
import checkPermission from "@/utils/permission"; import checkPermission from "@/utils/permission";
@ -232,13 +247,13 @@ const defaultConsumer = {
name: "", name: "",
username: "", username: "",
company: null, company: null,
subjects:[], subjects: [],
workscope:null workscope: null
}; };
const listQuery = { const listQuery = {
page: 1, page: 1,
limit: 20, limit: 20,
search:'' search: ""
}; };
export default { export default {
components: { Pagination }, components: { Pagination },
@ -261,7 +276,7 @@ export default {
listQuery: { listQuery: {
page: 1, page: 1,
limit: 20, limit: 20,
search:'' search: ""
}, },
enabledOptions: [ enabledOptions: [
{ key: "true", display_name: "已缴" }, { key: "true", display_name: "已缴" },
@ -271,7 +286,9 @@ export default {
dialogType: "new", dialogType: "new",
rule1: { rule1: {
name: [{ required: true, message: "请输入姓名", trigger: "blur" }], name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
username: [{ required: true, message: "请输入手机号", trigger: "change" }] username: [
{ required: true, message: "请输入手机号", trigger: "change" }
]
// password: [ // password: [
// { required: true, message: "", trigger: "change" } // { required: true, message: "", trigger: "change" }
// ], // ],
@ -280,7 +297,8 @@ export default {
treeLoding: false, treeLoding: false,
companyData: [], companyData: [],
subjectData: [], subjectData: [],
workscopeData:[], workscopeData: [],
selects: []
}; };
}, },
computed: {}, computed: {},
@ -294,27 +312,26 @@ export default {
checkPermission, checkPermission,
handleUploadSuccess(res, file) { handleUploadSuccess(res, file) {
if (res.code == 200) { if (res.code == 200) {
const loading = this.$loading({text:"正在导入中..."}) const loading = this.$loading({ text: "正在导入中..." });
importConsumer(res.data).then(response => { importConsumer(res.data).then(response => {
loading.close() loading.close();
if(response.code==200){ if (response.code == 200) {
this.$message({
message: '导入成功',
type: 'success'
});
this.getList(listQuery)
}else if(response.code==206){
this.$message({ this.$message({
message: '部分未成功' + response.data, message: "导入成功",
type: 'success' type: "success"
}); });
this.getList(listQuery) this.getList(listQuery);
}else{ } else if (response.code == 206) {
this.$message({
message: "部分未成功" + response.data,
type: "success"
});
this.getList(listQuery);
} else {
this.$message.error(response.msg); this.$message.error(response.msg);
} }
});
}); } else {
}else{
this.$message.error("Excel上传失败!"); this.$message.error("Excel上传失败!");
} }
}, },
@ -333,7 +350,14 @@ export default {
getCompanyList() { getCompanyList() {
this.treeLoding = true; this.treeLoding = true;
getCompanyList().then(response => { 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; this.treeLoding = false;
}); });
}, },
@ -351,7 +375,7 @@ export default {
this.listQuery = { this.listQuery = {
page: 1, page: 1,
limit: 20, limit: 20,
search: '' search: ""
}; };
this.getList(); this.getList();
}, },
@ -393,12 +417,39 @@ export default {
console.error(err); 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) { async confirmUser(form) {
this.$refs[form].validate(valid => { this.$refs[form].validate(valid => {
if (valid) { if (valid) {
const isEdit = this.dialogType === "edit"; const isEdit = this.dialogType === "edit";
if (isEdit) { if (isEdit) {
let consumer = this.consumer let consumer = this.consumer;
updateConsumer(this.consumer.id, consumer).then(res => { updateConsumer(this.consumer.id, consumer).then(res => {
// for (let index = 0; index < this.consumerList.length; index++) { // for (let index = 0; index < this.consumerList.length; index++) {
// if (this.consumerList[index].id === this.consumer.id) { // if (this.consumerList[index].id === this.consumer.id) {
@ -410,9 +461,9 @@ export default {
// break; // break;
// } // }
// } // }
this.getList() this.getList();
this.dialogVisible = false; this.dialogVisible = false;
if(res.code >=200){ if (res.code >= 200) {
this.$notify({ this.$notify({
title: "成功", title: "成功",
message: "编辑成功", message: "编辑成功",
@ -420,7 +471,6 @@ export default {
duration: 2000 duration: 2000
}); });
} }
}); });
} else { } else {
createConsumer(this.consumer).then(res => { createConsumer(this.consumer).then(res => {
@ -428,15 +478,14 @@ export default {
// this.consumerList.unshift(this.consumer) // this.consumerList.unshift(this.consumer)
this.getList(); this.getList();
this.dialogVisible = false; this.dialogVisible = false;
if(res.code >=200){ if (res.code >= 200) {
this.$notify({ this.$notify({
title: "成功", title: "成功",
message: "新增成功", message: "新增成功",
type: "success", type: "success",
duration: 2000 duration: 2000
}); });
} }
}); });
} }
} else { } else {
@ -447,19 +496,25 @@ export default {
exportConsumer() { exportConsumer() {
const loading = this.$loading(); const loading = this.$loading();
exportConsumer(this.listQuery).then(response => { exportConsumer(this.listQuery).then(response => {
loading.close() loading.close();
window.open(response.data.path, "_blank"); window.open(response.data.path, "_blank");
}); });
}, },
changeSort (val) { changeSort(val) {
if(val.order == 'ascending'){ if (val.order == "ascending") {
this.listQuery.ordering = val.prop this.listQuery.ordering = val.prop;
}else{ } else {
this.listQuery.ordering = '-' + val.prop 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;
} }
} }
}; };

View File

@ -65,7 +65,7 @@ class CompanyViewSet(ModelViewSet):
{'put': 'company_update'}, {'delete': 'company_delete'}] {'put': 'company_update'}, {'delete': 'company_delete'}]
queryset = Company.objects.filter(is_delete=0).all() queryset = Company.objects.filter(is_delete=0).all()
serializer_class = CompanySerializer serializer_class = CompanySerializer
pagination_class = None #不分页 pagination_class = CommonPagination
filter_backends = [DjangoFilterBackend,SearchFilter, OrderingFilter] filter_backends = [DjangoFilterBackend,SearchFilter, OrderingFilter]
search_fields = ('^name',) search_fields = ('^name',)
ordering_fields = ('id',) 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)}) PaySubject.objects.get_or_create(consumer = instance, subject__id=i, defaults={'consumer':instance,'subject':Questioncat.objects.get(id=i)})
return Response(serializer.data) 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, @action(methods=['get'], detail=False,
url_path='subjectpaid', url_name='subject_paid',perms_map=[{'*':'my_subject'}]) url_path='subjectpaid', url_name='subject_paid',perms_map=[{'*':'my_subject'}])
def has_paid(self, request): def has_paid(self, request):