<template>
  <div class="staff-info">
    <div class="title-header">
      <h2 class="name">代理设置</h2>
    </div>
    <!--search-->
    <div id="search-container">
      <div class="fl">
        <el-button type="primary" class="legacy" @click="addUserBtn">新增被代理用户</el-button>
      </div>
      <div class="fr">
        <el-button type="text" @click="showSearch">
          高级搜索
          <i class="el-icon-arrow-down" v-if="this.isHide"></i>
          <i class="el-icon-arrow-up" v-if="!this.isHide"></i>
        </el-button>
      </div>
    </div>

    <div id="advanced-search" :class="{hide: isHide}">
      <el-row>
        <el-col :span="2"><span class="search-label">用户名称:</span></el-col>
        <el-col :span="3">
          <el-input type="text" v-model="userName" placeholder="请输入用户名称"></el-input>
        </el-col>
        <el-col :span="2"><span class="search-label"> 代理状态:</span></el-col>
        <el-col :span="3">
          <el-select id="s-state" v-model="proxyState">
            <el-option
              v-for="item in search_options"
              :label="item.name"
              :value="item.code"
              :key="item.code">
            </el-option>
          </el-select>
        </el-col>
        <div class="fr">
          <el-button @click="search">搜索</el-button>
        </div>
      </el-row>
    </div>

  
    <div id="staff-list">
      <div id="staff-detail" style="font-size: 0px;">
        <div id="tpl-container" style="height: 400px; position:relative;">
            <el-table
            :max-height="400"
            :data="tableData"
            style="width: 100%">
              <el-table-column
                v-for="column in tableColumn"
                :prop="column.prop"
                :label="column.title"
                v-if="column.display"
                :key="column.prop">
                <template scope="scope"><span :title="scope.row[column.prop]">{{scope.row[column.prop]}}</span></template>
              </el-table-column>
              <el-table-column
                label="操作"
                >
                <template scope="scope">
                  <el-tooltip style="cursor: pointer;" class="item" effect="dark" placement="top-start" content="管理代理人">
                    <i  class="el-icon-view" type="primary" @click="proxyManage(scope.row)" v-show="tableData.length>0"></i>
                  </el-tooltip>
                  <el-tooltip style="cursor: pointer;" class="item" effect="dark" placement="top-start" content="代理设置">
                    <i  class="el-icon-setting" type="primary" @click="proxySet(scope.row)" v-show="tableData.length>0"></i>
                  </el-tooltip>
                  <el-tooltip style="cursor: pointer;" class="item" effect="dark" placement="top-start" content="取消代理">
                    <i class="el-icon-circle-cross" type="primary" @click="proxyCanel(scope.row)" v-show="tableData.length>0"></i>
                  </el-tooltip>
                   <el-tooltip style="cursor: pointer;" class="item" effect="dark" placement="top-start" content="代理记录查看">
                    <i class="el-icon-document" type="primary" @click="proxyHistory(scope.row)" v-show="tableData.length>0"></i>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </div>
      </div>
      <!--pagination-->
      <el-pagination
        id="staff-pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalElements">
      </el-pagination>
  </div>

<!-- 待选择的人员列表 -->
  <el-dialog :title="titlenName" v-model="dialogFormVisible" class="beSelectedList">
     <!-- 搜索部分 -->
      <div id="shareInput" style="position: relative;margin-bottom: 5px">
        <el-input
          class="share"
          placeholder="请输入用户名称或编码"
          icon="search"
          v-model="searchInput"
          :on-icon-click="handleIconClick">
        </el-input>
      </div>

      <!-- table部分 -->
      <div style="width: 100%;">
        <el-table
          ref="singleTable"
          :data="userList"
          highlight-current-row
          @current-change="handle">
          <el-table-column
            property="user_name"
            label="用户">
          </el-table-column>
          <el-table-column
            property="user_code"
            label="编码">
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <el-pagination
        id="staff-pagination"
        @size-change="handleSizeChange_01"
        @current-change="handleCurrentChange_01"
        :current-page="currentPage_01"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size_01"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalElements_01">
      </el-pagination>

      <!-- 底部按钮部分 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
      
  </el-dialog>

  

<!-- 管理代理人 -->

<el-dialog title="管理代理人" v-model="dialogFormVisible_02">
   <div>
      <div id="shareInput" style="position: relative;margin-bottom: 5px;overflow: hidden;">
        <el-button type="primary" @click="proxyAdd()" class="fr">新增代理</el-button>
        <el-input
          class="share"
          placeholder="请输入用户名称或编码"
          icon="search"
          v-model="searchInput_02"
          :on-icon-click="handleIconClick_02">
        </el-input>
      </div>
     <el-table
        ref="singleTable"
        :data="userList_02"
        highlight-current-row
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="100">
        </el-table-column>
        <el-table-column
          property="agentUserCode"
          label="编码">
        </el-table-column>
        <el-table-column
          property="agentUserName"
          label="代理人">
        </el-table-column>
        <el-table-column
            label="操作"
            width="100">
            <template scope="scope">
              <el-tooltip style="cursor: pointer;" class="item" effect="dark" placement="top-start" content="删除">
                <i  class="el-icon-delete" type="primary" @click="proxyDelete(scope.row)" v-show="userList_02.length>0"></i>
              </el-tooltip>
            </template>
        </el-table-column>
      </el-table>
       <el-pagination
        id="staff-pagination"
        @size-change="handleSizeChange_02"
        @current-change="handleCurrentChange_02"
        :current-page="currentPage_02"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size_02"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalElements_02">
      </el-pagination>
      <div style="clear: both;"></div>
    </div> 
  </el-dialog>



<!-- 代理记录查看 -->

<el-dialog title="代理记录查看" v-model="dialogFormVisible_03">
   <div>
     <el-table
        ref="singleTable"
        :data="userList_03"
        highlight-current-row
        @current-change="handleCurChange_03"
        style="width: 100%">
        <el-table-column
          type="index"
          label="编号"
          width="80">
        </el-table-column>
        <el-table-column
          property="startTime"
          label="代理开始时间"
          width="140">
        </el-table-column>
        <el-table-column
          property="endTime"
          label="代理结束时间">
        </el-table-column>
         <el-table-column
          property="agentUserName"
          label="实际代理人"
          width="120">
        </el-table-column>
        <el-table-column
          property="agentReason"
          label="代理原因">
        </el-table-column>
      </el-table>
    </div> 
  </el-dialog>


<!-- 代理设置 -->

<el-dialog title="代理设置" v-model="dialogFormVisible_04">
    <div>
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="代理开始时间:">
          <div class="block">
            <el-date-picker
              v-model="startTime"
              type="datetime"
              :default-value="startTime"
              placeholder="选择日期时间"
              :picker-options="pickerOptionsStart">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="代理结束时间:">
          <div class="block">
            <el-date-picker
              v-model="endTime"
              type="datetime"
              placeholder="选择日期时间"
              :default-value="endTime"
              :picker-options="pickerOptionsEnd">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="代理原因:">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="proxyTextarea">
          </el-input>
        </el-form-item>
        <el-form-item label="转出:" id="roll">
            <el-checkbox v-model="optState">将未处理的任务转出</el-checkbox>
        </el-form-item>
      </el-form>
      <div style="text-align: right;">
        <el-button @click="cancelSecond_03">取 消</el-button>
        <el-button type="primary" @click="confirmSecond_03">确 定</el-button>
      </div>
    </div> 
  </el-dialog>

<!-- 取消代理 -->
    <el-dialog
      title="取消代理"
      v-model="delDialogVisible"
      :modal="true"
      size="tiny">
      <strong>取消代理之后，将由本人进行任务处理，请确认是否将代理人未处理的任务转出给被代理人处理？</strong>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="rollOut('是')">转出</el-button>
        <el-button type="primary" @click="rollOut('否')">不转出</el-button>
        <el-button @click="rollOut('cancel')">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    computed: {
      pickerOptionsEnd() {
        const vm = this;
        return {
          disabledDate(time) {
            return time.getTime() < vm.startTime - 8.64e7 ;
          }
        }
      },
    },
    data(){
      return {
      userList_02Length:0,
      agentId:'',
      titlenName:'新增代理人员列表',
      agentUserId:'',
      userId:'',
      proxyadd:false,
      userList_02:[],
      optState:'',
      rowUserId:'',
      userName:'',
      proxyState:'',
      proxyTextarea:'',
      pickerOptionsStart: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      endTime:'',
      startTime:'',
      searchInput_02:'',
      searchInput_03:'',
      currentRow:'',
      userList: [],
      userList_03: [],
      currentRow: null,
      searchInput: '',
      dialogFormVisible: false,
      dialogFormVisible_02: false,
      dialogFormVisible_03: false,
      dialogFormVisible_04:false,
      tableData:[{}],
      tableColumn: [{
        title: '编码',
        prop: 'userCode',
        display: true
      },
      {
        title: '用户',
        prop: 'userName',
        display: true
      },
        {
        title: '代理状态',
        prop: 'state',
        display: true
      },
      {
        title: '代理开始时间',
        prop: 'startTime',
        display: true
      },
      {
        title: '代理结束时间',
        prop: 'endTime',
        display: true
      },
      {
        title: 'id',
        prop: 'id',
        display: false
      }],
        isHide: true,
        size: 10,
        size_01: 10,
        size_02: 10,
        size_03: 10,
        currentPage: 1,
        currentPage_01: 1,
        currentPage_02: 1,
        currentPage_03: 1,
        totalElements: 0,
        totalElements_01: 0,
        totalElements_02: 0,
        totalElements_03: 0,
        search_options: [
          {
            name: '全部',
            code: ''
          },
          {
            name: '未设置',
            code: '未设置'
          }, {
            name: '代理中',
            code: '代理中'
          }, {
            name: '等待中',
            code: '等待中'
          }, {
            name: '结束',
            code: '结束'
          }
        ],
        delDialogVisible: false
      };
    },
    created(){
      this.request();
      this.request_01();
    },
    mounted(){
      
    },
    methods: {
    resetData(){
        this.agentUserId='';
        this.agentId='';
        this.rowUserId='';
        this.startTime='';
        this.endTime='';
        this.proxyTextarea='';
        this.agentUserId='';
        this.optState='';
    },
     formatDate(now) { 
        var year=now.getYear(); 
        var month=now.getMonth()+1; 
        var date=now.getDate(); 
        var hour=now.getHours(); 
        var minute=now.getMinutes(); 
        var second=now.getSeconds(); 
        return "20"+year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
      },
      proxyAdd(){
        // alert(this.userList_02Length);
        if(!this.userList_02Length>0){
          this.proxyadd=true;
          this.dialogFormVisible=true;
          this.titlenName='管理代理人列表';
        }else{
          this.$message({
            message: "代理人已存在",
            type: 'error'
          });
        }
      },
      rollOut(item){
        if(item!="cancel"){
          this.optState=item;
        }else{
          this.delDialogVisible=false;
          return;
        }
        var vm = this;
        var params={
          userId:this.rowUserId,
          optState:this.optState
         };
          this.$http({
            url: '/ifbp-bpm-service/iuapBpmAgentlinkinf/deleAgent',
            method: 'get',
            params: params
          }).then((res) => {
            console.log("sss");
            console.log(res.data.success);
            if(res.data.success){
              this.$message({
                message: '取消代理成功',
                type: 'success'
              });
              this.delDialogVisible=false;
              vm.request();
            }else{
              vm.$message({
                message: res.data.errorMessage,
                type: 'error'
              });
            }
          }).catch(() => {
            this.$message.error('去掉代理失败');
          }); 
      },
      proxyDelete(row){
        console.log(row);
        var vm = this;
        var params={
          id:row.id
         };
          this.$http({
            url: '/ifbp-bpm-service/iuapBpmAgentlinkinf/logicDeleteIuapBpmAgentlinkinfById',
            method: 'get',
            params: params
          }).then((res) => {
            console.log("ss")
            console.log(res);
            if(res.status==200){
              if(res.data.success){
                this.$message({
                  message: '删除成功',
                  type: 'success'
                });
                vm.request_02();
              }else{
                vm.$message({
                  message: res.data.errorMessage,
                  type: 'error'
                 });
              }
            }else{
              vm.$message({
                message: res.data.errorMessage,
                type: 'error'
              });
            }
          }).catch(() => {
            this.$message.error('查询代理记录失败');
          });
      },
      proxyCanel(row){
        this.delDialogVisible=true;
        this.rowId=row.id;
        this.rowUserId=row.userId;
      },
      proxySet(row){
        // this.rowId=row.id;
        this.rowUserId=row.userId;
        this.isProxySet(row);
      },
     isProxySet(row){
        var vm = this;
        var url;
        url = '/ifbp-bpm-service/iuapBpmAgentlinkinf/getIuapBpmAgentlinkinfByPage?page=1&rows=10&condition='+this.searchInput_02+'&userId='+this.rowUserId;
        this.$http({
          url: url,
          method: 'get',
          dataType: 'json'
        }).then((res) => {
          console.log("被代理人");
          console.log(res);
          // this.dialogFormVisible_04=true;
          // this.agentUserId=res.data.rows[0].agentUserId;
          // this.agentId=res.data.rows[0].id;
          // alert(res.data.rows[0].id)
          // 
          // if(res.status === 200){
              if(res.data.rows.length>0){
                this.dialogFormVisible_04=true;
                this.agentUserId=res.data.rows[0].agentUserId;
                this.agentId=res.data.rows[0].id;
                vm.proxyEcho(this.agentId);



















              }else{
                this.$message.error('被代理人不存在');
                return;
              }
          // }
          // if(res.status==200){
          //     if(res.data.length<0){
          //       this.$message.error('被代理人不存在');
          //     }else{
          //       this.agentUserId=res.data[0].agentUserId;
          //       this.dialogFormVisible_04=true;
          //     }
          //   }else{
          //     vm.$message({
          //       message: res.data.errorMessage,
          //       type: 'error'
          //     });
          //   }
        }).catch(() => {
          this.$message({
            message: '列表获取失败',
            type: 'error'
          });
        });
      },
      proxyHistory(row){
        var vm = this;
        var params={
          userId:row.userId
         };
          this.$http({
            url: '/ifbp-bpm-service/iuapBpmAgentlinkinf/getIuapBpmAgentlinkinfAll',
            method: 'post',
            data: params
          }).then((res) => {
            this.dialogFormVisible_03=true;
            console.log(res);
            if(res.status==200){
              vm.userList_03=res.data;
            }else{
              vm.$message({
                message: res.data.errorMessage,
                type: 'error'
              });
            }
          }).catch(() => {
            this.$message.error('查询代理记录失败');
          }); 
      },
      proxyEcho(id){
        var vm = this;
        var params={
          id:id
         };
          this.$http({
            url: '/ifbp-bpm-service/iuapBpmAgentlinkinf/getIuapBpmAgentlinkinfById',
            method: 'get',
            params: params
          }).then((res) => {
            if(res.status==200){
              if(res.data.startTime){
                vm.startTime=new Date(res.data.startTime)
              }else{
                vm.startTime='';
              }
              if(res.data.endTime){
                vm.endTime=new Date(res.data.endTime)
              }else{
                vm.endTime='';
              }
              vm.proxyTextarea=res.data.agentReason||'';
              var optState=(res.data.optState=='是')?true:false;
              vm.optState=optState||'';
            }else{
              vm.$message({
                message: res.data.errorMessage,
                type: 'error'
              });
            }
          }).catch(() => {
            this.$message.error('查询代理设置记录失败');
          }); 
      },
      proxyManage(row){
        this.dialogFormVisible_02=true;
        this.rowUserId=row.userId;
        this.request_02();
      },
      handle(val) {
        this.currentRow = val;
        console.log(val);
      },
      handleCurChange_02(val) {
        this.currentRow = val;
        console.log(val);
      },
      handleCurChange_03(val) {
        this.currentRow = val;
        console.log(val);
      },
      cancelSecond_03(){
        this.dialogFormVisible_04=false;
      },
      cancel(){
        this.dialogFormVisible=false;
      },
      confirm(){
        if(this.proxyadd){
          // 新增代理人
            var vm = this;
            var params={
              userId:this.rowUserId,
              agentUserCode:this.currentRow.user_code,
              agentUserId:this.currentRow.id,
              agentUserName:this.currentRow.user_name,
             };
              this.$http({
                url: '/ifbp-bpm-service/iuapBpmAgentlinkinf/insertOrUpdate',
                method: 'get',
                params: params
              }).then((res) => {
                console.log(res.status);
                if(res.status==200){
                  this.$message({
                    message: '新增代理人成功',
                    type: 'success'
                  });
                  this.proxyadd=false;
                  vm.dialogFormVisible=false;
                  vm.request_02();
                }else{
                  vm.$message({
                    message: res.data.errorMessage,
                    type: 'error'
                  });
                }
              }).catch(() => {
                this.$message.error('新增失败');
              });
        }else{
          // 新增被代理人
          var vm = this;
          var params={
            userCode:this.currentRow.user_code,
            userId:this.currentRow.id,
            userName:this.currentRow.user_name,
            state:"未设置"
           };
            this.$http({
              url: '/ifbp-bpm-service/iuapBpmAgentuser/insertOrUpdate',                     
              method: 'get',
              params: params
            }).then((res) => {
              console.log(res.status);
              if(res.status==200){
                this.$message({
                  message: '新增被代理人成功',
                  type: 'success'
                });
                vm.dialogFormVisible=false;
                vm.request();
              }else{
                vm.$message({
                  message: res.data.errorMessage,
                  type: 'error'
                });
              }
            }).catch(() => {
              this.$message.error('新增失败');
            });
          }
      },
      confirmSecond_03(){
        Date.prototype.toLocaleString = function() {
          return this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate() + " " + this.getHours() + ":" + this.getMinutes() + ":" + this.getSeconds();
        };
        var startTime=new Date(this.startTime).getTime();
        var endTime=new Date(this.endTime).getTime();
        if(!this.startTime){
          this.$message({
            message: '开始时间不能为空',
            type: 'error'
          });
          return;
        };
        if(endTime<startTime){
          this.$message({
            message: '代理结束时间早于代理开始时间',
            type: 'error'
          });
        }else{
          this.startTime = new Date(this.startTime).toLocaleString();
          this.endTime = new Date(this.endTime).toLocaleString();
          var optState=this.optState?'是':'否';
          var vm = this;
          var params={
            agentUserId:this.agentUserId,
            id: this.agentId,
            userId:this.rowUserId,
            startTime:this.startTime,
            endTime:this.endTime,
            optState:optState,
            agentReason:this.proxyTextarea
           };
          this.$http({
            url: '/ifbp-bpm-service/iuapBpmAgentlinkinf/saveAgentlinkinf',
            method: 'get',
            params: params
          }).then((res) => {
            if(res.status==200 && res.data.success){
              this.$message({
                message: '代理人设置成功！',
                type: 'success'
              });
              vm.dialogFormVisible_04=false;
              vm.resetData();
              vm.request();
            }else{
              vm.$message({
                message: "代理结束时间不能为空，或者时间格式错误！",
                type: 'error'
              });
            }
          }).catch(() => {
            this.$message.error('代理人设置失败！');
          });
        }
      },
      handleIconClick() {
        this.request_01();
      },
      handleIconClick_02() {
        this.request_02();
      },
      handleIconClick_03() {
        this.request();
      },
      request(n, s) {
        var url;
        var search = '&userName=' + this.userName + '&state=' + this.proxyState;
        if(n===undefined){
          url = '/ifbp-bpm-service/iuapBpmAgentuser/getIuapBpmAgentuserByPage?page=1&rows=10' + search;
        } else {
          url = '/ifbp-bpm-service/iuapBpmAgentuser/getIuapBpmAgentuserByPage?page='+ n +'&rows=' + s + search;
        }
        this.$http({
          url: url,
          method: 'get',
          dataType: 'json'
        }).then((res) => {
          console.log(res.data);
          if(res.status === 200){
              this.totalElements = res.data.total ;       // 总条数
              this.size = s||10;                          // 每页的条数
              this.tableData=res.data.rows;
          }
        }).catch(() => {
          this.$message({
            message: '列表获取失败',
            type: 'error'
          });
        });
      },
     request_01(n, s) {
        var vm = this;
        var url;
        if(n===undefined){
          url = '/wbalone/userMGT/pagingListByRole?pn=1&ps=10&keyword='+this.searchInput;
        } else {
          url = '/wbalone/userMGT/pagingListByRole?pn='+ n +'&ps=' + s + '&keyword='+this.searchInput;
        }
        this.$http({
          url: url,
          method: 'get',
          dataType: 'json'
        }).then((res) => {
          if(res.data.status === 1){
            this.totalElements_01 = res.data.data.totalElements ;       // 总条数
            this.size_01 = res.data.data.size;                          // 每页的条数
            vm.userList=res.data.data.content;
          }
        }).catch(() => {
          this.$message({
            message: '列表获取失败',
            type: 'error'
          });
        });
      },
      request_02(n, s) {
        var vm = this;
        var url;
        if(n===undefined){
          url = '/ifbp-bpm-service/iuapBpmAgentlinkinf/getIuapBpmAgentlinkinfByPage?page=1&rows=10&condition='+this.searchInput_02+'&userId='+this.rowUserId;
        } else {
          url = '/ifbp-bpm-service/iuapBpmAgentlinkinf/getIuapBpmAgentlinkinfByPage?page='+ n +'&rows=' + s + '&condition='+this.searchInput_02+'&userId='+this.rowUserId;
        }
        this.$http({
          url: url,
          method: 'get',
          dataType: 'json'
        }).then((res) => {
         if(res.status === 200){
            this.totalElements_02 = res.data.total ;       // 总条数
            this.size_02 = s||10;                          // 每页的条数
            vm.userList_02=res.data.rows;
            vm.userList_02Length=res.data.rows.length;
          }
        }).catch(() => {
          this.$message({
            message: '列表获取失败',
            type: 'error'
          });
        });
      },
      handleSizeChange(val) {
        this.request(1, val);
      },
      handleSizeChange_02(val) {
        this.request_02(1, val);
      },
      handleSizeChange_01(val) {
        this.request_01(1, val);
      },
      handleCurrentChange_01(val) {
        this.request_01(val, this.size_01);
      },
      handleCurrentChange_02(val) {
        this.request_02(val, this.size);
      },
      handleCurrentChange(val) {
        this.request(val, this.size);
      },
      // 高级搜索
      showSearch() {
        this.isHide = !this.isHide;
      },
      search() {
        this.request();
      },
      // 新增
      addUserBtn() {
        this.dialogFormVisible = true;
        this.titlenName="新增代理人人员列表";
      }
    }
  };

</script>
<style>
  .beSelectedList .el-dialog__body{
    max-height: 524px;
  }
  .beSelectedList .el-dialog__footer{
    text-align: left;
    padding-top: 36px;
  }
  .staff-info{
    margin: 20px 30px;
  }
  #search-container{
    height: 56px;
    padding: 10px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e3e3e3;
  }
  #advanced-search{
    display: block;
    height: 56px;
    padding: 10px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e3e3e3;
    position: relative;
  }
  #advanced-search .el-col{
    text-align: center;
  }
  #advanced-search.hide{
    display: none;
    transition: all .5s ease;
  }
  #staff-list{
    overflow: auto;
    padding: 5px 20px;
  }
  #staff-list, #staff-detail{
    margin-top: 20px;
    background: #ffffff;
    position: relative;
    padding: 0 20px;
  }

  .search-label{
    line-height: 36px;
    font-size: 14px;
    margin-left: 10px;
  }
  /* 重置表格字体及表头背景，参考友人才 */
  #staff-list .el-table__header th{
    font-size: 15px;
    font-weight: 400;
    color: #333;
  }
  #staff-list .el-table__body .cell{
    font-size: 13px;
    font-weight: normal;
    color: #333;
  }
  #staff-list .el-table thead tr, #staff-list .el-table thead tr th {
    background-color: #eee;
  }
  #staff-list .el-table__footer-wrapper thead div, #staff-list .el-table__header-wrapper thead div {
    background-color: #eee;
    color: #333;
  }
  .legacy{
  padding-left:20px;
  padding-right:20px;
  }
  .hidSelect{
    position: absolute;
    left: 24px;
    top: 104px;
    width: 30px;
    height: 40px;
    z-index: 1000;
    background: #EEEFF1;
  }
  .el-form--inline .el-form-item__label{
    width: 100px;
  }
  #shareInput .el-input{
    width: 250px!important;
  }
  #roll .el-form-item__content{
    vertical-align: middle!important;
  }
 /* #shareInput .el-dialog--small{
    width: 450px!important;
  }*/
</style>
