Skip to content

C
cdsf-static-bg
Commit 9e66a7f4 by 姜雷
Options

完善打印功能

parent 2f07cf9c
Showing with 405 additions and 137 deletions
src/containers/management/publicCar/publicCar.vue
......@@ -2,10 +2,10 @@
<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>
<el-input v-model.trim="filters.name" :maxlength="20" placeholder="请输入姓名" clearable></el-input>
</div>
<div class="grid-content">
<el-input v-model.trim="filters.department" placeholder="请输入科室" clearable></el-input>
<el-input v-model.trim="filters.department" :maxlength="20" placeholder="请输入科室" clearable></el-input>
</div>
<div class="grid-content">
<el-select v-model="filters.dealResult" filterable clearable placeholder="处理状态">
......@@ -33,7 +33,7 @@
</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 prop="categoryName" :formatter="getCategoryValue" label="用车类型" min-width="100">
</el-table-column>
<el-table-column prop="userCount" label="用车人数" min-width="80">
</el-table-column>
......@@ -46,7 +46,7 @@
</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>
<el-button type="primary" size="mini" class="operationBtnWidth" @click="showPrintDialog(scope)">打印</el-button>
</template>
<template v-else>
<el-button type="primary" size="mini" class="operationBtnWidth" @click="showEditDialog(0, scope)">详情</el-button>
......@@ -57,7 +57,7 @@
<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%">
<drag-dialog :title="editType ? '处理' : '详情'" :visible.sync="dialogEditVisible" :before-close="resetEditDialog" width="70%" top="5vh">
<el-form class="editForm" :disabled="loading">
<el-form-item class="col-line-2" label="用车部门" label-width="100px">
<span>{{selected.department}}</span>
......@@ -75,8 +75,7 @@
<span>{{selected.categoryName}}</span>
</el-form-item>
<el-form-item label="用车起止时间" label-width="100px">
<span>{{selected.beginDate}}</span>
<span>{{selected.endDate}}</span>
<span>{{selected.beginDate}} - {{selected.endDate}}</span>
</el-form-item>
<el-form-item label="用车详细路线" label-width="100px">
<span>{{selected.lineDescription}}</span>
......@@ -85,44 +84,53 @@
<span>{{selected.dealName}}</span>
</el-form-item>
<el-form-item class="col-line-2" label="派车车牌" label-width="100px">
<el-input v-if="editType" v-model.trim="selected.carPlate" placeholder="请选择派车车牌" clearable></el-input>
<el-select v-if="editType" v-model="selected.carPlate" filterable clearable placeholder="派车车牌">
<el-option v-for="item in carPlateOptions" :key="item.id" :label="item.name" :value="item.name">
</el-option>
</el-select>
<span v-else>{{selected.carPlate}}</span>
</el-form-item>
<el-form-item class="col-line-3" label="出车公里数" label-width="100px">
<el-input v-if="editType" v-model.trim="selected.startKilometers" placeholder="" clearable></el-input>
<el-input-number v-if="editType" v-model.trim="selected.startKilometers" :controls="false" :precision="0" :min="0" :max="9999999" placeholder="" clearable></el-input-number>
<span v-else>{{selected.startKilometers}}</span>
</el-form-item>
<el-form-item class="col-line-3" label="收车公里数" label-width="100px">
<el-input v-if="editType" v-model.trim="selected.stopKilometers" placeholder="" clearable></el-input>
<el-input-number v-if="editType" v-model.trim="selected.stopKilometers" :controls="false" :precision="0" :min="0" :max="9999999" placeholder="" clearable></el-input-number>
<span v-else>{{selected.stopKilometers}}</span>
</el-form-item>
<el-form-item class="col-line-3" label="实际公里数" label-width="100px">
<el-input v-if="editType" v-model.trim="selected.trueKilometers" placeholder="" clearable></el-input>
<span>{{selected.trueKilometers}}</span>
<el-input-number v-if="editType" v-model.trim="selected.trueKilometers" :controls="false" :precision="0" :min="0" :max="9999999" placeholder="" clearable></el-input-number>
<span v-else>{{selected.trueKilometers}}</span>
</el-form-item>
<el-form-item label="资金来源" label-width="100px">
<el-input v-if="editType" v-model.trim="selected.priceSource" placeholder="可不填" clearable></el-input>
<span>{{selected.priceSource}}</span>
<el-input v-if="editType" v-model.trim="selected.priceSource" placeholder="可不填" :maxlength="20" clearable></el-input>
<span v-else>{{selected.priceSource}}</span>
</el-form-item>
<el-form-item label="用车单价" label-width="100px">
<template v-if="editType">
<el-input v-model.trim="selected.price" placeholder="可不填" clearable></el-input>
<el-input v-model.trim="selected.totalPrice" placeholder="可不填" clearable></el-input>
</template>
<template v-else>
<template v-if="editType">
<el-form-item label="用车单价" label-width="100px">
<div class="item-value">
<el-input-number v-model.trim="selected.price" :controls="false" :precision="2" :min="0" :max="9999999.99" placeholder="可不填" clearable></el-input-number>
<el-input-number v-model.trim="selected.totalPrice" :controls="false" :precision="2" :min="0" :max="9999999.99" placeholder="可不填" clearable></el-input-number>
</div>
</el-form-item>
</template>
<template v-else>
<el-form-item class="col-line-2" label="用车单价" label-width="100px">
<span>{{selected.price}}</span>
</el-form-item>
<el-form-item class="col-line-2" label="用车金额" label-width="100px">
<span>{{selected.totalPrice}}</span>
</template>
</el-form-item>
</template>
<el-form-item v-if="editType" label-width="100px">
<div class="item-value-start">
<el-radio v-model="selected.dealResult" @change="toogleDealResult" :label="2">同意</el-radio>
<el-radio v-model="selected.dealResult" @change="toogleDealResult" :label="3">不同意</el-radio>
<el-input v-if="selected.dealResult === 3" v-model.trim="selected.dealOpinion" :maxlength="20" placeholder="可不填" clearable></el-input>
</div>
</el-form-item>
<el-form-item label-width="100px">
<template v-if="editType">
<el-radio label="1">同意</el-radio>
<el-radio label="2">不同意</el-radio>
<span>{{selected.dealOpinion}}</span>
</template>
<template v-else>
<span>{{selected.agree}}-{{selected.dealOpinion}}</span>
</template>
<el-form-item v-else label="处理结果" label-width="100px">
<span>{{selected.dealResult ===2?'同意':selected.dealOpinion}}</span>
</el-form-item>
</el-form>
<div v-if="editType" slot="footer" class="dialog-footer">
......@@ -133,6 +141,13 @@
<el-button type="primary" @click="resetEditDialog">确 定</el-button>
</div>
</drag-dialog>
<drag-dialog title="用车管理-打印" :visible.sync="dialogPrintVisible" :before-close="resetPrintDialog" width="70%" top="5vh">
<iframe v-if="dialogPrintVisible" class="printIframe" ref="print" :src="`/print/publicCar?data=${JSON.stringify(selected)}`" frameborder="0" :data-item="selected"></iframe>
<div slot="footer" class="dialog-footer">
<el-button @click="resetPrintDialog">取 消</el-button>
<el-button type="primary" @click="printHandle">打 印</el-button>
</div>
</drag-dialog>
</div>
</template>
......@@ -141,6 +156,7 @@ import listMixin from '@/mixin/listPage.js';
import { mapGetters, mapActions } from 'vuex';
import store from './store.js';
import { dealApply } from '@/api/management/publicCar.js';
// import printJS from 'print-js';
export default {
beforeRouteEnter(to, from, next) {
......@@ -158,6 +174,7 @@ export default {
endDate: '',
},
selected: {},
dialogPrintVisible: false,
//1处理中 2已同意 3未同意
dealResultOptions: [
{
......@@ -176,9 +193,11 @@ export default {
};
},
computed: {
...mapGetters(['carPlateOptions', 'userInfo']),
...mapGetters('management/publicCar', ['list', 'pagination']),
},
methods: {
...mapActions(['fetchCarPlateOptions']),
...mapActions('management/publicCar', ['fetchList']),
getResultValue(c, r, val) {
let item = this.dealResultOptions.find(item => item.value == val);
......@@ -197,58 +216,60 @@ export default {
cellphone: '',
};
},
getCategoryValue(c, r, val) {
let list = JSON.parse(val);
let item = list.find(item => item.checked);
return item ? item.name : '';
},
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();
if (this.carPlateOptions.length == 0) {
this.fetchCarPlateOptions();
}
let categoryName = JSON.parse(data.row.categoryName).map(
item => (item.checked ? `■ ${item.name}` : `□ ${item.name}`)
);
this.selected = {
id: data.row.id,
department: data.row.department,
createDate: data.row.createDate,
name: data.row.name,
userCount: data.row.userCount,
categoryName: categoryName.join('； '),
beginDate: this.$formatDate(
new Date(data.row.beginDate),
'yyyy-MM-dd hh:mm:ss'
),
endDate: this.$formatDate(
new Date(data.row.endDate),
'yyyy-MM-dd hh:mm:ss'
),
lineDescription: data.row.lineDescription,
dealName: data.row.dealName || this.userInfo.name,
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,
};
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;
toogleDealResult(val) {
if (val === 2) {
this.selected.dealOpinion = '';
}
if (!this.selected.title) {
this.$message.error('请输入职称！');
return;
}
if (!this.selected.sex) {
this.$message.error('请输入性别！');
},
validateSelect() {
if (this.selected.dealResult == 2 && !this.selected.carPlate) {
this.$message.error('请选择派车车牌！');
return;
}
if (!this.selected.birthday) {
this.$message.error('请输入出生年月！');
if (this.selected.dealResult == 1) {
this.$message.error('请选择处理意见！');
return;
}
return true;
......@@ -257,28 +278,115 @@ export default {
if (!this.validateSelect()) {
return;
}
const entity = {
userId: this.selected.userId,
};
dealApply(entity)
.then(res => {
console.log(res);
this.$message.success(res.msg);
this.resetEditDialog();
this.$confirm(`确认要处理吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
let dealOpinion = '';
if (this.selected.dealResult == 3) {
dealOpinion = this.selected.dealOpinion
? `不同意 - ${this.selected.dealOpinion}`
: `不同意 - 无车可派送`;
}
const entity = {
userId: this.userInfo.id,
id: this.selected.id,
carPlate: this.selected.carPlate,
startKilometers: this.selected.startKilometers,
stopKilometers: this.selected.stopKilometers,
trueKilometers: this.selected.trueKilometers,
priceSource: this.selected.priceSource,
price: this.selected.price,
totalPrice: this.selected.totalPrice,
dealName: this.selected.dealName,
dealResult: this.selected.dealResult,
dealOpinion: dealOpinion,
};
dealApply(entity)
.then(res => {
console.log(res);
this.fetchList();
this.$message.success(res.msg);
this.resetEditDialog();
})
.catch(err => {
console.log(err);
this.$message.error(err.msg || '处理失败！');
});
})
.catch(err => {
console.log(err);
this.$message.error(err.msg || '处理失败！');
.catch(action => {
console.log(action);
});
},
showPrintDialog(data) {
let categoryName = JSON.parse(data.row.categoryName).map(
item => (item.checked ? `■ ${item.name}` : `□ ${item.name}`)
);
this.selected = {
id: data.row.id,
department: data.row.department,
createDate: data.row.createDate,
name: data.row.name,
userCount: data.row.userCount,
categoryName: categoryName.join('； '),
beginDate: this.$formatDate(
new Date(data.row.beginDate),
'yyyy-MM-dd hh:mm:ss'
),
endDate: this.$formatDate(
new Date(data.row.endDate),
'yyyy-MM-dd hh:mm:ss'
),
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,
};
this.dialogPrintVisible = true;
},
resetPrintDialog(done) {
this.selected = {};
done && typeof done == 'function'
? done()
: (this.dialogPrintVisible = false);
},
printHandle() {
this.$refs.print.contentWindow.vmPrint();
},
},
};
</script>
<style lang="scss">
.manage-publicCar {
.editForm {
.el-input-number .el-input__inner {
text-align: left;
}
.item-value {
display: flex;
justify-content: space-between;
}
.item-value-start {
display: flex;
.el-radio {
line-height: 40px;
}
.el-input {
margin-left: 30px;
}
}
.printIframe {
width: 100%;
height: 500px;
}
}
</style>
src/containers/management/user/user.vue
......@@ -2,10 +2,10 @@
<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>
<el-input v-model.trim="filters.name" :maxlength="20" placeholder="请输入姓名" clearable></el-input>
</div>
<div class="grid-content">
<el-input v-model.trim="filters.department" placeholder="请输入科室" clearable></el-input>
<el-input v-model.trim="filters.department" :maxlength="20" placeholder="请输入科室" clearable></el-input>
</div>
<div class="grid-content">
<el-select v-model="filters.isFrozen" filterable clearable placeholder="账号状态">
......@@ -226,28 +226,38 @@ export default {
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.fetchAllAuthUserList();
this.resetEditDialog();
this.$message.success(res.msg);
})
.catch(err => {
this.$message.error(err.msg || '新增失败！');
});
}
this.$confirm(`确认要${this.editType ? '编辑' : '新增'}吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
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.fetchAllAuthUserList();
this.resetEditDialog();
this.$message.success(res.msg);
})
.catch(err => {
this.$message.error(err.msg || '新增失败！');
});
}
})
.catch(action => {
console.log(action);
});
},
toggleTeacherStatus(data) {
this.$confirm(
......
src/containers/print/publicCar.vue 0 → 100644
<template>
<div id="publicCarForm" class="printTableWrap">
<div class="tableTitle">成都师范学院公务用车审批表</div>
<div class="printTable">
<div class="tableRow">
<div :span="4" class="tableCell tabelCol-4">用车部门</div>
<div :span="10" class="tableCell tabelCol-10">{{selected.department}}</div>
<div :span="6" class="tableCell tabelCol-6">用车申请时间</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.department}}</div>
</div>
<div class="tableRow">
<div :span="4" class="tableCell tabelCol-4">申请人</div>
<div :span="10" class="tableCell tabelCol-10">{{selected.name}}</div>
<div :span="6" class="tableCell tabelCol-6">用车人数</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.userCount}}人</div>
</div>
<div class="tableRow">
<div :span="4" class="tableCell tabelCol-4">用车类型<br>（勾选）</div>
<div :span="20" class="tableCell tabelCol-20 tal">{{selected.categoryName}}</div>
</div>
<div class="tableRow">
<div :span="4" class="tableCell tabelCol-4">用车起始时间</div>
<div :span="20" class="tableCell tabelCol-20 tal">{{selected.beginDate}} - {{selected.endDate}}（共 {{2}} 天）</div>
</div>
<div class="tableRow">
<div :span="4" class="tableCell tabelCol-4">用车详细路线</div>
<div :span="20" class="tableCell tabelCol-20 tal">{{selected.lineDescription}}</div>
</div>
<div class="tableRow">
<div :span="4" class="tableCell tabelCol-4">部门负责人<br>签字（盖章）</div>
<div :span="4" class="tableCell tabelCol-12"></div>
<div :span="4" class="tableCell tabelCol-4">派车人</div>
<div :span="4" class="tableCell tabelCol-4">
{{selected.dealName}}<br/>
{{selected.carPlate}}</div>
</div>
<div class="tableRow">
<div :span="4" class="tableCell tabelCol-4">出车公里数</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.startKilometers}}</div>
<div :span="4" class="tableCell tabelCol-4">收车公里数</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.stopKilometers}}</div>
<div :span="4" class="tableCell tabelCol-4">实际公里数</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.trueKilometers}}</div>
</div>
<div class="tableRow">
<div :span="4" class="tableCell tabelCol-4">资金来源</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.priceSource}}</div>
<div :span="4" class="tableCell tabelCol-4">用车单价</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.price}}</div>
<div :span="4" class="tableCell tabelCol-4">用车金额</div>
<div :span="4" class="tableCell tabelCol-4">{{selected.totalPrice}}</div>
</div>
<div class="tableRow">
<div :span="4" class="tableCell tabelCol-4">驾驶员签字</div>
<div :span="8" class="tableCell tabelCol-8"></div>
<div :span="4" class="tableCell tabelCol-4">用车人签字</div>
<div :span="8" class="tableCell tabelCol-8"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
const {
query: { data },
} = this.$route;
console.log(data);
return {
selected: JSON.parse(data),
};
},
created() {
window.vmPrint = this.printHandle;
},
methods: {
printHandle() {
// window.print();
document.execCommand('print', false, null);
},
},
};
</script>
<style lang="scss">
.printTableWrap {
color: #000;
border-collapse: collapse;
text-align: center;
max-width: 649px;
max-height: 978px;
text-align: center;
margin: 0 auto;
.tableTitle {
font-size: 20px;
line-height: 80px;
}
.printTable {
border: 1px solid #000;
.tal {
text-indent: 20px;
text-align: left;
}
.tableRow {
display: flex;
}
.tableCell {
padding: 10px 0;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
.tableCell:last-child {
border-right: none;
}
.tableRow:last-child .tableCell {
border-bottom: none;
}
.tabelCol-4 {
width: 16.66667%;
}
.tabelCol-10 {
width: 41.66667%;
}
.tabelCol-6 {
width: 25%;
}
.tabelCol-8 {
width: 33.33333%;
}
.tabelCol-20 {
width: 83.33333%;
}
.tabelCol-12 {
width: 50%;
}
}
}
</style>
src/permission.js
......@@ -6,43 +6,47 @@ import { getToken } from '@/utils/auth'; // 验权
NProgress.configure({ showSpinner: false }); // NProgress Configuration
const whiteList = ['/login']; // 不重定向白名单
const whiteList = ['/login', '/print/publicCar']; // 不重定向白名单
router.beforeEach((to, from, next) => {
NProgress.start(); // 进度条Progress
// 白名单直接进入
if (whiteList.indexOf(to.path) !== -1) {
next();
NProgress.done();
return;
}
// 如果有用户登陆信息
if (getToken()) {
if (to.path === '/login') {
next({ path: '/' });
NProgress.done();
} else {
if (store.getters.isRouteDone) {
next(); //
} else {
// if(store.getters.userInfo.loginState)
store
.dispatch('GenerateRoutes')
.then(() => {
router.addRoutes(store.getters.addRouters); // 动态添加可访问路由表
next({ ...to, replace: true });
})
.catch(err => {
console.log('验证失败,请重新登录');
console.log(err);
store.dispatch('FedLogOut').then(() => {
// Message.error('验证失败,请重新登录');
next({ path: '/login' });
});
});
}
return;
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
// 路由已经鉴权
if (store.getters.isRouteDone) {
next();
} else {
next('/login');
NProgress.done();
return;
}
// 没有鉴权动态获取路由
store
.dispatch('GenerateRoutes')
.then(() => {
router.addRoutes(store.getters.addRouters); // 动态添加可访问路由表
next({ ...to, replace: true });
})
.catch(err => {
console.log('验证失败,请重新登录');
console.log(err);
store.dispatch('FedLogOut').then(() => {
// Message.error('验证失败,请重新登录');
next({ path: '/login' });
});
});
return;
}
next('/login');
NProgress.done();
});
router.afterEach(() => {
......
src/router/index.js
......@@ -7,6 +7,7 @@ import errorPage401 from '@/containers/errorPage/401';
import systemRoute from './system';
import baseRoute from './baseData';
import managementRoute from './management';
import printPublicCarPage from '../containers/print/publicCar.vue';
const _import = require('./_import_' + process.env.NODE_ENV);
......@@ -31,6 +32,12 @@ export const constantRouterMap = [
},
],
},
{
path: '/print/publicCar',
component: printPublicCarPage,
name: 'printPublicCarPage',
hidden: true,
},
];
export const asyncRouterMap = [
......
src/store/modules/user/index.js
......@@ -14,7 +14,7 @@ const state = {
const getters = {
token: state => state.token,
userInfo: ({ token, ...other }) => other,
userInfo: ({ token, route, ...other }) => other,
adminId: state => state.id,
};
......
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