<template>
    <d2-container>
        <div v-if="isExpend" class="d2-fl d2-tree-view">
            <el-tree
                    ref="tree"
                    highlight-current
                    :data="treeData"
                    default-expand-all
                    :props="defaultProps"
                    @node-click="handleNodeClick"
            >
        <span class="icon-tree" slot-scope="{ node, data }">
          <div v-if="data.alias == 'top'">
          	<i class="fa fa-university"></i>
          	<span>&nbsp;{{node.label}}</span>
          </div>
          <div v-if="data.alias == 'JG001'">
          	<i class="fa fa-building"></i>
          	<span>&nbsp;{{node.label}}</span>
          </div>
          	<div v-if="data.alias == 'user'">
          	<i class="fa fa-users"></i>
          	<span>&nbsp;{{node.label}}</span>
          </div>
        </span>
            </el-tree>
        </div>
        <div
                @click="isExpend = !isExpend"
                :class="[{'angle-view':isExpend},{'angle-view-none':!isExpend}]"
        >
            <i :class="['fa', {'fa-angle-left':isExpend},{'fa-angle-right':!isExpend}]"></i>
        </div>
        <div :class="[{'d2-fl':isExpend},{'d2-table-view':isExpend},{'d2-table-view-full':!isExpend}]">
            <div class="d2-table-view-header">
                <el-form
                        size="small"
                        :inline="true"
                        :model="filter"
                        @keyup.enter.native="handleList"
                        class="demo-form-inline"
                        labelPosition="right"
                >
                    <el-form-item label="工号">
                        <el-input v-model.trim="filter.userNo" clearable/>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model.trim="filter.userNm" clearable/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleList('1')">查询</el-button>
                    </el-form-item>

                </el-form>
            </div>
            <div class="d2-table-view-content">
                <div class="d2-table-view-handle">
                    <el-button :disabled="falg" @click="operVisible = !operVisible" size="small" icon="el-icon-plus">新增</el-button>
                    <!--<el-button  size="small" type="primary">导入</el-button>-->
                    <!--<el-button size="small" type="success" @click="onExportClick">导出</el-button>-->
                    <el-button  size="small" type="primary" @click="onChangeStatus">离职</el-button>
                    <!--<el-button  size="small" type="success">重新入职</el-button>-->
                    <!--<el-button  size="small" type="primary" @click="changeDepNmClick">部门调动</el-button>-->
                    <!--<el-button @click="classVisible = !classVisible" size="small">部门调动</el-button>-->
                </div>
                <d2-crud
                        title="教工管理列表"
                        ref="d2Crud"
                        :options="tableOptions"
                        :loading="loading"
                        :columns="columns"
                        :data="data"
                        :rowHandle="rowHandle"
                        @edit="handleRowEdit"
                        @delete="handleRowRemove"
                        selection-row
                        @selection-change="handleSelectionChange"
                >
                </d2-crud>
            </div>
            <div class="d2-table-view-footer">
                <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :page-size="tableOptions.pageList[0]"
                        :page-sizes="tableOptions.pageList"
                        :current-page.sync="currentPage"
                        layout="total,sizes, prev, pager, next,jumper"
                        :total="pagination.total"
                ></el-pagination>
            </div>
        </div>
        <el-dialog
                :title="diaLogName"
                :visible.sync="operVisible"
                @close="clearForm"
                width="67%"
                :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" label-width="80px" labelPosition="right" :rules="rules">
                <el-row :gutter="15">
                    <el-col :span="8">
                        <el-form-item label="教师工号" prop="userNo">
                            <el-input v-model="form.userNo" maxlength="16" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="教师名称" prop="userNm">
                            <el-input maxlength="6" v-model.trim="form.userNm"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属部门" prop="depId">
                            <!--<el-select v-model="form.depId">-->
                                <!--&lt;!&ndash;<el-option v-for=" (item,index) in lanuchs" :key="index" :label="item.mealName"&ndash;&gt;-->
                                           <!--&lt;!&ndash;:value="item.depId"></el-option>&ndash;&gt;-->
                                <!--<el-option value="001">教务部</el-option>-->
                            <!--</el-select>-->
                            <!-- <custom-select :value="form.depId" v-model="form.depId" typeName="所属部门" style="width: 100%"></custom-select> -->
							<el-input disabled v-model="form.depNm"  />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属角色" prop="roleId">
                    <el-select v-model="form.roleId">
                    <el-option v-for=" (item,index) in lanuchs" :key="index" :label="item.roleNm"
                    :value="item.roleId"></el-option>
                    </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="在职状态" prop="status">
                            <custom-select :value="form.status" v-model="form.status" typeName="在职状态" style="width: 100%"></custom-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否任课" prop="participatingStates">
                            <custom-select :value="form.participatingStates" v-model="form.participatingStates" typeName="是否任课" style="width: 100%"></custom-select>
                        </el-form-item>
                    </el-col>
                    <!--<el-col :span="8">-->
                    <!--<el-form-item label="起始时间" prop="startTime" style="width: 100%" >-->
                    <!--<el-date-picker-->
                    <!--v-model="form.startTime"-->
                    <!--type="datetime"-->
                    <!--value-format="yyyy-MM-dd hh:mm:ss"-->
                    <!--&gt;</el-date-picker>-->
                    <!--</el-form-item>-->
                    <!--</el-col>-->
                    <!--<el-col :span="8">-->
                        <!--<el-form-item label="结束时间" prop="endTime" style="width: 100%" >-->
                            <!--<el-date-picker-->
                                    <!--v-model="form.endTime"-->
                                    <!--type="datetime"-->
                                    <!--value-format="yyyy-MM-dd hh:mm:ss"-->
                            <!--&gt;</el-date-picker>-->
                        <!--</el-form-item>-->
                    <!--</el-col>-->
                    <el-col :span="24">
                        <el-form-item label="在职起止日期" prop="time" label-width="120px">
                            <el-date-picker
                                    v-model="form.time"
                                    type="datetimerange"
                                    value-format="yyyy-MM-dd"
                                    format="yyyy-MM-dd"
                                    @change="dateChange"
                                    range-separator="至"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="民族" prop="ethnic">
                            <custom-select :value="form.ethnic" v-model="form.ethnic" typeName="名族" style="width: 100%"></custom-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="性别" prop="sex" >
                            <el-select v-model="form.sex" style="width: 100%">
                                <el-option label="男" value="0"></el-option>
                                <el-option label="女" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="国籍" prop="nationality">
                            <custom-select :value="form.nationality" v-model="form.nationality" typeName="国籍" style="width: 100%"></custom-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="政治面貌" prop="politics">
                            <!--<el-select v-model="form.politics">-->
                                <!--&lt;!&ndash;<el-option v-for=" (item,index) in lanuchs" :key="index" :label="item.mealName"&ndash;&gt;-->
                                           <!--&lt;!&ndash;:value="item.mealId"></el-option>&ndash;&gt;-->
                                <!--<el-option value="1">党员</el-option>-->
                            <!--</el-select>-->
                            <custom-select :value="form.politics" v-model="form.politics" typeName="政治面貌" style="width: 100%"></custom-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="证件类型" prop="extPapers">
                            <!-- <el-select v-model="form.extPapers"> -->
                                <!--<el-option v-for=" (item,index) in lanuchs" :key="index" :label="item.mealName"-->
                                           <!--:value="item.mealId"></el-option>-->
                                <!--<el-option value="1">身份证</el-option>-->
                                <!--<el-option value="2">户照</el-option>-->
                                <custom-select :value="form.extPapers" v-model="form.extPapers" typeName="证件类型" style="width: 100%"></custom-select>
                           <!-- </el-select> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="证件号码" prop="extIdCard">
                            <el-input  v-model.trim="form.extIdCard"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系电话" prop="mblNo">
                            <el-input v-model.trim="form.mblNo"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                    <el-form-item label="email" prop="email">
                        <el-input v-model.trim="form.email"/>
                    </el-form-item>
                </el-col>
                    <el-col :span="8">
                        <el-form-item label="婚姻状况" prop="marriage">
                            <custom-select :value="form.marriage" v-model="form.marriage" typeName="婚姻状况" style="width: 100%"></custom-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="最高学历" prop="education">
                            <!--<el-select v-model="form.education">-->
                                <!--&lt;!&ndash;<el-option v-for=" (item,index) in lanuchs" :key="index" :label="item.mealName"&ndash;&gt;-->
                                           <!--&lt;!&ndash;:value="item.mealId"></el-option>&ndash;&gt;-->
                                <!--<el-option value="1">本科</el-option>-->
                            <!--</el-select>-->
                            <custom-select :value="form.education" v-model="form.education" typeName="最高学历" style="width: 100%"></custom-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="银行开户" class="bankLabel" prop="bank">
                            <el-input  v-model.trim="form.bank" maxlength="20"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="银行卡号" prop="number">
                            <el-input  v-model.trim="form.number"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="联系地址" prop="extAddr">
                            <el-input  v-model.trim="form.extAddr" maxlength="30"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="教师简介" prop="extBrief">
                            <el-input type="textarea" maxlength="100" v-model.trim="form.extBrief"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <zl-button :loading="staLoading" @click="operInstance()"/>
      </span>
        </el-dialog>
        <el-dialog
                title="部门调动"
                :visible.sync="classVisible"
                @close="clearForm1"
                width="50%"
                :close-on-click-modal="false">
            <el-form ref="form1" :model="form1" label-width="100px" labelPosition="right" :rules="rules1">
                <el-row :gutter="20">
                    <el-col :span="20">
                        <el-form-item label="教工名称" prop="nickNm">
                            <el-input  v-model.trim="form1.nickNm"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="20">
                        <el-form-item label="拟调部门" prop="userNm">
                            <department-tree  ref="saffTree"  :str="form1.name" v-model="form1.value"  @clearApartment="clearApartment"></department-tree>
                        </el-form-item>
                    </el-col>
                    <el-col :span="20">
                        <el-form-item label="调动原因">
                            <el-input type="textarea" maxlength="200" v-model.trim="form1.remark"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
		   <el-button :loading="staLoading" @click="onContainClick">保存</el-button>
		 </span>
        </el-dialog>
    </d2-container>
</template>
<script>
  import { tableOptions } from '../../../assets/options'
  import {teacherInfoList,teacherById,saveOrUpdateTeacher,treeNode,deleteStaff,changeStatus,getLanuchList} from '../../../api/sys/teacher'
  import util from '../../../libs/util'
  export default {
    name: 'system-staff',
    components: {

    },
    data () {
      let checkPhone = (rule, value, callback) => {
        let reg = /^1[345789]\d{9}$/
        if (!reg.test(value)) {
          return callback(new Error('请输入正确的手机号码'))
        } else {
          callback ()
        }

      }
      let checkEmail=(rule,value,callback)=>{
        let re=/^\w+@[a-z0-9]+\.[a-z]{2,4}$/;
        if (!re.test(value)) {
          return callback(new Error('请输入正确的邮箱格式'))
        } else {
          callback ()
        }
      }
      let checkNumber=(rule,value,callback)=>{
        if(!value&&value!==0){
          return callback(new Error('不能为空'))
        }
        var pattern = /^([1-9]{1})(\d{14}|\d{18})$/
        if (!pattern.test(value)) {
          return callback(new Error('请输入正确的银行卡号'))
        } else {
          callback ()
        }
      }
      let checkHuZhao=(rule,value,callback)=>{
        if(this.form.extPapers=="0"){
          var idCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
          if (!idCard.test(value)) {
            return callback(new Error('请输入合法的身份证格式'))
          } else {
            callback ()
          }
        }else {
          var huzhao = /(^[EeKkGgDdSsPpHh]\d{8}$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))\d{7}$)/
          if (!huzhao.test(value)) {
            return callback(new Error('请输入正确的护照格式'))
          } else {
            callback()
          }
        }
      }
      let checkCardId = (rule, value, callback) => {
        if(!value){
          return callback(new Error('不能为空'))
        }
        let reg = /^[0-9a-zA-Z]+$/
        if (!reg.test(value)) {
          return callback(new Error('请输入数字或英文'))
        } else {
          callback ()
        }
      }
      return {
        teacherName:[],
        teacherNames:"",
        classVisible:false,
        userIds:[],
        userIdss:"",
        staLoading: false,
        multipleSelection:[],
        func: {
          add: false,
          delete: false,
          update: false,
          select: false
        },
        falg: true,
        isExpend: true,
        tableOptions,
        loading: false,
        operVisible: false,
        diaLogName: '新增',
        lanuchs: [],
        form: {
          time:"",
          userId:"",
          userNo:"",
          userNm:"",
          depId:"",
          roleId:"",
          status:"",
          participatingStates:"",
          startTime:"",
          endTime:"",
          ethnic:"",
          sex:"",
          nationality:"",
          politics:"",
          extPapers:"",
          extIdCard:"",
          mblNo:"",
          email:"",
          marriage:"",
          education:"",
          bank:"",
          number:"",
          addr:"",
          extBrief:"",
		  orgId:''
        },
        form1:{

        },
        filter: {
          pageSize: 10,
          pageNum: 1,
          userNo: '',
          userNm:"",
		  depId:'',
		  userTyp:'1'
        },
        pagination: {
          total: 0
        },
        currentPage: 1,
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        columns: [
          {
            title: '序号',
            key: 'index',
            minWidth: '50',
            formatter (row, column, cellValue, index) {
              return index + 1
            }
          },
          {
            title: '教工工号',
            key: 'userNo',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '姓名',
            key: 'userNm',
            minWidth: '140',
            showOverflowTooltip: true
          },
          // {
          //   title: '教工类型',
          //   key: 'userTyp',
          //   minWidth: '120',
          //   showOverflowTooltip: true,
			// formatter (row, column, cellValue, index) {
			//   if (cellValue === '1') {
			//     return '教师'
			//   } else if (cellValue === '2') {
			//     return '外聘人员'
			//   }
			// }
          // },
          {
            title: '所属部门',
            key: 'depNm',
            minWidth: '120'
          },
          // {
          //   title: '岗位',
          //   key: 'userPost',
          //   minWidth: '120'
          // },
          {
            title: '状态',
            key: 'status',
            minWidth: '90',
            formatter (row, column, cellValue, index) {
              if (cellValue === '0') {
                return '离职'
              } else if (cellValue === '1') {
                return '在职'
              }
            }
          },
          {
            title: '登记日期',
            key: 'creTm',
            minWidth: '180',
			 showOverflowTooltip: true,
            // formatter (row, column, cellValue, index) {
            //   if (cellValue === '0') {
            //     return '上架'
            //   } else if (cellValue === '1') {
            //     return '下架'
            //   }
            // }
          },
        ],
        rowHandle: {
          columnHeader: '操作',
          minWidth: '180',
          align: 'center',
          custom: [
            {
              text: '编辑',
              type: 'primary',
              size: 'small',
              emit: 'edit'
            },
            {
              text: '删除',
              type: 'danger',
              size: 'small',
              emit: 'delete'
            }
          ]
        },
        data: [],
        rules: {
          userNo: [{validator:checkCardId,required: true,  trigger: 'blur'}],
          userNm: [{required: true, message: '请输入教师名称', trigger: 'blur'}],
          depId: [{required: true, message: '请选择所属部门', trigger: 'blur'}],
          roleId: [{required: true, message: '请选择所属角色', trigger: 'blur'}],
          status: [{required: true, message: '请选择在职状态', trigger: 'blur'}],
          participatingStates: [{required: true, message: '请选择是否任课', trigger: 'blur'}],
          time: [{required: true, message: '请选择在职起止时间', trigger: 'blur'}],
          sex: [{required: true, message: '请选择性别', trigger: 'blur'}],
          nationality: [{required: true, message: '请选择国籍', trigger: 'blur'}],
          politics: [{required: true, message: '请选择政治面貌', trigger: 'blur'}],
          extPapers: [{required: true, message: '请选择证件类型', trigger: 'blur'}],
          extIdCard: [{validator:checkHuZhao,required: true, trigger: 'blur'}],
          marriage: [{required: true, message: '请选择婚姻状况', trigger: 'blur'}],
          education: [{required: true, message: '请选择最高学历', trigger: 'blur'}],
          bank: [{required: true, message: '请输入银行开户行', trigger: 'blur'}],
          number: [{validator: checkNumber,required: true, trigger: 'blur'}],
          extAddr: [{required: true, message: '请输入联系地址', trigger: 'blur'}],
          mblNo: [{validator: checkPhone,required: true, trigger: 'blur',message: '请输入正确的格式'}],
          email:[{validator:checkEmail,required: true,trigger: 'blur',message: '请输入正确的格式'}]
        },
        rules1: {

        }
      }
    },

    methods: {
      clearApartment(val){
        this.$set(this.form.checkInList[val],'value','')
        this.$set(this.form.checkInList[val],'name','')
      },
      dateChange (val) {
        if(val == null){
          this.form.startTime= ''
          this.form.endTime = ''
        }else{
          this.$set(this.form,'startTime',val[0])
          this.$set(this.form,'endTime',val[1])
        }
      },
      handleNodeClick (data, node, com) {
		if(data.alias === 'top'){
			this.filter.depId = ''
		}else{
			this.filter.depId = data.id
		}
        if(data.alias === 'JG001'){
        	 this.falg = false
        	 this.form.depId = data.id
        	 this.form.depNm = data.name
         }else{
        	 this.falg = true
         }
        this.handleList()
      },
      handleTreeNode () {
         treeNode({
           depType: 'JG001'
        }).then(res => {
           this.treeData = JSON.parse(res.msgDat)
		    this.form.orgId = this.treeData[0].id
         })
        this.handleList()
      },
      handleList (val) {
        if (val) {
          this.filter.pageNum = 1
          this.currentPage = 1
        }
        this.loading = true
        teacherInfoList(this.filter)
          .then(res => {
            this.loading = false
            this.data = res.pageList.list
            this.pagination.total = res.pageList.total
          })
          .catch(err => {
            this.loading = false
          })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleCurrentChange (val) {
        this.filter.pageNum = val
        this.handleList()
      },
      handleSizeChange (val) {
        this.filter.pageNum = 1
        this.filter.pageSize = val
        this.handleList()
      },
      // 部门调动
      changeDepNmClick(){
        if(!this.multipleSelection.length){
          this.$message({
            message: '请选择记录',
            type: 'warning'
          })
          return
        }
        this.teacherName=[]
        this.multipleSelection.forEach((item,index)=>{
          this.teacherName.push(item.userNm)
        })
        this.teacherNames=this.teacherName.join(",")
        this.form1.nickNm=this.teacherNames
        this.classVisible=true
      },
      // 部门调动保存
      onContainClick(){
        this.$refs['form1'].validate(valid => {
          if (valid) {

          }
        })
      },
      operInstance () {
        // console.log(this.form)
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.staLoading = true
            saveOrUpdateTeacher(this.form)
              .then(res => {
                this.staLoading = false
                this.operVisible = false
                this.$message({
                  message: this.form.userId ? '编辑成功' : '新增成功',
                  type: 'success'
                })
                this.handleTreeNode()
              })
              .catch(err => {
                this.staLoading = false
              })
          }
        })
      },
      handleRowEdit ({index, row}) {
        console.log(row)
        this.diaLogName = '编辑'
       // this.form.userId=row.userId
        teacherById({userId:row.userId}).then(res => {
          this.form = res.update
          // this.form.time=res.update.startAndEndDate
          this.$set(this.form,'time',res.update.startAndEndDate)
		  this.operVisible = true
        })
       
      },
      handleRowRemove ({index, row}) {
        this.$confirm(`确定要删除吗?`, '确认操作', {
           confirmButtonText: '确定',
           cancelButtonText: '放弃',
           type: 'warning'
         }).then(() => {
           let userId = row.userId
           deleteStaff({
             userId
           }).then(res=>{
             this.$message({
               message: '删除成功',
               type: 'success'
             })
             this.handleList ()
           })
         })
      },
      onChangeStatus(){
        this.userIds=[]
        if(!this.multipleSelection.length){
          this.$message({
            message: '请选择记录',
            type: 'warning'
          })
          return
        }
        this.multipleSelection.forEach((item,index)=>{
          this.userIds.push(item.userId)
        })
        this.userIdss=this.userIds.join(",")
changeStatus({userId:this.userIdss}).then(res=>{
  this.$message({
    message: '修改成功',
    type: 'success'
  })
  this.handleTreeNode()
})
      },
      onExportClick(){
        let token=util.cookies.get("token")
        window.open(`http://192.168.9.49:9095/staff/downStaffExcel?userNo=${this.filter.userNo}&realNm=${this.filter.realNm}&token=${token}`)
      },
      clearForm () {
        if (this.$refs['form']!==undefined) {
          this.$refs['form'].resetFields()
        }
        this.form = {
          time:"",
			userId:"",
			userNo:"",
			userNm:"",
			depId:this.form.depId,
			depNm:this.form.depNm,
			roleId:"",
			status:"",
			participatingStates:"",
			startTime:"",
			endTime:"",
			ethnic:"",
			sex:"",
			nationality:"",
			politics:"",
			extPapers:"",
          extIdCard:"",
			mblNo:"",
			email:"",
			marriage:"",
			education:"",
			bank:"",
			number:"",
			addr:"",
			extBrief:"",
			orgId:this.form.orgId
		}
        this.diaLogName = '新增'
      },
      clearForm1(){
        if (this.$refs['form']!==undefined) {
          this.$refs['form'].resetFields()
        }
        this.form1={

        }
      }
    },
    mounted () {
      this.filter.pageSize = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions, 51)
      this.handleTreeNode()
      getLanuchList({}).then(res => {
        // console.log(res)
        this.lanuchs = res.roles
      })
    }
  }
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .timeLabel label{
        width: 110px !important;
    }
    .bankLabel label{
     font-size: 13px;
    }
    .el-form-item__label {
         text-align: left !important;
    }
.d2-table-view{
    overflow: hidden;
}
</style>
