字典管理table列表添加tab

src/views/system/config/component/editConfig.vue

@@ -8,6 +8,12 @@
         <el-form-item label="参数键名" prop="configKey">
           <el-input v-model="ruleForm.configKey" placeholder="请输入参数键名" />
         </el-form-item>
+        <!-- 字典类型下拉框 -->
+        <el-form-item label="字典分类" prop="dictClassCode">
+          <el-select v-model="ruleForm.dictClassCode" placeholder="字典分类" clearable size="default" style="width: 240px">
+            <el-option v-for="dict in param_class_type" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="参数键值" prop="configValue">
           <el-input v-model="ruleForm.configValue" placeholder="请输入参数键值" />
         </el-form-item>
@@ -31,7 +37,7 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
+import { reactive, toRefs, defineComponent, ref, unref, getCurrentInstance,} from 'vue';
 import { ElMessage } from 'element-plus';
 import api from '/@/api/system';
 interface RuleFormState {
@@ -41,6 +47,7 @@ interface RuleFormState {
   configValue: string;
   configType: string;
   remark: string;
+  dictClassCode:string; // 字典分类
 }
 interface DicState {
   isShowDialog: boolean;
@@ -57,6 +64,8 @@ export default defineComponent({
     },
   },
   setup(prop, { emit }) {
+    const { proxy } = getCurrentInstance() as any;
+    const { param_class_type } = proxy.useDict('param_class_type'); // 获取字典分类
     const formRef = ref<HTMLElement | null>(null);
     const state = reactive<DicState>({
       isShowDialog: false,
@@ -67,6 +76,7 @@ export default defineComponent({
         configValue: '',
         configType: '0',
         remark: '',
+        dictClassCode: '',
       },
       rules: {
         configName: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
@@ -94,6 +104,7 @@ export default defineComponent({
         configKey: '',
         configValue: '',
         configType: '0',
+        dictClassCode: '',
         remark: '',
       };
     };
@@ -136,6 +147,7 @@ export default defineComponent({
       onSubmit,
       formRef,
       ...toRefs(state),
+      param_class_type,
     };
   },
 });

src/views/system/config/index.vue

@@ -45,26 +45,31 @@
           </el-form-item>
         </el-form>
       </div>
-      <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="ID" v-col="'configId'" align="center" prop="configId" width="60" />
-        <el-table-column label="参数名称" v-col="'configName'" prop="configName" :show-overflow-tooltip="true" />
-        <el-table-column label="参数键名" v-col="'configKey'" prop="configKey" :show-overflow-tooltip="true" />
-        <el-table-column label="参数键值" v-col="'configValue'" prop="configValue" />
-        <el-table-column label="备注" prop="remark" v-col="'remark'" :show-overflow-tooltip="true" />
-        <!-- <el-table-column label="创建时间" prop="createdAt" width="180" align="center" /> -->
-        <el-table-column label="系统内置" v-col="'configType'" align="center" prop="configType" width="100">
-          <template #default="{ row }">
-            {{ row.configType ? '是' : '否' }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="100" v-col="'handle'" align="center" fixed="right">
-          <template #default="scope">
-            <el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-auth="'edit'">修改</el-button>
-            <el-button size="small" text type="danger" @click="onRowDel(scope.row)" v-auth="'del'">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+      <!-- 字典切换 -->
+      <el-tabs v-model="tableData.param.dictClassCode" class="demo-tabs" @click="dataList">
+				<el-tab-pane v-for="dict in param_class_type" :label="dict.label" :name="dict.name">
+          <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="ID" v-col="'configId'" align="center" prop="configId" width="60" />
+            <el-table-column label="参数名称" v-col="'configName'" prop="configName" :show-overflow-tooltip="true" />
+            <el-table-column label="参数键名" v-col="'configKey'" prop="configKey" :show-overflow-tooltip="true" />
+            <el-table-column label="参数键值" v-col="'configValue'" prop="configValue" />
+            <el-table-column label="备注" prop="remark" v-col="'remark'" :show-overflow-tooltip="true" />
+            <!-- <el-table-column label="创建时间" prop="createdAt" width="180" align="center" /> -->
+            <el-table-column label="系统内置" v-col="'configType'" align="center" prop="configType" width="100">
+              <template #default="{ row }">
+                {{ row.configType ? '是' : '否' }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="100" v-col="'handle'" align="center" fixed="right">
+              <template #default="scope">
+                <el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-auth="'edit'">修改</el-button>
+                <el-button size="small" text type="danger" @click="onRowDel(scope.row)" v-auth="'del'">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+			</el-tabs>
       <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="dataList" />
     </el-card>
     <EditConfig ref="editDicRef" @dataList="dataList" :sysYesNoOptions="sys_yes_no" />
@@ -86,6 +91,7 @@ interface TableDataRow {
   configType: number;
   remark: string;
   createdAt: string;
+  dictClassCode: string;
 }
 interface TableDataState {
   ids: number[];
@@ -100,6 +106,7 @@ interface TableDataState {
       configKey: string;
       configType: string;
       dateRange: string[];
+      dictClassCode: string;
     };
   };
 }
@@ -109,6 +116,7 @@ export default defineComponent({
   components: { EditConfig },
   setup() {
     const { proxy } = getCurrentInstance() as any;
+    const { param_class_type } = proxy.useDict('param_class_type'); // 获取字典类型
     const addDicRef = ref();
     const editDicRef = ref();
     const queryRef = ref();
@@ -126,6 +134,7 @@ export default defineComponent({
           configName: '',
           configKey: '',
           configType: '',
+          dictClassCode: '0',// 字典分类
         },
       },
     });
@@ -208,6 +217,7 @@ export default defineComponent({
       resetQuery,
       handleSelectionChange,
       ...toRefs(state),
+      param_class_type,
     };
   },
 });

src/views/system/dict/component/editDic.vue

@@ -8,6 +8,12 @@
         <el-form-item label="字典类型" prop="dictType">
           <el-input v-model="ruleForm.dictType" placeholder="请输入字典类型" />
         </el-form-item>
+        <!-- 字典类型下拉框 -->
+        <el-form-item label="字典分类" prop="moduleClassify">
+          <el-select v-model="ruleForm.moduleClassify" placeholder="字典分类" clearable size="default" style="width: 240px">
+            <el-option v-for="dict in dict_class_type" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="状态" prop="status">
           <el-radio-group v-model="ruleForm.status">
             <el-radio :label="1" >启用</el-radio>
@@ -29,13 +35,14 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
+import { reactive, toRefs, defineComponent,ref, unref , getCurrentInstance,} from 'vue';
 import api from '/@/api/system';
 import {ElMessage} from "element-plus";
 interface RuleFormState {
   dictId:number;
   dictName:string;
   dictType:string;
+  moduleClassify:string; // 字典分类
   status:number;
   remark:string;
 }
@@ -48,6 +55,8 @@ interface DicState {
 export default defineComponent({
 	name: 'systemEditDic',
 	setup(prop,{emit}) {
+    const { proxy } = getCurrentInstance() as any;
+    const { dict_class_type } = proxy.useDict('dict_class_type'); // 获取字典分类
     const formRef = ref<HTMLElement | null>(null);
 		const state = reactive<DicState>({
 			isShowDialog: false,
@@ -55,6 +64,7 @@ export default defineComponent({
         dictId:0,
         dictName:'',
         dictType:'',
+        moduleClassify:'',
         status:1,
         remark:''
 			},
@@ -83,6 +93,7 @@ export default defineComponent({
         dictId:0,
         dictName:'',
         dictType:'',
+        moduleClassify:'',
         status:1,
         remark:''
       }
@@ -126,6 +137,7 @@ export default defineComponent({
 			closeDialog,
 			onCancel,
 			onSubmit,
+      dict_class_type,
       formRef,
 			...toRefs(state),
 		};

src/views/system/dict/index.vue

@@ -46,40 +46,46 @@
           </el-form-item>
         </el-form>
       </div>
-      <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="字典ID" v-col="'dictId'" align="center" prop="dictId" width="80" />
-        <el-table-column label="字典名称" v-col="'dictName'" prop="dictName" :show-overflow-tooltip="true" />
-        <el-table-column label="字典类型" v-col="'dictType'" align="center" :show-overflow-tooltip="true">
-          <template #default="scope">
-            <router-link :to="'/config/dict/' + scope.row.dictType" class="link-type">
-              <span>{{ scope.row.dictType }}</span>
-            </router-link>
-          </template>
-        </el-table-column>
-        <el-table-column prop="status" label="字典状态" v-col="'status'" width="120" align="center">
-          <template #default="scope">
-            <el-tag type="success" size="small" v-if="scope.row.status">启用</el-tag>
-            <el-tag type="info" size="small" v-else>禁用</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="remark" v-col="'remark'" label="字典描述" show-overflow-tooltip></el-table-column>
-        <!-- <el-table-column prop="createdAt" label="创建时间" align="center" width="180"></el-table-column> -->
-        <el-table-column label="操作" width="100" align="center" v-col="'handle'">
-          <template #default="scope">
-            <el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-auth="'edit'">修改</el-button>
-            <el-button size="small" text type="danger" @click="onRowDel(scope.row)" v-auth="'del'">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="typeList" />
+      <!-- 字典切换 -->
+      <el-tabs v-model="tableData.param.moduleClassify" class="demo-tabs" @click="typeList">
+				<el-tab-pane v-for="dict in dict_class_type" :label="dict.label" :name="dict.name">
+          <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="字典ID" v-col="'dictId'" align="center" prop="dictId" width="80" />
+            <el-table-column label="字典名称" v-col="'dictName'" prop="dictName" :show-overflow-tooltip="true" />
+            <el-table-column label="字典分类" v-col="'moduleClassify'" align="center" prop="moduleClassify" />
+            <el-table-column label="字典类型" v-col="'dictType'" align="center" :show-overflow-tooltip="true">
+              <template #default="scope">
+                <router-link :to="'/config/dict/' + scope.row.dictType" class="link-type">
+                  <span>{{ scope.row.dictType }}</span>
+                </router-link>
+              </template>
+            </el-table-column>
+            <el-table-column prop="status" label="字典状态" v-col="'status'" width="120" align="center">
+              <template #default="scope">
+                <el-tag type="success" size="small" v-if="scope.row.status">启用</el-tag>
+                <el-tag type="info" size="small" v-else>禁用</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="remark" v-col="'remark'" label="字典描述" show-overflow-tooltip></el-table-column>
+            <!-- <el-table-column prop="createdAt" label="创建时间" align="center" width="180"></el-table-column> -->
+            <el-table-column label="操作" width="100" align="center" v-col="'handle'">
+              <template #default="scope">
+                <el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-auth="'edit'">修改</el-button>
+                <el-button size="small" text type="danger" @click="onRowDel(scope.row)" v-auth="'del'">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="typeList" />
+				</el-tab-pane>
+			</el-tabs>
     </el-card>
     <EditDic ref="editDicRef" @typeList="typeList" />
   </div>
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance} from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import EditDic from './component/editDic.vue';
 import api from '/@/api/system';
@@ -88,6 +94,7 @@ import api from '/@/api/system';
 interface TableDataRow {
   dictId: number;
   dictName: string;
+  moduleClassify: string;
   dictType: string;
   status: number;
   remark: string;
@@ -103,6 +110,7 @@ interface TableDataState {
       pageNum: number;
       pageSize: number;
       dictName: string;
+      moduleClassify: string; // 字典类型
       dictType: string;
       status: string;
       dateRange: string[];
@@ -114,6 +122,8 @@ export default defineComponent({
   name: 'systemDic',
   components: { EditDic },
   setup() {
+    const { proxy } = getCurrentInstance() as any;
+    const { dict_class_type } = proxy.useDict('dict_class_type'); // 获取字典类型
     const addDicRef = ref();
     const editDicRef = ref();
     const queryRef = ref();
@@ -127,6 +137,7 @@ export default defineComponent({
           pageNum: 1,
           pageSize: 10,
           dictName: '',
+          moduleClassify: '0',// 字典分类
           dictType: '',
           status: '',
           dateRange: [],
@@ -138,9 +149,10 @@ export default defineComponent({
       typeList();
     };
     const typeList = () => {
+      let params = state.tableData.param;
       state.tableData.loading = true;
       api.dict
-        .getTypeList(state.tableData.param)
+        .getTypeList(params)
         .then((res: any) => {
           state.tableData.data = res.dictTypeList;
           state.tableData.total = res.total;
@@ -206,6 +218,7 @@ export default defineComponent({
       typeList,
       resetQuery,
       handleSelectionChange,
+      dict_class_type,
       ...toRefs(state),
     };
   },