0.0.2

cdTMP/src/views/datamanage/dictmanage/DataList/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <a-modal v-model:visible="visible" width="80%" draggable :footer="false">
+        <template #title>维护数据字典 →【{{ currentRow.name }}】</template>
+        <!-- crud组件 -->
+        <div class="lg:w-full w-full lg:mt-0">
+            <ma-crud :options="crudOptions" :columns="columns" ref="crudRef">
+                <!-- 排序列 -->
+                <template #sort="{ record }">
+                    <a-input-number
+                        :default-value="record.sort"
+                        mode="button"
+                        @change="changeSort($event, record.id)"
+                        :min="0"
+                        :max="1000"
+                    />
+                </template>
+                <!-- 状态列 -->
+                <template #status="{ record }">
+                    <a-switch
+                        :checked-value="1"
+                        unchecked-value="2"
+                        @change="changeStatus($event, record.id)"
+                        :default-checked="record.status == 1"
+                    />
+                </template>
+            </ma-crud>
+        </div>
+    </a-modal>
+</template>
+
+<script setup>
+import { ref } from "vue"
+import useCrudRef from "./useCrudRef"
+import useOpenChangeModal from "./useOpenChangeModal"
+
+const currentRow = ref({ id: undefined, name: undefined }) // 当前选择的行
+const { crudRef, crudOptions, columns } = useCrudRef(currentRow)
+const { visible, changeSort, changeStatus, open } = useOpenChangeModal(crudRef, currentRow)
+// 暴露自己的open方法
+defineExpose({ open })
+</script>
+
+<style lang="less" scoped></style>

cdTMP/src/views/datamanage/dictmanage/DataList/useCrudRef.ts

@@ -0,0 +1,120 @@
+import { ref, type Ref } from "vue"
+import dictApi from "@/api/system/dict"
+/**
+ * 定义crud的ref以及其
+ */
+export default function useCrudRef(currentRow: Ref<{ id: number | string; name: string }>) {
+    const crudRef = ref()
+    // crud选项
+    const crudOptions = ref({
+        autoRequest: false,
+        api: dictApi.getDictItemAll,
+        showIndex: false,
+        rowSelection: { showCheckedAll: true },
+        operationColumn: true,
+        operationWidth: 160,
+        operationColumnAlign: "center",
+        showTools: false,
+        beforeAdd: (form: any) => {
+            form.id = currentRow.value?.id
+        },
+        add: { show: true, api: dictApi.saveDictItem },
+        edit: { show: true, api: dictApi.updateDictItemData },
+        delete: { show: true, api: dictApi.realDeleteItem },
+        afterDelete(response) {
+            crudRef.value.tableRef.selectAll(false)
+        }
+    })
+
+    // crudColumns
+    const columns = ref([
+        { title: "ID", dataIndex: "id", addDisplay: false, editDisplay: false, width: 50, hide: true },
+        {
+            title: "字典标签",
+            align: "center",
+            dataIndex: "title",
+            search: true,
+            width: 150,
+            commonRules: [{ required: true, message: "字典标签必填" }]
+        },
+        {
+            title: "字段缩写",
+            dataIndex: "show_title",
+            align: "center",
+            search: true
+        },
+        {
+            title: "字典键值",
+            align: "center",
+            dataIndex: "key",
+            addDisplay: false,
+            editDisplay: false,
+            search: true,
+            commonRules: [{ required: true, message: "字典键值必填" }]
+        },
+        {
+            title: "排序",
+            align: "center",
+            dataIndex: "sort",
+            formType: "input-number",
+            addDefaultValue: 1,
+            width: 130,
+            min: 0,
+            max: 1000
+        },
+        {
+            title: "状态",
+            align: "center",
+            dataIndex: "status",
+            search: true,
+            addDefaultValue: "1",
+            formType: "radio",
+            dict: { name: "data_status", props: { label: "title", value: "key" } },
+            width: 70
+        },
+        {
+            title: "备注",
+            align: "center",
+            dataIndex: "remark",
+            hide: true,
+            formType: "textarea"
+        },
+        {
+            title: "更新时间",
+            align: "center",
+            dataIndex: "update_datetime",
+            addDisplay: false,
+            editDisplay: false,
+            search: true,
+            formType: "range",
+            width: 110
+        },
+        {
+            title: "文档名称",
+            dataIndex: "doc_name",
+            align: "center",
+            search: false,
+            placeholder: "如果不是标准则不填"
+        },
+        {
+            title: "发布日期",
+            dataIndex: "publish_date",
+            align: "center",
+            search: false,
+            placeholder: "如果不是标准则不填"
+        },
+        {
+            title: "标准来源",
+            dataIndex: "source",
+            align: "center",
+            search: false,
+            placeholder: "如果不是标准则不填"
+        }
+    ])
+
+    return {
+        crudRef,
+        crudOptions,
+        columns
+    }
+}

cdTMP/src/views/datamanage/dictmanage/DataList/useOpenChangeModal.ts

@@ -0,0 +1,63 @@
+import { ref, type Ref } from "vue"
+import dictApi from "@/api/system/dict"
+import { Message } from "@arco-design/web-vue"
+import MaCrud from "@/components/ma-crud/index.vue"
+/**
+ * 1.打开该modal方法/改变状态/改变排序
+ */
+export default function useOpenChangeModal(crudRef: Ref<InstanceType<typeof MaCrud>>, currentRow: Ref<any>) {
+    // refs
+    const visible = ref(false)
+    // 事件处理
+    const changeSort = async (value: number, id: number): Promise<void> => {
+        const response = await dictApi.numberOperation({ id, numberName: "sort", numberValue: value })
+        response.success && Message.success(response.message)
+        crudRef.value.refresh()
+    }
+    const changeStatus = async (status: number | string, id: number): Promise<void> => {
+        const response = await dictApi.changeItemStatus({ id, status })
+        if (response.success) {
+            Message.success(response.message)
+        }
+    }
+    // 定义该open方法并暴露给组件外部
+    // 打开a-modal事件
+    const open = (row: Ref<any>) => {
+        currentRow.value = row
+        // 调用固定方法请求数据
+        crudRef.value.requestParams = { id: currentRow.value.id }
+        crudRef.value.requestData()
+        visible.value = true
+        // 判断如果是行数据的code值为standard则不显示‘文档名称’‘发布来源’‘发布日期’,且表单也不显示
+        // columnService可以动态设置表格列的属性!!!
+        const columnService = crudRef.value.getColumnService()
+        if (currentRow.value.code === "standard") {
+            columnService.get("doc_name").setAttr("hide", false)
+            columnService.get("publish_date").setAttr("hide", false)
+            columnService.get("source").setAttr("hide", false)
+            columnService.get("doc_name").setAttr("addDisplay", true)
+            columnService.get("publish_date").setAttr("addDisplay", true)
+            columnService.get("source").setAttr("addDisplay", true)
+            columnService.get("doc_name").setAttr("editDisplay", true)
+            columnService.get("publish_date").setAttr("editDisplay", true)
+            columnService.get("source").setAttr("editDisplay", true)
+        } else {
+            columnService.get("doc_name").setAttr("hide", true)
+            columnService.get("publish_date").setAttr("hide", true)
+            columnService.get("source").setAttr("hide", true)
+            columnService.get("doc_name").setAttr("addDisplay", false)
+            columnService.get("publish_date").setAttr("addDisplay", false)
+            columnService.get("source").setAttr("addDisplay", false)
+            columnService.get("doc_name").setAttr("editDisplay", false)
+            columnService.get("publish_date").setAttr("editDisplay", false)
+            columnService.get("source").setAttr("editDisplay", false)
+        }
+    }
+
+    return {
+        visible,
+        changeSort,
+        changeStatus,
+        open
+    }
+}

cdTMP/src/views/datamanage/dictmanage/dataList.vue

@@ -1,197 +0,0 @@
-<template>
-    <a-modal v-model:visible="visible" width="auto" draggable :footer="false">
-        <template #title>维护数据字典 →【{{ currentRow.name }}】</template>
-        <!-- crud组件 -->
-        <div class="lg:w-full w-full lg:mt-0">
-            <ma-crud :options="crudOptions" :columns="columns" ref="crudRef">
-                <!-- 排序列 -->
-                <template #sort="{ record }">
-                    <a-input-number
-                        :default-value="record.sort"
-                        mode="button"
-                        @change="changeSort($event, record.id)"
-                        :min="0"
-                        :max="1000"
-                    />
-                </template>
-                <!-- 状态列 -->
-                <template #status="{ record }">
-                    <a-switch
-                        :checked-value="1"
-                        unchecked-value="2"
-                        @change="changeStatus($event, record.id)"
-                        :default-checked="record.status == 1"
-                    />
-                </template>
-            </ma-crud>
-        </div>
-    </a-modal>
-</template>
-
-<script setup>
-import { ref } from "vue"
-import dictApi from "@/api/system/dict"
-import { Message } from "@arco-design/web-vue"
-
-const crudRef = ref()
-const visible = ref(false)
-const currentRow = ref({ id: undefined, name: undefined })
-
-// 改变dictItem的sort字段
-const changeSort = async (value, id) => {
-    const response = await dictApi.numberOperation({ id, numberName: "sort", numberValue: value })
-    response.success && Message.success(response.message)
-    crudRef.value.refresh()
-}
-// 改变dictItem状态
-const changeStatus = async (status, id) => {
-    const response = await dictApi.changeItemStatus({ id, status })
-    if (response.success) {
-        Message.success(response.message)
-    }
-}
-
-// 打开a-modal事件
-const open = (row) => {
-    currentRow.value = row
-    // 调用固定方法请求数据
-    crudRef.value.requestParams = { id: currentRow.value.id }
-    crudRef.value.requestData()
-    visible.value = true
-    // 判断如果是行数据的code值为standard则不显示‘文档名称’‘发布来源’‘发布日期’,且表单也不显示
-    // columnService可以动态设置表格列的属性!!!
-    const columnService = crudRef.value.getColumnService()
-    if (currentRow.value.code === "standard") {
-        columnService.get("doc_name").setAttr("hide", false)
-        columnService.get("publish_date").setAttr("hide", false)
-        columnService.get("source").setAttr("hide", false)
-        columnService.get("doc_name").setAttr("addDisplay", true)
-        columnService.get("publish_date").setAttr("addDisplay", true)
-        columnService.get("source").setAttr("addDisplay", true)
-        columnService.get("doc_name").setAttr("editDisplay", true)
-        columnService.get("publish_date").setAttr("editDisplay", true)
-        columnService.get("source").setAttr("editDisplay", true)
-    } else {
-        columnService.get("doc_name").setAttr("hide", true)
-        columnService.get("publish_date").setAttr("hide", true)
-        columnService.get("source").setAttr("hide", true)
-        columnService.get("doc_name").setAttr("addDisplay", false)
-        columnService.get("publish_date").setAttr("addDisplay", false)
-        columnService.get("source").setAttr("addDisplay", false)
-        columnService.get("doc_name").setAttr("editDisplay", false)
-        columnService.get("publish_date").setAttr("editDisplay", false)
-        columnService.get("source").setAttr("editDisplay", false)
-    }
-}
-// crud选项
-const crudOptions = ref({
-    autoRequest: false,
-    api: dictApi.getDictItemAll,
-    showIndex: false,
-    rowSelection: { showCheckedAll: true },
-    operationColumn: true,
-    operationWidth: 160,
-    operationColumnAlign: "center",
-    showTools: false,
-    beforeAdd: (form) => {
-        form.id = currentRow.value?.id
-    },
-    add: { show: true, api: dictApi.saveDictItem },
-    edit: { show: true, api: dictApi.updateDictItemData },
-    delete: { show: true, api: dictApi.realDeleteItem },
-    afterDelete(response) {
-        crudRef.value.tableRef.selectAll(false)
-    }
-})
-
-// crudColumns
-const columns = ref([
-    { title: "ID", dataIndex: "id", addDisplay: false, editDisplay: false, width: 50, hide: true },
-    {
-        title: "字典标签",
-        align: "center",
-        dataIndex: "title",
-        search: true,
-        width: 150,
-        commonRules: [{ required: true, message: "字典标签必填" }]
-    },
-    {
-        title: "字段缩写",
-        dataIndex: "show_title",
-        align: "center",
-        search: true
-    },
-    {
-        title: "字典键值",
-        align: "center",
-        dataIndex: "key",
-        addDisplay: false,
-        editDisplay: false,
-        search: true,
-        commonRules: [{ required: true, message: "字典键值必填" }]
-    },
-    {
-        title: "排序",
-        align: "center",
-        dataIndex: "sort",
-        formType: "input-number",
-        addDefaultValue: 1,
-        width: 130,
-        min: 0,
-        max: 1000
-    },
-    {
-        title: "状态",
-        align: "center",
-        dataIndex: "status",
-        search: true,
-        addDefaultValue: "1",
-        formType: "radio",
-        dict: { name: "data_status", props: { label: "title", value: "key" } },
-        width: 70
-    },
-    {
-        title: "备注",
-        align: "center",
-        dataIndex: "remark",
-        hide: true,
-        formType: "textarea"
-    },
-    {
-        title: "更新时间",
-        align: "center",
-        dataIndex: "update_datetime",
-        addDisplay: false,
-        editDisplay: false,
-        search: true,
-        formType: "range",
-        width: 110
-    },
-    {
-        title: "文档名称",
-        dataIndex: "doc_name",
-        align: "center",
-        search: false,
-        placeholder: "如果不是标准则不填"
-    },
-    {
-        title: "发布日期",
-        dataIndex: "publish_date",
-        align: "center",
-        search: false,
-        placeholder: "如果不是标准则不填"
-    },
-    {
-        title: "标准来源",
-        dataIndex: "source",
-        align: "center",
-        search: false,
-        placeholder: "如果不是标准则不填"
-    }
-])
-
-// 暴露自己的open方法
-defineExpose({ open })
-</script>
-
-<style lang="less" scoped></style>

cdTMP/src/views/datamanage/dictmanage/index.vue

@@ -32,88 +32,13 @@
 </template>
 
 <script setup lang="jsx">
-import { ref } from "vue"
-import dictApi from "@/api/system/dict"
-import { Message } from "@arco-design/web-vue"
-import DataList from "./dataList.vue"
-
-const crudRef = ref()
-const datalistRef = ref()
-
-// 打开datalist页面
-const openDictList = async (row) => {
-    datalistRef.value.open(row)
-}
-
-// 点击切换status
-const changeStatus = async (status, id) => {
-    const response = await dictApi.changeStatus({ id, status })
-    if (response.success) {
-        Message.success(response.message)
-    }
-}
-
-const crudOptions = ref({
-    api: dictApi.getDictIndex,
-    showIndex: false,
-    operationColumnAlign: "center",
-    rowSelection: { showCheckedAll: true },
-    searchColNumber: 4,
-    tablePagination: false,
-    operationColumn: true,
-    showTools: false,
-    afterDelete(response) {
-        crudRef.value.tableRef.selectAll(false)
-    }
-})
-
-const crudColumns = ref([
-    { title: "ID", dataIndex: "id", addDisplay: false, editDisplay: false, width: 50, hide: true },
-    {
-        title: "字典备注",
-        dataIndex: "remark",
-        search: true,
-        width: 220,
-        align: "center",
-        commonRules: [{ required: true, message: "字典备注必填" }]
-    },
-    {
-        title: "字典标识",
-        dataIndex: "code",
-        search: true,
-        width: 260,
-        align: "center",
-        commonRules: [{ required: true, message: "字典标识必填" }]
-    },
-    {
-        title: "状态",
-        dataIndex: "status",
-        search: true,
-        formType: "radio",
-        align: "center",
-        dict: { name: "data_status", props: { label: "title", value: "key" } },
-        addDefaultValue: "1",
-        width: 180
-    },
-    {
-        title: "字典名称",
-        dataIndex: "name",
-        hide: true,
-        formType: "textarea",
-        align: "center"
-    },
-    {
-        title: "更新时间",
-        dataIndex: "update_datetime",
-        addDisplay: false,
-        editDisplay: false,
-        align: "center",
-        search: true,
-        formType: "range",
-        width: 180
-    }
-])
-
+import DataList from "./DataList/index.vue"
+import useDictCrud from "./useDictCrud"
+import useDataListRef from "./useDataListRef"
+// 1.useDictCrud
+const { crudRef, changeStatus, crudOptions, crudColumns } = useDictCrud()
+// 2.dataList.vue界面打开和ref定义
+const { datalistRef, openDictList } = useDataListRef()
 defineOptions({
     name: "dictmanage"
 })

cdTMP/src/views/datamanage/dictmanage/useDataListRef.ts

@@ -0,0 +1,15 @@
+import { ref } from "vue"
+/**
+ * 该hook仅定义dataList的ref以及调用open函数
+ */
+export default function useDataListRef() {
+    const datalistRef = ref()
+    // 打开datalist页面
+    const openDictList = async (row: object) => {
+        datalistRef.value.open(row)
+    }
+    return {
+        datalistRef,
+        openDictList
+    }
+}

cdTMP/src/views/datamanage/dictmanage/useDictCrud.ts

@@ -0,0 +1,89 @@
+import { ref } from "vue"
+import dictApi from "@/api/system/dict"
+import { Message } from "@arco-design/web-vue"
+/**
+ * dict主页面展示配置以及ref定义
+ */
+export default function useDictCrud() {
+    // refs
+    const crudRef = ref()
+    // 事件函数
+    const changeStatus = async (status: string, id: number) => {
+        // 点击切换status
+        try {
+            const response = await dictApi.changeStatus({ id, status })
+            if (response.success) {
+                Message.success(response.message)
+            }
+        } catch (err) {
+            return
+        }
+    }
+    // crud定义
+    const crudOptions = ref({
+        api: dictApi.getDictIndex,
+        showIndex: false,
+        operationColumnAlign: "center",
+        rowSelection: { showCheckedAll: true },
+        searchColNumber: 4,
+        tablePagination: false,
+        operationColumn: true,
+        showTools: false,
+        afterDelete() {
+            crudRef.value.tableRef.selectAll(false)
+        }
+    })
+    const crudColumns = ref([
+        { title: "ID", dataIndex: "id", addDisplay: false, editDisplay: false, width: 50, hide: true },
+        {
+            title: "字典备注",
+            dataIndex: "remark",
+            search: true,
+            width: 220,
+            align: "center",
+            commonRules: [{ required: true, message: "字典备注必填" }]
+        },
+        {
+            title: "字典标识",
+            dataIndex: "code",
+            search: true,
+            width: 260,
+            align: "center",
+            commonRules: [{ required: true, message: "字典标识必填" }]
+        },
+        {
+            title: "状态",
+            dataIndex: "status",
+            search: true,
+            hide: true,
+            formType: "radio",
+            align: "center",
+            dict: { name: "data_status", props: { label: "title", value: "key" } },
+            addDefaultValue: "1",
+            width: 180
+        },
+        {
+            title: "字典名称",
+            dataIndex: "name",
+            hide: true,
+            formType: "textarea",
+            align: "center"
+        },
+        {
+            title: "更新时间",
+            dataIndex: "update_datetime",
+            addDisplay: false,
+            editDisplay: false,
+            align: "center",
+            search: true,
+            formType: "range",
+            width: 180
+        }
+    ])
+    return {
+        crudRef,
+        changeStatus,
+        crudOptions,
+        crudColumns
+    }
+}