Merge branch 'test' of http://172.19.183.27:3000/z9130/pansoft-plrl into test
Frontend CI/CD / build (web-office) (push) Failing after 5m6s
Details
Frontend CI/CD / build (web-office) (push) Failing after 5m6s
Details
This commit is contained in:
commit
55cad175ad
|
@ -1,15 +1,27 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
|
|
||||||
import { useAntdDesignTokens } from '@vben/hooks';
|
import { useAntdDesignTokens, useWatermark } from '@vben/hooks';
|
||||||
import { preferences, usePreferences } from '@vben/preferences';
|
import { preferences, usePreferences } from '@vben/preferences';
|
||||||
|
|
||||||
import { App, ConfigProvider, theme } from 'ant-design-vue';
|
import { App, ConfigProvider, theme } from 'ant-design-vue';
|
||||||
|
import { VxeUI } from 'vxe-table';
|
||||||
|
|
||||||
import { antdLocale } from '#/locales';
|
import { antdLocale } from '#/locales';
|
||||||
|
|
||||||
defineOptions({ name: 'App' });
|
defineOptions({ name: 'App' });
|
||||||
|
|
||||||
|
VxeUI.setConfig({
|
||||||
|
size: 'small',
|
||||||
|
});
|
||||||
|
useWatermark().updateWatermark({
|
||||||
|
content: '',
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
useWatermark().updateWatermark({
|
||||||
|
content: '西北油田办公平台',
|
||||||
|
});
|
||||||
|
}, 500);
|
||||||
const { isDark } = usePreferences();
|
const { isDark } = usePreferences();
|
||||||
const { tokens } = useAntdDesignTokens();
|
const { tokens } = useAntdDesignTokens();
|
||||||
|
|
||||||
|
|
|
@ -42,26 +42,26 @@ const PRESET = computed((): PresetItem[] => [
|
||||||
tip: '顶部栏仅用于显示全局信息或操作,不包含菜单。',
|
tip: '顶部栏仅用于显示全局信息或操作,不包含菜单。',
|
||||||
type: 'sidebar-topbar',
|
type: 'sidebar-topbar',
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
name: $t('preferences.vertical'),
|
// name: $t('preferences.vertical'),
|
||||||
tip: $t('preferences.verticalTip'),
|
// tip: $t('preferences.verticalTip'),
|
||||||
type: 'sidebar-nav',
|
// type: 'sidebar-nav',
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
name: $t('preferences.twoColumn'),
|
name: $t('preferences.twoColumn'),
|
||||||
tip: $t('preferences.twoColumnTip'),
|
tip: $t('preferences.twoColumnTip'),
|
||||||
type: 'sidebar-mixed-nav',
|
type: 'sidebar-mixed-nav',
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// name: $t('preferences.horizontal'),
|
name: $t('preferences.horizontal'),
|
||||||
// tip: $t('preferences.horizontalTip'),
|
tip: $t('preferences.horizontalTip'),
|
||||||
// type: 'header-nav',
|
type: 'header-nav',
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// name: $t('preferences.mixedMenu'),
|
name: $t('preferences.mixedMenu'),
|
||||||
// tip: $t('preferences.mixedMenuTip'),
|
tip: $t('preferences.mixedMenuTip'),
|
||||||
// type: 'mixed-nav',
|
type: 'mixed-nav',
|
||||||
// },
|
},
|
||||||
// {
|
// {
|
||||||
// name: $t('preferences.fullContent'),
|
// name: $t('preferences.fullContent'),
|
||||||
// tip: $t('preferences.fullContentTip'),
|
// tip: $t('preferences.fullContentTip'),
|
||||||
|
|
|
@ -1,65 +1,149 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch } from 'vue';
|
||||||
|
|
||||||
|
import { preferences, updatePreferences } from '@vben/preferences';
|
||||||
|
|
||||||
|
import { FolderOutlined } from '@ant-design/icons-vue';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Checkbox,
|
||||||
|
Form,
|
||||||
|
FormItem,
|
||||||
|
Modal,
|
||||||
|
Select,
|
||||||
|
Switch,
|
||||||
|
TabPane,
|
||||||
|
Tabs,
|
||||||
|
} from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { otherRouter } from '#/router/routes/modules/linkdata';
|
||||||
|
|
||||||
|
import builtin from './builtin.vue';
|
||||||
|
import layout from './layout.vue';
|
||||||
|
import theme from './theme.vue';
|
||||||
|
|
||||||
|
const layoutVlaue = ref(preferences.app.layout);
|
||||||
|
watch(layoutVlaue, (n, o) => {
|
||||||
|
updatePreferences({
|
||||||
|
app: {
|
||||||
|
layout: n,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
const themeValue = ref(preferences.theme.mode);
|
||||||
|
watch(themeValue, (n, o) => {
|
||||||
|
updatePreferences({
|
||||||
|
theme: {
|
||||||
|
mode: n,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
const builtinValue = ref(preferences.theme.builtinType);
|
||||||
|
watch(builtinValue, (n, o) => {
|
||||||
|
updatePreferences({
|
||||||
|
theme: {
|
||||||
|
builtinType: n,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
const menuOpen = ref(preferences.sidebar.enable);
|
||||||
|
watch(menuOpen, (n, o) => {
|
||||||
|
updatePreferences({
|
||||||
|
sidebar: {
|
||||||
|
enable: n,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
const menuTheme = ref(preferences.theme.semiDarkSidebar);
|
||||||
|
watch(menuTheme, (n, o) => {
|
||||||
|
updatePreferences({
|
||||||
|
theme: {
|
||||||
|
semiDarkSidebar: n,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
const value1 = ref('');
|
||||||
|
const activeKey = ref('1');
|
||||||
|
const checked = ref(true);
|
||||||
|
const options1 = [];
|
||||||
|
|
||||||
|
const visible = defineModel<boolean>('visible');
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<Modal title="个人偏好" :visible="visible" @cancel="close" :width="600">
|
<Modal :visible="visible" :width="600" title="个人偏好" @cancel="close">
|
||||||
<Tabs v-model:activeKey="activeKey" centered tabPosition="left">
|
<Tabs v-model:active-key="activeKey" centered tab-position="left">
|
||||||
<TabPane key="1" tab="自定义菜单">
|
<TabPane key="1" tab="自定义菜单">
|
||||||
<div class="list-box flex flex-col gap-4 my-2">
|
<div class="list-box my-2 flex flex-col gap-4">
|
||||||
<div class="list-item-box flex justify-around items-center">
|
<div class="list-item-box flex items-center justify-around">
|
||||||
<div class="i-n w-100 shrink-0">
|
<div class="i-n w-100 shrink-0">
|
||||||
<FolderOutlined class="mr-2" />总部系统
|
<FolderOutlined class="mr-2" />总部系统
|
||||||
</div>
|
</div>
|
||||||
<div class="i-s">显示菜单:<Checkbox v-model:checked="checked"></Checkbox>
|
<div class="i-s">
|
||||||
|
显示菜单:<Checkbox v-model:checked="checked" />
|
||||||
</div>
|
</div>
|
||||||
<div class="i-n">排序:0</div>
|
<div class="i-n">排序:0</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="list-item-box flex justify-around items-center" v-for="(item, index) in otherRouter"
|
<div
|
||||||
:key="index">
|
v-for="(item, index) in otherRouter"
|
||||||
|
:key="index"
|
||||||
|
class="list-item-box flex items-center justify-around"
|
||||||
|
>
|
||||||
<div class="i-n w-100 shrink-0">
|
<div class="i-n w-100 shrink-0">
|
||||||
<FolderOutlined class="mr-2" />{{ item.name }}
|
<FolderOutlined class="mr-2" />{{ item.name }}
|
||||||
</div>
|
</div>
|
||||||
<div class="i-s">显示菜单:<Checkbox v-model:checked="checked"></Checkbox>
|
<div class="i-s">
|
||||||
|
显示菜单:<Checkbox v-model:checked="checked" />
|
||||||
</div>
|
</div>
|
||||||
<div class="i-n">排序:{{ index + 1 }}</div>
|
<div class="i-n">排序:{{ index + 1 }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
<TabPane key="2" tab="菜单区设置" force-render>
|
<TabPane key="2" force-render tab="菜单区设置">
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
<Form style="width: 450px;">
|
<Form style="width: 450px">
|
||||||
<FormItem label="菜单栏默认打开:" class="mb-3">
|
<FormItem class="mb-3" label="菜单栏默认打开:">
|
||||||
<Switch v-model:checked="menuOpen" />
|
<Switch v-model:checked="menuOpen" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="深色侧边栏:" class="mb-3">
|
<FormItem class="mb-3" label="深色侧边栏:">
|
||||||
<Switch v-model:checked="menuTheme" />
|
<Switch v-model:checked="menuTheme" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="布局:" class="mb-3">
|
<FormItem class="mb-3" label="布局:">
|
||||||
<layout v-model="layoutVlaue"></layout>
|
<layout v-model="layoutVlaue" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Form>
|
</Form>
|
||||||
</div>
|
</div>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
<TabPane key="3" tab="主题设置">
|
<TabPane key="3" tab="主题设置">
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
|
<Form style="width: 450px">
|
||||||
<Form style="width: 450px;">
|
<FormItem class="mb-3" label="默认主题:">
|
||||||
<FormItem label="默认主题:" class="mb-3">
|
<theme v-model="themeValue" />
|
||||||
<theme v-model="themeValue"></theme>
|
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="内置主题:" class="mb-3">
|
<FormItem class="mb-3" label="内置主题:">
|
||||||
<builtin :isDark="true" v-model="builtinValue"></builtin>
|
<builtin v-model="builtinValue" :is-dark="true" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Form>
|
</Form>
|
||||||
</div>
|
</div>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
<TabPane key="4" tab="消息语音">
|
<TabPane key="4" tab="消息语音">
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
<Form style="width: 450px;">
|
<Form style="width: 450px">
|
||||||
<FormItem label="消息语音提醒:" class="mb-3">
|
<FormItem class="mb-3" label="消息语音提醒:">
|
||||||
<Switch v-model:checked="checked" class="ml-3" />
|
<Switch v-model:checked="checked" class="ml-3" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="提示语言选择列表:" class="mb-3">
|
<FormItem class="mb-3" label="提示语言选择列表:">
|
||||||
<Select ref="select" class="ml-3" v-model:value="value1" :options="options1"></Select>
|
<Select
|
||||||
|
ref="select"
|
||||||
|
v-model:value="value1"
|
||||||
|
:options="options1"
|
||||||
|
class="ml-3"
|
||||||
|
/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="提示语音选择文件地址" class="mb-3">
|
<FormItem class="mb-3" label="提示语音选择文件地址">
|
||||||
<div class="ml-3 flex flex-col gap-2">
|
<div class="ml-3 flex flex-col gap-2">
|
||||||
无
|
无
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
|
@ -67,78 +151,15 @@
|
||||||
<Button type="primary">上传</Button>
|
<Button type="primary">上传</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Form>
|
</Form>
|
||||||
</div>
|
</div>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<Button type="link" key="back" @click="close">恢复</Button>
|
<Button key="back" type="link" @click="close">恢复</Button>
|
||||||
<Button key="back" @click="close">取消</Button>
|
<Button key="back" @click="close">取消</Button>
|
||||||
<Button key="submit" type="primary" @click="close">确定</Button>
|
<Button key="submit" type="primary" @click="close">确定</Button>
|
||||||
</template>
|
</template>
|
||||||
</Modal>
|
</Modal>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
|
||||||
import { Modal, Tabs, Form, FormItem, Select, Button, TabPane, Checkbox, Switch, Radio, RadioGroup } from 'ant-design-vue';
|
|
||||||
import { FolderOutlined } from '@ant-design/icons-vue';
|
|
||||||
import layout from './layout.vue';
|
|
||||||
import theme from './theme.vue';
|
|
||||||
import builtin from './builtin.vue';
|
|
||||||
import { ref, watch } from 'vue';
|
|
||||||
import { otherRouter } from "#/router/routes/modules/linkdata"
|
|
||||||
import { preferences, updatePreferences } from '@vben/preferences';
|
|
||||||
let layoutVlaue = ref(preferences.app.layout)
|
|
||||||
watch(layoutVlaue, (n, o) => {
|
|
||||||
updatePreferences({
|
|
||||||
app: {
|
|
||||||
layout: n
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
|
||||||
let themeValue = ref(preferences.theme.mode);
|
|
||||||
watch(themeValue, (n, o) => {
|
|
||||||
updatePreferences({
|
|
||||||
theme: {
|
|
||||||
mode: n
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
let builtinValue = ref(preferences.theme.builtinType);
|
|
||||||
watch(builtinValue, (n, o) => {
|
|
||||||
updatePreferences({
|
|
||||||
theme: {
|
|
||||||
builtinType: n
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
let menuOpen = ref(preferences.sidebar.enable)
|
|
||||||
watch(menuOpen, (n, o) => {
|
|
||||||
updatePreferences({
|
|
||||||
sidebar: {
|
|
||||||
enable: n
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
let menuTheme = ref(preferences.theme.semiDarkSidebar)
|
|
||||||
watch(menuTheme, (n, o) => {
|
|
||||||
updatePreferences({
|
|
||||||
theme: {
|
|
||||||
semiDarkSidebar: n
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
let value1 = ref('')
|
|
||||||
let activeKey = ref('1');
|
|
||||||
let checked = ref(true)
|
|
||||||
let options1 = []
|
|
||||||
|
|
||||||
const visible = defineModel<boolean>('visible');
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
visible.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
|
@ -28,7 +28,7 @@ export const overridesPreferences = defineOverridesPreferences({
|
||||||
locale: 'zh-CN',
|
locale: 'zh-CN',
|
||||||
loginExpiredMode: 'page',
|
loginExpiredMode: 'page',
|
||||||
preferencesButtonPosition: 'auto',
|
preferencesButtonPosition: 'auto',
|
||||||
watermark: false,
|
watermark: true,
|
||||||
},
|
},
|
||||||
logo: {
|
logo: {
|
||||||
source: '/logo1.png',
|
source: '/logo1.png',
|
||||||
|
@ -38,5 +38,5 @@ export const overridesPreferences = defineOverridesPreferences({
|
||||||
},
|
},
|
||||||
header: {
|
header: {
|
||||||
height: 60,
|
height: 60,
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -162,6 +162,17 @@ const routes: RouteRecordRaw[] = [
|
||||||
title: '新建应用',
|
title: '新建应用',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'template',
|
||||||
|
path: '/template/:id',
|
||||||
|
component: () => import('#/views/dashboard/home/template.vue'),
|
||||||
|
// component: () => import('#/views/dashboard/home/main.vue'),
|
||||||
|
meta: {
|
||||||
|
hideInMenu: true,
|
||||||
|
icon: 'lucide:area-chart',
|
||||||
|
title: '模板配置',
|
||||||
|
},
|
||||||
|
},
|
||||||
// {
|
// {
|
||||||
// name: 'test',
|
// name: 'test',
|
||||||
// path: '/test',
|
// path: '/test',
|
||||||
|
|
|
@ -43,42 +43,9 @@ const { list } = toRefs(props);
|
||||||
const { proxy } = getCurrentInstance();
|
const { proxy } = getCurrentInstance();
|
||||||
const layout = ref(list.value);
|
const layout = ref(list.value);
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// layout.value = [
|
for (let i = 0; i < list.value.length; i++) {
|
||||||
// {
|
list.value[i].loadComp = loadComponent(list.value[i].component);
|
||||||
// "x": 1,
|
}
|
||||||
// "y": 0,
|
|
||||||
// "w": 1,
|
|
||||||
// "h": 2,
|
|
||||||
// "i": "1728964990256",
|
|
||||||
// "component": {
|
|
||||||
// "name1": "AUTO_1612155980933.png",
|
|
||||||
// "name2": "AUTO_1612155980933_C会议管理.png",
|
|
||||||
// "size": "2x2",
|
|
||||||
// "name": "会议管理",
|
|
||||||
// "w": 1,
|
|
||||||
// "h": 2,
|
|
||||||
// "component": "../Output1/index.vue",
|
|
||||||
// "i": 0
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "x": 4,
|
|
||||||
// "y": 0,
|
|
||||||
// "w": 1,
|
|
||||||
// "h": 2,
|
|
||||||
// "i": "1728965029729",
|
|
||||||
// "component": {
|
|
||||||
// "name1": "AUTO_1612155980933.png",
|
|
||||||
// "name2": "AUTO_1612155980933_C会议管理.png",
|
|
||||||
// "size": "2x2",
|
|
||||||
// "name": "会议管理",
|
|
||||||
// "w": 1,
|
|
||||||
// "h": 2,
|
|
||||||
// "component": "../Output1/index.vue",
|
|
||||||
// "i": 0
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// ]
|
|
||||||
});
|
});
|
||||||
const colNum = 12;
|
const colNum = 12;
|
||||||
let defaultH = 2;
|
let defaultH = 2;
|
||||||
|
@ -140,7 +107,7 @@ const processLayout = (layoutSetInfo) => {
|
||||||
if (!item.component) {
|
if (!item.component) {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
const resComp = loadComponent(item.component.component);
|
const resComp = loadComponent(item.component);
|
||||||
item.loadComp = resComp;
|
item.loadComp = resComp;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -402,7 +369,7 @@ defineExpose({
|
||||||
@click="goPage(item)"
|
@click="goPage(item)"
|
||||||
>
|
>
|
||||||
<component
|
<component
|
||||||
:is="loadComponent(item.component)"
|
:is="item.loadComp"
|
||||||
:key="item.i"
|
:key="item.i"
|
||||||
:data="item"
|
:data="item"
|
||||||
type="sm"
|
type="sm"
|
||||||
|
|
|
@ -1,96 +1,47 @@
|
||||||
<template>
|
|
||||||
<div style="width: 100%;height: 100%;" class="flex flex-col">
|
|
||||||
<div class="head-top-box flex justify-between mb-3 titlt-top">
|
|
||||||
<div class="flex items-center gap-10">
|
|
||||||
<Badge :count="9" :offset="[6, -3]">
|
|
||||||
<div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'db'}" @click="selectTodoClick('db')">
|
|
||||||
<CalendarOutlined />待办
|
|
||||||
</div>
|
|
||||||
</Badge>
|
|
||||||
<div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'yb'}" @click="selectTodoClick('yb')">
|
|
||||||
<CarryOutOutlined />已办
|
|
||||||
</div>
|
|
||||||
<Badge :count="9" :offset="[6, -3]">
|
|
||||||
<div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'dy'}" @click="selectTodoClick('dy')">
|
|
||||||
<ExceptionOutlined />待阅
|
|
||||||
</div>
|
|
||||||
</Badge>
|
|
||||||
<div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'yy'}" @click="selectTodoClick('yy')">
|
|
||||||
<FileDoneOutlined />已阅
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'gz'}" @click="selectTodoClick('gz')">
|
|
||||||
<StarOutlined />关注
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<InputSearch placeholder="任务查询" style="width: 200px" />
|
|
||||||
<SettingOutlined class="cursor-pointer" @click="userSet = true" />
|
|
||||||
<ReloadOutlined class="cursor-pointer" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ul class="f-btn-box">
|
|
||||||
<li>
|
|
||||||
<Button :type="selectClass == '全部' ? 'primary' : 'default'" @click="selectedClick('全部')">全部</Button>
|
|
||||||
</li>
|
|
||||||
<li v-for="(item) in plainOptions" :key="item" @click="selectedClick(item)">
|
|
||||||
<Button :type="selectClass == item ? 'primary' : 'default'">{{ item }}</Button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div class="flex-1 overflow-hidden">
|
|
||||||
<vxe-grid v-bind="gridOptions">
|
|
||||||
<template #attention_default="{ row }">
|
|
||||||
<StarOutlined class="text-lg"></StarOutlined>
|
|
||||||
</template>
|
|
||||||
<template #pager>
|
|
||||||
<div class="py-2 flex justify-end">
|
|
||||||
<Pagination size="small" :total="1000" show-size-changer show-quick-jumper />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</vxe-grid>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Modal v-model:open="userSet" title="个人设置" :okText="'提交'" :width="800">
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<div class="shrink-0">接收消息系统:</div>
|
|
||||||
<div>
|
|
||||||
<Checkbox v-model:checked="state.checkAll" :indeterminate="state.indeterminate" @change="onCheckAllChange">
|
|
||||||
全选
|
|
||||||
</Checkbox>
|
|
||||||
<CheckboxGroup v-model:value="state.checkedList">
|
|
||||||
<div class="flex flex-wrap gap-2 mt-2">
|
|
||||||
<Checkbox :value="item" v-for="(item) in plainOptions" :key="item">
|
|
||||||
<div class="w-[85px] truncate">{{ item }}</div>
|
|
||||||
</Checkbox>
|
|
||||||
</div>
|
|
||||||
</CheckboxGroup>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { reactive, watch, ref } from 'vue'
|
import { reactive, ref, watch } from 'vue';
|
||||||
import { type VxeGridProps, VxeUI } from 'vxe-table'
|
|
||||||
import { CalendarOutlined, CarryOutOutlined, StarOutlined, ExceptionOutlined, FileDoneOutlined, SettingOutlined, ReloadOutlined } from '@ant-design/icons-vue';
|
|
||||||
import { InputSearch, Pagination, Badge, Modal, Checkbox, CheckboxGroup, Button } from 'ant-design-vue';
|
|
||||||
import { preferences } from '@vben/preferences';
|
import { preferences } from '@vben/preferences';
|
||||||
|
|
||||||
watch(() => preferences.theme.mode, (n: any) => {
|
import {
|
||||||
VxeUI.setTheme(n)
|
CalendarOutlined,
|
||||||
}, {
|
CarryOutOutlined,
|
||||||
|
ExceptionOutlined,
|
||||||
|
FileDoneOutlined,
|
||||||
|
ReloadOutlined,
|
||||||
|
SettingOutlined,
|
||||||
|
StarOutlined,
|
||||||
|
} from '@ant-design/icons-vue';
|
||||||
|
import {
|
||||||
|
Badge,
|
||||||
|
Button,
|
||||||
|
Checkbox,
|
||||||
|
CheckboxGroup,
|
||||||
|
InputSearch,
|
||||||
|
Modal,
|
||||||
|
Pagination,
|
||||||
|
} from 'ant-design-vue';
|
||||||
|
import { type VxeGridProps, VxeUI } from 'vxe-table';
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => preferences.theme.mode,
|
||||||
|
(n: any) => {
|
||||||
|
VxeUI.setTheme(n);
|
||||||
|
},
|
||||||
|
{
|
||||||
deep: true,
|
deep: true,
|
||||||
immediate: true
|
immediate: true,
|
||||||
})
|
},
|
||||||
|
);
|
||||||
|
|
||||||
interface RowVO {
|
interface RowVO {
|
||||||
id: number
|
id: number;
|
||||||
title: string
|
title: string;
|
||||||
taskName: string
|
taskName: string;
|
||||||
handle: string
|
handle: string;
|
||||||
attention: string
|
attention: string;
|
||||||
systemName: string
|
systemName: string;
|
||||||
time: string
|
time: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const gridOptions = reactive<VxeGridProps<RowVO>>({
|
const gridOptions = reactive<VxeGridProps<RowVO>>({
|
||||||
|
@ -99,52 +50,180 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
|
||||||
loading: true,
|
loading: true,
|
||||||
height: 'auto',
|
height: 'auto',
|
||||||
columnConfig: {
|
columnConfig: {
|
||||||
resizable: true
|
resizable: true,
|
||||||
},
|
},
|
||||||
columns: [
|
columns: [
|
||||||
{ field: 'title', title: '标题' },
|
{ field: 'title', title: '标题', slots: { default: 'title_default' } },
|
||||||
{ field: 'taskName', title: '任务名称' },
|
{ field: 'taskName', title: '任务名称' },
|
||||||
{ field: 'systemName', title: '系统名称' },
|
{ field: 'systemName', title: '系统名称' },
|
||||||
{ field: 'time', title: '接收时间', sortable: true },
|
{ field: 'time', title: '接收时间', sortable: true },
|
||||||
{ field: 'handle', title: '操作' },
|
{ field: 'handle', title: '操作' },
|
||||||
{ field: 'attention', title: '关注', slots: { default: 'attention_default' } },
|
{
|
||||||
|
field: 'attention',
|
||||||
|
title: '关注',
|
||||||
|
slots: { default: 'attention_default' },
|
||||||
|
},
|
||||||
],
|
],
|
||||||
data: [
|
data: [
|
||||||
{ id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
{
|
||||||
{ id: 10001, time: '2024年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
id: 10_001,
|
||||||
{ id: 10002, time: '2023年12月1日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
time: '2023年12月24日',
|
||||||
]
|
title: 'Test1222',
|
||||||
})
|
taskName: 'Develop',
|
||||||
|
handle: 'Man',
|
||||||
|
attention: 'test abc',
|
||||||
|
systemName: '12313',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10_001,
|
||||||
|
time: '2024年12月24日',
|
||||||
|
title: 'Test1222',
|
||||||
|
taskName: 'Develop',
|
||||||
|
handle: 'Man',
|
||||||
|
attention: 'test abc',
|
||||||
|
systemName: '12313',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10_002,
|
||||||
|
time: '2023年12月1日',
|
||||||
|
title: 'Test1222',
|
||||||
|
taskName: 'Develop',
|
||||||
|
handle: 'Man',
|
||||||
|
attention: 'test abc',
|
||||||
|
systemName: '12313',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
const tablePage = reactive({
|
const tablePage = reactive({
|
||||||
total: 0,
|
total: 0,
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
pageSize: 10
|
pageSize: 10,
|
||||||
})
|
});
|
||||||
const findList = () => {
|
const findList = () => {
|
||||||
gridOptions.loading = true
|
gridOptions.loading = true;
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
gridOptions.loading = false
|
gridOptions.loading = false;
|
||||||
tablePage.total = 10
|
tablePage.total = 10;
|
||||||
gridOptions.data = [
|
gridOptions.data = [
|
||||||
{ id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
{
|
||||||
{ id: 10001, time: '2024年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
id: 10_001,
|
||||||
{ id: 10002, time: '2023年12月1日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' }, { id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
time: '2023年12月24日',
|
||||||
{ id: 10001, time: '2024年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
title: 'Test1222',
|
||||||
{ id: 10002, time: '2023年12月1日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' }, { id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
taskName: 'Develop',
|
||||||
{ id: 10001, time: '2024年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
handle: 'Man',
|
||||||
{ id: 10002, time: '2023年12月1日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' }, { id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
attention: 'test abc',
|
||||||
]
|
systemName: '12313',
|
||||||
}, 300)
|
},
|
||||||
}
|
{
|
||||||
|
id: 10_001,
|
||||||
findList()
|
time: '2024年12月24日',
|
||||||
|
title: 'Test1222',
|
||||||
|
taskName: 'Develop',
|
||||||
|
handle: 'Man',
|
||||||
|
attention: 'test abc',
|
||||||
|
systemName: '12313',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10_002,
|
||||||
|
time: '2023年12月1日',
|
||||||
|
title: 'Test1222',
|
||||||
|
taskName: 'Develop',
|
||||||
|
handle: 'Man',
|
||||||
|
attention: 'test abc',
|
||||||
|
systemName: '12313',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10_001,
|
||||||
|
time: '2023年12月24日',
|
||||||
|
title: 'Test1222',
|
||||||
|
taskName: 'Develop',
|
||||||
|
handle: 'Man',
|
||||||
|
attention: 'test abc',
|
||||||
|
systemName: '12313',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10_001,
|
||||||
|
time: '2024年12月24日',
|
||||||
|
title: 'Test1222',
|
||||||
|
taskName: 'Develop',
|
||||||
|
handle: 'Man',
|
||||||
|
attention: 'test abc',
|
||||||
|
systemName: '12313',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10_002,
|
||||||
|
time: '2023年12月1日',
|
||||||
|
title: 'Test1222',
|
||||||
|
taskName: 'Develop',
|
||||||
|
handle: 'Man',
|
||||||
|
attention: 'test abc',
|
||||||
|
systemName: '12313',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10_001,
|
||||||
|
time: '2023年12月24日',
|
||||||
|
title: 'Test1222',
|
||||||
|
taskName: 'Develop',
|
||||||
|
handle: 'Man',
|
||||||
|
attention: 'test abc',
|
||||||
|
systemName: '12313',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10_001,
|
||||||
|
time: '2024年12月24日',
|
||||||
|
title: 'Test1222',
|
||||||
|
taskName: 'Develop',
|
||||||
|
handle: 'Man',
|
||||||
|
attention: 'test abc',
|
||||||
|
systemName: '12313',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10_002,
|
||||||
|
time: '2023年12月1日',
|
||||||
|
title: 'Test1222',
|
||||||
|
taskName: 'Develop',
|
||||||
|
handle: 'Man',
|
||||||
|
attention: 'test abc',
|
||||||
|
systemName: '12313',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10_001,
|
||||||
|
time: '2023年12月24日',
|
||||||
|
title: 'Test1222',
|
||||||
|
taskName: 'Develop',
|
||||||
|
handle: 'Man',
|
||||||
|
attention: 'test abc',
|
||||||
|
systemName: '12313',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}, 300);
|
||||||
|
};
|
||||||
|
|
||||||
|
findList();
|
||||||
|
|
||||||
// 个人设置弹层
|
// 个人设置弹层
|
||||||
let userSet = ref(false);
|
const userSet = ref(false);
|
||||||
|
|
||||||
const plainOptions = ['公文系统', '合同管理', '物资管理', '督查管理', '市场管理', '电子考勤', '财务管理信息通知', '费用报销', '设备管理', '工程造价', '员工诉求', '即完即结', '科技研发', '标准化系统', '纪检监督系统', '后勤管理系统', '信用风险系统'];
|
const plainOptions = [
|
||||||
|
'公文系统',
|
||||||
|
'合同管理',
|
||||||
|
'物资管理',
|
||||||
|
'督查管理',
|
||||||
|
'市场管理',
|
||||||
|
'电子考勤',
|
||||||
|
'财务管理信息通知',
|
||||||
|
'费用报销',
|
||||||
|
'设备管理',
|
||||||
|
'工程造价',
|
||||||
|
'员工诉求',
|
||||||
|
'即完即结',
|
||||||
|
'科技研发',
|
||||||
|
'标准化系统',
|
||||||
|
'纪检监督系统',
|
||||||
|
'后勤管理系统',
|
||||||
|
'信用风险系统',
|
||||||
|
];
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
indeterminate: true,
|
indeterminate: true,
|
||||||
checkAll: false,
|
checkAll: false,
|
||||||
|
@ -159,23 +238,133 @@ const onCheckAllChange = (e: any) => {
|
||||||
};
|
};
|
||||||
watch(
|
watch(
|
||||||
() => state.checkedList,
|
() => state.checkedList,
|
||||||
val => {
|
(val) => {
|
||||||
state.indeterminate = !!val.length && val.length < plainOptions.length;
|
state.indeterminate = val.length > 0 && val.length < plainOptions.length;
|
||||||
state.checkAll = val.length === plainOptions.length;
|
state.checkAll = val.length === plainOptions.length;
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
let selectClass = ref('全部')
|
const selectClass = ref('全部');
|
||||||
|
|
||||||
let selectedClick = (item: string) => {
|
const selectedClick = (item: string) => {
|
||||||
selectClass.value = item
|
selectClass.value = item;
|
||||||
}
|
};
|
||||||
|
|
||||||
let selectTodo = ref('');
|
const selectTodo = ref('');
|
||||||
let selectTodoClick = (item: string) => {
|
const selectTodoClick = (item: string) => {
|
||||||
selectTodo.value = item
|
selectTodo.value = item;
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex flex-col" style="width: 100%; height: 100%">
|
||||||
|
<div class="head-top-box titlt-top mb-3 flex justify-between">
|
||||||
|
<div class="flex items-center gap-10">
|
||||||
|
<Badge :count="9" :offset="[6, -3]">
|
||||||
|
<div
|
||||||
|
:class="{ active: selectTodo == 'db' }"
|
||||||
|
class="flex cursor-pointer items-center gap-1"
|
||||||
|
@click="selectTodoClick('db')"
|
||||||
|
>
|
||||||
|
<CalendarOutlined />待办
|
||||||
|
</div>
|
||||||
|
</Badge>
|
||||||
|
<div
|
||||||
|
:class="{ active: selectTodo == 'yb' }"
|
||||||
|
class="flex cursor-pointer items-center gap-1"
|
||||||
|
@click="selectTodoClick('yb')"
|
||||||
|
>
|
||||||
|
<CarryOutOutlined />已办
|
||||||
|
</div>
|
||||||
|
<Badge :count="9" :offset="[6, -3]">
|
||||||
|
<div
|
||||||
|
:class="{ active: selectTodo == 'dy' }"
|
||||||
|
class="flex cursor-pointer items-center gap-1"
|
||||||
|
@click="selectTodoClick('dy')"
|
||||||
|
>
|
||||||
|
<ExceptionOutlined />待阅
|
||||||
|
</div>
|
||||||
|
</Badge>
|
||||||
|
<div
|
||||||
|
:class="{ active: selectTodo == 'yy' }"
|
||||||
|
class="flex cursor-pointer items-center gap-1"
|
||||||
|
@click="selectTodoClick('yy')"
|
||||||
|
>
|
||||||
|
<FileDoneOutlined />已阅
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
:class="{ active: selectTodo == 'gz' }"
|
||||||
|
class="flex cursor-pointer items-center gap-1"
|
||||||
|
@click="selectTodoClick('gz')"
|
||||||
|
>
|
||||||
|
<StarOutlined />关注
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<InputSearch placeholder="任务查询" style="width: 200px" />
|
||||||
|
<SettingOutlined class="cursor-pointer" @click="userSet = true" />
|
||||||
|
<ReloadOutlined class="cursor-pointer" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="f-btn-box">
|
||||||
|
<li>
|
||||||
|
<Button
|
||||||
|
:type="selectClass == '全部' ? 'primary' : 'default'"
|
||||||
|
@click="selectedClick('全部')"
|
||||||
|
>
|
||||||
|
全部
|
||||||
|
</Button>
|
||||||
|
</li>
|
||||||
|
<li v-for="item in plainOptions" :key="item" @click="selectedClick(item)">
|
||||||
|
<Button :type="selectClass == item ? 'primary' : 'default'">
|
||||||
|
{{ item }}
|
||||||
|
</Button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="flex-1 overflow-hidden">
|
||||||
|
<vxe-grid v-bind="gridOptions">
|
||||||
|
<template #attention_default="{ row }">
|
||||||
|
<StarOutlined class="text-lg" />
|
||||||
|
</template>
|
||||||
|
<template #title_default="{ row }">
|
||||||
|
<Button style="padding: 0" type="link">{{ row.title }}</Button>
|
||||||
|
</template>
|
||||||
|
<template #pager>
|
||||||
|
<div class="flex justify-end py-2">
|
||||||
|
<Pagination
|
||||||
|
:total="1000"
|
||||||
|
show-quick-jumper
|
||||||
|
show-size-changer
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</vxe-grid>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Modal v-model:open="userSet" :width="800" ok-text="提交" title="个人设置">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<div class="shrink-0">接收消息系统:</div>
|
||||||
|
<div>
|
||||||
|
<Checkbox
|
||||||
|
v-model:checked="state.checkAll"
|
||||||
|
:indeterminate="state.indeterminate"
|
||||||
|
@change="onCheckAllChange"
|
||||||
|
>
|
||||||
|
全选
|
||||||
|
</Checkbox>
|
||||||
|
<CheckboxGroup v-model:value="state.checkedList">
|
||||||
|
<div class="mt-2 flex flex-wrap gap-2">
|
||||||
|
<Checkbox v-for="item in plainOptions" :key="item" :value="item">
|
||||||
|
<div class="w-[85px] truncate">{{ item }}</div>
|
||||||
|
</Checkbox>
|
||||||
|
</div>
|
||||||
|
</CheckboxGroup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import 'vxe-table/lib/style.css';
|
@import 'vxe-table/lib/style.css';
|
||||||
|
|
||||||
|
|
|
@ -613,6 +613,7 @@ const formState = reactive({
|
||||||
<CloseCircleFilled style="color: #f10215" />
|
<CloseCircleFilled style="color: #f10215" />
|
||||||
</span>
|
</span>
|
||||||
<div
|
<div
|
||||||
|
:class="{ 'cursor-pointer': !tilesIsMove }"
|
||||||
class="us-card-box bg-background box-border h-[100%] w-[100%] px-4 py-2"
|
class="us-card-box bg-background box-border h-[100%] w-[100%] px-4 py-2"
|
||||||
@click="goPage(item)"
|
@click="goPage(item)"
|
||||||
>
|
>
|
||||||
|
@ -668,7 +669,7 @@ const formState = reactive({
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #content>
|
<template #content>
|
||||||
<div class="shop-seach flex items-center">
|
<div class="shop-seach mb-2 flex items-center">
|
||||||
<Select v-model:value="shopFlotter">
|
<Select v-model:value="shopFlotter">
|
||||||
<SelectOption value="1">全部应用磁贴</SelectOption>
|
<SelectOption value="1">全部应用磁贴</SelectOption>
|
||||||
<SelectOption value="2">Option2</SelectOption>
|
<SelectOption value="2">Option2</SelectOption>
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,970 @@
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
defineAsyncComponent,
|
||||||
|
getCurrentInstance,
|
||||||
|
inject,
|
||||||
|
markRaw,
|
||||||
|
nextTick,
|
||||||
|
onBeforeUnmount,
|
||||||
|
onMounted,
|
||||||
|
reactive,
|
||||||
|
ref,
|
||||||
|
} from 'vue';
|
||||||
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
import {
|
||||||
|
CheckOutlined,
|
||||||
|
CloseCircleFilled,
|
||||||
|
CloseOutlined,
|
||||||
|
EditOutlined,
|
||||||
|
PlusOutlined,
|
||||||
|
ShoppingCartOutlined,
|
||||||
|
UndoOutlined,
|
||||||
|
} from '@ant-design/icons-vue';
|
||||||
|
import {
|
||||||
|
Checkbox,
|
||||||
|
Collapse,
|
||||||
|
CollapsePanel,
|
||||||
|
FloatButton,
|
||||||
|
FloatButtonGroup,
|
||||||
|
Form,
|
||||||
|
FormItem,
|
||||||
|
Input,
|
||||||
|
InputSearch,
|
||||||
|
Modal,
|
||||||
|
Popover,
|
||||||
|
Select,
|
||||||
|
SelectOption,
|
||||||
|
} from 'ant-design-vue';
|
||||||
|
import { storeToRefs } from 'pinia';
|
||||||
|
|
||||||
|
import { UseTilesStore } from '#/store';
|
||||||
|
|
||||||
|
import { tilesList } from './tiles';
|
||||||
|
import { debounce, updateRowHeight } from './utils';
|
||||||
|
|
||||||
|
const tilesStore = UseTilesStore();
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
// 组件ref map 形式
|
||||||
|
const componentsRef = ref(new Map());
|
||||||
|
// 设置组件的 ref
|
||||||
|
const setComponentRef = (el, id) => {
|
||||||
|
if (el) {
|
||||||
|
componentsRef.value.set(`child-${id}`, el);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// import GridGroup from './components/GridGroup/index.vue'
|
||||||
|
|
||||||
|
const { proxy, ctx: that } = getCurrentInstance();
|
||||||
|
const layout = ref([]);
|
||||||
|
const id = ref('');
|
||||||
|
onMounted(() => {
|
||||||
|
id.value = route.params.id;
|
||||||
|
const list =
|
||||||
|
JSON.parse(localStorage.getItem(`layout_${id.value}`)) ||
|
||||||
|
JSON.parse(localStorage.getItem('layout'));
|
||||||
|
const layoutStr = list;
|
||||||
|
layout.value = layoutStr;
|
||||||
|
});
|
||||||
|
const colNum = 12;
|
||||||
|
let defaultH = 2;
|
||||||
|
let defaultW = 2;
|
||||||
|
const mouseXY = {
|
||||||
|
x: null,
|
||||||
|
y: null,
|
||||||
|
};
|
||||||
|
const DragPos = {
|
||||||
|
x: null,
|
||||||
|
y: null,
|
||||||
|
w: null,
|
||||||
|
h: null,
|
||||||
|
i: null,
|
||||||
|
};
|
||||||
|
const componentsInfo = tilesList;
|
||||||
|
let currentDragCom = null;
|
||||||
|
|
||||||
|
/** 行高 */
|
||||||
|
const rowHeight = ref(0);
|
||||||
|
/** 屏幕宽度 */
|
||||||
|
const screenW = ref(0);
|
||||||
|
|
||||||
|
// 防抖的 updateRowHeight 函数,等待 200ms 后执行
|
||||||
|
const debouncedUpdateRowHeight = debounce(() => {
|
||||||
|
rowHeight.value = updateRowHeight('#container-canvas');
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
// 使用 inject 来获取孙组件 C 的 ref
|
||||||
|
const gridLayoutRef = inject('gridLayoutRef');
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
window.addEventListener('resize', debouncedUpdateRowHeight);
|
||||||
|
rowHeight.value = updateRowHeight('#container-canvas'); // 初始调用
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
console.log(gridLayoutRef); // 获取孙组件 C 的 ref
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
document.addEventListener(
|
||||||
|
'dragover',
|
||||||
|
(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
mouseXY.x = e.clientX;
|
||||||
|
mouseXY.y = e.clientY;
|
||||||
|
},
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
document.addEventListener('dragenter', (event) => {
|
||||||
|
// 阻止默认行为
|
||||||
|
event.preventDefault();
|
||||||
|
});
|
||||||
|
processLayout(layout.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 组件卸载时移除事件监听器
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
window.removeEventListener('resize', debouncedUpdateRowHeight);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 引入组件
|
||||||
|
const loadComponent = (path) => {
|
||||||
|
return defineAsyncComponent(markRaw(() => import(`${path}`)));
|
||||||
|
};
|
||||||
|
// 处理布局数据中的组件
|
||||||
|
const processLayout = (layoutSetInfo) => {
|
||||||
|
for (const item of layoutSetInfo) {
|
||||||
|
if (!item.component) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const resComp = loadComponent(item.component);
|
||||||
|
item.loadComp = resComp;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const dragstart = (e, item) => {
|
||||||
|
e.dataTransfer.effectAllowed = 'move';
|
||||||
|
currentDragCom = item;
|
||||||
|
defaultH = item.h;
|
||||||
|
defaultW = item.w;
|
||||||
|
};
|
||||||
|
const drag = (e, item) => {
|
||||||
|
shop.value = false;
|
||||||
|
e.preventDefault && e.preventDefault();
|
||||||
|
const parentRect = document
|
||||||
|
.querySelector('.grid-box')
|
||||||
|
.getBoundingClientRect();
|
||||||
|
let mouseInGrid = false;
|
||||||
|
if (
|
||||||
|
mouseXY.x > parentRect.left &&
|
||||||
|
mouseXY.x < parentRect.right &&
|
||||||
|
mouseXY.y > parentRect.top &&
|
||||||
|
mouseXY.y < parentRect.bottom
|
||||||
|
) {
|
||||||
|
mouseInGrid = true;
|
||||||
|
}
|
||||||
|
if (mouseInGrid === true && !layout.value.some((item) => item.i === 'drop')) {
|
||||||
|
layout.value.push({
|
||||||
|
x: (layout.value.length * 2) % (colNum || 12),
|
||||||
|
y: layout.value.length + (colNum || 12),
|
||||||
|
w: defaultW,
|
||||||
|
h: defaultH,
|
||||||
|
i: 'drop',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const index = layout.value.findIndex((item) => item.i === 'drop');
|
||||||
|
if (index !== -1) {
|
||||||
|
try {
|
||||||
|
proxy.$refs.gridItem[layout.value.length - 1].$refs.item.style.display =
|
||||||
|
'none';
|
||||||
|
} catch {}
|
||||||
|
|
||||||
|
const el = proxy.$refs.gridItem ? proxy.$refs.gridItem[index] : null;
|
||||||
|
if (el) {
|
||||||
|
el.dragging = {
|
||||||
|
top: mouseXY.y - parentRect.top,
|
||||||
|
left: mouseXY.x - parentRect.left,
|
||||||
|
};
|
||||||
|
const new_pos =
|
||||||
|
el &&
|
||||||
|
el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left);
|
||||||
|
if (mouseInGrid === true) {
|
||||||
|
// function dragEvent(eventName, id, x, y, h, w)
|
||||||
|
proxy.$refs.gridLayout.dragEvent(
|
||||||
|
'dragstart',
|
||||||
|
'drop',
|
||||||
|
new_pos.x || 0,
|
||||||
|
new_pos.y || 0,
|
||||||
|
defaultH,
|
||||||
|
defaultW,
|
||||||
|
);
|
||||||
|
DragPos.i = String(Date.now());
|
||||||
|
DragPos.x = layout.value[index].x;
|
||||||
|
DragPos.y = layout.value[index].y;
|
||||||
|
}
|
||||||
|
if (mouseInGrid === false) {
|
||||||
|
proxy.$refs.gridLayout.dragEvent(
|
||||||
|
'dragend',
|
||||||
|
'drop',
|
||||||
|
new_pos.x || 0,
|
||||||
|
new_pos.y || 0,
|
||||||
|
defaultH,
|
||||||
|
defaultW,
|
||||||
|
);
|
||||||
|
layout.value = layout.value.filter((obj) => obj.i !== 'drop');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const dragend = (e) => {
|
||||||
|
tilesIsMove.value = false;
|
||||||
|
const parentRect = document
|
||||||
|
.querySelector('.grid-box')
|
||||||
|
.getBoundingClientRect();
|
||||||
|
let mouseInGrid = false;
|
||||||
|
if (
|
||||||
|
mouseXY.x > parentRect.left &&
|
||||||
|
mouseXY.x < parentRect.right &&
|
||||||
|
mouseXY.y > parentRect.top &&
|
||||||
|
mouseXY.y < parentRect.bottom
|
||||||
|
) {
|
||||||
|
mouseInGrid = true;
|
||||||
|
}
|
||||||
|
if (mouseInGrid === true) {
|
||||||
|
proxy.$refs.gridLayout.dragEvent(
|
||||||
|
'dragend',
|
||||||
|
'drop',
|
||||||
|
DragPos.x,
|
||||||
|
DragPos.y,
|
||||||
|
defaultH,
|
||||||
|
defaultW,
|
||||||
|
);
|
||||||
|
const delIndex = layout.value.findIndex((item) => item.i === 'drop');
|
||||||
|
layout.value.splice(delIndex, 1);
|
||||||
|
const loadComp = loadComponent(currentDragCom.component);
|
||||||
|
layout.value.push({
|
||||||
|
...currentDragCom,
|
||||||
|
x: DragPos.x,
|
||||||
|
y: DragPos.y,
|
||||||
|
w: currentDragCom.w,
|
||||||
|
h: currentDragCom.h,
|
||||||
|
i: DragPos.i,
|
||||||
|
isNew: true,
|
||||||
|
loadComp,
|
||||||
|
});
|
||||||
|
proxy.$refs.gridLayout.dragEvent(
|
||||||
|
'dragend',
|
||||||
|
DragPos.i,
|
||||||
|
DragPos.x,
|
||||||
|
DragPos.y,
|
||||||
|
currentDragCom.h,
|
||||||
|
currentDragCom.w,
|
||||||
|
);
|
||||||
|
try {
|
||||||
|
proxy.$refs.gridItem[layout.value.length].$refs.item.style.display =
|
||||||
|
'block';
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
shop.value = true;
|
||||||
|
nextTick(() => {
|
||||||
|
// eslint-disable-next-line no-use-before-define
|
||||||
|
tilesIsMove.value = true;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/** targetLayout */
|
||||||
|
const targetLayout = ref({});
|
||||||
|
|
||||||
|
// 尺寸变更后,触发resize事件,使图表resize
|
||||||
|
const resizedEvent = (e) => {
|
||||||
|
if (document.createEvent) {
|
||||||
|
const ev = new Event('resize');
|
||||||
|
window.dispatchEvent(ev);
|
||||||
|
} else if (document.createEventObject) {
|
||||||
|
window.fireEvent('onresize');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const domIdxxxxx = ref(null);
|
||||||
|
|
||||||
|
/** 布局更新事件 */
|
||||||
|
const layoutUpdatedEvent = (e) => {
|
||||||
|
// 获取分组元素dom
|
||||||
|
|
||||||
|
// console.log(domIdxxxxx.value);
|
||||||
|
// console.log(dom);
|
||||||
|
console.log('layoutUpdatedEvent', e);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查找当前页面都有哪些分组
|
||||||
|
*/
|
||||||
|
function findGroup() {
|
||||||
|
const group = [];
|
||||||
|
layout.value.forEach((item) => {
|
||||||
|
if (item.childer) {
|
||||||
|
group.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log('当前画布存在分组:', group);
|
||||||
|
return group;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查当前拖拽的元素是否进入目标画布区域
|
||||||
|
const checkIfOverTargetCanvas = (item) => {
|
||||||
|
// 假设目标画布位置为 (2, 0) 宽 4 高 6
|
||||||
|
const targetCanvas = targetLayout.value;
|
||||||
|
const isOver =
|
||||||
|
item.x >= targetCanvas.x &&
|
||||||
|
item.x < targetCanvas.x + targetCanvas.w &&
|
||||||
|
item.y >= targetCanvas.y &&
|
||||||
|
item.y < targetCanvas.y + targetCanvas.h;
|
||||||
|
return isOver;
|
||||||
|
};
|
||||||
|
|
||||||
|
const moveEvent = (e) => {
|
||||||
|
//
|
||||||
|
const group = findGroup();
|
||||||
|
// console.log('当前画布存在分组:', group);
|
||||||
|
console.log('moveEvent', e);
|
||||||
|
// 事件返回的是元素的id
|
||||||
|
// 1. 根据元素id查找元素对应的宽高
|
||||||
|
const dom = layout.value.findIndex((el) => el.i === e);
|
||||||
|
// console.log(dom);
|
||||||
|
|
||||||
|
if (dom !== -1) {
|
||||||
|
targetLayout.value = layout.value[dom];
|
||||||
|
console.log(layout.value[dom]);
|
||||||
|
// 检查是否进入目标画布区域
|
||||||
|
checkIfOverTargetCanvas(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除item
|
||||||
|
const delItem = (item) => {
|
||||||
|
const delIndex = layout.value.findIndex((el) => el.i === item.i);
|
||||||
|
layout.value.splice(delIndex, 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 商店弹层
|
||||||
|
const shop = ref(false);
|
||||||
|
// 编辑磁贴
|
||||||
|
const editTiles = ref(false);
|
||||||
|
// 商店分组展开
|
||||||
|
const activeKeyArr = ref([]);
|
||||||
|
// 选中的磁贴
|
||||||
|
const selectTilseArr = ref([]);
|
||||||
|
// 新增磁贴
|
||||||
|
const addTiles = (val) => {
|
||||||
|
let arr = JSON.parse(JSON.stringify(selectTilseArr.value));
|
||||||
|
if (arr.includes(val)) {
|
||||||
|
arr = arr.filter((item) => {
|
||||||
|
return item != val;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
arr.push(val);
|
||||||
|
}
|
||||||
|
|
||||||
|
selectTilseArr.value = arr;
|
||||||
|
};
|
||||||
|
// 磁贴是否可编辑(删除、拖拽、大小)
|
||||||
|
let { tilesIsMove } = storeToRefs(tilesStore);
|
||||||
|
// 取消和确定编辑磁贴
|
||||||
|
const cancelOrSure = (type) => {
|
||||||
|
if (type == 'cance') {
|
||||||
|
editTiles.value = false;
|
||||||
|
tilesStore.setTilesIsMove(false);
|
||||||
|
const layoutStr = JSON.parse(localStorage.getItem(`layout_${id.value}`));
|
||||||
|
|
||||||
|
if (layoutStr && layoutStr.length > 0) {
|
||||||
|
for (const element of layoutStr) {
|
||||||
|
if (element && element.component) {
|
||||||
|
element.loadComp = loadComponent(element.component);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
layout.value = layoutStr;
|
||||||
|
}
|
||||||
|
} else if (type == 'sure') {
|
||||||
|
editTiles.value = false;
|
||||||
|
tilesStore.setTilesIsMove(false);
|
||||||
|
layout.value.forEach((element, index) => {
|
||||||
|
delete element.isNew;
|
||||||
|
});
|
||||||
|
const newLayout = JSON.parse(JSON.stringify(layout.value));
|
||||||
|
window.localStorage.setItem(
|
||||||
|
`layout_${id.value}`,
|
||||||
|
JSON.stringify(newLayout),
|
||||||
|
);
|
||||||
|
} else if (type == 'edit') {
|
||||||
|
editTiles.value = true;
|
||||||
|
tilesStore.setTilesIsMove(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 页面跳转
|
||||||
|
const goPage = (item) => {
|
||||||
|
if (tilesIsMove.value) return;
|
||||||
|
router.push(item?.path);
|
||||||
|
};
|
||||||
|
const addTilesForm = ref(null);
|
||||||
|
// 新增分组
|
||||||
|
const addGroup = () => {
|
||||||
|
tilesIsMove.value = false;
|
||||||
|
addTilesForm.value.validateFields().then((res) => {
|
||||||
|
const arr = JSON.parse(JSON.stringify(layout.value));
|
||||||
|
const maxY = arr.reduce((max, item) => {
|
||||||
|
return Math.max(max, item.y);
|
||||||
|
}, 0);
|
||||||
|
const obj = {
|
||||||
|
name: formState.name,
|
||||||
|
w: formState.w,
|
||||||
|
h: formState.h,
|
||||||
|
component: './components/Output5/index.vue',
|
||||||
|
isResize: true,
|
||||||
|
x: 0,
|
||||||
|
dom: '.titlt-top',
|
||||||
|
y: maxY + 1,
|
||||||
|
i: Number.parseInt(Math.random() * 10_000),
|
||||||
|
loadComp: loadComponent('./components/Output5/index.vue'),
|
||||||
|
childer: [
|
||||||
|
{
|
||||||
|
name1: 'AUTO_1612159241967.png',
|
||||||
|
name2: 'AUTO_1612159241967_C车辆调度.png',
|
||||||
|
size: '2x2',
|
||||||
|
name: '车辆调度',
|
||||||
|
w: 1,
|
||||||
|
h: 2,
|
||||||
|
minW: 1,
|
||||||
|
minH: 2,
|
||||||
|
i: 0,
|
||||||
|
x: 1,
|
||||||
|
y: 1,
|
||||||
|
component: '../Output1/index.vue',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
layout.value.push(obj);
|
||||||
|
formState.name = '';
|
||||||
|
formState.w = 4;
|
||||||
|
formState.h = 4;
|
||||||
|
|
||||||
|
addTilesModal.value = false;
|
||||||
|
nextTick(() => {
|
||||||
|
tilesIsMove.value = true;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 编辑分组名称
|
||||||
|
const editGroupName = (i, name) => {
|
||||||
|
layout.value.forEach((element) => {
|
||||||
|
if (element.i == i) {
|
||||||
|
element.name = name;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const newLayout = JSON.parse(JSON.stringify(layout.value));
|
||||||
|
window.localStorage.setItem('layout', JSON.stringify(newLayout));
|
||||||
|
};
|
||||||
|
|
||||||
|
// 查找画布中有没有当前元素
|
||||||
|
const haveItem = (name) => {
|
||||||
|
return layout.value.some((item) => item.name == name);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 磁贴商店筛选
|
||||||
|
const shopFlotter = ref('1');
|
||||||
|
|
||||||
|
// 新建磁贴弹层
|
||||||
|
const addTilesModal = ref(false);
|
||||||
|
|
||||||
|
const formState = reactive({
|
||||||
|
name: '',
|
||||||
|
w: 4,
|
||||||
|
h: 4,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="container-canvas" class="container h-[calc(100%-10px)] px-[20px]">
|
||||||
|
<!-- 自定义布局的部分 -->
|
||||||
|
<!-- {{ screenW }} - {{ rowHeight }}
|
||||||
|
|
||||||
|
<div class="layoutJSON">
|
||||||
|
Displayed as <code>[x, y, w, h]</code>:
|
||||||
|
<div class="columns">
|
||||||
|
<div v-for="item in layout">
|
||||||
|
<b>{{ item.i }}</b
|
||||||
|
>: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<div class="grid-box index-grid select-none">
|
||||||
|
<grid-layout
|
||||||
|
v-if="rowHeight != 0"
|
||||||
|
ref="gridLayout"
|
||||||
|
v-model:layout="layout"
|
||||||
|
:auto-size="true"
|
||||||
|
:col-num="12"
|
||||||
|
:is-draggable="tilesIsMove"
|
||||||
|
:is-mirrored="false"
|
||||||
|
:is-resizable="tilesIsMove"
|
||||||
|
:margin="[10, 10]"
|
||||||
|
:responsive="false"
|
||||||
|
:row-height="rowHeight"
|
||||||
|
:vertical-compact="true"
|
||||||
|
@layout-updated="layoutUpdatedEvent"
|
||||||
|
>
|
||||||
|
<grid-item
|
||||||
|
v-for="(item, index) in layout"
|
||||||
|
:key="item.i"
|
||||||
|
ref="gridItem"
|
||||||
|
:drag-allow-from="item && item.dom ? item.dom : null"
|
||||||
|
:h="item.h"
|
||||||
|
:i="item.i"
|
||||||
|
:is-resizable="
|
||||||
|
tilesIsMove && item && item.isResize ? item.isResize : false
|
||||||
|
"
|
||||||
|
:min-h="item.minH"
|
||||||
|
:min-w="item.minW"
|
||||||
|
:w="item.w"
|
||||||
|
:x="item.x"
|
||||||
|
:y="item.y"
|
||||||
|
@move="moveEvent"
|
||||||
|
@resized="resizedEvent"
|
||||||
|
>
|
||||||
|
<span v-if="tilesIsMove" class="close" @click="delItem(item)">
|
||||||
|
<CloseCircleFilled style="color: #f10215" />
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="us-card-box bg-background box-border h-[100%] w-[100%] px-4 py-2"
|
||||||
|
>
|
||||||
|
<component
|
||||||
|
:is="item.loadComp"
|
||||||
|
:key="item.i"
|
||||||
|
:ref="(el) => setComponentRef(el, item.i)"
|
||||||
|
:data="item"
|
||||||
|
@edit-group-name="editGroupName"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</grid-item>
|
||||||
|
|
||||||
|
<!-- <grid-item>
|
||||||
|
<div style="width: 200px;height: 200px;border: 1px solid #f00;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</grid-item> -->
|
||||||
|
</grid-layout>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧悬浮部分 -->
|
||||||
|
<FloatButtonGroup :style="{ right: '40px' }" shape="circle">
|
||||||
|
<template v-if="!editTiles">
|
||||||
|
<FloatButton tooltip="编辑磁贴" @click="cancelOrSure('edit')">
|
||||||
|
<template #icon>
|
||||||
|
<EditOutlined style="font-size: 20px" />
|
||||||
|
</template>
|
||||||
|
</FloatButton>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<FloatButton tooltip="新建分组" @click="addTilesModal = true">
|
||||||
|
<template #icon>
|
||||||
|
<PlusOutlined style="font-size: 20px" />
|
||||||
|
</template>
|
||||||
|
</FloatButton>
|
||||||
|
<FloatButton tooltip="保存修改" @click="cancelOrSure('sure')">
|
||||||
|
<template #icon>
|
||||||
|
<CheckOutlined style="font-size: 20px" />
|
||||||
|
</template>
|
||||||
|
</FloatButton>
|
||||||
|
<FloatButton tooltip="取消修改" @click="cancelOrSure('cance')">
|
||||||
|
<template #icon>
|
||||||
|
<UndoOutlined style="font-size: 20px" />
|
||||||
|
</template>
|
||||||
|
</FloatButton>
|
||||||
|
<Popover v-model:open="shop" placement="topRight" trigger="click">
|
||||||
|
<template #title>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="text-lg">磁贴商店(127)</div>
|
||||||
|
<CloseOutlined class="cursor-pointer" @click="shop = false" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #content>
|
||||||
|
<div class="shop-seach flex items-center">
|
||||||
|
<Select v-model:value="shopFlotter">
|
||||||
|
<SelectOption value="1">全部应用磁贴</SelectOption>
|
||||||
|
<SelectOption value="2">Option2</SelectOption>
|
||||||
|
</Select>
|
||||||
|
<InputSearch placeholder="" />
|
||||||
|
</div>
|
||||||
|
<div class="shop-box">
|
||||||
|
<!-- <CheckboxGroup v-model:value="selectTilseArr" style="width: 100%"> -->
|
||||||
|
<Collapse v-model:active-key="activeKeyArr" style="width: 100%">
|
||||||
|
<CollapsePanel key="1" header="个人工作台(22)">
|
||||||
|
<!-- 可拖入的组件部分 -->
|
||||||
|
<div class="components-box">
|
||||||
|
<div
|
||||||
|
v-for="item in componentsInfo.slice(0, 22)"
|
||||||
|
:key="item.name"
|
||||||
|
:class="{
|
||||||
|
'active pointer-events-none !cursor-no-drop': haveItem(
|
||||||
|
item.name,
|
||||||
|
),
|
||||||
|
}"
|
||||||
|
:draggable="haveItem(item.name)"
|
||||||
|
class="ctrl-box bg-background relative"
|
||||||
|
@click="addTiles(item.name)"
|
||||||
|
@drag="drag"
|
||||||
|
@dragend="dragend($event)"
|
||||||
|
@dragstart="dragstart($event, item)"
|
||||||
|
>
|
||||||
|
<div class="ctrl-name">
|
||||||
|
{{ `${item.name}(${item.size})` }}
|
||||||
|
</div>
|
||||||
|
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||||
|
<Checkbox
|
||||||
|
:checked="haveItem(item.name)"
|
||||||
|
:value="item.name"
|
||||||
|
class="absolute bottom-0 right-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CollapsePanel>
|
||||||
|
<CollapsePanel key="2" header="综合行政(12)">
|
||||||
|
<div class="components-box">
|
||||||
|
<div
|
||||||
|
v-for="item in componentsInfo.slice(22, 34)"
|
||||||
|
:key="item.name"
|
||||||
|
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||||
|
class="ctrl-box bg-background"
|
||||||
|
draggable="true"
|
||||||
|
@click="addTiles(item.name)"
|
||||||
|
@drag="drag"
|
||||||
|
@dragend="dragend"
|
||||||
|
@dragstart="dragstart($event, item)"
|
||||||
|
>
|
||||||
|
<div class="ctrl-name">
|
||||||
|
{{ `${item.name}(${item.size})` }}
|
||||||
|
</div>
|
||||||
|
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||||
|
<Checkbox
|
||||||
|
:checked="selectTilseArr.includes(item.name)"
|
||||||
|
:value="item.name"
|
||||||
|
class="absolute bottom-0 right-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CollapsePanel>
|
||||||
|
<CollapsePanel key="3" header="经营管理(22)">
|
||||||
|
<div class="components-box">
|
||||||
|
<div
|
||||||
|
v-for="item in componentsInfo.slice(34, 56)"
|
||||||
|
:key="item.name"
|
||||||
|
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||||
|
class="ctrl-box bg-background"
|
||||||
|
draggable="true"
|
||||||
|
@click="addTiles(item.name)"
|
||||||
|
@drag="drag"
|
||||||
|
@dragend="dragend"
|
||||||
|
@dragstart="dragstart($event, item)"
|
||||||
|
>
|
||||||
|
<div class="ctrl-name">
|
||||||
|
{{ `${item.name}(${item.size})` }}
|
||||||
|
</div>
|
||||||
|
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||||
|
<Checkbox
|
||||||
|
:checked="selectTilseArr.includes(item.name)"
|
||||||
|
:value="item.name"
|
||||||
|
class="absolute bottom-0 right-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CollapsePanel>
|
||||||
|
<CollapsePanel key="4" header="安全生产(19)">
|
||||||
|
<div class="components-box">
|
||||||
|
<div
|
||||||
|
v-for="item in componentsInfo.slice(56, 75)"
|
||||||
|
:key="item.name"
|
||||||
|
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||||
|
class="ctrl-box bg-background"
|
||||||
|
draggable="true"
|
||||||
|
@click="addTiles(item.name)"
|
||||||
|
@drag="drag"
|
||||||
|
@dragend="dragend"
|
||||||
|
@dragstart="dragstart($event, item)"
|
||||||
|
>
|
||||||
|
<div class="ctrl-name">
|
||||||
|
{{ `${item.name}(${item.size})` }}
|
||||||
|
</div>
|
||||||
|
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||||
|
<Checkbox
|
||||||
|
:checked="selectTilseArr.includes(item.name)"
|
||||||
|
:value="item.name"
|
||||||
|
class="absolute bottom-0 right-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CollapsePanel>
|
||||||
|
<CollapsePanel key="5" header="勘探开发(26)">
|
||||||
|
<div class="components-box">
|
||||||
|
<div
|
||||||
|
v-for="item in componentsInfo.slice(75, 101)"
|
||||||
|
:key="item.name"
|
||||||
|
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||||
|
class="ctrl-box bg-background"
|
||||||
|
draggable="true"
|
||||||
|
@click="addTiles(item.name)"
|
||||||
|
@drag="drag"
|
||||||
|
@dragend="dragend"
|
||||||
|
@dragstart="dragstart($event, item)"
|
||||||
|
>
|
||||||
|
<div class="ctrl-name">
|
||||||
|
{{ `${item.name}(${item.size})` }}
|
||||||
|
</div>
|
||||||
|
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||||
|
<Checkbox
|
||||||
|
:checked="selectTilseArr.includes(item.name)"
|
||||||
|
:value="item.name"
|
||||||
|
class="absolute bottom-0 right-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CollapsePanel>
|
||||||
|
<CollapsePanel key="6" header="数据管理(1)">
|
||||||
|
<div class="components-box">
|
||||||
|
<div
|
||||||
|
v-for="item in componentsInfo.slice(101, 102)"
|
||||||
|
:key="item.name"
|
||||||
|
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||||
|
class="ctrl-box bg-background"
|
||||||
|
draggable="true"
|
||||||
|
@click="addTiles(item.name)"
|
||||||
|
@drag="drag"
|
||||||
|
@dragend="dragend"
|
||||||
|
@dragstart="dragstart($event, item)"
|
||||||
|
>
|
||||||
|
<div class="ctrl-name">
|
||||||
|
{{ `${item.name}(${item.size})` }}
|
||||||
|
</div>
|
||||||
|
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||||
|
<Checkbox
|
||||||
|
:checked="selectTilseArr.includes(item.name)"
|
||||||
|
:value="item.name"
|
||||||
|
class="absolute bottom-0 right-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CollapsePanel>
|
||||||
|
<CollapsePanel key="7" header="总部系统(25)">
|
||||||
|
<div class="components-box">
|
||||||
|
<div
|
||||||
|
v-for="item in componentsInfo.slice(102, 127)"
|
||||||
|
:key="item.name"
|
||||||
|
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||||
|
class="ctrl-box bg-background"
|
||||||
|
draggable="true"
|
||||||
|
@click="addTiles(item.name)"
|
||||||
|
@drag="drag"
|
||||||
|
@dragend="dragend"
|
||||||
|
@dragstart="dragstart($event, item)"
|
||||||
|
>
|
||||||
|
<div class="ctrl-name">
|
||||||
|
{{ `${item.name}(${item.size})` }}
|
||||||
|
</div>
|
||||||
|
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||||
|
<Checkbox
|
||||||
|
:checked="selectTilseArr.includes(item.name)"
|
||||||
|
:value="item.name"
|
||||||
|
class="absolute bottom-0 right-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CollapsePanel>
|
||||||
|
</Collapse>
|
||||||
|
<!-- </CheckboxGroup> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<FloatButton tooltip="磁贴商店">
|
||||||
|
<template #icon>
|
||||||
|
<ShoppingCartOutlined
|
||||||
|
:visibility-height="0"
|
||||||
|
style="font-size: 20px"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</FloatButton>
|
||||||
|
</Popover>
|
||||||
|
</template>
|
||||||
|
</FloatButtonGroup>
|
||||||
|
<Modal
|
||||||
|
v-model:open="addTilesModal"
|
||||||
|
centered
|
||||||
|
title="新建分组"
|
||||||
|
@ok="addGroup"
|
||||||
|
>
|
||||||
|
<Form ref="addTilesForm" :model="formState">
|
||||||
|
<FormItem
|
||||||
|
:rules="[
|
||||||
|
{ required: true, message: '标题不能为空且长度不能超过50字节' },
|
||||||
|
]"
|
||||||
|
label="标题"
|
||||||
|
name="name"
|
||||||
|
>
|
||||||
|
<Input v-model:value="formState.name" placeholder="请输入" />
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="尺寸" name="w" required>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex items-center">
|
||||||
|
宽:
|
||||||
|
<Select v-model:value="formState.w">
|
||||||
|
<template v-for="item in 16" :key="item">
|
||||||
|
<SelectOption v-if="item >= 4" :value="item">
|
||||||
|
{{ item }}
|
||||||
|
</SelectOption>
|
||||||
|
</template>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
×
|
||||||
|
<div class="flex items-center">
|
||||||
|
高:
|
||||||
|
<Select v-model:value="formState.h">
|
||||||
|
<template v-for="item in 10" :key="item">
|
||||||
|
<SelectOption v-if="item >= 4" :value="item">
|
||||||
|
{{ item }}
|
||||||
|
</SelectOption>
|
||||||
|
</template>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FormItem>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.container {
|
||||||
|
min-width: 1000px;
|
||||||
|
position: relative;
|
||||||
|
overflow-x: auto;
|
||||||
|
max-width: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-box {
|
||||||
|
min-width: 1000px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.components-box {
|
||||||
|
padding: 12px 20px;
|
||||||
|
// border: 1px solid rgb(66 66 66 / 100%);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
align-content: flex-start;
|
||||||
|
|
||||||
|
.ctrl-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 104px;
|
||||||
|
height: 130px;
|
||||||
|
padding: 12px;
|
||||||
|
// margin-top: 20px;
|
||||||
|
user-select: none;
|
||||||
|
flex-direction: column;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid #ecf1f3;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border: 1px dashed hsl(var(--primary));
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border: 1px solid hsl(var(--primary));
|
||||||
|
}
|
||||||
|
|
||||||
|
.ctrl-name {
|
||||||
|
font-size: 12px;
|
||||||
|
color: hsl(var(--primary));
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
// height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 2;
|
||||||
|
background: rgba($color: #000000, $alpha: 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.us-card-box {
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-box {
|
||||||
|
width: 550px;
|
||||||
|
height: 75vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.index-grid > :deep(.vue-grid-layout) {
|
||||||
|
height: 100% !important;
|
||||||
|
overflow: auto;
|
||||||
|
background: transparent;
|
||||||
|
// border: 1px solid rgb(66 66 66 / 100%);
|
||||||
|
// width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.vue-grid-item {
|
||||||
|
// padding: 12px 20px;
|
||||||
|
// background: #2d2d2c;
|
||||||
|
// border: 1px solid rgb(66 66 66 / 100%);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
right: -10px;
|
||||||
|
display: inline-block;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
color: rgb(255 255 255 / 60%);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-grid-item.vue-resizable.vue-grid-placeholder {
|
||||||
|
background: white !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-seach :deep(button) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -118,10 +118,40 @@ const tilesList = [
|
||||||
maxW: 2,
|
maxW: 2,
|
||||||
maxH: 4,
|
maxH: 4,
|
||||||
i: 0,
|
i: 0,
|
||||||
x: 1,
|
x: 0,
|
||||||
y: 1,
|
y: 0,
|
||||||
component: '../../components/Output1/index.vue',
|
component: '../../components/Output1/index.vue',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name1: 'AUTO_1649411776285.png',
|
||||||
|
name2: 'AUTO_1649411776285_C智能化管线.png',
|
||||||
|
size: '2x2',
|
||||||
|
name: '智能化管线',
|
||||||
|
w: 1,
|
||||||
|
h: 2,
|
||||||
|
minW: 1,
|
||||||
|
minH: 2,
|
||||||
|
maxW: 2,
|
||||||
|
maxH: 4,
|
||||||
|
x: 2,
|
||||||
|
y: 3,
|
||||||
|
component: '../../components/Output1/index.vue',
|
||||||
|
i: 8_098_097,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name1: 'AUTO_1612236164722.png',
|
||||||
|
name2: 'AUTO_1612236164722_C门户网站.png',
|
||||||
|
size: '2x2',
|
||||||
|
name: '门户网站',
|
||||||
|
minW: 1,
|
||||||
|
minH: 2,
|
||||||
|
maxW: 2,
|
||||||
|
maxH: 4,
|
||||||
|
w: 3,
|
||||||
|
h: 3,
|
||||||
|
component: './components/Output1/index.vue',
|
||||||
|
i: 3242,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
i: 1,
|
i: 1,
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,86 +1,200 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
import { preferences } from '@vben/preferences';
|
||||||
|
|
||||||
|
import {
|
||||||
|
ContactsFilled,
|
||||||
|
DeleteFilled,
|
||||||
|
EditFilled,
|
||||||
|
ThunderboltFilled,
|
||||||
|
ToolFilled,
|
||||||
|
} from '@ant-design/icons-vue';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Form,
|
||||||
|
FormItem,
|
||||||
|
Input,
|
||||||
|
Pagination,
|
||||||
|
Select,
|
||||||
|
} from 'ant-design-vue';
|
||||||
|
import { VxeUI } from 'vxe-table';
|
||||||
|
|
||||||
|
import { saveTemplateData } from './template';
|
||||||
|
|
||||||
|
saveTemplateData();
|
||||||
|
watch(
|
||||||
|
() => preferences.theme.mode,
|
||||||
|
(n: any) => {
|
||||||
|
VxeUI.setTheme(n);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
interface RowVO {
|
||||||
|
ucode: string;
|
||||||
|
name: string;
|
||||||
|
code: string;
|
||||||
|
versions: string;
|
||||||
|
type: string;
|
||||||
|
isDefault: boolean;
|
||||||
|
users: string;
|
||||||
|
time: string;
|
||||||
|
maintain: string;
|
||||||
|
maintaintime: string;
|
||||||
|
// 操作
|
||||||
|
operate: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const tableData = ref<RowVO[]>([
|
||||||
|
{
|
||||||
|
ucode: 'xbyt',
|
||||||
|
code: '1001',
|
||||||
|
name: '管理员模板',
|
||||||
|
versions: '1.0.0',
|
||||||
|
type: 'PC',
|
||||||
|
isDefault: true,
|
||||||
|
users: 'admin',
|
||||||
|
time: '2021-01-01 00:00:00',
|
||||||
|
maintain: 'admin',
|
||||||
|
maintaintime: '2021-01-01 00:00:00',
|
||||||
|
operate: '编辑',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ucode: 'xbyt',
|
||||||
|
code: '1002',
|
||||||
|
name: '管理员模板',
|
||||||
|
versions: '1.0.0',
|
||||||
|
type: 'PC',
|
||||||
|
isDefault: true,
|
||||||
|
users: 'admin',
|
||||||
|
time: '2021-01-01 00:00:00',
|
||||||
|
maintain: 'admin',
|
||||||
|
maintaintime: '2021-01-01 00:00:00',
|
||||||
|
operate: '编辑',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ucode: 'xbyt',
|
||||||
|
code: '1003',
|
||||||
|
name: '管理员模板',
|
||||||
|
versions: '1.0.0',
|
||||||
|
type: 'PC',
|
||||||
|
isDefault: true,
|
||||||
|
users: 'admin',
|
||||||
|
time: '2021-01-01 00:00:00',
|
||||||
|
maintain: 'admin',
|
||||||
|
maintaintime: '2021-01-01 00:00:00',
|
||||||
|
operate: '编辑',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ucode: 'xbyt',
|
||||||
|
code: '1004',
|
||||||
|
name: '管理员模板',
|
||||||
|
versions: '1.0.0',
|
||||||
|
type: 'PC',
|
||||||
|
isDefault: true,
|
||||||
|
users: 'admin',
|
||||||
|
time: '2021-01-01 00:00:00',
|
||||||
|
maintain: 'admin',
|
||||||
|
maintaintime: '2021-01-01 00:00:00',
|
||||||
|
operate: '编辑',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ucode: 'xbyt',
|
||||||
|
code: '1005',
|
||||||
|
name: '管理员模板',
|
||||||
|
versions: '1.0.0',
|
||||||
|
type: 'PC',
|
||||||
|
isDefault: true,
|
||||||
|
users: 'admin',
|
||||||
|
time: '2021-01-01 00:00:00',
|
||||||
|
maintain: 'admin',
|
||||||
|
maintaintime: '2021-01-01 00:00:00',
|
||||||
|
operate: '编辑',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const goToSetTemplate = (t) => {
|
||||||
|
router.push({
|
||||||
|
name: 'template',
|
||||||
|
params: { id: t },
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="bg-background p-5 m-4">
|
<div class="bg-background m-4 p-5">
|
||||||
<div class="flex justify-between mb-4">
|
<div class="mb-4 flex justify-between">
|
||||||
<Form layout="inline">
|
<Form layout="inline">
|
||||||
<FormItem label="名称">
|
<FormItem label="名称">
|
||||||
<Input placeholder="请输入"></Input>
|
<Input placeholder="请输入" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="编码">
|
<FormItem label="编码">
|
||||||
<Input placeholder="请输入"></Input>
|
<Input placeholder="请输入" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="模板类型">
|
<FormItem label="模板类型">
|
||||||
<Select placeholder="请输入"></Select>
|
<Select placeholder="请输入" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<Button type="primary">查询</Button>
|
<Button type="primary">查询</Button>
|
||||||
</Form>
|
</Form>
|
||||||
<Button type="primary">添加</Button>
|
<Button type="primary">添加</Button>
|
||||||
</div>
|
</div>
|
||||||
<vxe-table border ref="tableRef" :data="tableData">
|
<vxe-table ref="tableRef" :data="tableData" border>
|
||||||
<vxe-column field="ucode" title="租户编码"></vxe-column>
|
<vxe-column field="ucode" title="租户编码" />
|
||||||
<vxe-column field="name" title="模板名称"></vxe-column>
|
<vxe-column field="name" title="模板名称" />
|
||||||
<vxe-column field="code" title="模板编码"></vxe-column>
|
<vxe-column field="code" title="模板编码" />
|
||||||
<vxe-column field="versions" title="模板版本信息"></vxe-column>
|
<vxe-column field="versions" title="模板版本信息" />
|
||||||
<vxe-column field="type" title="模板类型"></vxe-column>
|
<vxe-column field="type" title="模板类型" />
|
||||||
<vxe-column field="isDefault" title="是否为默认面板"></vxe-column>
|
<vxe-column field="isDefault" title="是否为默认面板">
|
||||||
<vxe-column field="users" title="创建人"></vxe-column>
|
<template #default="{ row }">
|
||||||
<vxe-column field="time" title="创建时间"></vxe-column>
|
<span v-if="row.isDefault">是</span>
|
||||||
<vxe-column field="maintain" title="维护人"></vxe-column>
|
<span v-else>否</span>
|
||||||
<vxe-column field="maintaintime" title="维护时间"></vxe-column>
|
</template>
|
||||||
|
</vxe-column>
|
||||||
|
<vxe-column field="users" title="创建人" />
|
||||||
|
<vxe-column field="time" title="创建时间" />
|
||||||
|
<vxe-column field="maintain" title="维护人" />
|
||||||
|
<vxe-column field="maintaintime" title="维护时间" />
|
||||||
<vxe-column field="operate" title="操作" width="150">
|
<vxe-column field="operate" title="操作" width="150">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<div class="flex gap-1">
|
<div class="flex gap-1">
|
||||||
<EditFilled style="color: #5cb15c;font-size: 20px;" />
|
<EditFilled
|
||||||
<DeleteFilled style="color: #e15852;font-size: 20px;"/>
|
class="cursor-pointer"
|
||||||
<ContactsFilled style="color: #367cb7;font-size: 20px;"/>
|
style="color: #5cb15c; font-size: 20px"
|
||||||
<ToolFilled style="color: #367cb7;font-size: 20px;"/>
|
/>
|
||||||
<ThunderboltFilled style="color: #e15852;font-size: 20px;"/>
|
<DeleteFilled
|
||||||
|
class="cursor-pointer"
|
||||||
|
style="color: #e15852; font-size: 20px"
|
||||||
|
/>
|
||||||
|
<ContactsFilled
|
||||||
|
class="cursor-pointer"
|
||||||
|
style="color: #367cb7; font-size: 20px"
|
||||||
|
/>
|
||||||
|
<ToolFilled
|
||||||
|
class="cursor-pointer"
|
||||||
|
style="color: #367cb7; font-size: 20px"
|
||||||
|
@click="goToSetTemplate(row.code)"
|
||||||
|
/>
|
||||||
|
<ThunderboltFilled
|
||||||
|
class="cursor-pointer"
|
||||||
|
style="color: #e15852; font-size: 20px"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
</vxe-table>
|
</vxe-table>
|
||||||
<div class="py-2 flex justify-between">
|
<div class="flex justify-between py-2">
|
||||||
<div>总共{{ tableData.length }}条数据</div>
|
<div>总共{{ tableData.length }}条数据</div>
|
||||||
<Pagination size="small" :total="1000" show-size-changer show-quick-jumper />
|
<Pagination
|
||||||
|
:total="1000"
|
||||||
|
show-quick-jumper
|
||||||
|
show-size-changer
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref ,watch} from 'vue'
|
|
||||||
import { EditFilled, DeleteFilled, ContactsFilled, ToolFilled, ThunderboltFilled } from '@ant-design/icons-vue';
|
|
||||||
import { type VxeGridProps, VxeUI } from 'vxe-table'
|
|
||||||
import { VXETable, type VxeTableInstance, type VxeTableEvents } from 'vxe-table'
|
|
||||||
|
|
||||||
import { Button, Form, FormItem, Input, Select, Card, Pagination, Textarea, Checkbox } from 'ant-design-vue';
|
|
||||||
import { preferences } from '@vben/preferences';
|
|
||||||
|
|
||||||
watch(() => preferences.theme.mode, (n: any) => {
|
|
||||||
VxeUI.setTheme(n)
|
|
||||||
},{
|
|
||||||
deep: true,
|
|
||||||
immediate: true
|
|
||||||
})
|
|
||||||
interface RowVO {
|
|
||||||
ucode: string
|
|
||||||
name: string
|
|
||||||
code: string
|
|
||||||
versions: string
|
|
||||||
type: string
|
|
||||||
isDefault: boolean
|
|
||||||
users: string
|
|
||||||
time: string
|
|
||||||
maintain: string
|
|
||||||
maintaintime: string
|
|
||||||
// 操作
|
|
||||||
operate: string
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const tableData = ref<RowVO[]>([
|
|
||||||
{ ucode: 'xbyt', code: "PC_Default", name: "管理员模板", versions: "1.0.0", type: "PC", isDefault: true, users: "admin", time: "2021-01-01 00:00:00", maintain: "admin", maintaintime: "2021-01-01 00:00:00", operate: "编辑" },
|
|
||||||
{ ucode: 'xbyt', code: "PC_Default", name: "管理员模板", versions: "1.0.0", type: "PC", isDefault: true, users: "admin", time: "2021-01-01 00:00:00", maintain: "admin", maintaintime: "2021-01-01 00:00:00", operate: "编辑" },
|
|
||||||
{ ucode: 'xbyt', code: "PC_Default", name: "管理员模板", versions: "1.0.0", type: "PC", isDefault: true, users: "admin", time: "2021-01-01 00:00:00", maintain: "admin", maintaintime: "2021-01-01 00:00:00", operate: "编辑" },
|
|
||||||
{ ucode: 'xbyt', code: "PC_Default", name: "管理员模板", versions: "1.0.0", type: "PC", isDefault: true, users: "admin", time: "2021-01-01 00:00:00", maintain: "admin", maintaintime: "2021-01-01 00:00:00", operate: "编辑" },
|
|
||||||
{ ucode: 'xbyt', code: "PC_Default", name: "管理员模板", versions: "1.0.0", type: "PC", isDefault: true, users: "admin", time: "2021-01-01 00:00:00", maintain: "admin", maintaintime: "2021-01-01 00:00:00", operate: "编辑" },
|
|
||||||
])
|
|
||||||
</script>
|
|
||||||
<style scoped lang="scss"></style>
|
<style scoped lang="scss"></style>
|
Loading…
Reference in New Issue