0.0.20

周末保存

src/api/userMember.js

@@ -0,0 +1,67 @@
+import request from '@/utils/request'
+
+//1.用户管理 start ------------------------------------->
+
+//1.1 获取用户列表 
+export function getUserList(params) {
+  return request({
+    url: '/user/getUserList',
+    method: 'get',
+    params
+  })
+}
+
+//1.2 获取用户信息
+export function getUserInfo(params) {
+  return request({
+    url: '/user/getUserInfo',
+    method: 'get',
+    params
+  })
+}
+
+//1.3 创建用户
+export function createUser(data) {
+  return request({
+    url: '/user/createUser',
+    method: 'post',
+    data
+  })
+}
+
+//1.4 验证用户是否存在
+export function verifyUserInfo(data) {
+  return request({
+    url: '/user/verifyUserInfo',
+    method: 'post',
+    data
+  })
+}
+
+//1.5 获取用户信息
+export function getUser(params) {
+  return request({
+    url: '/user/getUser',
+    method: 'get',
+    params
+  })
+}
+
+//1.6 修改用户账号状态
+export function upUserStatus(data) {
+  return request({
+    url: '/user/upUserStatus',
+    method: 'post',
+    data
+  })
+}
+
+//1.7 修改用户信息
+export function updateUser(data) {
+  return request({
+    url: '/user/updateUser',
+    method: 'post',
+    data
+  })
+}
+//用户管理 end ------------------------------------->

src/router/index.js

@@ -252,6 +252,22 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/creatUser',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/role/creatUser'),
+        meta: {
+          title: '添加用户',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
   {
     path: '/department',
     component: Layout,

src/store/modules/userMember.js

@@ -0,0 +1,94 @@
+import {getUserList,getUserInfo,createUser,verifyUserInfo,getUser,
+  upUserStatus,updateUser
+} from '@/api/userMember'
+
+const state = {
+
+}
+
+const mutations = {
+
+}
+
+const actions = {
+  //1.用户管理 start ---------------------------------------->
+  //获取用户列表
+  getUserList({commit},data) {
+    return new Promise((resolve, reject) => {
+      getUserList(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //获取用户信息
+  getUserInfo({commit},data) {
+    return new Promise((resolve, reject) => {
+      getUserInfo(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //创建用户
+  createUser({commit},data) {
+    return new Promise((resolve, reject) => {
+      createUser(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //验证用户是否存在
+  verifyUserInfo({commit},data) {
+    return new Promise((resolve, reject) => {
+      verifyUserInfo(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //获取用户信息
+  getUser({commit},data) {
+    return new Promise((resolve, reject) => {
+      getUser(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //修改用户账号状态
+  upUserStatus({commit},data) {
+    return new Promise((resolve, reject) => {
+      upUserStatus(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //修改用户信息
+  updateUser({commit},data) {
+    return new Promise((resolve, reject) => {
+      updateUser(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
+  //用户管理管理 end ---------------------------------------->
+}
+
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/styles/global.less

@@ -231,6 +231,12 @@
   background: #CCD1F1;
 }
 
+//发布新闻
+.bottomBtnBox {
+  margin:0 30px 30px 30px;
+  text-align:center;
+}
+
 /*页面布局 end------------------------------------------------------------>*/
 
 

src/utils/baseUrl.js

@@ -0,0 +1,6 @@
+const URL = {
+  testUrl: 'http://192.168.1.201:9501',//老刘服务器
+  baseUrl: 'http://183.131.25.186:9501',//测试服务器
+}
+
+export default URL;

src/utils/request.js

@@ -2,12 +2,13 @@ import axios from 'axios'
 import { MessageBox, Message } from 'element-ui'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
+import URL from '@/utils/baseUrl';
 
 // create an axios instance
 const service = axios.create({
   //千万不能在这里使用绝对地址，这会导致webpack的devserve不生效
-  //baseURL: 'http://192.168.1.201:9501', //老刘服务器
-  baseURL: 'http://183.131.25.186:9501', //测试服务器
+  //baseURL: URL.testUrl, 
+  baseURL: URL.baseUrl, 
   //baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   //withCredentials: true, // send cookies when cross-domain requests
   timeout: 5000 // request timeout

src/views/menu/department.vue

@@ -123,7 +123,7 @@ export default {
           let parames = {
             'pid':parentId
           }
-          self.$store.dispatch('pool/getDepartment',parames).then(res=> {
+          self.$store.dispatch('public/getAllDepartment',parames).then(res=> {
             if (res.data) {
               const nodes = res.data.map(item => ({
                 value: item.id,
@@ -245,7 +245,7 @@ export default {
       if(this.form.pid.length!=0){
         const lastPicValue = this.form.pid[this.form.pid.length - 1];
         this.form.pid = String(lastPicValue);
-      } 
+      }
       this.$refs.form.validate(valid => {
         if (valid) {
           this.$store.dispatch('public/addDepartment',this.form).then(res=> {

src/views/news/creatNews.vue

@@ -661,10 +661,6 @@ export default {
 </script>
 
 <style scoped lang="less">
-  .bottomBtnBox {
-    margin:0 30px 30px 30px;
-    text-align:center;
-  }
   //文本编辑器
   .QuillTitle {
     line-height: 36px;

src/views/role/components/userAdmin.vue

@@ -0,0 +1,326 @@
+<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="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="mobile" class="custom-align-right">
+            <el-input v-model="form.mobile" autocomplete="off" placeholder="请输入手机号.."></el-input>
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>  
+
+    <div class="bottomBtnBox">
+      <el-button type="info" @click="clearData">重置</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';
+
+export default {
+  data() {
+    // 配置验证规则：用于表单验证
+    const validatePassword = (rule, value, callback) => {
+      if (value.length < 6) {
+        callback(new Error('密码不能低于6位！'))
+      } else {
+        callback()
+      }
+    }
+    const validateEmpty = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      formLabelWidth:"120px",
+      editId:"",
+      form:{
+        type_id:10000,//10000管理员
+        user_name:"",//登录账号
+        role_id:"",//角色id 查询角色列表获取
+        password:"",//密码
+        confirm_password:"",//确认密码
+        real_name:"",//真实姓名
+        mobile:"",//手机号
+      },
+      role_idArr:[],//角色id池
+      //密码验证
+      capsTooltip1: false,
+      capsTooltip2: false,
+      passwordType1: 'password',
+      passwordType2: 'password',
+      //配置from表单验证规则
+      loginRules: { 
+        user_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        role_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
+        confirm_password: [{ required: true, trigger: 'blur', validator: validatePassword }],
+        real_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        mobile: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+      }
+    };
+  },
+  methods: {
+    //1.表单收集 start ------------------------------------------------------------>
+    // 切换密码框的显示与隐藏
+    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(); //聚焦到对应的密码输入框
+      });
+    },
+    //获得角色列表池
+    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: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    //重置表单
+    clearData(){
+      this.form.type_id = 10000;
+      this.form.user_name = "";
+      this.form.role_id = "";
+      this.form.password = "";
+      this.form.confirm_password = "";
+      this.form.real_name = "";
+      this.form.mobile = "";
+      this.role_idArr = [];
+      this.capsTooltip1 = false;
+      this.capsTooltip2 = false;
+      this.passwordType1 = 'password';
+      this.passwordType2 = 'password';
+    },
+    //表单收集 end ------------------------------------------------------------>
+    //2.提交表单 start ------------------------------------------------------------>
+    //提交表单
+    addData(){
+      console.log(this.form);
+      //1.先验证用户是否已经存在
+      this.$store.dispatch('userMember/verifyUserInfo',{user_name:this.form.user_name}).then(res=>{
+        if(res.code==0){
+          //如果code为0表示用户不存在，提交表单
+          this.$store.dispatch('userMember/createUser',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: 'info',
+          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;
+
+      }).catch(error=>{
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    //修改用户
+    editData(){
+      this.$store.dispatch('userMember/verifyUserInfo',{id:this.editId,user_name:this.form.user_name}).then(res=>{
+        if(res.code==0){
+          this.form.id = this.editId;
+          delete this.form.password;
+          delete this.form.confirm_password;
+          //如果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: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    //编辑表单 end ------------------------------------------------------------>
+    goList(){
+      this.$router.push({
+        path: '/userList',
+      });
+    },
+  },
+  mounted(){
+    this.getRoleList();
+    //判断是新建还是回显
+    if(this.$route.query.id!=undefined){
+      this.editId = this.$route.query.id;
+      console.log("编辑用户！")
+      this.getUserInfo();
+    }else{
+      console.log("添加用户！")
+    }
+    
+  }
+};
+</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;
+    }
+  }
+  //执行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>

src/views/role/components/userDefault.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    个人会员
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      num:1
+    };
+  },
+  methods: {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  
+</style>

src/views/role/components/userEnterprise.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    企业会员
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      num:1
+    };
+  },
+  methods: {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  
+</style>

src/views/role/components/userInvestigate.vue

@@ -0,0 +1,513 @@
+<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="user_photo" :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>
+              </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="选择日期">
+            </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">
+            <!-- 级联选择器 -->
+          </el-form-item>
+          <el-form-item label="有效期：" :label-width="formLabelWidth" prop="mobile" class="custom-align-right">
+            <el-date-picker
+              v-model="form.city_arr_id"
+              type="daterange"
+              :disabled="form.long_time === 1"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期">
+            </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">
+            <!-- 级联选择器 -->
+          </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">
+            <!-- 级联选择器 -->
+          </el-form-item>
+          <el-form-item label="相关资料：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <!-- <el-input v-model="form.other" autocomplete="off" placeholder=""></el-input> -->
+            <el-upload
+              class="upload-demo"
+              :action="uploadFileUrl"
+              :on-preview="handlePreview"
+              :on-remove="handleRemove"
+              :before-remove="beforeRemove"
+              multiple
+              :limit="30"
+              :on-exceed="handleExceed"
+              :file-list="form.other">
+              <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"></el-input>
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>  
+    <div class="bottomBtnBox">
+      <el-button type="info" @click="clearData">重置</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';
+// 引入
+import URL from '@/utils/baseUrl';
+
+export default {
+  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()
+      }
+    }
+    return {
+      formLabelWidth:"120px",
+      editId:"",
+      uploadFileUrl:URL.testUrl+"/public/uploadFile",//获得上传地址
+      form:{
+        type_id:10000,//10000管理员
+        role_id:"",//角色id 
+        user_name:"",//登录账号
+        password:"",//密码
+        confirm_password:"",//确认密码
+        number:"",//调研员编号
+        real_name:"",//真实姓名
+        user_photo:"",//照片
+        id_card:"",//身份证号
+        birthday:"",//出生年月
+        gender:"1",//性别
+        mobile:"",//手机号
+        city_arr_id:"",//工作区域
+        from_time:"",//有效期开始时间
+        to_time:"",//有效期结束时间
+        long_time:0,//是否为长期 //长期1：长期 0：非长期
+        native_place_arr_id:"",//籍贯
+        qq:"",//QQ
+        email:"",//电子邮箱
+        other:[],//相关资料
+        remark:"",//提示词
+      },
+      role_idArr:[],//角色id池
+      //上传照片
+      photoUrl:'',
+      hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+      //密码验证
+      capsTooltip1: false,
+      capsTooltip2: false,
+      passwordType1: 'password',
+      passwordType2: 'password',
+      //配置from表单验证规则
+      loginRules: { 
+        //1.角色id
+        role_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        //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.工作区域
+        city_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
+        //11.有效期
+        long_time: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        
+      }
+    };
+  },
+  methods: {
+    //1.表单收集 start ------------------------------------------------------------>
+    // 切换密码框的显示与隐藏
+    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(); //聚焦到对应的密码输入框
+      });
+    },
+    //获得角色列表池
+    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: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    //重置表单
+    clearData(){
+      this.form.type_id = 10000;
+      this.form.user_name = "";
+      this.form.role_id = "";
+      this.form.password = "";
+      this.form.confirm_password = "";
+      this.form.real_name = "";
+      this.form.mobile = "";
+      this.role_idArr = [];
+      this.capsTooltip1 = false;
+      this.capsTooltip2 = false;
+      this.passwordType1 = 'password';
+      this.passwordType2 = 'password';
+    },
+    //表单收集 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.logo = res.data.imgUrl;//提供表单地址
+        console.log(res.data.imgUrl)
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+
+      // 阻止默认的上传行为
+      return false;
+    },
+    //2.2 删除图片
+    handleDelete() {
+      this.photoUrl = ''; // 清空图片 URL
+    },
+    //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 }？`);
+    },
+    //提交表单
+    addData(){
+      console.log(this.form);
+      //1.先验证用户是否已经存在
+      this.$store.dispatch('userMember/verifyUserInfo',{user_name:this.form.user_name}).then(res=>{
+        if(res.code==0){
+          //如果code为0表示用户不存在，提交表单
+          this.$store.dispatch('userMember/createUser',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: 'info',
+          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;
+
+      }).catch(error=>{
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    //修改用户
+    editData(){
+      this.$store.dispatch('userMember/verifyUserInfo',{editId:this.editId,user_name:this.form.user_name}).then(res=>{
+        if(res.code==0){
+          //如果code为0表示用户不存在，提交表单
+          this.$store.dispatch('userMember/createUser',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: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    //编辑表单 end ------------------------------------------------------------>
+    goList(){
+      this.$router.push({
+        path: '/userList',
+      });
+    },
+  },
+  mounted(){
+    this.getRoleList();
+    //判断是新建还是回显
+    if(this.$route.query.id!=undefined){
+      this.editId = this.$route.query.id;
+      console.log("编辑用户！")
+      this.getUserInfo();
+    }else{
+      console.log("添加用户！")
+    }
+    
+  }
+};
+</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>

src/views/role/components/userPolitician.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    政务会员
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      num:1
+    };
+  },
+  methods: {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  
+</style>

src/views/role/creatUser.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="mainBox">
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle"/>
+      <div>
+        <el-radio v-model="userType" label="10000">管理员</el-radio>
+        <el-radio v-model="userType" label="4">调研员</el-radio>
+        <el-radio v-model="userType" label="1">个人会员</el-radio>
+        <el-radio v-model="userType" label="3">企业会员</el-radio>
+        <el-radio v-model="userType" label="2">政务会员</el-radio>  
+      </div>
+    </div>
+    <!-- 根据 userType 的值动态显示组件 -->
+    <user-admin v-if="userType === '10000'" />
+    <user-investigate v-if="userType === '4'" />
+    <user-default v-if="userType === '1'" />
+    <user-enterprise v-if="userType === '2'" />
+    <user-politician v-if="userType === '3'" />
+  </div>
+</template>
+
+<script>
+// 引入组件
+import tableTitle from './components/tableTitle';
+import userAdmin from './components/userAdmin'; // 引入管理员组件
+import userInvestigate from './components/userInvestigate'; // 引入调研员组件
+import userDefault from './components/userDefault'; // 引入调研员组件
+import userEnterprise from './components/userEnterprise'; // 引入企业会员组件
+import userPolitician from './components/userPolitician'; // 引入政务会员组件
+// 引入公用样式
+import '@/styles/global.less';
+
+export default {
+  components: {
+    tableTitle,
+    userAdmin, // 注册管理员组件
+    userInvestigate, // 注册调研员组件
+    userDefault, // 注册个人会员组件
+    userEnterprise, // 注册企业会员组件
+    userPolitician // 注册政务会员组件
+  },
+  data() {
+    return {
+      tableDivTitle: "选择用户类型",
+      userType: "10000" // 用户类型
+    };
+  },
+  methods: {
+    // 其他方法
+  },
+  mounted() {
+    // 其他逻辑
+  },
+};
+</script>
+
+<style scoped lang="less">
+  
+</style>

src/views/role/userList.vue

@@ -6,41 +6,29 @@
         <el-row>
           <el-col :span="8">
             <div class="searchBox">
-              <div class="searchTitle">资讯题目：</div>
-              <el-input placeholder="请输入资讯题目" autocomplete="off" v-model="getApiData.title"/>
+              <div class="searchTitle">用户账号：</div>
+              <el-input placeholder="请输入用户账号" autocomplete="off" v-model="getApiData.keyword"/>
             </div>
           </el-col>
           <el-col :span="8">
             <div class="searchBox">
-              <div class="searchTitle">导航池名称：</div>
-              <el-input placeholder="请输入导航池名称" autocomplete="off" v-model="getApiData.category_name"/>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="searchBox">
-              <div class="searchTitle">作者：</div>
-              <el-input placeholder="请输入作者姓名" autocomplete="off" v-model="getApiData.author"/>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
-      <div class="layerBoxLineTwo">
-        <el-row>
-          <el-col :span="8">
-            <div class="searchBox">
-              <div class="searchTitle">引用外链：</div>
-              <el-select v-model="getApiData.islink" placeholder="请选择..">
-                <el-option label="否" value="0"></el-option>
-                <el-option label="是" value="1"></el-option>
+              <div class="searchTitle">用户类型：</div>
+              <el-select placeholder="请选择用户类型" v-model="getApiData.type_id">
+                <el-option label="个人会员" value="1"></el-option>
+                <el-option label="政务会员" value="2"></el-option>
+                <el-option label="企业会员" value="3"></el-option>
+                <el-option label="调研员" value="4"></el-option>
+                <el-option label="管理员" value="10000"></el-option>
+                <el-option label="游客" value="20000"></el-option>
               </el-select>
             </div>
           </el-col>
           <el-col :span="8">
             <div class="searchBox">
-              <div class="searchTitle">资讯状态：</div>
-              <el-select v-model="getApiData.status" placeholder="请选择..">
-                <el-option label="待发布" value="0"></el-option>
-                <el-option label="已发布" value="1"></el-option>
+              <div class="searchTitle">账号状态：</div>
+              <el-select placeholder="请选择用户类型" v-model="getApiData.status">
+                <el-option label="启用" value="1"></el-option>
+                <el-option label="停用" value="0"></el-option>
               </el-select>
             </div>
           </el-col>
@@ -50,7 +38,7 @@
     
     <div class="layerBoxNoBg">
       <div>
-        <el-button type="primary" @click="goCreat">发布资讯</el-button>
+        <el-button type="primary" @click="goCreat">添加用户</el-button>
       </div>
       <div>
         <el-button @click="clearSearchList">重置</el-button>
@@ -66,13 +54,13 @@
         <template>
           <el-table :data="tableData" style="width: 100%">
             <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
-            <el-table-column prop="title" label="资讯题目" width=""></el-table-column>
-            <el-table-column prop="category_name" label="导航池名称" width=""></el-table-column>
-            <el-table-column prop="status" label="状态" width="">
+            <el-table-column prop="real_name" label="用户姓名" width=""></el-table-column>
+            <el-table-column prop="type_name" label="用户类型" width=""></el-table-column>
+            <el-table-column prop="mobile" label="联系电话" width=""></el-table-column>
+            <el-table-column prop="created_at" label="创建时间" width=""></el-table-column>
+            <el-table-column prop="status" label="账号状态" width="">
               <template slot-scope="scope">
-                <span v-if="scope.row.status==404">404</span>
                 <el-switch
-                  v-else
                   v-model="scope.row.status"
                   :active-value="1"
                   :inactive-value="0"
@@ -80,17 +68,10 @@
                 ></el-switch>
               </template>
             </el-table-column>
-            <el-table-column prop="islink" label="是否引用外链" width=""></el-table-column>
-            <el-table-column prop="fromurl" label="来源" width=""></el-table-column>
-            <el-table-column prop="author" label="作者" width=""></el-table-column>
-            <el-table-column prop="level" label="排序" width=""></el-table-column>
-            <el-table-column prop="created_at" label="创建时间" width=""></el-table-column>
-            <el-table-column prop="updated_at" label="修改时间" width=""></el-table-column>
             <el-table-column fixed="right" label="操作" width="200" header-align="center">
               <template slot-scope="scope">
                 <div class="listBtnBox">
-                  <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i class="el-icon-delete"></i>移除</div>
-                  <div class="listEditBtn" @click="goEdit(scope.row.id, tableData)"><i class="el-icon-edit-outline"></i>编辑</div>
+                  <div class="listEditBtn" @click="goEdit(scope.row.id)"><i class="el-icon-edit-outline"></i>编辑</div>
                 </div>
               </template>
             </el-table-column>
@@ -102,7 +83,7 @@
     <div class="alignBox">
       <el-row>
         <el-col :span="24">
-          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
+          <el-pagination :current-page="getApiData.page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
         </el-col>
       </el-row>
     </div>
@@ -124,15 +105,13 @@ export default {
   data() {
     return {
       //1.列表和分页相关 start ------------------------------------------------------------>
-      tableDivTitle:"资讯列表",
+      tableDivTitle:"用户列表",
       tableData:[],//内容
       editId:0,//要修改的网站id
       getApiData:{
-        title:"",//标题
-        category_name:"",//导航池id
-        author:"",//作者
-        islink:"",//是否使用外链
-        status:"",//资讯状态
+        type_id:"",//用户类型
+        keyword:"",//用户账号
+        status:"",//用户状态
         page:1,//当前是第几页
         pageSize:10,//一共多少条
       },
@@ -144,18 +123,7 @@ export default {
     //1.列表和分页相关 start ------------------------------------------------------------>
     //1.1 开始请求列表信息方法
     getData(){
-      this.$store.dispatch('news/getArticleList',this.getApiData).then(res=> {
-        //格式化：islink=0为不使用外面 islink=1为使用外链
-        //status=1为显示 status=2为不显示
-        let data = [];
-        for(let item of res.data.rows){
-          // if(item.status==0){item.status="隐藏"}
-          // if(item.status==1){item.status="显示"}
-          // if(item.status==404){item.status="已删除"}
-          if(item.islink==0){item.islink="否"}
-          if(item.islink==1){item.islink="是"}
-          data.push(item)
-        }
+      this.$store.dispatch('userMember/getUserList',this.getApiData).then(res=> {
         this.tableData = res.data.rows; //给与内容
         this.allCount = res.data.count; //给与总条数
       }).catch(() => {
@@ -166,43 +134,43 @@ export default {
       })
     },
     //1.2 删除内容
-    deleteRow(id){
-      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        console.log("当前删除：" + id)
-        this.$store.dispatch('news/delArticle',{id:id}).then(res=> {
-          this.getData();
-          this.$message({
-            type: 'success',
-            message: '删除成功!'
-          });
-        }).catch(() => {
-          this.$message({
-            type: 'warning',
-            message: '网络错误，请重试！'
-          });
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'warning',
-          message: '已取消删除'
-        });
-      });
-    },
-    //1.3 修改网站状态
+    // deleteRow(id){
+    //   this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
+    //     confirmButtonText: '确定',
+    //     cancelButtonText: '取消',
+    //     type: 'warning'
+    //   }).then(() => {
+    //     console.log("当前删除：" + id)
+    //     this.$store.dispatch('',{id:id}).then(res=> {
+    //       this.getData();
+    //       this.$message({
+    //         type: 'success',
+    //         message: '删除成功!'
+    //       });
+    //     }).catch(() => {
+    //       this.$message({
+    //         type: 'warning',
+    //         message: '网络错误，请重试！'
+    //       });
+    //     })
+    //   }).catch(() => {
+    //     this.$message({
+    //       type: 'warning',
+    //       message: '已取消删除'
+    //     });
+    //   });
+    // },
+    //1.3 修改用户状态
     upRow(id,status){
       let data = {
         id:id,
         status:status
       }
-      this.$store.dispatch('news/upArticleStatus',data).then(res=> {
+      this.$store.dispatch('userMember/upUserStatus',data).then(res=> {
         if(res.code==200){
           this.$message({
             type: 'success',
-            message: '资讯状态已修改!'
+            message: '用户状态已修改!'
           });
         }
       }).catch(() => {
@@ -226,10 +194,8 @@ export default {
     //1.6 重置按钮
     clearSearchList(){
       this.tableData = [];
-      this.getApiData.title = "";
-      this.getApiData.category_name = "";
-      this.getApiData.author = "";
-      this.getApiData.islink = "";
+      this.getApiData.type_id = "";
+      this.getApiData.keyword = "";
       this.getApiData.status = "";
       this.getApiData.page = 1;
       this.getApiData.pageSize = 10;
@@ -241,7 +207,7 @@ export default {
     //跳转到资讯发布页面
     goCreat(){
       this.$router.push({
-        path: '/creatNews',
+        path: '/creatUser',
       });
     },
     goEdit(id){
@@ -249,7 +215,7 @@ export default {
         id:id
       }
       this.$router.push({
-        path: '/creatNews',
+        path: '/creatUser',
         query: data
       });
     }