Skip to content

R
rs-cloud-platform-ui
Commit 01e06712 authored by obt's avatar obt
Browse files
Options

应用详情代码更新

parent 45ef8eb2
Hide whitespace changes
Inline Side-by-side
Showing with 267 additions and 191 deletions
src/components/Upload/singleImageX.vue
View file @ 01e06712
...@@ -153,4 +153,4 @@ export default { ...@@ -153,4 +153,4 @@ export default {
} }
} }
} }
</style> </style>
\ No newline at end of file
src/views/webSiteManagement/bannerSetting/index.vue
View file @ 01e06712
...@@ -27,11 +27,15 @@ ...@@ -27,11 +27,15 @@
<!-- 数据列表 --> <!-- 数据列表 -->
<el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%"> <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
<el-table-column align="center" type="index" label="序号" width="65"></el-table-column> <el-table-column align="center" label="序号" width="65">
<template slot-scope="scope">
{{scope.row.index}}
</template>
</el-table-column>
<el-table-column align="center" label="banner标题" prop="title"></el-table-column> <el-table-column align="center" label="banner标题" prop="title"></el-table-column>
<el-table-column align="center" label="banner图"> <el-table-column align="center" label="banner图">
<template slot-scope="scope"> <template slot-scope="scope">
<img class="cover" :src="scope.row.cover" /> <img class="cover" :src="scope.row.cover" @click.stop="showPreview(scope.row.cover)"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="状态"> <el-table-column align="center" label="状态">
...@@ -59,6 +63,12 @@ ...@@ -59,6 +63,12 @@
</el-pagination> </el-pagination>
</div> </div>
<!-- 使用图片查看器预览当前缩略图 -->
<el-image-viewer
v-show="currentIcon.showPreview"
:on-close="closePreview"
:url-list="[currentIcon.url]"
/>
<!-- 添加、编辑弹窗 --> <!-- 添加、编辑弹窗 -->
<el-dialog <el-dialog
...@@ -79,6 +89,7 @@ ...@@ -79,6 +89,7 @@
</template> </template>
<script> <script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import { banner } from "@/utils/formDatas.js"//表单数据 import { banner } from "@/utils/formDatas.js"//表单数据
import { page, update } from "@/api/website/banner"//接口 import { page, update } from "@/api/website/banner"//接口
...@@ -87,10 +98,15 @@ import CustomForm from "@/components/CustomForm"//自定义表单组件 ...@@ -87,10 +98,15 @@ import CustomForm from "@/components/CustomForm"//自定义表单组件
export default { export default {
name: "bannerSetting", name: "bannerSetting",
components: { components: {
CustomForm CustomForm,
ElImageViewer
}, },
data() { data() {
return { return {
currentIcon:{
showPreview: false,
url: ""
},
data: null,//原数据 data: null,//原数据
list: null,//赋值数据 | 过滤数据 list: null,//赋值数据 | 过滤数据
total: null,//总个数 total: null,//总个数
...@@ -98,7 +114,7 @@ export default { ...@@ -98,7 +114,7 @@ export default {
//请求参数。页码页数等 //请求参数。页码页数等
listQuery: { listQuery: {
page: 1, page: 1,
limit: 20 limit: 10
}, },
//搜索表单 //搜索表单
searchForm: { searchForm: {
...@@ -124,6 +140,13 @@ export default { ...@@ -124,6 +140,13 @@ export default {
this.getList()//获取数据 this.getList()//获取数据
}, },
methods: { methods: {
closePreview() {
this.currentIcon.showPreview = false;
},
showPreview(url){
this.currentIcon.showPreview = true
this.currentIcon.url = url
},
//获取图片链接 //获取图片链接
getSrc(val) { getSrc(val) {
this.editForm.cover = val this.editForm.cover = val
...@@ -276,6 +299,9 @@ export default { ...@@ -276,6 +299,9 @@ export default {
this.listLoading = true; this.listLoading = true;
page(this.listQuery).then(res => { page(this.listQuery).then(res => {
this.list = res.data.data this.list = res.data.data
this.list.forEach((element,index) => {
element.index = ((this.listQuery.page-1)*this.listQuery.limit)+(index+1)
});
this.data = res.data.data this.data = res.data.data
this.total = res.data.totalCount; this.total = res.data.totalCount;
this.listLoading = false; this.listLoading = false;
...@@ -297,8 +323,10 @@ export default { ...@@ -297,8 +323,10 @@ export default {
border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
} }
.cover { .cover {
max-width: 200px; width: 50px;
height: auto; height: 50px;
object-fit: cover;
cursor: pointer;
} }
.page-foot { .page-foot {
display: flex; display: flex;
......
src/views/webSiteManagement/industryApplication/applicationCate/index.vue
View file @ 01e06712
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2020-12-02 10:27:53 * @Date: 2020-12-02 10:27:53
* @LastEditTime: 2020-12-10 09:36:09 * @LastEditTime: 2020-12-11 15:44:37
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: 类别管理 * @Description: 类别管理
* @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\index.vue * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\index.vue
...@@ -24,15 +24,13 @@ ...@@ -24,15 +24,13 @@
</div> </div>
<div class="types"> <div class="types">
<span>应用类别</span> <span>应用类别</span>
<el-select v-model="currentType" placeholder="全部"> <el-col :span="16">
<el-option <el-input
v-for="item in types" v-model="currentTypeName"
:key="item.value" placeholder="请输入类别名称"
:label="item.label" size="100px"
:value="item.value" ></el-input>
> </el-col>
</el-option>
</el-select>
</div> </div>
<div class="sorts"> <div class="sorts">
<span>排序</span> <span>排序</span>
...@@ -84,8 +82,25 @@ ...@@ -84,8 +82,25 @@
<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-col>
</el-form-item> </el-form-item>
<el-form-item label="分类设置" prop="level">
<el-radio-group v-model="form.level">
<el-radio label="一级类目"></el-radio>
<el-radio label="二级类目"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="父级" prop="father" v-show="form.showFather">
<el-select v-model="currentType" placeholder="全部">
<el-option
v-for="item in types"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item> <el-form-item>
<el-button @click="typeManagerVisible=false">取消</el-button> <el-button @click="closeTypeManager">取消</el-button>
<el-button type="primary" @click="onSubmit">确定</el-button> <el-button type="primary" @click="onSubmit">确定</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -96,7 +111,7 @@ ...@@ -96,7 +111,7 @@
<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"> <el-table-column label="序号" width="100" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.id }}</span> <span>{{ scope.row.index }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="应用类别" width="200" align="center"> <el-table-column label="应用类别" width="200" align="center">
...@@ -104,7 +119,7 @@ ...@@ -104,7 +119,7 @@
<span>{{ scope.row.type }}</span> <span>{{ scope.row.type }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="详情图" align="center"> <el-table-column label="封面图" width="80" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span> <span>
<img <img
...@@ -120,12 +135,22 @@ ...@@ -120,12 +135,22 @@
<span class="introduce">{{ scope.row.introduce }}</span> <span class="introduce">{{ scope.row.introduce }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="排序" width="150" align="center"> <el-table-column label="类目级别" align="center">
<template slot-scope="scope">
<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>
</template>
</el-table-column>
<el-table-column label="排序" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.sort }}</span> <span>{{ scope.row.sort }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="状态" width="150" align="center"> <el-table-column label="状态" width="100" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.status==1?"上架":"下架" }}</span> <span>{{ scope.row.status==1?"上架":"下架" }}</span>
</template> </template>
...@@ -158,7 +183,7 @@ ...@@ -158,7 +183,7 @@
</div> </div>
<!-- 使用图片查看器预览当前缩略图 --> <!-- 使用图片查看器预览当前缩略图 -->
<el-image-viewer <el-image-viewer
v-if="currentIcon.showPreview" v-show="currentIcon.showPreview"
:on-close="closePreview" :on-close="closePreview"
:url-list="[currentIcon.url]" :url-list="[currentIcon.url]"
/> />
...@@ -184,6 +209,7 @@ export default { ...@@ -184,6 +209,7 @@ export default {
data() { data() {
return { return {
currentIcon: "", currentIcon: "",
// 功能按钮 // 功能按钮
operatorControls: [ operatorControls: [
{ {
...@@ -209,14 +235,10 @@ export default { ...@@ -209,14 +235,10 @@ export default {
}, },
], ],
currentStatus: "", currentStatus: "",
// 所有类别 // 类别
currentTypeName: "",
typesState: [], typesState: [],
types: [ types: [],
{
value: "",
label: "全部",
},
],
currentType: "", currentType: "",
// 排序 // 排序
sorts: [ sorts: [
...@@ -260,24 +282,50 @@ export default { ...@@ -260,24 +282,50 @@ export default {
type: [{ required: true, message: '文案有误', trigger: 'blur' }], type: [{ required: true, message: '文案有误', trigger: 'blur' }],
introduce: [{ required: true, message: '请输入简介', trigger: 'blur' }], introduce: [{ required: true, message: '请输入简介', trigger: 'blur' }],
coverImg: [{ required: true, message: '请上传封面图', trigger: 'blur' }], coverImg: [{ required: true, message: '请上传封面图', trigger: 'blur' }],
sort: [{ required: true, message: '请输入排序号', trigger: 'blur' }] sort: [{ required: true, message: '请输入排序号', trigger: 'blur' }],
level: [{ required: true, message: '请选择级别', trigger: 'blur' }],
father: [{ required: true, message: '请选择父级类别', trigger: 'blur' }],
}, },
form:{ form:{
type: '', type: '',
coverImg: '', coverImg: '',
introduce: '', introduce: '',
sort: '', sort: '',
level: '一级类目',
showFather: false
}, },
editType: '', editType: '',
}; };
}, },
watch:{
"form.level":{
deep: true,
handler(newVal){
console.log(newVal)
if(newVal=="二级类目"){
this.pullAllApplicationType()
this.form.showFather = true
}else{
this.form.showFather = false
}
}
}
},
mounted() { mounted() {
// 获取所有类型用于下拉框 // 获取所有类型用于下拉框
this.pullAllApplicationType() // this.pullAllApplicationType()
// 分页获取类型用于表格 // 分页获取类型用于表格
this.pullListApplicationType() this.pullListApplicationType()
}, },
methods: { methods: {
closeTypeManager(){
this.typeManagerVisible = false
this.$bus.$emit('upload-clearFiles')
},
getFatherTypeName(pid){
let father = this.typesState.find(ele => ele.id == pid)
return father ? father.title : ""
},
clickOperator(index){ clickOperator(index){
console.log("index=>",index) console.log("index=>",index)
if(index==1){ if(index==1){
...@@ -308,21 +356,23 @@ export default { ...@@ -308,21 +356,23 @@ export default {
}, },
// 获取所有应用类型 // 获取所有应用类型
pullAllApplicationType(){ pullAllApplicationType(){
this.types = [{ this.typesState = []
value: "", this.types = []
label: "全部",
}]
getAllApplicationType().then(res => { getAllApplicationType().then(res => {
if(res.status == 200){ if(res.status == 200){
// console.log("获取所有的应用类型=>",res) console.log("获取所有的应用类型=>",res)
res.data.forEach(element => { res.data.forEach(element => {
if(element.isDel==0){ this.typesState.push(element)
if(element.isDel==0&&element.pid==0){
this.types.push({ this.types.push({
value: element.id, value: element.id,
label: element.title label: element.title
}); });
} }
}); });
if(this.types.length>0){
this.currentType = this.types[0].value
}
} }
}) })
}, },
...@@ -340,25 +390,27 @@ export default { ...@@ -340,25 +390,27 @@ export default {
res.data.data.forEach(element => { res.data.data.forEach(element => {
this.tableDataCache.push(element) this.tableDataCache.push(element)
}) })
this.tableDataCache.forEach(element => { console.log("获取到的分页类别信息=>",this.tableDataCache)
this.tableData.push({ this.screenTableData()
id: element.id, // this.tableDataCache.forEach(element => {
type: element.title, // this.tableData.push({
icon: { // id: element.id,
url: element.detailImg, // type: element.title,
showPreview: false, // icon: {
}, // url: element.detailImg,
coverImg: element.detailImg, // showPreview: false,
crtTime: element.crtTime, // },
introduce: element.detail, // coverImg: element.detailImg,
sort: element.rank, // crtTime: element.crtTime,
status: element.status, // introduce: element.detail,
isDel: element.isDel, // sort: element.rank,
pid: element.pid, // status: element.status,
updTime: element.updTime, // isDel: element.isDel,
indexShow: element.indexShow // pid: element.pid,
}) // updTime: element.updTime,
}) // indexShow: element.indexShow
// })
// })
} }
}) })
}, },
...@@ -366,30 +418,37 @@ export default { ...@@ -366,30 +418,37 @@ export default {
screenTableData(){ screenTableData(){
// console.log("分页数据的缓存=>",this.tableDataCache) // console.log("分页数据的缓存=>",this.tableDataCache)
this.tableData = [] this.tableData = []
let index = 0
this.tableDataCache.forEach(element => { this.tableDataCache.forEach(element => {
this.tableData.push({ if(element.isDel==0){
id: element.id, this.tableData.push({
type: element.title, index: ((this.typePagination.currentPage-1)*this.typePagination.pageSize)+(++index),
icon: { id: element.id,
url: element.detailImg, type: element.title,
showPreview: false, icon: {
}, url: element.detailImg,
coverImg: element.detailImg, showPreview: false,
crtTime: element.crtTime, },
introduce: element.detail, coverImg: element.detailImg,
sort: element.rank, crtTime: element.crtTime,
status: element.status, introduce: element.detail,
isDel: element.isDel, sort: element.rank,
pid: element.pid, status: element.status,
updTime: element.updTime, isDel: element.isDel,
indexShow: element.indexShow pid: element.pid,
}) updTime: element.updTime,
indexShow: element.indexShow
})
}
}) })
if(this.currentStatus!=''){ if(this.currentStatus!=''){
this.tableData = this.tableData.filter(element => element.status == this.currentStatus) this.tableData = this.tableData.filter(element => element.status == this.currentStatus)
} }
if(this.currentType!=''){ // if(this.currentType!=''){
this.tableData = this.tableData.filter(element => element.id == this.currentType) // this.tableData = this.tableData.filter(element => element.id == this.currentType)
// }
if(this.currentTypeName!=''){
this.tableData = this.tableData.filter(element => element.title == this.currentTypeName)
} }
if(this.currentSort!=''){ if(this.currentSort!=''){
// 1是降序,2是升序 // 1是降序,2是升序
...@@ -532,7 +591,7 @@ export default { ...@@ -532,7 +591,7 @@ export default {
status: 1, status: 1,
rank: this.form.sort, rank: this.form.sort,
indexShow: 1, indexShow: 1,
pid: 1, pid: this.form.showFather ? this.currentType : 0,
} }
}else{// 修改 }else{// 修改
data = { data = {
...@@ -556,6 +615,7 @@ export default { ...@@ -556,6 +615,7 @@ export default {
}); });
this.typeManagerVisible = false this.typeManagerVisible = false
this.pullListApplicationType() this.pullListApplicationType()
this.$bus.$emit('upload-clearFiles')
}else{ }else{
this.$message.error('操作失败,请稍后重试!!!'); this.$message.error('操作失败,请稍后重试!!!');
} }
...@@ -692,4 +752,4 @@ export default { ...@@ -692,4 +752,4 @@ export default {
height: auto; height: auto;
} }
} }
</style> </style>
\ No newline at end of file
src/views/webSiteManagement/industryApplication/applicationList/appList/index.vue
View file @ 01e06712
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2020-12-02 10:27:53 * @Date: 2020-12-02 10:27:53
* @LastEditTime: 2020-12-10 09:29:46 * @LastEditTime: 2020-12-11 11:02:51
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\index.vue * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\index.vue
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
<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"> <el-table-column label="序号" width="100" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.id }}</span> <span>{{ scope.row.index }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="应用类别" width="200" align="center"> <el-table-column label="应用类别" width="200" align="center">
...@@ -258,14 +258,16 @@ export default { ...@@ -258,14 +258,16 @@ export default {
// 筛选数据 // 筛选数据
screenApplicationInfo(){ screenApplicationInfo(){
this.tableData = [] this.tableData = []
let index = 0
this.tableDataCache.forEach(element => { this.tableDataCache.forEach(element => {
// 未被删除的 // 未被删除的
if(element.isDel==0){ if(element.isDel==0){
this.tableData.push({ this.tableData.push({
index: ((this.infoPagination.currentPage-1)*this.infoPagination.pageSize)+(++index),
id: element.id,
attribute:element.attribute, attribute:element.attribute,
examples:element.examples, examples:element.examples,
examplesJson: element.examplesJson, examplesJson: element.examplesJson,
id: element.id,
indexShow:element.indexShow, indexShow:element.indexShow,
introduction:element.introduction, introduction:element.introduction,
isDel:element.isDel, isDel:element.isDel,
......
src/views/webSiteManagement/newsCategory/nebulaDynamics/index.vue
View file @ 01e06712
<!-- <!--
* @Author: Jenkins * @Author: Jenkins
* @Date: 2020-12-01 09:54:12 * @Date: 2020-12-01 09:54:12
* @LastEditTime: 2020-12-10 17:12:47 * @LastEditTime: 2020-12-11 11:27:34
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: 星云动态 * @Description: 星云动态
* @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\newsCategory\index.vue * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\newsCategory\index.vue
...@@ -31,15 +31,9 @@ ...@@ -31,15 +31,9 @@
添加类型 添加类型
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<el-table <el-table :data="tableType" border fit highlight-current-row style="width: 100%" max-height="400">
:data="tableType"
border
fit
highlight-current-row
style="width: 100%"
max-height="400"
>
<el-table-column label="序号" align="center"> <el-table-column label="序号" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.id }}</span> <span>{{ scope.row.id }}</span>
...@@ -83,53 +77,22 @@ ...@@ -83,53 +77,22 @@
</div> </div>
</div> </div>
<!-- 编辑类型弹框 --> <!-- 编辑类型弹框 -->
<el-dialog <el-dialog width="40%" title="编辑类型" :visible.sync="typeEditorVisible" append-to-body>
width="40%" <div id="typeEditor">
title="编辑类型" <div class="content">
:visible.sync="typeEditorVisible" <el-form ref="form" :rules="createRules" :model="editorType" label-width="80px">
append-to-body <el-form-item label="类型名称" prop="name">
> <el-col :span="24">
<div id="typeCreator"> <el-input v-model="editorType.name" placeholder="请输入类型名称"></el-input>
<el-form ref="form" :rules="createRules" :model="editorType" label-width="80px"> </el-col>
<el-form-item label="类型名称" prop="name"> </el-form-item>
<el-col :span="14"> <el-form-item label="类型排序" prop="sort">
<el-input v-model="editorType.name" placeholder="请输入类型名称" size="100px"></el-input> <el-col :span="24">
</el-col> <el-input v-model="editorType.sort" placeholder="请设置排序0-10000,数值越大排序越靠前"></el-input>
</el-form-item> </el-col>
<el-form-item label="类型排序" prop="sort"> </el-form-item>
<el-col :span="14"> </el-form>
<el-input v-model="editorType.sort" placeholder="请设置排序0-10000,数值越大排序越靠前"></el-input> </div>
</el-col>
</el-form-item>
</el-form>
<!-- <div class="content">
<span>*中文名称</span>
<el-col :span="14">
<el-input
v-model="editorType.name"
placeholder="请输入类型名称"
size="100px"
></el-input>
</el-col>
</div> -->
<!-- <div class="content">
<span>*英文名称</span>
<el-col :span="14">
<el-input
v-model="editorType.nameEn"
placeholder="请输入类型名称(英文)"
></el-input>
</el-col>
</div> -->
<!-- <div class="content">
<span>*类型排序</span>
<el-col :span="14">
<el-input
v-model="editorType.sort"
placeholder="请设置排序0-10000,数值越大排序越靠前"
></el-input>
</el-col>
</div> -->
<div class="operators"> <div class="operators">
<div class="cancel" @click.stop="cancelEditor">取消</div> <div class="cancel" @click.stop="cancelEditor">取消</div>
<div class="confirm" @click.stop="confirmEditor">确定</div> <div class="confirm" @click.stop="confirmEditor">确定</div>
...@@ -137,31 +100,21 @@ ...@@ -137,31 +100,21 @@
</div> </div>
</el-dialog> </el-dialog>
<!-- 添加类型弹框 --> <!-- 添加类型弹框 -->
<el-dialog <el-dialog width="40%" title="添加类型" :visible.sync="typeCreatorVisible" append-to-body>
width="40%" <div id="typeCreator">
title="添加类型"
:visible.sync="typeCreatorVisible"
append-to-body
>
<div id="typeEditor">
<div class="content"> <div class="content">
<span>*类型名称</span> <el-form ref="form" :rules="newRules" :model="newType" label-width="80px">
<el-col :span="14"> <el-form-item label="类型名称" prop="newName">
<el-input <el-col :span="24">
v-model="newType" <el-input v-model="newType.newName" placeholder="请输入类型名称" size="100px"></el-input>
placeholder="请输入类型名称" </el-col>
size="100px" </el-form-item>
></el-input> <el-form-item label="类型排序" prop="newSort">
</el-col> <el-col :span="24">
</div> <el-input v-model="newType.newSort" placeholder="请设置排序0-10000,数值越大排序越靠前"></el-input>
<div class="content"> </el-col>
<span>*类型排序</span> </el-form-item>
<el-col :span="14"> </el-form>
<el-input
v-model="newSort"
placeholder="请设置排序0-10000,数值越大排序越靠前"
></el-input>
</el-col>
</div> </div>
<div class="operators"> <div class="operators">
<div class="cancel" @click.stop="typeCreatorVisible = false">取消</div> <div class="cancel" @click.stop="typeCreatorVisible = false">取消</div>
...@@ -230,7 +183,7 @@ ...@@ -230,7 +183,7 @@
> >
<el-table-column label="序号" width="100" align="center"> <el-table-column label="序号" width="100" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.id }}</span> <span>{{ scope.row.index }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="资讯标题" align="center"> <el-table-column label="资讯标题" align="center">
...@@ -323,6 +276,10 @@ export default { ...@@ -323,6 +276,10 @@ export default {
name: [{ required: true, message: '请输入类型名称', trigger: 'blur' }], name: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
sort: [{ required: true, message: '请设置排序号', trigger: 'blur' }], sort: [{ required: true, message: '请设置排序号', trigger: 'blur' }],
}, },
newRules: {
newName: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
newSort: [{ required: true, message: '请设置排序号', trigger: 'blur' }],
},
// 功能按钮 // 功能按钮
topControls: [ topControls: [
{ {
...@@ -336,8 +293,10 @@ export default { ...@@ -336,8 +293,10 @@ export default {
], ],
typeManagerVisible: false, typeManagerVisible: false,
typeCreatorVisible: false, typeCreatorVisible: false,
newType: "", newType: {
newSort: "", newName: "",
newSort: "",
},
// 状态框 // 状态框
status: [ status: [
{ {
...@@ -638,11 +597,11 @@ export default { ...@@ -638,11 +597,11 @@ export default {
// 缓存当前的表格数据 // 缓存当前的表格数据
this.tableDataState.push(element) this.tableDataState.push(element)
}) })
console.log("tableDataState",this.tableDataState) console.log("获取到的分页新闻资讯",this.tableDataState)
// 将缓存的数据作进一步的筛选 // 将缓存的数据作进一步的筛选
this.screenTableData() this.screenTableData()
} }
console.log("获取分页新闻资讯=>", res); // console.log("获取分页新闻资讯=>", res);
}); });
}, },
// 筛选表格数据 // 筛选表格数据
...@@ -650,14 +609,14 @@ export default { ...@@ -650,14 +609,14 @@ export default {
// 先清空当前表格数据 // 先清空当前表格数据
this.tableData = [] this.tableData = []
console.log("星云动态缓存的表格数据=>",this.tableDataState) console.log("星云动态缓存的表格数据=>",this.tableDataState)
let index = 1 let index = 0
// 先把未被删除的数据放入到表格 // 先把未被删除的数据放入到表格
this.tableDataState.forEach((element) => { this.tableDataState.forEach((element) => {
// 未被删除则显示 // 未被删除则显示
if(element.isDel == 0){ if(element.isDel == 0){
let type = (this.typesState.find(ele => ele.id == element.typeId)) let type = (this.typesState.find(ele => ele.id == element.typeId))
this.tableData.push({ this.tableData.push({
index: index++,// 序号 index: (this.infoPagination.pageSize*(this.infoPagination.currentPage-1))+(++index),// 序号
id: element.id, id: element.id,
title: element.title, title: element.title,
icon: { icon: {
...@@ -851,14 +810,14 @@ export default { ...@@ -851,14 +810,14 @@ export default {
}, },
// 添加类型 // 添加类型
createType(){ createType(){
if(this.newType&&this.newSort){ 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)){ 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.newSort>=0&&this.newSort<10000){ if(this.newType.newSort>=0&&this.newType.newSort<10000){
addUpdateNewsType({ addUpdateNewsType({
nameCn: this.newType, nameCn: this.newType.newName,
nameEn: "", nameEn: "",
rank: this.newSort, rank: this.newType.newSort,
status: 1, // 创建即启用 status: 1, // 创建即启用
isDel: "0", // 0为不删除,1为删除 isDel: "0", // 0为不删除,1为删除
}).then(res => { }).then(res => {
...@@ -883,10 +842,10 @@ export default { ...@@ -883,10 +842,10 @@ export default {
}, },
clickTypeEditor(type){ clickTypeEditor(type){
this.typeEditorVisible = true this.typeEditorVisible = true
this.editorType = type this.editorType = JSON.parse(JSON.stringify(type))
}, },
cancelEditor(){ cancelEditor(){
this.pullListNewsType() // this.pullListNewsType()
this.typeEditorVisible = false this.typeEditorVisible = false
}, },
// 修改类型 // 修改类型
...@@ -895,7 +854,7 @@ export default { ...@@ -895,7 +854,7 @@ export default {
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(/^(?:[\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(this.editorType.sort>=0&&this.editorType.sort<10000){
// 上传修改 // 上传修改
addUpdateNewsType({ addUpdateNewsType({
id: this.editorType.id, id: this.editorType.id,
nameCn: this.editorType.name, nameCn: this.editorType.name,
nameEn: this.editorType.nameEn, nameEn: this.editorType.nameEn,
...@@ -1160,26 +1119,24 @@ export default { ...@@ -1160,26 +1119,24 @@ export default {
width: 100%; width: 100%;
} }
} }
#typeCreator,#typeEditor { #typeCreator,#typeEditor{
width: 100%; width: 100%;
height: auto; height: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.content { .content{
margin-bottom: 25px; margin-left: 70px;
width: 100%; width: calc(100% - 70px);
height: 26px; height: auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: flex-start;
align-items: center; align-items: center;
span {
width: 100px;
height: 26px;
}
} }
}
#typeCreator,#typeEditor{
.operators { .operators {
margin: 25px 0 0 0; margin: 25px 0 0 0;
width: 100%; width: 100%;
......
src/views/webSiteManagement/satelliteIntroduction/list.vue
View file @ 01e06712
...@@ -22,11 +22,15 @@ ...@@ -22,11 +22,15 @@
</el-form> </el-form>
</div> </div>
<el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%"> <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
<el-table-column align="center" type="index" label="序号" width="65"></el-table-column> <el-table-column align="center" label="序号" width="65">
<template slot-scope="scope">
{{scope.row.index}}
</template>
</el-table-column>
<el-table-column align="center" label="卫星名称" prop="name"></el-table-column> <el-table-column align="center" label="卫星名称" prop="name"></el-table-column>
<el-table-column align="center" label="缩略图"> <el-table-column align="center" label="缩略图">
<template slot-scope="scope"> <template slot-scope="scope">
<img class="cover" :src="scope.row.coverImg" /> <img class="cover" :src="scope.row.coverImg" @click.stop="showPreview(scope.row.coverImg)"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="分辨率" prop="resolution"></el-table-column> <el-table-column align="center" label="分辨率" prop="resolution"></el-table-column>
...@@ -44,7 +48,12 @@ ...@@ -44,7 +48,12 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 使用图片查看器预览当前缩略图 -->
<el-image-viewer
v-show="currentIcon.showPreview"
:on-close="closePreview"
:url-list="[currentIcon.url]"
/>
<div class="page-foot"> <div class="page-foot">
<el-pagination <el-pagination
background background
...@@ -59,13 +68,21 @@ ...@@ -59,13 +68,21 @@
</template> </template>
<script> <script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import { satelliteIntroduction } from "@/utils/formDatas.js" import { satelliteIntroduction } from "@/utils/formDatas.js"
import { page, update } from "@/api/website/satelliteIntroduction" import { page, update } from "@/api/website/satelliteIntroduction"
export default { export default {
name: "satelliteIntroduction", name: "satelliteIntroduction",
components:{
ElImageViewer
},
data() { data() {
return { return {
currentIcon:{
showPreview: false,
url: "",
},
data: null,//原数据 data: null,//原数据
list: null,//赋值数据 | 过滤数据 list: null,//赋值数据 | 过滤数据
total: null, total: null,
...@@ -98,6 +115,13 @@ export default { ...@@ -98,6 +115,13 @@ export default {
this.getList() this.getList()
}, },
methods: { methods: {
closePreview() {
this.currentIcon.showPreview = false;
},
showPreview(url){
this.currentIcon.showPreview = true
this.currentIcon.url = url
},
search() { search() {
this.listQuery = { this.listQuery = {
status: this.searchForm.status || null, status: this.searchForm.status || null,
...@@ -190,6 +214,9 @@ export default { ...@@ -190,6 +214,9 @@ export default {
this.listLoading = true; this.listLoading = true;
page(this.listQuery).then(res => { page(this.listQuery).then(res => {
this.list = res.data.data this.list = res.data.data
this.list.forEach((element,index) => {
element.index = ((this.listQuery.page-1)*this.listQuery.limit)+(index+1)
});
this.data = res.data.data this.data = res.data.data
this.total = res.data.totalCount; this.total = res.data.totalCount;
this.listLoading = false; this.listLoading = false;
...@@ -211,8 +238,10 @@ export default { ...@@ -211,8 +238,10 @@ export default {
border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
} }
.cover { .cover {
max-width: 200px; width: 50px;
height: auto; height: 50px;
object-fit: cover;
cursor: pointer;
} }
.page-foot { .page-foot {
display: flex; display: flex;
......
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