hotline-web/src/views/auxiliary/notice/component/Notice-edit.vue

<template>
	<el-dialog v-model="state.dialogVisible" width="50%" draggable :title="dialogTitle" @close="close">
		<el-form :model="state.ruleForm" label-width="110px" ref="ruleFormRef" v-loading="loading">
			<template v-if="dialogTitle === '编辑通知'">
				<el-row :gutter="10">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="通知类型" prop="circularObj" :rules="[{ required: true, message: '请选择通知类型型', trigger: 'change' }]">
							<el-select
								v-model="state.ruleForm.circularObj"
								placeholder="请选择通知类型型"
								value-key="dicDataValue"
								class="w100"
								@change="
									(e) => {
										state.ruleForm.circularTypeId = e.dicDataValue;
										state.ruleForm.circularTypeName = e.dicDataName;
									}
								"
							>
								<el-option v-for="item in circularTypeOptions" :value="item" :key="item.dicDataValue" :label="item.dicDataName" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="通知标题" prop="title" :rules="[{ required: true, message: '请输入通知标题', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.title" placeholder="请输入通知标题" clearable show-word-limit maxlength="200"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="必须阅读" prop="isMustRead" :rules="[{ required: true, message: '请选择必须阅读', trigger: 'change' }]">
							<el-radio-group v-model="state.ruleForm.isMustRead">
								<el-radio :label="true">是</el-radio>
								<el-radio :label="false">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="失效时间" prop="lostEfficacyTime" :rules="[{ required: true, message: '请选择失效时间', trigger: 'change' }]">
							<el-date-picker
								v-model="state.ruleForm.lostEfficacyTime"
								type="datetime"
								placeholder="请选择失效时间"
								value-format="YYYY-MM-DD[T]HH:mm:ss"
								class="w100"
								:disabled-date="disabledDate"
								popper-class="no-atTheMoment"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="来源单位" prop="sourceOrgId" :rules="[{ required: true, message: '请选择来源单位', trigger: 'change' }]">
							<el-cascader
								:options="orgsOptions"
								filterable
								:props="{ value: 'id', label: 'name', emitPath: false, checkStrictly: true }"
								placeholder="请选择来源单位"
								class="w100"
								v-model="state.ruleForm.sourceOrgId"
								ref="orgRef"
								@change="changeOrg"
							>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="通知内容" prop="content" :rules="[{ required: true, message: '请输入通知内容', trigger: 'blur' }]">
							<editor v-model:get-html="state.ruleForm.content" placeholder="请输入通知内容" height="350px" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="通知对象" prop="circularType" :rules="[{ required: true, message: '请选择通知对象', trigger: 'change' }]">
              <el-radio-group v-model="state.ruleForm.circularType">
                <el-radio :label="item.key" v-for="item in circularTypeEnum" :key="item.key">{{item.value}}</el-radio>
              </el-radio-group>
						</el-form-item>
					</el-col>
					<el-col
						:xs="24"
						:sm="24"
						:md="24"
						:lg="24"
						:xl="24"
						v-if="state.ruleForm.circularType === 1"
						style="border: var(--el-border); border-radius: var(--el-border-radius-base)"
						class="pd15 mb20"
					>
						<div class="flex-center-align mb10">
							<el-input v-model="state.searchContent" placeholder="通知人姓名/账号" class="w100" clearable>
								<template #prefix>
									<SvgIcon name="ele-Search" />
								</template>
							</el-input>
						</div>
						<div style="height: 400px">
							<el-auto-resizer>
								<template #default="{ height, width }">
									<el-table-v2 :columns="columns" :data="tables" :width="width" :height="height" fixed />
								</template>
							</el-auto-resizer>
						</div>
					</el-col>
					<el-col
						:xs="24"
						:sm="24"
						:md="24"
						:lg="24"
						:xl="24"
						v-if="state.ruleForm.circularType === 2"
						style="border: var(--el-border); border-radius: var(--el-border-radius-base)"
						class="pd15 mb20"
					>
						<el-input v-model="query" placeholder="部门名称" @input="onQueryChanged" clearable class="mb10" />
						<el-tree-v2
							:data="circularOrgOptions"
							:props="{ value: 'id', label: 'name' }"
							show-checkbox
							:height="400"
							ref="treeSelectRef"
							:filter-method="filterMethod"
						/>
					</el-col>
				</el-row>
			</template>
			<template v-if="dialogTitle === '编辑公告'">
				<el-row :gutter="10">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="公告类型" prop="bulletinObj" :rules="[{ required: true, message: '请选择公告类型', trigger: 'change' }]">
							<el-select
								v-model="state.ruleForm.bulletinObj"
								placeholder="请选择公告类型"
								value-key="dicDataValue"
								class="w100"
								@change="
									(e) => {
										state.ruleForm.bulletinTypeId = e.dicDataValue;
										state.ruleForm.bulletinTypeName = e.dicDataName;
									}
								"
							>
								<el-option v-for="item in bulletinTypeOptions" :value="item" :key="item.dicDataValue" :label="item.dicDataName" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="公告标题" prop="title" :rules="[{ required: true, message: '请输入公告标题', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.title" placeholder="请输入公告标题" clearable show-word-limit maxlength="200"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="失效时间" prop="loseEfficacyTime" :rules="[{ required: true, message: '请选择失效时间', trigger: 'change' }]">
							<el-date-picker
								v-model="state.ruleForm.loseEfficacyTime"
								type="datetime"
								placeholder="请选择失效时间"
								value-format="YYYY-MM-DD[T]HH:mm:ss"
								class="w100"
								:disabled-date="disabledDate"
								popper-class="no-atTheMoment"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="来源单位" prop="sourceOrgId" :rules="[{ required: true, message: '请选择来源单位', trigger: 'change' }]">
							<el-cascader
								:options="orgsOptions"
								filterable
								:props="{ value: 'id', label: 'name', emitPath: false, checkStrictly: true }"
								placeholder="请选择来源单位"
								class="w100"
								v-model="state.ruleForm.sourceOrgId"
								ref="orgRef"
								@change="changeOrg"
							>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="公告范围" prop="pushRangesArray" :rules="[{ required: true, message: '请选择公告范围', trigger: 'change' }]">
							<el-checkbox-group v-model="state.ruleForm.pushRangesArray">
								<el-checkbox :label="item" v-for="item in pushRangesOptions" :key="item.dicDataValue">{{ item.dicDataName }}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="公告内容" prop="content" :rules="[{ required: true, message: '请输入公告内容', trigger: 'blur' }]">
							<editor v-model:get-html="state.ruleForm.content" placeholder="请输入公告内容" height="350px" />
						</el-form-item>
					</el-col>
				</el-row>
			</template>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="closeDialog" class="default-button">取 消</el-button>
				<el-button type="primary" @click="onSubmit(ruleFormRef)" :loading="loading">确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="tsx" name="noticeDetail">
import { reactive, ref, defineAsyncComponent, computed, FunctionalComponent, unref, nextTick } from 'vue';
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import {
	bulletinAddBaseData,
	bulletinDetail,
	circularUpdate,
	circularAddBaseData,
	circularDetail,
	getAllUsers,
	bulletinUpdate,
} from '/@/api/auxiliary/notice';
import { throttle } from '/@/utils/tools';
import { CheckboxValueType, ElMessage, FormInstance } from 'element-plus';
import { disabledDate } from '/@/utils/constants';
// 引入组件
const Editor = defineAsyncComponent(() => import('/@/components/Editor/index.vue')); // 富文本编辑器
// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);
const props = defineProps({
	commonType: {
		type: Array,
		default: () => [],
	},
});
// 定义变量内容
const state = reactive<any>({
	dialogVisible: false,
	loading: false,
	ruleForm: {
		isMustRead: false, // 是否必须阅读
	},
	searchContent: '', // 搜索内容
});
let loading = ref<boolean>(false); // 加载状态
// 打开弹窗
const ruleFormRef = ref<RefType>();
const dialogTitle = ref<string>('编辑通知');

const bulletinTypeOptions = ref<EmptyArrayType>([]); // 公告类型
const circularTypeOptions = ref<EmptyArrayType>([]); // 通知类型
const circularTypeEnum = ref<EmptyArrayType>([]); // 通知对象
const pushRangesOptions = ref<EmptyArrayType>([]); // 公告范围
const orgsOptions = ref<EmptyArrayType>([]); // 来源单位
const circularOrgOptions = ref<EmptyArrayType>([]); // 通知对象 部门
const userTables = ref<EmptyArrayType>([]); // 通知对象 个人

const openDialog = async (row: any, type: string) => {
	dialogTitle.value = type;
	loading.value = true;
	state.dialogVisible = true;
	switch (type) {
		case '编辑通知':
			try {
				const [circularResponse, userResponse, circularDetailResponse] = await Promise.all([
					circularAddBaseData(),
					getAllUsers(),
					circularDetail(row.id),
				]);
				circularTypeOptions.value = circularResponse.result?.circularType ?? [];
				orgsOptions.value = circularResponse.result?.orgsOptions ?? [];
				circularTypeEnum.value = circularResponse.result?.circularTypeEnum ?? [];
				circularOrgOptions.value = circularResponse.result?.orgsOptions ?? [];
				userTables.value = userResponse.result ?? [];
				state.ruleForm = circularDetailResponse.result ?? {};
				state.ruleForm.circularObj = {
					dicDataValue: circularDetailResponse.result?.circularTypeId,
					dicDataName: circularDetailResponse.result?.circularTypeName,
				};
				if (state.ruleForm.circularType === 1) {
					// 个人
					for (let i of state.ruleForm.circularReadGroups) {
						for (let j of userTables.value) {
							if (i.userId === j.id) {
								j.checked = true;
							}
						}
					}
				} else if (state.ruleForm.circularType === 2) {
					// 部门
					await nextTick();
					const keys = state.ruleForm.circularReadGroups.map((item: any) => {
						return item.orgId;
					});
					treeSelectRef.value.setExpandedKeys(keys);
					setTimeout(() => {
						treeSelectRef.value.setCheckedKeys(keys);
					}, 100);
				}
				loading.value = false;
			} catch (error) {
				console.log(error);
				loading.value = false;
			}
			break;
		case '编辑公告':
			try {
				const [responseAnnounce, bulletinDetailResponse] = await Promise.all([bulletinAddBaseData(), bulletinDetail(row.id)]);
				bulletinTypeOptions.value = responseAnnounce.result?.bulletinType ?? [];
				pushRangesOptions.value = responseAnnounce.result?.pushRanges ?? [];
				orgsOptions.value = responseAnnounce.result?.orgsOptions ?? [];
				state.ruleForm = bulletinDetailResponse.result ?? {};
				state.ruleForm.bulletinObj = {
					dicDataValue: bulletinDetailResponse.result?.bulletinTypeId,
					dicDataName: bulletinDetailResponse.result?.bulletinTypeName,
				};
				state.ruleForm.pushRangesArray = [];
				const arrr = state.ruleForm.pushRanges.map((item: any) => {
					return item.key;
				});
				for (let i of arrr) {
					for (let j of pushRangesOptions.value) {
						if (i === j.dicDataValue) {
							state.ruleForm.pushRangesArray.push(j);
						}
					}
				}
				loading.value = false;
			} catch (error) {
				console.log(error);
				loading.value = true;
			}
			break;
	}
};
const orgRef = ref<RefType>(); //来源单位
const changeOrg = (type: string) => {
	const currentNode = orgRef.value.getCheckedNodes();
	state[type].sourceOrgName = currentNode[0].label;
};

type SelectionCellProps = {
	value: boolean;
	intermediate?: boolean;
	onChange: (value: CheckboxValueType) => void;
};

const SelectionCell: FunctionalComponent<SelectionCellProps> = ({ value, intermediate = false, onChange }) => {
	return <ElCheckbox onChange={onChange} modelValue={value} indeterminate={intermediate} />;
};
const tables = computed({
	get() {
		// 注意： filter() 不会改变原始数组。
		// 模糊搜索
		if (!state.searchContent) return userTables.value;
		// filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
		// 注意： filter() 不会对空数组进行检测。
		return userTables.value.filter((data: any) => {
			// some() 方法用于检测数组中的元素是否满足指定条件;
			// some() 方法会依次执行数组的每个元素：
			// 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
			// 如果没有满足条件的元素，则返回false。
			// 注意： some() 不会对空数组进行检测。
			// 注意： some() 不会改变原始数组。
			return Object.keys(data).some((key) => {
				// indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
				// 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
				return String(data[key]).toLowerCase().indexOf(state.searchContent) > -1;
			});
		});
	},
	set(val) {
		// userTables.value = val;
	},
});
const columns = [
	{
		key: 'selection',
		width: 50,
		align: 'center',
		cellRenderer: ({ rowData }) => {
			const onChange = (value: CheckboxValueType) => (rowData.checked = value);
			return <SelectionCell value={rowData.checked} onChange={onChange} />;
		},
		headerCellRenderer: () => {
			const _data = unref(tables);
			const onChange = (value: CheckboxValueType) =>
				(tables.value = _data.map((row) => {
					row.checked = value;
					return row;
				}));
			const allSelected = _data.every((row) => row.checked);
			const containsChecked = _data.some((row) => row.checked);

			return <SelectionCell value={allSelected} intermediate={containsChecked && !allSelected} onChange={onChange} />;
		},
	},
	{
		key: 'name',
		dataKey: 'name',
		title: '姓名',
		width: 300,
		align: 'center',
	},
	{
		key: 'name',
		dataKey: 'userName',
		title: '账号',
		width: 150,
		align: 'center',
	},
	{
		key: 'organization.name',
		dataKey: 'organization.name',
		title: '所属部门',
		width: 150,
		align: 'center',
	},
	{
		key: 'staffNo',
		dataKey: 'staffNo',
		title: '工号',
		width: 100,
		align: 'center',
	},
	{
		key: 'organization.orgTypeText',
		dataKey: 'organization.orgTypeText',
		title: '部门类别',
		width: 100,
		align: 'center',
	},
];

const query = ref('');
// 选择部门
const treeSelectRef = ref<RefType>();
const onQueryChanged = (query: string) => {
	treeSelectRef.value!.filter(query);
};
const filterMethod = (query: string, node: any) => {
	return node.name!.includes(query);
};
// 保存
const onSubmit = throttle(async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid: boolean) => {
		if (!valid) return;
		loading.value = true;
		switch (dialogTitle.value) {
			case '编辑通知':
				const checkedTable = tables.value?.filter((item: any) => item.checked).map((item: any) => item);
				const nodes = treeSelectRef.value?.getCheckedNodes();
				if (state.ruleForm.circularType === 1 && !checkedTable.length) {
					ElMessage.warning('请选择通知人');
					loading.value = false;
					return;
				}
				if (state.ruleForm.circularType === 2 && !nodes.length) {
					ElMessage.warning('请选择通知部门');
					loading.value = false;
					return;
				}
				let circularReadGroups: { userId: any; userName: any }[] | { orgId: any; orgName: any }[] = [];
				if (state.ruleForm.circularType === 1) {
					//个人
					circularReadGroups = checkedTable.map((item: any) => {
						return {
							userId: item.id,
							userName: item.name,
						};
					});
				} else if (state.ruleForm.circularType === 2) {
					// 部门
					circularReadGroups = nodes.map((item: any) => {
						return {
							orgId: item.id,
							orgName: item.name,
						};
					});
				}
				const circularRequest = {
					id: state.ruleForm.id,
					title: state.ruleForm.title,
					content: state.ruleForm.content,
					circularTypeId: state.ruleForm.circularTypeId,
					circularTypeName: state.ruleForm.circularTypeName,
					circularType: state.ruleForm.circularType,
					isMustRead: state.ruleForm.isMustRead,
					lostEfficacyTime: state.ruleForm.lostEfficacyTime,
					sourceOrgId: state.ruleForm.sourceOrgId,
					sourceOrgName: state.ruleForm.sourceOrgName,
					circularReadGroups,
				};
				circularUpdate(circularRequest)
					.then(() => {
						ElMessage.success('操作成功');
						emit('updateList');
						closeDialog();
						loading.value = false;
					})
					.catch((err: any) => {
						console.log(err);
						loading.value = false;
					});
				break;
			case '编辑公告':
				const pushRanges = state.ruleForm.pushRangesArray.map((item: any) => {
					return {
						key: item.dicDataValue,
						value: item.dicDataName,
					};
				});
				const bulletinRequest = {
					id: state.ruleForm.id,
					title: state.ruleForm.title,
					content: state.ruleForm.content,
					bulletinTypeId: state.ruleForm.bulletinTypeId,
					bulletinTypeName: state.ruleForm.bulletinTypeName,
					loseEfficacyTime: state.ruleForm.loseEfficacyTime,
					sourceOrgId: state.ruleForm.sourceOrgId,
					sourceOrgName: state.ruleForm.sourceOrgName,
					pushRanges,
				};
				bulletinUpdate(bulletinRequest)
					.then(() => {
						ElMessage.success('操作成功');
						emit('updateList');
						closeDialog();
						loading.value = false;
					})
					.catch((err: any) => {
						console.log(err);
						loading.value = false;
					});
				break;
		}
	});
}, 300);
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
const close = () => {
	ruleFormRef.value?.clearValidate();
	ruleFormRef.value?.resetFields();
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>