<!DOCTYPE html>
|
<!--
|
广告合同信息管理页面
|
功能：用于管理广告合同信息的增删改查和统计功能
|
包含：查询、添加、编辑、删除广告合同信息，以及统计功能
|
-->
|
<div class="ad-contract-info">
|
<!-- 广告合同信息管理面板 -->
|
<div class="panel panel-default">
|
<div class="panel-heading">
|
<h3 class="panel-title">广告合同信息管理</h3>
|
</div>
|
<div class="panel-body">
|
<!-- 查询条件区域 -->
|
<div class="search-condition">
|
<!-- 合同ID查询条件 -->
|
<div class="form-group">
|
<label for="contractId">合同ID:</label>
|
<input type="text" class="form-control" id="contractId"
|
v-model="adContractInfo.conditions.contractId"
|
placeholder="请输入合同ID">
|
</div>
|
|
<!-- 广告类型查询条件 -->
|
<div class="form-group">
|
<label for="adType">广告类型:</label>
|
<select class="form-control" id="adType"
|
v-model="adContractInfo.conditions.adType">
|
<option value="">全部</option>
|
<option v-for="(value, key) in AD_TYPES" :value="key">{{key}}</option>
|
</select>
|
</div>
|
|
<!-- 广告子类型查询条件 -->
|
<div class="form-group">
|
<label for="subType">广告子类型:</label>
|
<select class="form-control" id="subType"
|
v-model="adContractInfo.conditions.subType">
|
<option value="">全部</option>
|
<option v-if="adContractInfo.conditions.adType"
|
v-for="subType in AD_TYPES[adContractInfo.conditions.adType].subTypes"
|
:value="subType">{{subType}}</option>
|
</select>
|
</div>
|
|
<!-- 操作按钮 -->
|
<button type="button" class="btn btn-primary"
|
v-on:click="_queryAdContractInfo()">查询</button>
|
<button type="button" class="btn btn-default"
|
v-on:click="_resetQuery()">重置</button>
|
<button type="button" class="btn btn-success"
|
v-on:click="_openAddModal()">添加</button>
|
<button type="button" class="btn btn-info"
|
v-on:click="_getAdContractInfoStatistics()">统计</button>
|
</div>
|
|
<!-- 数据表格区域 -->
|
<table class="table table-striped table-bordered">
|
<thead>
|
<tr>
|
<th>ID</th> <!-- 主键ID -->
|
<th>合同ID</th> <!-- 合同唯一标识 -->
|
<th>广告类型</th> <!-- 广告类型 -->
|
<th>广告子类型</th> <!-- 广告子类型 -->
|
<th>合作内容形式</th> <!-- 合作内容形式 -->
|
<th>物业公司名称</th> <!-- 物业公司名称 -->
|
<th>合同年限(年)</th> <!-- 合同年限 -->
|
<th>是否存档</th> <!-- 是否存档 -->
|
<th>合同提醒日期</th> <!-- 合同提醒日期 -->
|
<th>操作</th> <!-- 操作按钮 -->
|
</tr>
|
</thead>
|
<tbody>
|
<!-- 数据行循环渲染 -->
|
<tr v-for="item in adContractInfo.dataList" :key="item.id">
|
<td>{{item.id}}</td>
|
<td>{{item.contractId}}</td>
|
<td>{{item.adType}}</td>
|
<td>{{item.subType}}</td>
|
<td>{{item.cooperationForm}}</td>
|
<td>{{item.propertyCompany || '-'}}</td>
|
<td>{{item.contractTerm || '-'}}</td>
|
<td>
|
<span v-if="item.isArchived === '0'" class="label label-info">未存档</span>
|
<span v-else-if="item.isArchived === '1'" class="label label-success">已存档</span>
|
<span v-else class="label label-default">未知</span>
|
</td>
|
<td>{{item.contractReminderDate || '-'}}</td>
|
<td>
|
<!-- 编辑按钮 -->
|
<button type="button" class="btn btn-xs btn-info"
|
v-on:click="_openEditModal(item)">编辑</button>
|
<!-- 删除按钮 -->
|
<button type="button" class="btn btn-xs btn-danger"
|
v-on:click="_deleteAdContractInfo(item.id)">删除</button>
|
<!-- 按合同ID查询按钮 -->
|
<button type="button" class="btn btn-xs btn-default"
|
v-on:click="_getAdContractInfoByContractId(item.contractId)">按合同查询</button>
|
</td>
|
</tr>
|
<!-- 无数据提示 -->
|
<tr v-if="adContractInfo.dataList.length === 0">
|
<td colspan="9" class="text-center">暂无数据</td>
|
</tr>
|
</tbody>
|
</table>
|
|
<!-- 分页控件区域 -->
|
<div class="pagination" v-if="adContractInfo.dataList.length > 0">
|
<span>共 {{adContractInfo.total}} 条记录</span>
|
<button class="btn btn-xs"
|
v-on:click="_changePage(1)"
|
:disabled="adContractInfo.page === 1">首页</button>
|
<button class="btn btn-xs"
|
v-on:click="_changePage(adContractInfo.page - 1)"
|
:disabled="adContractInfo.page === 1">上一页</button>
|
<span>{{adContractInfo.page}} / {{Math.ceil(adContractInfo.total / adContractInfo.row)}}</span>
|
<button class="btn btn-xs"
|
v-on:click="_changePage(adContractInfo.page + 1)"
|
:disabled="adContractInfo.page === Math.ceil(adContractInfo.total / adContractInfo.row)">下一页</button>
|
<button class="btn btn-xs"
|
v-on:click="_changePage(Math.ceil(adContractInfo.total / adContractInfo.row))"
|
:disabled="adContractInfo.page === Math.ceil(adContractInfo.total / adContractInfo.row)">末页</button>
|
</div>
|
</div>
|
</div>
|
|
<!-- 添加/编辑弹窗 -->
|
<div id="adContractInfoModal" class="modal fade" tabindex="-1" role="dialog">
|
<div class="modal-dialog" role="document">
|
<div class="modal-content">
|
<div class="modal-header">
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
<span aria-hidden="true">×</span>
|
</button>
|
<h4 class="modal-title">{{adContractInfo.isEdit ? '编辑广告合同信息' : '添加广告合同信息'}}</h4>
|
</div>
|
<div class="modal-body">
|
<form class="form-horizontal">
|
<!-- 合同ID字段 -->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">合同ID:</label>
|
<div class="col-sm-9">
|
<input type="text" class="form-control"
|
v-model="adContractInfo.formData.contractId"
|
placeholder="请输入合同ID"
|
required>
|
</div>
|
</div>
|
|
<!-- 广告类型字段 -->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">广告类型:</label>
|
<div class="col-sm-9">
|
<select class="form-control"
|
v-model="adContractInfo.formData.adType"
|
required>
|
<option value="">请选择广告类型</option>
|
<option v-for="(value, key) in AD_TYPES" :value="key">{{key}}</option>
|
</select>
|
</div>
|
</div>
|
|
<!-- 广告子类型字段 -->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">广告子类型:</label>
|
<div class="col-sm-9">
|
<select class="form-control"
|
v-model="adContractInfo.formData.subType"
|
required>
|
<option value="">请选择广告子类型</option>
|
<option v-if="adContractInfo.formData.adType"
|
v-for="subType in AD_TYPES[adContractInfo.formData.adType].subTypes"
|
:value="subType">{{subType}}</option>
|
</select>
|
</div>
|
</div>
|
|
<!-- 合作内容形式字段 -->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">合作内容形式:</label>
|
<div class="col-sm-9">
|
<input type="text" class="form-control"
|
v-model="adContractInfo.formData.cooperationForm"
|
placeholder="请输入合作内容形式"
|
required>
|
</div>
|
</div>
|
|
<!-- 小区楼栋数/电梯数字段 -->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">小区楼栋数/电梯数:</label>
|
<div class="col-sm-9">
|
<input type="text" class="form-control"
|
v-model="adContractInfo.formData.buildingElevatorCount"
|
placeholder="请输入小区楼栋数/电梯数">
|
</div>
|
</div>
|
|
<!-- 上线数量字段 -->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">上线数量:</label>
|
<div class="col-sm-9">
|
<input type="text" class="form-control"
|
v-model="adContractInfo.formData.onlineQuantity"
|
placeholder="请输入上线数量">
|
</div>
|
</div>
|
|
<!-- 设施安装位置字段 -->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">设施安装位置:</label>
|
<div class="col-sm-9">
|
<input type="text" class="form-control"
|
v-model="adContractInfo.formData.facilityLocation"
|
placeholder="请输入设施安装位置">
|
</div>
|
</div>
|
|
<!-- 物业公司名称字段 -->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">物业公司名称:</label>
|
<div class="col-sm-9">
|
<input type="text" class="form-control"
|
v-model="adContractInfo.formData.propertyCompany"
|
placeholder="请输入物业公司名称">
|
</div>
|
</div>
|
|
<!-- 合同年限字段 -->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">合同年限:</label>
|
<div class="col-sm-9">
|
<input type="number" class="form-control"
|
v-model="adContractInfo.formData.contractTerm"
|
placeholder="请输入合同年限（年）"
|
min="1">
|
</div>
|
</div>
|
|
<!-- 是否存档字段 -->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">是否存档:</label>
|
<div class="col-sm-9">
|
<select class="form-control"
|
v-model="adContractInfo.formData.isArchived">
|
<option value="0">未存档</option>
|
<option value="1">已存档</option>
|
</select>
|
</div>
|
</div>
|
|
<!-- 合同提醒日期字段 -->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">合同提醒日期:</label>
|
<div class="col-sm-9">
|
<input type="date" class="form-control"
|
v-model="adContractInfo.formData.contractReminderDate">
|
</div>
|
</div>
|
|
<!-- 签约方详细地址字段 -->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">签约方详细地址:</label>
|
<div class="col-sm-9">
|
<input type="text" class="form-control"
|
v-model="adContractInfo.formData.signatoryAddress"
|
placeholder="请输入签约方详细地址">
|
</div>
|
</div>
|
|
<!-- 签约方联系邮箱字段 -->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">签约方联系邮箱:</label>
|
<div class="col-sm-9">
|
<input type="email" class="form-control"
|
v-model="adContractInfo.formData.contactEmail"
|
placeholder="请输入签约方联系邮箱">
|
</div>
|
</div>
|
|
<!-- 签约方联系微信字段 -->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">签约方联系微信:</label>
|
<div class="col-sm-9">
|
<input type="text" class="form-control"
|
v-model="adContractInfo.formData.contactWechat"
|
placeholder="请输入签约方联系微信">
|
</div>
|
</div>
|
|
<!-- 合同备注信息字段 -->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">合同备注信息:</label>
|
<div class="col-sm-9">
|
<textarea class="form-control"
|
v-model="adContractInfo.formData.remarks"
|
placeholder="请输入合同备注信息"
|
rows="3"></textarea>
|
</div>
|
</div>
|
</form>
|
</div>
|
<div class="modal-footer">
|
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
|
<button type="button" class="btn btn-primary"
|
v-on:click="_saveAdContractInfo">保存</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 统计结果弹窗 -->
|
<div id="adContractInfoStatisticsModal" class="modal fade" tabindex="-1" role="dialog">
|
<div class="modal-dialog" role="document">
|
<div class="modal-content">
|
<div class="modal-header">
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
<span aria-hidden="true">×</span>
|
</button>
|
<h4 class="modal-title">广告合同信息统计</h4>
|
</div>
|
<div class="modal-body">
|
<!-- 总数量统计 -->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">总记录数:</label>
|
<div class="col-sm-9">
|
<span class="form-control-static">{{adContractInfo.statistics.totalCount}}</span>
|
</div>
|
</div>
|
|
<!-- 广告类型统计 -->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">广告类型分布:</label>
|
<div class="col-sm-9">
|
<ul class="list-unstyled">
|
<li v-for="(count, type) in adContractInfo.statistics.adTypeCount">
|
{{type}}: {{count}} 条
|
</li>
|
<li v-if="Object.keys(adContractInfo.statistics.adTypeCount).length === 0">
|
暂无数据
|
</li>
|
</ul>
|
</div>
|
</div>
|
|
<!-- 广告子类型统计 -->
|
<div class="form-group">
|
<label class="col-sm-3 control-label">广告子类型分布:</label>
|
<div class="col-sm-9">
|
<ul class="list-unstyled">
|
<li v-for="(count, subType) in adContractInfo.statistics.subTypeCount">
|
{{subType}}: {{count}} 条
|
</li>
|
<li v-if="Object.keys(adContractInfo.statistics.subTypeCount).length === 0">
|
暂无数据
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div class="modal-footer">
|
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
