queyue-frontend
/
luoo_manage_fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat(标签): 标签模块完善

Browse Source
dev
zhangjiabao 11 months ago
parent 5c9d9bbfa7
commit 51e899fb1a
1 changed files with 224 additions and 29 deletions
Show Stats Download Patch File Download Diff File

251
src/views/tag/index.vue
Unescape View File

@ -8,24 +8,32 @@
<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">
<div slot="header" 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('新增标签')"
@click="handleAddClick"
>新增标签</el-button
>
</div>
<!-- 查询条件 -->
<el-form :inline="true" class="in-card-form">
<el-form-item>
<el-input placeholder="标签名称" size="medium"></el-input>
<el-input
placeholder="标签名称"
size="medium"
v-model="queryForm.data.tagName"
></el-input>
</el-form-item>
<el-form-item>
<el-select placeholder="选择发布人" size="medium" value="">
<el-select
placeholder="选择发布人"
size="medium"
v-model="queryForm.data.publisher"
>
<el-option label="发布人1" value="1"></el-option>
<el-option label="发布人2" value="2"></el-option>
</el-select>
@ -33,11 +41,12 @@
<el-form-item>
<el-date-picker
placeholder="选择时间范围"
v-model="daterange"
v-model="queryForm.data.timeRange"
type="daterange"
range-separator="~"
:editable="false"
:clearable="false"
value-format="yyyy-MM-dd"
start-placeholder="选择时间范围"
size="medium"
style="width: 280px;"
@ -49,7 +58,7 @@
icon="el-icon-search"
type="primary"
size="medium"
@click="log('查询')"
@click="handleQueryClick"
>查询</el-button
>
</el-form-item>
@ -57,7 +66,7 @@
<el-button
icon="el-icon-refresh-left"
size="medium"
@click="log('重置')"
@click="handleResetClick"
>重置</el-button
>
</el-form-item>
@ -75,9 +84,9 @@
<el-table
stripe
class="in-card-table"
:data="list"
v-loading.body="listLoading"
element-loading-text="Loading"
:data="table.data"
v-loading.body="table.loadig"
element-loading-text="加载中"
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
border
fit
@ -87,7 +96,7 @@
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="中文名称" prop="chName"></el-table-column>
<el-table-column label="中文名称" prop="zhName"></el-table-column>
<el-table-column label="英文名称" prop="enName"></el-table-column>
<el-table-column label="歌曲数" prop="songCount"></el-table-column>
<el-table-column
@ -116,7 +125,7 @@
<el-button
plain
icon="el-icon-edit"
@click="log('编辑')"
@click="handleModifyClick(scope.row)"
type="primary"
size="mini"
>编辑</el-button
@ -124,7 +133,7 @@
<el-button
plain
icon="el-icon-success"
@click="log('新增二级')"
@click="handleAddSubClick(scope.row)"
type="success"
size="mini"
>新增二级</el-button
@ -132,7 +141,7 @@
<el-button
plain
icon="el-icon-delete"
@click="log('删除')"
@click="log('删除' + scope.$index)"
type="danger"
size="mini"
>删除</el-button
@ -145,10 +154,55 @@
class="pagination-right"
background
layout="total, prev, pager, next, sizes"
:total="1000"
:current-page.sync="table.page.current"
:page-size="table.page.size"
:total="table.page.total"
@size-change="handlePageSizeChange"
@current-change="handlePageCurrentChange"
>
</el-pagination>
</el-card>
<el-dialog
:title="['新增标签', '修改标签', '新增二级'][modifyDialog.type]"
class="popup-dialog"
:visible="true"
v-if="modifyDialog.visible"
width="30%"
>
<el-form
:model="modifyDialog.form.data"
:rules="modifyDialog.form.rules"
ref="modifyDialogForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item v-if="modifyDialog.type == 2" label="选择父级">
<el-input
disabled
size="small"
v-model="modifyDialog.form.data.parent"
></el-input>
</el-form-item>
<el-form-item label="中文名称" prop="zhName">
<el-input
size="small"
v-model="modifyDialog.form.data.zhName"
></el-input>
</el-form-item>
<el-form-item label="英文名称" prop="enName">
<el-input
size="small"
v-model="modifyDialog.form.data.enName"
></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="handleDialogCancel">取消</el-button>
<el-button size="small" type="primary" @click="handleDialogSubmit"
>确定</el-button
>
</span>
</el-dialog>
</div>
</template>
@ -157,9 +211,49 @@ export default {
name: "Tag",
data() {
return {
list: null,
listLoading: false,
daterange: null
// 查询表单
queryForm: {
remoteData: {
publisher: []
},
lastQuery: {},
data: {
tagName: null,
publisher: null,
timeRange: []
}
},
// 表格
table: {
loadinng: true,
data: [],
page: {
current: 1,
size: 10,
total: 0
}
},
// 新增修改弹窗
modifyDialog: {
visible: false,
type: 0, // 0for新增 1for编辑 2for新增2级
form: {
rules: {
zhName: [
{ required: true, message: "请输入中文名称", trigger: "blur" }
],
enName: [
{ required: true, message: "请输入英文名称", trigger: "blur" }
]
},
data: {
parent: null,
zhName: null,
enName: null
}
}
},
dialogVisible: false
};
},
filters: {},
@ -170,31 +264,133 @@ export default {
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;
// 记录上一次查询条件
this.queryForm.lastQuery = this.queryForm.data;
console.log("formData", this.queryForm.data);
console.log("pageData", this.table.page);
// 加载数据
this.table.loading = true;
for (let i = 0; i < 10; i++) {
this.table.data.push({
zhName: "title1",
enName: "enname",
inUse: true
});
}
// page
this.table.page.total = 20;
this.table.loading = false;
},
// ************************* 按扭事件 *************************
/**
* 查询按扭点击事件
*/
handleQueryClick() {
this.table.page.current = 1;
this.table.page.total = 0;
this.fetchData();
},
/**
* 重置点击事件
*/
handleResetClick() {
this.queryForm.data = {
tagName: null,
publisher: null,
timeRange: []
};
},
/**
* 新建标签点击事件
*/
handleAddClick() {
this.modifyDialog.type = 0;
this.modifyDialog.visible = true;
},
/**
* 编辑标签点击事件
*/
handleModifyClick(row) {
console.log(row);
this.modifyDialog.type = 1;
this.modifyDialog.visible = true;
},
/**
* 新增二级点击事件
*/
handleAddSubClick(row) {
console.log(row);
this.modifyDialog.form.data.parent = row["zhName"];
this.modifyDialog.type = 2;
this.modifyDialog.visible = true;
},
/**
* 弹窗取消按扭点击事件
*/
handleDialogCancel() {
this.modifyDialog.visible = false;
},
/**
* 弹窗确定按扭点击事件
*/
handleDialogSubmit() {
console.log(this.modifyDialog.form.data);
this.modifyDialog.visible = false;
},
/**
* 分页组件页数变化事件
*/
handlePageCurrentChange() {
console.log(this.table.page.size + " " + this.table.page.current);
},
/**
* 分页组件大小变化事件
*/
handlePageSizeChange(val) {
this.table.page.size = val;
console.log(this.table.page.size + " " + this.table.page.current);
}
}
};
</script>
<style scoped>
.pagination-right {
/* 设置文本右对齐，使分页组件靠右显示 */
text-align: right;
margin-top: 10px;
}
.box-card {
min-height: 300px;
height: calc(100vh - 90px);
border-radius: 10px;
.el-card__header {
background-color: rgba(249, 249, 249, 1);
}
}
/deep/ .el-dialog {
border-radius: 5px;
}
.popup-dialog {
.el-dialog__header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
height: 50px;
background-color: #f5f5f5f5;
}
.el-dialog__title {
font-size: 15px;
font-weight: bolder;
}
.el-dialog__footer {
border-top: solid;
border-top-width: thin;
border-top-color: rgb(233, 233, 233);
padding: 10px 20px 10px;
}
}
.in-card-form {
height: 60px;
@ -211,7 +407,6 @@ export default {
.clearfix:after {
clear: both;
}
.card-header {
height: 23px;
}

Write Preview
Loading…
Cancel
Save