hotline-admin/src/views/business/order/components/Comment.vue

<template>
	<div class="textarea w100">
		<el-input v-model="value" type="textarea" :autosize="{ minRows: 10, maxRows: 20 }" :placeholder="placeholder" maxlength="2000"> </el-input>
		<span class="bttons">
			<el-button @click="showComents" class="default-button" :loading="loading">常用意见</el-button>
			<el-button type="primary" @click="onAddComments" :loading="loading">添加到常用意见</el-button>
		</span>

		<el-drawer v-model="state.showDrawer" size="35%" title="" :show-close="false" :modal="modal">
			<template #header="{ close }">
				<div class="comments-header">
					<div>
						<el-button link @click="state.active = 'default'" :class="{ active: state.active === 'default' }"> 常用意见 </el-button>
						<el-button link @click="state.active = 'add'" :class="{ active: state.active === 'add' }"> 新增意见 </el-button>
						<span></span>
					</div>
				</div>
				<div class="flex-center-align">
					<el-button link @click="state.manage = true" v-if="!state.manage && state.active === 'default' && state.commentsList.length"
						>管理</el-button
					>
					<el-button link @click="state.manage = false" type="primary" v-if="state.manage && state.active === 'default'">返回</el-button>
					<el-button link @click="close">
						<SvgIcon name="ele-Close" class="mr5" @click="close" size="16px" />
					</el-button>
				</div>
			</template>
			<div class="comments-container" v-loading="state.loading">
				<template v-if="state.commentsList.length">
					<!-- 默认状态 -->
					<template v-if="state.active === 'default' && !state.manage">
						<ul class="comments-box">
							<li class="comments-item" v-for="(item, index) in state.commentsList" :key="index" @click="chooseComment(item)">
								<p class="text-ellipsis2" :title="item.content">{{ item.content }}</p>
							</li>
						</ul>
					</template>
					<!-- 管理 -->
					<template v-if="state.active === 'default' && state.manage">
						<ul class="comments-box">
							<li
								class="comments-item"
								v-for="(item, index) in state.commentsList"
								:class="[item.ischeck === true ? 'choosed' : '']"
								:key="index"
								@click="handelComent(item, index)"
							>
								<p class="text-ellipsis2" :title="item.content">{{ item.content }}</p>
								<el-checkbox v-model="item.ischeck" class="check-icon" label="" v-if="item.ischeck" size="large" />
							</li>
						</ul>
					</template>
				</template>
				<template v-if="!state.commentsList.length && state.active !== 'add'">
					<Empty description="暂无常用语" />
				</template>
				<!-- 新增意见 -->
				<template v-if="state.active === 'add'">
					<div>
						<el-form :model="state.commentsForm" ref="commentsFormRef">
							<el-form-item label="" prop="content" :rules="[{ required: true, message: '请填写新增常用意见', trigger: 'blur' }]">
								<el-input
									v-model="state.commentsForm.content"
									type="textarea"
									:autosize="{ minRows: 10, maxRows: 10 }"
									placeholder="请填写新增常用意见"
									clearable
								>
								</el-input>
							</el-form-item>
						</el-form>
					</div>
				</template>
			</div>
			<template #footer v-if="state.active === 'add' || state.manage">
				<div style="flex: auto">
					<el-button @click="deleteComment" class="default-button" v-if="state.active === 'default' && state.manage">删 除</el-button>
					<el-button type="primary" @click="commentSave" v-if="state.active === 'add'">保 存</el-button>
				</div>
			</template>
		</el-drawer>
	</div>
</template>

<script setup lang="ts" name="commentManage">
import { reactive, ref, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { commonList, addCommon, deleteCommon } from '/@/api/business/commonP';
import { commonEeum } from '/@/utils/tools';
const emit = defineEmits(['chooseComment', 'update:modelValue']);
const props = defineProps({
	modal: {
		type: Boolean,
		default: false,
	},
	modelValue: {
		type: String,
		default: '',
	},
	placeholder: {
		type: String,
		default: '请填写内容',
	},
	loading: {
		type: Boolean,
		default: false,
	},
	commonEeum: {
		type: String,
		default: commonEeum.Seat,
	},
});
const value = computed({
	get() {
		return props.modelValue;
	},
	set(value) {
		emit('update:modelValue', value);
	},
});
// 定义变量内容
const state = reactive<any>({
	showDrawer: false,
	commentsList: [],
	commentsForm: {
		content: '',
	},
	chooseCommentList: [],
	active: 'default',
	manage: false,
	loading: false,
	typecode: '',
});
const commentsFormRef = ref();
// 打开常用意见管理
const showComents = () => {
	openDialog();
};
// 添加到常用意见
const onAddComments = async () => {
	if (!props.modelValue) {
		ElMessage.warning(props.placeholder);
		return;
	}
	await addCommon({
		typeCode: props.commonEeum,
		content: props.modelValue,
	});
	ElMessage.success('操作成功');
	closeDialog();
};
// 打开弹窗
const openDialog = async () => {
	state.typecode = props.commonEeum;
	state.active = 'default';
	commentsFormRef.value?.resetFields();
	state.manage = false;
	getList();
	state.showDrawer = true;
};
const getList = async () => {
	try {
		state.loading = true;
		const res: any = await commonList({ typecode: props.commonEeum });
		state.commentsList = res.result;
		state.loading = false;
	} catch (error) {
		state.loading = false;
	}
};
// 选中常用意见（管理）
const handelComent = (item: any, index: number) => {
	const repeatData = [...state.commentsList];
	const repeatSelarr = [...state.chooseCommentList];
	if (!repeatData[index].ischeck) {
		repeatData[index].ischeck = true;
		repeatSelarr.push(item);
	} else {
		repeatData[index].ischeck = false;
		if (!repeatSelarr || repeatSelarr.length == 0) {
			return '';
		}
		repeatSelarr.splice(index, 1);
	}
	state.chooseCommentList = repeatSelarr.filter((item: any) => item.ischeck);
};
// 重置状态
const resetState = () => {
	state.active = 'default';
	state.manage = false;
	state.chooseCommentList = [];
	state.commentsForm.content = '';
	getList();
};
// 删除常用意见
const deleteComment = () => {
	if (!state.chooseCommentList.length) {
		ElMessage.warning('请选择要删除的常用意见');
		return;
	}
	ElMessageBox.confirm(`确定要删除选中的常用意见，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		draggable: true,
		cancelButtonClass: 'default-button',
		type: 'warning',
	})
		.then(() => {
			const chooseCommentList = state.chooseCommentList.map((item: any) => {
				return item.id;
			});
			deleteCommon({ ids: chooseCommentList }).then(() => {
				ElMessage.success('操作成功');
				resetState();
				state.loading = false;
			});
		})
		.catch(() => {});
};
// 添加常用意见 保存
const commentSave = () => {
	commentsFormRef.value.validate((valid: boolean) => {
		if (valid) {
			state.loading = true;
			addCommon({
				typeCode: state.typecode,
				content: state.commentsForm.content,
			}).then(() => {
				ElMessage.success('操作成功');
				resetState();
				state.loading = false;
			});
		} else {
			return false;
		}
	});
};
// 选择常用意见 填入填写框
const chooseComment = (item: any) => {
	emit('chooseComment', item);
	closeDialog();
};
// 关闭弹窗
const closeDialog = () => {
	state.showDrawer = false;
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
<style lang="scss" scoped>
.textarea {
	position: relative;
	.bttons {
		position: absolute;
		right: 10px;
		bottom: 10px;
	}
	:deep(.el-textarea__inner) {
		padding-bottom: 40px;
	}
}
.comments-container {
	.comments-box {
		.comments-item {
			border: var(--el-border);
			border-radius: var(--el-border-radius-base);
			margin-bottom: 10px;
			padding: 8px 15px;
			cursor: pointer;
			position: relative;
			line-height: 18px;
			&:hover {
				box-shadow: 0 0 0 1px var(--el-color-primary) inset;
				background-color: var(--hotline-bg-main-color);
			}
			.check-icon {
				position: absolute;
				right: 0;
				top: -13px;
			}
		}
		.choosed {
			box-shadow: 0 0 0 1px var(--el-color-primary) inset;
		}
	}
}
.comments-header {
	.active {
		color: var(--el-color-primary);
		font-size: var(--el-font-size-medium);
	}
}
:deep(.el-drawer__footer) {
	box-shadow: 0px -4px 10px 0px rgb(0 0 0 / 10%);
	border-radius: 0px 0px 8px 0px;
	padding: 10px 20px;
}
</style>