183 lines
4.6 KiB
Python
183 lines
4.6 KiB
Python
<template>
|
|
<div class="app-container">
|
|
<el-card>
|
|
<el-tabs type="border-card">
|
|
<el-tab-pane label="今日到岗">
|
|
<el-table
|
|
|
|
:data="userList.results"
|
|
style="width: 100%; margin-top: 6px"
|
|
highlight-current-row
|
|
row-key="id"
|
|
height="100"
|
|
stripe
|
|
border
|
|
v-el-height-adaptive-table="{ bottomOffset: 41 }"
|
|
>
|
|
<el-table-column type="index" width="50" label="序号" />
|
|
<el-table-column align="center" label="工号">
|
|
<template slot-scope="scope">{{ scope.row.number }}</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="姓名">
|
|
<template slot-scope="scope">{{ scope.row.name }}</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="到岗情况">
|
|
<template slot-scope="scope">
|
|
<el-tag type="success" v-if="scope.row.is_atwork">在岗</el-tag>
|
|
|
|
<el-tag type="danger" v-else>离岗</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column align="header-center" label="部门">
|
|
<template v-if="scope.row.dept_" slot-scope="scope">{{
|
|
scope.row.dept_.name
|
|
}}</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<pagination
|
|
v-show="userList.count > 0"
|
|
:total="userList.count"
|
|
:page.sync="listQuery.page"
|
|
:limit.sync="listQuery.page_size"
|
|
@pagination="getList"
|
|
/></el-tab-pane>
|
|
<el-tab-pane label="到岗统计">
|
|
<div class="container">
|
|
|
|
|
|
<span class="demonstration">年、月</span>
|
|
<el-date-picker
|
|
v-model="value2"
|
|
type="month"
|
|
placeholder="选择年月">
|
|
</el-date-picker>
|
|
<el-button type="primary" @click="submit">主要按钮</el-button>
|
|
</div>
|
|
|
|
<el-table
|
|
|
|
:data="atworkList"
|
|
style="width: 100%; margin-top: 6px"
|
|
highlight-current-row
|
|
row-key="id"
|
|
height="680"
|
|
stripe
|
|
border
|
|
v-el-height-adaptive-table="{ bottomOffset: 41 }"
|
|
>
|
|
<el-table-column type="index" width="50" label="序号" />
|
|
<el-table-column align="center" label="工号">
|
|
<template slot-scope="scope">{{ scope.row.number }}</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="姓名">
|
|
<template slot-scope="scope">{{ scope.row.name }}</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column align="header-center" label="部门">
|
|
<template slot-scope="scope">{{ scope.row.dept_name }}</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="出勤天数">
|
|
<template slot-scope="scope">{{ scope.row.count }}</template>
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
|
|
</el-tab-pane>
|
|
|
|
</el-tabs>
|
|
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
<style>
|
|
.avatar-uploader .el-upload {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: #409eff;
|
|
}
|
|
.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 100px;
|
|
height: 100px;
|
|
line-height: 100px;
|
|
text-align: center;
|
|
}
|
|
.avatar {
|
|
width: 100px;
|
|
height: 100px;
|
|
display: block;
|
|
}
|
|
</style>
|
|
<script>
|
|
import { getEmployeeList } from "@/api/employee";
|
|
import checkPermission from "@/utils/permission";
|
|
|
|
import {getatwork } from "@/api/srm";
|
|
import { upUrl, upHeaders } from "@/api/file";
|
|
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
|
|
import Treeselect from "@riophae/vue-treeselect";
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
|
export default {
|
|
components: { Pagination, Treeselect },
|
|
data() {
|
|
return {
|
|
userList: { count: 0 },
|
|
atworkList: "",
|
|
value3:null,
|
|
value2:null,
|
|
listLoading: true,
|
|
listQuery: {
|
|
page: 1,
|
|
page_size: 20,
|
|
},
|
|
|
|
atworkDate:{year:null,month:null},
|
|
};
|
|
},
|
|
computed: {},
|
|
watch: {},
|
|
created() {
|
|
this.getList();
|
|
|
|
},
|
|
methods: {
|
|
checkPermission,
|
|
//今日到岗
|
|
getList() {
|
|
this.listQuery.fields='number,name,is_atwork,dept_';
|
|
getEmployeeList(this.listQuery).then((response) => {
|
|
if (response.data) {
|
|
this.userList = response.data;
|
|
}
|
|
|
|
});
|
|
},
|
|
//到岗统计
|
|
|
|
submit()
|
|
{
|
|
|
|
this.atworkDate.year=this.value2.getFullYear();
|
|
this.atworkDate.month=this.value2.getMonth()+1;
|
|
|
|
getatwork(this.atworkDate).then((response) => {
|
|
if (response.data) {
|
|
this.atworkList = response.data;
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
},
|
|
};
|
|
</script>
|