Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

# Conflicts:
#	src/components/AIcon/index.tsx

src/api/home.js

@@ -1,8 +0,0 @@
-import server from '@/utils/request';
-
-// 设备数量
-export const getDeviceCount_api = () => server.get(`/device/instance/_count`);
-// 产品数量
-export const getProductCount_api = (data) => server.post(`/device-product/_count`, data);
-// 查询产品列表
-export const getProductList_api = (data) => server.get(`/device/product/_query/no-paging?paging=false`, data);

src/api/home.ts

@@ -0,0 +1,15 @@
+import server from '@/utils/request';
+
+// 当前登录用户权限信息
+export const getMe_api = () => server.get(`/authorize/me`);
+// 设置登录用户选择的页面
+export const setView_api = (data:object) => server.patch(`/user/settings/view/user`, data);
+// 当前登录用户选择的页面
+export const getView_api = () => server.get(`/user/settings/view/user`);
+
+// 设备数量
+export const getDeviceCount_api = () => server.get(`/device/instance/_count`);
+// 产品数量
+export const getProductCount_api = (data:object) => server.post(`/device-product/_count`, data);
+// 查询产品列表
+export const getProductList_api = (data:object) => server.get(`/device/product/_query/no-paging?paging=false`, data);

src/api/login.js

@@ -1,17 +0,0 @@
-import server from '@/utils/request'
-
-export const config = () => server.get(`/authorize/captcha/config`)
-
-export const code = () => server.get(`/authorize/captcha/image?width=130&height=30`)
-
-export const authLogin = (data) => server.post(`/authorize/login`, data)
-
-export const getInitSet = () => server.get(`/user/settings/init`)
-
-export const postInitSet = (data) => server.post(`/user/settings/init`, data)
-
-export const systemVersion = () => server.get(`/system/version`)
-
-export const bindInfo = () => server.get(`/application/sso/_all`)
-
-export const settingDetail = (scopes) => server.get(`/system/config/${scopes}`)

src/api/login.ts

@@ -0,0 +1,49 @@
+import server from '@/utils/request'
+
+/**
+ * 获取验证码配置
+ * @returns 
+ */
+export const config = () => server.get(`/authorize/captcha/config`)
+
+/**
+ * 获取验证码图片
+ * @returns 
+ */
+export const code = () => server.get(`/authorize/captcha/image?width=130&height=30`)
+
+/**
+ * 登录
+ * @returns 
+ */
+export const authLogin = (data: any) => server.post(`/authorize/login`, data)
+
+/**
+ * 查询初始化配置信息
+ * @returns 
+ */
+export const getInitSet = () => server.get(`/user/settings/init`)
+
+/**
+ * 创建初始化配置信息
+ * @returns 
+ */
+export const postInitSet = (data: any) => server.post(`/user/settings/init`, data)
+
+/**
+ * 查询系统版本信息
+ * @returns 
+ */
+export const systemVersion = () => server.get(`/system/version`)
+
+/**
+ * 获取支持的SSO的应用
+ * @returns 
+ */
+export const bindInfo = () => server.get(`/application/sso/_all`)
+
+/**
+ * 查询配置信息
+ * @returns 
+ */
+export const settingDetail = (scopes: string) => server.get(`/system/config/${scopes}`)

src/api/notice/config.ts

@@ -1,4 +1,4 @@
-import { patch, post, get } from '@/utils/request'
+import { patch, post, get, remove } from '@/utils/request'
 
 export default {
     // 列表
@@ -8,5 +8,30 @@ export default {
     // 新增
     save: (data: any) => post(`/notifier/config`, data),
     // 修改
-    update: (data: any) => patch(`/notifier/config`, data)
+    update: (data: any) => patch(`/notifier/config`, data),
+    del: (id: string) => remove(`/notifier/config/${id}`),
+    getTemplate: (data: any, id: string) => post(`/notifier/template/${id}/_query`, data),
+    getTemplateDetail: (id: string) => get(`/notifier/template/${id}/detail`),
+    debug: (data: any, configId: string, templateId: string) => post(`/notifier/${configId}/${templateId}/_send`, data),
+    getHistory: (data: any, id: string) => post(`/notify/history/config/${id}/_query`, data),
+    // 获取所有平台用户
+    getPlatformUsers: () => post(`/user/_query/no-paging`, { paging: false }),
+    // 钉钉部门
+    dingTalkDept: (id: string) => get(`/notifier/dingtalk/corp/${id}/departments/tree`),
+    // 钉钉部门人员
+    getDingTalkUsers: (configId: string, deptId: string) => get(`/notifier/dingtalk/corp/${configId}/${deptId}/users`),
+    // 钉钉已经绑定的人员
+    getDingTalkBindUsers: (id: string) => get(`/user/third-party/dingTalk_dingTalkMessage/${id}`),
+    // 钉钉绑定用户
+    dingTalkBindUser: (data: any, id: string) => patch(`/user/third-party/dingTalk_dingTalkMessage/${id}`, data),
+    // 微信部门
+    weChatDept: (id: string) => get(`/notifier/wechat/corp/${id}/departments`),
+    // 微信部门人员
+    getWeChatUsers: (configId: string, deptId: string) => get(`/notifier/wechat/corp/${configId}/${deptId}/users`),
+    // 微信已经绑定的人员
+    getWeChatBindUsers: (id: string) => get(`/user/third-party/weixin_corpMessage/${id}`),
+    // 微信绑定用户
+    weChatBindUser: (data: any, id: string) => patch(`/user/third-party/weixin_corpMessage/${id}`, data),
+    // 解绑
+    unBindUser: (data: any, id: string) => post(`/user/third-party/${id}/_unbind`, data)
 }

src/api/notice/template.ts

@@ -1,4 +1,5 @@
-import { patch, post, get } from '@/utils/request'
+import { patch, post, get, remove } from '@/utils/request'
+import { BindConfig } from '@/views/notice/Template/types'
 
 export default {
     // 列表
@@ -8,5 +9,19 @@ export default {
     // 新增
     save: (data: any) => post(`/notifier/template`, data),
     // 修改
-    update: (data: any) => patch(`/notifier/template`, data)
+    update: (data: any) => patch(`/notifier/template`, data),
+    del: (id: any) => remove(`/notifier/template/${id}`),
+    getConfig: (data: any) => post<BindConfig>(`/notifier/config/_query/no-paging?paging=false`, data),
+    getTemplateDetail: (id: string) => get(`/notifier/template/${id}/detail`),
+    debug: (data: any, configId: string, templateId: string) => post(`/notifier/${configId}/${templateId}/_send`, data),
+    getHistory: (data: any, id: string) => post(`/notify/history/template/${id}/_query`, data),
+    // 钉钉/微信, 根据配置获取部门和用户
+    getDept: (type: string, id: string) => get(`/notifier/${type}/corp/${id}/departments`),
+    getUser: (type: string, id: string) => get(`/notifier/${type}/corp/${id}/users`),
+    // 微信获取标签推送
+    getTags: (id: string) => get(`/notifier/wechat/corp/${id}/tags`),
+    // 语音/短信获取阿里云模板
+    getAliTemplate: (id: string) => get(`/notifier/sms/aliyun/${id}/templates`),
+    // 短信获取签名
+    getSigns: (id: string) => get(`/notifier/sms/aliyun/${id}/signs`)
 }

src/api/system/permission.ts

@@ -0,0 +1,6 @@
+import server from '@/utils/request';
+
+// 获取权限列表
+export const getPermission_api = (data:object) => server.post(`/permission/_query/`,data);
+// 修改权限信息
+export const editPermission_api = (data:object) => server.patch(`/permission`,data);

src/components/AIcon/index.tsx

@@ -27,7 +27,8 @@ const iconKeys = [
     'SyncOutlined',
     'ExclamationCircleOutlined',
     'UploadOutlined',
-    'PlusCircleOutlined'
+    'PlusCircleOutlined',
+    'QuestionCircleOutlined'
 ]
 
 const Icon = (props: {type: string}) => {

src/components/RadioCard/index.vue

@@ -25,6 +25,7 @@ interface IOption {
 
 type Emits = {
     (e: 'update:modelValue', data: string): void;
+    (e: 'change') :void
 };
 const emit = defineEmits<Emits>();
 
@@ -41,7 +42,10 @@ const props = defineProps({
 
 const myValue = computed({
     get: () => props.modelValue,
-    set: (val) => emit('update:modelValue', val),
+    set: (val) => {
+        emit('update:modelValue', val)
+        emit('change')
+    },
 });
 </script>
 

src/router/menu.ts

@@ -109,6 +109,10 @@ export default [
         path:'/system/Role/detail/:id',
         component: ()=>import('@/views/system/Role/Detail/index.vue')
     },
+    {
+        path:'/system/Permission',
+        component: ()=>import('@/views/system/Permission/index.vue')
+    },
     // 初始化
     {
       path: '/init-home',
@@ -116,9 +120,13 @@ export default [
     },
     // 物联卡 iot-card
     {
-      path: '/iot-card/home',
+      path: '/iot-card/Home',
       component: () => import('@/views/iot-card/Home/index.vue')
     },
+    {
+      path: '/iot-card/Dashboard',
+      component: () => import('@/views/iot-card/Dashboard/index.vue')
+    },
     // 北向输出
     {
         path: '/northbound/DuerOS',

src/utils/utils.ts

@@ -1,6 +1,7 @@
 import moment from "moment";
 import { LocalStore } from "./comm";
 import { TOKEN_KEY } from "./variable";
+import {SystemConst} from './consts';
 
 /**
  * 把数据下载成JSON
@@ -52,4 +53,6 @@ export const downloadObject = (record: Record<string, any>, fileName: string, fo
   document.body.appendChild(formElement);
   formElement.submit();
   document.body.removeChild(formElement);
-};
+};
+// 是否不是community版本
+export const isNoCommunity = !(localStorage.getItem(SystemConst.VERSION_CODE) === 'community');

src/views/home/components/InitHome/index.vue

@@ -7,37 +7,47 @@
                 <a-col
                     :span="8"
                     class="select-item"
-                    :class="{ selected: selectId === '1' }"
+                    :class="{ selected: selectValue === 'device' }"
-                    @click="selectId = '1'"
+                    @click="selectValue = 'device'"
                 >
                     <img src="/images/home/device.png" alt="" />
                 </a-col>
                 <a-col
                     :span="8"
                     class="select-item"
-                    :class="{ selected: selectId === '2' }"
+                    :class="{ selected: selectValue === 'ops' }"
-                    @click="selectId = '2'"
+                    @click="selectValue = 'ops'"
                 >
                     <img src="/images/home/ops.png" alt="" />
                 </a-col>
                 <a-col
                     :span="8"
                     class="select-item"
-                    :class="{ selected: selectId === '3' }"
+                    :class="{ selected: selectValue === 'comprehensive' }"
-                    @click="selectId = '3'"
+                    @click="selectValue = 'comprehensive'"
                 >
                     <img src="/images/home/comprehensive.png" alt="" />
                 </a-col>
             </a-row>
-            <a-button type="primary" class="btn" @click="confirm">确定</a-button>
+            <a-button type="primary" class="btn" @click="confirm"
+                >确定</a-button
+            >
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
-const selectId = ref('1');
+import { setView_api } from '@/api/home';
 
-const confirm = ()=>{}
+const emits = defineEmits(['refresh']);
+const selectValue = ref('device');
+
+const confirm = () => {
+    setView_api({
+        name: 'view',
+        content: selectValue.value,
+    }).then(() => emits('refresh'));
+};
 </script>
 
 <style lang="less" scoped>

src/views/home/index.vue

@@ -2,11 +2,11 @@
     <div class="container">
         <div class="header"></div>
         <div class="left"></div>
-        <div class="content iot-home-container">
+        <div class="content iot-home-container" v-loading="loading">
-            <!-- <InitHome /> -->
+            <InitHome v-if="currentView === 'init'" @refresh="setCurrentView" />
-            <!-- <DeviceHome /> -->
+            <DeviceHome v-else-if="currentView === 'device'" />
-            <!-- <DevOpsHome /> -->
+            <DevOpsHome v-else-if="currentView === 'ops'" />
-            <ComprehensiveHome />
+            <ComprehensiveHome v-else-if="currentView === 'comprehensive'" />
         </div>
     </div>
 </template>
@@ -17,6 +17,39 @@ import DeviceHome from './components/DeviceHome/index.vue';
 import DevOpsHome from './components/DevOpsHome/index.vue';
 import ComprehensiveHome from './components/ComprehensiveHome/index.vue';
 
+import { isNoCommunity } from '@/utils/utils';
+import { getMe_api, getView_api } from '@/api/home';
+
+const router = useRouter();
+
+const currentView = ref<string>('');
+const loading = ref<boolean>(true);
+
+// 获取选择的视图
+const setCurrentView = () => {
+    getView_api().then((resp: any) => {
+        if (resp.status === 200) {
+            if (resp.result) currentView.value = resp.result?.content;
+            else if (resp.result.username === 'admin') {
+                currentView.value = 'comprehensive';
+            } else currentView.value = 'init';
+        }
+    });
+};
+
+if (isNoCommunity) {
+    // 判断是否是api用户   是则跳转  否则获取选中的视图
+    getMe_api().then((resp: any) => {
+        if (resp && resp.status === 200) {
+            const isApiUser = resp.result.dimensions.find(
+                (item: any) =>
+                    item.type === 'api-client' || item.type.id === 'api-client',
+            );
+
+            isApiUser ? router.push('/system/api') : setCurrentView();
+        }
+    });
+}else setCurrentView()
 </script>
 
 <style lang="less" scoped>

src/views/iot-card/Dashboard/index.vue

@@ -0,0 +1,323 @@
+<!-- 物联卡-仪表盘 -->
+<template>
+    <div class="page-container">
+        <a-card>
+            <a-row :gutter="20" :style="{ marginBottom: '20px' }">
+                <a-col :span="24"><Guide title="数据统计" /></a-col>
+                <a-col :span="8">
+                    <div class="data-statistics-item">
+                        <div class="info" style="width: 100%">
+                            <div class="label">昨日流量消耗</div>
+                            <a-tooltip placement="bottomLeft">
+                                <template #title>
+                                    <span>{{ dayTotal }} M</span>
+                                </template>
+                                <div class="value">
+                                    {{ dayTotal }}
+                                    <span class="unit">M</span>
+                                </div>
+                            </a-tooltip>
+                        </div>
+                        <LineChart color="#FBA500" :chartData="dayOptions" />
+                    </div>
+                </a-col>
+                <a-col :span="8">
+                    <div class="data-statistics-item">
+                        <div class="info" style="width: 100%">
+                            <div class="label">当月流量消耗</div>
+                            <a-tooltip placement="bottomLeft">
+                                <template #title>
+                                    <span>{{ monthTotal }} M</span>
+                                </template>
+                                <div class="value">
+                                    {{ monthTotal }}
+                                    <span class="unit">M</span>
+                                </div>
+                            </a-tooltip>
+                        </div>
+                        <LineChart :chartData="monthOptions" />
+                    </div>
+                </a-col>
+                <a-col :span="8">
+                    <div class="data-statistics-item">
+                        <div class="info" style="width: 100%">
+                            <div class="label">本年流量消耗</div>
+                            <a-tooltip placement="bottomLeft">
+                                <template #title>
+                                    <span>{{ yearTotal }} M</span>
+                                </template>
+                                <div class="value">
+                                    {{ yearTotal }}
+                                    <span class="unit">M</span>
+                                </div>
+                            </a-tooltip>
+                        </div>
+                        <LineChart color="#58E1D3" :chartData="yearOptions" />
+                    </div>
+                </a-col>
+            </a-row>
+            <a-row :gutter="20">
+                <a-col :span="16">
+                    <Guide title="流量统计">
+                        <template #extra></template>
+                    </Guide>
+                    <LineChart
+                        :showX="true"
+                        :showY="true"
+                        style="min-height: 450px"
+                        :chartData="yearOptions"
+                    />
+                </a-col>
+                <a-col :span="8">
+                    <Guide title="流量使用TOP10">
+                        <template #extra></template>
+                    </Guide>
+                    <div class="rankingList" style="height: 400px">
+                        <div
+                            v-for="(item, index) in topList"
+                            :key="item.cardNum"
+                            class="rankItem"
+                        >
+                            <div
+                                class="number"
+                                :class="`number-item-${index + 1}`"
+                            >
+                                {{ index + 1 }}
+                            </div>
+                            <div class="cardNum">{{ item.cardNum }}</div>
+                            <div class="progress">
+                                <a-progress
+                                    :strokeColor="'#ADC6FF'"
+                                    :trailColor="'#E0E4E8'"
+                                    :strokeLinecap="'butt'"
+                                    :showInfo="false"
+                                    :percent="
+                                        Math.ceil((item.value / topTotal) * 100)
+                                    "
+                                ></a-progress>
+                            </div>
+                            <div class="total">
+                                {{ item?.value?.toFixed(2) }} M
+                            </div>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
+        </a-card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Guide from '../components/Guide.vue';
+import LineChart from '../components/LineChart.vue';
+import moment from 'moment';
+import { queryFlow } from '@/api/iot-card/home';
+
+const dayTotal = ref(0);
+const monthTotal = ref(0);
+const yearTotal = ref(0);
+const dayOptions = ref<any[]>([]);
+const monthOptions = ref<any[]>([]);
+const yearOptions = ref<any[]>([]);
+
+const flowData = ref<any[]>([]);
+const topList = ref<any[]>([]);
+const topTotal = ref(0);
+
+const getData = (
+    start: number,
+    end: number,
+): Promise<{ sortArray: any[]; data: any[] }> => {
+    return new Promise((resolve) => {
+        queryFlow(start, end, {
+            orderBy: 'date',
+        }).then((resp: any) => {
+            if (resp.status === 200) {
+                const sortArray = resp.result.sort(
+                    (a: any, b: any) =>
+                        new Date(a.date).getTime() - new Date(b.date).getTime(),
+                );
+                resolve({
+                    sortArray,
+                    data: sortArray.map(
+                        (item: any) => item.value && item.value.toFixed(2),
+                    ),
+                });
+            }
+        });
+    });
+};
+
+/**
+ * 查询今日、当月、本年数据
+ */
+const getDataTotal = () => {
+    const dTime = [
+        moment(new Date()).startOf('day').valueOf(),
+        moment(new Date()).endOf('day').valueOf(),
+    ];
+    const mTime = [
+        moment().startOf('month').valueOf(),
+        moment().endOf('month').valueOf(),
+    ];
+    const yTime = [
+        moment().startOf('year').valueOf(),
+        moment().endOf('year').valueOf(),
+    ];
+    getData(dTime[0], dTime[1]).then((resp) => {
+        dayTotal.value = resp.data
+            .reduce((r, n) => r + Number(n), 0)
+            .toFixed(2);
+        dayOptions.value = resp.sortArray;
+    });
+    getData(mTime[0], mTime[1]).then((resp) => {
+        monthTotal.value = resp.data
+            .reduce((r, n) => r + Number(n), 0)
+            .toFixed(2);
+        monthOptions.value = resp.sortArray;
+    });
+    getData(yTime[0], yTime[1]).then((resp) => {
+        yearTotal.value = resp.data
+            .reduce((r, n) => r + Number(n), 0)
+            .toFixed(2);
+        yearOptions.value = resp.sortArray;
+    });
+};
+
+/**
+ * 流量统计
+ * @param data
+ */
+const getEcharts = (data: any) => {
+    console.log(data);
+    let startTime = data.time.start;
+    let endTime = data.time.end;
+    if (data.time.type === 'week' || data.time.type === 'month') {
+        startTime = moment(data.time.start).startOf('days').valueOf();
+        endTime = moment(data.time.end).startOf('days').valueOf();
+    }
+    getData(startTime, endTime).then((resp) => {
+        flowData.value = resp.sortArray;
+    });
+};
+
+/**
+ * 流量使用TOP10
+ * @param star 开始时间
+ * @param end 结束时间
+ */
+const getTopRang = (star: number, end: number) => {
+    queryFlow(star, end, { orderBy: 'usage' }).then((resp: any) => {
+        if (resp.status === 200) {
+            const arr = resp.result
+                .slice(0, 10)
+                .sort((a: any, b: any) => b.value - a.value);
+            topTotal.value = arr.length ? arr[0].value : 0;
+            topList.value = arr;
+        }
+    });
+};
+
+getDataTotal();
+
+// getEcharts(data);
+
+const dTime = [
+    moment().subtract(6, 'days').startOf('day').valueOf(),
+    moment().endOf('day').valueOf(),
+];
+getTopRang(dTime[0], dTime[1]);
+</script>
+<style scoped lang="less">
+.page-container {
+    .data-statistics-item {
+        height: 140px;
+        background: #fcfcfc;
+        border: 1px solid #e0e4e8;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px;
+
+        .info {
+            // width: 180px;
+            width: 28%;
+            .label {
+                font-size: 14px;
+                color: rgba(0, 0, 0, 0.64);
+            }
+            .value {
+                font-size: 32px;
+                font-weight: bold;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                .unit {
+                    font-size: 20px;
+                    font-weight: normal;
+                }
+            }
+        }
+    }
+
+    .rankingList {
+        padding: 0;
+        overflow-y: auto;
+        list-style: none;
+
+        .rankItem {
+            display: flex;
+            justify-content: space-between;
+            min-width: 0;
+            padding: 12px 0;
+        }
+        .number {
+            flex: 0 0 24px;
+            height: 24px;
+            color: #fff;
+            font-weight: bold;
+            line-height: 24px;
+            text-align: center;
+            background-color: #d1d1d1;
+        }
+
+        .number-item-1 {
+            color: #e50012;
+            background-color: rgba(#e50012, 0.1);
+        }
+
+        .number-item-2 {
+            color: #fba500;
+            background-color: rgba(#fba500, 0.1);
+        }
+
+        .number-item-3 {
+            color: #597ef7;
+            background-color: rgba(#597ef7, 0.1);
+        }
+
+        .cardNum {
+            flex: 0 0 100px;
+            margin-left: 16px;
+        }
+
+        .progress {
+            flex: 1 1 auto;
+            margin: 0 8px;
+
+            :deep(.ant-progress-inner) {
+                border-radius: 0px;
+            }
+            :deep(.ant-progress-bg) {
+                border-radius: 0px;
+            }
+        }
+
+        .total {
+            flex: 0 0 80px;
+            color: #999;
+            text-align: right;
+        }
+    }
+}
+</style>

src/views/iot-card/components/LineChart.vue

@@ -0,0 +1,136 @@
+<template>
+    <div class="chart" ref="chart"></div>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts';
+
+const { proxy } = <any>getCurrentInstance();
+
+const props = defineProps({
+    // 图表颜色
+    color: {
+        type: String,
+        default: '#498BEF',
+    },
+    // 是否展示x轴
+    showX: {
+        type: Boolean,
+        default: false,
+    },
+    // 是否展示y轴
+    showY: {
+        type: Boolean,
+        default: false,
+    },
+    // 图表数据
+    chartData: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+/**
+ * 绘制图表
+ */
+const createChart = () => {
+    nextTick(() => {
+        const myChart = echarts.init(proxy.$refs.chart);
+
+        const options = {
+            grid: {
+                left: '7%',
+                right: '5%',
+                top: '5%',
+                bottom: '5%',
+            },
+            tooltip: {
+                trigger: 'axis',
+                // 		formatter: '{a}<br>{b}: {c}',
+                axisPointer: {
+                    type: 'shadow',
+                },
+            },
+            xAxis: [
+                {
+                    show: props.showX,
+                    boundaryGap: false,
+                    data: props.chartData.map((m: any) => m.date),
+                },
+            ],
+            yAxis: [
+                {
+                    show: props.showY,
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            type: 'dotted',
+                        },
+                    },
+                },
+            ],
+            series: [
+                {
+                    name: '流量消耗',
+                    type: 'line',
+                    symbol: 'circle',
+                    showSymbol: false,
+                    smooth: true,
+                    itemStyle: {
+                        normal: {
+                            color: props.color,
+                            lineStyle: {
+                                color: props.color,
+                                width: 1,
+                            },
+                            areaStyle: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0,
+                                    1,
+                                    0,
+                                    0,
+                                    [
+                                        {
+                                            offset: 0.1,
+                                            color: '#fff',
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: props.color,
+                                        },
+                                    ],
+                                ),
+                            },
+                        },
+                    },
+                    data: props.chartData.map(
+                        (m: any) => m.value && m.value.toFixed(2),
+                    ),
+                },
+            ],
+        };
+        myChart.setOption(options);
+        window.addEventListener('resize', function () {
+            myChart.resize();
+        });
+    });
+};
+
+watch(
+    () => props.chartData,
+    () => createChart(),
+    { immediate: true, deep: true },
+);
+</script>
+
+<style scoped lang="less">
+.chart {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/notice/Template/Detail/components/Attachments.vue

@@ -1,4 +1,4 @@
-<!-- webhook请求头可编辑表格 -->
+<!-- 附件信息 -->
 <template>
     <div class="attachment-wrapper">
         <div
@@ -15,13 +15,16 @@
                             [TOKEN_KEY]: LocalStore.get(TOKEN_KEY),
                         }"
                         :showUploadList="false"
-                        @change="handleChange"
+                        @change="(e) => handleChange(e, item.id)"
                     >
                         <upload-outlined />
                     </a-upload>
                 </template>
             </a-input>
-            <delete-outlined @click="handleDelete" style="cursor: pointer" />
+            <delete-outlined
+                @click="handleDelete(item.id)"
+                style="cursor: pointer"
+            />
         </div>
 
         <a-button
@@ -62,35 +65,65 @@ const props = defineProps({
     },
 });
 
-const handleChange = (info: UploadChangeParam) => {
+// const fileList = computed({
-    if (info.file.status === 'done') {
+//     get: () => props.attachments.map((m) => ({ id: fileId(), ...m })),
-        const result = info.file.response?.result;
+//     set: (val) =>
-        console.log('result: ', result);
+//         emit(
-    }
+//             'update:attachments',
-};
+//             val.map(({ name, location }) => ({ name, location })),
+//         ),
+// });
 
 const fileList = ref<IAttachments[]>([]);
+
 watch(
     () => props.attachments,
     (val) => {
-        fileList.value = val;
+        fileList.value = val.map((m) => ({
+            id: fileId(),
+            ...m,
+        }));
     },
     { deep: true },
 );
 
-const handleDelete = (id: number) => {
+const handleChange = (info: UploadChangeParam, id: string | undefined) => {
-    const idx = fileList.value.findIndex((f) => f.id === id);
+    if (info.file.status === 'done') {
-    fileList.value.splice(idx, 1);
+        const targetFileIdx = fileList.value.findIndex((f) => f.id === id);
-    emit('update:attachments', fileList.value);
+        fileList.value[targetFileIdx].name = info.file.name;
+        fileList.value[targetFileIdx].location = info.file.response?.result;
+        emit(
+            'update:attachments',
+            fileList.value.map(({ name, location }) => ({ name, location })),
+        );
+    }
 };
+
+/**
+ * 删除附件
+ * @param id
+ */
+const handleDelete = (id: string | undefined) => {
+    const idx = fileList.value.findIndex((f) => f.id === id);
+
+    fileList.value.splice(idx, 1);
+};
+
+/**
+ * 添加附件
+ */
 const handleAdd = () => {
     fileList.value.push({
-        id: fileList.value.length,
+        id: fileId(),
         name: '',
         location: '',
     });
-    emit('update:attachments', fileList.value);
 };
+
+/**
+ * 附件标识
+ */
+const fileId = () => String(new Date().getTime() + Math.random() * 9);
 </script>
 
 <style lang="less" scoped>

src/views/notice/Template/Detail/components/VariableDefinitions.vue

@@ -0,0 +1,136 @@
+<!-- 模板内容-变量列表 -->
+<template>
+    <div class="table-wrapper">
+        <a-table
+            :columns="columns"
+            :data-source="dataSource"
+            bordered
+            :pagination="false"
+        >
+            <template #bodyCell="{ column, text, record }">
+                <span v-if="column.dataIndex === 'id'">
+                    {{ record[column.dataIndex] }}
+                </span>
+                <a-input
+                    v-if="column.dataIndex === 'name'"
+                    v-model:value="record.name"
+                />
+                <a-select
+                    v-if="column.dataIndex === 'type'"
+                    v-model:value="record.type"
+                    @change="handleTypeChange(record)"
+                >
+                    <a-select-option value="string">字符串</a-select-option>
+                    <a-select-option value="date">时间</a-select-option>
+                    <a-select-option value="double">数字</a-select-option>
+                </a-select>
+                <template v-if="column.dataIndex === 'format'">
+                    <span v-if="record.type === 'string'">
+                        {{ record.format }}
+                    </span>
+                    <a-select
+                        v-if="record.type === 'date'"
+                        v-model:value="record.format"
+                    >
+                        <a-select-option value="timestamp">
+                            timestamp
+                        </a-select-option>
+                        <a-select-option value="yyyy-MM-dd">
+                            yyyy-MM-dd
+                        </a-select-option>
+                        <a-select-option value="yyyy-MM-dd HH:mm:ss">
+                            yyyy-MM-dd HH:mm:ss
+                        </a-select-option>
+                    </a-select>
+                    <a-input
+                        v-if="record.type === 'double'"
+                        v-model:value="record.format"
+                    >
+                        <template #suffix>
+                            <a-tooltip
+                                title="格式为：%.xf x代表数字保留的小数位数。当x=0时,代表格式为整数"
+                            >
+                                <AIcon type="QuestionCircleOutlined" />
+                            </a-tooltip>
+                        </template>
+                    </a-input>
+                </template>
+            </template>
+        </a-table>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+interface IVariable {
+    id: string;
+    name: string;
+    type: string;
+    format: string;
+}
+
+type Emits = {
+    (e: 'update:variableDefinitions', data: IVariable[]): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    variableDefinitions: {
+        type: Array as PropType<IVariable[]>,
+        default: () => [],
+    },
+});
+
+const columns = [
+    {
+        title: '变量',
+        dataIndex: 'id',
+        width: 80,
+    },
+    {
+        title: '名称',
+        dataIndex: 'name',
+        // width: 160,
+    },
+    {
+        title: '类型',
+        dataIndex: 'type',
+        // width: 160,
+    },
+    {
+        title: '格式',
+        dataIndex: 'format',
+        width: 150,
+    },
+];
+
+const dataSource = computed({
+    get: () => props.variableDefinitions,
+    set: (val) => emit('update:variableDefinitions', val),
+});
+
+watch(
+    () => dataSource.value,
+    (val) => {
+        emit('update:variableDefinitions', val);
+    },
+    { deep: true },
+);
+
+const handleTypeChange = (record: IVariable) => {
+    switch (record.type) {
+        case 'string':
+            record.format = '%s';
+            break;
+        case 'date':
+            record.format = 'timestamp';
+            break;
+        case 'double':
+            record.format = '%.0f';
+            break;
+    }
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/notice/Template/Detail/index.vue

@@ -39,6 +39,7 @@
                             <RadioCard
                                 :options="msgType"
                                 v-model="formData.provider"
+                                @change="getConfigList"
                             />
                         </a-form-item>
                         <a-form-item
@@ -51,11 +52,11 @@
                                 placeholder="请选择绑定配置"
                             >
                                 <a-select-option
-                                    v-for="(item, index) in ROBOT_MSG_TYPE"
+                                    v-for="(item, index) in configList"
                                     :key="index"
-                                    :value="item.value"
+                                    :value="item.id"
                                 >
-                                    {{ item.label }}
+                                    {{ item.name }}
                                 </a-select-option>
                             </a-select>
                         </a-form-item>
@@ -120,8 +121,7 @@
                                     >
                                         <!-- <a-input
                                             v-model:value="
-                                                formData.template.markdown
+                                                formData.template.markdown?.title
-                                                    ?.title
                                             "
                                             placeholder="请输入标题"
                                         /> -->
@@ -246,17 +246,11 @@
                             </a-form-item>
                             <a-form-item label="收件人">
                                 <a-select
+                                    mode="tags"
+                                    :options="[]"
                                     v-model:value="formData.template.sendTo"
                                     placeholder="请选择收件人"
-                                >
+                                />
-                                    <a-select-option
-                                        v-for="(item, index) in ROBOT_MSG_TYPE"
-                                        :key="index"
-                                        :value="item.value"
-                                    >
-                                        {{ item.label }}
-                                    </a-select-option>
-                                </a-select>
                             </a-form-item>
                             <a-form-item label="附件信息">
                                 <Attachments
@@ -418,6 +412,34 @@
                                 </div>
                             </a-form-item>
                         </template>
+                        <a-form-item
+                            label="模版内容"
+                            v-if="
+                                formData.type !== 'sms' &&
+                                formData.type !== 'webhook'
+                            "
+                        >
+                            <a-textarea
+                                v-model:value="formData.template.message"
+                                :maxlength="200"
+                                :rows="5"
+                                placeholder="变量格式:${name};
+    示例:尊敬的${name},${time}有设备触发告警,请注意处理"
+                            />
+                        </a-form-item>
+                        <a-form-item
+                            label="变量列表"
+                            v-if="
+                                formData.variableDefinitions &&
+                                formData.variableDefinitions.length
+                            "
+                        >
+                            <VariableDefinitions
+                                v-model:variableDefinitions="
+                                    formData.variableDefinitions
+                                "
+                            />
+                        </a-form-item>
                         <a-form-item label="说明">
                             <a-textarea
                                 v-model:value="formData.description"
@@ -462,7 +484,8 @@ import {
 import templateApi from '@/api/notice/template';
 import Doc from './doc/index';
 import MonacoEditor from '@/components/MonacoEditor/index.vue';
-import Attachments from './components/Attachments.vue'
+import Attachments from './components/Attachments.vue';
+import VariableDefinitions from './components/VariableDefinitions.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -500,12 +523,14 @@ watch(
         msgType.value = MSG_TYPE[val];
 
         formData.value.provider = msgType.value[0].value;
-        console.log('formData.value.template: ', formData.value.template);
+        // console.log('formData.value.template: ', formData.value.template);
+
+        getConfigList();
     },
 );
 
 computed(() => {
-    console.log('formData.value.type: ', formData.value.type);
+    // console.log('formData.value.type: ', formData.value.type);
     Object.assign(
         formData.value.template,
         TEMPLATE_FIELD_MAP[formData.value.type][formData.value.provider],
@@ -547,11 +572,42 @@ const { resetFields, validate, validateInfos, clearValidate } = useForm(
 watch(
     () => formData.value.type,
     () => {
+        formData.value.variableDefinitions = [];
         clearValidate();
     },
     { deep: true },
 );
 
+watch(
+    () => formData.value.template.message,
+    (val) => {
+        if (!val) return;
+        // 已经存在的变量
+        const oldKey = formData.value.variableDefinitions?.map((m) => m.id);
+        // 正则提取${}里面的值
+        const pattern = /(?<=\$\{).*?(?=\})/g;
+        const titleList = val.match(pattern)?.filter((f) => f);
+        const newKey = [...new Set(titleList)];
+        const result = newKey?.map((m) =>
+            oldKey.includes(m)
+                ? formData.value.variableDefinitions.find(
+                      (item) => item.id === m,
+                  )
+                : {
+                      id: m,
+                      name: '',
+                      type: 'string',
+                      format: '%s',
+                  },
+        );
+        formData.value.variableDefinitions = result;
+    },
+    { deep: true },
+);
+
+/**
+ * 获取详情
+ */
 const getDetail = async () => {
     const res = await templateApi.detail(route.params.id as string);
     // console.log('res: ', res);
@@ -560,6 +616,20 @@ const getDetail = async () => {
 };
 // getDetail();
 
+/**
+ * 获取绑定配置
+ */
+const configList = ref();
+const getConfigList = async () => {
+    const terms = [
+        { column: 'type$IN', value: formData.value.type },
+        { column: 'provider', value: formData.value.provider },
+    ];
+    const { result } = await templateApi.getConfig({ terms });
+    configList.value = result;
+};
+getConfigList();
+
 /**
  * 表单提交
  */
@@ -567,25 +637,35 @@ const btnLoading = ref<boolean>(false);
 const handleSubmit = () => {
     validate()
         .then(async () => {
-            console.log('formData.value: ', formData.value);
+            // console.log('formData.value: ', formData.value);
             btnLoading.value = true;
-            // let res;
+            let res;
-            // if (!formData.value.id) {
+            if (!formData.value.id) {
-            //     res = await templateApi.save(formData.value);
+                res = await templateApi.save(formData.value);
-            // } else {
+            } else {
-            //     res = await templateApi.update(formData.value);
+                res = await templateApi.update(formData.value);
-            // }
+            }
-            // // console.log('res: ', res);
+            // console.log('res: ', res);
-            // if (res?.success) {
+            if (res?.success) {
-            //     message.success('保存成功');
+                message.success('保存成功');
-            //     router.back();
+                router.back();
-            // }
+            }
-            btnLoading.value = false;
         })
         .catch((err) => {
             console.log('err: ', err);
+            btnLoading.value = false;
         });
 };
+
+// test
+watch(
+    () => formData.value,
+    (val) => {
+        console.log('formData.value: ', val);
+    },
+    { deep: true },
+);
+// test
 </script>
 
 <style lang="less" scoped>

src/views/notice/Template/types.d.ts

@@ -7,7 +7,7 @@ export interface IHeaders {
 interface IAttachments {
     location: string;
     name: string;
-    id?: number;
+    id?: string;
 }
 interface IVariableDefinitions {
     id: string;
@@ -16,6 +16,17 @@ interface IVariableDefinitions {
     format: string;
 }
 
+interface IMarkDown {
+    text: string;
+    title: string;
+}
+interface ILink {
+    title: string;
+    picUrl: string;
+    messageUrl: string;
+    text: string;
+}
+
 export type TemplateFormData = {
     template: {
         // 钉钉消息
@@ -23,16 +34,8 @@ export type TemplateFormData = {
         message?: string;
         // 钉钉机器人
         messageType?: string;
-        markdown?: {
+        markdown?: IMarkDown;
-            text: string;
+        link?: ILink;
-            title: string;
-        };
-        link?: {
-            title: string;
-            picUrl: string;
-            messageUrl: string;
-            text: string;
-        };
         // 微信
         // agentId?: string;
         // message?: string;
@@ -71,4 +74,24 @@ export type TemplateFormData = {
     creatorId?: string;
     createTime?: number;
     configId?: string;
-};
+};
+
+// 绑定配置类型
+export type config = {
+    host: string;
+    password: string;
+    port: number;
+    sender: string;
+    ssl: boolean;
+    username: string;
+}
+export type BindConfig = {
+    configuration: config;
+    createTime: number
+    creatorId: string;
+    id: string;
+    maxRetryTimes: number;
+    name: string;
+    provider: string;
+    type: string
+}

src/views/system/Permission/components/EditDialog.vue

@@ -0,0 +1,234 @@
+<template>
+    <a-modal
+        v-model:visible="dialog.visible"
+        :title="dialog.title"
+        width="1000px"
+        @ok="dialog.handleOk"
+        class="edit-dialog-container"
+    >
+        <a-form ref="formRef" :model="form.data" layout="vertical">
+            <a-form-item
+                name="id"
+                :rules="[{ required: true, message: '请输入标识' }]"
+                class="question-item"
+            >
+                <template #label>
+                    <span>标识</span>
+                    <span class="required-icon">*</span>
+                    <a-tooltip placement="top">
+                        <template #title>
+                            <span>标识ID需与代码中的标识ID一致</span>
+                        </template>
+                        <question-circle-outlined style="color: #00000073" />
+                    </a-tooltip>
+                </template>
+                <a-input
+                    v-model:value="form.data.id"
+                    placeholder="请输入标识(ID)"
+                    :maxlength="64"
+                    :disabled="dialog.title === '编辑'"
+                />
+            </a-form-item>
+            <a-form-item
+                name="name"
+                label="名称"
+                :rules="[{ required: true, message: '请输入名称' }]"
+            >
+                <a-input
+                    v-model:value="form.data.name"
+                    placeholder="请输入名称"
+                    :maxlength="64"
+                />
+            </a-form-item>
+        </a-form>
+
+        <a-table
+            :columns="table.columns"
+            :data-source="actionTableData"
+            :pagination="false"
+        >
+            <template #bodyCell="{ column, record, index }">
+                <template v-if="column.key === 'index'">
+                    {{
+                        `#${
+                            (pager.current - 1) * pager.pageSize + (index + 1)
+                        }.`
+                    }}
+                </template>
+                <template
+                    v-else-if="column.key !== 'index' && column.key !== 'act'"
+                >
+                    <a-input v-model:value="record[column.key]" />
+                </template>
+                <template v-else-if="column.key === 'act'">
+                    <a-button
+                        style="padding: 0"
+                        type="link"
+                        @click="table.clickRemove(index)"
+                    >
+                        <delete-outlined />
+                    </a-button>
+                </template>
+            </template>
+        </a-table>
+        <div class="pager">
+            <a-pagination
+                v-model:current="pager.current"
+                :page-size="pager.pageSize"
+                :total="pager.total"
+            />
+            <a-select v-model:value="pager.current" style="width: 60px">
+                <a-select-option v-for="(val,i) in pageArr" :value="i + 1">{{
+                    i + 1
+                }}</a-select-option>
+            </a-select>
+        </div>
+
+        <a-button type="dashed" style="width: 100%" @click="table.clickAdd">
+            <plus-outlined /> 添加
+        </a-button>
+
+        <template #footer>
+            <a-button key="back" @click="dialog.visible = false">取消</a-button>
+            <a-button
+                key="submit"
+                type="primary"
+                :loading="form.loading"
+                @click="dialog.handleOk"
+                >确定</a-button
+            >
+        </template>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { FormInstance, message } from 'ant-design-vue';
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+
+const defaultAction = [
+    { action: 'query', name: '查询', describe: '查询' },
+    { action: 'save', name: '保存', describe: '保存' },
+    { action: 'delete', name: '删除', describe: '删除' },
+];
+// 弹窗相关
+const dialog = reactive({
+    title: '',
+    visible: false,
+    handleOk: () => {
+        formRef.value?.validate().then(() => console.log('success'));
+    },
+    // 控制弹窗的打开与关闭
+    changeVisible: (status: boolean, defaultForm: any = {}) => {
+        form.data = { name: '', description: '', ...defaultForm };
+        dialog.title = defaultForm.id ? '编辑' : '新增';
+        table.data = defaultForm.id ? defaultForm.actions : [...defaultAction];
+        pager.total = table.data.length;
+        pager.current = 1;
+        dialog.visible = status;
+    },
+});
+// 表单相关
+const formRef = ref<FormInstance>();
+const form = reactive({
+    loading: false,
+    data: {
+        name: '',
+        id: '',
+    },
+});
+
+const table = reactive({
+    columns: [
+        {
+            title: '-',
+            dataIndex: 'index',
+            key: 'index',
+        },
+        {
+            title: '操作类型',
+            dataIndex: 'action',
+            key: 'action',
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '说明',
+            dataIndex: 'describe',
+            key: 'describe',
+        },
+        {
+            title: '操作',
+            dataIndex: 'act',
+            key: 'act',
+        },
+    ],
+    data: <any>[],
+    clickRemove: (index: number) => {
+        pager.total -= 1;
+        table.data.splice(index, 1);
+
+        // 当删除的刚好为本页的最后一项时，返回到上一页
+        if (pager.current > 1 && pager.total % pager.pageSize === 0)
+            pager.current -= 1;
+    },
+    clickAdd: () => {
+        table.data.push({});
+        pager.total += 1;
+
+        // 当添加的项需要新加一页才能显示时，跳转到最后一页
+        if (pager.total % pager.pageSize === 1) {
+            pager.current = Math.ceil(pager.total / pager.pageSize);
+        }
+    },
+});
+
+const pager = reactive({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+});
+const pageArr = computed(() => {
+    const maxPageNum = Math.ceil(pager.total / pager.pageSize);
+    return new Array(maxPageNum).fill(1);
+});
+const actionTableData = computed(() => {
+    const startIndex = (pager.current - 1) * pager.pageSize;
+    const endIndex = Math.min(
+        pager.current * pager.pageSize,
+        table.data.length,
+    );
+    console.log(startIndex, endIndex);
+
+    return table.data.slice(startIndex, endIndex);
+});
+
+// 将打开弹窗的操作暴露给父组件
+defineExpose({
+    openDialog: dialog.changeVisible,
+});
+</script>
+
+<style lang="less" scoped>
+.edit-dialog-container {
+    .question-item {
+        :deep(.ant-form-item-required) {
+            &::before {
+                display: none;
+            }
+            .required-icon {
+                display: inline-block;
+                margin-right: 4px;
+                margin-left: 2px;
+                color: #ff4d4f;
+                font-size: 14px;
+                font-family: SimSun, sans-serif;
+                line-height: 1;
+            }
+        }
+    }
+}
+</style>

src/views/system/Permission/components/StatusLabel.vue

@@ -0,0 +1,29 @@
+<template>
+    <span class="status-label-container">
+        <i
+            class="circle"
+            :style="{ background: props.statusValue ? '#52c41a' : '#ff4d4f' }"
+        ></i>
+        <span>{{ props.statusValue ? '启用' : '禁用' }}</span>
+    </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    statusValue: number;
+}>();
+</script>
+
+<style lang="less" scoped>
+.status-label-container {
+    display: flex;
+    align-items: center;
+    .circle {
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        margin-right: 8px;
+    }
+}
+</style>

src/views/system/Permission/index.vue

@@ -0,0 +1,197 @@
+<template>
+    <div class="permission-container">
+        <Search :columns="query.columns" />
+
+        <JTable
+            ref="tableRef"
+            :columns="table.columns"
+            :request="getPermission_api"
+            model="TABLE"
+            :params="query.params"
+            :defaultParams="{ sorts: [{ name: 'id', order: 'asc' }] }"
+        >
+            <template #headerTitle>
+                <a-button type="primary" @click="table.openDialog(undefined)"
+                    ><plus-outlined />新增</a-button
+                >
+            </template>
+            <template #status="slotProps">
+                <StatusLabel :status-value="slotProps.status" />
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip>
+                        <template #title>编辑</template>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            @click="table.openDialog(slotProps)"
+                        >
+                            <edit-outlined />
+                        </a-button>
+                    </a-tooltip>
+
+                    <a-popconfirm
+                        :title="`确定要${
+                            slotProps.status ? '禁用' : '启用'
+                        }吗？`"
+                        ok-text="确定"
+                        cancel-text="取消"
+                        @confirm="table.changeStatus(slotProps)"
+                    >
+                        <a-tooltip>
+                            <template #title>{{
+                                slotProps.status ? '禁用' : '启用'
+                            }}</template>
+                            <a-button style="padding: 0" type="link">
+                                <stop-outlined v-if="slotProps.status" />
+                                <play-circle-outlined v-else />
+                            </a-button>
+                        </a-tooltip>
+                    </a-popconfirm>
+
+                    <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"
+                                :disabled="slotProps.status"
+                            >
+                                <delete-outlined />
+                            </a-button>
+                        </a-tooltip>
+                    </a-popconfirm>
+                </a-space>
+            </template>
+        </JTable>
+
+        <div class="dialogs">
+            <EditDialog ref="editDialogRef" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import EditDialog from './components/EditDialog.vue';
+import StatusLabel from './components/StatusLabel.vue';
+import { message } from 'ant-design-vue';
+import {
+    EditOutlined,
+    DeleteOutlined,
+    PlusOutlined,
+    StopOutlined,
+    PlayCircleOutlined,
+} from '@ant-design/icons-vue';
+import { getPermission_api, editPermission_api } from '@/api/system/permission';
+
+const editDialogRef = ref(); // 新增弹窗实例
+const tableRef = ref<Record<string, any>>({}); // 表格实例
+
+// 筛选
+const query = reactive({
+    columns: [
+        {
+            title: '标识',
+            dataIndex: 'id',
+            key: 'id',
+            ellipsis: true,
+            fixed: 'left',
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+            ellipsis: true,
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            key: 'status',
+            ellipsis: true,
+            search: {
+                rename: 'status',
+                type: 'select',
+                options: [
+                    {
+                        label: '启用',
+                        value: 1,
+                    },
+                    {
+                        label: '禁用',
+                        value: 0,
+                    },
+                ],
+            },
+        },
+    ],
+    params: {},
+});
+
+// 表格
+const table = reactive({
+    columns: [
+        {
+            title: '标识',
+            dataIndex: 'id',
+            key: 'id',
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            key: 'status',
+            scopedSlots: true,
+        },
+        {
+            title: '操作',
+            dataIndex: 'action',
+            key: 'action',
+            scopedSlots: true,
+        },
+    ],
+    tableData: [],
+    openDialog: (row: object | undefined = {}) => {
+        editDialogRef.value.openDialog(true, row);
+    },
+    changeStatus: (row: any) => {
+        const params = {
+            ...row,
+            status: row.status ? 0 : 1,
+        };
+        editPermission_api(params).then(() => {
+            message.success('操作成功');
+            tableRef.value.reload();
+        });
+    },
+    clickDel: (row: any) => {
+        // delRole_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>

src/views/system/Role/Detail/index.vue

@@ -1,6 +1,5 @@
 <template>
     <div class="details-container">
-        {{ route.params.id }}
         <a-tabs v-model:activeKey="activeKey">
             <a-tab-pane key="1" tab="权限分配"><Permiss /></a-tab-pane>
             <a-tab-pane key="2" tab="用户管理"><User /></a-tab-pane>

src/views/system/Role/components/AddDialog.vue

@@ -44,10 +44,7 @@
 <script setup lang="ts">
 import { FormInstance, message } from 'ant-design-vue';
 import { saveRole_api } from '@/api/system/role';
-const router = useRouter()
+const router = useRouter();
-const props = defineProps({
-    open: Number,
-});
 // 弹窗相关
 const dialog = reactive({
     visible: false,
@@ -59,10 +56,15 @@ const dialog = reactive({
                 if (resp.status === 200) {
                     message.success('操作成功');
                     dialog.visible = false;
-                    router.push(`/system/Role/detail/${resp.result.id}`)
+                    router.push(`/system/Role/detail/${resp.result.id}`);
                 }
             });
     },
+    // 控制弹窗的打开与关闭
+    changeVisible: (status: boolean, defaultForm: object={}) => {
+        dialog.visible = status;
+        form.data = { name: '', description: '', ...defaultForm };
+    },
 });
 // 表单相关
 const formRef = ref<FormInstance>();
@@ -74,18 +76,12 @@ const form = reactive({
     },
 });
 
-watch(
+
-    () => props.open,
+
-    () => {
+// 将打开弹窗的操作暴露给父组件
-        // 重置表单
+defineExpose({
-        form.data = {
+    openDialog: dialog.changeVisible
-            name: '',
+})
-            description: '',
-        };
-        formRef.value?.resetFields();
-        dialog.visible = true;
-    },
-);
 </script>
 
 <style scoped></style>

src/views/system/Role/index.vue

@@ -45,7 +45,7 @@
         </JTable>
 
         <div class="dialogs">
-            <AddDialog :open="dialog.openAdd" />
+            <AddDialog ref="addDialogRef" />
         </div>
     </a-card>
 </template>
@@ -59,8 +59,8 @@ import {
 import AddDialog from './components/AddDialog.vue';
 import { getRoleList_api, delRole_api } from '@/api/system/role';
 import { message } from 'ant-design-vue';
-
+const addDialogRef = ref(); // 新增弹窗实例
-const router = useRouter()
+const router = useRouter();
 // 筛选
 const query = reactive({
     columns: [
@@ -122,24 +122,21 @@ const table = reactive({
     ],
     tableData: [],
     clickAdd: () => {
-        dialog.openAdd += 1;
+        addDialogRef.value.openDialog(true, {})
     },
     clickDel: (row: any) => {
-        delRole_api(row.id).then((resp:any)=>{
+        delRole_api(row.id).then((resp: any) => {
-            if(resp.status === 200){
+            if (resp.status === 200) {
-                tableRef.value?.reload()
+                tableRef.value?.reload();
-                message.success('操作成功!')
+                message.success('操作成功!');
             }
-        })
+        });
     },
     clickEdit: (row: any) => {
-        router.push(`/system/Role/detail/${row.id}`)
+        router.push(`/system/Role/detail/${row.id}`);
     },
 });
-// 弹窗相关
+
-const dialog = reactive({
-    openAdd: 0,
-});
 </script>
 
 <style lang="less" scoped></style>

src/views/user/Login/index.vue

@@ -83,19 +83,20 @@
                                         ]"
                                     >
                                         <a-input
-                                            class="login-code-input"
                                             v-model:value="form.verifyCode"
                                             autocomplete="off"
                                             :maxlength="64"
                                             placeholder="请输入验证码"
-                                        ></a-input>
+                                        >
-                                        <div class="login-code">
+                                            <template #addonAfter>
-                                            <img
+                                                <div>
-                                                :src="codeUrl"
+                                                    <img
-                                                @click="getCode()"
+                                                        :src="codeUrl"
-                                                class="login-code-img"
+                                                        @click="getCode()"
-                                            />
+                                                    />
-                                        </div>
+                                                </div>
+                                            </template>
+                                        </a-input>
                                     </a-form-item>
                                     <a-form-item
                                         name="remember"
@@ -103,7 +104,14 @@
                                     >
                                         <a-checkbox
                                             v-model:checked="form.remember"
-                                            >记住密码</a-checkbox
+                                            @change="
+                                                () =>
+                                                    (form.expires =
+                                                        form.remember
+                                                            ? -1
+                                                            : 3600000)
+                                            "
+                                            >记住我</a-checkbox
                                         >
                                     </a-form-item>
                                     <a-form-item>
@@ -180,7 +188,6 @@ import {
     bindInfo,
     settingDetail,
 } from '@/api/login';
-import Cookies from 'js-cookie';
 import { useUserInfo } from '@/store/userInfo';
 import { LocalStore } from '@/utils/comm';
 import { BASE_API_PATH, TOKEN_KEY, Version_Code } from '@/utils/variable';
@@ -220,34 +227,24 @@ iconMap.set('dingtalk-ent-app', getImage('/bind/dingtalk.png'));
 iconMap.set('wechat-webapp', getImage('/bind/wechat-webapp.png'));
 
 const onFinish = async () => {
-    form.remember
-        ? Cookies.set('user', encodeURIComponent(JSON.stringify(form)), {
-              expires: 7,
-          })
-        : Cookies.remove('user');
-    Cookies.set('username', form.username, { expires: 30 });
     try {
         loading.value = true;
         const res: any = await authLogin(form);
+        loading.value = false;
         if (res.success) {
             store.$patch({
                 ...res.result,
                 username: form.username,
             });
             LocalStore.set(TOKEN_KEY, res?.result.token);
-            // if (res.result.username === 'admin') {
+            if (res.result.username === 'admin') {
-            //     const resp: any = await getInitSet();
+                const resp: any = await getInitSet();
-            //     if (resp.status === 200 && !resp.result.length) {
+                if (resp.status === 200 && !resp.result.length) {
-            //         window.location.href = '/#/init-home';
+                    window.location.href = '/#/init-home';
-            //         return;
+                    return;
-            //     }
+                }
-            // }
-            // window.location.href = '/';
-
-            const resp: any = await getInitSet();
-            if (resp.success) {
-                router.push('/demo');
             }
+            window.location.href = '/';
         }
     } catch (error) {
         form.verifyCode = '';
@@ -269,14 +266,6 @@ const getCode = async () => {
     }
 };
 
-const getCookie = () => {
-    // form.username = Cookies.get('username');
-    if (!Cookies.get('user')) return;
-    const user = JSON.parse(decodeURIComponent(Cookies.get('user')));
-    form.username = user.username;
-    form.password = user.password;
-    form.remember = user.remember || false;
-};
 
 const getOpen = () => {
     LocalStore.removeAll();
@@ -292,7 +281,7 @@ const getOpen = () => {
             }
         }
     });
-    settingDetail('front').then((res) => {
+    settingDetail('front').then((res: any) => {
         if (res.status === 200) {
             const ico: any = document.querySelector('link[rel="icon"]');
             ico.href = res.result.ico;
@@ -337,7 +326,6 @@ watch(
 
 getOpen();
 getCode();
-getCookie();
 screenRotation(screenWidth.value, screenHeight.value);
 </script>
 
@@ -470,23 +458,9 @@ screenRotation(screenWidth.value, screenHeight.value);
                     }
 
                     .verifyCode {
-                        .login-code-input {
+                        img {
-                            width: 70%;
+                            cursor: pointer;
-                            float: left;
+                            // vertical-align: middle;
-                        }
-                        .login-code {
-                            width: 30%;
-                            height: 32px;
-                            float: left;
-                            background-color: #e4e6e7;
-                            img {
-                                cursor: pointer;
-                                vertical-align: middle;
-                            }
-                            .login-code-img {
-                                width: 100%;
-                                height: 100%;
-                            }
                         }
                     }
                 }