Skip to content

A
attendance-performance-platform
Commit a451bdac authored by 姬鋆屾's avatar 姬鋆屾
Browse files
Options

tui

parent 9d7be967
Hide whitespace changes
Inline Side-by-side
Showing with 408 additions and 348 deletions
attendance-performance-manager-ui/admin/src/views/staff/list.vue
View file @ a451bdac
<template>
<div class="page">
<div style="margin:10px 0">
<tab-pane :thirdList="thirdList" :activeName="activeName" @handleClick="handleClick"></tab-pane>
<div class="page">
<div style="margin:10px 0">
<tab-pane
:thirdList="thirdList"
:activeName="activeName"
@handleClick="handleClick"
></tab-pane>
</div>
<div class="totalNum flex" v-if="tableData.staff">
<div class="item">
在职员工 <span class="num">{{ tableData.staff.inWorkStaff }}</span>
</div>
<div class="item flex">
<div>
全职 <span class="num">{{ tableData.staff.fullStaff }}</span>
</div>
<div class="totalNum flex" v-if="tableData.staff">
<div class="item">在职员工 <span class="num">{{tableData.staff.inWorkStaff}}</span></div>
<div class="item flex">
<div>全职 <span class="num">{{tableData.staff.fullStaff}}</span></div>
<div>实习 <span class="num">{{tableData.staff.pricateStaff}}</span></div>
<div>兼职 <span class="num">{{tableData.staff.concurrentlyStaff}}</span></div>
</div>
<div class="item flex">
<div>试用 <span class="num">{{tableData.staff.onTrialStaff}}</span></div>
<div>正式 <span class="num">{{tableData.staff.formalStaff}}</span></div>
<div>待离职 <span class="num">{{tableData.staff.resignationStaff}}</span></div>
</div>
<div>
实习 <span class="num">{{ tableData.staff.pricateStaff }}</span>
</div>
<div>
兼职 <span class="num">{{ tableData.staff.concurrentlyStaff }}</span>
</div>
<el-row :gutter="20">
<el-col :span="6" :xs="12" class="mytree">
<div class="titles">选择部门</div>
<!-- default-expand-all -->
<el-scrollbar style="height: 100%">
<el-tree
size="mini"
ref="siteTree"
:data="areaData"
id="el-tree"
node-key="id"
:props="treeProps"
:load="loadNode"
highlight-current
:expand-on-click-node="false"
:render-content="renderContent"
@node-click="handleNodeClick"
>
</el-tree>
</el-scrollbar>
</el-col>
<el-col :span="18" :xs="12">
</div>
<el-row>
<LayoutTable notDel :data="tableData" :config="tableConfig">
<el-button type="primary" @click="doExport" :disabled="isExport"
size="mini" slot="table-head-left2">导出</el-button>
<el-dropdown class="moreControll" slot="table-head-left2" style="margin-left:20px">
<el-button type="primary" size="mini">
更多操作<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<el-button type="text">同步数据</el-button>
</el-dropdown-item>
<el-dropdown-item>
<el-button type="text" @click="handleImport">导入花名册</el-button>
</el-dropdown-item>
<el-dropdown-item>
<el-button type="text" @click="lookDetailHis">历史花名册</el-button>
</el-dropdown-item>
<el-dropdown-item>
<el-button type="text" @click="SelectEXport">自定义列表字段</el-button>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div class="item flex">
<div>
试用 <span class="num">{{ tableData.staff.onTrialStaff }}</span>
</div>
<div>
正式 <span class="num">{{ tableData.staff.formalStaff }}</span>
</div>
<div>
待离职 <span class="num">{{ tableData.staff.resignationStaff }}</span>
</div>
</div>
</div>
<el-row :gutter="20">
<el-col :span="6" :xs="12" class="mytree">
<div class="titles">选择部门</div>
<!-- default-expand-all -->
<el-scrollbar style="height:630px;overflow-y: auto;">
<el-tree
size="mini"
ref="siteTree"
:data="areaData"
id="el-tree"
node-key="id"
:props="treeProps"
:load="loadNode"
highlight-current
:expand-on-click-node="false"
:render-content="renderContent"
@node-click="handleNodeClick"
>
</el-tree>
</el-scrollbar>
</el-col>
<el-col :span="18" :xs="12">
<el-row>
<LayoutTable notDel :data="tableData" :config="tableConfig">
<el-button
type="primary"
@click="doExport"
:disabled="isExport"
size="mini"
slot="table-head-left2"
>导出</el-button
>
<el-dropdown
class="moreControll"
slot="table-head-left2"
style="margin-left:20px"
>
<el-button type="primary" size="mini">
更多操作<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<el-button type="text">同步数据</el-button>
</el-dropdown-item>
<el-dropdown-item>
<el-button type="text" @click="handleImport"
>导入花名册</el-button
>
</el-dropdown-item>
<el-dropdown-item>
<el-button type="text" @click="lookDetailHis"
>历史花名册</el-button
>
</el-dropdown-item>
<el-dropdown-item>
<el-button type="text" @click="SelectEXport"
>自定义列表字段</el-button
>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span class="freshTime" slot="table-head-left2">
<i class="el-icon-refresh"></i>
<span>上次同步时间：{{tableData.staff.refreshDate}}</span>
</span>
</LayoutTable>
</el-row>
</el-col>
<span class="freshTime" slot="table-head-left2">
<i class="el-icon-refresh"></i>
<span>上次同步时间：{{ tableData.staff.refreshDate }}</span>
</span>
</LayoutTable>
</el-row>
<!-- 导入对话框 -->
<el-dialog
:title="upload.title"
:visible.sync="upload.open"
width="400px"
append-to-body
>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
</el-col>
</el-row>
<!-- 导入对话框 -->
<el-dialog
:title="upload.title"
:visible.sync="upload.open"
width="400px"
append-to-body
>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的数据
<el-link
type="primary"
style="font-size: 14px"
@click="downloadTemplate"
>下载模板</el-link
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
<el-checkbox
v-model="upload.updateSupport"
/>是否更新已经存在的数据
<el-link type="primary" style="font-size: 14px" @click="downloadTemplate"
>下载模板</el-link
>
</div>
<div class="el-upload__tip" style="color: red" slot="tip">
提示：仅允许导入“xls”或“xlsx”格式文件！
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
</div>
<div class="el-upload__tip" style="color: red" slot="tip">
提示：仅允许导入“xls”或“xlsx”格式文件！
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
<!-- 花名册记录查看 -->
<el-drawer
title="历史花名册"
:visible.sync="drawerhistory"
direction="rtl">
<div class="hisList">
<div class="list mt10" v-for="item in 10" :key="item">
<div class="flex flex-align-center flex-pack-justify">
<div>花名册记录</div>
<el-button type="text">查看</el-button>
</div>
<div class="times">
导出时间：2020-08-13
</div>
</div>
</div>
</el-drawer>
<!-- 花名册记录查看 -->
<el-drawer title="历史花名册" :visible.sync="drawerhistory" direction="rtl">
<div class="hisList">
<div class="list mt10" v-for="item in 10" :key="item">
<div class="flex flex-align-center flex-pack-justify">
<div>花名册记录</div>
<el-button type="text">查看</el-button>
</div>
<div class="times">
导出时间：2020-08-13
</div>
</div>
</div>
</el-drawer>
<!-- 表格设置 -->
<el-dialog :visible.sync="isdialog" title="自定义列表字段设置">
<div class="tipsword">请选择表格展示字段，导出的表格中的内容选中的字段将保持一致。</div>
<el-checkbox-group v-model="checkList">
<el-checkbox v-for="(item,index) in setcolum" :key="index" :label="item.label">
</el-checkbox>
</el-checkbox-group>
<div class="mt20" style="text-align:right">
<el-button>取消</el-button>
<el-button type="primary">确定</el-button>
</div>
</el-dialog>
<!-- 表格设置 -->
<el-dialog :visible.sync="isdialog" title="自定义列表字段设置">
<div class="tipsword">
请选择表格展示字段，导出的表格中的内容选中的字段将保持一致。
</div>
<el-checkbox-group v-model="checkList">
<el-checkbox
v-for="(item, index) in setcolum"
:key="index"
:label="item.label"
>
</el-checkbox>
</el-checkbox-group>
<div class="mt20" style="text-align:right">
<el-button>取消</el-button>
<el-button type="primary">确定</el-button>
</div>
</el-dialog>
<drawer-show ref="drawerform" @ok="getData" :bumentree="areaData" />
</div>
<drawer-show ref="drawerform" @ok="getData" :bumentree="areaData" />
</div>
</template>
<script>
import {timestampToTime} from '@/assets/utils/dateFormat.js'
/** 表单弹出框模式需引入 */
import drawerShow from "./drawershow";
import table from "@/assets/mixins/table";
import tree from "@/assets/mixins/tree";
import TabPane from "@/components/tabPane.vue"
export default {
name: "StaffList",
components: {
drawerShow,
TabPane,
import { timestampToTime } from "@/assets/utils/dateFormat.js";
/** 表单弹出框模式需引入 */
import drawerShow from "./drawershow";
import table from "@/assets/mixins/table";
import tree from "@/assets/mixins/tree";
import TabPane from "@/components/tabPane.vue";
export default {
name: "StaffList",
components: {
drawerShow,
TabPane,
},
mixins: [table, tree],
created() {
this.$post("/dept/treeselect", {}).then(({ data }) => {
this.areaData = data.result;
});
},
methods: {
// 自定义字段
SelectEXport() {
this.setcolum = this.config.columns.filter(
(item) => item.label && item.prop
);
this.isdialog = true;
},
/** 导入 */
handleImport() {
this.upload.title = "员工导入";
this.upload.open = true;
},
handleClick(key) {
console.log(key);
this.$store.commit("setThirdPath", key);
this.$router.push({
path: key,
});
},
/** 重写新增方法 */
toAdd(row) {
this.$refs.drawerform.add(row);
},
/** 重写编辑方法 */
toEdit(row) {
this.$refs.drawerform.edit(row);
},
/** 重写查看方法 */
toView(row) {
// this.$refs.drawerform.view(row);
// console.log(row)
// this.personData = row
// this.isshowHome = true
this.$router.push({
path: "/staff/view",
query: {
id: row.id,
},
mixins: [table,tree],
created() {
this.$post("/dept/treeselect", {}).then(({ data }) => {
this.areaData = data.result
})
},
methods: {
// 自定义字段
SelectEXport(){
this.setcolum = this.config.columns.filter(item => item.label&&item.prop)
this.isdialog = true
},
/** 导入 */
handleImport() {
this.upload.title = "员工导入";
this.upload.open = true;
},
handleClick(key){
console.log(key)
this.$store.commit('setThirdPath',key)
this.$router.push({
path:key
})
},
/** 重写新增方法 */
toAdd(row) {
this.$refs.drawerform.add(row);
},
/** 重写编辑方法 */
toEdit(row) {
this.$refs.drawerform.edit(row);
},
/** 重写查看方法 */
toView(row) {
// this.$refs.drawerform.view(row);
// console.log(row)
// this.personData = row
// this.isshowHome = true
this.$router.push({
path:'/staff/view',
query:{
id:row.id
}
})
},
});
},
handleNodeClick(node) {
this.currentNode = node;
this.query = { deptId: node.id };
this.getData();
},
doExport(){
this.isExport = true;
let params = {}
for(let value of this.config.search){
if(this.query[value.name]){
params[value.name] = this.query[value.name]
}
}
if(this.selection.length>0){
params['idList'] = this.selection
}
this.$download("/staff/exportExcel", {
...params
}, { type: "excel" }).then(() => this.isExport = false).catch(error => {
this.isExport = false;
this.$message.error(error.message);
})
},
/** 下载模板操作 */
downloadTemplate() {
this.isExport = true;
this.$download("/staff/downloadTemplate", {}, { type: "excel" })
.then(() => (this.isExport = false))
.catch((error) => {
this.isExport = false;
this.$message.error(error.message);
})
},
// 导出花名册
lookDetailHis(){
console.log('1111')
this.drawerhistory = true
},
/** 提交上传文件 */
submitFileForm() {
this.$refs.upload.submit();
},
afterRender(data){
this.tableData.staff.refreshDate = timestampToTime(this.tableData.staff.refreshDate,6)
}
handleNodeClick(node) {
this.currentNode = node;
this.query = { deptId: node.id };
this.getData();
},
doExport() {
this.isExport = true;
let params = {};
for (let value of this.config.search) {
if (this.query[value.name]) {
params[value.name] = this.query[value.name];
}
}
if (this.selection.length > 0) {
params["idList"] = this.selection;
}
this.$download(
"/staff/exportExcel",
{
...params,
},
data() {
return {
// 用户导入参数
upload: {
headers:{
Authorization:window.sessionStorage.getItem('token') || ''
},
// 是否显示弹出层（员工关怀信息导入）
open: false,
// 弹出层标题（员工关怀信息导入）
title: "导入花名册数据",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的数据
updateSupport: 0,
// 上传的地址
url: process.env.VUE_APP_API_BASE_URL+"/staff/importData",
},
config: {
search: [
{
name: "name",
type: "text",
label: "员工姓名",
fuzzy: false
},
{
name:'phoneNumber',
type:'text',
label:'手机号',
fuzzy:false
}
],
columns: [
{type: "selection", width: 60},
{type: "index",label: "序号",width: 50},
{label: "员工姓名", prop: "name"},
{label: "工号", prop: "workNum"},
{label: "部门", prop: "deptName"},
{label: "职位", prop: "positionName",formatter:this.formatters},
{label: "员工类型", prop: "staffType",formatter: this.formatterType},
{label: "员工状态", prop: "status",formatter: this.formatter},
{label: "是否在政务中心", prop: "source",formatter: this.formatterSource},//未对
{label: "手机号", prop: "phoneNumber",formatter:this.formatters},
{
label: "操作",
width: 240,
formatter: row => {
return (
<table-buttons noAdd noDel noEdit row={row} onView={this.toView} />
)
}
}
],
isshowTabPane:false
},
isshowHome:false,
personData:[],
isExport:false,
staffInfo:{},
drawerhistory:false,
checkList:[],
setcolum:[],
isdialog:false
}
{ type: "excel" }
)
.then(() => (this.isExport = false))
.catch((error) => {
this.isExport = false;
this.$message.error(error.message);
});
},
/** 下载模板操作 */
downloadTemplate() {
this.isExport = true;
this.$download("/staff/downloadTemplate", {}, { type: "excel" })
.then(() => (this.isExport = false))
.catch((error) => {
this.isExport = false;
this.$message.error(error.message);
});
},
// 导出花名册
lookDetailHis() {
console.log("1111");
this.drawerhistory = true;
},
/** 提交上传文件 */
submitFileForm() {
this.$refs.upload.submit();
},
afterRender(data) {
this.tableData.staff.refreshDate = timestampToTime(
this.tableData.staff.refreshDate,
6
);
},
},
data() {
return {
// 用户导入参数
upload: {
headers: {
Authorization: window.sessionStorage.getItem("token") || "",
},
computed:{
thirdList(){
if(!this.$store.state.CurrentThirdArr) return []
return this.$store.state.CurrentThirdArr
// 是否显示弹出层（员工关怀信息导入）
open: false,
// 弹出层标题（员工关怀信息导入）
title: "导入花名册数据",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的数据
updateSupport: 0,
// 上传的地址
url: process.env.VUE_APP_API_BASE_URL + "/staff/importData",
},
config: {
search: [
{
name: "name",
type: "text",
label: "员工姓名",
fuzzy: false,
},
activeName(){
return this.$store.state.ThirdPath
}
}
{
name: "phoneNumber",
type: "text",
label: "手机号",
fuzzy: false,
},
],
columns: [
{ type: "selection", width: 60 },
{ type: "index", label: "序号", width: 50 },
{ label: "员工姓名", prop: "name" },
{ label: "工号", prop: "workNum" },
{ label: "部门", prop: "deptName" },
{ label: "职位", prop: "positionName", formatter: this.formatters },
{
label: "员工类型",
prop: "staffType",
formatter: this.formatterType,
},
{ label: "员工状态", prop: "status", formatter: this.formatter },
{
label: "是否在政务中心",
prop: "source",
formatter: this.formatterSource,
}, //未对
{ label: "手机号", prop: "phoneNumber", formatter: this.formatters },
{
label: "操作",
width: 240,
formatter: (row) => {
return (
<table-buttons
noAdd
noDel
noEdit
row={row}
onView={this.toView}
/>
);
},
},
],
isshowTabPane: false,
},
isshowHome: false,
personData: [],
isExport: false,
staffInfo: {},
drawerhistory: false,
checkList: [],
setcolum: [],
isdialog: false,
};
},
computed: {
thirdList() {
if (!this.$store.state.CurrentThirdArr) return [];
return this.$store.state.CurrentThirdArr;
},
activeName() {
return this.$store.state.ThirdPath;
},
},
};
</script>
<style>
.el-card__body {
padding: 10px;
......@@ -347,47 +407,47 @@
</style>
<style lang="scss" scoped>
.page{
.page {
min-width: 1400px;
}
.hisList{
padding: 15px;
.list{
background-color: rgba(64, 158, 255, 0.1);
font-size: 14px;
border-radius: 10px;
padding: 10px;
.times{
font-size: 12px;
color: #999;
}
.hisList {
padding: 15px;
.list {
background-color: rgba(64, 158, 255, 0.1);
font-size: 14px;
border-radius: 10px;
padding: 10px;
.times {
font-size: 12px;
color: #999;
}
}
}
.totalNum{
background: rgba(64, 158, 255,0.2);
.totalNum {
background: rgba(64, 158, 255, 0.2);
padding: 15px;
border-left: 4px solid rgb(20, 134, 248);
color: rgb(100, 100, 100);
.item{
.item {
padding: 0 10px;
border-right: 1px solid gray;
}
.item:last-child{
.item:last-child {
border: none;
}
.num{
color: #409EFF;
.num {
color: #409eff;
margin-left: 10px;
margin-right: 20px;
}
}
.controllList{
.controllList {
margin-top: 20px;
.moreControll{
.moreControll {
margin-left: 20px;
}
}
.freshTime{
.freshTime {
color: #999;
margin-left: 20px;
}
......@@ -401,16 +461,16 @@
.mytree ::v-deep {
padding: 10px;
.el-tree--highlight-current
::v-deep
.el-tree-node.is-checked
> .el-tree-node__content {
::v-deep
.el-tree-node.is-checked
> .el-tree-node__content {
background-color: rgb(255, 255, 255);
color: rgb(64, 158, 255);
}
.el-tree--highlight-current
::v-deep
.el-tree-node.is-current
> .el-tree-node__content {
::v-deep
.el-tree-node.is-current
> .el-tree-node__content {
background-color: rgb(255, 255, 255);
color: rgb(64, 158, 255);
}
......@@ -472,17 +532,17 @@
width: 24px;
}
}
.titles{
color: #409EFF;
.titles {
color: #409eff;
font-size: 16px;
display: flex;
align-items: center;
}
.titles::before{
content: '';
width:6px;
.titles::before {
content: "";
width: 6px;
height: 16px;
background-color: #409EFF;
background-color: #409eff;
display: inline-block;
margin-right: 10px;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment