#14062 Add vehicle options management

Strides-Admin/src/api/vehicles.js

@@ -0,0 +1,23 @@
+import {get, post, put, del} from '../http/http'
+
+const vehicles = {
+  getBrandsOptions(query) {
+    return get("vehicle-model/brands", {
+      brand: query
+    })
+  },
+  getVehicleModelsPage(params) {
+    return post("vehicle-model/pages", params)
+  },
+  addVehicleModel(data) {
+    return post("vehicle-model/details", data)
+  },
+  updateVehicleModel(data) {
+    return put("vehicle-model/details", data)
+  },
+  deleteVehicleModel(vehicleModelId) {
+    return del("vehicle-model/details/" + vehicleModelId)
+  }
+}
+
+export default vehicles;

Strides-Admin/src/router/SettingsRouter.js

@@ -32,6 +32,16 @@ export default {
         icon: 'sidebar-submenu-item',
         activeIcon: 'sidebar-submenu-item-active'
       }
+    },
+    {
+      path: '/system-settings/vehicle-models',
+      component: () => import('@/views/vehicle-model/index'),
+      name: 'system-vehicle-models',
+      meta: {
+        title: 'Vehicle Options',
+        icon: 'sidebar-submenu-item',
+        activeIcon: 'sidebar-submenu-item-active'
+      }
     }
   ]
 }

Strides-Admin/src/views/vehicle-model/detail.vue

@@ -0,0 +1,197 @@
+<template>
+  <el-dialog
+    :visible="visible"
+    custom-class="vehicle-dialog"
+    :title="isEdit ? 'EDIT MODEL' : 'ADD MODEL'"
+    :before-close="hideDialog"
+    :show-close="false"
+    :close-on-click-modal="false">
+    <el-form
+      ref="vicForm"
+      :model="form"
+      :rules="rules"
+      label-position="top"
+      class="vehicle-dialog-form">
+      <el-form-item
+        label="Brand:"
+        prop="name">
+        <el-autocomplete
+          class="add-input"
+          v-model="form.brand"
+          :trigger-on-focus="false"
+          :fetch-suggestions="getBrandOptions"
+          @select="onChangeBrand">
+          <template slot-scope="{ item }">
+            <div class="name">{{ item }}</div>
+          </template>
+        </el-autocomplete>
+      </el-form-item>
+      <el-form-item
+        label="Model:"
+        prop="name">
+        <el-input
+          class="add-input"
+          v-model="form.model"
+          maxlength="20"/>
+      </el-form-item>
+      <div class="flexcc" style="margin-top: 30px;">
+        <el-button
+          class="cancel-button"
+          @click="hideDialog">
+          BACK
+        </el-button>
+        <el-button
+          type="primary"
+          @click="onSave"
+          :loading="loading">
+          SAVE
+        </el-button>
+      </div>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import api from '../../api/vehicles.js';
+export default {
+  name: "DialogVehicleModel",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    item: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      isEdit: false,
+      loading: false,
+      form: {
+        vehicleModelId: "",
+        brand: "",
+        model: ""
+      },
+      rules: {
+        
+      }
+    };
+  },
+  watch: {
+    visible(news, old) {
+      if (news) {
+        this.init();
+        this.isEdit = this.item.vehicleModelId ? true : false;
+        if (this.isEdit) {
+          this.getModelInfo()
+        }
+        this.$nextTick(() => {
+          this.$refs.vicForm.clearValidate();
+        })
+      }
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    init() {
+      this.form = {
+        vehicleModelId: "",
+        brand: "",
+        model: ""
+      }
+      this.loading = false;
+    },
+    hideDialog(e, r) {
+      this.$emit("hide", r)
+    },
+    getBrandOptions(query, cb) {
+      if (query) {
+        api.getBrandsOptions(query).then(res => {
+          cb(res.data)
+        }).catch(err => {
+          this.$message({
+            message: error,
+            type: 'error'
+          })
+          cb([])
+        })
+      } else {
+        cb([])
+      }
+    },
+    onChangeBrand(content) {
+      console.log("选择品牌", content);
+      this.form.brand = content;
+    },
+    getModelInfo() {
+      this.form.vehicleModelId = this.item.vehicleModelId;
+      this.form.brand = this.item.brand;
+      this.form.model = this.item.model;
+    },
+    onSave() {
+      this.$refs['vicForm'].validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          this.isEdit ? this.updateModel() : this.createModel();
+        }
+      })
+    },
+    createModel() {
+      api.addVehicleModel(this.form).then(res => {
+        this.$message({
+          type: 'success',
+          message: "Add successfully"
+        });
+        this.hideDialog(true, true);
+      }).catch(err => {
+        this.loading = false;
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      });
+    },
+    updateModel() {
+      api.updateVehicleModel(this.form).then(res => {
+        this.$message({
+          type: 'success',
+          message: "Update successfully"
+        });
+        this.hideDialog(true, true);
+      }).catch(err => {
+        this.loading = false;
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      });
+    }
+  }
+}
+</script>
+
+<style>
+.vehicle-dialog {
+  width: 100%;
+  max-width: 450px;
+}
+
+.vehicle-dialog .el-dialog__body {
+  padding: 10px 20px 30px;
+}
+.vehicle-dialog .add-input {
+  width: 100%;
+  min-width: 150px;
+}
+.vehicle-dialog-form .el-form-item {
+  margin-bottom: 10px;
+}
+.vehicle-dialog-form .el-form-item .el-form-item__label {
+  padding: 0;
+  font-size: 13px;
+}
+</style>

Strides-Admin/src/views/vehicle-model/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container filter-view">
+      <el-select
+        class="filter-view-item"
+        v-model="filter.pageVo.brand"
+        placeholder="Brand"
+        @change="toSearch"
+        clearable>
+        <el-option
+          v-for="item in brandOptions"
+          :key="item"
+          :label="item"
+          :value="item" />
+      </el-select>
+      <div class="filter-flex-button">
+        <el-button
+          @click="onClickAdd"
+          icon="el-icon-plus"
+          type="primary">
+          Create
+        </el-button>
+      </div>
+    </div>
+    <el-table
+      v-loading="table.loading"
+      :data="table.list"
+      class="no-border"
+      style="width: 100%;">
+      <el-table-column
+        align="center"
+        label="Brand"
+        prop="brand"
+        min-width="120"/>
+      <el-table-column
+        align="center"
+        label="Model"
+        prop="model"
+        min-width="120"/>
+      <el-table-column
+        align="center"
+        label="No. of Users"
+        prop="userCount"
+        min-width="130"/>
+      <el-table-column
+        align="center"
+        label="Action"
+        min-width="120"
+        v-if="!$route.meta.onlyView">
+        <template slot-scope="{ row }">
+          <TableAction
+            :showDel="row.userCount == 0"
+            @edit="onClickEdit(row)"
+            @delete="onClickDelete(row)"/>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="right">
+      <pagination
+        v-show="table.total > 0"
+        :total="table.total"
+        :page.sync="filter.pageNo"
+        :limit.sync="filter.pageSize"
+        @pagination="getTableList" />
+    </div>
+    <detail
+      v-bind="action"
+      @hide="hideDialog"/>
+  </div>
+</template>
+
+<script>
+import api from '../../api/vehicles.js';
+import Pagination from '@/components/Pagination';
+import TableAction from '@/components/TableAction';
+import detail from './detail.vue';
+export default {
+  data() {
+    return {
+      filter: {
+        pageNo: 1,
+        pageSize: 10,
+        pageVo: {
+          brand: "",
+          model: "",
+          criteria: ""
+        }
+      },
+      table: {
+        list: [],
+        total: 0,
+        loading: false
+      },
+      brandOptions: [],
+      action: {
+        item: {},
+        visible: false
+      }
+    }
+  },
+  components: {detail,Pagination,TableAction},
+  created() {
+    this.toSearch();
+    this.getBrandOprions();
+  },
+  methods: {
+    toSearch() {
+      this.filter.pageNo = 1;
+      this.getTableList();
+    },
+    getBrandOprions() {
+      api.getBrandsOptions().then(res => {
+        if (res.data) {
+          this.brandOptions = res.data
+        }
+      }).catch(err => {
+        this.$message({
+          message: error,
+          type: 'error'
+        })
+      })
+    },
+    getTableList() {
+      this.table.loading = true;
+      api.getVehicleModelsPage(this.filter).then(res => {
+        if (res.data) {
+          this.table.total = res.total
+          this.table.list = res.data
+        } else {
+          this.table.total = 0
+          this.table.list = []
+        }
+      }).catch(err => {
+        this.$message({
+          type: "error",
+          message: err
+        })
+        this.table.total = 0
+        this.table.list = []
+      }).finally(() => {
+        this.table.loading = false;
+      })
+    },
+    onClickAdd() {
+      this.action.item = {};
+      this.action.visible = true;
+    },
+    onClickEdit(row) {
+      this.action.item = row;
+      this.action.visible = true;
+    },
+    onClickDelete(row) {
+      this.$confirm('Are you sure you want to delete this model?', 'Delete', {
+        confirmButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        type: 'warning'
+      }).then(res => {
+        this.deleteModel(row.vehicleModelId);
+      })
+    },
+    deleteModel(id) {
+      this.table.loading = true;
+      api.deleteVehicleModel(id).then(res => {
+        this.$message({
+          type: 'success',
+          message: "Delete success."
+        })
+        this.getTableList()
+      }).catch(err => {
+        this.table.loading = false;
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      })
+    },
+    hideDialog(e) {
+      this.action.id = "";
+      this.action.visible = false;
+      if (e) {
+        this.getTableList();
+      }
+    }
+  }
+}
+</script>
+
+<style>
+</style>