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