mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-05-15 15:28:41 +08:00
commit
This commit is contained in:
345
jsowell-ui/src/views/pile/station/components/SiteInfo.vue
Normal file
345
jsowell-ui/src/views/pile/station/components/SiteInfo.vue
Normal file
@@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
label-width="120px"
|
||||
:model="station"
|
||||
:rules="rules"
|
||||
ref="stationRef"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="站点名称" prop="stationName">
|
||||
<el-input v-model="station.stationName"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="area" label="站点区域">
|
||||
<!--<el-input v-model="station.areaCode"> </el-input>-->
|
||||
<el-cascader
|
||||
size="large"
|
||||
:options="options"
|
||||
v-model="areaCodeList"
|
||||
@change="handleChange"
|
||||
disabled
|
||||
>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="address" label="地址">
|
||||
<el-input v-model="station.address" disabled></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="stationTel" label="联系电话">
|
||||
<el-input v-model="station.stationTel"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="matchCars" label="适配车辆类型">
|
||||
<el-select v-model="station.selectMatchCars" multiple placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in dict.type.match_cars"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="publicFlag" label="是否对外开放">
|
||||
<el-select v-model="station.publicFlag" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in publicFlagOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="openFlag" label="是否营业中">
|
||||
<el-select v-model="station.openFlag" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in openFlagOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="merchantAdminName" label="管理员">
|
||||
<el-input
|
||||
v-model="
|
||||
station.merchantAdminName === null
|
||||
? '无'
|
||||
: station.merchantAdminName
|
||||
"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="stationLng" label="经度">
|
||||
<el-input v-model="station.stationLng" disabled></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="stationLat" label="纬度">
|
||||
<el-input v-model="station.stationLat" disabled></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="merchantName" label="运营商">
|
||||
<el-input
|
||||
v-model="
|
||||
station.merchantName === null ? '无' : station.merchantName
|
||||
"
|
||||
disabled
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="stationType" label="站点类型">
|
||||
<el-select v-model="station.stationType" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in dict.type.station_type"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="construction" label="建设场所">
|
||||
<el-select v-model="station.construction" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in dict.type.construction_type"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="electricityPrice" label="充电费率">
|
||||
<el-input
|
||||
v-model="
|
||||
station.electricityPrice === null ? 0 : station.electricityPrice
|
||||
"
|
||||
disabled
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="servicePrice" label="服务费率">
|
||||
<el-input
|
||||
v-model="station.servicePrice === null ? 0 : station.servicePrice"
|
||||
disabled
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="businessHours" label="营业时间">
|
||||
<el-input v-model="station.businessHours"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-button type="primary" style="margin-left: 94%" @click="present"
|
||||
>提交</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getStationInfo,
|
||||
updateStation,
|
||||
} from "@/api/pile/station.js";
|
||||
import bus from "@/bus/bus";
|
||||
import { regionData} from "element-china-area-data";
|
||||
|
||||
export default {
|
||||
dicts: ["station_type", "match_cars", "construction_type"],
|
||||
data() {
|
||||
return {
|
||||
options: regionData,
|
||||
labelPosition: "right",
|
||||
station: {
|
||||
stationName: "",
|
||||
areaCode: "",
|
||||
address: "",
|
||||
stationTel: "",
|
||||
matchCars: "",
|
||||
selectMatchCars: [],
|
||||
publicFlag: "",
|
||||
openFlag: "",
|
||||
merchantAdminName: "",
|
||||
stationLng: "",
|
||||
stationLat: "",
|
||||
merchantId: "",
|
||||
stationStatus: "",
|
||||
construction: "",
|
||||
businessHours: "",
|
||||
},
|
||||
stationId: this.$route.params.id,
|
||||
publicFlagOptions: [
|
||||
{
|
||||
value: "1",
|
||||
label: "是",
|
||||
},
|
||||
{
|
||||
value: "0",
|
||||
label: "否",
|
||||
},
|
||||
],
|
||||
openFlagOptions: [
|
||||
{
|
||||
value: "1",
|
||||
label: "是",
|
||||
},
|
||||
{
|
||||
value: "0",
|
||||
label: "否",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
stationName: [
|
||||
{ required: true, message: "请输入站点名称", trigger: "blur" },
|
||||
],
|
||||
areaCode: [
|
||||
{ required: true, message: "请输入站点区域", trigger: "blur" },
|
||||
],
|
||||
address: [
|
||||
{ required: true, message: "请输入地址", trigger: "blur" }
|
||||
],
|
||||
stationTel: [
|
||||
{ required: true, message: "请输入联系电话", trigger: "blur" },
|
||||
],
|
||||
matchCars: [
|
||||
{ required: true, message: "请输入适配车辆类型", trigger: "blur" },
|
||||
],
|
||||
publicFlag: [
|
||||
{ required: true, message: "请填写是否对外开放", trigger: "blur" },
|
||||
],
|
||||
openFlag: [
|
||||
{ required: true, message: "是否营业中", trigger: "blur" }
|
||||
],
|
||||
// merchantAdminName: [
|
||||
// { required: true, message: "请输入管理员", trigger: "blur" },
|
||||
// ],
|
||||
stationLng: [
|
||||
{ required: true, message: "请输入经度", trigger: "blur" },
|
||||
],
|
||||
stationLat: [
|
||||
{ required: true, message: "请输入纬度", trigger: "blur" },
|
||||
],
|
||||
// merchantId: [
|
||||
// { required: true, message: "请输入管理员", trigger: "blur" },
|
||||
// ],
|
||||
stationType: [
|
||||
{ required: true, message: "请输入站点类型", trigger: "blur" },
|
||||
],
|
||||
construction: [
|
||||
{ required: true, message: "请输入建设场所", trigger: "blur" },
|
||||
],
|
||||
region: [
|
||||
{ required: true, message: "请输入充电费率", trigger: "blur" },
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "请输入服务费率", trigger: "blur" }
|
||||
],
|
||||
businessHours: [
|
||||
{ required: true, message: "请输入营业时间", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleChange() {
|
||||
console.log("111");
|
||||
},
|
||||
// 渲染表格数据
|
||||
async queryStationInfo() {
|
||||
const res = await getStationInfo(this.stationId);
|
||||
console.log(res);
|
||||
this.station = res.data;
|
||||
console.log("queryStationInfo表格数据", this.station);
|
||||
},
|
||||
// 提交按钮
|
||||
present() {
|
||||
// console.log("matchCars提交时：", this.station.matchCars);
|
||||
// console.log("selectMatchCars提交时：", this.station.selectMatchCars);
|
||||
|
||||
// 赋值
|
||||
this.station.matchCars = this.station.selectMatchCars.join(",");
|
||||
// console.log("matchCars赋值后：", this.station.matchCars);
|
||||
this.$refs.stationRef.validate((valid) => {
|
||||
if (valid) {
|
||||
this.subUpdate();
|
||||
this.$message.success("提交成功");
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改充电站信息
|
||||
async subUpdate() {
|
||||
await updateStation(this.station);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 接收map 地图传过来的搜索值
|
||||
bus.$on("res", (data) => {
|
||||
// console.log("data", data); // data就是它传过来的值
|
||||
// console.log("原始this.station", this.station);
|
||||
// 地址
|
||||
this.detailedAddress = data.address;
|
||||
// console.log("详细地址", data.address);
|
||||
var adcode = data.adcode;
|
||||
var areaCode = [];
|
||||
areaCode[0] = adcode.substr(0,2) + "0000";
|
||||
areaCode[1] = adcode.substr(0,4) + "00";
|
||||
areaCode[2] = adcode;
|
||||
// console.log("拼装的areaCode", areaCode);
|
||||
// 修改数据
|
||||
this.station.areaCode = areaCode.join(",");
|
||||
this.station.stationLng = String(data.pos[0]);
|
||||
this.station.stationLat = String(data.pos[1]);
|
||||
// console.log("修改后this.station", this.station);
|
||||
|
||||
// 优化之后
|
||||
let newAddress2 = this.detailedAddress
|
||||
.replace(/(?<=[省市区])/g, "$&,")
|
||||
.split(",");
|
||||
let end = newAddress2.pop();
|
||||
console.log("详细地址", end);
|
||||
this.station.address = end;
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
areaCodeList() {
|
||||
return this.station.areaCode.split(",");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user