完成字典

src/components/AntDesignVue/CustomAntDesignVue/Button/AckCreateAntdButton.vue

@@ -16,7 +16,7 @@ const handleClick = () => {
 </script>
 
 <template>
-    <AButton type="primary"  :loading="!canClick" @click="handleClick" :icon="h(CheckOutlined)">确认创建</AButton>
+    <AButton type="primary"  :loading="!canClick" @click="handleClick" :icon="h(CheckOutlined)">确认</AButton>
 </template>
 
 <style scoped></style>

src/components/AntDesignVue/CustomAntDesignVue/Button/TableRemoveButton.vue

@@ -0,0 +1,31 @@
+<script setup name="TableRemoveButton">
+import { DeleteOutlined } from '@ant-design/icons-vue';
+import { h } from 'vue';
+
+defineOptions({
+    name: 'TableRemoveButton',
+});
+const props = defineProps({
+    ackDelete: {
+        type: Function,
+        required: true,
+        default: () => {},
+    },
+});
+</script>
+
+<template>
+    <APopconfirm
+        title="确认删除此条数据吗?"
+        ok-text="确认"
+        cancel-text="取消"
+        @confirm="props.ackDelete"
+        style="width: 200px"
+        placement="left"
+        okType="danger"
+    >
+        <AButton shape="circle" danger :icon="h(DeleteOutlined)" />
+    </APopconfirm>
+</template>
+
+<style scoped></style>

src/components/AntDesignVue/CustomAntDesignVue/Button/TableUpdateButton.vue

@@ -0,0 +1,15 @@
+<script setup name="TableUpdateButton">
+import { FormOutlined } from '@ant-design/icons-vue';
+import { h } from 'vue';
+defineOptions({
+    name: 'TableUpdateButton',
+});
+</script>
+
+<template>
+    <AButton shape="circle" :icon="h(FormOutlined)" />
+</template>
+
+<style scoped>
+
+</style>

src/components/AntDesignVue/CustomAntDesignVue/index.js

@@ -17,6 +17,8 @@ import AntdModalTemplate from './AntdModalTemplate/index.vue';
 import IconSelect from './IconSelect/index.vue';
 import CustomIconSelect from './IconSelect/customIconSelect.vue';
 import TableColumChoose from '@/components/AntDesignVue/CustomAntDesignVue/TableColumChoose/index.vue';
+import TableRemoveButton from '@/components/AntDesignVue/CustomAntDesignVue/Button/TableRemoveButton.vue';
+import TableUpdateButton from '@/components/AntDesignVue/CustomAntDesignVue/Button/TableUpdateButton.vue';
 
 // console.log(AntdModalTemplate);
 
@@ -28,7 +30,7 @@ export default function setupCustomAntdComponents(app) {
         AntdModalTemplate,
         IconSelect,
         CustomIconSelect,
-        TableColumChoose
+        TableColumChoose,TableRemoveButton,TableUpdateButton
     ];
     for (let component of customComponentList) {
         app.component(component.name, component);

src/components/AntDesignVue/index.js

@@ -28,7 +28,7 @@ import {
     Input,
     Radio,
     RadioGroup,
-    InputNumber, Affix, Anchor, AnchorLink, Tree, InputSearch, Tooltip, Drawer, Checkbox, CheckboxGroup,
+    InputNumber, Affix, Anchor, AnchorLink, Tree, InputSearch, Tooltip, Drawer, Checkbox, CheckboxGroup, Popconfirm,
 } from 'ant-design-vue';
 import 'ant-design-vue/dist/reset.css';
 
@@ -72,6 +72,7 @@ export function setupCustomAntDesignVueComponents(app) {
         Drawer, // ! 抽屉
         Checkbox, // ! 多选
         CheckboxGroup,
+        Popconfirm, // ! 气泡确认框
     ];
     for (let component of componentList) {
         app.component(component.name, component);

src/views/Auth/Dict/DictForm.vue

@@ -38,10 +38,6 @@ const props = defineProps({
 });
 // ! 表达ref
 const formRef = ref(null);
-// ! 重新定义Form
-const form = reactive({
-    ...props.data.formData,
-});
 // ! 字典所在服务的禁选
 const serviceKeyDisabled = ref(false);
 // ! 表单规则
@@ -57,7 +53,7 @@ const rules = reactive({
     orderNum: [],
 });
 // ! pid
-watch(form, (newVal, oldVal) => {
+watch(props.data.formData, (newVal, oldVal) => {
     if (newVal.pid != '') {
         const dictList = baseDataStore.state.dictList.filter((item) => {
             return item.dictId == newVal.pid;
@@ -118,14 +114,14 @@ function clearInput() {
 
 <template>
     <AntdModalTemplate>
-        <AForm ref="formRef" :model="form" :rules="rules" name="DictForm" :label-col="{ span: 8 }" layout="vertical">
+        <AForm ref="formRef" :model="props.data.formData" :rules="rules" name="DictForm" :label-col="{ span: 8 }" layout="vertical">
             <AFormItem label="上级字典" name="pid">
                 <AFlex gap="small">
                     <ACascader
                         flex="1"
                         allowClear
                         showSearch
-                        v-model:value="form.pid"
+                        v-model:value="props.data.formData.pid"
                         :options="baseDataStore.state.dictTree"
                         :multiple="false"
                         placeholder="请选择上级字典"
@@ -141,7 +137,7 @@ function clearInput() {
                         placeholder="请选择所属服务"
                         ref="serviceKey"
                         :disabled="serviceKeyDisabled"
-                        v-model:value="form.serviceKey"
+                        v-model:value="props.data.formData.serviceKey"
                         :options="baseDataStore.state.serviceList"
                         :field-names="{ label: 'serviceName', value: 'serviceKey', options: 'children' }"
                     />
@@ -150,34 +146,34 @@ function clearInput() {
             </AFormItem>
 
             <AFormItem label="字典标识" name="dictKey">
-                <AInput style="width: 100%" v-model:value="form.dictKey" placeholder="请输入字典标识" :maxlength="32" showCount />
+                <AInput style="width: 100%" v-model:value="props.data.formData.dictKey" placeholder="请输入字典标识" :maxlength="32" showCount />
             </AFormItem>
 
             <AFormItem label="字典名称" name="dictName">
-                <AInput style="width: 100%" v-model:value="form.dictName" placeholder="请输入字典名称" :maxlength="32" showCount />
+                <AInput style="width: 100%" v-model:value="props.data.formData.dictName" placeholder="请输入字典名称" :maxlength="32" showCount />
             </AFormItem>
 
             <AFormItem label="字典类型" name="dictType">
-                <ASelect placeholder="请选择字典类型" ref="dictType" v-model:value="form.dictType" :options="baseDataStore.state.dictTypeList" />
+                <ASelect placeholder="请选择字典类型" ref="dictType" v-model:value="props.data.formData.dictType" :options="baseDataStore.state.dictTypeList" />
             </AFormItem>
 
             <AFormItem label="字典图标" name="dictIcon">
-                <CustomIconSelect v-model:value="form.dictIcon" />
+                <CustomIconSelect v-model:value="props.data.formData.dictIcon" />
             </AFormItem>
 
             <AFormItem label="字典描述" name="dictDesc">
-                <ATextarea style="width: 100%" v-model:value="form.dictDesc" :rows="3" placeholder="请输入字典描述" :maxlength="255" showCount />
+                <ATextarea style="width: 100%" v-model:value="props.data.formData.dictDesc" :rows="3" placeholder="请输入字典描述" :maxlength="255" showCount />
             </AFormItem>
 
             <AFormItem label="原始数据Root" name="root">
-                <ARadioGroup v-model:value="form.root" name="radioGroup">
+                <ARadioGroup v-model:value="props.data.formData.root" name="radioGroup">
                     <ARadio :value="true">是</ARadio>
                     <ARadio :value="false">否</ARadio>
                 </ARadioGroup>
             </AFormItem>
 
             <AFormItem label="排序" name="orderNum">
-                <AInputNumber v-model:value="form.orderNum">
+                <AInputNumber v-model:value="props.data.formData.orderNum">
                     <template #addonAfter><SettingOutlined /></template>
                 </AInputNumber>
             </AFormItem>

src/views/Auth/Dict/DictTable.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { h, onMounted, ref, watch } from 'vue';
 import { useBaseDataStore } from '@/stores/baseData.js';
-import { DeleteTwotone, EditTwotone } from '@vicons/antd';
 import { IconPool } from '@/components/AntDesignVue/Icon/index.js';
 
 const baseDataStore = useBaseDataStore();
@@ -16,6 +15,8 @@ const props = defineProps({
         required: true,
         default: () => ({
             handleTableChange: () => {},
+            handleRemoveAck: () => {},
+            handleUpdate: () => {}
         }),
     },
     columnList: {
@@ -139,7 +140,12 @@ function handleResizeColumn(w, col) {
         :scroll="{ scrollToFirstRowOnChange: true }"
     >
         <template #bodyCell="{ column, record }">
-            <template v-if="column?.key === 'action'"></template>
+            <template v-if="column?.key === 'action'">
+                <ASpace>
+                    <TableRemoveButton :ackDelete="() => props.methods.handleRemoveAck(record)"/>
+                    <TableUpdateButton @click="props.methods.handleUpdate(record)"/>
+                </ASpace>
+            </template>
         </template>
     </ATable>
 </template>

src/views/Auth/Dict/DictTree.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { useBaseDataStore } from '@/stores/baseData.js';
-import {DownOutlined, SmileOutlined} from '@vicons/antd';
+import { onMounted, reactive } from 'vue';
-import { onMounted, reactive, ref, watch } from 'vue';
 import { IconPool } from '@/components/AntDesignVue/Icon/index.js';
 const baseDataStore = useBaseDataStore();
 

src/views/Auth/Dict/index.vue

@@ -1,18 +1,27 @@
 <script setup name="DictPage">
-import { onMounted, reactive, h, watch } from 'vue';
+import { onMounted, reactive, watch } from 'vue';
 import DictForm from './DictForm.vue';
 import { CoreDict } from '@/api/index.js';
 import { useMessage } from 'naive-ui';
 import DictTable from '@/views/Auth/Dict/DictTable.vue';
 import DictTree from '@/views/Auth/Dict/DictTree.vue';
-import { BgColorsOutlined } from '@ant-design/icons-vue';
+import { useBaseDataStore } from '@/stores/baseData.js';
-import { IconPool } from '@/components/AntDesignVue/Icon/index.js';
+const baseDataStore = useBaseDataStore();
 const Message = useMessage();
 
+// 待查询次数
+let searchCount = 0;
+
 // ! 关于新增修改的表单
 const formData = reactive({
+    // 弹窗名称
+    modelName: '创建字典',
     // 弹窗状态
     status: false,
+    // 编辑状态
+    isUpdate: false,
+    // 字典ID
+    dictId: undefined,
     // 表单数据
     formData: {
         pid: 0,
@@ -36,15 +45,15 @@ const formData = reactive({
     // 确认
     handleAck: (data) => handleCreateAck(data),
     // 取消
-    handleCancel: () => {
+    handleCancel: clearFormData,
-        formData.status = false;
-    },
 });
 // ! 关于表格数据
 const tableData = reactive({
     dataSource: [],
     methods: {
         handleTableChange: () => {},
+        handleRemoveAck,
+        handleUpdate,
     },
     pageInfo: {
         pageSize: 10,
@@ -71,19 +80,64 @@ const tableData = reactive({
         { title: '更新时间', key: 'updatetime', status: true },
         { title: '更新人', key: 'updateName', status: true },
         { title: '操作', key: 'action', status: true },
-    ]
+    ],
 });
-// todo 重置分页参数
-// todo 清除数据体
-// todo 清理筛选项
 // ! 确认添加
 async function handleCreateAck(data) {
     await CoreDict.createDict(data);
     Message.success('添加字典成功!');
-    formData.status = false;
+    clearSearchData();
+    clearFormData();
+    getPage();
+}
+// ! 确认删除
+async function handleRemoveAck(data) {
+    await CoreDict.removeDict(data.dictId);
+    Message.success('删除字典成功!');
+    if (tableData.dataSource.length == 1 && tableData.pageInfo.pageNumber > 1) {
+        tableData.pageInfo.pageNumber--;
+    }
+    getPage();
 }
+// ! 更新数据
+async function handleUpdate(data) {
+    formData.modelName = '更新字典';
+    formData.status = true;
+    formData.isUpdate = true;
+    formData.dictId = data.dictId;
+    formData.formData.pid = data.pid;
+    formData.formData.dictKey = data.dictKey;
+    formData.formData.dictDesc = data.dictDesc;
+    formData.formData.dictName = data.dictName;
+    formData.formData.dictIcon = data.dictIcon;
+    formData.formData.dictType = data.dictType;
+    formData.formData.serviceKey = data.serviceKey;
+    formData.formData.root = data.root;
+    formData.formData.orderNum = data.orderNum;
+    formData.handleAck = handleUpdateAck;
+}
+// ! 确认更新数据
+async function handleUpdateAck(data) {
+    await CoreDict.updateDict(formData.dictId, data);
+    Message.success('更新字典成功!');
+    clearFormData();
+    getPage();
+}
+// ! 监听筛选
+watch(tableData.pageInfo, () => {
+    if (searchCount === 0) {
+        searchCount++;
+        getPage();
+        setTimeout(() => {
+            searchCount = 0;
+        }, 750);
+    } else {
+        searchCount++;
+    }
+});
 // ! 获取表格数据
 async function getPage() {
+    baseDataStore.getDictList();
     const resd = await CoreDict.getDict(tableData.pageInfo);
     tableData.dataSource = resd.rowData;
     tableData.total = Number(resd.total);
@@ -94,8 +148,42 @@ const handlePageChange = (page, pageSize) => {
     tableData.pageInfo.pageNumber = page;
     getPage();
 };
+// ! 清除筛选条件
+function clearSearchData() {
+    tableData.pageInfo = {
+        pageSize: 10,
+        pageNumber: 1,
+        isList: false,
+        isAsc: false,
+        dictInfo: undefined,
+        dictType: undefined,
+        root: undefined,
+        serviceKey: undefined,
+        status: undefined,
+    };
+}
+// ! 清除编辑数据
+function clearFormData() {
+    formData.modelName = '创建字典';
+    formData.isUpdate = false;
+    formData.status = false;
+    formData.dictId = undefined;
+    formData.handleAck = handleCreateAck;
+    formData.formData.pid = 0;
+    formData.formData.dictKey = '';
+    formData.formData.dictDesc = '';
+    formData.formData.dictName = '';
+    formData.formData.dictIcon = '';
+    formData.formData.dictType = 1;
+    formData.formData.serviceKey = undefined;
+    formData.formData.root = false;
+    formData.formData.orderNum = 0;
+}
 onMounted(() => {
     getPage();
+    if (baseDataStore.state.serviceList.length == 0) {
+        baseDataStore.getServiceList();
+    }
 });
 </script>
 
@@ -104,16 +192,34 @@ onMounted(() => {
         <template #header>
             <ASpace>
                 <CreateAntdButton name="字典" @click="formData.status = true" />
-                <TableColumChoose v-model:columnList="tableData.tableColumnList"/>
+                <TableColumChoose v-model:columnList="tableData.tableColumnList" />
+                <AInputSearch v-model:value="tableData.pageInfo.dictInfo" placeholder="字典名称/标识/描述" style="width: 200px" @search="getPage" />
+                <ASelect placeholder="请选择字典类型" allowClear v-model:value="tableData.pageInfo.dictType" :options="baseDataStore.state.dictTypeList" />
+                <ASelect
+                    placeholder="请选择所属服务"
+                    allowClear
+                    v-model:value="tableData.pageInfo.serviceKey"
+                    :options="baseDataStore.state.serviceList"
+                    :field-names="{ label: 'serviceName', value: 'serviceKey', options: 'children' }"
+                />
+                <ASelect
+                    placeholder="是否为原始数据"
+                    allowClear
+                    v-model:value="tableData.pageInfo.root"
+                    :options="[
+                        { label: '是', value: 1 },
+                        { label: '否', value: 0 },
+                    ]"
+                />
             </ASpace>
         </template>
         <template #main>
             <div class="dickBody">
                 <div class="tree">
-                    <DictTree/>
+                    <DictTree />
                 </div>
                 <div class="table">
-                    <DictTable :methods="tableData.methods" :dataSource="tableData.dataSource" :columnList="tableData.tableColumnList"/>
+                    <DictTable :methods="tableData.methods" :dataSource="tableData.dataSource" :columnList="tableData.tableColumnList" />
                 </div>
             </div>
         </template>
@@ -139,12 +245,12 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
-.dickBody{
+.dickBody {
     position: relative;
     height: 100%;
     width: 100%;
     display: flex;
-    & > div.tree{
+    & > div.tree {
         position: relative;
         flex-shrink: 0;
         max-height: 100%;
@@ -152,7 +258,7 @@ onMounted(() => {
         border-right: 1px solid #cdcdcd;
         padding-right: 5px;
     }
-    & > div.table{
+    & > div.table {
         position: relative;
         flex: 1;
         max-height: 100%;