From 445007f79c0162c3cd88ace0d3608fd6dbf0c719 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期五, 21 三月 2025 14:09:50 +0800
Subject: [PATCH] 工时管理-样式优化
---
src/views/performance/manHour/workTimeManagement.vue | 140 +++++++---------------
src/views/standard/model/index.vue | 2
src/views/performance/manHour/workTimeStatistics.vue | 112 ++++++-----------
src/views/performance/manHour/workTimeConfig.vue | 84 ++++---------
4 files changed, 115 insertions(+), 223 deletions(-)
diff --git a/src/views/performance/manHour/workTimeConfig.vue b/src/views/performance/manHour/workTimeConfig.vue
index 6e2a3e5..d02ceba 100644
--- a/src/views/performance/manHour/workTimeConfig.vue
+++ b/src/views/performance/manHour/workTimeConfig.vue
@@ -1,33 +1,32 @@
<template>
- <div class="work-time-config">
+ <div class="capacity-scope">
<div class="search">
- <div class="search_thing">
- <div class="search_label">缂栧彿锛�</div>
- <div class="search_input">
- <el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="queryParams.number"
- @keyup.enter.native="refreshTable()"></el-input>
- </div>
+ <div>
+ <el-form :model="queryParams" ref="queryParams" size="small" :inline="true">
+ <el-form-item label="缂栧彿" prop="number">
+ <el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="queryParams.number"
+ @keyup.enter.native="refreshTable()"></el-input>
+ </el-form-item>
+ <el-form-item label="瀹為獙瀹�" prop="laboratory">
+ <el-select v-model="queryParams.laboratory" placeholder="鍏ㄩ儴" size="small" @change="refreshTable()" clearable>
+ <el-option v-for="item in laboratoryList" :key="item.value" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="閮ㄩ棬" prop="department">
+ <el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="queryParams.department"
+ @keyup.enter.native="refreshTable()"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" size="mini" @click="refreshTable">鏌ヨ</el-button>
+ <el-button size="mini" @click="refresh">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
</div>
- <div class="search_thing">
- <div class="search_label">瀹為獙瀹わ細</div>
- <el-select v-model="queryParams.laboratory" placeholder="鍏ㄩ儴" size="small" @change="refreshTable()" clearable>
- <el-option v-for="item in laboratoryList" :key="item.value" :label="item.label" :value="item.value">
- </el-option>
- </el-select>
+ <div>
+ <el-button size="small" type="primary" @click="openAdd('鏂板')"
+ v-if="checkPermi(['performance:manHour:workTimeConfig:add'])">鏂� 澧�</el-button>
</div>
- <div class="search_thing">
- <div class="search_label">閮ㄩ棬锛�</div>
- <div class="search_input">
- <el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="queryParams.department"
- @keyup.enter.native="refreshTable()"></el-input>
- </div>
- </div>
- <div class="search_thing" style="padding-left: 30px">
- <el-button size="mini" type="primary" @click="refreshTable()">鏌ヨ</el-button>
- <el-button size="mini" @click="refresh()">閲嶇疆</el-button>
- </div>
- <el-button size="small" type="primary" style="position: absolute; right: 50px" @click="openAdd('鏂板')"
- v-if="checkPermi(['performance:manHour:workTimeConfig:add'])">鏂� 澧�</el-button>
</div>
<div class="table">
<lims-table :tableData="tableData" :column="column" :tableLoading="tableLoading" :height="'calc(100vh - 290px)'"
@@ -112,7 +111,6 @@
{ label: "澶囨敞", prop: "remarks" },
{
dataType: "action",
- fixed: "right",
label: "鎿嶄綔",
operation: [
{
@@ -144,7 +142,7 @@
],
page: {
total: 0,
- size: 10,
+ size: 20,
current: 0,
},
tableLoading: false,
@@ -290,35 +288,9 @@
</script>
<style scoped>
-.work-time-config {
- height: 100%;
-}
-
.search {
- background-color: #fff;
- height: 80px;
+ height: 46px;
display: flex;
- align-items: center;
-}
-
-.search_thing {
- width: 250px;
- display: flex;
- align-items: center;
-}
-
-.search_label {
- width: 70px;
- font-size: 14px;
- text-align: right;
-}
-
-.search_input {
- width: calc(100% - 70px);
-}
-
-.table {
- padding: 10px;
- padding-top: 0;
+ justify-content: space-between;
}
</style>
diff --git a/src/views/performance/manHour/workTimeManagement.vue b/src/views/performance/manHour/workTimeManagement.vue
index 9729691..f709c4f 100644
--- a/src/views/performance/manHour/workTimeManagement.vue
+++ b/src/views/performance/manHour/workTimeManagement.vue
@@ -1,69 +1,47 @@
<template>
<!--鏃ュ伐鏃剁鐞�-->
- <div class="work-time-management">
- <div class="search">
- <div class="search_thing" style="width: 200px">
- <div class="search_label">鏄熸湡锛�</div>
- <el-select v-model="entity.weekDay" clearable placeholder="鍏ㄩ儴" size="small" @change="refreshTable()">
- <el-option v-for="item in weekList" :key="item.value" :label="item.label" :value="item.value">
- </el-option>
- </el-select>
- </div>
- <div class="search_thing" style="width: 390px">
- <div class="search_label" style="width: 90px">鏃堕棿鑼冨洿锛�</div>
- <div class="search_input">
+ <div class="capacity-scope">
+ <div>
+ <el-form :model="entity" ref="entity" size="small" :inline="true">
+ <el-form-item label="鏄熸湡" prop="weekDay" class="form-item">
+ <el-select v-model="entity.weekDay" clearable placeholder="鍏ㄩ儴" size="small" @change="refreshTable()">
+ <el-option v-for="item in weekList" :key="item.value" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鏃堕棿鑼冨洿" prop="dateTime" class="dateTime">
<el-date-picker v-model="entity.dateTime" clearable end-placeholder="缁撴潫鏃ユ湡" format="yyyy-MM-dd"
- range-separator="鑷�" size="small" start-placeholder="寮�濮嬫棩鏈�" style="width: 100%" type="daterange"
- value-format="yyyy-MM-dd" @change="refreshTable()">
+ range-separator="鑷�" size="small" start-placeholder="寮�濮嬫棩鏈�" type="daterange"
+ style="width: 100%"
+ value-format="yyyy-MM-dd" @change="refreshTable()">
</el-date-picker>
- </div>
- </div>
- <!-- 浠ヤ笅杩欎袱涓负缁勯暱瑙掕壊鐗规湁鐨� -->
- <div class="search_thing" style="width: 200px">
- <div class="search_label">鍚嶅瓧锛�</div>
- <el-input v-model="entity.name" clearable placeholder="璇疯緭鍏�" size="small"
- @keyup.enter.native="refreshTable()"></el-input>
- </div>
- <div v-if="currentTable == 'ValueTable1'" class="search_thing" style="width: 250px">
- <div class="search_label" style="width: 120px">鏍峰搧缂栧彿锛�</div>
- <el-input v-model="entity.sample" clearable placeholder="璇疯緭鍏�" size="small"
- @keyup.enter.native="refreshTable()"></el-input>
- </div>
- <div v-if="currentTable == 'ValueTable0'" class="search_thing" style="width: 200px">
- <div class="search_label">鐘舵�侊細</div>
- <el-select v-model="entity.state" placeholder="鍏ㄩ儴" size="small" @change="refreshTable()" clearable>
- <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value">
- </el-option>
- </el-select>
- </div>
- <div class="search_thing" style="padding-left: 30px; width: 100px">
- <el-button size="mini" type="primary" @click="refreshTable()">鏌ヨ</el-button>
- <el-button size="mini" @click="refresh()">閲嶇疆</el-button>
- </div>
+ </el-form-item>
+ <el-form-item label="鍚嶅瓧" prop="name">
+ <el-input v-model="entity.name" clearable placeholder="璇疯緭鍏�" size="small"
+ @keyup.enter.native="refreshTable()"></el-input>
+ </el-form-item>
+ <el-form-item label="鐘舵��" prop="state" v-if="currentTable == 'ValueTable0'">
+ <el-select v-model="entity.state" placeholder="鍏ㄩ儴" size="small" @change="refreshTable()" clearable>
+ <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鏍峰搧缂栧彿" prop="sample" v-if="currentTable == 'ValueTable1'">
+ <el-input v-model="entity.sample" clearable placeholder="璇疯緭鍏�" size="small"
+ @keyup.enter.native="refreshTable()"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" size="mini" @click="refreshTable">鏌ヨ</el-button>
+ <el-button size="mini" @click="refresh">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
</div>
- <div style="display: flex; align-items: center; justify-content: space-between">
+ <div style="display: flex; align-items: center; justify-content: space-between;margin-bottom: 10px">
<el-radio-group :key="'111'" v-model="currentTable" size="small" @change="searchList">
<el-radio-button label="ValueTable0"> 杈呭姪宸ユ椂 </el-radio-button>
<el-radio-button label="ValueTable1"> 浜ч噺宸ユ椂 </el-radio-button>
</el-radio-group>
<div style="display: flex; align-items: center">
-<!-- <p style="font-size: 14px; margin-right: 30px">-->
-<!-- 鎬诲伐鏃舵眹鎬伙細<span v-if="totalInfo" style="font-size: 16px; color: #3a7bfa">{{-->
-<!-- totalInfo["浜ч噺宸ユ椂姹囨��"] + totalInfo["杈呭姪宸ユ椂姹囨��"]-->
-<!-- ? Number(-->
-<!-- totalInfo["浜ч噺宸ユ椂姹囨��"] + totalInfo["杈呭姪宸ユ椂姹囨��"]-->
-<!-- ).tofixed(4)-->
-<!-- : 0-->
-<!-- }}</span> 浜ч噺宸ユ椂姹囨�伙細<span v-if="totalInfo" style="font-size: 16px; color: #3a7bfa">{{-->
-<!-- totalInfo["浜ч噺宸ユ椂姹囨��"]-->
-<!-- ? Number(totalInfo["浜ч噺宸ユ椂姹囨��"]).tofixed(4)-->
-<!-- : 0-->
-<!-- }}</span> 杈呭姪宸ユ椂姹囨�伙細<span v-if="totalInfo" style="font-size: 16px; color: #3a7bfa">{{-->
-<!-- totalInfo["杈呭姪宸ユ椂姹囨��"]-->
-<!-- ? Number(totalInfo["杈呭姪宸ユ椂姹囨��"]).tofixed(4)-->
-<!-- : 0-->
-<!-- }}</span>-->
-<!-- </p>-->
<el-button v-show="currentTable == 'ValueTable0' &&
checkPermi(['performance:manHour:workTimeManagement:add'])
" size="small" type="primary" @click="openAdd">褰曞叆鏁版嵁</el-button>
@@ -78,12 +56,12 @@
</div>
<div class="table">
<lims-table :tableData="tableData" :column="column" :page="page" :tableLoading="tableLoading"
- key="tableData"
- :height="'calc(100vh - 350px)'" :isSelection="true" v-if="currentTable == 'ValueTable0'"
- @pagination="pagination" :handleSelectionChange="handleSelectionChange"></lims-table>
+ key="tableData" :height="'calc(100vh - 330px)'"
+ :isSelection="true" v-if="currentTable == 'ValueTable0'"
+ @pagination="pagination" :handleSelectionChange="handleSelectionChange"></lims-table>
<lims-table :tableData="tableData0" :column="column0" :page="page0" :tableLoading="tableLoading"
- key="tableData0"
- :height="'calc(100vh - 350px)'" v-if="currentTable == 'ValueTable1'" @pagination="pagination0"></lims-table>
+ key="tableData0" :height="'calc(100vh - 330px)'"
+ v-if="currentTable == 'ValueTable1'" @pagination="pagination0"></lims-table>
</div>
<el-dialog :before-close="handleClose" :title="formData.id ? '缂栬緫' : '褰曞叆鏁版嵁'" :visible.sync="addVisible"
width="600px">
@@ -106,7 +84,6 @@
<el-input v-model="formData.week" disabled size="small"></el-input>
</el-form-item>
<el-form-item label="鏄熸湡:">
- <!-- <el-input v-model="formData.weekDay" size="small" disabled></el-input> -->
<el-select v-model="formData.weekDay" disabled placeholder="璇烽�夋嫨" size="small">
<el-option v-for="item in weekList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
@@ -428,7 +405,7 @@
],
page: {
total: 0,
- size: 10,
+ size: 20,
current: 1,
},
tableLoading: false,
@@ -450,7 +427,7 @@
],
page0: {
total: 0,
- size: 10,
+ size: 20,
current: 1,
},
shifList: [],
@@ -915,37 +892,10 @@
</script>
<style scoped>
-.work-time-management {
- height: 100%;
- overflow-y: scroll;
- padding: 20px;
- padding-top: 0;
- /* scrollbar-width: none; */
+.form-item >>>.el-form-item__content {
+ width: 120px;
}
-
-/* .work-time-management::-webkit-scrollbar {
- display: none;
-} */
-.search {
- background-color: #fff;
- height: 80px;
- display: flex;
- align-items: center;
-}
-
-.search_thing {
- width: 300px;
- display: flex;
- align-items: center;
-}
-
-.search_label {
- width: 70px;
- font-size: 14px;
- text-align: right;
-}
-
-.search_input {
- width: calc(100% - 70px);
+.dateTime >>>.el-form-item__content {
+ width: 260px;
}
</style>
diff --git a/src/views/performance/manHour/workTimeStatistics.vue b/src/views/performance/manHour/workTimeStatistics.vue
index 9b89a33..9719c9c 100644
--- a/src/views/performance/manHour/workTimeStatistics.vue
+++ b/src/views/performance/manHour/workTimeStatistics.vue
@@ -1,51 +1,48 @@
<template>
- <div>
+ <div class="capacity-scope">
<div>
<div class="search">
- <div class="search_thing">
- <div class="search_label">鏃ユ湡锛�</div>
- <div class="search_input" style="display: flex; align-items: center">
- <el-date-picker
- v-model="queryParams.month"
- :clearable="false"
- format="yyyy-MM"
- placeholder="閫夋嫨鏈�"
- size="small"
- style="width: 100%"
- type="month"
- value-format="yyyy-MM"
- @change="refreshTable()"
- >
- </el-date-picker>
- </div>
- </div>
- <div class="search_thing">
- <div class="search_label">鍛樺伐锛�</div>
- <el-input
- v-model="queryParams.name"
- clearable
- placeholder="璇疯緭鍏�"
- size="small"
- @keyup.enter.native="refreshTable()"
- ></el-input>
- </div>
- <div class="search_thing" style="padding-left: 30px">
- <el-button size="mini" type="primary" @click="refreshTable()">鏌ヨ</el-button>
- <el-button size="mini" @click="refresh()">閲嶇疆</el-button>
+ <div>
+ <el-form :model="queryParams" ref="queryParams" size="small" :inline="true">
+ <el-form-item label="鏃ユ湡" prop="month">
+ <el-date-picker
+ v-model="queryParams.month"
+ :clearable="false"
+ format="yyyy-MM"
+ placeholder="閫夋嫨鏈�"
+ size="small"
+ style="width: 100%"
+ type="month"
+ value-format="yyyy-MM"
+ @change="refreshTable()"
+ >
+ </el-date-picker>
+ </el-form-item>
+ <el-form-item label="鍛樺伐" prop="name">
+ <el-input
+ v-model="queryParams.name"
+ clearable
+ placeholder="璇疯緭鍏�"
+ size="small"
+ @keyup.enter.native="refreshTable()"
+ ></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" size="mini" @click="refreshTable">鏌ヨ</el-button>
+ <el-button size="mini" @click="refresh">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
</div>
</div>
- <div class="table">
- <limsTable
- :column="tableColumn"
- :table-data="tableData"
- :table-loading="tableLoading"
- :page="page"
- style="padding: 0 15px"
- :height="'calc(100vh - 290px)'"
- @pagination="pagination"
- >
- </limsTable>
- </div>
+ <limsTable
+ :column="tableColumn"
+ :table-data="tableData"
+ :table-loading="tableLoading"
+ :page="page"
+ :height="'calc(100vh - 290px)'"
+ @pagination="pagination"
+ >
+ </limsTable>
</div>
</div>
</template>
@@ -96,7 +93,7 @@
tableLoading: false,
page: {
total: 0,
- size: 10,
+ size: 20,
current: 0,
},
};
@@ -135,32 +132,5 @@
</script>
<style scoped>
-.work-time-statistics {
- height: 100%;
-}
-.search {
- background-color: #fff;
- height: 80px;
- display: flex;
- align-items: center;
-}
-.search_thing {
- width: 270px;
- display: flex;
- align-items: center;
-}
-
-.search_label {
- width: 60px;
- font-size: 14px;
- text-align: right;
-}
-
-.search_input {
- width: calc(100% - 60px);
-}
-.table {
- height: calc(100% - 60px - 80px - 10px - 40px - 25px);
-}
</style>
diff --git a/src/views/standard/model/index.vue b/src/views/standard/model/index.vue
index 05bd285..5736379 100644
--- a/src/views/standard/model/index.vue
+++ b/src/views/standard/model/index.vue
@@ -2,7 +2,7 @@
<div class="capacity-scope">
<div class="search">
<div>
- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
+ <el-form :model="queryParams" ref="queryParams" size="small" :inline="true">
<el-form-item label="妯℃澘鍚嶇О" prop="name">
<el-input v-model="queryParams.name" clearable placeholder="璇疯緭鍏�" size="small"
@keyup.enter.native="refreshTable()"></el-input>
--
Gitblit v1.9.3