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