tyj_admin_ui/src/views/gameNotice/customerService/index.vue

<template>
	<div class="game-maintenance-container">
		<el-card shadow="hover" header="客服页面">
			<div class="game-order-search mb15">
				<el-form label-width="70px" label-position="right">
					<el-form-item label="渠道" prop="channel">
						<el-select v-model="tableData.param.channels" multiple collapse-tags class="m-2" placeholder="选择渠道" clearable>
							<el-option v-for="item in channels" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
						<el-form-item style="margin-left: 20px">
							<el-button type="primary" @click="getAllChannel" style="margin-left: 20px">所有渠道</el-button>
						</el-form-item>
					</el-form-item>
					<el-form-item label="页面模板" prop="model">
						<el-select v-model="model" @change="useModel(1)" placeholder="请选择模板">
							<el-option v-for="item in dbs" :key="item.id" :label="item.title" :value="item.id"></el-option>
						</el-select>
						<el-button type="primary" @click="makeModel(1)" style="margin-left: 20px">编辑模板</el-button>
					</el-form-item>
					<el-form-item>
						<el-button size="small" @click="inputBig" style="margin-bottom: -15px">
							<span style="font-weight: bold">B</span>
						</el-button>
						<el-button size="small" @click="inputItalic" style="margin-bottom: -15px">
							<span style="font-style: italic">I</span>
						</el-button>
						<el-button size="small" @click="inputUnderline" style="margin-bottom: -15px">
							<span style="text-decoration: underline">U</span>
						</el-button>
						<el-button size="small" @click="inputLink" style="margin-bottom: -15px; padding: 0; padding-left: 5px">
							<el-icon type="text">
								<ele-Link />
							</el-icon>
						</el-button>
						<el-button size="small" class="color-picker font-color-picker" style="margin-bottom: -15px; padding: 0">
							<el-color-picker size="default" v-model="color" @change="inputColor"></el-color-picker>
						</el-button>
						<el-form-item style="margin-bottom: -15px; margin-left: 20px">
							<el-button type="primary" @click="showContent" style="margin-left: 20px">内容预览</el-button>
						</el-form-item>
					</el-form-item>
					<el-form-item label="页面内容">
						<el-input v-model="tableData.param.content" type="textarea" rows="16" @mouseup="inputSelect" @blur="inputSelect" clearable />
					</el-form-item>
					<el-form-item>
						<el-button size="large" type="primary" class="ml10" @click="noticeLogin"> 客服页面发送</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-card>

		<el-dialog v-model="listModelVisible" :before-close="handleClose" :close-on-click-modal="false" center>
			<div class="my-header">
				<el-button type="" @click="saveModel(2)">保存</el-button>
				<el-button type="primary" @click="setModel(1)">添加</el-button>
			</div>
			<el-table :data="dbs" :inline="true" :cell-style="{ padding: '0' }">
				<el-table-column>
					<template #default="scope">
						<div class="flex-warp">
							{{ scope.row.title }}
						</div>
					</template>
				</el-table-column>
				<el-table-column width="150">
					<template #default="scope">
						<el-button size="small" type="danger" @click="setModel(3, scope.row.id)" inline="true">删</el-button>
						<el-button size="small" type="primary" @click="setModel(2, scope.row.id)" inline="true">改</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

		<el-dialog v-model="editModelVisible" :close-on-click-modal="false" center>
			<el-form label-width="90px">
				<el-form-item label="模板名称" prop="title">
					<el-input v-model="editModel.title" placeholder="请输入模板名称" />
				</el-form-item>
				<el-form-item label="模板内容" prop="content">
					<el-input v-model="editModel.content" type="textarea" placeholder="请输入内容" rows="25" />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="saveModel(1)"> 保存</el-button>
				</div>
			</template>
		</el-dialog>

		<el-dialog v-model="editCronVisible" :close-on-click-modal="false" center>
			<el-form label-width="90px">
				<el-form-item label="页面模板" prop="model">
					<el-select v-model="model" @change="useModel(2)" placeholder="请选择模板">
						<el-option v-for="item in dbs" :key="item.id" :label="item.title" :value="item.id"></el-option>
					</el-select>
					<el-button type="primary" @click="makeModel(1)" style="margin-left: 20px">编辑模板</el-button>
				</el-form-item>
				<el-form-item>
					<el-button size="small" @click="inputBig(2)" style="margin-bottom: -15px">
						<span style="font-weight: bold">B</span>
					</el-button>
					<el-button size="small" @click="inputItalic(2)" style="margin-bottom: -15px">
						<span style="font-style: italic">I</span>
					</el-button>
					<el-button size="small" @click="inputUnderline(2)" style="margin-bottom: -15px">
						<span style="text-decoration: underline">U</span>
					</el-button>
					<el-button size="small" @click="inputLink(2)" style="margin-bottom: -15px; padding: 0; padding-left: 5px">
						<el-icon type="text">
							<ele-Link />
						</el-icon>
					</el-button>
					<el-button size="small" class="color-picker font-color-picker" style="margin-bottom: -15px; padding: 0">
						<el-color-picker size="default" v-model="color" @change="inputColor(2)"></el-color-picker>
					</el-button>
				</el-form-item>
				<el-form-item label="页面内容">
					<el-input v-model="cron.content" type="textarea" rows="25" @mouseup="inputSelect" @blur="inputSelect" clearable />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="saveCron"> 保存修改</el-button>
				</div>
			</template>
		</el-dialog>

		<el-dialog v-model="contentVisible" :close-on-click-modal="false" center>
			<p v-html="tableData.content"></p>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
import {
	gameGetNotice,
	gameGMNoticeModelAdd,
	gameGMNoticeModelDel,
	gameGMNoticeModelGet,
	gameNotice,
	gameGMNoticeGetCron,
	gameNoticeDel,
} from '/@/api/game';
import { ElMessage, ElMessageBox } from 'element-plus/es';
import { allChannelList } from '/@/utils/game';
import { contentReplace, zeroFill } from '/@/utils/utils';
import { Notice_Type } from '/@/api/common/consts';

interface Data {
	title: string;
	send: number;
	sendTime: number;
	channels: string[];
	channel: string;
	content: string;
	noticeType: number;
	id: number;
	noticeId: number;
}

interface TableDataState {
	unselsected: string[];
	colorPicker: boolean;
	color: string;
	selected: string;
	urlLink: string;
	dbs: Array<Data>;
	model: number;
	editModel: Data;
	tableData: {
		content: string;
		crons: Array<Data>;
		param: Data;
	};
	editModelVisible: boolean;
	listModelVisible: boolean;
	listCronVisible: boolean;
	editCronVisible: boolean;
	contentVisible: boolean;
	cron: Data;
	channels: object;
	noticeTypes: object[];
}

export default defineComponent({
	name: 'apiV1GameNoticeCustomerService',
	setup() {
		const state = reactive<TableDataState>({
			unselsected: ['', ''],
			colorPicker: false,
			editModelVisible: false,
			listModelVisible: false,
			listCronVisible: false,
			editCronVisible: false,
			contentVisible: false,
			cron: {
				title: '',
				send: 1,
				sendTime: Date.now(),
				content: '',
				noticeType: 4,
				channels: [],
				channel: '',
				id: 0,
				noticeId: 0,
			},
			color: '#000000',
			selected: '替换显示内容',
			urlLink: '',
			tableData: {
				content: '',
				crons: [],
				param: {
					title: '',
					send: 1,
					sendTime: Date.now(),
					content: '',
					noticeType: 4,
					channels: [],
					channel: '',
					id: 0,
					noticeId: 0,
				},
			},
			dbs: [],
			model: '',
			editModel: {},
			channels: [],
			noticeTypes: Notice_Type,
		});
		const noticeLogin = () => {
			if (state.tableData.param.send == 1) {
				state.tableData.param.sendTime = 0;
			}

			console.log('Notice: ', state.tableData.param);
			for (let i in state.tableData.param.channels) {
				sendNotice(state.tableData.param.channels[i]);
			}
		};
		const sendNotice = (channel: string) => {
			let req = {
				title: state.tableData.param.title,
				send: state.tableData.param.send,
				sendTime: state.tableData.param.sendTime,
				content: state.tableData.param.content,
				noticeType: state.tableData.param.noticeType,
				channel: channel,
				id: state.tableData.param.id,
				noticeId: state.tableData.param.noticeId,
			};
			gameNotice(req)
				.then(() => {
					ElMessage.success(state.channels.find((r) => r.value == channel).label + '发送成功');
				})
				.finally(() => {
					// state.loading = false;
				});
		};
		const saveCron = () => {
			if (state.cron.send == 1) {
				state.cron.sendTime = 0;
			}

			console.log('Notice: ', state.cron);
			gameNotice(state.cron)
				.then(() => {
					ElMessage.success('发送成功');
				})
				.finally(() => {
					// state.loading = false;
				});
		};
		const noticeLog = () => {
			gameGMNoticeGetCron({})
				.then((res) => {
					console.log('Notice: ', res);
					state.tableData.crons = res.data.noticeLogs;
					state.listCronVisible = true;
				})
				.finally(() => {
					// state.loading = false;
				});
		};

		// 初始化表格数据
		const initTableData = () => {
			getNotice();
		};

		const getNotice = () => {
			gameGetNotice(state.tableData.param).then((res: any) => {
				state.tableData.param.content = res.data.content;
				state.tableData.param.noticeId = res.data.id;
			});
		};
		// 页面加载时
		onMounted(() => {
			allChannelList().then((res) => {
				state.channels = res;
			});
			initTableData();
			getModel();

			console.log('onMounted', document.getElementsByClassName('w-e-droplist'));
			if (document.getElementsByClassName('w-e-droplist')[0]) {
				document.getElementsByClassName('w-e-droplist')[0].style['width'] = '260px';
			}
		});

		var getDate = (time: string) => {
			let date = new Date(time);
			return (
				date.getFullYear() +
				'-' +
				zeroFill(date.getMonth() + 1) +
				'-' +
				zeroFill(date.getDate()) +
				' ' +
				zeroFill(date.getHours()) +
				':' +
				zeroFill(date.getMinutes()) +
				':' +
				zeroFill(date.getSeconds())
			);
		};
		var inputSelect = (res: any) => {
			console.log(res, res.target.selectionStart, res.target.selectionEnd);
			let selectionStart = res.target.selectionStart;
			let selectionEnd = res.target.selectionEnd;
			state.unselsected = [res.target.value.slice(0, selectionStart), res.target.value.slice(selectionEnd)];
			if (selectionStart == selectionEnd) {
				// console.log("same");
				state.selected = '替换显示内容';
				return;
			}
			state.selected = res.target.value.slice(selectionStart, selectionEnd);
			console.log(state.selected);
		};
		var changeContent = (type: number) => {
			switch (type) {
				case 2:
					state.cron.content = state.unselsected[0] + state.selected + state.unselsected[1];
					break;
				default:
					state.tableData.param.content = state.unselsected[0] + state.selected + state.unselsected[1];
					break;
			}
		};
		var inputBig = (type: number) => {
			if (state.unselsected[1].indexOf('[/b]') == 0) {
				return;
			}

			if (state.selected.indexOf('[b]') > -1) {
				state.selected = state.selected.replace(/\[b]|\[\/b]/gi, '');
				changeContent(type);
				return;
			}
			state.selected = '[b]' + state.selected + '[/b]';
			changeContent(type);
			// console.log(state.unselsected, state.selected.indexOf("[b]"), state.selected, state.tableData.param.content);
		};
		var inputItalic = (type: number) => {
			if (state.unselsected[1].indexOf('[/i]') == 0) {
				return;
			}
			if (state.selected.indexOf('[i]') > -1 || (state.unselsected[1].indexOf('[i]') == 0 && state.unselsected[1].indexOf('[/i]') > -1)) {
				state.selected = state.selected.replace(/\[i]|\[\/i]/gi, '');
				changeContent(type);
				return;
			}
			state.selected = '[i]' + state.selected + '[/i]';
			changeContent(type);
			// console.log(state.unselsected, state.selected, state.tableData.param.content);
		};
		var inputUnderline = (type: number) => {
			if (state.unselsected[1].indexOf('[/u]') == 0) {
				return;
			}
			if (state.selected.indexOf('[u]') > -1) {
				state.selected = state.selected.replace(/\[u]|\[\/u]/gi, '');
				changeContent(type);
				return;
			}
			state.selected = '[u]' + state.selected + '[/u]';
			changeContent(type);
			// console.log(state.unselsected, state.selected, state.tableData.param.content);
		};
		var inputLink = (type: number) => {
			if (state.selected.indexOf('[/url]') > -1) {
				state.selected = state.selected.replace(/\[url=.*?]|\[\/url]/gi, '');
				changeContent(type);
				return;
			}
			ElMessageBox.prompt('请输入Url', '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				// inputPattern:
				//     /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
				inputErrorMessage: 'Invalid http request',
			}).then(({ value }) => {
				state.urlLink = value;
				if (state.unselsected[1].indexOf('[/url]') == 0) {
					return;
				}
				state.selected = '[url=' + state.urlLink + ']' + state.selected + '[/url]';
				changeContent(type);
				state.urlLink = '';
				// console.log(state.unselsected, state.selected, state.tableData.param.content);
			});
		};
		var buttonColor = (type: number) => {
			// if(state.selected.indexOf("[/color]") > -1){
			//   state.selected = state.selected.replace(/\[color=#.+?]|\[\/color]/gi, "");
			//   changeContent();
			// }
		};
		var inputColor = (type: number) => {
			if (!state.color) {
				if (state.selected.indexOf('[/color]') > -1) {
					state.selected = state.selected.replace(/\[color=#.+?]|\[\/color]/gi, '');
					changeContent(type);
					return;
				}
				return;
			}
			if (state.unselsected[1].indexOf('[/color]') == 0) {
				return;
			}
			if (state.selected.indexOf('[/color]') > -1) {
				state.selected = state.selected.replace(/\[color=#.+?]|\[\/color]/gi, '');
				// changeContent();
				// return;
			}
			state.selected = '[color=' + state.color + ']' + state.selected + '[/color]';
			changeContent(type);
			// console.log(state.unselsected, state.selected, state.tableData.param.content);
		};
		// 模板
		const getModel = () => {
			gameGMNoticeModelGet({ noticeType: 4 }).then((res) => {
				if (res.data.noticeModel) {
					state.dbs = res.data.noticeModel;
				}
				console.log(res, state.dbs);
			});
		};
		const useModel = (id: number) => {
			switch (id) {
				case 1:
					let model = state.dbs.find((r) => r.id == state.model);
					if (model) {
						state.tableData.param.content = model.content;
					}
					break;
				case 2:
					let model1 = state.dbs.find((r) => r.id == state.model);
					if (model1) {
						state.cron.content = model1.content;
					}
					break;
			}
		};
		const makeModel = () => {
			state.listModelVisible = true;
			console.log(state);
		};
		const setModel = (type: number, id: number) => {
			switch (type) {
				case 1:
					state.editModel = {};
					state.editModelVisible = true;
					break;
				case 2:
					state.editModel = state.dbs.find((model) => model.id == id);
					if (!state.editModel) {
						return;
					}
					state.editModelVisible = true;
					break;
				case 3:
					gameGMNoticeModelDel({
						id: id,
					})
						.then(function () {
							getModel();
						})
						.finally(function () {});
					break;
			}
		};
		const saveModel = (type: number) => {
			console.log(type, state.editModel);
			switch (type) {
				case 1:
					gameGMNoticeModelAdd({
						title: state.editModel.title,
						content: state.editModel.content,
						noticeType: 4,
						id: state.editModel.id,
					})
						.then(function () {
							getModel();
						})
						.finally(function () {
							state.editModelVisible = false;
						});
					break;
				case 2:
					state.listModelVisible = false;
					break;
			}
		};
		const handleClose = (done: () => void) => {
			// ElMessageBox.confirm('确定退出编辑模板页面？').then(() => {
			done();
			// }).catch(() => {
			//   // catch error
			// })
		};
		const setCron = (type: number, id: number) => {
			switch (type) {
				case 1: // 修改
					state.cron = state.tableData.crons.find((r) => r.id == id);
					console.log(state.cron);
					state.editCronVisible = true;
					break;
				case 2: // 删除
					ElMessageBox.confirm('是否确认删除本条待发送公告？，点击确认后删除本条待发送公告。').then(() => {
						gameNoticeDel({ id: id })
							.then(() => {
								ElMessage.success('删除成功');
								noticeLog();
							})
							.finally(() => {
								// state.loading = false;
							});
					});
					break;
			}
		};

		const alertContent = (val) => {
			console.log(`current page: ${val}`);
			ElMessageBox.alert(val, '', { confirmButtonText: 'OK' });
		};

		const showContent = () => {
			state.contentVisible = true;
			state.tableData.content = contentReplace(state.tableData.param.content);
			console.log(state.tableData.content);
		};
		const getAllChannel = () => {
			state.tableData.param.channels = [];
			for (let i in state.channels) {
				if (state.channels[i].value == '') {
					continue;
				}
				state.tableData.param.channels.push(state.channels[i].value);
			}
		};
		return {
			getAllChannel,
			showContent,
			getNotice,
			noticeLog,
			noticeLogin,
			inputSelect,
			inputBig,
			inputItalic,
			inputUnderline,
			inputLink,
			inputColor,
			buttonColor,
			getModel,
			useModel,
			makeModel,
			setModel,
			saveModel,
			handleClose,
			setCron,
			getDate,
			alertContent,
			saveCron,
			...toRefs(state),
		};
	},
});
</script>
<style scoped lang="scss" src="../../../theme/add.scss"></style>
<style scoped lang="scss">
.my-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 16px;
}

.tree-border {
	margin-top: 5px;
	border: 1px solid #e5e6e7 !important;
	background: #fff none !important;
	border-radius: 4px;
}

.system-edit-post-container {
	.menu-data-tree {
		border: var(--el-input-border, var(--el-border-base));
		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
		padding: 5px;
	}
}

.el-form-item {
	display: -moz-flex;
	vertical-align: middle;
	margin-right: 32px;
}

::v-deep .el-table .cell {
	height: 25px;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
	background: #ffffd5;
}

::v-deep .el-table .el-table--enable-row-hover .el-table__body tr:hover > td {
	background: inherit;
}

::v-deep(.el-form-item--large .el-form-item__content) {
	line-height: 20px;
}

::v-deep(.el-form-item__content) {
	line-height: 20px;
}

::v-deep .w-e-droplist {
	width: 260px !important;
}
</style>