realty/virgo.wzfrontend/console/src/views/work/operation/meeting/set.vue

<template>
	<div class="meeting-set">
		<div class="meeting-item hui-flex hui-content">
			<div class="hui-content-title">
				<div class="hui-title-item active">会议场所</div>
			</div>
			<div class="hui-flex-box">
				<div class="tag">
					<div class="target-item" v-for="item in placeList" :key="item.id">
						<span class="label">{{item.name}}</span>
						<i class="iconfont huifont-bianji" @click.stop="updateFunc(1,item)"></i>
						<i class="iconfont huifont-guanbi" @click.stop="deleteFunc(1,item)"></i>
					</div>
					<div class="target-item target-item-insert" @click="insertFunc(1)">
						<i class="iconfont huifont-xinzeng"></i>
						<span class="label">新增场所</span>
					</div>
				</div>
			</div>
		</div>
		<div class="meeting-line"></div>
		<div class="meeting-item hui-flex hui-content">
			<div class="hui-content-title">
				<div class="hui-title-item active">会议类型</div>
			</div>
			<div class="hui-flex-box">
				<div class="tag">
					<div class="target-item" v-for="item in typeList" :key="item.id">
						<span class="label">{{item.name}}</span>
						<i class="iconfont huifont-bianji" @click.stop="updateFunc(2,item)"></i>
						<i class="iconfont huifont-guanbi" @click.stop="deleteFunc(2,item)"></i>
					</div>
					<div class="target-item target-item-insert" @click="insertFunc(2)">
						<i class="iconfont huifont-xinzeng"></i>
						<span class="label">新增类型</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				placeList: [],
				typeList: [],
				index: 1
			}
		},
		methods: {
			insertFunc(type) {
				let msg = type === 1 ? '场所名称' : '类型名称';
				this.$prompt(`请输入${msg}`, '有极', {
					confirmButtonText: '确 定',
					cancelButtonClass: 'cancel',
					confirmButtonClass: 'confirm',
					cancelButtonText: '取 消',
					inputPattern: /\S/,
					inputErrorMessage: `请输入${msg}`
				}).then(({
					value
				}) => {
					let item = {
						id: this.index,
						name: value
					}
					if (type === 1) {
						this.placeList.push(item);
					} else {
						this.typeList.push(item);
					}
					this.index++;
					this.$message.success('操作成功');
				}).catch(() => {});
			},
			updateFunc(type, item) {
				let msg = type === 1 ? '场所名称' : '类型名称';
				this.$prompt(`请输入${msg}`, '有极', {
					confirmButtonText: '确 定',
					cancelButtonClass: 'cancel',
					confirmButtonClass: 'confirm',
					cancelButtonText: '取 消',
					inputPattern: /\S/,
					inputErrorMessage: `请输入${msg}`,
					inputValue: item.name
				}).then(({
					value
				}) => {
					item.name = value;
					this.$message.success('操作成功');
				}).catch(() => {});
			},
			deleteFunc(type, item) {
				let msg = type === 1 ? '场所名称' : '类型名称';
				this.$confirm(`确定要删除该${msg}?`, () => {
					if (type === 1) {
						let index = this.placeList.findIndex(node => node.id === item.id);
						this.placeList.splice(index, 1);
					} else {
						let index = this.typeList.findIndex(node => node.id === item.id);
						this.typeList.splice(index, 1);
					}
					this.$message.success('操作成功');
				});
			}
		},
	}
</script>

<style lang="scss">
	.meeting-set {
		width: 100%;
		height: 100%;
		display: flex;

		.meeting-item {
			flex: 1;
			height: 100%;
		}

		.hui-flex-box {
			padding: 10px;
		}

		.meeting-line {
			width: 15px;
			height: 100%;
			background: $--background;
		}

		.tag {
			display: flex;
			flex-wrap: wrap;

			.target-item {
				display: flex;
				height: 28px;
				align-items: center;
				margin: 5px 0;
				margin-right: 15px;
				background: #46577a;
				border-radius: 15px;
				padding: 0 15px;

				.label {
					font-size: 12px;
				}

				.iconfont {
					margin-left: 10px;
					font-size: 12px;
					cursor: pointer;
				}

				.huifont-bianji {
					font-size: 18px;
				}
			}

			.target-item-insert {
				cursor: pointer;
				background: transparent;
				border: 1px solid #7383ad;

				.iconfont {
					margin-left: 0;
					margin-right: 10px;
				}
			}

			.target-item-insert:hover {
				border-color: $--color-primary;
				color: $--color-primary;
			}
		}
	}
</style>