优化，查看订单套餐详情

src/views/ss/suit/component/SuitEditDialog.vue

@@ -60,25 +60,15 @@
         <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-col :span="24" v-if="[SuitFeeType.TIME_COUNT, SuitFeeType.TIME_TIMING].includes(form.feeType)">
-            <el-button
+          <suit-time-price
-              :plain="amountIndex !== index"
+            :gear-amount.sync="form.gearAmount"
-              :type="indexStyle[index]"
+            :gear-time.sync="form.gearTime"
-              @click="handleSetAmountIndex(index)"
+            :fee-type="form.feeType"
-              @dblclick.native="handleAllSet(index)">
+          />
-              {{item}}档电价
+        </el-col>
-            </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>
@@ -118,11 +108,12 @@ import { addSuit, getSuit, updateSuit } from '@/api/ss/suit'
 import { $view } from '@/utils/mixins'
 import UserInput from '@/components/Business/SmUser/UserInput.vue'
 import { mapGetters } from 'vuex'
+import SuitTimePrice from '@/views/ss/suit/component/SuitTimePrice.vue'
 
 export default {
   name: "SuitEditDialog",
   mixins: [$view],
-  components: { UserInput, DeviceInput },
+  components: { SuitTimePrice, UserInput, DeviceInput },
   dicts: ['time_unit', 'suit_fee_mode', 'suit_fee_type'],
   computed: {
     UserType() {
@@ -150,19 +141,6 @@ export default {
         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]];
-      }
-    }
   },
   props: {
     title: {
@@ -198,10 +176,6 @@ export default {
   },
   data() {
     return {
-      indexStyle: ['success', 'primary', 'warning', 'danger'],
-      refresh: false,
-      // 当前设置电价的索引
-      amountIndex: null,
       span: 12,
       // 表单参数
       form: {
@@ -293,14 +267,6 @@ export default {
         }
       });
     },
-    // 处理点击索引按钮
-    handleSetAmountIndex(index) {
-      if (this.amountIndex === index) {
-        this.amountIndex = null;
-      } else {
-        this.amountIndex = index;
-      }
-    },
     onChangeUser(nv) {
       if (!isEmpty(this.form.deviceIds)) {
         this.$message.info("由于切换了用户，请重新选择应用设备")
@@ -319,26 +285,6 @@ export default {
         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
-      })
-    },
     // 取消按钮
     cancel() {
       this.$emit('update:open', false);

src/views/ss/suit/component/SuitTimePrice.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <el-row style="margin-bottom: 16px;">
+      <el-col :span="12" label-width="0" v-for="(item, index) of 4" style="margin-bottom: 8px">
+        <el-tooltip effect="dark" :content="`单击设置${item}档电价，双击全部设置为${item}档电价`" placement="top">
+          <el-button
+            :disabled="disabled"
+            :size="size"
+            :plain="amountIndex !== index"
+            :type="indexStyle[index]"
+            @click="handleSetAmountIndex(index)"
+            @dblclick.native="handleAllSet(index)">
+            {{item}}档电价
+          </el-button>
+        </el-tooltip>
+        <el-input-number
+          :disabled="disabled"
+          :size="size"
+          v-model="gearAmount[index]"
+          controls-position="right"
+          placeholder="请输入电价"
+          :precision="2"
+          style="width: calc(100% - 11em)"
+        /> {{gearUnit}}
+      </el-col>
+    </el-row>
+    <el-row style="margin-bottom: 16px">
+      <el-col :span="6" v-for="(item, index) of 24" :key="index" v-if="!refresh">
+        <el-button :disabled="disabled" :size="size" plain style="width: 100%" :type="timeType(index)" @click="handleClickTimeItem(index)">{{index}} 时</el-button>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { SuitFeeType } from '@/utils/constants'
+
+export default {
+  name: 'SuitTimePrice',
+  props: {
+    // 档位金额
+    gearAmount: {
+      type: Array,
+      default: () => ([])
+    },
+    // 档位时间
+    gearTime: {
+      type: Array,
+      default: () => ([])
+    },
+    // 收费方式
+    feeType: {
+      type: String,
+      default: null
+    },
+    size: {
+      type: String,
+      default: null,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      indexStyle: ['success', 'primary', 'warning', 'danger'],
+      refresh: false,
+      // 当前设置电价的索引
+      amountIndex: null,
+    }
+  },
+  computed: {
+    // 收费方式单位
+    gearUnit() {
+      return this.feeType === SuitFeeType.TIME_COUNT ? '元 / 度' : '元 / 时 '
+    },
+    // 时间显示类型
+    timeType() {
+      return (index) => {
+        if(this.gearTime[index] == null) {
+          return null;
+        }
+        return this.indexStyle[this.gearTime[index]];
+      }
+    }
+  },
+  methods: {
+    // 处理点击索引按钮
+    handleSetAmountIndex(index) {
+      if (this.amountIndex === index) {
+        this.amountIndex = null;
+      } else {
+        this.amountIndex = index;
+      }
+    },
+    // 全部设置为某一个类型
+    handleAllSet(index) {
+      for(let i = 0; i < 24; i ++) {
+        this.gearTime[i] = index;
+      }
+      this.refreshItems();
+    },
+    handleClickTimeItem(index) {
+      if (this.amountIndex != null) {
+        this.gearTime[index] = this.amountIndex;
+        this.refreshItems();
+      }
+    },
+    // 刷新列表
+    refreshItems() {
+      this.refresh = true;
+      this.$nextTick(() => {
+        this.refresh = false
+      })
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+
+</style>

src/views/system/recharge/detail.vue

@@ -94,7 +94,9 @@
               <template v-else-if="SuitFeeType.COUNT === detail.suitFeeType">
                 {{detail.suitPrice | money}} 元 / {{detail.suitTime}} 度
               </template>
-              <template v-else>动态计算</template>
+              <template v-else>
+                <el-link type="primary" @click="showSuitTimePrice = true">点击查看</el-link>
+              </template>
             </el-descriptions-item>
             <el-descriptions-item label="套餐押金" >{{detail.suitDeposit | money | defaultValue}} 元</el-descriptions-item>
             <el-descriptions-item label="使用时长" v-if="SuitFeeType.timeList().includes(detail.suitFeeType)">{{toDescriptionFromSecond(detail.totalUse).text | defaultValue}}</el-descriptions-item>
@@ -182,6 +184,15 @@
     <!--退款对话框-->
     <refund-dialog :show.sync="showRefund" :bill-id="detail.billId" :amount="detail.money" @success="getDetail"/>
 
+    <el-dialog title="查看套餐详情" :visible.sync="showSuitTimePrice" width="700px">
+      <suit-time-price
+        disabled
+        :fee-type="detail.suitFeeType"
+        :gear-time="detail.suitGearTime"
+        :gear-amount="detail.suitGearAmount"
+      />
+    </el-dialog>
+
   </div>
 </template>
 
@@ -198,11 +209,12 @@ import { $recharge } from '@/utils/mixins'
 import RefundDialog from '@/views/system/recharge/components/RefundDialog.vue'
 import { toDescriptionFromSecond } from '@/utils/date'
 import BooleanTag from '@/components/BooleanTag/index.vue'
+import SuitTimePrice from '@/views/ss/suit/component/SuitTimePrice.vue'
 
 export default {
   name: 'Recharge/:billId',
   mixins: [$recharge],
-  components: { BooleanTag, RefundDialog, Bonus, PayBill, UserLink, DeviceLink, Refund },
+  components: { SuitTimePrice, BooleanTag, RefundDialog, Bonus, PayBill, UserLink, DeviceLink, Refund },
   dicts: [
     'channel_type',
     'sm_transaction_bill_status',
@@ -233,6 +245,7 @@ export default {
   },
   data() {
     return {
+      showSuitTimePrice: false,
       loading: false,
       detail: {},
       id: null,