jtBaseApp/src/components/jt-dialog/dialogEditProperty.vue

<template>
	<div class="jt-wall-dialog">
		<el-dialog
			draggable
			:modal="false"
			:destroy-on-close="false"
			v-model="dialogVisible"
			:title="title"
			:style="{ left: '120px', background: 'rgb(0 44 126 / 68%)', height: '400px', width: '180px', top: '100px' }"
			@close="closeDialog"
			@open="openDialog"
		>
			<template #header>
				<div slot="title" class="header-title">
					<span style="line-height:24px;font-size:18px;color:#fff;font-family: 'Alimama_ShuHeiTi_Bold'">{{ title }}</span>
				</div>
			</template>

			<template #default>
				<div class="odin-dialog__content">
					<div class="jt-wall-row" v-show="isShowHeight">
						<div class="col-left">高度</div>
						<div class="col-main"><el-input v-model="wallHeight" placeholder="输入高度值" clearable /></div>
					</div>
					<div class="jt-wall-row" v-show="isShowLineWidth">
						<div class="col-left">线宽</div>
						<div class="col-main"><el-input v-model="lineWidth" placeholder="输入宽度值" clearable /></div>
					</div>
					<div class="jt-wall-row" v-show="isShowGlowpower">
						<div class="col-left">发光强度</div>
						<div class="col-main"><el-input v-model="glowPower" placeholder="输入发光强度0～1" clearable /></div>
					</div>
					<div class="jt-wall-row" v-show="isShowColor">
						<div class="col-left">颜色</div>
						<div class="col-main">
							<el-config-provider :locale="locale"><el-color-picker v-model="color" show-alpha :predefine="predefineColors" label="12" /></el-config-provider>
						</div>
					</div>
					<div class="jt-wall-row" v-show="isShowDirection">
						<div class="col-left">流动方向</div>
						<div class="col-main">
							<el-radio-group v-model="radioDirection">
								<el-radio-button v-for="(item, index) in directions" :label="item.key" v-model="item.value" @change="directionChange" />
							</el-radio-group>
						</div>
					</div>
					<div class="jt-wall-row" v-show="isShowOrder">
						<div class="col-left">流动顺序</div>
						<div class="col-main">
							<el-radio-group v-model="radioOrder"><el-radio-button v-for="(item, index) in orders" :label="item.key" v-model="item.value" /></el-radio-group>
						</div>
					</div>
					<div class="jt-wall-row" v-show="isShowCount">
						<div class="col-left">重复数量</div>
						<div class="col-main"><el-input v-model="yCount" placeholder="输入1～100" clearable /></div>
					</div>
					<div class="jt-wall-row" v-show="isShowText" style="height: 60px;">
						<div class="col-left">文字内容</div>
						<div class="col-main"><el-input v-model="txtContent" placeholder="输入显示的文字内容" clearable type="textarea" :rows="2" /></div>
					</div>
					<div class="jt-wall-row" v-show="isShowOutlineWidth">
						<div class="col-left">描边宽度</div>
						<div class="col-main"><el-input v-model="outlineWidth" placeholder="输入宽度值" clearable /></div>
					</div>
					<div class="jt-wall-row" v-show="isShowOutlineColor">
						<div class="col-left">描边颜色</div>
						<div class="col-main">
							<el-config-provider :locale="locale"><el-color-picker v-model="outlineColor" show-alpha :predefine="predefineColors" label="12" /></el-config-provider>
						</div>
					</div>
					<div class="el-body-foot">
						<el-button-group class="ml-4">
							<el-button type="primary" :icon="Edit" @click="submit()">修改</el-button>
							<el-button type="danger" :icon="Delete">删除</el-button>
						</el-button-group>
					</div>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
/* 引入ref和reactive 其中ref用于简单类型 reactive用于复杂类型 */
import { computed, ref, reactive, toRefs, watch } from 'vue';
import { ElDialog } from 'element-plus';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import en from 'element-plus/dist/locale/en.mjs';
import { ArrowLeft, ArrowRight, Delete, Edit, Share } from '@element-plus/icons-vue';
import { param, type } from 'jquery';
import { DrawTools } from '../CrMap/DrawTools.js';
const language = ref('zh-cn');
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en));

const props = defineProps({
	params: {
		id: {
			type: String,
			default: () => undefined
		},
		height: {
			type: Number,
			default: () => 13
		},
		color: {
			type: String,
			default: () => '255,255,0,0.9'
		},
		direction: {
			type: String,
			default: () => 'horizontal'
		},
		order: {
			type: String,
			default: () => '+'
		},
		count: {
			type: Number,
			default: () => 2
		},
		text: {
			type: String,
			default: () => ''
		},
		lineWidth: {
			type: Number,
			default: () => 2
		},
		glowPower: {
			type: Number,
			default: () => 0.25
		},
		outlineWidth: {
			type: Number,
			default: () => 0
		},
		outlineColor: {
			type: String,
			default: () => '255,255,0,0.9'
		}
	},
	showDialog: {
		type: Boolean,
		default: () => false
	}
});
const emit = defineEmits(['submit', 'update:showDialog', 'update:params']);
/* 默认颜色 */
const predefineColors = ref([
	'#ff4500',
	'#ff8c00',
	'#ffd700',
	'#90ee90',
	'#00ced1',
	'#1e90ff',
	'#c71585',
	'rgba(255, 69, 0, 0.68)',
	'rgb(255, 120, 0)',
	'hsv(51, 100, 98)',
	'hsva(120, 40, 94, 0.5)',
	'hsl(181, 100%, 37%)',
	'hsla(209, 100%, 56%, 0.73)',
	'#c7158577'
]);
/* 初始赋值 */
const isShowColor = ref(false);
const isShowText = ref(false);
const isShowHeight = ref(false);
const isShowDirection = ref(false);
const isShowOrder = ref(false);
const isShowCount = ref(false);
const isLineWidth = ref(false);
const isShowLineWidth = ref(false);
const isShowGlowpower = ref(false);
const isShowOutlineWidth = ref(false);
const isShowOutlineColor = ref(false);
const color = ref(props.params.color);
const title = ref('属性编辑');
const dialogVisible = ref(props.showDialog);
const directions = reactive([{ key: '左右', value: 'horizontal' }, { key: '上下', value: 'vertical' }]);
const orders = reactive([]);
const radioDirection = ref('');
const radioOrder = ref('');
const wallHeight = ref(0);
const yCount = ref(0);
const txtContent = ref('');
const lineWidth = ref(0);
const glowPower = ref(0.25);
const outlineWidth = ref(0);
const outlineColor = ref(props.params.outlineColor);
/* 根据传递的属性更新 */
updateParams(props.params);

/* 监听参数的变化 */
watch(
	() => props.showDialog,
	(newVal, oldVal) => {
		dialogVisible.value = newVal;
	}
);
watch(props.params, (newVal, oldVal) => {
	updateParams(newVal);
});

/**
 * 根据参数更新内容
 * @param {JSON} params 参数
 */
function updateParams(params) {
	_setShowControls(false);
	/* 根据参数的显示不同的内容 */
	if (params.id === DrawTools.DrawType.TextWall) {
		title.value = '广告牌编辑';
		isShowColor.value = true;
		isShowText.value = true;
		isShowHeight.value = true;
	} else if (params.id === DrawTools.DrawType.DynamicWall) {
		title.value = '动态围栏编辑';
		isShowColor.value = true;
		isShowDirection.value = true;
		isShowOrder.value = true;
		isShowCount.value = true;
		isShowHeight.value = true;
	} else if (params.id === DrawTools.DrawType.NormalWall) {
		title.value = '普通围栏编辑';
		isShowColor.value = true;
		isShowHeight.value = true;
	} else if (params.id === DrawTools.DrawType.Circle) {
		title.value = '贴地圆编辑';
		isShowColor.value = true;
		isShowOutlineColor.value = true;
		isShowOutlineWidth.value = true;
	} else if (params.id === DrawTools.DrawType.DynamicCircle) {
		title.value = '扩散圆编辑';
		isShowColor.value = true;
		isShowCount.value = true;
	} else if (params.id === DrawTools.DrawType.House) {
		title.value = '房屋编辑';
		isShowColor.value = true;
		isShowHeight.value = true;
	} else if (params.id === DrawTools.DrawType.VideoWall) {
		title.value = '视频墙编辑';
	} else if (params.id === DrawTools.DrawType.Polyline) {
		title.value = '贴地线编辑';
		isShowColor.value = true;
		isShowLineWidth.value = true;
	} else if (params.id === DrawTools.DrawType.ArrowPolyline) {
		title.value = '箭头线编辑';
		isShowColor.value = true;
		isShowLineWidth.value = true;
	} else if (params.id === DrawTools.DrawType.DynamicPolyline) {
		title.value = '动态线编辑';
		isShowColor.value = true;
		isShowOrder.value = true;
		isShowCount.value = true;
		isShowLineWidth.value = true;
	} else if (params.id === DrawTools.DrawType.GrowPolyline) {
		title.value = '发光线编辑';
		isShowColor.value = true;
		isShowLineWidth.value = true;
		isShowGlowpower.value = true;
	} else if (params.id === DrawTools.DrawType.OultliePolyline) {
		title.value = '描边线编辑';
		isShowColor.value = true;
		isShowLineWidth.value = true;
		isShowOutlineColor.value = true;
		isShowOutlineWidth.value = true;
	} else if (params.id === DrawTools.DrawType.Polygon) {
		title.value = '贴地面编辑';
		isShowColor.value = true;
		isShowOutlineColor.value = true;
		isShowOutlineWidth.value = true;
	} else if (params.id === DrawTools.DrawType.Polygon) {
		title.value = '贴地面编辑';
		isShowColor.value = true;
		isShowOutlineColor.value = true;
		isShowOutlineWidth.value = true;
	} else if (params.id === DrawTools.DrawType.SpatialLine) {
		title.value = '空间线编辑';
		isShowColor.value = true;
		isShowLineWidth.value = true;
	} else {
		_setShowControls(true);
	}
	color.value = params.color;
	/* 判断方向及顺序 */
	if (params.direction === 'horizontal') {
		radioDirection.value = directions[0].key;
		Object.assign(orders, [{ key: '自左至右', value: '-' }, { key: '自右至左', value: '+' }]);
		if (params.order === '-') {
			radioOrder.value = orders[0].key;
		} else {
			radioOrder.value = orders[1].key;
		}
	} else {
		radioDirection.value = directions[1].key;
		Object.assign(orders, [{ key: '自上至下', value: '+' }, { key: '自下至上', value: '-' }]);
		if (params.order === '+') {
			radioOrder.value = orders[0].key;
		} else {
			radioOrder.value = orders[1].key;
		}
	}
	wallHeight.value = params.height;
	yCount.value = params.count;
	txtContent.value = params.text;
	lineWidth.value = params.lineWidth;
	glowPower.value = params.power;
	outlineColor.value = params.outlineColor;
	outlineWidth.value = params.outlineWidth;
	console.log('===设置参数显示>>>', params.lineWidth);
}

/**
 * 显示控件设置
 * @param {Boolean} isShow 是否显示
 */
function _setShowControls(isShow) {
	isShowColor.value = isShow;
	isShowText.value = isShow;
	isShowDirection.value = isShow;
	isShowOrder.value = isShow;
	isShowCount.value = isShow;
	isShowHeight.value = isShow;
	isShowLineWidth.value = isShow;
	isShowGlowpower.value = isShow;
	isShowOutlineColor.value = isShow;
	isShowOutlineWidth.value = isShow;
}

/**
 * 对外部公开的函数
 */
defineExpose({
	updateParams
});

/**
 * 提交更改
 */
function submit() {
	emit('submit', {
		id: props.params.id,
		height: wallHeight.value,
		color: color.value,
		direction: directions.filter(item => {
			return item.key === radioDirection.value;
		})[0].value,
		order: orders.filter(item => {
			return item.key === radioOrder.value;
		})[0].value,
		count: yCount.value,
		text: txtContent.value,
		lineWidth: lineWidth.value,
		power: glowPower.value,
		outlineColor: outlineColor.value,
		outlineWidth: outlineWidth.value
	});
	dialogVisible.value = false;
}

/**
 * 材质方向选择事件
 * @param {Object} e
 */
function directionChange(e) {
	if (e.target.value === directions[0].key) {
		Object.assign(orders, [{ key: '自左至右', value: '-' }, { key: '自右至左', value: '+' }]);
		radioOrder.value = orders[0].key;
	} else if (e.target.value === directions[1].key) {
		Object.assign(orders, [{ key: '自上至下', value: '-' }, { key: '自下至上', value: '+' }]);
		radioOrder.value = orders[0].key;
	}
}

/**
 * 窗口关闭，修改双向绑定值
 */
function closeDialog() {
	emit('update:showDialog', false);
}

/**
 * 窗口打开
 */
function openDialog() {
	updateParams(props.params);
}
</script>
<style lang="scss">
/* 墙对话框内容行样式 */
.jt-wall-row {
	display: flex;
	flex-direction: row;
	height: 40px;
	align-items: center;

	/* 行左侧标题样式 */
	.col-left {
		display: flex;
		align-items: center;
		justify-content: right;
		width: 60px;
		font-family: 'Alimama_ShuHeiTi_Bold';
		font-weight: bold;
		margin-right: 8px;
	}

	/* 主要内容样式 */
	.col-main {
		flex: 1;
		display: flex;
		flex-direction: row;
		.el-input--suffix {
			background-color: rgba(255, 255, 255, 0);
		}

		.el-input--suffix * {
			background-color: rgba(255, 255, 255, 0);
			color: rgba(255, 255, 255, 1);
		}
	}
}

/* 墙对话框整体样式 */
.jt-wall-dialog {
	pointer-events: none; // ***覆盖层元素增加可穿透点击事件***
	.el-dialog {
		pointer-events: auto; // ***弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）***
		position: absolute !important; //将通知框的position改成absolute，可以在某个div进行显示

		background: rgb(5 45 155 / 70%);
		min-width: 280px;
		overflow: hidden;

		/* 对话框标题头样式 */
		.el-dialog__header {
			background: url('../../assets/image/backheader.png') no-repeat;
			margin-right: 0px;
			padding: 6px;
		}

		/* 对话框关闭按钮的样式 */
		.el-dialog__headerbtn {
			height: 34px;
		}

		/* 对话框主体的样式 */
		.el-dialog__body {
			padding: 10px;
			color: #fff;
		}

		/* 颜色选择器的宽度 */
		.el-color-picker__trigger {
			width: 120px;
		}

		.el-body-foot {
			position: absolute;
			bottom: 8px;
			right: 8px;
		}
	}
}
</style>