bj-maritime-dcds-web/src/views/notificationInfoManage/mattersmanage/components/detail.vue

<template>
	<div class="modal">
		<el-dialog
			v-model="dialogVisible"
			:title="dialogTitle"
			:width="modalConfig.dialogWidth || '80%'"
			center
			@close="handleExcel(ruleFormRef)"
			:close-on-click-modal="false"
		>
			<template #header>
				<pageTitle :title="dialogTitle"></pageTitle>
			</template>
			<div class="form">
				<el-form
					ref="ruleFormRef"
					:rules="modalConfig.formRules"
					label-suffix=":"
					:model="formData"
					:label-width="modalConfig.labelWidth || '100px'"
					size="large"
					autocomplete="off"
				>
					<el-row :gutter="12">
						<template v-for="item in modalConfig.formItems" :key="item.prop">
							<el-col :span="item.span || 24">
								<el-form-item :label="item.label" :prop="item.prop">
									<template v-if="item.type === 'input'">
										<el-input
											:disabled="dialogLook || item.disabled"
											v-model="formData[item.prop]"
											:placeholder="item.placeholder"
										/>
									</template>
									<template v-if="item.type === 'textarea'">
										<el-input
											:disabled="dialogLook || item.disabled"
											type="textarea"
											v-model="formData[item.prop]"
											:autosize="{ minRows: 3 }"
											show-word-limit
											:maxlength="item.maxlength || 200"
											:placeholder="item.placeholder"
										/>
									</template>
									<template v-if="item.type === 'number'">
										<el-input
											v-model="formData[item.prop]"
											type="number"
											:min="0"
											:max="999999999999"
											:disabled="dialogLook || item.disabled"
											:placeholder="item.placeholder"
										/>
									</template>
									<template v-if="item.type === 'select'">
										<el-select
											v-model="formData[item.prop]"
											:placeholder="item.placeholder"
											style="width: 100%"
											:disabled="dialogLook || item.disabled"
										>
											<template v-for="(val, index) in item.options" :key="index">
												<el-option :value="val.value" :label="val.label" />
											</template>
										</el-select>
									</template>
									<template v-if="item.type === 'date-picker'">
										<el-date-picker
											:type="item.dateType || 'daterange'"
											range-separator="-"
											start-placeholder="开始时间"
											end-placeholder="结束时间"
											v-model="formData[item.prop]"
											:disabled="dialogLook || item.disabled"
										/>
									</template>
									<template v-if="item.type === 'date'">
										<el-date-picker
											type="date"
											:placeholder="item.placeholder"
											style="width: 100%"
											v-model="formData[item.prop]"
											:disabled="dialogLook || item.disabled"
										/>
									</template>

									<!-- 发布单位 -->
									<template v-if="item.type === 'publishingUnit'">
										<el-tree-select
											v-model="formData[item.prop]"
											:data="treeData"
											:render-after-expand="false"
											:disabled="dialogLook || item.disabled"
											node-key="id"
											filterable
											:placeholder="item.placeholder"
											style="width: 100%"
										/>
									</template>

									<!-- 发布状态 -->
									<template v-if="item.type === 'releaseStatus'">
										<el-select
											v-model="formData[item.prop]"
											:placeholder="item.placeholder"
											style="width: 100%"
											:disabled="dialogLook || item.disabled"
										>
											<template v-for="(val, index) in bj_nl_released_status" :key="index">
												<el-option :value="val.value" :label="val.label" />
											</template>
										</el-select>
									</template>
									<!-- 通报类型 -->
									<template v-if="item.type === 'notificationType'">
										<el-select
											v-model="formData[item.prop]"
											:placeholder="item.placeholder"
											style="width: 100%"
											:disabled="dialogLook || item.disabled"
										>
											<template v-for="(val, index) in bj_notification_type" :key="index">
												<el-option :value="val.value" :label="val.label" />
											</template>
										</el-select>
									</template>
									<!-- 通报事项类别 -->
									<template v-if="item.type === 'conm'">
										<el-select
											v-model="formData[item.prop]"
											:placeholder="item.placeholder"
											style="width: 100%"
											:disabled="dialogLook || item.disabled"
										>
											<template v-for="(val, index) in bj_category_onm" :key="index">
												<el-option :value="val.value" :label="val.label" />
											</template>
										</el-select>
									</template>
									<!-- 发出单位 -->
									<template v-if="item.type === 'deliveryUnit'">
										<el-select
											v-model="formData[item.prop]"
											:placeholder="item.placeholder"
											filterable
											style="width: 100%"
											:disabled="dialogLook || item.disabled"
										>
											<template v-for="(val, index) in bj_lssuing_unit" :key="index">
												<el-option :value="val.value" :label="val.label" />
											</template>
										</el-select>
									</template>
								</el-form-item>
							</el-col>
						</template>
					</el-row>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" v-show="dialogLook == false" @click="handleConfirmClick(ruleFormRef, '1')"
						>保存</el-button
					>
					<el-button type="primary" v-show="dialogLook == false" @click="handleConfirmClick(ruleFormRef, '2')"
						>提交</el-button
					>
					<el-button @click="handleExcel(ruleFormRef)">返回</el-button>

					<slot name="button"></slot>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="modal">
import { reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus';
import useSystemStore from '@/store/main';
import { TreeOptions } from '@/types/global';
import dayjs from 'dayjs';
import { outTypeList, outDeptTree } from '@/libs/commonMeth';
const bj_notification_type = outTypeList('bj_notification_type'); //通报类型
const bj_category_onm = outTypeList('bj_category_onm'); //通报事项类别
const bj_nl_released_status = outTypeList('bj_nl_released_status'); //通报事项清单发布状态
const bj_lssuing_unit = outTypeList('bj_lssuing_unit'); //发出单位

// 定义props
interface IProps {
	modalConfig: {
		pageName: string;
		addTitle: string;
		editTitle: string;
		detailTitle: string;
		dialogWidth: string;
		labelWidth: string;
		formItems: any[];
		formRules: object;
		pageListParams?: object; //新增一个对象，用来传给特殊的列表接口刷新页面（非必传）
	};
	otherInfo?: any;
}

const props = defineProps<IProps>();

const dialogVisible = ref(false);
const isEdit = ref(false);

const ruleFormRef = ref<FormInstance>();

const systemStore = useSystemStore();

const { pageDetailInfo, pageOperateType } = storeToRefs(systemStore);

// 定义数据绑定
const initialForm: any = {};
for (const item of props.modalConfig.formItems) {
	initialForm[item.prop] = item.initialValue ?? '';
}

let formData = ref(JSON.parse(JSON.stringify(initialForm)));

const dialogTitle = ref();
const dialogLook = ref(false);
const nowStr = dayjs().format('YYYY-MM-DD');
// 新建或者编辑
async function setDialogVisible(isNew: boolean = true, check: boolean = false) {
	dialogVisible.value = true;
	ruleFormRef.value?.resetFields();
	await nextTick();
	dialogLook.value = false;
	if (!isNew) {
		watch(pageDetailInfo, newVal => {
			formData.value = pageDetailInfo.value;
		});

		if (check) {
			dialogTitle.value = props.modalConfig.detailTitle;
			dialogLook.value = true;
			systemStore.getDetailType('detail');
		} else {
			dialogTitle.value = props.modalConfig.editTitle;
			systemStore.getDetailType('edit');
		}
	} else {
		props.modalConfig.formItems.map((m: any) => {
			if (m.prop === 'addName') {
				initialForm[m.prop] = '张浩楠';
			}
			if (m.prop === 'publishingUnit') {
				initialForm[m.prop] = '100';
			}
			if (m.prop === 'addDate') {
				initialForm[m.prop] = nowStr;
			}
			if (m.prop === 'releaseStatus') {
				initialForm[m.prop] = '1';
			}
		});
		formData.value = JSON.parse(JSON.stringify(initialForm));
		await nextTick();
		dialogTitle.value = props.modalConfig.addTitle;
		systemStore.detailPageEval(initialForm);
		systemStore.getDetailType('add');
	}
	isEdit.value = !isNew;
}
// 点击确定
function handleConfirmClick(formEl: FormInstance | undefined, status: string) {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		if (valid) {
			dialogVisible.value = false;
			// 可用状态 编辑始终 都是可用
			if (formData.value.releaseStatus != '2') {
				formData.value.releaseStatus == status;
			}

			let data = { ...formData.value };
			if (props.otherInfo) {
				data = { ...data, ...props.otherInfo };
			}
			if (!isEdit.value) {
				systemStore.newPageDataAction(props.modalConfig.pageName, data, props.modalConfig.pageListParams);
			} else {
				if (pageOperateType.value === 'edit') {
					systemStore.editPageDataAction(props.modalConfig.pageName, data, props.modalConfig.pageListParams);
				}
			}
		} else {
			console.log('error submit!', fields);
		}
	});
}

// 取消
function handleExcel(formEl: FormInstance | undefined) {
	dialogVisible.value = false;
	if (!formEl) return;
	formEl.resetFields();
}

// 获取详情
function onPageDetail(urlId: number | [] | string) {
	systemStore.detailPageDataAction(props.modalConfig.pageName, urlId);
}
const treeData = ref<TreeOptions[]>();
onMounted(async () => {
	treeData.value = await outDeptTree();
});
defineExpose({
	setDialogVisible,
	onPageDetail,
});
</script>

<style scoped lang="scss">
.form {
	padding: 10px 30px;
}
</style>