公司管理完善接口调试完成
This commit is contained in:
parent
3952554cac
commit
6cc9faaa08
|
|
@ -12,7 +12,7 @@ export function addAndEditDivideCompanyManageAPI(data) {
|
||||||
// 删除分公司管理
|
// 删除分公司管理
|
||||||
export function deleteDivideCompanyManageAPI(data) {
|
export function deleteDivideCompanyManageAPI(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/system/dict/type/add',
|
url: '/bmw/subCompany/delSubCompany',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data,
|
data,
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -225,7 +225,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-menu-item.is-active {
|
.theme-dark .el-menu-item.is-active {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,357 @@
|
||||||
|
<template>
|
||||||
|
<div class="attendance-calendar">
|
||||||
|
<!-- 月份导航 -->
|
||||||
|
<div class="calendar-header">
|
||||||
|
<button @click="prevMonth">
|
||||||
|
<i class="el-icon-arrow-left"></i>
|
||||||
|
</button>
|
||||||
|
<h3>{{ currentYear }}年 {{ currentMonth }}月</h3>
|
||||||
|
<button @click="nextMonth">
|
||||||
|
<i class="el-icon-arrow-right"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 星期标题 -->
|
||||||
|
<div class="week-days">
|
||||||
|
<div class="week-day" v-for="day in weekDays" :key="day">{{
|
||||||
|
day
|
||||||
|
}}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 日历主体 -->
|
||||||
|
<div class="calendar-grid">
|
||||||
|
<!-- 上月日期占位 -->
|
||||||
|
<div
|
||||||
|
class="calendar-day prev-month"
|
||||||
|
v-for="day in prevMonthDays"
|
||||||
|
:key="'prev-' + day"
|
||||||
|
>
|
||||||
|
{{ day }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 本月日期 -->
|
||||||
|
<div
|
||||||
|
class="calendar-day current-month"
|
||||||
|
v-for="day in currentMonthDays"
|
||||||
|
:key="day"
|
||||||
|
:class="getAttendanceClass(day)"
|
||||||
|
@click="handleDateClick(day)"
|
||||||
|
>
|
||||||
|
<span class="day-number">{{ day }}</span>
|
||||||
|
<span
|
||||||
|
class="attendance-mark"
|
||||||
|
v-if="getAttendanceStatus(day)"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 下月日期占位 -->
|
||||||
|
<div
|
||||||
|
class="calendar-day next-month"
|
||||||
|
v-for="day in nextMonthDays"
|
||||||
|
:key="'next-' + day"
|
||||||
|
>
|
||||||
|
{{ day }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 图例说明 -->
|
||||||
|
<div class="legend">
|
||||||
|
<div class="legend-item">
|
||||||
|
<span class="legend-mark normal"></span>
|
||||||
|
<span>正常</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<span class="legend-mark late"></span>
|
||||||
|
<span>迟到</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<span class="legend-mark absent"></span>
|
||||||
|
<span>缺勤</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<span class="legend-mark leave"></span>
|
||||||
|
<span>请假</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'AttendanceCalendar',
|
||||||
|
props: {
|
||||||
|
// 考勤数据,格式: { date: '2023-10-01', status: 'normal|late|absent|leave' }
|
||||||
|
attendanceData: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentDate: new Date(),
|
||||||
|
weekDays: ['日', '一', '二', '三', '四', '五', '六'],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 当前年份
|
||||||
|
currentYear() {
|
||||||
|
return this.currentDate.getFullYear()
|
||||||
|
},
|
||||||
|
// 当前月份 (1-12)
|
||||||
|
currentMonth() {
|
||||||
|
return this.currentDate.getMonth() + 1
|
||||||
|
},
|
||||||
|
// 当月天数
|
||||||
|
currentMonthDays() {
|
||||||
|
return new Date(this.currentYear, this.currentMonth, 0).getDate()
|
||||||
|
},
|
||||||
|
// 当月第一天是星期几 (0-6)
|
||||||
|
firstDayOfMonth() {
|
||||||
|
return new Date(this.currentYear, this.currentMonth - 1, 1).getDay()
|
||||||
|
},
|
||||||
|
// 上月需要显示的天数
|
||||||
|
prevMonthDays() {
|
||||||
|
const prevMonth = this.currentMonth - 1 || 12
|
||||||
|
const prevMonthYear =
|
||||||
|
prevMonth === 12 ? this.currentYear - 1 : this.currentYear
|
||||||
|
const prevMonthTotalDays = new Date(
|
||||||
|
prevMonthYear,
|
||||||
|
prevMonth,
|
||||||
|
0,
|
||||||
|
).getDate()
|
||||||
|
|
||||||
|
return Array.from({ length: this.firstDayOfMonth }, (_, i) => {
|
||||||
|
return prevMonthTotalDays - this.firstDayOfMonth + i + 1
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 下月需要显示的天数
|
||||||
|
nextMonthDays() {
|
||||||
|
const totalDays = this.prevMonthDays.length + this.currentMonthDays
|
||||||
|
const nextDaysCount = 7 - (totalDays % 7 || 7)
|
||||||
|
return nextDaysCount < 7
|
||||||
|
? Array.from({ length: nextDaysCount }, (_, i) => i + 1)
|
||||||
|
: []
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 切换到上月
|
||||||
|
prevMonth() {
|
||||||
|
this.currentDate = new Date(
|
||||||
|
this.currentYear,
|
||||||
|
this.currentMonth - 2,
|
||||||
|
1,
|
||||||
|
)
|
||||||
|
this.$emit('month-change', {
|
||||||
|
year: this.currentYear,
|
||||||
|
month: this.currentMonth,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 切换到下月
|
||||||
|
nextMonth() {
|
||||||
|
this.currentDate = new Date(this.currentYear, this.currentMonth, 1)
|
||||||
|
this.$emit('month-change', {
|
||||||
|
year: this.currentYear,
|
||||||
|
month: this.currentMonth,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取指定日期的考勤状态
|
||||||
|
getAttendanceStatus(day) {
|
||||||
|
const dateStr = `${this.currentYear}-${String(
|
||||||
|
this.currentMonth,
|
||||||
|
).padStart(2, '0')}-${String(day).padStart(2, '0')}`
|
||||||
|
const record = this.attendanceData.find(
|
||||||
|
(item) => item.date === dateStr,
|
||||||
|
)
|
||||||
|
return record ? record.status : null
|
||||||
|
},
|
||||||
|
// 获取考勤状态对应的样式类
|
||||||
|
getAttendanceClass(day) {
|
||||||
|
const status = this.getAttendanceStatus(day)
|
||||||
|
return {
|
||||||
|
'has-attendance': !!status,
|
||||||
|
normal: status === 'normal',
|
||||||
|
late: status === 'late',
|
||||||
|
absent: status === 'absent',
|
||||||
|
leave: status === 'leave',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 点击日期
|
||||||
|
handleDateClick(day) {
|
||||||
|
const date = new Date(this.currentYear, this.currentMonth - 1, day)
|
||||||
|
const dateStr = `${this.currentYear}-${String(
|
||||||
|
this.currentMonth,
|
||||||
|
).padStart(2, '0')}-${String(day).padStart(2, '0')}`
|
||||||
|
const attendanceInfo = this.attendanceData.find(
|
||||||
|
(item) => item.date === dateStr,
|
||||||
|
)
|
||||||
|
|
||||||
|
this.$emit('date-click', {
|
||||||
|
date,
|
||||||
|
dateStr,
|
||||||
|
attendanceInfo,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
currentMonth() {
|
||||||
|
// 月份变化时可以做一些处理
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.attendance-calendar {
|
||||||
|
font-family: 'Arial', sans-serif;
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-header button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-header button:hover {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-header h3 {
|
||||||
|
margin: 0;
|
||||||
|
color: #333;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.week-days {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(7, 1fr);
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.week-day {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #666;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(7, 1fr);
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-day {
|
||||||
|
aspect-ratio: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 6px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-day:hover {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prev-month,
|
||||||
|
.next-month {
|
||||||
|
color: #ccc;
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-month {
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day-number {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attendance-mark {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 5px;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.normal .attendance-mark {
|
||||||
|
background-color: #4cd964; /* 正常-绿色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.late .attendance-mark {
|
||||||
|
background-color: #ffcc00; /* 迟到-黄色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.absent .attendance-mark {
|
||||||
|
background-color: #ff3b30; /* 缺勤-红色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.leave .attendance-mark {
|
||||||
|
background-color: #5ac8fa; /* 请假-蓝色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding-top: 10px;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-mark {
|
||||||
|
display: inline-block;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-mark.normal {
|
||||||
|
background-color: #4cd964;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-mark.late {
|
||||||
|
background-color: #ffcc00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-mark.absent {
|
||||||
|
background-color: #ff3b30;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-mark.leave {
|
||||||
|
background-color: #5ac8fa;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,11 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<h1>红绿灯统计</h1>
|
<h1>红绿灯统计</h1>
|
||||||
|
<AttendanceCalendar />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {}
|
import AttendanceCalendar from '@/components/AttendanceCalendar'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
AttendanceCalendar,
|
||||||
|
},
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style></style>
|
<style></style>
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
export const formLabel = [
|
export const formLabel = [
|
||||||
{
|
{
|
||||||
f_label: '关键词',
|
f_label: '关键词',
|
||||||
f_model: 'keyword',
|
f_model: 'subCompanyName',
|
||||||
f_type: 'ipt',
|
f_type: 'ipt',
|
||||||
isShow: false, // 是否展示label
|
isShow: false, // 是否展示label
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
export const columnsList = [
|
export const columnsList = [
|
||||||
{ t_props: 'projectName', t_label: '分公司名称' },
|
{ t_props: 'subCompanyName', t_label: '分公司名称' },
|
||||||
{ t_props: 'xmb', t_label: '所属公司名称' },
|
{ t_props: 'companyName', t_label: '所属公司名称' },
|
||||||
{ t_props: 'name', t_label: '状态', t_slot: 'isEnable' },
|
{ t_label: '状态', t_slot: 'isEnable' },
|
||||||
{ t_props: 'type', t_label: '更新时间' },
|
{ t_props: 'updateTime', t_label: '更新时间' },
|
||||||
]
|
]
|
||||||
|
|
||||||
export const dialogConfig = {
|
export const dialogConfig = {
|
||||||
|
|
|
||||||
|
|
@ -176,6 +176,7 @@ export default {
|
||||||
|
|
||||||
// 公司下拉列表
|
// 公司下拉列表
|
||||||
companySelectList: [],
|
companySelectList: [],
|
||||||
|
companySelectAllList: [],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -183,7 +184,7 @@ export default {
|
||||||
// 获取公司下拉列表
|
// 获取公司下拉列表
|
||||||
async getCompanySelectList() {
|
async getCompanySelectList() {
|
||||||
const { rows: res } = await getCompanySelectListAPI()
|
const { rows: res } = await getCompanySelectListAPI()
|
||||||
this.companySelectList = res
|
this.companySelectAllList = res
|
||||||
},
|
},
|
||||||
|
|
||||||
// 新增或修改
|
// 新增或修改
|
||||||
|
|
@ -193,13 +194,18 @@ export default {
|
||||||
if (type === 2) {
|
if (type === 2) {
|
||||||
const { comId, subCompanyName, isEnable, id } = data
|
const { comId, subCompanyName, isEnable, id } = data
|
||||||
this.addOrEditForm = { comId, subCompanyName, isEnable, id }
|
this.addOrEditForm = { comId, subCompanyName, isEnable, id }
|
||||||
|
this.companySelectList = this.companySelectAllList
|
||||||
|
} else {
|
||||||
|
this.companySelectList = this.companySelectAllList.filter(
|
||||||
|
(e) => e.isEnable !== 0,
|
||||||
|
)
|
||||||
}
|
}
|
||||||
this.dialogConfig.outerVisible = true
|
this.dialogConfig.outerVisible = true
|
||||||
},
|
},
|
||||||
|
|
||||||
// 状态设置
|
// 状态设置
|
||||||
onHandleChangeIsEnable(data) {
|
onHandleChangeIsEnable(data) {
|
||||||
this.dialogConfig.outerTitle === ''
|
this.dialogConfig.outerTitle = ''
|
||||||
this.onHandleAddOrEditJobTypeConfirm({
|
this.onHandleAddOrEditJobTypeConfirm({
|
||||||
id: data.id,
|
id: data.id,
|
||||||
isEnable: data.isEnable,
|
isEnable: data.isEnable,
|
||||||
|
|
@ -208,7 +214,19 @@ export default {
|
||||||
|
|
||||||
// 删除
|
// 删除
|
||||||
onHandleDeleteJobType(data) {
|
onHandleDeleteJobType(data) {
|
||||||
console.log(data, '删除')
|
this.$confirm('确定删除该分公司吗?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
}).then(async () => {
|
||||||
|
const res = await deleteDivideCompanyManageAPI(data)
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$modal.msgSuccess('删除成功')
|
||||||
|
this.$refs.divideCompanyManageTableRef.getTableList()
|
||||||
|
} else {
|
||||||
|
this.$modal.msgError(res.msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
// 取消
|
// 取消
|
||||||
|
|
@ -233,11 +251,11 @@ export default {
|
||||||
async onHandleAddOrEditJobTypeConfirm(data) {
|
async onHandleAddOrEditJobTypeConfirm(data) {
|
||||||
const res = await addAndEditDivideCompanyManageAPI(data)
|
const res = await addAndEditDivideCompanyManageAPI(data)
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
this.$message.success('操作成功')
|
this.$modal.msgSuccess('操作成功')
|
||||||
this.handleCloseDialogOuter()
|
this.handleCloseDialogOuter()
|
||||||
this.$refs.divideCompanyManageTableRef.getTableList()
|
this.$refs.divideCompanyManageTableRef.getTableList()
|
||||||
} else {
|
} else {
|
||||||
this.$message.error(res.msg)
|
this.$modal.msgError(res.msg)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -256,7 +274,7 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
// this.getCompanySelectList()
|
this.getCompanySelectList()
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue