electripper-v2-ui/src/views/bst/area/edit/edit.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>