From a8a3ce85b50ab37482a556bfdf3c093e1b3e9373 Mon Sep 17 00:00:00 2001
From: zhangqi <727393967@qq.com>
Date: Tue, 9 Sep 2025 15:33:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BF=AE=E6=94=B9=E8=B5=84?=
 =?UTF-8?q?=E6=96=99=E5=92=8C=E4=BF=AE=E6=94=B9=E5=AF=86=E7=A0=81=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/login.js             |  19 +++
 src/views/home.vue           |  12 +-
 src/views/personalCenter.vue | 297 +++++++++++++++++++++++++++++++----
 3 files changed, 291 insertions(+), 37 deletions(-)

diff --git a/src/api/login.js b/src/api/login.js
index c6b62d8..d1a7519 100644
--- a/src/api/login.js
+++ b/src/api/login.js
@@ -30,3 +30,22 @@ export function initInfo(data) {
   })
 }
 
+// 修改密码
+export function updatePassword(data) {
+  return request({
+    url: '/frame/optr/passwd.htm',
+    method: 'post',
+    type: 'application/x-www-form-urlencoded',
+    data
+  })
+}
+
+// 修改资料
+export function updateInfo(data) {
+  return request({
+    url: '/frame/optr/edit.htm',
+    method: 'post',
+    type: 'application/x-www-form-urlencoded',
+    data
+  })
+}
diff --git a/src/views/home.vue b/src/views/home.vue
index 59d8215..acacfc5 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -112,11 +112,11 @@
           <li v-for="(item, index) in dataUpdateList" :key="index" @click="turnDetailPage(item)">
             <div class="date">
               <p>{{ item.voyage_end_date.slice(8, 10) }}</p>
-              <span class="text-ellipsis--4-lines">{{ item.voyage_end_date.slice(0, 7) }}</span>
+              <span class="text-ellipsis--3-lines">{{ item.voyage_end_date.slice(0, 7) }}</span>
             </div>
             <div class="des">
               <p>{{ item.voyage_name }}</p>
-              <span class="text-ellipsis--4-lines">{{ item.voyage_remark }}</span>
+              <span class="text-ellipsis--3-lines">{{ item.voyage_remark }}</span>
             </div>
           </li>
         </ul>
@@ -124,11 +124,11 @@
           <li v-for="(item, index) in sampleDataUpdateList" :key="index">
             <div class="date">
               <p>{{ item.create_time.slice(8, 10) }}</p>
-              <span class="text-ellipsis--4-lines">{{ item.create_time.slice(0, 7) }}</span>
+              <span class="text-ellipsis--3-lines">{{ item.create_time.slice(0, 7) }}</span>
             </div>
             <div class="des">
               <p>{{ item.dataset_name }}</p>
-              <span class="text-ellipsis--4-lines">{{ item.job_type }}</span>
+              <span class="text-ellipsis--3-lines">{{ item.job_type }}</span>
             </div>
           </li>
         </ul>
@@ -1289,9 +1289,9 @@ export default {
   position: relative;
 }
 
-.text-ellipsis--4-lines {
+.text-ellipsis--3-lines {
   /* 限制显示的行数 */
-  -webkit-line-clamp: 4;
+  -webkit-line-clamp: 3;
   /* 将对象作为弹性伸缩盒子模型显示（必要） */
   display: -webkit-box;
   /* 设置或检索伸缩盒对象的子元素的排列方式为垂直（必要） */
diff --git a/src/views/personalCenter.vue b/src/views/personalCenter.vue
index 8c709a1..2dc503b 100644
--- a/src/views/personalCenter.vue
+++ b/src/views/personalCenter.vue
@@ -19,16 +19,16 @@
               <img v-else src="../../static/images/arrow_a.png" alt="">
               <p>我的信息</p>
             </div>
-            <div class="left1" :class="show1 ? 'active' : ''">
-              <img v-if="!show1" src="../../static/images/arrow.png" alt="">
-              <img v-else src="../../static/images/arrow_a.png" alt="">
-              <p>我的收藏</p>
-            </div>
-            <div class="left1" :class="show2 ? 'active' : ''">
-              <img v-if="!show2" src="../../static/images/arrow.png" alt="">
-              <img v-else src="../../static/images/arrow_a.png" alt="">
-              <p>我的订单</p>
-            </div>
+<!--            <div class="left1" :class="show1 ? 'active' : ''">-->
+<!--              <img v-if="!show1" src="../../static/images/arrow.png" alt="">-->
+<!--              <img v-else src="../../static/images/arrow_a.png" alt="">-->
+<!--              <p>我的收藏</p>-->
+<!--            </div>-->
+<!--            <div class="left1" :class="show2 ? 'active' : ''">-->
+<!--              <img v-if="!show2" src="../../static/images/arrow.png" alt="">-->
+<!--              <img v-else src="../../static/images/arrow_a.png" alt="">-->
+<!--              <p>我的订单</p>-->
+<!--            </div>-->
 
             <!-- <el-menu
             default-active="2"
@@ -58,58 +58,59 @@
               <div class="con_left">
                 <div class="left_top">
                   <img src="../../static/images/tx.png" alt="">
-                  <p>马小云</p>
+                  <p>{{ info.optr_name }}</p>
                 </div>
                 <div class="list_mid">
                   <div class="mid_1">
-                    <p>最后一次登录</p>
-                    <span>2023年2月10日 14:23:09</span>
+                    <p>性别</p>
+                    <span>{{ info.optr_sex }}</span>
                   </div>
                   <div class="mid_2">
-                    <p>最后一次订单</p>
-                    <span>2023年2月10日 14:23:09</span>
+                    <p>状态</p>
+                    <span>{{ getStatusText(info.optr_status) }}</span>
                   </div>
                 </div>
                 <div class="list_dibu">
-                  <div class="dibu_1">
+                  <div class="dibu_1" @click="updateInfoVisible = true">
                     <img src="../../static/images/bianji.png" alt="">
                     <p>修改资料</p>
                   </div>
-                  <div class="dibu_1">
+                  <div class="dibu_1" @click="updatePwdVisible = true">
                     <img src="../../static/images/mima2.png" alt="">
                     <p>修改密码</p>
                   </div>
                 </div>
               </div>
               <div class="con_right">
+
                 <div class="right1">
-                  <p>注册时间</p>
-                  <span>2022年2月10日  13:23:30</span>
+                  <p>联系地址</p>
+                  <span>{{ info.optr_addr }}</span>
                 </div>
 
                 <div class="right1">
-                  <p>所在单位</p>
-                  <span>中科院深海科学与工程研究所</span>
+                  <p>联系电话</p>
+                  <span>{{ info.optr_mobile }}</span>
                 </div>
 
                 <div class="right1">
-                  <p>联系方式</p>
-                  <span>+86  13590998987</span>
-                </div>
-
-                <div class="right1">
-                  <p>身份</p>
-                  <span>样品管理员</span>
+                  <p>办公电话</p>
+                  <span>{{ info.optr_tel }}</span>
                 </div>
 
                 <div class="right1">
                   <p>邮箱</p>
-                  <span>sysadmin@idsse.ac.cn</span>
+                  <span>{{ info.optr_email }}</span>
+                </div>
+
+                <div class="right1">
+                  <p>身份</p>
+                  <span>{{ info.optr_post }}</span>
                 </div>
 
                 <div class="right1">
                   <p>备注</p>
-                  <span>系统自动生成用户注册</span>
+                  <span>{{ info.optr_desc }}</span>
                 </div>
 
               </div>
@@ -119,10 +120,109 @@
       </div>
     </div>
 
+    <!--    修改密码-->
+    <el-dialog title="修改密码" :visible.sync="updatePwdVisible" :before-close="handleClosePwd" width="30%">
+      <el-form ref="updatePwdForm" :model="updatePwdForm" :rules="updatePwdRules">
+        <el-form-item label="旧密码" prop="old_password">
+          <el-input v-model="updatePwdForm.old_password" show-password />
+        </el-form-item>
+        <el-form-item label="新密码" prop="new_pass">
+          <el-input v-model="updatePwdForm.new_pass" show-password />
+        </el-form-item>
+        <el-form-item label="确认新密码" prop="new_pass_again">
+          <el-input v-model="updatePwdForm.new_pass_again" show-password />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleClosePwd">取 消</el-button>
+        <el-button type="primary" @click="submitUpdatePwdForm('updatePwdForm')">确 定</el-button>
+      </div>
+    </el-dialog>
+    <!--    修改资料-->
+    <el-dialog title="修改资料" :visible.sync="updateInfoVisible" :before-close="handleCloseInfo" width="50%">
+      <el-form ref="updateInfoForm" :model="updateInfoForm" :rules="updateInfoRules" label-width="120px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="姓名" prop="optr_name">
+              <el-input v-model="updateInfoForm.optr_name" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="性别" prop="optr_sex">
+              <el-radio-group v-model="updateInfoForm.optr_sex">
+                <el-radio v-for="(item,index) in frameSex" :key="index" :label="item.dict_value">{{ item.dict_text }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="邮箱" prop="optr_email">
+              <el-input v-model="updateInfoForm.optr_email" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态" prop="optr_status">
+              <el-radio-group v-model="updateInfoForm.optr_status">
+                <el-radio v-for="(item,index) in frameStatus" :key="index" :label="item.dict_value">{{ item.dict_text }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="联系电话" prop="optr_mobile">
+              <el-input v-model="updateInfoForm.optr_mobile" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="办公电话" prop="optr_tel">
+              <el-input v-model="updateInfoForm.optr_tel" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="联系地址" prop="optr_addr">
+              <el-input v-model="updateInfoForm.optr_addr" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="传真号码" prop="optr_fax">
+              <el-input v-model="updateInfoForm.optr_fax" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="部门编号" prop="optr_dept">
+              <el-input v-model="updateInfoForm.optr_dept" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="邮政编码" prop="optr_post">
+              <el-input v-model="updateInfoForm.optr_post" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="备注信息" prop="optr_desc">
+              <el-input v-model="updateInfoForm.optr_desc" type="textarea" :rows="3" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleCloseInfo">取 消</el-button>
+        <el-button type="primary" @click="submitUpdateInfoForm('updateInfoForm')">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { initInfo, updatePassword, updateInfo } from '@/api/login'
 
 export default {
   name: 'Person',
@@ -133,7 +233,141 @@ export default {
     return {
       show: true,
       show1: false,
-      show2: false
+      show2: false,
+      info: {},
+      frameStatus: [],
+      frameSex: [],
+      updatePwdVisible: false,
+      updatePwdForm: {
+        old_password: '',
+        new_pass: '',
+        new_pass_again: ''
+      },
+      updatePwdRules: {
+        old_password: [
+          { required: true, message: '请输入旧密码', trigger: 'blur' }
+        ],
+        new_pass: [
+          { required: true, message: '请输入新密码', trigger: 'blur' },
+          {
+            validator: (rule, value, callback) => {
+              if (value === '') {
+                callback(new Error('请输入新密码'))
+              } else {
+                if (this.updatePwdForm.new_pass_again !== '') {
+                  this.$refs.updatePwdForm.validateField('new_pass_again')
+                }
+                callback()
+              }
+            },
+            trigger: 'blur'
+          }
+        ],
+        new_pass_again: [
+          { required: true, message: '请再次输入新密码', trigger: 'blur' },
+          {
+            validator: (rule, value, callback) => {
+              if (value === '') {
+                callback(new Error('请再次输入密码'))
+              } else if (value !== this.updatePwdForm.new_pass) {
+                callback(new Error('两次输入密码不一致!'))
+              } else {
+                callback()
+              }
+            },
+            trigger: 'blur'
+          }
+        ]
+      },
+      updateInfoVisible: false,
+      updateInfoForm: {
+        tsy_id: '',
+        optr_name: '',
+        optr_sex: '',
+        optr_status: '',
+        optr_email: '',
+        optr_mobile: '',
+        optr_tel: '',
+        optr_addr: '',
+        optr_fax: '',
+        optr_dept: '',
+        optr_post: '',
+        optr_desc: ''
+      },
+      updateInfoRules: []
+    }
+  },
+  created() {
+    this.getUserInfo()
+  },
+  methods: {
+    getUserInfo() {
+      initInfo().then(res => {
+        const data = res.map.FrameOptr
+        const frameDictArray = res.map.FrameDictArray
+        this.frameStatus = this.filterDictItems(frameDictArray, "FrameStatus")
+        this.frameSex = this.filterDictItems(frameDictArray, "FrameSex")
+
+        this.info = data
+
+        this.updateInfoForm.tsy_id = data.tsy_id
+        this.updateInfoForm.optr_name = data.optr_name
+        this.updateInfoForm.optr_sex = data.optr_sex
+        this.updateInfoForm.optr_status = data.optr_status
+        this.updateInfoForm.optr_email = data.optr_email
+        this.updateInfoForm.optr_mobile = data.optr_mobile
+        this.updateInfoForm.optr_tel = data.optr_tel
+        this.updateInfoForm.optr_addr = data.optr_addr
+        this.updateInfoForm.optr_fax = data.optr_fax
+        this.updateInfoForm.optr_dept = data.optr_dept
+        this.updateInfoForm.optr_post = data.optr_post
+        this.updateInfoForm.optr_desc = data.optr_desc
+      })
+    },
+    filterDictItems(data, dictName) {
+      return data.filter(item => item.dict_name === dictName)
+    },
+    getStatusText(status) {
+      const matchedItem = this.frameStatus.find(item =>
+        item.dict_value === status
+      )
+      return matchedItem ? matchedItem.dict_text : ''
+    },
+    submitUpdatePwdForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          updatePassword({
+            tsy_id: this.info.tsy_id,
+            old_password: this.updatePwdForm.old_password,
+            new_pass: this.updatePwdForm.new_pass
+          }).then(res => {
+            if (res.success) {
+              this.$message.success('修改成功,请退出后重新登录')
+              this.handleClosePwd()
+            }
+          })
+        }
+      })
+    },
+    handleClosePwd() {
+      this.$refs.updatePwdForm.resetFields()
+      this.updatePwdVisible = false
+    },
+    submitUpdateInfoForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          updateInfo(this.updateInfoForm).then(res => {
+            if (res.success) {
+              this.$message.success('修改成功,请退出后重新登录')
+              this.handleCloseInfo()
+            }
+          })
+        }
+      })
+    },
+    handleCloseInfo() {
+      this.$refs.updateInfoForm.resetFields()
+      this.updateInfoVisible = false
     }
   }
 }
@@ -341,6 +575,7 @@ export default {
                     display: flex;
                     align-items: center;
                     justify-content: center;
+                    cursor: pointer;
                     img{
                       width: auto;
                       display: block;