qa-prevention-gwj-vue/src/views/corpInfo/user/components/edit.vue

<template>
  <div>
    <div style="padding:10px 20px 20px 20px">
      <div class="title_super">
        <div>{{ this.$parent.USER_ID == '' ? '新增用户' : '编辑用户' }}</div>
      </div>
      <el-form ref="form" :rules="rules" :model="form" label-width="140px">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="left_super">
              <el-form-item label="角色" prop="ROLE_ID">
                <el-select v-model="form.ROLE_ID" multiple placeholder="请选择" class="filter-item" style="width: 100%;">
                  <el-option
                    v-for="item in roleList"
                    :key="item.role_ID"
                    :label="item.role_NAME"
                    :value="item.role_ID"/>
                </el-select>
              </el-form-item>
              <!--              <el-form-item label="选择角色组" prop="ROLE_NAME">-->
              <!--                <el-select v-model="form.ROLE_NAME" placeholder="请选择" class="filter-item">-->
              <!--                  <el-option-->
              <!--                    v-for="item in roleList_z"-->
              <!--                    :key="item.role_ID"-->
              <!--                    :label="item.role_NAME"-->
              <!--                    :value="item.role_ID"/>-->
              <!--                </el-select>-->
              <!--              </el-form-item>-->
              <el-form-item label="部门" prop="DEPARTMENT_ID">
                <SelectTree
                  ref="deptTree"
                  :clearable="false"
                  :options="treeData"
                  :props="defaultProps"
                  v-model="form.DEPARTMENT_ID"
                  style="width: 100%;"
                  placeholder="请选择部门"/>
              </el-form-item>
              <el-form-item label="岗位" prop="POST_ID">
                <el-select v-model="form.POST_ID" placeholder="请选择" class="filter-item" style="width: 100%;">
                  <el-option v-for="item in postList" :key="item.POST_ID" :label="item.NAME" :value="item.POST_ID"/>
                </el-select>
              </el-form-item>
              <el-form-item label="用户名" prop="USERNAME">
                <el-input v-model="form.USERNAME" placeholder="默认用户手机号码..." @change="goCheck()"/>
                <a style="color: red">
                <span>如果修改手机号，登录密码则会变成初始密码“Aa@123456789”</span></a>
              </el-form-item>
              <el-form-item label="姓名" prop="NAME">
                <el-input v-model="form.NAME" placeholder="这里输入姓名..."/>
              </el-form-item>
              <el-form-item label="人员类型" prop="PERSON_TYPE">
                <div>
                  <el-select
                    v-model="form.PERSON_TYPE"
                    filterable
                    placeholder="请选择"
                    class="filter-item"
                    style="width: 100%;"
                  >
                    <el-option v-for="item in LevelsData" :key="item.NAME" :label="item.NAME" :value="item.NAME"/>
                  </el-select>
                  <el-button v-if="form.PERSON_TYPE == '主要负责人' || form.PERSON_TYPE == '安全管理人员' || form.PERSON_TYPE == '特种作业人员'" plain type="success" @click="changePersonType">补充证照信息</el-button>
                </div>
              </el-form-item>
              <el-form-item label="身份证号" prop="USER_ID_CARD">
                <el-input v-model="form.USER_ID_CARD" placeholder="这里输入身份证号..." @change="goCheck()"/>
              </el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="民族" prop="NATION">
                    <el-select v-model="form.NATION" placeholder="请选择" style="width: 100%;">
                      <el-option
                        v-for="item in uesrInfoDic.minzuList"
                        :key="item.DICTIONARIES_ID"
                        :label="item.NAME"
                        :value="item.DICTIONARIES_ID"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="性别" prop="SEX">
                    <el-select v-model="form.SEX" placeholder="请选择" style="width: 100%;">
                      <el-option
                        v-for="item in uesrInfoDic.xingbieList"
                        :key="item.DICTIONARIES_ID"
                        :label="item.NAME"
                        :value="item.DICTIONARIES_ID"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <!--              <el-form-item label="定位卡号" prop="CARDNO">-->
              <!--                <el-input v-model="form.CARDNO" placeholder="这里输入定位卡号..."/>-->
              <!--              </el-form-item>-->
              <!--              <el-form-item label="门口门禁卡号" prop="MKMJCARD">-->
              <!--                <el-input v-model="form.MKMJCARD" placeholder="这里输入门口门禁卡号..."/>-->
              <!--              </el-form-item>-->
              <el-form-item label="是否为隐患确认人" prop="IS_HAZARDCONFIRMER">
                <el-radio-group v-model="form.IS_HAZARDCONFIRMER">
                  <el-radio :label="0" value="0">否</el-radio>
                  <el-radio :label="1" value="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="form.face_file.length > 0" label="旧人脸信息">
                <div class="slideshow">
                  <div class="disContent">
                    <div v-for="(item, index) in form.face_file" :key="index" class="img-div">
                      <img :src="config.fileUrl + item.FILEPATH" alt="">
                      <div class="disContent-hide">
                        <el-tooltip class="item" effect="dark" content="预览" placement="top">
                          <span class="el-icon-zoom-in yuLan">
                            <viewer :images="form.face_file">
                              <img :src="config.fileUrl + item.FILEPATH" alt="" class="yuLanImg">
                            </viewer>
                          </span>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                          <span class="Delete" @click="deleteCertificate(index)"><i class="el-icon-delete"/></span>
                        </el-tooltip>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="上传人脸照片">
                <div style="display: flex;align-items: center">
                  <el-upload
                    ref="uploadUserAvatar"
                    :on-preview="handlePictureCardPreview"
                    :before-upload="beforeFileUploadByFace"
                    :on-change="handleChangeIMGFace"
                    :auto-upload="false"
                    :limit="1"
                    class="avatar-uploader"
                    action="#"
                    accept=".jpg,.jpeg,.png"
                    list-type="picture-card">
                    <i class="el-icon-plus"/>
                  </el-upload>
                  <div style="margin-left:20px;line-height:1.6">
                    <div style="color: red;font-size: 12px">（若新上传人脸图片将覆盖旧人脸信息，不上传则不做修改）</div>
                    <div style="color: red;font-size: 12px">* 图像格式：JPEG、JPG、PNG、BMP</div>
                    <div style="color: red;font-size: 12px">* 图像大小：不超过1M。</div>
                    <div style="color: red;font-size: 12px">* 图像分辨率：大于32×32像素，小于4096×4096像素，<br>人脸占比不低于64×64像素。</div>
                    <div style="color: red;font-size: 12px">（如无合适照片请该人员登陆曹港APP中进行人脸照片采集）</div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="部门排序" prop="SORT">
                <el-input v-model="form.SORT" placeholder="这里输入部门排序..." @keyup.native="number"/>
              </el-form-item>
              <el-form-item label="邮箱" prop="EMAIL">
                <el-input v-model="form.EMAIL" placeholder="这里输入邮箱..."/>
              </el-form-item>

              <!--<el-form-item label="排班" prop="SHIFTDUTYONE">
                  <el-select
                    v-model="form.SHIFTDUTYONE"
                    placeholder="请选择"
                    class="filter-item"
                    style="margin-right:10px">
                    <el-option
                      v-for="item in shiftDutyListOne"
                      :key="item.SHIFTWORKRULES_ID"
                      :label="item.NAME"
                      :value="item.SHIFTWORKRULES_ID"/>
                  </el-select>
                </el-form-item>
                <el-form-item label-width="0px" prop="SHIFTDUTYTWO">
                  <el-select
                    v-model="form.SHIFTDUTYTWO"
                    placeholder="请选择"
                    class="filter-item"
                    style="margin-right:10px">
                    <el-option
                      v-for="item in shiftDutyListTwo"
                      :key="item.SHIFTWORKRULES_ID"
                      :label="item.NAME"
                      :value="item.SHIFTWORKRULES_ID"/>
                  </el-select>
                  <el-button @click="detailShowDate">当前班状</el-button>
                </el-form-item>-->
              <el-form-item label="排班">
                <div style="display:flex;">
                  <el-select v-model="form.SHIFTDUTYONE" placeholder="请选择" class="filter-item" style="margin-right:10px;width: 45%;">
                    <el-option v-for="item in shiftDutyListOne" :key="item.SHIFTWORKRULES_ID" :label="item.NAME" :value="item.SHIFTWORKRULES_ID" />
                  </el-select>
                  <el-select v-model="form.SHIFTDUTYTWO" placeholder="请选择" class="filter-item" style="margin-right:10px;width: 45%;">
                    <el-option v-for="item in shiftDutyListTwo" :key="item.SHIFTWORKRULES_ID" :label="item.NAME" :value="item.SHIFTWORKRULES_ID" />
                  </el-select>
                  <el-button @click="detailShowDate">当前班状</el-button>
                </div>
              </el-form-item>
              <el-form-item v-show="periodList.length > 0" label="当前班次">
                <el-radio-group v-model="selectPeriod">
                  <el-radio-button v-for="(item,i) in periodList" :class="item.isBr?'isBr':''" :key="i" :label="item.period">{{ item.period.WORKSTATUS=='1'?'上班':'休班' }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="emis编码">
                <el-input v-model="form.JCR" placeholder="这里输入emis编码..." />
              </el-form-item>
              <el-form-item label="备注">
                <el-input :rows="3" v-model="form.BZ" type="textarea" placeholder="这里输入备注..."/>
              </el-form-item>
              <!--              <el-form-item label="在线学习人员类别" prop="LEARNERCATEGORY">-->
              <!--                <div class="uo-flex">-->
              <!--                  <el-select id="LEARNERCATEGORY1" v-model="form.LEARNERCATEGORY" :disabled="disabledLCSelect" :style="displayLCSelect" placeholder="请选择" class="filter-item" @change="forceUpdate">-->
              <!--                    <el-option v-for="(item,index) in LearnerCategoryList" :key="item.DICTIONARIES_ID" :label="item.NAME" :value="item.DICTIONARIES_ID">-->
              <!--                      <span style="float: left">{{ item.NAME }}</span>-->
              <!--                      <div style="float: right;" @click.stop="removeDuties(index,'APPLICABLE_PERSONNEL')"><i class="el-icon-circle-close" /></div>-->
              <!--                    </el-option>-->
              <!--                  </el-select>-->
              <!--                  <el-input id="LEARNERCATEGORY2" v-model="form.LEARNERCATEGORY" :disabled="disabledLCInput" :style="displayLCInput" placeholder="这里输入新的类别名称..." />-->
              <!--                  <el-button @click="changeLearnerCategory">{{ form.LEARNERCATEGORYSTATUS === 'select' ? '输入' : '选择' }}</el-button>-->
              <!--                </div>-->
              <!--              </el-form-item>-->
              <el-form-item label="是否在线学习人员">
                <el-switch v-model="form.ISSTUDENT" active-color="#13ce66" inactive-color="#ff4949"/>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="left_border_super">
              <template v-if="form.ISSTUDENT">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="政治面貌" prop="POLITICAL_OUTLOOK">
                      <el-select v-model="form.POLITICAL_OUTLOOK" placeholder="请选择" style="width: 100%;">
                        <el-option
                          v-for="item in uesrInfoDic.zhengzhimianmaoList"
                          :key="item.DICTIONARIES_ID"
                          :label="item.NAME"
                          :value="item.DICTIONARIES_ID"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="出生年月" prop="DATE_OF_BIRTH">
                      <el-date-picker
                        v-model="form.DATE_OF_BIRTH"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        style="width: 100%;"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="文化程度" prop="DEGREE_OF_EDUCATION">
                      <el-select v-model="form.DEGREE_OF_EDUCATION" placeholder="请选择" style="width: 100%;">
                        <el-option
                          v-for="item in uesrInfoDic.wenhuachengduList"
                          :key="item.DICTIONARIES_ID"
                          :label="item.NAME"
                          :value="item.DICTIONARIES_ID"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="在职情况" prop="INCUMBENCY">
                      <el-select v-model="form.INCUMBENCY" placeholder="请选择" style="width: 100%;">
                        <el-option
                          v-for="item in uesrInfoDic.zaizhiqingkuangList"
                          :key="item.DICTIONARIES_ID"
                          :label="item.NAME"
                          :value="item.DICTIONARIES_ID"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!--                  <el-col :span="12">-->
                  <!--                    <el-form-item label="人员类型" prop="PERSONNEL_TYPE">-->
                  <!--                      <el-select v-model="form.PERSONNEL_TYPE" placeholder="请选择">-->
                  <!--                        <el-option-->
                  <!--                          v-for="item in uesrInfoDic.renyuanleixingList"-->
                  <!--                          :key="item.DICTIONARIES_ID"-->
                  <!--                          :label="item.NAME"-->
                  <!--                          :value="item.DICTIONARIES_ID"/>-->
                  <!--                      </el-select>-->
                  <!--                    </el-form-item>-->
                  <!--                  </el-col>-->
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="职务" prop="DUTIES">
                      <div class="uo-flex">
                        <el-select
                          v-if="form.letDutiesType =='select'"
                          id="leaPostSel"
                          v-model="form.DUTIES"
                          placeholder="请选择"
                          class="filter-item"
                          @change="forceUpdate">
                          <el-option
                            v-for="(item,index) in uesrInfoDic.zhiwuList"
                            :key="item.DICTIONARIES_ID"
                            :label="item.NAME"
                            :value="item.DICTIONARIES_ID">
                            <span style="float: left">{{ item.NAME }}</span>
                            <div style="float: right;" @click.stop="removeDuties(index,'POSITION')"><i
                              class="el-icon-circle-close"/></div>
                          </el-option>
                        </el-select>
                        <el-input
                          v-if="form.letDutiesType =='value'"
                          id="leaPostVal"
                          :disabled="form.letDutiesType =='select'"
                          v-model="form.DUTIESValue"
                          placeholder="这里输入新的职务名称..."/>
                        <el-button
                          class="ml5"
                          @click="form.letDutiesType = (form.letDutiesType =='select') ? 'value' : 'select'">
                          {{ form.letDutiesType === 'select' ? '输入' : '选择' }}
                        </el-button>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="职称" prop="TITLE">
                      <div class="uo-flex">
                        <el-select
                          v-if="form.letTitleType =='select'"
                          id="letTitleSel"
                          v-model="form.TITLE"
                          placeholder="请选择"
                          class="filter-item"
                          @change="forceUpdate">
                          <el-option
                            v-for="(item,index) in uesrInfoDic.zhichengList"
                            :key="item.DICTIONARIES_ID"
                            :label="item.NAME"
                            :value="item.DICTIONARIES_ID">
                            <span style="float: left">{{ item.NAME }}</span>
                            <div style="float: right;" @click.stop="removeDuties(index,'JOB_TITLE')"><i
                              class="el-icon-circle-close"/></div>
                          </el-option>
                        </el-select>
                        <el-input
                          v-show="form.letTitleType =='value'"
                          id="letTitleVal"
                          v-model="form.letTitleValue"
                          placeholder="这里输入新的职称名称..."/>
                        <el-button
                          class="ml5"
                          @click="form.letTitleType = (form.letTitleType =='select') ? 'value' : 'select'">
                          {{ form.letTitleType === 'select' ? '输入' : '选择' }}
                        </el-button>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="工种" prop="TYPE_OF_WORK">
                      <div class="uo-flex">
                        <el-select
                          v-if="form.letTypeOfWorkType =='select'"
                          id="letTypeOfWorkSel"
                          v-model="form.TYPE_OF_WORK"
                          placeholder="请选择"
                          class="filter-item"
                          @change="forceUpdate">
                          <el-option
                            v-for="(item,index) in uesrInfoDic.gongzhongList"
                            :key="item.DICTIONARIES_ID"
                            :label="item.NAME"
                            :value="item.DICTIONARIES_ID">
                            <span style="float: left">{{ item.NAME }}</span>
                            <div style="float: right;" @click.stop="removeDuties(index,'WORK_TYPE')"><i
                              class="el-icon-circle-close"/></div>
                          </el-option>
                        </el-select>
                        <el-input
                          v-show="form.letTypeOfWorkType =='value'"
                          id="letTypeOfWorkVal"
                          v-model="form.letTypeOfWorkValue"
                          placeholder="这里输入新的工种名称..."/>
                        <el-button
                          class="ml5"
                          @click="form.letTypeOfWorkType = (form.letTypeOfWorkType =='select') ? 'value' : 'select'">
                          {{ form.letTypeOfWorkType === 'select' ? '输入' : '选择' }}
                        </el-button>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="入职日期" prop="ENTRY_DATE">
                      <el-date-picker
                        v-model="form.ENTRY_DATE"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        style="width: 100%;"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="参加工作日期" prop="WORKING_DATE">
                      <el-date-picker
                        v-model="form.WORKING_DATE"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        style="width: 100%;"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item v-if="form.userCerList.length > 0" label="已上传证书">
                  <div class="slideshow">
                    <div class="disContent">
                      <div v-for="(item, index) in form.userCerList" :key="index" class="img-div">
                        <img :src="config.fileUrl + item.FILEPATH" alt="">
                        <div class="disContent-hide">
                          <el-tooltip class="item" effect="dark" content="预览" placement="top">
                            <span class="el-icon-zoom-in yuLan">
                              <viewer :images="form.userCerLis">
                                <img :src="config.fileUrl + item.FILEPATH" alt="" class="yuLanImg">
                              </viewer>
                            </span>
                          </el-tooltip>
                          <el-tooltip class="item" effect="dark" content="删除" placement="top">
                            <span class="Delete" @click="deleteCertificate(index)"><i class="el-icon-delete"/></span>
                          </el-tooltip>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="证书信息" prop="CERTIFICATE_INFORMATION">
                  <!--          <el-input id="CERTIFICATE_INFORMATION" ref="CERTIFICATE_INFORMATION" v-model="form.CERTIFICATE_INFORMATION" maxlength="255" placeholder="这里输入证书信息..." title="证书信息"/>-->
                  <el-upload
                    ref="upload"
                    :on-preview="handlePictureCardPreview"
                    :before-upload="beforeFileUploadByZhengshu"
                    :on-change="handleChangeIMGZhengshu"
                    :auto-upload="false"
                    class="avatar-uploader"
                    action="#"
                    accept=".jpg,.jpeg,.png"
                    list-type="picture-card">
                    <i class="el-icon-plus"/>
                  </el-upload>
                  <span style="color: red;font-size: 12px">
                    * 图像格式：JPG、JPEG、PNG。
                  </span>
                  <el-dialog :visible.sync="dialogVisible">
                    <img :src="dialogImageUrl" width="100%" alt="">
                  </el-dialog>
                </el-form-item>
              </template>
            </div>
          </el-col>
        </el-row>

      </el-form>
    </div>
    <div class="ui-height"/>
    <div class="ui-foot">
      <el-button v-show="ISCHECK" type="success" @click="confirm">保 存</el-button>
      <el-button v-show="!ISCHECK" type="success" @click="goCheck">校 验</el-button>
      <el-button plain type="info" @click="goBack">返 回</el-button>
    </div>
    <el-dialog :visible.sync="dialogFormLicenseInformation" title="证照信息" width="600px">
      <template>
        <div class="app-container">
          <el-form ref="form" :model="form" label-width="110px" class="in-uploader">
            <el-form-item label="姓名" prop="INFOR_NAME">
              <el-input :row="3" v-model="form.INFOR_NAME" placeholder="这里输入姓名..."/>
            </el-form-item>
            <el-form-item label="性别" style="display: flex;align-items: center">
              <el-radio-group v-model="form.INFORSEX" style="margin-left: -110px;">
                <el-radio :label="0" value="0">男</el-radio>
                <el-radio :label="1" value="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="职务" prop="TITLE">
              <div class="uo-flex">
                <el-select
                  v-if="form.inforpostType =='select'"
                  id="inforpostSel"
                  v-model="form.INFORPOST"
                  placeholder="请选择"
                  class="filter-item"
                  @change="forceUpdate">
                  <el-option
                    v-for="(item,index) in uesrInfoDic.zhiwuList"
                    :key="item.DICTIONARIES_ID"
                    :label="item.NAME"
                    :value="item.DICTIONARIES_ID">
                    <span style="float: left">{{ item.NAME }}</span>
                    <div style="float: right;" @click.stop="removeDuties(index,'JOB_TITLE')"><i
                      class="el-icon-circle-close"/></div>
                  </el-option>
                </el-select>
                <el-input
                  v-show="form.inforpostType =='value'"
                  id="inforpostVal"
                  v-model="form.INFORPOSTValue"
                  placeholder="这里输入新的职务名称..."/>
                <el-button
                  class="ml5"
                  @click="form.inforpostType = (form.inforpostType =='select') ? 'value' : 'select'">
                  {{ form.inforpostType === 'select' ? '输入' : '选择' }}
                </el-button>
              </div>
            </el-form-item>
            <el-form-item label="职称" prop="INFORTITLE">
              <div class="uo-flex">
                <el-select
                  v-if="form.infortitleType =='select'"
                  id="infortitleSel"
                  v-model="form.INFORTITLE"
                  placeholder="请选择"
                  class="filter-item"
                  @change="forceUpdate">
                  <el-option
                    v-for="(item,index) in uesrInfoDic.zhichengList"
                    :key="item.DICTIONARIES_ID"
                    :label="item.NAME"
                    :value="item.DICTIONARIES_ID">
                    <span style="float: left">{{ item.NAME }}</span>
                    <div style="float: right;" @click.stop="removeDuties(index,'JOB_TITLE')"><i
                      class="el-icon-circle-close"/></div>
                  </el-option>
                </el-select>
                <el-input
                  v-show="form.infortitleType =='value'"
                  id="infortitleVal"
                  v-model="form.INFORTITLEValue"
                  placeholder="这里输入新的职称名称..."/>
                <el-button
                  class="ml5"
                  @click="form.infortitleType = (form.infortitleType =='select') ? 'value' : 'select'">
                  {{ form.infortitleType === 'select' ? '输入' : '选择' }}
                </el-button>
              </div>
            </el-form-item>
            <el-form-item label="工作" prop="INFORWORK">
              <div class="uo-flex">
                <el-select
                  v-if="form.inforworkType =='select'"
                  id="infortitleSel"
                  v-model="form.INFORWORK"
                  placeholder="请选择"
                  class="filter-item"
                  @change="forceUpdate">
                  <el-option
                    v-for="(item,index) in uesrInfoDic.zhichengList"
                    :key="item.DICTIONARIES_ID"
                    :label="item.NAME"
                    :value="item.DICTIONARIES_ID">
                    <span style="float: left">{{ item.NAME }}</span>
                    <div style="float: right;" @click.stop="removeDuties(index,'JOB_TITLE')"><i
                      class="el-icon-circle-close"/></div>
                  </el-option>
                </el-select>
                <el-input
                  v-show="form.inforworkType =='value'"
                  id="inforworkVal"
                  v-model="form.INFORWORKValue"
                  placeholder="这里输入新的工作名称..."/>
                <el-button
                  class="ml5"
                  @click="form.inforworkType = (form.inforworkType =='select') ? 'value' : 'select'">
                  {{ form.inforworkType === 'select' ? '输入' : '选择' }}
                </el-button>
              </div>
            </el-form-item>
            <el-form-item label="资格证书名称" prop="CERTIFICATENAME">
              <el-select v-model="form.CERTIFICATENAME" filterable placeholder="请选择" class="filter-item">
                <el-option
                  v-for="item in certificatenamearr"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="证书编号" prop="CERTIFICATENO">
              <el-input
                v-model="form.CERTIFICATENO"
                placeholder="请输入证书编号..."
              />
            </el-form-item>
            <!--<el-form-item label="已上传证书">
              <div class="slideshow">
                <div class="disContent">
                  <div v-for="(item, index) in hImgs" :key="index" class="img-div">
                    <img :src="config.fileUrl + item.FILEPATH" alt="">
                    <div class="disContent-hide">
                      <el-tooltip class="item" effect="dark" content="预览" placement="top">
                        <span class="el-icon-zoom-in yuLan">
                          <viewer :images="hImgs">
                            <img :src="config.fileUrl + item.FILEPATH" alt="" class="yuLanImg">
                          </viewer>
                        </span>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="删除" placement="top">
                        <span class="Delete" @click="deleteCertificate(index)"><i class="el-icon-delete" /></span>
                      </el-tooltip>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="证书图片">
              <el-upload ref="upload" :on-preview="handlePictureCardPreview" :before-upload="beforeFileUpload" :auto-upload="false" class="avatar-uploader" action="#" accept=".jpg,.jpeg,.png" list-type="picture-card">
                <i class="el-icon-plus" />
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img :src="dialogImageUrl" width="100%" alt="">
              </el-dialog>
            </el-form-item>-->
            <el-form-item label="有效期" prop="TERMOFVALIDITY">
              <div class="block">
                <el-date-picker
                  v-model="form.TERMOFVALIDITY"
                  type="datetime"
                  placeholder="选择日期时间"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                />
              </div>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormLicenseInformation = false">取 消</el-button>
        <el-button type="primary" @click="goConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="SchedulingFrom" title="排班信息" width="600px">
      <template>
        <div class="app-container">
          <el-form ref="form" :model="form" label-width="110px" class="in-uploader">
            <el-form-item label="排班">
              <div style="display:flex;">
                <el-select v-model="form.SHIFTDUTYONE" placeholder="请选择" class="filter-item" style="margin-right:10px">
                  <el-option
                    v-for="item in shiftDutyListOne"
                    :key="item.SHIFTWORKRULES_ID"
                    :label="item.NAME"
                    :value="item.SHIFTWORKRULES_ID"/>
                </el-select>
                <el-select v-model="form.SHIFTDUTYTWO" placeholder="请选择" class="filter-item" style="margin-right:10px">
                  <el-option
                    v-for="item in shiftDutyListTwo"
                    :key="item.SHIFTWORKRULES_ID"
                    :label="item.NAME"
                    :value="item.SHIFTWORKRULES_ID"/>
                </el-select>
                <el-button @click="detailShowDate">当前班状</el-button>
              </div>
            </el-form-item>
            <el-form-item v-show="periodList.length > 0" label="当前班次">
              <el-radio-group v-model="selectPeriod">
                <el-radio-button
                  v-for="(item,i) in periodList"
                  :class="item.isBr?'isBr':''"
                  :key="i"
                  :label="item.period">{{ item.period.WORKSTATUS == '1' ? '上班' : '休班' }}
                </el-radio-button>
                <!-- <el-radio-button label="1">{{ selectPeriod }}</el-radio-button> -->
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button @click="SchedulingFrom = false">取 消</el-button>
        <el-button type="primary" @click="goScheduling(USER_ID)">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-if="dialogFormEditDate" :visible.sync="dialogFormEditDate" title="日历" width="500px">
      <el-calendar id="calendar">
        <template
          slot="dateCell"
          slot-scope="{data}">
          <div class="date-cell">
            <div class="calendar-day" style="line-height: 15px">
              <span>{{ data.day.split('-').slice(2).join() }}</span>
              <br>
              <span v-for="(i, index) in workDateList" :key="index">
                <template v-if="i.DATE==data.day">
                  <span v-if="i.STATE == 1" style="color:blue">上班</span>
                  <span v-else-if="i.STATE == 2" style="color:red">休班</span>
                </template>
              </span>
            </div>
          </div>
        </template>
      </el-calendar>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormEditDate = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import SelectTree from '@/components/SelectTree'
import { upload } from '@/utils/upload'

export default {
  components: { Pagination, SelectTree },
  directives: { waves },
  data() {
    var hasUser = (rule, value, callback) => {
      requestFN(
        '/user/hasUser',
        {
          USERNAME: value,
          VERIFYUSER_ID: this.form.USER_ID
        }
      ).then((data) => {
        if (data.result == 'success') {
          callback()
        } else {
          callback(new Error('用户名重复'))
        }
      }).catch((e) => {
        callback()
      })
    }
    // var hasEmail = (rule, value, callback) => {
    //   if (value) {
    //     requestFN(
    //       '/user/hasEmail',
    //       {
    //         EMAIL: value,
    //         USERNAME: this.form.USERNAME
    //       }
    //     ).then((data) => {
    //       if (data.result == 'success') {
    //         callback()
    //       } else {
    //         callback(new Error('邮箱重复'))
    //       }
    //     }).catch((e) => {
    //
    //     })
    //   } else {
    //     callback()
    //   }
    // }
    return {
      ISCHECK: false,
      dayTime: [],
      LevelsData: [],
      dialogFormEditDate: false,
      dialogFormLicenseInformation: false,
      listLoading: true,
      treeLoading: false,
      add: false,
      del: false,
      edit: false,
      KEYWORDS: '',
      SHIFTDUTYONE: '',
      SHIFTDUTYTWO: '',
      selectPeriod: [],
      tzzyry: '',
      periodList: [],
      DEPARTMENT_ID: '',
      varList: [],
      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
      multipleSelection: [], // 当前页选中的数据
      dialogFormEdit: false,
      dialogType: 'saveUser',
      disabledLCSelect: false,
      displayLCSelect: 'display: block',
      disabledLCInput: true,
      displayLCInput: 'display: none',
      LearnerCategoryList: [],
      certificatenamearr: [
        { value: '主要负责人证', label: '主要负责人证' },
        { value: '安全管理人员证', label: '安全管理人员证' },
        { value: '特种作业人员证', label: '特种作业人员证' }
      ],
      rules: {
        NAME: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        USERNAME: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[0-9])\d{8}$/,
            message: '请输入正确的手机号码'
          },
          { validator: hasUser, trigger: 'blur' }
        ],
        EMAIL: [
          { required: false, message: '请输入邮箱', trigger: 'blur' },
          {
            pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
            message: '请输入正确的邮箱'
          }
          // { validator: hasEmail, trigger: 'blur' }
        ],
        PERSON_TYPE: [{ required: true, message: '请选择人员类型', trigger: 'change' }],
        ROLE_NAME: [{ required: true, message: '请选择角色组', trigger: 'change' }],
        ROLE_ID: [{ required: true, message: '请选择角色', trigger: 'change' }],
        DEPARTMENT_ID: [{ required: true, message: '请选择部门', trigger: 'change' }],
        DUTIES_ID: [{ required: true, message: '请选择岗位', trigger: 'change' }],
        SORT: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        NATION: [{ required: false, trigger: 'blur' }],
        SEX: [{ required: false, trigger: 'blur' }], // / dsfsdfsd
        POLITICAL_OUTLOOK: [{ required: true, message: '政治面貌不能为空', trigger: 'blur' }],
        DATE_OF_BIRTH: [{ required: true, message: '请选择出生年月', trigger: 'blur' }],
        DEGREE_OF_EDUCATION: [{ required: true, message: '文化程度不能为空', trigger: 'blur' }],
        IS_HAZARDCONFIRMER: [{ required: true, message: '隐患确认人不为必选', trigger: 'blur' }],
        SHIFTDUTYONE: [{ required: true, message: '排班为必选', trigger: 'blur' }],
        SHIFTDUTYTWO: [{ required: true, message: '排班字节点必选', trigger: 'blur' }],
        POST: [{ required: true, message: '职务不能为空', trigger: 'blur' }],
        TYPE_OF_WORK: [{ required: true, message: '工种不能为空', trigger: 'blur' }],
        ENTRY_DATE: [{ required: true, message: '请选择入职日期', trigger: 'blur' }],
        WORKING_DATE: [{ required: true, message: '请选择参加工作日期', trigger: 'blur' }],
        INCUMBENCY: [{ required: true, message: '在职情况不能为空', trigger: 'blur' }],
        TITLE: [{ required: true, message: '职称不能为空', trigger: 'blur' }],
        DUTIES: [{ required: true, message: '职务不能为空', trigger: 'blur' }],
        //  /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/
        USER_ID_CARD: [{ required: false, trigger: 'blur' },
          {
            pattern: /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/,
            message: '请输入正确的身份证号'
          }
        ]
      },
      defaultProps: {
        value: 'id',
        children: 'nodes',
        label: 'name'
      },
      treeData: [],
      form: {
        IS_HAZARDCONFIRMER: 0,
        INFORPOST: '',
        CARDNO: '',
        MKMJCARD: '',
        INFORTITLE: '',
        INFORTITLEValue: '',
        infortitleType: 'select',
        INFORWORK: '',
        INFORWORKValue: '',
        inforworkType: 'select',
        USER_ID: '',
        ROLE_ID: [],
        ROLE_NAME: [],
        DEPARTMENT_ID: '',
        POST_ID: '',
        USERNAME: '',
        NAME: '',
        EMAIL: '',
        LEARNERCATEGORY: '',
        LEARNERCATEGORYSTATUS: 'select',
        SORT: '',
        JCR: '',
        BZ: '',
        PERSON_TYPE: '',
        PASSWORD: 'Aa@123456789',
        USERAVATARPREFIX: '',
        USERAVATARURL: '',
        USERAVATARURL_CONVERT: '',
        SHIFTDUTYONE: '',
        SHIFTDUTYTWO: '',
        DURATION: '',
        WORKSTATUS: '',
        WORKPERIOD: '',
        ISSTUDENT: false,
        NATION: '', // 民族
        SEX: '', // 性别
        POLITICAL_OUTLOOK: '', // 政治面貌
        DATE_OF_BIRTH: '', // 出生年月
        DEGREE_OF_EDUCATION: '', // 文化程度
        POST: '', // 职务
        TYPE_OF_WORK: '', // 工种
        ENTRY_DATE: '', // 入职日期
        WORKING_DATE: '', // 参加工作日期
        INCUMBENCY: '', // 在职情况
        CERTIFICATE_INFORMATION: '', // 证书信息
        TITLE: '', // 职称
        DUTIESValue: '',
        DUTIES: '',
        inforpostType: 'select',
        INFORPOSTValue: '',
        letDutiesType: 'select',
        letPostType: 'select',
        letTitleValue: '',
        letTitleId: '',
        letTitleType: 'select',
        letTypeOfWorkValue: '',
        letTypeOfWorkId: '',
        letTypeOfWorkType: 'select',
        USER_ID_CARD: '',
        PERSONNEL_TYPE: '',
        userCerList: [],
        face_file: [],
        CORPINFO_NAME: ''
      },
      IMGFILES_ID: '',
      uesrInfoDic: {
        minzuList: [], // 民族 0a0e406f27f74ee698fe9979d25f62dd
        zhengzhimianmaoList: [], // 政治面貌 6351efdd12dc4730952e5d195718e252
        wenhuachengduList: [], // 文化程度 d7d80f08d73a4accbccf4fd3d8d1d867
        renyuanleixingList: [], // 人员类型 0b62f92b0b624aab8e89a77304a64d5e
        zhiwuList: [], // 职务 下拉菜单选择已输入过的职务 09e36ac01e9540f8bc84eab1c1a78754
        gongzhongList: [], // 工种 下拉菜单选择已输入过的职务 55484e491a5e442d839c4595380713ec
        zaizhiqingkuangList: [], // 在职情况 548764b5d4bf4bd7a18ef88274ef49e4
        xingbieList: [], // 性别情况 21501808bbc344d593fbf9ccfe6c4531
        zhichengList: []// 职称 945a6b10e59946078b500f0fbafa8679
      },
      certificate_files: [],
      config: config,
      dialogImageUrl: [],
      dialogVisible: false,
      SchedulingFrom: false,
      roleList: [],
      roleList1: [],
      roleList_z: [],
      role1List: [],
      postList: [],
      oldPostId: '', // 原岗位ID（用于判断岗位是否变化）
      oldDepartId: '', // 原部门ID（用于判断部门是否变化）
      dialogFormDaoru: false,
      daoruFrom: {
        FFILE: '',
        FFILEName: ''
      },
      PARENTID: '0',
      shiftDutyListOne: [],
      shiftDutyListTwo: [],
      queryShiftOneList: [],
      queryShiftTwoList: [],
      datePage: 0,
      workDateList: [],
      USER_ID: ''
    }
  },
  watch: {
    'form.SHIFTDUTYONE': {
      handler(newVal, oldVal) {
        if (this.dialogType == 'saveUser' || (oldVal != null && oldVal != '')) { // 编辑初始化时，不监听
          this.form.SHIFTDUTYTWO = ''
          this.selectPeriod = []
        }
        this.getShiftWorkTwo(this.form.SHIFTDUTYONE)
      },
      immediate: false
    },
    'form.SHIFTDUTYTWO': {
      handler(newVal, oldVal) {
        if (this.dialogType == 'saveUser' || (oldVal != null && oldVal != '')) { // 编辑初始化时，不监听
          this.selectPeriod = []
        }
        this.listPeriods(this.form.SHIFTDUTYTWO)
      },
      immediate: false
    },
    'form.DEPARTMENT_ID': {
      handler(newVal, oldVal) {
        if (this.dialogType == 'saveUser' || (oldVal != null && oldVal != '')) { // 编辑初始化时，不监听
          this.form.POST_ID = ''
          this.getPostList()
        }
      },
      immediate: false
    },
    'form.ISSTUDENT': {
      handler() {
        if (this.form.ISSTUDENT) {
          this.ISSTUDENTCK()
        }
      },
      immediate: false
    },
    'dialogFormLicenseInformation': {
      handler(newValue) {
        if (newValue) this.ISSTUDENTCK()
      },
      immediate: false
    },
    'form.DUTIESValue': {
      handler() {
        console.info('DUTIES被DUTIESValue赋值了')
        this.form.DUTIES = this.form.DUTIESValue
      }
    },
    'form.letTitleValue': {
      handler() {
        this.form.TITLE = this.form.letTitleValue
      }
    },
    'form.letTypeOfWorkValue': {
      handler() {
        this.form.TYPE_OF_WORK = this.form.letTypeOfWorkValue
      }
    }
  },
  created() {
    this.getRole1List()
    this.getRoleList()
    this.hasButton()
    this.getTreeList()
    this.getShiftWorkOne()
    this.getPersonnelType()
    this.getScheduleAll()
    this.getDict()
    // this.getLearnerCategory() // 学员类型已取消
    if (this.$parent.IMGFILES_ID != '') {
      this.IMGFILES_ID = this.$parent.IMGFILES_ID
    }
    if (this.$parent.USER_ID == '') {
      this.handleAdd()
    } else {
      this.handleEdit(this.$parent.USER_ID)
    }
  },
  methods: {
    goCheck() {
      if (this.form.USER_ID_CARD && this.form.USERNAME) {
        const phoneJudge = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[0-9])\d{8}$/
        const phoneResult = phoneJudge.test(this.form.USERNAME)
        const cardJudge = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
        const cardResult = cardJudge.test(this.form.USER_ID_CARD)
        if (phoneResult && cardResult) {
          console.log('格式校验通过')
          requestFN(
            'user/goCheck',
            {
              CARD_NO: this.form.USER_ID_CARD,
              USER_ID: this.form.USER_ID,
              USERNAME: this.form.USERNAME
            }
          ).then((data) => {
            if (data.result === 'success') {
              this.$message.success('验证通过')
              this.ISCHECK = true
            } else {
              this.$message.error('验证失败，请确认身份证号与手机号是否正确')
              this.ISCHECK = false
            }
          }).catch((e) => {
            this.listLoading = false
            this.ISCHECK = false
          })
        } else {
          this.ISCHECK = false
        }
      } else {
        // this.$message.warning('请确认身份证号与手机号后进行校验')
        this.ISCHECK = true
      }
    },
    getScheduleAll() {
      requestFN(
        'schedule/getData',
        {
          tm: new Date().getTime()
        }
      ).then((data) => {
        if (data.result == 'success') {
          for (var i = 0; i < data.varList.length; i++) {
            this.dayTime.push(data.varList[i].date)
          }
        } else if (data.result == 'exception') {
          // showException('系统首页', '数据异常')// 显示异常
        }
      }).catch((e) => {
        this.listLoading = false
      })
    },
    changePersonType(e) {
      this.dialogFormLicenseInformation = true
    },
    getPersonnelType() {
      requestFN(
        '/dictionaries/getLevels',
        {
          DICTIONARIES_ID: '0b62f92b0b624aab8e89a77304a64d5e'
        }
      ).then((data) => {
        this.LevelsData = data.list
      }).catch((e) => {
      })
    },
    goConfirm() {
      this.dialogFormLicenseInformation = false
    },
    goScheduling(USER_ID) {
      this.$refs.form.validate(valid => {
        if (this.form.SHIFTDUTYONE) {
          // var
          console.info(this.selectPeriod)
          if (!this.form.SHIFTDUTYTWO || this.selectPeriod.DURATION == undefined) {
            this.$message({
              message: '请选择完整的排班类型',
              type: 'error'
            })
            return false
          }
        }
        this.SchedulingFrom = false
        this.listLoading = true
        this.form.USER_ID = USER_ID
        requestFN(
          '/user/editUserScheduling',
          this.form
        ).then((data) => {
          this.listLoading = false
          this.dialogFormEdit = false
          this.varList = []
          this.listQuery.page = 1
          this.getList()
        }).catch((e) => {
          this.listLoading = false
        })
      })
    },
    showDate(SHIFTDUTYTWO) {
      this.datePage = 0
      this.dialogFormEditDate = true
      this.getWorkDate(SHIFTDUTYTWO)
      this.$nextTick(() => {
        // 点击前一个月
        const prevBtn = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(1)'
        )
        prevBtn.addEventListener('click', e => {
          this.datePage--
          this.getWorkDate(SHIFTDUTYTWO)
        })
        // 点击今天
        const todayBtn = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(2)'
        )
        todayBtn.addEventListener('click', () => {
          this.datePage = 0
          this.getWorkDate(SHIFTDUTYTWO)
        })
        // 点击下一个月
        const nextBtn = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(3)'
        )
        nextBtn.addEventListener('click', e => {
          this.datePage++
          this.getWorkDate(SHIFTDUTYTWO)
        })

        // 点击上个月日期
        var prevDay = document.querySelectorAll(
          '.el-calendar-table__row .prev'
        )
        for (var i = 0; i < prevDay.length; i++) {
          prevDay[i].addEventListener('click', e => {
            this.datePage--
            this.getWorkDate(SHIFTDUTYTWO)
          })
        }
        // 点击下个月日期
        var nextDay = document.querySelectorAll(
          '.el-calendar-table__row .next'
        )
        // eslint-disable-next-line no-redeclare
        for (var i = 0; i < nextDay.length; i++) {
          nextDay[i].addEventListener('click', e => {
            this.datePage++
            this.getWorkDate(SHIFTDUTYTWO)
          })
        }
      })
    },

    pageShowDate(item, USER_ID, SHIFTDUTYTWO) {
      this.USER_ID = item.USER_ID
      this.selectPeriod = {
        'DURATION': item.DURATION,
        'WORKSTATUS': item.WORKSTATUS,
        'WORKPERIOD': item.WORKPERIOD
      }
      this.showDate(item.SHIFTDUTYTWO)
    },
    detailShowDate() {
      this.showDate(this.form.SHIFTDUTYTWO)
    },
    goBack() {
      this.$parent.activeName = 'List'
    },
    getTreeList() {
      this.treeLoading = true
      requestFN(
        '/department/listTree',
        {}
      ).then((data) => {
        this.treeLoading = false
        this.treeData = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
        this.treeLoading = false
      })
    },
    getWorkDate(SHIFTWORKRULES_ID) {
      requestFN(
        '/shiftworkperiod/getWorkDate',
        {
          MONTHS: this.datePage,
          SHIFTWORKRULES_ID: SHIFTWORKRULES_ID,
          WORKSTATUS: this.selectPeriod.WORKSTATUS,
          DURATION: this.selectPeriod.DURATION,
          WORKPERIOD: this.selectPeriod.WORKPERIOD
        }
      ).then((data) => {
        this.workDateList = data.varList
      }).catch((e) => {
      })
    },
    listPeriods(SHIFTWORKRULES_ID) {
      this.periodList = []
      if (SHIFTWORKRULES_ID) {
        requestFN(
          '/shiftworkperiod/listPeriods',
          {
            SHIFTWORKRULES_ID: SHIFTWORKRULES_ID
          }
        ).then((data) => {
          this.periodList = data.varList
          if (this.periodList.length == 1) {
            this.selectPeriod = {
              'DURATION': '1',
              'WORKSTATUS': '1',
              'WORKPERIOD': '1'
            }
          }
        }).catch((e) => {
        })
      }
    },
    getRoleList() {
      requestFN(
        '/user/goAddUser',
        {}
      ).then((data) => {
        this.roleList = data.roleList
        this.roleList1 = data.roleList1
        for (var i = 0; i < this.roleList1.length; i++) { // 循环，向数组里添加新元素
          this.roleList.push(this.roleList1[i])
        }
        console.log(this.roleList, '角色列表')
      }).catch((e) => {
      })
    },
    getPostList() {
      if (this.form.DEPARTMENT_ID != null && this.form.DEPARTMENT_ID != '') {
        requestFN(
          '/post/listAll',
          { DEPARTMENT_ID: this.form.DEPARTMENT_ID }
        ).then((data) => {
          this.postList = data.postList
        }).catch((e) => {
        })
      }
    },
    getRole1List(ROLE_ID) {
      this.ROLE_ID = ROLE_ID
      requestFN(
        '/user/list1',
        {
          ROLE_ID: ROLE_ID
        }
      ).then((data) => {
        this.listLoading = false
        this.activeTab = ROLE_ID
        this.role1List = data.role1List
        this.roleList_z = data.roleList_z
        this.total = data.roleList_z
        this.pd = data.pd
      }).catch((e) => {
        this.listLoading = false
      })
    },
    handleAdd() {
      this.dialogType = 'saveUser'
      requestFN(
        '/role/findByName',
        {
          ROLE_NAME: '企业分级账号'
        }
      ).then((data) => {
        this.shiftDutyListTwo = []
        this.periodList = []
        // this.form = Object.assign(this.form, { 'ROLE_ID': data.pd.ROLE_ID }) // copy obj
        this.form = Object.assign(this.form, { 'userCerList': [] }) // copy obj
      }).catch((e) => {

      })
      this.disabledLCInput = true
      this.displayLCInput = 'display: none'
      this.disabledLCSelect = false
      this.displayLCSelect = 'display: block'
      this.dialogFormEdit = true
    },
    number() {
      this.form.SORT = this.form.SORT.replace(/[^\.\d]/g, '')

      this.form.SORT = this.form.SORT.replace('.', '')
    },
    handleEdit(USER_ID) {
      this.shiftDutyListTwo = []
      this.periodList = []
      this.USER_ID = ''
      this.dialogType = 'editUser'
      requestFN(
        '/user/goEditUser',
        {
          USER_ID: USER_ID
        }
      ).then((data) => {
        this.form = { ...this.form, ...data.pd, ...data.licenseinfor }
        // this.form = Object.assign({}, this.form, data.pd, data.licenseinfor) // copy obj
        this.form.userCerList = data.userCerList
        this.form.face_file = data.face_file
        if (this.form.ROLE_ID != null && this.form.ROLE_ID != '') {
          // 将字符串转换成数组，此时是字符串数组
          console.log(typeof (this.form.ROLE_ID), '00000000')
          console.log(this.form.ROLE_ID, '00000000')
          var arrString = []
          arrString.push(this.form.ROLE_ID)
          // eslint-disable-next-line no-unused-vars
          var arrList = this.form.ROLE_IDS && this.form.ROLE_IDS != '' ? this.form.ROLE_IDS.split(',') : ''
          // eslint-disable-next-line no-unused-vars
          for (const item1 of arrList) { // 循环取出多个角色的ID
            arrString.push(item1)
          }
        }
        this.form.ROLE_ID = arrString
        // this.form.PASSWORD = 'Aa@123456789'
        if (this.form.IS_ONLINELEARNING == '1') {
          this.$set(this.form, 'ISSTUDENT', true)
        }
        this.form.USERAVATARURL = this.form.USERAVATARURL_CONVERT
        this.form.LEARNERCATEGORYSTATUS = 'select'
        console.log(data.period)
        this.selectPeriod = data.period
        this.USER_ID = USER_ID
        this.getPostList()
        this.getShiftWorkTwo(this.form.SHIFTDUTYONE)
        this.disabledLCInput = true
        this.displayLCInput = 'display: none'
        this.disabledLCSelect = false
        this.displayLCSelect = 'display: block'
        this.oldPostId = data.pd.POST_ID
        this.oldDepartId = data.pd.DEPARTMENT_ID
        const node = {}
        node.id = this.form.DEPARTMENT_ID
        this.dialogFormEdit = true
        this.$refs.deptTree.clearHandle()

        this.$nextTick(() => { // 此处使用这个可以等节点渲染后再获取节点
          this.$refs.deptTree.handleNodeClick(node)
        })
      }).catch((e) => {
        this.listLoading = false
      })
    },
    beforeFileUpload(file) {
      this.daoruFrom.FFILE = file
      this.daoruFrom.FFILEName = file.name
      this.$forceUpdate()
      return false
    },
    goPush(row) {
      requestFN(
        'user/goPush',
        {
          USER_ID: row.USER_ID,
          STATUS: row.STATUS,
          BZ: row.BZ,
          SKIN: row.SKIN,
          PHONE: row.PHONE,
          NUMBER: row.NUMBER,
          ISMAIN: row.ISMAIN,
          OPENID: row.APPID,
          SORT: row.SORT,
          LEARNERCATEGORY: row.LEARNERCATEGORY,
          USERAVATARPREFIX: row.USERAVATARPREFIX,
          USERAVATARURL: row.USERAVATARURL,
          SHIFTDUTYONE: row.SHIFTDUTYONE,
          SHIFTDUTYTWO: row.SHIFTDUTYTWO,
          DURATION: row.DURATION,
          WORKSTATUS: row.WORKSTATUS,
          WORKPERIOD: row.WORKPERIOD,
          PERSONNEL_TYPE: row.PERSONNEL_TYPE,
          TITLE: row.TITLE,
          ISSTATE: row.ISSTATE,
          INCUMBENCY: row.INCUMBENCY,
          WORKING_DATE: row.WORKING_DATE,
          ENTRY_DATE: row.ENTRY_DATE,
          TYPE_OF_WORK: row.TYPE_OF_WORK,
          DUTIES: row.DUTIES,
          DEGREE_OF_EDUCATION: row.DEGREE_OF_EDUCATION,
          DATE_OF_BIRTH: row.DATE_OF_BIRTH,
          POLITICAL_OUTLOOK: row.POLITICAL_OUTLOOK,
          CARD_NO: row.CARD_NO,
          USERNAME: row.USERNAME,
          NAME: row.NAME,
          CORPINFO_ID: row.CORPINFO_ID,
          CORPINFO_NAME: row.CORPINFO_NAME || '',
          DEPARTMENT_ID: row.DEPARTMENT_ID,
          DEPARTMENT_NAME: row.DEPARTMENT_NAME,
          IMGFILES_ID: row.IMGFILES_ID,
          FOREIGN_KEY: row.FOREIGN_KEY,
          FILEPATH: row.FILEPATH,
          EMAIL: row.EMAIL || '',
          CARD_TYPE: '111',
          CARD_TYPE_NAME: '身份证',
          NATION: row.NATION || '',
          SEX: row.SEX || '',
          USER_TYPE: '1',
          ISDELETE: row.ISDELETE
        }
      ).then((data) => {
        if (data.result === 'success') {
          this.$message.success('推送成功')
          this.$parent.activeName = 'List'
        } else {
          this.$message.error('推送失败，' + data.msg)
          this.$parent.activeName = 'List'
        }
      }).catch((e) => {
        this.listLoading = false
        this.$parent.activeName = 'List'
      })
    },
    confirm() {
      // debugger
      // this.uploadImgByZhengshu(this.form.USER_ID) // 保存证书信息
      this.$refs.form.validate(valid => {
        // if (this.$refs.uploadUserAvatar.uploadFiles.length < 1 && this.form.face_file.length < 1) {
        //   this.$message({
        //     message: '请上传人脸照片',
        //     type: 'error'
        //   })
        //   return false
        // }
        let isUpdateFace = '0'
        if (this.$refs.uploadUserAvatar.uploadFiles.length > 0) {
          isUpdateFace = '1'
        }
        if (this.form.SHIFTDUTYONE) {
          // var
          if (!this.form.SHIFTDUTYTWO || this.selectPeriod.DURATION == undefined) {
            this.$message({
              message: '请选择完整的排班类型',
              type: 'error'
            })
            return false
          }
        }
        // if (this.form.USERAVATARURL == '') {
        //   this.$message({
        //     message: '请上传人员照片',
        //     type: 'warning'
        //   })
        //   return false
        // }
        if (valid) {
          this.form.WORKSTATUS = this.selectPeriod.WORKSTATUS
          this.form.DURATION = this.selectPeriod.DURATION
          this.form.WORKPERIOD = this.selectPeriod.WORKPERIOD
          console.log(this.form)
          if (this.dialogType == 'saveUser') {
            this.form.ROLE_ID = this.form.ROLE_ID.join(',')
            this.listLoading = true
            requestFN(
              '/user/' + this.dialogType,
              this.form
            ).then((data) => {
              this.listLoading = false
              if (this.form.ISSTUDENT) {
                this.uploadImgByZhengshu(data.USER_ID)
                this.uploadImgByFace(data.USER_ID)
                this.$parent.activeName = 'List'
              } else {
                this.uploadImgByFace(data.USER_ID)
                this.$parent.activeName = 'List'
              }
            }).catch((e) => {
              this.listLoading = false
              this.form.ROLE_ID = ''
              this.form.USERNAME = ''
            })
          } else {
            if (this.oldDepartId != this.form.DEPARTMENT_ID || this.oldPostId != this.form.POST_ID) {
              this.$confirm('如变更了部门或岗位，保存后将删除该用户所有清单，是否确定？', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.form.ROLE_ID = this.form.ROLE_ID.join(',')
                this.form.OPERATIONTYPE = '1'
                this.listLoading = true
                requestFN(
                  '/user/' + this.dialogType,
                  {
                    IMGFILES_ID: this.IMGFILES_ID, // 旧人脸图片
                    isUpdateFace: isUpdateFace,
                    ...this.form
                  }
                ).then((data) => {
                  this.listLoading = false
                  if (this.form.ISSTUDENT) {
                    this.uploadImgByZhengshu(this.form.USER_ID)
                    this.uploadImgByFace(this.form.USER_ID)
                    this.goPush(this.form)
                  } else {
                    this.uploadImgByFace(this.form.USER_ID)
                    this.goPush(this.form)
                  }
                }).catch((e) => {
                  this.listLoading = false
                })
              })
            } else {
              this.form.ROLE_ID = this.form.ROLE_ID.join(',')
              this.listLoading = true
              requestFN(
                '/user/' + this.dialogType,
                {
                  IMGFILES_ID: this.IMGFILES_ID, // 旧人脸图片
                  isUpdateFace: isUpdateFace,
                  ...this.form
                }
              ).then((data) => {
                this.listLoading = false
                if (this.form.ISSTUDENT) {
                  this.uploadImgByZhengshu(this.form.USER_ID)
                  this.uploadImgByFace(this.form.USER_ID)
                  this.goPush(this.form)
                } else {
                  this.uploadImgByFace(this.form.USER_ID)
                  this.goPush(this.form)
                }
              }).catch((e) => {
                this.listLoading = false
              })
            }
          }
        } else {
          return false
        }
      })
    },
    getBase64(file) {
      return new Promise(function(resolve, reject) {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function() {
          imgResult = reader.result
        }
        reader.onerror = function(error) {
          reject(error)
        }
        reader.onloadend = function() {
          resolve(imgResult)
        }
      })
    },
    getShiftWorkOne() {
      requestFN(
        '/shiftworkrules/listAll',
        {
          PARENTID: this.PARENTID
        }
      ).then((data) => {
        this.listLoading = false
        this.shiftDutyListOne = data.varList
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getShiftWorkTwo(id) {
      if (id) {
        requestFN(
          '/shiftworkrules/listAll',
          {
            PARENTID: id
          }
        ).then((data) => {
          this.listLoading = false
          this.shiftDutyListTwo = data.varList
        }).catch((e) => {
          this.listLoading = false
        })
      }
    },
    getShiftTwoList: function(PARENTID) {
      requestFN(
        '/shiftworkrules/listAll',
        {
          PARENTID: PARENTID
        }
      ).then((data) => {
        this.queryShiftTwoList = data.varList
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getLearnerCategory() {
      requestFN(
        '/dictionariesCorp/getLevels',
        {
          DICTIONARIES_ID: '532282f9c48346b8b646531909c739df'
        }
      ).then((data) => {
        this.LearnerCategoryList = data.list
      }).catch((e) => {

      })
    },
    changeLearnerCategory() {
      this.form.LEARNERCATEGORY = ''
      if (this.form.LEARNERCATEGORYSTATUS === 'select') {
        this.disabledLCInput = false
        this.displayLCInput = 'display: block'
        this.disabledLCSelect = true
        this.displayLCSelect = 'display: none'
        this.form.LEARNERCATEGORYSTATUS = 'input'
      } else {
        this.disabledLCInput = true
        this.displayLCInput = 'display: none'
        this.disabledLCSelect = false
        this.displayLCSelect = 'display: block'
        this.form.LEARNERCATEGORYSTATUS = 'select'
      }
    },
    getDict: function() {
      if (this.uesrInfoDic.minzuList.length == 0) {
        this.getDicListByPID('0a0e406f27f74ee698fe9979d25f62dd', '', 'minzuList')
      }
      if (this.uesrInfoDic.xingbieList.length == 0) {
        this.getDicListByPID('21501808bbc344d593fbf9ccfe6c4531', '', 'xingbieList')
      }
      requestFN(
        '/shiftworkrules/listAll',
        {
          PARENTID: '0'
        }
      ).then((data) => {
        this.queryShiftOneList = data.varList
      }).catch((e) => {
        this.listLoading = false
      })
    },
    // 判断按钮权限，用于是否显示按钮
    hasButton() {
      var keys = 'user:add,user:del,user:edit'
      requestFN(
        '/head/hasButton',
        {
          keys: keys
        }
      ).then((data) => {
        this.add = data.userfhadminadd
        this.del = data.userfhadmindel
        this.edit = data.userfhadminedit
      }).catch((e) => {
        this.listLoading = false
      })
    },
    ISSTUDENTCK() {
      if (this.form.ISSTUDENT || this.dialogFormLicenseInformation) {
        if (this.uesrInfoDic.zhengzhimianmaoList.length == 0) {
          this.getDicListByPID('6351efdd12dc4730952e5d195718e252', '', 'zhengzhimianmaoList')
        }
        if (this.uesrInfoDic.wenhuachengduList.length == 0) {
          this.getDicListByPID('d7d80f08d73a4accbccf4fd3d8d1d867', '', 'wenhuachengduList')
        }
        if (this.uesrInfoDic.renyuanleixingList.length == 0) {
          this.getDicListByPID('0b62f92b0b624aab8e89a77304a64d5e', '', 'renyuanleixingList')
        }
        if (this.uesrInfoDic.zaizhiqingkuangList.length == 0) {
          this.getDicListByPID('548764b5d4bf4bd7a18ef88274ef49e4', '', 'zaizhiqingkuangList')
        }
        this.getDicListByPID('09e36ac01e9540f8bc84eab1c1a78754', '', 'zhiwuList')
        this.getDicListByPID('945a6b10e59946078b500f0fbafa8679', '', 'zhichengList')
        this.getDicListByPID('55484e491a5e442d839c4595380713ec', '', 'gongzhongList')
      }
    },
    getDicListByPID(pId, id, listName) {
      var url = '/dictionaries/getLevels'
      if (listName == 'zhiwuList' || listName == 'zhichengList' || listName == 'gongzhongList') {
        url = '/dictionariesCorp/getLevels'
      }
      requestFN(url,
        {
          DICTIONARIES_ID: pId
        }
      ).then((data) => {
        this.uesrInfoDic[listName] = data.list
      }).catch((e) => {

      })
    },
    forceUpdate(item) {
      this.$forceUpdate()
    },
    removeDuties(index, dictType) {
      var dictID = ''
      var msgTitle = ''
      if (dictType == 'APPLICABLE_PERSONNEL') {
        console.info('在线学习人员类别待处理索引：' + index)
        dictID = this.LearnerCategoryList[index].DICTIONARIES_ID
        msgTitle = '类别：' + this.LearnerCategoryList[index].NAME
        dictType = 'APPLICABLE_PERSONNEL'
      } else if (dictType == 'POSITION') {
        console.info('职务待处理索引：' + index)
        dictID = this.uesrInfoDic.zhiwuList[index].DICTIONARIES_ID
        msgTitle = '职务：' + this.uesrInfoDic.zhiwuList[index].NAME
      } else if (dictType == 'JOB_TITLE') {
        console.info('职称待处理索引：' + index)
        dictID = this.uesrInfoDic.zhichengList[index].DICTIONARIES_ID
        msgTitle = '职称：' + this.uesrInfoDic.zhichengList[index].NAME
      } else if (dictType == 'WORK_TYPE') {
        console.info('工种待处理索引：' + index)
        dictID = this.uesrInfoDic.gongzhongList[index].DICTIONARIES_ID
        msgTitle = '工种：' + this.uesrInfoDic.gongzhongList[index].NAME
      }
      this.$confirm('删除此分类会同时删除其他相关已编辑过的人员信息中的分类设置，确定要删除（' + msgTitle + '）吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/dictionariesCorp/delete',
          {
            DICTIONARIES_ID: dictID,
            DICTTYPE: dictType
          }
        ).then((data) => {
          this.listLoading = false
          if (dictType == 'APPLICABLE_PERSONNEL') {
            this.LearnerCategoryList.splice(index, 1)
          } else if (dictType == 'POSITION') {
            this.uesrInfoDic.zhiwuList.splice(index, 1)
          } else if (dictType == 'JOB_TITLE') {
            this.uesrInfoDic.zhichengList.splice(index, 1)
          } else if (dictType == 'WORK_TYPE') {
            this.uesrInfoDic.gongzhongList.splice(index, 1)
          }
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch((e) => {
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    /* 用户头像处理 Begin */
    handleChangeIMG(file, fileList) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.raw.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        fileList.splice(0, fileList.length)
      } else {
        this.getBase64(file.raw).then(res => {
          this.form.USERAVATARPREFIX = res.substring(0, res.indexOf('base64,') + 7)
          this.form.USERAVATARURL = res.substring(res.indexOf('base64,') + 7)
          this.form.USERAVATARURL_CONVERT = res.substring(res.indexOf('base64,') + 7)
        })
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    handlePictureCardRemove(file, fileList) {
      this.form.USERAVATARPREFIX = ''
      this.form.USERAVATARURL = ''
      this.form.USERAVATARURL_CONVERT = ''
    },
    handleChangeIMGFace(file, fileList) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.raw.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        fileList.pop()
      }
    },
    handleChangeIMGZhengshu(file, fileList) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.raw.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        fileList.pop()
      }
    },
    beforeFileUploadByZhengshu(file) {
      this.certificate_files.push(file)
    },
    beforeFileUploadByFace(file) {
      this.form.face_file.push(file)
    },
    uploadImgByZhengshu(userId) {
      this.$refs.upload.submit()
      if (this.certificate_files.length > 0) {
        const formData = new FormData()
        for (var i = 0; i < this.certificate_files.length; i++) {
          if (this.certificate_files[i]) {
            formData.append('FFILE', this.certificate_files[i])
          }
        }
        formData.append('FOREIGN_KEY', userId)
        formData.append('TYPE', 18)
        upload(
          '/imgfiles/add',
          formData
        ).then((data) => {
        }).catch((e) => {
        })
      }
    },
    uploadImgByFace(userId) {
      this.$refs.uploadUserAvatar.submit()
      if (this.form.face_file.length > 0) {
        const formData = new FormData()
        for (var i = 0; i < this.form.face_file.length; i++) {
          if (this.form.face_file[i]) {
            formData.append('FFILE', this.form.face_file[i])
          }
        }
        formData.append('FOREIGN_KEY', userId)
        formData.append('TYPE', 30)
        upload(
          '/imgfiles/add',
          formData
        ).then((data) => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        }).catch((e) => {
        })
      } else {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      }
    },
    deleteCertificate(index) {
      this.$confirm('确定要删除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        requestFN(
          '/imgfiles/delete',
          {
            IMGFILES_ID: this.form.userCerList[index].IMGFILES_ID
          }
        ).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.form.userCerList.splice(index, 1)
          this.$forceUpdate()
        }).catch((e) => {
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog__body {
  padding: 0;
  background: red;
}

.mark_up {
  margin-bottom: 20px;
  margin-left: 110px;
}

.icons-container {
  margin: 0;
  overflow: hidden;

  .grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .icon-item {
    margin-bottom: 10px;
    height: 70px;
    text-align: center;
    width: 100px;
    float: left;
    font-size: 24px;
    color: #24292e;
    cursor: pointer;

    span {
      display: block;
      font-size: 14px;
      margin-top: 10px;
    }
  }

  .disabled {
    pointer-events: none;
  }
}

.filter-btn-group {
  position: relative;
}

.filter-flot {
  position: absolute;
  right: 0;
  top: 0;
}

.uploader {
  width: 570px;
  display: flex;
  align-items: center;
}

.el-form-item__content {
  line-height: 1;
}

.uo-flex {
  display: flex;
}

.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 {
  border: 1px dashed #c0ccda;
  font-size: 28px;
  color: #8c939d;
  width: 110px;
  height: 110px;
  line-height: 110px;
  border-radius: 6px;
  text-align: center;
  background-color: #fbfdff;
}

.avatar-uploader-icon:hover,
.avatar-uploader-icon:focus {
  border-color: #1890ff;
  color: #1890ff;
}

.avatar {
  width: 110px;
  height: 110px;
  display: block;
  border: 1px dashed #c0ccda;
}
</style>
<style lang="sass" scoped>
.el-row
  margin-bottom: 16px

  &:last-child
    margin-bottom: 0

    .form-group
      display: flex
      align-items: center
      margin-right: 20px

      .form-label
        padding: 9px 15px
        font-size: 14px
        width: 240px
        font-weight: 400
        line-height: 20px
        text-align: right
        margin-bottom: 0

        .star
          color: red
          padding-right: 4px

      .input-block
        flex: 1
        min-height: 36px
        position: relative

.disContent
  padding: 0 20px
  display: flex
  align-items: center
  flex-wrap: wrap

  .img-div
    position: relative
    margin: auto 10px 10px 10px
    width: 120px
    height: 120px
    border-radius: 4px

    & > img
      width: 100%
      height: 100%

    .disContent-hide
      position: absolute
      width: 100%
      height: 100%
      border-radius: 4px
      background-color: rgba(48, 48, 48, 0.59)
      display: none
      top: 0
      left: 0

      .Delete
        position: absolute
        bottom: 14px
        right: 10px
        font-size: 16px
        color: white
        cursor: pointer

        .editCss
          .Delete
            font-size: 16px
            right: 90px

      .yuLan
        position: absolute
        bottom: 23px
        right: 50px
        font-size: 16px
        color: white
        cursor: pointer

      .yuLanImg
        position: absolute
        bottom: 0
        right: 0
        width: 100%
        height: 100%
        opacity: 0

  .img-div:hover .disContent-hide
    display: block

  .pitchCss
    border: 1px solid #202e78
    transition: all linear 0.1s
    width: 116px
    height: 116px
</style>