|
|
<template>
|
|
|
<div v-if="detail">
|
|
|
<!-- 合同详情-->
|
|
|
<xy-dialog :is-show.sync="isShowDetail" type="normal" title="详情" class="contract-detail">
|
|
|
<template v-slot:normalContent>
|
|
|
<div class="base-info">
|
|
|
<div class="base-info-title">项目基本信息</div>
|
|
|
<div class="base-info-item">
|
|
|
<div class="base-info-item-title">项目名称</div>
|
|
|
<div class="base-info-item-content">{{detail.name}}</div>
|
|
|
</div>
|
|
|
<div class="base-info-item">
|
|
|
<div class="base-info-item-title">项目类型</div>
|
|
|
<div class="base-info-item-content">{{typeFormatter(detail.type)}}</div>
|
|
|
</div>
|
|
|
<div style="display: flex;justify-content: space-between;">
|
|
|
<div class="base-info-item" style="flex-basis: 50%">
|
|
|
<div class="base-info-item-title">采购形式</div>
|
|
|
<div class="base-info-item-content">{{detail.purchase_way?detail.purchase_way.value:'无'}}</div>
|
|
|
</div>
|
|
|
<div class="base-info-item" style="flex-basis: 50%">
|
|
|
<div class="base-info-item-title">采购方式</div>
|
|
|
<div class="base-info-item-content">{{detail.purchase_type?detail.purchase_type.value:'无'}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="display: flex;justify-content: space-between;">
|
|
|
<div class="base-info-item" style="flex-basis: 50%">
|
|
|
<div class="base-info-item-title">签订时间</div>
|
|
|
<div class="base-info-item-content">{{detail.date}}</div>
|
|
|
</div>
|
|
|
<div class="base-info-item" style="flex-basis: 50%">
|
|
|
<div class="base-info-item-title">服务时间</div>
|
|
|
<div class="base-info-item-content">{{detail.start_date}}至{{detail.end_date}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="base-info-item">
|
|
|
<div class="base-info-item-title">项目预算</div>
|
|
|
<div class="base-info-item-content">{{moneyFormat(detail.plan_price)}}</div>
|
|
|
<div class="base-info-item-unit">(元)</div>
|
|
|
</div>
|
|
|
<div class="base-info-item">
|
|
|
<div class="base-info-item-title">资金渠道</div>
|
|
|
<div class="base-info-item-content">{{moneyWayFormatter(detail.money_way_detail)}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="link-budget-plan">
|
|
|
<div class="link-budget-plan-title">关联预算计划</div>
|
|
|
<xy-table :height="260" :isPage='false' :table-item="linkBudgetPlanTable" :show-index="false" :list="detail.plans">
|
|
|
<template v-slot:btns>
|
|
|
<div></div>
|
|
|
</template>
|
|
|
</xy-table>
|
|
|
</div>
|
|
|
<div class="sign-info">
|
|
|
<div class="sign-info-title">签订信息</div>
|
|
|
<div class="sign-info-item">
|
|
|
<div class="sign-info-item-title">合同金额</div>
|
|
|
<div class="sign-info-item-content">{{moneyFormat(detail.money)}}</div>
|
|
|
<div class="sign-info-item-unit">（元）</div>
|
|
|
</div>
|
|
|
<div style="display: flex;justify-content: space-between">
|
|
|
<div class="sign-info-item" style="flex-basis: 50%">
|
|
|
<div class="sign-info-item-title">承包商\供应商</div>
|
|
|
<div class="sign-info-item-content">{{detail.supply}}</div>
|
|
|
</div>
|
|
|
<div class="sign-info-item" style="flex-basis: 50%">
|
|
|
<div class="sign-info-item-title">执行部门</div>
|
|
|
<div class="sign-info-item-content">{{detail.carry_department}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="related-processes">
|
|
|
<div class="related-processes-title">相关流程进展查看</div>
|
|
|
<div class="related-processes-item">
|
|
|
<div @click="seeBuyProcess" :style="{'color':detail.purchase_last_flow_id ? 'green' : 'red'}">采购流程查看</div>
|
|
|
<div @click="seeSignProcess" :style="{'color':detail.join_last_flow_id ? 'green' : 'red'}">合同会签流程查看</div>
|
|
|
<template v-if="detail.purchase_way?detail.purchase_way.remark === 'true':false">
|
|
|
<div @click="seeBidding" :style="{'color':detail.invite_last_flow_id ? 'green' : 'red'}">招标审批流程查看</div>
|
|
|
</template>
|
|
|
<template v-if="detail.is_plan != 1">
|
|
|
<div @click="seeAskProcess" :style="{'color':detail.req_last_flow_id ? 'green' : 'red'}">请示流程查看</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="journal">
|
|
|
<div class="journal-title">日志</div>
|
|
|
<xy-table :height="240" :isPage='false' :table-item="journalTable" :list="detail.log" :show-index="false">
|
|
|
<template v-slot:btns>
|
|
|
<div></div>
|
|
|
</template>
|
|
|
</xy-table>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:footerContent>
|
|
|
<Button type="primary" @click='isShowDetail=false'>关闭</Button>
|
|
|
</template>
|
|
|
</xy-dialog>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
show as detailContract,
|
|
|
getOatoken
|
|
|
} from "@/api/contract.js";
|
|
|
import {
|
|
|
parseTime
|
|
|
} from "@/utils"
|
|
|
import {
|
|
|
Message
|
|
|
} from "element-ui";
|
|
|
import {
|
|
|
moneyFormatter
|
|
|
} from "@/utils"
|
|
|
import {
|
|
|
getparameter
|
|
|
} from "@/api/system/dictionary";
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
window: {
|
|
|
width: 0,
|
|
|
height: 0,
|
|
|
top: 0,
|
|
|
left: 0
|
|
|
},
|
|
|
|
|
|
//合同详情
|
|
|
id: '',
|
|
|
detail: null,
|
|
|
isShowDetail: false,
|
|
|
linkBudgetPlanTable: [{
|
|
|
label: "ID",
|
|
|
sortable: false,
|
|
|
prop: 'id',
|
|
|
width: 130
|
|
|
},
|
|
|
{
|
|
|
label: "类型",
|
|
|
width: 100,
|
|
|
sortable: false,
|
|
|
customFn: (row) => {
|
|
|
const typeSwitch = (type) => {
|
|
|
{
|
|
|
let res = this.planTypes.filter(item => {
|
|
|
return item.id === type
|
|
|
})
|
|
|
return res[0]?.value || '未知'
|
|
|
}
|
|
|
}
|
|
|
return ( <
|
|
|
div >
|
|
|
<
|
|
|
Tag color = "primary" > {
|
|
|
typeSwitch(row.type)
|
|
|
} <
|
|
|
/Tag> <
|
|
|
/div>
|
|
|
)
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
label: "项目",
|
|
|
width: 140,
|
|
|
sortable: false,
|
|
|
prop: 'name'
|
|
|
},
|
|
|
{
|
|
|
label: "金额",
|
|
|
sortable: false,
|
|
|
prop: 'money',
|
|
|
align: 'right',
|
|
|
minWidth: 200,
|
|
|
formatter: (v1, v2, value) => {
|
|
|
return Number(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
label: '使用金额',
|
|
|
sortable: false,
|
|
|
prop: 'useMoney',
|
|
|
align: 'right',
|
|
|
minWidth: 200,
|
|
|
formatter: (v1, v2, value) => {
|
|
|
return Number(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
journalTable: [{
|
|
|
label: 'ID',
|
|
|
sortable: false,
|
|
|
prop: 'id'
|
|
|
},
|
|
|
{
|
|
|
label: "日志类型",
|
|
|
sortable: false,
|
|
|
prop: 'type'
|
|
|
},
|
|
|
{
|
|
|
label: "日志内容",
|
|
|
sortable: false,
|
|
|
prop: 'remark'
|
|
|
},
|
|
|
{
|
|
|
label: "操作人",
|
|
|
sortable: false,
|
|
|
prop: 'admin.name'
|
|
|
},
|
|
|
{
|
|
|
label: "时间",
|
|
|
sortable: false,
|
|
|
prop: 'created_at',
|
|
|
width: 160,
|
|
|
formatter: (cell, data, value) => {
|
|
|
return parseTime(new Date(value), '{y}-{m}-{d} {h}:{i}')
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
planTypes: [],
|
|
|
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
async getPlanTypes() {
|
|
|
const res = await getparameter({
|
|
|
number: 'money_way'
|
|
|
})
|
|
|
this.planTypes = res.detail
|
|
|
},
|
|
|
|
|
|
async seeBuyProcess() {
|
|
|
if (!this.detail?.purchase_last_flow_id) {
|
|
|
Message({
|
|
|
type: "warning",
|
|
|
message: "还未进行采购申请",
|
|
|
duration: 2000
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
let res = await getOatoken()
|
|
|
let url =
|
|
|
`${process.env.VUE_APP_OA_URL}/admin/flow/view/${this.detail.purchase_last_flow_id}?wuziguanli_oatoken=${res.oatoken}`
|
|
|
let seeBuy = window.open(url, 'seeBuy',
|
|
|
`top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
|
|
|
)
|
|
|
console.log(url)
|
|
|
},
|
|
|
async seeBidding() {
|
|
|
if (!this.detail?.invite_last_flow_id) {
|
|
|
Message({
|
|
|
type: "warning",
|
|
|
message: "还未进行招标申请",
|
|
|
duration: 2000
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
let res = await getOatoken()
|
|
|
let url =
|
|
|
`${process.env.VUE_APP_OA_URL}/admin/flow/view/${this.detail.invite_last_flow_id}?wuziguanli_oatoken=${res.oatoken}`
|
|
|
let seeBidding = window.open(url, 'seeBidding',
|
|
|
`top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
|
|
|
)
|
|
|
console.log(url)
|
|
|
},
|
|
|
async seeSignProcess() {
|
|
|
if (!this.detail?.join_last_flow_id) {
|
|
|
Message({
|
|
|
type: "warning",
|
|
|
message: "还未进行会签申请",
|
|
|
duration: 2000
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
let res = await getOatoken()
|
|
|
let url =
|
|
|
`${process.env.VUE_APP_OA_URL}/admin/flow/view/${this.detail.join_last_flow_id}?wuziguanli_oatoken=${res.oatoken}`
|
|
|
let seeSign = window.open(url, 'seeSign',
|
|
|
`top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
|
|
|
)
|
|
|
console.log(url)
|
|
|
|
|
|
},
|
|
|
async seeAskProcess() {
|
|
|
if (!this.detail?.req_last_flow_id) {
|
|
|
Message({
|
|
|
type: "warning",
|
|
|
message: "还未进行请示申请",
|
|
|
duration: 2000
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
let res = await getOatoken()
|
|
|
console.log(url)
|
|
|
let url =
|
|
|
`${process.env.VUE_APP_OA_URL}/admin/flow/view/${this.detail.req_last_flow_id}?wuziguanli_oatoken=${res.oatoken}`
|
|
|
let seeAsk = window.open(url, 'seeAsk',
|
|
|
`top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
|
|
|
)
|
|
|
console.log(url)
|
|
|
},
|
|
|
|
|
|
async getDetail(id) {
|
|
|
this.id = id
|
|
|
let res = await detailContract({
|
|
|
id: id
|
|
|
})
|
|
|
this.detail = res
|
|
|
let plans = res.plans
|
|
|
let linkPlan = res.plan_link
|
|
|
let linkPlanTable = plans?.map(item => {
|
|
|
let res = linkPlan.filter(item1 => {
|
|
|
return item1.plan_id === item.id
|
|
|
})[0]
|
|
|
return {
|
|
|
id: item.id,
|
|
|
type: item.type,
|
|
|
name: item.name,
|
|
|
money: item.money,
|
|
|
useMoney: res.use_money
|
|
|
}
|
|
|
})
|
|
|
this.detail.plans = linkPlanTable
|
|
|
console.log(this.detail)
|
|
|
},
|
|
|
|
|
|
},
|
|
|
computed: {
|
|
|
typeFormatter() {
|
|
|
return function(type) {
|
|
|
switch (type) {
|
|
|
case 1:
|
|
|
return "服务"
|
|
|
break;
|
|
|
case 2:
|
|
|
return "货物"
|
|
|
break;
|
|
|
case 3:
|
|
|
return "工程"
|
|
|
break;
|
|
|
case 4:
|
|
|
return '其他'
|
|
|
break;
|
|
|
default:
|
|
|
return "未知"
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
moneyWayFormatter() {
|
|
|
return function(arr) {
|
|
|
let res = arr?.map(item => {
|
|
|
return item.value
|
|
|
})
|
|
|
return res?.toString()
|
|
|
}
|
|
|
},
|
|
|
moneyFormat() {
|
|
|
return function(money) {
|
|
|
return moneyFormatter(money)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.window.width = screen.availWidth * 0.95
|
|
|
this.window.height = screen.availHeight * 0.95
|
|
|
this.window.top = (window.screen.height - 30 - this.window.height) / 2
|
|
|
this.window.left = (window.screen.width - 10 - this.window.width) / 2
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.contract-detail {
|
|
|
|
|
|
.base-info {
|
|
|
|
|
|
&-title {
|
|
|
font-weight: 600;
|
|
|
|
|
|
padding: 0 10px;
|
|
|
}
|
|
|
|
|
|
&-item {
|
|
|
display: flex;
|
|
|
|
|
|
margin-top: 8px;
|
|
|
|
|
|
&-title {
|
|
|
|
|
|
padding: 0 20px;
|
|
|
}
|
|
|
|
|
|
&-content {}
|
|
|
|
|
|
&-unit {
|
|
|
|
|
|
margin-left: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.link-budget-plan {
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
&-title {
|
|
|
@extend .base-info-title;
|
|
|
|
|
|
padding-bottom: 10px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.sign-info {
|
|
|
|
|
|
&-title {
|
|
|
@extend .link-budget-plan-title;
|
|
|
margin-top:20px;
|
|
|
}
|
|
|
|
|
|
&-item {
|
|
|
@extend .base-info-item;
|
|
|
|
|
|
&-title {
|
|
|
@extend .base-info-item-title;
|
|
|
}
|
|
|
|
|
|
&-content {
|
|
|
@extend .base-info-item-content;
|
|
|
}
|
|
|
|
|
|
&-unit {
|
|
|
@extend .base-info-item-unit;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.pay-plan {
|
|
|
margin-top: 20px;
|
|
|
|
|
|
&-title {
|
|
|
@extend .link-budget-plan-title;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.related-processes {
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
&-title {
|
|
|
@extend .link-budget-plan-title;
|
|
|
}
|
|
|
|
|
|
&-item {
|
|
|
//color: red;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
&>div {
|
|
|
cursor: pointer;
|
|
|
|
|
|
margin: 0 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.journal {
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
&-title {
|
|
|
@extend .link-budget-plan-title;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
