Commit e33c8909 authored by obt's avatar obt

行业类别页面代码更新

parent 16096425
/*
* @Author: Jenkins
* @Date: 2020-12-02 09:20:18
* @LastEditTime: 2020-12-02 10:53:27
* @LastEditTime: 2020-12-08 14:59:18
* @LastEditors: Please set LastEditors
* @Description: 行业应用页请求接口
* @FilePath: \rs-cloud-platform-ui\src\api\wsmanagement\industryApplication\index.js
......@@ -13,11 +13,11 @@ import fetch from 'utils/fetch';
* 获取所有行业应用类型
* @param {Object} indexShow
*/
export function getAllApplicationType(indexShow){
export function getAllApplicationType(obj){
return fetch({
url: '/api/website/industryApplicationType/getAll',
url: '/api/website/industryApplicationType/app/unauth/getAll',
method: 'get',
param: {indexShow:indexShow}
param: obj
});
}
......
<!--
* @Author: your name
* @Date: 2020-12-02 10:27:53
* @LastEditTime: 2020-12-04 09:49:42
* @LastEditTime: 2020-12-08 17:56:34
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @Description: 类别管理
* @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\index.vue
-->
<template>
......@@ -51,36 +51,37 @@
class="item"
v-for="(item, index) in operatorControls"
:key="index"
@click.stop="clickOperator(index)"
>
{{ item.name }}
</div>
</div>
<div class="addCate">
<div class="add" @click="typeManagerVisible = true">
<div class="add" @click.stop="addCate">
添加类别
</div>
</div>
</div>
<!-- 添加类别弹框 -->
<el-dialog title="添加类别" :visible.sync="typeManagerVisible" append-to-body>
<el-dialog :title="typeManagerTitle" :visible.sync="typeManagerVisible" append-to-body>
<div id="addCateManager">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="*应用类别">
<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-col>
</el-form-item>
<el-form-item label="*封面图">
<el-form-item label="封面图" prop="coverImg">
<singleImageX :value="form.coverImg" @input="onPreview"></singleImageX>
</el-form-item>
<el-form-item label="*简介">
<el-form-item label="简介" prop="introduce">
<el-col :span="12">
<el-input v-model="form.introduce" placeholder="请输入资讯简介"></el-input>
</el-col>
</el-form-item>
<el-form-item label="*排序">
<el-form-item label="排序" prop="sort">
<el-col :span="12">
<el-input 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>
......@@ -126,7 +127,7 @@
</el-table-column>
<el-table-column label="状态" width="150" align="center">
<template slot-scope="scope">
<span>{{ scope.row.status }}</span>
<span>{{ scope.row.status==1?"上架":"下架" }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="150" align="center">
......@@ -134,15 +135,27 @@
<!-- <span>{{scope.row.operator}}</span> -->
<span>
<div class="operators">
<div class="edit">编辑</div>
<div class="offshelf">下架</div>
<div class="delete">删除</div>
<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="delete" @click.stop="delType(scope.row)">删除</div>
</div>
</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="typePagination">
<el-pagination
@size-change="changeHandleSize"
@current-change="changeHandleCurrent"
:current-page.sync="typePagination.currentPage"
:page-sizes="[10,20,30,40]"
:page-size="typePagination.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="typePagination.total">
</el-pagination>
</div>
<!-- 使用图片查看器预览当前缩略图 -->
<el-image-viewer
v-if="currentIcon.showPreview"
......@@ -183,68 +196,306 @@ export default {
//所有状态
status: [
{
value: "1",
value: "",
label: "全部",
},
{
value: "2",
value: "1",
label: "上架",
},
{
value: "3",
value: "2",
label: "下架",
},
],
currentStatus: "全部",
currentStatus: "",
// 所有类别
typesState: [],
types: [
{
value: "1",
value: "",
label: "全部",
},
{
value: "2",
label: "数字农业",
},
],
currentType: "全部",
currentType: "",
// 排序
sorts: [
{
value: "1",
value: "",
label: "全部",
},
{
value: "1",
label: "降序",
},
{
value: "2",
label: "数字农业",
label: "升序",
},
],
currentSort: '全部',
currentSort: '',
// 表格数据
tableDataCache: [],
tableData: [
{
id: "1",
type: "类别",
icon: {
url: "https://onemap.obtdata.com/wx/download/world.png",
showPreview: false,
},
introduce: "简介",
sort: "排序",
status: "状态",
},
// {
// id: "1",
// type: "类别",
// icon: {
// url: "https://onemap.obtdata.com/wx/download/world.png",
// showPreview: false,
// },
// introduce: "简介",
// sort: "排序",
// status: "状态",
// },
],
typePagination: {
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' }]
},
form:{
type: '',
coverImg: '',
introduce: '',
sort: '',
}
},
editType: '',
};
},
mounted() {},
mounted() {
// 获取所有类型用于下拉框
this.pullAllApplicationType()
// 分页获取类型用于表格
this.pullListApplicationType()
},
methods: {
clickOperator(index){
console.log("index=>",index)
if(index==1){
this.currentStatus = ''
this.currentType = ''
this.currentSort = ''
}
this.screenTableData()
},
// 添加类别
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
},
// 获取所有应用类型
pullAllApplicationType(){
this.types = [{
value: "",
label: "全部",
}]
getAllApplicationType().then(res => {
if(res.status == 200){
// console.log("获取所有的应用类型=>",res)
res.data.forEach(element => {
if(element.isDel==0){
this.types.push({
value: element.id,
label: element.title
});
}
});
}
})
},
// 分页获取应用类型
pullListApplicationType(){
getListApplicationType({
page: this.typePagination.currentPage,
limit: this.typePagination.pageSize,
}).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)
})
this.tableDataCache.forEach(element => {
this.tableData.push({
id: element.id,
type: element.title,
icon: {
url: element.detailImg,
showPreview: false,
},
coverImg: element.detailImg,
crtTime: element.crtTime,
introduce: element.detail,
sort: element.rank,
status: element.status,
isDel: element.isDel,
pid: element.pid,
updTime: element.updTime,
indexShow: element.indexShow
})
})
}
})
},
// 为表格数据添加过滤条件
screenTableData(){
// console.log("分页数据的缓存=>",this.tableDataCache)
this.tableData = []
this.tableDataCache.forEach(element => {
this.tableData.push({
id: element.id,
type: element.title,
icon: {
url: element.detailImg,
showPreview: false,
},
coverImg: element.detailImg,
crtTime: element.crtTime,
introduce: element.detail,
sort: element.rank,
status: element.status,
isDel: element.isDel,
pid: element.pid,
updTime: element.updTime,
indexShow: element.indexShow
})
})
if(this.currentStatus!=''){
this.tableData = this.tableData.filter(element => element.status == this.currentStatus)
}
if(this.currentType!=''){
this.tableData = this.tableData.filter(element => element.id == this.currentType)
}
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{
// 升序
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
}
})
}
}
},
// 删除类型
delType(type){
this.$confirm('确定继续执行该操作吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
type.isDel = 1
addUpdateApplicationType({
id: type.id+'',
title: type.type,
detail: type.introduce,
coverImg: type.coverImg,
detailImg: type.icon.url,
status: type.status,
rank: type.sort,
indexShow: type.indexShow,
pid: type.pid,
isDel: type.isDel+''
}).then(res => {
if(res.status==200){
this.$message({
message: "删除成功!!!",
type: 'success'
});
let index = this.tableData.findIndex(ele => ele.id == type.id)
if(index!=-1){
this.tableData.splice(index,1)
}
}else{
this.$message.error('操作失败,请稍后重试!!!');
}
})
})
},
// 改变类型状态
changeTypeStatus(type){
let message = ""
if(type.status==1){//当前状态为上架
type.status = 2
message = "下架成功!!!"
}else{
type.status = 1
message = "上架成功!!!"
}
addUpdateApplicationType({
id: type.id+'',
title: type.type,
detail: type.introduce,
coverImg: type.coverImg,
detailImg: type.icon.url,
status: type.status,
rank: type.sort,
indexShow: type.indexShow,
pid: type.pid,
isDel: type.isDel+''
}).then(res => {
if(res.status==200){
this.$message({
message: message,
type: 'success'
});
}else{
this.$message.error('操作失败,请稍后重试!!!');
}
})
},
changeHandleSize(val) {
// console.log(`每页 ${val} 条`);
this.typePagination.pageSize = val
},
changeHandleCurrent(val) {
// console.log(`当前页: ${val}`);
this.typePagination.currentPage = val
},
onPreview(url){
this.form.coverImg = url
},
......@@ -256,7 +507,55 @@ export default {
this.currentIcon.showPreview = false;
},
onSubmit() {
console.log('submit!');
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,
coverImg: this.form.coverImg,
detailImg: this.form.coverImg,
status: 1,
rank: this.form.sort,
indexShow: 1,
pid: 1,
}
}else{// 修改
data = {
id: this.editType.id+'',
title: this.form.type ,
detail: this.form.introduce,
coverImg: this.form.coverImg,
detailImg: this.editType.icon.url,
status: this.editType.status,
rank: this.form.sort,
indexShow: this.editType.indexShow,
pid: this.editType.pid,
isDel: this.editType.isDel+''
}
}
addUpdateApplicationType(data).then(res => {
if(res.status==200){
this.$message({
message: message+"成功!!!",
type: 'success'
});
this.typeManagerVisible = false
this.pullListApplicationType()
}else{
this.$message.error('操作失败,请稍后重试!!!');
}
})
}
}
},
};
......@@ -358,6 +657,7 @@ export default {
justify-content: space-around;
align-items: center;
.edit,
.upshelf,
.offshelf,
.delete {
width: auto;
......@@ -368,15 +668,22 @@ export default {
align-items: center;
cursor: pointer;
}
.edit,
.offshelf {
.edit,.upshelf{
color: #1890ff;
}
.offshelf {
color: #A6A9AD;
}
.delete {
color: #fe4066;
}
}
}
}
.typePagination{
margin: 1% 1% 0 1%;
width: 98%;
height: auto;
}
}
</style>
<!--
* @Author: your name
* @Date: 2020-12-02 10:27:53
* @LastEditTime: 2020-12-04 09:13:31
* @LastEditors: your name
* @Description: In User Settings Edit
* @LastEditTime: 2020-12-08 14:32:42
* @LastEditors: Please set LastEditors
* @Description: 应用详情
* @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\index.vue
-->
<template>
......
<!--
* @Author: Jenkins
* @Date: 2020-12-02 14:49:10
* @LastEditTime: 2020-12-08 14:18:46
* @LastEditTime: 2020-12-08 15:20:39
* @LastEditors: Please set LastEditors
* @Description: 创建新闻
* @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\newsCategory\newsCreator\index.vue
......@@ -146,7 +146,7 @@ export default {
newsDate: timestamp2Date((new Date()).getTime()),
typeId: this.form.region,
isDel: 0,// 0为未被删除,1为已删除
status: 0, // 默认上传即为下架状态
status: 2, // 默认上传即为下架状态(1为上架2为下架)
indexShow: 1,
typeName: (this.types.find(ele => ele.value == this.form.region)).label,
}
......
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