herenshan112
3 months ago
2 changed files with 376 additions and 63 deletions
@ -0,0 +1,274 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-08-11 14:11:11 |
||||
|
@ 备注: 公司值班 |
||||
|
--> |
||||
|
<script lang="ts" setup> |
||||
|
import { |
||||
|
companyDutyInit, |
||||
|
getYearMonthWorkMan, |
||||
|
delOneDayDuty, |
||||
|
} from "@/api/hr/paiban/index"; |
||||
|
|
||||
|
import SavePage from "@/views/hr/company/savePage.vue"; |
||||
|
|
||||
|
const pickMonth = ref(""); |
||||
|
const initConter = ref(""); |
||||
|
const isSelect = ref(false); |
||||
|
const saveOpen = ref(false); |
||||
|
const workManLsit = ref([]); |
||||
|
const saveInfo = reactive({ |
||||
|
id: 0, |
||||
|
orgid: 0, |
||||
|
orgname: "", |
||||
|
allDay: [], |
||||
|
baiTian: [], |
||||
|
days: 1, |
||||
|
holiday: 2, |
||||
|
month: 1, |
||||
|
night: [], |
||||
|
years: 2025, |
||||
|
isCompany: 0, |
||||
|
}); |
||||
|
const initInfo = () => { |
||||
|
companyDutyInit().then((res: any) => { |
||||
|
console.log("初始化数据：", res.data); |
||||
|
initConter.value = res.data; |
||||
|
getOrgList(res.data.currentOrg, res.data.year, res.data.month); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
//获取行政组织列表 |
||||
|
const getOrgList = (orgid: any, years: any, months: any) => { |
||||
|
getYearMonthWorkMan({ |
||||
|
orgId: orgid, |
||||
|
years: years, |
||||
|
month: months, |
||||
|
}).then((resData) => { |
||||
|
console.log("排班数据数据：", resData); |
||||
|
workManLsit.value = resData.data.list; |
||||
|
initConter.value.titlePc = resData.data.title; |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
initInfo(); |
||||
|
}); |
||||
|
//删除一设定人员 |
||||
|
const delTag = () => { |
||||
|
console.log("删除一设定人员"); |
||||
|
}; |
||||
|
//选中行政组织 |
||||
|
const pickOrg = (val: any) => { |
||||
|
getOrgList(val, initConter.value.year, initConter.value.month); |
||||
|
}; |
||||
|
//编辑数据 |
||||
|
const saveData = (ord: any, val: any) => { |
||||
|
console.log("编辑数据", ord, val); |
||||
|
saveInfo.id = val.id; |
||||
|
saveInfo.orgid = ord.id ? ord.id : ""; |
||||
|
saveInfo.orgname = ord.name ? ord.name : ""; |
||||
|
saveInfo.allDay = val.allDay ? val.allDay : []; |
||||
|
saveInfo.baiTian = val.baiTian ? val.baiTian : []; |
||||
|
saveInfo.days = val.days ? val.days : 1; |
||||
|
saveInfo.holiday = val.holiday ? val.holiday : 2; |
||||
|
saveInfo.month = val.month ? val.month : 1; |
||||
|
saveInfo.night = val.night ? val.night : []; |
||||
|
saveInfo.years = val.years ? val.years : 2025; |
||||
|
saveInfo.isCompany = ord.isCompany ? ord.isCompany : 0; |
||||
|
saveOpen.value = true; |
||||
|
console.log("编辑数据", saveInfo); |
||||
|
}; |
||||
|
|
||||
|
//清空值班人员 |
||||
|
const delOrgDuty = (ord: any, val: any) => { |
||||
|
console.log("清空值班人员", initConter.value, val); |
||||
|
delOneDayDuty({ id: val.id }).then(() => { |
||||
|
getOrgList(initConter.value.currentOrg, val.years, val.month); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
//刷新 |
||||
|
const pickRefresh = (ordId: any, years: any, months: any) => { |
||||
|
console.log("数据刷新", ordId, years, months); |
||||
|
getOrgList(ordId, years, months); |
||||
|
}; |
||||
|
//监听日期变化 |
||||
|
watch( |
||||
|
() => pickMonth.value, |
||||
|
(val: any) => { |
||||
|
let newDay = new Date(val); |
||||
|
let yearVal = val.getFullYear(); |
||||
|
let monthVal = val.getMonth() + 1; |
||||
|
getOrgList(initConter.value.currentOrg, yearVal, monthVal); |
||||
|
}, |
||||
|
{ |
||||
|
deep: true, |
||||
|
} |
||||
|
); |
||||
|
</script> |
||||
|
<template> |
||||
|
<div class="comBox"> |
||||
|
<el-card shadow="always"> |
||||
|
<template #header> |
||||
|
<div class="card_header"> |
||||
|
<div> |
||||
|
<el-select |
||||
|
v-if="initConter.orgLevel == 5" |
||||
|
v-model="initConter.currentOrg" |
||||
|
placeholder="请选择行政组织" |
||||
|
style="width: 300px" |
||||
|
@change="pickOrg($event)" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in initConter.orgList" |
||||
|
:key="item.id" |
||||
|
:label="item.name + '(' + item.id + ')'" |
||||
|
:value="item.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
<div v-else> |
||||
|
<div v-for="item in initConter.orgList"> |
||||
|
<span v-if="item.id == initConter.currentOrg" |
||||
|
>{{ item.name }}({{ item.id }})</span |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div>{{ initConter.titlePc }}</div> |
||||
|
<div> |
||||
|
<!-- <el-button type="primary">添加值班信息</el-button> --> |
||||
|
<el-date-picker v-model="pickMonth" type="month" placeholder="请选择月份" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<div class="deep_card__body"> |
||||
|
<table> |
||||
|
<tr class="tabelFirst"> |
||||
|
<td></td> |
||||
|
<td |
||||
|
align="center" |
||||
|
v-for="(item, index) in initConter.monthAllDay" |
||||
|
:key="index" |
||||
|
style="width: 300px" |
||||
|
> |
||||
|
{{ item }} |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr v-for="(item, index) in workManLsit" :key="index"> |
||||
|
<td>{{ item.orgInfo.name }}</td> |
||||
|
<td v-for="(us, usi) in item.dutyList" :key="usi"> |
||||
|
<div v-if="us.holiday == 1"> |
||||
|
<el-divider v-if="us.baiTian">白天</el-divider> |
||||
|
<el-space wrap> |
||||
|
<el-tag v-for="(mItem, mi) in us.baiTian" closable @close="delTag()">{{ |
||||
|
mItem.name |
||||
|
}}</el-tag> |
||||
|
</el-space> |
||||
|
<el-divider v-if="us.night">夜间</el-divider> |
||||
|
<el-space wrap> |
||||
|
<el-tag v-for="(mItem, mi) in us.night" closable @close="delTag()">{{ |
||||
|
mItem.name |
||||
|
}}</el-tag> |
||||
|
</el-space> |
||||
|
<el-divider v-if="us.allDay">全天</el-divider> |
||||
|
<el-space wrap> |
||||
|
<el-tag v-for="(mItem, mi) in us.allDay" closable @close="delTag()">{{ |
||||
|
mItem.name |
||||
|
}}</el-tag> |
||||
|
</el-space> |
||||
|
</div> |
||||
|
<div v-else> |
||||
|
<el-space wrap> |
||||
|
<el-tag v-for="(mItem, mi) in us.allDay" closable @close="delTag()">{{ |
||||
|
mItem.name |
||||
|
}}</el-tag> |
||||
|
</el-space> |
||||
|
</div> |
||||
|
|
||||
|
<div class="butBox"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
text |
||||
|
size="small" |
||||
|
@click="saveData(item.orgInfo, us)" |
||||
|
>编辑</el-button |
||||
|
> |
||||
|
<el-button |
||||
|
:disabled="us.id == 0" |
||||
|
type="danger" |
||||
|
text |
||||
|
size="small" |
||||
|
@click="delOrgDuty(item.orgInfo, us)" |
||||
|
>清空</el-button |
||||
|
> |
||||
|
</div> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
<SavePage |
||||
|
v-model:is-open="saveOpen" |
||||
|
:duty-cont="saveInfo" |
||||
|
:cumpany-id="initConter.currentOrg" |
||||
|
@pickRefresh="pickRefresh" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<style lang="scss" scoped> |
||||
|
.comBox { |
||||
|
padding: 10px 20px 0 20px; |
||||
|
:deep .el-card__header { |
||||
|
padding: 10px 15px; |
||||
|
} |
||||
|
.deep_card__body { |
||||
|
width: 100%; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
.card_header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
image-rendering: css; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.tableBox { |
||||
|
} |
||||
|
:deep table { |
||||
|
width: 100%; |
||||
|
border-collapse: collapse; |
||||
|
th: first-child; |
||||
|
td: first-child; |
||||
|
th:first-child { |
||||
|
z-index: 3; |
||||
|
/*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/ |
||||
|
background: #f4f4f5; |
||||
|
} |
||||
|
th, |
||||
|
td { |
||||
|
border: 1px solid #ddd; |
||||
|
padding: 5px 0 0 0px; |
||||
|
} |
||||
|
th { |
||||
|
background-color: #2196f3; |
||||
|
color: white; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
td { |
||||
|
min-width: 160px; |
||||
|
color: #555; |
||||
|
} |
||||
|
} |
||||
|
.butBox { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
border-top: 1px solid #ddd; |
||||
|
margin-top: 5px; |
||||
|
} |
||||
|
.tabelFirst { |
||||
|
position: sticky; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue