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

✨ feat(期刊): 细化期刊功能

Browse Source
dev
zjb 1 year ago
parent 16bede7ee8
commit da1dd96717
5 changed files with 434 additions and 316 deletions
Show Stats Download Patch File Download Diff File

248
src/views/article/articleDetail.vue
Unescape View File

@ -9,72 +9,22 @@
<el-form <el-form
style="width: 800px;margin: 0 auto;" style="width: 800px;margin: 0 auto;"
label-position="left" label-position="left"
label-suffix=":"
label-width="100px" label-width="100px"
> >
<el-form-item prop="volid" label="期刊编号">
<el-input
v-model="data.number"
size="small"
placeholder="期刊编号"
></el-input>
</el-form-item>
<el-form-item prop="title" label="期刊标题"> <el-form-item prop="title" label="期刊标题">
<el-input <span>VOL.{{ data.number }} {{ data.name }}</span>
v-model="data.name"
size="small"
placeholder="请输入期刊标题"
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="tag" label="期刊标签"> <el-form-item prop="tag" label="期刊标签">
<el-input size="small" placeholder="请选择"></el-input> <span v-for="item in data.tag" :key="item + ''">{{ item }}</span>
</el-form-item> </el-form-item>
<el-form-item prop="author" label="期刊作者"> <el-form-item prop="author" label="期刊作者">
<el-input <span>{{ data.userId }}</span>
v-model="data.userId"
size="small"
placeholder="不填写则默认为发布者"
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="image" label="上传封面"> <el-form-item prop="image" label="上传封面">
<el-upload <span>封面</span>
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="1"
:on-exceed="handleExceed"
:file-list="coverUploadFileList"
>
<el-button size="small" type="primary" icon="el-icon-receiving"
>上传图片</el-button
>
<div
slot="tip"
style="font-family: '微软雅黑', sans-serif; font-weight: 400; font-style: normal; color: #999999;"
>
支持格式：.jpg, .png 单个文件不能超过5MB 建议图片分辨率640*520
</div>
</el-upload>
</el-form-item>
<el-form-item label="期刊音乐">
<el-row>
<el-col :span="6"
><el-button plain size="middle" type="primary" icon="el-icon-plus"
>上传歌曲</el-button
></el-col
>
<el-col :span="6"
><el-button
plain
size="middle"
type="primary"
icon="el-icon-zoom-in"
>曲库添加</el-button
></el-col
>
</el-row>
</el-form-item> </el-form-item>
<el-form-item label="期刊音乐"></el-form-item>
</el-form> </el-form>
<el-table <el-table
size="mini" size="mini"
@ -82,101 +32,34 @@
style="width: calc(50% + 400px); margin: 0 0 auto auto;" style="width: calc(50% + 400px); margin: 0 0 auto auto;"
stripe stripe
class="draggable-table" class="draggable-table"
row-key="na'me" row-key="name"
border border
fit fit
element-loading-text="加载中" element-loading-text="加载中"
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }" :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
> >
<el-table-column label="排序" align="center" width="60">
<template slot-scope="scope">
<i class="el-icon-rank"></i>
</template>
</el-table-column>
<el-table-column prop="picture" label="专辑封面"></el-table-column> <el-table-column prop="picture" label="专辑封面"></el-table-column>
<el-table-column prop="name" label="歌曲名称"></el-table-column> <el-table-column prop="name" label="歌曲名称"></el-table-column>
<el-table-column prop="artist" label="歌手/乐队"></el-table-column> <el-table-column prop="artist" label="歌手/乐队"></el-table-column>
<el-table-column prop="album" label="所属专辑"></el-table-column> <el-table-column prop="album" label="所属专辑"></el-table-column>
<el-table-column prop="duration" label="时长"></el-table-column> <el-table-column prop="duration" label="时长"></el-table-column>
<el-table-column label="操作" fixed="right" width="300">
<template slot-scope="scope">
<el-button plain icon="el-icon-edit" type="primary" size="mini"
>编辑</el-button
>
<el-button
plain
icon="el-icon-success"
type="success"
size="mini"
@click="handleLyricClick(scope.row)"
>歌词</el-button
>
<el-popconfirm
confirm-button-text="确定"
cancel-button-text="取消"
icon="el-icon-info"
icon-color="red"
title="是否确认删除标签？"
style="margin-left: 10px;"
@confirm="console.log('delete')"
>
<el-button
slot="reference"
plain
icon="el-icon-delete"
type="danger"
size="mini"
>删除</el-button
>
</el-popconfirm>
</template>
</el-table-column>
</el-table> </el-table>
<el-form <el-form
style="width: calc(50% + 400px); margin: 15px 0 auto auto;" style="width: calc(50% + 400px); margin: 15px 0 auto auto;"
label-position="left" label-position="left"
label-width="100px" label-width="100px"
label-suffix=":"
> >
<el-form-item prop="volid" label="期刊文案"> <el-form-item label="期刊文案">
<quill-editor <span>{{ data.summary }}</span>
ref="text"
v-model="data.summary"
style="height: 500px;"
class="myQuillEditor"
:options="editorOption"
/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-dialog
title="歌词"
:visible="true"
v-if="lyricDialog.visible"
width="40%"
top="60px"
append-to-body
:before-close="handleLyricDialogBeforeClose"
>
<el-input type="textarea" v-model="lyricDialog.data"></el-input>
<span slot="footer">
<el-button size="small" type="primary" @click="handleLyricDialogSubmit"
>保存</el-button
>
<el-button size="small" @click="handleLyricDialogCancel"
>取消</el-button
>
</span>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import Sortable from "sortablejs";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default { export default {
name: "ArticleDetailDialog", name: "ArticleDetail",
props: { props: {
data: { data: {
type: Object, type: Object,
@ -189,112 +72,19 @@ export default {
coverPhoto: null, coverPhoto: null,
songs: [] songs: []
} }
},
remoteTagList: {
type: Array,
default: []
} }
}, },
data() { data() {
return { return {};
lyricDialog: {
visible: false,
songId: null,
data: ""
},
coverUploadFileList: [],
// editorOption里是放图片上传配置参数用的，例如：
// action: '/api/product/richtext_img_upload.do', // 必填参数 图片上传地址
// methods: 'post', // 必填参数 图片上传方式
// token: '', // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
// name: 'upload_file', // 必填参数 文件的参数名
// size: 500, // 可选参数 图片大小，单位为Kb, 1M = 1024Kb
// accept: 'multipart/form-data, image/png, image/gif, image/jpeg, image/bmp, image/x-icon,image/jpg' // 可选 可上传的图片格式
editorOption: {},
rules: {}
};
}, },
filters: {}, filters: {},
created() {}, created() {},
components: { components: {},
quillEditor mounted() {},
}, methods: {}
mounted() {
// 需要支持拖动效果的列表容器，在这里我们设置为el-table组件的tbody，
// 注意：最前面的一段为前面el-table的class: draggable-table，主要为了防止如果页面有多个table，多个table同时实现拖拽效果
// 当然，如果多个table都需要拖拽效果，选择器中最前面的.draggable-table可以去除。
const tbody = document.querySelector(
".draggable-table .el-table__body-wrapper tbody"
);
new Sortable(tbody, {
animation: 150,
// 需要在odEnd方法中处理原始eltable数据，使原始数据与显示数据保持顺序一致
onEnd: ({ newIndex, oldIndex }) => {
const targetRow = this.data.songTableData[oldIndex];
this.data.songTableData.splice(oldIndex, 1);
this.data.songTableData.splice(newIndex, 0, targetRow);
console.table(this.data.songTableData);
}
});
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 1 个文件，本次选择了 ${
files.length
} 个文件，共选择了 ${files.length + fileList.length} 个文件`
);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
/**
* 弹窗关闭按扭点击事件
*/
handleLyricDialogBeforeClose(done) {
for (let sIndex in this.data.songs) {
if (this.data.songs[sIndex].id === this.lyricDialog.songId) {
this.data.songs[sIndex].lyric = this.lyricDialog.data;
}
break;
}
this.lyricDialog.data = "";
this.lyricDialog.songId = null;
this.lyricDialog.visible = false;
done();
},
/**
* 弹窗提交按扭点击事件
*/
handleLyricDialogSubmit() {
for (let sIndex in this.data.songs) {
if (this.data.songs[sIndex].id === this.lyricDialog.songId) {
this.data.songs[sIndex].lyric = this.lyricDialog.data;
}
break;
}
this.lyricDialog.data = "";
this.lyricDialog.songId = null;
this.lyricDialog.visible = false;
},
/**
* 弹窗取消按扭点击事件
*/
handleLyricDialogCancel() {
this.lyricDialog.data = "";
this.lyricDialog.songId = null;
this.lyricDialog.visible = false;
},
/**
* 打开弹窗按扭点击事件
*/
handleLyricClick(row) {
this.lyricDialog.songId = row.id;
this.lyricDialog.data = row.lyric;
this.lyricDialog.visible = true;
}
}
}; };
</script> </script>

339
src/views/article/articleModify.vue
Unescape View File

@ -0,0 +1,339 @@
<!--
* @Description:
* @version: v1
* @Author: zhangjiabao
* @Date: 2024-01-20 02:11:55
-->
<template>
<div>
<el-form
style="width: 800px;margin: 0 auto;"
label-position="left"
label-suffix=":"
label-width="100px"
>
<el-form-item prop="volid" label="期刊编号">
<el-input
v-model="data.number"
size="small"
placeholder="期刊编号"
></el-input>
</el-form-item>
<el-form-item prop="title" label="期刊标题">
<el-input
v-model="data.name"
size="small"
placeholder="请输入期刊标题"
></el-input>
</el-form-item>
<el-form-item prop="tag" label="期刊标签">
<el-cascader
placeholder="请选择"
:options="remoteTagList"
:props="{ multiple: true }"
v-model="selectTag"
@change="handleTagSelectChange"
filterable
></el-cascader>
</el-form-item>
<el-form-item prop="author" label="期刊作者">
<el-input
v-model="data.userId"
size="small"
placeholder="不填写则默认为发布者"
></el-input>
</el-form-item>
<el-form-item prop="image" label="上传封面">
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="1"
:on-exceed="handleExceed"
:file-list="coverUploadFileList"
>
<el-button size="small" type="primary" icon="el-icon-receiving"
>上传图片</el-button
>
<div
slot="tip"
style="font-family: '微软雅黑', sans-serif; font-weight: 400; font-style: normal; color: #999999;"
>
支持格式：.jpg, .png 单个文件不能超过5MB 建议图片分辨率640*520
</div>
</el-upload>
</el-form-item>
<el-form-item label="期刊音乐">
<el-row>
<el-col :span="6"
><el-button plain size="middle" type="primary" icon="el-icon-plus"
>上传歌曲</el-button
></el-col
>
<el-col :span="6"
><el-button
plain
size="middle"
type="primary"
icon="el-icon-zoom-in"
>曲库添加</el-button
></el-col
>
</el-row>
</el-form-item>
</el-form>
<el-table
size="mini"
:data="data.songs"
style="width: calc(50% + 400px); margin: 0 0 auto auto;"
stripe
class="draggable-table"
row-key="name"
border
fit
element-loading-text="加载中"
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
>
<el-table-column label="排序" align="center" width="60">
<template slot-scope="scope">
<i class="el-icon-rank"></i>
</template>
</el-table-column>
<el-table-column prop="picture" label="专辑封面"></el-table-column>
<el-table-column prop="name" label="歌曲名称"></el-table-column>
<el-table-column prop="artist" label="歌手/乐队"></el-table-column>
<el-table-column prop="album" label="所属专辑"></el-table-column>
<el-table-column prop="duration" label="时长"></el-table-column>
<el-table-column label="操作" fixed="right" width="300">
<template slot-scope="scope">
<el-button plain icon="el-icon-edit" type="primary" size="mini"
>编辑</el-button
>
<el-button
plain
icon="el-icon-success"
type="success"
size="mini"
@click="handleLyricClick(scope.row)"
>歌词</el-button
>
<el-popconfirm
confirm-button-text="确定"
cancel-button-text="取消"
icon="el-icon-info"
icon-color="red"
title="是否确认删除标签？"
style="margin-left: 10px;"
@confirm="console.log('delete')"
>
<el-button
slot="reference"
plain
icon="el-icon-delete"
type="danger"
size="mini"
>删除</el-button
>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-form
label-suffix=":"
style="width: calc(50% + 400px); margin: 15px 0 auto auto;"
label-position="left"
label-width="100px"
>
<el-form-item prop="volid" label="期刊文案">
<quill-editor
ref="text"
v-model="data.summary"
style="height: 500px;"
class="myQuillEditor"
:options="editorOption"
/>
</el-form-item>
</el-form>
<el-dialog
title="歌词"
:visible="true"
v-if="lyricDialog.visible"
width="40%"
top="60px"
append-to-body
:before-close="handleLyricDialogBeforeClose"
>
<el-input type="textarea" v-model="lyricDialog.data"></el-input>
<span slot="footer">
<el-button size="small" type="primary" @click="handleLyricDialogSubmit"
>保存</el-button
>
<el-button size="small" @click="handleLyricDialogCancel"
>取消</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
import Sortable from "sortablejs";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
name: "ArticleModify",
props: {
data: {
type: Object,
default: {
id: null,
name: null,
tag: [],
number: null,
userId: null,
coverPhoto: null,
songs: []
}
},
remoteTagList: {
type: Array,
default: []
}
},
data() {
return {
selectTag: [],
lyricDialog: {
visible: false,
songId: null,
data: ""
},
coverUploadFileList: [],
// editorOption里是放图片上传配置参数用的，例如：
// action: '/api/product/richtext_img_upload.do', // 必填参数 图片上传地址
// methods: 'post', // 必填参数 图片上传方式
// token: '', // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
// name: 'upload_file', // 必填参数 文件的参数名
// size: 500, // 可选参数 图片大小，单位为Kb, 1M = 1024Kb
// accept: 'multipart/form-data, image/png, image/gif, image/jpeg, image/bmp, image/x-icon,image/jpg' // 可选 可上传的图片格式
editorOption: {},
rules: {}
};
},
filters: {},
created() {
this.syncTagDataToComponent();
},
components: {
quillEditor
},
mounted() {
// 需要支持拖动效果的列表容器，在这里我们设置为el-table组件的tbody，
// 注意：最前面的一段为前面el-table的class: draggable-table，主要为了防止如果页面有多个table，多个table同时实现拖拽效果
// 当然，如果多个table都需要拖拽效果，选择器中最前面的.draggable-table可以去除。
const tbody = document.querySelector(
".draggable-table .el-table__body-wrapper tbody"
);
new Sortable(tbody, {
animation: 150,
// 需要在odEnd方法中处理原始eltable数据，使原始数据与显示数据保持顺序一致
onEnd: ({ newIndex, oldIndex }) => {
const targetRow = this.data.songTableData[oldIndex];
this.data.songTableData.splice(oldIndex, 1);
this.data.songTableData.splice(newIndex, 0, targetRow);
console.table(this.data.songTableData);
}
});
},
methods: {
syncTagDataToComponent() {
// selectTag
for (let i in this.data.tag) {
let tag = this.data.tag[i];
for (let j in this.remoteTagList) {
let jId = this.remoteTagList[j].value;
for (let k in this.remoteTagList[j].children) {
let kId = this.remoteTagList[j].children[k].value;
if (tag === this.remoteTagList[j].children[k].value) {
this.selectTag.push([jId, kId]);
}
}
}
}
},
handleTagSelectChange(val) {
let newTag = [];
for (let i in val) {
newTag.push(val[i][1]);
}
this.data.tag = newTag;
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 1 个文件，本次选择了 ${
files.length
} 个文件，共选择了 ${files.length + fileList.length} 个文件`
);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
/**
* 弹窗关闭按扭点击事件
*/
handleLyricDialogBeforeClose(done) {
for (let sIndex in this.data.songs) {
if (this.data.songs[sIndex].id === this.lyricDialog.songId) {
this.data.songs[sIndex].lyric = this.lyricDialog.data;
}
break;
}
this.lyricDialog.data = "";
this.lyricDialog.songId = null;
this.lyricDialog.visible = false;
done();
},
/**
* 弹窗提交按扭点击事件
*/
handleLyricDialogSubmit() {
for (let sIndex in this.data.songs) {
if (this.data.songs[sIndex].id === this.lyricDialog.songId) {
this.data.songs[sIndex].lyric = this.lyricDialog.data;
}
break;
}
this.lyricDialog.data = "";
this.lyricDialog.songId = null;
this.lyricDialog.visible = false;
},
/**
* 弹窗取消按扭点击事件
*/
handleLyricDialogCancel() {
this.lyricDialog.data = "";
this.lyricDialog.songId = null;
this.lyricDialog.visible = false;
},
/**
* 打开弹窗按扭点击事件
*/
handleLyricClick(row) {
this.lyricDialog.songId = row.id;
this.lyricDialog.data = row.lyric;
this.lyricDialog.visible = true;
}
}
};
</script>

111
src/views/article/index.vue
Unescape View File

@ -40,7 +40,7 @@
> >
</div> </div>
<!-- 查询条件 --> <!-- 查询条件 -->
<el-form :inline="true" class="in-card-form"> <el-form :inline="true" class="in-card-form" label-suffix=":">
<el-form-item> <el-form-item>
<el-input <el-input
placeholder="期刊号/期刊标题" placeholder="期刊号/期刊标题"
@ -151,7 +151,7 @@
<el-table-column <el-table-column
fixed="right" fixed="right"
label="操作" label="操作"
:width="[300, 200, 300][activateTab]" :width="[200, 200, 100][activateTab]"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
@ -165,7 +165,7 @@
<el-button <el-button
plain plain
icon="el-icon-success" icon="el-icon-success"
v-if="activateTab === 0 || activateTab === 2" v-if="activateTab === 0"
@click="handlePublishClick(scope.row)" @click="handlePublishClick(scope.row)"
type="success" type="success"
size="mini" size="mini"
@ -180,25 +180,6 @@
size="mini" size="mini"
>详情</el-button >详情</el-button
> >
<el-popconfirm
confirm-button-text="确定"
cancel-button-text="取消"
icon="el-icon-info"
icon-color="red"
title="是否确认删除标签？"
style="margin-left: 10px;"
v-if="activateTab === 0 || activateTab === 2"
@confirm="handleDeleteClick(scope.row)"
>
<el-button
slot="reference"
plain
icon="el-icon-delete"
type="danger"
size="mini"
>删除</el-button
>
</el-popconfirm>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column fixed="right" label="启停用" width="100"> <el-table-column fixed="right" label="启停用" width="100">
@ -236,16 +217,14 @@
top="60px" top="60px"
:before-close="handleModifyDialogBeforeClose" :before-close="handleModifyDialogBeforeClose"
> >
<div style="height: 70vh;overflow: auto;"> <div style="height: 70vh;overflow: auto;padding-left:20px;padding-right:20px">
<ArticleDetailDialog :data="modifyDialog.data"></ArticleDetailDialog> <ArticleModify v-if="modifyDialog.visible && (modifyDialog.type===0 || modifyDialog.type===1)" :data="modifyDialog.data" :remoteTagList="queryForm.remoteData.superFilterTags"></ArticleModify>
<ArticleDetail v-if="modifyDialog.visible && (modifyDialog.type===2)" :data="modifyDialog.data" :remoteTagList="queryForm.remoteData.superFilterTags"></ArticleDetail>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button size="small" type="primary" @click="handleDialogSubmit" <el-button v-if="(modifyDialog.type===0 || modifyDialog.type===1)" size="small" type="primary" @click="handleDialogSubmit"
>确定</el-button >确定</el-button
> >
<el-button size="small" type="primary" @click="handleDialogSubmit"
>重置</el-button
>
<el-button size="small" @click="handleDialogCancel">取消</el-button> <el-button size="small" @click="handleDialogCancel">取消</el-button>
</span> </span>
</el-dialog> </el-dialog>
@ -267,7 +246,8 @@
<script> <script>
import articleApi from "@/api/article"; import articleApi from "@/api/article";
import SuperFilterTagDrawer from "./superFilterTagDrawer.vue"; import SuperFilterTagDrawer from "./superFilterTagDrawer.vue";
import ArticleDetailDialog from "./articleDetail.vue"; import ArticleModify from "./articleModify.vue";
import ArticleDetail from "./articleDetail.vue"
export default { export default {
name: "Article", name: "Article",
@ -311,7 +291,8 @@ export default {
}; };
}, },
components: { components: {
ArticleDetailDialog, ArticleModify,
ArticleDetail,
SuperFilterTagDrawer SuperFilterTagDrawer
}, },
filters: {}, filters: {},
@ -341,13 +322,13 @@ export default {
userId: param.creatorId userId: param.creatorId
}; };
if (this.queryForm.data.timeRange) { if (param.timeRange) {
if (this.queryForm.data.timeRange[0]) { if (param.timeRange[0]) {
queryParam.start = this.queryForm.data.timeRange[0]; queryParam.start = param.timeRange[0];
} }
if (this.queryForm.data.timeRange[1]) { if (param.timeRange[1]) {
queryParam.end = this.queryForm.data.timeRange[1]; queryParam.end = param.timeRange[1];
} }
} }
this.table.loading = true; this.table.loading = true;
@ -372,7 +353,7 @@ export default {
coverPhoto: "coverPhoto", coverPhoto: "coverPhoto",
createTime: "2023-01-01", createTime: "2023-01-01",
id: "1", id: "1",
name: "name", name: "期刊名称",
number: "1001", number: "1001",
playCount: 1, playCount: 1,
pubTime: "2023-01-01", pubTime: "2023-01-01",
@ -389,7 +370,7 @@ export default {
picture: "/pic/pic", picture: "/pic/pic",
size: "1.3m", size: "1.3m",
state: "1", state: "1",
tags: [1, 2], tags: [3, 5, 11],
updateTime: "2023-01-01", updateTime: "2023-01-01",
url: "/music/music", url: "/music/music",
userId: "1" userId: "1"
@ -398,7 +379,7 @@ export default {
state: "1", state: "1",
status: "1", status: "1",
summary: "领军 \n 灵精了", summary: "领军 \n 灵精了",
tag: [], tag: [3, 5, 11],
userId: "1" userId: "1"
} }
], ],
@ -431,20 +412,20 @@ export default {
fetchSuperFilterTags() { fetchSuperFilterTags() {
this.queryForm.remoteData.superFilterTags = [ this.queryForm.remoteData.superFilterTags = [
{ {
id: 1, value: 1,
name: "语言类型", label: "语言类型",
tags: [ children: [
{ id: 3, name: "中文" }, { value: 3, label: "中文" },
{ id: 4, name: "日文" }, { value: 4, label: "日文" },
{ id: 5, name: "英文" } { value: 5, label: "英文" }
] ]
}, },
{ {
id: 10, value: 10,
name: "期刊标签", label: "期刊标签",
tags: [ children: [
{ id: 11, name: "民谣" }, { value: 11, label: "民谣" },
{ id: 12, name: "摇滚" } { value: 12, label: "摇滚" }
] ]
} }
]; ];
@ -480,7 +461,19 @@ export default {
* 高级筛选中的查询按钮 * 高级筛选中的查询按钮
*/ */
handleSuperFilterTagQuery(val) { handleSuperFilterTagQuery(val) {
this.console.log(val); let tags = []
for(let i in val) {
tags.push(val[i].value)
}
let queryParam = {
name: null,
creatorId: null,
timeRange: [],
tags: tags
};
this.fetchData(queryParam);
this.queryForm.superFilterDialog.visible = false;
console.log(queryParam);
}, },
/** /**
* 新建标签点击事件 * 新建标签点击事件
@ -525,21 +518,9 @@ export default {
* 详情点击事件 * 详情点击事件
*/ */
handleDetailClick(row) { handleDetailClick(row) {
this.$message.success("详情" + row.id); this.modifyDialog.data = JSON.parse(JSON.stringify(row));
}, this.modifyDialog.type = 2;
/** this.modifyDialog.visible = true;
* 删除按钮点击事件
*/
handleDeleteClick(row) {
articleApi.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);
}
});
}, },
/** /**
* 表格内状态滑块切换事件 * 表格内状态滑块切换事件

26
src/views/article/superFilterTagDrawer.vue
Unescape View File

@ -10,9 +10,9 @@
<el-collapse-item <el-collapse-item
style="padding-left: 20px;padding-right: 20px;" style="padding-left: 20px;padding-right: 20px;"
v-for="group in remoteTagData" v-for="group in remoteTagData"
:title="group.name" :title="group.label"
:name="group.name" :name="group.label"
:key="group.name" :key="group.label"
> >
<el-button <el-button
type="primary" type="primary"
@ -26,17 +26,17 @@
plain plain
style="margin-left: 10px;margin-top: 2px;" style="margin-left: 10px;margin-top: 2px;"
size="mini" size="mini"
v-for="tag in group.tags" v-for="tag in group.children"
:key="tag.id" :key="tag.value"
@click="tagClick(tag)" @click="tagClick(tag)"
>{{ tag.name }}</el-button >{{ tag.label }}</el-button
> >
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
<div style="padding:20px;font-size: 13px;font-weight: 500;"> <div style="padding:20px;font-size: 13px;font-weight: 500;">
<span style="margin-right: 5px;">已选条件</span> <span style="margin-right: 5px;">已选条件</span>
<el-tag <el-tag
:key="tag.id" :key="tag.value"
size="small" size="small"
v-for="tag in selectTagList" v-for="tag in selectTagList"
closable closable
@ -44,7 +44,7 @@
style="margin-right:5px" style="margin-right:5px"
@close="tagClick(tag)" @close="tagClick(tag)"
> >
{{ tag.name }} {{ tag.label }}
</el-tag> </el-tag>
<el-button type="text" @click="clearAllClick">清除筛选</el-button> <el-button type="text" @click="clearAllClick">清除筛选</el-button>
</div> </div>
@ -83,7 +83,7 @@ export default {
this.activeTagGroupNames = []; this.activeTagGroupNames = [];
for (let index in this.remoteTagData) { for (let index in this.remoteTagData) {
let item = this.remoteTagData[index]; let item = this.remoteTagData[index];
this.activeTagGroupNames.push(item.name); this.activeTagGroupNames.push(item.label);
} }
}, },
methods: { methods: {
@ -92,12 +92,12 @@ export default {
*/ */
tagAllClick(newTagGroup) { tagAllClick(newTagGroup) {
let newTagList = [...this.selectTagList]; let newTagList = [...this.selectTagList];
for (let subTagIndex in newTagGroup.tags) { for (let subTagIndex in newTagGroup.children) {
let newTag = newTagGroup.tags[subTagIndex]; let newTag = newTagGroup.children[subTagIndex];
let inList = false; let inList = false;
for (let index in this.selectTagList) { for (let index in this.selectTagList) {
let item = this.selectTagList[index]; let item = this.selectTagList[index];
if (item.id === newTag.id) { if (item.value === newTag.value) {
inList = true; inList = true;
continue; continue;
} }
@ -116,7 +116,7 @@ export default {
let deleted = false; let deleted = false;
for (let index in this.selectTagList) { for (let index in this.selectTagList) {
let item = this.selectTagList[index]; let item = this.selectTagList[index];
if (item.id === newTag.id) { if (item.value === newTag.value) {
deleted = true; deleted = true;
continue; continue;
} }

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

@ -35,7 +35,12 @@
size="medium" size="medium"
v-model="queryForm.data.parentId" v-model="queryForm.data.parentId"
> >
<el-option v-for="item in queryForm.remoteData.parentTag" :label="item.nameCh" :value="item.id" :key="item.id"></el-option> <el-option
v-for="item in queryForm.remoteData.parentTag"
:label="item.nameCh"
:value="item.id"
:key="item.id"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
@ -239,7 +244,12 @@
size="medium" size="medium"
v-model="modifyDialog.form.data.parentId" v-model="modifyDialog.form.data.parentId"
> >
<el-option v-for="item in queryForm.remoteData.parentTag" :label="item.nameCh" :value="item.id" :key="item.id"></el-option> <el-option
v-for="item in queryForm.remoteData.parentTag"
:label="item.nameCh"
:value="item.id"
:key="item.id"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="中文名称" prop="nameCh"> <el-form-item label="中文名称" prop="nameCh">
@ -345,15 +355,13 @@ export default {
let queryParam = { let queryParam = {
...param ...param
}; };
if (this.queryForm.data.timeRange) { if (param.timeRange) {
if (this.queryForm.data.timeRange[0]) { if (param.timeRange[0]) {
queryParam.createTimeStart = queryParam.createTimeStart = param.timeRange[0] + " 00:00:00";
this.queryForm.data.timeRange[0] + " 00:00:00";
} }
if (this.queryForm.data.timeRange[1]) { if (param.timeRange[1]) {
queryParam.createTimeEnd = queryParam.createTimeEnd = param.timeRange[1] + " 23:59:59";
this.queryForm.data.timeRange[1] + " 23:59:59";
} }
} }
this.table.loading = true; this.table.loading = true;

Write Preview
Loading…
Cancel
Save