车辆保养项目管理

src/api/vehicle/upkeep/index.js

@@ -7,6 +7,36 @@ export function getAllUpkeepItem() {
   });
 }
 
+export function itemPage(param) {
+  return fetch({
+    url: '/vehicle/upkeep/item/page',
+    method: 'get',
+    params: param
+  })
+}
+
+export function itemAdd(param) {
+  return fetch({
+    url: '/vehicle/upkeep/item',
+    method: 'post',
+    params: param
+  })
+}
+export function itemEdit(param) {
+  return fetch({
+    url: '/vehicle/upkeep/item',
+    method: 'put',
+    params: param
+  })
+}
+
+export function itemDelete(id) {
+  return fetch({
+    url: '/vehicle/upkeep/item/' + id,
+    method: 'delete'
+  })
+}
+
 export function logPage(param) {
   return fetch({
     url: '/vehicle/upkeep/log/page',

src/router/index.js

@@ -211,6 +211,12 @@ export const asyncRouterMap = [{
     component: _import('branchCompany/stockApply/index'),
     name: '分公司股权信息管理',
     authority: 'branchCompany/stockApply'
+  },
+  {
+    path: 'vehicleUpkeepItem',
+    component: _import('vehicle/vehicleUpkeepItem/index'),
+    name: '车辆保养项目管理',
+    authority: 'vehicleUpkeepItem'
   }
   ]
 }, {

src/views/vehicle/vehicleUpkeepItem/index.vue

+<template>
+  <div class="app-container calendar-list-container">
+    <div class="filter-container">
+      <el-button class="filter-item" v-if="vehicleUpkeepItem_btn_add" @click="handleCreate"
+                 type="primary" icon="edit">添加</el-button>
+    </div>
+    <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row
+              style="width: 100%">
+      <el-table-column align="center" label="保养项目" width="300">
+        <template scope="scope">
+          <span>{{scope.row.name}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="操作" width="150">
+        <template scope="scope">
+          <el-button v-if="vehicleUpkeepItem_btn_edit" size="small" type="success" @click="handleUpdate(scope.row)">编辑
+          </el-button>
+          <el-button v-if="vehicleUpkeepItem_btn_del" size="small" type="danger" @click="handleDelete(scope.row)">删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div v-show="!listLoading" class="pagination-container">
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                     :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
+                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
+    </div>
+
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
+        <el-form-item label="保养项目" prop="name">
+          <el-input v-model="form.name" placeholder="请输入保养项目"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel('form')">取 消</el-button>
+        <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>
+        <el-button v-else type="primary" @click="update('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import {
+    itemPage,
+    itemAdd,
+    itemEdit,
+    itemDelete
+  } from '../../../api/vehicle/upkeep';
+
+  import { mapGetters } from 'vuex';
+
+  export default {
+    name: 'vehicleUpkeepItem',
+    data() {
+      return {
+        form: {
+          id: null,
+          name: null
+        },
+        rules: {
+          name: [
+            {
+              required: true,
+              message: '请输入保养项目',
+              trigger: 'blur'
+            }
+          ]
+        },
+        list: null,
+        total: null,
+        listLoading: true,
+        listQuery: {
+          page: 1,
+          limit: 20
+        },
+        tableKey: 0,
+        vehicleUpkeepItem_btn_add: false,
+        vehicleUpkeepItem_btn_edit: false,
+        vehicleUpkeepItem_btn_del: false,
+        textMap: {
+          update: '编辑',
+          create: '创建'
+        },
+        dialogFormVisible: false,
+        dialogStatus: ''
+      }
+    },
+    created() {
+      this.getList();
+      this.vehicleUpkeepItem_btn_add = this.elements['vehicleUpkeepItem:btn_add'];
+      this.vehicleUpkeepItem_btn_edit = this.elements['vehicleUpkeepItem:btn_edit'];
+      this.vehicleUpkeepItem_btn_del = this.elements['vehicleUpkeepItem:btn_del'];
+    },
+    computed: {
+      ...mapGetters(['elements'])
+    },
+    methods: {
+      handleCreate() {
+        // 打开添加dialog
+        this.cleanForm();
+        this.dialogStatus = 'create';
+        this.dialogFormVisible = true;
+      },
+      create(formName) {
+        const set = this.$refs;
+        set[formName].validate(valid => {
+          if (valid) {
+            itemAdd(this.form).then(() => {
+              this.dialogFormVisible = false;
+              this.getList();
+              this.$notify({
+                title: '成功',
+                message: '创建成功',
+                type: 'success',
+                duration: 2000
+              });
+            })
+          } else {
+            return false;
+          }
+        });
+      },
+      handleUpdate(row) {
+        // 打开编辑dialog
+        this.cleanForm();
+        this.form.id = row.id;
+        this.form.name = row.name;
+        this.dialogStatus = 'update';
+        this.dialogFormVisible = true;
+      },
+      update(formName) {
+        const set = this.$refs;
+        set[formName].validate(valid => {
+          if (valid) {
+            itemEdit(this.form).then(() => {
+              this.dialogFormVisible = false;
+              this.getList();
+              this.$notify({
+                title: '成功',
+                message: '修改成功',
+                type: 'success',
+                duration: 2000
+              });
+            });
+          } else {
+            return false;
+          }
+        });
+      },
+      cancel(formName) {
+        this.cleanForm();
+        this.dialogFormVisible = false;
+        this.$refs[formName].resetFields();
+      },
+      handleDelete(row) {
+        // 删除
+        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {
+            itemDelete(row.id)
+              .then(() => {
+                this.$notify({
+                  title: '成功',
+                  message: '删除成功',
+                  type: 'success',
+                  duration: 2000
+                });
+                const index = this.list.indexOf(row);
+                this.list.splice(index, 1);
+              });
+          });
+      },
+      cleanForm() {
+        this.form = {
+          id: null,
+          name: null
+        }
+      },
+      handleFilter() {
+        this.getList();
+      },
+      getList() {
+        this.listLoading = true;
+        itemPage(this.listQuery).then(response => {
+          this.list = response.data.list;
+          this.total = response.data.total;
+          this.listLoading = false;
+        });
+      },
+      handleSizeChange(val) {
+        this.listQuery.limit = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.listQuery.page = val;
+        this.getList();
+      }
+    }
+  }
+</script>