<div class="white-bg padding-lg">
|
<div class="margin-top">
|
<div class="ibox">
|
<div class="ibox-title">
|
<h5>
|
广告合同汇总表
|
</h5>
|
</div>
|
<div class="ibox-content">
|
<!-- 查询条件区域 -->
|
<div class="row">
|
<div class="col-sm-12">
|
<div class="ibox">
|
<div class="ibox-title">
|
<h5>查询条件</h5>
|
<div class="ibox-tools">
|
<a class="collapse-link">
|
<i class="fa fa-chevron-down"></i>
|
</a>
|
</div>
|
</div>
|
<div class="ibox-content">
|
<div class="row">
|
<div class="col-sm-3">
|
<div class="form-group">
|
<label for="contractNameLike">合同名称</label>
|
<input type="text" class="form-control" id="contractNameLike"
|
v-model="advertisementSummaryInfo.conditions.contractNameLike"
|
placeholder="请输入合同名称">
|
</div>
|
</div>
|
<div class="col-sm-3">
|
<div class="form-group">
|
<label for="contractCode">合同编号</label>
|
<input type="text" class="form-control" id="contractCode"
|
v-model="advertisementSummaryInfo.conditions.contractCode"
|
placeholder="请输入合同编号">
|
</div>
|
</div>
|
<div class="col-sm-3">
|
<div class="form-group">
|
<label for="contractType">合同类型</label>
|
<select class="form-control" id="contractType"
|
v-model="advertisementSummaryInfo.conditions.contractType">
|
<option value="">全部</option>
|
<option v-for="(item, index) in advertisementSummaryInfo.contractTypes" :key="index"
|
v-bind:value="item.contractType">
|
{{item.contractTypeName}}
|
</option>
|
</select>
|
</div>
|
</div>
|
<div class="col-sm-3">
|
<div class="form-group">
|
<label for="state">合同状态</label>
|
<select class="form-control" id="state"
|
v-model="advertisementSummaryInfo.conditions.state">
|
<option value="">全部</option>
|
<option value="1000">草稿</option>
|
<option value="2000">生效</option>
|
<option value="3000">过期</option>
|
<option value="4000">终止</option>
|
</select>
|
</div>
|
</div>
|
</div>
|
<div class="row">
|
<div class="col-sm-12 text-right">
|
<button type="button" class="btn btn-primary" v-on:click="_queryContractMethod()">
|
<i class="fa fa-search"></i>
|
查询
|
</button>
|
<button type="button" class="btn btn-primary" v-on:click="_resetContractMethod()">
|
<i class="fa fa-repeat"></i>
|
重置
|
</button>
|
<button type="button" class="btn btn-primary" v-on:click="_openAddContractModal()">
|
<i class="fa fa-plus"></i>
|
添加合同
|
</button>
|
<button type="button" class="btn btn-primary" v-on:click="_openImportContractModal()">
|
<i class="fa fa-upload"></i>
|
导入数据
|
</button>
|
<button type="button" class="btn btn-primary" v-on:click="_exportContractData()" style="margin-left: 10px;">
|
<i class="fa fa-download"></i>
|
导出
|
</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 数据表格区域 -->
|
<div class="row">
|
<div class="col-sm-12">
|
<table class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
|
<thead>
|
<tr>
|
<th class="text-center">序号</th>
|
<th class="text-center">合同编号</th>
|
<th class="text-center">合同名称</th>
|
<th class="text-center">合同类型</th>
|
<th class="text-center">合同状态</th>
|
<th class="text-center">物业公司名称</th>
|
<th class="text-center">合同年限(年)</th>
|
<th class="text-center">是否存档</th>
|
<th class="text-center">合同提醒日期</th>
|
<th class="text-center">操作</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(contract, index) in advertisementSummaryInfo.contracts" :key="contract.contractId">
|
<td class="text-center">{{index + 1}}</td>
|
<td class="text-center">{{contract.contractCode || '-'}}</td>
|
<td class="text-center">{{contract.contractName || '-'}}</td>
|
<td class="text-center">{{contract.contractTypeName || '-'}}</td>
|
<td class="text-center">
|
<span v-if="contract.state === '1000'" class="label label-info">草稿</span>
|
<span v-else-if="contract.state === '2000'" class="label label-success">生效</span>
|
<span v-else-if="contract.state === '3000'" class="label label-warning">过期</span>
|
<span v-else-if="contract.state === '4000'" class="label label-danger">终止</span>
|
<span v-else class="label label-default">未知</span>
|
</td>
|
<td class="text-center">{{contract.propertyCompany || '-'}}</td>
|
<td class="text-center">{{contract.contractTerm || '-'}}</td>
|
<td class="text-center">
|
<span v-if="contract.isArchived === '0'" class="label label-info">未存档</span>
|
<span v-else-if="contract.isArchived === '1'" class="label label-success">已存档</span>
|
<span v-else class="label label-default">未知</span>
|
</td>
|
<td class="text-center">{{contract.contractReminderDate || '-'}}</td>
|
<td class="text-center">
|
<button type="button" class="btn btn-xs btn-info"
|
v-on:click="_openEditContractModel(contract)">编辑</button>
|
<button type="button" class="btn btn-xs btn-danger"
|
v-on:click="_openDeleteContractModel(contract)">删除</button>
|
</td>
|
</tr>
|
<tr v-if="advertisementSummaryInfo.contracts.length == 0">
|
<td colspan="10" style="text-align: center; color: #999;">
|
暂无数据
|
</td>
|
</tr>
|
</tbody>
|
<tfoot>
|
<tr>
|
<td colspan="10">
|
<ul class="pagination float-right"></ul>
|
</td>
|
</tr>
|
</tfoot>
|
</table>
|
|
<!-- 分页区域 -->
|
<div class="row margin-top-xs">
|
<div class="col-sm-12 float-right">
|
<vc:create path="frame/pagination"></vc:create>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 广告合同导入弹窗 -->
|
<div class="modal fade" id="importContractModel" tabindex="-1" role="dialog" aria-labelledby="importContractModelLabel" aria-hidden="true">
|
<div class="modal-dialog modal-lg" role="document">
|
<div class="modal-content">
|
<div class="modal-body">
|
<h3 class="m-t-none m-b">
|
广告合同数据导入
|
</h3>
|
<div class="ibox-content">
|
<div>
|
<div class="form-group row">
|
<label class="col-sm-2 col-form-label">选择文件</label>
|
<div class="col-sm-10">
|
<div class="input-group">
|
<input type="text" class="form-control"
|
:value="advertisementSummaryInfo.importExcelFile==''?'必填，请选择数据文件':advertisementSummaryInfo.importExcelFile.name"
|
readonly>
|
<div class="input-group-append">
|
<button class="btn btn-outline-secondary" type="button"
|
onclick="document.getElementById('importExcelFile').click()">
|
文件
|
</button>
|
</div>
|
<input id="importExcelFile" ref="importExcelFile" type="file"
|
class="form-control d-none" name="importExcelFile"
|
v-on:change="_getExcelTemplate($event)" accept=".xls,.xlsx">
|
</div>
|
</div>
|
</div>
|
<div class="form-group row">
|
<label class="col-sm-2 col-form-label">下载模板</label>
|
<div class="col-sm-10">
|
请先下载
|
<a href="javascript:void(0)" @click="_exportContractTemplate()">
|
广告合同导入模板
|
</a>
|
准备数据后，上传导入
|
<div class="mt-2 text-muted">
|
<small>
|
提示：模板包含 "广告合同汇总表" sheet，请在对应sheet中填写数据
|
</small>
|
</div>
|
</div>
|
</div>
|
<div class="ibox-content">
|
<button class="btn btn-primary float-right" type="button" v-on:click="_importContractData()">
|
<i class="fa fa-check"></i> 导入
|
</button>
|
<button type="button" class="btn btn-warning float-right" style="margin-right:20px;" data-dismiss="modal">
|
<i class="fa fa-close"></i> 取消
|
</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 广告合同信息管理区域 -->
|
<div class="margin-top">
|
<div class="ibox">
|
<div class="ibox-title">
|
<h5>
|
广告合同信息管理
|
</h5>
|
</div>
|
<div class="ibox-content">
|
<!-- 广告合同信息查询条件区域 -->
|
<div class="row">
|
<div class="col-sm-12">
|
<div class="ibox">
|
<div class="ibox-title">
|
<h5>查询条件</h5>
|
<div class="ibox-tools">
|
<a class="collapse-link">
|
<i class="fa fa-chevron-down"></i>
|
</a>
|
</div>
|
</div>
|
<div class="ibox-content">
|
<div class="row">
|
<div class="col-sm-3">
|
<div class="form-group">
|
<label for="adContractId">合同ID</label>
|
<input type="text" class="form-control" id="adContractId"
|
v-model="adContractInfo.conditions.contractId"
|
placeholder="请输入合同ID">
|
</div>
|
</div>
|
<div class="col-sm-3">
|
<div class="form-group">
|
<label for="adType">广告类型</label>
|
<select class="form-control" id="adType"
|
v-model="adContractInfo.conditions.adType"
|
@change="adContractInfo.conditions.subType = ''">
|
<option value="">全部</option>
|
<option v-for="(value, key) in AD_TYPES" :key="key" :value="key">
|
{{key}}
|
</option>
|
</select>
|
</div>
|
</div>
|
<div class="col-sm-3">
|
<div class="form-group">
|
<label for="subType">广告子类型</label>
|
<select class="form-control" id="subType"
|
v-model="adContractInfo.conditions.subType">
|
<option value="">全部</option>
|
<option v-for="(subType, index) in _getSubTypes(adContractInfo.conditions.adType)" :key="index"
|
:value="subType">
|
{{subType}}
|
</option>
|
</select>
|
</div>
|
</div>
|
<div class="col-sm-3">
|
<div class="form-group">
|
<label for="cooperationForm">合作内容形式</label>
|
<input type="text" class="form-control" id="cooperationForm"
|
v-model="adContractInfo.conditions.cooperationForm"
|
placeholder="请输入合作内容形式">
|
</div>
|
</div>
|
</div>
|
<div class="row">
|
<div class="col-sm-12 text-right">
|
<button type="button" class="btn btn-primary" v-on:click="_queryAdContractInfo()">
|
<i class="fa fa-search"></i>
|
查询
|
</button>
|
<button type="button" class="btn btn-primary" v-on:click="_resetAdContractQuery()">
|
<i class="fa fa-repeat"></i>
|
重置
|
</button>
|
<button type="button" class="btn btn-primary" v-on:click="_openAddAdContractModal()">
|
<i class="fa fa-plus"></i>
|
添加广告合同信息
|
</button>
|
<button type="button" class="btn btn-primary" v-on:click="_queryAdContractInfoStatistics()" style="margin-left: 10px;">
|
<i class="fa fa-bar-chart"></i>
|
统计
|
</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 广告合同信息数据表格区域 -->
|
<div class="row">
|
<div class="col-sm-12">
|
<table class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
|
<thead>
|
<tr>
|
<th class="text-center">序号</th>
|
<th class="text-center">合同ID</th>
|
<th class="text-center">广告类型</th>
|
<th class="text-center">广告子类型</th>
|
<th class="text-center">合作内容形式</th>
|
<th class="text-center">小区楼栋数/电梯数</th>
|
<th class="text-center">上线数量</th>
|
<th class="text-center">设施安装位置</th>
|
<th class="text-center">操作</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item, index) in adContractInfo.dataList" :key="item.id">
|
<td class="text-center">{{index + 1}}</td>
|
<td class="text-center">{{item.contractId || '-'}}</td>
|
<td class="text-center">{{item.adType || '-'}}</td>
|
<td class="text-center">{{item.subType || '-'}}</td>
|
<td class="text-center">{{item.cooperationForm || '-'}}</td>
|
<td class="text-center">{{item.buildingElevatorCount || '-'}}</td>
|
<td class="text-center">{{item.onlineQuantity || '-'}}</td>
|
<td class="text-center">{{item.facilityLocation || '-'}}</td>
|
<td class="text-center">
|
<button type="button" class="btn btn-xs btn-info"
|
v-on:click="_openEditAdContractModal(item)">编辑</button>
|
<button type="button" class="btn btn-xs btn-danger"
|
v-on:click="_deleteAdContractInfo(item.id)">删除</button>
|
</td>
|
</tr>
|
<tr v-if="adContractInfo.dataList.length == 0">
|
<td colspan="9" style="text-align: center; color: #999;">
|
暂无数据
|
</td>
|
</tr>
|
</tbody>
|
<tfoot>
|
<tr>
|
<td colspan="9">
|
<ul class="pagination float-right">
|
<li class="page-item" :class="{disabled: adContractInfo.page <= 1}">
|
<a class="page-link" @click="_changeAdContractPage(adContractInfo.page - 1)">上一页</a>
|
</li>
|
<li class="page-item active">
|
<a class="page-link">{{adContractInfo.page}}</a>
|
</li>
|
<li class="page-item" :class="{disabled: adContractInfo.page >= Math.ceil(adContractInfo.total / adContractInfo.row)}">
|
<a class="page-link" @click="_changeAdContractPage(adContractInfo.page + 1)">下一页</a>
|
</li>
|
</ul>
|
</td>
|
</tr>
|
</tfoot>
|
</table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 广告合同信息添加/编辑弹窗 -->
|
<div class="modal fade" id="adContractInfoModal" tabindex="-1" role="dialog" aria-labelledby="adContractInfoModalLabel" aria-hidden="true">
|
<div class="modal-dialog modal-lg" role="document">
|
<div class="modal-content">
|
<div class="modal-body">
|
<h3 class="m-t-none m-b">
|
{{adContractInfo.isEdit ? '编辑广告合同信息' : '添加广告合同信息'}}
|
</h3>
|
<div class="ibox-content">
|
<div>
|
<div class="form-group row">
|
<label class="col-sm-2 col-form-label">合同ID <span class="text-danger">*</span></label>
|
<div class="col-sm-10">
|
<input type="text" class="form-control"
|
v-model="adContractInfo.formData.contractId"
|
placeholder="请输入合同ID">
|
</div>
|
</div>
|
<div class="form-group row">
|
<label class="col-sm-2 col-form-label">广告类型 <span class="text-danger">*</span></label>
|
<div class="col-sm-10">
|
<select class="form-control"
|
v-model="adContractInfo.formData.adType"
|
@change="adContractInfo.formData.subType = ''">
|
<option value="">请选择广告类型</option>
|
<option v-for="(value, key) in AD_TYPES" :key="key" :value="key">
|
{{key}}
|
</option>
|
</select>
|
</div>
|
</div>
|
<div class="form-group row">
|
<label class="col-sm-2 col-form-label">广告子类型 <span class="text-danger">*</span></label>
|
<div class="col-sm-10">
|
<select class="form-control"
|
v-model="adContractInfo.formData.subType">
|
<option value="">请选择广告子类型</option>
|
<option v-for="(subType, index) in _getSubTypes(adContractInfo.formData.adType)" :key="index"
|
:value="subType">
|
{{subType}}
|
</option>
|
</select>
|
</div>
|
</div>
|
<div class="form-group row">
|
<label class="col-sm-2 col-form-label">合作内容形式 <span class="text-danger">*</span></label>
|
<div class="col-sm-10">
|
<input type="text" class="form-control"
|
v-model="adContractInfo.formData.cooperationForm"
|
placeholder="请输入合作内容形式">
|
</div>
|
</div>
|
<div class="form-group row">
|
<label class="col-sm-2 col-form-label">小区楼栋数/电梯数</label>
|
<div class="col-sm-10">
|
<input type="text" class="form-control"
|
v-model="adContractInfo.formData.buildingElevatorCount"
|
placeholder="请输入小区楼栋数/电梯数">
|
</div>
|
</div>
|
<div class="form-group row">
|
<label class="col-sm-2 col-form-label">上线数量</label>
|
<div class="col-sm-10">
|
<input type="text" class="form-control"
|
v-model="adContractInfo.formData.onlineQuantity"
|
placeholder="请输入上线数量">
|
</div>
|
</div>
|
<div class="form-group row">
|
<label class="col-sm-2 col-form-label">设施安装位置</label>
|
<div class="col-sm-10">
|
<input type="text" class="form-control"
|
v-model="adContractInfo.formData.facilityLocation"
|
placeholder="请输入设施安装位置">
|
</div>
|
</div>
|
<div class="ibox-content">
|
<button class="btn btn-primary float-right" type="button" v-on:click="_saveAdContractInfo()">
|
<i class="fa fa-check"></i> 保存
|
</button>
|
<button type="button" class="btn btn-warning float-right" style="margin-right:20px;" data-dismiss="modal">
|
<i class="fa fa-close"></i> 取消
|
</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 广告合同信息统计弹窗 -->
|
<div class="modal fade" id="adContractInfoStatisticsModal" tabindex="-1" role="dialog" aria-labelledby="adContractInfoStatisticsModalLabel" aria-hidden="true">
|
<div class="modal-dialog" role="document">
|
<div class="modal-content">
|
<div class="modal-body">
|
<h3 class="m-t-none m-b">
|
广告合同信息统计
|
</h3>
|
<div class="ibox-content">
|
<div>
|
<div class="form-group row">
|
<label class="col-sm-2 col-form-label">总记录数</label>
|
<div class="col-sm-10">
|
<input type="text" class="form-control"
|
:value="adContractInfo.statistics.totalCount"
|
readonly>
|
</div>
|
</div>
|
<div class="form-group row">
|
<label class="col-sm-2 col-form-label">广告类型统计</label>
|
<div class="col-sm-10">
|
<div v-for="(count, type) in adContractInfo.statistics.adTypeCount" :key="type" class="mb-2">
|
<label>{{type}}: </label>
|
<span>{{count}}条</span>
|
</div>
|
<div v-if="Object.keys(adContractInfo.statistics.adTypeCount).length === 0" class="text-muted">
|
暂无数据
|
</div>
|
</div>
|
</div>
|
<div class="form-group row">
|
<label class="col-sm-2 col-form-label">广告子类型统计</label>
|
<div class="col-sm-10">
|
<div v-for="(count, type) in adContractInfo.statistics.subTypeCount" :key="type" class="mb-2">
|
<label>{{type}}: </label>
|
<span>{{count}}条</span>
|
</div>
|
<div v-if="Object.keys(adContractInfo.statistics.subTypeCount).length === 0" class="text-muted">
|
暂无数据
|
</div>
|
</div>
|
</div>
|
<div class="ibox-content">
|
<button type="button" class="btn btn-primary float-right" data-dismiss="modal">
|
<i class="fa fa-close"></i> 关闭
|
</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
