update 发布计费模板提醒

jsowell-ui/src/views/pile/station/components/billing.vue

@@ -3,6 +3,39 @@
     <!-- 充电站详情 -->
     <!-- 计费模块 -->
     <!-- 按钮栏 -->
+    <el-dialog
+      title="发布计费模板"
+      background-color:pink
+      :visible.sync="dialogVisible"
+      width="30%"
+      height="50%"
+    >
+      <!--<el-date-picker
+        v-model="value3"
+        type="datetime"
+        placeholder="选择日期时间"
+        default-time="12:00:00"
+      />-->
+      <p style="color:red">
+        点击立即发布后，会将该计费模板下发到当前站点下所有的充电桩上面，请注意核对收费金额！
+      </p>
+      <el-descriptions title="" :column="2" border>
+        <el-descriptions-item label="尖时段电费单价">{{billingDetail.electricityPriceA}}</el-descriptions-item>
+        <el-descriptions-item label="尖时段服务费单价">{{billingDetail.servicePriceA}}</el-descriptions-item>
+        <el-descriptions-item label="峰时段电费单价">{{billingDetail.electricityPriceB}}</el-descriptions-item>
+        <el-descriptions-item label="峰时段服务费单价">{{billingDetail.servicePriceB}}</el-descriptions-item>
+        <el-descriptions-item label="平时段电费单价">{{billingDetail.electricityPriceC}}</el-descriptions-item>
+        <el-descriptions-item label="平时段服务费单价">{{billingDetail.servicePriceC}}</el-descriptions-item>
+        <el-descriptions-item label="谷时段电费单价">{{billingDetail.electricityPriceD}}</el-descriptions-item>
+        <el-descriptions-item label="谷时段服务费单价">{{billingDetail.servicePriceD}}</el-descriptions-item>
+      </el-descriptions>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="clickPublish"> 立即发布 </el-button>
+      </span>
+    </el-dialog>
+    <!-- 表单区域 -->
+
     <el-row :gutter="10" class="mb8">
       <!--<el-col :span="1.5">
         <el-button
@@ -47,8 +80,7 @@
       </el-col>-->
       <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
     </el-row>
-    <!-- 表单区域 -->
+    <!-- 弹框 -->
-
     <el-table
       :data="stationBillingTemplate"
       style="width: 100%"
@@ -108,26 +140,6 @@
         </template>
       </el-table-column>
     </el-table>
-    <!-- 弹框 -->
-    <el-dialog
-      title="发布计费模板"
-      background-color:pink
-      :visible.sync="dialogVisible"
-      width="30%"
-      height="50%"
-    >
-      <!--<el-date-picker
-        v-model="value3"
-        type="datetime"
-        placeholder="选择日期时间"
-        default-time="12:00:00"
-      />-->
-      点击立即发布后，会将该计费模板下发到当前站点下所有的充电桩上面
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="clickPublish"> 立即发布 </el-button>
-      </span>
-    </el-dialog>
     <el-dialog width="70%" title="绑定设备" :visible.sync="outerVisible">
       <BondedDevice ref="bondedDevice" />
     </el-dialog>
@@ -218,6 +230,8 @@ export default {
       },
       // 需要向子组件传递的值
       billingTemplateId: "",
+      // 计费详情
+      billingDetail: {},
     };
   },
   created() {
@@ -301,6 +315,7 @@ export default {
     queryInfo() {
       getTemplate(this.publishTemplateId).then((response) => {
         console.log("点击发布按钮 查询计费模板详情", response);
+        this.billingDetail = response.data;
         // this.form = response.data;
         // console.log("timeArray", this.form.timeArray);
         // const selectStartTimeArr = [];