【字典分类】样式修改

src/views/demo/Categories/Button/index.vue

@@ -1,54 +0,0 @@
-<template>
-   <a-button :size="props.size" :class="`${props.type}`" :type="getType(props.type)" :icon="h(getIcon(props.type))">{{props.text}}</a-button>
-</template>
-
-<script setup lang="ts">
-import {defineProps,h} from "vue"
-import { PlusOutlined,FormOutlined,DeleteOutlined,SearchOutlined } from '@ant-design/icons-vue';
-const props = defineProps(['text','type','size'])
-const getIcon = (icon:string) => {
-  switch (icon) {
-    case 'add':
-      return PlusOutlined
-    case 'edit':
-      return FormOutlined
-    case 'del':
-      return DeleteOutlined
-    case 'search':
-      return SearchOutlined
-    default:
-      return null
-  }
-}
-const getType = (type:string) => {
-  switch (type) {
-    case 'search':
-      return 'default'
-    default:
-      return 'primary'
-  }
-}
-</script>
-<style lang="scss" scoped>
-.add{
-  background-color: #409167;
-}
-.add:hover{
-  background-color: #66a785;
-}
-.edit{
-  background-color: #0076c8
-}
-.edit:hover{
-  background-color: #3391d3;
-}
-.del{
-  background-color: #d63737
-}
-.del:hover{
-  background-color: #de5f5f;
-}
-.position{
-  margin-left:10px
-}
-</style>

src/views/demo/Categories/index.vue

@@ -1,14 +1,13 @@
 <template>
   <div class="page-div categories-page">
-    <div class="left-div">
+    <div class="left-div w-1/4 xl:w-1/5 m-4 mr-0">
       <div class="header">
         <div class="buttons-div">
-          <HeaderButton :text="'删除分类'" :type="'del'" :size="'small'" @click="buttonClick('left','del')"/>
-          <HeaderButton :text="'添加分类'" :type="'add'" :size="'small'" @click="buttonClick('left','add')"/>
+          <a-button type="primary" color='error' @click="buttonClick('left-del')">删除分类</a-button>
+          <a-button type="primary" color='info' @click="buttonClick('left-add')">添加分类</a-button>
         </div>
         <div class="search-div">
-          <a-input v-model:value="LValue" placeholder="请输入内容" size="small"/>
-          <HeaderButton :text="'搜索'" :type="'search'" :size="'small'" @click="searchData('left')"/>
+          <a-input-search size="small" v-model:value="LValue" placeholder="请输入内容" enter-button @search="searchData('left')"/>
         </div>
         
       </div>
@@ -19,17 +18,7 @@
         <BasicTree :treeData="lTree" :loading="lLoading" @select="(selectedKeys,{node}) => {getLeftSelectId(node.id);changeTypeId(node.key)}"/>
       </div>
     </div>
-    <div class="right-div">
-      <div class="header">
-        <div class="buttons-div">
-          <a-input style="width:150px" v-model:value="RValue" placeholder="名称" size="small"/>
-          <HeaderButton :text="'搜索'" :type="'search'" :size="'small'" @click="searchData('right')"/>
-          <HeaderButton :text="'添加'" :type="'add'" :size="'small'" @click="buttonClick('right','add')"/>
-          <HeaderButton :text="'编辑'" :type="'edit'" :size="'small'" @click="buttonClick('right','edit')"/>
-          <HeaderButton :text="'删除'" :type="'del'" :size="'small'" @click="buttonClick('right','del')"/>
-        </div>
-      </div>
-      <div class="content">
+    <div class="right-div w-3/4 xl:w-4/5">
         <BasicTable @register="registerTable">
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'enabledMark'">
@@ -37,8 +26,10 @@
               <a-tag v-else color="error">停用</a-tag>
             </template>
           </template>
+          <template #toolbar>
+            <PermissionBtn @btnEvent="buttonClick"></PermissionBtn>
+          </template>
         </BasicTable>
-      </div>
     </div>
     <a-modal class="categories-modal" v-model:open="openModal" 
       :title="modalData.title" :afterClose="clearModal">
@@ -48,18 +39,17 @@
 </template>
 
 <script setup lang="ts">
-import HeaderButton from './Button/index.vue'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import UseModal from './Modal/index.vue'
 import { BasicTree } from '@/components/Tree';
 import {BasicTable,useTable} from '@/components/Table'
+import { PermissionBtn } from '@/components/PermissionBtn/index';
 import {ref,onMounted,reactive,watch,createVNode } from "vue"
 import {getLeftTree,getRightTable,addLeftItem,addRightItem,delLeftItem,editRightItem,delRightItem} from '@/api/sys/categories.ts'
-import {columns,emptyRightItem,emptyLeftItem,dataProcess} from './util.ts'
+import {columns,emptyRightItem,emptyLeftItem,dataProcess,searchFormSchema} from './util.ts'
 import {Modal,message} from 'ant-design-vue'
 const modalForm = ref()
 let LValue = ref('')
-let RValue = ref('')
 let lLoading = ref(false)
 let typeId = ref('')
 let selectLeftId = ref('')
@@ -72,14 +62,25 @@ const modalData = reactive({
 })
 const [registerTable,{reload,getSelectRows}] = useTable({
   beforeFetch: (params) => {
-    return {...params, code:typeId.value, key:RValue.value}
+    return {...params, code:typeId.value,}
   },
   api:getRightTable,
   columns,
+  formConfig:{
+    labelWidth: 120,
+    schemas: searchFormSchema,
+  },
   showIndexColumn: false,
   rowSelection: {
     type: 'checkbox',
   },
+  useSearchForm: true,
+  bordered: true,
+  showTableSetting: true,
+  handleSearchInfoFn(info) {
+      return info;
+  },
+
 })
 const getLeftTreeData = (value='') => {
   lLoading.value = true
@@ -140,7 +141,8 @@ const submit = () => {
       break;
   }
 }
-const buttonClick = (diff,type) => {
+const buttonClick = (diffType) => {
+  const [diff,type] = diffType.split('-')
   let isLeft = diff === 'left'
   switch(type){
     case 'add':
@@ -210,10 +212,8 @@ const clearModal = () => {
   width:calc(100% - 20px);
   height:calc(100% - 20px);
   display:flex;
-  border: 1px solid #ccc;
   .left-div{
-    width:230px;
-    border-right: 1px solid #ccc;
+    background-color: #fff;
     display: flex;
     flex-direction: column;
     .header{
@@ -230,7 +230,6 @@ const clearModal = () => {
       } 
     }
     .content{
-      background-color: #fff;
       border-radius: 5px;
       height:100%;
       .show-all-button{
@@ -243,24 +242,9 @@ const clearModal = () => {
     
   }
   .right-div{
-    width: calc(100% - 230px);
     flex:1;
     display: flex;
     flex-direction: column;
-    .header{
-      height: 42px;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      padding-right: 10px;
-      .buttons-div > button{
-        margin-left: 10px;
-      }
-    }
-    .content{
-      flex: 1;
-      background-color: #fff;
-    }
   }
 }
 </style>
@@ -270,6 +254,14 @@ const clearModal = () => {
     .h-full{
       height:auto;
     }
+    .search-div{
+      .ant-btn-primary{
+        background-color: #2a7dc9;
+      }
+      .ant-input-search-button {
+        width: 42px;
+      }
+    }
   }
 }
 .categories-modal{

src/views/demo/Categories/util.ts

@@ -89,4 +89,12 @@ export const dataProcess = (list) => {
         key: item.itemCode,
       }
   })
-}
+}
+export const searchFormSchema = [
+  {
+    field: 'key',
+    label: '关键字',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];