529 lines
15 KiB
Vue
529 lines
15 KiB
Vue
|
<template>
|
|||
|
|
<div class="_tablepage">
|
|||
|
|
<searchForm
|
|||
|
|
:searchForm="pageData.searchForm"
|
|||
|
|
:searchData="pageData.queryData"
|
|||
|
|
:searchHandle="pageData.searchHandle"
|
|||
|
|
>
|
|||
|
|
</searchForm>
|
|||
|
|
<cusTable
|
|||
|
|
:loading="loading"
|
|||
|
|
:isSelection="true"
|
|||
|
|
:isIndex="true"
|
|||
|
|
:isPagination="true"
|
|||
|
|
:isHandle="true"
|
|||
|
|
:tableCols="pageData.tableCols"
|
|||
|
|
:tableHandles="pageData.tableHandles"
|
|||
|
|
:tableData="pageData.tableData"
|
|||
|
|
:tablePage="pageData.tablePage"
|
|||
|
|
@handleCurrentChange="searchTableList"
|
|||
|
|
@selectChange="selectChange"
|
|||
|
|
@handleSizeChange="searchTableList"
|
|||
|
|
></cusTable>
|
|||
|
|
<modal
|
|||
|
|
ref="modalRef"
|
|||
|
|
:modalConfig="pageData.modalConfig"
|
|||
|
|
:modalForm="pageData.modalForm"
|
|||
|
|
:modalData="pageData.modalData"
|
|||
|
|
:modalHandles="pageData.modalHandles"
|
|||
|
|
@closeModal="closeModal()"
|
|||
|
|
></modal>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import modal from "../../../components/common/modal/modal.vue";
|
|||
|
|
import searchForm from "../../../components/common/searchform/searchForm.vue";
|
|||
|
|
import cusTable from "../../../components/common/table/custable.vue";
|
|||
|
|
export default {
|
|||
|
|
components: { searchForm, cusTable, modal },
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
//加载动画
|
|||
|
|
loading:false,
|
|||
|
|
typeList: [],
|
|||
|
|
pageData: {
|
|||
|
|
//查询表单内容 start
|
|||
|
|
searchForm: [
|
|||
|
|
{ type: "Input", label: "关键字", prop: "searchName",placeholder:'标题、来源、编辑者名称',width:'230px' },
|
|||
|
|
{
|
|||
|
|
type: "Select",
|
|||
|
|
label: "内容类型",
|
|||
|
|
prop: "isVideo",
|
|||
|
|
options: [{
|
|||
|
|
label:'资讯',value:0
|
|||
|
|
},{label:'视频',value:1}],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "DateTimeRange",
|
|||
|
|
label: "发布时间范围",
|
|||
|
|
prop: "time",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
//查询表单内容 end
|
|||
|
|
//查询条件 start
|
|||
|
|
queryData: {
|
|||
|
|
searchName: "",
|
|||
|
|
contentTypeId: "",
|
|||
|
|
time: [],
|
|||
|
|
isVideo:0
|
|||
|
|
},
|
|||
|
|
//查询条件 end
|
|||
|
|
//查询表单按钮start
|
|||
|
|
searchHandle: [
|
|||
|
|
{
|
|||
|
|
label: "查询",
|
|||
|
|
type: "primary",
|
|||
|
|
handle: () => this.searchTableList(),
|
|||
|
|
auth: "reportDatasource_search",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "重置",
|
|||
|
|
type: "warning",
|
|||
|
|
handle: () => this.resetSearch(),
|
|||
|
|
auth: "reportDatasource_search",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
//查询表单按钮end
|
|||
|
|
//表格数据start
|
|||
|
|
tableData: [],
|
|||
|
|
//表格数据end
|
|||
|
|
//表格工具栏按钮 start
|
|||
|
|
tableHandles: [
|
|||
|
|
{
|
|||
|
|
label: "新增",
|
|||
|
|
type: "primary",
|
|||
|
|
handle: () => this.showModal(this.commonConstants.modalType.insert),
|
|||
|
|
auth: "reportDatasource_insert",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "批量删除",
|
|||
|
|
type: "danger",
|
|||
|
|
handle: () => this.deleteBatch(),
|
|||
|
|
auth: "reportDatasource_batchDelete",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
//表格工具栏按钮 end
|
|||
|
|
selectList: [], //表格选中的数据
|
|||
|
|
//表格分页信息start
|
|||
|
|
tablePage: {
|
|||
|
|
currentPage: 1,
|
|||
|
|
pageSize: 5,
|
|||
|
|
pageTotal: 0,
|
|||
|
|
pageSizeRange: [5, 10, 20, 50],
|
|||
|
|
},
|
|||
|
|
//表格分页信息end
|
|||
|
|
//表格列表头start
|
|||
|
|
tableCols: [
|
|||
|
|
{ label: "标题", prop: "title", align: "center" },
|
|||
|
|
{ label: "副标题", prop: "subtitle", align: "center" },
|
|||
|
|
{ label: "资讯来源", prop: "source", align: "center" },
|
|||
|
|
{ label: "编辑者", prop: "editorName", align: "center" },
|
|||
|
|
{ label: "作者", prop: "author", align: "center" },
|
|||
|
|
{ label: "封面", type: "image", prop: "imageUrl", align: "center" },
|
|||
|
|
{ label: "外链", prop: "contentLink", align: "center" },
|
|||
|
|
{ label: "阅读数", prop: "readNumber", align: "center" },
|
|||
|
|
{ label: "喜欢", prop: "likeNumber", align: "center" },
|
|||
|
|
{ label: "收藏数", prop: "collectNumber", align: "center" },
|
|||
|
|
{
|
|||
|
|
label: "操作",
|
|||
|
|
prop: "operation",
|
|||
|
|
align: "center",
|
|||
|
|
type: "button",
|
|||
|
|
width:'180px',
|
|||
|
|
fixed: "right",
|
|||
|
|
btnList: [
|
|||
|
|
{
|
|||
|
|
label: "预览",
|
|||
|
|
type: "text",
|
|||
|
|
auth: "reportDatasource_getDetail",
|
|||
|
|
handle: (row) =>
|
|||
|
|
this.showModal(this.commonConstants.modalType.detail, row),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "编辑",
|
|||
|
|
type: "text",
|
|||
|
|
auth: "reportDatasource_update",
|
|||
|
|
handle: (row) =>
|
|||
|
|
this.showModal(this.commonConstants.modalType.update, row),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "删除",
|
|||
|
|
type: "text",
|
|||
|
|
auth: "reportDatasource_delete",
|
|||
|
|
handle: (row) => this.deleteOne(row.contentInfoId),
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
//表格列表头end
|
|||
|
|
//modal配置 start
|
|||
|
|
modalConfig: {
|
|||
|
|
title: "新增", //弹窗标题,值为:新增，查看，编辑
|
|||
|
|
show: false, //弹框显示
|
|||
|
|
formEditDisabled: false, //编辑弹窗是否可编辑
|
|||
|
|
width: "80vw", //弹出框宽度
|
|||
|
|
modalRef: "modalRef", //modal标识
|
|||
|
|
type: "1", //类型 1新增 2编辑 3保存
|
|||
|
|
},
|
|||
|
|
//modal配置 end
|
|||
|
|
//modal表单 start
|
|||
|
|
modalForm: [
|
|||
|
|
{
|
|||
|
|
type: "Input",
|
|||
|
|
label: "标题",
|
|||
|
|
prop: "title",
|
|||
|
|
rules: { required: true, maxLength: 100 },
|
|||
|
|
width: "900px",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "Input",
|
|||
|
|
label: "副标题",
|
|||
|
|
prop: "subtitle",
|
|||
|
|
rules: { maxLength: 100 },
|
|||
|
|
width: "900px",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "Input",
|
|||
|
|
label: "资讯来源",
|
|||
|
|
prop: "source",
|
|||
|
|
rules: { required: true, maxLength: 100 },
|
|||
|
|
width: "300px",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "Input",
|
|||
|
|
label: "作者",
|
|||
|
|
prop: "author",
|
|||
|
|
rules: { maxLength: 100 },
|
|||
|
|
width: "300px",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "Input",
|
|||
|
|
label: "编辑者",
|
|||
|
|
prop: "editorName",
|
|||
|
|
rules: { maxLength: 100 },
|
|||
|
|
width: "300px",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "Input",
|
|||
|
|
label: "外链",
|
|||
|
|
prop: "contentLink",
|
|||
|
|
rules: { maxLength: 100 },
|
|||
|
|
width: "300px",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "Input",
|
|||
|
|
label: "关键词",
|
|||
|
|
prop: "keywords",
|
|||
|
|
rules: { maxLength: 100 },
|
|||
|
|
width: "300px",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type:'Radio',
|
|||
|
|
prop:'isVideo',
|
|||
|
|
label:'内容类型',
|
|||
|
|
radios:[{label:'资讯',value:'0'},{label:'视频',value:'1'}],
|
|||
|
|
width: "300px",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "Upload",
|
|||
|
|
label: "封面",
|
|||
|
|
fileUrl: "imageUrl",
|
|||
|
|
prop: "fileList",
|
|||
|
|
accept: ".jpg,.jpeg,.png,.JPG,.JPEG",
|
|||
|
|
width: "300px",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "Tinymce",
|
|||
|
|
label: "资讯内容",
|
|||
|
|
prop: "content",
|
|||
|
|
rules: { required: true },
|
|||
|
|
width: "1200px",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
newModalForm:[
|
|||
|
|
{
|
|||
|
|
type: "Upload",
|
|||
|
|
label: "封面",
|
|||
|
|
fileUrl: "imageUrl",
|
|||
|
|
prop: "fileList",
|
|||
|
|
accept: ".jpg,.jpeg,.png,.JPG,.JPEG",
|
|||
|
|
width: "300px",
|
|||
|
|
},
|
|||
|
|
],//咨询专属内容
|
|||
|
|
videoModalForm:[
|
|||
|
|
{
|
|||
|
|
type: "Upload",
|
|||
|
|
label: "封面",
|
|||
|
|
fileUrl: "imageUrl",
|
|||
|
|
prop: "fileList",
|
|||
|
|
accept: ".jpg,.jpeg,.png,.JPG,.JPEG",
|
|||
|
|
width: "300px",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "Upload",
|
|||
|
|
label: "视频",
|
|||
|
|
fileUrl: "videoUrl",
|
|||
|
|
prop: "fileListVideo",
|
|||
|
|
listType:'text',
|
|||
|
|
width: "300px",
|
|||
|
|
isVideo:true,
|
|||
|
|
rules:{required:true},
|
|||
|
|
accept:'.mp4,.avi,.mov,.rmvb,.flv,.MP4,.AVI,.MOV,.RMVB,.FLV',
|
|||
|
|
tips:'请上传视频文件'
|
|||
|
|
},
|
|||
|
|
],//视频专属内容
|
|||
|
|
//modal表单 end
|
|||
|
|
//modal 数据 start
|
|||
|
|
modalData: {
|
|||
|
|
userId: "",
|
|||
|
|
content: "",
|
|||
|
|
fileUrl: "",
|
|||
|
|
fileList: [],
|
|||
|
|
isVideo:'0',
|
|||
|
|
videoUrl:'',
|
|||
|
|
source:'',
|
|||
|
|
fileListVideo:[]
|
|||
|
|
},
|
|||
|
|
//modal 数据 end
|
|||
|
|
//modal 按钮 start
|
|||
|
|
modalHandles: [
|
|||
|
|
{ label: "取消", type: "default", handle: () => this.closeModal() },
|
|||
|
|
{ label: "提交", type: "primary", handle: () => this.save() },
|
|||
|
|
],
|
|||
|
|
//modal 按钮 end
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
watch:{
|
|||
|
|
"pageData.modalData.isVideo":{
|
|||
|
|
handler:function(val,oldval){
|
|||
|
|
// console.log(val)
|
|||
|
|
if(val==='1'&&oldval==='0'){
|
|||
|
|
this.pageData.modalForm.splice(-1-this.pageData.newModalForm.length,this.pageData.newModalForm.length,...this.pageData.videoModalForm)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
else if(val==='0'&&oldval==='1'){
|
|||
|
|
this.pageData.modalForm.splice(-1-this.pageData.videoModalForm.length,this.pageData.videoModalForm.length,...this.pageData.newModalForm)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"pageData.modalData.fileList":{
|
|||
|
|
handler:function(val){
|
|||
|
|
if(val&&val.length===0){
|
|||
|
|
this.pageData.modalData.imageUrl=''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"pageData.modalData.fileListVideo":{
|
|||
|
|
handler:function(val){
|
|||
|
|
if(val&&val.length===0){
|
|||
|
|
this.pageData.modalData.videoUrl=''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
activated() {
|
|||
|
|
this.searchTableList();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/**
|
|||
|
|
* @description: 获取表格数据
|
|||
|
|
* @param {type}
|
|||
|
|
* @return:
|
|||
|
|
* @author: ym
|
|||
|
|
*/
|
|||
|
|
searchTableList() {
|
|||
|
|
this.loading=true;
|
|||
|
|
// 初始化obj
|
|||
|
|
var obj = {};
|
|||
|
|
Object.assign(obj, this.pageData.queryData, this.pageData.tablePage);
|
|||
|
|
obj.page = this.pageData.tablePage.currentPage;
|
|||
|
|
obj.limit = this.pageData.tablePage.pageSize;
|
|||
|
|
delete obj["pageSizeRange"];
|
|||
|
|
if (obj.time.length == 2) {
|
|||
|
|
obj.startTime = obj.time[0];
|
|||
|
|
obj.endTime = obj.time[1];
|
|||
|
|
}
|
|||
|
|
delete obj.time
|
|||
|
|
// 请求数据
|
|||
|
|
this.$api.getActivityInfoListByParams(obj).then((res) => {
|
|||
|
|
this.commonUtil.tableAssignment(
|
|||
|
|
res.data.page,
|
|||
|
|
this.pageData.tablePage,
|
|||
|
|
this.pageData.tableData
|
|||
|
|
);
|
|||
|
|
})
|
|||
|
|
.finally(()=>{
|
|||
|
|
this.loading=false;
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 重置
|
|||
|
|
resetSearch() {
|
|||
|
|
this.commonUtil.clearObj(this.pageData.queryData);
|
|||
|
|
this.searchTableList();
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* @description: modal显示
|
|||
|
|
* @param {type} 类型 1新增，2编辑 3详情
|
|||
|
|
* @param {id} 数据唯一标识
|
|||
|
|
* @return:
|
|||
|
|
* @author: ym
|
|||
|
|
*/
|
|||
|
|
showModal(type, row) {
|
|||
|
|
this.commonUtil.clearObj(this.pageData.modalData); //清空modalData
|
|||
|
|
this.$nextTick(()=>{
|
|||
|
|
this.$refs["modalRef"].$refs["modalFormRef"].clearValidate(); //校验重置
|
|||
|
|
})
|
|||
|
|
this.pageData.modalData.source=this.$newSource//获取默认的资讯来源
|
|||
|
|
this.pageData.modalData.isVideo='0'//补充isVideo 不会触发watch
|
|||
|
|
this.commonUtil.showModal(this.pageData.modalConfig, type);
|
|||
|
|
if (type != this.commonConstants.modalType.insert) {
|
|||
|
|
this.getDetail(row);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* @description: 获取详细数据
|
|||
|
|
* @param {id} 数据唯一标识
|
|||
|
|
* @return:
|
|||
|
|
* @author: ym
|
|||
|
|
*/
|
|||
|
|
getDetail(row) {
|
|||
|
|
if(row.imageUrl){
|
|||
|
|
row.fileList=[{
|
|||
|
|
url:row.imageUrl
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
if(row.videoUrl){
|
|||
|
|
row.fileListVideo=[{
|
|||
|
|
url:row.videoUrl
|
|||
|
|
// +'?x-oss-process=video/snapshot,t_10000,m_fast'
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
row.isVideo=row.isVideo+''
|
|||
|
|
this.$nextTick(()=>{
|
|||
|
|
this.pageData.modalData = JSON.parse(JSON.stringify(row));
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* @description: 关闭modal
|
|||
|
|
* @param
|
|||
|
|
* @return:
|
|||
|
|
* @author: ym
|
|||
|
|
*/
|
|||
|
|
closeModal() {
|
|||
|
|
this.pageData.modalConfig.show = false; //关闭modal
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* @description: 保存数据
|
|||
|
|
* @param {type}
|
|||
|
|
* @return:
|
|||
|
|
* @author: ym
|
|||
|
|
*/
|
|||
|
|
save() {
|
|||
|
|
this.pageData.modalData.userId = this.$store.state.user.id;
|
|||
|
|
this.$refs["modalRef"].$refs["modalFormRef"].validate((valid) => {
|
|||
|
|
if (valid) {
|
|||
|
|
let content = this.pageData.modalData;
|
|||
|
|
if(content.isVideo==0){
|
|||
|
|
content.videoUrl=''
|
|||
|
|
}
|
|||
|
|
if (
|
|||
|
|
this.pageData.modalConfig.type ==
|
|||
|
|
this.commonConstants.modalType.insert
|
|||
|
|
) {
|
|||
|
|
this.$api.saveActivityInfo(content).then((res) => {
|
|||
|
|
this.searchTableList();
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
this.$api.updateRedActivityInfo(content).then((res) => {
|
|||
|
|
this.searchTableList();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
this.closeModal();
|
|||
|
|
} else {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* @description: 删除一条数据
|
|||
|
|
* @param {id} 数据唯一标识
|
|||
|
|
* @return:
|
|||
|
|
* @author: ym
|
|||
|
|
*/
|
|||
|
|
deleteOne(id) {
|
|||
|
|
let ids = [];
|
|||
|
|
ids[0] = id;
|
|||
|
|
let obj = {
|
|||
|
|
messageContent: this.commonUtil.getMessageFromList(
|
|||
|
|
"confirm.delete",
|
|||
|
|
null
|
|||
|
|
),
|
|||
|
|
};
|
|||
|
|
this.commonUtil
|
|||
|
|
.showConfirm(obj)
|
|||
|
|
.then(async () => {
|
|||
|
|
await this.$api.deleteRedActivityInfo(ids).then((res) => {
|
|||
|
|
this.searchTableList();
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
this.commonUtil.showMessage({
|
|||
|
|
message: this.commonUtil.getMessageFromList("error.cancel", null),
|
|||
|
|
type: this.commonConstants.messageType.info,
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* @description: 批量删除
|
|||
|
|
* @param {type}
|
|||
|
|
* @return:
|
|||
|
|
* @author: ym
|
|||
|
|
*/
|
|||
|
|
deleteBatch() {
|
|||
|
|
const length = this.pageData.selectList.length;
|
|||
|
|
if (length == 0) {
|
|||
|
|
this.commonUtil.showMessage({
|
|||
|
|
message: this.commonUtil.getMessageFromList(
|
|||
|
|
"error.batchdelete.empty",
|
|||
|
|
null
|
|||
|
|
),
|
|||
|
|
type: this.commonConstants.messageType.error,
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
let ids = [];
|
|||
|
|
for (let i = 0; i < length; i++) {
|
|||
|
|
ids.push("" + this.pageData.selectList[i].contentInfoId);
|
|||
|
|
}
|
|||
|
|
let obj = {
|
|||
|
|
messageContent: this.commonUtil.getMessageFromList(
|
|||
|
|
"confirm.delete",
|
|||
|
|
null
|
|||
|
|
),
|
|||
|
|
};
|
|||
|
|
this.commonUtil
|
|||
|
|
.showConfirm(obj)
|
|||
|
|
.then(() => {
|
|||
|
|
this.$api.deleteRedActivityInfo(ids).then((res) => {
|
|||
|
|
this.searchTableList();
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
this.commonUtil.showMessage({
|
|||
|
|
message: this.commonUtil.getMessageFromList("error.cancel", null),
|
|||
|
|
type: this.commonConstants.messageType.info,
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
selectChange(rows) {
|
|||
|
|
this.pageData.selectList = rows;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.content-dialog ::v-deep .el-dialog__body{
|
|||
|
|
padding: 0px;
|
|||
|
|
}
|
|||
|
|
</style>
|