dd_pc/src/views/welfare/flManagement.vue

<template>
	<div>
		<div class="all">
			<div class="flex-box-ce flex-d-wrap" style="margin-top: 16px;">
				<div class="flex-box" style="margin-bottom: 10px;">
					<el-button type="primary" size="medium" @click="openCz(1)" style="margin-left: 10px;" plain>发放功勋点</el-button>
					<el-button type="warning" size="medium" @click="openCz(2)" style="margin-left: 10px;" plain>回收功勋点</el-button>
					<el-button type="success" size="medium" @click="openCz(3)" style="margin-left: 10px;" plain>转换功勋点</el-button>
				</div>
				<div class="flex-box-end flex-v-ce" style="font-size: 16px;margin-left: 10px;margin-bottom: 10px;">
					<span>当前转换比例</span>
					<span class="blue" style="padding: 0 10px;font-weight: 600;">1 : 10</span>
					<i class="el-icon-edit" style="font-size: 16px;" @click="isZh = true"></i>
				</div>
				<div class="flex-1"></div>
				<div class="flex-box-ce" style="margin-bottom: 10px;">
					<div class="label">部门</div>
					<el-cascader
						size="medium"
						class="date-picker-width"
						v-model="dept_name"
						:options="dept_tree"
						:props="{ checkStrictly: true, value: 'id', label: 'name', children: '_child' }"
						ref="dept"
						clearable
						filterable
						placeholder="全公司"
					></el-cascader>
				</div>
				<div class="flex-box-ce" style="margin-bottom: 10px;">
					<div class="label">人员</div>
					<el-select v-model="select_employee_id" size="medium" filterable placeholder="请输入或选择人员" clearable>
						<el-option v-for="item in employee_map" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</div>
			</div>

			<el-table :data="list" style="width: 100%" v-loading="loading" @selection-change="deleteEvents">
				<el-table-column label="姓名" align="center" prop="point">
					<template slot-scope="scope">
						<div class="flex-box">
							<userImage :user_name="scope.row.employee_name" :img_url="scope.row.employee_img_url" width="50px" height="50px"></userImage>
							<span style="line-height: 50px; padding-left: 10px;">{{ scope.row.employee_name }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="部门" align="center" prop="point"></el-table-column>
				<el-table-column label="累计B分" align="center" prop="point"></el-table-column>
				<el-table-column label="当前可转B分" align="center" prop="point">
					<template slot="header" slot-scope="scope">
					  <el-tooltip effect="dark" placement="top-start">
					    <div slot="content">
					      <div style="margin-bottom: 10px;">说明</div>
					      <div style="padding-left: 20px;">
							  1、可转B分余额，来自员工在企业内所得的累计B分（包含基础分和工龄分）			        <br />
							  2、员工可以通过获得更多的累计B分，来增加可转B分余额的收入			        <br />
							  3、回收功勋点不会增加可转B分余额			        <br />
							  4、转换成功勋点后，余额将被扣除
					      </div>
					    </div>
					    <span>
					      <span>当前可转B分</span>
					      <i class="el-icon-warning"></i>
					    </span>
					  </el-tooltip>
					</template>
					
				</el-table-column>
				<el-table-column label="转换后可得功勋点" align="center" prop="point"></el-table-column>
				<el-table-column label="现有功勋点" align="center" prop="point"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-link type="primary" @click="moreMessage(scope.row.id)" :underline="false" style="padding-right: 10px;">个人明显</el-link>
						<el-dropdown @command="handleCommand">
							<el-button size="mini">
								管理
								<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item :command="{id:scope.row.employee_id,name:'1'}">发放</el-dropdown-item>
								<el-dropdown-item :command="{id:scope.row.employee_id,name:'2'}">回收</el-dropdown-item>
								<el-dropdown-item :command="{id:scope.row.employee_id,name:'3'}">转换</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
				<template slot="empty">
					<div class="nopoint_box">
						<div class="noimg noperson"></div>
						<span class="title">没有对应的数据</span>
					</div>
				</template>
			</el-table>

			<center style="padding: 20px 0;">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="formData.page"
					:page-sizes="[10, 20, 50, 100]"
					layout="total, sizes, prev, pager, next"
					:page-size="pageLimit"
					:total="total"
				></el-pagination>
			</center>
		</div>
		<!-- 转换设置 -->
		<el-dialog title="转换设置" :visible.sync="isZh" width="500px" top="10%">
			<div class="flex-box-ce" style="margin-bottom: 20px;">
				<span class="yellow flex-1">B分转换功勋点将按以下比列进行转换</span>
				<span style="cursor: pointer;" class="blue" @click="innerVisible = true">查看转换历史</span>
			</div>
			<div class="flex-box-ce flex-center-center" style="margin-bottom: 10px;font-size: 16px;">
				<span>转换比例 1：</span>
			    <el-input type="text" class="width-250" v-model="zhNum" placeholder="请输入比例" @input="[zhNum=zhNum.replace(/[^\d]/g,'')]"/>
			</div>
			<div style="text-align: center;"><i class="el-icon-d-arrow-left fontColorT" style="font-size: 30px;transform: rotate(-90deg);"></i></div>
			<div style="text-align: center;font-size: 22px;margin: 10px 0 30px 0;">
				1 B分 =
				<span class="blue">{{ zhNum }}</span>
				功勋点
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="isZh = false" size="medium">取 消</el-button>
				<el-button type="primary" @click="exportExcel" size="medium">确 定</el-button>
			</span>
			<el-dialog width="500px" title="历史转换比例记录" :visible.sync="innerVisible" append-to-body>
				<div style="max-height: 400px;overflow-y: auto;" class="scroll-bar">
					<div v-for="(item, index) in innerList" :key="index" style="padding-bottom: 16px;">
						<span class="green">{{ item.name }}</span>
						在{{ item.date }} 修改转换比列为
						<span class="blue">{{ item.num }}</span>
					</div>
				</div>
				<span slot="footer" class="dialog-footer"><el-button @click="innerVisible = false" size="medium">关 闭</el-button></span>
			</el-dialog>
		</el-dialog>
		<!-- 发放/回收/转换 -->
		<el-dialog :title="czText + '功勋点'" :visible.sync="isCz" width="500px" top="10%">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
				<el-form-item :label="czText+'对象'" prop="employee_ids" v-if="isEmployee">
					<div class="border flex-box-ce">
						<div class="flex-1" v-if="Administrator.length == 0">请选择人员</div>
						<div v-else style="width: 180px;" class="font-flex-word">
							<span v-for="(item, index) in Administrator" :key="index">
								<i v-if="index != 0">,</i>
								{{ item.name }}
							</span>
						</div>
						<span v-if="Administrator.length > 0" class="blue">{{ Administrator.length }}人</span>
						<i class="el-icon-arrow-down icon-right" v-else></i>
						<div @click="openAdministrator()" class="inputDc"></div>
					</div>
				</el-form-item>
				<el-form-item :label="czText+'数值'" prop="zhNum">
					<el-input type="text" class="width-250" placeholder="请输入功勋点" v-model="ruleForm.zhNum" @input="[ruleForm.zhNum=ruleForm.zhNum.replace(/[^\d]/g,'')]"/>
				</el-form-item>
				<el-form-item label="备注原因:" prop="content">
					<el-input
						type="textarea"
						v-model="ruleForm.content"
						placeholder="请输入原因"
						class="width-250"
						:autosize="{ minRows: 3, maxRows: 6 }"
						show-word-limit
						maxlength="100"
					></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="isCz = false" size="medium">取 消</el-button>
				<el-button type="primary" @click="submit('ruleForm')" size="medium">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="选择人员" width="640px" :visible.sync="isChecks" append-to-body>
			<EmployeeSelector ref="members" v-if="isChecks" :selected="selected" @confirm="employeeConfirm" />
			<span slot="footer" class="dialog-footer">
				<el-button @click="isChecks = false">取 消</el-button>
				<el-button type="primary" @click="$refs.members.confirm()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 个人明细 -->
		<el-dialog title="个人明细" width="700px" :visible.sync="isDetail" top="5%">
			<div class="flex-box-ce">
				<div class="titled" v-for="(item,index) in detailData" :key="index">
					<div class="num" :class="item.num>0? 'blue':'red'">{{item.num}}</div>
					<div class="fontColorF">{{item.name}}</div>
				</div>
			</div>
			<div class="flex-box-end " style="margin-bottom: 10px;">
				<el-button type="primary" plain size="small">导出个人明细</el-button>
			</div>
			<el-table :data="[]" style="width: 100%" border v-loading="loading">
				<el-table-column label="姓名" align="left" prop="point"></el-table-column>
				<el-table-column label="部门" align="center" prop="point"></el-table-column>
				<el-table-column label="功勋点" align="center" prop="point"></el-table-column>
				<el-table-column label="描述" align="center" prop="point"></el-table-column>
				<el-table-column label="时间" align="center" prop="point"></el-table-column>
				<template slot="empty">
					<noData></noData>
				</template>
			</el-table>
			<center style="padding-top: 20px;">
					  <el-pagination
					   background
						@current-change="handleCurrentChange2"
						layout="prev, pager, next"
						:total="total">
					  </el-pagination>
			</center>
			<span slot="footer" class="dialog-footer">
				<el-button @click="isDetail = false">取 消</el-button>
				<el-button type="primary">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import EmployeeSelector from '@/components/EmployeeSelector';
export default {
	name: 'flManagement',
	components: { EmployeeSelector },
	data() {
		return {
			activeName: '1',
			select_employee_id: '',
			employee_map: [],
			dept_name: [],
			dept_tree: [],
			loading: false,
			formData: {
				dept_id: '0',
				sort: 'DESC',
				page: 1,
				page_size: 10,
				pt_id: 3,
				type: 'all'
			},
			list: null,
			pageLimit: 10,
			total: null,
			isZh: false,
			zhNum:1,
			positions: [{ id: 0, age: 'all', name: '全部' }, { id: 1, age: 'manager', name: '管理者' }, { id: 2, age: 'employee', name: '员工' }],
			Dc_Data: {
				//导出数据
				value1: '', //时间
				DC_position: '全部', //人员
				dept_name: [] //部门
			},
			innerVisible: false,
			innerList: [
				{ name: '阿松大阿松大', date: '2020-20-1', num: '1:30' },
				{ name: '阿松大阿松大', date: '2020-20-1', num: '1:30' },
				{ name: '阿松大阿松大', date: '2020-20-1', num: '1:30' },
				{ name: '阿松大阿松大', date: '2020-20-1', num: '1:30' }
			],

			// 发放/回收/转换
			Administrator: [],
			isChecks: false,
			selected: { dept: [], employee: [] },
			ruleForm: {
				content: '',
				zhNum: '', 
				employee_ids: []
			},
			rules: {
				zhNum: [{ required: true, message: '请输入数值', trigger: 'blur' }],
				employee_ids: [{ required: true, message: '请选择被考核人员', trigger: 'change' }]
			},
			czText: '发放',
			isCz: false,
			isEmployee:true,
			
			// 个人明显
			isDetail:false,
			detailData:[
				{name:'现有功勋点',num:1000},
				{name:'管理员发放',num:254},
				{name:'B分转换',num:20},
				{name:'同事点赞',num:166},
				{name:'兑换奖品',num:-100},
				{name:'被回收',num:-25}
			]
		};
	},
	watch: {
		isCz(val){
			if(!val){
				this.ruleForm={
				content: '',
				zhNum: '', 
				employee_ids:[]
				};
				this.isEmployee=true;
				this.Administrator= [];
				this.selected={ dept: [], employee: [] };
			}
		},
		dept_name(val) {
			if (val.length !== 0) {
				this.formData.dept_id = val[val.length - 1];
			} else {
				this.formData.dept_id = '0';
			}
			this.formData.page = 1;
			this.$nextTick(() => {
				this.$refs.dept.dropDownVisible = false;
				this.get_list();
			});
		}
	},
	methods: {
		moreMessage(){
			this.isDetail=true;
		},
		handleCommand(e){
			this.ruleForm.employee_ids.push(e.id);
			this.isEmployee=false;
			this.openCz(Number(e.name))
		},
		submit(str){
			this.$refs[str].validate((valid) => {
			  if (valid) {
				console.log(this.ruleForm)
			  } else {
				console.log('error submit!!');
				return false;
			  }
			});
			this.isCz=true;   
		},
		keyupEvent(str){
			this.ruleForm.zhNum=this.ruleForm.zhNum.replace(/^(0+)|[^\d]+/g,'')
		},
		openCz(index) {
			switch (index) {
				case 1:
					this.czText = '发放';
					break;
				case 2:
					this.czText = '回收';
					break;
				case 3:
					this.czText = '转换';
					break;
			}
			this.isCz=true;
		},
		// 选择录入对象
		employeeConfirm(e) {
			this.ruleForm.employee_ids = e.employee.map(item=>{
				return item.id
			})
			this.selected.employee = e.employee.length > 0 ? e.employee : [];
			this.Administrator = e.employee.length > 0 ? e.employee : [];
			this.isChecks = false;
		},
		openAdministrator() {
			this.isChecks = true;
		},
		handleClick() {
			
		},
		deleteEvents(selection) {
			let listId = [];
			selection.forEach(item => {
				listId.push(item.id);
			});
			this.selectionID = listId;
		},
		exportExcel() {},
		handleCurrentChange2(val) {
			this.formData.page = val;
			this.get_list();
		},
		// 页面变更
		handleCurrentChange(val) {
			this.formData.page = val;
			this.get_list();
		},
		handleSizeChange(val) {
			this.pageLimit = val;
			this.formData.page_size = this.pageLimit;
			this.get_list();
		},
		//获取部门
		getDepartment() {
			this.$axios('get', '/api/department/tree').then(res => {
				this.dept_tree = this.getTreeData(res.data.data.list);
			});
		},
		get_list() {
			this.loading = true;
			this.$axios('get', '/api/integral/statistics/ranking', this.formData, 'v2')
				.then(res => {
					if (res.data.code == 1) {
						this.list = res.data.data.list;
						this.total = res.data.data.total;
					} else {
						this.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		// 递归判断列表，把最后的children设为undefined
		getTreeData(data) {
			for (var i = 0; i < data.length; i++) {
				if (data[i]._child.length < 1) {
					// children若为空数组，则将children设为undefined
					data[i]._child = undefined;
				} else {
					// children若不为空数组，则继续 递归调用 本方法
					this.getTreeData(data[i]._child);
				}
			}
			return data;
		}
	},
	created() {
		this.getDepartment();
		this.employee_map = JSON.parse(localStorage.getItem('userList'));
	},
	mounted() {
		this.tips_show = JSON.parse(localStorage.getItem('total_rank_tips')) ? false : true;
		this.get_list();
	}
};
</script>
<style scoped lang="scss">
.titled{
	width: 110px;
	text-align: left;
	margin-bottom: 20px;
	color: #606266;
	font-size: 14px;	
	// border-right: 1px solid #f1f1f1;
	padding: 0 10px;
}
.titled .num{
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 10px;
}
.border {
	-webkit-appearance: none;
	background-color: #fff;
	background-image: none;
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #c0c4cf;
	font-size: inherit;
	height: auto;
	outline: 0;
	padding: 0 15px;
	width: 250px;
	position: relative;
	cursor: pointer;
}
.border .font-flex-word {
	color: #606266;
}
.el-icon-edit {
	position: relative;
	cursor: pointer;
}
.el-icon-edit::after {
	content: '';
	position: absolute;
	left: -5px;
	top: -5px;
	bottom: -5px;
	right: -5px;
}
.label {
	width: 40px;
	text-align: right;
	padding: 0 10px;
}
.search_box {
	::v-deep button:active {
		background: #26a2ff;
	}
	::v-deep button:active .el-icon-search {
		color: #fff;
	}
}
.date-picker-width {
	width: 100% !important;
}
.nopoint_box {
	display: inline-block;
	text-align: center;
	width: 100%;
	margin-bottom: 10px;
}
.noimg {
	display: inline-block;
	width: 110px;
	height: 110px;
	margin: 22px auto 16px;
	background-size: 99%;
}
.noperson {
	display: inline-block;
	width: 110px;
	height: 110px;
	line-height: none;
	margin: 22px auto 16px;
	background-size: 99%;
}
.title {
	display: block;
	text-align: center;
	font-size: 12px !important;
	line-height: 30px;
	color: #909399 !important;
	padding: 0;
}
.nopoint_box a {
	color: #26a2ff;
}
.chart_content {
	.chart-legend__wrap {
		text-align: right;
		padding: 20px;
		padding-right: 50px;
		& .chart-legend__pink {
			position: relative;
			padding-left: 12px;
			padding-right: 5px;
			&:after {
				content: '';
				position: absolute;
				margin-top: -2px;
				top: 35%;
				left: 0;
				width: 8px;
				height: 8px;
				background: #f56c6c;
				border-radius: 100%;
			}
		}

		& .chart-legend__green {
			position: relative;
			padding-left: 12px;
			&:after {
				content: '';
				position: absolute;
				margin-top: -2px;
				top: 35%;
				left: 0;
				width: 8px;
				height: 8px;
				background: #53b87f;
				border-radius: 100%;
			}
		}
	}
}
.drawer_title {
	font-size: 18px;
	padding: 20px;
}
.manager_statistics_box {
	background-color: #ffffff;
	padding: 20px;
	min-height: calc(100vh - 160px);
	::v-deep .el-row .el-checkbox .el-checkbox__label {
		line-height: 20px;
	}
}
.diy_tip_bg {
	background: #f5f6f9;
	overflow: hidden;
	.diy-tip {
		margin-bottom: 15px;
		border: 1px solid #67c23a;
		padding: 20px 16px;
		p {
			color: #67c23a !important;
			font-size: 14px;
			margin: 0 !important;
			padding: 4px 0;
		}
	}
}
.width-250{
	width: 250px;
}
.inputDc {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9;
  cursor: pointer;
}
</style>