From d471cd3776ee2fa8d2840e92ae0288a7029aa3d3 Mon Sep 17 00:00:00 2001
From: "autumn.g@foxmail.com" <autumn.g@foxmail.com>
Date: Sat, 3 Feb 2024 13:58:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A8=A1=E6=9D=BF=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/pile/station/components/billing.vue | 651 +++++++++---------
 1 file changed, 335 insertions(+), 316 deletions(-)

diff --git a/jsowell-ui/src/views/pile/station/components/billing.vue b/jsowell-ui/src/views/pile/station/components/billing.vue
index bac3b1c9a..aa526e442 100644
--- a/jsowell-ui/src/views/pile/station/components/billing.vue
+++ b/jsowell-ui/src/views/pile/station/components/billing.vue
@@ -1,143 +1,160 @@
 <template>
-  <div>
-    <!-- 充电站详情 -->
-    <!-- 计费模块 -->
-    <!-- 按钮栏 -->
-    <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">
+    <div>
+        <!-- 充电站详情 -->
+        <!-- 计费模块 -->
+        <!-- 按钮栏 -->
+        <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-dialog>
+        <!-- 表单区域 -->
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="info"
-          plain
-          icon="el-icon-refresh"
-          size="mini"
-          @click="clickRefresh"
-          >刷新</el-button
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button
+                    type="info"
+                    plain
+                    icon="el-icon-refresh"
+                    size="mini"
+                    @click="clickRefresh"
+                >刷新
+                </el-button
+                >
+            </el-col>
+            <el-col :span="1.5">
+                <el-button
+                    type="warning"
+                    plain
+                    icon="el-icon-plus"
+                    size="mini"
+                    @click="clickImport"
+                    v-has-permi="['billing:template:edit']"
+                >导入
+                </el-button>
+            </el-col>
+        </el-row>
+        <!-- 弹框 -->
+        <el-table
+            :data="stationBillingTemplate"
+            style="width: 100%"
+            v-loading="loading"
         >
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="clickImport"
-          v-has-permi = "['billing:template:edit']"
-          >导入</el-button>
-      </el-col>
-    </el-row>
-    <!-- 弹框 -->
-    <el-table
-      :data="stationBillingTemplate"
-      style="width: 100%"
-      v-loading="loading"
-    >
-      <el-table-column label="模板编号" prop="templateCode" />
-      <el-table-column label="名称" prop="templateName" />
-        <el-table-column label="模板状态" prop="status" >
-            <template slot-scope="scope">
-                <dict-tag
-                    :options="dict.type.template_status"
-                    :value="scope.row.status"
-                />
-            </template>
-        </el-table-column>
-      <!-- matchCars 使用车辆描述 -->
-      <el-table-column label="描述" prop="remark" />
-      <el-table-column label="设备类型" prop="deviceType">
-        <template slot-scope="scope">
-          <dict-tag
-            :options="dict.type.charger_pile_type"
-            :value="scope.row.deviceType"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column label="上次发布时间" prop="publishTime" />
-      <el-table-column label="操作" align="center" width="250">
-        <template slot-scope="scope">
-          <el-button v-if="scope.row.memberFlag === '0'" type="text" size="small" @click="issue(scope.row.templateId)">发布</el-button>
-          <el-button v-if="scope.row.memberFlag === '0'" type="text" size="small" @click="outerVisible = true">绑定设备</el-button>
-          <el-button type="text" size="small" @click="handleUpdate(scope.row.templateId)">修改默认费率</el-button>
-          <el-button type="text" size="small" @click="delBilling(scope.row.templateId)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-dialog width="70%" title="绑定设备" :visible.sync="outerVisible">
-      <BondedDevice ref="bondedDevice" />
-    </el-dialog>
-    <!-- 费率详情页 -->
-    <!-- <el-dialog title="费率详情页" :visible.sync="expDialog" width="30%">
-      <Expenses />
-    </el-dialog> -->
-    <el-dialog title="导入" :visible.sync="expDialog" width="30%">
-      <el-form :model="form">
-        <el-form-item label="选择计费模板" label-width="100px">
-          <el-select
-            placeholder="请选择选择计费模板"
-            v-model="selectTemplateId"
-          >
-            <el-option
-              v-for="item in publicBillingTemplate"
-              :key="item.templateCode"
-              :label="item.templateName"
-              :value="item.templateId"
-            >
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitBtn">提交</el-button>
-        <el-button @click="expDialog = false">取消</el-button>
-      </div>
-    </el-dialog>
-    <el-dialog
-      title="修改默认费率"
-      :visible.sync="amendDialog"
-      width="70%"
-      height="70%"
-      @close="closeDialog"
-    >
-      <!-- <Amend /> -->
-      <add-billing
-        @success="success"
-        :billingTemplateId="billingTemplateId"
-        ref="addBill"
-      />
-    </el-dialog>
-  </div>
+            <el-table-column label="模板编号" prop="templateCode"/>
+            <el-table-column label="名称" prop="templateName"/>
+            <el-table-column label="模板类型" prop="memberFlag">
+                <template slot-scope="scope">
+                    <tag v-if="scope.row.memberFlag === '0'">通用计费模板</tag>
+                    <tag v-if="scope.row.memberFlag === '1'">会员计费模板</tag>
+                </template>
+            </el-table-column>
+            <el-table-column label="模板状态" prop="status">
+                <template slot-scope="scope">
+                    <dict-tag
+                        :options="dict.type.template_status"
+                        :value="scope.row.status"
+                    />
+                </template>
+            </el-table-column>
+            <!-- matchCars 使用车辆描述 -->
+            <el-table-column label="描述" prop="remark"/>
+            <el-table-column label="设备类型" prop="deviceType">
+                <template slot-scope="scope">
+                    <dict-tag
+                        :options="dict.type.charger_pile_type"
+                        :value="scope.row.deviceType"
+                    />
+                </template>
+            </el-table-column>
+            <el-table-column label="上次发布时间" prop="publishTime"/>
+            <el-table-column label="操作" align="center" width="250">
+                <template slot-scope="scope">
+                    <el-button v-if="scope.row.memberFlag === '0'" type="text" size="small"
+                               @click="issue(scope.row.templateId)">发布
+                    </el-button>
+                    <el-button v-if="scope.row.memberFlag === '0'" type="text" size="small"
+                               @click="outerVisible = true">绑定设备
+                    </el-button>
+                    <el-button type="text" size="small" @click="handleUpdate(scope.row.templateId)">修改默认费率
+                    </el-button>
+                    <el-button type="text" size="small" @click="delBilling(scope.row.templateId)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-dialog width="70%" title="绑定设备" :visible.sync="outerVisible">
+            <BondedDevice ref="bondedDevice"/>
+        </el-dialog>
+        <!-- 费率详情页 -->
+        <!-- <el-dialog title="费率详情页" :visible.sync="expDialog" width="30%">
+          <Expenses />
+        </el-dialog> -->
+        <el-dialog title="导入" :visible.sync="expDialog" width="30%">
+            <el-form :model="form">
+                <el-form-item label="选择计费模板" label-width="100px">
+                    <el-select
+                        placeholder="请选择选择计费模板"
+                        v-model="selectTemplateId"
+                    >
+                        <el-option
+                            v-for="item in publicBillingTemplate"
+                            :key="item.templateCode"
+                            :label="item.templateName"
+                            :value="item.templateId"
+                        >
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitBtn">提交</el-button>
+                <el-button @click="expDialog = false">取消</el-button>
+            </div>
+        </el-dialog>
+        <el-dialog
+            title="修改默认费率"
+            :visible.sync="amendDialog"
+            width="70%"
+            height="70%"
+            @close="closeDialog"
+        >
+            <!-- <Amend /> -->
+            <add-billing
+                @success="success"
+                :billingTemplateId="billingTemplateId"
+                ref="addBill"
+            />
+        </el-dialog>
+    </div>
 </template>
 
 <script>
@@ -155,202 +172,204 @@ import AddBilling from "../../../billing/template/components/addBilling.vue";
 import {updateStation} from "@/api/pile/station";
 
 export default {
-  components: { BondedDevice, Expenses, AddBilling },
-  dicts: ["charger_pile_type", "template_status"],
-  data() {
-    return {
-      tableData: [],
-      // 绑定设备
-      outerVisible: false,
-      // 开关
-      value: true,
-      dialogVisible: false,
-      loading: false,
-      // 选择计费模板弹框
-      expDialog: false,
-      amendDialog: false,
-      // 站点计费模板列表
-      stationBillingTemplate: [],
-      // 公共计费模板列表
-      publicBillingTemplate: [],
-      // 选择的计费模板id
-      selectTemplateId: "",
-      // 发布的计费模板id
-      publishTemplateId: "",
-      // 日期
-      value3: "",
-      stationId: this.$route.params.id,
-      form: {
-        region: "",
-      },
-      // 需要向子组件传递的值
-      billingTemplateId: "",
-      // 计费详情
-      billingDetail: {},
-    };
-  },
-  created() {
-    // 发送请求
-    // this.templateList();
-    // this.getStationBillingTemplateList();
-  },
-  methods: {
-    // 新增计费模板
-    clickAdditional() {
-      // 打开弹窗
-      this.amendDialog = true;
-      console.log("新增计费模板按钮");
+    components: {BondedDevice, Expenses, AddBilling},
+    dicts: ["charger_pile_type", "template_status"],
+    data() {
+        return {
+            tableData: [],
+            // 绑定设备
+            outerVisible: false,
+            // 开关
+            value: true,
+            dialogVisible: false,
+            loading: false,
+            // 选择计费模板弹框
+            expDialog: false,
+            amendDialog: false,
+            // 站点计费模板列表
+            stationBillingTemplate: [],
+            // 公共计费模板列表
+            publicBillingTemplate: [],
+            // 选择的计费模板id
+            selectTemplateId: "",
+            // 发布的计费模板id
+            publishTemplateId: "",
+            // 日期
+            value3: "",
+            stationId: this.$route.params.id,
+            form: {
+                region: "",
+            },
+            // 需要向子组件传递的值
+            billingTemplateId: "",
+            // 计费详情
+            billingDetail: {},
+        };
     },
-    /** 修改按钮操作 */
-    handleUpdate(billingTemplateId) {
-      console.log("点击修改按钮", billingTemplateId);
-      this.amendDialog = true;
-      this.billingTemplateId = String(billingTemplateId);
-      this.title = "修改计费模板";
-    },
-    closeDialog() {
-      console.log("closeDialog");
-      this.billingTemplateId = "";
-      this.clickRefresh();
-    },
-    // 通知父 关闭弹框
-    success() {
-      this.amendDialog = false;
-      this.$refs.addBill.resetForm();
-      this.getStationBillingTemplateList();
-    },
-    // 发布按钮
-    issue(id) {
-      console.log("发布", id);
-      this.publishTemplateId = id;
-      this.queryInfo();
-      this.dialogVisible = true;
-    },
-    // 立即发布按钮
-    clickPublish() {
-      this.dialogVisible = false;
-      const data = {
-        stationId: this.stationId,
-        templateId: this.publishTemplateId,
-      };
-      publishBillingTemplate(data).then(() => {
-        this.$message.success("发布计费模板成功");
-        this.publishTemplateId = "";
-        this.getStationBillingTemplateList();
-      });
-    },
-      changeStatus(info) {
-          const param = {
-              id: info.templateId,
-              status: info.status,
-          }
-          console.log("param", param);
-          changeStationTemplate(param).then((response) => {
-              this.$modal.msgSuccess("修改成功");
-              this.getStationBillingTemplateList();
-          });
-      },
-    /** 打开导入表弹窗 */
-    openImportTable() {
-      console.log("111");
-      //   this.$refs.import.show();
-    },
-    // 按钮 删除功能
-    delBilling(id) {
-      console.log("删除", id);
-      delTemplate(id).then((response) => {
-        this.$message.success("删除计费模板成功");
-        this.clickRefresh();
-      });
+    created() {
+        // 发送请求
+        // this.templateList();
+        // this.getStationBillingTemplateList();
     },
+    methods: {
+        // 新增计费模板
+        clickAdditional() {
+            // 打开弹窗
+            this.amendDialog = true;
+            console.log("新增计费模板按钮");
+        },
+        /** 修改按钮操作 */
+        handleUpdate(billingTemplateId) {
+            console.log("点击修改按钮", billingTemplateId);
+            this.amendDialog = true;
+            this.billingTemplateId = String(billingTemplateId);
+            this.title = "修改计费模板";
+        },
+        closeDialog() {
+            console.log("closeDialog");
+            this.billingTemplateId = "";
+            this.clickRefresh();
+        },
+        // 通知父 关闭弹框
+        success() {
+            this.amendDialog = false;
+            this.$refs.addBill.resetForm();
+            this.getStationBillingTemplateList();
+        },
+        // 发布按钮
+        issue(id) {
+            console.log("发布", id);
+            this.publishTemplateId = id;
+            this.queryInfo();
+            this.dialogVisible = true;
+        },
+        // 立即发布按钮
+        clickPublish() {
+            this.dialogVisible = false;
+            const data = {
+                stationId: this.stationId,
+                templateId: this.publishTemplateId,
+            };
+            publishBillingTemplate(data).then(() => {
+                this.$message.success("发布计费模板成功");
+                this.publishTemplateId = "";
+                this.getStationBillingTemplateList();
+            });
+        },
+        changeStatus(info) {
+            const param = {
+                id: info.templateId,
+                status: info.status,
+            }
+            console.log("param", param);
+            changeStationTemplate(param).then((response) => {
+                this.$modal.msgSuccess("修改成功");
+                this.getStationBillingTemplateList();
+            });
+        },
+        /** 打开导入表弹窗 */
+        openImportTable() {
+            console.log("111");
+            //   this.$refs.import.show();
+        },
+        // 按钮 删除功能
+        delBilling(id) {
+            console.log("删除", id);
+            delTemplate(id).then((response) => {
+                this.$message.success("删除计费模板成功");
+                this.clickRefresh();
+            });
+        },
 
-    // 获取计费模块列表信息
-    async templateList() {
-      const res = await listTemplate();
-      console.log(res);
-      this.tableData = res.rows;
-    },
+        // 获取计费模块列表信息
+        async templateList() {
+            const res = await listTemplate();
+            console.log(res);
+            this.tableData = res.rows;
+        },
 
-    // 查询公共计费模板
-    getPublicBillingTemplateList() {
-      queryPublicBillingTemplateList().then((response) => {
-        console.log(response.rows);
-        this.publicBillingTemplate = response.rows;
-      });
+        // 查询公共计费模板
+        getPublicBillingTemplateList() {
+            queryPublicBillingTemplateList().then((response) => {
+                console.log(response.rows);
+                this.publicBillingTemplate = response.rows;
+            });
+        },
+        // 查计费模板详情
+        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 = [];
+                // this.form.timeArray.forEach(x => {
+                //   const startTime = {
+                //     startTime: x.startTime,
+                //     type: x.type
+                //   };
+                //   selectStartTimeArr.push(startTime);
+                // })
+                // this.selectStartTime = selectStartTimeArr;
+            });
+        },
+        // 通过站点id查询计费模板
+        getStationBillingTemplateList() {
+            // console.log("通过站点id查询计费模板", this.stationId)
+            queryStationBillingTemplateList(this.stationId).then((response) => {
+                console.log("通过站点id查询计费模板 result: ", response.rows);
+                this.stationBillingTemplate = response.rows;
+            });
+        },
+        // 刷新按钮
+        clickRefresh() {
+            this.loading = true;
+            setTimeout(() => {
+                this.getStationBillingTemplateList();
+                this.loading = false;
+            }, 800);
+        },
+        clickImport() {
+            console.log("点击导入");
+            this.getPublicBillingTemplateList();
+            this.expDialog = true;
+        },
+        // 提交按钮
+        submitBtn() {
+            this.expDialog = false;
+            // console.log("提交成功", this.selectTemplateId, this.stationId);
+            const data = {
+                stationId: this.stationId,
+                billingTemplateId: this.selectTemplateId,
+            };
+            stationImportBillingTemplate(data).then((response) => {
+                this.clickRefresh();
+            });
+        },
     },
-    // 查计费模板详情
-    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 = [];
-        // this.form.timeArray.forEach(x => {
-        //   const startTime = {
-        //     startTime: x.startTime,
-        //     type: x.type
-        //   };
-        //   selectStartTimeArr.push(startTime);
-        // })
-        // this.selectStartTime = selectStartTimeArr;
-      });
+    watch: {
+        expDialog(newName, oldName) {
+            if (newName === false) {
+                this.selectTemplateId = "";
+            }
+        },
     },
-    // 通过站点id查询计费模板
-    getStationBillingTemplateList() {
-      // console.log("通过站点id查询计费模板", this.stationId)
-      queryStationBillingTemplateList(this.stationId).then((response) => {
-        console.log("通过站点id查询计费模板 result: ", response.rows);
-        this.stationBillingTemplate = response.rows;
-      });
-    },
-    // 刷新按钮
-    clickRefresh() {
-      this.loading = true;
-      setTimeout(() => {
-        this.getStationBillingTemplateList();
-        this.loading = false;
-      }, 800);
-    },
-    clickImport() {
-      console.log("点击导入");
-      this.getPublicBillingTemplateList();
-      this.expDialog = true;
-    },
-    // 提交按钮
-    submitBtn() {
-      this.expDialog = false;
-      // console.log("提交成功", this.selectTemplateId, this.stationId);
-      const data = {
-        stationId: this.stationId,
-        billingTemplateId: this.selectTemplateId,
-      };
-      stationImportBillingTemplate(data).then((response) => {
-        this.clickRefresh();
-      });
-    },
-  },
-  watch: {
-    expDialog(newName, oldName) {
-      if (newName === false) {
-        this.selectTemplateId = "";
-      }
-    },
-  },
 };
 </script>
 
 <style lang="scss" scoped>
 .demo-table-expand {
-  font-size: 0;
+    font-size: 0;
 }
+
 .demo-table-expand label {
-  width: 90px;
-  color: #99a9bf;
+    width: 90px;
+    color: #99a9bf;
 }
+
 .demo-table-expand .el-form-item {
-  margin-right: 0;
-  margin-bottom: 0;
-  width: 50%;
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
 }
 </style>