企业家增加首字母

src/view/content/components/academicianEdit.vue

@@ -18,7 +18,7 @@
         <el-row :gutter="0">
           <el-col :span="16">
             <el-row :gutter="10">
-              <el-col :span="12">
+              <el-col :span="10">
                 <el-form-item label="姓名" prop="name" style="width: 100%">
                   <el-input v-model="editForm.name" autocomplete="off" style="width: 100%" />
                 </el-form-item>
@@ -29,7 +29,7 @@
                     @change="toggleCase" />
                 </el-form-item>
               </el-col>
-              <el-col :span="8">
+              <el-col :span="10">
                 <el-form-item label="职称" prop="title" style="width: 100%">
                   <el-input v-model="editForm.title" autocomplete="off" style="width: 100%" />
                 </el-form-item>

src/view/content/components/entrepreneurEdit.vue

@@ -18,12 +18,18 @@
         <el-row :gutter="0">
           <el-col :span="16">
             <el-row :gutter="10">
-              <el-col :span="12">
+              <el-col :span="10">
                 <el-form-item label="姓名" prop="name" style="width: 100%">
                   <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="10">
                 <el-form-item label="企业名称" prop="enterprise" style="width: 100%">
                   <el-input v-model="editForm.enterprise" autocomplete="off" style="width: 100%" />
                 </el-form-item>
@@ -129,6 +135,9 @@ const rules = reactive({
   name: [
     { required: true, message: '请输入姓名', trigger: 'blur' }
   ],
+  headChar: [
+    { required: true, message: '请输入首字母', trigger: 'blur' }
+  ],
   enterprise: [
     { required: true, message: '请输入企业名称', trigger: 'blur' }
   ],
@@ -144,6 +153,7 @@ const emptyForm = () => {
   checkFlag.value = false
   editForm.value = {
     ID: 0,
+    headChar: '',
     name: '',
     enterprise: '',
     avatar: '',
@@ -154,6 +164,18 @@ const emptyForm = () => {
     qrcodeUrl: '',
   }
 }
+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

src/view/content/entrepreneur/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"