1
This commit is contained in:
张成
269
admin/src/views/subscription/plans.vue
Normal file
269
admin/src/views/subscription/plans.vue
Normal file
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<div class="sub-page">
|
||||
<div class="sub-toolbar">
|
||||
<h2 class="sub-title">套餐</h2>
|
||||
<Button type="primary" @click="openEdit(null)">新增套餐</Button>
|
||||
<Button class="ml8" @click="load(1)">刷新</Button>
|
||||
<Button class="ml8" @click="doExport">导出 CSV</Button>
|
||||
</div>
|
||||
<div class="sub-search">
|
||||
<Form inline :label-width="70">
|
||||
<FormItem label="条件">
|
||||
<Select v-model="param.seachOption.key" style="width: 140px">
|
||||
<Option value="plan_code">编码</Option>
|
||||
<Option value="plan_name">名称</Option>
|
||||
<Option value="status">状态</Option>
|
||||
</Select>
|
||||
<Input v-model="param.seachOption.value" class="ml8" style="width: 220px" search @on-search="load(1)" />
|
||||
</FormItem>
|
||||
<Button type="primary" @click="load(1)">查询</Button>
|
||||
</Form>
|
||||
</div>
|
||||
<Table :columns="columns" :data="rows" border stripe />
|
||||
<div class="sub-page-bar">
|
||||
<Page
|
||||
:total="total"
|
||||
:current="param.pageOption.page"
|
||||
:page-size="param.pageOption.pageSize"
|
||||
show-total
|
||||
@on-change="onPage"
|
||||
@on-page-size-change="onSize"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Modal v-model="modal" :title="form.id ? '编辑套餐' : '新增套餐'" width="720" :loading="saving" @on-ok="save">
|
||||
<Form ref="formRef" :model="form" :rules="rules" :label-width="120">
|
||||
<FormItem label="套餐编码" prop="plan_code">
|
||||
<Input v-model="form.plan_code" :disabled="!!form.id" />
|
||||
</FormItem>
|
||||
<FormItem label="套餐名称" prop="plan_name">
|
||||
<Input v-model="form.plan_name" />
|
||||
</FormItem>
|
||||
<FormItem label="月费">
|
||||
<Input v-model="form.monthly_price" type="number" />
|
||||
</FormItem>
|
||||
<FormItem label="授权费">
|
||||
<Input v-model="form.auth_fee" type="number" />
|
||||
</FormItem>
|
||||
<FormItem label="账号上限">
|
||||
<Input v-model="form.account_limit" type="number" />
|
||||
</FormItem>
|
||||
<FormItem label="活跃上限">
|
||||
<Input v-model="form.active_user_limit" type="number" />
|
||||
</FormItem>
|
||||
<FormItem label="消息额度">
|
||||
<Input v-model="form.msg_quota" type="number" />
|
||||
</FormItem>
|
||||
<FormItem label="群发额度">
|
||||
<Input v-model="form.mass_quota" type="number" />
|
||||
</FormItem>
|
||||
<FormItem label="好友额度">
|
||||
<Input v-model="form.friend_quota" type="number" />
|
||||
</FormItem>
|
||||
<FormItem label="朋友圈额度">
|
||||
<Input v-model="form.sns_quota" type="number" />
|
||||
</FormItem>
|
||||
<FormItem label="功能点 JSON">
|
||||
<Input v-model="featuresText" type="textarea" :rows="4" placeholder='如 {"msg":true} 或 ["msg","mass"]' />
|
||||
</FormItem>
|
||||
<FormItem label="状态" prop="status">
|
||||
<Select v-model="form.status" style="width: 100%">
|
||||
<Option value="active">上线</Option>
|
||||
<Option value="inactive">下线</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import planServer from '@/api/subscription/plan_server.js'
|
||||
import { downloadCsvFromRows } from '@/utils/csvExport.js'
|
||||
|
||||
export default {
|
||||
name: 'SubscriptionPlans',
|
||||
data() {
|
||||
return {
|
||||
rows: [],
|
||||
total: 0,
|
||||
param: {
|
||||
seachOption: { key: 'plan_code', value: '' },
|
||||
pageOption: { page: 1, pageSize: 20, total: 0 },
|
||||
},
|
||||
modal: false,
|
||||
saving: false,
|
||||
form: {},
|
||||
featuresText: '{}',
|
||||
rules: {
|
||||
plan_code: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
plan_name: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '必选', trigger: 'change' }],
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
columns() {
|
||||
return [
|
||||
{ title: 'ID', key: 'id', width: 70 },
|
||||
{ title: '编码', key: 'plan_code', width: 120 },
|
||||
{ title: '名称', key: 'plan_name', minWidth: 140 },
|
||||
{ title: '月费', key: 'monthly_price', width: 90 },
|
||||
{ title: '状态', key: 'status', width: 90 },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'a',
|
||||
width: 260,
|
||||
render: (h, p) =>
|
||||
h('div', [
|
||||
h('Button', { props: { type: 'info', size: 'small' }, on: { click: () => this.openEdit(p.row) } }, '编辑'),
|
||||
h('Button', { props: { type: 'warning', size: 'small' }, class: { ml8: true }, on: { click: () => this.toggle(p.row) } }, '上下线'),
|
||||
h('Button', { props: { type: 'error', size: 'small' }, class: { ml8: true }, on: { click: () => this.doDel(p.row) } }, '删除'),
|
||||
]),
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.load(1)
|
||||
},
|
||||
methods: {
|
||||
async load(page) {
|
||||
if (page) this.param.pageOption.page = page
|
||||
const res = await planServer.page({ param: this.param })
|
||||
if (res && res.code === 0) {
|
||||
this.rows = res.data.rows || []
|
||||
this.total = res.data.count || 0
|
||||
} else {
|
||||
this.$Message.error((res && res.message) || '加载失败')
|
||||
}
|
||||
},
|
||||
onPage(p) {
|
||||
this.param.pageOption.page = p
|
||||
this.load()
|
||||
},
|
||||
onSize(s) {
|
||||
this.param.pageOption.pageSize = s
|
||||
this.load(1)
|
||||
},
|
||||
openEdit(row) {
|
||||
if (row) {
|
||||
this.form = { ...row }
|
||||
this.featuresText =
|
||||
row.enabled_features == null
|
||||
? ''
|
||||
: typeof row.enabled_features === 'string'
|
||||
? row.enabled_features
|
||||
: JSON.stringify(row.enabled_features, null, 2)
|
||||
} else {
|
||||
this.form = {
|
||||
plan_code: '',
|
||||
plan_name: '',
|
||||
monthly_price: 0,
|
||||
auth_fee: 0,
|
||||
account_limit: 0,
|
||||
active_user_limit: 0,
|
||||
msg_quota: 0,
|
||||
mass_quota: 0,
|
||||
friend_quota: 0,
|
||||
sns_quota: 0,
|
||||
status: 'active',
|
||||
}
|
||||
this.featuresText = '{}'
|
||||
}
|
||||
this.modal = true
|
||||
},
|
||||
save() {
|
||||
this.saving = true
|
||||
this.$refs.formRef.validate(async (ok) => {
|
||||
if (!ok) {
|
||||
this.saving = false
|
||||
return
|
||||
}
|
||||
let enabled_features = null
|
||||
const t = (this.featuresText || '').trim()
|
||||
if (t) {
|
||||
try {
|
||||
enabled_features = JSON.parse(t)
|
||||
} catch (e) {
|
||||
this.$Message.error('功能点 JSON 格式错误')
|
||||
this.saving = false
|
||||
return
|
||||
}
|
||||
}
|
||||
const payload = { ...this.form, enabled_features }
|
||||
try {
|
||||
const res = this.form.id ? await planServer.edit(payload) : await planServer.add(payload)
|
||||
if (res && res.code === 0) {
|
||||
this.$Message.success('保存成功')
|
||||
this.modal = false
|
||||
this.load(1)
|
||||
} else {
|
||||
this.$Message.error((res && res.message) || '保存失败')
|
||||
}
|
||||
} finally {
|
||||
this.saving = false
|
||||
}
|
||||
})
|
||||
},
|
||||
async toggle(row) {
|
||||
const res = await planServer.toggle({ id: row.id })
|
||||
if (res && res.code === 0) {
|
||||
this.$Message.success('状态已更新为 ' + (res.data && res.data.status))
|
||||
this.load()
|
||||
} else {
|
||||
this.$Message.error((res && res.message) || '失败')
|
||||
}
|
||||
},
|
||||
doDel(row) {
|
||||
this.$Modal.confirm({
|
||||
title: '删除套餐',
|
||||
content: '确认删除？若已被订阅引用可能失败。',
|
||||
onOk: async () => {
|
||||
const res = await planServer.del({ id: row.id })
|
||||
if (res && res.code === 0) {
|
||||
this.$Message.success('已删除')
|
||||
this.load(1)
|
||||
} else {
|
||||
this.$Message.error((res && res.message) || '删除失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
async doExport() {
|
||||
const res = await planServer.exportRows({ param: this.param })
|
||||
if (res && res.code === 0 && res.data && res.data.rows) {
|
||||
downloadCsvFromRows(res.data.rows, 'plans.csv')
|
||||
this.$Message.success('已导出')
|
||||
} else {
|
||||
this.$Message.error((res && res.message) || '导出失败')
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sub-page {
|
||||
padding: 16px;
|
||||
}
|
||||
.sub-toolbar {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.sub-title {
|
||||
display: inline-block;
|
||||
margin: 0 16px 0 0;
|
||||
font-size: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ml8 {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.sub-search {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.sub-page-bar {
|
||||
margin-top: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user