parent
527d78784c
commit
8a7339d2fb
@ -0,0 +1,233 @@
|
|||||||
|
<!--
|
||||||
|
* @Description: 标签
|
||||||
|
* @version: v1
|
||||||
|
* @Author: zhangjiabao
|
||||||
|
* @Date: 2024-01-03 23:35:11
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- card -->
|
||||||
|
<el-card class="box-card">
|
||||||
|
<div slot="header" style="background-color: rgba(249, 249, 249, 1);" class="card-header clearfix">
|
||||||
|
<span class="card-header-text">标签列表</span>
|
||||||
|
<el-button
|
||||||
|
style="float: right; margin-top: -5px;"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
size="small"
|
||||||
|
@click="log('新增标签')"
|
||||||
|
>新增标签</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<!-- 查询条件 -->
|
||||||
|
<el-form :inline="true" class="in-card-form">
|
||||||
|
<el-form-item>
|
||||||
|
<el-input placeholder="标签名称" size="medium"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-select placeholder="选择发布人" size="medium" value="">
|
||||||
|
<el-option label="发布人1" value="1"></el-option>
|
||||||
|
<el-option label="发布人2" value="2"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-date-picker
|
||||||
|
placeholder="选择时间范围"
|
||||||
|
v-model="daterange"
|
||||||
|
type="daterange"
|
||||||
|
range-separator="~"
|
||||||
|
:editable="false"
|
||||||
|
:clearable="false"
|
||||||
|
start-placeholder="选择时间范围"
|
||||||
|
size="medium"
|
||||||
|
style="width: 280px;"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-search"
|
||||||
|
type="primary"
|
||||||
|
size="medium"
|
||||||
|
@click="log('查询')"
|
||||||
|
>查询</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-refresh-left"
|
||||||
|
size="medium"
|
||||||
|
@click="log('重置')"
|
||||||
|
>重置</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item style="text-align: right; flex: 1;">
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
icon="el-icon-full-screen"
|
||||||
|
type="primary"
|
||||||
|
@click="log('查看二级')"
|
||||||
|
>查看二级</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<!-- 表格 -->
|
||||||
|
<el-table
|
||||||
|
stripe
|
||||||
|
class="in-card-table"
|
||||||
|
:data="list"
|
||||||
|
v-loading.body="listLoading"
|
||||||
|
element-loading-text="Loading"
|
||||||
|
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
|
||||||
|
border
|
||||||
|
fit
|
||||||
|
>
|
||||||
|
<el-table-column align="center" label="序号" width="95">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{ scope.$index + 1 }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="中文名称" prop="chName"></el-table-column>
|
||||||
|
<el-table-column label="英文名称" prop="enName"></el-table-column>
|
||||||
|
<el-table-column label="歌曲数" prop="songCount"></el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="关联期刊数"
|
||||||
|
prop="articleCount"
|
||||||
|
></el-table-column>
|
||||||
|
<el-table-column label="子标签数" prop="subTagCount"></el-table-column>
|
||||||
|
<el-table-column label="发布人" prop="publisher"></el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="创建时间"
|
||||||
|
sortable
|
||||||
|
prop="createTime"
|
||||||
|
></el-table-column>
|
||||||
|
<el-table-column fixed="right" label="启停用" width="100">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-switch
|
||||||
|
style="margin-bottom: 4px;"
|
||||||
|
v-model="scope.row.inUse"
|
||||||
|
active-color="#13ce66"
|
||||||
|
size="mini"
|
||||||
|
></el-switch>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column fixed="right" label="操作" width="300">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
icon="el-icon-edit"
|
||||||
|
@click="log('编辑')"
|
||||||
|
type="primary"
|
||||||
|
size="mini"
|
||||||
|
>编辑</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
icon="el-icon-success"
|
||||||
|
@click="log('新增二级')"
|
||||||
|
type="success"
|
||||||
|
size="mini"
|
||||||
|
>新增二级</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
icon="el-icon-delete"
|
||||||
|
@click="log('删除')"
|
||||||
|
type="danger"
|
||||||
|
size="mini"
|
||||||
|
>删除</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<el-pagination
|
||||||
|
class="pagination-right"
|
||||||
|
background
|
||||||
|
layout="total, prev, pager, next, sizes"
|
||||||
|
:total="1000"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Tag",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: null,
|
||||||
|
listLoading: false,
|
||||||
|
daterange: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
filters: {},
|
||||||
|
created() {
|
||||||
|
this.fetchData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
log(e) {
|
||||||
|
this.$message.success(e);
|
||||||
|
},
|
||||||
|
fetchData() {
|
||||||
|
this.listLoading = true;
|
||||||
|
this.list = [
|
||||||
|
{ title: "title1", inUse: true },
|
||||||
|
{ title: "title2", inUse: false },
|
||||||
|
{ title: "title2", inUse: false },
|
||||||
|
{ title: "title2", inUse: false }
|
||||||
|
];
|
||||||
|
this.listLoading = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.pagination-right {
|
||||||
|
/* 设置文本右对齐，使分页组件靠右显示 */
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.box-card {
|
||||||
|
height: calc(100vh - 90px);
|
||||||
|
border-radius: 10px;
|
||||||
|
.el-card__header {
|
||||||
|
background-color: rgba(249, 249, 249, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.in-card-form {
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.in-card-table {
|
||||||
|
height: calc(100vh - 290px);
|
||||||
|
}
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
height: 23px;
|
||||||
|
}
|
||||||
|
.app-container {
|
||||||
|
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
|
||||||
|
"Microsoft YaHei", sans-serif;
|
||||||
|
}
|
||||||
|
.card-header-text {
|
||||||
|
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
|
||||||
|
"Microsoft YaHei", sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 20px;
|
||||||
|
letter-spacing: normal;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue