|
|
@@ -0,0 +1,208 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="flex-align-center flex-between" style="margin-bottom:10px">
|
|
|
+ <el-input style="width:200px;" placeholder="搜索" :suffix-icon="param.content.where.condition?param.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="param.content.where.condition" @keyup.native.enter="listData(param.content.pageNumber = 1)" @clear="listData(param.content.pageNumber = 1)" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
|
|
|
+ </el-input>
|
|
|
+ <addTemp @onSuccess="onSuccess" v-if="tool.checkAuth($route.name,'addMiddleman')"></addTemp>
|
|
|
+ </div>
|
|
|
+ <div class="flex-align-stretch menber__panel">
|
|
|
+ <div class="flex-align-center menber__item flex-between" :class="showSelelctIcon(item)?'active_menber__item':''" style="flex:1 0 auto" v-for="item in tableData" :key="item.index" @click="clickMenber(item)">
|
|
|
+ <div class="flex-align-center">
|
|
|
+ <div class="avatar inline-16">
|
|
|
+ <img class="avatar__image" v-if="item.headpic" :src="item.headpic" alt="">
|
|
|
+ <p v-else>{{item.enterprisename}}</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>{{ item.enterprisename }}</p>
|
|
|
+ <small style="color:#999999ad;margin-top:10px">地址:{{ item.address?item.address:"暂无" }} 联系电话:{{ item.phonenumber?item.phonenumber:"暂无" }}</small>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <i class="el-icon-check iconCheck" v-if="showSelelctIcon(item)"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-empty v-if="tableData.length === 0" description="暂无数据" :image-size="40"></el-empty>
|
|
|
+ <el-button size="mini" type="text" style="margin-top:16px;float:right" @click="onCancel">取 消</el-button>
|
|
|
+ <!-- <el-button size="mini" type="primary" style="margin-top:16px;float:right;margin-right:10px" @click="onSelect">确 定</el-button>-->
|
|
|
+ <div style="margin-top:16px;text-align:left">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ small
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-size="param.content.pageSize"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import addTemp from '@/Form/marketing2/agent/add'
|
|
|
+export default {
|
|
|
+ name: "selectAgentNew",
|
|
|
+ props:['param','radio','checked','type','typemx','sa_projectid'],
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ search:'',
|
|
|
+ tableData: [],
|
|
|
+ total:0,
|
|
|
+ currentPage:0,
|
|
|
+ selected:[],
|
|
|
+ flag:false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ addTemp
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ async listData () {
|
|
|
+
|
|
|
+ /* if(!this.type) this.param.content.where.type = ''*/
|
|
|
+
|
|
|
+ if (!this.flag){
|
|
|
+ this.param.content.where.type = this.type
|
|
|
+ }
|
|
|
+
|
|
|
+ this.param.content.where.typemx = this.typemx
|
|
|
+ this.param.content.where.condition = this.search
|
|
|
+ this.param.content.where.sa_projectid = this.sa_projectid || ''
|
|
|
+
|
|
|
+ const res = await this.$api.requested(this.param)
|
|
|
+ this.tableData = res.data
|
|
|
+ this.total = res.total
|
|
|
+ this.currentPage = res.pageNumber
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ // console.log(`每页 ${val} 条`);
|
|
|
+ this.param.content.pageSize = val
|
|
|
+ this.listData()
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ // console.log(`当前页: ${val}`);
|
|
|
+ this.param.content.pageNumber = val
|
|
|
+ this.listData()
|
|
|
+ },
|
|
|
+ clickMenber (item) {
|
|
|
+ if (this.radio) {
|
|
|
+ this.selected = []
|
|
|
+ }
|
|
|
+ let _isSame = this.selected.some(m=>item.sys_enterpriseid === m.sys_enterpriseid)
|
|
|
+ if (!_isSame) {
|
|
|
+ this.selected.push(item)
|
|
|
+ } else {
|
|
|
+ this.selected = this.selected.filter(e=>{
|
|
|
+ return e.sys_enterpriseid !== item.sys_enterpriseid
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.onSelect()
|
|
|
+ },
|
|
|
+ showSelelctIcon (item) {
|
|
|
+ let _isSame = this.selected.some(m=>item.sys_enterpriseid === m.sys_enterpriseid)
|
|
|
+ return _isSame
|
|
|
+ },
|
|
|
+ onSelect () {
|
|
|
+ this.$emit('onSelect',this.selected)
|
|
|
+ },
|
|
|
+ closeTag (item) {
|
|
|
+ this.selected = this.selected.filter(e=>{
|
|
|
+ return e.sys_enterpriseid !== item.sys_enterpriseid
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onCancel () {
|
|
|
+ this.$emit('onCancel')
|
|
|
+ },
|
|
|
+ onSuccess(data) {
|
|
|
+ this.clickMenber(data)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.listData()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.search_input{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 8px 8px 0 8px;
|
|
|
+ border: 1px solid #f1f2f3;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+.input_panel{
|
|
|
+ flex: 1;
|
|
|
+ min-width: 100px;
|
|
|
+ border:none;
|
|
|
+ outline: none;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ color:#666
|
|
|
+}
|
|
|
+.menber__item{
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ padding:5px 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ color:#666;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ transition: .2s linear;
|
|
|
+}
|
|
|
+.menber__item:hover{
|
|
|
+ background: #b5e4ff6e;
|
|
|
+}
|
|
|
+.active_menber__item{
|
|
|
+ background: #b5e4ff6e;
|
|
|
+}
|
|
|
+.menber__panel {
|
|
|
+ max-height: 300px;
|
|
|
+ overflow-y:scroll ;
|
|
|
+}
|
|
|
+.avatar{
|
|
|
+ position: relative;
|
|
|
+ height:30px;
|
|
|
+ width: 30px;
|
|
|
+ border-radius: 100%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ color:#fff;
|
|
|
+ font-weight: 500;
|
|
|
+ background: #3874F6;
|
|
|
+ cursor: pointer;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.avatar__image{
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.avatar-mini{
|
|
|
+ position: relative;
|
|
|
+ height:20px;
|
|
|
+ width: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 5px;
|
|
|
+ color:#fff;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ border-radius: 100%;
|
|
|
+ background: #3874F6;
|
|
|
+}
|
|
|
+.iconCheck{
|
|
|
+ font-weight: bold;
|
|
|
+ color:#3874F6
|
|
|
+}
|
|
|
+.tag{
|
|
|
+ font-size: 12px;
|
|
|
+ color:#666;
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin:0 5px 8px 0;
|
|
|
+ background: #b5e4ff6e;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
qymljy