wangyifang
/
cz-hjjc-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

jsc

Browse Source
master
lion 1 year ago
parent 90b0e1f314
commit 18858bb56e
3 changed files with 264 additions and 267 deletions
Show Stats Download Patch File Download Diff File

24
src/router/index.js
Unescape View File

@ -89,18 +89,18 @@ export const constantRoutes = [
meta: { title: '首页', icon: 'dashboard' }
}]
},
{
path: '/jsc',
component: Layout,
redirect: '/jsc',
meta: { title: '驾驶舱', icon: 'dashboard' },
children: [{
path: 'jsc',
name: 'jsc',
component: () => import('@/views/jsc/jsc'),
meta: { title: '驾驶舱', icon: 'dashboard' }
}]
},
// {
// path: '/jsc',
// component: Layout,
// redirect: '/jsc',
// meta: { title: '驾驶舱', icon: 'dashboard' },
// children: [{
// path: 'jsc',
// name: 'jsc',
// component: () => import('@/views/jsc/jsc'),
// meta: { title: '驾驶舱', icon: 'dashboard' }
// }]
// },
{
path: '/info',
component: Layout,

206
src/views/jsc/allTable.vue
Unescape View File

@ -3,9 +3,9 @@
<div style="position: relative;height: 100%;width: 100%;overflow-y: scroll;padding-bottom:20px">
<div class="search-tab">
<div>
<el-date-picker @change="changeDateRange" v-model="modalSelect.dateRange" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" :picker-options="pickerOptions">
<el-date-picker @change="changeDateRange" v-model="modalSelect.dateRange" value-format="yyyy-MM-dd"
format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
</el-date-picker>
</div>
<div>
@ -15,7 +15,8 @@
</el-select>
</div>
<div>
<el-select @change="changeDepartment" style="width:250px" v-model="modalSelect.searchDepartmentId" placeholder="请选择科室">
<el-select @change="changeDepartment" style="width:250px" v-model="modalSelect.searchDepartmentId"
placeholder="请选择科室">
<el-option v-for="item in departments" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
@ -26,8 +27,8 @@
</div>
<!-- :style="{'height':defaultModalSize.height}" -->
<div class="search-table">
<div v-loading="loading" class="progress-card" element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)">
<div v-loading="loading" class="progress-card" element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)">
<el-table style="width: 100%;" size="mini" :header-cell-style="{
'font-weight': '600',
'background': '#fff',
@ -37,24 +38,17 @@
<el-table-column v-for="(item, index) in table" :key="index" :width="item.width" :label="item.title"
:prop="item.key" :show-overflow-tooltip="item['show-overflow-tooltip']" header-align="center"
:align="item.align" :formatter="item.formatter" />
</el-table>
<el-pagination
style="margin-top: 10px;text-align: right;"
:current-page.sync="modalSelect.page"
:page-sizes="[20, 30, 40, 50]"
:page-size.sync="modalSelect.page_size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="e => {
modalSelect.page_size = e;
modalSelect.page = 1;
getChartOverallList();
}"
@current-change="e => {
modalSelect.page = e;
getChartOverallList();
}"
/>
</el-table>
<el-pagination style="margin-top: 10px;text-align: right;" :current-page.sync="modalSelect.page"
:page-sizes="[20, 30, 40, 50]" :page-size.sync="modalSelect.page_size"
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="e => {
modalSelect.page_size = e;
modalSelect.page = 1;
getChartOverallList();
}" @current-change="e => {
modalSelect.page = e;
getChartOverallList();
}" />
</div>
</div>
@ -66,10 +60,10 @@
import ElementResize from 'element-resize-detector'
import {
defaultModalSize
} from '@/settings'
import axios from 'axios'
import {
getToken
} from '@/settings'
import axios from 'axios'
import {
getToken
} from '@/utils/auth'
export default {
@ -91,8 +85,8 @@
data() {
return {
defaultModalSize,
tableHeight: 400,
loading:false,
tableHeight: 400,
loading: false,
list: [],
total: 0,
table: [],
@ -169,16 +163,18 @@
],
chuchai: [{
title: '人员',
key: 'flow.creator.name',
width: 120,
key: 'renyuan_name',
align: 'left',
'show-overflow-tooltip': true,
minWidth:120
// flow.creator.name
},
{
title: '去向',
key: 'mudidi',
align: 'left',
'show-overflow-tooltip': true,
minWidth: 120
width: 80
},
{
title: '交通方式',
@ -192,44 +188,44 @@
key: 'chuchaishiyou',
align: 'left',
'show-overflow-tooltip': true,
},
{
title: '开始日期',
key: 'kaishi',
align: 'left',
'show-overflow-tooltip': true,
width: 120
},
{
title: '结束日期',
key: '结束',
align: 'left',
'show-overflow-tooltip': true,
width: 120
},
{
title: '开始日期',
key: 'kaishi',
align: 'left',
'show-overflow-tooltip': true,
width: 100
},
{
title: '结束日期',
key: 'jieshu',
align: 'left',
'show-overflow-tooltip': true,
width: 100
}
]
},
// 弹窗选择
tagList: [{
name: '出差',
id: 'chuchai',
type:3
id: 'chuchai',
type: 3
}, {
name: '用车',
id: 'yongche',
type:3
id: 'yongche',
type: 3
}, {
name: '加班',
id: 'jiaban',
type:1
id: 'jiaban',
type: 1
}, {
name: '请假',
id: 'qingjia',
type:2
id: 'qingjia',
type: 2
}],
changeSelect:false,
changeSelect: false,
dateRange: '',
pickerOptions: {
shortcuts: [{
@ -285,14 +281,14 @@
}
},
computed: {},
watch: {
modalSelect(newval){
console.log("isShowModal",newval)
this.getChartOverallList()
}
watch: {
modalSelect(newval) {
console.log("isShowModal", newval)
this.getChartOverallList()
}
},
created() {
this.getChartOverallList()
created() {
this.getChartOverallList()
},
beforeDestroy() {},
mounted() {
@ -317,11 +313,11 @@
// 弹出的总览数据
async getChartOverallList() {
try {
this.loading = true
if(this.changeSelect){
this.list = []
this.total = 0
this.modalSelect.page = 1
this.loading = true
if (this.changeSelect) {
this.list = []
this.total = 0
this.modalSelect.page = 1
}
const res = await axios.get(`${process.env.VUE_APP_BASE_API}/api/oa/chart/overall-list`, {
headers: {
@ -336,28 +332,28 @@
page_size: this.modalSelect.page_size
}
})
if (res.status === 200) {
console.log("res",res)
this.table = this.tableList[this.modalSelect.searchTag]
this.changeSelect = false
let list = res.data.data.data
this.total = res.data.data.total
if(this.modalSelect.searchTag==='yongche'){
let carList = []
list.map(a=>{
if(a.chucheqingkuang){
let car = JSON.parse(a.chucheqingkuang)
car.map(item=>{
item.mudidi = a.mudidi
})
carList.push(...car)
}
})
this.list = carList
this.total = carList.length
}else{
this.list = list
if (res.status === 200) {
console.log("res", res)
this.table = this.tableList[this.modalSelect.searchTag]
this.changeSelect = false
let list = res.data.data.data
this.total = res.data.data.total
if (this.modalSelect.searchTag === 'yongche') {
let carList = []
list.map(a => {
if (a.chucheqingkuang) {
let car = JSON.parse(a.chucheqingkuang)
car.map(item => {
item.mudidi = a.mudidi
})
carList.push(...car)
}
})
this.list = carList
this.total = carList.length
} else {
this.list = list
}
// this.list.map(item => {
@ -375,26 +371,26 @@
console.log("e", e)
if (e) {
this.modalSelect.start_date = e[0]
this.modalSelect.end_date = e[1]
this.modalSelect.end_date = e[1]
this.changeSelect = true
} else {
this.modalSelect.start_date = ''
this.modalSelect.end_date = ''
}
},
changeDepartment(e){
if(e || e==''){
this.changeSelect = true
this.modalSelect.department_id = e
}
},
changeTag(e){
this.tagList.map(item=>{
if(item.id==e){
this.changeSelect = true
this.modalSelect.type = item.type
}
})
},
changeDepartment(e) {
if (e || e == '') {
this.changeSelect = true
this.modalSelect.department_id = e
}
},
changeTag(e) {
this.tagList.map(item => {
if (item.id == e) {
this.changeSelect = true
this.modalSelect.type = item.type
}
})
}

301
src/views/jsc/components/evection.vue
Unescape View File

@ -1,151 +1,152 @@
<template>
<el-card id="evection-card" class="box-card" shadow="hover">
<div slot="header" class="clearfix">
<img src="../static/icon5.png" alt="">
<span
style="padding-left: 15px"
>今日出差明细</span>
<i class="el-icon-more" style="margin-left: auto; font-size: 20px" />
</div>
<div style="position: relative;height: 100%;width: 100%;">
<div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
<el-table
style="width: 100%;"
size="mini"
:header-cell-style="{
'font-weight': '600',
'background': '#fff',
'color': '#515a6e',
'text-align':'left'
}"
:height="tableHeight"
:data="list"
>
<el-table-column
v-for="(item, index) in table"
:key="index"
:width="item.width"
:label="item.title"
:prop="item.key"
:show-overflow-tooltip="item['show-overflow-tooltip']"
header-align="center"
:align="item.align"
:formatter="item.formatter"
/>
</el-table>
</div>
</div>
</el-card>
</template>
<script>
import ElementResize from 'element-resize-detector'
import { defaultModalSize } from '@/settings'
export default {
name: 'Evection',
components: {
},
props:{
myData:{
type:Array,
default:()=>{
return []
}
}
},
layout: {
x: 0,
y: 5,
w: 5,
h: 7,
i: 'Evection',
name: '今日出差明细',
data_id:'chuchaiListToday',
data:null
},
data() {
return {
defaultModalSize,
timer: null,
tableHeight: 120,
list: [],
table: [
{
title: '人员',
key: 'renyuan_name',
width: 120,
align: 'left',
// flow.creator.name
},
{
title: '去向',
key: 'mudidi',
align: 'left',
'show-overflow-tooltip': true,
minWidth: 120
},
{
title: '交通方式',
key: 'jiaotongfangshi',
align: 'left',
'show-overflow-tooltip': true,
minWidth: 120
},
{
title: '出差说明',
key: 'chuchaishiyou',
align: 'left',
'show-overflow-tooltip': true,
}
]
}
},
computed: {},
watch: {
myData(newval){
this.list = newval
},
},
created() {
},
mounted() {
this.init()
},
methods: {
init() {
const cardDom = document.getElementById('evection-card')
const cardTitleH = 59
const elementResize = ElementResize({
strategy: 'scroll'
})
elementResize.listenTo(cardDom, (ele) => {
this.tableHeight =
cardDom.getBoundingClientRect().height -
40 -
cardTitleH
})
},
}
}
</script>
<style scoped lang="scss">
::v-deep .el-card__body {
width: 100%;
height: calc(100% - 58px);
}
::v-deep .el-table th,::v-deep .el-table td {
border-bottom-style: dashed;
}
.clearfix {
display: flex;
align-items: center;
}
::v-deep .vxe-modal--content {
padding: 0;
}
<template>
<el-card id="evection-card" class="box-card" shadow="hover">
<div slot="header" class="clearfix">
<img src="../static/icon5.png" alt="">
<span style="padding-left: 15px">今日出差明细</span>
<i class="el-icon-more" style="margin-left: auto; font-size: 20px" />
</div>
<div style="position: relative;height: 100%;width: 100%;">
<div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
<el-table style="width: 100%;" size="mini" :header-cell-style="{
'font-weight': '600',
'background': '#fff',
'color': '#515a6e',
'text-align':'left'
}" :height="tableHeight" :data="list">
<el-table-column v-for="(item, index) in table" :key="index" :width="item.width" :label="item.title"
:prop="item.key" :show-overflow-tooltip="item['show-overflow-tooltip']" header-align="center"
:align="item.align" :formatter="item.formatter" />
</el-table>
</div>
</div>
</el-card>
</template>
<script>
import ElementResize from 'element-resize-detector'
import {
defaultModalSize
} from '@/settings'
export default {
name: 'Evection',
components: {},
props: {
myData: {
type: Array,
default: () => {
return []
}
}
},
layout: {
x: 0,
y: 5,
w: 5,
h: 7,
i: 'Evection',
name: '今日出差明细',
data_id: 'chuchaiListToday',
data: null
},
data() {
return {
defaultModalSize,
timer: null,
tableHeight: 120,
list: [],
table: [{
title: '人员',
key: 'renyuan_name',
align: 'left',
'show-overflow-tooltip': true,
// flow.creator.name
},
{
title: '去向',
key: 'mudidi',
align: 'left',
'show-overflow-tooltip': true,
width: 80
},
{
title: '交通方式',
key: 'jiaotongfangshi',
align: 'left',
'show-overflow-tooltip': true,
minWidth: 120
},
{
title: '出差说明',
key: 'chuchaishiyou',
align: 'left',
'show-overflow-tooltip': true,
},
{
title: '开始日期',
key: 'kaishi',
align: 'left',
'show-overflow-tooltip': true,
width: 100
},
{
title: '结束日期',
key: 'jieshu',
align: 'left',
'show-overflow-tooltip': true,
width: 100
}
]
}
},
computed: {},
watch: {
myData(newval) {
this.list = newval
},
},
created() {},
mounted() {
this.init()
},
methods: {
init() {
const cardDom = document.getElementById('evection-card')
const cardTitleH = 59
const elementResize = ElementResize({
strategy: 'scroll'
})
elementResize.listenTo(cardDom, (ele) => {
this.tableHeight =
cardDom.getBoundingClientRect().height -
40 -
cardTitleH
})
},
}
}
</script>
<style scoped lang="scss">
::v-deep .el-card__body {
width: 100%;
height: calc(100% - 58px);
}
::v-deep .el-table th,
::v-deep .el-table td {
border-bottom-style: dashed;
}
.clearfix {
display: flex;
align-items: center;
}
::v-deep .vxe-modal--content {
padding: 0;
}
</style>

Write Preview
Loading…
Cancel
Save