job-pc/src/views/company/basic/index.vue

<template>
	<div class="content-padding-inline" style="margin: 30px 0;">
		<a-row :gutter="[10,10]" type="flex" justify="center">
			<a-col span="18">
				<a-row :gutter="20">
					<a-col span="4">
						<div style="position: fixed; top: 90px; z-index:99;">
							<a-anchor style="width: 210px !important;" :get-container="getContainer" :target-offset="50" :items="menu_list"
								@click="anchorClick"></a-anchor>
						</div>
					</a-col>
					<a-col span="20">
						<div style="width: 100%;background-color: #fff;padding: 0 20px;border-radius: 8px;">
							<div ref="abc" class="abc" style="height: 100vh;overflow: auto;">
								<a-space direction="vertical" justify="space-between" :size="36"
									style="width: 100% !important;">
									<div id="basic">
										<a-typography style="margin-top: 20px;">
											<a-flex align="center" justify="space-between">
												<a-typography-title :level="4">
													<div class="text-decoration">
														<div class="text-content">基本资料</div>
													</div>
												</a-typography-title>
												<FormOutlined @click="edit('basic')" v-if="editObj.basic"
													style="color: #4FBE70;font-size: 24px;" />
												<PlusCircleOutlined @click="edit('basic')" v-else
													style="color: #4FBE70;font-size: 24px;" />
											</a-flex>
											<a-typography-paragraph>
												<company-basic :form_state="editObj.basic"
													@quitEdit="quitEdit"></company-basic>
											</a-typography-paragraph>
										</a-typography>
									</div>
									<div id="department">
										<a-typography style="margin-top: 20px;">
											<a-flex align="center" justify="space-between">
												<a-typography-title :level="4">
													<div class="text-decoration">
														<div class="text-content">企业部门</div>
													</div>
												</a-typography-title>
												<FormOutlined @click="edit('department')" v-if="editObj.department"
													style="color: #4FBE70;font-size: 24px;" />
												<PlusCircleOutlined @click="edit('department')" v-else
													style="color: #4FBE70;font-size: 24px;" />
											</a-flex>
											<a-typography-paragraph>
												<company-department :form_state="editObj.department"
													@quitEdit="quitEdit"
													@editEdit="edit('department')"></company-department>
											</a-typography-paragraph>
										</a-typography>
									</div>
									<div id="licence">
										<a-typography style="margin-top: 20px;">
											<a-flex align="center" justify="space-between">
												<a-typography-title :level="4">
													<div class="text-decoration">
														<div class="text-content">营业执照</div>
													</div>
												</a-typography-title>
												<FormOutlined @click="edit('licence')" v-if="editObj.licence"
													style="color: #4FBE70;font-size: 24px;" />
												<PlusCircleOutlined @click="edit('licence')" v-else
													style="color: #4FBE70;font-size: 24px;" />
											</a-flex>
											<a-typography-paragraph>
												<company-licence :form_state="editObj.licence"
													@quitEdit="quitEdit"></company-licence>
											</a-typography-paragraph>
										</a-typography>

									</div>
									<div id="image">
										<a-typography style="margin-top: 20px;">
											<a-flex align="center" justify="space-between">
												<a-typography-title :level="4">
													<div class="text-decoration">
														<div class="text-content">企业相册</div>
													</div>
												</a-typography-title>
												<FormOutlined @click="edit('image')" v-if="editObj.image"
													style="color: #4FBE70;font-size: 24px;" />
												<PlusCircleOutlined @click="edit('image')" v-else
													style="color: #4FBE70;font-size: 24px;" />
											</a-flex>
											<a-typography-paragraph>
												<company-image :form_state="editObj.image"
													@quitEdit="quitEdit"></company-image>
											</a-typography-paragraph>
										</a-typography>

									</div>
								</a-space>
							</div>
						</div>
					</a-col>
				</a-row>
			</a-col>
		</a-row>
	</div>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, createVNode } from 'vue';
	import CompanyBasic from '@/components/company/information/basic/index.vue'
	import CompanyDepartment from '@/components/company/information/department/index.vue'
	import CompanyLicence from '@/components/company/information/licence/index.vue'
	import CompanyImage from '@/components/company/information/image/index.vue'
	import { FormOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
	import { useCommon } from '@/hooks/useCommon';
	let { store, dayjs, richOption, ExclamationCircleOutlined, Modal } = useCommon();
	let menu_list = ref([
		{ title: '基本资料', key: 1, href: '#basic' },
		{ title: '企业部门', key: 2, href: '#department' },
		{ title: '营业执照', key: 3, href: '#licence' },
		{ title: '企业相册', key: 4, href: '#image' }])


	let editObj = ref<Object>({
		basic: false,
		department: false,
		licence: false,
		image: false
	})

	let editingKey = ref(null); // 存储当前正在编辑的键

	const edit = (key) => {
		if (editingKey.value && editingKey.value !== key) {
			Modal.confirm({
				title: '有内容在进行编辑，是否要退出当前编辑',
				icon: createVNode(ExclamationCircleOutlined),
				content: '当前编辑内容不会保存',
				okText: '退出',
				cancelText: '取消',
				onOk() {
					editObj.value[editingKey.value] = false;
					editingKey.value = key;
					editObj.value[key] = true;
				},
				onCancel() {
					return;
				},
			});

			//    const confirmResult = window.confirm('您已在一个字段中进行编辑，继续将丢失未保存的更改，是否继续？');
			// console.log(confirmResult)
			// debugger
			//    if (!confirmResult) {
			//      return;
			//    }
			// debugger
			//    editObj.value[editingKey.value] = false;
		} else {
			editingKey.value = key;
			editObj.value[key] = true;
		}
	};

	// 退出编辑
	const quitEdit = () => {
		editObj.value[editingKey.value] = false;
		editingKey.value = null
		console.log(editObj.value)
	}

	const abc = ref(null)

	const getContainer = (val) => {
		return abc.value
	}

	const anchorClick = (e, link) => {
		e.preventDefault()
		if (link.href) {
			let element = document.getElementById(link.href)

			element && element.scrollIntoView({
				block: 'end',
				behavior: 'smooth',
			})
		}
	}
</script>

<style scoped>
	:deep(.ant-anchor) {
		background-color: #ffffff !important;
		border-radius: 8px !important;
		padding-inline-start: 2px;
	}

	:deep(.ant-anchor::before) {
		border-inline-start: 0 !important;
	}

	:deep(.ant-anchor-ink) {
		background-color: #ffffff !important;
	}

	:deep(.ant-anchor-link) {
		padding: 10px !important;
	}

	:deep(.ant-anchor-link-title-active) {
		font-weight: bold !important;
		color: #4FBE70 !important;
	}

	.text-decoration {
		position: relative;
		display: inline-block;
		overflow: visible;
	}

	.text-decoration::before {
		content: '';
		width: 6px;
		height: 22px;
		background-color: #4FBE70;
		position: absolute;
		top: 4px
	}

	.text-content {
		position: relative;
		margin-left: 20px;
	}
</style>