字典使用模式调整

web/src/view/superAdmin/dictionary/sysDictionary.vue

@@ -3,194 +3,63 @@
     <warning-bar
       title="获取字典且缓存方法已在前端utils/dictionary 已经封装完成 不必自己书写 使用方法查看文件内注释"
     />
-    <div class="gva-search-box">
-      <el-form
-        :inline="true"
-        :model="searchInfo"
-      >
-        <el-form-item label="字典名（中）">
-          <el-input
-            v-model="searchInfo.name"
-            placeholder="搜索条件"
-          />
-        </el-form-item>
-        <el-form-item label="字典名（英）">
-          <el-input
-            v-model="searchInfo.type"
-            placeholder="搜索条件"
-          />
-        </el-form-item>
-        <el-form-item
-          label="状态"
-          prop="status"
-        >
-          <el-select
-            v-model="searchInfo.status"
-            clear
-            placeholder="请选择"
-          >
-            <el-option
-              key="true"
-              label="是"
-              value="true"
-            />
-            <el-option
-              key="false"
-              label="否"
-              value="false"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="描述">
-          <el-input
-            v-model="searchInfo.desc"
-            placeholder="搜索条件"
-          />
-        </el-form-item>
-        <el-form-item>
+    <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
-
             type="primary"
-            icon="search"
-            @click="onSubmit"
-          >查询</el-button>
-          <el-button
-
-            icon="refresh"
-            @click="onReset"
-          >重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="gva-table-box">
-      <div class="gva-btn-list">
-        <el-button
-
-          type="primary"
-          icon="plus"
-          @click="openDialog"
-        >新增</el-button>
-        <el-icon
-          class="cursor-pointer"
-          @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=12&vd_source=f2640257c21e3b547a790461ed94875e')"
-        ><VideoCameraFilled /></el-icon>
-      </div>
-      <el-table
-        ref="multipleTable"
-        :data="tableData"
-        style="width: 100%"
-        tooltip-effect="dark"
-        row-key="ID"
-      >
-        <el-table-column
-          type="selection"
-          width="55"
-        />
-        <el-table-column
-          align="left"
-          label="日期"
-          width="180"
+            @click="openDialog"
+          >
+            新增
+          </el-button>
+        </div>
+        <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'"
+          @click="toDetail(dictionary)"
         >
-          <template #default="scope">{{
-            formatDate(scope.row.CreatedAt)
-          }}</template>
-        </el-table-column>
-
-        <el-table-column
-          align="left"
-          label="字典名（中）"
-          prop="name"
-          width="160"
-        />
-
-        <el-table-column
-          align="left"
-          label="字典名（英）"
-          prop="type"
-          width="120"
-        />
-
-        <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="desc"
-          width="280"
-        />
-
-        <el-table-column
-          align="left"
-          label="操作"
-        >
-          <template #default="scope">
-            <el-button
-
-              icon="document"
-              type="primary"
-              link
-              @click="toDetail(scope.row)"
-            >详情</el-button>
-            <el-button
-
-              icon="edit"
-              type="primary"
-              link
-              @click="updateSysDictionaryFunc(scope.row)"
-            >变更</el-button>
+          <span class="max-w-[160px] truncate">{{ dictionary.name }}</span>
+          <div>
+            <el-icon
+              class="group-hover:text-blue-500"
+              :class="selectID === dictionary.ID ? 'text-white-800':'text-blue-500'"
+              @click.stop="updateSysDictionaryFunc(dictionary)"
+            >
+              <Edit />
+            </el-icon>
             <el-popover
-              v-model="scope.row.visible"
               placement="top"
               width="160"
             >
               <p>确定要删除吗？</p>
-              <div style="text-align: right; margin-top: 8px">
+              <div style="text-align: right; margin-top: 8px;">
                 <el-button
-
                   type="primary"
                   link
-                  @click="scope.row.visible = false"
+                  @click="dictionary.visible = false"
                 >取消</el-button>
                 <el-button
                   type="primary"
-
-                  @click="deleteSysDictionaryFunc(scope.row)"
+                  @click="deleteSysDictionaryFunc(dictionary)"
                 >确定</el-button>
               </div>
               <template #reference>
-                <el-button
-                  type="primary"
-                  link
-                  icon="delete"
-
-                  style="margin-left: 10px"
-                  @click="scope.row.visible = true"
-                >删除</el-button>
+                <el-icon
+                  class="ml-2 group-hover:text-red-500"
+                  :class="selectID === dictionary.ID ? 'text-white-800':'text-red-500'"
+                >
+                  <Delete />
+                </el-icon>
               </template>
             </el-popover>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <div class="gva-pagination">
-        <el-pagination
-          :current-page="page"
-          :page-size="pageSize"
-          :page-sizes="[10, 30, 50, 100]"
-          :total="total"
-          layout="total, sizes, prev, pager, next, jumper"
-          @current-change="handleCurrentChange"
-          @size-change="handleSizeChange"
-        />
+          </div>
+        </div>
+      </div>
+      <div class="flex-1 bg-white">
+        <sysDictionaryDetail :sys-dictionary-i-d="selectID" />
       </div>
     </div>
     <el-dialog
@@ -273,17 +142,16 @@ import {
 } from '@/api/sysDictionary' // 此处请自行替换地址
 import WarningBar from '@/components/warningBar/warningBar.vue'
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { formatBoolean, formatDate } from '@/utils/format'
-import { toDoc } from '@/utils/doc'
-import { VideoCameraFilled } from '@element-plus/icons-vue'
+
+import sysDictionaryDetail from './sysDictionaryDetail.vue'
+import { Edit, Plus } from '@element-plus/icons-vue'
 
 defineOptions({
   name: 'SysDictionary',
 })
 
-const router = useRouter()
+const selectID = ref(1)
 
 const formData = ref({
   name: null,
@@ -315,61 +183,20 @@ const rules = ref({
   ],
 })
 
-const page = ref(1)
-const total = ref(0)
-const pageSize = ref(10)
-const tableData = ref([])
-const searchInfo = ref({})
-
-const onReset = () => {
-  searchInfo.value = {}
-}
-
-// 条件搜索前端看此方法
-const onSubmit = () => {
-  page.value = 1
-  pageSize.value = 10
-  if (searchInfo.value.status === '') {
-    searchInfo.value.status = null
-  }
-  getTableData()
-}
-
-// 分页
-const handleSizeChange = (val) => {
-  pageSize.value = val
-  getTableData()
-}
-
-const handleCurrentChange = (val) => {
-  page.value = val
-  getTableData()
-}
+const dictionaryData = ref([])
 
 // 查询
 const getTableData = async() => {
-  const table = await getSysDictionaryList({
-    page: page.value,
-    pageSize: pageSize.value,
-    ...searchInfo.value,
-  })
-  if (table.code === 0) {
-    tableData.value = table.data.list
-    total.value = table.data.total
-    page.value = table.data.page
-    pageSize.value = table.data.pageSize
+  const res = await getSysDictionaryList()
+  if (res.code === 0) {
+    dictionaryData.value = res.data
   }
 }
 
 getTableData()
 
 const toDetail = (row) => {
-  router.push({
-    name: 'dictionaryDetail',
-    params: {
-      id: row.ID,
-    },
-  })
+  selectID.value = row.ID
 }
 
 const dialogFormVisible = ref(false)
@@ -399,9 +226,6 @@ const deleteSysDictionaryFunc = async(row) => {
       type: 'success',
       message: '删除成功',
     })
-    if (tableData.value.length === 1 && page.value > 1) {
-      page.value--
-    }
     getTableData()
   }
 }
@@ -435,4 +259,12 @@ const openDialog = () => {
 }
 </script>
 
-<style></style>
+<style>
+.dict-box{
+  height: calc(100vh - 240px);
+}
+.active {
+  background-color: var(--el-color-primary) !important;
+  color: #fff;
+}
+</style>

web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue

@@ -1,59 +1,8 @@
 <template>
   <div>
-    <div class="gva-search-box">
-      <el-form
-        :inline="true"
-        :model="searchInfo"
-      >
-        <el-form-item label="展示值">
-          <el-input
-            v-model="searchInfo.label"
-            placeholder="搜索条件"
-          />
-        </el-form-item>
-        <el-form-item label="字典值">
-          <el-input-number
-            v-model="searchInfo.value"
-            placeholder="搜索条件"
-            min="-2147483648"
-            max="2147483647"
-          />
-        </el-form-item>
-        <el-form-item
-          label="启用状态"
-          prop="status"
-        >
-          <el-select
-            v-model="searchInfo.status"
-            placeholder="请选择"
-          >
-            <el-option
-              key="true"
-              label="是"
-              value="true"
-            />
-            <el-option
-              key="false"
-              label="否"
-              value="false"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button
-            type="primary"
-            icon="search"
-            @click="onSubmit"
-          >查询</el-button>
-          <el-button
-            icon="refresh"
-            @click="onReset"
-          >重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
     <div class="gva-table-box">
-      <div class="gva-btn-list">
+      <div class="gva-btn-list justify-between">
+        <span class="text font-bold">字典详细内容</span>
         <el-button
           type="primary"
           icon="plus"
@@ -252,7 +201,6 @@
   </div>
 </template>
 
-
 <script setup>
 import {
   createSysDictionaryDetail,
@@ -261,20 +209,18 @@ import {
   findSysDictionaryDetail,
   getSysDictionaryDetailList
 } from '@/api/sysDictionaryDetail' // 此处请自行替换地址
-import { ref } from 'vue'
-import { useRoute, onBeforeRouteUpdate } from 'vue-router'
+import { ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import { formatBoolean, formatDate } from '@/utils/format'
-const route = useRoute()
 
 defineOptions({
   name: 'SysDictionaryDetail'
 })
 
-onBeforeRouteUpdate((to) => {
-  if (to.name === 'dictionaryDetail') {
-    searchInfo.value.sysDictionaryID = to.params.id
-    getTableData()
+const props = defineProps({
+  sysDictionaryID: {
+    type: Number,
+    default: 0
   }
 })
 
@@ -312,21 +258,6 @@ const page = ref(1)
 const total = ref(0)
 const pageSize = ref(10)
 const tableData = ref([])
-const searchInfo = ref({ sysDictionaryID: Number(route.params.id) })
-const onReset = () => {
-  searchInfo.value = { sysDictionaryID: Number(route.params.id) }
-  getTableData()
-}
-
-// 条件搜索前端看此方法
-const onSubmit = () => {
-  page.value = 1
-  pageSize.value = 10
-  if (searchInfo.value.status === '') {
-    searchInfo.value.status = null
-  }
-  getTableData()
-}
 
 // 分页
 const handleSizeChange = (val) => {
@@ -344,7 +275,7 @@ const getTableData = async() => {
   const table = await getSysDictionaryDetailList({
     page: page.value,
     pageSize: pageSize.value,
-    ...searchInfo.value,
+    sysDictionaryID: props.sysDictionaryID
   })
   if (table.code === 0) {
     tableData.value = table.data.list
@@ -374,7 +305,7 @@ const closeDialog = () => {
     value: null,
     status: true,
     sort: null,
-    sysDictionaryID: ''
+    sysDictionaryID: props.sysDictionaryID
   }
 }
 const deleteSysDictionaryDetailFunc = async(row) => {
@@ -394,8 +325,8 @@ const deleteSysDictionaryDetailFunc = async(row) => {
 
 const dialogForm = ref(null)
 const enterDialog = async() => {
-  formData.value.sysDictionaryID = Number(route.params.id)
   dialogForm.value.validate(async valid => {
+    formData.value.sysDictionaryID = props.sysDictionaryID
     if (!valid) return
     let res
     switch (type.value) {
@@ -424,6 +355,10 @@ const openDialog = () => {
   dialogFormVisible.value = true
 }
 
+watch(() => props.sysDictionaryID, () => {
+  getTableData()
+})
+
 </script>
 
 <style>