z9130
/
pansoft-plrl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式调整

This commit is contained in:
hujiale 2024-10-25 12:39:28 +08:00
parent 5c778a7d0e
commit 56dede0932
8 changed files with 337 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/web-test/src/app.vue
View File

@ -49,3 +49,25 @@ const tokenTheme = computed(() => {
</App> </App>
</ConfigProvider> </ConfigProvider>
</template> </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>

46
apps/web-test/src/layouts/global-search/global-search.vue
View File

@ -11,6 +11,7 @@ import {
Search, Search,
} from '@vben/icons'; } from '@vben/icons';
import { $t } from '@vben/locales'; import { $t } from '@vben/locales';
import { usePreferences } from '@vben/preferences';
import { isWindowsOs } from '@vben/utils'; import { isWindowsOs } from '@vben/utils';
import { useVbenModal } from '@vben-core/popup-ui'; import { useVbenModal } from '@vben-core/popup-ui';
@ -87,10 +88,7 @@ onMounted(() => {
}); });
}); });
import { usePreferences } from '@vben/preferences'; const { sidebarCollapsed } = usePreferences();
const {sidebarCollapsed } = usePreferences();
</script> </script>
<template> <template>
@ -99,8 +97,12 @@ const {sidebarCollapsed } = usePreferences();
<template #title> <template #title>
<div class="flex items-center"> <div class="flex items-center">
<Search class="text-muted-foreground mr-2 size-4" /> <Search class="text-muted-foreground mr-2 size-4" />
<input ref="searchInputRef" v-model="keyword" :placeholder="$t('widgets.search.searchNavigate')" <input
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" /> 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> </div>
</template> </template>
@ -123,22 +125,36 @@ const {sidebarCollapsed } = usePreferences();
</div> </div>
</template> </template>
</Modal> </Modal>
<div v-if="!sidebarCollapsed" <div
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" v-if="!sidebarCollapsed"
@click="toggleOpen()"> class="group flex h-8 cursor-pointer items-center gap-3 rounded-2xl border-none bg-none px-2 py-0.5 outline-none"
<Search class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100" /> @click="toggleOpen()"
<span class="text-muted-foreground group-hover:text-foreground hidden text-xs duration-300 md:block"> >
<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') }} {{ $t('widgets.search.title') }}
</span> </span>
<span v-if="enableShortcutKey" <span
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"> 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' : '⌘' }} {{ isWindowsOs() ? 'Ctrl' : '⌘' }}
<kbd>K</kbd> <kbd>K</kbd>
</span> </span>
<span v-else></span> <span v-else></span>
</div> </div>
<div v-else class="rounded-full w100% flex justify-center cursor-pointer" @click="toggleOpen()"> <div
<Search class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100" /> 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>
</div> </div>
</template> </template>

10
apps/web-test/src/layouts/user/layout.vue
View File

@ -57,11 +57,11 @@ const PRESET = computed((): PresetItem[] => [
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'),

415
apps/web-test/src/views/dashboard/home/components/CardTiles/index.vue
View File

@ -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"> <script setup lang="ts">
import { ref, toRefs, reactive } from 'vue'; import { reactive, ref, toRefs } from 'vue';
import { ExpandOutlined } from '@ant-design/icons-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 {
import { tilesList } from '../../tiles' Button,
const props = defineProps({ Card,
type: { Checkbox,
type: String, Form,
default: '' FormItem,
}, Input,
list: { Modal,
type: Object, Pagination,
default: [] Select,
} SelectOption,
}) Textarea,
} from 'ant-design-vue';
let { list, type } = toRefs(props); import { tilesList } from '../../tiles';
for (let i = 0; i < tilesList.length; i++) {
let obj: any = {} const props = defineProps({
obj.name = tilesList[i]?.name; type: {
obj.url = tilesList[i]?.name2; type: String,
obj.work = '经营管理'; default: '',
obj.code = tilesList[i]?.name1.split('.')[0]; },
list.value.push(obj); list: {
obj = null 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 = [ const options2 = [
{ {
value: 'all', value: 'all',
label: '全部', label: '全部',
}, },
] ];
let current = ref(1); const current = ref(1);
let editcardShow = ref(false) const editcardShow = ref(false);
let openInfo = (info) => { const openInfo = (info) => {
editcardShow.value = true; editcardShow.value = true;
editForm.code = info.code; editForm.code = info.code;
editForm.title = info.name; editForm.title = info.name;
} };
let editForm = reactive({ let editForm = reactive({
domains: '', domains: '',
scope: '', scope: '',
code: "", code: '',
title: '', title: '',
dataSources: '', dataSources: '',
size: { size: {
w: '', w: '',
h: '' h: '',
}, },
icon: '', icon: '',
openType: '', openType: '',
author: '', author: '',
number: '', number: '',
link: 'www.baidu.com', link: 'www.baidu.com',
auth: true, auth: true,
doc: '' doc: '',
});
}) const labelCol = { style: { width: '100px', margin: '0 0 10px 0' } };
const labelCol = { style: { width: '100px',margin: '0 0 10px 0' } };
const wrapperCol = { style: { width: '150px' } }; const wrapperCol = { style: { width: '150px' } };
const itemWrapperCol = { style: { width: '415px' } }; const itemWrapperCol = { style: { width: '415px' } };
</script> </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"> <style scoped lang="scss">
.tiles-list { .tiles-list {
border-top: 1px solid #ddd; border-top: 1px solid hsl(var(--border));
} }
.card-bt-box { .card-bt-box {
border-top: 1px solid #ddd; border-top: 1px solid hsl(var(--border));
} }
.card-box:hover { .card-box:hover {
.mask-box { .mask-box {
display: block; display: block;
} }
} }
</style> </style>

3
apps/web-test/src/views/dashboard/home/components/GridGroup/index.vue
View File

@ -347,6 +347,7 @@ defineExpose({
<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%] min-w-[50px] px-2 py-2" class="us-card-box bg-background box-border h-[100%] w-[100%] min-w-[50px] px-2 py-2"
@click="goPage(item)" @click="goPage(item)"
> >
@ -393,7 +394,7 @@ defineExpose({
user-select: none; user-select: none;
flex-direction: column; flex-direction: column;
border-radius: 10px; border-radius: 10px;
border: 1px solid #ecf1f3; border: 1px solid hsl(var(--border));
position: relative; position: relative;
cursor: pointer; cursor: pointer;

2
apps/web-test/src/views/dashboard/home/components/Output5/index.vue
View File

@ -80,6 +80,6 @@ defineExpose({
.card-name { .card-name {
font-weight: 500; font-weight: 500;
padding: 5px 0; padding: 5px 0;
border-bottom: 1px solid #ddd; border-bottom: 1px solid hsl(var(--border));
} }
</style> </style>

59
apps/web-test/src/views/dashboard/home/index.vue
View File

@ -538,7 +538,7 @@ const formState = reactive({
<CloseCircleFilled style="color: #f10215" /> <CloseCircleFilled style="color: #f10215" />
</span> </span>
<div <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" class="us-card-box bg-background box-border h-[100%] w-[100%] px-4 py-2"
@click="goPage(item)" @click="goPage(item)"
> >
@ -616,7 +616,6 @@ const formState = reactive({
}" }"
:draggable="haveItem(item.name)" :draggable="haveItem(item.name)"
class="ctrl-box bg-background relative" class="ctrl-box bg-background relative"
@click="addTiles(item.name)"
@drag="drag" @drag="drag"
@dragend="dragend($event)" @dragend="dragend($event)"
@dragstart="dragstart($event, item)" @dragstart="dragstart($event, item)"
@ -638,10 +637,13 @@ const formState = reactive({
<div <div
v-for="item in componentsInfo.slice(22, 34)" v-for="item in componentsInfo.slice(22, 34)"
:key="item.name" :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" class="ctrl-box bg-background"
draggable="true" draggable="true"
@click="addTiles(item.name)"
@drag="drag" @drag="drag"
@dragend="dragend" @dragend="dragend"
@dragstart="dragstart($event, item)" @dragstart="dragstart($event, item)"
@ -651,7 +653,7 @@ const formState = reactive({
</div> </div>
<img :src="`/xbyt/${item.name2}`" alt="" /> <img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox <Checkbox
:checked="selectTilseArr.includes(item.name)" :checked="haveItem(item.name)"
:value="item.name" :value="item.name"
class="absolute bottom-0 right-1" class="absolute bottom-0 right-1"
/> />
@ -663,10 +665,13 @@ const formState = reactive({
<div <div
v-for="item in componentsInfo.slice(34, 56)" v-for="item in componentsInfo.slice(34, 56)"
:key="item.name" :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" class="ctrl-box bg-background"
draggable="true" draggable="true"
@click="addTiles(item.name)"
@drag="drag" @drag="drag"
@dragend="dragend" @dragend="dragend"
@dragstart="dragstart($event, item)" @dragstart="dragstart($event, item)"
@ -676,7 +681,7 @@ const formState = reactive({
</div> </div>
<img :src="`/xbyt/${item.name2}`" alt="" /> <img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox <Checkbox
:checked="selectTilseArr.includes(item.name)" :checked="haveItem(item.name)"
:value="item.name" :value="item.name"
class="absolute bottom-0 right-1" class="absolute bottom-0 right-1"
/> />
@ -688,10 +693,13 @@ const formState = reactive({
<div <div
v-for="item in componentsInfo.slice(56, 75)" v-for="item in componentsInfo.slice(56, 75)"
:key="item.name" :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" class="ctrl-box bg-background"
draggable="true" draggable="true"
@click="addTiles(item.name)"
@drag="drag" @drag="drag"
@dragend="dragend" @dragend="dragend"
@dragstart="dragstart($event, item)" @dragstart="dragstart($event, item)"
@ -701,7 +709,7 @@ const formState = reactive({
</div> </div>
<img :src="`/xbyt/${item.name2}`" alt="" /> <img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox <Checkbox
:checked="selectTilseArr.includes(item.name)" :checked="haveItem(item.name)"
:value="item.name" :value="item.name"
class="absolute bottom-0 right-1" class="absolute bottom-0 right-1"
/> />
@ -713,10 +721,13 @@ const formState = reactive({
<div <div
v-for="item in componentsInfo.slice(75, 101)" v-for="item in componentsInfo.slice(75, 101)"
:key="item.name" :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" class="ctrl-box bg-background"
draggable="true" draggable="true"
@click="addTiles(item.name)"
@drag="drag" @drag="drag"
@dragend="dragend" @dragend="dragend"
@dragstart="dragstart($event, item)" @dragstart="dragstart($event, item)"
@ -726,7 +737,7 @@ const formState = reactive({
</div> </div>
<img :src="`/xbyt/${item.name2}`" alt="" /> <img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox <Checkbox
:checked="selectTilseArr.includes(item.name)" ::checked="haveItem(item.name)"
:value="item.name" :value="item.name"
class="absolute bottom-0 right-1" class="absolute bottom-0 right-1"
/> />
@ -738,10 +749,13 @@ const formState = reactive({
<div <div
v-for="item in componentsInfo.slice(101, 102)" v-for="item in componentsInfo.slice(101, 102)"
:key="item.name" :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" class="ctrl-box bg-background"
draggable="true" draggable="true"
@click="addTiles(item.name)"
@drag="drag" @drag="drag"
@dragend="dragend" @dragend="dragend"
@dragstart="dragstart($event, item)" @dragstart="dragstart($event, item)"
@ -751,7 +765,7 @@ const formState = reactive({
</div> </div>
<img :src="`/xbyt/${item.name2}`" alt="" /> <img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox <Checkbox
:checked="selectTilseArr.includes(item.name)" :checked="haveItem(item.name)"
:value="item.name" :value="item.name"
class="absolute bottom-0 right-1" class="absolute bottom-0 right-1"
/> />
@ -763,10 +777,13 @@ const formState = reactive({
<div <div
v-for="item in componentsInfo.slice(102, 127)" v-for="item in componentsInfo.slice(102, 127)"
:key="item.name" :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" class="ctrl-box bg-background"
draggable="true" draggable="true"
@click="addTiles(item.name)"
@drag="drag" @drag="drag"
@dragend="dragend" @dragend="dragend"
@dragstart="dragstart($event, item)" @dragstart="dragstart($event, item)"
@ -776,7 +793,7 @@ const formState = reactive({
</div> </div>
<img :src="`/xbyt/${item.name2}`" alt="" /> <img :src="`/xbyt/${item.name2}`" alt="" />
<Checkbox <Checkbox
:checked="selectTilseArr.includes(item.name)" :checked="haveItem(item.name)"
:value="item.name" :value="item.name"
class="absolute bottom-0 right-1" class="absolute bottom-0 right-1"
/> />
@ -876,7 +893,7 @@ const formState = reactive({
user-select: none; user-select: none;
flex-direction: column; flex-direction: column;
border-radius: 10px; border-radius: 10px;
border: 1px solid #ecf1f3; border: 1px solid hsl(var(--border));
position: relative; position: relative;
cursor: pointer; cursor: pointer;

27
apps/web-test/src/views/dashboard/home/register.vue
View File

@ -26,6 +26,8 @@ import {
VxeUI, VxeUI,
} from 'vxe-table'; } from 'vxe-table';
import { groupList } from './tiles';
const wrapperCol = { style: { width: '100px' } }; const wrapperCol = { style: { width: '100px' } };
watch( watch(
() => preferences.theme.mode, () => preferences.theme.mode,
@ -38,24 +40,13 @@ watch(
}, },
); );
interface RowVO { interface RowVO {
code: string; label: string;
name: string; value: string;
} }
const selectRow = ref<null | RowVO>(null); const selectRow = ref<null | RowVO>(null);
const tableData = ref<RowVO[]>([ const tableData = ref<RowVO[]>(groupList);
{ 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 tableRef = ref<VxeTableInstance<RowVO>>(); const tableRef = ref<VxeTableInstance<RowVO>>();
@ -165,7 +156,7 @@ const templateClickNum = (index: number) => {
]" ]"
/> />
</div> </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="c-item flex flex-col items-center">
<div class="s-t my-3">请选择业务域</div> <div class="s-t my-3">请选择业务域</div>
<Form :wrapper-col="wrapperCol" layout="inline"> <Form :wrapper-col="wrapperCol" layout="inline">
@ -204,8 +195,8 @@ const templateClickNum = (index: number) => {
</vxe-button> </vxe-button>
</template> </template>
</vxe-column> </vxe-column>
<vxe-column field="code" title="业务域编码" width="120" /> <vxe-column field="value" title="业务域编码" width="140" />
<vxe-column field="name" title="业务域名称" width="120" /> <vxe-column field="label" title="业务域名称" width="140" />
</vxe-table> </vxe-table>
<div <div
v-if="nowCurrent == 0" v-if="nowCurrent == 0"
@ -408,7 +399,7 @@ const templateClickNum = (index: number) => {
<style scoped lang="scss"> <style scoped lang="scss">
.c-item { .c-item {
border: 1px solid #ccc; border: 1px solid #ccc;
flex: 0.3333; flex: 0.3;
height: calc(100vh - 150px); height: calc(100vh - 150px);
} }