<template>
<!--弹窗-->
<div class="create_info">
<el-dialog :visible.sync="isshow" title="详细信息" width="96%" top="10px" class="order-detail create_info">
<div>
<!--选择人列表筛选-->
<div class="filter-container" style="margin-top: 10px;">
<span>姓名:</span>
<el-input clearable v-model="searchList.conditions.customerName" style="width:120px;margin-right: 10px;" size="small"></el-input>
<span>拼音:</span>
<el-input clearable v-model="searchList.conditions.pyFull" style="width:120px;margin-right: 10px;" size="small"></el-input>
<span>证件号码:</span>
<el-input clearable v-model="searchList.conditions.certificateNo" style="width:120px;margin-right: 10px;" size="small"></el-input>
<span>组织机构:</span>
<el-input clearable v-model="searchList.conditions.customerOrg" style="width:120px;margin-right: 10px;" size="small"></el-input>
</div>
<!--按钮-->
<div style="margin-top: 10px;">
<el-button plain type="primary" size="small" icon="el-icon-search" @click="searchFilter(1)">搜索</el-button>
<el-button plain type="primary" size="small" icon="el-icon-refresh" @click="reset">重置</el-button>
</div>
<!--选择人列表-->
<div style="margin-top: 10px;" class="order-desc">
<el-table ref="multipleTable" v-loading="listLoading" @row-click="clickRow" :key="tableKey" :data="userList" @select="selectCheck" border fit highlight-current-row style="width: 100%;cursor: pointer;" @selection-change="handleCustomSelectionChange" @current-change="handleCurrentrow">
<el-table-column label="" align="center" width="40" type="selection">
</el-table-column>
<el-table-column label="序号" align="center" width="40" fixed>
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="登录账号" align="center" width="120">
<template slot-scope="scope">
<span>{{ scope.row.username }}</span>
</template>
</el-table-column>
<el-table-column label="姓名" align="center" width="120">
<template slot-scope="scope">
<span>{{ scope.row.realname }}</span>
</template>
</el-table-column>
<el-table-column label="拼音" align="center" width="120">
<template slot-scope="scope">
<span>{{ scope.row.pyFull }}</span>
</template>
</el-table-column>
<el-table-column label="电话" align="center" width="120">
<template slot-scope="scope">
<span>{{ scope.row.mobilePhone }}</span>
</template>
</el-table-column>
<el-table-column label="证件类型" align="center" width="100">
<template slot-scope="scope">
{{ getEnumValue(certificateType, scope.row.certificateType) }}
</template>
</el-table-column>
<el-table-column label="证件号码" align="center" width="160">
<template slot-scope="scope">
{{ scope.row.certificateNo }}
</template>
</el-table-column>
<el-table-column label="组织机构" align="center" width="">
<template slot-scope="scope">
{{ scope.row.orgnName }}
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination :current-page="searchList.page" :page-sizes="[10,20,30, 50]" :page-size="searchList.rows" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</div>
<!--按钮以及筛选条件-->
<div>
<el-button type="primary" icon="el-icon-plus" size="small" style="" @click="innerVisible = true">添加客户</el-button>
<el-button type="primary" icon="el-icon-minus" size="small" style="margin-left: 10px;margin-right: 30px;" @click="deleteAllUserInfo">删除客户</el-button>
国内国际:
<el-select v-model="defaultAirType" clearable placeholder="请选择" style="width:120px; margin-right: 30px;margin-top: 10px;" size="small">
<el-option v-for="item in airType" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-input clearable v-model="airportCompany" placeholder="航空公司" style="width:120px;margin-right: 10px;" size="small"></el-input>
<el-button type="primary" size="small" @click="copyCommand">复制指令</el-button>
</div>
<!--选中的人的列表-->
<div style="margin-top: 10px;" class="order-desc">
<el-table ref="customMultipleTable" v-loading="listLoading" @row-click="clickRow" :key="tableKey" :data="selectCustomList" @select="selectCheck" border fit highlight-current-row style="width: 100%;cursor: pointer;" @selection-change="handleCustomSelectionChange" @current-change="handleCurrentrow">
<el-table-column label="" align="center" width="40" type="selection">
</el-table-column>
<el-table-column label="序号" align="center" width="40" fixed>
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="姓名" align="center" width="">
<template slot-scope="scope">
<span>{{ scope.row.customerName }}</span>
</template>
</el-table-column>
<el-table-column label="证件类型" align="center" width="">
<template slot-scope="scope">
{{ getEnumValue(certificateType, scope.row.certificateType) }}
</template>
</el-table-column>
<el-table-column label="证件号码" align="center" width="">
<template slot-scope="scope">
<el-select v-model="scope.row.certificateNo" clearable size="small" @change="certificateNoChange">
<el-option v-for="item in scope.row.certificateNoEnum" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</template>
</el-table-column>
<el-table-column label="出生日期" align="center" width="">
<template slot-scope="scope">
{{ scope.row.birthday }}
</template>
</el-table-column>
<el-table-column label="电话" align="center" width="">
<template slot-scope="scope">
{{ scope.row.customerPhone }}
</template>
</el-table-column>
<el-table-column label="组织" align="center" width="">
<template slot-scope="scope">
{{ scope.row.customerOrg }}
</template>
</el-table-column>
</el-table>
</div>
<!--短信内容区域-->
<div style="margin-top: 10px;">
<el-input type="textarea" :rows="4" placeholder="指令内容" v-model="smstextarea">
</el-input>
</div>
</div>
<!--发送人选择-->
<div>
<el-dialog width="60%" title="发送人选择" :visible.sync="innerVisible" append-to-body class="innerDialog">
<div style="margin-top: 10px;">
<userComponents v-on:closeUserInfo="getUserInfo"></userComponents>
</div>
</el-dialog>
</div>
<!--底部按钮-->
<div slot="footer" class="dialog-footer">
<el-button @click="isshow = false">取 消</el-button>
<el-button type="primary" @click="getCommand()">获取指令</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import userComponents from '@/components/user/index.vue'
import { airType, certificateType } from '@/components/order/parts/enum'
import { getEnumValue } from '@/utils/index'
import { getTicketInstruction, getQueryUserInfo, getUserList } from '@/api/table'
export default {
components: {
userComponents,
},
data() {
return {
isshow:true,
defaultAirType: 1,
airType,
airportCompany: '',
getEnumValue,
certificateType,
listLoading: false,
innerVisible: false,
tableKey: 0,
total: null,
selectCustomList: [],
certificateList: [],
customList: [],
userList: [],
smstextarea: '',
currentRow: null,
smsTemplateRow: null,
multipleSelection: [],
customMultipleSelection: [],
isCheckList: [],
initCheckMap: {
id: '',
isCheck: true,
},
searchList: {
page: 1,
rows: 20,
conditions: {
customerName: '',
pyFull: '',
certificateNo: '',
customerOrg: ''
}
},
}
},
methods: {
fetchData() {
this.selectCustomList = [];
this.listLoading = true
getUserList(this.searchList).then(response => {
this.listLoading = false
this.userList = response.data.rows
this.total = response.data.total
})
},
searchFilter() {
},
reset() {
},
// 每页数量变化的回调
handleSizeChange(val) {
this.searchList.rows = val
this.fetchData()
},
// page发生变化的回调
handleCurrentChange(val) {
this.searchList.page = val
this.fetchData()
},
//删除发送人
deleteAllUserInfo() {
console.log(this.customMultipleSelection)
if(this.customMultipleSelection.length) {
for(var i = this.selectCustomList.length - 1; i >= 0; i--) {
for(var j = 0; j < this.customMultipleSelection.length; j++) {
if(this.selectCustomList[i].customerId == this.customMultipleSelection[j].customerId) {
this.selectCustomList.splice(i, 1);
break;
}
}
}
}
},
handleCustomSelectionChange(val) {
this.customMultipleSelection = val;
},
handleCurrentrow(val) {
this.currentRow = val;
},
getCommand() {
var id = '';
var cardNumber = '';
if(this.customMultipleSelection.length) {
for(var i = 0; i < this.customMultipleSelection.length; i++) {
id += this.customMultipleSelection[i].customerId + ",";
cardNumber += this.customMultipleSelection[i].certificateType + "&" + this.customMultipleSelection[i].certificateNo + ",";
}
if(!this.airportCompany) {
this.$message({
message: "请先输入航空公司",
type: 'warning'
})
return;
}
var param = {
id: id,
aircompany: this.airportCompany,
type: this.defaultAirType,
cardNumber: cardNumber
}
getTicketInstruction(param).then(response => {
if(response.data.instruct) {
this.smstextarea = response.data.instruct;
if(response.data.hint) {
this.$message({
message: response.data.hint,
type: 'warning'
})
}
} else {
this.$alert(response.data.meta.message, '操作失败', {
confirmButtonText: '确定'
})
}
})
} else {
this.$message({
message: "请先选中一条",
type: 'warning'
})
}
},
getUserInfo(data) {
this.innerVisible = !this.innerVisible;
this.customList = data;
var userId = ''
for(var i = 0; i < data.length; i++) {
userId += data[i].id + ','
}
var _userIds = {
userIds: userId
}
let tempArr = []
// this.selectCustomList = []
getQueryUserInfo(_userIds).then(response => {
tempArr = JSON.parse(JSON.stringify(response.data.userInfoList))
console.log("tempArr", tempArr)
const certificateList = response.data.certificateList;
if(!response.data.certificateList.length) {
this.$message({
message: "该用户没有证件信息,请先到用户管理页面维护",
type: 'warning'
})
return
}
this.certificateList = certificateList
for(var i = 0; i < tempArr.length; i++) {
tempArr[i].certificateNoEnum = []
let tempObj = null
certificateList.forEach(n => {
if(tempArr[i].customerId == n.customerId) {
tempArr[i].certificateNoEnum.push({
value: n.certificateNo,
label: n.certificateNo
})
}
})
certificateList.forEach(n => {
if(tempArr[i].customerId == n.customerId && n.isDefault == 1) {
tempObj = n
}
})
if(!tempObj) {
tempObj = _.find(certificateList, function(o) {
return o.customerId == tempArr[i].customerId
})
}
tempArr[i].certificateNo = tempObj.certificateNo
tempArr[i].certificateType = tempObj.certificateType
tempArr[i].certificateExpiryDate = tempObj.certificateExpiryDate
//默认选中
tempArr[i].isCheck = true;
}
console.log('form', tempArr)
//如果选择人列表没有值,直接push
if(!this.selectCustomList.length) {
tempArr.forEach(n => {
this.selectCustomList.push(n)
})
} else { //否则,只向里面push没有的值
var nCount = this.selectCustomList.length;
var mCount = tempArr.length;
tempArr.forEach(m => {
var count = 0;
this.selectCustomList.forEach(n => {
if(m.customerId != n.customerId) {
count++;
}
})
if(count == nCount) {
this.selectCustomList.push(m);
}
})
}
console.log(this.selectCustomList)
this.selectCustomList.forEach(row => {
console.log("row.isCheck == ", row.isCheck)
if(row.isCheck) { //如果选中了,则选中
this.$refs.customMultipleTable.toggleRowSelection(row, true)
} else { //没有选中,就不选中
this.$refs.customMultipleTable.toggleRowSelection(row, false)
}
})
})
},
// 身份证更改同步更新身份证类型
certificateNoChange(val) {
const objTemp = _.find(this.certificateList, function(o) {
return o.certificateNo == val
})
this.selectCustomList.forEach(n => {
if(n.customerId === objTemp.customerId) {
n.certificateType = objTemp.certificateType
n.certificateExpiryDate = objTemp.certificateExpiryDate
}
})
},
clickRow(row) {
this.setCheck(row);
this.$refs.customMultipleTable.toggleRowSelection(row);
},
setCheck(row) {
//选择人列表,根据当前行选中状态,改变选择人列表的状态
this.selectCustomList.forEach(n => {
if(n.customerId == row.customerId) {
//定义一个类似map的数组,记录每一条的id以及选中状态
this.initCheckMap.id = n.customerId;
this.initCheckMap.isCheck = !this.initCheckMap.isCheck
if(!this.isCheckList.length) {
this.isCheckList.push(this.initCheckMap);
} else {
this.isCheckList.forEach(m => {
//根据map的id,更改当前行的选中状态
if(m.id == n.customerId) {
m.isCheck = this.initCheckMap.isCheck
} else {
this.isCheckList.push(this.initCheckMap);
}
})
}
this.isCheckList.forEach(m => {
if(m.id == n.customerId) {
n.isCheck = m.isCheck
}
})
} else {
}
})
},
copyCommand() {
this.$copyText(this.smstextarea).then(response => {
this.$message({
message: "复制成功",
type: 'success'
})
}, function(e) {
alert("该浏览器不支持,请手动复制")
})
},
selectCheck(selection, row) {
this.setCheck(row);
}
}
}
</script>
默认选中状态代码记录
猜你喜欢
转载自blog.csdn.net/Silence_Sep/article/details/84950756
今日推荐
周排行