God
3 years ago
9 changed files with 446 additions and 11 deletions
@ -0,0 +1,19 @@ |
|||
import request from "@/utils/request"; |
|||
// import qs from "qs";
|
|||
// ----------------------------------- 合同档案管理
|
|||
// 列表查询接口
|
|||
export function getPageList(data) { |
|||
return request({ |
|||
url: '/base/v1/commoncontract/listPage', |
|||
method: 'post', |
|||
data: data, |
|||
headers: { 'Content-Type': 'application/json' } |
|||
}) |
|||
} |
|||
// 编辑回显
|
|||
export function getOneContract(data) { |
|||
return request({ |
|||
url: '/base/v1/commoncontract/fetchSid/' + data, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
@ -0,0 +1,142 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div class="tab-header webtop"> |
|||
<div>合同档案详情</div> |
|||
<div> |
|||
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button> |
|||
</div> |
|||
</div> |
|||
<div class="listconadd"> |
|||
<el-form ref="dataForm" :model="temp" label-position="right" label-width="190px" class="formadd" :disabled="edit"> |
|||
<div class="titwu">{{ temp.contractType }}合同</div> |
|||
<el-row class="bordertopline"> |
|||
<el-col :span="12"> |
|||
<el-form-item prop="name"> |
|||
<span slot="label">合同编号</span> |
|||
<el-input v-model="temp.contractNo" class="addinputw" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item prop="name"> |
|||
<span slot="label">经办人</span> |
|||
<el-input v-model="temp.staffName" class="addinputw" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item> |
|||
<span slot="label">甲方名称</span> |
|||
<el-input v-model="temp.partyA" class="addinputw" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item> |
|||
<span slot="label">乙方名称</span> |
|||
<el-input v-model="temp.partyB" class="addinputw" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item> |
|||
<span slot="label">车型</span> |
|||
<el-input v-model="temp.modelName" class="addinputw" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item prop="name"> |
|||
<span slot="label">台数</span> |
|||
<el-input v-model="temp.num" class="addinputw" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item prop="name"> |
|||
<span slot="label">单价</span> |
|||
<el-input v-model="temp.price" class="addinputw" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item prop="name"> |
|||
<span slot="label">合同金额</span> |
|||
<el-input v-model="temp.contractAmount" class="addinputw" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="tableStyle"> |
|||
<div style="margin-left: 10px;color: #ffffff">《新车买卖合同》</div> |
|||
</div> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<img v-for="(item,index) in temp.commonAppendixVos" @click="magnifyImg(item)" class="imgcontent" :key="index" :src="item"> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="tableStyle"> |
|||
<div style="margin-left: 10px;color: #ffffff">《合同现场签署照片》</div> |
|||
</div> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<img v-for="(map_item,index) in temp.sceneSignUrlList" @click="magnifyImg(map_item)" class="imgcontent" :key="index" :src="map_item"> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
<el-dialog :visible.sync="dialogVisiblePhoto" append-to-body> |
|||
<img width="100%" :src="dialogImageUrl" alt="" /> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getOneContract } from '@/api/jichuxinxi/contractfile' |
|||
export default { |
|||
name: 'HetongdanganguanliAdd', |
|||
data() { |
|||
return { |
|||
dialogVisiblePhoto: false, |
|||
dialogImageUrl: '', |
|||
disabled: false, |
|||
temp: {}, |
|||
edit:true, |
|||
} |
|||
}, |
|||
methods: { |
|||
// 回显详情 |
|||
showInfo(row) { |
|||
console.log(row) |
|||
getOneContract(row.sid).then((res) => { |
|||
if (res.code == '200') { |
|||
this.temp = res.data |
|||
console.log(res.data) |
|||
} |
|||
}) |
|||
}, |
|||
magnifyImg(val) { |
|||
this.dialogVisiblePhoto = true |
|||
this.dialogImageUrl = val |
|||
}, |
|||
// 返回 |
|||
handleReturn() { |
|||
this.$emit('doBack') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.tableStyle { |
|||
margin-top: 0px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
border: 1px solid #dfe4ed; |
|||
height: 40px; |
|||
background-color: #018ad2; |
|||
} |
|||
.imgcontent { |
|||
width: 100px; |
|||
height: 100px; |
|||
margin-left: 5px |
|||
} |
|||
</style> |
|||
@ -0,0 +1,227 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState==1"> |
|||
<div class="tab-header webtop"> |
|||
<div>合同模板管理</div> |
|||
<div> |
|||
<el-button type="info" size="small">关闭</el-button> |
|||
</div> |
|||
</div> |
|||
<div class="webcon"> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form :inline="true" class="tab-header"> |
|||
<el-row> |
|||
<el-form-item label="合同类型" class="searchlist"> |
|||
<el-select v-model="listQuery.params.contractType" placeholder="请选择" class="filter-item"> |
|||
<el-option v-for="item in typeList" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="合同编号" class="searchlist"> |
|||
<el-input v-model="listQuery.params.contractNo" placeholder="" clearable class="filter-item"/> |
|||
</el-form-item> |
|||
<el-form-item label="签订日期" class="searchlist"> |
|||
<el-date-picker v-model="listQuery.params.createDateStart" class="filter-item" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择"/> |
|||
<label>至</label> |
|||
<el-date-picker v-model="listQuery.params.createDateEnd" class="filter-item" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择"/> |
|||
</el-form-item> |
|||
<el-form-item label="甲方名称" class="searchlist"> |
|||
<el-input v-model="listQuery.params.partyA" placeholder="" clearable class="filter-item"/> |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label="乙方名称" class="searchlist"> |
|||
<el-input v-model="listQuery.params.partyB" placeholder="" clearable class="filter-item"/> |
|||
</el-form-item> |
|||
</el-row> |
|||
<div class="searchbtns"> |
|||
<el-button type="primary" @click="handleFilter">查询</el-button> |
|||
<el-button type="primary" @click="handleReset">重置</el-button> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
<div class="listtop"> |
|||
<div class="tit">合同模板列表</div> |
|||
<pageye v-show="list.length>0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/> |
|||
</div> |
|||
<div class=""> |
|||
<el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%"> |
|||
<el-table-column width="50px" type="selection" align="center"/> |
|||
<el-table-column width="80px" label="序号" type="index" :index="indexMethod" align="center"/> |
|||
<el-table-column label="合同编号" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span class="bluezi" @click="lookDetails(scope.row)">{{ scope.row.contractNo }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="甲方名称" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.partyA }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="乙方名称" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.partyB }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="合同金额" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.contractAmount }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="经办人" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.staffName }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div class="pages"> |
|||
<div class="tit"/> |
|||
<!-- 翻页 --> |
|||
<pagination v-show="list.length>0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<hetongshenhe-info v-show="viewState == 2" ref="divInfo" @doBack="resetState"/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getPageList } from '@/api/jichuxinxi/contractfile' |
|||
import Pagination from '@/components/pagination' |
|||
import pageye from '@/components/pagination/pageye' |
|||
import { dictType } from '@/api/salesManagement/orderManagement' |
|||
import hetongshenheInfo from '@/views/hetongguanli/hetongshenheguanli/hetongshenheInfo' |
|||
|
|||
export default { |
|||
name: 'HeTongDangAnGuanLi', |
|||
components: { |
|||
Pagination, |
|||
pageye, |
|||
hetongshenheInfo |
|||
}, |
|||
data() { |
|||
return { |
|||
isSearchShow: false, |
|||
searchxianshitit: '隐藏查询条件', |
|||
// 查询 ----------- |
|||
tableKey: 0, |
|||
viewState: 1, |
|||
list: [], |
|||
typeList: [], |
|||
listLoading: false, |
|||
listQuery: { |
|||
current: 1, |
|||
size: 10, |
|||
params: { |
|||
contractNo: '', |
|||
contractTypeKey: '', |
|||
createDateEnd: '', |
|||
createDateStart: '', |
|||
partyA: '', |
|||
partyB: '' |
|||
}, |
|||
total: 0 |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
// 加载列表 |
|||
this.getList() |
|||
this.getType() |
|||
}, |
|||
methods: { |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = '隐藏查询条件' |
|||
} else { |
|||
this.searchxianshitit = '显示查询条件' |
|||
} |
|||
}, |
|||
// 合同类型 |
|||
getType() { |
|||
dictType({ |
|||
type: 'contractType', |
|||
}).then((response) => { |
|||
if (response.code === '200' && response.data) { |
|||
this.typeList = response.data |
|||
} |
|||
}) |
|||
}, |
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.current - 1) * this.listQuery.size |
|||
var pageindex = index + 1 + pagestart |
|||
return pageindex |
|||
}, |
|||
// 查询列表信息 |
|||
getList() { |
|||
this.listLoading = true |
|||
getPageList(this.listQuery).then((response) => { |
|||
this.listLoading = false |
|||
if (response.code === '200' && response.data && response.data.total > 0) { |
|||
this.list = response.data.records |
|||
this.listQuery.total = response.data.total |
|||
} else { |
|||
this.list = [] |
|||
this.listQuery.total = 0 |
|||
} |
|||
}) |
|||
}, |
|||
// 查询按钮 |
|||
handleFilter() { |
|||
this.listQuery.current = 1 |
|||
this.getList() |
|||
}, |
|||
// 重置 |
|||
handleReset() { |
|||
this.listQuery = { |
|||
current: 1, |
|||
size: 20, |
|||
params: { |
|||
contractNo: '', |
|||
contractTypeKey: '', |
|||
createDateEnd: '', |
|||
createDateStart: '', |
|||
partyA: '', |
|||
partyB: '' |
|||
}, |
|||
total: 0 |
|||
} |
|||
this.getList() |
|||
}, |
|||
lookDetails(row) { |
|||
this.viewState = 2 |
|||
this.$refs['divInfo'].showInfo(row) |
|||
}, |
|||
resetState() { |
|||
this.viewState = 1 |
|||
this.getList() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.filter-item { |
|||
padding: 0 10px; |
|||
width: 220px; |
|||
display: inline-block; |
|||
} |
|||
.listtop { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
border: 1px solid #dfe4ed; |
|||
height: 40px; |
|||
} |
|||
.tit { |
|||
margin-bottom: -10px; |
|||
} |
|||
.pagination { |
|||
margin-bottom: -10px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue