276 lines
11 KiB
Vue
276 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<edit-header :title="title">
|
||
<el-button @click="back" icon="el-icon-circle-close">取 消</el-button>
|
||
<el-button type="primary" @click="submitForm" plain icon="el-icon-circle-check">保 存</el-button>
|
||
</edit-header>
|
||
<div class="app-container" v-loading="loading">
|
||
<el-form ref="form" :model="form" size="small" :rules="rules" label-width="6em">
|
||
<collapse-panel title="基本信息" :value="true">
|
||
<el-row :gutter="gutter">
|
||
<form-col :span="span" label="运营商" prop="userId">
|
||
<user-input v-model="form.userId" :text.sync="form.userName" :disabled="!checkPermi(['system:user:list'])"/>
|
||
</form-col>
|
||
<form-col :span="span" label="区域名称" prop="name">
|
||
<el-input v-model="form.name" placeholder="请输入区域名称" />
|
||
</form-col>
|
||
<form-col :span="span" label="联系人" prop="contact">
|
||
<el-input v-model="form.contact" placeholder="请输入联系人" />
|
||
</form-col>
|
||
<form-col :span="span" label="联系方式" prop="phone">
|
||
<el-input v-model="form.phone" placeholder="请输入联系方式" />
|
||
</form-col>
|
||
<form-col :span="span" label="状态" prop="status">
|
||
<el-radio-group v-model="form.status">
|
||
<el-radio
|
||
v-for="dict in dict.type.area_status"
|
||
:key="dict.value"
|
||
:label="dict.value"
|
||
>{{dict.label}}</el-radio>
|
||
</el-radio-group>
|
||
</form-col>
|
||
<form-col :span="span" label="运营时间" prop="areaTimeStart" tip="超出营业时间后，将无法继续下单">
|
||
<el-time-picker
|
||
is-range
|
||
v-model="timeRange"
|
||
placeholder="请选择运营时间"
|
||
value-format="HH:mm:ss"
|
||
start-placeholder="开始时间"
|
||
end-placeholder="结束时间"
|
||
style="width: 100%;"
|
||
/>
|
||
</form-col>
|
||
</el-row>
|
||
</collapse-panel>
|
||
<collapse-panel title="骑行设置" :value="true">
|
||
<el-row :gutter="gutter">
|
||
<form-col :span="span" label="最低解锁电量" prop="undercharge" label-width="8em" tip="当车辆电量低于此值时，将无法解锁骑行">
|
||
<el-input v-model="form.undercharge" placeholder="请输入最低解锁电量">
|
||
<template #append>%</template>
|
||
</el-input>
|
||
</form-col>
|
||
<form-col :span="span" label="实名认证" prop="authentication" tip="开启后，用户需要实名认证后才能解锁骑行">
|
||
<el-switch v-model="form.authentication" active-text="开启" inactive-text="关闭"/>
|
||
</form-col>
|
||
<form-col :span="span" label="短信通知" prop="msgSwitch" tip="开启短信通知，费用0.1元/条，从运营商余额中扣除">
|
||
<el-switch v-model="form.msgSwitch" active-text="开启" inactive-text="关闭"/>
|
||
</form-col>
|
||
<form-col :span="span" label="禁行区内断电" prop="noRidingOutage" label-width="8em" tip="开启后，当进入禁行区内将断电">
|
||
<el-switch v-model="form.noRidingOutage" active-text="断电" inactive-text="不断电"/>
|
||
</form-col>
|
||
<form-col :span="span" label="运营区外断电" prop="areaOutOutage" label-width="8em" tip="开启后，当超出运营区后将断电">
|
||
<el-switch v-model="form.areaOutOutage" active-text="断电" inactive-text="不断电"/>
|
||
</form-col>
|
||
<form-col :span="span" label="边界播报距离" prop="boundaryDistance" label-width="8em" tip="当车辆靠近边界时,将播报提醒">
|
||
<el-input v-model="form.boundaryDistance" placeholder="请输入边界播报距离" type="number">
|
||
<template #append>米</template>
|
||
</el-input>
|
||
</form-col>
|
||
<form-col :span="span" label="出界断电距离" prop="outageDistance" label-width="8em" tip="当车辆超出运营区此距离后将断电">
|
||
<el-input v-model="form.outageDistance" placeholder="请输入运营区外断电距离" type="number">
|
||
<template #append>米</template>
|
||
</el-input>
|
||
</form-col>
|
||
</el-row>
|
||
</collapse-panel>
|
||
<collapse-panel title="还车设置" :value="true">
|
||
<el-row :gutter="gutter">
|
||
<form-col :span="span" label="还车误差" prop="error" tip="还车误差范围，允许用户在规划的停车点附近误差范围内还车">
|
||
<el-input v-model="form.error" placeholder="请输入还车误差" type="number">
|
||
<template #append>米</template>
|
||
</el-input>
|
||
</form-col>
|
||
<form-col :span="span" label="还车审核" prop="returnVerify" tip="开启后，用户还车时需要审核后才能退还押金">
|
||
<el-switch v-model="form.returnVerify" active-text="需要审核" inactive-text="无需审核"/>
|
||
</form-col>
|
||
</el-row>
|
||
<el-row :gutter="gutter">
|
||
<form-col :span="span" label="强制停车点还车" prop="parkingReturn" label-width="9em" tip="开启后，用户还车时必须停在停车点">
|
||
<el-switch v-model="form.parkingReturn" active-text="强制" inactive-text="不强制"/>
|
||
</form-col>
|
||
<template v-if="!form.parkingReturn">
|
||
<form-col :span="span" label="运营区外还车" prop="areaOutReturn" label-width="8em" tip="开启后，用户还车时允许超出运营区">
|
||
<el-switch v-model="form.areaOutReturn" active-text="允许" inactive-text="不允许"/>
|
||
</form-col>
|
||
<form-col :span="span" label="停车点外调度费" prop="dispatchFee" label-width="8em" tip="用户在停车点外还车时，需要支付的调度费">
|
||
<el-input v-model="form.dispatchFee" placeholder="请输入停车点外调度费" type="number">
|
||
<template #append>元</template>
|
||
</el-input>
|
||
</form-col>
|
||
<form-col :span="span" label="运营区外调度费" prop="vehicleManagementFee" label-width="8em" tip="用户在运营区外还车时，需要支付的调度费">
|
||
<el-input v-model="form.vehicleManagementFee" placeholder="请输入运营区外调度费" type="number">
|
||
<template #append>元</template>
|
||
</el-input>
|
||
</form-col>
|
||
</template>
|
||
</el-row>
|
||
</collapse-panel>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getArea, addArea, updateArea } from "@/api/bst/area";
|
||
import FormCol from "@/components/FormCol/index.vue";
|
||
import EditHeader from "@/components/EditHeader/index.vue";
|
||
import UserInput from '@/components/Business/User/UserInput.vue';
|
||
import CollapsePanel from '@/components/CollapsePanel/index.vue';
|
||
import {UserType, AreaStatus, RoleKeys} from '@/utils/enums';
|
||
import { mapGetters } from 'vuex';
|
||
|
||
export default {
|
||
name: "AreaEdit",
|
||
dicts: ['area_status'],
|
||
components: { FormCol, EditHeader, UserInput, CollapsePanel },
|
||
data() {
|
||
return {
|
||
AreaStatus,
|
||
UserType,
|
||
RoleKeys,
|
||
loading: false,
|
||
gutter: 16,
|
||
span: 6,
|
||
// 表单参数
|
||
form: {},
|
||
// 表单校验
|
||
rules: {
|
||
userId: [
|
||
{ required: true, message: "所属运营商不能为空", trigger: "change" }
|
||
],
|
||
name: [
|
||
{ required: true, message: "区域名称不能为空", trigger: "blur" }
|
||
],
|
||
status: [
|
||
{ required: true, message: "运营区状态不能为空", trigger: "change" }
|
||
],
|
||
undercharge: [
|
||
{ required: true, message: "最低解锁电量不能为空", trigger: "blur" },
|
||
],
|
||
error: [
|
||
{ required: true, message: "还车误差不能为空", trigger: "blur" },
|
||
]
|
||
}
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters(['userId', 'nickName']),
|
||
title() {
|
||
return this.form.id ? "修改运营区" : "添加运营区";
|
||
},
|
||
timeRange: {
|
||
set(val) {
|
||
this.form.areaTimeStart = val[0];
|
||
this.form.areaTimeEnd = val[1];
|
||
},
|
||
get() {
|
||
if (this.form.areaTimeStart && this.form.areaTimeEnd) {
|
||
return [this.form.areaTimeStart, this.form.areaTimeEnd];
|
||
}
|
||
return [];
|
||
}
|
||
},
|
||
},
|
||
created() {
|
||
const id = this.$route.params.id;
|
||
if (id) {
|
||
this.getInfo(id);
|
||
} else {
|
||
this.reset();
|
||
}
|
||
},
|
||
methods: {
|
||
/** 获取运营区详细信息 */
|
||
getInfo(id) {
|
||
this.loading = true;
|
||
getArea(id).then(response => {
|
||
this.form = response.data;
|
||
}).finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
// 返回
|
||
back() {
|
||
this.$tab.closeBack();
|
||
},
|
||
// 表单重置
|
||
reset() {
|
||
this.form = {
|
||
id: null,
|
||
userId: this.userId,
|
||
name: null,
|
||
boundary: null,
|
||
boundaryStr: null,
|
||
longitude: null,
|
||
latitude: null,
|
||
contact: null,
|
||
phone: null,
|
||
status: AreaStatus.OPEN,
|
||
areaOutOutage: true,
|
||
parkingOutDispatch: true,
|
||
areaOutDispatch: true,
|
||
noRidingOutage: true,
|
||
authentication: true,
|
||
msgSwitch: false,
|
||
undercharge: 10,
|
||
error: 5,
|
||
agreement: null,
|
||
deposit: 10,
|
||
dispatchFee: 0,
|
||
vehicleManagementFee: 0,
|
||
areaTimeStart: "00:00:00",
|
||
areaTimeEnd: "23:59:59",
|
||
parkingReturn: true,
|
||
areaOutReturn: false,
|
||
returnVerify: false,
|
||
upperLeft: null,
|
||
lowerRight: null,
|
||
guideMap: null,
|
||
guideSwitch: null,
|
||
createId: null,
|
||
createTime: null,
|
||
boundaryDistance: 20,
|
||
outageDistance: 20,
|
||
// vo
|
||
userName: this.nickName,
|
||
};
|
||
this.resetForm("form");
|
||
},
|
||
/** 提交按钮 */
|
||
submitForm() {
|
||
this.$refs["form"].validate(valid => {
|
||
if (valid) {
|
||
// 不修改边界
|
||
this.form.boundary = null;
|
||
this.form.boundaryStr = null;
|
||
this.form.longitude = null;
|
||
this.form.latitude = null;
|
||
this.loading = true;
|
||
if (this.form.id != null) {
|
||
updateArea(this.form).then(response => {
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.back();
|
||
}).finally(() => {
|
||
this.loading = false;
|
||
});
|
||
} else {
|
||
addArea(this.form).then(response => {
|
||
this.$modal.msgSuccess("新增成功");
|
||
this.back();
|
||
}).finally(() => {
|
||
this.loading = false;
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.dialog-footer {
|
||
margin-top: 20px;
|
||
}
|
||
</style>
|