suzhou-jichuang-lanhai
/
Gyyq-Upstairs
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

项目信息管理详情优化

Browse Source
yfy
项洋 1 week ago
parent f8b2ec3593
commit 5b5a72f378
2 changed files with 586 additions and 474 deletions
Show Stats Download Patch File Download Diff File

8
src/views/manage-add/index.vue
Unescape View File

@ -36,6 +36,9 @@
mode="horizontal" mode="horizontal"
@select="scrollToSection" @select="scrollToSection"
class="custom-menu" class="custom-menu"
ref="menuRef"
@click="handleMenuClick"
@mousedown.native.prevent
> >
<el-menu-item <el-menu-item
v-for="(item, index) in sections" v-for="(item, index) in sections"
@ -493,6 +496,11 @@ export default {
} }
} }
}, },
handleMenuClick() {
if (this.$refs.menuRef) {
this.$refs.menuRef.$el.blur();
}
},
}, },
}; };
</script> </script>

330
src/views/manage-info/index.vue
Unescape View File

@ -2,37 +2,64 @@
<div class="bigone"> <div class="bigone">
<!-- 标题和目录 --> <!-- 标题和目录 -->
<xiding> <xiding>
<div style="padding: 0 0.9rem 0 0.5rem;"> <div style="padding: 0 0.9rem 0 0.5rem">
<div class="containerheadone" id="listtop"> <div class="containerheadone" id="listtop">
<Title :basicInfo="basicInformation"></Title> <Title :basicInfo="basicInformation"></Title>
<el-button type="primary" size="medium" plain <el-button
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="goBack"> type="primary"
size="medium"
plain
style="
border: none;
background-color: rgba(43, 98, 241, 0.1);
color: #2b62f1;
"
@click="goBack"
>
返回 返回
</el-button> </el-button>
</div> </div>
<!-- 目录 --> <!-- 目录 -->
<div class="containerhead"> <div class="containerhead">
<el-menu :default-active="activeSection" mode="horizontal" @select="scrollToSection" <el-menu
class="custom-menu"> :default-active="activeSection"
<el-menu-item v-for="(item, index) in sections" :key="index" :index="item.id" mode="horizontal"
class="custom-menu-item"> @select="scrollToSection"
ref="menuRef"
class="custom-menu"
@click="handleMenuClick"
@mousedown.native.prevent
>
<el-menu-item
v-for="(item, index) in sections"
:key="index"
:index="item.id"
class="custom-menu-item"
>
{{ item.label }} {{ item.label }}
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
</div> </div>
</div> </div>
</xiding> </xiding>
<div class="containerbody" v-if="isContainerVisible" @srorll="handleScroll"> <div class="containerbody" v-if="isContainerVisible" @scroll="handleScroll">
<!-- 基本信息 --> <!-- 基本信息 -->
<div id="basic"> <div id="basic">
<Basic :action="action" :basicInfo="basicInformation" <Basic
@update-data="handleDataUpdate('basicInformation', $event)"> :action="action"
:basicInfo="basicInformation"
@update-data="handleDataUpdate('basicInformation', $event)"
>
</Basic> </Basic>
</div> </div>
<!-- 规划信息 --> <!-- 规划信息 -->
<div id="programme"> <div id="programme">
<Programme :action="action" :planInfo="planInformation" :xmId="projectId" <Programme
@update-data="handleDataUpdate('planInformation', $event)"> :action="action"
:planInfo="planInformation"
:xmId="projectId"
@update-data="handleDataUpdate('planInformation', $event)"
>
</Programme> </Programme>
</div> </div>
<!-- 建筑信息 --> <!-- 建筑信息 -->
@ -41,8 +68,11 @@
</div> </div>
<!-- 要素模型信息 --> <!-- 要素模型信息 -->
<div id="models"> <div id="models">
<Models :action="action" :wysmxInfo="wysmxInformations" <Models
@updata-data="handleDataUpdate('wysmxInformations', $event)"> :action="action"
:wysmxInfo="wysmxInformations"
@updata-data="handleDataUpdate('wysmxInformations', $event)"
>
</Models> </Models>
</div> </div>
<!-- 月度进展信息 --> <!-- 月度进展信息 -->
@ -51,8 +81,12 @@
</div> </div>
<!-- 企业入驻信息 --> <!-- 企业入驻信息 -->
<div id="companyenter"> <div id="companyenter">
<Companyenter :xmId="projectId" :action="action" :qyrzInfo="qyrzInformation" <Companyenter
@update-data="handleDataUpdate('qyrzInformation', $event)"> :xmId="projectId"
:action="action"
:qyrzInfo="qyrzInformation"
@update-data="handleDataUpdate('qyrzInformation', $event)"
>
</Companyenter> </Companyenter>
</div> </div>
<!-- 项目画像 --> <!-- 项目画像 -->
@ -77,42 +111,70 @@
</div> </div>
<!-- 其他信息 --> <!-- 其他信息 -->
<div class="bottombox" id="others"> <div class="bottombox" id="others">
<Others :action="action" :xmId="projectId" :anotherInfo="projectOtherInfos" <Others
@update-data="handleDataUpdate('projectOtherInfos', $event)"> :action="action"
:xmId="projectId"
:anotherInfo="projectOtherInfos"
@update-data="handleDataUpdate('projectOtherInfos', $event)"
>
</Others> </Others>
</div> </div>
<div class="footer"> <div class="footer">
<el-button type="primary" <el-button
v-if="(checkRole(['company']) && !isSubmitted && action === 'fill') || action === 'fill'" type="primary"
@click="submitAll">提交审核</el-button> v-if="
<el-button type="primary" (checkRole(['company']) && !isSubmitted && action === 'fill') ||
v-if="(checkRole(['company']) && !isSubmitted && action === 'fill') || action === 'fill'" action === 'fill'
@click="saveAll">暂存</el-button> "
@click="submitAll"
>提交审核</el-button
>
<el-button
type="primary"
v-if="
(checkRole(['company']) && !isSubmitted && action === 'fill') ||
action === 'fill'
"
@click="saveAll"
>暂存</el-button
>
</div> </div>
</div> </div>
<!-- 返回顶部 --> <!-- 返回顶部 -->
<el-backtop target=".containerbody" :visibility-height="200" :bottom="50" :right="10" style="z-index: 1000;"> <el-backtop
target=".containerbody"
:visibility-height="200"
:bottom="50"
:right="10"
style="z-index: 1000"
>
</el-backtop> </el-backtop>
</div> </div>
</template> </template>
<script> <script>
import xiding from "./index2.vue" import xiding from "./index2.vue";
import Title from '@/views/components/ProjectDetails/Title.vue'; import Title from "@/views/components/ProjectDetails/Title.vue";
import Basic from '@/views/components/ProjectDetails/Basic.vue'; import Basic from "@/views/components/ProjectDetails/Basic.vue";
import Buildings from '@/views/components/ProjectDetails/Buildings.vue'; import Buildings from "@/views/components/ProjectDetails/Buildings.vue";
import Companyenter from '@/views/components/ProjectDetails/Companyenter.vue'; import Companyenter from "@/views/components/ProjectDetails/Companyenter.vue";
import Liver from '@/views/components/ProjectDetails/Liver.vue'; import Liver from "@/views/components/ProjectDetails/Liver.vue";
import Memo from '@/views/components/ProjectDetails/Memo.vue'; import Memo from "@/views/components/ProjectDetails/Memo.vue";
import Models from '@/views/components/ProjectDetails/Models.vue'; import Models from "@/views/components/ProjectDetails/Models.vue";
import Months from '@/views/components/ProjectDetails/Months.vue'; import Months from "@/views/components/ProjectDetails/Months.vue";
import Programme from '@/views/components/ProjectDetails/Programme.vue'; import Programme from "@/views/components/ProjectDetails/Programme.vue";
import Projectgift from '@/views/components/ProjectDetails/Projectgift.vue'; import Projectgift from "@/views/components/ProjectDetails/Projectgift.vue";
import Projectpicture from '@/views/components/ProjectDetails/Projectpicture.vue'; import Projectpicture from "@/views/components/ProjectDetails/Projectpicture.vue";
import Projectdraw from '@/views/components/ProjectDetails/Projectdraw.vue'; import Projectdraw from "@/views/components/ProjectDetails/Projectdraw.vue";
import Others from '@/views/components/ProjectDetails/Others.vue'; import Others from "@/views/components/ProjectDetails/Others.vue";
import { checkPermi, checkRole } from "@/utils/permission"; import { checkPermi, checkRole } from "@/utils/permission";
import { getBasicInformationById, fillBasicInformation, auditBasicInformation, tempBasicInformation, getqyBasicInformationPage } from '@/api/ManageApi/index'; import {
getBasicInformationById,
fillBasicInformation,
auditBasicInformation,
tempBasicInformation,
getqyBasicInformationPage,
} from "@/api/ManageApi/index";
export default { export default {
components: { components: {
@ -129,24 +191,24 @@ export default {
Projectpicture, Projectpicture,
Projectdraw, Projectdraw,
Others, Others,
xiding xiding,
}, },
data() { data() {
return { return {
activeSection: 'basic', activeSection: "basic",
sections: [ sections: [
{ id: 'basic', label: '基本信息' }, { id: "basic", label: "基本信息" },
{ id: 'programme', label: '规划信息' }, { id: "programme", label: "规划信息" },
{ id: 'buildings', label: '建筑信息' }, { id: "buildings", label: "建筑信息" },
{ id: 'models', label: '要素模型信息' }, { id: "models", label: "要素模型信息" },
{ id: 'months', label: '月度进展信息' }, { id: "months", label: "月度进展信息" },
{ id: 'companyenter', label: '企业入驻信息' }, { id: "companyenter", label: "企业入驻信息" },
{ id: 'projectpicture', label: '项目画像' }, { id: "projectpicture", label: "项目画像" },
{ id: 'projectpicturetwo', label: '项目图例' }, { id: "projectpicturetwo", label: "项目图例" },
{ id: 'projectgift', label: '项目巡礼' }, { id: "projectgift", label: "项目巡礼" },
{ id: 'liver', label: '现场实况' }, { id: "liver", label: "现场实况" },
{ id: 'memo', label: '项目备忘录' }, { id: "memo", label: "项目备忘录" },
{ id: 'others', label: '其他信息' } { id: "others", label: "其他信息" },
], ],
projectId: null, projectId: null,
isContainerVisible: true, isContainerVisible: true,
@ -180,7 +242,7 @@ export default {
xzfl: 0, xzfl: 0,
zjzmj: 0, zjzmj: 0,
ztze: 0, ztze: 0,
zydmj: 0 zydmj: 0,
}, },
planInformation: { planInformation: {
bzcjzmj: 0, bzcjzmj: 0,
@ -200,7 +262,7 @@ export default {
zgjzcs: 0, zgjzcs: 0,
zgjzgd: 0, zgjzgd: 0,
zjzmj: 0, zjzmj: 0,
zydmj: 0 zydmj: 0,
}, },
projectOtherInfos: [], projectOtherInfos: [],
wysmxInformations: [], wysmxInformations: [],
@ -216,7 +278,7 @@ export default {
rzqyhylx: "", rzqyhylx: "",
rzqys: 0, rzqys: 0,
xmId: 0, xmId: 0,
yczmj: 0 yczmj: 0,
}, },
projectRemarks: [], projectRemarks: [],
loading: false, loading: false,
@ -234,6 +296,8 @@ export default {
if (container) { if (container) {
container.addEventListener("scroll", this.handleScroll); container.addEventListener("scroll", this.handleScroll);
} }
// 添加全局点击监听器，用于移除菜单焦点
// document.addEventListener('click', this.handleGlobalClick);
}, },
beforeDestroy() { beforeDestroy() {
window.removeEventListener("scroll", this.handleScroll); window.removeEventListener("scroll", this.handleScroll);
@ -241,13 +305,16 @@ export default {
if (container) { if (container) {
container.removeEventListener("scroll", this.handleScroll); container.removeEventListener("scroll", this.handleScroll);
} }
// 移除全局点击监听器
// document.removeEventListener('click', this.handleGlobalClick);
}, },
methods: { methods: {
checkPermi, checkPermi,
checkRole, checkRole,
loadData() { loadData() {
this.loading = true; this.loading = true;
getBasicInformationById(this.projectId).then(response => { getBasicInformationById(this.projectId)
.then((response) => {
const data = response.data; const data = response.data;
this.basicInformation = data.basicInformation; this.basicInformation = data.basicInformation;
this.planInformation = data.planInformation; this.planInformation = data.planInformation;
@ -255,8 +322,8 @@ export default {
this.wysmxInformations = data.wysmxResponses; this.wysmxInformations = data.wysmxResponses;
this.qyrzInformation = data.qyrzInformation; this.qyrzInformation = data.qyrzInformation;
this.projectRemarks = data.projectRemarks; this.projectRemarks = data.projectRemarks;
})
}).finally(() => { .finally(() => {
this.loading = false; this.loading = false;
}); });
}, },
@ -264,13 +331,17 @@ export default {
this.activeSection = id; this.activeSection = id;
const element = document.getElementById(id); const element = document.getElementById(id);
if (element) { if (element) {
element.scrollIntoView({ behavior: 'smooth' }); element.scrollIntoView({ behavior: "smooth" });
this.$nextTick(() => {
// 移除菜单项焦点设置代码，仅设置内容区域焦点
element.focus();
});
} }
}, },
scrollToTop() { scrollToTop() {
const basicSection = document.getElementById('listtop'); const basicSection = document.getElementById("listtop");
if (basicSection) { if (basicSection) {
basicSection.scrollIntoView({ behavior: 'smooth' }); basicSection.scrollIntoView({ behavior: "smooth" });
} }
}, },
goBack() { goBack() {
@ -302,7 +373,7 @@ export default {
}, },
// 子组件的 // 子组件的
handleDataUpdate(dataKey, updatedData) { handleDataUpdate(dataKey, updatedData) {
if (dataKey === 'projectOtherInfos' || dataKey === 'wysmxInformations') { if (dataKey === "projectOtherInfos" || dataKey === "wysmxInformations") {
if (Array.isArray(updatedData)) { if (Array.isArray(updatedData)) {
this[dataKey] = updatedData; this[dataKey] = updatedData;
} else { } else {
@ -327,19 +398,19 @@ export default {
// 全局加载动画 // 全局加载动画
const loading = this.$loading({ const loading = this.$loading({
lock: true, lock: true,
text: '正在暂存中...', text: "正在暂存中...",
spinner: 'el-icon-loading', spinner: "el-icon-loading",
background: 'rgba(0, 0, 0, 0.7)' background: "rgba(0, 0, 0, 0.7)",
}); });
const tempData = this.prepareSubmitData(); // 复用数据 const tempData = this.prepareSubmitData(); // 复用数据
tempBasicInformation(tempData) tempBasicInformation(tempData)
.then(response => { .then((response) => {
this.$message.success('暂存成功'); this.$message.success("暂存成功");
}) })
.catch(error => { .catch((error) => {
this.$message.error('暂存失败'); this.$message.error("暂存失败");
}) })
.finally(() => { .finally(() => {
// 关闭动画 // 关闭动画
@ -361,14 +432,17 @@ export default {
// 创建全局加载动画 // 创建全局加载动画
const loading = this.$loading({ const loading = this.$loading({
lock: true, lock: true,
text: '正在提交...', text: "正在提交...",
spinner: 'el-icon-loading', spinner: "el-icon-loading",
background: 'rgba(0, 0, 0, 0.7)' background: "rgba(0, 0, 0, 0.7)",
}); });
// 校验 wysmxInformations // 校验 wysmxInformations
if (this.wysmxInformations.length === 0 || this.wysmxInformations.includes(null)) { if (
this.$message.error('请填写模型管理信息'); this.wysmxInformations.length === 0 ||
this.wysmxInformations.includes(null)
) {
this.$message.error("请填写模型管理信息");
loading.close(); loading.close();
return; return;
} }
@ -376,44 +450,59 @@ export default {
// 校验 qyrzInformation 的 rzqys // 校验 qyrzInformation 的 rzqys
const rzqys = await this.getEnterpriseCount(); const rzqys = await this.getEnterpriseCount();
if (rzqys === 0 || rzqys === null || rzqys === undefined) { if (rzqys === 0 || rzqys === null || rzqys === undefined) {
this.$message.error('请先导入企业入驻信息'); this.$message.error("请先导入企业入驻信息");
loading.close(); loading.close();
return; return;
} }
// 校验 planInformation // 校验 planInformation
const planRequiredFields = ['zydmj', 'rjl', 'zjzmj', 'jzds', 'zgjzcs', 'fhdj']; const planRequiredFields = [
const planMissingFields = planRequiredFields.filter(field => !this.planInformation[field]); "zydmj",
"rjl",
"zjzmj",
"jzds",
"zgjzcs",
"fhdj",
];
const planMissingFields = planRequiredFields.filter(
(field) => !this.planInformation[field]
);
if (planMissingFields.length > 0) { if (planMissingFields.length > 0) {
this.$message.error('请填写完整的规划信息'); this.$message.error("请填写完整的规划信息");
loading.close(); loading.close();
return; return;
} }
// 校验 basicInformation // 校验 basicInformation
const basicRequiredFields = ['ssgnq', 'begainTime', 'endTime', 'xzfl', 'jsms']; const basicRequiredFields = [
const basicMissingFields = basicRequiredFields.filter(field => !this.basicInformation[field]); "ssgnq",
"begainTime",
"endTime",
"xzfl",
"jsms",
];
const basicMissingFields = basicRequiredFields.filter(
(field) => !this.basicInformation[field]
);
if (basicMissingFields.length > 0) { if (basicMissingFields.length > 0) {
this.$message.error('请填写完整的基本信息'); this.$message.error("请填写完整的基本信息");
loading.close(); loading.close();
return; return;
} }
// 准备数据并提交 // 准备数据并提交
const submitData = this.prepareSubmitData(); const submitData = this.prepareSubmitData();
// console.log('准备提交的完整数据:', JSON.stringify(submitData, null, 2)); // console.log('准备提交的完整数据:', JSON.stringify(submitData, null, 2));
fillBasicInformation(submitData) fillBasicInformation(submitData)
.then(response => { .then((response) => {
this.$message.success('提交成功'); this.$message.success("提交成功");
this.isSubmitted = true; this.isSubmitted = true;
this.$router.push('/manage'); this.$router.push("/manage");
}) })
.catch(error => { .catch((error) => {
this.$message.error('提交失败'); this.$message.error("提交失败");
console.error('提交错误:', error); console.error("提交错误:", error);
}) })
.finally(() => { .finally(() => {
loading.close(); loading.close();
@ -426,12 +515,12 @@ export default {
const submitData = this.prepareSubmitData(); const submitData = this.prepareSubmitData();
auditBasicInformation(submitData) auditBasicInformation(submitData)
.then(response => { .then((response) => {
console.log('提交成功:', response); console.log("提交成功:", response);
this.$message.success('审核通过'); this.$message.success("审核通过");
this.isContainerVisible = false; this.isContainerVisible = false;
this.isSubmitted = true; this.isSubmitted = true;
this.$router.push('/manage'); this.$router.push("/manage");
}) })
.finally(() => { .finally(() => {
this.loading = false; this.loading = false;
@ -444,14 +533,14 @@ export default {
planInformation: this.planInformation, planInformation: this.planInformation,
projectOtherInfos: this.projectOtherInfos, projectOtherInfos: this.projectOtherInfos,
qyrzInformation: this.qyrzInformation, qyrzInformation: this.qyrzInformation,
wysmxInformations: this.formatWysmxData() wysmxInformations: this.formatWysmxData(),
}; };
}, },
// 格式化要素模型数据 // 格式化要素模型数据
formatWysmxData() { formatWysmxData() {
return this.wysmxInformations.flatMap(item => return this.wysmxInformations.flatMap((item) =>
item.list.map(listItem => ({ item.list.map((listItem) => ({
id: listItem.id, id: listItem.id,
createTime: this.formatDate(new Date()), createTime: this.formatDate(new Date()),
updateTime: this.formatDate(new Date()), updateTime: this.formatDate(new Date()),
@ -462,7 +551,7 @@ export default {
createBy: "", createBy: "",
updateBy: "", updateBy: "",
createId: 0, createId: 0,
updateId: 0 updateId: 0,
})) }))
); );
}, },
@ -470,22 +559,26 @@ export default {
// 日期格式化方法 // 日期格式化方法
formatDate(date) { formatDate(date) {
const year = date.getFullYear(); const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, '0'); const day = String(date.getDate()).padStart(2, "0");
const hours = String(date.getHours()).padStart(2, '0'); const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, '0'); const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, '0'); const seconds = String(date.getSeconds()).padStart(2, "0");
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}, },
handleMenuClick() {
if (this.$refs.menuRef) {
this.$refs.menuRef.$el.blur();
} }
},
},
}; };
</script> </script>
<style scoped> <style scoped>
.containerbody { .containerbody {
height: calc(100% - 7rem); height: calc(100% - 7rem);
padding: .3rem .5rem; padding: 0.3rem 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
@ -499,7 +592,7 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 0 1rem 0 .7rem; padding: 0 1rem 0 0.7rem;
background-color: #fff; background-color: #fff;
} }
@ -508,7 +601,7 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
background-color: #FFFFFF; background-color: #ffffff;
} }
.custom-menu { .custom-menu {
@ -516,13 +609,14 @@ export default {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
border: none; border: none;
outline: none !important;
} }
.custom-menu-item { .custom-menu-item {
color: #3D424C; color: #3d424c;
width: auto; width: auto;
height: 2rem; height: 2rem;
background: #F4F7FE; background: #f4f7fe;
border-radius: 0.25rem 0.25rem 0.25rem 0.25rem; border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
display: flex; display: flex;
align-items: center; align-items: center;
@ -531,23 +625,33 @@ export default {
/* 高亮 */ /* 高亮 */
.custom-menu-item.is-active { .custom-menu-item.is-active {
background-color: #2B62F1; background-color: #2b62f1;
color: #fff !important; color: #fff !important;
} }
/* 悬停 */ /* 悬停 */
.custom-menu-item:hover { .custom-menu-item:hover {
background-color: #2B62F1; background-color: #2b62f1;
color: #fff !important; color: #fff !important;
} }
/* 默认的下划线 */ /* 默认的下划线 */
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover { .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
background-color: #2B62F1; background-color: #2b62f1;
border-bottom: none; border-bottom: none;
} }
/* 移除菜单焦点样式 */
.custom-menu:focus,
.custom-menu:focus-within,
.custom-menu-item:focus,
.el-menu--horizontal .el-menu-item:focus {
outline: none !important;
box-shadow: none !important;
border: none !important;
}
.bottombox { .bottombox {
margin-bottom: 2rem; margin-bottom: 2rem;
} }

Write Preview
Loading…
Cancel
Save