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