From 8dc946e81d80ccfc09ea8bd1820937d29bbc0bd1 Mon Sep 17 00:00:00 2001
From: jacky <phpcrazy@163.com>
Date: Mon, 22 Apr 2024 12:42:19 +0800
Subject: [PATCH] =?UTF-8?q?=E9=99=A2=E5=A3=AB=E5=A2=9E=E5=8A=A0=E9=A6=96?=
 =?UTF-8?q?=E5=AD=97=E6=AF=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/view/content/academician/index.vue        |  7 ++++-
 .../content/components/academicianEdit.vue    | 28 +++++++++++++++++--
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/view/content/academician/index.vue b/src/view/content/academician/index.vue
index 3d44c00..ffe29b3 100644
--- a/src/view/content/academician/index.vue
+++ b/src/view/content/academician/index.vue
@@ -24,7 +24,12 @@
       <!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
       <el-table ref="multipleTable" :data="tableData" row-key="ID" @selection-change="handleSelectionChange">
         <el-table-column fixed type="selection" width="40" align="center" />
-        <el-table-column align="left" label="ID" min-width="60" prop="ID" />
+        <el-table-column align="left" label="ID" min-width="40" prop="ID" />
+        <el-table-column align="left" label="首字母" min-width="50" prop="headChar">
+          <template #default="scope">
+            <el-text size="large" tag="b">{{ scope.row.headChar }}</el-text>
+          </template>
+        </el-table-column>
         <el-table-column align="left" label="头像" min-width="120" prop="avatar">
           <template #default="scope">
             <el-image v-if="scope.row.avatar" :src="scope.row.avatar" class="file" fit="cover"
diff --git a/src/view/content/components/academicianEdit.vue b/src/view/content/components/academicianEdit.vue
index bf5636e..0f68bc0 100644
--- a/src/view/content/components/academicianEdit.vue
+++ b/src/view/content/components/academicianEdit.vue
@@ -23,7 +23,13 @@
                   <el-input v-model="editForm.name" autocomplete="off" style="width: 100%" />
                 </el-form-item>
               </el-col>
-              <el-col :span="12">
+              <el-col :span="4">
+                <el-form-item label="首字母" prop="headChar" style="width: 100%">
+                  <el-input v-model="editForm.headChar" :maxlength="1" autocomplete="off" style="width: 100%"
+                    @change="toggleCase" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
                 <el-form-item label="职称" prop="title" style="width: 100%">
                   <el-input v-model="editForm.title" autocomplete="off" style="width: 100%" />
                 </el-form-item>
@@ -35,12 +41,12 @@
             </el-form-item>
             <el-form-item label="个人详细介绍" prop="description">
               <div v-if="showDrawer">
-                <RichEdit v-model="editForm.description" media-category="academician_dsc_imgs" style="height: 30rem;" />
+                <RichEdit v-model="editForm.description" media-category="academician_dsc_imgs" style="height: 40rem;" />
               </div>
             </el-form-item>
             <el-form-item label="专家论文" prop="papers">
               <div v-if="showDrawer">
-                <RichEdit v-model="editForm.papers" media-category="academician_papers" style="height: 20rem;" />
+                <RichEdit v-model="editForm.papers" media-category="academician_papers" style="height: 30rem;" />
               </div>
             </el-form-item>
           </el-col>
@@ -127,6 +133,9 @@ const rules = reactive({
   name: [
     { required: true, message: '请输入姓名', trigger: 'blur' }
   ],
+  headChar: [
+    { required: true, message: '请输入首字母', trigger: 'blur' }
+  ],
   title: [
     { required: true, message: '请输入职称', trigger: 'blur' }
   ],
@@ -143,6 +152,7 @@ const emptyForm = () => {
   editForm.value = {
     ID: 0,
     name: '',
+    headChar: '',
     title: '',
     avatar: '',
     brief: '',
@@ -154,6 +164,18 @@ const emptyForm = () => {
     lectures: '',
   }
 }
+const toggleCase = (value) => {
+  const newVal = value.split('').map(char => {
+    if (char.match(/[a-z]/)) {
+      return char.toUpperCase();
+    } else if (char.match(/[A-Z]/)) {
+      return char.toLowerCase();
+    }
+    return char;
+  }).join('');
+  editForm.value.headChar = newVal
+}
+
 // 关闭弹窗
 const handleFormClose = () => {
   showDrawer.value = false