<template>
|
<div class="custom-scroll">
|
<v-header
|
title="群团组织成员"
|
></v-header>
|
<!-- 条件搜索 -->
|
<el-form :inline="true" class="demo-form-inline">
|
<el-form-item label="关键字" >
|
<el-input style="width:300px" size="small" v-model="search.keyWord" placeholder="请输入姓名、联系电话"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-form-item label="所属组织" >
|
<el-select size="small" v-model="search.clusterId" placeholder="请选择">
|
<el-option v-for="item in clusterList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form-item>
|
<el-form-item label="状态">
|
<el-radio-group v-model="search.status" size="medium">
|
<el-radio-button label="">全部</el-radio-button>
|
<el-radio-button label="1">启用</el-radio-button>
|
<el-radio-button label="2">停用</el-radio-button>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" type="primary" @click="onSearch">查询</el-button>
|
<el-button @click="Reset" size="small">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<!-- 操作按钮 -->
|
<div class="operation-btn">
|
<el-button size="small" type="primary" @click="addorg()">新增成员</el-button>
|
<el-button @click="exports" size="small" type="primary" plain >导出</el-button>
|
<el-button @click="dialogVisible = true" size="small" type="primary" plain >导入</el-button>
|
<el-button size="small" @click="dow" >下载模板</el-button>
|
</div>
|
<!-- 表单 -->
|
<div class="tab">
|
<v-tool-table
|
:trs="trs"
|
:tds="tds"
|
>
|
<template v-slot:icon="{scope}">
|
<span class="icon-s">
|
<img @click="onScaleUploadImage(scope.imageUrl)" :src="scope.imageUrl">
|
</span>
|
</template>
|
<template v-slot:status="{scope}">
|
{{scope.status==1?'启用':'停用'}}
|
</template>
|
<template v-slot:btn="{scope}">
|
<div class="table_flex">
|
<span @click="addorg(scope.id)">编辑</span>
|
<span @click="clear(scope.id)">删除</span>
|
</div>
|
</template>
|
</v-tool-table>
|
</div>
|
<!-- 分页 -->
|
<div class="page">
|
<el-pagination
|
:current-page="paginationParams.currentPage"
|
:page-size="paginationParams.pageSize"
|
:page-sizes="[5, 10, 20, 50, 100]"
|
background
|
layout="total,prev,pager,next,sizes,jumper"
|
:total="paginationParams.total"
|
@size-change="onPageSizeChange"
|
@current-change="onPaginationChange">
|
</el-pagination>
|
</div>
|
<!---->
|
<el-dialog
|
title="提示"
|
:modal="false"
|
:close-on-click-modal="false"
|
:visible.sync="dialogVisible"
|
width="30%"
|
>
|
<div >
|
<el-upload
|
name="file"
|
v-loading="loading"
|
accept=".xls, .xlsx"
|
:headers={Authorization:Authorization}
|
class="upload-demo"
|
:show-file-list="false"
|
:action="$js.api.http+'cluster/member/import'"
|
:on-success="success"
|
:on-error="error"
|
:before-upload="beforeUpload"
|
multiple
|
>
|
<el-button
|
type="primary"
|
plain
|
class="m_btn bgc_primary"
|
>选择文件
|
</el-button>
|
</el-upload>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-link @click="downloadError" v-if="errUrl" type="danger">下载错误表格</el-link>
|
<el-button size="small" @click="dialogVisible = false">取 消</el-button>
|
<el-button size="small" type="primary" @click="confirm()">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
|
export default {
|
props: [],
|
components: {},
|
data() {
|
return {
|
loading:false,
|
errUrl:'',//错误url
|
Authorization: "",
|
dialogVisible: false,
|
clusterList:[],//所属组织
|
search: {
|
keyWord:'',
|
status:'',
|
clusterId:''
|
},
|
trs: [
|
{ text: "序号", val: "index" },
|
{ text: "姓名", val: "name" },
|
{ text: "照片", val: "btn",slot:"icon" },
|
{ text: "所属组织", val: "clusterName"},
|
{ text: "职务", val: "job"},
|
{ text: "联系电话", val: "phone" },
|
{ text: "状态", val: "btn",slot:"status" },
|
{ text: "操作", val: "btn" ,slot:"btn"},
|
],
|
tds: [],
|
/** 分页参数 */
|
paginationParams: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
};
|
},
|
|
|
mounted() {
|
this.Authorization = "Bearer " + demo.$session.get("token") || "";
|
this.init();
|
this.setClusterList()
|
},
|
|
methods: {
|
onScaleUploadImage(d) {
|
this.$store.dispatch("setImage", {
|
time: Date.now(),
|
pic: d,
|
tool: true,
|
});
|
},
|
|
handleClose(){
|
this.dialogVisible = false
|
},
|
confirm(){
|
//点击确认
|
this.dialogVisible = false
|
},
|
dow(){
|
//下载模板
|
this.$api.get('cluster/member/import/download','',e=>{
|
location.href = e
|
})
|
},
|
exports(){
|
//导出
|
let params = Object.assign(this.search,{
|
pageNum: this.paginationParams.currentPage,
|
pageSize: this.paginationParams.pageSize,
|
})
|
this.$api.post('cluster/member/export',params,res=>{
|
location.href = res
|
})
|
},
|
clear(id){
|
//删除
|
this.$confirm('此操作将永久删除该组织, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$api.get('cluster/member/delete?id='+id,'',e=>{
|
this.init()
|
})
|
})
|
|
},
|
downloadError(){
|
//下载错误信息
|
this.$api.post('cluster/member/download/error?key='+this.errUrl,'',e=>{
|
location.href = e
|
})
|
},
|
success(res){
|
if(res.code!==200){
|
this.errUrl = res.msg;
|
} else {
|
demo.toast("导入成功");
|
this.init()
|
}
|
this.loading =false;
|
},
|
error(err){
|
this.loading =false
|
demo.toast("导入失败！请检查内容是否正确");
|
},
|
beforeUpload(){
|
this.errUrl = '';
|
this.loading =true
|
},
|
addorg(id){
|
//新增 编辑
|
let o = {path:'/act_addOrg1'}
|
if(id){//编辑
|
o.query = {id:id}
|
}
|
this.$router.push(o)
|
},
|
setClusterList(){
|
this.$api.get('cluster/list','',res=>{
|
// console.log(res)
|
this.clusterList = res||[]
|
})
|
},
|
/** pageSize 改变时会触发 */
|
onPageSizeChange (pageSize) {
|
this.paginationParams.pageSize = pageSize;
|
this.init();
|
},
|
|
/** 分页 */
|
onPaginationChange (page) {
|
this.paginationParams.currentPage = page;
|
this.init();
|
},
|
|
//条件搜索
|
onSearch(v) {
|
this.paginationParams.currentPage = 1;
|
this.init();
|
},
|
|
/**搜索条件重置 */
|
Reset() {
|
this.search.keyWord = ''
|
this.search.status = ''
|
this.search.clusterId = ''
|
this.paginationParams.currentPage = 1
|
this.init()
|
},
|
|
/**
|
* 初始化数据获取
|
*/
|
init() {
|
let params = Object.assign(this.search,{
|
pageNum: this.paginationParams.currentPage,
|
pageSize: this.paginationParams.pageSize,
|
})
|
|
this.$api.post("cluster/member/page", params, (e) => {
|
this.paginationParams.total = e.total;
|
e.records.map((item,index) => {
|
item.index = (this.paginationParams.currentPage-1) * this.paginationParams.pageSize + index + 1
|
})
|
this.tds = (e.records || []).map((v) => {
|
this.$set(v, 'che', false)
|
return v;
|
});
|
|
});
|
},
|
},
|
|
};
|
</script>
|
|
<style scoped lang="less">
|
.custom-scroll {
|
overflow: scroll;
|
.icon-s {
|
display: inline-block;
|
width: 50px;
|
height: 40px;
|
overflow: hidden;
|
img {
|
width: 100%;
|
object-fit: cover;
|
}
|
}
|
}
|
.operation-btn {
|
margin-bottom: 10px;
|
}
|
|
.page {
|
text-align: center;
|
padding: 20px 0;
|
}
|
|
|
</style>
|
