123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290 |
- <template>
- <div class="regiBox">
- <crumbs title="产品续费列表">
- <el-form :inline="true" class="demo-form-inline">
- <el-form-item label="申请时间:">
- <el-date-picker v-model="filter.time" size="mini" type="daterange"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- value-format="yyyy-MM-dd HH:mm:ss"
- :default-time="['00:00:00', '23:59:59']"></el-date-picker>
- </el-form-item>
- <el-form-item label="机构名称:">
- <el-input size="mini" v-model="filter.orgName" placeholder="请输入机构名称" clearable></el-input>
- </el-select>
- </el-form-item>
- <el-form-item label="续费状态:">
- <el-select size="mini" v-model="filter.renewalsStatus" placeholder="续费状态" clearable >
- <el-option v-for="item in status" :label="item.name" :value="item.key"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button size="mini" @click="filterData">确认</el-button>
- </el-form-item>
- </el-form>
- </crumbs>
- <div class="contents">
- <el-table :data="list" border style="width: 100%">
- <el-table-column type="index" :index="indexMethod" label="编号" width="60">
- </el-table-column>
- <el-table-column prop="applyTime" label="申请时间"
- :show-overflow-tooltip="true">
- </el-table-column>
- <el-table-column prop="renewalsNo" label="续费订单号" :show-overflow-tooltip="true">
- </el-table-column>
- <el-table-column prop="orgName" label="申请机构">
- </el-table-column>
- <el-table-column prop="linkman" label="申请人">
- </el-table-column>
- <el-table-column prop="username" label="手机号" width="120">
- </el-table-column>
- <el-table-column prop="productName" label="申请产品">
- </el-table-column>
- <el-table-column label="到期时间"
- :show-overflow-tooltip="true"
- width="100">
- <template slot-scope="scope">
- {{scope.row.endTime&&scope.row.endTime.substr(0,10)}}
- </template>
- </el-table-column>
- <el-table-column prop="renewalsStatusName" label="续费状态">
- </el-table-column>
- <el-table-column prop="id" label="操作" width="130">
- <template slot-scope="scope">
- <el-popover
- v-if="scope.row.renewalsStatus != '1'"
- placement="top-start"
- width="180"
- v-model="scope.row.visible"
- >
- <span class="closeDate" @click="scope.row.visible = !scope.row.visible">×</span>
- <el-form label-position="top" :inline="true">
- <!--<el-form-item label="服务开始时间">
- <el-date-picker size="mini" type="date"
- value-format="yyyy-MM-dd"
- placeholder="选择开始时间"
- v-model="startTime"
- style="width: 100%;"></el-date-picker>
- </el-form-item>-->
- <el-form-item label="服务结束时间">
- <el-date-picker size="mini" type="date"
- :picker-options="endPicker"
- value-format="yyyy-MM-dd"
- placeholder="选择结束时间"
- v-model="endTime"
- style="width: 100%;"></el-date-picker>
- </el-form-item>
- <div style="text-align: center">
- <el-button type="primary" size="mini" @click="reBuyProduct(scope.row)">确定续费</el-button>
- </div>
- </el-form>
- <el-button slot="reference" size="mini" class="pop-btn">续费</el-button>
- </el-popover>
- <span v-if="scope.row.renewalsStatus == '1'">续费</span>
- <span style="margin:0 3px;">|</span>
- <span v-if="scope.row.renewalsStatus == '1'">取消续费</span>
- <el-button type="text" size="small" v-if="scope.row.renewalsStatus != '1'" @click="closeBtn(scope.row.id)">取消续费</el-button>
- </template>
- </el-table-column>
- </el-table>
- <el-pagination v-if="total>pageSize" :current-page.sync="currentPage" @current-change="currentChange" background
- :page-size="pageSize" layout="total,prev, pager, next, jumper" :total="total">
- </el-pagination>
- </div>
- </div>
- </template>
- <script>
- import api from '@api/admin.js';
- import userApi from '@api/user.js';
- import utils from '@api/utils.js';
- export default {
- name: 'product-lines',
- data() {
- return {
- list: [],
- status: [],
- cacheData: {},
- /*startTime:'',*/
- endTime:'',
- currentPage: 1,
- pageSize: 10,
- total: 0,
- username: null,
- endPicker:{
- disabledDate:(current)=>{ //今天之前不可选
- const today = new Date(new Date(new Date().toLocaleDateString()).getTime());
- return current<today;
- }
- },
- filter: {
- orderNum: '',
- orgName: '',
- username: '',
- orgName: '',
- renewalsStatus: '',
- time: '',
- }
- }
- },
- created() {
- this.queryUserInfo();
- const enums = JSON.parse(localStorage.getItem('productEnumsData'));
- this.status = enums&&enums.renewalsEnum; //续费状态枚举
- },
- methods: {
- filterData(){
- this.currentPage = 1;
- this.queryUserInfo();
- },
- queryUserInfo() { //续费列表数据获取
- const time = this.filter.time;
- const startTime = time&&time[0]||undefined;
- const endTime = time&&time[1]||undefined;
- const params = {
- 'orgName': this.filter.orgName, // 机构名称
- 'renewalsStatus': this.filter.renewalsStatus, // 续费状态
- 'current': this.currentPage, //分页
- 'size': this.pageSize, //条数
- 'startTime': startTime,
- 'endTime': endTime
- };
- api.renewalsInfos(params).then((res) => {
- if (res.data.code == '0') {
- const data = res.data.data;
- this.list = data.records.map((item) => {
- return {...item, visible: false}
- });
- this.total = data.total;
- }
- }).catch((error) => {
- console.log(error);
- });
- },
- indexMethod(index) {
- return ((this.currentPage - 1) * this.pageSize) + index + 1;
- },
- currentChange(next) {
- this.currentPage = next;
- if (this.cacheData[next]) { //如果已请求过该页数据,则使用缓存不重复请求
- this.list = this.cacheData[next];
- } else {
- this.queryUserInfo();
- }
- },
- reBuyProduct(row) { //确定续费
- const params = {
- 'productId': row.productId,
- 'endTime': this.endTime,
- 'userId': row.userId,
- 'renewalsNo': row.renewalsNo
- };
- if(!this.endTime){
- this.$message({
- showClose: true,
- message: '请先选择服务结束时间',
- type: 'warning'
- });
- return ;
- }
- api.modifyOpeningTime(params).then((res) => {
- if (res.data.code == '0') {
- this.$message({
- showClose: true,
- message: '操作成功!',
- type: 'success'
- });
- row.endTime = this.endTime;
- row.renewalsStatus = '1';
- row.renewalsStatusName = '已续费';
- }else{
- this.$message({
- showClose: true,
- message: res.data.msg,
- type: 'warning'
- });
- }
- this.endTime = ''; //操作后清空状态
- }).catch((error) => {
- this.$message({
- showClose: true,
- message: "服务器正忙...",
- type: 'error'
- });
- this.endTime = '';
- });
- },
- closeBtn(id) {
- const cloId = id;
- const params = {
- 'id': cloId
- };
- this.$confirm('确定取消此产品的续费服务?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- cancelButtonClass:'cancelColor',
- type: 'warning'
- }).then(() => {
- api.deleteRenewalsInfos(params).then((res) => {
- if (res.data.code == '0') {
- this.$message({
- showClose: true,
- message: '取消成功!',
- type: 'success'
- });
- }else{
- this.$message({
- showClose: true,
- message: res.data.msg,
- type: 'warning'
- });
- }
- this.queryUserInfo();
- }).catch((error) => {
- this.$message({
- showClose: true,
- message: "服务器正忙...",
- type: 'warning'
- });
- });
- }).catch(() => {
- });
- }
- }
- }
- </script>
- <style lang="less">
- .regiBox {
- .pop-btn{
- padding: 0 1px;
- }
- .el-dialog {
- width: 500px;
- margin-top: 255px !important;
- }
- .reGary{
- color: #ccc;
- cursor: auto;
- }
- }
- .cancelColor{
- color: #22ccc8 !important;
- }
- .el-message-box__btns button:nth-child(2) {
- color: #fff !important;
- }
- .el-input__prefix{
- left: 5px;
- right: auto;
- }
- .closeDate {
- position: absolute;
- top: 0px;
- right: 7px;
- cursor: pointer;
- font-size: 20px;
- }
- </style>
|