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

jsc

Browse Source
master
lion 2 years 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' } meta: { title: '首页', icon: 'dashboard' }
}] }]
}, },
{ // {
path: '/jsc', // path: '/jsc',
component: Layout, // component: Layout,
redirect: '/jsc', // redirect: '/jsc',
meta: { title: '驾驶舱', icon: 'dashboard' }, // meta: { title: '驾驶舱', icon: 'dashboard' },
children: [{ // children: [{
path: 'jsc', // path: 'jsc',
name: 'jsc', // name: 'jsc',
component: () => import('@/views/jsc/jsc'), // component: () => import('@/views/jsc/jsc'),
meta: { title: '驾驶舱', icon: 'dashboard' } // meta: { title: '驾驶舱', icon: 'dashboard' }
}] // }]
}, // },
{ {
path: '/info', path: '/info',
component: Layout, component: Layout,

84
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 style="position: relative;height: 100%;width: 100%;overflow-y: scroll;padding-bottom:20px">
<div class="search-tab"> <div class="search-tab">
<div> <div>
<el-date-picker @change="changeDateRange" v-model="modalSelect.dateRange" value-format="yyyy-MM-dd" format="yyyy-MM-dd" <el-date-picker @change="changeDateRange" v-model="modalSelect.dateRange" value-format="yyyy-MM-dd"
type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="至"
end-placeholder="结束日期" :picker-options="pickerOptions"> start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
</el-date-picker> </el-date-picker>
</div> </div>
<div> <div>
@ -15,7 +15,8 @@
</el-select> </el-select>
</div> </div>
<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 v-for="item in departments" :key="item.id" :label="item.name" :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
@ -26,8 +27,8 @@
</div> </div>
<!-- :style="{'height':defaultModalSize.height}" --> <!-- :style="{'height':defaultModalSize.height}" -->
<div class="search-table"> <div class="search-table">
<div v-loading="loading" class="progress-card" element-loading-text="拼命加载中" <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)"> 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="{ <el-table style="width: 100%;" size="mini" :header-cell-style="{
'font-weight': '600', 'font-weight': '600',
'background': '#fff', 'background': '#fff',
@ -38,23 +39,16 @@
:prop="item.key" :show-overflow-tooltip="item['show-overflow-tooltip']" header-align="center" :prop="item.key" :show-overflow-tooltip="item['show-overflow-tooltip']" header-align="center"
:align="item.align" :formatter="item.formatter" /> :align="item.align" :formatter="item.formatter" />
</el-table> </el-table>
<el-pagination <el-pagination style="margin-top: 10px;text-align: right;" :current-page.sync="modalSelect.page"
style="margin-top: 10px;text-align: right;" :page-sizes="[20, 30, 40, 50]" :page-size.sync="modalSelect.page_size"
:current-page.sync="modalSelect.page" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="e => {
: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_size = e;
modalSelect.page = 1; modalSelect.page = 1;
getChartOverallList(); getChartOverallList();
}" }" @current-change="e => {
@current-change="e => {
modalSelect.page = e; modalSelect.page = e;
getChartOverallList(); getChartOverallList();
}" }" />
/>
</div> </div>
</div> </div>
@ -92,7 +86,7 @@
return { return {
defaultModalSize, defaultModalSize,
tableHeight: 400, tableHeight: 400,
loading:false, loading: false,
list: [], list: [],
total: 0, total: 0,
table: [], table: [],
@ -169,16 +163,18 @@
], ],
chuchai: [{ chuchai: [{
title: '人员', title: '人员',
key: 'flow.creator.name', key: 'renyuan_name',
width: 120,
align: 'left', align: 'left',
'show-overflow-tooltip': true,
minWidth:120
// flow.creator.name
}, },
{ {
title: '去向', title: '去向',
key: 'mudidi', key: 'mudidi',
align: 'left', align: 'left',
'show-overflow-tooltip': true, 'show-overflow-tooltip': true,
minWidth: 120 width: 80
}, },
{ {
title: '交通方式', title: '交通方式',
@ -198,14 +194,14 @@
key: 'kaishi', key: 'kaishi',
align: 'left', align: 'left',
'show-overflow-tooltip': true, 'show-overflow-tooltip': true,
width: 120 width: 100
}, },
{ {
title: '结束日期', title: '结束日期',
key: '结束', key: 'jieshu',
align: 'left', align: 'left',
'show-overflow-tooltip': true, 'show-overflow-tooltip': true,
width: 120 width: 100
} }
] ]
}, },
@ -213,23 +209,23 @@
tagList: [{ tagList: [{
name: '出差', name: '出差',
id: 'chuchai', id: 'chuchai',
type:3 type: 3
}, { }, {
name: '用车', name: '用车',
id: 'yongche', id: 'yongche',
type:3 type: 3
}, { }, {
name: '加班', name: '加班',
id: 'jiaban', id: 'jiaban',
type:1 type: 1
}, { }, {
name: '请假', name: '请假',
id: 'qingjia', id: 'qingjia',
type:2 type: 2
}], }],
changeSelect:false, changeSelect: false,
dateRange: '', dateRange: '',
pickerOptions: { pickerOptions: {
shortcuts: [{ shortcuts: [{
@ -286,8 +282,8 @@
}, },
computed: {}, computed: {},
watch: { watch: {
modalSelect(newval){ modalSelect(newval) {
console.log("isShowModal",newval) console.log("isShowModal", newval)
this.getChartOverallList() this.getChartOverallList()
} }
}, },
@ -318,7 +314,7 @@
async getChartOverallList() { async getChartOverallList() {
try { try {
this.loading = true this.loading = true
if(this.changeSelect){ if (this.changeSelect) {
this.list = [] this.list = []
this.total = 0 this.total = 0
this.modalSelect.page = 1 this.modalSelect.page = 1
@ -337,18 +333,18 @@
} }
}) })
if (res.status === 200) { if (res.status === 200) {
console.log("res",res) console.log("res", res)
this.table = this.tableList[this.modalSelect.searchTag] this.table = this.tableList[this.modalSelect.searchTag]
this.changeSelect = false this.changeSelect = false
let list = res.data.data.data let list = res.data.data.data
this.total = res.data.data.total this.total = res.data.data.total
if(this.modalSelect.searchTag==='yongche'){ if (this.modalSelect.searchTag === 'yongche') {
let carList = [] let carList = []
list.map(a=>{ list.map(a => {
if(a.chucheqingkuang){ if (a.chucheqingkuang) {
let car = JSON.parse(a.chucheqingkuang) let car = JSON.parse(a.chucheqingkuang)
car.map(item=>{ car.map(item => {
item.mudidi = a.mudidi item.mudidi = a.mudidi
}) })
carList.push(...car) carList.push(...car)
@ -356,7 +352,7 @@
}) })
this.list = carList this.list = carList
this.total = carList.length this.total = carList.length
}else{ } else {
this.list = list this.list = list
} }
@ -382,15 +378,15 @@
this.modalSelect.end_date = '' this.modalSelect.end_date = ''
} }
}, },
changeDepartment(e){ changeDepartment(e) {
if(e || e==''){ if (e || e == '') {
this.changeSelect = true this.changeSelect = true
this.modalSelect.department_id = e this.modalSelect.department_id = e
} }
}, },
changeTag(e){ changeTag(e) {
this.tagList.map(item=>{ this.tagList.map(item => {
if(item.id==e){ if (item.id == e) {
this.changeSelect = true this.changeSelect = true
this.modalSelect.type = item.type this.modalSelect.type = item.type
} }

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

@ -2,37 +2,21 @@
<el-card id="evection-card" class="box-card" shadow="hover"> <el-card id="evection-card" class="box-card" shadow="hover">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<img src="../static/icon5.png" alt=""> <img src="../static/icon5.png" alt="">
<span <span style="padding-left: 15px">今日出差明细</span>
style="padding-left: 15px"
>今日出差明细</span>
<i class="el-icon-more" style="margin-left: auto; font-size: 20px" /> <i class="el-icon-more" style="margin-left: auto; font-size: 20px" />
</div> </div>
<div style="position: relative;height: 100%;width: 100%;"> <div style="position: relative;height: 100%;width: 100%;">
<div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;"> <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
<el-table <el-table style="width: 100%;" size="mini" :header-cell-style="{
style="width: 100%;"
size="mini"
:header-cell-style="{
'font-weight': '600', 'font-weight': '600',
'background': '#fff', 'background': '#fff',
'color': '#515a6e', 'color': '#515a6e',
'text-align':'left' 'text-align':'left'
}" }" :height="tableHeight" :data="list">
:height="tableHeight" <el-table-column v-for="(item, index) in table" :key="index" :width="item.width" :label="item.title"
:data="list" :prop="item.key" :show-overflow-tooltip="item['show-overflow-tooltip']" header-align="center"
> :align="item.align" :formatter="item.formatter" />
<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-table>
</div> </div>
</div> </div>
@ -40,112 +24,129 @@
</template> </template>
<script> <script>
import ElementResize from 'element-resize-detector' import ElementResize from 'element-resize-detector'
import { defaultModalSize } from '@/settings' import {
defaultModalSize
} from '@/settings'
export default { export default {
name: 'Evection', name: 'Evection',
components: { components: {},
}, props: {
props:{ myData: {
myData:{ type: Array,
type:Array, default: () => {
default:()=>{ return []
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,
} }
] }
} },
}, layout: {
computed: {}, x: 0,
watch: { y: 5,
myData(newval){ 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 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
})
}, },
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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep .el-card__body { ::v-deep .el-card__body {
width: 100%; width: 100%;
height: calc(100% - 58px); height: calc(100% - 58px);
} }
::v-deep .el-table th,::v-deep .el-table td {
border-bottom-style: dashed; ::v-deep .el-table th,
} ::v-deep .el-table td {
.clearfix { border-bottom-style: dashed;
display: flex; }
align-items: center;
} .clearfix {
::v-deep .vxe-modal--content { display: flex;
padding: 0; align-items: center;
} }
::v-deep .vxe-modal--content {
padding: 0;
}
</style> </style>

Write Preview
Loading…
Cancel
Save