From ea36d858ab12f45f32da8210d7c03c0f9a53b1ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A3=B7=E5=8F=B6?=
 <14103883+leaf-phos@user.noreply.gitee.com>
Date: Tue, 18 Mar 2025 18:05:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bst/model.js                          |  44 ++
 src/api/bst/suit.js                           |  44 ++
 src/assets/icons/svg/car.svg                  |   1 +
 .../Business/Area/AreaRemoteSelect.vue        | 141 ++++++
 src/main.js                                   |   3 +
 src/store/getters.js                          |   1 +
 src/store/modules/user.js                     |   5 +
 src/utils/enums.js                            |  25 +-
 src/utils/index.js                            |  12 +
 src/views/bst/area/edit/edit.vue              |  69 ++-
 src/views/bst/area/index.vue                  |  11 +-
 src/views/bst/areaSub/index.vue               |  26 +-
 src/views/bst/model/index.vue                 | 403 ++++++++++++++++++
 .../bst/suit/components/SuitEditDialog.vue    | 384 +++++++++++++++++
 src/views/bst/suit/index.vue                  | 296 +++++++++++++
 15 files changed, 1412 insertions(+), 53 deletions(-)
 create mode 100644 src/api/bst/model.js
 create mode 100644 src/api/bst/suit.js
 create mode 100644 src/assets/icons/svg/car.svg
 create mode 100644 src/components/Business/Area/AreaRemoteSelect.vue
 create mode 100644 src/views/bst/model/index.vue
 create mode 100644 src/views/bst/suit/components/SuitEditDialog.vue
 create mode 100644 src/views/bst/suit/index.vue

diff --git a/src/api/bst/model.js b/src/api/bst/model.js
new file mode 100644
index 0000000..e80ea35
--- /dev/null
+++ b/src/api/bst/model.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询车辆型号列表
+export function listModel(query) {
+  return request({
+    url: '/bst/model/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询车辆型号详细
+export function getModel(id) {
+  return request({
+    url: '/bst/model/' + id,
+    method: 'get'
+  })
+}
+
+// 新增车辆型号
+export function addModel(data) {
+  return request({
+    url: '/bst/model',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改车辆型号
+export function updateModel(data) {
+  return request({
+    url: '/bst/model',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除车辆型号
+export function delModel(id) {
+  return request({
+    url: '/bst/model/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/api/bst/suit.js b/src/api/bst/suit.js
new file mode 100644
index 0000000..2303b02
--- /dev/null
+++ b/src/api/bst/suit.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询套餐列表
+export function listSuit(query) {
+  return request({
+    url: '/bst/suit/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询套餐详细
+export function getSuit(id) {
+  return request({
+    url: '/bst/suit/' + id,
+    method: 'get'
+  })
+}
+
+// 新增套餐
+export function addSuit(data) {
+  return request({
+    url: '/bst/suit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改套餐
+export function updateSuit(data) {
+  return request({
+    url: '/bst/suit',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除套餐
+export function delSuit(id) {
+  return request({
+    url: '/bst/suit/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/assets/icons/svg/car.svg b/src/assets/icons/svg/car.svg
new file mode 100644
index 0000000..702b697
--- /dev/null
+++ b/src/assets/icons/svg/car.svg
@@ -0,0 +1 @@
+<svg t="1742283003051" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4321" width="64" height="64"><path d="M512 633.904762a121.904762 121.904762 0 0 0-121.904762 121.904762v146.285714a121.904762 121.904762 0 0 0 243.809524 0v-146.285714a121.904762 121.904762 0 0 0-121.904762-121.904762zM512 73.142857a73.142857 73.142857 0 1 1-73.142857 73.142857 73.142857 73.142857 0 0 1 73.142857-73.142857m0-73.142857a146.285714 146.285714 0 1 0 146.285714 146.285714 146.285714 146.285714 0 0 0-146.285714-146.285714z" p-id="4322"></path><path d="M707.047619 260.388571h-68.510476a170.666667 170.666667 0 0 1-253.074286 0H316.952381a121.904762 121.904762 0 0 0-121.904762 121.904762v369.127619a121.904762 121.904762 0 0 0 121.904762 121.904762h43.885714V755.809524a151.161905 151.161905 0 0 1 302.32381 0v117.51619H707.047619a121.904762 121.904762 0 0 0 121.904762-121.904762V382.293333a121.904762 121.904762 0 0 0-121.904762-121.904762zM358.15619 73.142857H73.142857a48.761905 48.761905 0 0 0-48.761905 48.761905v48.761905a48.761905 48.761905 0 0 0 48.761905 48.761904h285.013333a167.497143 167.497143 0 0 1 0-146.285714zM950.857143 73.142857H666.087619a170.666667 170.666667 0 0 1 0 146.285714H950.857143a48.761905 48.761905 0 0 0 48.761905-48.761904V121.904762a48.761905 48.761905 0 0 0-48.761905-48.761905z" p-id="4323"></path><path d="M512 73.142857a73.142857 73.142857 0 1 1-73.142857 73.142857 73.142857 73.142857 0 0 1 73.142857-73.142857m0-73.142857a146.285714 146.285714 0 1 0 146.285714 146.285714 146.285714 146.285714 0 0 0-146.285714-146.285714z"  p-id="4324"></path></svg>
\ No newline at end of file
diff --git a/src/components/Business/Area/AreaRemoteSelect.vue b/src/components/Business/Area/AreaRemoteSelect.vue
new file mode 100644
index 0000000..4dc4b5e
--- /dev/null
+++ b/src/components/Business/Area/AreaRemoteSelect.vue
@@ -0,0 +1,141 @@
+<template>
+  <el-select 
+    v-model="selectedValue" 
+    placeholder="请选择" 
+    filterable
+    :multiple="multiple"
+    :loading="loading"
+    @change="handleChange"
+  >
+    <div class="select-footer">
+      <div style="text-align: center; color: #8492a6; font-size: 13px; line-height: 28px; ">
+        共{{ total }}条数据
+      </div>
+      <el-button v-if="multiple && !isEmpty(options)" style="margin-left: 10px;" size="mini" type="text" @click.stop="handleSelectAll">
+        {{ isAllSelected ? '取消全选' : '全选' }}
+      </el-button>
+    </div>
+    <el-option 
+      v-for="item in options" 
+      :key="item.id" 
+      :value="item.id"
+      :label="item.name"
+    />
+    <el-option v-if="isEmpty(value) && isEmpty(options)" style="display:none" disabled :value="null"></el-option>
+  </el-select>
+</template>
+
+<script>
+import { listArea } from '@/api/bst/area';
+import Avatar from '@/components/Avatar';
+import {isEmpty} from '@/utils'
+
+export default {
+  name: 'AreaRemoteSelect',
+  components: {
+    Avatar
+  },
+  props: {
+    // 区域id
+    value: {
+      type: [String, Array],
+      default: null
+    },
+    // 自定义查询参数
+    query: {
+      type: Object,
+      default: () => ({})
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    // 初始化选项
+    initOptions: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      options: [],
+      total: 0,
+      loading: false,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 100,
+        keyword: null
+      }
+    }
+  },
+  computed: {
+    selectedValue: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value)
+      }
+    },
+    // 是否全选
+    isAllSelected() {
+      return this.multiple && this.options.length > 0 && Array.isArray(this.value) && this.value.length === this.options.length;
+    }
+  },
+  watch: {
+    query: {
+      handler(nv) {
+        this.queryParams = {
+          ...this.queryParams,
+          ...nv
+        }
+        this.getOptions();
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    isEmpty,
+    // 全选
+    handleSelectAll() {
+      if (this.isAllSelected) {
+        this.handleChange([]);
+      } else {
+        const allids = this.options.map(item => item.id);
+        this.handleChange(allids);
+      }
+    },
+    handleChange(value) {
+      let list = this.options.filter(item => value.includes(item.id));
+      this.$emit('change', list);
+    },
+    getOptions() {
+      this.loading = true;
+      this.queryParams = {
+        ...this.queryParams,
+        ...this.query
+      }
+      listArea(this.queryParams).then(res => {
+        this.options = res.rows;
+        this.total = res.total;
+      }).finally(() => {
+        this.loading = false;
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select-footer {
+  padding: 5px 12px;
+  border-bottom: 1px solid #EBEEF5;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.user-name {
+  padding-left: 6px;
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index b962284..7b61d10 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,6 +17,7 @@ import store from './store';
 
 import { getConfigKey } from '@/api/system/config';
 import { getDicts } from '@/api/system/dict/data';
+import { checkPermi, checkRole } from '@/utils/permission';
 import { addDateRange, handleTree, parseTime, resetForm, selectDictLabel, selectDictLabels } from '@/utils/ruoyi';
 import './assets/icons'; // icon
 import './permission'; // permission control
@@ -55,6 +56,8 @@ Vue.prototype.selectDictLabel = selectDictLabel
 Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.download = download
 Vue.prototype.handleTree = handleTree
+Vue.prototype.checkPermi = checkPermi
+Vue.prototype.checkRole = checkRole
 
 // 全局组件挂载
 Vue.component('DictTag', DictTag)
diff --git a/src/store/getters.js b/src/store/getters.js
index 8340672..74490a9 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -13,6 +13,7 @@ const getters = {
   introduction: state => state.user.introduction,
   roles: state => state.user.roles,
   permissions: state => state.user.permissions,
+  userType: state => state.user.userType,
   deptId: state => state.user.deptId,
   permission_routes: state => state.permission.routes,
   topbarRouters:state => state.permission.topbarRouters,
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index ba15fa5..972d1bd 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -14,6 +14,7 @@ const user = {
     roles: [],
     permissions: [],
     deptId: null,
+    userType: null,
   },
 
   mutations: {
@@ -62,6 +63,9 @@ const user = {
       //   zIndex: 9999,
       //   opacity: 0.1,
       // })
+    },
+    SET_USER_TYPE: (state, userType) => {
+      state.userType = userType;
     }
   },
 
@@ -100,6 +104,7 @@ const user = {
           commit('SET_NICK_NAME', user.nickName)
           commit('SET_AVATAR', avatar)
           commit('SET_DEPT_ID', user.deptId)
+          commit('SET_USER_TYPE', user.userType)
           resolve(res)
         }).catch(error => {
           reject(error)
diff --git a/src/utils/enums.js b/src/utils/enums.js
index 2cb5218..c813481 100644
--- a/src/utils/enums.js
+++ b/src/utils/enums.js
@@ -2,14 +2,18 @@
 export const UserType = {
   ADMIN: '1', // 系统用户
   USER: '2', // 普通用户
+
+  // 判断是否是管理员
+  isAdminType(userType) {
+    return userType === UserType.ADMIN;
+  }
 }
 
 // 角色
 export const RoleKeys = {
   ADMIN: "admin", // 超级管理员
   AGENT: "agent", // 代理商
-  BIZ: "biz", // 运营商
-  USER: "user", // 普通用户
+  MCH: "mch", // 运营商
 }
 
 // 应用类型
@@ -53,4 +57,21 @@ export const AreaSubType = {
   NO_RIDE: "3", // 禁行区
 }
 
+// 套餐状态
+export const SuitStatus = {
+  NORMAL: "0", // 正常
+  DISABLED: "1", // 禁用
+}
 
+// 套餐租赁单位
+export const SuitRentalUnit = {
+  MINUTE: "minutes", // 分钟
+  HOUR: "hours", // 小时
+  DAY: "day", // 天
+}
+
+// 计费方式
+export const SuitRidingRule = {
+  START: "1", // 起步价
+  INTERVAL: "2", // 区间计费
+}
\ No newline at end of file
diff --git a/src/utils/index.js b/src/utils/index.js
index 3eb0eed..a17ad90 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -612,4 +612,16 @@ export function getOriginName(name) {
   } else {
     return name;  
   }
+}
+
+// 获取字典的label
+export function dictLabel(dict, value) {
+  if (!dict) {
+    return '';
+  }
+  const dictItem = dict.find(item => item.value === value);
+  if (!dictItem) {
+    return '';
+  }
+  return dictItem.label;
 }
\ No newline at end of file
diff --git a/src/views/bst/area/edit/edit.vue b/src/views/bst/area/edit/edit.vue
index d663699..53dff32 100644
--- a/src/views/bst/area/edit/edit.vue
+++ b/src/views/bst/area/edit/edit.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
     <edit-header :title="title">
-      <el-button @click="back">取 消</el-button>
-      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <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">
+    <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"/>
+              <user-input v-model="form.userId" :text.sync="form.userName" :disabled="!checkRole([RoleKeys.ADMIN, RoleKeys.AGENT])"/>
             </form-col>
             <form-col :span="span" label="区域名称" prop="name">
               <el-input v-model="form.name" placeholder="请输入区域名称" />
@@ -106,8 +106,8 @@ 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} from '@/utils/enums';
-
+import {UserType, AreaStatus, RoleKeys} from '@/utils/enums';
+import { mapGetters } from 'vuex';
 
 export default {
   name: "AreaEdit",
@@ -117,6 +117,8 @@ export default {
     return {
       AreaStatus,
       UserType,
+      RoleKeys,
+      loading: false,
       gutter: 16,
       span: 6,
       // 表单参数
@@ -132,43 +134,17 @@ export default {
         status: [
           { required: true, message: "运营区状态不能为空", trigger: "change" }
         ],
-        areaOutOutage: [
-          { required: true, message: "运营区域外断电不能为空", trigger: "blur" }
-        ],
-        parkingOutDispatch: [
-          { required: true, message: "停车点外还车调度不能为空", trigger: "blur" }
-        ],
-        areaOutDispatch: [
-          { required: true, message: "电子围栏外还车调度不能为空", trigger: "blur" }
-        ],
-        noRidingOutage: [
-          { required: true, message: "禁行区内断电不能为空", trigger: "blur" }
-        ],
-        authentication: [
-          { required: true, message: "实名认证不能为空", trigger: "blur" }
-        ],
-        msgSwitch: [
-          { required: true, message: "短信通知服务不能为空", trigger: "blur" }
-        ],
         undercharge: [
-          { required: true, message: "最低电量不允许为空", trigger: "blur" }
+          { required: true, message: "最低解锁电量不能为空", trigger: "blur" },
         ],
         error: [
-          { required: true, message: "还车误差不能为空", trigger: "blur" }
-        ],
-        deposit: [
-          { required: true, message: "默认押金不能为空", trigger: "blur" }
-        ],
-        areaOutReturn: [
-          { required: true, message: "运营区外还车不能为空", trigger: "blur" }
-        ],
-        parkingReturn: [
-          { required: true, message: "必须还车点还车不能为空", trigger: "blur" }
+          { required: true, message: "还车误差不能为空", trigger: "blur" },
         ]
       }
     };
   },
   computed: {
+    ...mapGetters(['userId', 'nickName']),
     title() {
       return this.form.id ? "修改运营区" : "添加运营区";
     },
@@ -183,7 +159,7 @@ export default {
         }
         return [];
       }
-    }
+    },
   },
   created() {
     const id = this.$route.params.id;
@@ -196,8 +172,11 @@ export default {
   methods: {
     /** 获取运营区详细信息 */
     getInfo(id) {
+      this.loading = true;
       getArea(id).then(response => {
         this.form = response.data;
+      }).finally(() => {
+        this.loading = false;
       });
     },
     // 返回
@@ -208,7 +187,7 @@ export default {
     reset() {
       this.form = {
         id: null,
-        userId: null,
+        userId: this.userId,
         name: null,
         boundary: null,
         boundaryStr: null,
@@ -241,7 +220,7 @@ export default {
         createId: null,
         createTime: null,
         // vo
-        userName: null,
+        userName: this.nickName,
       };
       this.resetForm("form");
     },
@@ -249,19 +228,25 @@ export default {
     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) {
-            // 不修改边界
-            this.form.boundaryStr = null;
-            this.form.longitude = null;
-            this.form.latitude = 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;
             });
           }
         }
diff --git a/src/views/bst/area/index.vue b/src/views/bst/area/index.vue
index fb1baad..d9cd80c 100644
--- a/src/views/bst/area/index.vue
+++ b/src/views/bst/area/index.vue
@@ -102,8 +102,9 @@
             <template v-if="column.key === 'id'">
               {{d.row[column.key]}}
             </template>
-            <template v-else-if="column.key === 'status'">
-              <dict-tag :options="dict.type.area_status" :value="d.row[column.key]"/>
+            <template v-else-if="column.key === 'name'">
+              {{d.row.name}}
+              <dict-tag :options="dict.type.area_status" :value="d.row.status" size="mini"/>
             </template>
             <template v-else-if="column.key === 'subArea'">
               <el-button type="text" size="mini" @click="handleSubArea(d.row.id)">
@@ -167,10 +168,10 @@ export default {
     return {
       // 字段列表
       columns: [
-        {key: 'id', visible: true, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
+        {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
+        {key: 'name', visible: true, label: '名称', minWidth: "200", sortable: true, overflow: false, align: 'left', width: null},
         {key: 'userName', visible: true, label: '运营商', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'name', visible: true, label: '名称', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        // {key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'contact', visible: true, label: '联系人', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'phone', visible: true, label: '联系电话', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
         {key: 'subArea', visible: true, label: '下属区域', minWidth: "200", sortable: true, overflow: false, align: 'center', width: null},
diff --git a/src/views/bst/areaSub/index.vue b/src/views/bst/areaSub/index.vue
index 21fd14c..b5c5045 100644
--- a/src/views/bst/areaSub/index.vue
+++ b/src/views/bst/areaSub/index.vue
@@ -93,7 +93,15 @@
               <template v-else-if="column.key === 'name'">
                 {{d.row.name | dv}}
                 <dict-tag :options="dict.type.area_sub_type" :value="d.row.type" size="mini"/>
-                <dict-tag :options="dict.type.area_sub_status" :value="d.row.status" size="mini" style="margin-left: 4px;"/>
+                <!-- <dict-tag :options="dict.type.area_sub_status" :value="d.row.status" size="mini" style="margin-left: 4px;"/> -->
+              </template>
+              <template v-else-if="column.key === 'status'">
+                <el-switch 
+                  v-model="d.row.status" 
+                  :active-value="AreaSubStatus.NORMAL" 
+                  :inactive-value="AreaSubStatus.DISABLED" 
+                  @change="(val) => handleStatusChange(d.row, val)"
+                />
               </template>
               <template v-else-if="column.key === 'error'">
                 {{d.row.error | dv}} 米 
@@ -161,7 +169,7 @@
 </template>
 
 <script>
-import { listByAreaId, delAreaSub, addAreaSub, updateAreaSub } from "@/api/bst/areaSub";
+import { listByAreaId, delAreaSub, updateAreaSub } from "@/api/bst/areaSub";
 import { $showColumns } from '@/utils/mixins';
 import FormCol from "@/components/FormCol/index.vue";
 import { getArea, updateArea } from '@/api/bst/area';
@@ -191,9 +199,9 @@ export default {
         {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "60"},
         {key: 'name', visible: true, label: '名称', minWidth: null, sortable: true, overflow: false, align: 'left', width: null},
         // {key: 'type', visible: true, label: '类型', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        // {key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
         {key: 'error', visible: true, label: '误差', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
-        {key: 'picture', visible: true, label: '照片', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
+        {key: 'picture', visible: false, label: '照片', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
         {key: 'remark', visible: true, label: '备注', minWidth: null, sortable: true, overflow: true, align: 'center', width: "100"},
         {key: 'createTime', visible: false, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: "90"},
       ],
@@ -258,6 +266,16 @@ export default {
     this.getList();
   },
   methods: {
+    // 状态变化处理
+    handleStatusChange(row, val) {
+      updateAreaSub({id: row.id, status: val}).then(response => {
+        if (response.code == 200) {
+          this.$modal.msgSuccess("更新成功");
+        }
+      }).catch(() => {
+        row.status = val == AreaSubStatus.NORMAL ? AreaSubStatus.DISABLED : AreaSubStatus.NORMAL;
+      })
+    },
     // 处理更新子区域边界
     handleUpdateBoundary({areaSub, boundary, longitude, latitude}) {
       console.log(areaSub, boundary, longitude, latitude);
diff --git a/src/views/bst/model/index.vue b/src/views/bst/model/index.vue
new file mode 100644
index 0000000..a6b3ff2
--- /dev/null
+++ b/src/views/bst/model/index.vue
@@ -0,0 +1,403 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="车型名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入车型名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="所属用户" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入所属用户名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="运营区" prop="areaName">
+        <el-input
+          v-model="queryParams.areaName"
+          placeholder="请输入运营区名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-has-permi="['bst:model:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-has-permi="['bst:model:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-has-permi="['bst:model:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="modelList" @selection-change="handleSelectionChange" :default-sort="defaultSort"  @sort-change="onSortChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <template v-for="column of showColumns">
+        <el-table-column
+            :key="column.key"
+            :label="column.label"
+            :prop="column.key"
+            :align="column.align"
+            :min-width="column.minWidth"
+            :sort-orders="orderSorts"
+            :sortable="column.sortable"
+            :show-overflow-tooltip="column.overflow"
+            :width="column.width"
+        >
+          <template slot-scope="d">
+            <template v-if="column.key === 'id'">
+              {{d.row[column.key]}}
+            </template>
+            <template v-else-if="column.key === 'lowBatteryReminderSwitch'">
+              <boolean-tag :value="d.row[column.key]" true-text="开启" false-text="关闭"/>
+              <template v-if="d.row.lowBatteryReminderSwitch">
+                {{d.row.lowBatteryReminder | dv}} %
+              </template>
+            </template>
+            <template v-else-if="['fullVoltage', 'lowVoltage'].includes(column.key)">
+              {{d.row[column.key]}} V
+            </template>
+            <template v-else-if="['fullEndurance'].includes(column.key)">
+              {{d.row[column.key]}} KM
+            </template>
+            <template v-else>
+              {{d.row[column.key]}}
+            </template>
+          </template>
+        </el-table-column>
+      </template>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-has-permi="['bst:model:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-has-permi="['bst:model:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改车辆型号对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">
+        <el-row>
+          <form-col :span="span"  label="所属用户" prop="userId">
+            <user-input v-model="form.userId" :text.sync="form.userName" :disabled="!checkRole([RoleKeys.ADMIN])"/>
+          </form-col>
+          <form-col :span="span"  label="运营区" prop="areaId">
+            <area-remote-select v-model="form.areaId" style="width: 100%;"/>
+          </form-col>
+          <form-col :span="span"  label="车型名称" prop="name">
+            <el-input v-model="form.name" placeholder="请输入车型名称" />
+          </form-col>
+          <form-col :span="span"  label="满电电压" prop="fullVoltage">
+            <el-input v-model="form.fullVoltage" placeholder="请输入满电电压" type="number">
+              <template slot="append">V</template>
+            </el-input>
+          </form-col>
+          <form-col :span="span"  label="亏电电压" prop="lowVoltage">
+            <el-input v-model="form.lowVoltage" placeholder="请输入亏电电压" type="number">
+              <template slot="append">V</template>
+            </el-input>
+          </form-col>
+          <form-col :span="span"  label="满电续航" prop="fullEndurance">
+            <el-input v-model="form.fullEndurance" placeholder="请输入满电续航" type="number">
+              <template slot="append">KM</template>
+            </el-input>
+          </form-col>
+          <form-col :span="span"  label="备注" prop="remark">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          </form-col>
+          <form-col :span="span"  label="低电量提醒开关" prop="lowBatteryReminderSwitch" label-width="9em">
+            <el-switch v-model="form.lowBatteryReminderSwitch" />
+          </form-col>
+          <form-col :span="span"  label="骑行低电量提醒" prop="lowBatteryReminder" label-width="9em" v-if="form.lowBatteryReminderSwitch">
+            <el-input v-model="form.lowBatteryReminder" placeholder="请输入骑行低电量提醒" type="number">
+              <template slot="append">%</template>
+            </el-input>
+          </form-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listModel, getModel, delModel, addModel, updateModel } from "@/api/bst/model";
+import { $showColumns } from '@/utils/mixins';
+import FormCol from "@/components/FormCol/index.vue";
+import UserInput from '@/components/Business/User/UserInput.vue';
+import BooleanTag from '@/components/BooleanTag/index.vue';
+import AreaRemoteSelect from '@/components/Business/Area/AreaRemoteSelect.vue';
+import { RoleKeys } from '@/utils/enums';
+
+  // 默认排序字段
+const defaultSort = {
+  prop: "createTime",
+  order: "descending"
+}
+
+export default {
+  name: "Model",
+  mixins: [$showColumns],
+  components: {FormCol, UserInput, BooleanTag, AreaRemoteSelect},
+  data() {
+    return {
+      RoleKeys,
+      span: 24,
+      // 字段列表
+      columns: [
+        {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
+        {key: 'name', visible: true, label: '名称', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'areaName', visible: true, label: '运营区', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'userName', visible: true, label: '运营商', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'fullVoltage', visible: true, label: '满电电压', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'lowVoltage', visible: true, label: '亏电电压', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'fullEndurance', visible: true, label: '满电续航', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'remark', visible: true, label: '备注', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'lowBatteryReminderSwitch', visible: true, label: '低电量提醒', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+      ],
+      // 排序方式
+      orderSorts: ['ascending', 'descending', null],
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 车辆型号表格数据
+      modelList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      defaultSort,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        orderByColumn: defaultSort.prop,
+        isAsc: defaultSort.order,
+        id: null,
+        areaId: null,
+        userId: null,
+        name: null,
+        deleted: null,
+        lowBatteryReminderSwitch: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        areaId: [
+          { required: true, message: "运营区不能为空", trigger: "change" }
+        ],
+        userId: [
+          { required: true, message: "运营商不能为空", trigger: "change" }
+        ],
+        name: [
+          { required: true, message: "车型名称不能为空", trigger: "blur" }
+        ],
+        fullVoltage: [
+          { required: true, message: "满电电压不能为空", trigger: "blur" }
+        ],
+        lowVoltage: [
+          { required: true, message: "亏电电压不能为空", trigger: "blur" }
+        ],
+        fullEndurance: [
+          { required: true, message: "满电续航不能为空", trigger: "blur" }
+        ],
+        createTime: [
+          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        ],
+        lowBatteryReminderSwitch: [
+          { required: true, message: "低电量提醒开关不能为空", trigger: "blur" }
+        ],
+        lowBatteryReminder: [
+          { required: true, message: "骑行低电量提醒值不能为空", trigger: "blur" }
+        ],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 当排序按钮被点击时触发 **/
+    onSortChange(column) {
+      if (column.order == null) {
+        this.queryParams.orderByColumn = defaultSort.prop;
+        this.queryParams.isAsc = defaultSort.order;
+      } else {
+        this.queryParams.orderByColumn = column.prop;
+        this.queryParams.isAsc = column.order;
+      }
+      this.getList();
+    },
+    /** 查询车辆型号列表 */
+    getList() {
+      this.loading = true;
+      listModel(this.queryParams).then(response => {
+        this.modelList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        areaId: null,
+        userId: null,
+        name: null,
+        fullVoltage: null,
+        lowVoltage: null,
+        fullEndurance: null,
+        createTime: null,
+        remark: null,
+        deleted: null,
+        lowBatteryReminderSwitch: false,
+        lowBatteryReminder: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加车辆型号";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getModel(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改车辆型号";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateModel(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addModel(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除车辆型号编号为"' + ids + '"的数据项？').then(function() {
+        return delModel(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('bst/model/export', {
+        ...this.queryParams
+      }, `model_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>
diff --git a/src/views/bst/suit/components/SuitEditDialog.vue b/src/views/bst/suit/components/SuitEditDialog.vue
new file mode 100644
index 0000000..8025291
--- /dev/null
+++ b/src/views/bst/suit/components/SuitEditDialog.vue
@@ -0,0 +1,384 @@
+<template>
+  <el-dialog 
+    :title="title" 
+    :visible.sync="dialogVisible" 
+    width="800px" 
+    append-to-body 
+    :close-on-click-modal="false"
+    @open="handleOpen"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small" v-loading="loading">
+      <el-row :gutter="10">
+        <form-col :span="span"  label="运营商" prop="userId">
+          <user-input v-model="form.userId" :text.sync="form.userName" :disabled="!checkRole([RoleKeys.ADMIN])"/>
+        </form-col>
+        <form-col :span="span"  label="套餐名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入套餐名称" />
+        </form-col>
+        <form-col :span="span"  label="预存金额" prop="depositAmount">
+          <el-input v-model="form.depositAmount" placeholder="请输入预存金额" type="number">
+            <template slot="append">元</template>
+          </el-input>
+        </form-col>
+        <form-col :span="span"  label="免费时长" prop="freeRideTime">
+          <el-input v-model="form.freeRideTime" placeholder="请输入免费时长(分钟)">
+            <template slot="append">分钟</template>
+          </el-input>
+        </form-col>
+        <form-col :span="span"  label="显示顺序" prop="orderNum">
+          <el-input-number v-model="form.orderNum" placeholder="请输入显示顺序" controls-position="right" :min="0"  style="width: 100%;" />
+        </form-col>
+        <form-col :span="span"  label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in dict.type.suit_status"
+              :key="dict.value"
+              :label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </form-col>
+        <form-col :span="24"  label="说明" prop="instructions">
+          <el-input v-model="form.instructions" type="textarea" placeholder="请输入内容" maxlength="1000" show-word-limit :autosize="{ minRows: 3, maxRows: 10 }"/>
+        </form-col>
+        <form-col :span="span"  label="租赁单位" prop="rentalUnit">
+          <el-select v-model="form.rentalUnit" placeholder="请选择租赁单位" style="width: 100%;">
+            <el-option
+              v-for="dict in dict.type.suit_rental_unit"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </form-col>
+        <form-col :span="span"  label="计费方式" prop="ridingRule">
+          <el-select v-model="form.ridingRule" placeholder="请选择计费方式" style="width: 100%;" >
+            <el-option
+              v-for="dict in dict.type.suit_riding_rule"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </form-col>
+        <collapse-panel title="计费规则" :value="true">
+          <template v-if="form.ridingRule === SuitRidingRule.START && form.startRule">
+            在
+            <el-input-number
+              v-model="form.startRule.startingTime"
+              placeholder="起步时间"
+              :min="0"
+              :precision="1" 
+              controls-position="right"
+              style="width: 120px;"
+            />
+            {{unitLabel(form.rentalUnit)}}以内，起步价
+            <el-input-number 
+              v-model="form.startRule.startingPrice"
+              placeholder="起步价"
+              type="number"
+              controls-position="right"
+              style="width: 120px;"
+            />
+            元；<br/>超出起步时间后，超出的时间每
+            <el-input-number
+              v-model="form.startRule.timeoutTime"
+              placeholder="超时时间"
+              type="number"
+              controls-position="right"
+              style="width: 120px;"
+            />
+            {{unitLabel(form.rentalUnit)}}
+            <el-input-number
+              v-model="form.startRule.timeoutPrice"
+              placeholder="超时价格"
+              type="number"
+              controls-position="right"
+              style="width: 120px;"
+            />
+            元，不满{{form.startRule.timeoutTime}}{{unitLabel(form.rentalUnit)}}，按{{form.startRule.timeoutTime}}{{unitLabel(form.rentalUnit)}}计算。
+          </template>
+          <template v-else-if="form.ridingRule === SuitRidingRule.INTERVAL && form.intervalRule">
+            <div v-for="(item, index) in form.intervalRule" :key="index">
+              在
+              <el-input-number
+                :value="startTime(index)" 
+                controls-position="right"
+                style="width: 120px;"
+                placeholder="开始"
+                disabled
+                :precision="1"
+              />
+              <template v-if="index < form.intervalRule.length - 1">
+                ~
+                <el-input-number
+                  v-model="item.end"
+                controls-position="right"
+                style="width: 120px;"
+                placeholder="结束"
+                :min="minEnd(index)"
+                :max="maxEnd(index)"
+                :precision="1"
+              />
+              {{unitLabel(form.rentalUnit)}}之间，
+              </template>
+              <template v-else>
+                之后，
+              </template>
+              每
+              <el-input-number
+                v-model="item.eachUnit"
+                controls-position="right" 
+                style="width: 120px;"
+                placeholder="间隔"
+                :min="0.1"
+                :precision="1"
+                :max="maxEachUnit(index)"
+              />
+              {{unitLabel(form.rentalUnit)}}收费
+              <el-input-number
+                v-model="item.fee"
+                controls-position="right"
+                style="width: 120px;"
+                placeholder="价格"  
+                :precision="2"
+              />
+              元
+              <el-button type="primary" size="small" icon="el-icon-plus" plain @click="addRidingRule(index)" circle/>
+              <el-button type="danger" size="small" icon="el-icon-delete" plain @click="deleteRidingRule(index)" circle/>
+            </div>
+            <span>注：时长不含前面的时间。</span>
+          </template>
+        </collapse-panel>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getSuit, addSuit, updateSuit } from "@/api/bst/suit";
+import FormCol from "@/components/FormCol/index.vue";
+import UserInput from '@/components/Business/User/UserInput.vue';
+import { SuitRentalUnit, SuitRidingRule, SuitStatus, RoleKeys } from '@/utils/enums';
+import CollapsePanel from '@/components/CollapsePanel/index.vue';
+import { deepClone, dictLabel } from '@/utils';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'SuitEditDialog',
+  components: { FormCol, UserInput, CollapsePanel },
+  dicts: ['suit_status', 'suit_rental_unit', 'suit_riding_rule'],
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    id: {
+      type: [String, Number],
+      default: null
+    }
+  },
+  data() {
+    return {
+      SuitRentalUnit,
+      SuitRidingRule,
+      SuitStatus,
+      RoleKeys,
+      span: 12,
+      title: '',
+      form: {},
+      loading: false,
+      rules: {
+        userId: [
+          { required: true, message: "运营商不能为空", trigger: "change" }
+        ],
+        name: [
+          { required: true, message: "套餐名称不能为空", trigger: "blur" }
+        ],
+        status: [
+          { required: true, message: "状态不能为空", trigger: "change" }
+        ],
+        createTime: [
+          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        ],
+        freeRideTime: [
+          { required: true, message: "免费骑行时长(分钟)不能为空", trigger: "blur" }
+        ],
+        rentalUnit: [
+          { required: true, message: "租赁单位不能为空", trigger: "blur" }
+        ],
+        ridingRule: [
+          { required: true, message: "计费规则不能为空", trigger: "blur" }
+        ],
+        orderNum: [
+          { required: true, message: "显示顺序不能为空", trigger: "blur" }
+        ],
+        depositAmount: [
+          { required: true, message: "预存款不能为空", trigger: "blur" }
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['userId', 'nickName']),
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit('update:visible', val);
+      }
+    },
+    // 获取最小结束时间
+    minEnd() {
+      return (index) => {
+        if (index == 0) {
+          return 0;
+        }
+        return this.form.intervalRule[index - 1].end;
+      }
+    },
+    // 获取最大结束时间
+    maxEnd() {
+      return (index) => {
+        if (index >= this.form.intervalRule.length - 2 ) {
+          return 999999999;
+        } else {
+          return this.form.intervalRule[index + 1].end;
+        }
+      }
+    },
+    maxEachUnit() {
+      return (index) => {
+        if (index >= this.form.intervalRule.length - 1) {
+          return 999999999;
+        }
+        let item = this.form.intervalRule[index];
+        return item.end - item.start;
+      }
+    },
+    // 获取开始时间
+    startTime() {
+      return (index) => {
+        if (index == 0) {
+          return 0;
+        }
+        return this.form.intervalRule[index - 1].end;
+      }
+    },
+    unitLabel() {
+      return (value) => {
+        return dictLabel(this.dict.type.suit_rental_unit, value);
+      }
+    }
+  },
+  methods: {
+    // 添加计费规则
+    addRidingRule(index) {
+      let current = this.form.intervalRule[index];
+      this.form.intervalRule.splice(index + 1, 0, {
+        start: current.end,
+        end: current.end + 1,
+        eachUnit: 1,
+        fee: null,
+      });
+    },
+    // 删除计费规则
+    deleteRidingRule (index) {
+      if (this.form.intervalRule.length == 1) {
+        this.$modal.msgError("至少保留一条计费规则");
+        return;
+      }
+      this.form.intervalRule.splice(index, 1);
+    },
+    handleOpen() {
+      if (this.id == null) {
+        this.reset();
+        this.title = "添加套餐";
+      } else {
+        this.getDetail();
+        this.title = "修改套餐";
+      }
+    },
+    reset() {
+      this.form = {
+        id: null,
+        userId: this.userId,
+        name: null,
+        status: SuitStatus.NORMAL,
+        createTime: null,
+        freeRideTime: null,
+        rentalUnit: SuitRentalUnit.MINUTE,
+        ridingRule: SuitRidingRule.START,
+        startRule: {
+          startingTime: 60,
+          startingPrice: 5,
+          timeoutTime: 60,
+          timeoutPrice: 5
+        },
+        intervalRule: [
+          {
+            start: 0,
+            end: 1,
+            eachUnit: 1,
+            fee: null,
+          }
+        ],
+        instructions: null,
+        deleted: null,
+        orderNum: null,
+        depositAmount: null,
+        // vo
+        userName: this.nickName,
+      };
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.clearValidate();
+      });
+    },
+    getDetail() {
+      this.loading = true;  
+      getSuit(this.id).then(response => {
+        let data = response.data;
+        this.form = data;
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    submitForm() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          // 处理数据，将start和end字段特殊处理
+          let data = deepClone(this.form);
+          if (data.ridingRule === SuitRidingRule.INTERVAL) {
+            data.intervalRule.forEach((item,index) => {
+              if (index == 0) {
+                item.start = 0; 
+              } else if (index == data.intervalRule.length - 1) {
+                item.end = null;
+              } else {
+                item.start = data.intervalRule[index - 1].end;
+              }
+            });
+          }
+          const promise = this.form.id != null ? updateSuit(data) : addSuit(data);
+          promise.then(response => {
+            this.$modal.msgSuccess(this.form.id != null ? "修改成功" : "新增成功");
+            this.dialogVisible = false;
+            this.$emit('success');
+          });
+        }
+      });
+    },
+    cancel() {
+      this.dialogVisible = false;
+      this.reset();
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style> 
\ No newline at end of file
diff --git a/src/views/bst/suit/index.vue b/src/views/bst/suit/index.vue
new file mode 100644
index 0000000..45f6d5a
--- /dev/null
+++ b/src/views/bst/suit/index.vue
@@ -0,0 +1,296 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="运营商" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入运营商名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="套餐名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入套餐名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable @change="handleQuery">
+          <el-option
+            v-for="dict in dict.type.suit_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="计费规则" prop="ridingRule">
+        <el-input
+          v-model="queryParams.ridingRule"
+          placeholder="请输入计费规则"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="租赁单位" prop="rentalUnit">
+        <el-input
+          v-model="queryParams.rentalUnit"
+          placeholder="请输入租赁单位"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-has-permi="['bst:suit:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-has-permi="['bst:suit:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-has-permi="['bst:suit:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="suitList" @selection-change="handleSelectionChange" :default-sort="defaultSort"  @sort-change="onSortChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <template v-for="column of showColumns">
+        <el-table-column
+            :key="column.key"
+            :label="column.label"
+            :prop="column.key"
+            :align="column.align"
+            :min-width="column.minWidth"
+            :sort-orders="orderSorts"
+            :sortable="column.sortable"
+            :show-overflow-tooltip="column.overflow"
+            :width="column.width"
+        >
+          <template slot-scope="d">
+            <template v-if="column.key === 'id'">
+              {{d.row[column.key]}}
+            </template>
+            <template v-if="column.key === 'name'">
+              {{d.row[column.key]}}
+              <dict-tag :options="dict.type.suit_riding_rule" :value="d.row.ridingRule" size="mini"/>
+              <dict-tag :options="dict.type.suit_status" :value="d.row.status" size="mini" style="margin-left: 4px;"/>
+            </template>
+            <template v-else-if="column.key === 'rentalUnit'">
+              <dict-tag :options="dict.type.suit_rental_unit" :value="d.row[column.key]"/>
+            </template>
+            <template v-else-if="column.key === 'depositAmount'">
+              {{d.row.depositAmount | fix2 | dv}} 元
+            </template>
+            <template v-else-if="column.key === 'freeRideTime'">
+              {{d.row.freeRideTime | dv}} 分钟
+            </template>
+            <template v-else>
+              {{d.row[column.key]}}
+            </template>
+          </template>
+        </el-table-column>
+      </template>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-has-permi="['bst:suit:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-has-permi="['bst:suit:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <suit-edit-dialog
+      :visible.sync="open"
+      :id="row.id"
+      @success="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listSuit, delSuit } from "@/api/bst/suit";
+import { $showColumns } from '@/utils/mixins';
+import SuitEditDialog from '@/views/bst/suit/components/SuitEditDialog.vue';
+
+// 默认排序字段
+const defaultSort = {
+  prop: "createTime",
+  order: "descending"
+}
+
+export default {
+  name: "Suit",
+  mixins: [$showColumns],
+  dicts: ['suit_status', 'suit_rental_unit', 'suit_riding_rule'],
+  components: { SuitEditDialog },
+  data() {
+    return {
+      // 字段列表
+      columns: [
+        {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
+        {key: 'name', visible: true, label: '名称', minWidth: "200", sortable: true, overflow: false, align: 'left', width: null},
+        {key: 'userName', visible: true, label: '运营商', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'depositAmount', visible: true, label: '预存', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'rentalUnit', visible: true, label: '租赁单位', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'instructions', visible: true, label: '说明', minWidth: null, sortable: true, overflow: true, align: 'center', width: null},
+        {key: 'freeRideTime', visible: true, label: '免费时长', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'orderNum', visible: true, label: '排序', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+      ],
+      // 排序方式
+      orderSorts: ['ascending', 'descending', null],
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 套餐表格数据
+      suitList: [],
+      // 是否显示弹出层
+      open: false,
+      // 选中的id
+      row: {},
+      defaultSort,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        orderByColumn: defaultSort.prop,
+        isAsc: defaultSort.order,
+        id: null,
+        userId: null,
+        name: null,
+        status: null,
+        rentalUnit: null,
+        ridingRule: null,
+        deleted: null,
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 当排序按钮被点击时触发 **/
+    onSortChange(column) {
+      if (column.order == null) {
+        this.queryParams.orderByColumn = defaultSort.prop;
+        this.queryParams.isAsc = defaultSort.order;
+      } else {
+        this.queryParams.orderByColumn = column.prop;
+        this.queryParams.isAsc = column.order;
+      }
+      this.getList();
+    },
+    /** 查询套餐列表 */
+    getList() {
+      this.loading = true;
+      listSuit(this.queryParams).then(response => {
+        this.suitList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.row = {};
+      this.open = true;
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.row = row;
+      this.open = true;
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除套餐编号为"' + ids + '"的数据项？').then(function() {
+        return delSuit(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('bst/suit/export', {
+        ...this.queryParams
+      }, `suit_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>