This commit is contained in:
parent
9e07cf0214
commit
7dd0463161
|
@ -29,7 +29,6 @@ import {
|
||||||
Form,
|
Form,
|
||||||
FormItem,
|
FormItem,
|
||||||
Input,
|
Input,
|
||||||
InputGroup,
|
|
||||||
InputSearch,
|
InputSearch,
|
||||||
Modal,
|
Modal,
|
||||||
Popover,
|
Popover,
|
||||||
|
@ -500,13 +499,13 @@ const formState = reactive({
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #content>
|
<template #content>
|
||||||
<InputGroup compact>
|
<div class="shop-seach flex items-center">
|
||||||
<Select v-model:value="shopFlotter">
|
<Select v-model:value="shopFlotter">
|
||||||
<SelectOption value="1">全部应用磁贴</SelectOption>
|
<SelectOption value="1">全部应用磁贴</SelectOption>
|
||||||
<SelectOption value="2">Option2</SelectOption>
|
<SelectOption value="2">Option2</SelectOption>
|
||||||
</Select>
|
</Select>
|
||||||
<InputSearch placeholder="" style="width: 200px" />
|
<InputSearch placeholder="" />
|
||||||
</InputGroup>
|
</div>
|
||||||
<div class="shop-box">
|
<div class="shop-box">
|
||||||
<!-- <CheckboxGroup v-model:value="selectTilseArr" style="width: 100%"> -->
|
<!-- <CheckboxGroup v-model:value="selectTilseArr" style="width: 100%"> -->
|
||||||
<Collapse v-model:active-key="activeKeyArr" style="width: 100%">
|
<Collapse v-model:active-key="activeKeyArr" style="width: 100%">
|
||||||
|
@ -870,4 +869,10 @@ const formState = reactive({
|
||||||
background: white !important;
|
background: white !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.shop-seach :deep(button) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,7 +1,158 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch } from '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);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
interface RowVO {
|
||||||
|
code: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectRow = ref<null | RowVO>(null);
|
||||||
|
|
||||||
|
const tableData = ref<RowVO[]>([
|
||||||
|
{ code: 'xzczcz', name: '个人工作台' },
|
||||||
|
{ code: 'xzczcz', name: '综合行政' },
|
||||||
|
{ code: 'xzczcz', name: '经营管理' },
|
||||||
|
{ code: 'xzczcz', name: '安全生产' },
|
||||||
|
{ code: 'xzczcz', name: '勘探开发' },
|
||||||
|
{ code: 'xzczcz', name: '数据管理' },
|
||||||
|
{ code: 'xzczcz', name: '中心工作' },
|
||||||
|
{ code: 'xzczcz', name: '总部系统' },
|
||||||
|
{ code: 'xzczcz', name: '功能模块' },
|
||||||
|
{ code: 'xzczcz', name: '工程院系统' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const 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: '文本',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const nowCurrent = ref(0);
|
||||||
|
const selectTemplate = (index: number) => {
|
||||||
|
nowCurrent.value = index;
|
||||||
|
};
|
||||||
|
|
||||||
|
const templateNum = ref(0);
|
||||||
|
const templateClickNum = (index: number) => {
|
||||||
|
templateNum.value = index;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="w-[100%] px-2 bg-background mt-3 min-w-[1200px]">
|
<div class="bg-background mt-3 w-[100%] min-w-[1200px] px-2">
|
||||||
<div class="w-[70%] mx-auto pt-3">
|
<div class="mx-auto w-[70%] pt-3">
|
||||||
<Steps :current="nowCurrent" :items="[
|
<Steps
|
||||||
|
:current="nowCurrent"
|
||||||
|
:items="[
|
||||||
{
|
{
|
||||||
title: '选择业务域',
|
title: '选择业务域',
|
||||||
},
|
},
|
||||||
|
@ -11,37 +162,61 @@
|
||||||
{
|
{
|
||||||
title: '填写磁贴信息',
|
title: '填写磁贴信息',
|
||||||
},
|
},
|
||||||
]"></Steps>
|
]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex gap-3 mt-3 pb-2 justify-center">
|
<div class="mt-3 flex justify-center gap-3 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 layout="inline" :wrapperCol="wrapperCol">
|
<Form :wrapper-col="wrapperCol" layout="inline">
|
||||||
<FormItem label="名称">
|
<FormItem label="名称">
|
||||||
<Input placeholder="请输入"></Input>
|
<Input placeholder="请输入" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="编码">
|
<FormItem label="编码">
|
||||||
<Input placeholder="请输入"></Input>
|
<Input placeholder="请输入" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<Button type="primary">查询</Button>
|
<Button type="primary">查询</Button>
|
||||||
</Form>
|
</Form>
|
||||||
<div class="text-xs flex gap-1">
|
<div class="flex gap-1 text-xs">
|
||||||
<InfoCircleFilled />
|
<InfoCircleFilled />
|
||||||
<div>如果找不到相关业务,请<Button type="link">点击此处</Button>新建</div>
|
<div>
|
||||||
|
如果找不到相关业务,请<Button type="link">点击此处</Button>新建
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<vxe-table border ref="tableRef" height="70%" :data="tableData" :radio-config="{ highlight: true }"
|
<vxe-table
|
||||||
@cell-click="cellClickEvent" @radio-change="radioChangeEvent">
|
ref="tableRef"
|
||||||
|
:data="tableData"
|
||||||
|
:radio-config="{ highlight: true }"
|
||||||
|
border
|
||||||
|
height="70%"
|
||||||
|
@cell-click="cellClickEvent"
|
||||||
|
@radio-change="radioChangeEvent"
|
||||||
|
>
|
||||||
<vxe-column type="radio" width="60">
|
<vxe-column type="radio" width="60">
|
||||||
<template #header>
|
<template #header>
|
||||||
<vxe-button mode="text" @click="clearRadioRowEevnt" :disabled="!selectRow">取消</vxe-button>
|
<vxe-button
|
||||||
|
:disabled="!selectRow"
|
||||||
|
mode="text"
|
||||||
|
@click="clearRadioRowEevnt"
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</vxe-button>
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
<vxe-column field="code" title="业务域编码" width="120"></vxe-column>
|
<vxe-column field="code" title="业务域编码" width="120" />
|
||||||
<vxe-column field="name" title="业务域名称" width="120"></vxe-column>
|
<vxe-column field="name" title="业务域名称" width="120" />
|
||||||
</vxe-table>
|
</vxe-table>
|
||||||
<div class="flex justify-end w-[100%] px-3 py-3" v-if="nowCurrent == 0">
|
<div
|
||||||
<Button type="primary" size="large" shape="circle" @click="selectTemplate(1)">
|
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>
|
<template #icon>
|
||||||
<ArrowRightOutlined />
|
<ArrowRightOutlined />
|
||||||
</template>
|
</template>
|
||||||
|
@ -49,60 +224,109 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- <ArrowLeftOutlined /> -->
|
<!-- <ArrowLeftOutlined /> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="c-item flex flex-col items-center" v-show="nowCurrent >= 1">
|
<div v-show="nowCurrent >= 1" class="c-item flex flex-col items-center">
|
||||||
<div class="s-t my-3">请选择磁贴模板</div>
|
<div class="s-t my-3">请选择磁贴模板</div>
|
||||||
<div class="flex flex-wrap h-[100%] gap-3 justify-center ">
|
<div class="flex h-[100%] flex-wrap justify-center gap-3">
|
||||||
<div class="template-item flex flex-col justify-center gap-1 items-center"
|
<div
|
||||||
:class="{ 'active': templateNum == index }" v-for="(item, index) in templateList" :key="index"
|
v-for="(item, index) in templateList"
|
||||||
@click="templateClickNum(index)">
|
:key="index"
|
||||||
<img :src="'/xbyt/' + item.img" class="w-[70px] h-[70px] object-contain">
|
: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 class="text-xs">{{ item.name }}</div>
|
||||||
|
|
||||||
<div class="active-icon" v-if="templateNum == index">
|
<div v-if="templateNum == index" class="active-icon">
|
||||||
<CheckCircleFilled style="color: hsl(var(--primary));font-size: 20px;"/>
|
<CheckCircleFilled
|
||||||
|
style="color: hsl(var(--primary)); font-size: 20px"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="opacity-0 template-item flex flex-col justify-center gap-1 items-center" style="cursor: default;"
|
<div
|
||||||
v-if="templateList.length % 3 == 2"></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">
|
<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
|
||||||
<div class="opacity-0 template-item flex flex-col justify-center gap-1 items-center" style="cursor: default;"></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>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex justify-between w-[100%] px-3 py-3" v-if="nowCurrent == 1">
|
<div
|
||||||
<Button type="primary" size="large" shape="circle" @click="selectTemplate(0)">
|
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>
|
<template #icon>
|
||||||
<ArrowLeftOutlined />
|
<ArrowLeftOutlined />
|
||||||
</template>
|
</template>
|
||||||
</Button>
|
</Button>
|
||||||
<Button type="primary" size="large" shape="circle" @click="selectTemplate(2)">
|
<Button
|
||||||
|
shape="circle"
|
||||||
|
size="large"
|
||||||
|
type="primary"
|
||||||
|
@click="selectTemplate(2)"
|
||||||
|
>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<ArrowRightOutlined />
|
<ArrowRightOutlined />
|
||||||
</template>
|
</template>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-item flex flex-col items-center" v-show="nowCurrent >= 2">
|
<div v-show="nowCurrent >= 2" class="c-item flex flex-col items-center">
|
||||||
<div class="s-t my-3">请填写磁贴信息</div>
|
<div class="s-t my-3">请填写磁贴信息</div>
|
||||||
<div class="form-box">
|
<div class="form-box">
|
||||||
<Form :wrapperCol="{ style: { width: '300px' } }" :labelCol="{ style: { width: '80px' } }">
|
<Form
|
||||||
<FormItem label="业务域" :rules="[{ required: true, message: '请输入业务域' }]">
|
:label-col="{ style: { width: '80px' } }"
|
||||||
<Input placeholder="请输入"></Input>
|
:wrapper-col="{ style: { width: '300px' } }"
|
||||||
|
>
|
||||||
|
<FormItem
|
||||||
|
:rules="[{ required: true, message: '请输入业务域' }]"
|
||||||
|
label="业务域"
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="适用范围" :rules="[{ required: true, message: '请选择适用范围' }]">
|
<FormItem
|
||||||
<Select placeholder="请选择"></Select>
|
:rules="[{ required: true, message: '请选择适用范围' }]"
|
||||||
|
label="适用范围"
|
||||||
|
>
|
||||||
|
<Select placeholder="请选择" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="编码" :rules="[{ required: true, message: '请输入编码' }]">
|
<FormItem
|
||||||
<Input placeholder="请输入"></Input>
|
:rules="[{ required: true, message: '请输入编码' }]"
|
||||||
|
label="编码"
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="标题" :rules="[{ required: true, message: '请输入标题' }]">
|
<FormItem
|
||||||
<Input placeholder="请输入"></Input>
|
:rules="[{ required: true, message: '请输入标题' }]"
|
||||||
|
label="标题"
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="链接地址" :rules="[{ required: true, message: '请输入链接地址' }]">
|
<FormItem
|
||||||
<Input placeholder="请输入"></Input>
|
:rules="[{ required: true, message: '请输入链接地址' }]"
|
||||||
|
label="链接地址"
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="数据源">
|
<FormItem label="数据源">
|
||||||
<Input placeholder="请输入"></Input>
|
<Input placeholder="请输入" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="磁贴大小">
|
<FormItem label="磁贴大小">
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4">
|
||||||
|
@ -123,33 +347,55 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="图标" :rules="[{ required: true, message: '请上传图标' }]">
|
<FormItem
|
||||||
<Input placeholder="请输入"></Input>
|
:rules="[{ required: true, message: '请上传图标' }]"
|
||||||
|
label="图标"
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="打开方式">
|
<FormItem label="打开方式">
|
||||||
<Select placeholder="请选择"></Select>
|
<Select placeholder="请选择" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="作者" :rules="[{ required: true, message: '请输入作者' }]">
|
<FormItem
|
||||||
<Input placeholder="请输入"></Input>
|
:rules="[{ required: true, message: '请输入作者' }]"
|
||||||
|
label="作者"
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="联系方式" :rules="[{ required: true, message: '请输入联系方式' }]">
|
<FormItem
|
||||||
|
:rules="[{ required: true, message: '请输入联系方式' }]"
|
||||||
|
label="联系方式"
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<Input placeholder="请输入"></Input>
|
<Input placeholder="请输入" />
|
||||||
<Checkbox>经过授权才可使用</Checkbox>
|
<Checkbox>经过授权才可使用</Checkbox>
|
||||||
</div>
|
</div>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="描述">
|
<FormItem label="描述">
|
||||||
<Textarea placeholder="请输入"></Textarea>
|
<Textarea placeholder="请输入" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Form>
|
</Form>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex justify-between w-[100%] px-3 py-3" v-if="nowCurrent == 2">
|
<div
|
||||||
<Button type="primary" size="large" shape="circle" @click="selectTemplate(1)">
|
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>
|
<template #icon>
|
||||||
<ArrowLeftOutlined />
|
<ArrowLeftOutlined />
|
||||||
</template>
|
</template>
|
||||||
</Button>
|
</Button>
|
||||||
<Button type="primary" size="large" shape="circle" @click="selectTemplate(3)">
|
<Button
|
||||||
|
shape="circle"
|
||||||
|
size="large"
|
||||||
|
type="primary"
|
||||||
|
@click="selectTemplate(3)"
|
||||||
|
>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<ArrowRightOutlined />
|
<ArrowRightOutlined />
|
||||||
</template>
|
</template>
|
||||||
|
@ -159,125 +405,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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">
|
<style scoped lang="scss">
|
||||||
.c-item {
|
.c-item {
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
flex: .3333;
|
flex: 0.3333;
|
||||||
height: calc(100vh - 150px);
|
height: calc(100vh - 150px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -302,4 +433,10 @@ let templateClickNum = (index: number) => {
|
||||||
max-height: 90%;
|
max-height: 90%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.next-box :deep(button) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
Loading…
Reference in New Issue