feat: 多tag实现
parent
4aa406a531
commit
7fac7c019d
@ -0,0 +1,5 @@
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="guanbi">
|
||||
<path id="guanbi_2" d="M6.07143 5L9.78571 1.28571C10.0714 1 10.0714 0.5 9.78571 0.214286C9.5 -0.0714286 9 -0.0714286 8.71429 0.214286L5 3.92857L1.28571 0.214286C1 -0.0714286 0.5 -0.0714286 0.214286 0.214286C-0.0714286 0.5 -0.0714286 1 0.214286 1.28571L3.92857 5L0.214286 8.71429C-0.0714286 9 -0.0714286 9.5 0.214286 9.78571C0.5 10.0714 1 10.0714 1.28571 9.78571L5 6.07143L8.71429 9.78571C9 10.0714 9.5 10.0714 9.78571 9.78571C10.0714 9.5 10.0714 9 9.78571 8.71429L6.07143 5Z" fill="#999999"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 617 B |
@ -1,295 +0,0 @@
|
||||
@keyframes schedule-in-width {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes schedule-out-width {
|
||||
from {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes close {
|
||||
from {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.tags-view {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-primary);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 1px #888;
|
||||
|
||||
.scroll-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 28px;
|
||||
padding: 0 6px;
|
||||
margin-right: 4px;
|
||||
line-height: 28px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px 3px 0 0;
|
||||
box-shadow: 0 0 1px #888;
|
||||
transition: all 0.4s;
|
||||
|
||||
.el-icon-close {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
font-size: 10px;
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
transition: font-size 0.2s;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
&:hover {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
background: #b4bccc;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-closable:not(:first-child) {
|
||||
&:hover {
|
||||
padding-right: 18px;
|
||||
|
||||
&:not(.is-active) {
|
||||
.el-icon-close {
|
||||
animation: close 200ms ease-in forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0 4px;
|
||||
color: var(--el-text-color-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding: 5px 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
.tab {
|
||||
position: relative;
|
||||
float: left;
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
|
||||
.scroll-item {
|
||||
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 右键菜单 */
|
||||
.contextmenu {
|
||||
position: absolute;
|
||||
padding: 5px 0;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
color: var(--el-text-color-primary);
|
||||
white-space: nowrap;
|
||||
list-style-type: none;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
outline: 0;
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 7px 12px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dropdown-menu {
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item:not(.is-disabled):hover {
|
||||
color: #606266;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
:deep(.el-dropdown-menu__item) i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-dropdown-menu__item--divided) {
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item--divided::before {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item.is-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.scroll-item.is-active {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
.el-icon-close {
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-left,
|
||||
.arrow-right,
|
||||
.arrow-down {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 38px;
|
||||
color: var(--el-text-color-primary);
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-left {
|
||||
box-shadow: 5px 0 5px -6px #ccc;
|
||||
|
||||
&:hover {
|
||||
cursor: w-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
border-right: 0.5px solid #ccc;
|
||||
box-shadow: -5px 0 5px -6px #ccc;
|
||||
|
||||
&:hover {
|
||||
cursor: e-resize;
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片模式下鼠标移入显示蓝色边框 */
|
||||
.card-in {
|
||||
color: var(--el-color-primary);
|
||||
|
||||
a {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片模式下鼠标移出隐藏蓝色边框 */
|
||||
.card-out {
|
||||
color: #666;
|
||||
border: none;
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
/* 灵动模式 */
|
||||
.schedule-active {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
|
||||
/* 灵动模式下鼠标移入显示蓝色进度条 */
|
||||
.schedule-in {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--el-color-primary);
|
||||
animation: schedule-in-width 200ms ease-in;
|
||||
}
|
||||
|
||||
/* 灵动模式下鼠标移出隐藏蓝色进度条 */
|
||||
.schedule-out {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--el-color-primary);
|
||||
animation: schedule-out-width 200ms ease-in;
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
export default {
|
||||
path: "/knowledgeCentre",
|
||||
redirect: "/knowledgeCentre/submission",
|
||||
meta: {
|
||||
title: "知识中心",
|
||||
icon: 1,
|
||||
rank: 5
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/knowledgeCentre/submission",
|
||||
name: "submission",
|
||||
component: () => import("@/views/knowledgeCentre/submission/index.vue"),
|
||||
meta: {
|
||||
title: "知识报送",
|
||||
|
||||
showLink: true,
|
||||
showParent: true,
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
}
|
||||
]
|
||||
} as RouteConfigsTable;
|
||||
@ -0,0 +1,53 @@
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
interface ListItem {
|
||||
name: string;
|
||||
path: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export const useTabsStore = defineStore("tabs", {
|
||||
state: () => {
|
||||
return {
|
||||
list: <ListItem[]>[]
|
||||
};
|
||||
},
|
||||
getters: {
|
||||
show: state => {
|
||||
return state.list.length > 0;
|
||||
},
|
||||
nameList: state => {
|
||||
return state.list.map(item => item.name);
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
delTabsItem(index: number) {
|
||||
this.list.splice(index, 1);
|
||||
},
|
||||
setTabsItem(data: ListItem) {
|
||||
this.list.push(data);
|
||||
},
|
||||
clearTabs() {
|
||||
this.list = [];
|
||||
},
|
||||
closeTabsOther(data: ListItem[]) {
|
||||
this.list = data;
|
||||
},
|
||||
closeCurrentTag(data: any) {
|
||||
for (let i = 0, len = this.list.length; i < len; i++) {
|
||||
const item = this.list[i];
|
||||
if (item.path === data.$route.fullPath) {
|
||||
if (i < len - 1) {
|
||||
data.$router.push(this.list[i + 1].path);
|
||||
} else if (i > 0) {
|
||||
data.$router.push(this.list[i - 1].path);
|
||||
} else {
|
||||
data.$router.push("/");
|
||||
}
|
||||
this.list.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,227 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
import { ArrowDown } from "@element-plus/icons-vue";
|
||||
const loading = ref(false);
|
||||
const seachForm = reactive({
|
||||
title: "",
|
||||
publishDeptName: "",
|
||||
status: ""
|
||||
});
|
||||
const tabList = ref([
|
||||
{
|
||||
title: "全部",
|
||||
id: ""
|
||||
},
|
||||
{
|
||||
title: "草稿",
|
||||
id: "1"
|
||||
},
|
||||
{
|
||||
title: "待审批",
|
||||
id: "2"
|
||||
},
|
||||
{
|
||||
title: "驳回",
|
||||
id: "3"
|
||||
},
|
||||
{
|
||||
title: "通过",
|
||||
id: "4"
|
||||
},
|
||||
{
|
||||
title: "失效",
|
||||
id: "5"
|
||||
}
|
||||
]);
|
||||
const pagination = reactive({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
type: "selection",
|
||||
width: 55
|
||||
},
|
||||
{
|
||||
label: "ID",
|
||||
prop: "diseaseName"
|
||||
},
|
||||
{
|
||||
label: "知识标题",
|
||||
prop: "diseaseName"
|
||||
},
|
||||
{
|
||||
label: "发文部门",
|
||||
prop: "diseaseName"
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "diseaseName"
|
||||
},
|
||||
{
|
||||
label: "最新时间",
|
||||
prop: "diseaseName"
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 350,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
const dataList = ref([{}]);
|
||||
const getData = async () => {
|
||||
// const params = {
|
||||
// pageNum: pagination.currentPage,
|
||||
// pageSize: pagination.pageSize,
|
||||
// diseaseName: seachForm.diseaseName,
|
||||
// diseaseType: seachForm.diseaseType
|
||||
// };
|
||||
// const res: any = await queryPageList(params);
|
||||
// dataList.value = res.data.records;
|
||||
// pagination.total = res.data.total;
|
||||
};
|
||||
function handleSizeChange(val: number) {
|
||||
pagination.pageSize = val;
|
||||
getData();
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
pagination.currentPage = val;
|
||||
getData();
|
||||
}
|
||||
const search = () => {
|
||||
pagination.currentPage = 1;
|
||||
pagination.pageSize = 10;
|
||||
getData();
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
seachForm.diseaseName = "";
|
||||
seachForm.diseaseType = "";
|
||||
search();
|
||||
};
|
||||
const handleCommand = command => {
|
||||
console.log("Command", command);
|
||||
};
|
||||
const changeStatus = item => {
|
||||
seachForm.status = item.id;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="submission app-main-content">
|
||||
<div class="seach">
|
||||
<div class="seach-title"><span>全量知识</span></div>
|
||||
<el-form :model="seachForm">
|
||||
<el-row>
|
||||
<el-form-item label="知识标题">
|
||||
<el-input v-model="seachForm.title" />
|
||||
</el-form-item>
|
||||
<el-form-item class="ml-4" label="发文部门">
|
||||
<el-input v-model="seachForm.publishDeptName" />
|
||||
</el-form-item>
|
||||
<el-button class="ml-8" @click="search" type="primary"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="main-table">
|
||||
<div class="main-table-header">
|
||||
<div class="tab-list">
|
||||
<div
|
||||
class="tab-list-item"
|
||||
:class="[seachForm.status === item.id ? 'actived' : '']"
|
||||
v-for="(item, index) in tabList"
|
||||
:key="index"
|
||||
@click="changeStatus(item)"
|
||||
>
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-btn">
|
||||
<el-button @click="search" type="primary">新建报送</el-button>
|
||||
<el-dropdown trigger="click" class="ml-6">
|
||||
<div class="main-btn">
|
||||
<span class="mr-4">批量操作</span>
|
||||
<el-icon><ArrowDown style="color: #ffffff" /></el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="logout">
|
||||
<el-dropdown-item @click="del"> 删除 </el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<pure-table
|
||||
showOverflowTooltip
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-button link type="danger" @click="handleDelete(row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template></pure-table
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.submission {
|
||||
.main-table-header {
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #dfe1e2;
|
||||
.tab-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
.tab-list-item {
|
||||
padding: 16px 34px;
|
||||
border: 1px solid #dfe1e2;
|
||||
border-bottom: 0;
|
||||
background: #f5f7f9;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
}
|
||||
.actived {
|
||||
background: #ffffff;
|
||||
|
||||
color: #0052d9;
|
||||
border: 0;
|
||||
border-top: 3px solid #0052d9;
|
||||
}
|
||||
}
|
||||
.header-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header-tabs {
|
||||
}
|
||||
.main-btn {
|
||||
width: 142px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #0052d9;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue