src/api/system.ts

@@ -0,0 +1,50 @@
+import request from './request'
+
+
+export default {
+    userList(data) {
+        return request({
+            url: '/user/userList',
+            method: 'post',
+            data
+        });
+    },
+    addUser(data) {
+        return request({
+            url: '/user/addUser',
+            method: 'post',
+            data
+        });
+    },
+    editUserStatus(data) {
+        return request({
+            url: '/user/editUserStatus',
+            method: 'post',
+            data
+        });
+    },
+    delUser(data) {
+        return request({
+            url: '/user/delUser',
+            method: 'post',
+            data
+        });
+    },editUser(data) {
+        return request({
+            url: '/user/editUser',
+            method: 'post',
+            data
+        });
+    },getRoleList() {
+        return request({
+            url: '/role/roleList',
+            method: 'get'
+        });
+    },changeRoleStatus(data) {
+        return request({
+            url: '/role/changeRoleStatus',
+            method: 'post',
+            data
+        });
+    }
+}

src/api/user.ts

@@ -8,6 +8,13 @@ export default {
             method: 'post',
             data
         });
+    },
+    logout(data) {
+        return request({
+            url: '/user/logout',
+            method: 'post',
+            data
+        });
     }
 }
 // export function login(data) {

src/components/player/itemInfo/index.vue

@@ -20,9 +20,9 @@
                 <template v-else>
                     <div class="con">
                         <div class="input-container">
-                            <el-input-number v-model="scope.row.tempCount" placeholder="count" />
+                            <el-input-number v-model="scope.row.tempCount" placeholder="count" class="centered-input"/>
                         </div>
-                        <div class="button-container">
+                        <div>
                             <el-button @click="handleSaveClick(scope.row)" type="success" :icon="Check" circle />
                             <el-button @click="handleCancelClick(scope.row)" type="danger" :icon="Close" circle />
                         </div>
@@ -231,7 +231,7 @@ const handleCancelClick = (row: any) => {
 
 .input-container {
     align-items: center;
-    width: 200px;
+    width: 250px;
 }
 
 
@@ -241,7 +241,7 @@ const handleCancelClick = (row: any) => {
 
 .button-container {
     position: relative;
-    left: 10px;
+    left: 1%;
     transform: translateY(-8%);
 }
 

src/components/player/relicInfo/index.vue

@@ -114,7 +114,7 @@
     <!-- 模态框 -->
     <el-dialog :title="dialogTitle" v-model="showModal" @close="closeModal" width="800px">
         <el-row>
-            <el-col :span="20">
+            <el-col :span="16">
                 <span v-if="editAddFlag">
                     <el-form-item label="遗物数量" label-width="100px" class="label-left">
                         <el-input v-model="rlsCount" placeholder="添加同类型遗物数量" :maxlength="10" style="width: 200px" />
@@ -127,6 +127,9 @@
                     </el-form-item>
                 </span>
             </el-col>
+            <el-col :span="4">
+                <el-button @click="randomAttr()" type="primary" style="">随机属性</el-button>
+            </el-col>
             <el-col :span="4">
                 <el-button @click="openRlsModal()" type="primary" style="">添加词条</el-button>
             </el-col>
@@ -378,17 +381,17 @@ const attrJson = {
     103: "威力",
     104: "防御",
     201: "暴击几率",
-    202: "攻击加成",
-    203: "威力加成",
+    202: "秒伤加成",
+    203: "暴击伤害",
     204: "攻击速度",
     301: "生命加成",
     302: "防御加成",
-    303: "治疗效果",
-    304: "护盾精通",
+    303: "跌落恢复",
+    304: "效果抗性",
     401: "充能速度",
-    402: "施法速度",
-    403: "跌落抗性",
-    404: "召唤精通"
+    402: "技能冷却",
+    403: "效果命中",
+    404: "治疗效果"
 };
 
 const heroJson = {
@@ -441,7 +444,7 @@ const tableData = () => {
 const inputChange = (val) => {
     let data = {
         itemID: val + "",
-        srvId:props.ruleForm.gId
+        srvId: props.ruleForm.gId
     }
 
     playerApi.getRls(data).then((resp) => {
@@ -487,7 +490,7 @@ const lvChange = (val) => {
     let data = {
         itemID: rlsiId.value,
         changeLv: val + "",
-        srvId:props.ruleForm.gId
+        srvId: props.ruleForm.gId
     }
     if (val > 0) {
         playerApi.rlsChangeLv(data).then((resp) => {
@@ -521,7 +524,7 @@ const openModal = (row, item, index, event) => {
     // 获取部位能选择的参数
     let data = {
         partType: row.etp,
-        srvId:props.ruleForm.gId
+        srvId: props.ruleForm.gId
     }
 
     // 移除已经存在的词条
@@ -603,7 +606,6 @@ const editRdm4 = () => {
     let s = rdm4.value;
     let item = s.split(":");
     rdmModal.value = true;
-    console.log(item);
 
     rdmTyp.value = parseInt(item[0]);
     rdmVal.value = parseInt(item[1]);
@@ -612,16 +614,17 @@ const editRdm4 = () => {
 
 const openRlsModal = () => {
     let count = 0;
-    if (rdm1.value != "") {
+
+    if (rdm1.value != "" && rdm1.value != null) {
         count++;
     }
-    if (rdm2.value != "") {
+    if (rdm2.value != "" && rdm2.value != null) {
         count++;
     }
-    if (rdm3.value != "") {
+    if (rdm3.value != "" && rdm3.value != null) {
         count++;
     }
-    if (rdm4.value != "") {
+    if (rdm4.value != "" && rdm4.value != null) {
         count++;
     }
 
@@ -642,6 +645,56 @@ const openRlsModal = () => {
     }
 }
 
+// 递归调用获取随机属性值
+const getRandomElement = () => {
+    const rdmA = rdmOptions[getRandom(0, rdmOptions.length - 1)];
+    if (!existRdm.includes(rdmA.value)) {
+        existRdm.push(rdmA.value);
+        return rdmA;
+    } else {
+        return getRandomElement(); // 递归调用直到找到不重复的元素
+    }
+}
+
+// 随机生成遗物属性  包括副词条等
+const randomAttr = () => {
+    existRdm.splice(0, existRdm.length);
+    rlsAttr.value = attrOptions[getRandom(0, attrOptions.length - 1)].value;
+    rlsAttrV.value = getRandom(1, 100);
+    rlsLv.value = getRandom(1, 15);
+    rlsExp.value = getRandom(1, 100);
+    var rdmCnt = rlsStar.value;
+    for (var i = 1; i < rdmCnt.valueOf(); i++) {
+        var rdmA = getRandomElement();
+        var rdmV = getRandom(1, 100);
+        var rdmS = getRandom(1, 5);
+        switch (i) {
+            case 1:
+                rdm1Dis.value = true;
+                rdm1.value = rdmA.value + ":" + rdmV + ":" + rdmS;
+                break;
+            case 2:
+                rdm2Dis.value = true;
+                rdm2.value = rdmA.value + ":" + rdmV + ":" + rdmS;
+                break;
+            case 3:
+                rdm3Dis.value = true;
+                rdm3.value = rdmA.value + ":" + rdmV + ":" + rdmS;
+                break;
+            case 4:
+                rdm4Dis.value = true;
+                rdm4.value = rdmA.value + ":" + rdmV + ":" + rdmS;
+                break;
+            default: break;
+        }
+    }
+    console.log(rdmCnt);
+}
+
+const getRandom = (min, max) => {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
 const rdmChange = (val) => {
     if (existRdm.includes(val)) {
         ElMessage({
@@ -660,7 +713,7 @@ const saveRdm = () => {
         rdmsTs: rdmsTs.value,
         rlsId: rlsId.value,
         rdmIndex: rdmIndex.value,
-        srvId:props.ruleForm.gId
+        srvId: props.ruleForm.gId
     }
 
     if (rdmOpenType.value == 1) {
@@ -733,6 +786,8 @@ const closeModal = () => {
     rdm3Dis.value = false;
     rdm4Dis.value = false;
     showModal.value = false;
+    attrOptions.splice(0, attrOptions.length);
+    rdmOptions.splice(0, rdmOptions.length);
     dialogTitle.value = "添加遗物";
 }
 
@@ -807,7 +862,7 @@ const editrls = (row: any) => {
 
     let data = {
         partType: row.etp,
-        srvId:props.ruleForm.gId
+        srvId: props.ruleForm.gId
     }
 
     playerApi.getPart(data).then((resp) => {
@@ -831,6 +886,7 @@ const editrls = (row: any) => {
             };
             rdmOptions.push(option);
         }
+        console.log(rdmOptions);
     });
 
 }
@@ -861,10 +917,13 @@ const saverls = () => {
                 rdm2: rdm2.value,
                 rdm3: rdm3.value,
                 rdm4: rdm4.value,
-                relicNum: rlsCount.value,
-                srvId:props.ruleForm.gId
+                relicNum: rlsCount.value + "",
+                srvId: props.ruleForm.gId
             }
 
+            console.log(data);
+
+
             playerApi.addRelic(data).then((resp) => {
                 let data = resp.data.result;
 
@@ -895,7 +954,7 @@ const saverls = () => {
             rdm2: rdm2.value,
             rdm3: rdm3.value,
             rdm4: rdm4.value,
-            srvId:props.ruleForm.gId
+            srvId: props.ruleForm.gId
         }
 
         playerApi.editRelic(data).then((resp) => {
@@ -914,7 +973,6 @@ const saverls = () => {
         });
     }
 
-
     showModal.value = false;
 }
 
@@ -927,7 +985,7 @@ const delRls = (row: any) => {
         let data = {
             playerId: props.ruleForm.id,
             relicId: row.id,
-            srvId:props.ruleForm.gId
+            srvId: props.ruleForm.gId
         }
 
         playerApi.delRls(data).then((resp) => {

src/layout/components/Header/components/Avatar.vue

@@ -1,43 +1,48 @@
 <template>
-  <el-dropdown >
-        <span class="el-dropdown-link">
-          <el-avatar :size="30" class="avatar" :src="AvatarLogo"/>
-          {{userInfo.username}}
-          <el-icon class="header-icon el-icon--right">
-            <arrow-down />
-          </el-icon>
-        </span>
+  <el-dropdown>
+    <span class="el-dropdown-link">
+      <el-avatar :size="30" class="avatar" :src="AvatarLogo" />
+      {{ userInfo.username }}
+      <el-icon class="header-icon el-icon--right">
+        <arrow-down />
+      </el-icon>
+    </span>
     <template #dropdown>
       <el-dropdown-menu>
         <el-dropdown-item :command="0" @click="switchRolesAction('admin')">
-          {{currentRoles==='admin'?'当前角色':'切换角色'}}：管理员
+          {{ currentRoles === 'admin' ? '当前角色' : '切换角色' }}：管理员
         </el-dropdown-item>
         <el-dropdown-item :command="0" divided @click="switchRolesAction('other')">
-          {{currentRoles==='other'?'当前角色':'切换角色'}}：普通用户
+          {{ currentRoles === 'other' ? '当前角色' : '切换角色' }}：普通用户
         </el-dropdown-item>
         <el-dropdown-item :command="3" divided @click="modifyPassword">
-          <el-icon><Edit /></el-icon>修改密码
+          <el-icon>
+            <Edit />
+          </el-icon>修改密码
         </el-dropdown-item>
-        <el-dropdown-item :command="4" divided @click="logOut" >
-          <el-icon><SwitchButton /></el-icon>退出登录
+        <el-dropdown-item :command="4" divided @click="logOut">
+          <el-icon>
+            <SwitchButton />
+          </el-icon>退出登录
         </el-dropdown-item>
       </el-dropdown-menu>
     </template>
   </el-dropdown>
 
-  <PersonalDialog ref="person"/>
+  <PersonalDialog ref="person" />
 </template>
 
 <script lang="ts" setup>
 import { useRouter } from 'vue-router'
-import {ElMessage, ElMessageBox} from "element-plus";
-import {computed, ref} from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { computed, ref } from "vue";
 
 import AvatarLogo from '@/assets/image/avatar.png'
-import {useUserStore} from "@/store/modules/user"
-import {useTagsViewStore} from "@/store/modules/tagsView"
-import {usePermissionStore} from "@/store/modules/permission"
+import { useUserStore } from "@/store/modules/user"
+import { useTagsViewStore } from "@/store/modules/tagsView"
+import { usePermissionStore } from "@/store/modules/permission"
 import PersonalDialog from './PersonalDialog.vue'
+import userApi from '@/api/user'
 
 const router = useRouter()
 const UserStore = useUserStore()
@@ -49,19 +54,19 @@ const currentRoles = computed({
     return UserStore.roles[0]
   },
   set(val) {
-    ;(async () => {
+    ; (async () => {
       await UserStore.getInfo([val])
       router.push({
-        path:'/'
+        path: '/'
       })
       location.reload()
     })()
   },
 })
 
-const switchRolesAction = (type:string)=>{
-  if(type===currentRoles.value) return
-  currentRoles.value = currentRoles.value==='admin'?'other':'admin'
+const switchRolesAction = (type: string) => {
+  if (type === currentRoles.value) return
+  currentRoles.value = currentRoles.value === 'admin' ? 'other' : 'admin'
 }
 
 // 用户信息
@@ -69,32 +74,35 @@ const userInfo = computed(() => UserStore.userInfo)
 const person = ref()
 
 const logOut = async () => {
-    ElMessageBox.confirm('您是否确认退出登录?', '温馨提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    })
+  ElMessageBox.confirm('您是否确认退出登录?', '温馨提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
     .then(async () => {
-      await UserStore.logout()
-      await router.push({path: '/login'})
-      TagsViewStore.clearVisitedView()
-      PermissionStore.clearRoutes()
-      ElMessage({
-        type: "success",
-        message: "退出登录成功！"
+      userApi.logout({"userName":UserStore.username}).then((resp) => {
+        UserStore.logout()
+        router.push({ path: '/login' })
+        TagsViewStore.clearVisitedView()
+        PermissionStore.clearRoutes()
+        ElMessage({
+          type: "success",
+          message: "退出登录成功！"
+        });
       });
     })
-    .catch(() => {})
+    .catch(() => { })
 }
-const modifyPassword = ()=>{
+const modifyPassword = () => {
   person.value.show()
 }
 </script>
 
 <style lang="scss" scoped>
-.avatar{
+.avatar {
   margin-right: 6px
 }
+
 .el-dropdown-link {
   cursor: pointer;
   //color: var(--el-color-primary);

src/store/modules/user.ts

@@ -8,6 +8,7 @@ export const useUserStore = defineStore({
     state: ()=>({
         // 登录token
         token:null,
+        username:null,
         // 登录用户信息
         userInfo:{},
         // 角色
@@ -21,10 +22,12 @@ export const useUserStore = defineStore({
         login(userInfo){
             const { token, username } = userInfo
             return new Promise(async (resolve, reject) => {
-                this.token = username
+                this.token = token
                 this.userInfo = userInfo
-                // await this.getRoles()
+                this.username=username
+                console.log(userInfo);
                 
+                // await this.getRoles()
                 resolve(username)
             })
         },
@@ -48,6 +51,7 @@ export const useUserStore = defineStore({
         logout() {
             return new Promise((resolve, reject) => {
                 this.token = null
+                this.username=null
                 this.userInfo = {}
                 this.roles = []
                 resolve(null)

src/views/login/components/LoginForm.vue

@@ -78,6 +78,8 @@ const submitForm = (formEl: FormInstance | undefined) => {
         let resp = userApi.login(ruleForm);
 
         let data = (await resp).data
+        console.log(data);
+        
         if (data.code == 200) {
           await UserStore.login({ token: data.token, username: ruleForm.username });
           await router.push({

src/views/system/role/index.vue

@@ -3,7 +3,7 @@
     <div class="header">
       <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef">
         <el-form-item label="角色名称" prop="roleName">
-          <el-input v-model="formInline.roleName" placeholder="请输入角色名称"/>
+          <el-input v-model="formInline.roleName" placeholder="请输入角色名称" />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
@@ -14,29 +14,29 @@
     <div class="footer">
       <div class="util">
         <el-button type="primary" @click="add">
-          <el-icon><Plus /></el-icon>
+          <el-icon>
+            <Plus />
+          </el-icon>
           新增角色
         </el-button>
       </div>
       <div class="table-inner">
-        <el-table
-            v-loading="loading"
-            :data="tableData" style="width: 100%" border>
+        <el-table v-loading="loading" :data="tableData" style="width: 100%" border>
+          <el-table-column prop="id" label="ID" />
           <el-table-column prop="roleName" label="角色名称" />
-          <el-table-column prop="roleIdentification" label="角色标识" />
+          <el-table-column prop="roleFlag" label="角色标识" />
           <el-table-column prop="status" label="角色状态" align="center">
             <template #default="scope">
-              <el-switch v-model="scope.row.status"
-                         inline-prompt
-                         active-text="启用" inactive-text="禁用"
-                         @change="changeStatus(scope.row)" />
+              <el-switch inline-prompt :model-value="scope.row.status" :active-text="'启用'" :inactive-text="'禁用'"
+                :active-value="1" :inactive-value="0" @change="changeStatus(scope.row)" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="roleDesc" :show-overflow-tooltip="true" width="180" label="角色描述" />
+          <el-table-column prop="createTime" label="创建时间">
+            <template #default="{ row }">
+              {{ dformatTime(row.createTime) }}
             </template>
           </el-table-column>
-          <el-table-column prop="describe"
-                           :show-overflow-tooltip="true"
-                           width="180"
-                           label="角色描述" />
-          <el-table-column prop="createTime" label="创建时间" />
           <el-table-column prop="status" label="操作" width="180">
             <template #default="scope">
               <el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
@@ -50,84 +50,116 @@
         </el-table>
       </div>
     </div>
-    <RoleDrawer ref="roleDrawer"/>
+    <RoleDrawer ref="roleDrawer" />
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
-  import {onMounted, reactive, ref} from 'vue'
-  import {Search } from '@element-plus/icons-vue'
-  import RoleDrawer from './components/roleDrawer.vue'
-  import { roleData } from '@/mock/system'
-  const tableData = ref(roleData)
-
-  const loading = ref(true)
-  const roleDrawer = ref()
-  const formSize = ref('default')
-  const ruleFormRef = ref<FormInstance>()
-  const formInline = reactive({})
-
-  const onSubmit = () => {
-    console.log('submit!', formInline)
-    loading.value = true
-    setTimeout(()=>{
-      loading.value = false
-    },500)
-  }
+import systemApi from "@/api/system";
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
+import { onBeforeMount, onMounted, reactive, ref } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import RoleDrawer from './components/roleDrawer.vue'
+import { roleData } from '@/mock/system'
+import { tryOnBeforeMount } from '@vueuse/core'
+const tableData = ref(roleData)
 
-  const reset = (formEl: FormInstance | undefined) => {
-    loading.value = true
-    setTimeout(()=>{
-      loading.value = false
-    },500)
-  }
-  const add = () => {
-    roleDrawer.value.show()
-  }
+const loading = ref(true)
+const roleDrawer = ref()
+const formSize = ref('default')
+const ruleFormRef = ref<FormInstance>()
+const formInline = reactive({})
 
-  const edit = (row) => {
-    roleDrawer.value.show(row)
-  }
+onBeforeMount(() => {
+  systemApi.getRoleList().then((resp) => {
+    if (resp.data.code == 200) {
+      tableData.value = resp.data.result;
+    } else {
+      ElMessage({
+        message: resp.data.msg,
+        type: 'error',
+        duration: 3000
+      });
+    }
 
-  const del = (row) => {
-    ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-      draggable: true,
-    })
-      .then(() => {})
-      .catch(() => {})
-  }
+  });
+});
+
+const onSubmit = () => {
+  console.log('submit!', formInline)
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+  }, 500)
+}
+
+const dformatTime = (time) => {
+  const date = new Date(time);
+  const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
+  return formattedDate;
+}
+
+const reset = (formEl: FormInstance | undefined) => {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+  }, 500)
+}
+const add = () => {
+  roleDrawer.value.show()
+}
+
+const edit = (row) => {
+  roleDrawer.value.show(row)
+}
 
-  const changeStatus = (row) => {
+const del = (row) => {
+  ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+    draggable: true,
+  })
+    .then(() => { })
+    .catch(() => { })
+}
+
+const changeStatus = (row) => {
+  if (row.id != undefined) {
     ElMessageBox.confirm(
-        `确定要${!row.status ? '禁用' : '启用'} ${row.roleName} 角色吗？`,
-        '温馨提示',
-        {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-        },
+      `确定要${!row.status ? '禁用' : '启用'} ${row.roleName} 角色吗？`,
+      '温馨提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
     )
-        .then(async () => {})
-        .catch(() => {
-          row.status = !row.status
-        })
+      .then(async () => {
+        var data = { "id": row.id };
+        systemApi.changeRoleStatus(data).then((resp) => {
+          if (resp.data.result) {
+            row.status = row.status == 0 ? 1 : 0;
+          }
+        });
+      })
+      .catch(() => {
+        row.status = !row.status
+      })
   }
+}
 
-  onMounted(()=>{
-    setTimeout(()=>{
-      loading.value = false
-    },500)
-  })
+onMounted(() => {
+  setTimeout(() => {
+    loading.value = false
+  }, 500)
+})
 
 
 </script>
 
 <style scoped lang="scss">
-.header{
+.header {
   display: flex;
   padding: 16px 16px 0px 16px;
   margin-bottom: 16px;
@@ -135,7 +167,8 @@
   background: white;
   box-shadow: 0 0 12px rgb(0 0 0 / 5%);
 }
-.footer{
+
+.footer {
   flex: 1;
   display: flex;
   padding: 16px;
@@ -146,17 +179,20 @@
   box-shadow: 0 0 12px rgb(0 0 0 / 5%);
   position: relative;
   box-sizing: border-box;
-  .util{
+
+  .util {
     margin-bottom: 15px;
     display: flex;
     justify-content: flex-end;
     flex-shrink: 0;
   }
-  .table-inner{
+
+  .table-inner {
     flex: 1;
     position: relative;
   }
-  .table{
+
+  .table {
     position: absolute;
     left: 0;
     top: 0;
@@ -164,5 +200,4 @@
     height: 100%
   }
 }
-
 </style>

src/views/system/user/components/userDialog.vue

@@ -1,58 +1,51 @@
 <template>
   <el-dialog @close="close" v-model="dialogVisible" :title="title" width="50%">
-    <el-form
-        ref="ruleFormRef"
-        :model="ruleForm"
-        :rules="rules"
-        label-width="100px"
-    >
+    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px">
       <el-form-item label="用户名" prop="username">
-        <el-input v-model="ruleForm.username" placeholder="请输入用户名"/>
+        <el-input v-model="ruleForm.username" placeholder="请输入用户名" />
       </el-form-item>
       <el-form-item label="昵称" prop="nickname">
-        <el-input v-model="ruleForm.nickname" placeholder="请输入昵称"/>
+        <el-input v-model="ruleForm.nickname" placeholder="请输入昵称" />
       </el-form-item>
       <el-form-item label="性别" prop="sex">
         <el-radio-group v-model="ruleForm.sex">
-          <el-radio label="男">男</el-radio>
-          <el-radio label="女">女</el-radio>
+          <el-radio label=1 :value=1>男</el-radio>
+          <el-radio label=0 :value=0>女</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="关联角色" prop="role">
         <el-select v-model="ruleForm.role" placeholder="请选择" style="width: 100%">
-          <el-option label="超级管理员" value="超级管理员" :key="0"></el-option>
-          <el-option label="管理员" value="管理员" :key="1"></el-option>
-          <el-option label="普通用户" value="普通用户" :key="2"></el-option>
+          <el-option label="超级管理员" value=1 :key=0></el-option>
+          <el-option label="管理员" value=2 :key=1></el-option>
+          <el-option label="普通用户" value=3 :key=2></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="手机号" prop="photo">
-        <el-input v-model="ruleForm.photo" placeholder="请输入手机号"/>
+      <el-form-item label="手机号" prop="phone">
+        <el-input v-model="ruleForm.phone" placeholder="请输入手机号" />
       </el-form-item>
-      <el-form-item label="账户密码" >
-        <el-input v-model="ruleForm.password"
-                  placeholder="请输入账户密码,如果不输入默认123456"
-                  type="password" clearable/>
+      <el-form-item label="账户密码">
+        <el-input v-model="ruleForm.password" placeholder="请输入账户密码,如果不输入默认123456" type="password" clearable />
       </el-form-item>
-      <el-form-item label="用户状态" >
-        <el-switch v-model="ruleForm.status" inline-prompt active-text="启用" inactive-text="禁用"></el-switch>
+      <el-form-item label="用户状态">
+        <el-switch  inline-prompt v-model="ruleForm.status"  :active-text="'启用'" :inactive-text="'禁用'"
+          :active-value="1" :inactive-value="0"></el-switch>
       </el-form-item>
-      <el-form-item label="用户描述" prop="describe" >
-        <el-input v-model="ruleForm.describe"
-                  type="textarea"
-                  placeholder="请输入用户描述"/>
+      <el-form-item label="用户描述" prop="describe">
+        <el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入用户描述" />
       </el-form-item>
     </el-form>
     <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
-        </span>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
+      </span>
     </template>
   </el-dialog>
 </template>
 <script lang="ts" setup>
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
-import {reactive, ref} from "vue";
+import { reactive, ref } from "vue";
+import systemApi from '@/api/system'
 
 const ruleFormRef = ref<FormInstance>()
 const dialogVisible = ref<boolean>(false)
@@ -61,40 +54,59 @@ const title = ref('新增用户')
 const rules = reactive({
   nickname: [
     { required: true, message: '请输入昵称', trigger: 'blur' },
-    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
+    { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' },
   ],
   username: [{ required: true, message: '请输入', trigger: 'blur' }],
-  role: [{required: true, message: '请选择角色', trigger: 'change',},],
-  sex: [{required: true, message: '请选择性别', trigger: 'change',},],
+  role: [{ required: true, message: '请选择角色', trigger: 'change', },],
+  sex: [{ required: true, message: '请选择性别', trigger: 'change', },],
 })
 
+const props = defineProps({
+  callback: {
+    type: Function,
+    required: true
+  },editCallback: {
+    type: Function,
+    required: true
+  }
+});
+
 const ruleForm = reactive({
   username: '',
   nickname: null,
-  sex: '男',
-  role: null,
-  photo:null,
-  password:null,
-  describe:null,
-  status:true
+  sex: '1',
+  role: 0,
+  phone: null,
+  password: null,
+  describe: null,
+  status: 0
 })
 
+const addOrUpdate = ref(1); // 1代表新增用户  2 修改用户
+
 function close() {
   ruleFormRef.value.resetFields()
-  Object.keys(ruleForm).forEach(key=>{
-    if(key==='sex') ruleForm[key] = '男'
-    else if(key==='status') ruleForm[key] = true
+  Object.keys(ruleForm).forEach(key => {
+    if (key === 'sex') ruleForm[key] = null
+    else if (key === 'status') ruleForm[key] = true
     else ruleForm[key] = null
 
   })
+  addOrUpdate.value = 1;
 }
 
-const show = (item={})=>{
+const show = (item = {}) => {
   title.value = '新增用户'
-  if(item.username){
+  if (item.username) {
+    addOrUpdate.value = 2;
     title.value = '编辑用户'
-    Object.keys(item).forEach(key=>{
-      ruleForm[key] = item[key]
+    Object.keys(item).forEach(key => {
+      if (key == 'sex' || key == 'role') {
+        ruleForm[key] = item[key] + ''
+      } else {
+        ruleForm[key] = item[key]
+      }
+
     })
   }
   dialogVisible.value = true
@@ -103,8 +115,57 @@ const show = (item={})=>{
 const handleClose = async (done: () => void) => {
   await ruleFormRef.value.validate((valid, fields) => {
     if (valid) {
-      dialogVisible.value = false
-      console.log('submit!', ruleForm)
+
+      // 调用接口进行上传数据
+
+      let sex = parseInt(ruleForm.sex);
+      let role = parseInt(ruleForm.role);
+      let phone = parseInt(ruleForm.phone);
+      let status = ruleForm.status ? 1 : 0;
+
+      var data = {
+        username: ruleForm.username,
+        nickname: ruleForm.nickname,
+        sex: sex,
+        role: role,
+        phone: phone,
+        password: ruleForm.password,
+        describe: ruleForm.describe,
+        status: status
+      }
+    
+      if (addOrUpdate.value == 1) {
+        systemApi.addUser(data).then((resp) => {
+          console.log(resp);
+          
+          if (resp.data.code == 401) {
+            ElMessage({
+              message: resp.data.msg,
+              type: 'error',
+              duration: 3000
+            });
+          } else {
+            dialogVisible.value = false
+            // 将新增用户传递会父组件
+            props.callback(resp.data.result);
+          }
+        });
+      } else {
+        systemApi.editUser(data).then((resp) => {
+          if (resp.data.code == 407) {
+            ElMessage({
+              message: resp.data.msg,
+              type: 'error',
+              duration: 3000
+            });
+          } else {
+            dialogVisible.value = false
+            // 将新增用户传递会父组件
+            props.editCallback(resp.data.result);
+          }
+        });
+      }
+
     } else {
       console.log('error submit!', fields)
     }
@@ -116,7 +177,5 @@ defineExpose({
 })
 
 </script>
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
 

src/views/system/user/components/userTable.vue

@@ -3,7 +3,7 @@
     <div class="header">
       <el-form :inline="true" :model="formInline" ref="ruleFormRef">
         <el-form-item label="用户名" prop="username">
-          <el-input v-model="formInline.username" placeholder="请输入用户名"/>
+          <el-input v-model="formInline.username" placeholder="请输入用户名" />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
@@ -14,32 +14,42 @@
     <div class="footer">
       <div class="util">
         <el-button type="primary" @click="addHandler">
-          <el-icon><Plus /></el-icon>
+          <el-icon>
+            <Plus />
+          </el-icon>
           新增用户
         </el-button>
       </div>
       <div class="table-inner">
-        <el-table
-            v-loading="loading"
-            :data="tableData" style="width: 100%;height: 100%" border>
-          <el-table-column prop="username" label="用户名" align="center" width="100"/>
-          <el-table-column prop="nickname" label="昵称" align="center"/>
-          <el-table-column prop="sex" label="性别" align="center"/>
-          <el-table-column prop="role" label="关联角色" align="center" width="120"/>
-          <el-table-column prop="photo" label="手机号" align="center" width="120"/>
+        <el-table v-loading="loading" :data="tableData" style="width: 100%;height: 100%" border>
+          <el-table-column prop="username" label="用户名" align="center" width="100" />
+          <el-table-column prop="nickname" label="昵称" align="center" />
+          <el-table-column prop="sex" label="性别" align="center">
+            <template #default="scope">
+              <span v-if="scope.row.sex === 0">女</span>
+              <span v-else-if="scope.row.sex === 1">男</span>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column prop="password" label="密码" align="center" width="120"/> -->
+          <el-table-column prop="role" label="关联角色" align="center" width="120">
+            <template #default="scope">
+              <span v-if="scope.row.role === 1">超级管理员</span>
+              <span v-else-if="scope.row.role === 2">管理员</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="phone" label="手机号" align="center" width="120" />
           <el-table-column prop="status" label="用户状态" align="center">
             <template #default="scope">
-              <el-switch
-                  inline-prompt
-                  active-text="启用" inactive-text="禁用"
-                  v-model="scope.row.status" @change="changeStatus(scope.row)" />
+              <el-switch inline-prompt :model-value="scope.row.status" :active-text="'启用'" :inactive-text="'禁用'"
+                :active-value="1" :inactive-value="0" @change="changeStatus(scope.row)" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="describe" :show-overflow-tooltip="true" width="180" label="用户描述" align="center" />
+          <el-table-column prop="createTime" label="创建时间" align="center" width="180">
+            <template #default="{ row }">
+              {{ dformatTime(row.createTime) }}
             </template>
           </el-table-column>
-          <el-table-column prop="describe"
-                           :show-overflow-tooltip="true"
-                           width="180"
-                           label="用户描述" align="center"/>
-          <el-table-column prop="createTime" label="创建时间" align="center" width="180"/>
           <el-table-column prop="operator" label="操作" width="200px" align="center" fixed="right">
             <template #default="scope">
               <el-button type="primary" size="small" icon="Edit" @click="editHandler(scope.row)">
@@ -53,51 +63,60 @@
         </el-table>
       </div>
       <div class="pagination">
-        <el-pagination
-            v-model:currentPage="currentPage1"
-            :page-size="10"
-            background
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="1000"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-        />
+        <el-pagination v-model:currentPage="currentPage1" :page-size="10" background
+          layout="total, sizes, prev, pager, next, jumper" :total="1000" @size-change="handleSizeChange"
+          @current-change="handleCurrentChange" />
       </div>
     </div>
 
-    <UserDialog ref="userDialog"/>
+    <UserDialog ref="userDialog" :callback="addUser" :editCallback="editUser" />
   </div>
 </template>
 <script lang="ts" setup>
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
-import {Search } from '@element-plus/icons-vue'
-import {onMounted, reactive, ref} from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import { onBeforeMount, onMounted, reactive, ref } from 'vue'
+import { useUserStore } from "@/store/modules/user"
 import { userData } from '@/mock/system'
 import UserDialog from './userDialog.vue'
+import systemApi from '@/api/system'
+import { formatTime } from '@/utils'
 
-const tableData = ref(userData)
+const tableData = ref([{}])
 const dialogVisible = ref(false)
 const userDialog = ref()
 const ruleFormRef = ref<FormInstance>()
 const formInline = reactive({})
 const loading = ref(true)
 const currentPage1 = ref(1)
+const UserStore = useUserStore()
+
+onBeforeMount(() => {
+  systemApi.userList({ "userName": UserStore.username }).then((resp) => {
+    tableData.value = resp.data.result;
+  });
+});
 
 const onSubmit = () => {
   console.log('submit!', formInline)
   loading.value = true
-  setTimeout(()=>{
+  setTimeout(() => {
     loading.value = false
-  },1000)
+  }, 1000)
 }
 
 const reset = (formEl: FormInstance | undefined) => {
   loading.value = true
-  setTimeout(()=>{
+  setTimeout(() => {
     loading.value = false
-  },1000)
+  }, 1000)
 }
 
+const dformatTime = (time) => {
+  const date = new Date(time);
+  const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
+  return formattedDate;
+}
 
 const addHandler = () => {
   userDialog.value.show()
@@ -113,11 +132,33 @@ const del = (row) => {
     type: 'warning',
     draggable: true,
   })
-      .then(() => {})
-      .catch(() => {})
+    .then(async () => {
+      systemApi.delUser({ "username": row.username }).then((resp) => {
+        console.log(resp);
+        if (resp.data.code == 200) {
+          let index = tableData.value.indexOf(row);
+          tableData.value.splice(index, 1);
+          ElMessage({
+            message: "删除成功",
+            type: 'success',
+            duration: 3000
+          });
+        } else {
+          ElMessage({
+            message: "删除失败",
+            type: 'error',
+            duration: 3000
+          });
+        }
+      });
+    })
+    .catch(() => { })
 }
+
+
 const changeStatus = (row) => {
-  ElMessageBox.confirm(
+  if (row.username != undefined) {
+    ElMessageBox.confirm(
       `确定要${!row.status ? '禁用' : '启用'} ${row.username} 账户吗？`,
       '温馨提示',
       {
@@ -125,11 +166,15 @@ const changeStatus = (row) => {
         cancelButtonText: '取消',
         type: 'warning',
       },
-  )
-      .then(async () => {})
-      .catch(() => {
-        row.status = !row.status
+    )
+      .then(async () => {
+        systemApi.editUserStatus({ "username": row.username }).then((resp) => {
+          if (resp.data.result) {
+            row.status = row.status == 0 ? 1 : 0;
+          }
+        });
       })
+  }
 }
 
 const handleSizeChange = (val: number) => {
@@ -140,10 +185,24 @@ const handleCurrentChange = (val: number) => {
   currentPage1.value = val
 }
 
-onMounted(()=>{
-  setTimeout(()=>{
+const addUser = (user: any) => {
+  tableData.value.push(user)
+}
+
+const editUser = (user: any) => {
+  const index = tableData.value.findIndex(item => item.username == user.username);
+  if (index != -1) {
+    user.createTime=tableData.value[index].createTime;
+    tableData.value[index] = user;
+  }else{
+    console.log("未找到对象");
+  }
+}
+
+onMounted(() => {
+  setTimeout(() => {
     loading.value = false
-  },1000)
+  }, 1000)
 })
 
 </script>

src/views/system/user/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="app-container m-user">
-    <UserSide/>
+    <!-- <UserSide/> -->
     <UserTable/>
   </div>
 </template>
 
 <script lang="ts" setup>
   import UserTable from './components/userTable.vue'
-  import UserSide from './components/userSide.vue'
+  // import UserSide from './components/userSide.vue'
 
 </script>