vue-insagent-pc/src/views/PeopleManage/Seo/ChannelSearch.vue

<template>
    <div>
      <div class="queryFrom" id="queryForm" title="检索区">
        <el-form ref="queryFormRef" :model="queryFrom" label-width="80px">
          <el-row>
            <el-col :span="5">
              <el-form-item label="机构名称">
                <el-input
                  clearable
                  size="small"
                  placeholder="机构名称"
                  v-model="queryFrom.deptName"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="部门编码">
                <el-input
                  clearable
                  size="small"
                  placeholder="部门编码"
                  v-model="queryFrom.deptId"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">&nbsp;</el-col>
            <el-col :span="4">
              <el-form-item label="">
                <el-button size="small" type="primary" @click="queryTeam"
                  >查询</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
        :border="true"
        :data="tableData"
        style="width: 100%"
        :height="tableHeight"
        :header-cell-style="{
          background: '#F2F7FC',
          fontWeight: '700',
          color: '#606266',
        }"
      >
        <el-table-column header-align="center" align="center" type="index">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="deptName"
          label="机构名称"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="deptId"
          label="部门编码"
          width="180"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="address"
          label="地址"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="count"
          label="人数"
        >
        </el-table-column>
        <!-- <el-table-column header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleTableEdit(scope)"
              >查看</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <div class="bottomFixed" style="padding-bottom: 50px;margin-top:30px" ref="bottomFixed">
        <el-pagination
          @size-change="handleSizeChange"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="querylParams.pageNum"
          :page-size="querylParams.pageSize"
          :page-sizes="[10, 20, 50, 100, 200, 300, 400, 500]"
          :total="querylParams.totalSize"
          style="float: left; margin-left: 20px"
        >
        </el-pagination>
      </div>
      <el-dialog
        title="人员信息"
        width="1000px"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :before-close="handleDialogBefore"
        @close="closeDialog"
        v-dialogDrag
      >
        <el-form
          disabled
          :model="dataForm"
          ref="dataForm"
          label-width="130px"
          size="small"
          style="text-align: left"
        >
          <el-tabs v-model="activeTabs">
            <el-tab-pane label="行政信息" name="first">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="机构编码">
                    <el-input :value="deptInfo.id"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="机构名称">
                    <el-input :value="deptInfo.name"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="上级机构编码">
                    <el-input :value="deptInfo.parentId"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="机构类型">
                    <el-select :value="deptInfo.comtype" placeholder="请选择">
                      <el-option
                        v-for="item in comtypeoptions"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="机构级别">
                    <el-select :value="deptInfo.comlevel" placeholder="请选择">
                      <el-option
                        v-for="item in comleveloptions"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="机构性质">
                    <el-select
                      :value="deptInfo.comattribute"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in comattributeoptions"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="机构地址" style="width: 100%">
                    <el-input
                      type="textarea"
                      :rows="3"
                      :autosize="{ minRows: 3, maxRows: 4 }"
                      placeholder="请输入内容"
                      :value="deptInfo.address"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="基本信息" name="second">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="员工工号">
                    <el-input v-model="dataForm.id"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="部门">
                    <el-select
                      style="width: 100%"
                      v-model="dataForm.deptId"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in departmentList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否团队长">
                    <el-select
                      style="width: 100%"
                      v-model="dataForm.isteamleader"
                      placeholder="请选择"
                    >
                      <el-option label="是" value="1"></el-option>
                      <el-option label="否" value="0"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="dataForm.isteamleader != 1">
                <el-col :span="8">
                  <el-form-item label="所属团队长">
                    <el-input v-model="teamleadername"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="所属团队工号">
                    <el-input v-model="teamleaderid"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="推荐人名字">
                    <el-input v-model="dataForm.recommendername"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="推荐人工号">
                    <el-input v-model="dataForm.recommenderid"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否显示门店">
                    <el-input v-model="dataForm.isshowsalesroom"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否显示团队">
                    <el-input v-model="dataForm.isshowteam"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="姓名">
                    <el-input v-model="dataForm.name"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="性别">
                    <el-select
                      style="width: 100%"
                      v-model="dataForm.sex"
                      placeholder="请选择"
                    >
                      <el-option label="男" value="男"></el-option>
                      <el-option label="女" value="女"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="录入人">
                    <el-input v-model="dataForm.createBy"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="身份证号">
                    <el-input v-model="dataForm.identity"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="出生日期">
                    <el-date-picker
                      style="width: 100%"
                      v-model="dataForm.birthday"
                      type="date"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="移动电话">
                    <el-input v-model="dataForm.mobile"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="民族">
                    <el-select
                      style="width: 100%"
                      v-model="dataForm.nations"
                      placeholder="请选择"
                    >
                      <el-option
                        :label="national"
                        :value="national"
                        v-for="national in nationalList"
                        :key="national"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="政治面貌">
                    <el-select
                      style="width: 100%"
                      v-model="dataForm.politicalstatus"
                      placeholder="请选择"
                    >
                      <el-option label="群众" value="群众"></el-option>
                      <el-option label="共青团员" value="共青团员"></el-option>
                      <el-option label="中共党员" value="中共党员"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="户口所在地">
                    <el-input v-model="dataForm.addressresident"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="银行账号">
                    <el-input v-model="dataForm.accountno"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="开户银行">
                    <el-input v-model="dataForm.bankname" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="住宅电话">
                    <el-input v-model="dataForm.phonehouse"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="健康状况">
                    <el-select
                      style="width: 100%"
                      v-model="dataForm.health"
                      placeholder="请选择"
                    >
                      <el-option label="健康" value="健康"></el-option>
                      <el-option label="亚健康" value="亚健康"></el-option>
                      <el-option label="疾病" value="疾病"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="邮政编码">
                    <el-input v-model="dataForm.postalcode"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="邮箱">
                    <el-input v-model="dataForm.email"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="籍贯">
                    <el-input v-model="dataForm.nativeplace"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="学历">
                    <el-select
                      style="width: 100%"
                      v-model="dataForm.education"
                      placeholder="请选择"
                    >
                      <el-option label="小学" value="小学"></el-option>
                      <el-option label="初中" value="初中"></el-option>
                      <el-option label="高中" value="高中"></el-option>
                      <el-option label="专科" value="专科"></el-option>
                      <el-option label="本科" value="本科"></el-option>
                      <el-option label="硕士" value="硕士"></el-option>
                      <el-option label="博士" value="博士"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="血型">
                    <el-select
                      style="width: 100%"
                      v-model="dataForm.blood"
                      placeholder="请选择"
                    >
                      <el-option label="A型" value="A型"></el-option>
                      <el-option label="B型" value="B型"></el-option>
                      <el-option label="O型" value="O型"></el-option>
                      <el-option label="AB型" value="AB型"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="居住地址">
                    <el-input v-model="dataForm.addressnow"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="毕业院校">
                    <el-input v-model="dataForm.college"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="入司时间">
                    <el-date-picker
                      style="width: 100%"
                      v-model="dataForm.intime"
                      type="date"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="代理人资格证号">
                    <el-input v-model="dataForm.saleno"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="毕业时间">
                    <el-date-picker
                      style="width: 100%"
                      v-model="dataForm.collegetm"
                      type="date"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="原工作单位">
                    <el-input v-model="dataForm.orglast"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="婚姻状况">
                    <el-select
                      style="width: 100%"
                      v-model="dataForm.marrycode"
                      placeholder="请选择"
                    >
                      <el-option label="未婚" value="未婚"></el-option>
                      <el-option label="已婚" value="已婚"></el-option>
                      <el-option label="离异" value="离异"></el-option>
                      <el-option label="再婚" value="再婚"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="紧急联系人电话">
                    <el-input v-model="dataForm.phonespecial"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="紧急联系人姓名">
                    <el-input v-model="dataForm.namespecial"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="录入时间">
                    <el-input v-model="dataForm.createTime"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="最后修改时间">
                    <el-input v-model="dataForm.lastUpdateTime"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="影像资料" name="third">
              <div class="imageLibraryItem">
                <el-row class="imageLibraryItemTitle">
                  <label @click="pic1Control = !pic1Control"> 身份证照片 </label>
                </el-row>
                <el-row class="imageLibraryItemBody" v-show="pic1Control">
                  <el-form-item label="身份证正面:" style="width: 50%">
                    <el-upload
                      class="avatar-uploader"
                      action=""
                      name="photo1"
                      :show-file-list="false"
                      :http-request="httpRequest"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img
                        v-if="dataForm.photo1"
                        :src="dataForm.photo1"
                        class="avatar"
                      />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
  
                  <el-form-item label="身份证反面:" style="width: 50%">
                    <el-upload
                      class="avatar-uploader"
                      action=""
                      name="photo2"
                      :show-file-list="false"
                      :http-request="httpRequest"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img
                        v-if="dataForm.photo2"
                        :src="dataForm.photo2"
                        class="avatar"
                      />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                </el-row>
              </div>
  
              <div class="imageLibraryItem">
                <el-row class="imageLibraryItemTitle">
                  <label @click="pic3Control = !pic3Control"> 展业资格证 </label>
                </el-row>
                <el-row class="imageLibraryItemBody" v-show="pic3Control">
                  <el-form-item label="资格证照片:" style="width: 50%">
                    <el-upload
                      class="avatar-uploader"
                      action=""
                      name="photo3"
                      :show-file-list="false"
                      :http-request="httpRequest"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img
                        v-if="dataForm.photo3"
                        :src="dataForm.photo3"
                        class="avatar"
                      />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                </el-row>
              </div>
  
              <div class="imageLibraryItem">
                <el-row class="imageLibraryItemTitle">
                  <label @click="pic4Control = !pic4Control"> 劳动合同 </label>
                </el-row>
                <el-row class="imageLibraryItemBody" v-show="pic4Control">
                  <el-form-item label="劳动合同照片:" style="width: 50%">
                    <el-upload
                      class="avatar-uploader"
                      action=""
                      name="photo4"
                      :show-file-list="false"
                      :http-request="httpRequest"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img
                        v-if="dataForm.photo4"
                        :src="dataForm.photo4"
                        class="avatar"
                      />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                </el-row>
              </div>
  
              <div class="imageLibraryItem">
                <el-row class="imageLibraryItemTitle">
                  <label @click="pic5Control = !pic5Control"> 应聘表 </label>
                </el-row>
                <el-row class="imageLibraryItemBody" v-show="pic5Control">
                  <el-form-item label="应聘表照片:" style="width: 50%">
                    <el-upload
                      class="avatar-uploader"
                      action=""
                      name="photo5"
                      :show-file-list="false"
                      :http-request="httpRequest"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img
                        v-if="dataForm.photo5"
                        :src="dataForm.photo5"
                        class="avatar"
                      />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                </el-row>
              </div>
  
              <div class="imageLibraryItem">
                <el-row class="imageLibraryItemTitle">
                  <label @click="pic6Control = !pic6Control"> 定薪表 </label>
                </el-row>
                <el-row class="imageLibraryItemBody" v-show="pic6Control">
                  <el-form-item label="定薪表照片:" style="width: 50%">
                    <el-upload
                      class="avatar-uploader"
                      action=""
                      name="photo6"
                      :show-file-list="false"
                      :http-request="httpRequest"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img
                        v-if="dataForm.photo6"
                        :src="dataForm.photo6"
                        class="avatar"
                      />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                </el-row>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form>
        <span slot="footer" class="dialog-footer" v-show="activeTabs == 'third'">
          <el-button
            size="small"
            type="primary"
            style="background-color: #ffc000; border: 1px solid #ffc000"
            @click="closeDialog"
            >{{ $t("action.cancel") }}</el-button
          >
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        tableHeight:0,//表格高度
        loading:false,
        sexoptions: JSON.parse(localStorage.getItem("sexOptions")),
        activeTabs: "first",
        dialogVisible: false, // 新增编辑界面是否显示
        deptInfo: {}, //选中机构的基本信息
        // 控制影像
        pic1Control: false,
        pic3Control: false,
        pic4Control: false,
        pic5Control: false,
        pic6Control: false,
  
        dataForm: {
          // 人员个人信息
          id: "",
          name: "", //用户名
          password: "", //密码
          email: "", //邮箱
          mobile: "", //手机号
          birthday: "", //出生日期
          status: "", //状态  1：正常   0：离司
          marrycode: "", //婚姻状况
          deptId: "", //机构号或者部门号
          createBy: "", //创建人
          createTime: "", //创建时间
          lastUpdateBy: "", //更新人
          lastUpdateTime: "", //更新时间
          delFlag: "", //是否删除  -1：已删除  0：正常
          usertype: "", //用户类型：0:系统用户 A：后线人员 B：代理人员
          tenantId: "", //所属租户
          sex: "", //性别
          jobCode: "", //岗位
          esmUserInternalid: "",
          addressnow: "", //居住地址
          nations: "", //民族
          politicalstatus: "", //政治面貌
          college: "", //毕业院校
          identity: "", //身份证号
          education: "", //学历
          bankname: "", //开户行
          accountno: "", //开户账号
          addressresident: "", //户口地址
          health: "", //健康状态
          postalcode: "", //邮政编码
          phonehouse: "", //住宅电话
          collegetm: "", //毕业时间
          speciality: "", //专业
          nativeplace: "", //籍贯
          worktype: "", //工作性质
          blood: "", //血型
          saleno: "", //业务员职业证书号
          orglast: "", //原工作单位
          joblast: "", //工作职务
          hobby: "", //爱好特长
          namespecial: "", //紧急联系人姓名
          phonespecial: "", //紧急联系人电话
          intimes: "", //是否二次入司
          intime: "", //入司时间
          contracttime: "", //签约时间(财)
          isteamleader: "", //是否团队长(财)
          documentno: "", //后线人员档案号
          hrcode: "", //后线人员HR编码
          regulartm: "", //转正时间
          salarycode: "", //薪资等级
          esmUserAgentid: "", //主键
          recommenderid: "", //推荐人代码
          recommendername: "", //推荐人姓名
          leaderupid: "", //上级主管代码
          leaderupname: "", //上级主管姓名
          grouppersonid: "", //组育成人代码
          grouppersonname: "", //组育成人姓名
          deppersonid: "", //部育成人代码
          deppersonname: "", //部育成人姓名
          isshowteam: "", //是否显示团队
          isshowsalesroom: "", //是否显示门店
  
          photo1: "",
          photo2: "",
          photo3: "",
          photo4: "",
          photo5: "",
          photo6: "",
        },
        // 新增或修改的弹出框End
  
        queryFrom: {
          userId: "",
          name: "",
          mobile: "",
        },
        tableData: [],
        teamleadername: "", //团队长姓名
        teamleaderid: "", //团队长工号
        ztreeNodes: "",
  
        //------------下拉框数据字典   begin-----------------
        comleveloptions: [],
        comattributeoptions: [],
        comtypeoptions: [],
        jobcodeoptions: [],
        departmentList: [], // 选中公司的所有部门的集合
        //56个民族
        nationalList: [
          "汉族",
          "壮族",
          "满族",
          "回族",
          "苗族",
          "维吾尔族",
          "土家族",
          "彝族",
          "蒙古族",
          "藏族",
          "布依族",
          "侗族",
          "瑶族",
          "朝鲜族",
          "白族",
          "哈尼族",
          "哈萨克族",
          "黎族",
          "傣族",
          "畲族",
          "傈僳族",
          "仡佬族",
          "东乡族",
          "高山族",
          "拉祜族",
          "水族",
          "佤族",
          "纳西族",
          "羌族",
          "土族",
          "仫佬族",
          "锡伯族",
          "柯尔克孜族",
          "达斡尔族",
          "景颇族",
          "毛南族",
          "撒拉族",
          "布朗族",
          "塔吉克族",
          "阿昌族",
          "普米族",
          "鄂温克族",
          "怒族",
          "京族",
          "基诺族",
          "德昂族",
          "保安族",
          "俄罗斯族",
          "裕固族",
          "乌兹别克族",
          "门巴族",
          "鄂伦春族",
          "独龙族",
          "塔塔尔族",
          "赫哲族",
          "珞巴族",
        ],
        //分页参数
        querylParams: {
          pageNum: 1,
          pageSize: 10,
        },
      };
    },
    created() {
      this.queryTeam();
    },
    mounted(){
      setTimeout(() => {
        var divHg = document.getElementById("queryForm").clientHeight;
        let bottomTop = this.$refs.bottomFixed.offsetTop;
        this.tableHeight =window.innerHeight - bottomTop - divHg -80 + "px";
      }, 10);
    },
    methods: {
      // 换页刷新
      refreshPageRequest: function (pageNum) {
        this.querylParams.pageNum = pageNum;
        this.queryTeam();
      },
      // 每页条数发生改变
      handleSizeChange(pageSize) {
        this.querylParams.pageSize = pageSize;
        this.queryTeam();
      },
      //列表查询
      queryTeam() {
        this.loading=true;
        this.$api.user.queryChannelNum({...this.queryFrom,...this.querylParams}).then((res) => {
            console.log(res)
          if (res.code == 200) {
            this.querylParams.pageNum = res.data.current;
            this.querylParams.pageSize = res.data.size;
            this.querylParams.totalPages = res.data.pages;
            this.querylParams.totalSize = res.data.total;
            res.data.records.forEach((val) => {
              if (val.sex && val.sex !== "" && val.sex !== null) {
                val.sex = this.sexoptions.find(
                  (ele) => ele.value == val.sex
                ).label;
              }
            });
            this.tableData = res.data.records;
            this.loading=false;
          }else{
            this.$message.error(res.msg)
          }
        });
      },
      getDictItems(typeName) {
        //--数据字典--
        this.$api.dict
          .findByLableName(typeName)
          .then((response) => {
            this[typeName + "options"] = response.data; // 把获取到的数据赋给this.data
          })
          .catch((error) => {
            this[typeName + "options"] = [];
          });
      },
      handleTableEdit(params) {
        // 编辑代理人员
        this.activeTabs = "first";
        this.$api.user.getUserDatail(params.row.id).then((result) => {
          if (result.code == 200) {
            this.dataForm = {
              ...result.data.sysUser,
              ...result.data.sysUserInfo,
            };
          }
          this.dialogVisible = true;
        });
      },
      handleDialogBefore(done) {
        this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => {});
      },
      closeDialog() {
        // 清空数据
        this.deptInfo = {};
        this.$refs["dataForm"].resetFields();
        for (let key in this.dataForm) {
          this.dataForm[key] = "";
        }
        this.dialogVisible = false;
      },
      // 上传图片的方法Start
      beforeAvatarUpload(file) {
        const isJPG = file.type === "image/jpeg" || file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error("上传图片只能是 JPG 或者 PNG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },
      httpRequest(options) {
        let file = options.file;
        let filename = options.filename;
        let reader = new FileReader();
        if (file) {
          reader.readAsDataURL(file);
        }
        reader.onload = () => {
          let base64Str = reader.result;
          this.dataForm[options.filename] = base64Str;
        };
      },
    },
  };
  </script>
  
  <style scoped>
  /* 顶部查询条件样式Start */
  .queryFrom {
    background: #f2f7fc;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 20px;
  }
  .queryFrom:before {
    content: attr(title);
    position: absolute;
    left: 10%;
    transform: translate(-50%, -130%);
    /* -webkit-transform:translate(-50%,-50%); */
    padding: 0 10px;
    background-color: #fff;
  }
  
  .queryFrom .el-row {
    margin: 10px 0px;
  }
  .queryFrom .el-form-item {
    margin-bottom: 0px;
  }
  .queryFrom .queryButton .el-form-item__content {
    margin-left: 0px !important;
  }
  /* 顶部查询条件样式End */
  
  /* 上传图片样式Start */
  .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: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px dashed #d9d9d9;
  }
  .avatar {
    border: 1px dashed #d9d9d9;
    padding: 5px;
    border-radius: 6px;
    width: 100px;
    height: 100px;
    display: block;
  }
  /* 上传图片样式End */
  
  .imageLibraryItem {
    margin-bottom: 10px;
  }
  .imageLibraryItem .imageLibraryItemTitle {
    display: block;
    height: 40px;
    line-height: 40px;
    width: 100%;
    background: #f3f3f3;
    border: 1px solid #dddddd;
  }
  .imageLibraryItem .imageLibraryItemTitle label {
    margin: 0px 15px;
    font-weight: bold;
  }
  .imageLibraryItem .imageLibraryItemBody {
    width: 100%;
    border: 1px solid #ddd;
    padding: 15px;
    border-top: none;
  }
  </style>