修改媒体库分类

修改页面样式

src/style/main.scss

@@ -713,13 +713,26 @@ li {
 }
 
 .gva-image {
-  width: 120px;
+  background: var(--el-fill-color-light);
-  height: 80px;
-  background: #F5F7FA;
   padding: 6px;
   border-radius: 5px;
 }
 
+.gva-media-box {
+  display: flex;
+  background: var(--el-fill-color-light);
+  padding: 6px;
+  border-radius: 5px;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.gva-media-box .el-icon {
+  color: var(--el-text-color-secondary);
+  font-size: 30px;
+}
+
 .avatar-uploader .avatar {
   width: 100%;
   height: 100%;
@@ -751,3 +764,12 @@ li {
   margin: 15px;
   line-height: 1.5rem;
 }
+
+.admin-box .el-table .gva-text-truncate .cell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  line-height: 1.8rem;
+}

src/view/content/academician/index.vue

@@ -47,9 +47,9 @@
             <p>{{ scope.row.title }}</p>
           </template>
         </el-table-column>
-        <el-table-column align="left" label="简介" min-width="300" prop="brief" class-name="text-truncate">
+        <el-table-column align="left" label="简介" min-width="300" prop="brief" class-name="gva-text-truncate">
           <template #default="scope">
-            <p><el-text :line-clamp="3">{{ scope.row.brief }}</el-text></p>
+            <p>{{ scope.row.brief }}</p>
           </template>
         </el-table-column>
         <el-table-column align="left" fixed="right" label="操作" width="200">

src/view/content/activity/index.vue

@@ -168,7 +168,6 @@
       </template>
       <el-form :model="formData" label-position="top" ref="elFormRef" :inline="true" :rules="rule" label-width="100px">
         <el-form-item label="封面" prop="cover" style="width: 850px">
-          <!-- <SelectImage v-model="formData.cover" category="activity_imgs" /> -->
           <el-upload class="avatar-uploader" :action="`${imgUploadPath}/cms/mediaFile/upload?category=activity_imgs`"
             :show-file-list="false" :on-success="uploadSuccess" :on-error="uploadFailure" :before-upload="beforeUpload">
             <img v-if="formData.cover" :src="formData.cover" class="avatar"
@@ -254,13 +253,10 @@ import {
 import { isUrl } from '@/utils/validator'
 import { getUrl } from '@/utils/image'
 import { isImageMime } from '@/utils/image'
-// 图片选择组件
-import SelectImage from '@/components/selectImage/selectImage.vue'
 // 富文本组件
 import RichEdit from '@/components/richtext/rich-edit.vue'
-
 // 全量引入格式化工具 请按需保留
-import { getDictFunc, formatDate, formatBoolean, filterDict, ReturnArrImg, onDownloadFile } from '@/utils/format'
+import { getDictFunc, formatDate, filterDict } from '@/utils/format'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ref, reactive } from 'vue'
 
@@ -442,13 +438,11 @@ const setOptions = async () => {
   activityStatusOptions.value.map((item) => { item.value = parseInt(item.value); return item })
   activityKindOptions.value = await getDictFunc('activityKind')
   activityKindOptions.value.map((item) => { item.value = parseInt(item.value); return item })
-  console.log(activityKindOptions.value)
 }
 
 // 获取需要的字典 可能为空 按需保留
 setOptions()
 
-
 // 多选数据
 const multipleSelection = ref([])
 // 多选

src/view/content/article/index.vue

@@ -59,11 +59,7 @@
             <p><el-text :line-clamp="2" size="small">{{ scope.row.subtitle }}</el-text></p>
           </template>
         </el-table-column>
-        <el-table-column align="left" label="摘要" min-width="400" prop="desc" class-name="text-truncate">
+        <el-table-column align="left" label="摘要" min-width="400" prop="desc" class-name="gva-text-truncate" />
-          <template #default="scope">
-            <el-text :line-clamp="3">{{ scope.row.desc }}</el-text>
-          </template>
-        </el-table-column>
         <el-table-column align="left" label="标签" min-width="150" prop="tags">
           <template #default="scope">
             <el-tag v-for="(item, index) in formatTags(scope.row.tags)" :key="index" size="small"
@@ -520,12 +516,4 @@ getTableData()
 .cell button {
   line-height: 22px;
 }
-
-.text-truncate .cell {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 4;
-  -webkit-box-orient: vertical;
-}
 </style>

src/view/content/components/academicianEdit.vue

@@ -41,7 +41,7 @@
             </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: 40rem;" />
+                <RichEdit v-model="editForm.description" media-category="academician_imgs" style="height: 40rem;" />
               </div>
             </el-form-item>
             <el-form-item label="专家论文" prop="papers">
@@ -58,7 +58,7 @@
               <el-alert type="info" :closable="false" style="margin-bottom: 10px;"
                 :description="`类型为：${avatarInfo.mediaTypeInfo}, 大小不超过${avatarInfo.fileSizeInfo}, 宽*高: ${avatarInfo.mediaWidth}px*${avatarInfo.mediaHeight}px`" />
               <el-upload class="avatar-uploader"
-                :action="`${imgUploadPath}/cms/mediaFile/upload?category=academician_avatar`" :show-file-list="false"
+                :action="`${imgUploadPath}/cms/mediaFile/upload?category=academician_imgs`" :show-file-list="false"
                 :on-success="(res) => { uploadSuccess(res, 'avatar') }" :on-error="uploadFailure"
                 :before-upload="(file) => { return beforeUpload(file, avatarInfo) }">
                 <img v-if="editForm.avatar" :src="editForm.avatar" class="avatar" style="object-fit: cover;">
@@ -71,7 +71,7 @@
               <el-alert type="info" :closable="false" style="margin-bottom: 10px;"
                 :description="`类型为：${videoInfo.mediaTypeInfo}, 大小不超过${videoInfo.fileSizeInfo}, 宽*高: ${videoInfo.mediaWidth}px*${videoInfo.mediaHeight}px`" />
               <el-upload class="avatar-uploader"
-                :action="`${imgUploadPath}/cms/mediaFile/upload?category=academician_video`" :show-file-list="false"
+                :action="`${imgUploadPath}/cms/mediaFile/upload?category=academician_imgs`" :show-file-list="false"
                 :on-success="(res) => { uploadSuccess(res, 'video') }" :on-error="uploadFailure"
                 :before-upload="(file) => { return beforeUpload(file, videoInfo) }">
                 <el-button type="primary" plain icon="upload">上传</el-button>
@@ -84,7 +84,7 @@
               <el-alert type="info" :closable="false" style="margin-bottom: 10px;"
                 :title="`类型为：${qrcodeInfo.mediaTypeInfo}, 大小不超过${qrcodeInfo.fileSizeInfo}, 宽*高: ${qrcodeInfo.mediaWidth}px*${qrcodeInfo.mediaHeight}px`" />
               <el-upload class="avatar-uploader" style="width: 100px; height: 100px"
-                :action="`${imgUploadPath}/cms/mediaFile/upload?category=academician_qrcode`" :show-file-list="false"
+                :action="`${imgUploadPath}/cms/mediaFile/upload?category=academician_imgs`" :show-file-list="false"
                 :on-success="(res) => { uploadSuccess(res, 'qrcode') }" :on-error="uploadFailure"
                 :before-upload="(file) => { return beforeUpload(file, qrcodeInfo) }">
                 <img v-if="editForm.qrcodeUrl" :src="editForm.qrcodeUrl" class="avatar" style="object-fit: cover;">

src/view/content/components/entrepreneurEdit.vue

@@ -41,14 +41,12 @@
             </el-form-item>
             <el-form-item label="个人详细介绍" prop="description">
               <div v-if="showDrawer">
-                <RichEdit v-model="editForm.description" media-category="entrepreneur_dsc_imgs"
+                <RichEdit v-model="editForm.description" media-category="entrepreneur_imgs" style="height: 30rem;" />
-                  style="height: 30rem;" />
               </div>
             </el-form-item>
             <el-form-item label="企业详细介绍" prop="enterpriseDsc">
               <div v-if="showDrawer">
-                <RichEdit v-model="editForm.enterpriseDsc" media-category="enterprise_dsc_imgs"
+                <RichEdit v-model="editForm.enterpriseDsc" media-category="entrepreneur_imgs" style="height: 30rem;" />
-                  style="height: 30rem;" />
               </div>
             </el-form-item>
           </el-col>
@@ -60,7 +58,7 @@
               <el-alert type="info" :closable="false" style="margin-bottom: 10px;"
                 :description="`类型为：${avatarInfo.mediaTypeInfo}, 大小不超过${avatarInfo.fileSizeInfo}, 宽*高: ${avatarInfo.mediaWidth}px*${avatarInfo.mediaHeight}px`" />
               <el-upload class="avatar-uploader"
-                :action="`${imgUploadPath}/cms/mediaFile/upload?category=entrepreneur_avatar`" :show-file-list="false"
+                :action="`${imgUploadPath}/cms/mediaFile/upload?category=entrepreneur_imgs`" :show-file-list="false"
                 :on-success="(res) => { uploadSuccess(res, 'avatar') }" :on-error="uploadFailure"
                 :before-upload="(file) => { return beforeUpload(file, avatarInfo) }">
                 <img v-if="editForm.avatar" :src="editForm.avatar" class="avatar" style="object-fit: cover;">
@@ -73,7 +71,7 @@
               <el-alert type="info" :closable="false" style="margin-bottom: 10px;"
                 :description="`类型为：${videoInfo.mediaTypeInfo}, 大小不超过${videoInfo.fileSizeInfo}, 宽*高: ${videoInfo.mediaWidth}px*${videoInfo.mediaHeight}px`" />
               <el-upload class="avatar-uploader"
-                :action="`${imgUploadPath}/cms/mediaFile/upload?category=entrepreneur_video`" :show-file-list="false"
+                :action="`${imgUploadPath}/cms/mediaFile/upload?category=entrepreneur_imgs`" :show-file-list="false"
                 :on-success="(res) => { uploadSuccess(res, 'video') }" :on-error="uploadFailure"
                 :before-upload="(file) => { return beforeUpload(file, videoInfo) }">
                 <el-button type="primary" plain icon="upload">上传</el-button>
@@ -86,7 +84,7 @@
               <el-alert type="info" :closable="false" style="margin-bottom: 10px;"
                 :title="`类型为：${qrcodeInfo.mediaTypeInfo}, 大小不超过${qrcodeInfo.fileSizeInfo}, 宽*高: ${qrcodeInfo.mediaWidth}px*${qrcodeInfo.mediaHeight}px`" />
               <el-upload class="avatar-uploader" style="width: 100px; height: 100px"
-                :action="`${imgUploadPath}/cms/mediaFile/upload?category=entrepreneur_qrcode`" :show-file-list="false"
+                :action="`${imgUploadPath}/cms/mediaFile/upload?category=entrepreneur_imgs`" :show-file-list="false"
                 :on-success="(res) => { uploadSuccess(res, 'qrcode') }" :on-error="uploadFailure"
                 :before-upload="(file) => { return beforeUpload(file, qrcodeInfo) }">
                 <img v-if="editForm.qrcodeUrl" :src="editForm.qrcodeUrl" class="avatar" style="object-fit: cover;">

src/view/content/entrepreneur/index.vue

@@ -47,11 +47,7 @@
             <p>{{ scope.row.enterprise }}</p>
           </template>
         </el-table-column>
-        <el-table-column align="left" label="介绍" min-width="300" prop="brief" class-name="text-truncate">
+        <el-table-column align="left" label="介绍" min-width="300" prop="brief" class-name="gva-text-truncate" />
-          <template #default="scope">
-            <p><el-text :line-clamp="3">{{ scope.row.brief }}</el-text></p>
-          </template>
-        </el-table-column>
         <el-table-column align="left" fixed="right" label="操作" width="160">
           <template #default="scope">
             <el-button type="primary" link icon="edit" @click="handleRowEdit(scope.row.ID)">编辑</el-button>

src/view/content/fetcher/article.vue

@@ -185,13 +185,3 @@ const handlerSaveArticle = () => {
 }
 
 </script>
-
-<style type="scss">
-.text-truncate .cell {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 4;
-  -webkit-box-orient: vertical;
-}
-</style>

src/view/mediaFile/index.vue

@@ -7,16 +7,31 @@
           @on-before-upload="beforeUpload" />
         <upload-image category="media" label="图片压缩上传" :file-size="512" :max-w-h="1080" @on-success="uploadSuccess"
           @on-failure="uploadFailure" @on-before-upload="beforeUpload" />
+        <el-select v-model="search.category" clearable placeholder="请选择分类" style="width: 350px;"
+          @clear="() => { search.category = undefined }">
+          <el-option v-for="(item, key) in mediaFileCategoryOpts" :key="key" :label="item.label" :value="item.value" />
+        </el-select>
         <el-input v-model="search.keyword" class="keyword" placeholder="请输入文件名或备注" clearable />
         <el-button type="primary" icon="search" @click="getTableData">查询</el-button>
       </div>
 
       <el-table :data="tableData">
-        <el-table-column align="left" label="预览" width="110">
+        <el-table-column align="left" label="预览" width="150">
           <template #default="scope">
-            <el-image :src="getUrl(scope.row.url)" class="gva-image" fit="contain"
+            <el-image v-if="isImage(scope.row.tag)" :src="getUrl(scope.row.url)" class="gva-image" fit="contain"
               :preview-src-list="[getUrl(scope.row.url)]" :preview-teleported="true"
-              style="width: 100px; height: 100px;" />
+              style="width: 120px; height: 100px;" />
+            <div v-else-if="isVideo(scope.row.tag)" class="gva-media-box" style="width: 120px; height: 100px;"
+              @click="clickPreviewVideo(scope.row.url)">
+              <el-icon>
+                <VideoPlay />
+              </el-icon>
+            </div>
+            <div v-else class="gva-media-box" style="width: 120px; height: 80px;">
+              <el-icon>
+                <Document />
+              </el-icon>
+            </div>
           </template>
         </el-table-column>
         <el-table-column align="left" label="日期" prop="UpdatedAt" width="180">
@@ -24,12 +39,21 @@
             <div>{{ formatDate(scope.row.UpdatedAt) }}</div>
           </template>
         </el-table-column>
-        <el-table-column align="left" label="文件名/备注" prop="name" width="280">
+        <el-table-column align="left" label="文件名/备注" prop="name" width="280" class-name="gva-text-truncate">
           <template #default="scope">
             <div class="name" @click="editFileNameFunc(scope.row)">{{ scope.row.name }}</div>
           </template>
         </el-table-column>
-        <el-table-column align="left" label="链接" prop="url" min-width="300" />
+        <el-table-column align="left" label="链接" prop="url" min-width="300" class-name="gva-text-truncate">
+          <template #default="scope">
+            <div>{{ scope.row.url }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="分类" prop="kind" width="140">
+          <template #default="scope">
+            {{ filterDict(scope.row.category, mediaFileCategoryOpts) }}
+          </template>
+        </el-table-column>
         <el-table-column align="left" label="标签" prop="tag" width="100">
           <template #default="scope">
             <el-tag :type="scope.row.tag === 'jpg' ? 'info' : 'success'" disable-transitions>{{ scope.row.tag }}
@@ -56,12 +80,10 @@
 import { getUrl } from '@/utils/image'
 import { getFileList, deleteFile, editFileName } from '@/api/mediaFile'
 import { downloadImage } from '@/utils/downloadImg'
-import CustomPic from '@/components/customPic/index.vue'
 import UploadImage from '@/components/upload/image.vue'
 import UploadCommon from '@/components/upload/common.vue'
-import { formatDate } from '@/utils/format'
+import { getDictFunc, formatDate, filterDict } from '@/utils/format'
 import WarningBar from '@/components/warningBar/warningBar.vue'
-
 import { ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
@@ -69,8 +91,16 @@ defineOptions({
   name: 'Upload',
 })
 
-const path = ref(import.meta.env.VITE_BASE_API)
+const mediaFileCategoryOpts = ref([])
+// 获取需要的字典 可能为空 按需保留
+const setOptions = async () => {
+  mediaFileCategoryOpts.value = await getDictFunc('mediaFileCategory')
+}
 
+// 获取需要的字典 可能为空 按需保留
+setOptions()
+
+const path = ref(import.meta.env.VITE_BASE_API)
 const page = ref(1)
 const total = ref(0)
 const pageSize = ref(10)
@@ -78,6 +108,22 @@ const search = ref({})
 const tableData = ref([])
 const fullscreenLoading = ref(false)
 
+const isImage = (tag) => {
+  tag = tag.toLowerCase()
+  if (tag == 'jpg' || tag == 'png' || tag == 'webp' || tag == 'gif') {
+    return true
+  }
+  return false
+}
+
+const isVideo = (tag) => {
+  tag = tag.toLowerCase()
+  if (tag == 'mp4' || tag == 'ogg' || tag == 'webm') {
+    return true
+  }
+  return false
+}
+
 // 分页
 const handleSizeChange = (val) => {
   pageSize.value = val
@@ -178,6 +224,10 @@ const editFileNameFunc = async (row) => {
     })
   })
 }
+
+const clickPreviewVideo = () => {
+  console.log('clickPreviewVideo')
+}
 </script>
 
 <style scoped>

src/view/organize/components/userList.vue

@@ -1,14 +1,16 @@
 <template>
   <div v-if="selectedOrganize">
-    <div class="gva-btn-list" style="margin-bottom: 15px;">
+    <div class="gva-btn-list justify-between" style="margin-bottom: 15px;">
       <div class="text-black cursor-pointer text-lg leading-5" @click="totalCollapse">
-        <div v-if="isCollapse" class="gvaIcon gvaIcon-arrow-double-right" />
+        <span v-if="isCollapse" class="gvaIcon gvaIcon-arrow-double-right" />
-        <div v-else class="gvaIcon gvaIcon-arrow-double-left" />
+        <span v-else class="gvaIcon gvaIcon-arrow-double-left" />
+        <el-text size="large" tag="b" style="margin-left: 10px;">
+          用户管理，当前选中：{{ selectedOrganize.name }}（共{{ total }}人）
+        </el-text>
       </div>
-      <el-text size="large" tag="b">用户管理，当前选中：{{ selectedOrganize.name }}（共{{ total }}人）</el-text>
+      <el-button type="primary" icon="plus" @click="addUser">新增用户</el-button>
     </div>
     <div class="gva-btn-list">
-      <el-button type="primary" icon="plus" @click="addUser">新增用户</el-button>
     </div>
     <el-table :data="tableData" row-key="ID">
       <el-table-column align="left" label="账户" min-width="120" prop="userName" />

src/view/superAdmin/dictionary/sysDictionary.vue

@@ -1,44 +1,28 @@
 <template>
   <div>
-    <warning-bar
+    <warning-bar title="获取字典且缓存方法已在前端utils/dictionary 已经封装完成 不必自己书写 使用方法查看文件内注释" />
-      title="获取字典且缓存方法已在前端utils/dictionary 已经封装完成 不必自己书写 使用方法查看文件内注释"
-    />
     <div class="dict-box flex gap-4">
       <div class="w-64 bg-white p-4">
         <div class="flex justify-between items-center">
           <span class="text font-bold">字典列表</span>
-          <el-button
+          <el-button type="primary" @click="openDialog">
-            type="primary"
-            @click="openDialog"
-          >
             新增
           </el-button>
         </div>
-        <el-scrollbar
+        <el-scrollbar class="mt-4" style="height: calc(100vh - 300px)">
-          class="mt-4"
+          <div v-for="dictionary in dictionaryData" :key="dictionary.ID"
-          style="height: calc(100vh - 300px)"
-        >
-          <div
-            v-for="dictionary in dictionaryData"
-            :key="dictionary.ID"
             class="rounded flex justify-between items-center px-2 py-4 cursor-pointer mt-2 hover:bg-blue-50 hover:text-gray-800 group bg-gray-50"
-            :class="selectID === dictionary.ID && 'active'"
+            :class="selectID === dictionary.ID && 'active'" @click="toDetail(dictionary)">
-            @click="toDetail(dictionary)"
-          >
             <span class="max-w-[160px] truncate">{{ dictionary.name }}</span>
             <div>
-              <el-icon
+              <el-icon class="group-hover:text-blue-500"
-                class="group-hover:text-blue-500"
+                :class="selectID === dictionary.ID ? 'text-white-800' : 'text-blue-500'"
-                :class="selectID === dictionary.ID ? 'text-white-800':'text-blue-500'"
+                @click.stop="updateSysDictionaryFunc(dictionary)">
-                @click.stop="updateSysDictionaryFunc(dictionary)"
-              >
                 <Edit />
               </el-icon>
-              <el-icon
+              <el-icon class="ml-2 group-hover:text-red-500"
-                class="ml-2 group-hover:text-red-500"
+                :class="selectID === dictionary.ID ? 'text-white-800' : 'text-red-500'"
-                :class="selectID === dictionary.ID ? 'text-white-800':'text-red-500'"
+                @click="deleteSysDictionaryFunc(dictionary)">
-                @click="deleteSysDictionaryFunc(dictionary)"
-              >
                 <Delete />
               </el-icon>
             </div>
@@ -49,70 +33,25 @@
         <sysDictionaryDetail :sys-dictionary-i-d="selectID" />
       </div>
     </div>
-    <el-dialog
+    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="type === 'create' ? '添加字典' : '修改字典'">
-      v-model="dialogFormVisible"
+      <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="110px">
-      :before-close="closeDialog"
+        <el-form-item label="字典名（中）" prop="name">
-      :title="type==='create'?'添加字典':'修改字典'"
+          <el-input v-model="formData.name" placeholder="请输入字典名（中）" clearable :style="{ width: '100%' }" />
-    >
-      <el-form
-        ref="dialogForm"
-        :model="formData"
-        :rules="rules"
-        label-width="110px"
-      >
-        <el-form-item
-          label="字典名（中）"
-          prop="name"
-        >
-          <el-input
-            v-model="formData.name"
-            placeholder="请输入字典名（中）"
-            clearable
-            :style="{ width: '100%' }"
-          />
         </el-form-item>
-        <el-form-item
+        <el-form-item label="字典名（英）" prop="type">
-          label="字典名（英）"
+          <el-input v-model="formData.type" placeholder="请输入字典名（英）" clearable :style="{ width: '100%' }" />
-          prop="type"
-        >
-          <el-input
-            v-model="formData.type"
-            placeholder="请输入字典名（英）"
-            clearable
-            :style="{ width: '100%' }"
-          />
         </el-form-item>
-        <el-form-item
+        <el-form-item label="状态" prop="status" required>
-          label="状态"
+          <el-switch v-model="formData.status" active-text="开启" inactive-text="停用" />
-          prop="status"
-          required
-        >
-          <el-switch
-            v-model="formData.status"
-            active-text="开启"
-            inactive-text="停用"
-          />
         </el-form-item>
-        <el-form-item
+        <el-form-item label="描述" prop="desc">
-          label="描述"
+          <el-input v-model="formData.desc" placeholder="请输入描述" clearable :style="{ width: '100%' }" />
-          prop="desc"
-        >
-          <el-input
-            v-model="formData.desc"
-            placeholder="请输入描述"
-            clearable
-            :style="{ width: '100%' }"
-          />
         </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="closeDialog">取 消</el-button>
-          <el-button
+          <el-button type="primary" @click="enterDialog">确 定</el-button>
-
-            type="primary"
-            @click="enterDialog"
-          >确 定</el-button>
         </div>
       </template>
     </el-dialog>
@@ -173,7 +112,7 @@ const rules = ref({
 const dictionaryData = ref([])
 
 // 查询
-const getTableData = async() => {
+const getTableData = async () => {
   const res = await getSysDictionaryList()
   if (res.code === 0) {
     dictionaryData.value = res.data
@@ -188,7 +127,7 @@ const toDetail = (row) => {
 
 const dialogFormVisible = ref(false)
 const type = ref('')
-const updateSysDictionaryFunc = async(row) => {
+const updateSysDictionaryFunc = async (row) => {
   const res = await findSysDictionary({ ID: row.ID, status: row.status })
   type.value = 'update'
   if (res.code === 0) {
@@ -205,12 +144,12 @@ const closeDialog = () => {
     desc: null,
   }
 }
-const deleteSysDictionaryFunc = async(row) => {
+const deleteSysDictionaryFunc = async (row) => {
   ElMessageBox.confirm('确定要删除吗?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
-  }).then(async() => {
+  }).then(async () => {
     const res = await deleteSysDictionary({ ID: row.ID })
     if (res.code === 0) {
       ElMessage({
@@ -223,8 +162,8 @@ const deleteSysDictionaryFunc = async(row) => {
 }
 
 const dialogForm = ref(null)
-const enterDialog = async() => {
+const enterDialog = async () => {
-  dialogForm.value.validate(async(valid) => {
+  dialogForm.value.validate(async (valid) => {
     if (!valid) return
     let res
     switch (type.value) {
@@ -252,9 +191,10 @@ const openDialog = () => {
 </script>
 
 <style>
-.dict-box{
+.dict-box {
   height: calc(100vh - 240px);
 }
+
 .active {
   background-color: var(--el-color-primary) !important;
   color: #fff;

src/view/superAdmin/dictionary/sysDictionaryDetail.vue

@@ -3,172 +3,54 @@
     <div class="gva-table-box">
       <div class="gva-btn-list justify-between">
         <span class="text font-bold">字典详细内容</span>
-        <el-button
+        <el-button type="primary" icon="plus" @click="openDialog">新增字典项</el-button>
-          type="primary"
-          icon="plus"
-          @click="openDialog"
-        >新增字典项</el-button>
       </div>
-      <el-table
+      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" row-key="ID">
-        ref="multipleTable"
+        <el-table-column align="left" label="字典值" prop="value" min-width="120" />
-        :data="tableData"
+        <el-table-column align="left" label="展示值" prop="label" min-width="120" />
-        style="width: 100%"
+        <el-table-column align="left" label="扩展值" prop="extend" />
-        tooltip-effect="dark"
+        <el-table-column align="left" label="启用状态" prop="status" width="100">
-        row-key="ID"
-      >
-        <el-table-column
-          type="selection"
-          width="55"
-        />
-        <el-table-column
-          align="left"
-          label="日期"
-          width="180"
-        >
-          <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
-        </el-table-column>
-
-        <el-table-column
-          align="left"
-          label="展示值"
-          prop="label"
-        />
-
-        <el-table-column
-          align="left"
-          label="字典值"
-          prop="value"
-        />
-
-        <el-table-column
-          align="left"
-          label="扩展值"
-          prop="extend"
-        />
-
-        <el-table-column
-          align="left"
-          label="启用状态"
-          prop="status"
-          width="120"
-        >
           <template #default="scope">{{ formatBoolean(scope.row.status) }}</template>
         </el-table-column>
-
+        <el-table-column align="left" label="排序标记" prop="sort" width="100" />
-        <el-table-column
+        <el-table-column align="left" label="操作" width="180">
-          align="left"
-          label="排序标记"
-          prop="sort"
-          width="120"
-        />
-
-        <el-table-column
-          align="left"
-          label="操作"
-          width="180"
-        >
           <template #default="scope">
-            <el-button
+            <el-button type="primary" link icon="edit" @click="updateSysDictionaryDetailFunc(scope.row)">变更</el-button>
-              type="primary"
+            <el-button type="primary" link icon="delete"
-              link
+              @click="deleteSysDictionaryDetailFunc(scope.row)">删除</el-button>
-              icon="edit"
-              @click="updateSysDictionaryDetailFunc(scope.row)"
-            >变更</el-button>
-            <el-button
-              type="primary"
-              link
-              icon="delete"
-              @click="deleteSysDictionaryDetailFunc(scope.row)"
-            >删除</el-button>
           </template>
         </el-table-column>
       </el-table>
 
       <div class="gva-pagination">
-        <el-pagination
+        <el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]" :total="total"
-          :current-page="page"
+          layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
-          :page-size="pageSize"
+          @size-change="handleSizeChange" />
-          :page-sizes="[10, 30, 50, 100]"
-          :total="total"
-          layout="total, sizes, prev, pager, next, jumper"
-          @current-change="handleCurrentChange"
-          @size-change="handleSizeChange"
-        />
       </div>
     </div>
 
-    <el-dialog
+    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="type === 'create' ? '添加字典项' : '修改字典项'">
-      v-model="dialogFormVisible"
+      <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="110px">
-      :before-close="closeDialog"
+        <el-form-item label="展示值" prop="label">
-      :title="type==='create'?'添加字典项':'修改字典项'"
+          <el-input v-model="formData.label" placeholder="请输入展示值" clearable :style="{ width: '100%' }" />
-    >
-      <el-form
-        ref="dialogForm"
-        :model="formData"
-        :rules="rules"
-        label-width="110px"
-      >
-        <el-form-item
-          label="展示值"
-          prop="label"
-        >
-          <el-input
-            v-model="formData.label"
-            placeholder="请输入展示值"
-            clearable
-            :style="{width: '100%'}"
-          />
         </el-form-item>
-        <el-form-item
+        <el-form-item label="字典值" prop="value">
-          label="字典值"
+          <el-input v-model="formData.value" placeholder="请输入字典值" clearable :style="{ width: '100%' }" />
-          prop="value"
-        >
-          <el-input
-            v-model="formData.value"
-            placeholder="请输入字典值"
-            clearable
-            :style="{width: '100%'}"
-          />
         </el-form-item>
-        <el-form-item
+        <el-form-item label="扩展值" prop="extend">
-          label="扩展值"
+          <el-input v-model="formData.extend" placeholder="请输入扩展值" clearable :style="{ width: '100%' }" />
-          prop="extend"
-        >
-          <el-input
-            v-model="formData.extend"
-            placeholder="请输入扩展值"
-            clearable
-            :style="{width: '100%'}"
-          />
         </el-form-item>
-        <el-form-item
+        <el-form-item label="启用状态" prop="status" required>
-          label="启用状态"
+          <el-switch v-model="formData.status" active-text="开启" inactive-text="停用" />
-          prop="status"
-          required
-        >
-          <el-switch
-            v-model="formData.status"
-            active-text="开启"
-            inactive-text="停用"
-          />
         </el-form-item>
-        <el-form-item
+        <el-form-item label="排序标记" prop="sort">
-          label="排序标记"
+          <el-input-number v-model.number="formData.sort" placeholder="排序标记" />
-          prop="sort"
-        >
-          <el-input-number
-            v-model.number="formData.sort"
-            placeholder="排序标记"
-          />
         </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="closeDialog">取 消</el-button>
-          <el-button
+          <el-button type="primary" @click="enterDialog">确 定</el-button>
-            type="primary"
-            @click="enterDialog"
-          >确 定</el-button>
         </div>
       </template>
     </el-dialog>
@@ -245,7 +127,7 @@ const handleCurrentChange = (val) => {
 }
 
 // 查询
-const getTableData = async() => {
+const getTableData = async () => {
   const table = await getSysDictionaryDetailList({
     page: page.value,
     pageSize: pageSize.value,
@@ -263,7 +145,7 @@ getTableData()
 
 const type = ref('')
 const dialogFormVisible = ref(false)
-const updateSysDictionaryDetailFunc = async(row) => {
+const updateSysDictionaryDetailFunc = async (row) => {
   const res = await findSysDictionaryDetail({ ID: row.ID })
   type.value = 'update'
   if (res.code === 0) {
@@ -282,12 +164,12 @@ const closeDialog = () => {
     sysDictionaryID: props.sysDictionaryID
   }
 }
-const deleteSysDictionaryDetailFunc = async(row) => {
+const deleteSysDictionaryDetailFunc = async (row) => {
   ElMessageBox.confirm('确定要删除吗?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
-  }).then(async() => {
+  }).then(async () => {
     const res = await deleteSysDictionaryDetail({ ID: row.ID })
     if (res.code === 0) {
       ElMessage({
@@ -303,7 +185,7 @@ const deleteSysDictionaryDetailFunc = async(row) => {
 }
 
 const dialogForm = ref(null)
-const enterDialog = async() => {
+const enterDialog = async () => {
   dialogForm.value.validate(async valid => {
     formData.value.sysDictionaryID = props.sysDictionaryID
     if (!valid) return
@@ -340,5 +222,4 @@ watch(() => props.sysDictionaryID, () => {
 
 </script>
 
-<style>
+<style></style>
-</style>