Compare commits
2 Commits
55cad175ad
...
2149877576
| Author | SHA1 | Date |
|---|---|---|
hujiale
|
2149877576 | |
|
hujiale
|
56dede0932 |
|
|
@ -49,3 +49,25 @@ const tokenTheme = computed(() => {
|
|||
</App>
|
||||
</ConfigProvider>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.text-muted-foreground {
|
||||
color: #eee !important;
|
||||
|
||||
.text-foreground {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #ffff !important;
|
||||
}
|
||||
|
||||
.hover\:text-foreground:hover {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vben-menu-item,
|
||||
.vben-sub-menu-content {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import {
|
|||
Search,
|
||||
} from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
import { usePreferences } from '@vben/preferences';
|
||||
import { isWindowsOs } from '@vben/utils';
|
||||
import { useVbenModal } from '@vben-core/popup-ui';
|
||||
|
||||
|
|
@ -87,10 +88,7 @@ onMounted(() => {
|
|||
});
|
||||
});
|
||||
|
||||
import { usePreferences } from '@vben/preferences';
|
||||
|
||||
const {sidebarCollapsed } = usePreferences();
|
||||
|
||||
const { sidebarCollapsed } = usePreferences();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -99,8 +97,12 @@ const {sidebarCollapsed } = usePreferences();
|
|||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<Search class="text-muted-foreground mr-2 size-4" />
|
||||
<input ref="searchInputRef" v-model="keyword" :placeholder="$t('widgets.search.searchNavigate')"
|
||||
class="ring-none placeholder:text-muted-foreground w-[80%] rounded-md border border-none bg-transparent p-2 pl-0 text-sm font-normal outline-none ring-0 ring-offset-transparent focus-visible:ring-transparent" />
|
||||
<input
|
||||
ref="searchInputRef"
|
||||
v-model="keyword"
|
||||
:placeholder="$t('widgets.search.searchNavigate')"
|
||||
class="ring-none placeholder:text-muted-foreground w-[80%] rounded-md border border-none bg-transparent p-2 pl-0 text-sm font-normal outline-none ring-0 ring-offset-transparent focus-visible:ring-transparent"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -123,22 +125,36 @@ const {sidebarCollapsed } = usePreferences();
|
|||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
<div v-if="!sidebarCollapsed"
|
||||
class="md:bg-accent group flex h-8 cursor-pointer items-center gap-3 rounded-2xl border-none bg-none px-2 py-0.5 outline-none"
|
||||
@click="toggleOpen()">
|
||||
<Search class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100" />
|
||||
<span class="text-muted-foreground group-hover:text-foreground hidden text-xs duration-300 md:block">
|
||||
<div
|
||||
v-if="!sidebarCollapsed"
|
||||
class="group flex h-8 cursor-pointer items-center gap-3 rounded-2xl border-none bg-none px-2 py-0.5 outline-none"
|
||||
@click="toggleOpen()"
|
||||
>
|
||||
<Search
|
||||
class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100"
|
||||
/>
|
||||
<span
|
||||
class="text-muted-foreground group-hover:text-foreground hidden text-xs duration-300 md:block"
|
||||
>
|
||||
{{ $t('widgets.search.title') }}
|
||||
</span>
|
||||
<span v-if="enableShortcutKey"
|
||||
class="bg-background border-foreground/60 text-muted-foreground group-hover:text-foreground relative hidden rounded-sm rounded-r-xl px-1.5 py-1 text-xs leading-none group-hover:opacity-100 md:block">
|
||||
<span
|
||||
v-if="enableShortcutKey"
|
||||
class="bg-background border-foreground/60 text-muted-foreground group-hover:text-foreground relative hidden rounded-sm rounded-r-xl px-1.5 py-1 text-xs leading-none group-hover:opacity-100 md:block"
|
||||
>
|
||||
{{ isWindowsOs() ? 'Ctrl' : '⌘' }}
|
||||
<kbd>K</kbd>
|
||||
</span>
|
||||
<span v-else></span>
|
||||
</div>
|
||||
<div v-else class="rounded-full w100% flex justify-center cursor-pointer" @click="toggleOpen()">
|
||||
<Search class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100" />
|
||||
<div
|
||||
v-else
|
||||
class="w100% flex cursor-pointer justify-center rounded-full"
|
||||
@click="toggleOpen()"
|
||||
>
|
||||
<Search
|
||||
class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -57,11 +57,11 @@ const PRESET = computed((): PresetItem[] => [
|
|||
tip: $t('preferences.horizontalTip'),
|
||||
type: 'header-nav',
|
||||
},
|
||||
{
|
||||
name: $t('preferences.mixedMenu'),
|
||||
tip: $t('preferences.mixedMenuTip'),
|
||||
type: 'mixed-nav',
|
||||
},
|
||||
// {
|
||||
// name: $t('preferences.mixedMenu'),
|
||||
// tip: $t('preferences.mixedMenuTip'),
|
||||
// type: 'mixed-nav',
|
||||
// },
|
||||
// {
|
||||
// name: $t('preferences.fullContent'),
|
||||
// tip: $t('preferences.fullContentTip'),
|
||||
|
|
|
|||
|
|
@ -1,208 +1,251 @@
|
|||
<template>
|
||||
<div class="content-box px-3 mt-2 h-[100%]">
|
||||
<div class="filter-box py-3">
|
||||
<Form layout="inline">
|
||||
<FormItem label="标题">
|
||||
<Input class="!w-[150px]"></Input>
|
||||
</FormItem>
|
||||
<FormItem label="业务域">
|
||||
<Select placeholder="请选择" class="!w-[150px]"></Select>
|
||||
</FormItem>
|
||||
<FormItem label="适用范围">
|
||||
<Select v-model:value="scope" :options="options2" placeholder="请选择" class="!w-[150px]"></Select>
|
||||
</FormItem>
|
||||
<FormItem label="状态" v-if="type == 'portal'">
|
||||
<Select placeholder="请选择" class="!w-[150px]"></Select>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary">查询</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="tiles-list flex flex-wrap justify-stretch gap-4 py-3 ">
|
||||
<Card class="w-[18%] relative card-box" :bodyStyle="{ padding: 0 }"
|
||||
v-for="(item, index) in list.slice(0, 10)" :key="index">
|
||||
<div class="card-tp-b flex flex-col items-center">
|
||||
<img :src="'/xbyt/' + item.url" alt="" class="mt-3 w-[100px] h-[100px]">
|
||||
<div class="text-sm pb-2">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="card-bt-box pt-2 pl-6 text-xs flex flex-col gap-1 pb-3">
|
||||
<div class="c-b-item flex">
|
||||
<div class="font-semibold">编码：</div>{{ item.code }}
|
||||
</div>
|
||||
<div class="c-b-item flex">
|
||||
<div class="font-semibold">标题：</div>{{ item.name }}
|
||||
</div>
|
||||
<div class="c-b-item flex">
|
||||
<div class="font-semibold">业务域：</div>{{ item.work }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mask-box hidden">
|
||||
<div v-if="type == 'portal'"
|
||||
class="absolute inset-x-0 inset-y-0 bg-[rgba(0,0,0,.3)] flex items-center justify-center gap-4">
|
||||
<Button type="primary" @click="openInfo(item)">修改</Button>
|
||||
<Button type="primary" danger>删除</Button>
|
||||
</div>
|
||||
<div v-else-if="type == 'audit'"
|
||||
class="absolute inset-x-0 inset-y-0 bg-[rgba(0,0,0,.3)] flex items-center justify-center gap-4">
|
||||
<Button type="primary">通过</Button>
|
||||
<Button type="primary" danger>驳回</Button>
|
||||
</div>
|
||||
<ExpandOutlined class="absolute top-2 right-2 text-[#fff] cursor-pointer" />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<Pagination v-model:current="current" :total="500" />
|
||||
</div>
|
||||
|
||||
<Modal v-model:open="editcardShow" title="修改磁贴" :width="600">
|
||||
<template #footer>
|
||||
<div class="w-[100%] flex justify-center">
|
||||
<Button type="primary">预览磁贴</Button>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex gap-2">
|
||||
<Form layout="inline" :label-col="labelCol" :wrapperCol="wrapperCol">
|
||||
<FormItem label="业务域" required>
|
||||
<Select placeholder="请选择" disabled></Select>
|
||||
</FormItem>
|
||||
<FormItem label="适用范围" required>
|
||||
<Select v-model:value="scope" disabled :options="options2" placeholder="请选择"></Select>
|
||||
</FormItem>
|
||||
<FormItem label="编码" required>
|
||||
<Input disabled v-model:value="editForm.code"></Input>
|
||||
</FormItem>
|
||||
<FormItem label="标题" required>
|
||||
<Input v-model:value="editForm.title"></Input>
|
||||
</FormItem>
|
||||
<FormItem label="数据源">
|
||||
<Input></Input>
|
||||
</FormItem>
|
||||
<FormItem label="磁贴大小">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center">
|
||||
宽：
|
||||
<Select v-model:value="editForm.size.w" disabled>
|
||||
<SelectOption value="1">1</SelectOption>
|
||||
<SelectOption value="2">2</SelectOption>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
高：
|
||||
<Select v-model:value="editForm.size.h" disabled>
|
||||
<SelectOption value="1">1</SelectOption>
|
||||
<SelectOption value="2">2</SelectOption>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="图标" required>
|
||||
<Input></Input>
|
||||
</FormItem>
|
||||
<FormItem label="打开方式">
|
||||
<Select v-model:value="scope" :options="options2" placeholder="请选择"></Select>
|
||||
</FormItem>
|
||||
<FormItem label="作者" required>
|
||||
<Input></Input>
|
||||
</FormItem>
|
||||
<FormItem label="联系方式" required>
|
||||
<Input></Input>
|
||||
</FormItem>
|
||||
<FormItem label="链接地址" required :wrapperCol="itemWrapperCol">
|
||||
<div>
|
||||
<Input v-model:value="editForm.link"></Input>
|
||||
<Checkbox>经过授权才可使用</Checkbox>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="描述" :wrapperCol="itemWrapperCol">
|
||||
<Textarea v-model:value="editForm.doc" ></Textarea>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, toRefs, reactive } from 'vue';
|
||||
import { reactive, ref, toRefs } from 'vue';
|
||||
|
||||
import { ExpandOutlined } from '@ant-design/icons-vue';
|
||||
import { Button, Form, FormItem, Input,Checkbox, Select, Card, Pagination, Modal, SelectOption,Textarea } from 'ant-design-vue';
|
||||
import { tilesList } from '../../tiles'
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
list: {
|
||||
type: Object,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Checkbox,
|
||||
Form,
|
||||
FormItem,
|
||||
Input,
|
||||
Modal,
|
||||
Pagination,
|
||||
Select,
|
||||
SelectOption,
|
||||
Textarea,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
let { list, type } = toRefs(props);
|
||||
for (let i = 0; i < tilesList.length; i++) {
|
||||
let obj: any = {}
|
||||
obj.name = tilesList[i]?.name;
|
||||
obj.url = tilesList[i]?.name2;
|
||||
obj.work = '经营管理';
|
||||
obj.code = tilesList[i]?.name1.split('.')[0];
|
||||
list.value.push(obj);
|
||||
obj = null
|
||||
import { tilesList } from '../../tiles';
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
list: {
|
||||
type: Object,
|
||||
default: [],
|
||||
},
|
||||
});
|
||||
|
||||
const { list, type } = toRefs(props);
|
||||
for (const element of tilesList) {
|
||||
let obj: any = {};
|
||||
obj.name = element?.name;
|
||||
obj.url = element?.name2;
|
||||
obj.work = '经营管理';
|
||||
obj.code = element?.name1.split('.')[0];
|
||||
list.value.push(obj);
|
||||
obj = null;
|
||||
}
|
||||
let scope = 'all'
|
||||
const scope = 'all';
|
||||
|
||||
const options2 = [
|
||||
{
|
||||
value: 'all',
|
||||
label: '全部',
|
||||
},
|
||||
]
|
||||
let current = ref(1);
|
||||
{
|
||||
value: 'all',
|
||||
label: '全部',
|
||||
},
|
||||
];
|
||||
const current = ref(1);
|
||||
|
||||
let editcardShow = ref(false)
|
||||
const editcardShow = ref(false);
|
||||
|
||||
let openInfo = (info) => {
|
||||
editcardShow.value = true;
|
||||
editForm.code = info.code;
|
||||
editForm.title = info.name;
|
||||
}
|
||||
const openInfo = (info) => {
|
||||
editcardShow.value = true;
|
||||
editForm.code = info.code;
|
||||
editForm.title = info.name;
|
||||
};
|
||||
let editForm = reactive({
|
||||
domains: '',
|
||||
scope: '',
|
||||
code: "",
|
||||
title: '',
|
||||
dataSources: '',
|
||||
size: {
|
||||
w: '',
|
||||
h: ''
|
||||
},
|
||||
icon: '',
|
||||
openType: '',
|
||||
author: '',
|
||||
number: '',
|
||||
link: 'www.baidu.com',
|
||||
auth: true,
|
||||
doc: ''
|
||||
|
||||
})
|
||||
const labelCol = { style: { width: '100px',margin: '0 0 10px 0' } };
|
||||
domains: '',
|
||||
scope: '',
|
||||
code: '',
|
||||
title: '',
|
||||
dataSources: '',
|
||||
size: {
|
||||
w: '',
|
||||
h: '',
|
||||
},
|
||||
icon: '',
|
||||
openType: '',
|
||||
author: '',
|
||||
number: '',
|
||||
link: 'www.baidu.com',
|
||||
auth: true,
|
||||
doc: '',
|
||||
});
|
||||
const labelCol = { style: { width: '100px', margin: '0 0 10px 0' } };
|
||||
const wrapperCol = { style: { width: '150px' } };
|
||||
const itemWrapperCol = { style: { width: '415px' } };
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="content-box mt-2 h-[100%] px-3">
|
||||
<div class="filter-box py-3">
|
||||
<Form layout="inline">
|
||||
<FormItem label="标题">
|
||||
<Input class="!w-[150px]" />
|
||||
</FormItem>
|
||||
<FormItem label="业务域">
|
||||
<Select class="!w-[150px]" placeholder="请选择" />
|
||||
</FormItem>
|
||||
<FormItem label="适用范围">
|
||||
<Select
|
||||
v-model:value="scope"
|
||||
:options="options2"
|
||||
class="!w-[150px]"
|
||||
placeholder="请选择"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem v-if="type == 'portal'" label="状态">
|
||||
<Select class="!w-[150px]" placeholder="请选择" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary">查询</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="tiles-list flex flex-wrap justify-stretch gap-4 py-3">
|
||||
<Card
|
||||
v-for="(item, index) in list.slice(0, 10)"
|
||||
:key="index"
|
||||
:body-style="{ padding: 0 }"
|
||||
class="card-box relative w-[18%]"
|
||||
>
|
||||
<div class="card-tp-b flex flex-col items-center">
|
||||
<img
|
||||
:src="`/xbyt/${item.url}`"
|
||||
alt=""
|
||||
class="mt-3 h-[100px] w-[100px]"
|
||||
/>
|
||||
<div class="pb-2 text-sm">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="card-bt-box flex flex-col gap-1 pb-3 pl-6 pt-2 text-xs">
|
||||
<div class="c-b-item flex">
|
||||
<div class="font-semibold">编码：</div>
|
||||
{{ item.code }}
|
||||
</div>
|
||||
<div class="c-b-item flex">
|
||||
<div class="font-semibold">标题：</div>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div class="c-b-item flex">
|
||||
<div class="font-semibold">业务域：</div>
|
||||
{{ item.work }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mask-box hidden">
|
||||
<div
|
||||
v-if="type == 'portal'"
|
||||
class="absolute inset-x-0 inset-y-0 flex items-center justify-center gap-4 bg-[rgba(0,0,0,.3)]"
|
||||
>
|
||||
<Button type="primary" @click="openInfo(item)">修改</Button>
|
||||
<Button danger type="primary">删除</Button>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="type == 'audit'"
|
||||
class="absolute inset-x-0 inset-y-0 flex items-center justify-center gap-4 bg-[rgba(0,0,0,.3)]"
|
||||
>
|
||||
<Button type="primary">通过</Button>
|
||||
<Button danger type="primary">驳回</Button>
|
||||
</div>
|
||||
<ExpandOutlined
|
||||
class="absolute right-2 top-2 cursor-pointer text-[#fff]"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<Pagination v-model:current="current" :total="500" />
|
||||
</div>
|
||||
|
||||
<Modal v-model:open="editcardShow" :width="600" title="修改磁贴">
|
||||
<template #footer>
|
||||
<div class="flex w-[100%] justify-center">
|
||||
<Button type="primary">预览磁贴</Button>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex gap-2">
|
||||
<Form :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
|
||||
<FormItem label="业务域" required>
|
||||
<Select disabled placeholder="请选择" />
|
||||
</FormItem>
|
||||
<FormItem label="适用范围" required>
|
||||
<Select
|
||||
v-model:value="scope"
|
||||
:options="options2"
|
||||
disabled
|
||||
placeholder="请选择"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="编码" required>
|
||||
<Input v-model:value="editForm.code" disabled />
|
||||
</FormItem>
|
||||
<FormItem label="标题" required>
|
||||
<Input v-model:value="editForm.title" />
|
||||
</FormItem>
|
||||
<FormItem label="数据源">
|
||||
<Input />
|
||||
</FormItem>
|
||||
<FormItem label="磁贴大小">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center">
|
||||
宽：
|
||||
<Select v-model:value="editForm.size.w" disabled>
|
||||
<SelectOption value="1">1</SelectOption>
|
||||
<SelectOption value="2">2</SelectOption>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
高：
|
||||
<Select v-model:value="editForm.size.h" disabled>
|
||||
<SelectOption value="1">1</SelectOption>
|
||||
<SelectOption value="2">2</SelectOption>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="图标" required>
|
||||
<Input />
|
||||
</FormItem>
|
||||
<FormItem label="打开方式">
|
||||
<Select
|
||||
v-model:value="scope"
|
||||
:options="options2"
|
||||
placeholder="请选择"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="作者" required>
|
||||
<Input />
|
||||
</FormItem>
|
||||
<FormItem label="联系方式" required>
|
||||
<Input />
|
||||
</FormItem>
|
||||
<FormItem :wrapper-col="itemWrapperCol" label="链接地址" required>
|
||||
<div>
|
||||
<Input v-model:value="editForm.link" />
|
||||
<Checkbox>经过授权才可使用</Checkbox>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem :wrapper-col="itemWrapperCol" label="描述">
|
||||
<Textarea v-model:value="editForm.doc" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.tiles-list {
|
||||
border-top: 1px solid #ddd;
|
||||
border-top: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.card-bt-box {
|
||||
border-top: 1px solid #ddd;
|
||||
border-top: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.card-box:hover {
|
||||
.mask-box {
|
||||
display: block;
|
||||
}
|
||||
.mask-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -365,6 +365,7 @@ defineExpose({
|
|||
<CloseCircleFilled style="color: #f10215" />
|
||||
</span>
|
||||
<div
|
||||
:class="{ 'cursor-pointer': !tilesIsMove }"
|
||||
class="us-card-box bg-background box-border h-[100%] w-[100%] min-w-[50px] px-2 py-2"
|
||||
@click="goPage(item)"
|
||||
>
|
||||
|
|
@ -411,7 +412,7 @@ defineExpose({
|
|||
user-select: none;
|
||||
flex-direction: column;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #ecf1f3;
|
||||
border: 1px solid hsl(var(--border));
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
|
|||
|
|
@ -88,6 +88,6 @@ defineExpose({
|
|||
.card-name {
|
||||
font-weight: 500;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -613,7 +613,7 @@ const formState = reactive({
|
|||
<CloseCircleFilled style="color: #f10215" />
|
||||
</span>
|
||||
<div
|
||||
:class="{ 'cursor-pointer': !tilesIsMove }"
|
||||
:class="{ 'cursor-pointer': !tilesIsMove && !item.isResize }"
|
||||
class="us-card-box bg-background box-border h-[100%] w-[100%] px-4 py-2"
|
||||
@click="goPage(item)"
|
||||
>
|
||||
|
|
@ -692,7 +692,6 @@ const formState = reactive({
|
|||
}"
|
||||
:draggable="haveItem(item.name)"
|
||||
class="ctrl-box bg-background relative"
|
||||
@click="addTiles(item.name)"
|
||||
@drag="drag"
|
||||
@dragend="dragend($event)"
|
||||
@dragstart="dragstart($event, item)"
|
||||
|
|
@ -714,10 +713,13 @@ const formState = reactive({
|
|||
<div
|
||||
v-for="item in componentsInfo.slice(22, 34)"
|
||||
:key="item.name"
|
||||
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||
:class="{
|
||||
'active pointer-events-none !cursor-no-drop': haveItem(
|
||||
item.name,
|
||||
),
|
||||
}"
|
||||
class="ctrl-box bg-background"
|
||||
draggable="true"
|
||||
@click="addTiles(item.name)"
|
||||
@drag="drag"
|
||||
@dragend="dragend"
|
||||
@dragstart="dragstart($event, item)"
|
||||
|
|
@ -727,7 +729,7 @@ const formState = reactive({
|
|||
</div>
|
||||
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||
<Checkbox
|
||||
:checked="selectTilseArr.includes(item.name)"
|
||||
:checked="haveItem(item.name)"
|
||||
:value="item.name"
|
||||
class="absolute bottom-0 right-1"
|
||||
/>
|
||||
|
|
@ -739,10 +741,13 @@ const formState = reactive({
|
|||
<div
|
||||
v-for="item in componentsInfo.slice(34, 56)"
|
||||
:key="item.name"
|
||||
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||
:class="{
|
||||
'active pointer-events-none !cursor-no-drop': haveItem(
|
||||
item.name,
|
||||
),
|
||||
}"
|
||||
class="ctrl-box bg-background"
|
||||
draggable="true"
|
||||
@click="addTiles(item.name)"
|
||||
@drag="drag"
|
||||
@dragend="dragend"
|
||||
@dragstart="dragstart($event, item)"
|
||||
|
|
@ -752,7 +757,7 @@ const formState = reactive({
|
|||
</div>
|
||||
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||
<Checkbox
|
||||
:checked="selectTilseArr.includes(item.name)"
|
||||
:checked="haveItem(item.name)"
|
||||
:value="item.name"
|
||||
class="absolute bottom-0 right-1"
|
||||
/>
|
||||
|
|
@ -764,10 +769,13 @@ const formState = reactive({
|
|||
<div
|
||||
v-for="item in componentsInfo.slice(56, 75)"
|
||||
:key="item.name"
|
||||
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||
:class="{
|
||||
'active pointer-events-none !cursor-no-drop': haveItem(
|
||||
item.name,
|
||||
),
|
||||
}"
|
||||
class="ctrl-box bg-background"
|
||||
draggable="true"
|
||||
@click="addTiles(item.name)"
|
||||
@drag="drag"
|
||||
@dragend="dragend"
|
||||
@dragstart="dragstart($event, item)"
|
||||
|
|
@ -777,7 +785,7 @@ const formState = reactive({
|
|||
</div>
|
||||
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||
<Checkbox
|
||||
:checked="selectTilseArr.includes(item.name)"
|
||||
:checked="haveItem(item.name)"
|
||||
:value="item.name"
|
||||
class="absolute bottom-0 right-1"
|
||||
/>
|
||||
|
|
@ -789,10 +797,13 @@ const formState = reactive({
|
|||
<div
|
||||
v-for="item in componentsInfo.slice(75, 101)"
|
||||
:key="item.name"
|
||||
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||
:class="{
|
||||
'active pointer-events-none !cursor-no-drop': haveItem(
|
||||
item.name,
|
||||
),
|
||||
}"
|
||||
class="ctrl-box bg-background"
|
||||
draggable="true"
|
||||
@click="addTiles(item.name)"
|
||||
@drag="drag"
|
||||
@dragend="dragend"
|
||||
@dragstart="dragstart($event, item)"
|
||||
|
|
@ -802,7 +813,7 @@ const formState = reactive({
|
|||
</div>
|
||||
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||
<Checkbox
|
||||
:checked="selectTilseArr.includes(item.name)"
|
||||
::checked="haveItem(item.name)"
|
||||
:value="item.name"
|
||||
class="absolute bottom-0 right-1"
|
||||
/>
|
||||
|
|
@ -814,10 +825,13 @@ const formState = reactive({
|
|||
<div
|
||||
v-for="item in componentsInfo.slice(101, 102)"
|
||||
:key="item.name"
|
||||
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||
:class="{
|
||||
'active pointer-events-none !cursor-no-drop': haveItem(
|
||||
item.name,
|
||||
),
|
||||
}"
|
||||
class="ctrl-box bg-background"
|
||||
draggable="true"
|
||||
@click="addTiles(item.name)"
|
||||
@drag="drag"
|
||||
@dragend="dragend"
|
||||
@dragstart="dragstart($event, item)"
|
||||
|
|
@ -827,7 +841,7 @@ const formState = reactive({
|
|||
</div>
|
||||
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||
<Checkbox
|
||||
:checked="selectTilseArr.includes(item.name)"
|
||||
:checked="haveItem(item.name)"
|
||||
:value="item.name"
|
||||
class="absolute bottom-0 right-1"
|
||||
/>
|
||||
|
|
@ -839,10 +853,13 @@ const formState = reactive({
|
|||
<div
|
||||
v-for="item in componentsInfo.slice(102, 127)"
|
||||
:key="item.name"
|
||||
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||
:class="{
|
||||
'active pointer-events-none !cursor-no-drop': haveItem(
|
||||
item.name,
|
||||
),
|
||||
}"
|
||||
class="ctrl-box bg-background"
|
||||
draggable="true"
|
||||
@click="addTiles(item.name)"
|
||||
@drag="drag"
|
||||
@dragend="dragend"
|
||||
@dragstart="dragstart($event, item)"
|
||||
|
|
@ -852,7 +869,7 @@ const formState = reactive({
|
|||
</div>
|
||||
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||
<Checkbox
|
||||
:checked="selectTilseArr.includes(item.name)"
|
||||
:checked="haveItem(item.name)"
|
||||
:value="item.name"
|
||||
class="absolute bottom-0 right-1"
|
||||
/>
|
||||
|
|
@ -952,7 +969,7 @@ const formState = reactive({
|
|||
user-select: none;
|
||||
flex-direction: column;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #ecf1f3;
|
||||
border: 1px solid hsl(var(--border));
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
|
|||
|
|
@ -26,6 +26,8 @@ import {
|
|||
VxeUI,
|
||||
} from 'vxe-table';
|
||||
|
||||
import { groupList } from './tiles';
|
||||
|
||||
const wrapperCol = { style: { width: '100px' } };
|
||||
watch(
|
||||
() => preferences.theme.mode,
|
||||
|
|
@ -38,24 +40,13 @@ watch(
|
|||
},
|
||||
);
|
||||
interface RowVO {
|
||||
code: string;
|
||||
name: string;
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
const selectRow = ref<null | RowVO>(null);
|
||||
|
||||
const tableData = ref<RowVO[]>([
|
||||
{ code: 'xzczcz', name: '个人工作台' },
|
||||
{ code: 'xzczcz', name: '综合行政' },
|
||||
{ code: 'xzczcz', name: '经营管理' },
|
||||
{ code: 'xzczcz', name: '安全生产' },
|
||||
{ code: 'xzczcz', name: '勘探开发' },
|
||||
{ code: 'xzczcz', name: '数据管理' },
|
||||
{ code: 'xzczcz', name: '中心工作' },
|
||||
{ code: 'xzczcz', name: '总部系统' },
|
||||
{ code: 'xzczcz', name: '功能模块' },
|
||||
{ code: 'xzczcz', name: '工程院系统' },
|
||||
]);
|
||||
const tableData = ref<RowVO[]>(groupList);
|
||||
|
||||
const tableRef = ref<VxeTableInstance<RowVO>>();
|
||||
|
||||
|
|
@ -165,7 +156,7 @@ const templateClickNum = (index: number) => {
|
|||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-center gap-3 pb-2">
|
||||
<div class="mt-3 flex justify-center gap-14 pb-2">
|
||||
<div class="c-item flex flex-col items-center">
|
||||
<div class="s-t my-3">请选择业务域</div>
|
||||
<Form :wrapper-col="wrapperCol" layout="inline">
|
||||
|
|
@ -204,8 +195,8 @@ const templateClickNum = (index: number) => {
|
|||
</vxe-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="code" title="业务域编码" width="120" />
|
||||
<vxe-column field="name" title="业务域名称" width="120" />
|
||||
<vxe-column field="value" title="业务域编码" width="140" />
|
||||
<vxe-column field="label" title="业务域名称" width="140" />
|
||||
</vxe-table>
|
||||
<div
|
||||
v-if="nowCurrent == 0"
|
||||
|
|
@ -408,7 +399,7 @@ const templateClickNum = (index: number) => {
|
|||
<style scoped lang="scss">
|
||||
.c-item {
|
||||
border: 1px solid #ccc;
|
||||
flex: 0.3333;
|
||||
flex: 0.3;
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue