From 57057fb78d417d1b85e823391e9b77185fb9c828 Mon Sep 17 00:00:00 2001
From: ww <ww.cn>
Date: Thu, 18 Jul 2024 11:39:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9E=83=E5=9C=BE=E7=89=88=20for=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/components/Info keep.vue       | 287 ++++++++++++++++++
 src/views/home/components/Info.vue            | 194 +++---------
 src/views/home/components/Status.vue          |  42 ++-
 src/views/home/components/Welcome.vue         |  21 +-
 .../home/components/infoContainer/index.vue   |  47 +++
 src/views/home/components/myDrawer/index.vue  | 120 ++++++++
 src/views/home/index.vue                      |  15 +-
 7 files changed, 559 insertions(+), 167 deletions(-)
 create mode 100644 src/views/home/components/Info keep.vue
 create mode 100644 src/views/home/components/infoContainer/index.vue
 create mode 100644 src/views/home/components/myDrawer/index.vue

diff --git a/src/views/home/components/Info keep.vue b/src/views/home/components/Info keep.vue
new file mode 100644
index 0000000..d0c638b
--- /dev/null
+++ b/src/views/home/components/Info keep.vue	
@@ -0,0 +1,287 @@
+<script setup>
+import conheader from '@/views/home/components/ConHeader.vue'
+import { onMounted, ref, computed } from 'vue'
+import { userIdenChangeService } from '@/api/user/user.js'
+import { Edit } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+const props = defineProps({
+  data: {
+    type: Object,
+  },
+})
+const formModel = ref()
+const newFormModel = ref()
+const loading = ref()
+//抽屉true
+const editDialogVisible = ref(false)
+const editForm = ref({
+  name: '',
+  content: '',
+})
+const readonlyField = computed(() => editForm.value.name)
+const editRowIndex = ref()
+const openEditDialog = (row) => {
+  editForm.value = { ...row }
+  editRowIndex.value = formModel.value.indexOf(row)
+  editDialogVisible.value = true
+}
+//确认时将表单数据回显
+const saveEdit = () => {
+  const index = editRowIndex.value
+  if (index !== -1) {
+    formModel.value[index] = { ...editForm.value }
+  }
+  // console.log(editRowIndex.value, 'edit')
+  editDialogVisible.value = false
+}
+//取消
+const cancelEdit = () => {
+  editDialogVisible.value = false
+  //重置表单
+  editForm.value = {
+    name: '',
+    content: '',
+  }
+}
+const formValue = []
+onMounted(() => {
+  if (props.data.roleId[0] === '1') {
+    formModel.value = [
+      { par: 'name', name: '姓名', content: props.data.name },
+      { par: 'sex', name: '性别', content: props.data.sex },
+      { par: 'nationality', name: '民族', content: props.data.nationality },
+      { par: 'profession', name: '专业', content: props.data.profession },
+      { par: 'education', name: '学历', content: props.data.education },
+      {
+        par: 'academicDegree',
+        name: '学位',
+        content: props.data.academicDegree,
+      },
+      {
+        par: 'professionalTitle',
+        name: '职称',
+        content: props.data.professionalTitle,
+      },
+      {
+        par: 'emergencyContact',
+        name: '手机号',
+        content: props.data.emergencyContact,
+      },
+      {
+        par: 'joinWorkTime',
+        name: '参加工作时间',
+        content: props.data.joinWorkTime,
+      },
+      {
+        par: 'politicalStatus',
+        name: '政治面貌',
+        content: props.data.politicalStatus,
+      },
+    ]
+    newFormModel.value = { ...formModel.value }
+    formValue.value = formModel.value
+  } else if (props.data.roleId[0] === '2') {
+    formModel.value = [
+      { par: 'name', name: '姓名', content: props.data.name },
+      { par: 'sex', name: '性别', content: props.data.sex },
+      { par: 'nationality', name: '民族', content: props.data.nationality },
+      { par: 'number', name: '学号', content: props.data.number },
+      { par: 'birthday', name: '生日', content: props.data.birthday },
+      { par: 'phone', name: '手机号', content: props.data.phone },
+      { par: 'faculty', name: '院系', content: props.data.faculty },
+      { par: 'major', name: '专业', content: props.data.major },
+      { par: 'yearAge', name: '入学年份', content: props.data.yearAge },
+      { par: 'className', name: '班级', content: props.data.className },
+    ]
+    newFormModel.value = { ...formModel.value }
+    formValue.value = formModel.value
+  }
+  // else {
+  //   formModel.value = [
+  //     { name: '姓名', content: res.data.name },
+  //     { name: '性别', content: res.data.id },
+  //     { name: '学号', content: 9.9 },
+  //     { name: '小米电脑', content: 9.9 },
+  //     { name: '小米电脑', content: 9.9 },
+  //     { name: '小米电脑', content: 9.9 },
+  //     { name: '小米电脑', content: 9.9 },
+  //     { name: '小米电脑', content: 9.9 },
+  //     { name: '小米电脑', content: 9.9 },
+  //   ]
+  // }
+})
+// 编辑1
+const drawer2 = ref(false)
+const direction = ref('rtl')
+const data1 = ref([])
+
+const confirmClick = () => {
+  drawer2.value = false
+  data1.value = formModel.value
+  const values = {}
+  data1.value.map((item) => (values[item.par] = item.content))
+  const dataToSend = {
+    ...values,
+    roleId: props.data.roleId,
+    id: props.data.id,
+    userId: props.data.userId,
+  }
+  userIdenChangeService(dataToSend)
+    .then(() => {
+      ElMessage.success('修改成功')
+    })
+    .catch((error) => {
+      console.log(error)
+    })
+}
+function cancelClick() {
+  drawer2.value = false
+}
+</script>
+<template>
+  <div class="info_container" style="width: 95%; height: 306px">
+    <conheader title="个人信息" v-model="drawer2">
+      <template #drawer>
+        <el-drawer v-model="drawer2" :direction="direction" class="table">
+          <template #header>
+            <h4>个人信息</h4>
+          </template>
+          <template #default>
+            <div>
+              <el-table :data="formModel" style="width: 100%">
+                <el-table-column prop="name" label="标题"></el-table-column>
+                <el-table-column prop="content" label="内容"></el-table-column>
+                <el-table-column label="操作">
+                  <template #default="{ row }">
+                    <el-button
+                      type="primary"
+                      class="el-icon-edit"
+                      :icon="Edit"
+                      plain
+                      circle
+                      @click="openEditDialog(row)"
+                    ></el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </template>
+          <template #footer>
+            <div style="flex: auto">
+              <el-button @click="cancelClick" size="medium">取消</el-button>
+              <el-button type="primary" @click="confirmClick">确认</el-button>
+            </div>
+          </template>
+        </el-drawer>
+        <el-dialog
+          v-model="editDialogVisible"
+          title="详细信息"
+          style="width: 800px; text-align: center"
+          :readonly-field="readonlyField"
+        >
+          <el-form :model="editForm" label-width="80px">
+            <el-form-item label="名称" prop="name">
+              <el-input v-model="editForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="内容" prop="content">
+              <template v-if="editForm.name !== '性别'">
+                <el-input v-model="editForm.content"></el-input>
+              </template>
+              <template v-else>
+                <el-select
+                  v-model="editForm.content"
+                  filterable
+                  placeholder="Select"
+                >
+                  <el-option
+                    v-for="item in [
+                      {
+                        value: '男',
+                        label: '男',
+                      },
+                      {
+                        value: '女',
+                        label: '女',
+                      },
+                    ]"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </template>
+            </el-form-item>
+          </el-form>
+          <template #footer>
+            <div>
+              <el-button @click="cancelEdit">取消</el-button>
+              <el-button type="primary" @click="saveEdit">保存</el-button>
+            </div>
+          </template>
+        </el-dialog>
+      </template>
+    </conheader>
+    <div
+      class="info_content"
+      style="width: 60%; height: 244px"
+      v-loading="loading"
+    >
+      <div class="item" :key="item.name" v-for="item in newFormModel">
+        <div class="name">{{ item.name }}</div>
+        <div class="content">{{ item.content }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.info_container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.info_content {
+  display: grid;
+  display: wrap;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px; /* 设置元素之间的间隔 */
+}
+.item {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.name {
+  font-family: Inter, Inter;
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.4);
+  line-height: 22px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.content {
+  font-family: Inter, Inter;
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.9);
+  line-height: 22px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.table {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.custom-input {
+  margin-bottom: 20px;
+  height: 40px; /* 自定义输入框高度 */
+  padding: 0 10px; /* 自定义输入框内边距 */
+  font-size: 16px; /* 自定义输入框字体大小 */
+  /* 其他样式自定义 */
+}
+</style>
diff --git a/src/views/home/components/Info.vue b/src/views/home/components/Info.vue
index ca1866a..05f4894 100644
--- a/src/views/home/components/Info.vue
+++ b/src/views/home/components/Info.vue
@@ -1,52 +1,20 @@
 <script setup>
+import ellipsis from '@/assets/images/ellipsis.png'
 import conheader from '@/views/home/components/ConHeader.vue'
-import { onMounted, ref, computed } from 'vue'
+import { ref, computed } from 'vue'
 import { userIdenChangeService } from '@/api/user/user.js'
-import { Edit } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
-
+import InfoContainer from './infoContainer/index.vue'
+import myDrawer from './myDrawer/index.vue'
 const props = defineProps({
   data: {
     type: Object,
   },
 })
+// ============== formModel
 const formModel = ref()
-const loading = ref()
-//抽屉true
-const editDialogVisible = ref(false)
-const editForm = ref({
-  name: '',
-  content: '',
-})
-
-const readonlyField = computed(() => editForm.value.name)
-const editRowIndex = ref()
-const openEditDialog = (row) => {
-  editForm.value = { ...row }
-  editRowIndex.value = formModel.value.indexOf(row)
-  editDialogVisible.value = true
-}
-//确认时将表单数据回显
-const saveEdit = () => {
-  const index = editRowIndex.value
-  if (index !== -1) {
-    formModel.value[index] = { ...editForm.value }
-  }
-  console.log(editRowIndex.value, 'edit')
-  editDialogVisible.value = false
-}
-//取消
-const cancelEdit = () => {
-  editDialogVisible.value = false
-  //重置表单
-  editForm.value = {
-    name: '',
-    content: '',
-  }
-}
-
-onMounted(() => {
-  if (props.data.roleId[0] === '1') {
+switch (+props.data.roleId[0]) {
+  case 1:
     formModel.value = [
       { par: 'name', name: '姓名', content: props.data.name },
       { par: 'sex', name: '性别', content: props.data.sex },
@@ -79,7 +47,8 @@ onMounted(() => {
         content: props.data.politicalStatus,
       },
     ]
-  } else if (props.data.roleId[0] === '2') {
+    break
+  case 2:
     formModel.value = [
       { par: 'name', name: '姓名', content: props.data.name },
       { par: 'sex', name: '性别', content: props.data.sex },
@@ -92,116 +61,23 @@ onMounted(() => {
       { par: 'yearAge', name: '入学年份', content: props.data.yearAge },
       { par: 'className', name: '班级', content: props.data.className },
     ]
-  }
-  // else {
-  //   formModel.value = [
-  //     { name: '姓名', content: res.data.name },
-  //     { name: '性别', content: res.data.id },
-  //     { name: '学号', content: 9.9 },
-  //     { name: '小米电脑', content: 9.9 },
-  //     { name: '小米电脑', content: 9.9 },
-  //     { name: '小米电脑', content: 9.9 },
-  //     { name: '小米电脑', content: 9.9 },
-  //     { name: '小米电脑', content: 9.9 },
-  //     { name: '小米电脑', content: 9.9 },
-  //   ]
-  // }
-})
+    break
+}
+// ==============
+
 // 编辑1
 const drawer2 = ref(false)
-const direction = ref('rtl')
-function cancelClick() {
-  drawer2.value = false
-}
-const data1 = ref([])
-const confirmClick = () => {
-  drawer2.value = false
-  data1.value = formModel.value
-  const values = {}
-  data1.value.map((item) => (values[item.par] = item.content))
-  const dataToSend = {
-    ...values,
-    roleId: props.data.roleId,
-    id: props.data.id,
-  }
-  console.log(dataToSend, 'datato111')
-  userIdenChangeService(dataToSend)
-    .then(() => {
-      ElMessage.success('修改成功')
-    })
-    .catch((error) => {
-      console.log(error)
-    })
-}
 </script>
 <template>
   <div class="info_container" style="width: 95%; height: 306px">
-    <conheader title="个人信息" v-model="drawer2">
-      <template #drawer>
-        <el-drawer v-model="drawer2" :direction="direction" class="table">
-          <template #header>
-            <h4>个人信息</h4>
-          </template>
-          <template #default>
-            <div>
-              <el-table :data="formModel" style="width: 100%">
-                <el-table-column prop="name" label="标题"></el-table-column>
-                <el-table-column prop="content" label="内容"></el-table-column>
-                <el-table-column label="操作">
-                  <template #default="{ row }">
-                    <el-button
-                      type="primary"
-                      class="el-icon-edit"
-                      :icon="Edit"
-                      plain
-                      circle
-                      @click="openEditDialog(row)"
-                    ></el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </div>
-          </template>
-          <template #footer>
-            <div style="flex: auto">
-              <el-button @click="cancelClick" size="medium">取消</el-button>
-              <el-button type="primary" @click="confirmClick">确认</el-button>
-            </div>
-          </template>
-        </el-drawer>
-        <el-dialog
-          v-model="editDialogVisible"
-          title="详细信息"
-          style="width: 800px; text-align: center"
-          :readonly-field="readonlyField"
-        >
-          <el-form :model="editForm" label-width="80px">
-            <el-form-item label="名称" prop="name">
-              <el-input v-model="editForm.name"></el-input>
-            </el-form-item>
-            <el-form-item label="内容" prop="content">
-              <el-input v-model="editForm.content"></el-input>
-            </el-form-item>
-          </el-form>
-          <template #footer>
-            <div>
-              <el-button @click="cancelEdit">取消</el-button>
-              <el-button type="primary" @click="saveEdit">保存</el-button>
-            </div>
-          </template>
-        </el-dialog>
-      </template>
-    </conheader>
-    <div
-      class="info_content"
-      style="width: 60%; height: 244px"
-      v-loading="loading"
-    >
-      <div class="item" :key="item.name" v-for="item in formModel">
-        <div class="name">{{ item.name }}</div>
-        <div class="content">{{ item.content }}</div>
+    <div class="info_title">
+      <div class="title_name">个人信息</div>
+      <div class="icon">
+        <img :src="ellipsis" @click="drawer2 = true" />
       </div>
     </div>
+    <InfoContainer :data="formModel"></InfoContainer>
+    <myDrawer v-model:drawer="drawer2" :data="formModel"></myDrawer>
   </div>
 </template>
 <style scoped>
@@ -243,11 +119,7 @@ const confirmClick = () => {
   font-style: normal;
   text-transform: none;
 }
-.table {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
+
 .custom-input {
   margin-bottom: 20px;
   height: 40px; /* 自定义输入框高度 */
@@ -255,4 +127,30 @@ const confirmClick = () => {
   font-size: 16px; /* 自定义输入框字体大小 */
   /* 其他样式自定义 */
 }
+
+/* ======= */
+.info_title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .title_name {
+    font-family: Inter, Inter;
+    font-weight: 400;
+    font-size: 20px;
+    color: rgba(0, 0, 0, 0.9);
+    line-height: 30px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
+}
+
+.icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 3px 3px 3px 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>
diff --git a/src/views/home/components/Status.vue b/src/views/home/components/Status.vue
index 863458d..db53eda 100644
--- a/src/views/home/components/Status.vue
+++ b/src/views/home/components/Status.vue
@@ -3,17 +3,15 @@ import add from '@/assets/images/add.png'
 // import { Plus } from '@element-plus/icons-vue'
 import tool from '@/utils/oss.js'
 import { userChangeService } from '@/api/user/user.js'
-const dialogFormVisible = ref(false)
-import { ref } from 'vue'
+import { ref, defineEmits } from 'vue'
+import { ElMessage } from 'element-plus'
 const props = defineProps({
   data: {
     type: Object,
   },
 })
-// const data = ref(props.data, 'dsfd')
 const imageUrl = ref('')
-//盒子隐藏
-const form = ref()
+const dialogFormVisible = ref(false)
 //表单校验
 // const rules = {
 //   username: [
@@ -37,7 +35,13 @@ const form = ref()
 //   ],
 //   code: [{ message: '验证码不能为空', trigger: 'blur' }],
 // }
-form.value = props.data
+const form = ref()
+//   {
+//   username: '',
+//   nickName: '',
+//   phone: '',
+// }
+form.value = { ...props.data }
 const formLabelWidth = '70px'
 //设置头像显示
 imageUrl.value = props.data.icon
@@ -48,7 +52,11 @@ const upload = async (option) => {
   imageUrl.value = url
   changeInfo()
 }
+const openInfo = () => {
+  dialogFormVisible.value = true
+}
 //修改用户信息
+const emit = defineEmits(['get-message'])
 const changeInfo = async () => {
   const userInfo = {
     phone: form.value.phone,
@@ -57,8 +65,18 @@ const changeInfo = async () => {
     icon: imageUrl.value,
   }
   const jsonData = JSON.stringify(userInfo)
-  await userChangeService(jsonData)
+  await userChangeService(jsonData).then(() => {
+    ElMessage.success('修改成功')
+    console.log(form.value.nickName, 'nickN')
+    emit('get-message', form.value.nickName)
+  })
+  dialogFormVisible.value = false
+}
+const cancleInfo = () => {
   dialogFormVisible.value = false
+  form.value = {
+    ...props.data,
+  }
 }
 </script>
 <template>
@@ -70,11 +88,7 @@ const changeInfo = async () => {
       <el-upload class="click" :http-request="upload" :show-file-list="false">
         <img :src="add" />
       </el-upload>
-      <div
-        class="info_content"
-        style="height: 58px"
-        @click="dialogFormVisible = true"
-      >
+      <div class="info_content" style="height: 58px" @click="openInfo">
         <div class="name">{{ props.data.username }}</div>
       </div>
     </div>
@@ -86,7 +100,7 @@ const changeInfo = async () => {
   >
     <el-form :model="form" :data="form" :rules="rules">
       <el-form-item label="用户名" :label-width="formLabelWidth">
-        <el-input v-model="form.username" autocomplete="off" />
+        <el-input :disabled="true" v-model="form.username" autocomplete="off" />
       </el-form-item>
       <el-form-item label="昵称" :label-width="formLabelWidth">
         <el-input v-model="form.nickName" autocomplete="off" />
@@ -97,7 +111,7 @@ const changeInfo = async () => {
     </el-form>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button @click="cancleInfo">取消</el-button>
         <el-button type="primary" @click="changeInfo">确认</el-button>
       </div>
     </template>
diff --git a/src/views/home/components/Welcome.vue b/src/views/home/components/Welcome.vue
index 0404e8b..d984815 100644
--- a/src/views/home/components/Welcome.vue
+++ b/src/views/home/components/Welcome.vue
@@ -1,17 +1,32 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue'
 const props = defineProps({
+  name: {
+    type: String,
+  },
   data: {
     type: Object,
   },
+  userData: {
+    type: Object,
+  },
+})
+
+const username = computed(() => {
+  if (props.userData.nickName) {
+    return props.userData.nickName
+  } else {
+    return props.userData.username
+  }
 })
-const username = ref()
 const daysOnJob = ref()
 const flagVisible = ref(true)
 onMounted(() => {
+  console.log(props.name, 'name')
+  console.log(props.data.nickName === props.name, 'sdf')
   username.value = props.data.name
   const hireDate = new Date(props.data.joinWorkTime)
-  console.log(props.data.name, 'welcome')
+  console.log(props.userData.nickName, 'welcome')
   // 计算教师工龄的计算属性
   const currentDate = new Date()
   const millisecondsPerDay = 1000 * 60 * 60 * 24
@@ -21,7 +36,7 @@ onMounted(() => {
 <template>
   <div class="nav_info">
     <div class="name">
-      {{ username }}
+      {{ props.name ? props.name : username }}
     </div>
     <div class="intro" v-if="props.data.roleId[0] === '1'">
       <p>今天是你工作的第{{ daysOnJob }}天~~</p>
diff --git a/src/views/home/components/infoContainer/index.vue b/src/views/home/components/infoContainer/index.vue
new file mode 100644
index 0000000..0d1725d
--- /dev/null
+++ b/src/views/home/components/infoContainer/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="info_content" style="width: 60%; height: 244px">
+    <div class="item" :key="item.name" v-for="item in data">
+      <div class="name">{{ item.name }}</div>
+      <div class="content">{{ item.content }}</div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+defineProps(['data'])
+</script>
+
+<style scoped>
+.info_content {
+  display: grid;
+  display: wrap;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px; /* 设置元素之间的间隔 */
+}
+.item {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.name {
+  font-family: Inter, Inter;
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.4);
+  line-height: 22px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.content {
+  font-family: Inter, Inter;
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.9);
+  line-height: 22px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+</style>
diff --git a/src/views/home/components/myDrawer/index.vue b/src/views/home/components/myDrawer/index.vue
new file mode 100644
index 0000000..4f8cae9
--- /dev/null
+++ b/src/views/home/components/myDrawer/index.vue
@@ -0,0 +1,120 @@
+<template>
+  <el-drawer v-model="drawer2" class="table">
+    <template #header>
+      <h4>个人信息</h4>
+    </template>
+    <template #default>
+      <div>
+        <el-table :data="parData" style="width: 100%">
+          <el-table-column prop="name" label="标题"></el-table-column>
+          <el-table-column prop="content" label="内容"></el-table-column>
+          <el-table-column label="操作">
+            <template #default="{ row }">
+              <el-button
+                type="primary"
+                class="el-icon-edit"
+                :icon="Edit"
+                plain
+                circle
+                @click="hanEdit(row)"
+              ></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </template>
+    <template #footer>
+      <div style="flex: auto">
+        <el-button @click="() => {}" size="medium">取消</el-button>
+        <el-button type="primary" @click="() => {}">确认</el-button>
+      </div>
+    </template>
+  </el-drawer>
+  <el-dialog
+    v-model="isDialog"
+    title="详细信息"
+    style="width: 800px; text-align: center"
+  >
+    <el-form :model="activeItem" label-width="80px">
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="activeItem.name"></el-input>
+      </el-form-item>
+      <el-form-item label="内容" prop="content">
+        <template v-if="activeItem.name !== '性别'">
+          <el-input v-model="activeItem.content"></el-input>
+        </template>
+        <template v-else>
+          <el-select
+            v-model="activeItem.content"
+            filterable
+            placeholder="Select"
+          >
+            <el-option
+              v-for="item in arr"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </template>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div>
+        <el-button @click="isDialog = false">取消</el-button>
+        <el-button type="primary" @click="saveEdit">保存</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { Edit } from '@element-plus/icons-vue'
+import { ref, reactive, watch } from 'vue'
+const props = defineProps(['drawer', 'data'])
+const emits = defineEmits(['update:drawer'])
+const arr = ref([
+  {
+    value: '男',
+    label: '男',
+  },
+  {
+    value: '女',
+    label: '女',
+  },
+])
+// ================同步
+const drawer2 = ref(props.drawer)
+watch(
+  () => drawer2.value,
+  (newVal) => emits('update:drawer', newVal),
+)
+watch(
+  () => props.drawer,
+  (newVal) => (drawer2.value = newVal),
+)
+const parData = ref(props.data.map((item: any) => ({ ...item })))
+// ==========
+
+const isDialog = ref(false)
+const activeItem = reactive({})
+const activeRow = ref()
+// 打开弹窗开始编辑
+function hanEdit(row: any) {
+  Object.assign(activeItem, row)
+  activeRow.value = row
+  isDialog.value = true
+}
+// 保存编辑
+function saveEdit() {
+  Object.assign(activeRow.value, activeItem)
+  console.log(parData.value, 'value')
+}
+</script>
+
+<style scoped>
+.table {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 2833a93..59116ea 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -19,7 +19,13 @@ const rightVisible = ref(false)
 userStore.getUserInfo().catch((error) => {
   console.log(error)
 })
+
 let sum: any = localStorage.getItem('sum') || '0'
+const name = ref()
+const getMessage = (msg) => {
+  name.value = msg
+  console.log(msg, 'msg')
+}
 onMounted(() => {
   // getData()
   sum = parseInt(sum) + 1
@@ -44,7 +50,12 @@ onMounted(() => {
   <div class="container">
     <div class="left">
       <div class="nav">
-        <welcome :data="infoData" v-if="flag"></welcome>
+        <welcome
+          :data="infoData"
+          :userData="data"
+          :name="name"
+          v-if="flag"
+        ></welcome>
       </div>
       <div class="info" style="width: 100%; height: 368px">
         <Info :data="infoData" v-if="flag"></Info>
@@ -54,7 +65,7 @@ onMounted(() => {
       </div>
     </div>
     <div v-if="rightVisible" class="right">
-      <status :data="data" v-if="flag"></status>
+      <status :data="data" @get-message="getMessage" v-if="flag"></status>
       <div class="class" style="width: 100%; height: 388px">
         <Class1></Class1>
       </div>