admin_home/src/views/role/components/userInvestigate.vue

<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="user_name" 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>
                  </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="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="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="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> -->
        </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>
// 引入公用样式
import '@/styles/global.less';
// 引入baseUrl
import URL from '@/utils/baseUrl';
//城市级联选择器
import CityCascader from './CityCascader';
//格式化时间
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; // 禁用今天之前的日期
        // },
      },
    };
  },
  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: '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.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: '该账号已被注册，请更换其他账号！'
              });
            }
          }).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;
      }
      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)
      })

    },


  },





  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
  }
};
</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;
  }
}

.longTimeCheckbox {
  margin-left: 10px;
}

//执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
::v-deep .custom-form-item>.el-form-item__label {
  line-height: 140px !important;
}

::v-deep .custom-textarea .el-textarea__inner {
  resize: none;
  /* 禁止用户拖拽调整大小 */
}

::v-deep .custom-align-right .el-form-item__label {
  text-align: right;
  /* 设置标签文字右对齐 */
}

::v-deep .el-select {
  width: 100%;
  /* 禁止用户拖拽调整大小 */
}

::v-deep .el-upload-list__item {
  width: 15%;
  float: left;
  margin-right: 20px;
}

//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>