wisdomisitezwfront-web/src/views/goverment/notice/newNotification/index.vue

<template>
	<div class="table-box">
		<el-card shadow="never" class="topCard">
			<el-form class="noticeForm" :model="searchForm">
				<el-form-item label="通知类型">
					<el-select v-model="searchForm.type" placeholder="请选择">
						<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
					<el-button type="primary" style="margin-left: 20px" @click="handleSubmit">发送</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<div class="content">
			<div class="left-content">
				<el-form :model="leftForm" label-width="100">
					<el-form-item label="收件人">
						<div class="tag-input">
							<el-tag class="m-4" v-for="item in tags" :key="item" @close="handleClose(item)">{{
								item.realName || item.enterpriseName || item.projectName || item.acceptName
							}}</el-tag>
						</div>
					</el-form-item>
					<el-form-item label="主题">
						<el-input v-model="leftForm.title" placeholder="请输入主题" />
					</el-form-item>
					<el-form-item label="内容">
						<el-input
							type="textarea"
							:autosize="{ minRows: 18, maxRows: 18 }"
							v-model="leftForm.content"
							placeholder="请输入内容"
						/>
					</el-form-item>
					<el-form-item>
						<el-table
							class="table"
							:data="annexFileList"
							max-height="160"
							style="width: 100%"
							:header-cell-style="{ backgroundColor: '#D6E7FF', textAlign: 'center' }"
							:cell-style="{ textAlign: 'center' }"
							border
							size="small"
						>
							<el-table-column label="序号" type="index" width="80" />
							<el-table-column label="附件名称" prop="fileName">
								<template #default="{ row }">
									<el-input class="test" placeholder="请输入附件名称" v-model="row.fileName" />
								</template>
							</el-table-column>

							<el-table-column class-name="single-substr" label="操作">
								<template #default="{ row }">
									<el-button type="primary" @click="onUpload(row)" link>上传附件</el-button>
								</template>
							</el-table-column>
							<el-table-column width="120">
								<template #header>
									<el-button style="background: rgba(0, 139, 255, 0.9); color: #fff" @click="onAddData" round size="small"
										>添加</el-button
									>
								</template>

								<template #default="{ row }">
									<el-button type="danger" link @click="deleteRow(row)">删除</el-button>
								</template>
							</el-table-column>
							<!-- 表格无数据情况 -->
							<template #empty>
								<div class="table-empty">
									<slot name="empty">
										<img src="@/assets/images/notData.png" alt="notData" />
										<div>暂无数据</div>
									</slot>
								</div>
							</template>
						</el-table>
					</el-form-item>
				</el-form>
			</div>
			<div class="right-content">
				<div class="book-content">
					<span>通讯录</span>
					(点击人或单位后自动添加到收件人)
				</div>
				<el-input v-model="keyName" clearable style="width: 80%" placeholder="请输入姓名或者企业名称"> </el-input>
				<el-radio-group v-model="radio" style="margin: 10px 0">
					<el-radio v-for="item in option" :label="item.dictLabel" :key="item.dictCode">{{ item.dictValue }}</el-radio>
				</el-radio-group>
				<div>收件人</div>
				<el-checkbox-group class="flx-justify-column" v-model="value">
					<el-checkbox
						v-for="item in nameList"
						:label="item.realName || item.enterpriseName || item.projectName || item.acceptName"
						@change="onChange(item)"
					/>
				</el-checkbox-group>
			</div>
		</div>
		<FileUpload v-model="showFilesUpload" @update:files="handlechange" :files="current.files" :reset="true" />
	</div>
</template>

<script setup lang="ts" name="govNoticeNew">
import { ref, reactive, onMounted, watch, computed, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import { GlobalStore } from "@/stores";
import { useRoute, useRouter } from "vue-router";
import FileUpload from "@/components/FilesUpload/FilesUpload.vue";
import type { UploadFile } from "@/components/FilesUpload/FilesUpload.vue";
import { getDicList } from "@/api/modules/jxjview";
import { getgovNamelist, getentNamelist, getproNamelist } from "@/api/modules/goverment";
import { addNotice, noticeeditmyPost } from "@/api/modules/common";
import type { Options } from "@/views/goverment/approve/company/components/unit-table.vue";
import type { AnnexFile } from "@/api/types";

type AnnexFilesOptions = Options & {
	files: UploadFile[];
};

interface acceptNameList {
	accept: string;
	acceptType: number;
}

const current = ref<AnnexFilesOptions>({} as AnnexFilesOptions);

const route = useRoute();

const store = GlobalStore();
const radio = ref(0);
const keyName = ref("");
const showFilesUpload = ref(false);
const searchForm = ref({
	type: ""
});
const leftForm = ref({
	title: "",
	content: ""
});
const checked = ref(false);
const option = ref([
	{ dictValue: "内部人员", dictLabel: 0, dictCode: 1 },
	{ dictValue: "工程", dictLabel: 1, dictCode: 2 }
]);
const typeList = ref([
	{ label: "通知", value: 0 },
	{ label: "邮件", value: 1 },
	{ label: "材料推送", value: 2 }
]);
const annexFileList = ref([{}]);
const tags = ref<acceptNameList[]>([]);
const value = ref([]);
const govList = ref([]);
const entList = ref([]);
const proList = ref([]);

const handleClose = (row: acceptNameList) => {
	tags.value.splice(tags.value.indexOf(row), 1);
};

const handlechange = e => {
	current.value.files = e.map(item => {
		item.label = current.value.dictLabel;
		return item;
	});
};
// 通讯录过滤寻找匹配合适项
let nameList = computed(val => {
	return (radio.value === 2 ? govList.value : radio.value === 3 ? entList.value : proList.value).filter(val => {
		return (
			(radio.value === 2 ? val.realName : radio.value === 3 ? val.enterpriseName : val.projectName).indexOf(keyName.value) !== -1
		);
	});
});

const onChange = (row: any) => {
	tags.value = tags.value.includes(row) ? tags.value.filter(item => item !== row) : [...tags.value, row];

	console.log(tags.value);
};

const onAddData = () => {
	annexFileList.value?.push({
		fileName: ""
	});
};

const deleteRow = row => {
	const i = annexFileList.value?.indexOf(row);
	i != null && annexFileList.value?.splice(i, 1);
};

// 上传附件按钮
const onUpload = async row => {
	showFilesUpload.value = true;
	current.value = row;
};
// 点击发送按钮
const handleSubmit = async () => {
	const fileList: AnnexFile[] = [];
	annexFileList.value.forEach(item => {
		const files = item.files;

		files.forEach(file => {
			const curr: AnnexFile = {};
			curr.createTime = file.response?.createTime;
			curr.extendName = file.response?.ext;
			// TODO: 上传文件后, 后端返回两个 name 字段, 一个后端存储的 filename, 一个文件本身的 originalFilename
			curr.fileName = file.response?.originalFilename;
			// curr.fileName = file.response?.filename;
			// curr.fileId = file.response && +file.response.id;
			curr.fileSize = `${file.response?.size || ""}`;
			curr.fileUrl = file.response?.url;

			curr.label = file.label;

			fileList.push(curr);
		});

		item.files = files;
	});
	const acceptsList: acceptNameList[] = [];
	tags.value.forEach(item => {
		const curr: acceptNameList = {};
		if (item.sn) {
			(curr.accept = item.userId), (curr.acceptType = 2);
		} else if (item.enterpriseSn) {
			(curr.accept = item.enterpriseSn), (curr.acceptType = 3);
		} else {
			(curr.accept = item.projectSn), (curr.acceptType = 4);
		}
		acceptsList.push(curr);
	});

	if (store.Message) {
		const editFiles = [];
		annexFileList.value.forEach(item => {
			let files = item.files;
			files.forEach(j => {
				editFiles.push(j.response);
			});
		});
		await noticeeditmyPost({
			accepts: tags.value,
			annexFileList: editFiles,
			content: leftForm.value.content,
			title: leftForm.value.title,
			type: searchForm.value.type,
			noticeId: route.query.noticeId
		});
		ElMessage.success("编辑成功");
		delete store.Message;
	} else {
		await addNotice({
			accepts: acceptsList,
			annexFileList: fileList,
			content: leftForm.value.content,
			title: leftForm.value.title,
			type: searchForm.value.type
		});
		ElMessage.success("发送成功");
	}
	reset();
};

// 提交后重置
const reset = () => {
	tags.value = [];
	searchForm.value.type = "";
	leftForm.value = { title: "", content: "" };
	annexFileList.value = [{ fileName: "" }];
	keyName.value = "";
	value.value = [];
};

onMounted(async () => {
	// @ts-expect-error
	const { result } = await getDicList({ dictType: "release_scope" });
	// @ts-expect-error
	option.value = result;
	radio.value = option.value[0].dictLabel;
	const res = await getgovNamelist({});
	// @ts-expect-error
	govList.value = res.result;
	const res1 = await getentNamelist({});
	// @ts-expect-error
	entList.value = res1.result;
	const res2 = await getproNamelist({});
	// @ts-expect-error
	proList.value = res2.result;

	if (store.Message) {
		// searchForm.value.type = store.Message.type;
		searchForm.value.type = typeList.value[store.Message.type];
		leftForm.value = store.Message;
		annexFileList.value.forEach(item => {
			const currFiles = store.Message.annexFileList.filter(j => {
				return j.label == item.fileName;
			});
			const files = [];

			currFiles.forEach(curr => {
				annexFileList.value.fileName = curr.fileName;
				files.push({
					id: curr.fileId,
					name: curr.fileName,
					size: +curr.fileSize,
					type: "image/png",
					response: { ...curr, contentType: "image/png" }
				});
			});

			item.files = files;
			item.fileName = store.Message?.title;
		});

		tags.value = store.Message.acceptList;

		tags.value.forEach(item => {
			govList.value.concat(entList.value, proList.value).find(val => {
				if (item.accept === val.userId || item.accept === val.enterpriseSn || item.accept === val.projectSn) {
					value.value.push(val.realName || val.enterpriseName || val.projectName || val.acceptName);
				}
			});
		});
		// value.value = store.Message.acceptList;
		// current.value.files = store.Message.annexFileList;
	}
});

onUnmounted(() => {
	reset();
	delete store.Message;
});
</script>

<style lang="scss" scoped>
@import "./index.scss";
:deep(.el-card__body) {
	padding: 12px 0 0px 36px;
}
.test :deep(.el-input__wrapper) {
	box-shadow: 0 0 0 0;
}
.test :deep(.el-input__inner) {
	text-align: center;
}
</style>