模板配置
Frontend CI/CD / build (web-office) (push) Failing after 10s
Details
Frontend CI/CD / build (web-office) (push) Failing after 10s
Details
This commit is contained in:
hujiale
parent
cfaea1a469
commit
0682413c5f
|
|
@ -42,26 +42,26 @@ const PRESET = computed((): PresetItem[] => [
|
|||
tip: '顶部栏仅用于显示全局信息或操作，不包含菜单。',
|
||||
type: 'sidebar-topbar',
|
||||
},
|
||||
{
|
||||
name: $t('preferences.vertical'),
|
||||
tip: $t('preferences.verticalTip'),
|
||||
type: 'sidebar-nav',
|
||||
},
|
||||
// {
|
||||
// name: $t('preferences.vertical'),
|
||||
// tip: $t('preferences.verticalTip'),
|
||||
// type: 'sidebar-nav',
|
||||
// },
|
||||
{
|
||||
name: $t('preferences.twoColumn'),
|
||||
tip: $t('preferences.twoColumnTip'),
|
||||
type: 'sidebar-mixed-nav',
|
||||
},
|
||||
// {
|
||||
// name: $t('preferences.horizontal'),
|
||||
// tip: $t('preferences.horizontalTip'),
|
||||
// type: 'header-nav',
|
||||
// },
|
||||
// {
|
||||
// name: $t('preferences.mixedMenu'),
|
||||
// tip: $t('preferences.mixedMenuTip'),
|
||||
// type: 'mixed-nav',
|
||||
// },
|
||||
{
|
||||
name: $t('preferences.horizontal'),
|
||||
tip: $t('preferences.horizontalTip'),
|
||||
type: 'header-nav',
|
||||
},
|
||||
{
|
||||
name: $t('preferences.mixedMenu'),
|
||||
tip: $t('preferences.mixedMenuTip'),
|
||||
type: 'mixed-nav',
|
||||
},
|
||||
// {
|
||||
// name: $t('preferences.fullContent'),
|
||||
// tip: $t('preferences.fullContentTip'),
|
||||
|
|
|
|||
|
|
@ -1,65 +1,149 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
import { preferences, updatePreferences } from '@vben/preferences';
|
||||
|
||||
import { FolderOutlined } from '@ant-design/icons-vue';
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Form,
|
||||
FormItem,
|
||||
Modal,
|
||||
Select,
|
||||
Switch,
|
||||
TabPane,
|
||||
Tabs,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { otherRouter } from '#/router/routes/modules/linkdata';
|
||||
|
||||
import builtin from './builtin.vue';
|
||||
import layout from './layout.vue';
|
||||
import theme from './theme.vue';
|
||||
|
||||
const layoutVlaue = ref(preferences.app.layout);
|
||||
watch(layoutVlaue, (n, o) => {
|
||||
updatePreferences({
|
||||
app: {
|
||||
layout: n,
|
||||
},
|
||||
});
|
||||
});
|
||||
const themeValue = ref(preferences.theme.mode);
|
||||
watch(themeValue, (n, o) => {
|
||||
updatePreferences({
|
||||
theme: {
|
||||
mode: n,
|
||||
},
|
||||
});
|
||||
});
|
||||
const builtinValue = ref(preferences.theme.builtinType);
|
||||
watch(builtinValue, (n, o) => {
|
||||
updatePreferences({
|
||||
theme: {
|
||||
builtinType: n,
|
||||
},
|
||||
});
|
||||
});
|
||||
const menuOpen = ref(preferences.sidebar.enable);
|
||||
watch(menuOpen, (n, o) => {
|
||||
updatePreferences({
|
||||
sidebar: {
|
||||
enable: n,
|
||||
},
|
||||
});
|
||||
});
|
||||
const menuTheme = ref(preferences.theme.semiDarkSidebar);
|
||||
watch(menuTheme, (n, o) => {
|
||||
updatePreferences({
|
||||
theme: {
|
||||
semiDarkSidebar: n,
|
||||
},
|
||||
});
|
||||
});
|
||||
const value1 = ref('');
|
||||
const activeKey = ref('1');
|
||||
const checked = ref(true);
|
||||
const options1 = [];
|
||||
|
||||
const visible = defineModel<boolean>('visible');
|
||||
|
||||
const close = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<Modal title="个人偏好" :visible="visible" @cancel="close" :width="600">
|
||||
<Tabs v-model:activeKey="activeKey" centered tabPosition="left">
|
||||
<Modal :visible="visible" :width="600" title="个人偏好" @cancel="close">
|
||||
<Tabs v-model:active-key="activeKey" centered tab-position="left">
|
||||
<TabPane key="1" tab="自定义菜单">
|
||||
<div class="list-box flex flex-col gap-4 my-2">
|
||||
<div class="list-item-box flex justify-around items-center">
|
||||
<div class="list-box my-2 flex flex-col gap-4">
|
||||
<div class="list-item-box flex items-center justify-around">
|
||||
<div class="i-n w-100 shrink-0">
|
||||
<FolderOutlined class="mr-2" />总部系统
|
||||
</div>
|
||||
<div class="i-s">显示菜单：<Checkbox v-model:checked="checked"></Checkbox>
|
||||
<div class="i-s">
|
||||
显示菜单：<Checkbox v-model:checked="checked" />
|
||||
</div>
|
||||
<div class="i-n">排序：0</div>
|
||||
</div>
|
||||
<div class="list-item-box flex justify-around items-center" v-for="(item, index) in otherRouter"
|
||||
:key="index">
|
||||
<div
|
||||
v-for="(item, index) in otherRouter"
|
||||
:key="index"
|
||||
class="list-item-box flex items-center justify-around"
|
||||
>
|
||||
<div class="i-n w-100 shrink-0">
|
||||
<FolderOutlined class="mr-2" />{{ item.name }}
|
||||
</div>
|
||||
<div class="i-s">显示菜单：<Checkbox v-model:checked="checked"></Checkbox>
|
||||
<div class="i-s">
|
||||
显示菜单：<Checkbox v-model:checked="checked" />
|
||||
</div>
|
||||
<div class="i-n">排序：{{ index + 1 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane key="2" tab="菜单区设置" force-render>
|
||||
<TabPane key="2" force-render tab="菜单区设置">
|
||||
<div class="flex justify-center">
|
||||
<Form style="width: 450px;">
|
||||
<FormItem label="菜单栏默认打开：" class="mb-3">
|
||||
<Form style="width: 450px">
|
||||
<FormItem class="mb-3" label="菜单栏默认打开：">
|
||||
<Switch v-model:checked="menuOpen" />
|
||||
</FormItem>
|
||||
<FormItem label="深色侧边栏：" class="mb-3">
|
||||
<FormItem class="mb-3" label="深色侧边栏：">
|
||||
<Switch v-model:checked="menuTheme" />
|
||||
</FormItem>
|
||||
<FormItem label="布局：" class="mb-3">
|
||||
<layout v-model="layoutVlaue"></layout>
|
||||
<FormItem class="mb-3" label="布局：">
|
||||
<layout v-model="layoutVlaue" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane key="3" tab="主题设置">
|
||||
<div class="flex justify-center">
|
||||
|
||||
<Form style="width: 450px;">
|
||||
<FormItem label="默认主题：" class="mb-3">
|
||||
<theme v-model="themeValue"></theme>
|
||||
<Form style="width: 450px">
|
||||
<FormItem class="mb-3" label="默认主题：">
|
||||
<theme v-model="themeValue" />
|
||||
</FormItem>
|
||||
<FormItem label="内置主题：" class="mb-3">
|
||||
<builtin :isDark="true" v-model="builtinValue"></builtin>
|
||||
<FormItem class="mb-3" label="内置主题：">
|
||||
<builtin v-model="builtinValue" :is-dark="true" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane key="4" tab="消息语音">
|
||||
<div class="flex justify-center">
|
||||
<Form style="width: 450px;">
|
||||
<FormItem label="消息语音提醒：" class="mb-3">
|
||||
<Form style="width: 450px">
|
||||
<FormItem class="mb-3" label="消息语音提醒：">
|
||||
<Switch v-model:checked="checked" class="ml-3" />
|
||||
</FormItem>
|
||||
<FormItem label="提示语言选择列表：" class="mb-3">
|
||||
<Select ref="select" class="ml-3" v-model:value="value1" :options="options1"></Select>
|
||||
<FormItem class="mb-3" label="提示语言选择列表：">
|
||||
<Select
|
||||
ref="select"
|
||||
v-model:value="value1"
|
||||
:options="options1"
|
||||
class="ml-3"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="提示语音选择文件地址" class="mb-3">
|
||||
<FormItem class="mb-3" label="提示语音选择文件地址">
|
||||
<div class="ml-3 flex flex-col gap-2">
|
||||
无
|
||||
<div class="flex gap-2">
|
||||
|
|
@ -67,78 +151,15 @@
|
|||
<Button type="primary">上传</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
<template #footer>
|
||||
<Button type="link" key="back" @click="close">恢复</Button>
|
||||
<Button key="back" type="link" @click="close">恢复</Button>
|
||||
<Button key="back" @click="close">取消</Button>
|
||||
<Button key="submit" type="primary" @click="close">确定</Button>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Modal, Tabs, Form, FormItem, Select, Button, TabPane, Checkbox, Switch, Radio, RadioGroup } from 'ant-design-vue';
|
||||
import { FolderOutlined } from '@ant-design/icons-vue';
|
||||
import layout from './layout.vue';
|
||||
import theme from './theme.vue';
|
||||
import builtin from './builtin.vue';
|
||||
import { ref, watch } from 'vue';
|
||||
import { otherRouter } from "#/router/routes/modules/linkdata"
|
||||
import { preferences, updatePreferences } from '@vben/preferences';
|
||||
let layoutVlaue = ref(preferences.app.layout)
|
||||
watch(layoutVlaue, (n, o) => {
|
||||
updatePreferences({
|
||||
app: {
|
||||
layout: n
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
let themeValue = ref(preferences.theme.mode);
|
||||
watch(themeValue, (n, o) => {
|
||||
updatePreferences({
|
||||
theme: {
|
||||
mode: n
|
||||
}
|
||||
})
|
||||
})
|
||||
let builtinValue = ref(preferences.theme.builtinType);
|
||||
watch(builtinValue, (n, o) => {
|
||||
updatePreferences({
|
||||
theme: {
|
||||
builtinType: n
|
||||
}
|
||||
})
|
||||
})
|
||||
let menuOpen = ref(preferences.sidebar.enable)
|
||||
watch(menuOpen, (n, o) => {
|
||||
updatePreferences({
|
||||
sidebar: {
|
||||
enable: n
|
||||
}
|
||||
})
|
||||
})
|
||||
let menuTheme = ref(preferences.theme.semiDarkSidebar)
|
||||
watch(menuTheme, (n, o) => {
|
||||
updatePreferences({
|
||||
theme: {
|
||||
semiDarkSidebar: n
|
||||
}
|
||||
})
|
||||
})
|
||||
let value1 = ref('')
|
||||
let activeKey = ref('1');
|
||||
let checked = ref(true)
|
||||
let options1 = []
|
||||
|
||||
const visible = defineModel<boolean>('visible');
|
||||
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -1,96 +1,47 @@
|
|||
<template>
|
||||
<div style="width: 100%;height: 100%;" class="flex flex-col">
|
||||
<div class="head-top-box flex justify-between mb-3 titlt-top">
|
||||
<div class="flex items-center gap-10">
|
||||
<Badge :count="9" :offset="[6, -3]">
|
||||
<div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'db'}" @click="selectTodoClick('db')">
|
||||
<CalendarOutlined />待办
|
||||
</div>
|
||||
</Badge>
|
||||
<div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'yb'}" @click="selectTodoClick('yb')">
|
||||
<CarryOutOutlined />已办
|
||||
</div>
|
||||
<Badge :count="9" :offset="[6, -3]">
|
||||
<div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'dy'}" @click="selectTodoClick('dy')">
|
||||
<ExceptionOutlined />待阅
|
||||
</div>
|
||||
</Badge>
|
||||
<div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'yy'}" @click="selectTodoClick('yy')">
|
||||
<FileDoneOutlined />已阅
|
||||
</div>
|
||||
<div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'gz'}" @click="selectTodoClick('gz')">
|
||||
<StarOutlined />关注
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<InputSearch placeholder="任务查询" style="width: 200px" />
|
||||
<SettingOutlined class="cursor-pointer" @click="userSet = true" />
|
||||
<ReloadOutlined class="cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
<ul class="f-btn-box">
|
||||
<li>
|
||||
<Button :type="selectClass == '全部' ? 'primary' : 'default'" @click="selectedClick('全部')">全部</Button>
|
||||
</li>
|
||||
<li v-for="(item) in plainOptions" :key="item" @click="selectedClick(item)">
|
||||
<Button :type="selectClass == item ? 'primary' : 'default'">{{ item }}</Button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<vxe-grid v-bind="gridOptions">
|
||||
<template #attention_default="{ row }">
|
||||
<StarOutlined class="text-lg"></StarOutlined>
|
||||
</template>
|
||||
<template #pager>
|
||||
<div class="py-2 flex justify-end">
|
||||
<Pagination size="small" :total="1000" show-size-changer show-quick-jumper />
|
||||
</div>
|
||||
</template>
|
||||
</vxe-grid>
|
||||
</div>
|
||||
|
||||
<Modal v-model:open="userSet" title="个人设置" :okText="'提交'" :width="800">
|
||||
<div class="flex gap-2">
|
||||
<div class="shrink-0">接收消息系统：</div>
|
||||
<div>
|
||||
<Checkbox v-model:checked="state.checkAll" :indeterminate="state.indeterminate" @change="onCheckAllChange">
|
||||
全选
|
||||
</Checkbox>
|
||||
<CheckboxGroup v-model:value="state.checkedList">
|
||||
<div class="flex flex-wrap gap-2 mt-2">
|
||||
<Checkbox :value="item" v-for="(item) in plainOptions" :key="item">
|
||||
<div class="w-[85px] truncate">{{ item }}</div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
</CheckboxGroup>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, watch, ref } from 'vue'
|
||||
import { type VxeGridProps, VxeUI } from 'vxe-table'
|
||||
import { CalendarOutlined, CarryOutOutlined, StarOutlined, ExceptionOutlined, FileDoneOutlined, SettingOutlined, ReloadOutlined } from '@ant-design/icons-vue';
|
||||
import { InputSearch, Pagination, Badge, Modal, Checkbox, CheckboxGroup, Button } from 'ant-design-vue';
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
|
||||
import { preferences } from '@vben/preferences';
|
||||
|
||||
watch(() => preferences.theme.mode, (n: any) => {
|
||||
VxeUI.setTheme(n)
|
||||
}, {
|
||||
import {
|
||||
CalendarOutlined,
|
||||
CarryOutOutlined,
|
||||
ExceptionOutlined,
|
||||
FileDoneOutlined,
|
||||
ReloadOutlined,
|
||||
SettingOutlined,
|
||||
StarOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Checkbox,
|
||||
CheckboxGroup,
|
||||
InputSearch,
|
||||
Modal,
|
||||
Pagination,
|
||||
} from 'ant-design-vue';
|
||||
import { type VxeGridProps, VxeUI } from 'vxe-table';
|
||||
|
||||
watch(
|
||||
() => preferences.theme.mode,
|
||||
(n: any) => {
|
||||
VxeUI.setTheme(n);
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
})
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
interface RowVO {
|
||||
id: number
|
||||
title: string
|
||||
taskName: string
|
||||
handle: string
|
||||
attention: string
|
||||
systemName: string
|
||||
time: string
|
||||
id: number;
|
||||
title: string;
|
||||
taskName: string;
|
||||
handle: string;
|
||||
attention: string;
|
||||
systemName: string;
|
||||
time: string;
|
||||
}
|
||||
|
||||
const gridOptions = reactive<VxeGridProps<RowVO>>({
|
||||
|
|
@ -99,52 +50,180 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
|
|||
loading: true,
|
||||
height: 'auto',
|
||||
columnConfig: {
|
||||
resizable: true
|
||||
resizable: true,
|
||||
},
|
||||
columns: [
|
||||
{ field: 'title', title: '标题' },
|
||||
{ field: 'title', title: '标题', slots: { default: 'title_default' } },
|
||||
{ field: 'taskName', title: '任务名称' },
|
||||
{ field: 'systemName', title: '系统名称' },
|
||||
{ field: 'time', title: '接收时间', sortable: true },
|
||||
{ field: 'handle', title: '操作' },
|
||||
{ field: 'attention', title: '关注', slots: { default: 'attention_default' } },
|
||||
{
|
||||
field: 'attention',
|
||||
title: '关注',
|
||||
slots: { default: 'attention_default' },
|
||||
},
|
||||
],
|
||||
data: [
|
||||
{ id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
||||
{ id: 10001, time: '2024年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
||||
{ id: 10002, time: '2023年12月1日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
||||
]
|
||||
})
|
||||
{
|
||||
id: 10_001,
|
||||
time: '2023年12月24日',
|
||||
title: 'Test1222',
|
||||
taskName: 'Develop',
|
||||
handle: 'Man',
|
||||
attention: 'test abc',
|
||||
systemName: '12313',
|
||||
},
|
||||
{
|
||||
id: 10_001,
|
||||
time: '2024年12月24日',
|
||||
title: 'Test1222',
|
||||
taskName: 'Develop',
|
||||
handle: 'Man',
|
||||
attention: 'test abc',
|
||||
systemName: '12313',
|
||||
},
|
||||
{
|
||||
id: 10_002,
|
||||
time: '2023年12月1日',
|
||||
title: 'Test1222',
|
||||
taskName: 'Develop',
|
||||
handle: 'Man',
|
||||
attention: 'test abc',
|
||||
systemName: '12313',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const tablePage = reactive({
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
pageSize: 10,
|
||||
});
|
||||
const findList = () => {
|
||||
gridOptions.loading = true
|
||||
gridOptions.loading = true;
|
||||
setTimeout(() => {
|
||||
gridOptions.loading = false
|
||||
tablePage.total = 10
|
||||
gridOptions.loading = false;
|
||||
tablePage.total = 10;
|
||||
gridOptions.data = [
|
||||
{ id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
||||
{ id: 10001, time: '2024年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
||||
{ id: 10002, time: '2023年12月1日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' }, { id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
||||
{ id: 10001, time: '2024年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
||||
{ id: 10002, time: '2023年12月1日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' }, { id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
||||
{ id: 10001, time: '2024年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
||||
{ id: 10002, time: '2023年12月1日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' }, { id: 10001, time: '2023年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
||||
]
|
||||
}, 300)
|
||||
}
|
||||
|
||||
findList()
|
||||
{
|
||||
id: 10_001,
|
||||
time: '2023年12月24日',
|
||||
title: 'Test1222',
|
||||
taskName: 'Develop',
|
||||
handle: 'Man',
|
||||
attention: 'test abc',
|
||||
systemName: '12313',
|
||||
},
|
||||
{
|
||||
id: 10_001,
|
||||
time: '2024年12月24日',
|
||||
title: 'Test1222',
|
||||
taskName: 'Develop',
|
||||
handle: 'Man',
|
||||
attention: 'test abc',
|
||||
systemName: '12313',
|
||||
},
|
||||
{
|
||||
id: 10_002,
|
||||
time: '2023年12月1日',
|
||||
title: 'Test1222',
|
||||
taskName: 'Develop',
|
||||
handle: 'Man',
|
||||
attention: 'test abc',
|
||||
systemName: '12313',
|
||||
},
|
||||
{
|
||||
id: 10_001,
|
||||
time: '2023年12月24日',
|
||||
title: 'Test1222',
|
||||
taskName: 'Develop',
|
||||
handle: 'Man',
|
||||
attention: 'test abc',
|
||||
systemName: '12313',
|
||||
},
|
||||
{
|
||||
id: 10_001,
|
||||
time: '2024年12月24日',
|
||||
title: 'Test1222',
|
||||
taskName: 'Develop',
|
||||
handle: 'Man',
|
||||
attention: 'test abc',
|
||||
systemName: '12313',
|
||||
},
|
||||
{
|
||||
id: 10_002,
|
||||
time: '2023年12月1日',
|
||||
title: 'Test1222',
|
||||
taskName: 'Develop',
|
||||
handle: 'Man',
|
||||
attention: 'test abc',
|
||||
systemName: '12313',
|
||||
},
|
||||
{
|
||||
id: 10_001,
|
||||
time: '2023年12月24日',
|
||||
title: 'Test1222',
|
||||
taskName: 'Develop',
|
||||
handle: 'Man',
|
||||
attention: 'test abc',
|
||||
systemName: '12313',
|
||||
},
|
||||
{
|
||||
id: 10_001,
|
||||
time: '2024年12月24日',
|
||||
title: 'Test1222',
|
||||
taskName: 'Develop',
|
||||
handle: 'Man',
|
||||
attention: 'test abc',
|
||||
systemName: '12313',
|
||||
},
|
||||
{
|
||||
id: 10_002,
|
||||
time: '2023年12月1日',
|
||||
title: 'Test1222',
|
||||
taskName: 'Develop',
|
||||
handle: 'Man',
|
||||
attention: 'test abc',
|
||||
systemName: '12313',
|
||||
},
|
||||
{
|
||||
id: 10_001,
|
||||
time: '2023年12月24日',
|
||||
title: 'Test1222',
|
||||
taskName: 'Develop',
|
||||
handle: 'Man',
|
||||
attention: 'test abc',
|
||||
systemName: '12313',
|
||||
},
|
||||
];
|
||||
}, 300);
|
||||
};
|
||||
|
||||
findList();
|
||||
|
||||
// 个人设置弹层
|
||||
let userSet = ref(false);
|
||||
const userSet = ref(false);
|
||||
|
||||
const plainOptions = ['公文系统', '合同管理', '物资管理', '督查管理', '市场管理', '电子考勤', '财务管理信息通知', '费用报销', '设备管理', '工程造价', '员工诉求', '即完即结', '科技研发', '标准化系统', '纪检监督系统', '后勤管理系统', '信用风险系统'];
|
||||
const plainOptions = [
|
||||
'公文系统',
|
||||
'合同管理',
|
||||
'物资管理',
|
||||
'督查管理',
|
||||
'市场管理',
|
||||
'电子考勤',
|
||||
'财务管理信息通知',
|
||||
'费用报销',
|
||||
'设备管理',
|
||||
'工程造价',
|
||||
'员工诉求',
|
||||
'即完即结',
|
||||
'科技研发',
|
||||
'标准化系统',
|
||||
'纪检监督系统',
|
||||
'后勤管理系统',
|
||||
'信用风险系统',
|
||||
];
|
||||
const state = reactive({
|
||||
indeterminate: true,
|
||||
checkAll: false,
|
||||
|
|
@ -159,23 +238,133 @@ const onCheckAllChange = (e: any) => {
|
|||
};
|
||||
watch(
|
||||
() => state.checkedList,
|
||||
val => {
|
||||
state.indeterminate = !!val.length && val.length < plainOptions.length;
|
||||
(val) => {
|
||||
state.indeterminate = val.length > 0 && val.length < plainOptions.length;
|
||||
state.checkAll = val.length === plainOptions.length;
|
||||
},
|
||||
);
|
||||
|
||||
let selectClass = ref('全部')
|
||||
const selectClass = ref('全部');
|
||||
|
||||
let selectedClick = (item: string) => {
|
||||
selectClass.value = item
|
||||
}
|
||||
const selectedClick = (item: string) => {
|
||||
selectClass.value = item;
|
||||
};
|
||||
|
||||
let selectTodo = ref('');
|
||||
let selectTodoClick = (item: string) => {
|
||||
selectTodo.value = item
|
||||
}
|
||||
const selectTodo = ref('');
|
||||
const selectTodoClick = (item: string) => {
|
||||
selectTodo.value = item;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col" style="width: 100%; height: 100%">
|
||||
<div class="head-top-box titlt-top mb-3 flex justify-between">
|
||||
<div class="flex items-center gap-10">
|
||||
<Badge :count="9" :offset="[6, -3]">
|
||||
<div
|
||||
:class="{ active: selectTodo == 'db' }"
|
||||
class="flex cursor-pointer items-center gap-1"
|
||||
@click="selectTodoClick('db')"
|
||||
>
|
||||
<CalendarOutlined />待办
|
||||
</div>
|
||||
</Badge>
|
||||
<div
|
||||
:class="{ active: selectTodo == 'yb' }"
|
||||
class="flex cursor-pointer items-center gap-1"
|
||||
@click="selectTodoClick('yb')"
|
||||
>
|
||||
<CarryOutOutlined />已办
|
||||
</div>
|
||||
<Badge :count="9" :offset="[6, -3]">
|
||||
<div
|
||||
:class="{ active: selectTodo == 'dy' }"
|
||||
class="flex cursor-pointer items-center gap-1"
|
||||
@click="selectTodoClick('dy')"
|
||||
>
|
||||
<ExceptionOutlined />待阅
|
||||
</div>
|
||||
</Badge>
|
||||
<div
|
||||
:class="{ active: selectTodo == 'yy' }"
|
||||
class="flex cursor-pointer items-center gap-1"
|
||||
@click="selectTodoClick('yy')"
|
||||
>
|
||||
<FileDoneOutlined />已阅
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: selectTodo == 'gz' }"
|
||||
class="flex cursor-pointer items-center gap-1"
|
||||
@click="selectTodoClick('gz')"
|
||||
>
|
||||
<StarOutlined />关注
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<InputSearch placeholder="任务查询" style="width: 200px" />
|
||||
<SettingOutlined class="cursor-pointer" @click="userSet = true" />
|
||||
<ReloadOutlined class="cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
<ul class="f-btn-box">
|
||||
<li>
|
||||
<Button
|
||||
:type="selectClass == '全部' ? 'primary' : 'default'"
|
||||
@click="selectedClick('全部')"
|
||||
>
|
||||
全部
|
||||
</Button>
|
||||
</li>
|
||||
<li v-for="item in plainOptions" :key="item" @click="selectedClick(item)">
|
||||
<Button :type="selectClass == item ? 'primary' : 'default'">
|
||||
{{ item }}
|
||||
</Button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<vxe-grid v-bind="gridOptions">
|
||||
<template #attention_default="{ row }">
|
||||
<StarOutlined class="text-lg" />
|
||||
</template>
|
||||
<template #title_default="{ row }">
|
||||
<Button style="padding: 0" type="link">{{ row.title }}</Button>
|
||||
</template>
|
||||
<template #pager>
|
||||
<div class="flex justify-end py-2">
|
||||
<Pagination
|
||||
:total="1000"
|
||||
show-quick-jumper
|
||||
show-size-changer
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</vxe-grid>
|
||||
</div>
|
||||
|
||||
<Modal v-model:open="userSet" :width="800" ok-text="提交" title="个人设置">
|
||||
<div class="flex gap-2">
|
||||
<div class="shrink-0">接收消息系统：</div>
|
||||
<div>
|
||||
<Checkbox
|
||||
v-model:checked="state.checkAll"
|
||||
:indeterminate="state.indeterminate"
|
||||
@change="onCheckAllChange"
|
||||
>
|
||||
全选
|
||||
</Checkbox>
|
||||
<CheckboxGroup v-model:value="state.checkedList">
|
||||
<div class="mt-2 flex flex-wrap gap-2">
|
||||
<Checkbox v-for="item in plainOptions" :key="item" :value="item">
|
||||
<div class="w-[85px] truncate">{{ item }}</div>
|
||||
</Checkbox>
|
||||
</div>
|
||||
</CheckboxGroup>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
@import 'vxe-table/lib/style.css';
|
||||
|
||||
|
|
|
|||
|
|
@ -592,7 +592,7 @@ const formState = reactive({
|
|||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="shop-seach flex items-center">
|
||||
<div class="shop-seach mb-2 flex items-center">
|
||||
<Select v-model:value="shopFlotter">
|
||||
<SelectOption value="1">全部应用磁贴</SelectOption>
|
||||
<SelectOption value="2">Option2</SelectOption>
|
||||
|
|
|
|||
Loading…
Reference in New Issue