|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="app-container">
|
|
|
+ <div class="app-container inghse">
|
|
|
<div style="background-color: #fff;padding: 20px;border-radius: 10px; padding-bottom: 0;">
|
|
|
<p
|
|
|
style="margin: 0; font-weight: 800;font-size: 16px;color: #343434;display: flex;align-items: center;margin-bottom: 20px;border-left: 6px solid #03BF8A;margin-left: -20px;">
|
|
|
@@ -8,8 +8,9 @@
|
|
|
</p>
|
|
|
<div style="padding-bottom: 0;margin-bottom: 20px;">
|
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="108px">
|
|
|
- <el-form-item label="上午上班时间" prop="clockBeginAm">
|
|
|
- <el-time-picker v-model="queryParams.clockBeginAm" value-format="HH:mm:ss" format="HH:mm:ss" :picker-options="{'selectableRange':`${startime ? startime + ':00' : '00:00:00'}-23:59:59`}" style="width:180px" size="mini" placeholder="结束时间" />
|
|
|
+ <el-form-item label="模板名称" prop="clockName">
|
|
|
+ <el-input v-model="queryParams.clockName" placeholder="请输入内容" />
|
|
|
+ <!-- <el-time-picker v-model="queryParams.clockName" value-format="HH:mm:ss" format="HH:mm:ss" :picker-options="{'selectableRange':`${startime ? startime + ':00' : '00:00:00'}-23:59:59`}" style="width:180px" size="mini" placeholder="结束时间" /> -->
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button style="background-color: #03BF8A; border-color: #03BF8A;" type="primary" size="mini" @click="handleQuery">查询 </el-button>
|
|
|
@@ -23,7 +24,7 @@
|
|
|
<div style="display: flex; justify-content: space-between;">
|
|
|
<p style="margin: 0; font-weight: 800;font-size: 16px;color: #343434;display: flex;align-items: center;margin-bottom: 20px;border-left: 6px solid #03BF8A;">
|
|
|
<!-- <img src="../../../assets/images/icon_htgl_btzs.png" alt="" style="width: 16px;height: 20px;"> -->
|
|
|
- <span style="margin-left: 10px;">上班时间列表</span>
|
|
|
+ <span style="margin-left: 10px;">计划模板列表</span>
|
|
|
</p>
|
|
|
<div>
|
|
|
<el-col :span="1.5">
|
|
|
@@ -70,8 +71,86 @@
|
|
|
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
|
|
|
</el-row>
|
|
|
|
|
|
- <el-table :height="tableMaxHeight" v-loading="loading" :data="clockSetList" @selection-change="handleSelectionChange">
|
|
|
+ <div class="infinite-list" :style="dynamicStyle">
|
|
|
+ <el-row :gutter="10" style="margin: 0; " v-if="clockSetList.length !=0">
|
|
|
+ <el-col :span="6" v-for="(item,index) in clockSetList" :key="index">
|
|
|
+ <div class="section_11 flex-col" style="position: relative; padding-left: 0; padding-right: 0; padding-bottom: 0;">
|
|
|
+ <div class="section_12 flex-row" style="height: 30px; justify-content:flex-start;padding: 0 10px;">
|
|
|
+ <div @click="handleSelectionChange(item)" style="">
|
|
|
+ <img
|
|
|
+ class="thumbnail_21"
|
|
|
+ referrerpolicy="no-referrer"
|
|
|
+ src="../../../assets/images/icon_lby_gx_normal.png"
|
|
|
+ v-show="!item.isnum && isgsow"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ class="thumbnail_21"
|
|
|
+ referrerpolicy="no-referrer"
|
|
|
+ src="../../../assets/images/icon_lby_gx_selcted.png"
|
|
|
+ v-show="item.isnum && isgsow"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;width: 82%; margin-top: 1px;">
|
|
|
+ <div style="width: 100%; display: flex;">
|
|
|
+ <el-tooltip class="item" effect="dark" :content="item.clockName" placement="top-start">
|
|
|
+ <span class="text_26" style="margin-top: 0; height: 15px; line-height: 14px;">{{item.clockName}}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ <img
|
|
|
+ @click="handleUpdatet(item)" v-hasPermi="['system:user:edit']"
|
|
|
+ class="thumbnail_14"
|
|
|
+ referrerpolicy="no-referrer"
|
|
|
+ style="cursor: pointer;"
|
|
|
+ src="../../../assets/images/icon_htgl_rylb_bjs.png"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- <el-switch v-model="item.status" active-value="0" inactive-value="1" @change="handleStatusChange(item)"></el-switch> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper_15 ingsjlegsng " style="margin: 0; margin-top: 10px; padding: 0 10px; margin-top: 0; margin-bottom: 10px; margin-left: 25px;">
|
|
|
+ <div style="display: flex">
|
|
|
+ <p class="paragraph_5">上午上班时间：</p>
|
|
|
+ <!-- <el-tooltip class="item" effect="dark" :content="'视频地址:' + item.algorithmThreshold" placement="left-start"> -->
|
|
|
+ <p class="paragraph_5" >{{item.clockBeginAm}}</p>
|
|
|
+ <!-- </el-tooltip> -->
|
|
|
+ </div>
|
|
|
+ <div style="display: flex">
|
|
|
+ <p class="paragraph_5">下午下班时间：</p>
|
|
|
+ <!-- <el-tooltip class="item" effect="dark" :content="'视频地址:' + item.algorithmThreshold" placement="left-start"> -->
|
|
|
+ <p class="paragraph_5" >{{item.clockEndAm}}</p>
|
|
|
+ <!-- </el-tooltip> -->
|
|
|
+ </div>
|
|
|
+ <div style="display: flex">
|
|
|
+ <p class="paragraph_5">下午上班时间：</p>
|
|
|
+ <!-- <el-tooltip class="item" effect="dark" :content="'视频地址:' + item.algorithmThreshold" placement="left-start"> -->
|
|
|
+ <p class="paragraph_5" >{{item.clockBeginPm}}</p>
|
|
|
+ <!-- </el-tooltip> -->
|
|
|
+ </div>
|
|
|
+ <div style="display: flex">
|
|
|
+ <p class="paragraph_5">下午下班时间：</p>
|
|
|
+ <!-- <el-tooltip class="item" effect="dark" :content="'视频地址:' + item.algorithmThreshold" placement="left-start"> -->
|
|
|
+ <p class="paragraph_5" >{{item.clockEndPm}}</p>
|
|
|
+ <!-- </el-tooltip> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;" class="njgsebott njgsebottinghe ">
|
|
|
+ <p style="color: red;" @click="handleDelete(item)" v-hasPermi="['manage:clockSet:remove']">删除</p>
|
|
|
+ <p style="border-right: none; color: #03BF8A;" @click="handleUpdate(item)" v-hasPermi="['manage:clockSet:edit']">编辑</p>
|
|
|
+ <!-- <p @click="handleAuthRole(item)" v-hasPermi="['system:user:edit']">分配角色</p> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div v-if='clockSetList.length == 0'>
|
|
|
+ <el-empty :image-size="200"></el-empty>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <el-table :height="tableMaxHeight" v-loading="loading" :data="clockSetList" @selection-change="handleSelectionChange">
|
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="模板名称" align="center" prop="clockName" />
|
|
|
<el-table-column label="上午上班时间" align="center" prop="clockBeginAm" width="180">
|
|
|
<template slot-scope="scope">
|
|
|
<span>{{ scope.row.clockBeginAm }}</span>
|
|
|
@@ -92,7 +171,7 @@
|
|
|
<span>{{ scope.row.clockEndPm }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="备注" align="center" prop="remark" />
|
|
|
+
|
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button size="mini" style="width: 42px;height: 26px;
|
|
|
@@ -103,23 +182,10 @@
|
|
|
<el-button size="mini" type="text" style="width: 42px;height: 26px;background: #FFF1EA;
|
|
|
border-radius: 4px;border: 1px solid #FE570E;color: #FE570E;"
|
|
|
@click="handleDelete(scope.row)" v-hasPermi="['manage:clockSet:remove']">删除</el-button>
|
|
|
- <!-- <el-button
|
|
|
- size="mini"
|
|
|
- type="text"
|
|
|
- icon="el-icon-edit"
|
|
|
- @click="handleUpdate(scope.row)"
|
|
|
- v-hasPermi="['manage:clockSet:edit']"
|
|
|
- >修改</el-button>
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="text"
|
|
|
- icon="el-icon-delete"
|
|
|
- @click="handleDelete(scope.row)"
|
|
|
- v-hasPermi="['manage:clockSet:remove']"
|
|
|
- >删除</el-button> -->
|
|
|
+
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- </el-table>
|
|
|
+ </el-table> -->
|
|
|
|
|
|
<pagination
|
|
|
v-show="total>0"
|
|
|
@@ -167,6 +233,28 @@
|
|
|
<!-- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
|
|
|
|
|
</el-dialog> -->
|
|
|
+ <el-drawer
|
|
|
+ title="查看日期"
|
|
|
+ :visible.sync="opentime"
|
|
|
+ direction="rtl"
|
|
|
+ custom-class="demo-drawer"
|
|
|
+ ref="drawer"
|
|
|
+ :size="580"
|
|
|
+ :modal="false"
|
|
|
+ >
|
|
|
+ <div class="demo-drawer__content">
|
|
|
+ <el-calendar v-model="value">
|
|
|
+ <template slot="dateCell" slot-scope="{ date, data }">
|
|
|
+ <div class="date-content" @click="issh(date)">
|
|
|
+ <span class="text">{{ getDay(date) }}</span>
|
|
|
+ <span v-if="isWeek(date)" class="rest">休</span>
|
|
|
+ <span v-if="isWeekt(date)" class="rest" style="width: 26px; height: 26px; line-height: 26px;">补班</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-calendar>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -181,6 +269,7 @@ export default {
|
|
|
loading: true,
|
|
|
// 选中数组
|
|
|
ids: [],
|
|
|
+ value: new Date(),
|
|
|
// 非单个禁用
|
|
|
single: true,
|
|
|
// 非多个禁用
|
|
|
@@ -195,6 +284,7 @@ export default {
|
|
|
title: "",
|
|
|
// 是否显示弹出层
|
|
|
open: false,
|
|
|
+ opentime:false,
|
|
|
// 查询参数
|
|
|
queryParams: {
|
|
|
pageNum: 1,
|
|
|
@@ -226,6 +316,7 @@ export default {
|
|
|
],
|
|
|
},
|
|
|
tableMaxHeight:'200',
|
|
|
+ isgsow:true,
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -235,6 +326,14 @@ export default {
|
|
|
}
|
|
|
this.changeTableMaxHeight()
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ dynamicStyle() {
|
|
|
+ return {
|
|
|
+ overflow:'auto',
|
|
|
+ height: this.tableMaxHeight + 'px',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
mounted() {
|
|
|
window.onresize = () => {
|
|
|
this.changeTableMaxHeight()
|
|
|
@@ -242,11 +341,54 @@ export default {
|
|
|
this.changeTableMaxHeight()
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 标注今天日期
|
|
|
+ getDay(date) {
|
|
|
+ // this.gettime(date)
|
|
|
+ return date.getDate()
|
|
|
+ },
|
|
|
+ gettime(row){
|
|
|
+ const date = new Date(row);
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
|
+ const day = String(date.getDate()).padStart(2, '0');
|
|
|
+ return year+'-' + month+'-' +day
|
|
|
+ },
|
|
|
+ issh(data){
|
|
|
+ console.log(this.gettime(data))
|
|
|
+ },
|
|
|
+ // 判断是否周六日
|
|
|
+ isWeek(date) {
|
|
|
+ // console.log(this.gettime(date))
|
|
|
+ // 1. if else普通写法
|
|
|
+ // if (date.getDay() === 6 || date.getDay() === 0) {
|
|
|
+ // return true
|
|
|
+ // } else {
|
|
|
+ // return false
|
|
|
+ // }
|
|
|
+ // 2.优化：三元表达式写法
|
|
|
+ // console.log(date.getDay() === 6 || date.getDay() === 0)
|
|
|
+ return date.getDay() === 6 || date.getDay() === 0
|
|
|
+ },
|
|
|
+ isWeekt(date){
|
|
|
+ // console.log(this.gettime(date))
|
|
|
+ // 1. if else普通写法
|
|
|
+ let nhgse= [{time:'2025-08-12',name:'中秋节'},{time:'2025-08-15',name:'中秋节'},]
|
|
|
+ var index = nhgse.findIndex(item => item.time=== this.gettime(date))
|
|
|
+ // 2.优化：三元表达式写法
|
|
|
+ return index != -1
|
|
|
+ },
|
|
|
+
|
|
|
+ handleUpdatet(){
|
|
|
+ this.opentime = true
|
|
|
+ },
|
|
|
/** 查询打卡时间设置列表 */
|
|
|
getList() {
|
|
|
this.loading = true
|
|
|
listClockSet(this.queryParams).then(response => {
|
|
|
this.clockSetList = response.rows
|
|
|
+ this.clockSetList.filter(rou=>{
|
|
|
+ rou.isnum = false
|
|
|
+ })
|
|
|
this.total = response.total
|
|
|
this.loading = false
|
|
|
})
|
|
|
@@ -284,9 +426,23 @@ export default {
|
|
|
},
|
|
|
// 多选框选中数据
|
|
|
handleSelectionChange(selection) {
|
|
|
- this.ids = selection.map(item => item.clockSetId)
|
|
|
- this.single = selection.length!==1
|
|
|
- this.multiple = !selection.length
|
|
|
+ this.isgsow = false
|
|
|
+ selection.isnum = !selection.isnum
|
|
|
+ this.isgsow = true
|
|
|
+ let nhseg= []
|
|
|
+ this.clockSetList.filter(rou=>{
|
|
|
+ if(rou.isnum == true){
|
|
|
+ nhseg.push(rou)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(nhseg)
|
|
|
+ this.ids = nhseg.map(item => item.clockSetId)
|
|
|
+ console.log(this.ids,nhseg)
|
|
|
+ this.single = nhseg.length!==1
|
|
|
+ this.multiple = !nhseg.length
|
|
|
+ // this.ids = selection.map(item => item.clockSetId)
|
|
|
+ // this.single = selection.length!==1
|
|
|
+ // this.multiple = !selection.length
|
|
|
},
|
|
|
/** 新增按钮操作 */
|
|
|
handleAdd() {
|
|
|
@@ -360,3 +516,96 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.select-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-calendar-day {
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+::v-deep .el-calendar-table__row td::v-deep .el-calendar-table tr td:first-child, ::v-deep .el-calendar-table__row td.prev{
|
|
|
+ border:none;
|
|
|
+ }
|
|
|
+.date-content {
|
|
|
+ height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.date-content .rest {
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgb(250, 124, 77);
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+.date-content .text{
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ display: inline-block;
|
|
|
+
|
|
|
+}
|
|
|
+::v-deep .el-calendar-table td.is-selected .text{
|
|
|
+ background: #409eff;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+::v-deep .el-calendar__header {
|
|
|
+ // display: none
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .njgsebottinghe{
|
|
|
+ margin: 0 !important;
|
|
|
+ height: 40px;
|
|
|
+ p{
|
|
|
+ height: 40px !important;
|
|
|
+ line-height: 40px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ingsjlegsng{
|
|
|
+ .paragraph_5{
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #222327;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ngosie{
|
|
|
+ .el-form-item--medium .el-form-item__label{
|
|
|
+ line-height: 19px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .renset{
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
|
|
|
+ background-color:#F5F6F8;
|
|
|
+ }
|
|
|
+ .el-checkbox__input.is-checked .el-checkbox__inner{
|
|
|
+ background-color: #03BF8A;
|
|
|
+ border-color: #03BF8A;
|
|
|
+ }
|
|
|
+ .el-checkbox__input.is-indeterminate .el-checkbox__inner{
|
|
|
+ background-color: #03BF8A;
|
|
|
+ border-color: #03BF8A;
|
|
|
+ }
|
|
|
+ .qucheu{
|
|
|
+ .el-form-item--small.el-form-item{
|
|
|
+ border: 1px solid #E6E6E6;
|
|
|
+ }
|
|
|
+ .el-input__inner{
|
|
|
+ border:0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
wangmengwei