From bb654cea7b1666d5b3c04dbd81a074a5a502cc67 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期五, 31 五月 2024 09:36:40 +0800
Subject: [PATCH] 1、登录页实现登录窗口响应式布局，同时限制最大最小宽高 2、除设备级看板其余看板中点击技术状态以及报修故障图表后打开对应弹窗，并实现与接口联动 3、设备级看板点击保养计划按钮后打开对应弹窗并实现与后端数据联调 4、优化设备级看板折线图样式，将Y轴移至左侧，删除右侧Y轴，设置数据值在图标上的显示
---
src/views/mdc/base/modules/HolidayManagement/HolidayManagementList.vue | 100 +++++++++++++++++++++++++++++++++++---------------
1 files changed, 70 insertions(+), 30 deletions(-)
diff --git a/src/views/mdc/base/modules/HolidayManagement/HolidayManagementList.vue b/src/views/mdc/base/modules/HolidayManagement/HolidayManagementList.vue
index 0be2eb3..3b17e56 100644
--- a/src/views/mdc/base/modules/HolidayManagement/HolidayManagementList.vue
+++ b/src/views/mdc/base/modules/HolidayManagement/HolidayManagementList.vue
@@ -1,33 +1,36 @@
<template>
- <a-card :bordered="false" class="device_list">
+ <div :bordered="false" class="device_list">
<!-- 鏌ヨ鍖哄煙 -->
<div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
- <a-row :gutter="24">
+ <a-row :gutter="24" style="width: 100%;">
<a-col :md="7" :sm="7">
<a-form-item label="鏃堕棿">
<a-range-picker @change="dateParamChange" v-model="dates" format="YYYY-MM-DD"/>
</a-form-item>
</a-col>
- <a-col :md="4" :sm="4">
+ <a-col :md="5" :sm="5">
<a-form-item label="璁惧缂栧彿">
<a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" v-model="queryParams.equipmentId"></a-input>
</a-form-item>
</a-col>
- <a-col :md="4" :sm="4" :xs="4">
+ <a-col :md="5" :sm="5" :xs="5">
<a-form-item label="璁惧鍚嶇О">
<a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" v-model="queryParams.equipmentName"></a-input>
</a-form-item>
</a-col>
- <a-col :md="2" :sm="3" :xs="3">
- <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
- </a-col>
<a-col :md="2" :sm="2" :xs="2">
- <a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>
+ <a-space>
+ <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
+ <a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>
+ </a-space>
</a-col>
- <a-col :lg="2" :md="3" :sm="3" :xs="3">
- <a-button type="primary" @click="exportExcel" icon="download">瀵煎嚭</a-button>
- </a-col>
+ <!--<a-col :md="2" :sm="2" :xs="2">-->
+ <!--<a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>-->
+ <!--</a-col>-->
+ <!--<a-col :md="2" :sm="2" :xs="2">-->
+ <!--<a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>-->
+ <!--</a-col>-->
</a-row>
</a-form>
</div>
@@ -40,6 +43,7 @@
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
<a-button type="primary" icon="import">瀵煎叆</a-button>
</a-upload>
+ <a-button type="primary" icon="printer" v-print="'#DeviceList'" v-has="'holidayManagement:print'">鎵撳嵃</a-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
@@ -55,9 +59,9 @@
</div>
<!-- table鍖哄煙-begin -->
- <div id="DeviceList">
+ <div id="DeviceList" style="flex: 1;overflow: hidden">
<a-table ref="table" bordered size="middle" rowKey="id" :columns="columns"
- :scroll="{x:1000}" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
+ :scroll="{x:'max-content',y:scrollY}" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange">
<span slot="action" slot-scope="text, record">
@@ -82,7 +86,7 @@
<holiday-management-modal ref="modalForm" @ok="modalFormOk"></holiday-management-modal>
<holiday-management-modal-edit ref="modalFormedit" @ok="modalFormOk"></holiday-management-modal-edit>
- </a-card>
+ </div>
</template>
<script>
@@ -135,16 +139,19 @@
queryParamEquip:{},
queryParamPeople:{},
dataStartsoucre:[],
+ scrollY:465,
columns: [
{
title: '璁惧缂栧彿',
align: 'center',
- dataIndex: 'equipmentId'
+ dataIndex: 'equipmentId',
+ width:250
},
{
title: '璁惧鍚嶇О',
align: 'center',
dataIndex: 'equipmentName',
+ width:250
// defaultSortOrder:'descend',
// sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1}
},
@@ -152,6 +159,7 @@
title: '鏃ユ湡',
align: 'center',
dataIndex: 'vacationDate',
+ width:250
// scopedSlots:{customRender:'startTime'},
// customRender:(text,row,index) => {
// return moment(text).format("YYYY-MM-DD HH:mm:ss")
@@ -160,28 +168,43 @@
{
title: '绫诲瀷',
align: 'center',
- dataIndex: 'vacationType'
+ dataIndex: 'vacationType',
+ width:250
},
{
title: '澶囨敞',
align: 'center',
- dataIndex: 'notes'
+ dataIndex: 'notes',
+ width:250
},
{
title: '鎿嶄綔',
dataIndex: 'action',
scopedSlots: {customRender: 'action'},
align: "center",
- width: 150
+ width: 150,
+ fixed:'right'
}
],
+ /* 鍒嗛〉鍙傛暟 */
+ ipagination:{
+ current: 1,
+ pageSize: 30,
+ pageSizeOptions: ['30', '50', '100'],
+ showTotal: (total, range) => {
+ return range[0] + "-" + range[1] + " 鍏�" + total + "鏉�"
+ },
+ showQuickJumper: true,
+ showSizeChanger: true,
+ total: 0
+ },
url: {
list: '/mdc/mdcVacationManagement/pageList',
delete: '/mdc/mdcVacationManagement/deleteVacation',
deleteBatch: '/mdc/mdcVacationManagement/deleteBatchVacation',
getEquipmentByPid: '/mdc/mdcequipment/getEquipmentByPid',
- exportXlsUrl: "/mdc/MdcTorqueConfig/exportXls",
- importExcelUrl: "/mdc/MdcTorqueConfig/importExcel",
+ exportXlsUrl: "/mdc/mdcVacationManagement/exportXls",
+ importExcelUrl: "/mdc/mdcVacationManagement/importExcel",
}
}
},
@@ -225,7 +248,7 @@
},
methods: {
dateParamChange(v1, v2) {
- // console.log(v1,v2)
+ console.log(v1,v2)
this.queryParam.startTime = v2[0]
this.queryParam.endTime = v2[1]
// console.log(v2[0],v2[1])
@@ -340,8 +363,6 @@
param.field = this.getQueryField();
param.parentId = this.queryParams.parentId;
param.equipmentId = this.queryParams.equipmentId;
- param.startTime = this.queryParam.startTime;
- param.endTime = this.queryParam.endTime;
getAction(this.url.list,param).then((res) => {
if(res.success){
this.dataSource = res.result.records||res.result;
@@ -427,8 +448,10 @@
param.field = this.getQueryField();
param.parentId = this.queryParams.parentId;
param.equipmentId = this.queryParams.equipmentId;
- param.startTime = this.queryParam.startTime;
- param.endTime = this.queryParam.endTime;
+ if(this.queryParam.startTime && this.queryParam.endTime){
+ param.startTime = this.queryParam.startTime;
+ param.endTime = this.queryParam.endTime;
+ }
// console.log(param);
getAction(this.url.list,param).then((res) => {
if(res.success){
@@ -626,9 +649,25 @@
exclude_inputs: true
});
},
+
+ /**
+ * 褰撴祻瑙堝櫒鍙绐楀彛灏哄鍙戠敓鏀瑰彉鏃惰Е鍙�
+ */
+ handleWindowResize(){
+ const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2)
+ const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2)
+ this.scrollY = boxHeight - tableHeadHeight - 50
+ }
},
created() {
this.queryParam.typeTree = "1"
+ },
+ mounted(){
+ window.addEventListener('resize',this.handleWindowResize)
+ this.handleWindowResize()
+ },
+ beforeDestroy(){
+ window.removeEventListener('resize',this.handleWindowResize)
}
}
</script>
@@ -636,34 +675,35 @@
<style lang="less" scoped>
@import '~@assets/less/common.less';
+ .device_list{
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+
@media screen and (min-width: 1920px){
.device_list{
height: 811px!important;
- overflow: scroll;
}
}
@media screen and (min-width: 1680px) and (max-width: 1920px){
.device_list{
height: 811px!important;
- overflow: scroll;
}
}
@media screen and (min-width: 1400px) and (max-width: 1680px){
.device_list{
height: 663px!important;
- overflow: scroll;
}
}
@media screen and (min-width: 1280px) and (max-width: 1400px){
.device_list{
height: 564px!important;
- overflow: scroll;
}
}
@media screen and (max-width: 1280px){
.device_list{
height: 564px!important;
- overflow: scroll;
}
}
</style>
--
Gitblit v1.9.3