套餐配置

src/components/Business/SmUser/smUserDialog.vue

@@ -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-form-item label="用户名">
-        <el-input v-model="searchForm.userName" clearable></el-input>
+        <el-input v-model="searchForm.userName" clearable @keyup.enter.native="onSearch" placeholder="请输入用户名"/>
       </el-form-item>
-      <el-form-item label="手机号:">
+      <el-form-item label="手机号">
-        <el-input v-model="searchForm.phonenumber" type="number" :maxlength="11" show-word-limit clearable></el-input>
+        <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>

src/utils/constants.js

@@ -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",   // 智能收费
+}

src/views/ss/suit/index.vue

@@ -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">
+        <el-row>
-          <user-input v-model="form.userId" @change="onChangeUser" :disabled="hasView(views.user)"/>
+          <form-col :span="span" label="所属用户" prop="userId">
-        </el-form-item>
+            <user-input v-model="form.userId" @change="onChangeUser" :disabled="hasView(views.user)"/>
-        <el-form-item label="套餐名称" prop="name">
+          </form-col>
-          <el-input v-model="form.name" placeholder="请输入套餐名称" />
+          <form-col :span="span" label="套餐名称" prop="name">
-        </el-form-item>
+            <el-input v-model="form.name" placeholder="请输入套餐名称" />
-        <el-form-item label="通电时间" prop="value">
+          </form-col>
-          <el-input v-model="form.value" placeholder="请输入通电时间" type="number">
+          <form-col :span="span" label="收费模式" prop="feeMode" >
-            <template #append>
+            <el-select v-model="form.feeMode" style="width: 100%" @change="onChangeFeeMode">
-              <el-select v-model="form.timeUnit" style="width: 6em">
+              <el-option
-                <el-option
+                v-for="option of dict.type.suit_fee_mode"
-                  v-for="option of dict.type.time_unit"
+                :key="option.value"
-                  :key="option.value"
+                :label="option.label"
-                  :label="option.label"
+                :value="option.value"
-                  :value="option.value"
+              />
-                />
+            </el-select>
-              </el-select>
+          </form-col>
-            </template>
+          <form-col :span="span" label="收费方式" prop="feeType">
-          </el-input>
+            <el-select v-model="form.feeType" style="width: 100%">
-        </el-form-item>
+              <el-option
-        <el-form-item label="价格" prop="price">
+                v-for="option of dict.type.suit_fee_type"
-          <el-input-number v-model="form.price" placeholder="请输入价格(元）" :min="0" :precision="2" controls-position="right" style="width: calc(100% - 2em)"/> 元
+                :key="option.value"
-        </el-form-item>
+                :label="option.label"
-        <el-form-item label="详细说明" prop="description">
+                :value="option.value"
-          <el-input v-model="form.description" placeholder="请输入详细说明" type="textarea" />
+                :disabled="disabledFeeType(option)"
-        </el-form-item>
+              />
-        <el-form-item label="应用设备" prop="deviceIds">
+            </el-select>
-          <device-input v-model="form.deviceIds" multiple :before-open="beforeOpenDevice" :query="deviceQuery"/>
+          </form-col>
-        </el-form-item>
+          <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',
+        timeUnit: "3",
-        deviceIds: this.query.deviceId ? [this.query.deviceId] : []
+        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;

src/views/system/recharge/index.vue

@@ -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