You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
527 lines
17 KiB
527 lines
17 KiB
<template> |
|
<div class="box"> |
|
<el-row> |
|
<el-col :span="24"> |
|
<el-breadcrumb separator="/"> |
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> |
|
<el-breadcrumb-item :to="{ path: '/contract' }" |
|
>合同管理</el-breadcrumb-item |
|
> |
|
<el-breadcrumb-item>合同详情</el-breadcrumb-item> |
|
</el-breadcrumb> |
|
</el-col> |
|
</el-row> |
|
<div class="main-container"> |
|
<el-card class="box-card" shadow="always"> |
|
<div slot="header" class="clearfix"> |
|
<h3>一、合同基本信息</h3> |
|
</div> |
|
<el-form |
|
:inline="true" |
|
size="small" |
|
label-width="120px" |
|
label-position="right" |
|
:disabled="readonly" |
|
:model="formInline" |
|
class="demo-form-inline" |
|
> |
|
<el-form-item label="合同名称"> |
|
<el-input |
|
v-model="formInline.htmc" |
|
placeholder="合同名称" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="项目名称"> |
|
<el-input v-model="formInline.ks" placeholder="项目名称"></el-input> |
|
</el-form-item> |
|
<el-form-item label="项目编号"> |
|
<el-input |
|
v-model="formInline.ttmc" |
|
placeholder="项目编号" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="合同总金额(万元)"> |
|
<el-input |
|
v-model="formInline.sl" |
|
placeholder="合同总金额(万元)" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="交接日期"> |
|
<el-input v-model="formInline.dw" placeholder="交接日期"></el-input> |
|
</el-form-item> |
|
<el-form-item label="验收日期"> |
|
<el-date-picker type="date" placeholder="选择日期"></el-date-picker> |
|
</el-form-item> |
|
<el-form-item label="交接人" label-width="85px"> |
|
<el-input v-model="formInline.dw" placeholder="交接人"></el-input> |
|
</el-form-item> |
|
<el-form-item label="乙方公司"> |
|
<el-input placeholder="人福医疗"></el-input> |
|
</el-form-item> |
|
<el-form-item label="乙方联系人"> |
|
<el-input placeholder="王丽"></el-input> |
|
</el-form-item> |
|
<el-form-item label="乙方联系方式"> |
|
<el-input placeholder="17777777777"></el-input> |
|
</el-form-item> |
|
<el-form-item label="备注"> |
|
<el-input type="textarea"></el-input> |
|
</el-form-item> |
|
</el-form> |
|
</el-card> |
|
<el-card class="box-card" shadow="always"> |
|
<div slot="header" class="clearfix"> |
|
<h3>二、合同标的</h3> |
|
<div class="bd-btns"> |
|
<el-button |
|
type="primary" |
|
:disabled="readonly" |
|
size="small" |
|
icon="el-icon-plus" |
|
@click="onAddDevice" |
|
>新增</el-button |
|
> |
|
</div> |
|
<el-table |
|
ref="multipleTable" |
|
border |
|
fit |
|
:data="tableData" |
|
tooltip-effect="dark" |
|
style="width: 100%" |
|
:summary-method="getSummaries" |
|
show-summary |
|
@selection-change="handleSelectionChange" |
|
> |
|
<el-table-column type="selection" width="55"> </el-table-column> |
|
<el-table-column type="index" width="50"> </el-table-column> |
|
<el-table-column label="设备名称" width="200"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
:disabled="readonly" |
|
v-model="scope.row.name" |
|
></el-input> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="科室"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
:disabled="readonly" |
|
v-model="scope.row.ks" |
|
></el-input> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="型号" width="200"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
:disabled="readonly" |
|
v-model="scope.row.xh" |
|
></el-input> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="生产厂家" width="200"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
:disabled="readonly" |
|
v-model="scope.row.sccj" |
|
></el-input> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="数量"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
:disabled="readonly" |
|
v-model="scope.row.sl" |
|
></el-input> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="单价(万元)"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
:disabled="readonly" |
|
v-model="scope.row.dj" |
|
></el-input> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="总价(万元)"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
:disabled="readonly" |
|
v-model="scope.row.zj" |
|
></el-input> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="备注" width="180"> |
|
<template slot-scope="scope"> |
|
<el-input |
|
type="textarea" |
|
:disabled="readonly" |
|
v-model="scope.row.bz" |
|
></el-input> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="操作"> |
|
<template slot-scope="scope"> |
|
<el-button |
|
:disabled="readonly" |
|
size="mini" |
|
type="danger" |
|
@click="handleDelete(scope.$index, scope.row)" |
|
>删除</el-button |
|
> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
</el-card> |
|
<el-card class="box-card" shadow="always"> |
|
<div slot="header" class="clearfix"> |
|
<h3>三、合同进展</h3> |
|
</div> |
|
<el-collapse v-model="activeNames"> |
|
<el-collapse-item title="合同签订" name="3"> |
|
<template slot="title"> |
|
<h3>合同签订</h3> |
|
<i class="header-icon el-icon-info"></i> |
|
</template> |
|
<el-timeline-item |
|
v-for="(item, index) in htqd" |
|
:key="timestamps3[index]" |
|
:timestamp="timestamps3[index]" |
|
placement="top" |
|
> |
|
<el-card> |
|
<el-form |
|
:inline="true" |
|
size="small" |
|
:disabled="readonly" |
|
:model="item" |
|
class="demo-form-inline" |
|
> |
|
<el-form-item label="经办人"> |
|
<el-input |
|
v-model="item.name" |
|
placeholder="经办人" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="进展"> |
|
<el-select v-model="item.process" placeholder="进展"> |
|
<el-option label="未开始" value="01"></el-option> |
|
<el-option label="进行中" value="02"></el-option> |
|
<el-option label="已完成" value="03"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="开始时间"> |
|
<el-date-picker |
|
type="date" |
|
placeholder="选择日期" |
|
v-model="item.startDate" |
|
></el-date-picker> |
|
</el-form-item> |
|
<el-form-item label="结束时间"> |
|
<el-date-picker |
|
type="date" |
|
placeholder="选择日期" |
|
v-model="item.endDate" |
|
></el-date-picker> |
|
</el-form-item> |
|
<el-form-item label="备注"> |
|
<el-input type="textarea" v-model="item.remark"></el-input> |
|
</el-form-item> |
|
</el-form> |
|
</el-card> |
|
</el-timeline-item> |
|
</el-collapse-item> |
|
<el-collapse-item title="设备验收" name="4"> |
|
<template slot="title"> |
|
<h3>设备验收</h3> |
|
<i class="header-icon el-icon-info"></i> |
|
</template> |
|
<el-form |
|
:inline="true" |
|
size="small" |
|
:disabled="readonly" |
|
:model="sbys" |
|
class="demo-form-inline" |
|
> |
|
<el-form-item label="状态"> |
|
<el-select v-model="sbys.zt" placeholder="采购状态"> |
|
<el-option label="未开始" value="01"></el-option> |
|
<el-option label="进行中" value="02"></el-option> |
|
<el-option label="已完成" value="03"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="验收人"> |
|
<el-input v-model="sbys.name" placeholder="验收人"></el-input> |
|
</el-form-item> |
|
<el-form-item label="验收日期"> |
|
<el-date-picker |
|
type="date" |
|
placeholder="选择日期" |
|
v-model="sbys.date" |
|
></el-date-picker> |
|
</el-form-item> |
|
<el-form-item label="档案号"> |
|
<el-input v-model="sbys.dah" placeholder="档案号"></el-input> |
|
</el-form-item> |
|
<el-form-item label="备注"> |
|
<el-input type="textarea" v-model="sbys.bz"></el-input> |
|
</el-form-item> |
|
</el-form> |
|
</el-collapse-item> |
|
<el-collapse-item title="付款" name="5"> |
|
<template slot="title"> |
|
<h3>付款</h3> |
|
<i class="header-icon el-icon-info"></i> |
|
</template> |
|
<el-form |
|
:inline="true" |
|
size="small" |
|
:disabled="readonly" |
|
:model="fk" |
|
class="demo-form-inline" |
|
> |
|
<el-form-item label="状态"> |
|
<el-select v-model="fk.zt" placeholder="采购状态"> |
|
<el-option label="未开始" value="01"></el-option> |
|
<el-option label="进行中" value="02"></el-option> |
|
<el-option label="已完成" value="03"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="付款批次"> |
|
<el-input v-model="fk.fkpc" placeholder="付款批次"></el-input> |
|
</el-form-item> |
|
<el-form-item label="金额"> |
|
<el-input v-model="fk.je" placeholder="金额"></el-input> |
|
</el-form-item> |
|
<el-form-item label="备注"> |
|
<el-input type="textarea" v-model="fk.bz"></el-input> |
|
</el-form-item> |
|
</el-form> |
|
</el-collapse-item> |
|
<el-collapse-item title="质保金" name="6"> |
|
<template slot="title"> |
|
<h3>质保金</h3> |
|
<i class="header-icon el-icon-info"></i> |
|
</template> |
|
<el-form |
|
:inline="true" |
|
size="small" |
|
:disabled="readonly" |
|
:model="zbj" |
|
class="demo-form-inline" |
|
> |
|
<el-form-item label="状态"> |
|
<el-select v-model="zbj.zt" placeholder="状态"> |
|
<el-option label="未开始" value="01"></el-option> |
|
<el-option label="进行中" value="02"></el-option> |
|
<el-option label="已完成" value="03"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="质保金到期日期"> |
|
<el-date-picker |
|
type="date" |
|
placeholder="选择日期" |
|
v-model="zbj.date" |
|
></el-date-picker> |
|
</el-form-item> |
|
<el-form-item label="经办人"> |
|
<el-input v-model="zbj.name" placeholder="经办人"></el-input> |
|
</el-form-item> |
|
<el-form-item label="付款金额"> |
|
<el-input v-model="zbj.je" placeholder="付款金额"></el-input> |
|
</el-form-item> |
|
|
|
<el-form-item label="付款批次"> |
|
<el-input v-model="zbj.fkpc" placeholder="付款批次"></el-input> |
|
</el-form-item> |
|
<el-form-item label="备注"> |
|
<el-input type="textarea" v-model="zbj.bz"></el-input> |
|
</el-form-item> |
|
</el-form> |
|
</el-collapse-item> |
|
</el-collapse> |
|
</el-card> |
|
</div> |
|
<div class="operation-box"> |
|
<el-button type="primary" v-if="readonly" @click="edit">编辑</el-button> |
|
<el-button type="primary" v-else @click="cancel">取消</el-button> |
|
<el-button type="primary" @click="save">保存</el-button> |
|
<el-button @click="back">返回上页</el-button> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import cddata from "../../data/contactDataDetail"; |
|
export default { |
|
data() { |
|
return { |
|
formInline: { |
|
user: "", |
|
region: "", |
|
}, |
|
readonly: true, |
|
htqd: cddata.htqd, |
|
timestamps1: [ |
|
"组织需求形式审查 2018/4/12 20:46", |
|
"业务行政会议审议 2018/4/3", |
|
"组织采购意向公示 2018/4/2", |
|
"组织技术参数论证 2018/4/2", |
|
"技术参数复核 2018/4/2", |
|
"采购需求编报 2018/4/2", |
|
"质疑答复流标复核 2018/4/2", |
|
], |
|
timestamps3: [ |
|
"采购交接 2018/4/12 20:46", |
|
"医工科审核 2018/4/3", |
|
"需求科室 2018/4/2", |
|
"财务审核 2018/4/2", |
|
"审核监管科审核 2018/4/2", |
|
"法务 2018/4/2", |
|
"印章申请 2018/4/2", |
|
"合同签订 2018/4/2", |
|
], |
|
cg: cddata.cg, |
|
sbys: cddata.sbys, //设备验收 |
|
fk: cddata.fk, //付款 |
|
zbj: cddata.zbj, //质保金 |
|
activeNames: ["3", "4", "5", "6"], |
|
tableData: [ |
|
{ |
|
name: "便携支气管镜", |
|
ks: "神经外科", |
|
xh: "inslight iS3", |
|
sccj: "深圳因赛斯医疗科技有限公司", |
|
sl: "1", |
|
dj: "7.85", |
|
zj: "7.85", |
|
bz: "2022年度计划", |
|
}, |
|
], |
|
multipleSelection: [], |
|
}; |
|
}, |
|
methods: { |
|
//汇总设备总价 |
|
getSummaries(){ |
|
const sums = []; |
|
sums[7] = '总价(万元)'; |
|
var price = 0 |
|
this.tableData.forEach((item) => { |
|
price += parseFloat(item.zj) |
|
}); |
|
sums[8] = price; |
|
return sums; |
|
}, |
|
//删除设备 |
|
handleDelete(index) { |
|
this.tableData.splice(index, 1); |
|
console.log(this.tableData); |
|
}, |
|
//新增设备 |
|
onAddDevice() { |
|
var obj = { |
|
name: "", |
|
ks: "", |
|
xh: "", |
|
sccj: "", |
|
sl: "", |
|
dj: "0", |
|
zj: "0", |
|
bz: "", |
|
}; |
|
this.tableData.push(obj); |
|
}, |
|
onSubmit() { |
|
console.log("submit!"); |
|
}, |
|
edit() { |
|
this.readonly = false; |
|
}, |
|
save() { |
|
this.$confirm("是否保存?", "提示", { |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
}) |
|
.then(() => { |
|
this.$message({ |
|
type: "success", |
|
message: "保存成功!", |
|
}); |
|
}) |
|
.catch(() => { |
|
this.$message({ |
|
type: "info", |
|
message: "已取消保存", |
|
}); |
|
}); |
|
}, |
|
cancel() { |
|
this.$confirm("是否取消编辑?", "提示", { |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
}) |
|
.then(() => { |
|
this.readonly = true; |
|
}) |
|
.catch(() => {}); |
|
}, |
|
back() { |
|
this.$router.push("/device"); |
|
}, |
|
step(num) { |
|
this.activeNames = num; |
|
}, |
|
handleSelectionChange(val) { |
|
this.multipleSelection = val; |
|
}, |
|
}, |
|
mounted() { |
|
console.log(this.$route.query.id); |
|
if (this.$route.query.id) { |
|
//查询页面，查询表单信息 |
|
} else { |
|
//新增页面，页面可编辑 |
|
this.readonly = false; |
|
} |
|
}, |
|
}; |
|
</script> |
|
|
|
<style> |
|
.main-container { |
|
width: calc(100% - 48px); |
|
height: calc(100vh - 160px); |
|
margin: 12px 12px 0 24px; |
|
background-color: rgb(236, 233, 233); |
|
overflow: auto; |
|
} |
|
|
|
.operation-box { |
|
display: flex; |
|
justify-content: center; |
|
align-content: center; |
|
background-color: rgba(141, 139, 139, 0.348); |
|
width: calc(100% - 48px); |
|
padding: 8px 0; |
|
margin: 0 24px; |
|
} |
|
|
|
.box-card { |
|
margin-top: 8px; |
|
} |
|
|
|
.bd-btns { |
|
display: flex; |
|
justify-content: flex-end; |
|
align-items: center; |
|
height: 60px; |
|
} |
|
|
|
.demo-form-inline { |
|
margin: 0 24px; |
|
} |
|
</style> |