测试2

package-lock.json

@@ -11,6 +11,7 @@
         "axios": "^1.6.2",
         "flowbite": "^2.2.1",
         "p": "^0.2.0",
+        "resolve": "^1.22.8",
         "view-ui-plus": "^1.3.15",
         "vue": "^3.3.11",
         "vue-router": "^4.2.5"
@@ -1292,7 +1293,6 @@
       "version": "1.1.2",
       "resolved": "https://mirrors.cloud.tencent.com/npm/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -1333,7 +1333,6 @@
       "version": "2.0.0",
       "resolved": "https://mirrors.cloud.tencent.com/npm/hasown/-/hasown-2.0.0.tgz",
       "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -1373,7 +1372,6 @@
       "version": "2.13.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -1629,8 +1627,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://mirrors.cloud.tencent.com/npm/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
-      "dev": true
     },
     "node_modules/picocolors": {
       "version": "1.0.0",
@@ -1866,9 +1863,8 @@
     },
     "node_modules/resolve": {
       "version": "1.22.8",
-      "resolved": "https://mirrors.cloud.tencent.com/npm/resolve/-/resolve-1.22.8.tgz",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -1982,7 +1978,6 @@
       "version": "1.0.0",
       "resolved": "https://mirrors.cloud.tencent.com/npm/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },

package.json

@@ -12,6 +12,7 @@
     "axios": "^1.6.2",
     "flowbite": "^2.2.1",
     "p": "^0.2.0",
+    "resolve": "^1.22.8",
     "view-ui-plus": "^1.3.15",
     "vue": "^3.3.11",
     "vue-router": "^4.2.5"

src/manager/Data/MessageManage.vue

@@ -1,3 +1,391 @@
+<style scoped>
+.addinput{
+  //display: flex;
+  //flex-direction: column;
+  //justify-content: center;
+  //align-content: center;
+}
+
+.addinput>div>input{
+  /*width:300px ;*/
+  /*height: 30px;*/
+  /*border-radius: 5px;*/
+  //margin: 0 auto;
+  //outline-color: #94beae;
+
+}
+</style>
 <template>
-  this is 消息管理
+  <div style="width: 80vw;height:90vh;position: relative;margin: 0;padding: 0">
+    <div style="padding:20px 10px;">
+      <Space>
+        <span>用户名：</span>
+        <Input prefix="ios-contact" placeholder="username" clearable style="width: 200px" />
+        <span>电话号：</span>
+        <Input  placeholder="Enter phone" style="width: auto" />
+        <Button @click="searchUser"   type="primary" shape="circle" icon="ios-search">查询</Button>
+        <Button type="primary" ghost  @click="showAddDialog">新增</Button>
+
+      </Space>
+    </div>
+<!--    表格内容-->
+    <div style="width: 80vw; height: 78vh; margin: 0; padding: 0">
+      <Table border :loading="loadingTable" ref="selection" :columns="columns" :data="states.data" style="height: 72vh ;text-align: center;" :row-class-name="setRowClassName"  >
+
+
+        <template #status="{ row, index }">
+          <Switch size="large" v-model="states.data[index].accountNoLocked" :before-change="handleBeforeSwitchChange">
+            <template #open>
+              <span>开启</span>
+            </template>
+            <template #close>
+              <span>关闭</span>
+            </template>
+          </Switch>
+        </template>
+
+        <template #action="{ row, index }">
+          <Button type="primary" size="small" style="margin-right: 5px" @click="showEditDialog(index, row)">详情</Button>
+          <Button type="error" size="small" @click="showDeleteDialog(index, row)">删除</Button>
+        </template>
+
+
+      </Table>
+      <div style="height: 6vh ;text-align: left;padding-top: 20px">
+        <Page :total="40" size="small" show-elevator show-sizer />
+      </div>
+
+
+    </div>
+
+<!--    对话框-->
+    <div>
+      <Modal
+          v-model="editDialog"
+          title="编辑"
+          @on-ok="editOk"
+          @on-cancel="editCancel">
+        <div style="">
+          <div style="margin-bottom: 10px">
+            <span>
+              用户名：<Input v-model="updateData.username" placeholder="Enter something..." style="width: 180px" />
+            </span>
+            <span style="margin-left: 20px">
+              <label>电话：</label><Input v-model="updateData.phone" placeholder="Enter something..." style="width: 180px" />
+            </span>
+          </div>
+          <div style="margin-bottom: 10px">
+            <span>
+              性别：
+              <RadioGroup v-model="sex">
+                <Radio label="男"></Radio>
+                <Radio label="女"></Radio>
+              </RadioGroup>
+            </span>
+            <span style="margin-left: 98px">
+              角色：
+                  <Select v-model="roleSingle" style="width:200px">
+                  <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                  </Select>
+            </span>
+          </div>
+
+          <div style="margin-bottom: 10px">邮箱：<Input v-model="updateData.email" placeholder="Enter something..." style="width: 435px" /></div>
+
+          <div style="margin-bottom: 10px">地址：<Input v-model="updateData.address" placeholder="Enter something..." style="width: 435px" /></div>
+
+          <div style="margin-bottom: 10px">简介：<Input v-model="updateData.description" type="textarea" placeholder="Enter something..." style="width: 435px" /></div>
+        </div>
+      </Modal>
+
+
+      <Modal
+          v-model="deleteDialog"
+          title="删除"
+          @on-ok="deleteOk"
+          @on-cancel="deleteCancel">
+        <p>请问是否要删除xxx数据</p>
+      </Modal>
+
+      <Modal v-model="addDialog" title="新增用户信息" @on-ok="addOk" @on-cancel="addCancel" >
+        <div>
+          <div>用户名：<Input v-model="addData.username" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
+          <div style="margin-left: 15px">密码：<Input v-model="addData.password" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" type="password"/></div>
+          <div style="margin-left: 15px">地址：<Input v-model="addData.address" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
+          <div style="margin-left: 15px">电话：<Input v-model="addData.phone" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
+          <div style="margin-left: 15px">邮箱：<Input v-model="addData.email" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
+          <div style="margin-left: 15px">性别：              <RadioGroup v-model="sex" style="margin-bottom: 10px">
+            <Radio label='男'></Radio>
+            <Radio label='女'></Radio>
+          </RadioGroup></div>
+          <div style="margin-left: 15px">年龄：<Input v-model="addData.age" placeholder="Enter something..." style="width: 250px" type="number" /></div>
+
+
+
+        </div>
+      </Modal>
+    </div>
+
+  </div>
 </template>
+
+<script setup>
+import {Page, Radio, RadioGroup, Space, Switch} from "view-ui-plus";
+import requests from "../../public/request.js"
+import {reactive, ref} from "vue";
+import message from "view-ui-plus/src/components/message/index.js";
+import {onMounted, onBeforeMount} from "vue";
+import modal from "view-ui-plus/src/components/modal/index.js";
+
+    const currentPage = ref(1)           // 当前页码
+    const pageSize = ref(10)              // 每页显示的数据条数
+    const addDialog = ref(false)
+    const value = ref(true)
+    const deleteDialog = ref(false)
+    const editDialog = ref(false)
+    const token = window.localStorage.getItem('token')
+    const AllUser = reactive({
+      page:1,
+      limit: 10,
+      search: null,
+      role: null
+    })
+    const columns = reactive( [
+      {
+        type: "selection",
+        width: 60,
+        align: "center"
+      },
+      {
+        title: "用户名",
+        key: "username",
+        align: "center"
+      },
+      {
+        title: "账号",
+        key: "jobId",
+        width: 125,
+        align: "center"
+      },
+      {
+        title: "电话",
+        key: "phone",
+        width: 125,
+        align: "center"
+      },
+      {
+        title: "邮箱",
+        key: "email",
+        align: "center"
+      },
+      {
+        title: "状态",
+        slot: "status",
+        width: 80,
+        align: "center",
+      },
+      {
+        title: "操作",
+        slot: "action",
+        width: 150,
+        align: "center"
+      }
+    ])
+    const states = reactive({
+        data:[]
+    })
+    const loadingTable = ref(true)
+    const sex = ref('男')
+    const roleSingle = ref(1)
+    const updateData = reactive({
+      id: 0,
+      username: '',
+      address: '',
+      phone: '',
+      email: '',
+      age: '',
+      signature: '',
+      sex: '',
+      avatar: '',
+      nickname: '',
+      description: '',
+      enabled: true,
+      isExpired: false,
+      passwordExpired: false,
+      recommend: false,
+      isLocked: false
+    })
+    const cityList= reactive([
+      {
+        value: 1,
+        label: '管理员'
+      },
+      {
+        value: 2,
+        label: '老师'
+      },
+      {
+        value: 3,
+        label: '学生'
+      }
+      ])
+    const userLock = reactive({
+      id: -1,
+      isLock: 1
+    })
+
+/**
+ * 配置代码
+ */
+message.config({
+  background: true
+})
+function setRowClassName(row, index) {
+  return 'custom-row';
+}
+
+onMounted(() => {
+getAll()
+})
+
+/**
+ * 方法函数
+ */
+
+function getAll() {
+  requests.userAllCurrent(AllUser,token).then((res)=>{
+    // states.data = res.data.data
+    // console.log(res.data.data)
+    loadingTable.value = false
+    for (let i = 0; i < res.data.data.length; i++) {
+      states.data[i] = res.data.data[i].user
+    }
+    console.log(res)
+  })
+}
+
+ function handleSelectAll(status) {
+  this.$refs.selection.selectAll(status);
+}
+
+function handleBeforeSwitchChange(index, row) {
+  return new Promise((resolve) => {
+    this.$Modal.confirm({
+      title: '切换确认',
+      content: '您确认要切换开关状态吗？',
+      onOk: () => {
+        resolve();
+        message.success('切换成功')
+      }
+    })
+  })
+}
+
+function handlePageChange(newPage) {
+  this.currentPage = newPage;   // 更新当前页码
+}
+
+const addData = reactive({
+  username: '',
+  password: '',
+  address: '',
+  phone: '',
+  email: '',
+  sex: 1,
+  age: ''
+})
+function showAddDialog(){
+  addDialog.value = true
+
+}
+function addOk () {
+  if (sex.value === '男') {
+    addData.sex = 1
+  }else {
+    addData.sex = 0
+  }
+  requests.userAdd(addData, token).then((res)=>{
+    if (res.data.code===200) {
+      message.success('新增成功')
+      getAll()
+    }
+    else {
+      message.error('新增失败')
+    }
+  })
+}
+
+function addCancel () {
+   message.info('取消新增')
+}
+
+const deleteId = ref(0)
+function showDeleteDialog(index, row){
+  deleteDialog.value = true
+  deleteId.value = row.id
+}
+function deleteOk(){
+  deleteDialog.value = false;
+  console.log(deleteId.value)
+  requests.userDelete(deleteId.value, token).then((res)=>{
+    if (res.data.code === 200) {
+      message.success('删除成功')
+    }else {
+      message.error('删除失败')
+    }
+  })
+
+}
+function deleteCancel(){
+  deleteDialog.value = false;
+  message.info('取消删除')
+}
+
+function showEditDialog(index, row){
+  editDialog.value = true
+  updateData.id = row.id
+  updateData.username = row.username
+  updateData.address = row.address
+  updateData.phone = row.phone
+  updateData.email = row.email
+  updateData.age = row.age
+  updateData.signature = row.signature
+  updateData.sex = row.sex
+  updateData.avatar = row.avatar
+  updateData.nickname = row.nickname
+  updateData.description = row.description
+  if (row.sex === 1) {
+    sex.value = '男'
+  }else {
+    sex.value = '女'
+  }
+}
+function editOk(){
+  editDialog.value = false;
+  requests.userEdit(updateData,token).then((res)=>{
+    console.log("editResult:",res)
+    console.log("updateData:",updateData)
+    if (res.data.code === 200) {
+      message.success('修改成功')
+      getAll()
+    }
+    else {
+      message.error('修改失败')
+    }
+  })
+
+}
+function editCancel(){
+  editDialog.value = false;
+}
+
+
+
+function searchUser(){
+  requests.userCurrent(null,token).then((res)=>{
+    console.log(res)
+  })
+}
+
+
+</script>

src/public/request.js

@@ -206,10 +206,12 @@ const userDelete = (id, token) => {
     return axios({
         url: api + "/user/delete",
         method: "put",
-        data: id,
+        data: {
+            id: id
+        },
         headers: {
             'Authorization':'Bearer '+token,
-            'Content-Type': 'application/json;charset=utf-8',  //?
+
             'Timestamp': getCurrentTimestamp()
         }
     })