Skip to content

C
cdsf-static-bg
Commit cdfb2018 by 姜雷
Options

添加用车管理页面

parent 21b27075
Showing with 539 additions and 64 deletions
src/api/management/publicCar.js 0 → 100644
import fetch from '@/api/fetch';
export const fetchApplyList = entity =>
fetch({
url: '/publicCar/teacherAppoCar4Page',
method: 'post',
data: entity,
});
export const dealApply = entity =>
fetch({
url: '/publicCar/teacherAppoCar4Deal',
method: 'post',
data: entity,
});
src/api/management/user.js
import fetch from '@/api/fetch';
export const fetchUserList = entity =>
export const fetchTeacherList = entity =>
fetch({
url: '/admin/admin4Page',
url: '/teacher/teacher4Page',
method: 'post',
data: entity,
});
export const addTeacher = entity =>
fetch({
url: '/teacher/teacher4Add',
method: 'post',
data: entity,
});
export const updateTeacher = entity =>
fetch({
url: '/teacher/teacher4Update',
method: 'post',
data: entity,
});
export const toggleTeacherStatus = entity =>
fetch({
url: '/teacher/teacher4Auther',
method: 'post',
data: entity,
});
src/api/user/login.js
......@@ -10,8 +10,8 @@ export const login = entity =>
// 登出
export const logout = () =>
fetch({
method: 'post',
data: {},
url: '/login/manager/appLoginOut',
method: 'get',
});
// 修改密码
export const changePwd = entity =>
......
src/config/index.js
......@@ -14,7 +14,18 @@ export const accountStatusOptions = [
value: 1,
},
];
export const sexOptions = [
{
label: '男',
value: 1,
},
{
label: '女',
value: 2,
},
];
export default {
...constants,
accountStatusOptions,
sexOptions,
};
src/containers/management/publicCar/mutation-types.js 0 → 100644
export const GET_PUBLIC_CAR_LIST = 'GET_PUBLIC_CAR_LIST';
src/containers/management/publicCar/publicCar.js 0 → 100644
import pagination from '../../../store/modules/pagination';
import { fetchApplyList } from '@/api/management/publicCar';
import { GET_PUBLIC_CAR_LIST } from './mutation-types';
const state = {
list: [],
};
const getters = {
list: state => state.list,
};
const actions = {
fetchList({ dispatch, state, commit }, entity) {
return fetchApplyList({
...state.pagination,
...entity,
}).then(res => {
const { list, ...pagination } = res.data;
dispatch('updatePagination', pagination);
commit(GET_PUBLIC_CAR_LIST, list);
});
},
};
const mutations = {
[GET_PUBLIC_CAR_LIST](state, list) {
state.list = list;
},
};
export default {
namespaced: true,
modules: {
pagination,
},
state,
getters,
actions,
mutations,
};
src/containers/management/publicCar/publicCar.vue
<template>
<div>publicCar</div>
<div class="manage-publicCar main-wrap">
<el-form class="search-bar">
<div class="grid-content">
<el-input v-model.trim="filters.name" placeholder="请输入姓名" clearable></el-input>
</div>
<div class="grid-content">
<el-input v-model.trim="filters.department" placeholder="请输入科室" clearable></el-input>
</div>
<div class="grid-content">
<el-select v-model="filters.dealResult" filterable clearable placeholder="处理状态">
<el-option v-for="item in dealResultOptions" :key="item.id" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<div class="grid-content">
<el-date-picker v-model="filters.createDate" type="datetime" placeholder="请输入申请开始时间" clearable>
</el-date-picker>
</div>
<div class="grid-content">
<el-date-picker v-model="filters.endDate" type="datetime" placeholder="请输入用车结束时间" clearable>
</el-date-picker>
</div>
<el-button type="primary" icon="el-icon-search" @click="searchList">搜索</el-button>
</el-form>
<div class="tabel-wrap">
<el-table border v-loading="loading" :data="list" style="width: 100%">
<el-table-column type="index" label="序号" width="50">
</el-table-column>
<el-table-column prop="name" label="申请人" min-width="80">
</el-table-column>
<el-table-column prop="createDate" :formatter="(c,r,val) => $formatDate(new Date(val),'yyyy-MM-dd')" label="申请时间" min-width="80">
</el-table-column>
<el-table-column prop="department" label="用车部门" min-width="100">
</el-table-column>
<el-table-column prop="categoryName" label="用车类型" min-width="100">
</el-table-column>
<el-table-column prop="userCount" label="用车人数" min-width="80">
</el-table-column>
<el-table-column prop="dealResult" :formatter="getResultValue" label="处理状态" min-width="80">
</el-table-column>
<el-table-column fixed="right" label="操作" min-width="130" align="center">
<template slot-scope="scope">
<template v-if="scope.row.dealResult == 1">
<el-button type="primary" size="mini" class="operationBtnWidth" @click="showEditDialog(1, scope)">处理</el-button>
</template>
<template v-else-if="scope.row.dealResult == 2">
<el-button type="primary" size="mini" class="operationBtnWidth" @click="showEditDialog(0, scope)">详情</el-button>
<el-button type="primary" size="mini" class="operationBtnWidth" @click="showEditDialog(0, scope)">打印</el-button>
</template>
<template v-else>
<el-button type="primary" size="mini" class="operationBtnWidth" @click="showEditDialog(0, scope)">详情</el-button>
</template>
</template>
</el-table-column>
</el-table>
<el-pagination layout="prev, pager, next" :current-page="pagination.pageNum" :page-size="pagination.pageSize" :total="pagination.total" @current-change="changePage">
</el-pagination>
</div>
<drag-dialog :title="editType ? '处理' : '详情'" :visible.sync="dialogEditVisible" :before-close="resetEditDialog" width="70%">
<el-form class="editForm" :disabled="loading">
<el-form-item class="col-line-2" label="用车部门" label-width="100px">
<span>{{selected.department}}</span>
</el-form-item>
<el-form-item class="col-line-2" label="用车申请时间" label-width="100px">
<span>{{selected.createDate}}</span>
</el-form-item>
<el-form-item class="col-line-2" label="申请人" label-width="100px">
<span>{{selected.name}}</span>
</el-form-item>
<el-form-item class="col-line-2" label="用车人数" label-width="100px">
<span>{{selected.userCount}}</span>
</el-form-item>
<el-form-item label="用车类型" label-width="100px">
<span>{{selected.categoryName}}</span>
</el-form-item>
<el-form-item label="用车起止时间" label-width="100px">
<span>{{selected.beginDate}}</span>
<span>{{selected.endDate}}</span>
</el-form-item>
<el-form-item label="用车详细路线" label-width="100px">
<span>{{selected.lineDescription}}</span>
</el-form-item>
<el-form-item class="col-line-2" label="派车人" label-width="100px">
<span>{{selected.dealName}}</span>
</el-form-item>
<el-form-item class="col-line-2" label="派车车牌" label-width="100px">
<span>{{selected.carPlate}}</span>
</el-form-item>
<el-form-item class="col-line-3" label="出车公里数" label-width="100px">
<span>{{selected.startKilometers}}</span>
</el-form-item>
<el-form-item class="col-line-3" label="收车公里数" label-width="100px">
<span>{{selected.stopKilometers}}</span>
</el-form-item>
<el-form-item class="col-line-3" label="实际公里数" label-width="100px">
<span>{{selected.trueKilometers}}</span>
</el-form-item>
<el-form-item label="资金来源" label-width="100px">
<span>{{selected.priceSource}}</span>
</el-form-item>
<el-form-item label="用车单价" label-width="100px">
<span>{{selected.price}}</span>
<span>{{selected.totalPrice}}</span>
</el-form-item>
<el-form-item label-width="100px">
<el-radio>同意</el-radio>
<el-radio>不同意</el-radio>
<span>{{selected.dealOpinion}}</span>
</el-form-item>
</el-form>
<div v-if="editType" slot="footer" class="dialog-footer">
<el-button @click="resetEditDialog">取 消</el-button>
<el-button type="primary" @click="dealApplyHandle">确 定</el-button>
</div>
<div v-else slot="footer" class="dialog-footer">
<el-button type="primary" @click="resetEditDialog">确 定</el-button>
</div>
</drag-dialog>
</div>
</template>
<script>
import listMixin from '@/mixin/listPage.js';
import { mapGetters, mapActions } from 'vuex';
import store from './store.js';
import { dealApply } from '@/api/management/publicCar.js';
export default {
beforeRouteEnter(to, from, next) {
store.install();
next();
},
mixins: [listMixin],
data() {
return {
filters: {
name: '',
department: '',
dealResult: '',
createDate: '',
endDate: '',
},
selected: {},
//1处理中 2已同意 3未同意
dealResultOptions: [
{
label: '处理中',
value: 1,
},
{
label: '已同意',
value: 2,
},
{
label: '未同意',
value: 3,
},
],
};
},
computed: {
...mapGetters('management/publicCar', ['list', 'pagination']),
},
methods: {
...mapActions('management/publicCar', ['fetchList']),
getResultValue(c, r, val) {
let item = this.dealResultOptions.find(item => item.value == val);
return item ? item.label : val;
},
initSelected() {
this.selected = {
userId: '',
name: '',
department: '',
duty: '',
title: '',
sex: '',
birthday: '',
jobNumber: '',
cellphone: '',
};
},
showEditDialog(type, data) {
this.editType = type;
if (type) {
this.selected = {
id: data.row.id,
department: data.row.department,
createDate: data.row.createDate,
name: data.row.name,
userCount: data.row.userCount,
categoryName: data.row.categoryName,
beginDate: data.row.beginDate,
endDate: data.row.endDate,
lineDescription: data.row.lineDescription,
dealName: data.row.dealName,
carPlate: data.row.carPlate,
startKilometers: data.row.startKilometers,
stopKilometers: data.row.stopKilometers,
trueKilometers: data.row.trueKilometers,
priceSource: data.row.priceSource,
price: data.row.price,
totalPrice: data.row.totalPrice,
dealResult: data.row.dealResult,
dealOpinion: data.row.dealOpinion,
};
} else {
this.initSelected();
}
this.dialogEditVisible = true;
},
dealApplyHandle() {
dealApply();
},
},
};
</script>
<style lang="scss">
.manage-publicCar {
.editForm {
display: flex;
}
.col-line-2 {
width: 45%;
}
}
</style>
src/containers/management/publicCar/store.js 0 → 100644
import store from '@/store/index';
import publicCar from './publicCar';
export default {
install() {
if (!store.state.management) {
store.registerModule(['management'], {
namespaced: true,
});
}
if (!store.state.management.publicCar) {
store.registerModule(['management', 'publicCar'], publicCar);
}
},
uninstall() {
store.unregisterModule(['management', 'publicCar']);
},
};
src/containers/management/user/store.js
......@@ -8,7 +8,9 @@ export default {
namespaced: true,
});
}
if (!store.state.management.user) {
store.registerModule(['management', 'user'], user);
}
},
uninstall() {
store.unregisterModule(['management', 'user']);
......
src/containers/management/user/user.js
import pagination from '../../../store/modules/pagination';
import { fetchUserList } from '@/api/management/user';
import { fetchTeacherList } from '@/api/management/user';
import { GET_USER_LIST } from './mutation-types';
const state = {
......@@ -10,7 +10,7 @@ const getters = {
};
const actions = {
fetchUserList({ dispatch, state, commit }, entity) {
return fetchUserList({
return fetchTeacherList({
...state.pagination,
...entity,
}).then(res => {
......
src/containers/management/user/user.vue
<template>
<div class="account-manage main-wrap">
<div class="manage-account main-wrap">
<el-form class="search-bar">
<div class="grid-content">
<el-input v-model.trim="filters.name" placeholder="请输入姓名" clearable></el-input>
......@@ -13,42 +13,31 @@
</el-option>
</el-select>
</div>
<el-button type="primary" icon="el-icon-search" @click="searchUser">搜索</el-button>
<el-button v-if="$route.meta.buts.a1" class="margin-css" type="primary" icon="el-icon-upload" @click="addAction">新增</el-button>
<el-button type="primary" icon="el-icon-search" @click="searchList">搜索</el-button>
<el-button class="margin-css" type="primary" icon="el-icon-upload" @click="showEditDialog(0)">新增</el-button>
</el-form>
<div class="tabel-wrap">
<el-table border v-loading="loading" :data="userList" style="width: 100%">
<el-table-column type="index" label="序号" width="50">
</el-table-column>
<el-table-column prop="name" label="姓名" min-width="120">
<el-table-column prop="name" label="姓名" min-width="80">
</el-table-column>
<el-table-column prop="department" label="部门科室" min-width="120">
<el-table-column prop="department" label="部门科室" min-width="100">
</el-table-column>
<el-table-column prop="trueName" label="职务" min-width="120">
<el-table-column prop="duty" label="职务" min-width="100">
</el-table-column>
<el-table-column prop="trueName" label="职称" min-width="120">
<el-table-column prop="title" label="职称" min-width="80">
</el-table-column>
<el-table-column prop="trueName" label="性别" min-width="120">
<el-table-column prop="sex" :formatter="getSexValue" label="性别" min-width="50">
</el-table-column>
<el-table-column prop="trueName" label="出生年月" min-width="120">
<el-table-column prop="birthday" :formatter="(c,r,val) => $formatDate(new Date(val),'yyyy-MM-dd')" label="出生年月" min-width="80">
</el-table-column>
<el-table-column prop="trueName" label="手机号" min-width="120">
<el-table-column prop="cellphone" label="手机号" min-width="100">
</el-table-column>
<el-table-column fixed="right" label="操作" min-width="80" align="center">
<el-table-column fixed="right" label="操作" min-width="130" align="center">
<template slot-scope="scope">
<el-dropdown trigger="click">
<el-button type="primary" size="mini">
<i class="el-icon-setting"></i>
</el-button>
<el-dropdown-menu class="AccountIndex" slot="dropdown">
<el-dropdown-item>
<el-button type="primary" size="mini" class="operationBtnWidth" @click="editUser(scope)">修改</el-button>
</el-dropdown-item>
<el-dropdown-item>
<el-button type="danger" size="mini" class="operationBtnWidth" @click="freezeUser(scope)">账户冻结</el-button>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-button type="primary" size="mini" class="operationBtnWidth" @click="showEditDialog(1, scope)">修改</el-button>
<el-button type="primary" size="mini" class="operationBtnWidth" @click="toggleTeacherStatus(scope)">{{scope.row.isFrozen?'账户解冻':'账户冻结'}}</el-button>
</template>
</el-table-column>
</el-table>
......@@ -56,39 +45,59 @@
</el-pagination>
</div>
<!-- 新增/编辑账号 -->
<drag-dialog :title="editType ? '编辑账号' : '新增账号'" :visible.sync="dialogEditVisible" :before-close="resetEditDialog">
<el-form :disabled="loading">
<el-form-item label="运营商" label-width="200px">
<el-select v-model="selected.operatorId" @change="changeOperator" filterable clearable placeholder="请选择运营商">
<el-option v-for="item in operatorList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
<drag-dialog :title="editType ? '编辑账号' : '新增账号'" :visible.sync="dialogEditVisible" :before-close="resetEditDialog" width="70%">
<el-form class="editForm" :disabled="loading">
<el-form-item class="editItem" label="姓名" label-width="100px">
<el-input v-model.trim="selected.name" placeholder="请输入姓名" :maxlength="20" clearable></el-input>
</el-form-item>
<el-form-item label="校区" label-width="200px">
<el-select v-model="selected.campusId" @change="changeCampus" filterable clearable placeholder="请选择校区">
<el-option v-for="item in operatorAllCampusList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
<el-form-item class="editItem" label="部门科室" label-width="100px">
<el-input v-model.trim="selected.department" placeholder="请输入部门科室" :maxlength="20" clearable></el-input>
</el-form-item>
<el-form-item class="editItem" label="职务" label-width="100px">
<el-input v-model.trim="selected.duty" placeholder="请输入职务" :maxlength="20" clearable></el-input>
</el-form-item>
<el-form-item class="editItem" label="职称" label-width="100px">
<el-input v-model.trim="selected.title" placeholder="请输入职称" :maxlength="20" clearable></el-input>
</el-form-item>
<el-form-item class="editItem" label="性别" label-width="100px">
<el-radio v-for="(sex, index) in sexOptions" :key="index" v-model="selected.sex" :label="sex.value">{{sex.label}}</el-radio>
</el-form-item>
<el-form-item class="editItem" label="出生年月" label-width="100px">
<el-date-picker v-model="selected.birthday" type="date" placeholder="请输入出生年月" clearable>
</el-date-picker>
</el-form-item>
<el-form-item class="editItem" label="工号" label-width="100px">
<el-input v-model.trim="selected.jobNumber" placeholder="请输入工号" :maxlength="20" clearable></el-input>
</el-form-item>
<el-form-item class="editItem" label="手机号" label-width="100px">
<el-input v-model="selected.cellphone" ref="telInput" :maxlength="11" placeholder="请输入手机号" clearable></el-input>
</el-form-item>
</el-form>
<p class="psText">注：登陆运维端口帐号为系统自动生成4位随机数字帐号，初始密码与账号相同</p>
<div slot="footer" class="dialog-footer">
<el-button @click="resetEditDialog">取 消</el-button>
<el-button type="primary" @click="updateEditLocation">确 定</el-button>
<el-button type="primary" @click="updateTeacher">确 定</el-button>
</div>
</drag-dialog>
</div>
</template>
<script>
import listMixin from '@/mixin/listPage.js';
import { mapGetters, mapActions } from 'vuex';
import store from './store.js';
import {
addTeacher,
updateTeacher,
toggleTeacherStatus,
} from '@/api/management/user.js';
import { sexOptions } from '@/config';
export default {
beforeRouteEnter(to, from, next) {
store.install();
next();
},
mixins: [listMixin],
data() {
return {
filters: {
......@@ -96,8 +105,7 @@ export default {
department: '',
isFrozen: '',
},
editType: 0,
dialogEditVisible: false,
selected: {},
accountStatusOptions: [
{
label: '解冻',
......@@ -108,7 +116,7 @@ export default {
value: 1,
},
],
selected: {},
sexOptions: sexOptions,
};
},
computed: {
......@@ -116,6 +124,7 @@ export default {
...mapGetters(['loading']),
},
methods: {
...mapActions('management/user', { fetchList: 'fetchUserList' }),
initfilters() {
this.filters = {
name: '',
......@@ -123,29 +132,161 @@ export default {
isFrozen: '',
};
},
searchUser() {},
changePage(index) {
const filters = this.getFilters();
this.fetchAccountList({
...filters,
pageNum: index,
});
initSelected() {
this.selected = {
userId: '',
name: '',
department: '',
duty: '',
title: '',
sex: '',
birthday: '',
jobNumber: '',
cellphone: '',
};
},
getSexValue(c, r, val) {
let item = this.sexOptions.find(item => item.value == val);
return item ? item.label : val;
},
getFilters() {
let filters = {
...this.$getFilters(this.filters),
isFrozen: this.filters.isFrozen,
};
return filters;
},
showEditDialog(type, data) {
this.editType = type;
if (type) {
this.selected = {
id: data.row.id,
campusId: data.row.campusId,
campusName: data.row.campusName,
operatorId: data.row.operatorId,
operatorName: data.row.operatorName,
userId: data.row.userId,
name: data.row.name,
department: data.row.department,
duty: data.row.duty,
title: data.row.title,
sex: data.row.sex,
birthday: data.row.birthday,
jobNumber: data.row.jobNumber,
cellphone: data.row.cellphone,
};
} else {
this.selected = this.initSelected();
this.initSelected();
}
this.dialogEditVisible = true;
},
validateSelect() {
if (!this.selected.name) {
this.$message.error('请输入姓名！');
return;
}
if (!this.selected.department) {
this.$message.error('请输入部门科室！');
return;
}
if (!this.selected.duty) {
this.$message.error('请输入职务！');
return;
}
if (!this.selected.title) {
this.$message.error('请输入职称！');
return;
}
if (!this.selected.sex) {
this.$message.error('请输入性别！');
return;
}
if (!this.selected.birthday) {
this.$message.error('请输入出生年月！');
return;
}
return true;
},
formatCellphone(val) {
return val.replace(/\D/g, '');
},
updateCellphone(val) {
console.log(this.$refs.telInput);
// this.selected.cellphone = val.replace(/\D/g, '');
this.$refs.telInput.value = val.replace(/\D/g, '');
},
updateTeacher() {
if (!this.validateSelect()) {
return;
}
const entity = {
userId: this.selected.userId,
name: this.selected.name,
department: this.selected.department,
duty: this.selected.duty,
title: this.selected.title,
sex: this.selected.sex,
birthday: this.selected.birthday,
jobNumber: this.selected.jobNumber,
cellphone: this.selected.cellphone,
};
if (this.editType) {
updateTeacher(entity)
.then(res => {
this.fetchList();
this.resetEditDialog();
this.$message.success(res.msg);
})
.catch(err => {
this.$message.error(err.msg || '更新失败！');
});
} else {
addTeacher(entity)
.then(res => {
this.fetchList();
this.resetEditDialog();
this.$message.success(res.msg);
})
.catch(err => {
this.$message.error(err.msg || '新增失败！');
});
}
},
toggleTeacherStatus(data) {
this.$confirm(
`确认要${data.row.isFrozen ? '解冻' : '冻结'} ${data.row.name} 吗?`,
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
const entity = {
userId: data.row.userId,
isFrozen: data.row.isFrozen ? 0 : 1,
};
toggleTeacherStatus(entity)
.then(res => {
this.fetchList();
this.$message.success(res.msg);
})
.catch(err => {
this.$message.error('删除失败！');
});
})
.catch(action => {
console.log(action);
});
},
},
};
</script>
<style lang="scss">
.manage-account {
.editForm {
display: flex;
flex-wrap: wrap;
}
.editItem {
width: 45%;
}
}
</style>
src/containers/system/account/account.vue
......@@ -75,8 +75,7 @@
<el-input :value="selected.cellphone" @change="updateCellphone" type="number" placeholder="请输入手机号" clearable></el-input>
</el-form-item>
<el-form-item label="性别" label-width="200px">
<el-radio v-model="selected.sex" :label="1">男</el-radio>
<el-radio v-model="selected.sex" :label="2">女</el-radio>
<el-radio v-for="(sex, index) in sexOptions" :key="index" v-model="selected.sex" :label="sex.value">{{sex.label}}</el-radio>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
......@@ -115,6 +114,7 @@ import {
fetchUserMenuList,
updateUserAuthMenu,
} from '@/api/system/account';
import { sexOptions } from '@/config';
export default {
beforeRouteEnter(to, from, next) {
......@@ -132,6 +132,7 @@ export default {
accountStatusOptions: accountStatusOptions,
dialogAuthVisible: false,
menuList: [],
sexOptions: sexOptions,
};
},
computed: {
......@@ -154,7 +155,8 @@ export default {
};
},
getSexValue(c, r, val) {
return val == 1 ? '男' : '女';
let item = this.sexOptions.find(item => item.value == val);
return item ? item.label : val;
},
getStatusValue(c, r, val) {
let item = this.accountStatusOptions.find(item => item.value == val);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment