|
|
@@ -1,166 +1,177 @@
|
|
|
<template>
|
|
|
- <!-- 注册调研员组件 -->
|
|
|
- <div class="mainBox">
|
|
|
- <div class="layerBox">
|
|
|
- <el-form ref="form" :model="form" :rules="loginRules" class="login-form" autocomplete="on" label-position="left"
|
|
|
- label-width="120px">
|
|
|
- <div class="formDiv">
|
|
|
- <!--选择角色 start------------------------------------------>
|
|
|
- <el-form-item label="所属角色：" :label-width="formLabelWidth" prop="role_id" class="custom-align-right">
|
|
|
- <div class="formLabelFloatBox">
|
|
|
- <el-select v-model="form.role_id" placeholder="请选择..">
|
|
|
- <el-option v-for="item in role_idArr" :key="item.value" :label="item.label" :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <!--选择角色 end------------------------------------------>
|
|
|
- <el-form-item label="登录账号：" :label-width="formLabelWidth" prop="" class="custom-align-right">
|
|
|
- <el-input v-model="form.user_name" autocomplete="off" placeholder="请输入登录账号.." ></el-input>
|
|
|
- </el-form-item>
|
|
|
- <div v-if="editId == ''">
|
|
|
- <!--新密码 start------------------------------------------>
|
|
|
- <div class="PasswordBox">
|
|
|
- <el-form-item prop="password" label="登录密码：" class="custom-align-right">
|
|
|
- <div class="PasswordBody">
|
|
|
- <el-input :key="passwordType1" ref="password1" v-model="form.password" :type="passwordType1"
|
|
|
- placeholder="请输入密码" name="password" tabindex="2" autocomplete="off" @blur="capsTooltip2 = false" />
|
|
|
- <span class="show-pwd" @click="showPwd(1)">
|
|
|
- <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- <!--新密码 end------------------------------------------>
|
|
|
- <!--新密码 start------------------------------------------>
|
|
|
- <div class="PasswordBox">
|
|
|
- <el-form-item prop="confirm_password" label="确认密码：" class="custom-align-right">
|
|
|
- <div class="PasswordBody">
|
|
|
- <el-input :key="passwordType2" ref="password2" v-model="form.confirm_password" :type="passwordType2"
|
|
|
- placeholder="请输入密码" name="password" tabindex="2" autocomplete="off" @blur="capsTooltip2 = false" />
|
|
|
- <span class="show-pwd" @click="showPwd(2)">
|
|
|
- <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- <!--新密码 end------------------------------------------>
|
|
|
- </div>
|
|
|
- <el-form-item label="调研员编号：" :label-width="formLabelWidth" prop="number" class="custom-align-right">
|
|
|
- <el-input v-model="form.number" autocomplete="off" placeholder="请输入调研员编号.."></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="真实姓名：" :label-width="formLabelWidth" prop="real_name" class="custom-align-right">
|
|
|
- <el-input v-model="form.real_name" autocomplete="off" placeholder="请输入真实姓名.."></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="照片：" :label-width="formLabelWidth" prop="avatar" :class="['custom-form-item']"
|
|
|
- class="custom-align-right">
|
|
|
- <div class="uploaderBox">
|
|
|
- <!--图片上传组件 start ------------------------------------------------------------>
|
|
|
- <div class="avatar-upload-container" @mouseenter="hovering = true" @mouseleave="hovering = false">
|
|
|
- <!-- 上传组件 -->
|
|
|
- <el-upload class="avatar-uploader" action="#" :show-file-list="false"
|
|
|
- :before-upload="beforeAvatarUpload">
|
|
|
- <!-- 预览图片 -->
|
|
|
- <img v-if="photoUrl" :src="photoUrl" class="avatar">
|
|
|
- <!-- 上传图标 -->
|
|
|
- <div v-else class="chooseImgDiv">
|
|
|
- <div>
|
|
|
- <img src="@/assets/public/upload/noImage.png">
|
|
|
- <div>选择图片</div>
|
|
|
+ <!-- 注册调研员组件 -->
|
|
|
+ <div class="mainBox">
|
|
|
+ <div class="layerBox">
|
|
|
+ <el-form ref="form" :model="form" :rules="loginRules" class="login-form" autocomplete="on"
|
|
|
+ label-position="left" label-width="120px">
|
|
|
+ <div class="formDiv">
|
|
|
+ <!--选择角色 start------------------------------------------>
|
|
|
+ <el-form-item label="所属角色：" :label-width="formLabelWidth" prop="role_id" class="custom-align-right">
|
|
|
+ <div class="formLabelFloatBox">
|
|
|
+ <el-select v-model="form.role_id" placeholder="请选择..">
|
|
|
+ <el-option v-for="item in role_idArr" :key="item.value" :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <!--选择角色 end------------------------------------------>
|
|
|
+ <el-form-item label="登录账号：" :label-width="formLabelWidth" prop="" class="custom-align-right">
|
|
|
+ <el-input v-model="form.user_name" autocomplete="off" placeholder="请输入登录账号.."
|
|
|
+ disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div v-if="editId == ''">
|
|
|
+ <!--新密码 start------------------------------------------>
|
|
|
+ <div class="PasswordBox">
|
|
|
+ <el-form-item prop="password" label="登录密码：" class="custom-align-right">
|
|
|
+ <div class="PasswordBody">
|
|
|
+ <el-input :key="passwordType1" ref="password1" v-model="form.password"
|
|
|
+ :type="passwordType1" placeholder="请输入密码" name="password" tabindex="2"
|
|
|
+ autocomplete="off" @blur="capsTooltip2 = false" />
|
|
|
+ <span class="show-pwd" @click="showPwd(1)">
|
|
|
+ <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <!--新密码 end------------------------------------------>
|
|
|
+ <!--新密码 start------------------------------------------>
|
|
|
+ <div class="PasswordBox">
|
|
|
+ <el-form-item prop="confirm_password" label="确认密码：" class="custom-align-right">
|
|
|
+ <div class="PasswordBody">
|
|
|
+ <el-input :key="passwordType2" ref="password2" v-model="form.confirm_password"
|
|
|
+ :type="passwordType2" placeholder="请输入密码" name="password" tabindex="2"
|
|
|
+ autocomplete="off" @blur="capsTooltip2 = false" />
|
|
|
+ <span class="show-pwd" @click="showPwd(2)">
|
|
|
+ <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <!--新密码 end------------------------------------------>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-upload>
|
|
|
- <!-- 删除按钮，当鼠标悬浮时显示 -->
|
|
|
- <div v-if="hovering && photoUrl" class="delete-button" @click="handleDelete">
|
|
|
- <i class="el-icon-delete"></i>
|
|
|
+ <el-form-item label="证书编号：" :label-width="formLabelWidth" class="custom-align-right">
|
|
|
+ <el-input v-model="form.number" autocomplete="off" placeholder="请输入证书编号.."></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="真实姓名：" :label-width="formLabelWidth" class="custom-align-right">
|
|
|
+ <el-input v-model="form.real_name" autocomplete="off" placeholder="请输入真实姓名.."></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="照片：" :label-width="formLabelWidth" :class="['custom-form-item']"
|
|
|
+ class="custom-align-right">
|
|
|
+ <div class="uploaderBox">
|
|
|
+ <!--图片上传组件 start ------------------------------------------------------------>
|
|
|
+ <div class="avatar-upload-container" @mouseenter="hovering = true"
|
|
|
+ @mouseleave="hovering = false">
|
|
|
+ <!-- 上传组件 -->
|
|
|
+ <el-upload class="avatar-uploader" action="#" :show-file-list="false"
|
|
|
+ :before-upload="beforeAvatarUpload">
|
|
|
+ <!-- 预览图片 -->
|
|
|
+ <img v-if="photoUrl" :src="photoUrl" class="avatar">
|
|
|
+ <!-- 上传图标 -->
|
|
|
+ <div v-else class="chooseImgDiv">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/public/upload/noImage.png">
|
|
|
+ <div>选择图片</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ <!-- 删除按钮，当鼠标悬浮时显示 -->
|
|
|
+ <div v-if="hovering && photoUrl" class="delete-button" @click="handleDelete">
|
|
|
+ <i class="el-icon-delete"></i>
|
|
|
+ </div>
|
|
|
+ <input type="hidden" v-model="form.avatar">
|
|
|
+ </div>
|
|
|
+ <!--图片上传组件 end ------------------------------------------------------------>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="手机号：" :label-width="formLabelWidth" prop="mobile" class="custom-align-right">
|
|
|
+ <el-input v-model="form.mobile" autocomplete="off" placeholder="请输入手机号.."></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="身份证号：" :label-width="formLabelWidth" prop="id_card" class="custom-align-right">
|
|
|
+ <el-input v-model="form.id_card" autocomplete="off" placeholder="请输入身份证号.."></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="出生年月：" :label-width="formLabelWidth" class="custom-align-right">
|
|
|
+ <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期" disabled>
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="性别：" :label-width="formLabelWidth" class="custom-align-right">
|
|
|
+ <el-radio v-model="form.gender" label="1">男</el-radio>
|
|
|
+ <el-radio v-model="form.gender" label="2">女</el-radio>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="工作区域：" :label-width="formLabelWidth" class="custom-align-right">
|
|
|
+ <!-- 级联选择器 -->
|
|
|
+ <CityCascader v-model="form.city_arr_id" @update-city-id="update_city_arr_id"
|
|
|
+ v-if="isNational == 0">
|
|
|
+ </CityCascader>
|
|
|
+ <el-cascader :options="options" :show-all-levels="false" disabled v-else></el-cascader>
|
|
|
+ <el-checkbox v-model="isNational" :true-label="1" :false-label="0"
|
|
|
+ class="longTimeCheckbox">全国</el-checkbox>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="站点标识：" :label-width="formLabelWidth" prop="sszq" class="custom-align-right">
|
|
|
+ <!-- 级联选择器 xx-->
|
|
|
+ <el-cascader v-model="form.sszq" :options="options_arr" filterable clearable></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="有效期：" :label-width="formLabelWidth" class="custom-align-right">
|
|
|
+ <el-date-picker v-model="timeList" type="daterange" :disabled="form.long_time === 1"
|
|
|
+ range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
|
|
|
+ :picker-options="pickerOptions">
|
|
|
+ </el-date-picker>
|
|
|
+ <el-checkbox v-model="form.long_time" :true-label="1" :false-label="0"
|
|
|
+ class="longTimeCheckbox">无限期</el-checkbox>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="籍贯：" :label-width="formLabelWidth" prop="" class="custom-align-right">
|
|
|
+ <CityCascader v-model="form.native_place_arr_id" @update-city-id="update_native_place_arr_id">
|
|
|
+ </CityCascader>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="QQ：" :label-width="formLabelWidth" prop="" class="custom-align-right">
|
|
|
+ <el-input v-model="form.qq" autocomplete="off" placeholder="请输入QQ号.."></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="电子邮箱：" :label-width="formLabelWidth" prop="" class="custom-align-right">
|
|
|
+ <el-input v-model="form.email" autocomplete="off" placeholder="请输入电子邮箱.."></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="邮编：" :label-width="formLabelWidth" prop="" class="custom-align-right">
|
|
|
+ <el-input v-model="form.zip_code" autocomplete="off" placeholder="请输入邮编.."></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="详细地址：" :label-width="formLabelWidth" prop="" class="custom-align-right">
|
|
|
+ <CityCascader v-model="form.address_arr_id" @update-city-id="update_address_arr_id">
|
|
|
+ </CityCascader>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" :label-width="formLabelWidth" prop="" class="custom-align-right">
|
|
|
+ <el-input v-model="form.address" autocomplete="off" placeholder="请输入门牌号.."></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="相关资料：" :label-width="formLabelWidth" prop="" class="custom-align-right">
|
|
|
+ <el-upload class="upload-demo" :action="uploadFileUrl" :headers="headers"
|
|
|
+ accept=".jpg, .jpeg, .png" :before-remove="beforeRemove" :on-success="handleUploadSuccess"
|
|
|
+ multiple :limit="30" :on-exceed="handleExceed" :file-list="otherList" list-type="picture"
|
|
|
+ :before-upload="beforeAvatarUpload1">
|
|
|
+ <el-button size="small" type="primary">点击上传</el-button>
|
|
|
+ <div slot="tip" class="el-upload__tip">每张图片最大2MB，最多上传30张图片。</div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="提示词：" :label-width="formLabelWidth" prop="" class="custom-align-right">
|
|
|
+ <el-input type="textarea" v-model="form.remark" class="custom-textarea"
|
|
|
+ placeholder="请输入提示词"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="网站选择" :label-width="formLabelWidth" prop="sszq" class="custom-align-right">
|
|
|
+ <el-select v-model="form.sszq" multiple filterable placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in webSiteList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item> -->
|
|
|
</div>
|
|
|
- <input type="hidden" v-model="form.avatar">
|
|
|
- </div>
|
|
|
- <!--图片上传组件 end ------------------------------------------------------------>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="手机号：" :label-width="formLabelWidth" prop="mobile" class="custom-align-right">
|
|
|
- <el-input v-model="form.mobile" autocomplete="off" placeholder="请输入手机号.."></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="身份证号：" :label-width="formLabelWidth" prop="id_card" class="custom-align-right">
|
|
|
- <el-input v-model="form.id_card" autocomplete="off" placeholder="请输入身份证号.."></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="出生年月：" :label-width="formLabelWidth" prop="birthday" class="custom-align-right">
|
|
|
- <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期" disabled>
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="性别：" :label-width="formLabelWidth" prop="gender" class="custom-align-right">
|
|
|
- <el-radio v-model="form.gender" label="1">男</el-radio>
|
|
|
- <el-radio v-model="form.gender" label="2">女</el-radio>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="工作区域：" :label-width="formLabelWidth" prop="city_arr_id" class="custom-align-right">
|
|
|
- <!-- 级联选择器 -->
|
|
|
- <CityCascader v-model="form.city_arr_id" @update-city-id="update_city_arr_id" v-if="isNational == 0">
|
|
|
- </CityCascader>
|
|
|
- <el-cascader :options="options" :show-all-levels="false" disabled v-else></el-cascader>
|
|
|
- <el-checkbox v-model="isNational" :true-label="1" :false-label="0" class="longTimeCheckbox">全国</el-checkbox>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="站点标识：" :label-width="formLabelWidth" prop="sszq" class="custom-align-right">
|
|
|
- <!-- 级联选择器 xx-->
|
|
|
- <el-cascader v-model="form.sszq" :options="options_arr" filterable clearable></el-cascader>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="有效期：" :label-width="formLabelWidth" prop="timeList" class="custom-align-right">
|
|
|
- <el-date-picker v-model="timeList" type="daterange" :disabled="form.long_time === 1" range-separator="至"
|
|
|
- start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
|
|
|
- </el-date-picker>
|
|
|
- <el-checkbox v-model="form.long_time" :true-label="1" :false-label="0"
|
|
|
- class="longTimeCheckbox">无限期</el-checkbox>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="籍贯：" :label-width="formLabelWidth" prop="" class="custom-align-right">
|
|
|
- <CityCascader v-model="form.native_place_arr_id" @update-city-id="update_native_place_arr_id">
|
|
|
- </CityCascader>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="QQ：" :label-width="formLabelWidth" prop="" class="custom-align-right">
|
|
|
- <el-input v-model="form.qq" autocomplete="off" placeholder="请输入QQ号.."></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="电子邮箱：" :label-width="formLabelWidth" prop="" class="custom-align-right">
|
|
|
- <el-input v-model="form.email" autocomplete="off" placeholder="请输入电子邮箱.."></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="邮编：" :label-width="formLabelWidth" prop="" class="custom-align-right">
|
|
|
- <el-input v-model="form.zip_code" autocomplete="off" placeholder="请输入邮编.."></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="详细地址：" :label-width="formLabelWidth" prop="" class="custom-align-right">
|
|
|
- <CityCascader v-model="form.address_arr_id" @update-city-id="update_address_arr_id"></CityCascader>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="" :label-width="formLabelWidth" prop="" class="custom-align-right">
|
|
|
- <el-input v-model="form.address" autocomplete="off" placeholder="请输入门牌号.."></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="相关资料：" :label-width="formLabelWidth" prop="" class="custom-align-right">
|
|
|
- <el-upload class="upload-demo" :action="uploadFileUrl" :headers="headers" accept=".jpg, .jpeg, .png"
|
|
|
- :before-remove="beforeRemove" :on-success="handleUploadSuccess" multiple :limit="30"
|
|
|
- :on-exceed="handleExceed" :file-list="otherList" list-type="picture" :before-upload="beforeAvatarUpload1">
|
|
|
- <el-button size="small" type="primary">点击上传</el-button>
|
|
|
- <div slot="tip" class="el-upload__tip">每张图片最大2MB，最多上传30张图片。</div>
|
|
|
- </el-upload>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="提示词：" :label-width="formLabelWidth" prop="" class="custom-align-right">
|
|
|
- <el-input type="textarea" v-model="form.remark" class="custom-textarea" placeholder="请输入提示词"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <!-- <el-form-item label="网站选择" :label-width="formLabelWidth" prop="sszq" class="custom-align-right">
|
|
|
- <el-select v-model="form.sszq" multiple filterable placeholder="请选择">
|
|
|
- <el-option
|
|
|
- v-for="item in webSiteList"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item> -->
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="bottomBtnBox">
|
|
|
+ <el-button type="info" @click="goList">返回</el-button>
|
|
|
+ <el-button type="primary" @click="addData" v-if="editId == ''">提交</el-button>
|
|
|
+ <el-button type="primary" @click="editData" v-if="editId != ''">修改</el-button>
|
|
|
+ <el-button type="warning" @click="resetPassword" v-if="editId != ''">重置密码</el-button>
|
|
|
</div>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div class="bottomBtnBox">
|
|
|
- <el-button type="info" @click="goList">返回</el-button>
|
|
|
- <el-button type="primary" @click="addData" v-if="editId == ''">提交</el-button>
|
|
|
- <el-button type="primary" @click="editData" v-if="editId != ''">修改</el-button>
|
|
|
- <el-button type="warning" @click="resetPassword" v-if="editId != ''">重置密码</el-button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -175,720 +186,661 @@ import { formatLocalDate } from '@/utils/public';
|
|
|
// import cjs from 'compression-webpack-plugin';
|
|
|
|
|
|
export default {
|
|
|
- components: {
|
|
|
- CityCascader, //城市级联选择器
|
|
|
- },
|
|
|
- data() {
|
|
|
- let self = this;
|
|
|
- // 配置验证规则：用于表单验证
|
|
|
- const validatePassword = (rule, value, callback) => {
|
|
|
- if (value.length < 6) {
|
|
|
- callback(new Error('密码不能低于6位！'))
|
|
|
- } else {
|
|
|
- callback()
|
|
|
- }
|
|
|
- }
|
|
|
- const validatePhone = (rule, value, callback) => {
|
|
|
- const phoneRegex = /^1[34578]\d{9}$/g; // 正则表达式验证手机号
|
|
|
- if (!value || value.trim() === "") {
|
|
|
- callback(new Error('该项不能为空！'));
|
|
|
- } else if (!phoneRegex.test(value.trim())) {
|
|
|
- callback(new Error('请输入有效的手机号')); // 更新错误信息
|
|
|
- } else {
|
|
|
- console.log("手机号验证通过！")
|
|
|
- callback();
|
|
|
- }
|
|
|
- }
|
|
|
- const validateEmpty = (rule, value, callback) => {
|
|
|
- if (!value || value.trim() === "") {
|
|
|
- callback(new Error('该项不能为空！'));
|
|
|
- } else {
|
|
|
- callback();
|
|
|
- }
|
|
|
- }
|
|
|
- const validateArray = (rule, value, callback) => {
|
|
|
- if (value.length == 0) {
|
|
|
- callback(new Error('该项不能为空！'))
|
|
|
- } else {
|
|
|
- callback()
|
|
|
- }
|
|
|
- }
|
|
|
- const validateTime = (rule, value, callback) => {
|
|
|
- if (value === "NaN-NaN-NaN NaN:NaN:NaN") {
|
|
|
- callback(new Error('该项不能为空！'))
|
|
|
- } else {
|
|
|
- callback()
|
|
|
- }
|
|
|
- }
|
|
|
- const validateTimeTo = (rule, value, callback) => {
|
|
|
- // console.log(value)
|
|
|
- // console.log(self.timeList)
|
|
|
- // console.log(self.form.long_time)
|
|
|
- if (self.timeList.length == 0 && self.form.long_time == 0) {
|
|
|
- callback(new Error('该项不能为空！'))
|
|
|
- } else {
|
|
|
- callback()
|
|
|
- }
|
|
|
- }
|
|
|
- const validateIdcard = (rule, value, callback) => {
|
|
|
- const idCardRegex = /^(?:\d{15}|\d{18}|\d{17}[\dXx])$/; // 正则表达式验证身份证号
|
|
|
- if (!value || value.trim() === "") {
|
|
|
- callback(new Error('该项不能为空！'));
|
|
|
- } else if (!idCardRegex.test(value.trim())) {
|
|
|
- callback(new Error('请输入有效的身份证号')); // 更新错误信息
|
|
|
- } else {
|
|
|
- console.log("身份证号验证通过！");
|
|
|
- self.extractBirthdayFromIdcard();
|
|
|
- callback();
|
|
|
- }
|
|
|
- }
|
|
|
- return {
|
|
|
-
|
|
|
- options_arr: [],
|
|
|
-
|
|
|
- props_1: { multiple: true },//下拉多选
|
|
|
-
|
|
|
-
|
|
|
- formLabelWidth: "120px",
|
|
|
- editId: "",
|
|
|
- uploadFileUrl: URL.baseUrl + "/public/uploadFile",//获得上传地址
|
|
|
- headers: {},
|
|
|
-
|
|
|
-
|
|
|
- website_tag_params: {//xx
|
|
|
- keyword: "",//网站名称查询
|
|
|
- website_column_id: [],//使用网系id查询
|
|
|
- city_id: [],//使用城市id查询
|
|
|
-
|
|
|
- page: 1,//当前是第几页
|
|
|
- pageSize: 666666,//一共多少条
|
|
|
- name: "",
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- form: {
|
|
|
-
|
|
|
- // websiteTag_arr_id:[], //站点标识下拉id onlyxx
|
|
|
-
|
|
|
- websiteTag_arr_id: [], //站点标识下拉id only
|
|
|
-
|
|
|
- websiteTag_reg: "",
|
|
|
- sszq: [], //站点标识下拉id
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- type_id: 4,//调研员
|
|
|
- role_id: "",//角色id
|
|
|
- user_name: "",//登录账号
|
|
|
- password: "",//密码
|
|
|
- confirm_password: "",//确认密码
|
|
|
- number: "",//调研员编号
|
|
|
- real_name: "",//真实姓名
|
|
|
- avatar: "",//照片
|
|
|
- id_card: "",//身份证号
|
|
|
- birthday: "",//出生年月
|
|
|
- gender: "1",//性别
|
|
|
- mobile: "",//手机号
|
|
|
- native_place_arr_id: [],//籍贯
|
|
|
- city_arr_id: "",//工作区域
|
|
|
- address_arr_id: [],//详细地址
|
|
|
- address: "",//详细地址门牌号
|
|
|
- from_time: "",//有效期开始时间
|
|
|
- to_time: "",//有效期结束时间
|
|
|
- long_time: 0,//是否为长期 //长期1：长期 0：非长期
|
|
|
- qq: "",//QQ
|
|
|
- email: "",//电子邮箱
|
|
|
- other: [],//相关资料
|
|
|
- remark: "",//提示词
|
|
|
- zip_code: "",//邮编
|
|
|
- //sszq: [],//所属网站
|
|
|
- },
|
|
|
- timeList: [],//时间段
|
|
|
- otherList: [],//相关资料列表
|
|
|
- role_idArr: [],//角色id池
|
|
|
- isNational: 0,//是否为全国
|
|
|
- //网站列表
|
|
|
- webSiteList: [],
|
|
|
- //上传照片
|
|
|
- photoUrl: '',
|
|
|
- hovering: false, // 鼠标悬浮状态 悬浮时显示删除
|
|
|
- //密码验证
|
|
|
- capsTooltip1: false,
|
|
|
- capsTooltip2: false,
|
|
|
- passwordType1: 'password',
|
|
|
- passwordType2: 'password',
|
|
|
- //配置from表单验证规则
|
|
|
- loginRules: {
|
|
|
-
|
|
|
-
|
|
|
- // 站点标识xx
|
|
|
- websiteTag_arr_id: [{ type: 'array', required: true, trigger: 'blur', validator: validateArray }],
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- //1.角色id
|
|
|
- role_id: [{ required: true, trigger: 'blur', validator: validateArray }],
|
|
|
- //2.登录账号
|
|
|
- user_name: [{ required: true, trigger: 'blur', validator: validatePhone }],
|
|
|
- //3.密码和确认密码
|
|
|
- password: [{ required: true, trigger: 'blur', validator: validatePassword }],
|
|
|
- confirm_password: [{ required: true, trigger: 'blur', validator: validatePassword }],
|
|
|
- //4.调研员编号
|
|
|
- number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
- //5.真实姓名
|
|
|
- real_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
- //6.手机号
|
|
|
- mobile: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
- //7.身份证号
|
|
|
- id_card: [{ required: true, trigger: 'blur', validator: validateIdcard }],
|
|
|
- //8.性别
|
|
|
- gender: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
- //9.手机号
|
|
|
- mobile: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
- //10.工作区域
|
|
|
- city_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
|
|
|
- //11.照片
|
|
|
- avatar: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
- //12.出生年月
|
|
|
- birthday: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
- //13.有效期
|
|
|
- timeList: [{ required: true, trigger: 'blur', validator: validateTimeTo }],
|
|
|
- //14.网站选择
|
|
|
- sszq: [{ required: true, trigger: 'blur', validator: validateArray }]
|
|
|
- },
|
|
|
- //时间跨度
|
|
|
- pickerOptions: {
|
|
|
- selectableRange: '1900-01-01 to 2100-12-31', // 允许选择的日期范围
|
|
|
- // disabledDate(time) {
|
|
|
- // return time.getTime() < Date.now() - 86400000; // 禁用今天之前的日期
|
|
|
- // },
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- watch: {
|
|
|
- // 同时监听多个属性
|
|
|
- '$data': {
|
|
|
- handler() {
|
|
|
- this.form.user_name = "GR" + this.form.mobile.slice(-5) + this.form.id_card.slice(-5);
|
|
|
- },
|
|
|
- deep: true, // 深度监听对象变化
|
|
|
- immediate: true // 初始化时立即执行一次
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //1.表单收集 start ------------------------------------------------------------>
|
|
|
- //1.1切换密码框的显示与隐藏
|
|
|
- showPwd(num) {
|
|
|
- const passwordTypeKey = 'passwordType' + num; //动态生成 passwordType 的键
|
|
|
- const passwordRefKey = 'password' + num; //动态生成 password 的引用
|
|
|
- // 切换密码类型
|
|
|
- if (this[passwordTypeKey] === 'password') {
|
|
|
- this[passwordTypeKey] = ''; //显示密码
|
|
|
- } else {
|
|
|
- this[passwordTypeKey] = 'password'; //隐藏密码
|
|
|
- }
|
|
|
- // 使用 $nextTick 聚焦到对应的密码输入框
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs[passwordRefKey].focus(); //聚焦到对应的密码输入框
|
|
|
- });
|
|
|
- },
|
|
|
- //1.2获得角色列表池
|
|
|
- getRoleList() {
|
|
|
- let data = {
|
|
|
- page: 1,
|
|
|
- pageSize: 100
|
|
|
- }
|
|
|
- this.$store.dispatch('userRole/roleList', data).then(res => {
|
|
|
- this.role_idArr = res.data.rows.map(item => ({
|
|
|
- value: item.id,
|
|
|
- label: item.role_name
|
|
|
- }));
|
|
|
- }).catch(error => {
|
|
|
- this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '网络错误，请重试！'
|
|
|
- });
|
|
|
- })
|
|
|
- },
|
|
|
- //1.3更新工作区域
|
|
|
- update_city_arr_id(value) {
|
|
|
- console.log("工作区域ID已更新:", value);
|
|
|
- this.form.city_arr_id = value;
|
|
|
-
|
|
|
- console.log(this.form.city_arr_id);
|
|
|
- },
|
|
|
- //1.4更新籍贯
|
|
|
- update_native_place_arr_id(value) {
|
|
|
- console.log("籍贯ID已更新:", value);
|
|
|
- this.form.native_place_arr_id = value;
|
|
|
- },
|
|
|
- //1.5更新详细地址
|
|
|
- update_address_arr_id(value) {
|
|
|
- console.log("详细地址ID已更新:", value);
|
|
|
- this.form.address_arr_id = value;
|
|
|
- },
|
|
|
- //1.5重置表单
|
|
|
- clearData() {
|
|
|
-
|
|
|
+ components: {
|
|
|
+ CityCascader, //城市级联选择器
|
|
|
},
|
|
|
- //表单收集 end ------------------------------------------------------------>
|
|
|
- //2.提交表单 start ------------------------------------------------------------>
|
|
|
- //2.1 上传图片操作
|
|
|
- beforeAvatarUpload(file) {
|
|
|
- const isJPG = file.type === 'image/jpeg';
|
|
|
- const isPNG = file.type === 'image/png';
|
|
|
- const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
-
|
|
|
- if (!isJPG && !isPNG) {
|
|
|
- this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
|
|
|
- return false;
|
|
|
- }
|
|
|
- if (!isLt2M) {
|
|
|
- this.$message.error('上传头像图片大小不能超过 2MB!');
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- const formData = new FormData();
|
|
|
- formData.append('file', file);
|
|
|
-
|
|
|
- this.$store.dispatch('pool/uploadFile', formData).then(res => {
|
|
|
- this.photoUrl = res.data.imgUrl;//显示缩略图
|
|
|
- this.form.avatar = res.data.imgUrl;//提供表单地址
|
|
|
- console.log(res.data.imgUrl)
|
|
|
- }).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '网络错误，请重试！'
|
|
|
- });
|
|
|
- })
|
|
|
-
|
|
|
- // 阻止默认的上传行为
|
|
|
- return false;
|
|
|
- },
|
|
|
- //2.2 删除图片
|
|
|
- handleDelete() {
|
|
|
- this.photoUrl = ''; // 清空图片 URL
|
|
|
- },
|
|
|
- //2.3 多文件上传
|
|
|
- handleExceed(files, fileList) {
|
|
|
- this.$message.warning(`当前限制选择 30 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
|
|
- },
|
|
|
- beforeRemove(file, fileList) {
|
|
|
- console.log('file, fileList', file, fileList);
|
|
|
- for (let item of fileList) {
|
|
|
- this.form.other = this.form.other.filter(item => item !== file.url);
|
|
|
- }
|
|
|
- // return this.$confirm(`确定移除 ${file.name}?`);
|
|
|
- },
|
|
|
- //获取token
|
|
|
- getTokenFromCookie() {
|
|
|
- const name = "Admin-Token=";
|
|
|
- const decodedCookie = decodeURIComponent(document.cookie);
|
|
|
- const cookieArray = decodedCookie.split(';');
|
|
|
- for (let i = 0; i < cookieArray.length; i++) {
|
|
|
- let cookie = cookieArray[i].trim();
|
|
|
- if (cookie.indexOf(name) === 0) {
|
|
|
- return cookie.substring(name.length, cookie.length); // 返回 token
|
|
|
+ data() {
|
|
|
+ let self = this;
|
|
|
+ // 配置验证规则：用于表单验证
|
|
|
+ const validatePassword = (rule, value, callback) => {
|
|
|
+ if (value.length < 6) {
|
|
|
+ callback(new Error('密码不能低于6位！'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- return ""; // 如果没有找到 token，返回空字符串
|
|
|
- },
|
|
|
- //设置token
|
|
|
- setHeaders() {
|
|
|
- this.token = this.getTokenFromCookie(); // 从 cookie 中获取 token
|
|
|
- this.headers = { token: this.token }; // 设置 headers
|
|
|
- console.log(this.headers); // 打印 headers
|
|
|
- },
|
|
|
- //上传成功以后
|
|
|
- handleUploadSuccess(response) {
|
|
|
- this.form.other.push(response.data.imgUrl)
|
|
|
- console.log('上传成功:', response);
|
|
|
- console.log(this.form.other);
|
|
|
- },
|
|
|
- //只能上传图片
|
|
|
- beforeAvatarUpload1(file) {
|
|
|
- const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
-
|
|
|
- if (!isLt2M) {
|
|
|
- this.$message.error('上传图片大小不能超过 2MB!');
|
|
|
- return false;
|
|
|
- }
|
|
|
- },
|
|
|
- //提交表单
|
|
|
- addData() {
|
|
|
-
|
|
|
- console.log(this.timeList)
|
|
|
- //1.格式化时间戳
|
|
|
- this.form.birthday = formatLocalDate(this.form.birthday);
|
|
|
- if (this.form.long_time == 0) {
|
|
|
- this.form.from_time = formatLocalDate(this.timeList[0]);
|
|
|
- this.form.to_time = formatLocalDate(this.timeList[1]);
|
|
|
- } else {
|
|
|
- // this.form.from_time = "";
|
|
|
- // this.form.to_time = "";
|
|
|
- delete this.form.from_time;
|
|
|
- delete this.form.to_time;
|
|
|
- }
|
|
|
- //判断用户工作区域是否为全国
|
|
|
- if (this.isNational == 1) {
|
|
|
- this.form.city_arr_id = [0];
|
|
|
- }
|
|
|
- console.log(this.form)
|
|
|
- //2.开始验证
|
|
|
- this.$refs.form.validate(valid => {
|
|
|
- if (valid) {
|
|
|
- //3.验证用户是否已经存在
|
|
|
- this.$store.dispatch('userMember/verifyUserInfo', { user_name: this.form.user_name }).then(res => {
|
|
|
-
|
|
|
- if (res.code == 0) {
|
|
|
- //如果code为0表示用户不存在，提交表单
|
|
|
-
|
|
|
-
|
|
|
- this.form.sszq = this.form.sszq[0]
|
|
|
- console.log("this.form.sszq===", this.form.sszq)
|
|
|
- console.log("this.form1===", this.form)
|
|
|
-
|
|
|
- this.$store.dispatch('userMember/createUser', this.form).then(res => {
|
|
|
-
|
|
|
- console.log("this.form222===res", res)
|
|
|
-
|
|
|
- if (res.code == 200) {
|
|
|
- // console.log(res);
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '用户添加成功！'
|
|
|
- });
|
|
|
- this.goList();
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: res.message
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
- } else if (res.code == 200) {
|
|
|
- //如果code==200 表示用户存在，阻止进一步提交
|
|
|
- this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '该账号已被注册，请更换其他账号！'
|
|
|
- });
|
|
|
+ const validatePhone = (rule, value, callback) => {
|
|
|
+ const phoneRegex = /^1[34578]\d{9}$/g; // 正则表达式验证手机号
|
|
|
+ if (!value || value.trim() === "") {
|
|
|
+ callback(new Error('该项不能为空！'));
|
|
|
+ } else if (!phoneRegex.test(value.trim())) {
|
|
|
+ callback(new Error('请输入有效的手机号')); // 更新错误信息
|
|
|
+ } else {
|
|
|
+ console.log("手机号验证通过！")
|
|
|
+ callback();
|
|
|
}
|
|
|
- }).catch(error => {
|
|
|
- this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '网络错误，请重试！'
|
|
|
- });
|
|
|
- })
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- //提交表单 start ------------------------------------------------------------>
|
|
|
- //3.编辑表单 start ------------------------------------------------------------>
|
|
|
- //获得网站列表
|
|
|
- getWebsiteList(userWebList) {
|
|
|
- this.$store.dispatch('pool/getWebList', { page: 1, pageSize: 1000 }).then(res => {
|
|
|
- if (res.code != 200) {
|
|
|
- this.$message.error(res.message)
|
|
|
- } else {
|
|
|
- for (let item of res.data.rows) {
|
|
|
- let data = {
|
|
|
- value: item.id,
|
|
|
- label: item.website_name
|
|
|
+ const validateEmpty = (rule, value, callback) => {
|
|
|
+ if (!value || value.trim() === "") {
|
|
|
+ callback(new Error('该项不能为空！'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
}
|
|
|
- this.webSiteList.push(data)
|
|
|
- }
|
|
|
- // //如果有数据可以回显
|
|
|
- // if (userWebList) {
|
|
|
- // console.log("显示编辑用户的所属网站！")
|
|
|
- // this.form.sszq = userWebList;
|
|
|
- // }
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- //获得用户信息
|
|
|
- getUserInfo() {
|
|
|
- // console.log("回显数据===");
|
|
|
- this.$store.dispatch('userMember/getUser', { id: this.editId }).then(res => {
|
|
|
-
|
|
|
-
|
|
|
- // 站点标识
|
|
|
- this.form.sszq = Number(res.data.sszq);
|
|
|
-
|
|
|
- this.form.type_id = res.data.type_id;
|
|
|
- this.form.user_name = res.data.user_name;
|
|
|
- this.form.role_id = res.data.role_id;
|
|
|
- this.form.real_name = res.data.real_name;
|
|
|
- this.form.mobile = res.data.mobile;
|
|
|
- this.form.number = res.data.number;
|
|
|
- this.photoUrl = res.data.avatar;
|
|
|
- this.form.avatar = res.data.avatar;
|
|
|
- this.form.id_card = res.data.id_card;
|
|
|
- this.form.birthday = res.data.birthday;
|
|
|
- this.form.address_arr_id = res.data.address_arr_id;
|
|
|
-
|
|
|
- //判断用户工作区域是否为全国
|
|
|
- if (typeof res.data.city_arr_id === 'string') {
|
|
|
- this.form.city_arr_id = JSON.parse(res.data.city_arr_id);
|
|
|
+ const validateArray = (rule, value, callback) => {
|
|
|
+ if (value.length == 0) {
|
|
|
+ callback(new Error('该项不能为空！'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
}
|
|
|
- console.log(this.form.city_arr_id);
|
|
|
- if (this.form.city_arr_id[0] == 0) {
|
|
|
- this.isNational = 1
|
|
|
+ const validateTime = (rule, value, callback) => {
|
|
|
+ if (value === "NaN-NaN-NaN NaN:NaN:NaN") {
|
|
|
+ callback(new Error('该项不能为空！'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- //还原有效期
|
|
|
- if (res.data.long_time == 0) {
|
|
|
- this.timeList = [
|
|
|
- res.data.from_time,
|
|
|
- res.data.to_time
|
|
|
- ]
|
|
|
- this.form.from_time = res.data.from_time;
|
|
|
- this.form.to_time = res.data.to_time;
|
|
|
- this.form.long_time = 0;
|
|
|
- } else {
|
|
|
- this.form.from_time = "";
|
|
|
- this.form.to_time = "";
|
|
|
- this.form.long_time = 1;
|
|
|
+ const validateTimeTo = (rule, value, callback) => {
|
|
|
+ // console.log(value)
|
|
|
+ // console.log(self.timeList)
|
|
|
+ // console.log(self.form.long_time)
|
|
|
+ if (self.timeList.length == 0 && self.form.long_time == 0) {
|
|
|
+ callback(new Error('该项不能为空！'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
}
|
|
|
- this.form.qq = res.data.qq;
|
|
|
- this.form.email = res.data.email;
|
|
|
- this.form.address = res.data.address;
|
|
|
- this.form.zip_code = res.data.zip_code;
|
|
|
- this.form.remark = res.data.remark;
|
|
|
-
|
|
|
- this.form.native_place_arr_id = res.data.native_place_arr_id;
|
|
|
- // 处理文件列表
|
|
|
- const fileArrayString = res.data.other; // 假设这是一个字符串格式的数组
|
|
|
- const fileArray = JSON.parse(fileArrayString); // 解析为数组
|
|
|
- this.form.other.push(...fileArray); // 将解析出来的值 push 到 this.form.other
|
|
|
- // 将文件列表赋值给 otherList，生成默认文件名
|
|
|
- this.otherList = fileArray.map((url, index) => ({
|
|
|
- name: `文件${index + 1}`, // 生成文件名
|
|
|
- url: url, // 文件的 URL
|
|
|
- status: 'success' // 设置状态为 success
|
|
|
- }));
|
|
|
-
|
|
|
- //获取所有网站列表
|
|
|
- //this.getWebsiteList(res.data.sszq);
|
|
|
-
|
|
|
-
|
|
|
- })
|
|
|
+ const validateIdcard = (rule, value, callback) => {
|
|
|
+ const idCardRegex = /^(?:\d{15}|\d{18}|\d{17}[\dXx])$/; // 正则表达式验证身份证号
|
|
|
+ if (!value || value.trim() === "") {
|
|
|
+ callback(new Error('该项不能为空！'));
|
|
|
+ } else if (!idCardRegex.test(value.trim())) {
|
|
|
+ callback(new Error('请输入有效的身份证号')); // 更新错误信息
|
|
|
+ } else {
|
|
|
+ console.log("身份证号验证通过！");
|
|
|
+ self.extractBirthdayFromIdcard();
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ options_arr: [],
|
|
|
+ props_1: { multiple: true },//下拉多选
|
|
|
+ formLabelWidth: "120px",
|
|
|
+ editId: "",
|
|
|
+ uploadFileUrl: URL.baseUrl + "/public/uploadFile",//获得上传地址
|
|
|
+ headers: {},
|
|
|
+ website_tag_params: {//xx
|
|
|
+ keyword: "",//网站名称查询
|
|
|
+ website_column_id: [],//使用网系id查询
|
|
|
+ city_id: [],//使用城市id查询
|
|
|
+
|
|
|
+ page: 1,//当前是第几页
|
|
|
+ pageSize: 666666,//一共多少条
|
|
|
+ name: "",
|
|
|
+ },
|
|
|
+ form: {
|
|
|
+ // websiteTag_arr_id:[], //站点标识下拉id onlyxx
|
|
|
+ websiteTag_arr_id: [], //站点标识下拉id only
|
|
|
+ websiteTag_reg: "",
|
|
|
+ sszq: [], //站点标识下拉id
|
|
|
+ type_id: 4,//调研员
|
|
|
+ role_id: "",//角色id
|
|
|
+ user_name: "",//登录账号
|
|
|
+ password: "",//密码
|
|
|
+ confirm_password: "",//确认密码
|
|
|
+ number: "",//调研员编号
|
|
|
+ real_name: "",//真实姓名
|
|
|
+ avatar: "",//照片
|
|
|
+ id_card: "",//身份证号
|
|
|
+ birthday: "",//出生年月
|
|
|
+ gender: "1",//性别
|
|
|
+ mobile: "",//手机号
|
|
|
+ native_place_arr_id: [],//籍贯
|
|
|
+ city_arr_id: [],//工作区域
|
|
|
+ address_arr_id: [],//详细地址
|
|
|
+ address: "",//详细地址门牌号
|
|
|
+ from_time: "",//有效期开始时间
|
|
|
+ to_time: "",//有效期结束时间
|
|
|
+ long_time: 0,//是否为长期 //长期1：长期 0：非长期
|
|
|
+ qq: "",//QQ
|
|
|
+ email: "",//电子邮箱
|
|
|
+ other: [],//相关资料
|
|
|
+ remark: "",//提示词
|
|
|
+ zip_code: "",//邮编
|
|
|
+ //sszq: [],//所属网站
|
|
|
+ },
|
|
|
+ timeList: [],//时间段
|
|
|
+ otherList: [],//相关资料列表
|
|
|
+ role_idArr: [],//角色id池
|
|
|
+ isNational: 0,//是否为全国
|
|
|
+ //网站列表
|
|
|
+ webSiteList: [],
|
|
|
+ //上传照片
|
|
|
+ photoUrl: '',
|
|
|
+ hovering: false, // 鼠标悬浮状态 悬浮时显示删除
|
|
|
+ //密码验证
|
|
|
+ capsTooltip1: false,
|
|
|
+ capsTooltip2: false,
|
|
|
+ passwordType1: 'password',
|
|
|
+ passwordType2: 'password',
|
|
|
+ //配置from表单验证规则
|
|
|
+ loginRules: {
|
|
|
+ //站点标识xx
|
|
|
+ websiteTag_arr_id: [{ type: 'array', required: true, trigger: 'blur', validator: validateArray }],
|
|
|
+ //1.角色id
|
|
|
+ role_id: [{ required: true, trigger: 'blur', validator: validateArray }],
|
|
|
+ //2.登录账号
|
|
|
+ user_name: [{ required: true, trigger: 'blur', validator: validatePhone }],
|
|
|
+ //3.密码和确认密码
|
|
|
+ password: [{ required: true, trigger: 'blur', validator: validatePassword }],
|
|
|
+ confirm_password: [{ required: true, trigger: 'blur', validator: validatePassword }],
|
|
|
+ //4.调研员编号
|
|
|
+ number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
+ //5.真实姓名
|
|
|
+ real_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
+ //6.手机号
|
|
|
+ mobile: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
+ //7.身份证号
|
|
|
+ id_card: [{ required: true, trigger: 'blur', validator: validateIdcard }],
|
|
|
+ //8.性别
|
|
|
+ gender: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
+ //9.手机号
|
|
|
+ mobile: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
+ //10.工作区域
|
|
|
+ city_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
|
|
|
+ //11.照片
|
|
|
+ avatar: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
+ //12.出生年月
|
|
|
+ birthday: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
+ //13.有效期
|
|
|
+ timeList: [{ required: true, trigger: 'blur', validator: validateTimeTo }],
|
|
|
+ //14.网站选择
|
|
|
+ sszq: [{ required: true, trigger: 'blur', validator: validateArray }]
|
|
|
+ },
|
|
|
+ //时间跨度
|
|
|
+ pickerOptions: {
|
|
|
+ selectableRange: '1900-01-01 to 2100-12-31', // 允许选择的日期范围
|
|
|
+ // disabledDate(time) {
|
|
|
+ // return time.getTime() < Date.now() - 86400000; // 禁用今天之前的日期
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
- //修改用户
|
|
|
- editData() {
|
|
|
- //当有效期为长期的时候，去掉from_time和to_time字段
|
|
|
- if (this.form.long_time == 0) {
|
|
|
- this.form.from_time = formatLocalDate(this.timeList[0]);
|
|
|
- this.form.to_time = formatLocalDate(this.timeList[1]);
|
|
|
- } else {
|
|
|
- // this.form.from_time = "";
|
|
|
- // this.form.to_time = "";
|
|
|
- delete this.form.from_time;
|
|
|
- delete this.form.to_time;
|
|
|
- }
|
|
|
- this.$refs.form.validate(valid => {
|
|
|
- if (valid) {
|
|
|
- //1.验证用户是否存在
|
|
|
- this.$store.dispatch('userMember/verifyUserInfo', { id: this.editId, user_name: this.form.user_name }).then(res => {
|
|
|
- if (res.code == 0) {
|
|
|
- console.log(this.form);
|
|
|
- if (!Array.isArray(this.form.address_arr_id)) {
|
|
|
- this.form.address_arr_id = JSON.parse(this.form.address_arr_id);
|
|
|
- }
|
|
|
- if (!Array.isArray(this.form.native_place_arr_id)) {
|
|
|
- this.form.native_place_arr_id = JSON.parse(this.form.native_place_arr_id);
|
|
|
- }
|
|
|
- if (!Array.isArray(this.form.city_arr_id)) {
|
|
|
- this.form.city_arr_id = JSON.parse(this.form.address_arr_id);
|
|
|
- }
|
|
|
- //this.form.address_arr_id = JSON.parse(this.form.address_arr_id);
|
|
|
- //this.form.native_place_arr_id = JSON.parse(this.form.native_place_arr_id);
|
|
|
- //this.form.city_arr_id = JSON.parse(this.form.address_arr_id);
|
|
|
-
|
|
|
- //数组转换为数字
|
|
|
- if (typeof (this.form.sszq) == 'number') {
|
|
|
- this.form.sszq = this.form.sszq
|
|
|
- } else {
|
|
|
- this.form.sszq = this.form.sszq[0]
|
|
|
- }
|
|
|
-
|
|
|
- //2.设置修改的用户id
|
|
|
- this.form.id = this.editId;
|
|
|
- //判断用户工作区域是否为全国
|
|
|
- if (this.isNational == 1) {
|
|
|
- this.form.city_arr_id = [0];
|
|
|
- }
|
|
|
- //3.提交用户修改
|
|
|
- //如果code为0表示用户不存在，提交表单
|
|
|
- this.$store.dispatch('userMember/updateUser', this.form).then(res => {
|
|
|
- console.log(res);
|
|
|
+ watch: {
|
|
|
+ // 同时监听多个属性
|
|
|
+ '$data': {
|
|
|
+ handler() {
|
|
|
+ this.form.user_name = "GR" + this.form.mobile.slice(-5) + this.form.id_card.slice(-5);
|
|
|
+ },
|
|
|
+ deep: true, // 深度监听对象变化
|
|
|
+ immediate: true // 初始化时立即执行一次
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //1.表单收集 start ------------------------------------------------------------>
|
|
|
+ //1.1切换密码框的显示与隐藏
|
|
|
+ showPwd(num) {
|
|
|
+ const passwordTypeKey = 'passwordType' + num; //动态生成 passwordType 的键
|
|
|
+ const passwordRefKey = 'password' + num; //动态生成 password 的引用
|
|
|
+ // 切换密码类型
|
|
|
+ if (this[passwordTypeKey] === 'password') {
|
|
|
+ this[passwordTypeKey] = ''; //显示密码
|
|
|
+ } else {
|
|
|
+ this[passwordTypeKey] = 'password'; //隐藏密码
|
|
|
+ }
|
|
|
+ // 使用 $nextTick 聚焦到对应的密码输入框
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs[passwordRefKey].focus(); //聚焦到对应的密码输入框
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //1.2获得角色列表池
|
|
|
+ getRoleList() {
|
|
|
+ let data = {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 100
|
|
|
+ }
|
|
|
+ this.$store.dispatch('userRole/roleList', data).then(res => {
|
|
|
+ this.role_idArr = res.data.rows.map(item => ({
|
|
|
+ value: item.id,
|
|
|
+ label: item.role_name
|
|
|
+ }));
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message({
|
|
|
+ type: 'warning',
|
|
|
+ message: '网络错误，请重试！'
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //1.3更新工作区域
|
|
|
+ update_city_arr_id(value) {
|
|
|
+ console.log("工作区域ID已更新:", value);
|
|
|
+ this.form.city_arr_id = value;
|
|
|
+
|
|
|
+ console.log(this.form.city_arr_id);
|
|
|
+ },
|
|
|
+ //1.4更新籍贯
|
|
|
+ update_native_place_arr_id(value) {
|
|
|
+ console.log("籍贯ID已更新:", value);
|
|
|
+ this.form.native_place_arr_id = value;
|
|
|
+ },
|
|
|
+ //1.5更新详细地址
|
|
|
+ update_address_arr_id(value) {
|
|
|
+ console.log("详细地址ID已更新:", value);
|
|
|
+ this.form.address_arr_id = value;
|
|
|
+ },
|
|
|
+ //1.5重置表单
|
|
|
+ clearData() {
|
|
|
+
|
|
|
+ },
|
|
|
+ //表单收集 end ------------------------------------------------------------>
|
|
|
+ //2.提交表单 start ------------------------------------------------------------>
|
|
|
+ //2.1 上传图片操作
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ const isJPG = file.type === 'image/jpeg';
|
|
|
+ const isPNG = file.type === 'image/png';
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+
|
|
|
+ if (!isJPG && !isPNG) {
|
|
|
+ this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传头像图片大小不能超过 2MB!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', file);
|
|
|
+ this.$store.dispatch('pool/uploadFile', formData).then(res => {
|
|
|
+ this.photoUrl = res.data.imgUrl;//显示缩略图
|
|
|
+ this.form.avatar = res.data.imgUrl;//提供表单地址
|
|
|
+ console.log(res.data.imgUrl)
|
|
|
+ }).catch(() => {
|
|
|
this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '用户添加成功！'
|
|
|
+ type: 'warning',
|
|
|
+ message: '网络错误，请重试！'
|
|
|
});
|
|
|
- this.goList();
|
|
|
- })
|
|
|
- } else if (res.code == 200) {
|
|
|
- //如果code==200 表示用户存在，阻止进一步提交
|
|
|
- this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '该账号已被注册，请更换其他账号！'
|
|
|
- });
|
|
|
+ })
|
|
|
+ // 阻止默认的上传行为
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ //2.2 删除图片
|
|
|
+ handleDelete() {
|
|
|
+ this.photoUrl = ''; // 清空图片 URL
|
|
|
+ },
|
|
|
+ //2.3 多文件上传
|
|
|
+ handleExceed(files, fileList) {
|
|
|
+ this.$message.warning(`当前限制选择 30 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
|
|
+ },
|
|
|
+ beforeRemove(file, fileList) {
|
|
|
+ console.log('file, fileList', file, fileList);
|
|
|
+ for (let item of fileList) {
|
|
|
+ this.form.other = this.form.other.filter(item => item !== file.url);
|
|
|
+ }
|
|
|
+ // return this.$confirm(`确定移除 ${file.name}?`);
|
|
|
+ },
|
|
|
+ //获取token
|
|
|
+ getTokenFromCookie() {
|
|
|
+ const name = "Admin-Token=";
|
|
|
+ const decodedCookie = decodeURIComponent(document.cookie);
|
|
|
+ const cookieArray = decodedCookie.split(';');
|
|
|
+ for (let i = 0; i < cookieArray.length; i++) {
|
|
|
+ let cookie = cookieArray[i].trim();
|
|
|
+ if (cookie.indexOf(name) === 0) {
|
|
|
+ return cookie.substring(name.length, cookie.length); // 返回 token
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return ""; // 如果没有找到 token，返回空字符串
|
|
|
+ },
|
|
|
+ //设置token
|
|
|
+ setHeaders() {
|
|
|
+ this.token = this.getTokenFromCookie(); // 从 cookie 中获取 token
|
|
|
+ this.headers = { token: this.token }; // 设置 headers
|
|
|
+ console.log(this.headers); // 打印 headers
|
|
|
+ },
|
|
|
+ //上传成功以后
|
|
|
+ handleUploadSuccess(response) {
|
|
|
+ this.form.other.push(response.data.imgUrl)
|
|
|
+ console.log('上传成功:', response);
|
|
|
+ console.log(this.form.other);
|
|
|
+ },
|
|
|
+ //只能上传图片
|
|
|
+ beforeAvatarUpload1(file) {
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传图片大小不能超过 2MB!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //提交表单
|
|
|
+ addData() {
|
|
|
+ console.log(this.form)
|
|
|
+ //2.开始验证
|
|
|
+ this.$refs.form.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ console.log(this.timeList)
|
|
|
+ //1.格式化时间戳
|
|
|
+ this.form.birthday = formatLocalDate(this.form.birthday);
|
|
|
+ if (this.form.long_time == 0) {
|
|
|
+ this.form.from_time = formatLocalDate(this.timeList[0]);
|
|
|
+ this.form.to_time = formatLocalDate(this.timeList[1]);
|
|
|
+ } else {
|
|
|
+ // this.form.from_time = "";
|
|
|
+ // this.form.to_time = "";
|
|
|
+ delete this.form.from_time;
|
|
|
+ delete this.form.to_time;
|
|
|
+ }
|
|
|
+ //判断用户工作区域是否为全国
|
|
|
+ if (this.isNational == 1) {
|
|
|
+ this.form.city_arr_id = [0];
|
|
|
+ }
|
|
|
+ //如果没选择日期，把日期改为空字符串
|
|
|
+ if (this.form.birthday == "NaN-NaN-NaN NaN:NaN:NaN") {
|
|
|
+ this.form.birthday = "";
|
|
|
+ }
|
|
|
+ if (this.form.from_time == "NaN-NaN-NaN NaN:NaN:NaN") {
|
|
|
+ this.form.from_time = "";
|
|
|
+ }
|
|
|
+ if (this.form.to_time == "NaN-NaN-NaN NaN:NaN:NaN") {
|
|
|
+ this.form.to_time = "";
|
|
|
+ }
|
|
|
+ //3.验证用户是否已经存在
|
|
|
+ this.$store.dispatch('userMember/verifyUserInfo', { user_name: this.form.user_name }).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ //如果code为0表示用户不存在，提交表单
|
|
|
+ this.form.sszq = this.form.sszq[0]
|
|
|
+ console.log("this.form.sszq===", this.form.sszq)
|
|
|
+ console.log("this.form1===", this.form)
|
|
|
+ this.$store.dispatch('userMember/createUser', this.form).then(res => {
|
|
|
+ console.log("this.form222===res", res)
|
|
|
+ if (res.code == 200) {
|
|
|
+ // console.log(res);
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '用户添加成功！'
|
|
|
+ });
|
|
|
+ this.goList();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: 'warning',
|
|
|
+ message: res.message
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (res.code == 200) {
|
|
|
+ //如果code==200 表示用户存在，阻止进一步提交
|
|
|
+ this.$message({
|
|
|
+ type: 'warning',
|
|
|
+ message: '该账号已被注册，请更换其他账号！'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message({
|
|
|
+ type: 'warning',
|
|
|
+ message: '网络错误，请重试！'
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //提交表单 start ------------------------------------------------------------>
|
|
|
+ //3.编辑表单 start ------------------------------------------------------------>
|
|
|
+ //获得网站列表
|
|
|
+ getWebsiteList(userWebList) {
|
|
|
+ this.$store.dispatch('pool/getWebList', { page: 1, pageSize: 1000 }).then(res => {
|
|
|
+ if (res.code != 200) {
|
|
|
+ this.$message.error(res.message)
|
|
|
+ } else {
|
|
|
+ for (let item of res.data.rows) {
|
|
|
+ let data = {
|
|
|
+ value: item.id,
|
|
|
+ label: item.website_name
|
|
|
+ }
|
|
|
+ this.webSiteList.push(data)
|
|
|
+ }
|
|
|
+ // //如果有数据可以回显
|
|
|
+ // if (userWebList) {
|
|
|
+ // console.log("显示编辑用户的所属网站！")
|
|
|
+ // this.form.sszq = userWebList;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获得用户信息
|
|
|
+ getUserInfo() {
|
|
|
+ // console.log("回显数据===");
|
|
|
+ this.$store.dispatch('userMember/getUser', { id: this.editId }).then(res => {
|
|
|
+ // 站点标识
|
|
|
+ this.form.sszq = Number(res.data.sszq);
|
|
|
+ this.form.type_id = res.data.type_id;
|
|
|
+ this.form.user_name = res.data.user_name;
|
|
|
+ this.form.role_id = res.data.role_id;
|
|
|
+ this.form.real_name = res.data.real_name;
|
|
|
+ this.form.mobile = res.data.mobile;
|
|
|
+ this.form.number = res.data.number;
|
|
|
+ this.photoUrl = res.data.avatar;
|
|
|
+ this.form.avatar = res.data.avatar;
|
|
|
+ this.form.id_card = res.data.id_card;
|
|
|
+ this.form.birthday = res.data.birthday;
|
|
|
+ this.form.address_arr_id = res.data.address_arr_id;
|
|
|
+ //判断用户工作区域是否为全国
|
|
|
+ if (typeof res.data.city_arr_id === 'string') {
|
|
|
+ this.form.city_arr_id = JSON.parse(res.data.city_arr_id);
|
|
|
+ }
|
|
|
+ console.log(this.form.city_arr_id);
|
|
|
+ if (this.form.city_arr_id[0] == 0) {
|
|
|
+ this.isNational = 1
|
|
|
+ }
|
|
|
+ //还原有效期
|
|
|
+ if (res.data.long_time == 0) {
|
|
|
+ this.timeList = [
|
|
|
+ res.data.from_time,
|
|
|
+ res.data.to_time
|
|
|
+ ]
|
|
|
+ this.form.from_time = res.data.from_time;
|
|
|
+ this.form.to_time = res.data.to_time;
|
|
|
+ this.form.long_time = 0;
|
|
|
+ } else {
|
|
|
+ this.form.from_time = "";
|
|
|
+ this.form.to_time = "";
|
|
|
+ this.form.long_time = 1;
|
|
|
+ }
|
|
|
+ this.form.qq = res.data.qq;
|
|
|
+ this.form.email = res.data.email;
|
|
|
+ this.form.address = res.data.address;
|
|
|
+ this.form.zip_code = res.data.zip_code;
|
|
|
+ this.form.remark = res.data.remark;
|
|
|
+
|
|
|
+ this.form.native_place_arr_id = res.data.native_place_arr_id;
|
|
|
+ // 处理文件列表
|
|
|
+ const fileArrayString = res.data.other; // 假设这是一个字符串格式的数组
|
|
|
+ const fileArray = JSON.parse(fileArrayString); // 解析为数组
|
|
|
+ this.form.other.push(...fileArray); // 将解析出来的值 push 到 this.form.other
|
|
|
+ // 将文件列表赋值给 otherList，生成默认文件名
|
|
|
+ this.otherList = fileArray.map((url, index) => ({
|
|
|
+ name: `文件${index + 1}`, // 生成文件名
|
|
|
+ url: url, // 文件的 URL
|
|
|
+ status: 'success' // 设置状态为 success
|
|
|
+ }));
|
|
|
+ //获取所有网站列表
|
|
|
+ //this.getWebsiteList(res.data.sszq);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //修改用户
|
|
|
+ editData() {
|
|
|
+ //当有效期为长期的时候，去掉from_time和to_time字段
|
|
|
+ if (this.form.long_time == 0) {
|
|
|
+ this.form.from_time = formatLocalDate(this.timeList[0]);
|
|
|
+ this.form.to_time = formatLocalDate(this.timeList[1]);
|
|
|
+ } else {
|
|
|
+ // this.form.from_time = "";
|
|
|
+ // this.form.to_time = "";
|
|
|
+ delete this.form.from_time;
|
|
|
+ delete this.form.to_time;
|
|
|
}
|
|
|
- }).catch(error => {
|
|
|
- this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '网络错误，请重试！'
|
|
|
+ this.$refs.form.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ //1.验证用户是否存在
|
|
|
+ this.$store.dispatch('userMember/verifyUserInfo', { id: this.editId, user_name: this.form.user_name }).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ console.log(this.form);
|
|
|
+ if (!Array.isArray(this.form.address_arr_id)) {
|
|
|
+ this.form.address_arr_id = JSON.parse(this.form.address_arr_id);
|
|
|
+ }
|
|
|
+ if (!Array.isArray(this.form.native_place_arr_id)) {
|
|
|
+ this.form.native_place_arr_id = JSON.parse(this.form.native_place_arr_id);
|
|
|
+ }
|
|
|
+ if (!Array.isArray(this.form.city_arr_id)) {
|
|
|
+ this.form.city_arr_id = JSON.parse(this.form.address_arr_id);
|
|
|
+ }
|
|
|
+ //this.form.address_arr_id = JSON.parse(this.form.address_arr_id);
|
|
|
+ //this.form.native_place_arr_id = JSON.parse(this.form.native_place_arr_id);
|
|
|
+ //this.form.city_arr_id = JSON.parse(this.form.address_arr_id);
|
|
|
+ //数组转换为数字
|
|
|
+ if (typeof (this.form.sszq) == 'number') {
|
|
|
+ this.form.sszq = this.form.sszq
|
|
|
+ } else {
|
|
|
+ this.form.sszq = this.form.sszq[0]
|
|
|
+ }
|
|
|
+ //2.设置修改的用户id
|
|
|
+ this.form.id = this.editId;
|
|
|
+ //判断用户工作区域是否为全国
|
|
|
+ if (this.isNational == 1) {
|
|
|
+ this.form.city_arr_id = [0];
|
|
|
+ }
|
|
|
+ //3.提交用户修改
|
|
|
+ //如果code为0表示用户不存在，提交表单
|
|
|
+ this.$store.dispatch('userMember/updateUser', this.form).then(res => {
|
|
|
+ console.log(res);
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '用户添加成功！'
|
|
|
+ });
|
|
|
+ this.goList();
|
|
|
+ })
|
|
|
+ } else if (res.code == 200) {
|
|
|
+ //如果code==200 表示用户存在，阻止进一步提交
|
|
|
+ this.$message({
|
|
|
+ type: 'warning',
|
|
|
+ message: '该账号已被注册，请更换其他账号！'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message({
|
|
|
+ type: 'warning',
|
|
|
+ message: '网络错误，请重试！'
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //重置密码
|
|
|
+ resetPassword() {
|
|
|
+ let password = Math.random().toString(36).slice(-6); // 随机生成6个字母的组合
|
|
|
+ this.$store.dispatch('userMember/resetPassword', { id: this.editId, password: password }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '密码重置为：' + password
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'warning',
|
|
|
+ message: '网络错误，请重试！'
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //编辑表单 end ------------------------------------------------------------>
|
|
|
+ goList() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/userList',
|
|
|
});
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
+ },
|
|
|
+ //提取身份证号中的出生日期
|
|
|
+ extractBirthdayFromIdcard() {
|
|
|
+ let idCard = this.form.id_card;
|
|
|
+ // 1. 取出身份证中的生日部分，例如 "20250129"
|
|
|
+ let birthStr = idCard.substring(6, 14);
|
|
|
+ // 2. 截取年、月、日
|
|
|
+ let year = birthStr.substring(0, 4); // 2025
|
|
|
+ let month = birthStr.substring(4, 6); // 01
|
|
|
+ let day = birthStr.substring(6, 8); // 29
|
|
|
+ // 3. 拼接成需要的格式 "YYYY-MM-DD 00:00:00"
|
|
|
+ let birthDateTime = `${year}-${month}-${day} 00:00:00`;
|
|
|
+ this.form.birthday = birthDateTime;
|
|
|
+ },
|
|
|
+ get_website_tag_arr_fun() { //得到站点标识所有内容xx
|
|
|
+ this.$store.dispatch('pool/get_website_tag_arr_actions', this.website_tag_params).then(res => {
|
|
|
+ // console.log("res.data.listres.data.list",res.data.list)
|
|
|
+ res.data.list.forEach((per_obj) => {
|
|
|
+ let new_per = {
|
|
|
+ label: per_obj.name,
|
|
|
+ value: per_obj.id,
|
|
|
+ }
|
|
|
+ this.options_arr.push(new_per)
|
|
|
+ })
|
|
|
+ // console.log("get_website_tag_arr_funget_website_tag_arr_fun")
|
|
|
+ // console.log("get_website_tag_arr_funget_website_tag_arr_fun",this.options_arr)
|
|
|
+ })
|
|
|
+ },
|
|
|
},
|
|
|
- //重置密码
|
|
|
- resetPassword() {
|
|
|
- let password = Math.random().toString(36).slice(-6); // 随机生成6个字母的组合
|
|
|
-
|
|
|
- this.$store.dispatch('userMember/resetPassword', { id: this.editId, password: password }).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '密码重置为：' + password
|
|
|
- });
|
|
|
+ mounted() {
|
|
|
+ this.get_website_tag_arr_fun()//得到站点标识所有内容xx
|
|
|
+ // console.log("this.get_website_tag_arr_fun()==xx",this.get_website_tag_arr_fun())
|
|
|
+ this.getRoleList();
|
|
|
+ //判断是新建还是回显
|
|
|
+ if (this.$route.query.id != undefined) {
|
|
|
+ this.editId = this.$route.query.id;
|
|
|
+ console.log("编辑用户！")
|
|
|
+ this.getUserInfo();
|
|
|
+ } else {
|
|
|
+ console.log("添加用户！")
|
|
|
+ //获取所有网站列表
|
|
|
+ this.getWebsiteList();
|
|
|
}
|
|
|
- }).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '网络错误，请重试！'
|
|
|
- });
|
|
|
- })
|
|
|
- },
|
|
|
- //编辑表单 end ------------------------------------------------------------>
|
|
|
- goList() {
|
|
|
- this.$router.push({
|
|
|
- path: '/userList',
|
|
|
- });
|
|
|
- },
|
|
|
- //提取身份证号中的出生日期
|
|
|
- extractBirthdayFromIdcard() {
|
|
|
- let idCard = this.form.id_card;
|
|
|
- // 1. 取出身份证中的生日部分，例如 "20250129"
|
|
|
- let birthStr = idCard.substring(6, 14);
|
|
|
- // 2. 截取年、月、日
|
|
|
- let year = birthStr.substring(0, 4); // 2025
|
|
|
- let month = birthStr.substring(4, 6); // 01
|
|
|
- let day = birthStr.substring(6, 8); // 29
|
|
|
- // 3. 拼接成需要的格式 "YYYY-MM-DD 00:00:00"
|
|
|
- let birthDateTime = `${year}-${month}-${day} 00:00:00`;
|
|
|
- this.form.birthday = birthDateTime;
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- get_website_tag_arr_fun() { //得到站点标识所有内容xx
|
|
|
- this.$store.dispatch('pool/get_website_tag_arr_actions', this.website_tag_params).then(res => {
|
|
|
- // console.log("res.data.listres.data.list",res.data.list)
|
|
|
-
|
|
|
- res.data.list.forEach((per_obj) => {
|
|
|
-
|
|
|
- let new_per = {
|
|
|
- label: per_obj.name,
|
|
|
- value: per_obj.id,
|
|
|
- }
|
|
|
-
|
|
|
- this.options_arr.push(new_per)
|
|
|
-
|
|
|
- })
|
|
|
- // console.log("get_website_tag_arr_funget_website_tag_arr_fun")
|
|
|
- // console.log("get_website_tag_arr_funget_website_tag_arr_fun",this.options_arr)
|
|
|
- })
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- mounted() {
|
|
|
-
|
|
|
- this.get_website_tag_arr_fun()//得到站点标识所有内容xx
|
|
|
-
|
|
|
- // console.log("this.get_website_tag_arr_fun()==xx",this.get_website_tag_arr_fun())
|
|
|
-
|
|
|
- this.getRoleList();
|
|
|
- //判断是新建还是回显
|
|
|
- if (this.$route.query.id != undefined) {
|
|
|
- this.editId = this.$route.query.id;
|
|
|
- console.log("编辑用户！")
|
|
|
- this.getUserInfo();
|
|
|
- } else {
|
|
|
- console.log("添加用户！")
|
|
|
- //获取所有网站列表
|
|
|
- this.getWebsiteList();
|
|
|
+ //设置token
|
|
|
+ this.setHeaders(); // 在组件挂载时设置 headers
|
|
|
}
|
|
|
- //设置token
|
|
|
- this.setHeaders(); // 在组件挂载时设置 headers
|
|
|
- }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
.PasswordBox {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .el-form-item {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .PasswordTitle {
|
|
|
- width: 120px;
|
|
|
- text-align: right;
|
|
|
- margin-right: 10px;
|
|
|
- margin-bottom: 22px;
|
|
|
- }
|
|
|
-
|
|
|
- .PasswordBody {
|
|
|
- flex: 1;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .show-pwd {
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
+ .el-form-item {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .PasswordTitle {
|
|
|
+ width: 120px;
|
|
|
+ text-align: right;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 22px;
|
|
|
+ }
|
|
|
+ .PasswordBody {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .show-pwd {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
.longTimeCheckbox {
|
|
|
- margin-left: 10px;
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
-
|
|
|
//执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
|
|
|
::v-deep .custom-form-item>.el-form-item__label {
|
|
|
- line-height: 140px !important;
|
|
|
+ line-height: 140px !important;
|
|
|
}
|
|
|
-
|
|
|
::v-deep .custom-textarea .el-textarea__inner {
|
|
|
- resize: none;
|
|
|
- /* 禁止用户拖拽调整大小 */
|
|
|
+ resize: none;
|
|
|
+ /* 禁止用户拖拽调整大小 */
|
|
|
}
|
|
|
-
|
|
|
::v-deep .custom-align-right .el-form-item__label {
|
|
|
- text-align: right;
|
|
|
- /* 设置标签文字右对齐 */
|
|
|
+ text-align: right;
|
|
|
+ /* 设置标签文字右对齐 */
|
|
|
}
|
|
|
-
|
|
|
::v-deep .el-select {
|
|
|
- width: 100%;
|
|
|
- /* 禁止用户拖拽调整大小 */
|
|
|
+ width: 100%;
|
|
|
+ /* 禁止用户拖拽调整大小 */
|
|
|
}
|
|
|
-
|
|
|
::v-deep .el-upload-list__item {
|
|
|
- width: 15%;
|
|
|
- float: left;
|
|
|
- margin-right: 20px;
|
|
|
+ width: 15%;
|
|
|
+ float: left;
|
|
|
+ margin-right: 20px;
|
|
|
}
|
|
|
-
|
|
|
-//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>
|
|
|
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
|
|
|
+</style>
|
