admin_home/src/views/role/components/userPolitician.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="行政区划：" class="custom-align-right" prop="city_arr_id" >
                <CityCascader v-model="form.city_arr_id"    @update-city-id="update_city_arr_id"></CityCascader>
              </el-form-item>

              <!-- {{ typeof  form.department_arr_id  }} {{ typeof form.department_id }} -->
              <el-form-item label="行政职能：" class="custom-align-right" prop="department_arr_id" >
                <el-cascader :key="department_id"  v-model="form.department_arr_id" placeholder="请选择行政职能"
                  popper-class="my_cascader" :props="searchDepartmentData" filterable clearable></el-cascader>
              </el-form-item>
              <!-- {{ form.administrative_unit_id}} -->
              <el-form-item label="行政级别：" :label-width="formLabelWidth" prop="administrative_unit_id" class="custom-align-right">
                <!-- <el-input  v-model="form.business_name"  autocomplete="off" placeholder="请输入企业名称.."></el-input> -->
                <el-radio-group v-model="form.administrative_unit_id">
                <!-- 注意：'checked' 不是 el-radio 的属性，其选中状态由 v-model 自动管理 -->
                <el-radio :label="1">其他</el-radio>
                <el-radio :label="2">局长</el-radio>
                <el-radio :label="3">厅长</el-radio>
                <el-radio :label="4">部长</el-radio>
              </el-radio-group>
              </el-form-item>
              <el-form-item label="单位名称：" :label-width="formLabelWidth" prop="business_name" class="custom-align-right">
                <el-input v-model="form.business_name" autocomplete="off" placeholder="请输入单位名称.."></el-input>
              </el-form-item>
              <!-- {{ form.address_arr_id }} -->
              <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-width="formLabelWidth"   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="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="position" class="custom-align-right">
                <el-input v-model="form.position" autocomplete="off" placeholder="请输入负责人职务.."></el-input>
              </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="legal_person_real_name" class="custom-align-right">
                <el-input v-model="form.legal_person_real_name" autocomplete="off" placeholder="请输入法人姓名.."></el-input>
              </el-form-item>
              <el-form-item label="法人电话：" :label-width="formLabelWidth" prop="legal_person_mobile" class="custom-align-right">
                <el-input v-model="form.legal_person_mobile" autocomplete="off" placeholder="请输入法人联系电话.."></el-input>
              </el-form-item>
    
              <el-form-item label="法人身份证：" :label-width="formLabelWidth" prop="legal_person_id_card" class="custom-align-right">
                <el-input v-model="form.legal_person_id_card" autocomplete="off" placeholder="请输入法人身份证号.."></el-input>
              </el-form-item> -->
    
              <el-form-item label="有效期：" :label-width="formLabelWidth" prop="" 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>
    
              <!-- {{ form.websiteTag_arr_id }} --> 
    
              <!-- <el-form-item label="站点标识：" :label-width="formLabelWidth" prop="city_arr_id" class="custom-align-right"> -->
                <el-form-item label="站点标识：" :label-width="formLabelWidth" prop="websiteTag_arr_id" class="custom-align-right">
                <!-- 级联选择器 xx-->
                <!-- websiteTag_ -->
                <!-- <el-cascader v-model="form.website_column_arr_id" :props="props_1" :options="website_column_arr" filterable clearable ></el-cascader> -->
                <el-cascader v-model="form.websiteTag_arr_id" :options="options_arr" filterable  ></el-cascader>
     
              </el-form-item>
              <el-form-item label="传真：" :label-width="formLabelWidth" prop="fax" class="custom-align-right">
                <el-input v-model="form.fax" 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="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-upload
                  class="upload-demo"
                  :action="uploadFileUrl"
                  :headers="headers"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :on-success="handleUploadSuccess"
                  multiple
                  :limit="30"
                  :on-exceed="handleExceed"
                  :file-list="otherList">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">每张图片最大1MB，最多上传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>
            </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-else>修改</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';
    
    
    export default {
      components: {
        CityCascader, //城市级联选择器
      },
      
      data() {
        // 配置验证规则：用于表单验证
        const validatePassword = (rule, value, callback) => {
          if (value.length < 6) {
            callback(new Error('密码不能低于6位！'))
          } else {
            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 validateNumber = (rule, value, callback) => {
          console.log(value, typeof value)
          console.log(value >=0)
          if (value < 0) {
            callback(new Error('该项不能为空1'))
          } else {
            callback()
          }
        }
        let self = this;
        return {
          //xx
          // options_arr:[ { "label": "农网", "value": 1, "pid": 0, "sort": 1, "remark": "农网栏目信息", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 09:28:19", "children": [ { "label": "核心网站(行星)", "value": 3, "pid": 1, "sort": 1, "remark": "核心网站", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:31:26" }, { "label": "重点网系(卫星)", "value": 4, "pid": 1, "sort": 1, "remark": "重点网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:06" }, { "label": "垂直网系(卫星)", "value": 5, "pid": 1, "sort": 1, "remark": "垂直网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:43" }, { "label": "频道网系(卫星)", "value": 6, "pid": 1, "sort": 1, "remark": "频道网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:19" }, { "label": "地方网系(卫星)", "value": 7, "pid": 1, "sort": 1, "remark": "地方网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:44" } ] } ],
          options_arr:[],
    
          formLabelWidth:"120px",
          editId:"",
          uploadFileUrl:URL.testUrl+"/public/uploadFile",//获得上传地址
          headers: {},
    
    
          website_tag_params:{//xx
                keyword:"",//网站名称查询
                website_column_id:[],//使用网系id查询
                city_id:[],//使用城市id查询
    
                page:1,//当前是第几页
                pageSize:666666,//一共多少条
                name:"",
           },
    
    
    
          form:{
            type_id:2,//政务会员
            role_id:"",//角色id 
            user_name:"",//登录账号
            password:"",//密码
            confirm_password:"",//确认密码
            real_name:"",//真实姓名
            id_card:"",//身份证号
            mobile:"",//手机号
            address_arr_id:[],//详细地址
            city_arr_id: [],//工作区域
            city_id:"",//工作区域id
            from_time:"",//有效期开始时间
            to_time:"",//有效期结束时间
            long_time:0,//是否为长期 //长期1：长期 0：非长期
            qq:"",//QQ
            email:"",//电子邮箱
            other:[],//相关资料
            remark:"",//提示词
            administrative_unit_arr_id:[0],//行政级别
            //企业相关字段
            fax:"",//传真
            business_name:"",//企业名称
            position:"",//负责人职务
            legal_person_real_name:"",//法人姓名
            legal_person_mobile:"",//法人手机号
            legal_person_id_card: "",//法人身份证号
            websiteTag_arr_id: 0,//站点标识
            department_arr_id: [],//行政职能部门
            department_id: 0,//部门最后一个数字
            administrative_unit_id: 1,//行政级别
            address: "",//详细地址
            zip_code:"",//邮编
            
          },
          timeList:[],//时间段
          otherList:[],//相关资料列表
          role_idArr:[],//角色id池
          //密码验证
          capsTooltip1: false,
          capsTooltip2: false,
          passwordType1: 'password',
          passwordType2: 'password',
           //行政职能部门
      searchDepartmentKey: 0, //列表缓存key
      searchDepartmentData: {
        checkStrictly: true,
        lazy: true,
        async lazyLoad(node, resolve) {
          const { level, data } = node;
          if (data && data.children && data.children.length !== 0) {
            return resolve(node)
          }
          console.log(level)
          let parentId = level == 0 ? 0 : data.value
          let parames = {
            'pid': parentId
          }
          self.$store.dispatch('pool/getDepartment', parames).then(res => {
            if (res.data) {
              const nodes = res.data.map(item => ({
                value: item.id,
                label: item.name,
                leaf: level >= 3,
                children: []
              }))
              resolve(nodes)
            }
          })
        }
      },

          //配置from表单验证规则
          loginRules: { 
    
            //站点标识xx
            websiteTag_arr_id: [{  required: true, trigger: 'blur', validator: validateArray }],
            //1.角色id
            role_id: [{ required: true, trigger: 'blur', validator: validateArray }],
            //2.登录账号
            user_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
            //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: validateEmpty }],
            //8.性别
            gender: [{ required: true, trigger: 'blur', validator: validateEmpty }],
            //9.手机号
            mobile: [{ required: true, trigger: 'blur', validator: validateEmpty }],
            //10.工作区域
            address_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
            //11.企业名称
            business_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
            //12.负责人职务
            position: [{ required: true, trigger: 'blur', validator: validateEmpty }],
            // //12.法人姓名
            // legal_person_real_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
            // //13.法人电话
            // legal_person_mobile: [{ required: true, trigger: 'blur', validator: validateEmpty }],
            // //14.法人身份证号
            // legal_person_id_card: [{ required: true, trigger: 'blur', validator: validateEmpty }],
            //15.行政级别
            administrative_unit_arr_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
             //行政区划
            city_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
            //行政职能
            department_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
            administrative_unit_id: [{ required: false, trigger: 'blur', validator: validateNumber }],
          },
          //时间跨度
          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_address_arr_id(value){
          console.log("工作区域ID已更新:", value);
          this.form.address_arr_id = value;
        },
        //1.5重置表单
        clearData(){
          
        },
        //1.4更新详细地址
    update_city_arr_id(value) {
      console.log("行政区划ID已更新:", value);
      this.form.city_arr_id = value;
    },
        //表单收集 end ------------------------------------------------------------>
        //2.提交表单 start ------------------------------------------------------------>
        //2.3 多文件上传
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 30 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
          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);
        },
        //提交表单
        addData(){
          //1.格式化时间戳
          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;
          }
          //2.开始验证
          this.$refs.form.validate(valid => {
            if (valid) {
              this.form.sszq = typeof this.form.websiteTag_arr_id == 'object' ? this.form.websiteTag_arr_id[0] : this.form.websiteTag_arr_id;
              delete this.form.websiteTag_arr_id;
              
              this.$store.dispatch('userMember/verifyUserInfo',{user_name:this.form.user_name}).then(res=>{
                if(res.code==0){
                  console.log(this.form);
                  //数组转数字
                   
                  this.form.department_id = this.form.department_arr_id[this.form.department_arr_id.length-1];
                  this.form.department_arr_id = JSON.stringify(this.form.department_arr_id);
                  this.form.city_arr_id = this.form.city_arr_id;
                  if(typeof this.form.address_arr_id == 'string'){
                      this.form.address_arr_id = JSON.parse(this.form.address_arr_id);
                  }
                  // this.form.address_id = this.form.address_arr_id[this.form.address_arr_id.length-1];
                  // this.form.address_arr_id = JSON.stringify(this.form.address_arr_id);
                  //2.设置修改的用户id
                  this.form.id = this.editId;
                  //3.提交用户修改
                  //如果code为0表示用户不存在，提交表单
                  console.log(this.form ,'---------------------1-------');
                  this.$store.dispatch('userMember/createUser',this.form).then(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 ------------------------------------------------------------>
        //获得用户信息
        getUserInfo(){
          this.$store.dispatch('userMember/getUser',{id:this.editId}).then(res=>{
            console.log(res);
            //回显数据
            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.form.avatar = res.data.avatar;
            this.form.id_card = res.data.id_card;
            this.form.fax = res.data.fax;
            this.form.legal_person_id_card = res.data.legal_person_id_card;
            this.form.legal_person_mobile = res.data.legal_person_mobile;
            this.form.legal_person_real_name = res.data.legal_person_real_name;
            this.form.position = res.data.position;
            this.form.business_name = res.data.business_name;
            this.form.websiteTag_arr_id = [parseInt(res.data.sszq)];
            this.form.city_arr_id = JSON.parse( res.data.city_arr_id);
            this.form.department_arr_id = JSON.parse(res.data.department_arr_id);
            this.form.city_id = res.data.city_id;
            this.form.administrative_unit_id = res.data.administrative_unit_id;
            this.form.address = res.data.address;
            this.form.department_id = res.data.department_id;
            //还原有效期
            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.zip_code = res.data.zip_code;
            this.form.remark = res.data.remark;
            this.form.address_arr_id = res.data.address_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
            }));
          }).catch(error=>{
            this.$message({
              type: 'warning',
              message: '网络错误，请重试！'
            });
          })
        },
        //修改用户
        editData(){
          //1.格式化时间戳
          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 = "";
          }
          //2.提交修改的数据
          this.$refs.form.validate(valid => {
            if (valid) {
              this.form.sszq = typeof this.form.websiteTag_arr_id == 'object' ? this.form.websiteTag_arr_id[0] : this.form.websiteTag_arr_id;
              delete this.form.websiteTag_arr_id;
              //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);
                    //数组转数字
                  this.form.department_id = this.form.department_arr_id[this.form.department_arr_id.length-1];
                  this.form.department_arr_id = JSON.stringify(this.form.department_arr_id);
                  this.form.city_arr_id = this.form.city_arr_id;
                  if(typeof this.form.address_arr_id == 'string'){
                      this.form.address_arr_id = JSON.parse(this.form.address_arr_id);
                  }
                  // this.form.address_id = this.form.address_arr_id[this.form.address_arr_id.length-1];
                  // this.form.address_arr_id = JSON.stringify(this.form.address_arr_id);
                  //2.设置修改的用户id
                  this.form.id = this.editId;
                  //3.提交用户修改
                  //如果code为0表示用户不存在，提交表单
                  console.log(this.form ,'---------------------1-------');
                  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: '网络错误，请重试！'
                });
              })
            }
          })
        },
        //编辑表单 end ------------------------------------------------------------>
        goList(){
          this.$router.push({
            path: '/userList',
          });
        },
    
        
        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 
    
        this.getRoleList();
        //判断是新建还是回显
        if(this.$route.query.id!=undefined){
          this.editId = this.$route.query.id;
          console.log("编辑用户！")
          this.getUserInfo();
        }else{
          console.log("添加用户！")
        }
        //设置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穿透scope选择器 end------------------------------------------------------------>*/
    </style>