258 lines
9.2 KiB
Vue
258 lines
9.2 KiB
Vue
<template>
|
||
<div class="divBox" :loading="loading">
|
||
<!--主要内容-->
|
||
<el-card class="box-card">
|
||
<!--顶部搜索-->
|
||
<div slot="header" class="clearfix">
|
||
<div class="container">
|
||
<el-form size="small" label-width="100px" :inline="true">
|
||
<el-form-item label="关键字：" label-width="120px" style="display: inline-block;">
|
||
<el-input v-model="tableFrom.keyword" @keyup.enter.native="getList(1)" placeholder="请输入店铺关键字/店铺名/联系电话" class="selWidth">
|
||
<el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)" />
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<!--列表-->
|
||
<el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="small" highlight-current-row class="switchTable">
|
||
<el-table-column prop="mer_id" label="ID" min-width="60" align="center"/>
|
||
<el-table-column prop="mer_name" :label="merchantTitle + '名称'" min-width="150" align="center"/>
|
||
<el-table-column prop="quota_total" label="总额度" min-width="150" align="center"/>
|
||
<el-table-column prop="quota_used" label="已使用额度" min-width="150" align="center"/>
|
||
<el-table-column prop="quota_surplus" label="剩余可用额度" min-width="150" align="center"/>
|
||
<el-table-column label="操作" min-width="150" fixed="right" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" size="small" @click="changeQuotaShow(scope.row)">额度变更</el-button>
|
||
<el-button type="text" size="small" @click="changeRecordShow(scope.row)">变更明细</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!--分页-->
|
||
<el-pagination :page-size="tableFrom.limit" :current-page="tableFrom.page" :total="tableData.total" @current-change="pageChange" />
|
||
</el-card>
|
||
<!--额度变更弹框-->
|
||
<el-dialog title="补货额度变更" :visible.sync="changeQuotaDiaLogStatus" width="800px" :before-close="changeQuotaClose">
|
||
<!--变更表单-->
|
||
<el-form :model="changeInfo" ref="changeInfoFrom" :rules="changeInfoRules" label-width="120px">
|
||
<el-form-item label="变更类型" prop="change_type" >
|
||
<el-radio-group v-model="changeInfo.change_type">
|
||
<el-radio :label="0">减少</el-radio>
|
||
<el-radio :label="1">增加</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="变更数量" prop="change_quantity">
|
||
<el-input type="number" step="0.01" v-model="changeInfo.change_quantity" clearable maxlength="8">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<!-- 底部按钮 -->
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="changeQuotaClose">取 消</el-button>
|
||
<el-button type="primary" @click="changeQuotaSubmit">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<!--额度变更记录弹框-->
|
||
<el-dialog title="变更明细" :visible.sync="changeRecordDiaLogStatus" width="1200px" :before-close="changeRecordClose">
|
||
<!--列表-->
|
||
<el-table v-loading="recordLoading" :data="recordTableData.data" style="width: 100%" size="small" highlight-current-row class="switchTable">
|
||
<el-table-column prop="mer_id" label="ID" min-width="60" align="center"/>
|
||
<el-table-column label="变更前数量" prop="change_front" min-width="120" align="center"/>
|
||
<el-table-column label="变更类型" min-width="80" align="center">
|
||
<template slot-scope="scope">
|
||
<el-tag v-if="scope.row.change_type == 1" type="success" effect="dark">增加</el-tag>
|
||
<el-tag v-else type="danger" effect="dark">减少</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="变更数量" prop="change_quantity" min-width="120" align="center"/>
|
||
<el-table-column label="变更后数量" prop="change_after" min-width="120" align="center"/>
|
||
<el-table-column label="变更来源" min-width="150" align="center">
|
||
<template slot-scope="scope">
|
||
<div v-if="scope.row.source == 0">后台手动处理</div>
|
||
<div v-else-if="scope.row.source == 1">补货减少</div>
|
||
<div v-else>--</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!--分页-->
|
||
<el-pagination
|
||
:page-size="recordTableFrom.limit"
|
||
:current-page="recordTableFrom.page"
|
||
:total="recordTableData.total"
|
||
@current-change="pageChangeRecord" />
|
||
<!-- 底部按钮 -->
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="changeQuotaClose">关 闭</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {merchantTypeText} from "@/filters";
|
||
import {merchantListApi, merQuotaChange, merQuotaChangeRecord} from "@/api/merchant";
|
||
|
||
export default {
|
||
name: "MerchantQuotaList",
|
||
components: { },
|
||
data() {
|
||
return {
|
||
merchantTitle: '商户',
|
||
loading: false,
|
||
listLoading: true,
|
||
// 搜索项
|
||
tableFrom: {
|
||
page: 1,
|
||
limit: 10,
|
||
merchant_type: '',// 商户类别：0=普通商户，1=酒道馆，2=供应商，3=烟酒店，4=超市，5=省公司门店，6=城市会客厅，7=惠民健康体检馆
|
||
},
|
||
// 列表
|
||
tableData: {
|
||
data: [],
|
||
total: 0
|
||
},
|
||
// 额度变更
|
||
currentInfo: {},
|
||
changeQuotaDiaLogStatus: false,
|
||
changeInfo: {
|
||
change_type: 1,// 变更类型：0=减少，1=增加
|
||
change_quantity: '',// 变更数量
|
||
},
|
||
changeInfoRules: {
|
||
change_quantity: [
|
||
{
|
||
required: true, validator: function (rule, value, callback) {
|
||
if (Number(value) <= 0) {
|
||
callback(new Error('变更数量必须大于0！'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}, trigger: 'blur'
|
||
}
|
||
],
|
||
},
|
||
// 变更明细
|
||
changeRecordDiaLogStatus: false,
|
||
recordLoading: false,
|
||
recordTableFrom: {
|
||
page: 1,
|
||
limit: 10,
|
||
mer_id: '',
|
||
},
|
||
recordTableData: {
|
||
data: [],
|
||
total: 0
|
||
},
|
||
|
||
|
||
};
|
||
},
|
||
watch: {
|
||
// 路由变更
|
||
'$route' () {
|
||
this.tableFrom.merchant_type = this.$route.meta.merchant_type || 0;
|
||
},
|
||
// 商户类型变更
|
||
'tableFrom.merchant_type' () {
|
||
this.merchantTitle = merchantTypeText(this.tableFrom.merchant_type);
|
||
this.getList("");
|
||
},
|
||
},
|
||
mounted() {
|
||
this.tableFrom.merchant_type = this.$route.meta.merchant_type || 0;
|
||
},
|
||
methods: {
|
||
// 列表
|
||
getList(num) {
|
||
this.listLoading = true;
|
||
this.tableFrom.page = num ? num : this.tableFrom.page;
|
||
merchantListApi(this.tableFrom).then(res => {
|
||
this.tableData.data = res.data.list;
|
||
this.tableData.total = res.data.count;
|
||
this.listLoading = false;
|
||
}).catch(res => {
|
||
this.listLoading = false;
|
||
this.$message.error(res.message);
|
||
});
|
||
},
|
||
pageChange(page) {
|
||
this.getList(page);
|
||
},
|
||
// 额度变更 - 显示弹框
|
||
changeQuotaShow(info){
|
||
let _this = this;
|
||
_this.currentInfo = info || {};
|
||
_this.changeQuotaDiaLogStatus = true;
|
||
},
|
||
// 额度变更 - 关闭弹框
|
||
changeQuotaClose(){
|
||
let _this = this;
|
||
_this.currentInfo = {};
|
||
_this.changeInfo = _this.$options.data().changeInfo;
|
||
_this.changeQuotaDiaLogStatus = false;
|
||
},
|
||
// 额度变更 - 提交变更
|
||
changeQuotaSubmit(){
|
||
let _this = this;
|
||
let changeInfo = Object.assign({}, _this.changeInfo);
|
||
changeInfo.mer_id = _this.currentInfo.mer_id || 0;
|
||
// 提交
|
||
_this.$refs['changeInfoFrom'].validate(valid => {
|
||
if (valid) {
|
||
_this.loading = true;
|
||
console.log('提交信息', changeInfo)
|
||
merQuotaChange(changeInfo).then(res => {
|
||
_this.getList('');
|
||
_this.loading = false;
|
||
_this.$message.success(res.message);
|
||
_this.changeQuotaClose();
|
||
}).catch(res => {
|
||
_this.loading = false;
|
||
_this.$message.error(res.message);
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 变更明细 - 显示弹框
|
||
changeRecordShow(info){
|
||
let _this = this;
|
||
_this.currentInfo = info || {};
|
||
_this.recordTableFrom.mer_id = info.mer_id || 0;
|
||
_this.getRecordList(1);
|
||
_this.changeRecordDiaLogStatus = true;
|
||
},
|
||
// 变更明细 - 关闭弹框
|
||
changeRecordClose(){
|
||
let _this = this;
|
||
_this.currentInfo = {};
|
||
_this.changeRecordDiaLogStatus = false;
|
||
},
|
||
// 变更明细 - 列表
|
||
getRecordList(num) {
|
||
this.recordLoading = true;
|
||
this.recordTableFrom.page = num ? num : this.recordTableFrom.page;
|
||
merQuotaChangeRecord(this.recordTableFrom).then(res => {
|
||
this.recordTableData.data = res.data.list;
|
||
this.recordTableData.total = res.data.count;
|
||
this.recordLoading = false;
|
||
}).catch(res => {
|
||
this.recordLoading = false;
|
||
this.$message.error(res.message);
|
||
});
|
||
},
|
||
pageChangeRecord(page) {
|
||
this.getRecordList(page);
|
||
},
|
||
|
||
|
||
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
|
||
</style>
|