<!-- 用户管理 -->
<template>
  <div class="innerMargin">
    <el-card class="box-card">
      <search-bar>
        <template v-slot:left-search>
          <div class="search-box">
            <el-select 
              v-model="role" 
              clearable 
              class="select02" 
              @change="checkList()" 
              size="small" 
              placeholder="请选择角色类型"
            >
              <el-option
                v-for="item in roleList"
                :label="item.role_name"
                :value="item.role_id"
                :key="item.role_id"
              ></el-option>
            </el-select>
            <el-select
              v-model="userTypeCheck"
              clearable
              class="select02"
              size="small"
              @change="checkList()"
              placeholder="请选择用户类型"
            >
              <el-option label="超级管理员" :value="1"></el-option>
              <el-option label="经销商" :value="2"></el-option>
              <el-option label="农林政府单位" :value="3"></el-option>
              <el-option label="普通用户" :value="4"></el-option>
            </el-select>
            <el-input
              style="cursor: pointer"
              placeholder="请输入用户名"
              size="small"
              clearable
              @change="checkList()"
              v-model="username"
              suffix-icon="el-icon-search"
              class="input-with-select"
            ></el-input>
            <!-- 管理员权限 -->
            <el-button type="blueInfo" size="small" @click="selUserTest()">{{txtInner}}</el-button>
          </div>
        </template>
        <template v-slot:right-search>
          <el-button type="blueInfo" size="small" @click="addUser()">添加新用户</el-button>
        </template>
      </search-bar>
       <template>
        <el-table :data="userList" stripe style="width: 100%">
          <el-table-column prop="username" width="150" fixed label="用户名称"></el-table-column>
          <el-table-column prop="role_name" label="用户角色">
          </el-table-column>
          <el-table-column prop="user_type" width="150" label="用户类型">
            <template slot-scope="scope">{{ scope.row.user_type | formatUserType }}</template>
          </el-table-column>
          <el-table-column prop="regiest_source_name" width="150" label="用户所属">
            <template slot-scope="scope">{{ scope.row.regiest_source_name || '--' }}</template>
          </el-table-column>
          <el-table-column prop="addtime" width="200" label="创建时间">
              <template slot-scope="scope">{{ ( scope.row.addtime * 1000) | formatTime }}</template>
          </el-table-column>
          <el-table-column prop="mobile" width="120" label="联系方式"></el-table-column>
          <el-table-column prop="state" label="账号状态">
              <template slot-scope="scope"><div :class="[scope.row.state==1?'greenState':'redState']">{{ scope.row.state==1?'正常':'禁用' }}</div></template>
          </el-table-column>
          <el-table-column prop="login_time" width="200" label="上次登录">
              <template slot-scope="scope">{{ ( scope.row.login_time * 1000) | formatTime }}</template>
          </el-table-column>
          <el-table-column prop="expire_time" width="200" label="到期时间">
              <template slot-scope="scope">{{ ( scope.row.expire_time * 1000) | formatTime }}</template>
          </el-table-column>
          <el-table-column prop label="操作" fixed="right" width="450">
            <template slot-scope="scope">
              <el-button type="blueInfo" size="mini" title="一键登录" plain @click="login(scope.row.uid, scope.row.username)">
                一键登录
              </el-button>
              <el-button type="greenInfo" v-if="scope.row.user_type!=3" size="mini" title="分配设备" plain @click="distribute(scope.row.uid, scope.row.username)">
                分配设备
              </el-button>
              <el-button type="redInfo" size="mini" title="充值" plain @click="recharge(scope.row.uid)">
                充值
              </el-button>
              <el-button type="blueInfo" size="mini" title="编辑" plain @click="edit(scope.row)">
                编辑
              </el-button>
              <template v-if="scope.row.state == 1">
                <el-button type="greenInfo" size="mini" title="禁用" plain @click="forbidUse(scope.row.uid,4, '确认禁用该用户?')">
                  禁用
                </el-button>
              </template>
              <template v-else>
                <el-button type="redInfo" size="mini" title="恢复" plain @click="forbidUse(scope.row.uid, 1, '确认恢复该用户?')">
                  恢复
                </el-button>
              </template>
              <el-button type="blueInfo" size="mini" title="重置密码" plain @click="resetPassword(scope.row.uid, scope.row.username)">
                重置密码
              </el-button>
            </template>
            
          </el-table-column>
        </el-table>
      </template>
      <el-pagination
        v-if="userList.length > 0"
        background
        :page-size="8"
        layout="prev, pager, next, jumper"
        :current-page="page"
        :total="totalNum"
        @current-change="changePage"
      ></el-pagination>
    </el-card>
    <!-- 添加新用户 -->
		<el-dialog
			title="添加新用户"
			:visible.sync="addUserDialogVisible"
			width="30%"
			top="180px"
			@close="addUserDialogClosed"
		>
			<el-form
				ref="addUserFormRef"
				:model="addUserForm"
				label-width="100px"
				:rules="addUserFormRules"
			>
				<el-form-item label="用户名 : " prop="username">
					<el-input v-model="addUserForm.username"></el-input>
				</el-form-item>
				<el-form-item label="电话 : " prop="mobile">
					<el-input v-model="addUserForm.mobile"></el-input>
				</el-form-item>
				<el-form-item label="密码  : " prop="pass">
					<el-input type="password" v-model="addUserForm.pass"></el-input>
				</el-form-item>
				<el-form-item label="项目名称 : " prop="projectname">
					<el-input v-model="addUserForm.projectname"></el-input>
				</el-form-item>
				<el-form-item label="角色类型 : " prop="role_id">
					<el-select
						style="width: 100%"
						size="small"
						v-model="addUserForm.role_id"
						placeholder="请选择角色类型"
					>
						<el-option
							v-for="item in roleList"
							:label="item.role_name"
							:value="item.role_id"
							:key="item.role_id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="主题 : " prop="user_group_id">
					<el-select
						style="width: 100%"
						clearable
						v-model="addUserForm.user_group_id"
						placeholder="请选择主题"
					>
						<el-option
							v-for="(item, index) in userGroupList"
							:label="item.role_describe"
							:value="item.id"
							:key="index"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用户类型 : " prop="user_type" v-if="userType == 1">
					<el-select
						style="width: 100%"
						clearable
						v-model="addUserForm.user_type"
						@change="userTypeChange"
						placeholder="请选择角色类型"
					>
						<el-option label="超级管理员" :value="1"></el-option>
						<el-option label="经销商" :value="2"></el-option>
						<el-option label="农林政府单位" :value="3"></el-option>
						<el-option label="普通用户" :value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用户类型 : " prop="user_type" v-if="userType != 1">
					<el-select
						style="width: 100%"
						clearable
						v-model="addUserForm.user_type"
						@change="userTypeChange"
						placeholder="请选择角色类型"
					>
						<el-option label="普通用户" :value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="省/市/区 : " v-show="editIsShow" prop="pcd">
					<el-select
						style="width: 100%"
						clearable
						v-model="addUserForm.pcd"
						placeholder="请选择省、市、县"
						@change="pcdChange"
					>
						<el-option label="省" value="1"></el-option>
						<el-option label="市" value="2"></el-option>
						<el-option label="县" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="省/市/区 : " v-show="editIsShow" prop="user_area">
					<el-select
						style="width: 100%"
						clearable
						v-model="addUserForm.user_area"
						placeholder="请选择省、市、县"
						@change="pcdChange"
					>
						<el-option
							:label="item"
							:value="item"
							v-for="item in areaList"
							:key="item"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="测试用户" prop="cs_user">
					<el-switch active-color="#0295ff" inactive-color="#b4b4b4" v-model="addUserForm.cs_user"></el-switch>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="blueInfo" @click="addUserSubm">保 存</el-button>
				<el-button type="grayInfo" plain @click="addUserDialogVisible = false">取 消</el-button>
			</span>
		</el-dialog>
    <!-- 用户编辑 -->
		<el-dialog
			title="用户信息编辑"
			:visible.sync="editUserDialogVisible"
			width="500px"
			top="180px"
			@close="editUserDialogClosed"
		>
			<el-form
				ref="editUserFormRef"
				:model="editUserForm"
				label-width="100px"
				:rules="editUserFormRules"
			>
				<el-form-item label="用户名 : ">
					<el-input v-model="editUserForm.username" disabled></el-input>
				</el-form-item>
				<el-form-item label="电话 : " prop="mobile">
					<el-input v-model="editUserForm.mobile"></el-input>
				</el-form-item>
				<el-form-item label="项目名称 : ">
					<el-input v-model="editUserForm.projectname"></el-input>
				</el-form-item>
				<el-form-item label="角色类型 : " prop="role_id">
					<el-select
						style="width: 100%"
						clearable
						v-model="editUserForm.role_id"
						placeholder="请选择角色类型"
					>
						<el-option
							v-for="item in roleList"
							:label="item.role_name"
							:value="item.role_id"
							:key="item.role_id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="主题 : " prop="user_group_id">
					<el-select
						style="width: 100%"
						clearable
						v-model="editUserForm.user_group_id"
						placeholder="请选择主题"
					>
						<el-option
							v-for="(item, index) in userGroupList"
							:label="item.role_describe"
							:value="item.id"
							:key="index"
						></el-option>
					</el-select>
				</el-form-item>
				<!-- 当用户为超级管理员 -->
				<el-form-item label="用户类型 : " prop="user_type" v-if="userType == 1">
					<el-select
						disabled
						style="width: 100%"
						clearable
						v-model="editUserForm.user_type"
						@change="userTypeChange"
						placeholder="请选择角色类型"
					>
						<el-option label="超级管理员" :value="1"></el-option>
						<el-option label="经销商" :value="2"></el-option>
						<el-option label="农林政府单位" :value="3"></el-option>
						<el-option label="普通用户" :value="4"></el-option>
					</el-select>
				</el-form-item>
				<!-- 当用户不是超级管理员 -->
				<el-form-item label="用户类型 : " prop="user_type" v-if="userType != 1">
					<el-select
						disabled
						style="width: 100%"
						clearable
						v-model="editUserForm.user_type"
						@change="userTypeChange"
						placeholder="请选择角色类型"
					>
						<el-option label="普通用户" :value="4"></el-option>
					</el-select>
				</el-form-item>
				<!-- 用户类型为经销商时，显示子账户数量 -->
				<!-- <el-form-item
					label="子账户数量 : "
					prop="sub_account_num"
					v-if="editUserForm.user_type == 2"
				>
					<el-input v-model="editUserForm.sub_account_num"></el-input>
				</el-form-item> -->
				<el-form-item
					label="省/市/区 : "
					v-show="editIsShow || editUserForm.user_type == 3"
					prop="pcd"
				>
					<el-select
						style="width: 100%"
						clearable
						v-model="editUserForm.pcd"
						placeholder="请选择省、市、县"
						@change="pcdChange"
					>
						<el-option label="省" value="1"></el-option>
						<el-option label="市" value="2"></el-option>
						<el-option label="县" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="省/市/区 : "
					v-show="editIsShow || editUserForm.user_type == 3"
					prop="user_area"
				>
					<el-select
						style="width: 100%"
						clearable
						v-model="editUserForm.user_area"
						placeholder="请选择省、市、县"
						@change="pcdChange"
					>
						<el-option
							:label="item"
							:value="item"
							v-for="item in areaList"
							:key="item"
						></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editUserDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editUserSubm">确认</el-button>
			</span>
		</el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import searchBar from "@/components/highStand/searchBar";
import cityData from './citydata'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    searchBar
  },
  inject: ['reload'],
  data() {
    var checkMobile = (rule, value, callback) => {
			const regMobile = /^1\d{10}$/
			if (regMobile.test(value)) {
				callback()
			} else {
				// 返回一个错误提示
				callback(new Error('请输入合法的手机号码'))
			}
		}
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入新密码'))
			} else {
				if (this.resetPassForm.checkPass !== '') {
					this.$refs.resetPassFormRef.validateField('checkPass')
				}
				callback()
			}
		}
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'))
			} else if (value !== this.resetPassForm.pass) {
				callback(new Error('两次输入密码不一致!'))
			} else {
				callback()
			}
		}
    //这里存放数据
    return {
      role: "",
      username: "",
      txtInner:"筛选测试用户",
      userList: [],
		userGroupList: [],
      roleList: [],
      page: 1,
      totalNum: 0,
      userTypeCheck: '', //筛选项 用户类型
      tets_user: '', //测试用户筛选
      addUserDialogVisible: false,
      addUserForm: {
			username: '',
			mobile: '',
			pass: '',
			role_id: '',
			user_type: '',
			pcd: '',
			user_area: '',
			projectname:'',
			cs_user: false, //1为普通用户
			user_group_id: '' //用户组id
      },
      cityData,
      areaList: [],//省市县
      //控制省/市/区显示
      editIsShow: false,
      editUserForm: {},
      editUserDialogVisible:false,
			//编辑用户规则
			editUserFormRules: {
				user_phone: [{ validator: checkMobile, trigger: 'blur' }]
			},
			//添加用户规则
			addUserFormRules: {
				username: [
					{ required: true, message: '请填写用户名', trigger: 'blur' }
				],
				mobile: [
					{ required: true, trigger: 'blur', message: '手机号不能为空' },
					{ validator: checkMobile, trigger: 'blur' }
				],
				pass: [{ required: true, message: '请填写用户密码', trigger: 'blur' }],
				projectname: [
					{ required: true, message: '请填写项目名称', trigger: 'blur' }
				],
				role_id:[
					{ required: true, message: '请选择角色类型', trigger: 'blur' }
				]
			},
			//重置密码格规则
			resetPassFormRules: {
				oldPass: [{ required: true, message: '请填原始密码', trigger: 'blur' }],
				pass: [
					{ validator: validatePass, trigger: 'blur' },
					{ required: true, message: '请填写新密码', trigger: 'blur' }
				],
				checkPass: [
					{ validator: validatePass2, trigger: 'blur' },
					{ required: true, message: '请确认新密码', trigger: 'blur' }
				]
      },
      // 筛选
      checkList() {
        this.page = 1
        this.getList()
      },
    };
  },
  //监听属性 类似于data概念
  computed: {
    //获取用户类型
		userType: function () {
			return this.$store.state.myuser_type
		}
  },
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getRoleList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getList();
    this.getUserGroup(); //获取用户组
  },
  //方法集合
  methods: {
    //获取用户列表
    getList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=user.login.users_info",
        data: this.qs.stringify({
          role_id: this.role,
          page_size: 8,
          user_type: this.userTypeCheck,
          page: this.page,
          username: this.username,
          tets_user: this.tets_user
        })
      }).then(res => {
        if (res.data.message == "") {
          this.userList = res.data.data.data;
          this.totalNum = res.data.data.count;
        }
      });
    },
    getUserGroup() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=pest.warning_record.rolemanage_view",
        data: this.qs.stringify({
          add_role: "all"
        })
      }).then(res => {
        if (res.data.message == "") {
          this.userGroupList = res.data.data.data;
        }
      });
    },
    getRoleList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=user.perms.role_list"
      }).then(res => {
        if (res.data.message == "") {
          this.roleList = res.data.data.map(item => {
            return {
              role_id: item.role_id,
              role_name: item.role_name
            };
          });
        }
      });
    },
    selUserTest() {
			this.tets_user = this.tets_user == '' ? 1 : ''
			this.getList()
			this.txtInner = this.txtInner == '筛选测试用户' ? '全部用户' : '筛选测试用户'
    },
    //添加用户
		addUser() {
			this.addUserDialogVisible = true
    },
    //监听省/市/区
		pcdChange(val) {
      let addr_type = ''
      var _this = this
			switch (val) {
				case '1':
          addr_type = 'province'
					break
				case '2':
					addr_type = 'city'
					break
				case '3':
					addr_type = 'district'
					break
			}
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=device.device_manage.device_addr',
				data: this.qs.stringify({
					addr_type
				})
			}).then((res) => {
				if (res.data.message == '') {
					_this.areaList = res.data.data
          _this.addUserForm.user_area = ''
          _this.editUserForm.user_area = ''
				}
			})
    },
    //监听用户类型改变
		userTypeChange(val) {
			if (val == 3) {
				this.editIsShow = true
			} else {
				this.editIsShow = false
			}
    },
    addUserDialogClosed() {
      this.$refs.addUserFormRef.resetFields()
      this.editIsShow = false
      this.addUserForm.role_id = ''
    },
    changePage(value) {
			this.page = value
			this.getList()
    },
    //添加用户提交
		addUserSubm() {
			this.$refs.addUserFormRef.validate((valid) => {
				if (!valid) return
				let cs_user = this.addUserForm.cs_user ? '1' : ''
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=user.login.regiest',
					data: this.qs.stringify({
						username: this.addUserForm.username,
						mobile: this.addUserForm.mobile,
						password: this.addUserForm.pass,
						role_id: this.addUserForm.role_id,
						user_type: this.addUserForm.user_type,
						pcd: this.addUserForm.pcd,
						user_area: this.addUserForm.user_area,
						user_group_id: this.addUserForm.user_group_id,
						projectname:this.addUserForm.projectname,
						cs_user
					})
				}).then((res) => {
					if (res.data.message == '') {
						this.$message.success('添加用户成功！')
						this.addUserDialogVisible = false
						this.getList()
					} else {
						this.$message.error(res.data.message)
					}
				})
			})
    },
    // 编辑用户信息
		edit(role) {
			console.log(role)
			let data = JSON.stringify(role)
			this.editUserForm = JSON.parse(data)
			if (role.role_id == 0) {
				//把0转换成""
				this.editUserForm.role_id = ''
      }
      if (role.user_group_id=='0') {
				//把0转换成""
				this.editUserForm.user_group_id = ''
			}
			this.editUserDialogVisible = true
    },
    editUserDialogClosed() {
			this.$refs.editUserFormRef.resetFields()
			this.areaList = [] //清空省/市/区
			this.editIsShow = false
    },
    //修改用户信息提交
	editUserSubm() {
		this.$refs.editUserFormRef.validate((valid) => {
			if (!valid) return
			console.log(this.editUserForm.user_group_id)
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=user.login.users_info_updata',
				data: this.qs.stringify({
					uid: this.editUserForm.uid,
					username: this.editUserForm.username,
					mobile: this.editUserForm.mobile,
					role_id: this.editUserForm.role_id,
					user_type: this.editUserForm.user_type,
					pcd: this.editUserForm.pcd,
					user_area: this.editUserForm.user_area,
					projectname:this.editUserForm.projectname,
					user_group_id: this.editUserForm.user_group_id=='0'?'':this.editUserForm.user_group_id
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.editUserDialogVisible = false
					this.getList()
				}
			})
		})
	},
	login(uid, username) {
		//一键登录
		this.$confirm('一键登录将登录此用户，是否继续?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		})
			.then(() => {
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=user.login.auto_login',
					data: this.qs.stringify({
						uid
					})
				}).then((res) => {
					if (res.data.message == '') {
						this.$message({
							type: 'success',
							message: '操作成功!'
						})
						localStorage.setItem('cUsername',username) //修改当前登录的用户名
						this.reload() //整体刷新
						window.sessionStorage.removeItem("menuTabs");
          				window.sessionStorage.removeItem("menuTabsValue");
						// this.$EventBus.$on('firstPage', (data) => {
						// 	//默认显示菜单第一项
						// 	this.$router.push(`${data}`)
						// })
					} else {
						this.$message({
							type: 'warning',
							message: res.data.message
						})
					}
				})
			})
			.catch(() => {
				this.$message({
					type: 'info',
					message: '取消一键登录！'
				})
			})
	},
	//用户禁用
	forbidUse(id, state, txt) {
		this.$confirm(txt, '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		})
			.then(() => {
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=user.login.users_statu_updata',
					data: this.qs.stringify({
						uid: id,
						state: state
					})
				}).then((res) => {
					if (res.data.message == '') {
						this.$message({
							type: 'success',
							message: '操作成功!'
						})
						this.getList()
					}
				})
			})
			.catch(() => {
				this.$message({
					type: 'info',
					message: '禁用取消！'
				})
			})
	},
	distribute(id, username) {
		this.$store.commit('setData',{
			name:'allo_equip_user_id',
			val:id
		})
		this.$store.commit('setData',{
            name:'allo_equip_usename',
            val:username
        })
		this.$router.push('allotEquip')
	},
	recharge(id) {
			this.$confirm('是否向该用户充值一年费用?', '信息', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$axios({
						method: 'POST',
						url: '/api/api_gateway?method=user.login.user_add_package_time',
						data: this.qs.stringify({
							uid: id
						})
					}).then((res) => {
						if (res.data.message == '') {
							this.$message({
								type: 'success',
								message: '充值成功!'
							})
							this.getList()
						} else {
							this.$message({
								type: 'error',
								message: '充值失败!'
							})
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '充值取消！'
					})
				})
	},
	//密码重置
	resetPassword(id, name) {
		// this.resetPassForm.uid = id
		// this.resetPassForm.username = name
		// this.resetPassDialogVisible = true
		this.$confirm('是否重置密码 ? 重置后的密码为 yf_123456', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		})
			.then(() => {
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=user.login.admin_changepwd',
					data: this.qs.stringify({
						uid: id
					})
				}).then((res) => {
					if (res.data.message == '') {
						this.$message({
							type: 'success',
							message: '操作成功!'
						})
						this.getList()
					} else {
						this.$message({
							type: 'warning',
							message: res.data.message
						})
					}
				})
			})
			.catch(() => {
				this.$message({
					type: 'info',
					message: '取消重置密码！'
				})
			})
	},
    
  },
  filters: {
      formatUserType(value) {
			switch (value) {
				case 1:
					return '超级管理员'
					break
				case 2:
					return '经销商'
					break
				case 3:
					return '农林政府单位'
					break
				case 4:
					return '普通用户'
					break
			}
		}
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.search-box {
  text-align: right;
  .el-input {
    width: 200px;
    vertical-align: middle;
  }
  .el-select {
    vertical-align: middle;
  }
}
/deep/.el-table th, /deep/.el-table td{
    text-align: center;
}
/deep/.el-table th{
    background-color: #f6f6f6;
}
/deep/.el-table thead{
    color: #373737;
}
.greenState{
  color: green;
}
.redState{
  color: red;
}
// 分页为蓝色调
/deep/.el-pagination .el-pager li.active{
  background-color: #0295ff!important;  
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled):hover{
  color: #0295ff;
}
/deep/.el-input__inner:focus{
  outline: none;
  border-color: #0295ff;
}
</style>