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-24 18:57:53 +08:00
parent 9e07cf0214
commit 7dd0463161
2 changed files with 404 additions and 262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,6 @@ import {
Form,
FormItem,
Input,
InputGroup,
InputSearch,
Modal,
Popover,
@ -500,13 +499,13 @@ const formState = reactive({
</div>
</template>
<template #content>
<InputGroup compact>
<div class="shop-seach flex items-center">
<Select v-model:value="shopFlotter">
<SelectOption value="1">全部应用磁贴</SelectOption>
<SelectOption value="2">Option2</SelectOption>
</Select>
<InputSearch placeholder="" style="width: 200px" />
</InputGroup>
<InputSearch placeholder="" />
</div>
<div class="shop-box">
<!-- <CheckboxGroup v-model:value="selectTilseArr" style="width: 100%"> -->
<Collapse v-model:active-key="activeKeyArr" style="width: 100%">
@ -870,4 +869,10 @@ const formState = reactive({
background: white !important;
}
}
.shop-seach :deep(button) {
display: flex;
align-items: center;
justify-content: center;
}
</style>

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

@ -1,305 +1,442 @@
<template>
<div class="w-[100%] px-2 bg-background mt-3 min-w-[1200px]">
<div class="w-[70%] mx-auto pt-3">
<Steps :current="nowCurrent" :items="[
{
title: '选择业务域',
},
{
title: '选择磁贴模板',
},
{
title: '填写磁贴信息',
},
]"></Steps>
</div>
<div class="flex gap-3 mt-3 pb-2 justify-center">
<div class="c-item flex flex-col items-center">
<div class="s-t my-3">请选择业务域</div>
<Form layout="inline" :wrapperCol="wrapperCol">
<FormItem label="名称">
<Input placeholder="请输入"></Input>
</FormItem>
<FormItem label="编码">
<Input placeholder="请输入"></Input>
</FormItem>
<Button type="primary">查询</Button>
</Form>
<div class="text-xs flex gap-1">
<InfoCircleFilled />
<div>如果找不到相关业务，请<Button type="link">点击此处</Button>新建</div>
</div>
<vxe-table border ref="tableRef" height="70%" :data="tableData" :radio-config="{ highlight: true }"
@cell-click="cellClickEvent" @radio-change="radioChangeEvent">
<vxe-column type="radio" width="60">
<template #header>
<vxe-button mode="text" @click="clearRadioRowEevnt" :disabled="!selectRow">取消</vxe-button>
</template>
</vxe-column>
<vxe-column field="code" title="业务域编码" width="120"></vxe-column>
<vxe-column field="name" title="业务域名称" width="120"></vxe-column>
</vxe-table>
<div class="flex justify-end w-[100%] px-3 py-3" v-if="nowCurrent == 0">
<Button type="primary" size="large" shape="circle" @click="selectTemplate(1)">
<template #icon>
<ArrowRightOutlined />
</template>
</Button>
</div>
<!-- <ArrowLeftOutlined /> -->
</div>
<div class="c-item flex flex-col items-center" v-show="nowCurrent >= 1">
<div class="s-t my-3">请选择磁贴模板</div>
<div class="flex flex-wrap h-[100%] gap-3 justify-center ">
<div class="template-item flex flex-col justify-center gap-1 items-center"
:class="{ 'active': templateNum == index }" v-for="(item, index) in templateList" :key="index"
@click="templateClickNum(index)">
<img :src="'/xbyt/' + item.img" class="w-[70px] h-[70px] object-contain">
<div class="text-xs">{{ item.name }}</div>
<div class="active-icon" v-if="templateNum == index">
<CheckCircleFilled style="color: hsl(var(--primary));font-size: 20px;"/>
</div>
</div>
<div class="opacity-0 template-item flex flex-col justify-center gap-1 items-center" style="cursor: default;"
v-if="templateList.length % 3 == 2"></div>
<template v-if="templateList.length % 3 == 1">
<div class="opacity-0 template-item flex flex-col justify-center gap-1 items-center" style="cursor: default;"></div>
<div class="opacity-0 template-item flex flex-col justify-center gap-1 items-center" style="cursor: default;"></div>
</template>
</div>
<div class="flex justify-between w-[100%] px-3 py-3" v-if="nowCurrent == 1">
<Button type="primary" size="large" shape="circle" @click="selectTemplate(0)">
<template #icon>
<ArrowLeftOutlined />
</template>
</Button>
<Button type="primary" size="large" shape="circle" @click="selectTemplate(2)">
<template #icon>
<ArrowRightOutlined />
</template>
</Button>
</div>
</div>
<div class="c-item flex flex-col items-center" v-show="nowCurrent >= 2">
<div class="s-t my-3">请填写磁贴信息</div>
<div class="form-box">
<Form :wrapperCol="{ style: { width: '300px' } }" :labelCol="{ style: { width: '80px' } }">
<FormItem label="业务域" :rules="[{ required: true, message: '请输入业务域' }]">
<Input placeholder="请输入"></Input>
</FormItem>
<FormItem label="适用范围" :rules="[{ required: true, message: '请选择适用范围' }]">
<Select placeholder="请选择"></Select>
</FormItem>
<FormItem label="编码" :rules="[{ required: true, message: '请输入编码' }]">
<Input placeholder="请输入"></Input>
</FormItem>
<FormItem label="标题" :rules="[{ required: true, message: '请输入标题' }]">
<Input placeholder="请输入"></Input>
</FormItem>
<FormItem label="链接地址" :rules="[{ required: true, message: '请输入链接地址' }]">
<Input placeholder="请输入"></Input>
</FormItem>
<FormItem label="数据源">
<Input placeholder="请输入"></Input>
</FormItem>
<FormItem label="磁贴大小">
<div class="flex items-center gap-4">
<div class="flex items-center">
宽：
<Select>
<SelectOption value="1">1</SelectOption>
<SelectOption value="2">2</SelectOption>
</Select>
</div>
×
<div class="flex items-center">
高：
<Select>
<SelectOption value="1">1</SelectOption>
<SelectOption value="2">2</SelectOption>
</Select>
</div>
</div>
</FormItem>
<FormItem label="图标" :rules="[{ required: true, message: '请上传图标' }]">
<Input placeholder="请输入"></Input>
</FormItem>
<FormItem label="打开方式">
<Select placeholder="请选择"></Select>
</FormItem>
<FormItem label="作者" :rules="[{ required: true, message: '请输入作者' }]">
<Input placeholder="请输入"></Input>
</FormItem>
<FormItem label="联系方式" :rules="[{ required: true, message: '请输入联系方式' }]">
<div>
<Input placeholder="请输入"></Input>
<Checkbox>经过授权才可使用</Checkbox>
</div>
</FormItem>
<FormItem label="描述">
<Textarea placeholder="请输入"></Textarea>
</FormItem>
</Form>
</div>
<div class="flex justify-between w-[100%] px-3 py-3" v-if="nowCurrent == 2">
<Button type="primary" size="large" shape="circle" @click="selectTemplate(1)">
<template #icon>
<ArrowLeftOutlined />
</template>
</Button>
<Button type="primary" size="large" shape="circle" @click="selectTemplate(3)">
<template #icon>
<ArrowRightOutlined />
</template>
</Button>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { Steps } from 'ant-design-vue';
import { InfoCircleFilled, ArrowRightOutlined, ArrowLeftOutlined,CheckCircleFilled } from '@ant-design/icons-vue';
import { type VxeGridProps, VxeUI } from 'vxe-table'
import { VXETable, type VxeTableInstance, type VxeTableEvents } from 'vxe-table'
import { ref, watch } from 'vue';
import { Button, Form, FormItem, Input, Select, Card, Pagination, Textarea, Checkbox } from 'ant-design-vue';
import { preferences } from '@vben/preferences';
import {
ArrowLeftOutlined,
ArrowRightOutlined,
CheckCircleFilled,
InfoCircleFilled,
} from '@ant-design/icons-vue';
import {
Button,
Checkbox,
Form,
FormItem,
Input,
Select,
Steps,
Textarea,
} from 'ant-design-vue';
import {
VXETable,
type VxeTableEvents,
type VxeTableInstance,
VxeUI,
} from 'vxe-table';
const wrapperCol = { style: { width: '100px' } };
watch(() => preferences.theme.mode, (n: any) => {
VxeUI.setTheme(n)
},{
watch(
() => preferences.theme.mode,
(n: any) => {
VxeUI.setTheme(n);
},
{
deep: true,
immediate: true
})
immediate: true,
},
);
interface RowVO {
code: string
name: string
code: string;
name: string;
}
const selectRow = ref<RowVO | null>(null)
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: "工程院系统" },
])
{ 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>>();
const cellClickEvent: VxeTableEvents.CellClick<RowVO> = () => {
console.log('单元格点击事件')
}
console.log('单元格点击事件');
};
const radioChangeEvent: VxeTableEvents.RadioChange<RowVO> = ({ row }) => {
selectRow.value = row
console.log('单选事件')
}
selectRow.value = row;
console.log('单选事件');
};
const setSelectRow = (index: number) => {
const $table = tableRef.value
if ($table) {
$table.setRadioRow(tableData.value[index])
}
}
const $table = tableRef.value;
if ($table) {
$table.setRadioRow(tableData.value[index]);
}
};
const clearRadioRowEevnt = () => {
const $table = tableRef.value
if ($table) {
selectRow.value = null
$table.clearRadioRow()
}
}
const $table = tableRef.value;
if ($table) {
selectRow.value = null;
$table.clearRadioRow();
}
};
const getRadioEvent = () => {
const $table = tableRef.value
if ($table) {
const currRow = $table.getRadioRecord()
VXETable.modal.alert(JSON.stringify(currRow))
}
}
const templateList = [{
const $table = tableRef.value;
if ($table) {
const currRow = $table.getRadioRecord();
VXETable.modal.alert(JSON.stringify(currRow));
}
};
const templateList = [
{
img: 'AUTO_1612159241967_C车辆调度.png',
name: '多媒体'
}, {
name: '多媒体',
},
{
img: 'AUTO_1612160044533_C市场管理.png',
name: '柱状图'
}, {
name: '柱状图',
},
{
img: 'AUTO_1612174485058_C投资共享.png',
name: '卡片'
}, {
name: '卡片',
},
{
img: 'AUTO_1612175576303_C费用报销.png',
name: '自定义'
}, {
name: '自定义',
},
{
img: 'AUTO_1612175837663_C设备管理.png',
name: '仪表盘'
}, {
name: '仪表盘',
},
{
img: 'AUTO_1612176568856_C财务管理.png',
name: '折线图'
}, {
name: '折线图',
},
{
img: 'AUTO_1612176967032_C土地信息.png',
name: '列表'
}, {
name: '列表',
},
{
img: 'AUTO_1612236164722_C门户网站.png',
name: '数字'
}, {
name: '数字',
},
{
img: 'AUTO_1612251274093_C集输防腐.png',
name: '饼图'
}, {
name: '饼图',
},
{
img: 'AUTO_1612254108987_C新井日报.png',
name: '快捷入口'
}, {
name: '快捷入口',
},
{
img: 'AUTO_1612254711440_C单井曲线.png',
name: '文本'
}]
name: '文本',
},
];
let nowCurrent = ref(0);
let selectTemplate = (index: number) => {
nowCurrent.value = index
}
const nowCurrent = ref(0);
const selectTemplate = (index: number) => {
nowCurrent.value = index;
};
let templateNum = ref(0);
let templateClickNum = (index: number) => {
templateNum.value = index
}
const templateNum = ref(0);
const templateClickNum = (index: number) => {
templateNum.value = index;
};
</script>
<template>
<div class="bg-background mt-3 w-[100%] min-w-[1200px] px-2">
<div class="mx-auto w-[70%] pt-3">
<Steps
:current="nowCurrent"
:items="[
{
title: '选择业务域',
},
{
title: '选择磁贴模板',
},
{
title: '填写磁贴信息',
},
]"
/>
</div>
<div class="mt-3 flex justify-center gap-3 pb-2">
<div class="c-item flex flex-col items-center">
<div class="s-t my-3">请选择业务域</div>
<Form :wrapper-col="wrapperCol" layout="inline">
<FormItem label="名称">
<Input placeholder="请输入" />
</FormItem>
<FormItem label="编码">
<Input placeholder="请输入" />
</FormItem>
<Button type="primary">查询</Button>
</Form>
<div class="flex gap-1 text-xs">
<InfoCircleFilled />
<div>
如果找不到相关业务，请<Button type="link">点击此处</Button>新建
</div>
</div>
<vxe-table
ref="tableRef"
:data="tableData"
:radio-config="{ highlight: true }"
border
height="70%"
@cell-click="cellClickEvent"
@radio-change="radioChangeEvent"
>
<vxe-column type="radio" width="60">
<template #header>
<vxe-button
:disabled="!selectRow"
mode="text"
@click="clearRadioRowEevnt"
>
取消
</vxe-button>
</template>
</vxe-column>
<vxe-column field="code" title="业务域编码" width="120" />
<vxe-column field="name" title="业务域名称" width="120" />
</vxe-table>
<div
v-if="nowCurrent == 0"
class="next-box flex w-[100%] justify-end px-3 py-3"
>
<Button
shape="circle"
size="large"
type="primary"
@click="selectTemplate(1)"
>
<template #icon>
<ArrowRightOutlined />
</template>
</Button>
</div>
<!-- <ArrowLeftOutlined /> -->
</div>
<div v-show="nowCurrent >= 1" class="c-item flex flex-col items-center">
<div class="s-t my-3">请选择磁贴模板</div>
<div class="flex h-[100%] flex-wrap justify-center gap-3">
<div
v-for="(item, index) in templateList"
:key="index"
:class="{ active: templateNum == index }"
class="template-item flex flex-col items-center justify-center gap-1"
@click="templateClickNum(index)"
>
<img
:src="`/xbyt/${item.img}`"
class="h-[70px] w-[70px] object-contain"
/>
<div class="text-xs">{{ item.name }}</div>
<div v-if="templateNum == index" class="active-icon">
<CheckCircleFilled
style="color: hsl(var(--primary)); font-size: 20px"
/>
</div>
</div>
<div
v-if="templateList.length % 3 == 2"
class="template-item flex flex-col items-center justify-center gap-1 opacity-0"
style="cursor: default"
></div>
<template v-if="templateList.length % 3 == 1">
<div
class="template-item flex flex-col items-center justify-center gap-1 opacity-0"
style="cursor: default"
></div>
<div
class="template-item flex flex-col items-center justify-center gap-1 opacity-0"
style="cursor: default"
></div>
</template>
</div>
<div
v-if="nowCurrent == 1"
class="next-box flex w-[100%] justify-between px-3 py-3"
>
<Button
shape="circle"
size="large"
type="primary"
@click="selectTemplate(0)"
>
<template #icon>
<ArrowLeftOutlined />
</template>
</Button>
<Button
shape="circle"
size="large"
type="primary"
@click="selectTemplate(2)"
>
<template #icon>
<ArrowRightOutlined />
</template>
</Button>
</div>
</div>
<div v-show="nowCurrent >= 2" class="c-item flex flex-col items-center">
<div class="s-t my-3">请填写磁贴信息</div>
<div class="form-box">
<Form
:label-col="{ style: { width: '80px' } }"
:wrapper-col="{ style: { width: '300px' } }"
>
<FormItem
:rules="[{ required: true, message: '请输入业务域' }]"
label="业务域"
>
<Input placeholder="请输入" />
</FormItem>
<FormItem
:rules="[{ required: true, message: '请选择适用范围' }]"
label="适用范围"
>
<Select placeholder="请选择" />
</FormItem>
<FormItem
:rules="[{ required: true, message: '请输入编码' }]"
label="编码"
>
<Input placeholder="请输入" />
</FormItem>
<FormItem
:rules="[{ required: true, message: '请输入标题' }]"
label="标题"
>
<Input placeholder="请输入" />
</FormItem>
<FormItem
:rules="[{ required: true, message: '请输入链接地址' }]"
label="链接地址"
>
<Input placeholder="请输入" />
</FormItem>
<FormItem label="数据源">
<Input placeholder="请输入" />
</FormItem>
<FormItem label="磁贴大小">
<div class="flex items-center gap-4">
<div class="flex items-center">
宽：
<Select>
<SelectOption value="1">1</SelectOption>
<SelectOption value="2">2</SelectOption>
</Select>
</div>
×
<div class="flex items-center">
高：
<Select>
<SelectOption value="1">1</SelectOption>
<SelectOption value="2">2</SelectOption>
</Select>
</div>
</div>
</FormItem>
<FormItem
:rules="[{ required: true, message: '请上传图标' }]"
label="图标"
>
<Input placeholder="请输入" />
</FormItem>
<FormItem label="打开方式">
<Select placeholder="请选择" />
</FormItem>
<FormItem
:rules="[{ required: true, message: '请输入作者' }]"
label="作者"
>
<Input placeholder="请输入" />
</FormItem>
<FormItem
:rules="[{ required: true, message: '请输入联系方式' }]"
label="联系方式"
>
<div>
<Input placeholder="请输入" />
<Checkbox>经过授权才可使用</Checkbox>
</div>
</FormItem>
<FormItem label="描述">
<Textarea placeholder="请输入" />
</FormItem>
</Form>
</div>
<div
v-if="nowCurrent == 2"
class="next-box flex w-[100%] justify-between px-3 py-3"
>
<Button
shape="circle"
size="large"
type="primary"
@click="selectTemplate(1)"
>
<template #icon>
<ArrowLeftOutlined />
</template>
</Button>
<Button
shape="circle"
size="large"
type="primary"
@click="selectTemplate(3)"
>
<template #icon>
<ArrowRightOutlined />
</template>
</Button>
</div>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.c-item {
border: 1px solid #ccc;
flex: .3333;
height: calc(100vh - 150px);
border: 1px solid #ccc;
flex: 0.3333;
height: calc(100vh - 150px);
}
.template-item {
border: 1px solid #ccc;
width: 30%;
cursor: pointer;
position: relative;
border: 1px solid #ccc;
width: 30%;
cursor: pointer;
position: relative;
.active-icon {
position: absolute;
right: 3px;
top: 3px;
}
.active-icon {
position: absolute;
right: 3px;
top: 3px;
}
&.active {
border: 1px solid hsl(var(--primary));
}
&.active {
border: 1px solid hsl(var(--primary));
}
}
.form-box {
max-height: 90%;
overflow-y: auto;
max-height: 90%;
overflow-y: auto;
}
</style>
.next-box :deep(button) {
display: flex;
align-items: center;
justify-content: center;
}
</style>