默认选中状态代码记录

最新推荐文章于 2022-04-26 23:57:12 发布
最新推荐文章于 2022-04-26 23:57:12 发布
阅读量384 收藏
点赞数
文章标签： 自己看
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/silence_sep/article/details/84950756
版权 
<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>
Just丶九月
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
c#实现记住密码代码
01-23
首先应该能有个配置文件，里面设置默认是否记录密码被选中还是不被选中。 2：我若选中了记住密码，那需要能把这个密码记录起来。 3：用户名、密码记录到注册表里，往往会遇到没有写入权限或者被杀毒软件拦截的...
:class的使用及通过:class实现标签切换状态改变
米拉
06-25 4112
做一个点击标签切换的功能，效果如下： JS： 当然也可以酱紫写： JS： 二、点击标签加载相应标签的内容： HTML： CSS： JS： 三、三状态切换： 一般用于可选/不可选/选中三种情况: Css: JS: 四、更多状态结合： HTML： CSS： JS： 附：:class的使用(官方文档) 1、:class="变量名"，一般是直接绑定一个类名2、:class = "{ 类名:布尔值 }"
在编辑页面移动选中的代码
蟑螂恶霸的博客
04-26 357
在日常开发过程中，会遇到需要改变代码位置或调整代码页边距（与其他代码对齐）的情况，与其剪切后粘贴，或者一行一行进行缩进，不如选中需要移动的代码进行整体移动，下面将介绍一个简单改变代码位置的方法。 如图需要将释放资源的代码向右移动，只需要选中代码后，按Shift+ab键即可； 但是如果代码太靠左，想向右边移动，则只需要选中代码直接按Tab键即可： 同样的，向上向下移动，只需要使用Shift+Alt+方向上建/方向下键即可； ...
单选框设置默认选中
热门推荐
是阿超
12-08 3万+
单选框设置默认选中
HTML中关于选择的代码怎么写
wyongess的博客
04-15 2962
http://www.w3school.com.cn/tags/att_input_type.asp 多选： type="checkbox" name="vehicle" value="Bike" /> 单选：  type="radio" name="sex" value="male" />
myeclipse中将整块的代码所选中的代码左右移动的快捷键
Tercel99的专栏
03-18 2万+
myeclipse中将整块的代码/所选中的代码左右移动的快捷键 选择你要移动的代码， TAB 右移 ctrl+TAB左移 要是不使用快捷键就是: 选中代码，点击右键 选中Shift+right右移 选中Shift+left左移 ctrl+shift+F （排版）
让checkbox不选中即将选中的checkbox不选中
12-09
原理：循环每一个type为checkbox的input，若其是选中状态，就将他的checked属性置为false就ok了。 当然，若要实现反选的效果，再加一点就好了。代码如下： $("input[type='checkbox']").each(function(){ if(th
超实用的jQuery代码段
03-04
超实用的jQuery代码段精选近350个jQuery代码段，涵盖页面开发中绝大多数要点、技巧与方法，堪称史上最实用的jQuery代码参考书，可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...
代码语法错误分析工具pclint8.0
06-29
代码静态分析工具PC-LINT安装配置 PC-Lint是C/C++软件代码静态分析工具，你可以把它看作是一种更加严格的编译器。它不仅可以检查出一般的语法错误，还可以检查出那些虽然符合语法要求但不易发现的潜在错误。 ...
电子商务商城网站代码
01-06
普通会员管理 | 添加：(批量删除、批量锁定、发送邮件，批量移动、批量解锁、批量扣除添加奖金,日期 和 状态设置). 单位会员管理 对单个会员的添加和修改. 店铺会员管理 对能开店子会员的查看修改及添加 会员...
idea快捷键 向上 向下查找关键词选中的代码 文本
pankhong blog
04-25 1766
向上查找选中的文本代码：ctrl+shift+k 向下查找选中的文本代码：ctrl+k
设置radio默认选中html代码
hainandao710的专栏
03-29 2449
设置name属性为'hasReplay'的radio组的最后一个元素选中 $("input[name='hasReplay']:radio:last").attr('checked', 'checked');
HTML中的<select>标签如何设置默认选中的选项
weixin_33682790的博客
11-08 517
转自：https://www.cnblogs.com/besty/p/4094951.html 方法有两种。 第一种通过&lt;select&gt;的属性来设置选中项，此方法可以在动态语言如php在后台根据需要控制输出结果。 1 2 3 4 5 &lt; select  id =  "sel" &gt; &lt; option  value = "1" &gt;1&lt;/ optio...
html默认选择代码,html默认代码
weixin_39834281的博客
06-05 379
html元素的部分常用默认样式divspanph1h2h3h4h5h6bistrongemqciteacronymblockquoteinsdelsubsupbigsmalladdressprecodevarbdodfnkbdsamplinklilililidtdddd2captionththtdtdththtdtdththtdtdlegendbuttonoptionoptionlabeltext...
html设置默认选中状态,html select 标签设置默认选中
weixin_32533659的博客
05-30 4664
方法有两种。第一种通过的属性来设置选中项，此方法可以在动态语言如php在后台根据需要控制输出结果。123451option>2option>3option>select>第二种为通过前端js来控制选中的项:由 www.169it.com 搜集整理1234567891011function change(){document.getElementById("...
标签select选择框通过js来选择默认值；代码示例
苏凯的博客
08-30 2924
页面代码： &lt;select data-am-selected id="table-item-capital-source" name="capital_source"&gt; &lt;option value="0"&gt;007&lt;/option&gt; ..
默认单选框代码编写
weixin_44207938的博客
10-26 484
html部分 **html部分** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
VerticalTabLayout不设置默认选中
最新发布
04-26
项怎么处理？ 如果您使用的是 VerticalTabLayout 的第三方库，且该库没有提供默认选中项的设置方式，那么您可以通过以下方式处理： 1. 在 Activity 或 Fragment 中，获取到 VerticalTabLayout，并通过代码设置第一个 Tab 为选中状态。 2. 当用户点击某个 Tab 时，记录该 Tab 的位置，并在后续的操作中使用该位置来判断默认选中项。 3. 在 VerticalTabLayout 中，添加一个方法用于设置默认选中项，该方法会根据之前记录的位置来设置选中项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值