模板配置
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:
parent
cfaea1a469
commit
0682413c5f
|
@ -42,26 +42,26 @@ const PRESET = computed((): PresetItem[] => [
|
||||||
tip: '顶部栏仅用于显示全局信息或操作,不包含菜单。',
|
tip: '顶部栏仅用于显示全局信息或操作,不包含菜单。',
|
||||||
type: 'sidebar-topbar',
|
type: 'sidebar-topbar',
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
name: $t('preferences.vertical'),
|
// name: $t('preferences.vertical'),
|
||||||
tip: $t('preferences.verticalTip'),
|
// tip: $t('preferences.verticalTip'),
|
||||||
type: 'sidebar-nav',
|
// type: 'sidebar-nav',
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
name: $t('preferences.twoColumn'),
|
name: $t('preferences.twoColumn'),
|
||||||
tip: $t('preferences.twoColumnTip'),
|
tip: $t('preferences.twoColumnTip'),
|
||||||
type: 'sidebar-mixed-nav',
|
type: 'sidebar-mixed-nav',
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// name: $t('preferences.horizontal'),
|
name: $t('preferences.horizontal'),
|
||||||
// tip: $t('preferences.horizontalTip'),
|
tip: $t('preferences.horizontalTip'),
|
||||||
// type: 'header-nav',
|
type: 'header-nav',
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// name: $t('preferences.mixedMenu'),
|
name: $t('preferences.mixedMenu'),
|
||||||
// tip: $t('preferences.mixedMenuTip'),
|
tip: $t('preferences.mixedMenuTip'),
|
||||||
// type: 'mixed-nav',
|
type: 'mixed-nav',
|
||||||
// },
|
},
|
||||||
// {
|
// {
|
||||||
// name: $t('preferences.fullContent'),
|
// name: $t('preferences.fullContent'),
|
||||||
// tip: $t('preferences.fullContentTip'),
|
// tip: $t('preferences.fullContentTip'),
|
||||||
|
|
|
@ -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>
|
<template>
|
||||||
<Modal title="个人偏好" :visible="visible" @cancel="close" :width="600">
|
<Modal :visible="visible" :width="600" title="个人偏好" @cancel="close">
|
||||||
<Tabs v-model:activeKey="activeKey" centered tabPosition="left">
|
<Tabs v-model:active-key="activeKey" centered tab-position="left">
|
||||||
<TabPane key="1" tab="自定义菜单">
|
<TabPane key="1" tab="自定义菜单">
|
||||||
<div class="list-box flex flex-col gap-4 my-2">
|
<div class="list-box my-2 flex flex-col gap-4">
|
||||||
<div class="list-item-box flex justify-around items-center">
|
<div class="list-item-box flex items-center justify-around">
|
||||||
<div class="i-n w-100 shrink-0">
|
<div class="i-n w-100 shrink-0">
|
||||||
<FolderOutlined class="mr-2" />总部系统
|
<FolderOutlined class="mr-2" />总部系统
|
||||||
</div>
|
</div>
|
||||||
<div class="i-s">显示菜单:<Checkbox v-model:checked="checked"></Checkbox>
|
<div class="i-s">
|
||||||
|
显示菜单:<Checkbox v-model:checked="checked" />
|
||||||
</div>
|
</div>
|
||||||
<div class="i-n">排序:0</div>
|
<div class="i-n">排序:0</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="list-item-box flex justify-around items-center" v-for="(item, index) in otherRouter"
|
<div
|
||||||
:key="index">
|
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">
|
<div class="i-n w-100 shrink-0">
|
||||||
<FolderOutlined class="mr-2" />{{ item.name }}
|
<FolderOutlined class="mr-2" />{{ item.name }}
|
||||||
</div>
|
</div>
|
||||||
<div class="i-s">显示菜单:<Checkbox v-model:checked="checked"></Checkbox>
|
<div class="i-s">
|
||||||
|
显示菜单:<Checkbox v-model:checked="checked" />
|
||||||
</div>
|
</div>
|
||||||
<div class="i-n">排序:{{ index + 1 }}</div>
|
<div class="i-n">排序:{{ index + 1 }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
<TabPane key="2" tab="菜单区设置" force-render>
|
<TabPane key="2" force-render tab="菜单区设置">
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
<Form style="width: 450px;">
|
<Form style="width: 450px">
|
||||||
<FormItem label="菜单栏默认打开:" class="mb-3">
|
<FormItem class="mb-3" label="菜单栏默认打开:">
|
||||||
<Switch v-model:checked="menuOpen" />
|
<Switch v-model:checked="menuOpen" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="深色侧边栏:" class="mb-3">
|
<FormItem class="mb-3" label="深色侧边栏:">
|
||||||
<Switch v-model:checked="menuTheme" />
|
<Switch v-model:checked="menuTheme" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="布局:" class="mb-3">
|
<FormItem class="mb-3" label="布局:">
|
||||||
<layout v-model="layoutVlaue"></layout>
|
<layout v-model="layoutVlaue" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Form>
|
</Form>
|
||||||
</div>
|
</div>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
<TabPane key="3" tab="主题设置">
|
<TabPane key="3" tab="主题设置">
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
|
<Form style="width: 450px">
|
||||||
<Form style="width: 450px;">
|
<FormItem class="mb-3" label="默认主题:">
|
||||||
<FormItem label="默认主题:" class="mb-3">
|
<theme v-model="themeValue" />
|
||||||
<theme v-model="themeValue"></theme>
|
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="内置主题:" class="mb-3">
|
<FormItem class="mb-3" label="内置主题:">
|
||||||
<builtin :isDark="true" v-model="builtinValue"></builtin>
|
<builtin v-model="builtinValue" :is-dark="true" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Form>
|
</Form>
|
||||||
</div>
|
</div>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
<TabPane key="4" tab="消息语音">
|
<TabPane key="4" tab="消息语音">
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
<Form style="width: 450px;">
|
<Form style="width: 450px">
|
||||||
<FormItem label="消息语音提醒:" class="mb-3">
|
<FormItem class="mb-3" label="消息语音提醒:">
|
||||||
<Switch v-model:checked="checked" class="ml-3" />
|
<Switch v-model:checked="checked" class="ml-3" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="提示语言选择列表:" class="mb-3">
|
<FormItem class="mb-3" label="提示语言选择列表:">
|
||||||
<Select ref="select" class="ml-3" v-model:value="value1" :options="options1"></Select>
|
<Select
|
||||||
|
ref="select"
|
||||||
|
v-model:value="value1"
|
||||||
|
:options="options1"
|
||||||
|
class="ml-3"
|
||||||
|
/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="提示语音选择文件地址" class="mb-3">
|
<FormItem class="mb-3" label="提示语音选择文件地址">
|
||||||
<div class="ml-3 flex flex-col gap-2">
|
<div class="ml-3 flex flex-col gap-2">
|
||||||
无
|
无
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
|
@ -67,78 +151,15 @@
|
||||||
<Button type="primary">上传</Button>
|
<Button type="primary">上传</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Form>
|
</Form>
|
||||||
</div>
|
</div>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
<template #footer>
|
<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="back" @click="close">取消</Button>
|
||||||
<Button key="submit" type="primary" @click="close">确定</Button>
|
<Button key="submit" type="primary" @click="close">确定</Button>
|
||||||
</template>
|
</template>
|
||||||
</Modal>
|
</Modal>
|
||||||
</template>
|
</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>
|
<script lang="ts" setup>
|
||||||
import { reactive, watch, ref } from 'vue'
|
import { reactive, ref, watch } 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 { preferences } from '@vben/preferences';
|
import { preferences } from '@vben/preferences';
|
||||||
|
|
||||||
watch(() => preferences.theme.mode, (n: any) => {
|
import {
|
||||||
VxeUI.setTheme(n)
|
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,
|
deep: true,
|
||||||
immediate: true
|
immediate: true,
|
||||||
})
|
},
|
||||||
|
);
|
||||||
|
|
||||||
interface RowVO {
|
interface RowVO {
|
||||||
id: number
|
id: number;
|
||||||
title: string
|
title: string;
|
||||||
taskName: string
|
taskName: string;
|
||||||
handle: string
|
handle: string;
|
||||||
attention: string
|
attention: string;
|
||||||
systemName: string
|
systemName: string;
|
||||||
time: string
|
time: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const gridOptions = reactive<VxeGridProps<RowVO>>({
|
const gridOptions = reactive<VxeGridProps<RowVO>>({
|
||||||
|
@ -99,52 +50,180 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
|
||||||
loading: true,
|
loading: true,
|
||||||
height: 'auto',
|
height: 'auto',
|
||||||
columnConfig: {
|
columnConfig: {
|
||||||
resizable: true
|
resizable: true,
|
||||||
},
|
},
|
||||||
columns: [
|
columns: [
|
||||||
{ field: 'title', title: '标题' },
|
{ field: 'title', title: '标题', slots: { default: 'title_default' } },
|
||||||
{ field: 'taskName', title: '任务名称' },
|
{ field: 'taskName', title: '任务名称' },
|
||||||
{ field: 'systemName', title: '系统名称' },
|
{ field: 'systemName', title: '系统名称' },
|
||||||
{ field: 'time', title: '接收时间', sortable: true },
|
{ field: 'time', title: '接收时间', sortable: true },
|
||||||
{ field: 'handle', title: '操作' },
|
{ field: 'handle', title: '操作' },
|
||||||
{ field: 'attention', title: '关注', slots: { default: 'attention_default' } },
|
{
|
||||||
|
field: 'attention',
|
||||||
|
title: '关注',
|
||||||
|
slots: { default: 'attention_default' },
|
||||||
|
},
|
||||||
],
|
],
|
||||||
data: [
|
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: 10_001,
|
||||||
{ id: 10002, time: '2023年12月1日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
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({
|
const tablePage = reactive({
|
||||||
total: 0,
|
total: 0,
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
pageSize: 10
|
pageSize: 10,
|
||||||
})
|
});
|
||||||
const findList = () => {
|
const findList = () => {
|
||||||
gridOptions.loading = true
|
gridOptions.loading = true;
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
gridOptions.loading = false
|
gridOptions.loading = false;
|
||||||
tablePage.total = 10
|
tablePage.total = 10;
|
||||||
gridOptions.data = [
|
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: 10_001,
|
||||||
{ 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' },
|
time: '2023年12月24日',
|
||||||
{ id: 10001, time: '2024年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
title: 'Test1222',
|
||||||
{ 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' },
|
taskName: 'Develop',
|
||||||
{ id: 10001, time: '2024年12月24日', title: 'Test1222', taskName: 'Develop', handle: 'Man', attention: 'test abc', systemName: '12313' },
|
handle: 'Man',
|
||||||
{ 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' },
|
attention: 'test abc',
|
||||||
]
|
systemName: '12313',
|
||||||
}, 300)
|
},
|
||||||
}
|
{
|
||||||
|
id: 10_001,
|
||||||
findList()
|
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({
|
const state = reactive({
|
||||||
indeterminate: true,
|
indeterminate: true,
|
||||||
checkAll: false,
|
checkAll: false,
|
||||||
|
@ -159,23 +238,133 @@ const onCheckAllChange = (e: any) => {
|
||||||
};
|
};
|
||||||
watch(
|
watch(
|
||||||
() => state.checkedList,
|
() => state.checkedList,
|
||||||
val => {
|
(val) => {
|
||||||
state.indeterminate = !!val.length && val.length < plainOptions.length;
|
state.indeterminate = val.length > 0 && val.length < plainOptions.length;
|
||||||
state.checkAll = val.length === plainOptions.length;
|
state.checkAll = val.length === plainOptions.length;
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
let selectClass = ref('全部')
|
const selectClass = ref('全部');
|
||||||
|
|
||||||
let selectedClick = (item: string) => {
|
const selectedClick = (item: string) => {
|
||||||
selectClass.value = item
|
selectClass.value = item;
|
||||||
}
|
};
|
||||||
|
|
||||||
let selectTodo = ref('');
|
const selectTodo = ref('');
|
||||||
let selectTodoClick = (item: string) => {
|
const selectTodoClick = (item: string) => {
|
||||||
selectTodo.value = item
|
selectTodo.value = item;
|
||||||
}
|
};
|
||||||
</script>
|
</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">
|
<style lang="scss">
|
||||||
@import 'vxe-table/lib/style.css';
|
@import 'vxe-table/lib/style.css';
|
||||||
|
|
||||||
|
|
|
@ -592,7 +592,7 @@ const formState = reactive({
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #content>
|
<template #content>
|
||||||
<div class="shop-seach flex items-center">
|
<div class="shop-seach mb-2 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>
|
||||||
|
|
Loading…
Reference in New Issue