🎨 用户管理模块新增手动添加用户功能

src/api/user/index.js

@@ -29,3 +29,12 @@ export const getUserDetail = (id) => {
     method: 'get'
   })
 }
+
+// 用户注册
+export const register = (data) => {
+  return service({
+    url: '/app_user/register',
+    method: 'post',
+    data
+  })
+}

src/view/notice/notice/notice.vue

@@ -16,7 +16,7 @@
        —
       <el-date-picker v-model="searchInfo.endCreatedAt" type="datetime" placeholder="结束日期" :disabled-date="time=> searchInfo.startCreatedAt ? time.getTime() < searchInfo.startCreatedAt.getTime() : false"></el-date-picker>
       </el-form-item>
-      
+
 
         <template v-if="showAllQuery">
           <!-- 将需要控制显示状态的查询条件添加到此范围内 -->
@@ -34,7 +34,7 @@
         <div class="gva-btn-list">
             <el-button  type="primary" icon="plus" @click="openDialog()">新增</el-button>
             <el-button  icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="onDelete">删除</el-button>
-            
+
         </div>
         <el-table
         ref="multipleTable"
@@ -46,15 +46,15 @@
         @sort-change="sortChange"
         >
         <el-table-column type="selection" width="55" />
-        
+
         <el-table-column align="left" label="日期" prop="createdAt"width="180">
             <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
         </el-table-column>
-        
+
           <el-table-column sortable align="left" label="标题" prop="title" width="120" />
                       <el-table-column label="内容" prop="content" width="200">
                          <template #default="scope">
-                            [富文本内容]
+                           {{ scope.row.content }}
                          </template>
                       </el-table-column>
           <el-table-column align="left" label="状态" prop="status" width="120" />

src/view/user/user/index.vue

@@ -7,6 +7,7 @@
         @resetData="resetData"
         class="search-box searchForm"
       />
+      <el-button type="primary" @click="handleAdd">新增用户</el-button>
     </div>
     <div class="gva-table-box">
       <Content
@@ -99,15 +100,60 @@
         <el-descriptions-item label="VIP到期时间">{{ userDetail.vip_expire_time }}</el-descriptions-item>
       </el-descriptions>
     </el-dialog>
+
+    <!-- 新增用户弹窗 -->
+    <el-dialog
+      v-model="addDialogVisible"
+      title="新增用户"
+      width="500px"
+      :before-close="handleAddClose"
+    >
+      <el-form
+        ref="addFormRef"
+        :model="addForm"
+        :rules="addRules"
+        label-width="100px"
+      >
+        <el-form-item label="手机号" prop="phone">
+          <el-input v-model="addForm.phone" placeholder="请输入手机号" />
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="addForm.password" type="password" placeholder="请输入密码" />
+        </el-form-item>
+        <el-form-item label="用户类型" prop="user_type">
+          <el-select v-model="addForm.user_type" placeholder="请选择用户类型">
+            <el-option label="普通用户" :value="1" />
+            <el-option label="讲师" :value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="用户标签" prop="user_label">
+          <el-select v-model="addForm.user_label" placeholder="请选择用户标签">
+            <el-option label="注册会员" :value="1" />
+            <el-option label="VIP" :value="2" />
+            <el-option label="SVIP" :value="3" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="昵称" prop="nick_name">
+          <el-input v-model="addForm.nick_name" placeholder="请输入昵称" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="handleAddClose">取消</el-button>
+          <el-button type="primary" @click="submitAdd">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 <script setup>
   import searchForm from '@/components/searchForm/index.vue'
   import Content from '@/components/content/index.vue'
-  import {list, status, getUserDetail} from '@/api/user/index.js'
+  import {list, status, getUserDetail, register} from '@/api/user/index.js'
   import { ref, onMounted } from 'vue'
   import {formatDate} from '@/utils/format'
   import { USER_SEARCH_CONFIG, USER_TABLE_CONFIG } from '@/config'
+  import { ElMessage } from 'element-plus'
   const tableLoading = ref(true),  tableData = ref([])
   const queryParams = ref({
     page: 1,
@@ -119,6 +165,36 @@
   // const EMPTY_STR = '- -'
   const dialogVisible = ref(false)
   const userDetail = ref({})
+  const addDialogVisible = ref(false)
+  const addFormRef = ref(null)
+  const addForm = ref({
+    phone: '',
+    password: '',
+    user_type: 1,
+    user_label: 1,
+    nick_name: ''
+  })
+
+  const addRules = {
+    phone: [
+      { required: true, message: '请输入手机号', trigger: 'blur' },
+      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
+    ],
+    password: [
+      { required: true, message: '请输入密码', trigger: 'blur' },
+      { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
+    ],
+    user_type: [
+      { required: true, message: '请选择用户类型', trigger: 'change' }
+    ],
+    user_label: [
+      { required: true, message: '请选择用户标签', trigger: 'change' }
+    ],
+    nick_name: [
+      { required: true, message: '请输入昵称', trigger: 'blur' }
+    ]
+  }
+
   const searchData = (data) => {
     if (data.times) {
       data.startTime = data.times[0]
@@ -177,8 +253,39 @@
       row.status = row.status === 1? 0 :1
     }
   }
+
+  function handleAdd() {
+    addDialogVisible.value = true
+  }
+
+  function handleAddClose() {
+    addDialogVisible.value = false
+    addFormRef.value?.resetFields()
+  }
+
+  async function submitAdd() {
+    if (!addFormRef.value) return
+    await addFormRef.value.validate(async (valid) => {
+      if (valid) {
+        const res = await register(addForm.value)
+        if (res.code === 0) {
+          ElMessage.success('添加成功')
+          handleAddClose()
+          getList()
+        } else {
+          ElMessage.error(res.msg || '添加失败')
+        }
+      }
+    })
+  }
 </script>
 <style lang="scss" scoped>
+.searchForm {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
 .el-descriptions {
   margin: 20px 0;
 }