bj-maritime-dcds-web/src/views/addressBook/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"
				>
					<el-row :gutter="12">
						<template v-for="item in modalConfig.formItems" :key="item.prop">
							<el-col :span="item.span || 8">
								<el-form-item :label="item.label" :prop="item.prop">
									<template v-if="item.type === 'input'">
										<el-input
											:disabled="item.disabled"
											v-model="formData[item.prop]"
											:placeholder="item.placeholder"
										/>
									</template>
									<template v-if="item.type === 'number'">
										<el-input
											v-model="formData[item.prop]"
											type="number"
											:min="0"
											:max="999999999999"
											:disabled="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="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="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="item.disabled"
										/>
									</template>
									<template v-if="item.type === 'textMessage'">
										<el-radio-group :disabled="item.disabled" v-model="formData[item.prop]">
											<el-radio value="y">是</el-radio>
											<el-radio value="n">否</el-radio>
										</el-radio-group>
									</template>
									<template v-if="item.type === 'userName'">
										<el-select
											:disabled="item.disabled"
											v-model="formData[item.prop]"
											multiple
											filterable
											remote
											reserve-keyword
											:placeholder="item.placeholder"
											:remote-method="remoteuserNameMethod"
											:loading="userLoading"
											style="width: 100%"
										>
											<el-option
												v-for="item in options"
												:key="item.value"
												:label="item.label"
												:value="item.value"
											/>
										</el-select>
									</template>
								</el-form-item>
							</el-col>
						</template>
					</el-row>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="handleExcel(ruleFormRef)">返回</el-button>
					<el-button type="primary" v-show="dialogLook == false" @click="handleConfirmClick(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';
// 定义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);

interface userNameListItem {
	value: string;
	label: string;
}
const options = ref<userNameListItem[]>([]);
const userLoading = ref(false);
const remoteuserNameMethod = (query: string) => {
	if (query) {
		// userLoading.value = true;
	} else {
		options.value = [];
	}
};

onMounted(async () => {});

// 定义数据绑定
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);
// 新建或者编辑
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.numberType === '2') {
				if (m.prop === initialForm[m.prop]) {
					initialForm[m.prop] = (0.0).toFixed(2);
				}
			} else if (m.numberType === '1') {
				if (m.porp === initialForm[m.porp]) {
					initialForm[m.prop] = Math.trunc(0);
				}
			}
		});
		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) {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		if (valid) {
			dialogVisible.value = false;
			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);
}

defineExpose({
	setDialogVisible,
	onPageDetail,
});
</script>

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