dd_pc/src/views/task/my_issue.vue

<template>
	<div>
		<div class="box">
			<el-tabs v-model="status"><el-tab-pane :disabled="loading" v-for="(item, index) in tabsOption" :key="index" :label="item.label" :name="item.name"></el-tab-pane></el-tabs>
			<el-form ref="formData" :inline="true" :model="formData" label-width="70px">
				<el-form-item>
					<el-dropdown @command="downClick">
						<el-button type="primary">
							发布任务
							<i class="el-icon-arrow-down el-icon--right"></i>
						</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="1">+ 临时任务</el-dropdown-item>
							<el-dropdown-item command="2">+ 悬赏任务</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</el-form-item>
				<el-form-item v-if="status == 'assign' || status == 'reward'" label="积分类型">
					<el-select v-model="formData.pt_id" placeholder="请选择">
						<el-option v-for="item in point_types" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-if="status == 'assign'" label="任务状态">
					<el-select v-model="formData.status" placeholder="请选择">
						<el-option v-for="item in task_status" :key="item.id" :label="item.name" :value="item.code"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item v-if="status == 'assign'" label="排序" label-width="50px">
					<el-select v-model="formData.sort" placeholder="请选择排序">
						<el-option v-for="item in sort" :key="item.id" :label="item.name" :value="item.code"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item v-if="status == 'reward'" label="排序" label-width="50px">
					<el-select v-model="formData.order_by" placeholder="请选择排序">
						<el-option v-for="item in order_by" :key="item.id" :label="item.name" :value="item.code"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label-width="60px">
					<el-input v-model="formData.content" placeholder="请输入任务内容" max="200" @keyup.enter.native="getContent()" class="persons_name">
						<el-button slot="append" icon="el-icon-search" @click="getContent()"></el-button>
					</el-input>
				</el-form-item>

				<el-form-item v-if="status == 'assign' || status == 'repetitive'" label="执行人" label-width="60px">
					<el-select v-model="formData.executor_id" clearable filterable placeholder="请输入或选择执行人">
						<el-option v-for="item in employee_map" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="审批人" label-width="60px">
					<el-select v-model="formData.reviewer_id" clearable filterable placeholder="请输入或选择审批人">
						<el-option v-for="item in employee_map" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-form>

			<div v-show="status == 'assign'">
				<el-table :data="list" style="width: 100%" v-loading="loading" @row-click="rowClick">
					<el-table-column label="执行人" prop="task_name" width="250px">
						<template slot-scope="scope">
							<div style="display:flex">
								<userImage
									:img_url="scope.row.employee_img_url"
									:id="scope.row.employee_id"
									:user_name="scope.row.employee_name"
									width="50px"
									height="50px"
								></userImage>
								<span style="line-height: 50px; padding-left: 10px;">{{ scope.row.employee_name }}的{{ scope.row.pt_name }}任务</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="任务内容" prop="task_name">
						<template slot-scope="scope">		
					<span class="font-flex-word" style="max-width: 200px;">{{ scope.row.task_name }}</span>
						</template>
					</el-table-column>
					<el-table-column label="积分" prop="base_point" width="100px">
						<template slot-scope="scope">
							<span v-if="scope.row.point_config && scope.row.point_config.review_point > 0" class="red">
								+{{ scope.row.point_config.review_point }} {{ scope.row.pt_name }}
							</span>
							<span v-else>
								<span v-if="scope.row.point_config && scope.row.point_config.base_point">
									<span class="red" v-if="scope.row.point_config.base_point > 0">+{{ scope.row.point_config.base_point }} {{ scope.row.pt_name }}</span>
									<span class="color_green" v-else>{{ scope.row.point_config.base_point }} {{ scope.row.pt_name }}</span>
								</span>
							</span>
						</template>
					</el-table-column>
					<el-table-column label="截止时间" prop="expire_time">
						<template slot-scope="scope">
							<span>{{ scope.row.expire_time }}</span>
						</template>
					</el-table-column>
					<el-table-column label="审批人" width="100px" prop="reviewer_name"></el-table-column>
					<el-table-column label="状态" prop="owner_id" width="100px">
						<template slot-scope="scope">
							<span class="orange" v-if="scope.row.status == 1">进行中</span>
							<span class="green" v-else-if="scope.row.status == 2">已完成</span>
							<span class="red" v-else-if="scope.row.status == 3">退回</span>
							<span class="green" v-else-if="scope.row.status == 4">已审批</span>
							<span class="textBox" v-else>已撤回</span>
						</template>
					</el-table-column>

					<el-table-column  label="操作" align="center" width="80px">
						<template slot-scope="scope">
							<el-dropdown placement="bottom" :show-timeout="150" :hide-timeout="150">
								<span class="el-dropdown-links">···</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item :disabled="false" v-if="scope.row.status == 1">
										<el-button type="text" class="color-blue" v-loading.fullscreen.lock="bodyLoad" @click.stop="issueAmend1(scope.row)">修改</el-button>
									</el-dropdown-item>
									<el-dropdown-item :disabled="false">
										<el-button type="text" class="color-red" v-loading.fullscreen.lock="bodyLoad" @click.stop="deletes(scope.row, 0)">删除</el-button>
									</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</template>
					</el-table-column>

					<template slot="empty">
						<noData></noData>
					</template>
				</el-table>
			</div>

			<div v-show="status == 'reward'">
				<el-table :data="list" style="width: 100%" v-loading="loading" @row-click="rewardTasksClick">
					<el-table-column label="发布人" prop="employee_id">
						<template slot-scope="scope">
							<div style="display:flex">
								<userImage width="50px" height="50px" :img_url="scope.row.owner_img_url" :user_name="scope.row.owner_name"></userImage>
								<span style="line-height: 50px; padding-left: 10px;">我发布的{{ scope.row.pt_name }}任务</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="任务内容" prop="task_name">
						<template slot-scope="scope">	
					 <span class="font-flex-word" style="max-width: 200px;">{{ scope.row.task_name }}</span>
						</template>
					</el-table-column>
					<el-table-column label="积分" prop="base_point" width="100px">
						<template slot-scope="scope">
							<span v-if="scope.row.base_point > 0" class="red">+{{ scope.row.base_point }} {{ scope.row.pt_name }}</span>
							<span v-else class="color_green">{{ scope.row.base_point }} {{ scope.row.pt_name }}</span>
						</template>
					</el-table-column>
					<el-table-column label="截止时间" prop="expire_time">
						<template slot-scope="scope">
							<span>{{ scope.row.expire_time }}</span>
						</template>
					</el-table-column>
					<el-table-column label="审批人" width="100px" prop="reviewer_name">
						<template slot-scope="scope">
							<span v-if="scope.row.reviewer_id">{{ list_approver(scope.row.reviewer_id) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="状态" prop="owner_id" width="100px">
						<template slot-scope="scope">	
						<span class="orange" v-if="scope.row.status == 1">待领取</span>			
				<span class="orange" v-else-if="scope.row.status == 2">进行中</span>			
				<span class="green" v-else-if="scope.row.status == 3">已完成</span>			
				<span class="fontColorZ" v-else-if="scope.row.status == 4">已撤回</span>	
						<span class="red" v-else>已过期</span>
						</template>
					</el-table-column>

					<el-table-column prop="base_point" label="操作" align="center" width="80px">
						<template slot-scope="scope">
							<el-dropdown placement="bottom" :show-timeout="150" :hide-timeout="150">
								<span class="el-dropdown-links">···</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item :disabled="false" v-if="scope.row.status == 1">
										<el-button type="text" class="color-blue" v-loading.fullscreen.lock="bodyLoad" @click.stop="offerARewardAmend2(scope.row)">修改</el-button>
									</el-dropdown-item>
									<el-dropdown-item :disabled="false">
										<el-button type="text" class="color-red" v-loading.fullscreen.lock="bodyLoad" @click.stop="deletes(scope.row, 1)">删除</el-button>
									</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</template>
					</el-table-column>

					<template slot="empty">		
				<noData></noData>
					</template>
				</el-table>
			</div>

			<div v-if="status == 'repetitive'">
				<el-table :data="list" style="width: 100%" v-loading="loading" @row-click="repetitiveTasksClick">
					<el-table-column label="执行人" prop="target_info" width="120px">
						<template slot-scope="scope">
							<span v-for="(item, index) in scope.row.target_info" :key="index">
								<span v-if="scope.row.target_info.length == 1 && index == 0">{{ item.name }}</span>
								<span v-if="scope.row.target_info.length > 1 && index == 0">{{ item.name }}等{{ scope.row.target_info.length }}人</span>
							</span>
						</template>
					</el-table-column>
					<el-table-column label="任务内容" prop="remark">
						<template slot-scope="scope">		
							<span class="font-flex-word" style="max-width: 200px;">{{ scope.row.name || scope.row.remark }}</span>
						</template>
					</el-table-column>
					<el-table-column label="任务积分" prop="point_config.base_point" width="130px">
						<template slot-scope="scope">
							<span v-if="scope.row.point_config.base_point > 0" class="red">+{{ scope.row.point_config.base_point }} {{ $getTypsName(scope.row.pt_id) }}</span>
							<span v-else class="color_green">{{ scope.row.point_config.base_point }} {{ $getTypsName(scope.row.pt_id) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="重复周期" prop="task_cycle" width="220px">
						<template slot-scope="scope">
							<span v-if="scope.row.task_cycle == '1'">每天0点自动发布，{{ dayTime(scope.row.task_cycle_value) }}截止</span>
							<span v-if="scope.row.task_cycle == '2'">
								<span>每周一自动发布，周{{ weekList[scope.row.task_cycle_value - 1] }}截止</span>
							</span>
							<span v-if="scope.row.task_cycle == '3'">每月1号自动发布，{{ scope.row.task_cycle_value }}号截止</span>
						</template>
					</el-table-column>
					<el-table-column label="可见范围" prop="department_info">
						<template slot-scope="scope">
							<span v-for="(item, index) in scope.row.department_info" :key="index">
								{{ item.name }}
								<span v-if="scope.row.department_info.length - 1 > index">，</span>
							</span>
						</template>
					</el-table-column>
					<el-table-column label="创建时间" prop="create_time" width="140px"></el-table-column>

					<el-table-column prop="base_point" label="操作" align="center" width="80px">
						<template slot-scope="scope">
							<el-dropdown placement="bottom" :show-timeout="150" :hide-timeout="150">
								<span class="el-dropdown-links">···</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item :disabled="false"><el-button type="text" class="color-blue" v-loading.fullscreen.lock="bodyLoad" @click.stop="copyTask(scope.row)">复制</el-button></el-dropdown-item>
									<el-dropdown-item :disabled="false"><el-button type="text" class="color-red" v-loading.fullscreen.lock="bodyLoad" @click.stop="deletes(scope.row, 2)">删除</el-button></el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</template>
					</el-table-column>
					<template slot="empty">		
				<noData></noData>
					</template>
				</el-table>
			</div>

			<center style="padding: 20px 0;">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:page-sizes="[10, 20, 50, 100]"
					layout="total, sizes, prev, pager, next"
					:page-size="formData.page_size"
					:current-page="formData.page"
					:total="total"
				></el-pagination>
			</center>
		</div>
		<!-- 临时任务 -->
		<temporaryTask :dialogVisible.sync="dialogVisible" :trees_ab="trees_v2_ab_module" :isFy="isFy" :modifyData="fyData" :showTitle="'临时任务'"></temporaryTask>
		<!-- 临时任务-修改 -->
		<temporaryTaskAmend :dialogVisible.sync="dialogVisibleAmend" :trees_ab="trees_v2_ab_module" :showTitle="'任务编辑'" :modifyData="modifyData"></temporaryTaskAmend>
		<!-- 悬赏任务 -->
		<rewardTask :dialogVisible.sync="rewardTaskShow" :isFy="isFy" :modifyData="fyData" :trees_ab="trees_v2_ab_module" :showTitle="'悬赏任务'"></rewardTask>
		<!-- 悬赏任务-修改 -->
		<rewardTaskAmend
			:dialogVisible.sync="rewardTaskAmendShow"
			:trees_ab="trees_v2_ab_module"
			ref="rewardTasks"
			:showTitle="'任务编辑'"
			:rewardTaskAmendData="rewardTaskAmendData"
		></rewardTaskAmend>

		<!-- 详情弹窗 -->
		<taskDetailsPopup :visible.sync="showDetailPopup" v-if="showDetailPopup" :id="detailId" :title="'任务详情'"></taskDetailsPopup>

		<!-- 重复任务详情弹窗 -->
		<repeatTaskDetailsPopup :visible.sync="showRepetitiveTasksPopup" v-if="showRepetitiveTasksPopup" :id="detailId" :title="'重复任务详情'"></repeatTaskDetailsPopup>

		<!-- 悬赏任务详情弹窗 -->
		<rewardTaskDetailsPopup :visible.sync="showRewardTaskDetailsPopup" v-if="showRewardTaskDetailsPopup" :id="detailId" :title="'工作详情'"></rewardTaskDetailsPopup>
	</div>
</template>

<script>

import temporaryTask from '@/views/common/temporaryTask';
import temporaryTaskAmend from '@/views/common/temporaryTaskAmend';
import rewardTask from '@/views/common/rewardTask';
import rewardTaskAmend from '@/views/common/rewardTaskAmend';
import taskDetailsPopup from '@/views/common/taskDetailsPopup';
import repeatTaskDetailsPopup from '@/views/common/repeatTaskDetailsPopup';
import rewardTaskDetailsPopup from '@/views/common/rewardTaskDetailsPopup';

export default {
	name: 'my_issue',
	data() {
		return {
			weekList: ['一', '二', '三', '四', '五', '六', '日'],
			rewardTaskAmendData: {}, //悬赏修改
			modifyData: {}, //任务修改

			operation_if: false, //操作列显示隐藏
			bodyLoad: false,

			status: 'assign',
			formData: {
				status: 'all',
				sort: 'publish',
				order_by: 'create_time',
				pt_id: 0,
				page_size: 10,
				page: 1,
				source_type: '1',

				executor_id: '', //执行人
				reviewer_id: '', //审批人
				content: '' //内容
			},
			total: null,
			list: [],
			loading: false,
			point_types: null,
			task_status: [
				{ id: 1, name: '全部', code: 'all' },
				{ id: 2, name: '进行中', code: 'running' },
				{ id: 3, name: '已完成', code: 'complete' },
				{ id: 4, name: '已审批', code: 'reviewed' },
				// {id: 5, name: '已撤销', code: 'revocation'},
				{ id: 6, name: '已退回', code: 'refuse' }
			],
			sort: [{ id: 2, name: '按发布时间', code: 'publish' }, { id: 1, name: '按截止时间', code: 'expire' }],
			order_by: [{ id: 2, name: '按发布时间', code: 'create_time' }, { id: 1, name: '按截止时间', code: 'expire_time' }],
			tabsOption: [{ label: '我指派的', name: 'assign' }, { label: '我悬赏的', name: 'reward' }, { label: '重复任务', name: 'repetitive' }],

			dialogVisible: false,
			dialogVisibleAmend: false,
			rewardTaskShow: false,
			rewardTaskAmendShow: false,
			showDetailPopup: false,
			showRepetitiveTasksPopup: false,
			showRewardTaskDetailsPopup: false,
			detailId: 0,
			trees_v2_ab_module: {
				A: [],
				B: [],
				rule_tree: []
			},
			employee_map: [], //人员列表
			
			//重复任务复用
			isFy:false,
			fyData:{},
		};
	},
	components: {temporaryTask, rewardTask, rewardTaskAmend, temporaryTaskAmend, taskDetailsPopup, repeatTaskDetailsPopup, rewardTaskDetailsPopup },
	watch: {
		dialogVisible(val){
			if(!val){
				this.isFy=false;
			}
		},
		rewardTaskShow(val){
			if(!val){
				this.isFy=false;
			}
		},
		status(val) {
			this.formData.executor_id = '';
			this.formData.reviewer_id = '';
			this.formData.content = '';
			this.formData.page = 1;
			this.formData.status = 'all';
			this.formData.sort = 'publish';
			this.formData.order_by = 'create_time';
			this.formData.pt_id = 0;
			this.list = [];
			this.get_list();
		},
		'formData.status'() {
			// debugger
			this.formData.page = 1;
			this.list = [];
			this.get_list();
		},
		'formData.sort'() {
			this.formData.page = 1;
			this.list = [];
			this.get_list();
		},
		'formData.order_by'() {
			this.formData.page = 1;
			this.list = [];
			this.get_list();
		},
		'formData.pt_id'() {
			this.formData.page = 1;
			this.list = [];
			this.get_list();
		},
		'formData.executor_id'() {
			this.formData.page = 1;
			this.list = [];
			this.get_list();
		},
		'formData.reviewer_id'() {
			this.formData.page = 1;
			this.list = [];
			this.get_list();
		}
	},
	created() {
		this.getRuleItemData(); //获取AB分细则
	},
	mounted() {
		this.getUserDetail();
		if (this.$route.query.type == 1) {
			this.dialogVisible = true;
		} else if (this.$route.query.type == 2) {
			this.rewardTaskShow = true;
		}
		this.get_list();
		this.point_types = this.getPointTypes();
		this.getEmployee(); //员工列表
	},
	methods: {
		list_approver(id) {
			let arr = this.employee_map.filter(x => x.id == id);
			return arr[0] ? arr[0].name : '';
		},
		dayTime(item) {
			return item > 9 ? item + ': 00' : '0' + item + ': 00';
		},
		getContent() {
			this.formData.page = 1;
			this.list = [];
			this.get_list();
		},

		//获取员工列表
		getEmployee() {
			this.$axios('get', '/api/employee/index', { dept_id: 0, keywords: '', page: 1, page_size: 3000, is_official: 1 }).then(res => {
				let list = res.data.data.list;
				this.employee_map = list;
			});
		},

		getUserDetail() {
			this.$axios('get', '/api/employee/detail').then(res => {
				this.$setUserData(res.data.data.user);
			});
		},
		//悬赏修改
		offerARewardAmend2(item) {
			this.rewardTaskAmendShow = true;
			this.$refs.rewardTasks.forTheTaskLoading = true;
			let params = {
				task_id: item.id
			};
			this.$axios('get', '/api/integral/task', params)
				.then(res => {
					if (res.data.code == 1) {
						this.rewardTaskAmendData = res.data.data;
					} else {
						self.$message.error(res.data.msg);
					}
				})
				.finally(() => {
					this.$refs.rewardTasks.forTheTaskLoading = false;
				});
		},
		//重复任务复用
		copyTask(item){
			this.$axios('get', '/api/integral/schedule', { schedule_id: item.id }).then(res => {
				let data=res.data.data
				data.task_file_list=data.file_list;
				data.id="";
				this.isFy=true;
				this.fyData=data;
				this.downClick(item.type)
			});
		},
		//任务修改
		issueAmend1(item) {
			this.modifyData = item;
			this.dialogVisibleAmend = true;
		},
		//删除---我指派的、我悬赏的、重复任务    （重复任务需等后端接口）
		deletes(item, s) {
			let self = this;
			this.$message.closeAll();
			self.$confirm('删除此任务将会删除其相关记录和积分数据，确认删除吗？', '删除任务', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				self.$axios(
					s == 0 ? 'get' : s == 1 ? 'get' : 'get',
					s == 0 ? '/api/integral/work/delete' : s == 1 ? '/api/integral/task/delete' : '/api/integral/schedule/delete',
					s == 0 ? { work_id: item.id } : s == 1 ? { task_id: item.id } : { schedule_id: item.id }
				).then(res => {
					if (res.data.code == 1) {
						if (this.formData.page > 1) {
							if (self.list.length == 1) {
								this.formData.page = this.formData.page - 1;
							}
						}
						this.get_list();
						self.$message.success(res.data.msg);
					} else {
						self.$message.error(res.data.msg);
					}
				});
			});
		},

		// 点击详情
		rowClick(row) {
			this.showDetailPopup = true;
			this.detailId = parseInt(row.id);
		},
		// 重复任务详情
		repetitiveTasksClick(row) {
			this.showRepetitiveTasksPopup = true;
			this.detailId = parseInt(row.id);
		},
		// 悬赏任务详情
		rewardTasksClick(row) {
			this.showRewardTaskDetailsPopup = true;
			this.detailId = parseInt(row.id);
		},
		// 发布临时任务 和 悬赏任务
		downClick(val) {
			if (val == 1) {
				this.dialogVisible = true;
			} else {
				this.rewardTaskShow = true;
			}
		},
		// 获取积分类型
		getPointTypes() {
			let point =this.$getCache('types');
			point.unshift({ code: 'all', id: 0, name: '全部' });
			return point;
		},
		// 页码变更
		handleCurrentChange(val) {
			this.formData.page = val;
			this.get_list();
		},
		handleSizeChange(val) {
			this.formData.page_size = val;
			this.get_list();
		},
		get_list() {
			let self = this;
			this.list=[];
			self.loading = true;
			let params = JSON.parse(JSON.stringify(this.formData));
			params.pt_id == 0 ? delete params.pt_id : '';
			params.executor_id == '' ? delete params.executor_id : '';
			params.reviewer_id == '' ? delete params.reviewer_id : '';
			if (self.status == 'assign') {
				delete params.order_by;
			} else if (self.status == 'reward') {
				delete params.executor_id;
				delete params.status;
				delete params.sort;
			} else {
				delete params.status;
				delete params.sort;
				delete params.order_by;
				delete params.pt_id;
			}
			self.$axios(
				'get',
				self.status == 'assign' ? '/api/integral/work/list/publisher' : self.status == 'reward' ? '/api/integral/task/publish/list' : '/api/integral/schedule/list',
				params
			)
				.then(res => {
					//数据过多的情况延迟较大
					if (res.data.code == 1) {
						//传入发布者ID进行判断			
			self.list = res.data.data.list;
						self.total = res.data.data.total;
					} else {
						self.$message.error(res.data.data.msg);
						this.get_list();
					}
				})
				.finally(() => {
					self.loading = false;
				});
		},

		// 获取ab规则细则
		getRuleItemData() {
			let a = this.$axios('get', '/api/integral/rule/trees', { cycle_type: '1', pt_id: '2' }, 'v2');
			let b = this.$axios('get', '/api/integral/rule/trees', { cycle_type: '1', pt_id: '3' }, 'v2');
			let c = this.$axios('get', '/api/integral/rule/trees', { cycle_type: '1' });
			Promise.all([a, b, c]).then(res => {
				this.trees_v2_ab_module.A = res[0].data.data.tree;
				this.trees_v2_ab_module.B = res[1].data.data.tree;
				this.trees_v2_ab_module.rule_tree = this.flatten(res[2].data.data.rule_tree);
				this.trees_v2_ab_module.rule_tree_all = this.getTreeData(res[2].data.data.rule_tree);
			});
		},
		getTreeData(data) {
			for (var i = 0; i < data.length; i++) {
				if (data[i].child.length < 1) {
					// child若为空数组，则将child设为undefined
					data[i].child = undefined;
				} else {
					// child若不为空数组，则继续 递归调用 本方法
					this.getTreeData(data[i].child);
				}
			}
			return data;
		},
		flatten(arr) {
			return arr.reduce((result, item) => {
				return result.concat(item, Array.isArray(item.child) ? this.flatten(item.child) : []);
			}, []);
		}
	}
};
</script>

<style scoped lang="scss">
.box {
	min-height: calc(100vh - 184px);
	min-width: 800px;
	background-color: #fff;
	padding: 20px;
	& .color_yelllo {
		color: #e6a23c;
	}
	& .color_green {
		color: #67c23a;
	}
	& .color_3 {
		color: #f56c6c;
	}
	& .color_4 {
		color: #67c23a;
	}
	& .color_5 {
		color: #f56c6c;
	}
	& .color_yelllo2 {
		color: #ffa939;
	}
}

$red: #f56c6c;
.color-red {
	color: $red;
	&:hover {
		color: #f14141;
	}
}
.color-blue {
	color: #26A2FF;
	&:hover {
		color: #26A2FF;
	}
}
.delicon {
	font-size: 20px;
	float: right;
}

.el-dropdown-links {
	font-size: 20px;
	cursor: pointer;
	color: #606266;
}

::v-deep .el-table tr:hover {
	cursor: pointer;
}
</style>