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
9 months ago
|
<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>
|