第一篇文章，51cto博客，将记录日常工作笔记，代码片段，bug，经验，今天整理个常用组件。
先来效果图
选择器，选择业务员
<el-form-item label="业务员" prop="user_id">
<el-input v-model="dataForm.user_name" placeholder="选择业务员" :readonly="true">
<i class="el-icon-close el-input__icon" slot="suffix" @click="clearUser"
:style="{ visibility: dataForm.user_name ? 'visible' : 'hidden' }"></i>
<el-button slot="append" @click="chooseUser()" icon="el-icon-search" size="mini"></el-button>
</el-input>
</el-form-item>下面是组件引入
<choose-user v-if="chooseVisible" :showCheckbox="true" ref="userRef" @check-change="userChange" :param="{company_id:dataForm.company_id}"></choose-user>import ChooseUser from '@/components/choose-dialog/choose-user';components: { ChooseUser },选择点击事件，触发组件
chooseUser() {
this.chooseVisible = true;
this.$nextTick(() => {
this.$refs.userRef.init();
})
},选中用户
userChange(users) {
console.log(users)
this.dataForm.user_name = users.map(i => i.ch_name).join(',');
this.dataForm.user_id = users.map(i => i.id).join(',');
this.$forceUpdate()
},清除用户
clearUser() {
this.dataForm.user_name = '';
this.dataForm.user_id = '';
},组件页面
<template>
<el-dialog v-dialogDrag width="1000px" :close-on-click-modal="false" :visible.sync="visible" :title="title" append-to-body @close="dialogClosed">
<el-form :inline="true" @keyup.enter.native="pageIndex=1;getDataList()" :model="dataForm" ref="dataForm">
<el-form-item v-if="company" label="公司" prop="company_id">
<tree-select :options="companyList" v-model="dataForm.company_id" :width="450"></tree-select>
</el-form-item>
<el-form-item label="姓名" prop="query">
<el-input v-model="dataForm.query" placeholder="用户姓名" clearable style="width:130px;"></el-input>
</el-form-item>
<el-form-item label="角色" prop="role_name">
<el-input v-model="dataForm.role_name" placeholder="角色" clearable style="width:130px;"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="pageIndex=1;getDataList()" class="search_user">查询</el-button>
</el-form-item>
</el-form>
<el-table :data="dataList" @row-click="rowClick" border stripe :height="397" v-loading="dataListLoading"
@selection-change="selectionChangeHandle" style="margin-bottom: 10px;">
<el-table-column prop="user_code" header-align="center" width="100" label="用户编号" show-overflow-tooltip></el-table-column>
<el-table-column prop="ch_name" header-align="center" min-width="120" label="用户姓名" show-overflow-tooltip>
<template slot-scope="scope">
<div :style="{color:scope.row.isChecked?'#1989fa':''}">{{scope.row.ch_name}}</div>
</template>
</el-table-column>
<el-table-column prop="roleNames" header-align="center" min-width="120" label="角色" show-overflow-tooltip></el-table-column>
<el-table-column prop="mobile" header-align="center" width="120" label="手机号"></el-table-column>
<el-table-column prop="company_name" header-align="center" min-width="120" label="所属公司" show-overflow-tooltip></el-table-column>
</el-table>
<el-pagination background @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
:page-sizes="[8, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<span slot="footer" class="dialog-footer" v-if="showCheckbox">
<div class="tag-box text-left">
<el-tag v-if="dataListSelections.length>0" v-for="(tag,i) in dataListSelections" :key="tag.id" closable style="margin: 0 8px 5px 0;" @close="uncheck(tag,i)">{{tag.ch_name}}</el-tag>
</div>
<el-button type="primary" @click="dataFormSubmit()">确认选择</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
title:{
type:String,
default:"选择用户"
},
company:{
type:Boolean,
default:false
},
showCheckbox:{
type:Boolean,
default:true
},
param:{
type:Object,
default:function(){
return {}
}
},
url:{
type:String,
default:"/sys/user/list"
},
dataHandle:{
type:Function,
default:function(list){
return list
}
},
autoClose:{
type:Boolean,
default:true
},
},
data() {
return {
visible: false,
companyList:this.$store.state.company.listTree,
dataForm:{
company_id:'',
query:'',
role_name:''
},
dataList: [],
pageIndex: 1,
pageSize: 8,
totalCount: 0,
dataListLoading: false,
dataListSelections: [],
};
},
methods: {
init(selected){
debugger
console.log("selected", selected)
this.dataList = [];
this.pageIndex = 1;
this.visible=true;
this.dataListSelections=selected||[];
this.getDataList();
},
getDataList() {
if(this.company&&!this.dataForm.company_id){
return
}
this.dataListLoading=true
this.$http({
url: this.$http.adornUrl(this.url),
method: "post",
data: this.$http.adornData({
page: this.pageIndex,
limit: this.pageSize,
...this.dataForm,
ch_name:this.dataForm.query,
...this.param
})
}).then(({ data }) => {
console.log("getDataList",data);
this.dataListLoading=false
if (data && data.code === 0) {
this.dataList = this.dataHandle(data.page.list,this.pageIndex).map(n=>{
// n.isChecked=this.dataListSelections.filter(m=>{ return m.id==n.id }).length>0;
n.isChecked = this.dataListSelections.some(item => {return item.id == n.id})
return n;
});
console.log("this.dataList", this.dataList)
this.totalCount = data.page.totalCount;
} else {
this.dataList = [];
this.totalCount =0;
}
});
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val;
this.pageIndex = 1;
this.getDataList();
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val;
this.getDataList(true);
},
// 多选
selectionChangeHandle(val) {
this.dataListSelections = val;
},
getIndex(row,arr){
let i=0;
for(var j=0;j<arr.length;j++){
if(row.id==arr[j].id){
i=j;
break;
}
}
return i;
},
uncheck(row,i){
this.dataListSelections.splice(i,1);
this.dataList.forEach((n,ni)=>{
if(n.id==row.id){
n.isChecked=false;
this.$set(this.dataList,ni,n);
}
})
},
rowClick(row) {
if(!this.showCheckbox){
this.$emit('current-change',Object.assign({},row));
if(this.autoClose)
this.visible=false;
}else{
row.isChecked=!row.isChecked;
this.$set(this.dataList,this.getIndex(row,this.dataList),row);
if(row.isChecked){
if(this.dataListSelections.filter(n=>{ return n.id==row.id }).length==0){
this.dataListSelections.push(Object.assign({},row));
}
}else{
this.dataListSelections.splice(this.getIndex(row,this.dataListSelections),1);
}
}
},
dataFormSubmit(){
this.$emit('check-change',new Array().concat(this.dataListSelections));
this.visible=false;
},
dialogClosed(){
this.dataList=[];
this.pageIndex=1;
this.$refs.dataForm.resetFields();
}
}
};
</script>
后续整理更多........
