Skip to content

R
rs-cloud-platform-ui
Commit 2dcb2781 authored by rencs's avatar rencs
Browse files
Options

1.7 bug

parent 8094adc6
Show whitespace changes
Inline Side-by-side
Showing with 1116 additions and 916 deletions
src/views/webSiteManagement/industryApplication/applicationCate/index.vue
View file @ 2dcb2781
......@@ -55,31 +55,46 @@
</div>
</div>
<div class="addCate">
<div class="add" @click.stop="addCate">
添加类别
</div>
<div class="add" @click.stop="addCate">添加类别</div>
</div>
</div>
<!-- 添加类别弹框 -->
<el-dialog :title="typeManagerTitle" :visible.sync="typeManagerVisible" append-to-body>
<el-dialog
:title="typeManagerTitle"
:visible.sync="typeManagerVisible"
append-to-body
>
<div id="addCateManager">
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item label="应用类别" prop="type">
<el-col :span="12">
<el-input v-model="form.type" placeholder="请输入资讯标题"></el-input>
<el-input
v-model="form.type"
placeholder="请输入资讯标题"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="封面图" prop="coverImg">
<singleImageX :value="form.coverImg" @input="onPreview"></singleImageX>
<singleImageX
:value="form.coverImg"
@input="onPreview"
></singleImageX>
</el-form-item>
<el-form-item label="简介" prop="introduce">
<el-col :span="12">
<el-input v-model="form.introduce" placeholder="请输入资讯简介"></el-input>
<el-input
v-model="form.introduce"
placeholder="请输入资讯简介"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-col :span="12">
<el-input type="number" v-model="form.sort" placeholder="请输入序号"></el-input>
<el-input
type="number"
v-model="form.sort"
placeholder="请输入序号"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="分类设置" prop="level">
......@@ -108,7 +123,13 @@
</el-dialog>
<!-- 表格 -->
<div class="table">
<el-table :data="tableData" border fit highlight-current-row style="width: 100%">
<el-table
:data="tableData"
border
fit
highlight-current-row
style="width: 100%"
>
<el-table-column label="序号" width="100" align="center">
<template slot-scope="scope">
<span>{{ scope.row.index }}</span>
......@@ -137,12 +158,16 @@
</el-table-column>
<el-table-column label="类目级别" align="center">
<template slot-scope="scope">
<span class="typelevel">{{ scope.row.pid != 0 ? "二级" : "一级"}}</span>
<span class="typelevel">{{
scope.row.pid != 0 ? "二级" : "一级"
}}</span>
</template>
</el-table-column>
<el-table-column label="父级" align="center">
<template slot-scope="scope">
<span class="typelevel">{{ getFatherTypeName(scope.row.pid) }}</span>
<span class="typelevel">{{
getFatherTypeName(scope.row.pid)
}}</span>
</template>
</el-table-column>
<el-table-column label="排序" align="center">
......@@ -152,7 +177,7 @@
</el-table-column>
<el-table-column label="状态" width="100" align="center">
<template slot-scope="scope">
<span>{{ scope.row.status==1?"上架":"下架" }}</span>
<span>{{ scope.row.status == 1 ? "上架" : "下架" }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="150" align="center">
......@@ -161,8 +186,20 @@
<span>
<div class="operators">
<div class="edit" @click.stop="changeCate(scope.row)">编辑</div>
<div class="offshelf" v-if="scope.row.status==1" @click.stop="changeTypeStatus(scope.row)">下架</div>
<div class="upshelf" v-else @click.stop="changeTypeStatus(scope.row)">上架</div>
<div
class="offshelf"
v-if="scope.row.status == 1"
@click.stop="changeTypeStatus(scope.row)"
>
下架
</div>
<div
class="upshelf"
v-else
@click.stop="changeTypeStatus(scope.row)"
>
上架
</div>
<div class="delete" @click.stop="delType(scope.row)">删除</div>
</div>
</span>
......@@ -175,10 +212,11 @@
@size-change="changeHandleSize"
@current-change="changeHandleCurrent"
:current-page.sync="typePagination.currentPage"
:page-sizes="[10,20,30,40]"
:page-sizes="[10, 20, 30, 40]"
:page-size="typePagination.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="typePagination.total">
:total="typePagination.total"
>
</el-pagination>
</div>
<!-- 使用图片查看器预览当前缩略图 -->
......@@ -193,7 +231,7 @@
<script>
// 导入组件
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import singleImageX from '@/components/Upload/singleImageX';
import singleImageX from "@/components/Upload/singleImageX";
// 导入请求
import {
getAllApplicationType,
......@@ -204,7 +242,7 @@ export default {
name: "ApplicationList",
components: {
ElImageViewer,
singleImageX
singleImageX,
},
data() {
return {
......@@ -255,7 +293,7 @@ export default {
label: "升序",
},
],
currentSort: '',
currentSort: "",
// 表格数据
tableDataCache: [],
tableData: [
......@@ -272,127 +310,131 @@ export default {
// },
],
typePagination: {
currentPage: 1,// 当前页码
pageSize: 10,// 每页查询数量
total: 0,// 总记录数量
currentPage: 1, // 当前页码
pageSize: 10, // 每页查询数量
total: 0, // 总记录数量
},
typeManagerTitle: "添加类别",
typeManagerVisible: false,
rules: {
type: [{ required: true, message: '文案有误', trigger: 'blur' }],
introduce: [{ required: true, message: '请输入简介', trigger: 'blur' }],
coverImg: [{ required: true, message: '请上传封面图', trigger: 'blur' }],
sort: [{ required: true, message: '请输入排序号', trigger: 'blur' }],
level: [{ required: true, message: '请选择级别', trigger: 'blur' }],
father: [{ required: true, message: '请选择父级类别', trigger: 'blur' }],
},
form:{
type: '',
coverImg: '',
introduce: '',
sort: '',
level: '一级类目',
showFather: false
},
editType: '',
type: [{ required: true, message: "文案有误", trigger: "blur" }],
introduce: [{ required: true, message: "请输入简介", trigger: "blur" }],
coverImg: [
{ required: true, message: "请上传封面图", trigger: "blur" },
],
sort: [{ required: true, message: "请输入排序号", trigger: "blur" }],
level: [{ required: true, message: "请选择级别", trigger: "blur" }],
father: [
{ required: true, message: "请选择父级类别", trigger: "blur" },
],
},
form: {
type: "",
coverImg: "",
introduce: "",
sort: "",
level: "一级类目",
showFather: false,
},
editType: "",
};
},
watch:{
"form.level":{
watch: {
"form.level": {
deep: true,
handler(newVal){
console.log(newVal)
if(newVal=="二级类目"){
this.pullAllApplicationType()
this.form.showFather = true
}else{
this.form.showFather = false
}
}
handler(newVal) {
console.log(newVal);
if (newVal == "二级类目") {
this.pullAllApplicationType();
this.form.showFather = true;
} else {
this.form.showFather = false;
}
},
},
},
mounted() {
// 获取所有类型用于下拉框
this.pullAllApplicationType()
this.pullAllApplicationType();
// 分页获取类型用于表格
this.pullListApplicationType()
this.pullListApplicationType();
},
methods: {
closeTypeManager(){
this.typeManagerVisible = false
this.$bus.$emit('upload-clearFiles')
closeTypeManager() {
this.typeManagerVisible = false;
this.$bus.$emit("upload-clearFiles");
},
getFatherTypeName(pid){
console.log("typesState",this.typesState)
let father = this.typesState.find(ele => ele.id == pid)
return father ? father.title : ""
getFatherTypeName(pid) {
console.log("typesState", this.typesState);
let father = this.typesState.find((ele) => ele.id == pid);
return father ? father.title : "";
},
clickOperator(index){
console.log("index=>",index)
if(index==1){
this.currentStatus = ''
this.currentTypeName = ''
this.currentSort = ''
clickOperator(index) {
console.log("index=>", index);
if (index == 1) {
this.currentStatus = "";
this.currentTypeName = "";
this.currentSort = "";
}
this.pullListApplicationType()
this.pullListApplicationType();
},
// 添加类别
addCate(){
this.typeManagerVisible = true
this.typeManagerTitle = "添加类别"
this.form.type = ''
this.form.coverImg = ''
this.form.introduce = ''
this.form.sort = ''
addCate() {
this.typeManagerVisible = true;
this.typeManagerTitle = "添加类别";
this.form.type = "";
this.form.coverImg = "";
this.form.introduce = "";
this.form.sort = "";
},
// 修改类别
changeCate(type){
this.typeManagerVisible = true
this.typeManagerTitle = "修改类别"
this.editType = type
this.form.type = type.type
this.form.coverImg = type.icon.url
this.form.introduce = type.introduce
this.form.sort = type.sort
changeCate(type) {
this.typeManagerVisible = true;
this.typeManagerTitle = "修改类别";
this.editType = type;
this.form.type = type.type;
this.form.coverImg = type.icon.url;
this.form.introduce = type.introduce;
this.form.sort = type.sort;
},
// 获取所有应用类型
pullAllApplicationType(){
this.typesState = []
this.types = []
getAllApplicationType().then(res => {
if(res.status == 200){
pullAllApplicationType() {
this.typesState = [];
this.types = [];
getAllApplicationType().then((res) => {
if (res.status == 200) {
// console.log("获取所有的应用类型=>",res)
res.data.forEach(element => {
this.typesState.push(element)
if(element.isDel==0&&element.pid==0){
res.data.forEach((element) => {
this.typesState.push(element);
if (element.isDel == 0 && element.pid == 0) {
this.types.push({
value: element.id,
label: element.title
label: element.title,
});
}
});
if(this.types.length>0){
this.currentType = this.types[0].value
if (this.types.length > 0) {
this.currentType = this.types[0].value;
}
}
})
});
},
// 分页获取应用类型
pullListApplicationType(){
pullListApplicationType() {
getListApplicationType({
page: this.typePagination.currentPage,
limit: this.typePagination.pageSize,
}).then(res => {
if(res.status==200){
this.tableDataCache = []
this.tableData = []
}).then((res) => {
if (res.status == 200) {
this.tableDataCache = [];
this.tableData = [];
// console.log("分页数据=>",res)
this.typePagination.total = res.data.totalCount
res.data.data.forEach(element => {
this.tableDataCache.push(element)
})
console.log("获取到的分页类别信息=>",this.tableDataCache)
this.screenTableData()
this.typePagination.total = res.data.totalCount;
res.data.data.forEach((element) => {
this.tableDataCache.push(element);
});
console.log("获取到的分页类别信息=>", this.tableDataCache);
this.screenTableData();
// this.tableDataCache.forEach(element => {
// this.tableData.push({
// id: element.id,
......@@ -413,17 +455,20 @@ export default {
// })
// })
}
})
});
},
// 为表格数据添加过滤条件
screenTableData(){
console.log("分页数据的缓存=>",this.tableDataCache)
this.tableData = []
let index = 0
this.tableDataCache.forEach(element => {
if(element.isDel==0){
screenTableData() {
console.log("分页数据的缓存=>", this.tableDataCache);
this.tableData = [];
let index = 0;
this.tableDataCache.forEach((element) => {
if (element.isDel == 0) {
this.tableData.push({
index: ((this.typePagination.currentPage-1)*this.typePagination.pageSize)+(++index),
index:
(this.typePagination.currentPage - 1) *
this.typePagination.pageSize +
++index,
id: element.id,
type: element.title,
icon: {
......@@ -438,61 +483,64 @@ export default {
isDel: element.isDel,
pid: element.pid,
updTime: element.updTime,
indexShow: element.indexShow
})
indexShow: element.indexShow,
});
}
})
if(this.currentStatus!=''){
this.tableData = this.tableData.filter(element => element.status == this.currentStatus)
});
if (this.currentStatus != "") {
this.tableData = this.tableData.filter(
(element) => element.status == this.currentStatus
);
}
if(this.currentTypeName!=''){
if (this.currentTypeName != "") {
// this.tableData = this.tableData.filter(element => element.type == this.currentTypeName)
this.tableData = this.tableData.filter(element => {
this.tableData = this.tableData.filter((element) => {
//正则表达式
let reg = new RegExp(this.currentTypeName);
return element.type.match(reg)
})
return element.type.match(reg);
});
}
if(this.currentSort!=''){
if (this.currentSort != "") {
// 1是降序,2是升序
if(this.currentSort==1){
this.tableData.sort((obj1,obj2)=>{
let val1 = parseInt((obj1.id+""))
let val2 = parseInt((obj2.id+""))
if(val1<val2){
return 1
}else if(val1>val2){
return -1
}else{
return 0
}
})
}else{
if (this.currentSort == 1) {
this.tableData.sort((obj1, obj2) => {
console.log(obj1, obj2);
let val1 = parseInt(obj1.sort + "");
let val2 = parseInt(obj2.sort + "");
if (val1 < val2) {
return 1;
} else if (val1 > val2) {
return -1;
} else {
return 0;
}
});
} else {
// 升序
this.tableData.sort((obj1,obj2)=>{
let val1 = parseInt((obj1.id+""))
let val2 = parseInt((obj2.id+""))
if(val1<val2){
return -1
}else if(val1>val2){
return 1
}else{
return 0
this.tableData.sort((obj1, obj2) => {
let val1 = parseInt(obj1.sort + "");
let val2 = parseInt(obj2.sort + "");
if (val1 < val2) {
return -1;
} else if (val1 > val2) {
return 1;
} else {
return 0;
}
})
});
}
}
},
// 删除类型
delType(type){
this.$confirm('确定继续执行该操作吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
delType(type) {
this.$confirm("确定继续执行该操作吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
type.isDel = 1
type.isDel = 1;
addUpdateApplicationType({
id: type.id+'',
id: type.id + "",
title: type.type,
detail: type.introduce,
coverImg: type.coverImg,
......@@ -501,37 +549,38 @@ export default {
rank: type.sort,
indexShow: type.indexShow,
pid: type.pid,
isDel: type.isDel+''
}).then(res => {
if(res.status==200){
isDel: type.isDel + "",
}).then((res) => {
if (res.status == 200) {
this.$message({
message: "删除成功!!!",
type: 'success'
type: "success",
});
this.pullListApplicationType()
this.pullListApplicationType();
// let index = this.tableData.findIndex(ele => ele.id == type.id)
// if(index!=-1){
// this.tableData.splice(index,1)
// }
}else{
this.$message.error('操作失败,请稍后重试!!!');
} else {
this.$message.error("操作失败,请稍后重试!!!");
}
})
})
});
});
},
// 改变类型状态
changeTypeStatus(type){
console.log("status",type.status)
let message = ""
if(type.status==1){//当前状态为上架
type.status = 2
message = "下架成功!!!"
}else{
type.status = 1
message = "上架成功!!!"
changeTypeStatus(type) {
console.log("status", type.status);
let message = "";
if (type.status == 1) {
//当前状态为上架
type.status = 2;
message = "下架成功!!!";
} else {
type.status = 1;
message = "上架成功!!!";
}
addUpdateApplicationType({
id: type.id+'',
id: type.id + "",
title: type.type,
detail: type.introduce,
coverImg: type.coverImg,
......@@ -540,31 +589,31 @@ export default {
rank: type.sort,
indexShow: type.indexShow,
pid: type.pid,
isDel: type.isDel+''
}).then(res => {
if(res.status==200){
isDel: type.isDel + "",
}).then((res) => {
if (res.status == 200) {
this.$message({
message: message,
type: 'success'
type: "success",
});
this.pullListApplicationType()
}else{
this.$message.error('操作失败,请稍后重试!!!');
this.pullListApplicationType();
} else {
this.$message.error("操作失败,请稍后重试!!!");
}
})
});
},
changeHandleSize(val) {
// console.log(`每页 ${val} 条`);
this.typePagination.pageSize = val
this.pullListApplicationType()
this.typePagination.pageSize = val;
this.pullListApplicationType();
},
changeHandleCurrent(val) {
// console.log(`当前页: ${val}`);
this.typePagination.currentPage = val
this.pullListApplicationType()
this.typePagination.currentPage = val;
this.pullListApplicationType();
},
onPreview(url){
this.form.coverImg = url
onPreview(url) {
this.form.coverImg = url;
},
showPreview(icon) {
this.currentIcon = icon;
......@@ -574,18 +623,18 @@ export default {
this.currentIcon.showPreview = false;
},
onSubmit() {
let message = this.typeManagerTitle == "添加类别" ? "添加" : "修改"
if(this.form.type==''){
this.$message.error(message+'失败,名称为空!!!');
}else if(this.form.coverImg==''){
this.$message.error(message+'失败,封面未上传!!!');
}else if(this.form.introduce==''){
this.$message.error(message+'失败,简介为空!!!');
}else if(this.form.sort<0){
this.$message.error(message+'失败,排序值有误!!!');
}else{
let data
if(message=="添加"){
let message = this.typeManagerTitle == "添加类别" ? "添加" : "修改";
if (this.form.type == "") {
this.$message.error(message + "失败,名称为空!!!");
} else if (this.form.coverImg == "") {
this.$message.error(message + "失败,封面未上传!!!");
} else if (this.form.introduce == "") {
this.$message.error(message + "失败,简介为空!!!");
} else if (this.form.sort < 0) {
this.$message.error(message + "失败,排序值有误!!!");
} else {
let data;
if (message == "添加") {
data = {
title: this.form.type,
detail: this.form.introduce,
......@@ -595,11 +644,12 @@ export default {
rank: this.form.sort,
indexShow: 1,
pid: this.form.showFather ? this.currentType : 0,
}
}else{// 修改
};
} else {
// 修改
data = {
id: this.editType.id+'',
title: this.form.type ,
id: this.editType.id + "",
title: this.form.type,
detail: this.form.introduce,
coverImg: this.form.coverImg,
detailImg: this.editType.icon.url,
......@@ -607,25 +657,25 @@ export default {
rank: this.form.sort,
indexShow: this.editType.indexShow,
pid: this.editType.pid,
isDel: this.editType.isDel+''
}
isDel: this.editType.isDel + "",
};
}
addUpdateApplicationType(data).then(res => {
if(res.status==200){
addUpdateApplicationType(data).then((res) => {
if (res.status == 200) {
this.$message({
message: message+"成功!!!",
type: 'success'
message: message + "成功!!!",
type: "success",
});
this.typeManagerVisible = false
this.pullListApplicationType()
this.$bus.$emit('upload-clearFiles')
}else{
this.$message.error('操作失败,请稍后重试!!!');
}
})
this.typeManagerVisible = false;
this.pullListApplicationType();
this.$bus.$emit("upload-clearFiles");
} else {
this.$message.error("操作失败,请稍后重试!!!");
}
});
}
},
},
};
</script>
......@@ -634,7 +684,7 @@ export default {
margin: 0 1% 0 1%;
width: 98%;
height: auto;
#addCateManager{
#addCateManager {
padding: 0 5%;
width: 90%;
height: auto;
......@@ -647,7 +697,9 @@ export default {
flex-direction: row;
justify-content: flex-start;
align-items: center;
.sorts,.status,.types {
.sorts,
.status,
.types {
width: auto;
height: 46px;
display: flex;
......@@ -659,7 +711,7 @@ export default {
margin: 0 10px 0 20px;
}
}
.addCate{
.addCate {
width: 240px;
height: 46px;
display: flex;
......@@ -667,7 +719,7 @@ export default {
justify-content: flex-end;
align-items: center;
overflow: hidden;
.add{
.add {
width: 50%;
height: 36px;
display: flex;
......@@ -675,8 +727,8 @@ export default {
justify-content: center;
align-items: center;
border-radius: 5px;
background-color: #5178F2;
color: #FFFFFF;
background-color: #5178f2;
color: #ffffff;
cursor: pointer;
}
}
......@@ -737,11 +789,12 @@ export default {
align-items: center;
cursor: pointer;
}
.edit,.upshelf{
.edit,
.upshelf {
color: #1890ff;
}
.offshelf {
color: #A6A9AD;
color: #a6a9ad;
}
.delete {
color: #fe4066;
......@@ -749,7 +802,7 @@ export default {
}
}
}
.typePagination{
.typePagination {
margin: 1% 1% 0 1%;
width: 98%;
height: auto;
......
src/views/webSiteManagement/newsCategory/nebulaDynamics/index.vue
View file @ 2dcb2781
......@@ -24,7 +24,11 @@
</div>
<!-- 类型管理弹框 -->
<el-dialog title="类型管理" :visible.sync="typeManagerVisible" append-to-body>
<el-dialog
title="类型管理"
:visible.sync="typeManagerVisible"
append-to-body
>
<div id="typeManager">
<div class="controls">
<div class="addUpdate" @click="typeCreatorVisible = true">
......@@ -33,7 +37,14 @@
</div>
<div class="content">
<el-table :data="tableType" border fit highlight-current-row style="width: 100%" max-height="400">
<el-table
:data="tableType"
border
fit
highlight-current-row
style="width: 100%"
max-height="400"
>
<el-table-column label="序号" align="center">
<template slot-scope="scope">
<span>{{ scope.row.id }}</span>
......@@ -53,10 +64,26 @@
<template slot-scope="scope">
<span>
<div class="operators">
<div class="edit" @click.stop="clickTypeEditor(scope.row)">编辑</div>
<div class="offshelf" v-if="scope.row.status==1" @click.stop="changeTypeStatus(scope.row)">下架</div>
<div class="upshelf" v-else @click.stop="changeTypeStatus(scope.row)">上架</div>
<div class="delete" @click.stop="delType(scope.row)">删除</div>
<div class="edit" @click.stop="clickTypeEditor(scope.row)">
编辑
</div>
<div
class="offshelf"
v-if="scope.row.status == 1"
@click.stop="changeTypeStatus(scope.row)"
>
下架
</div>
<div
class="upshelf"
v-else
@click.stop="changeTypeStatus(scope.row)"
>
上架
</div>
<div class="delete" @click.stop="delType(scope.row)">
删除
</div>
</div>
</span>
</template>
......@@ -69,26 +96,43 @@
@size-change="changeHandleSize"
@current-change="changeHandleCurrent"
:current-page.sync="typePagination.currentPage"
:page-sizes="[2,4,6]"
:page-sizes="[2, 4, 6]"
:page-size="typePagination.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="typePagination.total">
:total="typePagination.total"
>
</el-pagination>
</div>
</div>
<!-- 编辑类型弹框 -->
<el-dialog width="40%" title="编辑类型" :visible.sync="typeEditorVisible" append-to-body>
<el-dialog
width="40%"
title="编辑类型"
:visible.sync="typeEditorVisible"
append-to-body
>
<div id="typeEditor">
<div class="content">
<el-form ref="form" :rules="createRules" :model="editorType" label-width="80px">
<el-form
ref="form"
:rules="createRules"
:model="editorType"
label-width="80px"
>
<el-form-item label="类型名称" prop="name">
<el-col :span="24">
<el-input v-model="editorType.name" placeholder="请输入类型名称"></el-input>
<el-input
v-model="editorType.name"
placeholder="请输入类型名称"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="类型排序" prop="sort">
<el-col :span="24">
<el-input v-model="editorType.sort" placeholder="请设置排序0-10000,数值越大排序越靠前"></el-input>
<el-input
v-model="editorType.sort"
placeholder="请设置排序0-10000,数值越大排序越靠前"
></el-input>
</el-col>
</el-form-item>
</el-form>
......@@ -100,24 +144,43 @@
</div>
</el-dialog>
<!-- 添加类型弹框 -->
<el-dialog width="40%" title="添加类型" :visible.sync="typeCreatorVisible" append-to-body>
<el-dialog
width="40%"
title="添加类型"
:visible.sync="typeCreatorVisible"
append-to-body
>
<div id="typeCreator">
<div class="content">
<el-form ref="form" :rules="newRules" :model="newType" label-width="80px">
<el-form
ref="form"
:rules="newRules"
:model="newType"
label-width="80px"
>
<el-form-item label="类型名称" prop="newName">
<el-col :span="24">
<el-input v-model="newType.newName" placeholder="请输入类型名称" size="100px"></el-input>
<el-input
v-model="newType.newName"
placeholder="请输入类型名称"
size="100px"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="类型排序" prop="newSort">
<el-col :span="24">
<el-input v-model="newType.newSort" placeholder="请设置排序0-10000,数值越大排序越靠前"></el-input>
<el-input
v-model="newType.newSort"
placeholder="请设置排序0-10000,数值越大排序越靠前"
></el-input>
</el-col>
</el-form-item>
</el-form>
</div>
<div class="operators">
<div class="cancel" @click.stop="typeCreatorVisible = false">取消</div>
<div class="cancel" @click.stop="typeCreatorVisible = false">
取消
</div>
<div class="confirm" @click.stop="createType">确定</div>
</div>
</div>
......@@ -194,7 +257,11 @@
<el-table-column label="缩略图" align="center">
<template slot-scope="scope">
<span>
<img class="icon" :src="scope.row.icon.url" @click="showPreview(scope.row.icon)"/>
<img
class="icon"
:src="scope.row.icon.url"
@click="showPreview(scope.row.icon)"
/>
</span>
</template>
</el-table-column>
......@@ -224,8 +291,20 @@
<span>
<div class="operators">
<div class="edit" @click.stop="editorInfo(scope.row)">编辑</div>
<div class="offshelf" v-if="scope.row.status == 1" @click.stop="changeInfoStatus(scope.row)">下架</div>
<div class="upshelf" v-else @click.stop="changeInfoStatus(scope.row)">上架</div>
<div
class="offshelf"
v-if="scope.row.status == 1"
@click.stop="changeInfoStatus(scope.row)"
>
下架
</div>
<div
class="upshelf"
v-else
@click.stop="changeInfoStatus(scope.row)"
>
上架
</div>
<div class="delete" @click.stop="delInfo(scope.row)">删除</div>
</div>
</span>
......@@ -241,7 +320,8 @@
:page-sizes="[10, 20, 30, 40]"
:page-size="infoPagination.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="infoPagination.total">
:total="infoPagination.total"
>
</el-pagination>
</div>
<!-- <el-dialog title="资讯编辑" :visible.sync="infoEditorVisible" append-to-body>
......@@ -250,7 +330,11 @@
</div>
</el-dialog> -->
<!-- 使用图片查看器预览当前缩略图 -->
<el-image-viewer v-if="currentIcon.showPreview" :on-close="closePreview" :url-list="[currentIcon.url]"/>
<el-image-viewer
v-if="currentIcon.showPreview"
:on-close="closePreview"
:url-list="[currentIcon.url]"
/>
</div>
</template>
......@@ -273,12 +357,14 @@ export default {
data() {
return {
createRules: {
name: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
sort: [{ required: true, message: '请设置排序号', trigger: 'blur' }],
name: [{ required: true, message: "请输入类型名称", trigger: "blur" }],
sort: [{ required: true, message: "请设置排序号", trigger: "blur" }],
},
newRules: {
newName: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
newSort: [{ required: true, message: '请设置排序号', trigger: 'blur' }],
newName: [
{ required: true, message: "请输入类型名称", trigger: "blur" },
],
newSort: [{ required: true, message: "请设置排序号", trigger: "blur" }],
},
// 功能按钮
topControls: [
......@@ -367,11 +453,11 @@ export default {
// operator: "操作",
// },
],
tableDataState: [],// 缓存当前的表格数据
tableDataState: [], // 缓存当前的表格数据
infoPagination: {
currentPage: this.$parent.currentEditPage,// 当前页码
pageSize: 10,// 每页查询数量
total: 0,// 总记录数量
currentPage: this.$parent.currentEditPage, // 当前页码
pageSize: 10, // 每页查询数量
total: 0, // 总记录数量
},
// 当前查看器显示的图片
currentIcon: "",
......@@ -384,15 +470,15 @@ export default {
// },
],
typePagination: {
currentPage: 1,// 当前页码
pageSize: 2,// 每页查询数量
total: 0,// 总记录数量
currentPage: 1, // 当前页码
pageSize: 2, // 每页查询数量
total: 0, // 总记录数量
},
typeEditorVisible: false,
editorType: {},// 编辑中的类型
editorType: {}, // 编辑中的类型
};
},
watch:{
watch: {
// // 筛选状态发生改变
// currentStatus(newVal) {
// console.log("状态=>",newVal)
......@@ -408,58 +494,58 @@ export default {
// console.log("排序=>",newVal)
// this.screenTableData()
// },
canPull(newVal){
canPull(newVal) {
// 分页获取新闻信息
newVal&&(this.pullListNewsInfo())
newVal && this.pullListNewsInfo();
},
// 当前页码有改变时重新拉取分页数据
"infoPagination.currentPage": {
deep: true,
handler: function(newVal){
this.pullListNewsInfo()
}
handler: function (newVal) {
this.pullListNewsInfo();
},
},
// 当查询数量有改变时重新拉取分页数据
"infoPagination.pageSize": {
deep: true,
handler: function(newVal){
this.pullListNewsInfo()
}
handler: function (newVal) {
this.pullListNewsInfo();
},
},
// 关闭当前类型弹框时重新加载资讯
typeManagerVisible(newVal){
!newVal && (this.pullListNewsInfo())
typeManagerVisible(newVal) {
!newVal && this.pullListNewsInfo();
},
// 类型表格筛选页码改变
"typePagination.currentPage": {
deep: true,
handler(){
handler() {
// this.changeTableType()
this.pullListNewsType()
}
this.pullListNewsType();
},
},
// 类型表格筛选数量改变
"typePagination.pageSize": {
deep: true,
handler(){
handler() {
// this.changeTableType()
this.pullListNewsType()
}
}
this.pullListNewsType();
},
},
},
mounted() {
// 获取所有新闻类型
this.pullAllNewsType()
this.pullAllNewsType();
},
methods: {
// 删除新闻信息
delInfo(info){
this.$confirm('确定继续执行该操作吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
delInfo(info) {
this.$confirm("确定继续执行该操作吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
info.isDel = 1
info.isDel = 1;
// 删除资讯
addUpdateNewsInfo({
id: info.id,
......@@ -473,28 +559,29 @@ export default {
indexShow: info.indexShow,
typeName: info.type,
isDel: info.isDel,
}).then(res => {
if(res.status==200){
}).then((res) => {
if (res.status == 200) {
this.$message({
message: "删除成功!!!",
type: 'success'
})
this.pullListNewsInfo()
}else{
this.$message.error('操作失败,请稍后重试!!!');
type: "success",
});
this.pullListNewsInfo();
} else {
this.$message.error("操作失败,请稍后重试!!!");
}
})
})
});
});
},
// 更改资讯状态
changeInfoStatus(info){
let message = ""
if(info.status==1){// 当前为启用
info.status = 2
message = "下架成功!!!"
}else{
info.status = 1
message = "上架成功"
changeInfoStatus(info) {
let message = "";
if (info.status == 1) {
// 当前为启用
info.status = 2;
message = "下架成功!!!";
} else {
info.status = 1;
message = "上架成功";
}
// 更新资讯
addUpdateNewsInfo({
......@@ -509,114 +596,119 @@ export default {
indexShow: info.indexShow,
typeName: info.type,
isDel: info.isDel,
}).then(res => {
if(res.status==200){
}).then((res) => {
if (res.status == 200) {
this.$message({
message: message,
type: 'success'
})
}else{
this.$message.error('操作失败,请稍后重试!!!');
type: "success",
});
} else {
this.$message.error("操作失败,请稍后重试!!!");
}
})
});
},
// 编辑资讯
editorInfo(info){
console.log("Info=>",info)
this.$parent.currentEditStatus = this.currentStatus
this.$parent.currentEditType = this.currentType
this.$parent.currentEditSort = this.currentSort
this.$parent.currentEditPage = this.infoPagination.currentPage
editorInfo(info) {
console.log("Info=>", info);
this.$parent.currentEditStatus = this.currentStatus;
this.$parent.currentEditType = this.currentType;
this.$parent.currentEditSort = this.currentSort;
this.$parent.currentEditPage = this.infoPagination.currentPage;
this.$parent.componentName = "newsCreator";
this.$parent.regions = this.typesState
this.$parent.info = info
this.$parent.regions = this.typesState;
this.$parent.info = info;
},
handleSizeChange(val) {
// console.log(`每页 ${val} 条`);
this.infoPagination.pageSize = val
this.infoPagination.pageSize = val;
},
handleCurrentChange(val) {
// console.log(`当前页: ${val}`);
this.infoPagination.currentPage = val
this.infoPagination.currentPage = val;
},
// 获取所有的新闻类型
pullAllNewsType(isInit = true){
this.typesState = []
this.types = [{
pullAllNewsType(isInit = true) {
this.typesState = [];
this.types = [
{
value: "",
label: "全部",
}]
},
];
// 获取所有新闻类型
getAllnewsType().then((res) => {
// console.log("所有的新闻类型=>",res)
if(res.status == 200){
res.data.forEach(element => {
if (res.status == 200) {
res.data.forEach((element) => {
// 未被删除的类型且已启用
if(element.isDel==0&&element.status==1){
if (element.isDel == 0 && element.status == 1) {
this.types.push({
value: element.id,
label: element.nameCn
label: element.nameCn,
});
}
// 缓存所有类型
this.typesState.push(element);
});
// 升序排序
this.types.sort((obj1,obj2)=>{
let val1 = parseInt((obj1.value+""))
let val2 = parseInt((obj2.value+""))
if(val1<val2){
return -1
}else if(val1>val2){
return 1
}else{
return 0
this.types.sort((obj1, obj2) => {
let val1 = parseInt(obj1.value + "");
let val2 = parseInt(obj2.value + "");
if (val1 < val2) {
return -1;
} else if (val1 > val2) {
return 1;
} else {
return 0;
}
});
console.log("获取到的所有类型=>",this.typesState)
console.log("获取到的所有类型=>", this.typesState);
// 改变类型表格数据
// this.changeTableType()
// 拉取分页表格数据
this.pullListNewsType()
this.canPull = isInit
this.pullListNewsType();
this.canPull = isInit;
}
});
},
// 分页获取新闻资讯
pullListNewsInfo(){
pullListNewsInfo() {
getListNewsInfo({
page: this.infoPagination.currentPage,
limit: this.infoPagination.pageSize,
typeId: this.currentType,
}).then((res) => {
if(res.status == 200){
if (res.status == 200) {
// console.log("res=>",res)
this.tableDataState = [] // 先清空当前缓存
this.infoPagination.total = res.data.totalCount // 更改总记录数
res.data.data.forEach(element => {
this.tableDataState = []; // 先清空当前缓存
this.infoPagination.total = res.data.totalCount; // 更改总记录数
res.data.data.forEach((element) => {
// 缓存当前的表格数据
this.tableDataState.push(element)
})
console.log("获取到的分页新闻资讯",this.tableDataState)
this.tableDataState.push(element);
});
console.log("获取到的分页新闻资讯", this.tableDataState);
// 将缓存的数据作进一步的筛选
this.screenTableData()
this.screenTableData();
}
// console.log("获取分页新闻资讯=>", res);
});
},
// 筛选表格数据
screenTableData(){
screenTableData() {
// 先清空当前表格数据
this.tableData = []
console.log("星云动态缓存的表格数据=>",this.tableDataState)
let index = 0
this.tableData = [];
console.log("星云动态缓存的表格数据=>", this.tableDataState);
let index = 0;
// 先把未被删除的数据放入到表格
this.tableDataState.forEach((element) => {
// 未被删除则显示
if(element.isDel == 0){
let type = (this.typesState.find(ele => ele.id == element.typeId))
if (element.isDel == 0) {
let type = this.typesState.find((ele) => ele.id == element.typeId);
this.tableData.push({
index: (this.infoPagination.pageSize*(this.infoPagination.currentPage-1))+(++index),// 序号
index:
this.infoPagination.pageSize *
(this.infoPagination.currentPage - 1) +
++index, // 序号
id: element.id,
title: element.title,
icon: {
......@@ -624,7 +716,7 @@ export default {
showPreview: false,
},
introduce: element.detail,
content: element.content,// 富文本内容
content: element.content, // 富文本内容
newsDate: element.newsDate,
type: type ? type.nameCn : "",
typeId: element.typeId,
......@@ -637,41 +729,46 @@ export default {
}
});
// 状态码不为空字符串(全部,上架1,下架2)
if(this.currentStatus!=""){
this.tableData = this.tableData.filter(element => element.status == this.currentStatus)
if (this.currentStatus != "") {
this.tableData = this.tableData.filter(
(element) => element.status == this.currentStatus
);
}
// 类型id不为空字符串(类型的id,若为空则筛选全部)
if(this.currentType!=""){
this.tableData = this.tableData.filter(element => element.typeId == this.currentType)
if (this.currentType != "") {
this.tableData = this.tableData.filter(
(element) => element.typeId == this.currentType
);
}
// 排序码不为空字符串(全部,升序1,降序2s)
if(this.currentSort!=""){
if(this.currentSort==1){
if (this.currentSort != "") {
if (this.currentSort == 1) {
// 按降序
this.tableData.sort((obj1,obj2)=>{
let val1 = parseInt((obj1.id+""))
let val2 = parseInt((obj2.id+""))
if(val1<val2){
return 1
}else if(val1>val2){
return -1
}else{
return 0
this.tableData.sort((obj1, obj2) => {
let val1 = parseInt(obj1.sort + "");
let val2 = parseInt(obj2.sort + "");
if (val1 < val2) {
return 1;
} else if (val1 > val2) {
return -1;
} else {
return 0;
}
})
}else{
});
} else {
// 按升序
this.tableData.sort((obj1,obj2)=>{
let val1 = parseInt((obj1.id+""))
let val2 = parseInt((obj2.id+""))
if(val1<val2){
return -1
}else if(val1>val2){
return 1
}else{
return 0
this.tableData.sort((obj1, obj2) => {
let val1 = parseInt(obj1.sort + "");
let val2 = parseInt(obj2.sort + "");
if (val1 < val2) {
return -1;
} else if (val1 > val2) {
return 1;
} else {
return 0;
}
})
});
}
}
},
......@@ -683,17 +780,17 @@ export default {
// console.log("所有新闻类型缓存数据=>",this.typesState)
// this.changeTableType()
// 拉取分页数据
this.pullListNewsType()
this.pullListNewsType();
} else {
this.$parent.componentName = "newsCreator";
this.$parent.regions = this.typesState
this.$parent.info = null
this.$parent.regions = this.typesState;
this.$parent.info = null;
}
},
// 获取类型分页的表格数据
pullListNewsType(){
pullListNewsType() {
// 先将当前类型表格数据清空
this.tableType = []
this.tableType = [];
// 获取分页新闻类型
getListnewsType({
page: this.typePagination.currentPage,
......@@ -701,21 +798,21 @@ export default {
name: "",
}).then((res) => {
console.log("获取分页新闻类型=>", res);
if(res.status==200){
this.typePagination.total = res.data.totalCount
res.data.data.forEach(element => {
if (res.status == 200) {
this.typePagination.total = res.data.totalCount;
res.data.data.forEach((element) => {
// 未被删除的类型
if(element.isDel==0){
if (element.isDel == 0) {
this.tableType.push({
id: element.id,
name: element.nameCn,
nameEn: element.nameEn,
sort: element.rank,
status: element.status,
isDel: element.isDel
})
isDel: element.isDel,
});
}
})
});
}
});
},
......@@ -752,147 +849,157 @@ export default {
// console.log("类型表格数据改变=>",this.tableType)
// },
// 上下架类型
changeTypeStatus(type){
let message = ""
if(type.status==1){// 当前为启用
type.status=2
message = "下架成功"
}else{// 当前为弃用
type.status=1
message = "上架成功"
changeTypeStatus(type) {
let message = "";
if (type.status == 1) {
// 当前为启用
type.status = 2;
message = "下架成功";
} else {
// 当前为弃用
type.status = 1;
message = "上架成功";
}
addUpdateNewsType({
id: type.id+'',
id: type.id + "",
nameCn: type.name,
nameEn: type.nameEn,
rank: type.sort,
status: type.status,
isDel: type.isDel+'', // 0为不删除,1为删除
}).then(res => {
if(res.status == 200){
isDel: type.isDel + "", // 0为不删除,1为删除
}).then((res) => {
if (res.status == 200) {
this.$message({
message: message,
type: 'success'
})
this.pullAllNewsType(false)
}else{
this.$message.error('操作失败,请稍后重试!!!');
type: "success",
});
this.pullAllNewsType(false);
} else {
this.$message.error("操作失败,请稍后重试!!!");
}
})
});
},
// 删除类型
delType(type){
this.$confirm('确定继续执行该操作吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
delType(type) {
this.$confirm("确定继续执行该操作吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
type.isDel = 1
type.isDel = 1;
addUpdateNewsType({
id: type.id+'',
id: type.id + "",
nameCn: type.name,
nameEn: type.nameEn,
rank: type.sort,
status: type.status,
isDel: type.isDel+'', // 0为不删除,1为删除
}).then(res => {
if(res.status == 200){
isDel: type.isDel + "", // 0为不删除,1为删除
}).then((res) => {
if (res.status == 200) {
this.$message({
message: "删除成功",
type: 'success'
})
this.pullAllNewsType(false)
}else{
this.$message.error('操作失败,请稍后重试!!!');
type: "success",
});
this.pullAllNewsType(false);
} else {
this.$message.error("操作失败,请稍后重试!!!");
}
})
});
});
},
// 添加类型
createType(){
if(this.newType.newName&&this.newType.newSort){
createType() {
if (this.newType.newName && this.newType.newSort) {
// 必须是中文名称
if(/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/.test(this.newType.newName)){
if(this.newType.newSort>=0&&this.newType.newSort<10000){
if (
/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/.test(
this.newType.newName
)
) {
if (this.newType.newSort >= 0 && this.newType.newSort < 10000) {
addUpdateNewsType({
nameCn: this.newType.newName,
nameEn: "",
rank: this.newType.newSort,
status: 1, // 创建即启用
isDel: "0", // 0为不删除,1为删除
}).then(res => {
if(res.status == 200){
}).then((res) => {
if (res.status == 200) {
this.$message({
message: '创建成功!!!',
type: 'success'
})
this.pullAllNewsType(false)
this.typeCreatorVisible = false
message: "创建成功!!!",
type: "success",
});
this.pullAllNewsType(false);
this.typeCreatorVisible = false;
}
})
}else{
this.$message.error('排序值不在指定范围,请输入正确的排序值!!!');
});
} else {
this.$message.error("排序值不在指定范围,请输入正确的排序值!!!");
}
}else{
this.$message.error('请输入中文名称!!!');
} else {
this.$message.error("请输入中文名称!!!");
}
}else{
this.$message.error('必填框有缺乏值,请完善输入!!!');
} else {
this.$message.error("必填框有缺乏值,请完善输入!!!");
}
},
clickTypeEditor(type){
this.typeEditorVisible = true
this.editorType = JSON.parse(JSON.stringify(type))
clickTypeEditor(type) {
this.typeEditorVisible = true;
this.editorType = JSON.parse(JSON.stringify(type));
},
cancelEditor(){
cancelEditor() {
// this.pullListNewsType()
this.typeEditorVisible = false
this.typeEditorVisible = false;
},
// 修改类型
confirmEditor(){
confirmEditor() {
// 中文对应
if(/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/.test(this.editorType.name)){
if(this.editorType.sort>=0&&this.editorType.sort<10000){
if (
/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/.test(
this.editorType.name
)
) {
if (this.editorType.sort >= 0 && this.editorType.sort < 10000) {
// 上传修改
addUpdateNewsType({
id: this.editorType.id,
nameCn: this.editorType.name,
nameEn: this.editorType.nameEn,
rank: this.editorType.sort,
status: this.editorType.status,// 1启用,2不启用
isDel: this.editorType.isDel,// 0不删除,1删除
status: this.editorType.status, // 1启用,2不启用
isDel: this.editorType.isDel, // 0不删除,1删除
});
this.$message({
message: '修改成功!!!',
type: 'success'
})
this.pullListNewsType()
this.typeEditorVisible = false
}else{
this.$message.error('排序值不在指定范围,请输入正确的排序值!!!');
message: "修改成功!!!",
type: "success",
});
this.pullListNewsType();
this.typeEditorVisible = false;
} else {
this.$message.error("排序值不在指定范围,请输入正确的排序值!!!");
}
}else{
this.$message.error('中文名称不正确!!!');
} else {
this.$message.error("中文名称不正确!!!");
}
},
// 功能按钮
clickOperator(type){
if(type == "search"){
this.pullListNewsInfo()
}else{
this.currentStatus = ""
this.currentType = ""
this.currentSort = ""
this.pullListNewsInfo()
clickOperator(type) {
if (type == "search") {
this.pullListNewsInfo();
} else {
this.currentStatus = "";
this.currentType = "";
this.currentSort = "";
this.pullListNewsInfo();
}
},
changeHandleSize(val) {
// console.log(`每页 ${val} 条`);
this.typePagination.pageSize = val
this.typePagination.pageSize = val;
},
changeHandleCurrent(val) {
// console.log(`当前页: ${val}`);
this.typePagination.currentPage = val
this.typePagination.currentPage = val;
},
// 显示图片查看器
showPreview(icon) {
......@@ -1035,11 +1142,12 @@ export default {
align-items: center;
cursor: pointer;
}
.edit,.upshelf{
.edit,
.upshelf {
color: #1890ff;
}
.offshelf {
color: #A6A9AD;
color: #a6a9ad;
}
.delete {
color: #fe4066;
......@@ -1102,31 +1210,32 @@ export default {
align-items: center;
cursor: pointer;
}
.edit,.upshelf{
.edit,
.upshelf {
color: #1890ff;
}
.offshelf {
color: #A6A9AD;
color: #a6a9ad;
}
.delete {
color: #fe4066;
}
}
}
.typePagination{
.typePagination {
margin: 30px 0;
width: 100%;
}
}
#typeCreator,#typeEditor{
#typeCreator,
#typeEditor {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.content{
.content {
margin-left: 70px;
width: calc(100% - 70px);
height: auto;
......@@ -1136,7 +1245,8 @@ export default {
align-items: center;
}
}
#typeCreator,#typeEditor{
#typeCreator,
#typeEditor {
.operators {
margin: 25px 0 0 0;
width: 100%;
......
src/views/webSiteManagement/newsCategory/newsCreator/index.vue
View file @ 2dcb2781
......@@ -7,9 +7,9 @@
* @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\newsCategory\newsCreator\index.vue
-->
<template>
<div id='newsCreator'>
<div id="newsCreator">
<div class="top">
<div class="title" @click="$parent.componentName='nebulaDynamics'">
<div class="title" @click="$parent.componentName = 'nebulaDynamics'">
<i class="el-icon-back"></i>
<!-- <img src="/static/images/return.png"/> -->
返回上一页
......@@ -19,15 +19,24 @@
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item label="资讯标题" prop="title">
<el-col :span="12">
<el-input v-model="form.title" placeholder="请输入资讯标题"></el-input>
<el-input
v-model="form.title"
placeholder="请输入资讯标题"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="封面图" prop="coverImg">
<singleImageX :value="form.coverImg" @input="onPreview"></singleImageX>
<singleImageX
:value="form.coverImg"
@input="onPreview"
></singleImageX>
</el-form-item>
<el-form-item label="资讯简介" prop="introduce">
<el-col :span="12">
<el-input v-model="form.introduce" placeholder="请输入资讯简介"></el-input>
<el-input
v-model="form.introduce"
placeholder="请输入资讯简介"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="资讯类型" prop="region">
......@@ -45,18 +54,38 @@
</el-select>
</el-col>
</el-form-item>
<el-form-item label="是否热门">
<el-col :span="8">
<el-radio-group v-model="form.isHot">
<el-radio :label="1">是</el-radio>
<el-radio :label="2">否</el-radio>
</el-radio-group>
</el-col>
</el-form-item>
<el-form-item label="资讯详情" prop="content">
<el-col :span="20">
<kind-editor id="editor_id" :content.sync="form.content" :afterChange="afterChange()" :loadStyleMode="false"@on-content-change="onContentChange"></kind-editor>
<kind-editor
id="editor_id"
:content.sync="form.content"
:afterChange="afterChange()"
:loadStyleMode="false"
@on-content-change="onContentChange"
></kind-editor>
</el-col>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-col :span="12">
<el-input type="number" v-model="form.sort" placeholder="请输入序号"></el-input>
<el-input
type="number"
v-model="form.sort"
placeholder="请输入序号"
></el-input>
</el-col>
</el-form-item>
<el-form-item>
<el-button @click="$parent.componentName='nebulaDynamics'">取消</el-button>
<el-button @click="$parent.componentName = 'nebulaDynamics'"
>取消</el-button
>
<el-button type="primary" @click="onSubmit">确定</el-button>
</el-form-item>
</el-form>
......@@ -65,151 +94,159 @@
</template>
<script>
import singleImageX from '@/components/Upload/singleImageX';
import singleImageX from "@/components/Upload/singleImageX";
import KindEditor from "@/components/Kindeditor";
import {timestamp2Date} from '@/utils/dateUtils';
import {uuid} from "@/utils/uuid";// 导入请求
import {
addUpdateNewsInfo,
} from "@/api/website/newsCategory/index";
import { timestamp2Date } from "@/utils/dateUtils";
import { uuid } from "@/utils/uuid"; // 导入请求
import { addUpdateNewsInfo } from "@/api/website/newsCategory/index";
export default {
name: 'newsCreator',
name: "newsCreator",
components: {
singleImageX,
KindEditor
KindEditor,
},
data(){
data() {
return {
types: [],
form: {
id: '',
title: '',
coverImg: '',
introduce: '',
region: '',
sort: '',
content: '',
id: "",
title: "",
coverImg: "",
introduce: "",
region: "",
sort: "",
content: "",
isHot: 2,
},
rules:{
title: [{ required: true, message: '请输入资讯标题', trigger: 'blur' }],
coverImg: [{ required: true, message: '请上传封面图', trigger: 'blur' }],
introduce: [{ required: true, message: '请输入资讯简介', trigger: 'blur' }],
region: [{ required: true, message: '请选择选择资讯类型', trigger: 'blur' }],
content: [{ required: true, message: '请输入资讯详情', trigger: 'blur' }],
sort: [{ required: true, message: '请输入序号', trigger: 'blur' }],
rules: {
title: [{ required: true, message: "请输入资讯标题", trigger: "blur" }],
coverImg: [
{ required: true, message: "请上传封面图", trigger: "blur" },
],
introduce: [
{ required: true, message: "请输入资讯简介", trigger: "blur" },
],
region: [
{ required: true, message: "请选择选择资讯类型", trigger: "blur" },
],
content: [
{ required: true, message: "请输入资讯详情", trigger: "blur" },
],
sort: [{ required: true, message: "请输入序号", trigger: "blur" }],
},
}
};
},
mounted() {
this.types = []
this.$parent.regions.forEach(element => {
if(element.status==1){
this.types = [];
this.$parent.regions.forEach((element) => {
if (element.status == 1) {
this.types.push({
value: element.id,
label: element.nameCn,
})
});
}
});
if(this.$parent.info!=null){
this.form.id = this.$parent.info.id
this.form.title = this.$parent.info.title
this.form.coverImg = this.$parent.info.icon.url
this.form.introduce = this.$parent.info.introduce
this.form.region = this.$parent.info.typeId
this.form.sort = this.$parent.info.sort
this.form.content = this.$parent.info.content
if (this.$parent.info != null) {
this.form.id = this.$parent.info.id;
this.form.title = this.$parent.info.title;
this.form.coverImg = this.$parent.info.icon.url;
this.form.introduce = this.$parent.info.introduce;
this.form.region = this.$parent.info.typeId;
this.form.sort = this.$parent.info.sort;
this.form.content = this.$parent.info.content;
this.form.isHot = this.$parent.info.isHot;
}
},
methods: {
onContentChange (val) {
console.log(val)
},
afterChange () {
onContentChange(val) {
console.log(val);
},
onPreview(url){
this.form.coverImg = url
afterChange() {},
onPreview(url) {
this.form.coverImg = url;
},
onSubmit() {
if(this.form.title==""){
this.$message.error('请输入资讯标题!!!');
}else if(this.form.coverImg==""){
this.$message.error('请输入上传封面图!!!');
}else if(this.form.introduce==""){
this.$message.error('请输入资讯简介!!!');
}else if(this.form.region==""){
this.$message.error('请选择选择资讯类型!!!');
}else if(this.form.sort==""){
this.$message.error('请输入序号!!!');
}else if(this.form.content==""){
this.$message.error('请输入资讯详情!!!');
}else{
let data,message
if(this.$parent.info!=null){
if (this.form.title == "") {
this.$message.error("请输入资讯标题!!!");
} else if (this.form.coverImg == "") {
this.$message.error("请输入上传封面图!!!");
} else if (this.form.introduce == "") {
this.$message.error("请输入资讯简介!!!");
} else if (this.form.region == "") {
this.$message.error("请选择选择资讯类型!!!");
} else if (this.form.sort == "") {
this.$message.error("请输入序号!!!");
} else if (this.form.content == "") {
this.$message.error("请输入资讯详情!!!");
} else {
let data, message;
if (this.$parent.info != null) {
data = {
id: this.form.id,
title: this.form.title,
detail: this.form.introduce,
coverImg: this.form.coverImg,
content: this.form.content,
newsDate: timestamp2Date((new Date()).getTime()),
newsDate: timestamp2Date(new Date().getTime()),
typeId: this.form.region,
isDel: 0,// 0为未被删除,1为已删除
isDel: 0, // 0为未被删除,1为已删除
status: 2, // 默认上传即为下架状态(1为上架2为下架)
indexShow: 1,
typeName: (this.types.find(ele => ele.value == this.form.region)).label,
isHot: "1",
rank: this.form.sort+"",
}
message = "修改成功!!!"
}else{
typeName: this.types.find((ele) => ele.value == this.form.region)
.label,
isHot: this.form.isHot,
rank: this.form.sort + "",
};
message = "修改成功!!!";
} else {
data = {
title: this.form.title,
detail: this.form.introduce,
coverImg: this.form.coverImg,
content: this.form.content,
newsDate: timestamp2Date((new Date()).getTime()),
newsDate: timestamp2Date(new Date().getTime()),
typeId: this.form.region,
isDel: 0,// 0为未被删除,1为已删除
isDel: 0, // 0为未被删除,1为已删除
status: 2, // 默认上传即为下架状态(后端规定1为启用2为禁用)
indexShow: 1,
typeName: (this.types.find(ele => ele.value == this.form.region)).label,
isHot: "1",
rank: this.form.sort+"",
}
message = "创建成功!!!"
typeName: this.types.find((ele) => ele.value == this.form.region)
.label,
isHot: this.form.isHot,
rank: this.form.sort + "",
};
message = "创建成功!!!";
}
// 新增新闻资讯
addUpdateNewsInfo(data).then((res) => {
if(res.status==200){
let _this = this
if (res.status == 200) {
let _this = this;
this.$message({
message: message,
type: 'success',
type: "success",
duration: 2000,
});
setTimeout(()=>{
_this.$parent.componentName = "nebulaDynamics"
_this.$parent.info = null
},2100);
setTimeout(() => {
_this.$parent.componentName = "nebulaDynamics";
_this.$parent.info = null;
}, 2100);
}
});
}
}
},
}
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
#newsCreator{
#newsCreator {
margin: 0 1% 0 1%;
width: 98%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
color: #5178F2;
.top{
color: #5178f2;
.top {
width: 100%;
height: 68px;
display: flex;
......@@ -217,8 +254,8 @@ export default {
justify-content: space-between;
align-items: center;
overflow: hidden;
border-bottom: 1px solid #EEEEEE;
.title{
border-bottom: 1px solid #eeeeee;
.title {
width: auto;
margin: 0 0 0 30px;
height: 46px;
......@@ -226,19 +263,19 @@ export default {
flex-direction: row;
justify-content: center;
align-items: center;
color: #5178F2;
color: #5178f2;
overflow: hidden;
cursor: pointer;
}
}
.form{
.form {
padding: 30px 60px;
width: calc(100% - 30px);
height: calc(100% - 68px - 60px);
display: flex;
flex-direction: column;
justify-content: flex-start;
color: #5178F2;
}
color: #5178f2;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment