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

✨ feat(标签): 标签页面联调

Browse Source
dev
zjb 11 months ago
parent 03849bbb11
commit df2aa32b78
4 changed files with 366 additions and 68 deletions
Show Stats Download Patch File Download Diff File

3
config/index.js
Unescape View File

@ -18,7 +18,8 @@ module.exports = {
assetsPublicPath: '/',
proxyTable: {
'/': {
target: 'http://39.103.180.196:9011', // 接口域名
// target: 'http://39.103.180.196:9011', // 接口域名
target: 'http://localhost:9011', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/': '/' //需要rewrite重写的,

85
src/api/tag.js
Unescape View File

@ -0,0 +1,85 @@
/*
* @Description:
* @version: v1
* @Author: zhangjiabao
* @Date: 2024-01-08 00:20:50
*/
import request from "@/utils/request";
export default {
/**
* 查询标签列表
* @param {*} params
* @returns
*/
getList(data, pageNum, pageSize) {
return request({
// url: `/luoo-tag/tag/list?pageNum=${pageNum}&pageSize=${pageSize}`,
url: `/luoo-tag/tag/list`,
method: "get",
params:{
... data,
pageNum,
pageSize
}
});
},
/**
* 查询标签详情
* @param {*} params
* @returns
*/
getById(id) {
return request({
url: `/tag/${id}`,
method: "get"
});
},
/**
* 新增标签信息
* @param {*} data
* @returns
*/
create(data) {
return request({
url: `/luoo-tag/tag`,
method: "post",
data
});
},
/**
* 更新标签信息
* @param {*} id
* @param {*} data
* @returns
*/
update(data) {
return request({
url: `/luoo-tag/tag/${data.id}`,
method: "put",
data
});
},
/**
* 更新标签状态
* @param {*} id
* @param {*} state
* @returns
*/
updateStatus(id, state) {
return request({
url: `/luoo-tag/tag/status/${id}?state=${state}`,
method: "put"
});
},
/**
* 删除标签
* @param {*} params
* @returns
*/
delete(id) {
return request({
url: `/luoo-tag/tag/${id}`,
method: "delete"
});
}
};

10
src/utils/request.js
Unescape View File

@ -1,3 +1,9 @@
/*
* @Description:
* @version: v1
* @Author: zhangjiabao
* @Date: 2024-01-02 21:12:35
*/
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
@ -28,7 +34,9 @@ service.interceptors.response.use(
* code为非20000是抛错 可结合自己业务进行修改
*/
const res = response.data
if (res.code !== 20000) {
// TODO: 关于code的逻辑需要重写
return response.data
if (!(res.code == 2000 || res.code == 200)) {
Message({
message: res.message,
type: 'error',

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

@ -9,7 +9,8 @@
<!-- card -->
<el-card class="box-card">
<div slot="header" class="card-header clearfix">
<span class="card-header-text">标签列表</span>
<span v-if="tagType === 1" class="card-header-text">标签列表</span>
<span v-if="tagType === 2" class="card-header-text">二级标签列表</span>
<el-button
style="float: right; margin-top: -5px;"
type="primary"
@ -25,14 +26,25 @@
<el-input
placeholder="标签名称"
size="medium"
v-model="queryForm.data.tagName"
v-model="queryForm.data.name"
></el-input>
</el-form-item>
<el-form-item v-if="tagType === 2">
<el-select
placeholder="选择父级"
size="medium"
v-model="queryForm.data.parentId"
>
<el-option label="民谣" value="1744043047018172416"></el-option>
<el-option label="摇滚" value="1744044157997027328"></el-option>
<el-option label="流行" value="1746150704759836672"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select
placeholder="选择发布人"
size="medium"
v-model="queryForm.data.publisher"
v-model="queryForm.data.creatorId"
>
<el-option label="发布人1" value="1"></el-option>
<el-option label="发布人2" value="2"></el-option>
@ -75,7 +87,8 @@
plain
icon="el-icon-full-screen"
type="primary"
@click="log('查看二级')"
v-if="tagType === 1"
@click="handleChangeChildrenTag"
>查看二级</el-button
>
</el-form-item>
@ -83,9 +96,10 @@
<!-- 表格 -->
<el-table
stripe
class="in-card-table"
:data="table.data"
v-loading.body="table.loadig"
height="calc(100vh - 290px)"
v-loading="table.loading"
v-if="table.show"
element-loading-text="加载中"
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
border
@ -96,17 +110,26 @@
{{ scope.$index + 1 }}
</template>
</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 label="中文名称" prop="nameCh"></el-table-column>
<el-table-column label="英文名称" prop="nameEn"></el-table-column>
<el-table-column
v-if="tagType === 2"
label="父标签"
prop="parentNameCh"
></el-table-column>
<el-table-column label="歌曲数" prop="songRefCount"></el-table-column>
<el-table-column
label="关联期刊数"
prop="articleCount"
prop="articleRefCount"
></el-table-column>
<el-table-column
label="子标签数"
prop="childTagCount"
></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="发布人" prop="creatorName"></el-table-column>
<el-table-column
label="创建时间"
width="200"
sortable
prop="createTime"
></el-table-column>
@ -114,13 +137,20 @@
<template slot-scope="scope">
<el-switch
style="margin-bottom: 4px;"
v-model="scope.row.inUse"
v-model="scope.row.state"
active-color="#13ce66"
@change="handleTableRowStatusChange($event, scope.row)"
:active-value="1"
:inactive-value="0"
size="mini"
></el-switch>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="300">
<el-table-column
fixed="right"
label="操作"
:width="[0, 300, 200][tagType]"
>
<template slot-scope="scope">
<el-button
plain
@ -133,19 +163,29 @@
<el-button
plain
icon="el-icon-success"
v-if="tagType === 1"
@click="handleAddSubClick(scope.row)"
type="success"
size="mini"
>新增二级</el-button
>
<el-popconfirm
confirm-button-text="确定"
cancel-button-text="取消"
icon="el-icon-info"
icon-color="red"
title="是否确认删除标签？"
@confirm="handleDeleteClick(scope.row)"
>
<el-button
slot="reference"
plain
icon="el-icon-delete"
@click="log('删除' + scope.$index)"
type="danger"
size="mini"
>删除</el-button
>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
@ -153,6 +193,7 @@
<el-pagination
class="pagination-right"
background
v-if="table.show"
layout="total, prev, pager, next, sizes"
:current-page.sync="table.page.current"
:page-size="table.page.size"
@ -165,9 +206,10 @@
<el-dialog
:title="['新增标签', '修改标签', '新增二级'][modifyDialog.type]"
class="popup-dialog"
:visible="true"
:visible="modifyDialog.visible"
v-if="modifyDialog.visible"
width="30%"
:before-close="handleDialogBeforeClose"
>
<el-form
:model="modifyDialog.form.data"
@ -176,23 +218,37 @@
label-width="100px"
class="demo-ruleForm"
>
<el-form-item v-if="modifyDialog.type == 2" label="选择父级">
<el-form-item
v-if="tagType === 1 && modifyDialog.type == 2"
label="选择父级"
>
<el-input
disabled
size="small"
v-model="modifyDialog.form.data.parent"
v-model="modifyDialog.form.data.parentName"
></el-input>
</el-form-item>
<el-form-item label="中文名称" prop="zhName">
<el-form-item v-if="tagType === 2" label="选择父级" prop="parentId">
<el-select
placeholder="选择父级"
size="medium"
v-model="modifyDialog.form.data.parentId"
>
<el-option label="民谣" value="1744043047018172416"></el-option>
<el-option label="摇滚" value="1744044157997027328"></el-option>
<el-option label="流行" value="1746150704759836672"></el-option>
</el-select>
</el-form-item>
<el-form-item label="中文名称" prop="nameCh">
<el-input
size="small"
v-model="modifyDialog.form.data.zhName"
v-model="modifyDialog.form.data.nameCh"
></el-input>
</el-form-item>
<el-form-item label="英文名称" prop="enName">
<el-form-item label="英文名称" prop="nameEn">
<el-input
size="small"
v-model="modifyDialog.form.data.enName"
v-model="modifyDialog.form.data.nameEn"
></el-input>
</el-form-item>
</el-form>
@ -207,10 +263,14 @@
</template>
<script>
import tagApi from "@/api/tag";
export default {
name: "Tag",
data() {
return {
// 标签分级 1-一级菜单 2-二级菜单
tagType: 1,
// 查询表单
queryForm: {
remoteData: {
@ -218,14 +278,17 @@ export default {
},
lastQuery: {},
data: {
tagName: null,
publisher: null,
level: 1,
parentId: null,
name: null,
creatorId: null,
timeRange: []
}
},
// 表格
table: {
loadinng: true,
show: true,
loading: true,
data: [],
page: {
current: 1,
@ -239,26 +302,27 @@ export default {
type: 0, // 0for新增 1for编辑 2for新增2级
form: {
rules: {
zhName: [
nameCh: [
{ required: true, message: "请输入中文名称", trigger: "blur" }
],
enName: [
nameEn: [
{ required: true, message: "请输入英文名称", trigger: "blur" }
]
},
data: {
parent: null,
zhName: null,
enName: null
id: null,
parentName: null,
parentId: null,
nameCh: null,
nameEn: null
}
}
}
},
dialogVisible: false
};
},
filters: {},
created() {
this.fetchData();
this.fetchData(this.queryForm.data);
},
methods: {
log(e) {
@ -268,23 +332,35 @@ export default {
/**
* 查询表格数据
*/
fetchData() {
fetchData(param) {
// 记录上一次查询条件
this.queryForm.lastQuery = this.queryForm.data;
console.log("formData", this.queryForm.data);
console.log("pageData", this.table.page);
// 加载数据
this.queryForm.lastQuery = param;
let queryParam = {
...param
};
// if (this.queryForm.data.timeRange) {
// if (this.queryForm.data.timeRange[0]) {
// queryParam.createTimeStart =
// this.queryForm.data.timeRange[0] + " 00:00:00";
// }
// if (this.queryForm.data.timeRange[1]) {
// queryParam.createTimeEnd =
// this.queryForm.data.timeRange[1] + " 23:59:59";
// }
// }
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.page.total = 0;
this.table.data = [];
tagApi
.getList(queryParam, this.table.page.current, this.table.page.size)
.then(res => {
this.table.data = res.data.content;
this.table.page.total = res.data.totalElements;
this.table.page.current = res.data.number + 1;
this.table.loading = false;
});
},
// ************************* 按扭事件 *************************
/**
@ -293,15 +369,17 @@ export default {
handleQueryClick() {
this.table.page.current = 1;
this.table.page.total = 0;
this.fetchData();
this.fetchData(this.queryForm.data);
},
/**
* 重置点击事件
*/
handleResetClick() {
this.queryForm.data = {
tagName: null,
publisher: null,
level: this.tagType,
parentId: null,
name: null,
creatorId: null,
timeRange: []
};
},
@ -309,6 +387,12 @@ export default {
* 新建标签点击事件
*/
handleAddClick() {
this.modifyDialog.form.data.id = null;
this.modifyDialog.form.data.parentName = null;
this.modifyDialog.form.data.parentId = null;
this.modifyDialog.form.data.nameCh = null;
this.modifyDialog.form.data.nameEn = null;
this.modifyDialog.type = 0;
this.modifyDialog.visible = true;
},
@ -316,7 +400,19 @@ export default {
* 编辑标签点击事件
*/
handleModifyClick(row) {
console.log(row);
this.modifyDialog.form.data.id = row.id;
if (this.tagType === 1) {
this.modifyDialog.form.data.parentName = null;
this.modifyDialog.form.data.parentId = null;
}
if (this.tagType === 2) {
this.modifyDialog.form.data.parentName = row.parentName;
this.modifyDialog.form.data.parentId = row.parentId;
}
this.modifyDialog.form.data.nameCh = row.nameCh;
this.modifyDialog.form.data.nameEn = row.nameEn;
this.modifyDialog.type = 1;
this.modifyDialog.visible = true;
},
@ -324,11 +420,43 @@ export default {
* 新增二级点击事件
*/
handleAddSubClick(row) {
console.log(row);
this.modifyDialog.form.data.parent = row["zhName"];
this.modifyDialog.form.data.id = null;
this.modifyDialog.form.data.parentName = row.nameCh;
this.modifyDialog.form.data.parentId = row.id;
this.modifyDialog.form.data.nameCh = null;
this.modifyDialog.form.data.nameEn = null;
this.modifyDialog.type = 2;
this.modifyDialog.visible = true;
},
/**
* 删除按钮点击事件
*/
handleDeleteClick(row) {
tagApi.delete(row.id).then(res => {
if (res.code === 200) {
this.$message.success(res.message);
this.fetchData(this.queryForm.lastQuery);
return;
} else {
this.$message.error(res.message);
}
});
},
/**
* 表格内状态滑块切换事件
*/
handleTableRowStatusChange($event, row) {
tagApi.updateStatus(row.id, $event).then(res => {
if (res.code === 200) {
this.$message.success(res.message);
} else {
this.$message.error(res.message);
}
this.fetchData(this.queryForm.lastQuery);
});
},
/**
* 弹窗取消按扭点击事件
*/
@ -339,21 +467,100 @@ export default {
* 弹窗确定按扭点击事件
*/
handleDialogSubmit() {
console.log(this.modifyDialog.form.data);
this.$refs.modifyDialogForm.validate(valid => {
if (valid) {
// 新增
if (this.modifyDialog.type === 0) {
tagApi.create(this.modifyDialog.form.data).then(res => {
if (res.code === 200) {
this.$message.success(res.message);
this.modifyDialog.visible = false;
this.table.page.current = 1;
// 新增时重置查询条件
this.handleResetClick();
this.fetchData(this.queryForm.data);
} else {
this.$message.error(res.message);
}
});
return;
}
// 编辑
if (this.modifyDialog.type === 1) {
tagApi.update(this.modifyDialog.form.data).then(res => {
if (res.code === 200) {
this.$message.success(res.message);
this.modifyDialog.visible = false;
this.fetchData(this.queryForm.lastQuery);
} else {
this.$message.error(res.message);
}
});
return;
}
// 新增二级
if (this.modifyDialog.type === 2) {
tagApi.create(this.modifyDialog.form.data).then(res => {
if (res.code === 200) {
this.$message.success(res.message);
this.modifyDialog.visible = false;
this.fetchData(this.queryForm.lastQuery);
} else {
this.$message.error(res.message);
}
});
return;
}
} else {
this.$message.error("请完善表单相关信息！");
return false;
}
});
},
/**
* 弹窗观察按扭点击事件
*/
handleDialogBeforeClose(done) {
this.modifyDialog.visible = false;
done();
},
/**
* 分页组件页数变化事件
*/
handlePageCurrentChange() {
console.log(this.table.page.size + " " + this.table.page.current);
handlePageCurrentChange(val) {
this.table.page.current = val;
this.fetchData(this.queryForm.lastQuery);
},
/**
* 分页组件大小变化事件
*/
handlePageSizeChange(val) {
this.table.page.size = val;
console.log(this.table.page.size + " " + this.table.page.current);
this.fetchData(this.queryForm.lastQuery);
},
/**
* 查看二级按钮点击事件
*/
handleChangeChildrenTag() {
this.tagType = 2;
// 搜索条件重置
this.queryForm.data.level = 2;
this.handleResetClick();
// 弹窗内容重置
this.modifyDialog.form.rules["parentId"] = [
{ required: true, message: "请选择父级", trigger: "change" }
];
// 表格、分页重置
this.table.data = [];
this.table.page.current = 1;
this.table.page.size = 10;
this.table.show = false;
this.$nextTick(() => {
this.table.show = true;
});
this.fetchData(this.queryForm.data);
}
}
};
@ -396,9 +603,6 @@ export default {
height: 60px;
display: flex;
}
.in-card-table {
height: calc(100vh - 290px);
}
.clearfix:before,
.clearfix:after {
display: table;

Write Preview
Loading…
Cancel
Save