flx:提交图片路径拼接

This commit is contained in:
X_Rian 2024-08-23 11:27:30 +08:00
parent 0d474bf4ff
commit c798a4976d

View File

@ -4,28 +4,15 @@
<div class="title_wrap flex">
<el-form :inline="true" class="demo-form-inline" size="medium">
<el-form-item label="审批状态">
<el-select
v-model="tableParameter.applyStatus"
:placeholder="$t('message.laborMange.pleaseChoose')"
clearable
>
<el-option
v-for="(item, index) in statusListData"
:key="index"
:label="item.name"
:value="item.value"
></el-option>
<el-select v-model="tableParameter.applyStatus" :placeholder="$t('message.laborMange.pleaseChoose')"
clearable>
<el-option v-for="(item, index) in statusListData" :key="index" :label="item.name"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="资质申请时间">
<el-date-picker
v-model="tableParameter.timeRange"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
<el-date-picker v-model="tableParameter.timeRange" type="daterange" value-format="yyyy-MM-dd"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
@ -35,77 +22,49 @@
<el-button type="warning" plain @click="refresh">{{
$t("message.laborMange.refresh")
}}</el-button>
<el-button type="primary" plain @click="inviteCBS"
>邀请新承包商入场</el-button
>
<el-button type="primary" plain @click="inviteCBS">邀请新承包商入场</el-button>
</el-form-item>
</el-form>
</div>
<vue-scroll style="height: 86%">
<el-table class="tables" :data="tableData" height="500">
<el-table-column
prop="applyTime"
align="center"
label="提交申请时间"
></el-table-column>
<el-table-column
prop="enterpriseName"
label="承包商名称"
align="center"
></el-table-column>
<el-table-column
prop="replyTime"
label="审批回复时间"
align="center"
></el-table-column>
<el-table-column prop="applyTime" align="center" label="提交申请时间"></el-table-column>
<el-table-column prop="enterpriseName" label="承包商名称" align="center"></el-table-column>
<el-table-column prop="replyTime" label="审批回复时间" align="center"></el-table-column>
<el-table-column label="审批状态" align="center">
<template slot-scope="scope">
<span
:style="{
color:
scope.row.applyStatus == 1
? '#66A972'
: scope.row.applyStatus == 2
<span :style="{
color:
scope.row.applyStatus == 1
? '#66A972'
: scope.row.applyStatus == 2
? '#5F73CD'
: scope.row.applyStatus == 3
? '#E14655'
: scope.row.applyStatus == 4
? '#B8B8BA'
: '',
}"
>
? '#E14655'
: scope.row.applyStatus == 4
? '#B8B8BA'
: '',
}">
{{
scope.row.applyStatus == 1
? "待审批"
: scope.row.applyStatus == 2
? "待审批"
: scope.row.applyStatus == 2
? "已审批"
: scope.row.applyStatus == 3
? "已驳回"
: scope.row.applyStatus == 4
? "已撤销"
: ""
? "已驳回"
: scope.row.applyStatus == 4
? "已撤销"
: ""
}}
</span>
</template>
</el-table-column>
<el-table-column
prop="applyUser"
label="审批人"
align="center"
></el-table-column>
<el-table-column
:label="$t('message.deviceManage.operation')"
align="center"
width="400"
>
<el-table-column prop="applyUser" label="审批人" align="center"></el-table-column>
<el-table-column :label="$t('message.deviceManage.operation')" align="center" width="400">
<template slot-scope="scope">
<div class="tableBtns">
<div @click="showAudit(scope.row)" class="operationText">
<img
src="@/assets/images/tableIcon/showReply.png"
width="15px"
height="15px"
/>
<img src="@/assets/images/tableIcon/showReply.png" width="15px" height="15px" />
<span>查看详情</span>
</div>
</div>
@ -113,50 +72,20 @@
</el-table-column>
</el-table>
</vue-scroll>
<el-pagination
style="margin: 10px 20px 0"
class="pagerBox"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="$store.state.PAGESIZRS"
:page-size="pageSize"
layout="total, sizes, prev, pager, next"
:total="Number(total)"
background
></el-pagination>
<el-pagination style="margin: 10px 20px 0" class="pagerBox" @size-change="handleSizeChange"
@current-change="handleCurrentChange" :current-page="page" :page-sizes="$store.state.PAGESIZRS"
:page-size="pageSize" layout="total, sizes, prev, pager, next" :total="Number(total)" background></el-pagination>
</div>
<!-- 查看详情 -->
<el-dialog
class="auditDialog"
title="查看详情"
:visible.sync="relativeGroupDialog"
:modal-append-to-body="false"
width="80%"
>
<el-dialog class="auditDialog" title="查看详情" :visible.sync="relativeGroupDialog" :modal-append-to-body="false"
width="80%">
<div class="dialog_content">
<div class="tab-content">
<span
:class="activeTab == 0 ? 'activeStyle' : ''"
@click="activeTab = 0"
>基本信息</span
>
<span
:class="activeTab == 3 ? 'activeStyle' : ''"
@click="activeTab = 3"
>承包项目信息</span
>
<span
:class="activeTab == 1 ? 'activeStyle' : ''"
@click="activeTab = 1"
>企业资质</span
>
<span
:class="activeTab == 2 ? 'activeStyle' : ''"
@click="activeTab = 2"
v-if="[2, 3].includes(rowData.applyStatus)"
>审批回复</span
>
<span :class="activeTab == 0 ? 'activeStyle' : ''" @click="activeTab = 0">基本信息</span>
<span :class="activeTab == 3 ? 'activeStyle' : ''" @click="activeTab = 3">承包项目信息</span>
<span :class="activeTab == 1 ? 'activeStyle' : ''" @click="activeTab = 1">企业资质</span>
<span :class="activeTab == 2 ? 'activeStyle' : ''" @click="activeTab = 2"
v-if="[2, 3].includes(rowData.applyStatus)">审批回复</span>
</div>
<div class="basic-info" v-show="activeTab == 0">
<div class="custom_tab">
@ -212,14 +141,14 @@
<span class="width_35">单位性质</span>
<span class="width_65" style="white-space: nowrap">{{
supplierDetail.enterpriseProperty == 1
? "国有企业"
: supplierDetail.enterpriseProperty == 2
? "国有企业"
: supplierDetail.enterpriseProperty == 2
? "三资企业"
: supplierDetail.enterpriseProperty == 3
? "集体企业"
: supplierDetail.enterpriseProperty == 4
? "私营企业"
: ""
? "集体企业"
: supplierDetail.enterpriseProperty == 4
? "私营企业"
: ""
}}</span>
</div>
<div class="flex3">
@ -232,21 +161,16 @@
<div class="type_content">
<div class="flex3">
<span class="width_35 border_l">资质图片</span>
<span class="width_65"
><img
v-show="supplierDetail.enterpriseQualificationUrl"
:src="supplierDetail.enterpriseQualificationUrl"
style="
width: 40px;
height: 40px;
margin-top: 2px;
cursor: pointer;
"
@click="
bigImageDialog = true;
<span class="width_65"><img v-show="supplierDetail.enterpriseQualificationUrl"
:src="supplierDetail.enterpriseQualificationUrl" style="
width: 40px;
height: 40px;
margin-top: 2px;
cursor: pointer;
" @click="
bigImageDialog = true;
bigImageUrl = supplierDetail.enterpriseQualificationUrl;
"
/></span>
" /></span>
</div>
<div class="flex3">
<span class="width_35 bg_color border_l">法定代表人</span>
@ -290,21 +214,15 @@
</div>
<div class="flex3">
<span class="width_35 border_l">logo</span>
<span class="width_65"
><img
v-show="supplierDetail.logo"
:src="supplierDetail.logo"
style="
width: 40px;
height: 40px;
margin-top: 2px;
cursor: pointer;
"
@click="
bigImageDialog = true;
<span class="width_65"><img v-show="supplierDetail.logo" :src="supplierDetail.logo" style="
width: 40px;
height: 40px;
margin-top: 2px;
cursor: pointer;
" @click="
bigImageDialog = true;
bigImageUrl = supplierDetail.logo;
"
/></span>
" /></span>
</div>
<div class="flex3">
<span class="width_35 bg_color border_l">项目负责人电话</span>
@ -318,11 +236,7 @@
</div>
<vue-scroll v-show="activeTab == 3" style="height: 580px">
<div class="basic-info">
<div
class="custom_tab"
v-for="(item, index) in supplierDetailCBS"
:key="item.id"
>
<div class="custom_tab" v-for="(item, index) in supplierDetailCBS" :key="item.id">
<div class="flex4">
<div class="type_content" style="z-index: 2">
<div class="flex3">
@ -362,21 +276,15 @@
</div>
<div class="flex3">
<span class="width_35 bg_color">现场布置图</span>
<span class="width_65 bg_color"
><img
v-show="item.layoutImage"
:src="item.layoutImage"
style="
width: 40px;
height: 40px;
margin-top: 2px;
cursor: pointer;
"
@click="
bigImageDialog = true;
<span class="width_65 bg_color"><img v-show="item.layoutImage" :src="item.layoutImage" style="
width: 40px;
height: 40px;
margin-top: 2px;
cursor: pointer;
" @click="
bigImageDialog = true;
bigImageUrl = item.layoutImage;
"
/></span>
" /></span>
</div>
<div class="flex3">
<span class="width_35">联系电话</span>
@ -414,10 +322,10 @@
<span class="width_35 bg_color border_l">工程状态</span>
<span class="width_65 bg_color">{{
typeof item.bulidStatus === "number"
? $t("message.companyDiagram.BUILDSTATUS")[
item.bulidStatus
].name
: ""
? $t("message.companyDiagram.BUILDSTATUS")[
item.bulidStatus
].name
: ""
}}</span>
</div>
<div class="flex3">
@ -426,21 +334,16 @@
</div>
<div class="flex3">
<span class="width_35 bg_color border_l">现场施工图</span>
<span class="width_65 bg_color"
><img
v-show="item.constructionMapUrl.length > 0"
:src="item.constructionMapUrl"
style="
width: 40px;
height: 40px;
margin-top: 2px;
cursor: pointer;
"
@click="
bigImageDialog = true;
<span class="width_65 bg_color"><img v-show="item.constructionMapUrl.length > 0"
:src="item.constructionMapUrl" style="
width: 40px;
height: 40px;
margin-top: 2px;
cursor: pointer;
" @click="
bigImageDialog = true;
bigImageUrl = item.constructionMapUrl;
"
/></span>
" /></span>
</div>
<div class="flex3">
<span class="width_35 border_l"></span>
@ -453,31 +356,14 @@
</vue-scroll>
<div class="company-qualification" v-show="activeTab == 1">
<el-table class="tables" :data="dialogTableData" height="300">
<el-table-column
width="50"
type="index"
align="center"
label="序号"
></el-table-column>
<el-table-column
prop="qualificationType"
label="资质类型"
align="center"
>
<el-table-column width="50" type="index" align="center" label="序号"></el-table-column>
<el-table-column prop="qualificationType" label="资质类型" align="center">
<template slot slot-scope="scope">
{{ scope.row.qualificationTypeName }}
</template>
</el-table-column>
<el-table-column
prop="fileName"
label="资质文件名称"
align="center"
></el-table-column>
<el-table-column
prop="fileNumber"
label="资质文件编号"
align="center"
></el-table-column>
<el-table-column prop="fileName" label="资质文件名称" align="center"></el-table-column>
<el-table-column prop="fileNumber" label="资质文件编号" align="center"></el-table-column>
<el-table-column label="资质文件" align="center">
<div slot slot-scope="scope">
<!-- <img
@ -494,22 +380,11 @@
}}</a>
</div>
</el-table-column>
<el-table-column
prop="remarks"
label="备注"
align="center"
></el-table-column>
<el-table-column prop="remarks" label="备注" align="center"></el-table-column>
</el-table>
</div>
<div
class="dialog-footer relative-group"
v-show="activeTab == 1 && rowData.applyStatus == 1"
>
<el-button
type="primary"
@click="auditReplyDialog = true"
size="medium"
>审批
<div class="dialog-footer relative-group" v-show="activeTab == 1 && rowData.applyStatus == 1">
<el-button type="primary" @click="auditReplyDialog = true" size="medium">审批
</el-button>
</div>
<div class="audit-reply" v-show="activeTab == 2">
@ -524,26 +399,16 @@
</div>
<div class="audit-content-item">
<span>审批回复</span>
<el-input
v-model="replyData.applyContent"
disabled
type="textarea"
:rows="5"
style="flex: 1; align-self: flex-start"
></el-input>
<el-input v-model="replyData.applyContent" disabled type="textarea" :rows="5"
style="flex: 1; align-self: flex-start"></el-input>
</div>
</div>
</div>
</div>
</el-dialog>
<!-- 查看审批回复 -->
<el-dialog
class="replyDialog"
title="审批回复"
:visible.sync="auditReplyDialog"
:modal-append-to-body="false"
width="668px"
>
<el-dialog class="replyDialog" title="审批回复" :visible.sync="auditReplyDialog" :modal-append-to-body="false"
width="668px">
<div class="reply-content">
<div class="reply-content-item">
<span>审批人</span>
@ -551,48 +416,23 @@
</div>
<div class="reply-content-item">
<span>审批回复</span>
<el-input
v-model="auditReplyVal"
type="textarea"
:rows="5"
placeholder="请输入"
style="width: 300px; align-self: flex-start"
></el-input>
<el-input v-model="auditReplyVal" type="textarea" :rows="5" placeholder="请输入"
style="width: 300px; align-self: flex-start"></el-input>
</div>
</div>
<div class="dialog-footer relative-group">
<el-button
class="cancleBtn"
@click="noPassFn"
icon="el-icon-circle-close"
size="medium"
type="danger"
plain
>审核拒绝
<el-button class="cancleBtn" @click="noPassFn" icon="el-icon-circle-close" size="medium" type="danger" plain>审核拒绝
</el-button>
<el-button
type="primary"
icon="el-icon-circle-check"
@click="auditPass"
size="medium"
>审核通过
<el-button type="primary" icon="el-icon-circle-check" @click="auditPass" size="medium">审核通过
</el-button>
</div>
</el-dialog>
<!-- 查看大图 -->
<el-dialog
:modal-append-to-body="false"
title="查看大图"
:visible.sync="bigImageDialog"
>
<el-dialog :modal-append-to-body="false" title="查看大图" :visible.sync="bigImageDialog">
<img width="100%" :src="bigImageUrl" alt />
</el-dialog>
<!-- 查看大图 -->
<el-dialog
:modal-append-to-body="false"
title="邀请链接"
:visible.sync="inviteCBSDialog"
>
<el-dialog :modal-append-to-body="false" title="邀请链接" :visible.sync="inviteCBSDialog">
<div class="invitecbs">
<div>
{{ $store.state.userInfo.account }}邀请您加入{{
@ -629,7 +469,10 @@ import {
auditQualificationApplyPassApi,
auditQualificationApplyRefuseApi,
} from "@/assets/js/api/supplier.js";
import { getComapnyStatisticsListApi, getContractorFlowPageApi } from "@/assets/js/api/company/project";
import {
getComapnyStatisticsListApi,
getContractorFlowPageApi,
} from "@/assets/js/api/company/project";
import { getEnterpriseTypeList } from "@/assets/js/api/laborPerson";
import { getDictionaryItemApi } from "@/assets/js/api/companyDiagram";
import moment from "moment";
@ -714,7 +557,7 @@ export default {
replyData: {},
inviteCBSDialog: false,
inviteCBSUrl: "",
inviteCBSUrl1:"",
inviteCBSUrl1: "",
companyTypeList: [],
};
},
@ -768,14 +611,16 @@ export default {
getContractorFlowPageApi({}).then((res) => {
console.log(res, "邀请新承包商入场");
this.inviteCBSUrl1 = `${this.$store.state.CONTRACTORURL2}?token=${res.result}&sn=${this.$store.state.projectSn}`;
});
});
// this.inviteCBSUrl = `${this.$store.state.CONTRACTORURL}?sn=${this.$store.state.projectSn}`;
console.log(this.$store.state);
this.inviteCBSDialog = true;
},
onCopy() {
const resultUrl = `${this.$store.state.userInfo.account}邀请您加入${this.$store.state.currentProDetail.name}\n邀请时间${this.selectNowDate()}\n点击链接进入承包商入场申请:\n${this.inviteCBSUrl1}`;
const resultUrl = `${this.$store.state.userInfo.account}邀请您加入${this.$store.state.currentProDetail.name
}\n邀请时间${this.selectNowDate()}\n点击链接进入承包商入场申请:\n${this.inviteCBSUrl1
}`;
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(resultUrl);
} else {
@ -866,12 +711,26 @@ export default {
}).then((res) => {
console.log(res, "基本信息");
if (res.result) {
for (let i in this.supplierDetail) {
this.supplierDetail[i] = res.result[i];
}
this.supplierDetail = {
...res.result,
enterpriseQualificationUrl: res.result.enterpriseQualificationUrl
? res.result.enterpriseQualificationUrl.includes(
this.$store.state.FILEURL
)
? res.result.enterpriseQualificationUrl
: this.$store.state.FILEURL +
res.result.enterpriseQualificationUrl
: res.result.enterpriseQualificationUrl,
logo: res.result.logo
? res.result.logo.includes(this.$store.state.FILEURL)
? res.result.logo
: this.$store.state.FILEURL + res.result.logo
: res.result.logo,
};
}
});
},
//
refresh() {
this.tableParameter = {
@ -931,7 +790,21 @@ export default {
getEnterpriseSupplierInfoListApi(requestData).then((res) => {
console.log(res, "承包项目信息");
if (res.result) {
this.supplierDetailCBS = res.result;
this.supplierDetailCBS = res.result.map((item) => {
return {
...item,
constructionMapUrl: item.constructionMapUrl
? item.constructionMapUrl.includes(this.$store.state.FILEURL)
? item.constructionMapUrl
: this.$store.state.FILEURL + item.constructionMapUrl
: item.constructionMapUrl,
layoutImage: item.layoutImage
? item.layoutImage.includes(this.$store.state.FILEURL)
? item.layoutImage
: this.$store.state.FILEURL + item.layoutImage
: item.layoutImage,
};
});
}
});
},
@ -1030,31 +903,37 @@ export default {
</script>
<style lang="less" scoped>
.invitecbs {
> div {
>div {
line-height: 30px;
}
}
.treeStyle() {
/deep/.el-tree {
font-size: 15px;
width: 100%;
background-color: transparent;
.el-tree-node {
white-space: normal;
&:focus > .el-tree-node__content {
&:focus>.el-tree-node__content {
background-color: transparent;
}
&.is-current > .el-tree-node__content {
&.is-current>.el-tree-node__content {
background-color: rgba(81, 129, 246, 0.14);
color: #5181f6;
}
}
.el-tree-node__content {
// height: 32px;
padding: 7px 0;
height: auto;
line-height: 16px;
position: relative;
// margin-bottom: 7px;
&:hover {
background-color: rgba(81, 129, 246, 0.14);
@ -1064,11 +943,13 @@ export default {
.videoName {
font-size: 14px;
}
.projectName {
font-size: 14px;
width: calc(100% - 55px);
display: inline-block;
}
.companyName2 {
font-size: 16px;
font-weight: bold;
@ -1079,42 +960,51 @@ export default {
white-space: nowrap;
}
}
.el-tree-node__expand-icon {
font-size: 16px;
padding: 0 6px;
&.is-leaf {
color: transparent !important;
}
}
.treeTitle {
background-color: #f7f7f7;
margin-bottom: 10px;
}
}
}
.flex {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex2 {
display: flex;
align-items: center;
justify-content: space-around;
}
.flex3 {
display: flex;
align-items: center;
}
.flex4 {
display: flex;
justify-content: space-between;
}
.flex5 {
display: flex;
align-items: center;
justify-content: center;
}
.temporary {
width: 100%;
height: 100%;
@ -1125,28 +1015,34 @@ export default {
width: 100%;
height: calc(100% - 42px);
}
.title_wrap {
width: 100%;
box-sizing: border-box;
padding: 0 20px;
border-bottom: 2px solid @borderColor;
}
.tableBtns {
.flex();
justify-content: center;
}
}
//
.auditDialog /deep/ .el-dialog__body {
padding-top: 0px;
padding-bottom: 30px;
}
.dialog_content {
padding: 0px;
.tab-content {
margin-top: 10px;
display: flex;
align-items: center;
span {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
@ -1155,15 +1051,19 @@ export default {
text-transform: none;
cursor: pointer;
}
span:not(:last-child) {
margin-right: 20px;
}
.activeStyle {
color: #5181f6;
}
}
.basic-info {
margin-top: 20px;
.custom_tab {
width: 100%;
height: 100%;
@ -1171,6 +1071,7 @@ export default {
border: 1px solid rgba(148, 148, 148, 0.5);
border-bottom: none;
margin-top: 20px;
// color: #333;
.title {
width: 100%;
@ -1184,6 +1085,7 @@ export default {
.type_content {
width: 50%;
div {
font-size: 14px;
padding: 12px 0;
@ -1201,6 +1103,7 @@ export default {
height: 44px;
padding: 0 15px;
}
.width_35 {
width: 20%;
display: inline-block;
@ -1210,27 +1113,34 @@ export default {
text-align: left;
}
}
.bg_color {
background: rgba(235, 234, 234, 0.5);
display: inline-block;
box-sizing: border-box;
}
.border_l {
border-left: 1px solid rgba(148, 148, 148, 0.5);
}
}
.company-qualification {
margin-top: 20px;
}
.audit-reply {
width: 90%;
margin: 0 auto;
margin-top: 20px;
.audit-content {
width: 100%;
line-height: 40px;
&-item {
display: flex;
span {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
@ -1238,6 +1148,7 @@ export default {
font-style: normal;
text-transform: none;
}
span:nth-child(1) {
display: inline-block;
width: 105px;
@ -1247,16 +1158,20 @@ export default {
}
}
}
//
.replyDialog /deep/ .el-dialog__body {
padding: 10px 20px 15px 20px;
}
.reply-content {
width: max-content;
margin: 0 auto;
line-height: 40px;
&-item {
display: flex;
span {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
@ -1264,12 +1179,14 @@ export default {
font-style: normal;
text-transform: none;
}
span:nth-child(1) {
display: inline-block;
width: 105px;
text-align: right;
}
}
&-item:nth-child(1) {
align-items: center;
}