Merge branch 'test' of http://172.19.183.27:3000/z9130/pansoft-plrl into test
This commit is contained in:
commit
c4c68b6f63
|
@ -1,5 +1,5 @@
|
|||
# 应用标题
|
||||
VITE_APP_TITLE=Vben Admin Antd
|
||||
VITE_APP_TITLE=西北油田办公平台
|
||||
|
||||
# 应用命名空间,用于缓存、store等功能的前缀,确保隔离
|
||||
VITE_APP_NAMESPACE=vben-web-antd
|
||||
VITE_APP_NAMESPACE=xbj
|
||||
|
|
|
@ -7,7 +7,7 @@ import { defineOverridesPreferences } from '@vben/preferences';
|
|||
export const overridesPreferences = defineOverridesPreferences({
|
||||
// overrides
|
||||
app: {
|
||||
name: import.meta.env.VITE_APP_TITLE,
|
||||
name: '西北油田办公平台',
|
||||
accessMode: 'frontend',
|
||||
authPageLayout: 'panel-center',
|
||||
colorGrayMode: false,
|
||||
|
|
|
@ -14,7 +14,8 @@ const getRouter = (list: any, type: string) => {
|
|||
component: () => null,
|
||||
meta: {
|
||||
title: list.children[i]?.name,
|
||||
link: list.children[i]?.url
|
||||
link: list.children[i]?.url,
|
||||
icon: 'oui:dot'
|
||||
},
|
||||
})
|
||||
}
|
||||
|
@ -38,7 +39,8 @@ const getRouter = (list: any, type: string) => {
|
|||
component: () => null,
|
||||
meta: {
|
||||
title: list[i].children[j]?.name,
|
||||
link: list[i].children[j]?.url
|
||||
link: list[i].children[j]?.url,
|
||||
icon: 'oui:dot'
|
||||
},
|
||||
})
|
||||
}
|
||||
|
@ -96,6 +98,60 @@ const routes: RouteRecordRaw[] = [
|
|||
icon: 'lucide:area-chart',
|
||||
title: '磁贴审核',
|
||||
},
|
||||
},{
|
||||
name: 'register',
|
||||
path: '/register',
|
||||
component: () => import('#/views/dashboard/home/register.vue'),
|
||||
// component: () => import('#/views/dashboard/home/main.vue'),
|
||||
meta: {
|
||||
hideInMenu: true,
|
||||
icon: 'lucide:area-chart',
|
||||
title: '注册磁贴',
|
||||
},
|
||||
}
|
||||
,{
|
||||
name: 'usertemplate',
|
||||
path: '/usertemplate',
|
||||
component: () => import('#/views/dashboard/home/usertemplate.vue'),
|
||||
// component: () => import('#/views/dashboard/home/main.vue'),
|
||||
meta: {
|
||||
hideInMenu: true,
|
||||
icon: 'lucide:area-chart',
|
||||
title: '用户模板',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'operation',
|
||||
path: '/operation',
|
||||
component: () => import('#/views/dashboard/home/operation.vue'),
|
||||
// component: () => import('#/views/dashboard/home/main.vue'),
|
||||
meta: {
|
||||
hideInMenu: true,
|
||||
icon: 'lucide:area-chart',
|
||||
title: '业务域',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'todo',
|
||||
path: '/todo',
|
||||
component: () => import('#/views/dashboard/home/todo.vue'),
|
||||
// component: () => import('#/views/dashboard/home/main.vue'),
|
||||
meta: {
|
||||
hideInMenu: true,
|
||||
icon: 'lucide:area-chart',
|
||||
title: '代办管理',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'addtodo',
|
||||
path: '/addtodo',
|
||||
component: () => import('#/views/dashboard/home/addtodo.vue'),
|
||||
// component: () => import('#/views/dashboard/home/main.vue'),
|
||||
meta: {
|
||||
hideInMenu: true,
|
||||
icon: 'lucide:area-chart',
|
||||
title: '新建应用',
|
||||
},
|
||||
},
|
||||
// {
|
||||
// name: 'test',
|
||||
|
|
|
@ -60,7 +60,7 @@ export const useAuthStore = defineStore('auth', () => {
|
|||
|
||||
if (userInfo?.realName) {
|
||||
notification.success({
|
||||
description: `${$t('authentication.loginSuccessDesc')}:${userInfo?.realName}`,
|
||||
description: `${$t('authentication.loginSuccessDesc')}`,
|
||||
duration: 3,
|
||||
message: $t('authentication.loginSuccess'),
|
||||
});
|
||||
|
|
|
@ -1 +1,2 @@
|
|||
export * from './auth';
|
||||
export * from './tiles'
|
||||
|
|
|
@ -0,0 +1,14 @@
|
|||
import {defineStore} from 'pinia'
|
||||
export const UseTilesStore = defineStore('tiles',{
|
||||
state: () => {
|
||||
return {
|
||||
tilesIsMove : !1, // 磁贴是否是可编辑状态
|
||||
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
setTilesIsMove(data: boolean){
|
||||
this.tilesIsMove = data
|
||||
}
|
||||
}
|
||||
})
|
|
@ -0,0 +1,98 @@
|
|||
<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: '完成',
|
||||
},
|
||||
]"></Steps>
|
||||
</div>
|
||||
<Form class="mx-auto w-[40%] mt-5 h-[70vh]" :labelCol="{ style: { width: '80px' } }">
|
||||
<FormItem label="添加类型" :rules="[{ required: true, message: '请添加类型' }]">
|
||||
<RadioGroup v-model:value="formData.type">
|
||||
<Radio :value="1">自定义</Radio>
|
||||
<Radio :value="2">从列表中选择</Radio>
|
||||
</RadioGroup>
|
||||
</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="应用顺序" width="20px">
|
||||
<inputNumber>
|
||||
<template #addonAfter>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
<template #addonBefore>
|
||||
<MinusOutlined />
|
||||
</template>
|
||||
</InputNumber>
|
||||
</FormItem>
|
||||
<FormItem label=" " :colon="false" :wrapperCol="{ style: { width: '80px' } }">
|
||||
<Space warp>
|
||||
<Button type="primary">提交</Button>
|
||||
<Button @click="closeNowTab">取消</Button>
|
||||
</Space>
|
||||
</FormItem>
|
||||
</Form>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from 'vue'
|
||||
import { Steps, Space,RadioGroup,Radio } from 'ant-design-vue';
|
||||
import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
import { Button, Form, FormItem, Input, InputNumber, Select, Card, Pagination, Textarea, Checkbox } from 'ant-design-vue';
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
|
||||
import { useTabs } from '@vben/hooks';
|
||||
const { closeCurrentTab } = useTabs();
|
||||
function closeNowTab() {
|
||||
router.go(-1)
|
||||
closeCurrentTab();
|
||||
}
|
||||
let nowCurrent = ref(0)
|
||||
|
||||
let formData = reactive({
|
||||
type: 1,
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.c-item {
|
||||
border: 1px solid #ccc;
|
||||
flex: .3333;
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
|
||||
.template-item {
|
||||
border: 1px solid #ccc;
|
||||
width: 30%;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
.active-icon {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 1px solid hsl(var(--primary));
|
||||
}
|
||||
}
|
||||
|
||||
.form-box {
|
||||
max-height: 90%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="main-box bg-[#ecf3f8] px-3 mt-3 h-[100%]">
|
||||
<div class="main-box px-3 bg-background mt-3 h-[100%]">
|
||||
<div class="top-box flex justify-between items-center">
|
||||
<Button type="primary">批量审批</Button>
|
||||
<div class="flex items-center gap-2">
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="content-box bg-[#fff] px-3 mt-2 h-[100%]">
|
||||
<div class="content-box px-3 mt-2 h-[100%]">
|
||||
<div class="filter-box py-3">
|
||||
<Form layout="inline">
|
||||
<FormItem label="标题">
|
||||
|
@ -40,7 +40,7 @@
|
|||
<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">修改</Button>
|
||||
<Button type="primary" @click="openInfo(item)">修改</Button>
|
||||
<Button type="primary" danger>删除</Button>
|
||||
</div>
|
||||
<div v-else-if="type == 'audit'"
|
||||
|
@ -48,20 +48,86 @@
|
|||
<Button type="primary">通过</Button>
|
||||
<Button type="primary" danger>驳回</Button>
|
||||
</div>
|
||||
<ExpandOutlined class="absolute top-2 right-2 text-[#fff]" />
|
||||
<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 } from 'vue';
|
||||
import { ref, toRefs, reactive } from 'vue';
|
||||
|
||||
import { ExpandOutlined } from '@ant-design/icons-vue';
|
||||
import { Button, Form, FormItem, Input, Select, Card, Pagination } from 'ant-design-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: {
|
||||
|
@ -74,7 +140,7 @@ const props = defineProps({
|
|||
}
|
||||
})
|
||||
|
||||
let { list,type } = toRefs(props);
|
||||
let { list, type } = toRefs(props);
|
||||
for (let i = 0; i < tilesList.length; i++) {
|
||||
let obj: any = {}
|
||||
obj.name = tilesList[i]?.name;
|
||||
|
@ -92,7 +158,38 @@ const options2 = [
|
|||
label: '全部',
|
||||
},
|
||||
]
|
||||
let current = ref(1)
|
||||
let current = ref(1);
|
||||
|
||||
let editcardShow = ref(false)
|
||||
|
||||
let 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' } };
|
||||
const wrapperCol = { style: { width: '150px' } };
|
||||
const itemWrapperCol = { style: { width: '415px' } };
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.tiles-list {
|
||||
|
|
|
@ -6,6 +6,9 @@ import { CheckboxGroup, Checkbox, Collapse, CollapsePanel, FloatButtonGroup, Flo
|
|||
|
||||
|
||||
import { toRefs } from 'vue'
|
||||
import { UseTilesStore } from '#/store';
|
||||
import { storeToRefs } from 'pinia'
|
||||
const tilesStore = UseTilesStore();
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
|
@ -16,44 +19,44 @@ const props = defineProps({
|
|||
let { list } = toRefs(props);
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const layout = ref(JSON.parse(JSON.stringify(list.value)));
|
||||
const layout = ref(list.value)
|
||||
onMounted(() => {
|
||||
layout.value = [
|
||||
{
|
||||
"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
|
||||
},
|
||||
},
|
||||
]
|
||||
// layout.value = [
|
||||
// {
|
||||
// "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;
|
||||
let defaultH = 2;
|
||||
|
@ -69,48 +72,6 @@ const DragPos = {
|
|||
h: null,
|
||||
i: null,
|
||||
};
|
||||
// [
|
||||
// {
|
||||
// id: '1-1',
|
||||
// title: '磁贴管理(2×2)',
|
||||
// name: 'xl',
|
||||
// component: './components/Output1/index.vue',
|
||||
// des: '磁贴管理(2×2)',
|
||||
// w: 1,
|
||||
// h: 2,
|
||||
// img: 'WORKBENCH_MANAGER.png'
|
||||
// },
|
||||
// {
|
||||
// id: '1-2',
|
||||
// title: '饼图示例(8×8)',
|
||||
// name: 'xxl',
|
||||
// component: './components/Output2/index.vue',
|
||||
// des: '饼图示例(8×8)',
|
||||
// w: 8,
|
||||
// h: 8,
|
||||
// img: 'AUTO_1620294688040.png'
|
||||
// },
|
||||
// {
|
||||
// id: '1-3',
|
||||
// title: '报表示例(4×4)',
|
||||
// name: 'xxxl',
|
||||
// component: './components/Output3/index.vue',
|
||||
// des: '报表示例(4×4)',
|
||||
// w: 4,
|
||||
// h: 4,
|
||||
// img: "AUTO_1621594591994.png"
|
||||
// },
|
||||
// {
|
||||
// id: '1-4',
|
||||
// title: '列表示例(16×8)',
|
||||
// name: 'xxxxl',
|
||||
// component: './components/Output4/index.vue',
|
||||
// des: '列表示例(16×8)',
|
||||
// w: 16,
|
||||
// h: 8,
|
||||
// img: 'AUTO_1620296071109.png'
|
||||
// },
|
||||
// ];
|
||||
let currentDragCom = null;
|
||||
onMounted(() => {
|
||||
document.addEventListener(
|
||||
|
@ -134,6 +95,8 @@ const loadComponent = (path) => {
|
|||
};
|
||||
// 处理布局数据中的组件
|
||||
const processLayout = (layoutSetInfo) => {
|
||||
console.log('layoutSetInfo',layoutSetInfo);
|
||||
|
||||
for (const item of layoutSetInfo) {
|
||||
if (!item.component) {
|
||||
continue;
|
||||
|
@ -309,7 +272,7 @@ let addTiles = (val) => {
|
|||
selectTilseArr.value = arr
|
||||
}
|
||||
// 磁贴是否可拖拽
|
||||
let tilesIsMove = ref(true)
|
||||
let {tilesIsMove} = storeToRefs(tilesStore)
|
||||
// 取消和确定编辑磁贴
|
||||
let cancelOrSure = (type) => {
|
||||
if (type == 'cance') {
|
||||
|
@ -320,14 +283,20 @@ let cancelOrSure = (type) => {
|
|||
tilesIsMove.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面跳转
|
||||
let goPage = (item) => {
|
||||
if (tilesIsMove) return;
|
||||
router.push(item?.path);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container-group">
|
||||
<!-- 自定义布局的部分 -->
|
||||
<div class="grid-box select-none">
|
||||
<grid-layout ref="gridLayout" v-model:layout="layout" :col-num="3" :is-draggable="tilesIsMove" :is-mirrored="false"
|
||||
:auto-size="false" :is-resizable="tilesIsMove" :margin="[10, 10]" :row-height="55"
|
||||
<grid-layout ref="gridLayout" v-model:layout="layout" :col-num="4" :is-draggable="tilesIsMove" :is-mirrored="false"
|
||||
:auto-size="false" :is-resizable="false" :margin="[10, 10]" :row-height="40"
|
||||
:vertical-compact="true">
|
||||
|
||||
<grid-item v-for="(item, index ) in layout" :key="item.i" ref="gridItem" :h="item.h" :i="item.i" :w="item.w"
|
||||
|
@ -335,8 +304,8 @@ let cancelOrSure = (type) => {
|
|||
<span class="close" @click="delItem(item)" v-if="tilesIsMove">
|
||||
<CloseCircleFilled style="color: #f10215;" />
|
||||
</span>
|
||||
<div class="py-2 px-4 box-border w-[100%] h-[100%] us-card-box bg-background">
|
||||
<component :is="item.loadComp" :data="item" :key="item.i" />
|
||||
<div class="py-2 px-4 box-border w-[100%] h-[100%] us-card-box bg-background" @click="goPage(item)">
|
||||
<component :is="loadComponent(item.component)" :data="item" :key="item.i" :type="'sm'"/>
|
||||
</div>
|
||||
</grid-item>
|
||||
</grid-layout>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<a href="/portal" class="pointer-events-none inline-block w-[100%] h-[100%] flex flex-col items-center gap-1">
|
||||
<img :src="'/xbyt/'+data.component.name2" alt="" class="w-full object-content">
|
||||
<div class="text-sm">{{ data.component.name }}</div>
|
||||
<img :src="'/xbyt/'+data.name2" alt="" class="w-full object-content">
|
||||
<div class="text-sm t-name" :class="type=='sm'?'text-xs':''" >{{ data.name }}</div>
|
||||
</a>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
@ -11,10 +11,16 @@ const props = defineProps({
|
|||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
console.log('propsprops', props.data);
|
||||
let { data } = toRefs(props);
|
||||
let { data,type } = toRefs(props);
|
||||
|
||||
</script>
|
||||
<style>
|
||||
<style scoped lang="scss">
|
||||
.t-name {
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
|
@ -79,6 +79,9 @@ import { preferences } from '@vben/preferences';
|
|||
|
||||
watch(() => preferences.theme.mode, (n: any) => {
|
||||
VxeUI.setTheme(n)
|
||||
},{
|
||||
deep: true,
|
||||
immediate: true
|
||||
})
|
||||
|
||||
interface RowVO {
|
||||
|
@ -171,9 +174,15 @@ watch(
|
|||
overflow: hidden; //超出隐藏
|
||||
white-space: nowrap; //超出不换行
|
||||
overflow-x: auto; //出现水平滚动条
|
||||
padding-bottom: 3px;
|
||||
margin-bottom: 10px;
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.f-btn-box::-webkit-scrollbar {
|
||||
height: 5px !important;
|
||||
}
|
||||
</style>
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="custom-card w-[100%] h-[100%] flex flex-col">
|
||||
<div class="card-name titlt-top">我的应用</div>
|
||||
<GridGroup :list="data.component.childer" class="flex-1"></GridGroup>
|
||||
<GridGroup :list="data.childer" class="flex-1"></GridGroup>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
|
|
@ -6,6 +6,11 @@ import { CheckboxGroup, Checkbox, Collapse, CollapsePanel, FloatButtonGroup, Flo
|
|||
|
||||
import { tilesList } from './tiles'
|
||||
import { useRouter } from "vue-router";
|
||||
import { UseTilesStore } from '#/store';
|
||||
import { storeToRefs } from 'pinia'
|
||||
const tilesStore = UseTilesStore();
|
||||
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// import GridGroup from './components/GridGroup/index.vue'
|
||||
|
@ -13,62 +18,17 @@ const router = useRouter();
|
|||
const { proxy, ctx: that } = getCurrentInstance();
|
||||
const layout = ref([]);
|
||||
onMounted(() => {
|
||||
layout.value = [
|
||||
{
|
||||
"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": "./components/Output1/index.vue",
|
||||
"i": 0,
|
||||
"path": "/portal"
|
||||
},
|
||||
},
|
||||
{
|
||||
"x": 0,
|
||||
"y": 2,
|
||||
"w": 8,
|
||||
"h": 5,
|
||||
"i": "1728964991972",
|
||||
"component": {
|
||||
"name1": "AUTO_1612159241967.png",
|
||||
"name2": "AUTO_1612159241967_C车辆调度.png",
|
||||
"size": "2x2",
|
||||
"name": "车辆调度",
|
||||
"w": 8,
|
||||
"h": 5,
|
||||
"component": "./components/Output2/index.vue",
|
||||
"i": 2,
|
||||
"dom": '.titlt-top'
|
||||
},
|
||||
},
|
||||
{
|
||||
"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": "./components/Output1/index.vue",
|
||||
"i": 0,
|
||||
"path": "/audit"
|
||||
},
|
||||
let layoutStr = JSON.parse(localStorage.getItem('layout'));
|
||||
if (layoutStr && layoutStr.length > 0) {
|
||||
for (let i = 0; i < layoutStr.length; i++) {
|
||||
if (layoutStr[i]&&layoutStr[i].component) {
|
||||
// layoutStr[i].component = loadComponent(layoutStr[i].component);
|
||||
}
|
||||
]
|
||||
}
|
||||
layout.value = layoutStr
|
||||
}
|
||||
console.log('oooo',layout.value);
|
||||
|
||||
})
|
||||
const colNum = 12;
|
||||
let defaultH = 2;
|
||||
|
@ -85,48 +45,6 @@ const DragPos = {
|
|||
i: null,
|
||||
};
|
||||
const componentsInfo = tilesList
|
||||
// [
|
||||
// {
|
||||
// id: '1-1',
|
||||
// title: '磁贴管理(2×2)',
|
||||
// name: 'xl',
|
||||
// component: './components/Output1/index.vue',
|
||||
// des: '磁贴管理(2×2)',
|
||||
// w: 1,
|
||||
// h: 2,
|
||||
// img: 'WORKBENCH_MANAGER.png'
|
||||
// },
|
||||
// {
|
||||
// id: '1-2',
|
||||
// title: '饼图示例(8×8)',
|
||||
// name: 'xxl',
|
||||
// component: './components/Output2/index.vue',
|
||||
// des: '饼图示例(8×8)',
|
||||
// w: 8,
|
||||
// h: 8,
|
||||
// img: 'AUTO_1620294688040.png'
|
||||
// },
|
||||
// {
|
||||
// id: '1-3',
|
||||
// title: '报表示例(4×4)',
|
||||
// name: 'xxxl',
|
||||
// component: './components/Output3/index.vue',
|
||||
// des: '报表示例(4×4)',
|
||||
// w: 4,
|
||||
// h: 4,
|
||||
// img: "AUTO_1621594591994.png"
|
||||
// },
|
||||
// {
|
||||
// id: '1-4',
|
||||
// title: '列表示例(16×8)',
|
||||
// name: 'xxxxl',
|
||||
// component: './components/Output4/index.vue',
|
||||
// des: '列表示例(16×8)',
|
||||
// w: 16,
|
||||
// h: 8,
|
||||
// img: 'AUTO_1620296071109.png'
|
||||
// },
|
||||
// ];
|
||||
let currentDragCom = null;
|
||||
onMounted(() => {
|
||||
document.addEventListener(
|
||||
|
@ -154,7 +72,7 @@ const processLayout = (layoutSetInfo) => {
|
|||
if (!item.component) {
|
||||
continue;
|
||||
}
|
||||
const resComp = loadComponent(item.component.component);
|
||||
const resComp = loadComponent(item.component);
|
||||
item.loadComp = resComp;
|
||||
}
|
||||
};
|
||||
|
@ -260,12 +178,13 @@ const dragend = (e) => {
|
|||
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,
|
||||
component: currentDragCom,
|
||||
isNew: true,
|
||||
loadComp,
|
||||
});
|
||||
proxy.$refs.gridLayout.dragEvent(
|
||||
|
@ -322,22 +241,34 @@ let addTiles = (val) => {
|
|||
|
||||
selectTilseArr.value = arr
|
||||
}
|
||||
// 磁贴是否可拖拽
|
||||
let tilesIsMove = ref(false)
|
||||
// 磁贴是否可编辑(删除、拖拽、大小)
|
||||
let { tilesIsMove } = storeToRefs(tilesStore)
|
||||
// 取消和确定编辑磁贴
|
||||
let cancelOrSure = (type) => {
|
||||
if (type == 'cance') {
|
||||
editTiles.value = false;
|
||||
tilesIsMove.value = false;
|
||||
tilesStore.setTilesIsMove(false)
|
||||
layout.value = layout.value.filter((item) => {
|
||||
return !item.isNew
|
||||
})
|
||||
|
||||
} else if (type == 'sure') {
|
||||
editTiles.value = false;
|
||||
tilesStore.setTilesIsMove(false)
|
||||
layout.value.forEach((element, index) => {
|
||||
delete element.isNew
|
||||
});
|
||||
let newLayout = JSON.parse(JSON.stringify(layout.value));
|
||||
window.localStorage.setItem('layout', JSON.stringify(newLayout));
|
||||
} else if (type == 'edit') {
|
||||
editTiles.value = true;
|
||||
tilesIsMove.value = true;
|
||||
tilesStore.setTilesIsMove(true)
|
||||
}
|
||||
}
|
||||
// 页面跳转
|
||||
let goPage = (item) => {
|
||||
if (tilesIsMove.value) return;
|
||||
router.push(item.component?.path);
|
||||
router.push(item?.path);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -347,11 +278,11 @@ let goPage = (item) => {
|
|||
<div class="grid-box select-none index-grid">
|
||||
<grid-layout ref="gridLayout" v-model:layout="layout" :col-num="12" :is-draggable="tilesIsMove"
|
||||
:is-mirrored="false" :auto-size="false" :responsive="false" :is-resizable="tilesIsMove" :margin="[10, 10]"
|
||||
:row-height="45" :vertical-compact="true">
|
||||
:row-height="70" :vertical-compact="true">
|
||||
|
||||
<grid-item v-for="(item, index ) in layout" :key="item.i" ref="gridItem" :h="item.h" :i="item.i" :w="item.w"
|
||||
:x="item.x" :y="item.y" :dragAllowFrom="item.component && item.component.dom ? item.component.dom : null"
|
||||
@resized="resizedEvent">
|
||||
:x="item.x" :y="item.y" :dragAllowFrom="item && item.dom ? item.dom : null"
|
||||
:isResizable="tilesIsMove && item && item.isResize ? item.isResize : false" @resized="resizedEvent">
|
||||
<span class="close" @click="delItem(item)" v-if="tilesIsMove">
|
||||
<CloseCircleFilled style="color: #f10215;" />
|
||||
</span>
|
||||
|
@ -371,7 +302,7 @@ let goPage = (item) => {
|
|||
<!-- 右侧悬浮部分 -->
|
||||
<FloatButtonGroup shape="circle" :style="{ right: '40px' }">
|
||||
<template v-if="!editTiles">
|
||||
<FloatButton tooltip="编辑磁贴" @click="cancelOrSure('sure')">
|
||||
<FloatButton tooltip="编辑磁贴" @click="cancelOrSure('edit')">
|
||||
<template #icon>
|
||||
<EditOutlined style="font-size: 20px;" />
|
||||
</template>
|
||||
|
@ -396,7 +327,7 @@ let goPage = (item) => {
|
|||
<CollapsePanel key="1" header="个人工作台(22)">
|
||||
<!-- 可拖入的组件部分 -->
|
||||
<div class="components-box">
|
||||
<div v-for="item in componentsInfo.slice(0, 22)" :key="item.name" class="ctrl-box"
|
||||
<div v-for="item in componentsInfo.slice(0, 22)" :key="item.name" class="ctrl-box bg-background"
|
||||
draggable="true" @drag="drag" @dragend="dragend($event)" @dragstart="dragstart($event, item)"
|
||||
@click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
|
||||
|
@ -407,7 +338,7 @@ let goPage = (item) => {
|
|||
</CollapsePanel>
|
||||
<CollapsePanel key="2" header="综合行政(12)">
|
||||
<div class="components-box">
|
||||
<div v-for="item in componentsInfo.slice(22, 34)" :key="item.name" class="ctrl-box"
|
||||
<div v-for="item in componentsInfo.slice(22, 34)" :key="item.name" class="ctrl-box bg-background"
|
||||
draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
|
||||
@click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
|
||||
|
@ -419,7 +350,7 @@ let goPage = (item) => {
|
|||
</CollapsePanel>
|
||||
<CollapsePanel key="3" header="经营管理(22)">
|
||||
<div class="components-box">
|
||||
<div v-for="item in componentsInfo.slice(34, 56)" :key="item.name" class="ctrl-box"
|
||||
<div v-for="item in componentsInfo.slice(34, 56)" :key="item.name" class="ctrl-box bg-background"
|
||||
draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
|
||||
@click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
|
||||
|
@ -431,7 +362,7 @@ let goPage = (item) => {
|
|||
</CollapsePanel>
|
||||
<CollapsePanel key="4" header="安全生产(19)">
|
||||
<div class="components-box">
|
||||
<div v-for="item in componentsInfo.slice(56, 75)" :key="item.name" class="ctrl-box"
|
||||
<div v-for="item in componentsInfo.slice(56, 75)" :key="item.name" class="ctrl-box bg-background"
|
||||
draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
|
||||
@click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
|
||||
|
@ -443,7 +374,7 @@ let goPage = (item) => {
|
|||
</CollapsePanel>
|
||||
<CollapsePanel key="5" header="勘探开发(26)">
|
||||
<div class="components-box">
|
||||
<div v-for="item in componentsInfo.slice(75, 101)" :key="item.name" class="ctrl-box"
|
||||
<div v-for="item in componentsInfo.slice(75, 101)" :key="item.name" class="ctrl-box bg-background"
|
||||
draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
|
||||
@click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
|
||||
|
@ -455,9 +386,10 @@ let goPage = (item) => {
|
|||
</CollapsePanel>
|
||||
<CollapsePanel key="6" header="数据管理(1)">
|
||||
<div class="components-box">
|
||||
<div v-for="item in componentsInfo.slice(101, 102)" :key="item.name" class="ctrl-box"
|
||||
draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
|
||||
@click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div v-for="item in componentsInfo.slice(101, 102)" :key="item.name"
|
||||
class="ctrl-box bg-background" draggable="true" @drag="drag" @dragend="dragend"
|
||||
@dragstart="dragstart($event, item)" @click="addTiles(item.name)"
|
||||
:class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
|
||||
<img :src="'/xbyt/' + item.name2" alt="">
|
||||
<Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
|
||||
|
@ -467,9 +399,10 @@ let goPage = (item) => {
|
|||
</CollapsePanel>
|
||||
<CollapsePanel key="7" header="总部系统(25)">
|
||||
<div class="components-box">
|
||||
<div v-for="item in componentsInfo.slice(102, 127)" :key="item.name" class="ctrl-box"
|
||||
draggable="true" @drag="drag" @dragend="dragend" @dragstart="dragstart($event, item)"
|
||||
@click="addTiles(item.name)" :class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div v-for="item in componentsInfo.slice(102, 127)" :key="item.name"
|
||||
class="ctrl-box bg-background" draggable="true" @drag="drag" @dragend="dragend"
|
||||
@dragstart="dragstart($event, item)" @click="addTiles(item.name)"
|
||||
:class="{ 'active': selectTilseArr.includes(item.name) }">
|
||||
<div class="ctrl-name">{{ item.name + '(' + item.size + ')' }}</div>
|
||||
<img :src="'/xbyt/' + item.name2" alt="">
|
||||
<Checkbox :value="item.name" :checked="selectTilseArr.includes(item.name)"
|
||||
|
@ -497,6 +430,7 @@ let goPage = (item) => {
|
|||
min-width: 1000px;
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
max-width: unset !important;
|
||||
}
|
||||
|
||||
.grid-box {
|
||||
|
@ -520,7 +454,6 @@ let goPage = (item) => {
|
|||
height: 130px;
|
||||
padding: 12px;
|
||||
// margin-top: 20px;
|
||||
background: #ecf1f3;
|
||||
user-select: none;
|
||||
flex-direction: column;
|
||||
border-radius: 10px;
|
||||
|
@ -570,7 +503,8 @@ let goPage = (item) => {
|
|||
overflow: auto;
|
||||
background: transparent;
|
||||
// border: 1px solid rgb(66 66 66 / 100%);
|
||||
width: 1200px;
|
||||
// width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.vue-grid-item {
|
||||
// padding: 12px 20px;
|
||||
|
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<div class="bg-background p-5 m-4">
|
||||
<div class="flex justify-between mb-4">
|
||||
<Form layout="inline">
|
||||
<FormItem label="业务域编码">
|
||||
<Input placeholder="请输入"></Input>
|
||||
</FormItem>
|
||||
<FormItem label="业务域名称">
|
||||
<Input placeholder="请输入"></Input>
|
||||
</FormItem>
|
||||
<Button type="primary">查询</Button>
|
||||
</Form>
|
||||
<div class="flex gap-2">
|
||||
<Button size="small" type="primary">新增</Button>
|
||||
<Button size="small" type="primary">修改</Button>
|
||||
<Button size="small" type="primary" danger>删除</Button>
|
||||
</div>
|
||||
</div>
|
||||
<vxe-table border ref="tableRef" :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="业务域编码"></vxe-column>
|
||||
<vxe-column field="id" title="业务域ID"></vxe-column>
|
||||
<vxe-column field="name" title="业务域名称"></vxe-column>
|
||||
<vxe-column field="desc" title="业务域描述" align="center" width="520"></vxe-column>
|
||||
<vxe-column field="operate" title="操作" align="center">
|
||||
<template #default="{ row }">
|
||||
<div class="flex gap-1 justify-center">
|
||||
<ContactsFilled style="color: #367cb7;font-size: 20px;" />
|
||||
</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
<div class="py-2 flex justify-between">
|
||||
<div>总共{{ tableData.length }}条数据</div>
|
||||
<Pagination size="small" :total="1000" show-size-changer show-quick-jumper />
|
||||
</div>
|
||||
</div>
|
||||
</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 { preferences } from '@vben/preferences';
|
||||
|
||||
watch(() => preferences.theme.mode, (n: any) => {
|
||||
VxeUI.setTheme(n)
|
||||
},{
|
||||
deep: true,
|
||||
immediate: true
|
||||
})
|
||||
import { Button, Form, FormItem, Input, Select, Card, Pagination, Textarea, Checkbox } from 'ant-design-vue';
|
||||
interface RowVO {
|
||||
code: string
|
||||
name: string
|
||||
id: number
|
||||
desc: string
|
||||
operate: string
|
||||
|
||||
}
|
||||
|
||||
const selectRow = ref<RowVO | null>(null)
|
||||
|
||||
const tableData = ref<RowVO[]>([
|
||||
{
|
||||
code: '001', name: '业务域1', id: 1, desc: '业务域1',
|
||||
operate: ''
|
||||
},
|
||||
{
|
||||
code: '001', name: '业务域1', id: 1, desc: '业务域1',
|
||||
operate: ''
|
||||
},
|
||||
{
|
||||
code: '001', name: '业务域1', id: 1, desc: '业务域1',
|
||||
operate: ''
|
||||
},
|
||||
{
|
||||
code: '001', name: '业务域1', id: 1, desc: '业务域1',
|
||||
operate: ''
|
||||
},{
|
||||
code: '001', name: '业务域1', id: 1, desc: '业务域1',
|
||||
operate: ''
|
||||
},{
|
||||
code: '001', name: '业务域1', id: 1, desc: '业务域1',
|
||||
operate: ''
|
||||
},{
|
||||
code: '001', name: '业务域1', id: 1, desc: '业务域1',
|
||||
operate: ''
|
||||
},{
|
||||
code: '001', name: '业务域1', id: 1, desc: '业务域1',
|
||||
operate: ''
|
||||
},
|
||||
])
|
||||
|
||||
const tableRef = ref<VxeTableInstance<RowVO>>()
|
||||
|
||||
const cellClickEvent: VxeTableEvents.CellClick<RowVO> = () => {
|
||||
console.log('单元格点击事件')
|
||||
}
|
||||
|
||||
const radioChangeEvent: VxeTableEvents.RadioChange<RowVO> = ({ row }) => {
|
||||
selectRow.value = row
|
||||
console.log('单选事件')
|
||||
}
|
||||
|
||||
const setSelectRow = (index: number) => {
|
||||
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 getRadioEvent = () => {
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
const currRow = $table.getRadioRecord()
|
||||
VXETable.modal.alert(JSON.stringify(currRow))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="main-box bg-[#ecf3f8] px-3 mt-3 h-[100%]">
|
||||
<div class="main-box bg-background px-3 mt-3 h-[100%]">
|
||||
<div class="top-box flex justify-between items-center">
|
||||
<div class="t-b-name text-base">磁贴管理</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button type="primary">注册磁贴</Button>
|
||||
<Button type="primary" @click="goToReg">注册磁贴</Button>
|
||||
<VbenIconButton
|
||||
class="hover:text-[#007da3] w-[30px] h-[30px] flex justify-center items-center rounded-[50%]">
|
||||
<UnorderedListOutlined />
|
||||
|
@ -21,7 +21,8 @@ import CardTitle from './components/CardTiles/index.vue';
|
|||
import { UnorderedListOutlined, ExpandOutlined } from '@ant-design/icons-vue';
|
||||
import { Button, Form, FormItem, Input, Select, Card, Pagination} from 'ant-design-vue';
|
||||
import { tilesList } from './tiles'
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
let list: any[] = []
|
||||
for (let i = 0; i < tilesList.length; i++) {
|
||||
let obj: any = {}
|
||||
|
@ -32,4 +33,9 @@ for (let i = 0; i < tilesList.length; i++) {
|
|||
list.push(obj);
|
||||
obj = null
|
||||
}
|
||||
|
||||
let goToReg = () => {
|
||||
router.push("/register");
|
||||
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,305 @@
|
|||
<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 { Button, Form, FormItem, Input, Select, Card, Pagination, Textarea, Checkbox } from 'ant-design-vue';
|
||||
import { preferences } from '@vben/preferences';
|
||||
|
||||
const wrapperCol = { style: { width: '100px' } };
|
||||
watch(() => preferences.theme.mode, (n: any) => {
|
||||
VxeUI.setTheme(n)
|
||||
},{
|
||||
deep: true,
|
||||
immediate: true
|
||||
})
|
||||
interface RowVO {
|
||||
code: string
|
||||
name: string
|
||||
}
|
||||
|
||||
const selectRow = ref<RowVO | null>(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 tableRef = ref<VxeTableInstance<RowVO>>()
|
||||
|
||||
const cellClickEvent: VxeTableEvents.CellClick<RowVO> = () => {
|
||||
console.log('单元格点击事件')
|
||||
}
|
||||
|
||||
const radioChangeEvent: VxeTableEvents.RadioChange<RowVO> = ({ row }) => {
|
||||
selectRow.value = row
|
||||
console.log('单选事件')
|
||||
}
|
||||
|
||||
const setSelectRow = (index: number) => {
|
||||
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 getRadioEvent = () => {
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
const currRow = $table.getRadioRecord()
|
||||
VXETable.modal.alert(JSON.stringify(currRow))
|
||||
}
|
||||
}
|
||||
const templateList = [{
|
||||
img: 'AUTO_1612159241967_C车辆调度.png',
|
||||
name: '多媒体'
|
||||
}, {
|
||||
img: 'AUTO_1612160044533_C市场管理.png',
|
||||
name: '柱状图'
|
||||
}, {
|
||||
img: 'AUTO_1612174485058_C投资共享.png',
|
||||
name: '卡片'
|
||||
}, {
|
||||
img: 'AUTO_1612175576303_C费用报销.png',
|
||||
name: '自定义'
|
||||
}, {
|
||||
img: 'AUTO_1612175837663_C设备管理.png',
|
||||
name: '仪表盘'
|
||||
}, {
|
||||
img: 'AUTO_1612176568856_C财务管理.png',
|
||||
name: '折线图'
|
||||
}, {
|
||||
img: 'AUTO_1612176967032_C土地信息.png',
|
||||
name: '列表'
|
||||
}, {
|
||||
img: 'AUTO_1612236164722_C门户网站.png',
|
||||
name: '数字'
|
||||
}, {
|
||||
img: 'AUTO_1612251274093_C集输防腐.png',
|
||||
name: '饼图'
|
||||
}, {
|
||||
img: 'AUTO_1612254108987_C新井日报.png',
|
||||
name: '快捷入口'
|
||||
}, {
|
||||
img: 'AUTO_1612254711440_C单井曲线.png',
|
||||
name: '文本'
|
||||
}]
|
||||
|
||||
let nowCurrent = ref(0);
|
||||
let selectTemplate = (index: number) => {
|
||||
nowCurrent.value = index
|
||||
}
|
||||
|
||||
let templateNum = ref(0);
|
||||
let templateClickNum = (index: number) => {
|
||||
templateNum.value = index
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.c-item {
|
||||
border: 1px solid #ccc;
|
||||
flex: .3333;
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
|
||||
.template-item {
|
||||
border: 1px solid #ccc;
|
||||
width: 30%;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
.active-icon {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 1px solid hsl(var(--primary));
|
||||
}
|
||||
}
|
||||
|
||||
.form-box {
|
||||
max-height: 90%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
|
@ -1,4 +1,59 @@
|
|||
let tilesList = [
|
||||
{
|
||||
"name1": "WORKBENCH_USER_TMPL.png",
|
||||
"name2": "WORKBENCH_USER_TMPL_C用户模板.png",
|
||||
"size": "2x2",
|
||||
"name": "用户模板",
|
||||
"w": 1,
|
||||
"h": 2,
|
||||
"component": "./components/Output1/index.vue",
|
||||
"i": 131,
|
||||
"path": "/usertemplate"
|
||||
},
|
||||
{
|
||||
"name1": "WORKBENCH_BUSINESS.png",
|
||||
"name2": "WORKBENCH_BUSINESS_C业务域.png",
|
||||
"size": "2x2",
|
||||
"name": "业务域",
|
||||
"w": 1,
|
||||
"h": 2,
|
||||
"component": "./components/Output1/index.vue",
|
||||
"i": 128,
|
||||
"path": "/operation"
|
||||
},
|
||||
{
|
||||
"name1": "WORKBENCH_MANAGER.png",
|
||||
"name2": "WORKBENCH_MANAGER_C磁贴管理.png",
|
||||
"size": "2x2",
|
||||
"name": "磁贴管理",
|
||||
"w": 1,
|
||||
"h": 2,
|
||||
"component": "./components/Output1/index.vue",
|
||||
"i": 129,
|
||||
"path": "/portal"
|
||||
},
|
||||
{
|
||||
"name1": "WORKBENCH_AUDIT.png",
|
||||
"name2": "WORKBENCH_AUDIT_C磁贴审核.png",
|
||||
"size": "2x2",
|
||||
"name": "磁贴审核",
|
||||
"w": 1,
|
||||
"h": 2,
|
||||
"component": "./components/Output1/index.vue",
|
||||
"i": 127,
|
||||
"path": "/audit"
|
||||
},
|
||||
{
|
||||
"name1": "AUTO_1612255706920.png",
|
||||
"name2": "AUTO_1612255706920_C待办管理.png",
|
||||
"size": "2x2",
|
||||
"name": "待办管理",
|
||||
"w": 1,
|
||||
"h": 2,
|
||||
"component": "./components/Output1/index.vue",
|
||||
"i": 27,
|
||||
"path": "/todo"
|
||||
},
|
||||
{
|
||||
"name1": "AUTO_1612155980933.png",
|
||||
"name2": "AUTO_1612155980933_C会议管理.png",
|
||||
|
@ -8,7 +63,6 @@ let tilesList = [
|
|||
"h": 2,
|
||||
"component": "./components/Output1/index.vue",
|
||||
"i": 0,
|
||||
"path": "/portal"
|
||||
},
|
||||
{
|
||||
"name1": "AUTO_1612158921536.png",
|
||||
|
@ -19,6 +73,7 @@ let tilesList = [
|
|||
"h": 6,
|
||||
"component": "./components/Output5/index.vue",
|
||||
"dom": '.titlt-top',
|
||||
"isResize": true,
|
||||
"childer": [
|
||||
{
|
||||
"name1": "AUTO_1612159241967.png",
|
||||
|
@ -44,7 +99,8 @@ let tilesList = [
|
|||
"h": 5,
|
||||
"component": "./components/Output2/index.vue",
|
||||
"i": 2,
|
||||
"dom": '.titlt-top'
|
||||
"dom": '.titlt-top',
|
||||
"isResize": true
|
||||
},
|
||||
{
|
||||
"name1": "AUTO_1612159773503.png",
|
||||
|
@ -287,16 +343,6 @@ let tilesList = [
|
|||
"component": "./components/Output1/index.vue",
|
||||
"i": 26
|
||||
},
|
||||
{
|
||||
"name1": "AUTO_1612255706920.png",
|
||||
"name2": "AUTO_1612255706920_C待办管理.png",
|
||||
"size": "2x2",
|
||||
"name": "待办管理",
|
||||
"w": 1,
|
||||
"h": 2,
|
||||
"component": "./components/Output1/index.vue",
|
||||
"i": 27
|
||||
},
|
||||
{
|
||||
"name1": "AUTO_1615449162971.png",
|
||||
"name2": "AUTO_1615449162971_C日志服务.png",
|
||||
|
@ -1287,36 +1333,6 @@ let tilesList = [
|
|||
"component": "./components/Output1/index.vue",
|
||||
"i": 126
|
||||
},
|
||||
{
|
||||
"name1": "WORKBENCH_AUDIT.png",
|
||||
"name2": "WORKBENCH_AUDIT_C磁贴审核.png",
|
||||
"size": "2x2",
|
||||
"name": "磁贴审核",
|
||||
"w": 1,
|
||||
"h": 2,
|
||||
"component": "./components/Output1/index.vue",
|
||||
"i": 127
|
||||
},
|
||||
{
|
||||
"name1": "WORKBENCH_BUSINESS.png",
|
||||
"name2": "WORKBENCH_BUSINESS_C业务域.png",
|
||||
"size": "2x2",
|
||||
"name": "业务域",
|
||||
"w": 1,
|
||||
"h": 2,
|
||||
"component": "./components/Output1/index.vue",
|
||||
"i": 128
|
||||
},
|
||||
{
|
||||
"name1": "WORKBENCH_MANAGER.png",
|
||||
"name2": "WORKBENCH_MANAGER_C磁贴管理.png",
|
||||
"size": "2x2",
|
||||
"name": "磁贴管理",
|
||||
"w": 1,
|
||||
"h": 2,
|
||||
"component": "./components/Output1/index.vue",
|
||||
"i": 129
|
||||
},
|
||||
{
|
||||
"name1": "WORKBENCH_USER_AUTH.png",
|
||||
"name2": "WORKBENCH_USER_AUTH_C用户授权.png",
|
||||
|
@ -1327,16 +1343,6 @@ let tilesList = [
|
|||
"component": "./components/Output1/index.vue",
|
||||
"i": 130
|
||||
},
|
||||
{
|
||||
"name1": "WORKBENCH_USER_TMPL.png",
|
||||
"name2": "WORKBENCH_USER_TMPL_C用户模板.png",
|
||||
"size": "2x2",
|
||||
"name": "用户模板",
|
||||
"w": 1,
|
||||
"h": 2,
|
||||
"component": "./components/Output1/index.vue",
|
||||
"i": 131
|
||||
}
|
||||
]
|
||||
|
||||
export { tilesList }
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div class="bg-background p-5 m-4">
|
||||
<div class="flex justify-between mb-4">
|
||||
<Form layout="inline">
|
||||
<FormItem label="应用名称">
|
||||
<Input placeholder="请输入"></Input>
|
||||
</FormItem>
|
||||
<FormItem label="应用编码">
|
||||
<Input placeholder="请输入"></Input>
|
||||
</FormItem>
|
||||
<FormItem label="模板类型">
|
||||
<Select placeholder="请输入"></Select>
|
||||
</FormItem>
|
||||
<Space warp>
|
||||
<Button type="primary">查询</Button>
|
||||
<Button>清空</Button>
|
||||
</Space>
|
||||
</Form>
|
||||
</div>
|
||||
<Space warp class="mb-5">
|
||||
<Button type="primary" :icon="h(PlusOutlined)" class="flex items-center" @click="router.push('/addtodo')">添加应用</Button>
|
||||
<Button :icon="h(UploadOutlined)" class="flex items-center">一键导入</Button>
|
||||
<Button :icon="h(SettingOutlined)" class="flex items-center">配置待办清单</Button>
|
||||
</Space>
|
||||
<vxe-table border ref="tableRef" :data="tableData">
|
||||
<vxe-column field="code" title="应用编码"></vxe-column>
|
||||
<vxe-column field="name" title="应用名称"></vxe-column>
|
||||
<vxe-column field="link" title="接口地址"></vxe-column>
|
||||
<vxe-column field="sort" title="排序" width="50"></vxe-column>
|
||||
<vxe-column field="operate" title="操作" width="350">
|
||||
<template #default="{ row }">
|
||||
<div class="flex gap-2">
|
||||
<Button type="link">告警管理</Button>
|
||||
<Button type="link">编辑</Button>
|
||||
<Button type="link">删除</Button>
|
||||
<Button type="link">导出</Button>
|
||||
</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
<div class="py-2 flex justify-between">
|
||||
<div>总共{{ tableData.length }}条数据</div>
|
||||
<Pagination size="small" :total="1000" show-size-changer show-quick-jumper />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, watch,h } from 'vue'
|
||||
import { SettingOutlined,UploadOutlined,PlusOutlined } 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, Space } from 'ant-design-vue';
|
||||
import { preferences } from '@vben/preferences';
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
|
||||
watch(() => preferences.theme.mode, (n: any) => {
|
||||
VxeUI.setTheme(n)
|
||||
}, {
|
||||
deep: true,
|
||||
immediate: true
|
||||
})
|
||||
interface RowVO {
|
||||
code: string
|
||||
name: string
|
||||
link: string
|
||||
sort: string
|
||||
// 操作
|
||||
operate: string
|
||||
}
|
||||
|
||||
|
||||
const tableData = ref<RowVO[]>([
|
||||
{ code: "LDQXJ", name: "领导请销假", link: "http://www.baidu.com", sort: "1", operate: "操作" },
|
||||
{ code: "DCGL", name: "督察管理", link: "http://www.baidu.com", sort: "3", operate: "操作" },
|
||||
{ code: "DZKQ", name: "电子考勤", link: "http://www.baidu.com", sort: "2", operate: "操作" },
|
||||
])
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="bg-background p-5 m-4">
|
||||
<div class="flex justify-between mb-4">
|
||||
<Form layout="inline">
|
||||
<FormItem label="名称">
|
||||
<Input placeholder="请输入"></Input>
|
||||
</FormItem>
|
||||
<FormItem label="编码">
|
||||
<Input placeholder="请输入"></Input>
|
||||
</FormItem>
|
||||
<FormItem label="模板类型">
|
||||
<Select placeholder="请输入"></Select>
|
||||
</FormItem>
|
||||
<Button type="primary">查询</Button>
|
||||
</Form>
|
||||
<Button type="primary">添加</Button>
|
||||
</div>
|
||||
<vxe-table border ref="tableRef" :data="tableData">
|
||||
<vxe-column field="ucode" title="租户编码"></vxe-column>
|
||||
<vxe-column field="name" title="模板名称"></vxe-column>
|
||||
<vxe-column field="code" title="模板编码"></vxe-column>
|
||||
<vxe-column field="versions" title="模板版本信息"></vxe-column>
|
||||
<vxe-column field="type" title="模板类型"></vxe-column>
|
||||
<vxe-column field="isDefault" title="是否为默认面板"></vxe-column>
|
||||
<vxe-column field="users" title="创建人"></vxe-column>
|
||||
<vxe-column field="time" title="创建时间"></vxe-column>
|
||||
<vxe-column field="maintain" title="维护人"></vxe-column>
|
||||
<vxe-column field="maintaintime" title="维护时间"></vxe-column>
|
||||
<vxe-column field="operate" title="操作" width="150">
|
||||
<template #default="{ row }">
|
||||
<div class="flex gap-1">
|
||||
<EditFilled style="color: #5cb15c;font-size: 20px;" />
|
||||
<DeleteFilled style="color: #e15852;font-size: 20px;"/>
|
||||
<ContactsFilled style="color: #367cb7;font-size: 20px;"/>
|
||||
<ToolFilled style="color: #367cb7;font-size: 20px;"/>
|
||||
<ThunderboltFilled style="color: #e15852;font-size: 20px;"/>
|
||||
</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
<div class="py-2 flex justify-between">
|
||||
<div>总共{{ tableData.length }}条数据</div>
|
||||
<Pagination size="small" :total="1000" show-size-changer show-quick-jumper />
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
|
@ -163,7 +163,7 @@ if (enableShortcutKey.value) {
|
|||
<DropdownMenuTrigger>
|
||||
<div class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full p-1.5">
|
||||
<div class="hover:text-accent-foreground flex-center">
|
||||
<VbenAvatar :alt="text" :src="avatar" class="size-8" dot />
|
||||
<VbenAvatar :alt="text" :src="'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp'" class="size-8" dot />
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
|
@ -171,7 +171,7 @@ if (enableShortcutKey.value) {
|
|||
<DropdownMenuLabel class="flex items-center p-3">
|
||||
<VbenAvatar
|
||||
:alt="text"
|
||||
:src="avatar"
|
||||
:src="'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp'"
|
||||
class="size-12"
|
||||
dot
|
||||
dot-class="bottom-0 right-1 border-2 size-4 bg-green-500"
|
||||
|
|
Loading…
Reference in New Issue