Skip to content

D
dsk-operate-sys-cscec
Commit dfb0e203 authored by tyn's avatar tyn
Browse files
Options

原生table td 自适应

parent ae91667e
Hide whitespace changes
Inline Side-by-side
Showing with 332 additions and 9 deletions
dsk-operate-ui/src/api/consultingOrgManagement/index.js
View file @ dfb0e203
......@@ -31,4 +31,15 @@ export const getConsultingOrgEenterpriseDetailWithSearchApi = (params) => reques
url: "/advisory/body/getCooperateProjectDetailList",
method: "get",
params
});
/**
* 咨询机构项目列表 项目跳转详情获取
* @param {*} params
* @returns
*/
export const getgetConsultingOrgProjectDetailApi = (params) => request({
url: "/advisory/body/getProjectDetail",
method: "get",
params
});
\ No newline at end of file
dsk-operate-ui/src/assets/styles/index.scss
View file @ dfb0e203
......@@ -454,9 +454,7 @@ li {
.table-list-com-ins {
.table-item {
width: 100%;
height: 100%;
// 骨架屏预留
min-height: 360px;
max-height: 100%;
.el-table {
width: 100%;
height: auto;
......
dsk-operate-ui/src/components/TableListCom/index.vue
View file @ dfb0e203
......@@ -278,10 +278,6 @@ export default {
}
.el-table {
// height: auto;
// display: flex;
// flex-direction: column;
// align-items: center;
.el-table__header-wrapper {
min-height: 40px;
}
......
dsk-operate-ui/src/views/consultingOrgManagement/components/EnterpriseList/detail/basicEngineeringInformation.vue 0 → 100644
View file @ dfb0e203
<template>
<div class="basic-engineering-information">
<div class="basic-engineering-information-inner">
<!-- 项目主体 -->
<div class="project-subject">
<div class="info-module-title"><span>项目主体</span></div>
<table>
<colgroup>
<col>
<col :style="{width : tableKeyWidth}">
<col>
<col :style="{width : tableKeyWidth}">
</colgroup>
<tr>
<td class="table-key">业主单位</td>
<td>{{comProjectDetailInfo.ownerName ? comProjectDetailInfo.ownerName : "-"}}</td>
<td class="table-key">工程承包单位</td>
<td>{{comProjectDetailInfo.contractOrgName ? comProjectDetailInfo.contractOrgName : "-"}}</td>
</tr>
<tr>
<td class="table-key">履约责任单位</td>
<td>{{comProjectDetailInfo.ownerName ? comProjectDetailInfo.ownerName : "-"}}</td>
<td class="table-key">咨询单位</td>
<td>{{comProjectDetailInfo.advisoryBodyName ? comProjectDetailInfo.advisoryBodyName : "-"}}</td>
</tr>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
name: "basicEngineeringInformation",
props: {
projectDetailInfo: Object
},
watch: {
projectDetailInfo: {
handler(newValue) {
this.comProjectDetailInfo = newValue;
},
deep: true
}
},
data() {
return {
comProjectDetailInfo: this.projectDetailInfo,
tableKeyWidth: 0
};
},
//可访问data属性
created() {
this.setTableKeyWidth();
},
//计算集
computed: {
},
//方法集
methods: {
async setTableKeyWidth() {
try {
await this.$nextTick();
/**
* @type {HTMLDivElement}
*/
const inner = document.querySelector(".basic-engineering-information-inner");
if (inner) {
const td = parseInt((inner.offsetWidth - 140 * 2) / 2);
this.tableKeyWidth = `${parseInt(parseFloat(td / inner.offsetWidth) * 100)}%`;
}
} catch (error) {
}
}
},
}
</script>
<style lang="scss" scoped>
.basic-engineering-information {
width: 100%;
height: 100%;
background: #fff;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding: 16px;
box-sizing: border-box;
overflow: auto;
.basic-engineering-information-inner {
width: 100%;
height: 100%;
.info-module-title {
line-height: 24px;
color: #232323;
font-weight: bold;
font-size: 16px;
margin-bottom: 16px;
display: flex;
align-items: center;
& > span {
display: inline-block;
position: relative;
padding-left: 8px;
box-sizing: border-box;
&::before {
content: "";
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
background: rgba(35, 35, 35, 0.8);
width: 2px;
height: 14px;
}
}
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
&,
th,
td {
border: 1px solid #e6eaf1;
box-sizing: border-box;
}
td {
padding: 9px 12px;
line-height: 22px;
color: #232323;
font-size: 12px;
}
.table-key {
background: #f0f3fa;
color: rgba(35, 35, 35, 0.8);
width: 140px;
&.lot {
height: 62px;
}
}
.data-td {
width: calc(100% - 140px);
}
}
}
}
</style>
dsk-operate-ui/src/views/consultingOrgManagement/components/EnterpriseList/detail/detailsOfCooperation.vue
View file @ dfb0e203
......@@ -99,7 +99,7 @@ export default {
{ label: '项目列表', prop: 'projectName', width: "222px", lock: true, fixed: false, slot: true, uid: v4(), showOverflowTooltip: true },
{ label: '合同编码', prop: 'projectCode', width: "123px", uid: v4() },
{ label: '省市', prop: 'provinceName', width: "102px", uid: v4() },
{ label: '项目承接类型', prop: 'isinvestproject', width: "102px", uid: v4() },
{ label: '项目承接类型', prop: 'isinvestproject', minWidth: "102px", uid: v4() },
{ label: '工程基础大类', prop: 'projectType1', width: "98px", uid: v4() },
{ label: '工程类别明细', prop: 'projectType', width: "98px", uid: v4() },
{ label: '项目负责人姓名', prop: 'projectLeader', width: "110px", uid: v4() },
......
dsk-operate-ui/src/views/consultingOrgManagement/components/EnterpriseList/detail/projectDetail.vue 0 → 100644
View file @ dfb0e203
<template>
<div class="project-detail-container">
<div class="project-detail-inner">
<div class="project-header-container">
<!-- 项目名称 logo -->
<div class="prject-icon-and-title">
<img src="@/assets/images/financing/head_icon.png" alt="">
<div class="prject-title">{{projectDetailInfo.finProjectName ? projectDetailInfo.finProjectName : "-"}}</div>
</div>
<!-- 项目承接单位 -->
<div class="project-undertaking-unit-container">
<span class="project-undertaking-unit-title">项目承接单位：</span>
<span class="project-undertaking-unit">{{projectDetailInfo.contractOrgName ? projectDetailInfo.contractOrgName : "-"}}</span>
</div>
</div>
<!-- tab切换部分 -->
<div class="project-consulting-agency">
<!-- tab切换栏 -->
<dsk-tab-toggle v-model="currentList" :tabs="toggleTabs"></dsk-tab-toggle>
<!-- tab切换容器 -->
<div class="project-consulting-agency-inner">
<!-- 工程基本信息 -->
<basic-engineering-information v-if="currentList === 'project'" :projectDetailInfo="projectDetailInfo"></basic-engineering-information>
<!-- 咨询机构结算信息 -->
</div>
</div>
</div>
</div>
</template>
<script>
import DskTabToggle from "@/components/DskTabToggle";
import { getgetConsultingOrgProjectDetailApi } from "@/api/consultingOrgManagement/index";
import { v4 } from 'uuid';
import BasicEngineeringInformation from "@/views/consultingOrgManagement/components/EnterpriseList/detail/basicEngineeringInformation";
export default {
name: "projectDetail",
components: {
DskTabToggle,
BasicEngineeringInformation
},
data() {
return {
currentList: "project",
toggleTabs: [
{
value: "project",
name: "工程基本信息",
id: v4()
},
{
value: "consultingAgency",
name: "咨询机构结算信息",
id: v4()
}
],
projectDetailInfo: {},
projectKey: "",
advisoryBodyCid: ""
};
},
//可访问data属性
created() {
this.init();
},
//计算集
computed: {
},
//方法集
methods: {
async init() {
try {
const advisoryBodyCid = this.$route.params?.advisoryBodyCid;
const projectKey = this.$route.query?.projectKey;
if (!advisoryBodyCid) return this.$message.error("缺少咨询机构ID");
if (!projectKey) return this.$message.error("缺少项目主键");
const detail = await getgetConsultingOrgProjectDetailApi({
advisoryBodyCid,
projectKey
});
if (detail.code == 200 && detail.data) {
this.projectDetailInfo = { ...this.pprojectDetailInfo, ...detail.data };
}
} catch (error) {
}
}
},
}
</script>
<style lang="scss" scoped>
.project-detail-container {
width: 100%;
height: 100%;
padding: 16px 24px 24px 24px;
box-sizing: border-box;
overflow: hidden;
.project-detail-inner {
width: 100%;
height: 100%;
.project-header-container {
width: 100%;
height: 94px;
background: #fff;
border-radius: 4px;
padding: 16px;
box-sizing: border-box;
.prject-icon-and-title {
display: flex;
align-items: center;
& > img {
width: 28px;
height: 28px;
}
.prject-title {
font-size: 16px;
font-weight: bold;
color: #232323;
margin-left: 12px;
}
}
.project-undertaking-unit-container {
display: flex;
align-items: center;
margin-top: 16px;
.project-undertaking-unit-title {
font-size: 14px;
font-weight: 400;
color: rgba(35, 35, 35, 0.4);
}
.project-undertaking-unit {
color: rgba(35, 35, 35, 0.8);
font-size: 14px;
font-weight: 400;
margin-left: 8px;
}
}
}
.project-consulting-agency {
width: 100%;
height: calc(100% - 110px);
margin-top: 16px;
.project-consulting-agency-inner {
width: 100%;
height: calc(100% - 47px);
}
}
}
}
</style>
dsk-operate-ui/src/views/consultingOrgManagement/components/ProjectList/index.vue
View file @ dfb0e203
......@@ -74,7 +74,7 @@
v-else-if="!tableLoading" :maxHeight="true" @handle-current-change="handleCurrentChange">
<!-- 项目列表 -->
<template slot="projectName" slot-scope="{data,row}">
<div v-if="row.projectName" class="no-line-feed" v-html="row.projectName">{{row.projectName}}</div>
<div v-if="row.projectName" class="no-line-feed" v-html="row.projectName" @click="viewProjectDetail(row)">{{row.projectName}}</div>
<span v-else>-</span>
</template>
<!-- 业主单位 -->
......@@ -316,6 +316,10 @@ export default {
this.formColum.forEach(item => this.fixedPropsKey.includes(item.prop) ? item.fixed = flag : null);
}
},
// 查看项目详情
viewProjectDetail(row) {
// this.$tab.openPage(row.projectName,`/consultingOrgManagement/projectDetail/${row.advisoryBodyCid}?projectKey=${row.projectKey}`)
}
},
}
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment