jsowell-charger-web/jsowell-ui/src/views/pile/station/connectorList.vue

<template>
    <div>
        <div style="margin: auto 20px">
            <!-- 刷新按钮 -->
            <el-button size="medium" type="primary" @click="refreshList"
            >刷新
            </el-button
            >
        </div>
        <div class="app-container">
            <el-table v-loading="loading" :data="connectorList">
                <el-table-column type="selection" width="55" align="center"/>
                <el-table-column label="枪口编号" prop="pileConnectorCode"/>
                <el-table-column label="状态" align="center" prop="status">
                    <template slot-scope="scope">
                        <dict-tag
                            :options="dict.type.connector_status"
                            :value="scope.row.status"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="电桩类型" align="center" prop="type">
                    <template slot-scope="scope">
                        <dict-tag
                            :options="dict.type.connector_type"
                            :value="scope.row.type"
                        />
                    </template>
                </el-table-column>
                <!--<el-table-column label="充电时长" align="center" prop="type" />-->
                <el-table-column align="center">
                    <template slot="header">
                        车位号
                        <el-button type="text" icon="el-icon-edit" size="medium" circle
                                   @click="openEdit" v-hasPermi="['pile:station:edit']"/>
                    </template>
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.parkNo" size="medium" clearable
                                  :disabled="clearableFlag">
                            <template slot="append">
                                <el-button type="text" icon="el-icon-check" size="medium"
                                           circle @click="updateParkNo(scope.row)"/>
                            </template>
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="功率（kW）"
                    align="center"
                    prop="instantPower"
                />
                <el-table-column label="电流（A）" align="center" prop="current"/>
                <el-table-column label="电压（V）" align="center" prop="voltage"/>
                <el-table-column label="温度（°C）" align="center" prop="temperature"/>
                <el-table-column label="SOC（%）" align="center" prop="soc"/>
                <!--<el-table-column label="用户信息" align="center" prop="plantformOrderNum" />-->
                <!--<el-table-column label="订单" align="center" prop="plantformOrderNum" />-->
                <!--<el-table-column label="车牌号" align="center" prop="plantformOrderNum" />-->
            </el-table>

            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />
        </div>
    </div>
</template>
<script>
import {queryConnectorListByParams, updateParkNo} from "@/api/pile/connector";
import Template from "@/views/billing/template";

export default {
    name: "",
    components: {Template},
    dicts: ["connector_type", "connector_status"],
    // props: {
    //   stationId: {
    //     type: String,
    //     required: true
    //   }
    // },
    data() {
        return {
            clearableFlag: true,
            // 总条数
            total: 0,
            // 遮罩层
            loading: false,
            connectorList: [],
            queryParams: {
                stationIdList: [],
                pageNum: 1,
                pageSize: 10,
            },
            stationId: this.$route.params.id,
        };
    },
    created() {
        // this.getList();
    },
    methods: {
        refreshList() {
            this.loading = true;
            setTimeout(() => {
                this.getList();
                this.loading = false;
                this.clearableFlag = true;
            }, 800);
        },
        // 开放编辑按钮
        openEdit() {
            this.clearableFlag = this.clearableFlag === false;
        },
        updateParkNo(row) {
            const params = {
                connectorId: row.connectorId,
                parkNo: row.parkNo,
                pileSn: row.pileSn
            }
            console.log("row", row);
            console.log("params", params)
            updateParkNo(params).then((response) =>{
                console.log("response", response)
                const result = response.obj;
                if (result === 1) {
                    this.$message({
                        type: 'success',
                        message: '操作成功！',
                    });
                }else {
                    this.$message({
                        type: 'error',
                        message: '修改失败',
                    });
                }
                this.getList();
            })
        },
        getList() {
            this.queryParams.stationIdList.push(this.stationId);
            this.loading = true;
            // console.log(this.queryParams, "充电站接口列表");
            queryConnectorListByParams(this.queryParams).then((response) => {
                this.connectorList = response.rows;
                console.log("接口列表", this.connectorList);
                this.total = response.total;
                this.loading = false;
            });
        },
    },
};
</script>