672 lines
20 KiB
Vue
672 lines
20 KiB
Vue
<template>
|
||
<div class="_tablepage">
|
||
<searchForm
|
||
ref="searchForm"
|
||
:searchForm="pageData.searchForm"
|
||
:searchData="pageData.queryData"
|
||
:searchHandle="pageData.searchHandle"
|
||
>
|
||
</searchForm>
|
||
<obj-table-plus
|
||
style="height: 60vh"
|
||
@query="searchTableList"
|
||
ref="oTable"
|
||
v-model="pageData.tableData"
|
||
:isPagination="true"
|
||
:tableCols="pageData.tableCols"
|
||
:tableProp="tableProp"
|
||
:toolbarProp="{}"
|
||
:tableEvent="{ 'select-change': selectChange }"
|
||
/>
|
||
<!-- <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>
|
||
<!-- 审核弹窗 -->
|
||
<ApprovalModal type="content" ref="ApprovalModal" @refresh="$refs.oTable.refresh()"/>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import ApprovalModal from '../popup/approval.vue'
|
||
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,ApprovalModal },
|
||
data() {
|
||
return {
|
||
// 加载动画
|
||
tableProp: {
|
||
height: "auto",
|
||
},
|
||
typeList: [],
|
||
pageData: {
|
||
//查询表单内容 start
|
||
searchForm: [
|
||
{
|
||
type: "Input",
|
||
label: "关键字",
|
||
size: "mini",
|
||
prop: "searchName",
|
||
placeholder: "标题、来源、编辑者名称",
|
||
width: "230px",
|
||
},
|
||
// {
|
||
// type: "Cascader",
|
||
// label: "资讯分类",
|
||
// size:"mini",
|
||
// prop: "mainTypeId",//实际传参时进行了处理
|
||
// data: [],
|
||
// },
|
||
{
|
||
type: "Select",
|
||
label: "内容类型",
|
||
size: "mini",
|
||
prop: "searchType",
|
||
options: [
|
||
{
|
||
label: "内容轮播图",
|
||
value: 3,
|
||
},
|
||
{
|
||
label: "学习轮播图",
|
||
value: 4,
|
||
},
|
||
{
|
||
label: "地方内容",
|
||
value: 2,
|
||
},
|
||
{
|
||
label: "红色内容",
|
||
value: 1,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "Select",
|
||
prop: "isVideo",
|
||
label: "信息类型",
|
||
size: "mini",
|
||
options: [
|
||
{ label: "资讯", value: 0 },
|
||
{ label: "视频", value: 1 },
|
||
],
|
||
width: "300px",
|
||
},
|
||
{
|
||
size: "mini",
|
||
type: "DateTimeRange",
|
||
label: "发布时间范围",
|
||
prop: "time",
|
||
},
|
||
{
|
||
type: "Select",
|
||
label: "审核状态",
|
||
prop: "examineStatus",
|
||
default:true,
|
||
size: "mini",
|
||
options: [
|
||
{ label: "未审核", value: 0 },
|
||
{ label: "审核通过", value: 1 },
|
||
{ label: "审核未通过", value: 2 },
|
||
],
|
||
},
|
||
],
|
||
//查询表单内容 end
|
||
//查询条件 start
|
||
queryData: {
|
||
searchName: "",
|
||
mainTypeId: "",
|
||
time: [],
|
||
searchType: 3,
|
||
isVideo: 0,
|
||
examineStatus:'',
|
||
},
|
||
//查询条件 end
|
||
//查询表单按钮start
|
||
searchHandle: [
|
||
{
|
||
label: "查询",
|
||
size: "mini",
|
||
type: "primary",
|
||
handle: () => this.$refs.oTable.reload(),
|
||
auth: "reportDatasource_search",
|
||
},
|
||
{
|
||
label: "重置",
|
||
size: "mini",
|
||
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: [
|
||
{ title: "标题", field: "title", align: "center", fixed: "left" },
|
||
{ title: "副标题", field: "subtitle", align: "center" },
|
||
{ title: "主分类名", field: "mainTypeName", align: "center" },
|
||
{ title: "子分类名", field: "secondTypeName", align: "center" },
|
||
{ title: "资讯来源", field: "source", align: "center" },
|
||
{ title: "编辑者", field: "editorName", align: "center" },
|
||
{ title: "作者", field: "author", align: "center" },
|
||
{
|
||
title: "封面",
|
||
type: "jsx",
|
||
field: "imageUrl",
|
||
align: "center",
|
||
render: ({ row }) => {
|
||
// @/assets/images/noimg.svg
|
||
return (
|
||
<el-image
|
||
fit="cover"
|
||
src={
|
||
row.imageUrl
|
||
? row.imageUrl
|
||
: require("@/assets/images/noimg.svg")
|
||
}
|
||
></el-image>
|
||
);
|
||
},
|
||
},
|
||
// { title: "外链", field: "contentLink", align: "center" },
|
||
{ title: "阅读数", field: "readNumber", align: "center" },
|
||
{ title: "点赞数", field: "likeNumber", align: "center" },
|
||
{ title: "评论数", field: "commentNumber", align: "center" },
|
||
{ title: "收藏数", field: "collectNumber", align: "center" },
|
||
{
|
||
title: "审核状态",
|
||
field: "createTime",
|
||
align: "center",
|
||
// "title-help":{message: '开关开启代表通过审核，关闭代表不通过审核'},
|
||
type: "jsx",
|
||
render: ({ row }) => {
|
||
switch (row.examineStatus) {
|
||
case 0:
|
||
return (
|
||
<span>
|
||
<span style="color:gray">未审核</span>
|
||
</span>
|
||
);
|
||
case 1:
|
||
return (
|
||
<span>
|
||
<span style="color:green">审核通过</span>
|
||
</span>
|
||
);
|
||
case 2:
|
||
return (
|
||
<span>
|
||
<span style="color:red">审核未通过</span>
|
||
</span>
|
||
);
|
||
default:
|
||
return (<span></span>);
|
||
}
|
||
},
|
||
},
|
||
{
|
||
title: "操作",
|
||
field: "operation",
|
||
align: "center",
|
||
type: "button",
|
||
fixed: "right",
|
||
btnList: [
|
||
{
|
||
label: "查看",
|
||
type: "text",
|
||
auth: "reportDatasource_getDetail",
|
||
handle: (row) =>
|
||
this.showModal(this.commonConstants.modalType.detail, row),
|
||
},
|
||
{
|
||
label: "审核",
|
||
type: "text",
|
||
handle: (row) =>
|
||
this.$refs.ApprovalModal.show({...row,contentType:this.pageData.queryData.searchType})
|
||
},
|
||
],
|
||
},
|
||
],
|
||
//表格列表头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",
|
||
placeholder: "",
|
||
disabled: () => true,
|
||
},
|
||
|
||
{
|
||
type: "Input",
|
||
label: "副标题",
|
||
prop: "subtitle",
|
||
// rules: { maxLength: 100 },
|
||
width: "900px",
|
||
placeholder: "",
|
||
disabled: () => true,
|
||
},
|
||
{
|
||
type: "Cascader",
|
||
label: "资讯分类",
|
||
prop: "mainTypeId", //实际传参时进行了处理
|
||
data: [],
|
||
// rules: { required: true },
|
||
width: "300px",
|
||
disabled: () => true,
|
||
},
|
||
{
|
||
type: "Input",
|
||
label: "资讯来源",
|
||
prop: "source",
|
||
// rules: { required: true, maxLength: 100 },
|
||
width: "300px",
|
||
disabled: () => true,
|
||
placeholder: "",
|
||
},
|
||
{
|
||
type: "Input",
|
||
label: "作者",
|
||
prop: "author",
|
||
// rules: { maxLength: 100 },
|
||
width: "300px",
|
||
disabled: () => true,
|
||
placeholder: "",
|
||
},
|
||
{
|
||
type: "Input",
|
||
label: "编辑者",
|
||
prop: "editorName",
|
||
// rules: { maxLength: 100 },
|
||
width: "300px",
|
||
disabled: () => true,
|
||
placeholder: "",
|
||
},
|
||
// {
|
||
// type: "Input",
|
||
// label: "外链",
|
||
// prop: "contentLink",
|
||
// rules: { maxLength: 100 },
|
||
// width: "300px",
|
||
// },
|
||
{
|
||
type: "Input",
|
||
label: "关键词",
|
||
prop: "keywords",
|
||
// rules: { maxLength: 100 },
|
||
width: "300px",
|
||
disabled: () => true,
|
||
placeholder: "",
|
||
},
|
||
{
|
||
type: "Radio",
|
||
prop: "isVideo",
|
||
label: "内容类型",
|
||
radios: [
|
||
{ label: "资讯", value: "0" },
|
||
{ label: "视频", value: "1" },
|
||
],
|
||
width: "300px",
|
||
disabled: () => true,
|
||
},
|
||
|
||
{
|
||
type: "Img",
|
||
label: "封面",
|
||
prop: "imageUrl",
|
||
// prop: "fileList",
|
||
// accept: ".jpg,.jpeg,.png,.JPG,.JPEG",
|
||
width: "300px",
|
||
},
|
||
{
|
||
type: "ShowTinymce",
|
||
label: "资讯内容",
|
||
prop: "content",
|
||
// rules: { required: true },
|
||
width: "1000px",
|
||
},
|
||
],
|
||
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",
|
||
// rules: { required: true },
|
||
width: "300px",
|
||
isVideo: 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
|
||
},
|
||
parentId: "",
|
||
};
|
||
},
|
||
activated() {
|
||
this.$refs.oTable.refresh();
|
||
this.searchContentType();
|
||
},
|
||
watch: {
|
||
"pageData.modalData.isVideo": {
|
||
handler: function (val, oldval) {
|
||
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 = "";
|
||
}
|
||
},
|
||
},
|
||
"pageData.queryData.searchType": {
|
||
handler: function (val) {
|
||
this.$refs.oTable.reload();
|
||
},
|
||
},
|
||
},
|
||
|
||
methods: {
|
||
/**
|
||
* @description: 获取表格数据
|
||
* @param {type}
|
||
* @return:
|
||
* @author: ym
|
||
*/
|
||
searchTableList(pageNo, pageSize) {
|
||
// 初始化obj
|
||
var obj = {};
|
||
Object.assign(obj, this.pageData.queryData, this.pageData.tablePage);
|
||
obj.page = this.pageData.tablePage.currentPage;
|
||
obj.limit = this.pageData.tablePage.pageSize;
|
||
let data = obj.mainTypeId;
|
||
obj.mainTypeId = data[0] ? data[0] : "";
|
||
obj.secondTypeId = data[1] ? data[1] : "";
|
||
delete obj["pageSizeRange"];
|
||
if (obj.time.length == 2) {
|
||
obj.startTime = obj.time[0];
|
||
obj.endTime = obj.time[1];
|
||
}
|
||
delete obj.time;
|
||
// 请求数据
|
||
let searchType = this.pageData.queryData.searchType;
|
||
if (searchType == 3) {
|
||
this.$api
|
||
.getContentImage({ ...obj, page: pageNo, limit: pageSize })
|
||
.then((res) => {
|
||
this.$refs.oTable.complete(
|
||
res.data.page.list,
|
||
res.data.page.totalCount
|
||
);
|
||
});
|
||
} else if (searchType == 4) {
|
||
this.$api
|
||
.getLocalServiceImage({ ...obj, page: pageNo, limit: pageSize })
|
||
.then((res) => {
|
||
this.$refs.oTable.complete(
|
||
res.data.page.list,
|
||
res.data.page.totalCount
|
||
);
|
||
});
|
||
} else if (searchType == 2) {
|
||
this.$api
|
||
.getLocalContentInfoListByParams({
|
||
...obj,
|
||
page: pageNo,
|
||
limit: pageSize,
|
||
})
|
||
.then((res) => {
|
||
this.$refs.oTable.complete(
|
||
res.data.page.list,
|
||
res.data.page.totalCount
|
||
);
|
||
});
|
||
} else if (searchType == 1) {
|
||
this.$api
|
||
.getContentInfoListByParams({ ...obj, page: pageNo, limit: pageSize })
|
||
.then((res) => {
|
||
this.$refs.oTable.complete(
|
||
res.data.page.list,
|
||
res.data.page.totalCount
|
||
);
|
||
});
|
||
}
|
||
// this.$api.getContentInfoListByParams({...obj,page:pageNo,limit:pageSize}).then((res) => {
|
||
// this.$refs.oTable.complete(
|
||
// res.data.page.list,
|
||
// res.data.page.totalCount
|
||
// );
|
||
// });
|
||
},
|
||
// 查询分类
|
||
searchContentType() {
|
||
this.$api.getContentTypeList().then((res) => {
|
||
let data = res.data.list.map((item) => {
|
||
if (item.mainTypeName === "##") {
|
||
item.label = "地方";
|
||
} else {
|
||
item.label = item.mainTypeName;
|
||
}
|
||
item.value = item.mainTypeId;
|
||
item.children = item.children.map((item1) => {
|
||
item1.label = item1.secondTypeName;
|
||
item1.value = item1.secondTypeId;
|
||
return item1;
|
||
});
|
||
if (item.children.length === 0) {
|
||
delete item.children;
|
||
}
|
||
return item;
|
||
});
|
||
this.pageData.searchForm[1].data = data;
|
||
this.pageData.modalForm[2].data = data;
|
||
});
|
||
},
|
||
// 重置
|
||
resetSearch() {
|
||
// this.commonUtil.clearObj(this.pageData.queryData);
|
||
this.$refs.searchForm.$refs.searchFormRef.resetFields();
|
||
// this.searchTableList();
|
||
this.$refs.oTable.reload();
|
||
},
|
||
/**
|
||
* @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'
|
||
},
|
||
];
|
||
}
|
||
if (row.secondTypeId && typeof row.mainTypeId === "string") {
|
||
row.mainTypeId = [row.mainTypeId, row.secondTypeId];
|
||
}
|
||
row.isVideo = row.isVideo + "";
|
||
this.$nextTick(() => {
|
||
this.pageData.modalData = JSON.parse(JSON.stringify(row));
|
||
});
|
||
// console.log(this.pageData.modalData)
|
||
},
|
||
/**
|
||
* @description: 关闭modal
|
||
* @param
|
||
* @return:
|
||
* @author: ym
|
||
*/
|
||
closeModal() {
|
||
this.pageData.modalConfig.show = false; //关闭modal
|
||
},
|
||
selectChange(rows) {
|
||
this.pageData.selectList = rows;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.content-dialog ::v-deep .el-dialog__body {
|
||
padding: 0px;
|
||
}
|
||
|
||
>>> .el-input.is-disabled .el-input__inner {
|
||
background-color: #fff;
|
||
color: rgb(100, 100, 100);
|
||
cursor: default;
|
||
}
|
||
>>> .el-cascader .el-input .el-icon-arrow-down::before {
|
||
content: "";
|
||
/* cursor:default; */
|
||
}
|
||
>>> .el-input.is-disabled .el-input__icon {
|
||
cursor: default;
|
||
}
|
||
</style> |