优化线索、商机、项目相关开发
This commit is contained in:
hero920103 committed
1 parent
9c07af2b59
commit
840673bda5
55 files changed
+4866
-625
No files matched your search
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
:model-value="visible"
|
||||
:title="project?.project_name || '项目详情'"
|
||||
direction="rtl"
|
||||
size="900px"
|
||||
@update:model-value="handleClose"
|
||||
@opened="loadAll"
|
||||
>
|
||||
<div v-if="project" class="project-detail">
|
||||
<el-tabs v-model="activeTab" tab-position="left" class="detail-tabs">
|
||||
<!-- 基本信息 -->
|
||||
<el-tab-pane label="基本信息" name="basic">
|
||||
<DetailBasic :project="project" />
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 联系人（正式客户通讯录） -->
|
||||
<el-tab-pane :label="`联系人 (${counts.contact})`" name="contact">
|
||||
<DetailContact
|
||||
ref="contactRef"
|
||||
:company-id="project.customer_id"
|
||||
company-type="customer"
|
||||
@count="counts.contact = $event"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 跟进记录（链路累积：线索 + 商机 + 项目） -->
|
||||
<el-tab-pane :label="`跟进记录 (${counts.follow})`" name="follow">
|
||||
<DetailFollow
|
||||
ref="followRef"
|
||||
:related-id="project.id"
|
||||
:related-type="RELATED_TYPE"
|
||||
:related-name="project.project_name || ''"
|
||||
:include-source="true"
|
||||
@count="counts.follow = $event"
|
||||
@saved="emit('refresh')"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 附件（链路累积：线索 + 商机 + 项目） -->
|
||||
<el-tab-pane :label="`附件 (${counts.attach})`" name="attach">
|
||||
<DetailAttach
|
||||
ref="attachRef"
|
||||
:related-id="project.id"
|
||||
:related-type="RELATED_TYPE"
|
||||
:include-source="true"
|
||||
:show-stage="true"
|
||||
@count="counts.attach = $event"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 项目文档（同步到文档库：共享文档 / 项目文档 / {项目名称}） -->
|
||||
<el-tab-pane :label="`项目文档 (${counts.docs})`" name="docs">
|
||||
<DetailDocs
|
||||
ref="docsRef"
|
||||
:project-id="project.id"
|
||||
:project-name="project.project_name || ''"
|
||||
@count="counts.docs = $event"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 操作日志 -->
|
||||
<el-tab-pane label="操作日志" name="log">
|
||||
<DetailLog ref="logRef" :related-id="project.id" :related-type="RELATED_TYPE" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import DetailBasic from "./detail_basic.vue";
|
||||
import DetailContact from "./detail_contact.vue";
|
||||
import DetailFollow from "./detail_follow.vue";
|
||||
import DetailAttach from "./detail_attach.vue";
|
||||
import DetailDocs from "./detail_docs.vue";
|
||||
import DetailLog from "./detail_log.vue";
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
project: { type: Object, default: null },
|
||||
});
|
||||
const emit = defineEmits(["update:visible", "refresh"]);
|
||||
|
||||
// 关联类型：3=项目
|
||||
const RELATED_TYPE = 3;
|
||||
|
||||
const activeTab = ref("basic");
|
||||
const counts = reactive({ contact: 0, follow: 0, attach: 0, docs: 0 });
|
||||
|
||||
const contactRef = ref();
|
||||
const followRef = ref();
|
||||
const attachRef = ref();
|
||||
const docsRef = ref();
|
||||
const logRef = ref();
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) {
|
||||
activeTab.value = "basic";
|
||||
counts.contact = 0;
|
||||
counts.follow = 0;
|
||||
counts.attach = 0;
|
||||
counts.docs = 0;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function handleClose() {
|
||||
emit("update:visible", false);
|
||||
}
|
||||
|
||||
/** 抽屉打开后刷新各 Tab 数据 */
|
||||
function loadAll() {
|
||||
if (!props.project?.id) return;
|
||||
contactRef.value?.reload();
|
||||
followRef.value?.reload();
|
||||
attachRef.value?.reload();
|
||||
docsRef.value?.reload();
|
||||
logRef.value?.reload();
|
||||
}
|
||||
|
||||
defineExpose({ loadAll });
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:deep(.el-drawer__body) {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.project-detail {
|
||||
.detail-tabs {
|
||||
// 横向 flex：导航固定宽 + 内容区占满剩余宽度
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
|
||||
// 关键：内容区占满「容器剩余宽度」并允许收缩，内部表格才能随容器自适应
|
||||
:deep(.el-tabs__content) {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__header) {
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__item) {
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
padding: 0 12px;
|
||||
min-width: 96px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
:deep(.el-tab-pane) {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
width: 100%;
|
||||
|
||||
// 操作列：链接按钮去掉自带内边距、缩小间距，避免「编辑/删除」被挤成两行
|
||||
.el-button.is-link {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.el-button + .el-button {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user