后管页面 新增 修改充电桩别名

jsowell-ui/src/views/pile/basic/detail.vue

@@ -38,8 +38,21 @@
                                             labelStyle="width: 80px"
                                             contentStyle="width: 150px"
                                         >{{ pileDetail.pileSn }}
-                                        </el-descriptions-item
-                                        >
+                                        </el-descriptions-item>
+                                        <el-descriptions-item>
+                                            <template slot="label">
+                                                别名
+                                                <el-button type="text" icon="el-icon-edit" size="medium" circle
+                                                           @click="openEdit"/>
+                                            </template>
+                                            <el-input v-model="pileDetail.name" size="medium" clearable
+                                                      :disabled="clearableFlag">
+                                                <template slot="append">
+                                                    <el-button type="text" icon="el-icon-check" size="medium"
+                                                               circle @click="updateName"/>
+                                                </template>
+                                            </el-input>
+                                        </el-descriptions-item>
                                         <el-descriptions-item label="运营商">{{
                                                 pileDetail.merchantName
                                             }}
@@ -248,19 +261,21 @@ import remoteUpgrade from './components/remoteUpgrade.vue';
 import {
     getPileDetailById,
     getPileFeedList,
-    listBasic,
+    listBasic, updateBasic,
 } from "@/api/pile/basic";
 import {queryConnectorListByParams} from "@/api/pile/connector";
 // 二维码组件
 import VueQr from "vue-qr";
 import {remoteControlGroundLock} from "@/api/pile/pileRemote";
+import Template from "@/views/billing/template";
 
 export default {
-    components: {VueQr, remoteUpgrade},
+    components: {Template, VueQr, remoteUpgrade},
     name: "pile-detail",
     dicts: ["connector_status", "connector_type", "sim_supplier", "sim_operator"],
     data() {
         return {
+            clearableFlag: true,
             pileDetailLoading: false,
             pileListLoading: false,
             pileId: this.$route.params.pileId,
@@ -361,6 +376,25 @@ export default {
         test() {
             console.log("测试");
         },
+        // 开放编辑按钮
+        openEdit() {
+            this.clearableFlag = this.clearableFlag === false;
+        },
+        // 修改充电桩别名
+        updateName() {
+            const params = {
+                id: this.pileDetail.pileId,
+                name: this.pileDetail.name,
+                sn: this.pileDetail.pileSn,
+                stationId: this.pileDetail.stationId
+            }
+            console.log("params", params)
+            updateBasic(params).then((response) => {
+                console.log("response", response)
+                this.clearableFlag = true;
+                this.getPileDetail();
+            })
+        },
         // 查询充电桩详情接口
         getPileDetail() {
             this.pileDetailLoading = true;