chuangte/smart-switch-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

套餐配置

Browse Source
This commit is contained in:
墨大叔 2024-08-13 17:01:37 +08:00
parent e35a1f8a72
commit e5314a07ea
4 changed files with 187 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Business/SmUser/smUserDialog.vue
View File

@ -3,11 +3,11 @@
<el-dialog :title="title" :visible="show" width="60%" top="2vh" @open="open" @close="close"
:append-to-body="true">
<el-form size="small" :inline="true" label-width="68px">
<el-form-item label="用户名:">
<el-input v-model="searchForm.userName" clearable></el-input>
<el-form-item label="用户名">
<el-input v-model="searchForm.userName" clearable @keyup.enter.native="onSearch" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item label="手机号:">
<el-input v-model="searchForm.phonenumber" type="number" :maxlength="11" show-word-limit clearable></el-input>
<el-form-item label="手机号">
<el-input v-model="searchForm.phonenumber" type="number" :maxlength="11" show-word-limit clearable @keyup.enter.native="onSearch" placeholder="请输入手机号"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch()" icon="el-icon-search">搜索</el-button>

18
src/utils/constants.js
View File

@ -74,3 +74,21 @@ export const TransferStatus = {
TRANSFER_PART_SUCCESS: "4", // 部分成功
TRANSFER_FAIL: "5", // 转账失败
}
/**
* 套餐收费类型
*/
export const SuitFeeType = {
TIMING: "1", // 计时收费
COUNT: "2", // 按量收费
TIME_COUNT: "3", // 分时段按量收费
TIME_TIMING: "4" // 分时段按时收费
}
/**
* 套餐收费模式
*/
export const SuitFeeMode = {
SINGLE: "1", // 单次收费
SMART: "2", // 智能收费
}

199
src/views/ss/suit/index.vue
View File

@ -128,37 +128,87 @@
/>
<!-- 添加或修改套餐对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="所属用户" prop="userId">
<user-input v-model="form.userId" @change="onChangeUser" :disabled="hasView(views.user)"/>
</el-form-item>
<el-form-item label="套餐名称" prop="name">
<el-input v-model="form.name" placeholder="请输入套餐名称" />
</el-form-item>
<el-form-item label="通电时间" prop="value">
<el-input v-model="form.value" placeholder="请输入通电时间" type="number">
<template #append>
<el-select v-model="form.timeUnit" style="width: 6em">
<el-option
v-for="option of dict.type.time_unit"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item label="价格" prop="price">
<el-input-number v-model="form.price" placeholder="请输入价格(元）" :min="0" :precision="2" controls-position="right" style="width: calc(100% - 2em)"/> 元
</el-form-item>
<el-form-item label="详细说明" prop="description">
<el-input v-model="form.description" placeholder="请输入详细说明" type="textarea" />
</el-form-item>
<el-form-item label="应用设备" prop="deviceIds">
<device-input v-model="form.deviceIds" multiple :before-open="beforeOpenDevice" :query="deviceQuery"/>
</el-form-item>
<el-row>
<form-col :span="span" label="所属用户" prop="userId">
<user-input v-model="form.userId" @change="onChangeUser" :disabled="hasView(views.user)"/>
</form-col>
<form-col :span="span" label="套餐名称" prop="name">
<el-input v-model="form.name" placeholder="请输入套餐名称" />
</form-col>
<form-col :span="span" label="收费模式" prop="feeMode" >
<el-select v-model="form.feeMode" style="width: 100%" @change="onChangeFeeMode">
<el-option
v-for="option of dict.type.suit_fee_mode"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</form-col>
<form-col :span="span" label="收费方式" prop="feeType">
<el-select v-model="form.feeType" style="width: 100%">
<el-option
v-for="option of dict.type.suit_fee_type"
:key="option.value"
:label="option.label"
:value="option.value"
:disabled="disabledFeeType(option)"
/>
</el-select>
</form-col>
<form-col :span="span" label="价格" prop="price" v-if="[SuitFeeType.TIMING, SuitFeeType.COUNT].includes(form.feeType)">
<el-input-number v-model="form.price" placeholder="请输入价格(元）" :min="0" :precision="2" controls-position="right" style="width: calc(100% - 2em)"/> 元
</form-col>
<form-col :span="span" label="押金" prop="price" v-else>
<el-input-number v-model="form.price" placeholder="请输入押金(元）" :min="0" :precision="2" controls-position="right" style="width: calc(100% - 2em)"/> 元
</form-col>
<form-col :span="span" label="通电时间" prop="value" v-if="form.feeType === SuitFeeType.TIMING">
<el-input v-model="form.value" placeholder="请输入通电时间" type="number">
<template #append>
<el-select v-model="form.timeUnit" style="width: 6em">
<el-option
v-for="option of dict.type.time_unit"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</template>
</el-input>
</form-col>
<form-col :span="span" label="度数" prop="value" v-else-if="form.feeType === SuitFeeType.COUNT">
<el-input v-model="form.value" placeholder="请输入度数" type="number">
<template #append>度</template>
</el-input>
</form-col>
<form-col :span="span * 2" label="详细说明" prop="description">
<el-input v-model="form.description" placeholder="请输入详细说明" type="textarea" />
</form-col>
<form-col :span="span" label-width="0" v-for="(item, index) of 4" v-if="[SuitFeeType.TIME_COUNT, SuitFeeType.TIME_TIMING].includes(form.feeType)" >
<el-tooltip effect="dark" :content="`单击设置${item}档电价，双击全部设置为${item}档电价`" placement="top">
<el-button
:plain="amountIndex !== index"
:type="indexStyle[index]"
@click="handleSetAmountIndex(index)"
@dblclick.native="handleAllSet(index)">
{{item}}档电价
</el-button>
</el-tooltip>
<el-input-number v-model="form.gearAmount[index]" controls-position="right" placeholder="请输入电价" :precision="2" style="width: calc(100% - 11em)"/> {{gearUnit}}
</form-col>
<form-col :span="24" label-width="0" v-if="[SuitFeeType.TIME_COUNT, SuitFeeType.TIME_TIMING].includes(form.feeType)">
<el-row>
<el-col :span="6" v-for="(item, index) of 24" :key="index" v-if="!refresh">
<el-button plain style="width: 100%" :type="timeType(index)" @click="handleClickTimeItem(index)">{{index}} 时</el-button>
</el-col>
</el-row>
</form-col>
<form-col :span="span * 2" label="应用设备" prop="deviceIds">
<device-input v-model="form.deviceIds" multiple :before-open="beforeOpenDevice" :query="deviceQuery"/>
</form-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
@ -176,12 +226,16 @@ import UserLink from '@/components/Business/SmUser/UserLink.vue'
import UserInput from '@/components/Business/SmUser/UserInput.vue'
import { $view } from '@/utils/mixins'
import DeviceLink from '@/components/Business/Device/DeviceLink.vue'
import { SuitFeeMode, SuitFeeType } from '@/utils/constants'
export default {
name: "Suit",
mixins: [$view],
dicts: ['time_unit'],
dicts: ['time_unit', 'suit_fee_mode', 'suit_fee_type'],
computed: {
SuitFeeType() {
return SuitFeeType
},
// 时长单位
suitTimeUnit() {
return (unit) => {
@ -193,6 +247,25 @@ export default {
return {
userId: this.form.userId
}
},
// 收费方式禁用的情况：单次收费，不支持分时段
disabledFeeType() {
return (option) => {
return this.isDisabled(this.form.feeMode, option.value);
}
},
// 收费方式单位
gearUnit() {
return this.form.feeType === SuitFeeType.TIME_COUNT ? '元 / 度' : '元 / 时 '
},
// 时间显示类型
timeType() {
return (index) => {
if(this.form.gearTime[index] == null) {
return null;
}
return this.indexStyle[this.form.gearTime[index]];
}
}
},
components: { DeviceLink, UserInput, UserLink, DeviceInput },
@ -206,6 +279,11 @@ export default {
},
data() {
return {
refresh: false,
indexStyle: ['success', 'primary', 'warning', 'danger'],
// 当前设置电价的索引
amountIndex: null,
span: 12,
// 遮罩层
loading: true,
// 选中数组
@ -237,7 +315,10 @@ export default {
deleted: null
},
// 表单参数
form: {},
form: {
gearAmount: [],
gearTime: []
},
// 表单校验
rules: {
userId: [
@ -252,6 +333,12 @@ export default {
price: [
{ required: true, message: "价格不能为空", trigger: "blur" }
],
feeMode: [
{ required: true, message: "收费方式不能为空", trigger: "change" }
],
feeType: [
{ required: true, message: "收费类型不能为空", trigger: "change" }
]
}
};
},
@ -263,6 +350,43 @@ export default {
this.getList();
},
methods: {
isDisabled(feeMode, value) {
return feeMode === SuitFeeMode.SINGLE &&
[SuitFeeType.TIME_COUNT, SuitFeeType.TIME_TIMING].includes(value)
},
onChangeFeeMode(nv) {
if(this.isDisabled(nv, this.form.feeType)) {
this.form.feeType = null;
}
},
// 全部设置为某一个类型
handleAllSet(index) {
for(let i = 0; i < 24; i ++) {
this.form.gearTime[i] = index;
}
this.refreshItems();
},
handleClickTimeItem(index) {
if (this.amountIndex != null) {
this.form.gearTime[index] = this.amountIndex;
this.refreshItems();
}
},
// 刷新列表
refreshItems() {
this.refresh = true;
this.$nextTick(() => {
this.refresh = false
})
},
// 处理点击索引按钮
handleSetAmountIndex(index) {
if (this.amountIndex === index) {
this.amountIndex = null;
} else {
this.amountIndex = index;
}
},
onChangeUser(nv) {
if (!isEmpty(this.form.deviceIds)) {
this.$message.info("由于切换了用户，请重新选择应用设备")
@ -299,10 +423,13 @@ export default {
value: null,
price: null,
description: null,
timeUnit: '3',
deviceIds: this.query.deviceId ? [this.query.deviceId] : []
timeUnit: "3",
deviceIds: this.query.deviceId ? [this.query.deviceId] : [],
feeType: "1",
feeMode: "1",
gearAmount: [0,0,0,0],
gearTime: [],
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
@ -323,12 +450,14 @@ export default {
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.amountIndex = null;
this.open = true;
this.title = "添加套餐";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.amountIndex = null;
const suitId = row.suitId || this.ids
getSuit(suitId).then(response => {
let data = response.data;

2
src/views/system/recharge/index.vue
View File

@ -94,6 +94,7 @@
<el-table v-loading="loading" :data="billList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="订单ID" align="center" prop="billId" width="80"/>
<el-table-column label="时间" align="center" prop="createTime" width="180"/>
<el-table-column label="订单编号" align="center" prop="billNo" min-width="130">
<recharge-link slot-scope="d" :bill-id="d.row.billId" :text="d.row.billNo"/>
</el-table-column>
@ -146,7 +147,6 @@
<dict-tag :value="d.row.deviceRechargeStatus" :options="dict.type.sm_transaction_bill_device_recharge_status"/>
</template>
</el-table-column>
<el-table-column label="时间" align="center" prop="createTime" width="180"/>
<el-table-column label="操作" align="center" fixed="right" width="200">
<template slot-scope="d">
<el-button