车辆管理：增加预警信息模块

src/api/vehicle/vehicleWarningMsg/index.js

+import fetch from 'utils/fetch';
+
+
+export function page(query) {
+  return fetch({
+    url: '/vehicle/vehicleWarningMsg/page',
+    method: 'get',
+    params: {
+      queryVehicleWarningMsgVoJson: JSON.stringify(query)
+    }
+  });
+}
+
+
+export function getObj(id) {
+  return fetch({
+    url: '/vehicle/vehicleWarningMsg/' + id,
+    method: 'get'
+  });
+}
+
+export function addObj(obj) {
+  return fetch({
+    url: '/vehicle/vehicleWarningMsg',
+    method: 'post',
+    data: obj
+  });
+}
+
+export function dealObj(id) {
+  return fetch({
+    url: '/vehicle/vehicleWarningMsg/deal/' + id,
+    method: 'put'
+  });
+}

src/router/index.js

@@ -195,8 +195,14 @@ export const asyncRouterMap = [{
       {
         path: 'bookRecord',
         component: _import('vehicle/bookRecord/index'),
-        name: '车辆信息管理',
+        name: '车辆申请管理',
         authority: 'bookRecord'
+      },
+      {
+        path: 'vehicleWarningMsg',
+        component: _import('vehicle/vehicleWarningMsg/index'),
+        name: '车辆预警消息',
+        authority: 'vehicleWarningMsg'
       }
     ]
   }

src/store/getters.js

@@ -38,6 +38,7 @@ const getters = {
     };
   },
   accompanyItemTypeAndCode: state => state.baseInfo.accompanyItemTypeAndCode,
+  vehicleWarningMsgType: state => state.baseInfo.vehicleWarningMsgType,
   vehicleStatus: state => state.baseInfo.vehicleStatusAndCode,
   bookRecordStatus: state => state.baseInfo.bookRecordStatusAndCode,
   getAllCompany: state => state.baseInfo.codeAndBranchCompany,

src/store/modules/baseInfo.js

@@ -36,6 +36,20 @@ const baseInfo = {
     vehicleConstants: {},
     allAccItem: {},
     allAccItemIdAndName: {},
+    vehicleWarningMsgType: {
+      1: {
+        code: 1,
+        val: '汽车保养提醒'
+      },
+      2: {
+        code: 2,
+        val: '汽车维修提醒'
+      },
+      3: {
+        code: 3,
+        val: '自定义'
+      }
+    },
     accompanyItemTypeAndCode: {
       1: {
         code: 1,

src/views/vehicle/vehicleWarningMsg/index.vue

+<template>
+  <div class="app-container calendar-list-container">
+    <div class="filter-container" ref="filter-container">
+      <el-form :rules="rules4Query" ref="queryForm" :inline="inline" :model="listQuery" label-width="100px">
+            <el-form-item label="车辆编码">
+              <el-input v-model="listQuery.vehicleCode" placeholder="请输入车辆编码"></el-input>
+            </el-form-item>
+            <el-form-item label="车牌号">
+              <el-input v-model="listQuery.numberPlate" placeholder="请输入车牌号"></el-input>
+            </el-form-item>
+            <el-form-item label="预警消息类型">
+              <el-select class="filter-item" v-model="listQuery.type" placeholder="请选择预警消息类型">
+                <el-option :key="undefined" label="无" :value="undefined"></el-option>
+                <el-option v-for="(val, key, index) in vehicleWarningMsgType " :key="val.code" :label="val.val"
+                           :value="val.code"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
+            <el-button class="filter-item" v-if="vehicle_warning_msg_btn_add" style="margin-left: 10px;"
+                       @click="handleCreate"
+                       type="primary" icon="edit">添加
+            </el-button>
+      </el-form>
+
+    </div>
+
+
+    <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row
+              style="width: 100%">
+
+      <el-table-column width="100" align="center" label="车辆编码">
+        <template scope="scope">
+          <span>{{scope.row.vehicleCode}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="120" align="center" label="请输入车牌号">
+        <template scope="scope">
+          <span>{{scope.row.numberPlate}}</span>
+        </template>
+      </el-table-column>
+
+
+      <el-table-column width="150" align="center" label="预警消息类型">
+        <template scope="scope">
+          <span>{{getTypeName(scope.row.type)}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="300" align="center" label="预警消息内容">
+        <template scope="scope">
+          <span>{{scope.row.msg}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="200" align="center" label="备注">
+        <template scope="scope">
+          <span>{{scope.row.remark}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="180" align="center" label="创建时间">
+        <template scope="scope">
+          <span>{{scope.row.createTime}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="操作" width="100">
+        <template scope="scope">
+          <el-button v-if="vehicle_warning_msg_btn_deal " size="small" type="success" @click="handleDeal(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="120px">
+        <el-form-item label="消息内容" prop="remark">
+          <el-input type="textarea" :rows="5" v-model="form.msg" placeholder="请输入消息内容"></el-input>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input type="textarea" :rows="5" v-model="form.remark" placeholder="请输入备注信息"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel('form4Apply')">取 消</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 {
+    page,
+    addObj,
+    getObj,
+    dealObj
+  } from 'api/vehicle/vehicleWarningMsg/';
+
+
+
+  import rsCode from '../../../utils/rsCode';
+
+  import {mapGetters} from 'vuex';
+
+
+  export default {
+    name: 'vehicleInfo',
+    components: {},
+    data() {
+      return {
+        form: {
+          msg: undefined,
+          remark: undefined
+        },
+        rules: {
+          name: [
+            {
+              type: 'string',
+              required: true,
+              message: '请输入消息内容',
+              trigger: 'blur'
+            },
+            {
+              min: 0,
+              max: 2000,
+              message: '长度小于 2000 个字符',
+              trigger: 'blur'
+            }
+          ],
+          remark: [
+            {
+              min: 0,
+              max: 2000,
+              message: '长度小于 2000 个字符',
+              trigger: 'blur'
+            }
+          ]
+        },
+        list: null,
+        total: null,
+        listLoading: true,
+        listQuery: {
+          page: 1,
+          limit: 10,
+          numberPlate: undefined,
+          vehicleCode: undefined,
+          type: undefined
+        },
+        rules4Query: undefined,
+        dialogFormVisible: false,
+        inline: true,
+        textMap: {
+          create: '创建'
+        },
+        dialogStatus: undefined,
+        tableKey: 0,
+        vehicle_warning_msg_btn_add: false,
+        vehicle_warning_msg_btn_deal: false
+      }
+    },
+    created() {
+      this.getList();
+
+      this.vehicle_warning_msg_btn_add = this.elements['vehicleWarningMsg:btn_add'];
+      this.vehicle_warning_msg_btn_deal = this.elements['vehicleWarningMsg:btn_deal'];
+    },
+    computed: {
+      ...mapGetters([
+        'elements',
+        'vehicleWarningMsgType'
+      ])
+    },
+    methods: {
+      getTypeName: function(type) {
+        if (this.$utils.isEmpty(this.vehicleWarningMsgType[type])) {
+          return '未知';
+        }
+        return this.vehicleWarningMsgType[type].val;
+      },
+      getList() {
+        this.listLoading = true;
+        page(this.listQuery).then(response => {
+          let totalCountRs = undefined;
+          let listRs = undefined;
+          if (!this.$utils.isEmpty(response.data.data) && this.$utils.isInteger(response.data.totalCount)) {
+            listRs = response.data.data;
+            totalCountRs = response.data.totalCount;
+          }
+          this.listLoading = false;
+          this.list = listRs;
+          this.total = totalCountRs;
+        })
+      },
+      handleFilter() {
+        this.$refs.queryForm.validate(valid => {
+          if (valid) {
+            this.getList();
+          } else {
+            return false;
+          }
+        });
+      },
+      handleSizeChange(val) {
+        this.listQuery.limit = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.listQuery.page = val;
+        this.getList();
+      },
+      handleCreate() {
+        this.resetTemp();
+        this.dialogStatus = 'create';
+        this.dialogFormVisible = true;
+      },
+      handleDeal(row) {
+        this.$confirm('此操作不可恢复, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {
+            dealObj(row.id)
+              .then(() => {
+                this.$notify({
+                  title: '成功',
+                  message: '处理成功',
+                  type: 'success',
+                  duration: 2000
+                });
+                const index = this.list.indexOf(row);
+                this.list.splice(index, 1);
+              });
+          });
+      },
+      create(formName) {
+        const set = this.$refs;
+        set[formName].validate(valid => {
+          if (valid) {
+            addObj(this.form)
+              .then(response => {
+                if (response.code === rsCode.RS_CODE_SUC) {
+                  this.dialogFormVisible = false;
+                  this.getList();
+                  this.$notify({
+                    title: '成功',
+                    message: '创建成功',
+                    type: 'success',
+                    duration: 2000
+                  });
+                } else {
+                  this.$notify({
+                    title: '失败',
+                    message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
+                    type: 'error',
+                    duration: 2000
+                  });
+                }
+              });
+          } else {
+            return false;
+          }
+        });
+      },
+      cancel(formName) {
+        this.dialogFormVisible = false;
+        this.$refs[formName].resetFields();
+      },
+      resetTemp() {
+        this.form = {
+          msg: undefined,
+          remark: undefined
+        };
+      }
+    }
+  }
+</script>