From b0148bcac690556507ef4f03eba7740b6b2d6b4a Mon Sep 17 00:00:00 2001
From: easy <1358086367@qq.com>
Date: Mon, 30 Jan 2023 17:05:27 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/menu.ts                        |   4 +
 src/router/menu.ts                            |   8 +
 src/utils/comm.ts                             |  27 --
 .../components/dialogs/DeviceChooseDialog.vue |   6 +-
 src/views/system/Menu/Detail/BasicInfo.vue    | 283 ++++++++++++++++++
 src/views/system/Menu/Detail/ButtonMange.vue  |  18 ++
 src/views/system/Menu/Detail/index.vue        |  25 ++
 src/views/system/Menu/index.d.ts              |   0
 src/views/system/Menu/index.vue               | 247 +++++++++++++++
 9 files changed, 589 insertions(+), 29 deletions(-)
 create mode 100644 src/api/system/menu.ts
 create mode 100644 src/views/system/Menu/Detail/BasicInfo.vue
 create mode 100644 src/views/system/Menu/Detail/ButtonMange.vue
 create mode 100644 src/views/system/Menu/Detail/index.vue
 create mode 100644 src/views/system/Menu/index.d.ts
 create mode 100644 src/views/system/Menu/index.vue

diff --git a/src/api/system/menu.ts b/src/api/system/menu.ts
new file mode 100644
index 00000000..6b584c4b
--- /dev/null
+++ b/src/api/system/menu.ts
@@ -0,0 +1,4 @@
+import server from '@/utils/request';
+
+// 获取当前用户可访问菜单
+export const getMenuTree_api = (data: object) => server.post(`/menu/_all/tree`, data);
\ No newline at end of file
diff --git a/src/router/menu.ts b/src/router/menu.ts
index 2e92daff..20a8ca67 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -113,6 +113,14 @@ export default [
         path:'/system/Permission',
         component: ()=>import('@/views/system/Permission/index.vue')
     },
+    {
+        path:'/system/Menu',
+        component: ()=>import('@/views/system/Menu/index.vue')
+    },
+    {
+        path:'/system/Menu/detail/:id',
+        component: ()=>import('@/views/system/Menu/Detail/index.vue')
+    },
     // 初始化
     {
       path: '/init-home',
diff --git a/src/utils/comm.ts b/src/utils/comm.ts
index 3c032a79..b5a12816 100644
--- a/src/utils/comm.ts
+++ b/src/utils/comm.ts
@@ -57,30 +57,3 @@ export const filterTreeSelectNode = (value: string, treeNode: any, key: string =
 export const filterSelectNode = (value: string, option: any, key: string = 'label'): boolean => {
     return option[key]?.includes(value)
 }
-
-/**
- * 时间转换为'2022-01-02 14:03:05'
- * @param date 时间对象
- * @returns 
- */
-export const dateFormat = (dateSouce:any):string|Error => {
-    let date = null
-    try {
-        date = new Date(dateSouce)
-    } catch (error) {
-        return new Error('请传入日期格式数据')
-    }
-    let year = date.getFullYear();
-    let month: number | string = date.getMonth() + 1;
-    let day: number | string = date.getDate();
-    let hour: number | string = date.getHours();
-    let minutes: number | string = date.getMinutes();
-    let seconds: number | string = date.getSeconds();
-    month = (month < 10) ? '0' + month : month;
-    day = (day < 10) ? '0' + day : day;
-    hour = (hour < 10) ? '0' + hour : hour;
-    minutes = (minutes < 10) ? '0' + minutes : minutes;
-    seconds = (seconds < 10) ? '0' + seconds : seconds;
-    return year + "-" + month + "-" + day
-        + " " + hour + ":" + minutes + ":" + seconds;
-}
diff --git a/src/views/home/components/dialogs/DeviceChooseDialog.vue b/src/views/home/components/dialogs/DeviceChooseDialog.vue
index 18a03947..ecb16650 100644
--- a/src/views/home/components/dialogs/DeviceChooseDialog.vue
+++ b/src/views/home/components/dialogs/DeviceChooseDialog.vue
@@ -22,7 +22,9 @@
             }"
         >
             <template #modifyTime="slotProps">
-                <span>{{ dateFormat(slotProps.modifyTime) }}</span>
+                <span>{{
+                    moment(slotProps.modifyTime).format('HHHH-MM-DD HH:mm:ss')
+                }}</span>
             </template>
             <template #state="slotProps">
                 <StatusLabel
@@ -46,8 +48,8 @@ import StatusLabel from '../StatusLabel.vue';
 
 import { ComponentInternalInstance } from 'vue';
 import { getDeviceList_api } from '@/api/home';
-import { dateFormat } from '@/utils/comm';
 import { message } from 'ant-design-vue';
+import moment from 'moment';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const emits = defineEmits(['confirm']);
diff --git a/src/views/system/Menu/Detail/BasicInfo.vue b/src/views/system/Menu/Detail/BasicInfo.vue
new file mode 100644
index 00000000..37cec9cb
--- /dev/null
+++ b/src/views/system/Menu/Detail/BasicInfo.vue
@@ -0,0 +1,283 @@
+<template>
+    <div class="basic-info-container">
+        <a-card>
+            <h3>基本信息</h3>
+            <a-form :model="form.data" class="basic-form">
+                <div class="row" style="display: flex">
+                    <a-form-item
+                        label="菜单图标"
+                        name="icon"
+                        :rules="[
+                            {
+                                required: true,
+                                message: '请上传图标',
+                            },
+                        ]"
+                        style="flex: 0 0 186px"
+                    >
+                        <div class="icon-upload has-icon" v-if="form.data.icon">
+                            <svg aria-hidden="true">
+                                <use :xlinkHref="`#${form.data.icon}`" />
+                            </svg>
+                            <span class="mark">点击修改</span>
+                        </div>
+
+                        <div v-else class="icon-upload no-icon">
+                            <span>
+                                <plus-outlined style="font-size: 30px" />
+                                <p>点击选择图标</p>
+                            </span>
+                        </div>
+                    </a-form-item>
+                    <a-row :gutter="24" style="flex: 1 1 auto">
+                        <a-col :span="12">
+                            <a-form-item
+                                label="名称"
+                                name="name"
+                                :rules="[
+                                    { required: true, message: '请输入名称' },
+                                    { max: 64, message: '最多可输入64个字符' },
+                                ]"
+                            >
+                                <a-input v-model:value="form.data.name" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item
+                                label="编码"
+                                name="code"
+                                :rules="[
+                                    { required: true, message: '请输入编码' },
+                                    { max: 64, message: '最多可输入64个字符' },
+                                ]"
+                            >
+                                <a-input v-model:value="form.data.code" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item
+                                label="页面地址"
+                                name="url"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入页面地址',
+                                    },
+                                    { max: 128, message: '最多可输入128字符' },
+                                ]"
+                            >
+                                <a-input v-model:value="form.data.url" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item
+                                label="排序"
+                                name="sortIndex"
+                                :rules="[
+                                    {
+                                        pattern: /^[0-9]*[1-9][0-9]*$/,
+                                        message: '请输入大于0的整数',
+                                    },
+                                ]"
+                            >
+                                <a-input v-model:value="form.data.sortIndex" />
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                </div>
+
+                <a-form-item label="说明" name="describe">
+                    <a-textarea
+                        v-model:value="form.data.describe"
+                        :rows="4"
+                        placeholder="请输入说明"
+                    />
+                </a-form-item>
+            </a-form>
+        </a-card>
+        <a-card>
+            <h3>权限配置</h3>
+            <a-form :model="form.data" class="basic-form permiss-form">
+                <a-form-item label="数据权限控制" name="accessSupport" required>
+                    
+                    <a-radio-group
+                        v-model:value="form.data.accessSupport"
+                        name="radioGroup"
+                    >
+                        <a-radio value="unsupported">不支持</a-radio>
+                        <a-radio value="support">支持</a-radio>
+                        <a-radio value="indirect">间接控制</a-radio>
+                    </a-radio-group>
+
+                    <a-form-item
+                        name="assetType"
+                        v-if="form.data.accessSupport === 'support'"
+                        :rules="[{ required: true, message: '请选择资产类型' }]"
+                    >
+                        <a-select
+                            v-model:value="form.data.assetType"
+                            style="width: 500px"
+                            placeholder="请选择资产类型"
+                        >
+                            <a-select-option
+                                v-for="item in form.assetsType"
+                                :value="item.value"
+                                >{{ item.label }}</a-select-option
+                            >
+                        </a-select>
+                    </a-form-item>
+
+                    <a-form-item
+                        name="indirectMenus"
+                        v-if="form.data.accessSupport === 'indirect'"
+                        :rules="[{ required: true, message: '请选择关联菜单' }]"
+                    >
+                        <a-tree-select
+                            v-model:value="form.data.indirectMenus"
+                            style="width: 400px"
+                            :dropdown-style="{
+                                maxHeight: '400px',
+                                overflow: 'auto',
+                            }"
+                            placeholder="请选择关联菜单"
+                            multiple
+                            show-search
+                            tree-default-expand-all
+                            :tree-data="form.treeData"
+                        >
+                            <template #title="{ value: val, title }">
+                                <b
+                                    v-if="val === 'parent 1-1'"
+                                    style="color: #08c"
+                                    >{{ val }}</b
+                                >
+                                <template v-else>{{ title }}</template>
+                            </template>
+                        </a-tree-select>
+                    </a-form-item>
+                </a-form-item>
+                <a-form-item label="权限">
+                    <a-input
+                        v-model:value="form.data.permissions"
+                        style="width: 300px"
+                        allowClear
+                    />
+                </a-form-item>
+            </a-form>
+
+            <a-button type="primary" @click="clickSave">保存</a-button>
+        </a-card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { PlusOutlined } from '@ant-design/icons-vue';
+
+const route = useRoute();
+const routeParams = {
+    id: route.params.id === ':id' ? '' : route.params.id,
+    ...route.query,
+};
+
+const form = reactive({
+    data: {
+        name: '',
+        code: '',
+        url: '',
+        sortIndex: '',
+        icon: '',
+        describe: '',
+        permissions: '',
+        accessSupport: '',
+        assetType: undefined,
+        indirectMenus: [],
+        ...routeParams,
+    } as formType,
+
+    treeData: [],
+    assetsType: [] as assetType[],
+});
+
+const clickSave = () => {};
+
+type formType = {
+    name: string;
+    code: string;
+    url: string;
+    sortIndex: string;
+    icon: string;
+    permissions: string;
+    describe: string;
+    accessSupport: string;
+    assetType: string | undefined;
+    indirectMenus: any[];
+};
+
+type assetType = {
+    label: string;
+    value: string;
+};
+</script>
+
+<style lang="less" scoped>
+.basic-info-container {
+    .ant-card {
+        margin-bottom: 24px;
+
+        h3 {
+            position: relative;
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+            padding: 4px 0 4px 12px;
+            font-weight: bold;
+            font-size: 16px;
+
+            &::before {
+                position: absolute;
+                top: 5px px;
+                left: 0;
+                width: 4px;
+                height: calc(100% - 10px);
+                background-color: #1d39c4;
+                border-radius: 2px;
+                content: ' ';
+            }
+        }
+
+        .basic-form {
+            .ant-form-item {
+                display: block;
+                :deep(.ant-form-item-label) {
+                    overflow: inherit;
+                    label::after {
+                        display: none;
+                    }
+                }
+                :deep(.ant-form-item-control-input-content) {
+                    .icon-upload {
+                        width: 160px;
+                        height: 150px;
+                        border: 1px dashed #d9d9d9;
+                        font-size: 14px;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        text-align: center;
+                        cursor: pointer;
+                        transition: 0.5s;
+                        &:hover {
+                            border-color: #415ed1;
+                        }
+                    }
+                    .has-icon {
+                    }
+                    .no-icon {
+                        background-color: rgba(0, 0, 0, 0.06);
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/system/Menu/Detail/ButtonMange.vue b/src/views/system/Menu/Detail/ButtonMange.vue
new file mode 100644
index 00000000..6c55ec8d
--- /dev/null
+++ b/src/views/system/Menu/Detail/ButtonMange.vue
@@ -0,0 +1,18 @@
+<template>
+    <div class="button-mange-container">
+
+    </div>
+</template>
+
+<script setup lang="ts">
+
+const route = useRoute();
+const routeParams = {
+    id: route.params.id === ':id' ? '' : route.params.id,
+    ...route.query,
+};
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/system/Menu/Detail/index.vue b/src/views/system/Menu/Detail/index.vue
new file mode 100644
index 00000000..08de6fd6
--- /dev/null
+++ b/src/views/system/Menu/Detail/index.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="menu-detail-container">
+        <a-tabs v-model:activeKey="activeKey">
+            <a-tab-pane key="basic" tab="基本信息"> <BasicInfo /> </a-tab-pane>
+            <a-tab-pane key="button" tab="按钮管理">
+                <ButtonMange />
+            </a-tab-pane>
+        </a-tabs>
+    </div>
+</template>
+
+<script setup lang="ts">
+import BasicInfo from './BasicInfo.vue';
+import ButtonMange from './ButtonMange.vue';
+const activeKey = ref('basic');
+</script>
+
+<style lang="less" scoped>
+.menu-detail-container {
+    .ant-tabs-tabpane {
+        background-color: #f0f2f5;
+        padding: 24px;
+    }
+}
+</style>
diff --git a/src/views/system/Menu/index.d.ts b/src/views/system/Menu/index.d.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/system/Menu/index.vue b/src/views/system/Menu/index.vue
new file mode 100644
index 00000000..7ff407f3
--- /dev/null
+++ b/src/views/system/Menu/index.vue
@@ -0,0 +1,247 @@
+<template>
+    <div class="menu-container">
+        <Search :columns="query.columns" @search="query.search" />
+
+        <JTable
+            ref="tableRef"
+            :columns="table.columns"
+            :request="table.getList"
+            model="TABLE"
+            :params="query.params"
+        >
+            <template #headerTitle>
+                <a-button
+                    type="primary"
+                    @click="table.toDetails({})"
+                    style="margin-right: 10px"
+                    ><plus-outlined />新增</a-button
+                >
+                <a-button>菜单实例</a-button>
+            </template>
+            <template #createTime="slotProps">
+                {{ slotProps.createTime }}
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip>
+                        <template #title>查看</template>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            @click="table.toDetails(slotProps)"
+                        >
+                            <edit-outlined />
+                        </a-button>
+                    </a-tooltip>
+                    <a-tooltip>
+                        <template #title>新增子菜单</template>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            @click="table.toDetails(slotProps)"
+                        >
+                            <edit-outlined />
+                        </a-button>
+                    </a-tooltip>
+
+                    <a-popconfirm
+                        title="是否删除该菜单"
+                        ok-text="确定"
+                        cancel-text="取消"
+                        @confirm="table.clickDel(slotProps)"
+                        :disabled="slotProps.status"
+                    >
+                        <a-tooltip>
+                            <template #title>删除</template>
+                            <a-button style="padding: 0" type="link">
+                                <delete-outlined />
+                            </a-button>
+                        </a-tooltip>
+                    </a-popconfirm>
+                </a-space>
+            </template>
+        </JTable>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { getMenuTree_api } from '@/api/system/menu';
+
+const router = useRouter();
+
+// 筛选
+const query = reactive({
+    columns: [
+        {
+            title: '编码',
+            dataIndex: 'code',
+            key: 'code',
+            ellipsis: true,
+            fixed: 'left',
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+            ellipsis: true,
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '页面地址',
+            dataIndex: 'url',
+            key: 'url',
+            ellipsis: true,
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '排序',
+            dataIndex: 'sortIndex',
+            key: 'sortIndex',
+            ellipsis: true,
+            search: {
+                type: 'number',
+            },
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            key: 'createTime',
+            ellipsis: true,
+            search: {
+                type: 'date',
+            },
+        },
+    ],
+    params: {
+        terms: [],
+    },
+    search: (params: any) => {
+        query.params = params;
+    },
+});
+
+const tableRef = ref<Record<string, any>>({}); // 表格实例
+const table = reactive({
+    columns: [
+        {
+            title: '编码',
+            dataIndex: 'code',
+            key: 'code',
+            width: 300,
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+            width: 220,
+        },
+        {
+            title: '页面地址',
+            dataIndex: 'url',
+            key: 'url',
+        },
+        {
+            title: '排序',
+            dataIndex: 'sortIndex',
+            key: 'sortIndex',
+            width: 80,
+        },
+        {
+            title: '说明',
+            dataIndex: 'describe',
+            key: 'describe',
+            width: 200,
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            key: 'createTime',
+            scopedSlots: true,
+            width: 180,
+        },
+        {
+            title: '操作',
+            dataIndex: 'action',
+            key: 'action',
+            scopedSlots: true,
+            width: 140,
+        },
+    ],
+    tableData: [],
+    total: 0,
+    getList: async (_params: any) => {
+        //过滤非集成的菜单
+        const item = {
+            terms: [
+                {
+                    terms: [
+                        {
+                            column: 'owner',
+                            termType: 'eq',
+                            value: 'iot',
+                        },
+                        {
+                            column: 'owner',
+                            termType: 'isnull',
+                            value: '1',
+                            type: 'or',
+                        },
+                    ],
+                },
+            ],
+        };
+        const params = {
+            ..._params,
+            terms:
+                _params.terms && _params.length !== 0
+                    ? [...query.params.terms, item]
+                    : [item],
+            sorts: [{ name: 'sortIndex', order: 'asc' }],
+            paging: false,
+        };
+        const resp: any = await getMenuTree_api(params);
+        const lastItem = resp.result[resp.result.length - 1];
+        table.total == lastItem ? lastItem.sortIndex + 1 : 1;
+        return {
+            code: resp.message,
+            result: {
+                data: resp.result,
+                pageIndex: 0,
+                pageSize: 0,
+                total: 0,
+            },
+            status: resp.status,
+        };
+    },
+    // 跳转至详情页
+    toDetails: (row: any) => {
+        router.push(
+            `/system/Menu/detail/${row.id || ':id'}?pid=${
+                row.pid || ''
+            }&basePath=${row.basePath || ''}&sortIndex=${table.total + 1}`,
+        );
+    },
+    // 删除
+    clickDel: (row: any) => {
+        // delPermission_api(row.id).then((resp: any) => {
+        //     if (resp.status === 200) {
+        //         tableRef.value?.reload();
+        //         message.success('操作成功!');
+        //     }
+        // });
+    },
+    // 刷新列表
+    refresh: () => {
+        tableRef.value.reload();
+    },
+});
+</script>
+
+<style lang="less" scoped></style>