行业应用页面代码更新

src/api/website/imageLibrary/index.js

 import fetch from 'utils/fetch';
-
+//获取影像图库列表
 export function page(query) {
   return fetch({
     url: '/api/website/imageImgStorage/getList',
@@ -7,7 +7,7 @@ export function page(query) {
     params: query
   });
 }
-
+//新增或修改影像图库
 export function update(query) {
   return fetch({
     url: '/api/website/imageImgStorage/addUpdate',
@@ -15,3 +15,19 @@ export function update(query) {
     data: query
   });
 }
+//获取所有相似图像
+export function getAll(query) {
+  return fetch({
+    url: '/api/website/imageInfoRelation/getAll',
+    method: 'get',
+    params: query
+  });
+}
+///api/website/imageImgStorage/getDetail/{id}
+export function getDetail(query) {
+  return fetch({
+    url: `/api/website/imageImgStorage/getDetail/${query}`,
+    method: 'get'
+  });
+}
+

src/api/website/industryApplication/index.js

 /*
  * @Author: Jenkins
  * @Date: 2020-12-02 09:20:18
- * @LastEditTime: 2020-12-08 14:59:18
+ * @LastEditTime: 2020-12-08 17:59:51
  * @LastEditors: Please set LastEditors
  * @Description: 行业应用页请求接口
  * @FilePath: \rs-cloud-platform-ui\src\api\wsmanagement\industryApplication\index.js
@@ -11,7 +11,7 @@ import fetch from 'utils/fetch';
 
 /**
  * 获取所有行业应用类型
- * @param {Object} indexShow 
+ * @param {Object} indexShow
  */
 export function getAllApplicationType(obj){
     return fetch({
@@ -29,13 +29,13 @@ export function getListApplicationType(obj){
     return fetch({
         url: '/api/website/industryApplicationType/getList',
         method: 'get',
-        param: obj
+        params: obj
     });
 }
 
 /**
  * 新增或更新行业应用类型
- * @param {Object} obj 
+ * @param {Object} obj
  */
 export function addUpdateApplicationType(obj){
     return fetch({
@@ -47,19 +47,19 @@ export function addUpdateApplicationType(obj){
 
 /**
  * 分页获取行业应用信息
- * @param {Object} obj 
+ * @param {Object} obj
  */
 export function getListApplicationInfo(obj){
     return fetch({
         url: '/api/website/industryApplicationInfo/getList',
         method: 'get',
-        param: obj
+        params: obj
     });
 }
 
 /**
  * 新增或更新行业应用信息
- * @param {Object} obj 
+ * @param {Object} obj
  */
 export function addUpdateApplicationInfo(obj){
     return fetch({

src/components/CustomForm/index.vue

+<!--
+ * @Author: your name
+ * @Description: 该组件，为表单组件。
+ *  关联js：@/utils/formDatas.js
+ *  使用到该组件的地方：
+ *  在@/views/webSiteManagement/bannerSetting/index.vue中使用 轮播图设置
+ *  在@/views/webSiteManagement/satelliteIntroduction/index.vue中使用 卫星介绍
+ *  在@/views/webSiteManagement/imageLibrary/index.vue中使用 影像图库
+-->
 <template>
   <el-form
     ref="ruleForm"
@@ -20,7 +29,7 @@
       </div>
       <!-- 自定义 -->
       <div v-else-if="item.type && item.type == 'custom'">
-        <custom-input ref="customInput" :value="getForm.formVal" @input="getCustomInput" @reset="resetParams"></custom-input>
+        <custom-input ref="customInput" :value="getForm.formVal" @input="getCustomInput"></custom-input><!-- @input="getCustomInput" @reset="resetParams"-->
       </div>
 
       <div v-else-if="item.type && item.type == 'kindEditor'">
@@ -62,6 +71,16 @@ export default {
       content: ""
     }
   },
+  // watch: {
+  //   formData: {
+  //     handler(newVal, oldVal) {
+  //       console.log(22, newVal, oldVal)
+  //       this.getForm = newVal
+  //       // this.$set(this, 'getForm', newVal)
+  //     }
+  //   },
+  //   deep: true
+  // },
   computed: {
     getForm() {
       this.$nextTick(() => this.$refs.ruleForm.resetFields())
@@ -70,7 +89,6 @@ export default {
   },
   methods: {
     onContentChange (val) {
-      console.log(val)
       this.getForm.formVal.content = val;
     },
     afterChange () {
@@ -84,11 +102,15 @@ export default {
     //获取图片链接
     getSrc(index, val) {
       let formVal = this.getForm.formVal
+      // console.log(index, val)
       formVal[index] = val
+      // this.$set(this.getForm.formVal, index, val)
     },
     //获取自定义组件值
     getCustomInput(val) {
       let formVal = this.getForm.formVal
+      formVal.jumpType = val.jumpType;
+
       if (val.jumpType == 1) {
         formVal.url = val.value
       } else {
@@ -112,7 +134,7 @@ export default {
     //校验自定义input
     checkCustom() {
       let form = this.getForm.formVal;
-
+      // console.log('自定义input', this.getForm.formVal)
       if (form.jumpType === 1 && form.url == '') {
         this.$refs.customInput[0].showErr('请输入链接地址')
         return false

src/components/CustomInput/index.vue

 <template>
   <div class="custom-input">
-    <el-select v-model="select.jumpType" placeholder="请选择" @change="selectType">
+    <el-select v-model="select.jumpType" placeholder="请选择" @change="jumpTypeChange">
       <el-option
         v-for="(item, index) in linkTypes"
         :key="~~index"
@@ -11,7 +11,7 @@
 
     <!-- 外部链接 -->
     <div class="link-type-input" v-if="select.jumpType === 1">
-      <el-input v-model="select.value" placeholder="请输入外部链接" @input="blurFunc"></el-input>
+      <el-input v-model="select.value" placeholder="请输入外部链接"></el-input>
     </div>
 
     <!-- 卫星影像 -->
@@ -19,9 +19,9 @@
       <el-select v-model="select.value" placeholder="请选择">
         <el-option
           v-for="item in satelliteList"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
+          :key="item.id"
+          :label="item.name"
+          :value="item.id + ''">
         </el-option>
       </el-select>
     </div>
@@ -38,9 +38,9 @@
       <el-select v-model="select.value" placeholder="请选择">
         <el-option
           v-for="item in applicationList"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
+          :key="item.id"
+          :label="item.title"
+          :value="item.id + ''">
         </el-option>
       </el-select>
     </div>
@@ -48,7 +48,7 @@
     <!-- 行业应用详情 -->
     <div class="link-type-input" v-if="select.jumpType === 5">
       <el-button type="primary" icon="el-icon-plus" v-if="!select.value" @click="details.visible = true">选择应用详情</el-button>
-      <el-tag type="success" v-if="select.value" @click="details.visible = true">{{getName('details', select.value)}}</el-tag>
+      <el-tag type="success" v-if="select.value" @click="details.visible = true">{{getName('details', select.value, 'title')}}</el-tag>
     </div>
     <div class="el-form-item__error" v-if="select.jumpType !== 0 && !!hasErr">{{hasErr}}</div>
 
@@ -70,23 +70,23 @@
           <el-table-column label="缩略图" width="150" align="center">
               <template slot-scope="scope">
                   <span>
-                      <img class="icon" :src="scope.row.icon.url"/>
+                      <img class="icon" :src="scope.row.coverImg"/>
                   </span>
               </template>
           </el-table-column>
           <el-table-column label="简介" align="center">
               <template slot-scope="scope">
-                  <span class="introduce">{{scope.row.introduce}}</span>
+                  <span class="introduce">{{scope.row.detail}}</span>
               </template>
           </el-table-column>
           <el-table-column label="类型" width="150" align="center">
               <template slot-scope="scope">
-                  <span>{{scope.row.type}}</span>
+                  <span>{{scope.row.typeName}}</span>
               </template>
           </el-table-column>
           <el-table-column label="状态" align="center">
               <template slot-scope="scope">
-                  <span>{{scope.row.status}}</span>
+                  <span>{{getStatus(scope.row.status)}}</span>
               </template>
           </el-table-column>
           <el-table-column label="操作" width="80" align="center">
@@ -110,8 +110,8 @@
 
     <!-- 应用详情弹窗 -->
     <el-dialog title="选择资讯" :visible.sync="details.visible" append-to-body width="80%" style="height: 100%">
-      <el-table size="mini" :data="news.datas" border fit highlight-current-row current-row-key="id"
-      @current-change="(val) => handleCurrentChange('news', val)" style="width: 100%" height="500px">
+      <el-table size="mini" :data="details.datas" border fit highlight-current-row current-row-key="id"
+      @current-change="(val) => handleCurrentChange('details', val)" style="width: 100%" height="500px">
           <el-table-column label="序号" width="100" align="center">
             <template slot-scope="scope">
               <span>{{ scope.row.id }}</span>
@@ -124,27 +124,27 @@
           </el-table-column>
           <el-table-column label="应用名称" align="center">
             <template slot-scope="scope">
-              <span class="introduce">{{ scope.row.name }}</span>
+              <span class="introduce">{{ scope.row.title }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="详情图" align="center">
+          <!-- <el-table-column label="详情图" align="center">
             <template slot-scope="scope">
               <span>
                 <img
                   class="icon"
-                  :src="scope.row.icon.url"
+                  :src="scope.row.coverImg"
                 />
               </span>
             </template>
-          </el-table-column>
+          </el-table-column> -->
           <el-table-column label="发布时间" width="150" align="center">
             <template slot-scope="scope">
-              <span>{{ scope.row.date }}</span>
+              <span>{{ scope.row.crtTime }}</span>
             </template>
           </el-table-column>
           <el-table-column label="状态" width="150" align="center">
             <template slot-scope="scope">
-              <span>{{ scope.row.status }}</span>
+              <span>{{ getStatus(scope.row.status) }}</span>
             </template>
           </el-table-column>
           <el-table-column label="操作" width="150" align="center">
@@ -170,6 +170,9 @@
 </template>
 
 <script>
+import { getListApplicationType, getListApplicationInfo } from "@/api/website/industryApplication"//获取行业类别、行业应用详情
+import { page } from "@/api/website/satelliteIntroduction"//获取卫星介绍
+import { getListNewsInfo } from "@/api/website/newsCategory" //星云动态
 
 export default {
   name: "index",
@@ -193,13 +196,33 @@ export default {
         }
       },
       deep:true
+    },
+    select: {
+      handler(newVal) {
+        // console.dir(JSON.stringify(newVal))
+        this.$emit('input', newVal)
+      },
+      deep: true
     }
   },
   computed: {
-    getName(key, id, name = 'name') {
-      return (key, id) => {
+    getStatus(status) {
+      return (status) => {
+        let a = ""
+        switch(status) {
+          case 1: a = '启用'; break;
+          case 2: a = '禁用'; break;
+          default: a = '未知';break
+        }
+        return a
+      }
+    },
+    getName(key, id, name) {
+      return (key, id, name) => {
+        console.log(this[key])
         let target = this[key].datas.find(v => v.id == id);
-        return target ? target[name] : null
+        console.log(111, target)
+        return (target && target[name]) || null
       }
     }
   },
@@ -209,10 +232,10 @@ export default {
       linkTypes: {
         0: "不跳转",
         1: '外部链接',
-        // 2: '卫星影像',
-        // 3: '星云动态',
-        // 4: '行业应用类别',
-        // 5: '行业应用详情',
+        2: '卫星影像',
+        3: '星云动态',
+        4: '行业应用类别',
+        5: '行业应用详情',
       },
       satelliteList: [],//卫星影像
       applicationList: [],//行业应用
@@ -223,31 +246,7 @@ export default {
       },
       //星云动态
       news: {
-        datas: [{
-            id: '1',
-            title: '王小虎',
-            icon: {
-                url: 'https://onemap.obtdata.com/wx/download/world.png',
-                showPreview: false
-            },
-            introduce: '介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍',
-            type: '类型',
-            sort: '排序',
-            status: '状态',
-            operator: '操作',
-        },{
-            id: '2',
-            title: '王小虎2',
-            icon: {
-                url: 'https://onemap.obtdata.com/wx/download/world.png',
-                showPreview: false
-            },
-            introduce: '2介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍',
-            type: '类型',
-            sort: '排序',
-            status: '状态',
-            operator: '操作',
-        }],
+        datas: [],
         visible: false,
         currRow: null,
         total: 100,
@@ -258,17 +257,7 @@ export default {
       },
       //应用详情
       details: {
-        datas: [{
-          id: "1",
-          type: "类别",
-          name: "名称",
-          icon: {
-            url: "https://onemap.obtdata.com/wx/download/world.png",
-            showPreview: false,
-          },
-          date: "发布时间",
-          status: "状态",
-        }],
+        datas: [],
         visible: false,
         currRow: null,
         total: 100,
@@ -277,35 +266,75 @@ export default {
           limit: 20
         }
       },
-      detailsList: [],
       hasErr: '',
 
     };
   },
+  mounted() {
+    this.init()
+  },
   methods: {
+    //初始化
+    init() {
+      this.getSatelliteListFunc();//获取卫星影像介绍
+      this.getListApplicationTypeFunc();//获取行业应用类型
+      this.getDialogDatas('news', getListNewsInfo)//星云动态
+      this.getDialogDatas('details', getListApplicationInfo)//行业应用详情
+    },
+    getDialogDatas(key, fn) {
+      console.log(this[key].pageParams, '星云和详情')
+      fn(this[key].pageParams).then(res => {
+        this[key].datas = res.data.data
+        this[key].total = res.data.totalCount
+      })
+    },
+    // //星云动态
+    // getListNewsInfoFunc() {
+    //   getListNewsInfo(this.news.pageParams).then(res => {
+    //     this.news.datas = res.data.data
+    //     this.news.total = res.data.totalCount
+    //   })
+    // },
+    // //行业应用详情
+    // getListApplicationInfoFunc() {
+    //   getListApplicationInfo(this.details.pageParams).then(res => {
+    //     this.details.datas = res.data.data
+    //     this.details.total = res.data.totalCount
+    //   })
+    // },
+    //行业应用类别
+    getListApplicationTypeFunc() {
+      let params = {
+        page: 1,
+        limit: 20
+      }
+      getListApplicationType(params).then(res => {
+        this.applicationList = res.data.data
+      })
+    },
+    //获取卫星影像介绍
+    getSatelliteListFunc() {
+      page().then(res => {
+        this.satelliteList = res.data.data
+      })
+    },
+    //动态。详情翻页
     handleCurrentChange(key, val) {
       this[key].currRow = val;
     },
+    //动态。详情选择按钮
     selectFunc(key, val) {
       this[key].visible = false;
       this.select.value = val.id;
       this[key].currRow = val.id;//高亮选中项
-      console.log(this.select)
-      this.emitInput(this.select.value)
     },
     showErr(err) {
       this.hasErr = err
     },
-    selectType() {
-      this.$emit('reset', this.select.jumpType)
+    //跳转类型改变方法
+    jumpTypeChange() {
+      this.select.value = "";
       this.showErr('')
-    },
-    blurFunc(val) {
-      console.log(val)
-      this.emitInput(this.select)
-    },
-    emitInput(val) {
-      this.$emit('input', val)
     }
   }
 };

src/components/Upload/singleImageX.vue

 <template>
   <div class="upload-container">
     <el-upload
-    v-show="!imageUrl"
-      ref="upload"
+      v-show="!value"
+      :ref="refName"
       drag
       v-loading="uploading"
       action="#"
@@ -14,9 +14,9 @@
       <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
       <div class="el-upload__text">只能上传1个文件</div>
     </el-upload>
-    <div class="image-preview" v-show="imageUrl">
+    <div class="image-preview" v-show="value">
       <div class="image-preview-wrapper">
-        <img :src="imageUrl" />
+        <img :src="value" />
         <div class="image-preview-action">
           <i @click="rmImage" class="el-icon-delete"></i>
         </div>
@@ -29,12 +29,16 @@
 // 预览效果见专题
 import { uploadFile } from "@/api/website/newsCategory/index";
 export default {
-  name: "singleImageUpload2",
+  name: "singleImageX",
   props: {
+    refName: {
+      type: String,
+      default: 'upload'
+    },
     //图片地址
     value: {
       type: String,
-      default: "",
+      default: () => "",
     },
   },
   data() {
@@ -42,26 +46,39 @@ export default {
       uploading: false
     };
   },
-  computed: {
-    imageUrl() {
-      return (!!this.value) ? this.value : ""
-    }
+  mounted() {
+    this.$bus.$on('upload-clearFiles', this.clearFiles)
+  },
+  beforeDestroy() {
+    this.$bus.$off('upload-clearFiles')
   },
   methods: {
+    //清空上传过的图片
+    clearFiles() {
+      this.$refs[this.refName].clearFiles()
+    },
     //删除图片
     rmImage() {
-      this.$refs.upload.clearFiles()
-      this.emitFunc("");
+      this.clearFiles();
+      this.emitFunc("", null);
     },
     //上传请求
     onUploadRequest(data) {
       this.uploading = true;
       let fileObj = data.file;
-      console.log(data)
+
+      //获取图片详情信息
+      let imgInfo = {};
       let temp = URL.createObjectURL(fileObj)
       let img = new Image();
       img.src = temp;
-      console.log(img.width, img.height)
+      img.onload = function () {
+        imgInfo.width = img.width;
+        imgInfo.height = img.height;
+      }
+      imgInfo.size = fileObj.size;
+      imgInfo.type = fileObj.type;
+
 
       // FormData 对象
       let form = new FormData();
@@ -72,16 +89,16 @@ export default {
         this.uploading = false;
 
         if (res.status == 200) {
-          this.emitFunc(res.data)
+          this.emitFunc(res.data, imgInfo)
         } else {
-          this.emitFunc("");
+          this.emitFunc("", null);
           this.$message.error(res.message)
         }
       })
     },
     //组件通信
-    emitFunc(val) {
-      this.$emit('input', val)
+    emitFunc(val, info = null) {
+      this.$emit('input', val, info)
     }
   },
 };

src/utils/formDatas.js

@@ -19,7 +19,6 @@ let radioGroup = {
   }
 }
 
-
 //banner表单项
 export const banner = {
   init: () => ({
@@ -98,48 +97,48 @@ export const satelliteIntroduction = {
 
 
 
-//影像图库
-export const imageLibrary = {
-  init: () => ({
-    name: "",//标题名称
-    coverImg: "",//封面图
-    detailImg: "",//详情图
-    //产品分类
-    //影像分类
-    //文件格式
-    //分辨率
-    //拍摄地点
-    //拍摄时间
-    //可否商用
-    //是否水印
+// //影像图库
+// export const imageLibrary = {
+//   init: () => ({
+//     name: "",//标题名称
+//     coverImg: "",//封面图
+//     detailImg: "",//详情图
+//     //产品分类
+//     //影像分类
+//     //文件格式
+//     //分辨率
+//     //拍摄地点
+//     //拍摄时间
+//     //可否商用
+//     //是否水印
 
-  }),
-  rules: {
-    name: [
-      { required: true, message: '请输入卫星名称', trigger: 'blur' }
-    ],
-    resolution: [
-      { required: true, message: '请输入分辨率', trigger: 'blur' }
-    ],
-    rank: [
-      { required: true, message: '请设置0-10000，数值越大排序越靠前', trigger: 'blur' }
-    ],
-    coverImg: [
-      { required: true, message: '请输入封面图链接', trigger: 'blur' }
-    ],
-    iconImg: [
-      { required: true, message: '请输入图标链接', trigger: 'blur' }
-    ],
-    content: [
-      { required: true, message: '请输入详细内容', trigger: 'blur' }
-    ]
-  },
-  formInfo: {
-    name: { label: "卫星名称" },
-    resolution: { label: "分辨率" },
-    coverImg: { label: "封面图", type: 'file'},
-    iconImg: { label: "图标", type: 'file'},
-    rank: { label: "排序" },
-    content: { label: "详细内容", type: 'kindEditor'},
-  }
-}
+//   }),
+//   rules: {
+//     name: [
+//       { required: true, message: '请输入卫星名称', trigger: 'blur' }
+//     ],
+//     resolution: [
+//       { required: true, message: '请输入分辨率', trigger: 'blur' }
+//     ],
+//     rank: [
+//       { required: true, message: '请设置0-10000，数值越大排序越靠前', trigger: 'blur' }
+//     ],
+//     coverImg: [
+//       { required: true, message: '请输入封面图链接', trigger: 'blur' }
+//     ],
+//     iconImg: [
+//       { required: true, message: '请输入图标链接', trigger: 'blur' }
+//     ],
+//     content: [
+//       { required: true, message: '请输入详细内容', trigger: 'blur' }
+//     ]
+//   },
+//   formInfo: {
+//     name: { label: "卫星名称" },
+//     resolution: { label: "分辨率" },
+//     coverImg: { label: "封面图", type: 'file'},
+//     iconImg: { label: "图标", type: 'file'},
+//     rank: { label: "排序" },
+//     content: { label: "详细内容", type: 'kindEditor'},
+//   }
+// }

src/views/webSiteManagement/bannerSetting.vue

-<template>
-  <div class="container">
-    <!-- 头部 -->
-    <div class="head">
-      <div>banner列表</div>
-      <el-button type="primary" @click="addItem">添加banner</el-button>
-    </div>
-    <!-- 主体 -->
-    <div class="app-container calendar-list-container">
-      <!-- 条件搜索 -->
-      <div class="filter-container">
-        <el-form :inline="true" :model="listQuery" class="demo-form-inline">
-          <el-form-item label="所有状态">
-            <el-select v-model="listQuery.status">
-              <el-option v-for="(item, index) in bannerStatus" :key="index" :label="item" :value="~~index"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="banner标题">
-            <el-input v-model="listQuery.title" placeholder="请输入banner标题"></el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" plain @click="search">搜索</el-button>
-            <el-button type="primary" plain @click="clearFilterData">清除搜索</el-button>
-          </el-form-item>
-        </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="banner标题" prop="title"></el-table-column>
-        <el-table-column align="center" label="banner图">
-          <template slot-scope="scope">
-            <img class="cover" :src="scope.row.cover" />
-          </template>
-        </el-table-column>
-        <el-table-column align="center" label="状态">
-          <template slot-scope="scope">
-            <!-- 根据状态获取对应中文 -->
-            {{ getStatus(scope.row.status) }}
-          </template>
-        </el-table-column>
-        <el-table-column align="center" label="操作" width="250">
-          <template slot-scope="scope">
-            <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
-            <el-button :type="scope.row.status === 1 ? 'info': 'warning'" size="mini" @click="changeParams(scope.row, 'status')">{{scope.row.status === 1 ? '下架': '上架'}}</el-button>
-            <el-button type="danger" size="mini" @click="changeParams(scope.row, 'isDel')">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <!-- 分页 -->
-      <div class="page-foot">
-        <el-pagination
-          background
-          layout="prev, pager, next"
-          :page-size="listQuery.limit"
-          :total="total" @current-change="currentChange">
-        </el-pagination>
-      </div>
-
-
-      <!-- 添加、编辑弹窗 -->
-       <el-dialog
-        top="10%"
-        :close-on-click-modal="false"
-        :title="dialogTitle"
-        :visible.sync="dialogVisible">
-
-        <custom-form
-        :formData="formObject"
-        @submitFunc="updateFunc"
-        @reset="resetForm"
-        ></custom-form>
-      </el-dialog>
-
-    </div>
-
-  </div>
-</template>
-
-<script>
-import { banner } from "@/utils/formDatas.js"//表单数据
-import { page, update } from "@/api/website/banner"//接口
-
-import CustomForm from "@/components/CustomForm"
-
-export default {
-  name: "bannerSetting",
-  components: {
-    CustomForm
-  },
-  data() {
-    return {
-      data: null,//原数据
-      list: null,//赋值数据 | 过滤数据
-      total: null,//总个数
-      listLoading: true,//请求加载状态
-      //请求参数。页码页数等
-      listQuery: {
-        status: 0,
-        title: "",
-        page: 1,
-        limit: 20
-      },
-      //搜索表单
-      searchForm: {
-        status: 0,
-        title: ""
-      },
-      formObject: {
-        formVal: banner.init(),//提交的表单参数
-        rules: banner.rules,//表单规则
-        formItem: banner.formInfo,//表单项。
-      },
-      //是否启用，1、启用，2、禁用
-      bannerStatus: {
-        0: '全部',
-        1: '启用',
-        2: '禁用',
-      },
-      dialogVisible: false,//弹窗显示控制
-      dialogTitle: "新增banner"//弹窗标题
-    }
-  },
-  mounted() {
-    this.getList()//获取数据
-  },
-  methods: {
-    //获取图片链接
-    getSrc(val) {
-      this.editForm.cover = val
-    },
-    //获取自定义组件值
-    getCustomInput(val) {
-      this.editForm.url = val
-    },
-    search() {
-      this.listQuery.page = 1;
-      this.getList()
-    },
-    //清除搜索
-    filterData() {
-      if (this.searchForm.status === 0 && this.searchForm.title === '') {
-        this.list = this.data;
-        return ;
-      }
-      let temp = this.data.filter(v => this.searchForm.status === 0 ? true: !!(this.searchForm.status === v.status))
-      if (!!this.searchForm.title) {
-        temp = temp.filter(v => v.title.includes(this.searchForm.title))
-      }
-
-      this.list = temp
-    },
-    //清除搜索
-    clearFilterData() {
-      this.searchForm = {
-        status: 0,
-        title: ""
-      }
-      this.list = this.data;
-    },
-    //切换页码
-    currentChange(val) {
-      this.listQuery.page = val;
-      this.getList();
-    },
-    //编辑
-    edit(row) {
-      this.dialogTitle = "编辑banner";
-
-      this.formObject.formVal = this.filterParams(row)
-      this.dialogVisible = true;
-
-      console.log(this.formObject.formVal)
-    },
-    //更新方法
-    updateFunc(params) {
-      params.rank = ~~params.rank;
-      update(params).then(res => {
-        if (res.status ==  200) {
-          this.dialogVisible = false;
-          this.getList();
-        } else {
-          this.$message.error(res.message);
-        }
-      })
-    },
-    //取消表单
-    resetForm() {
-      this.dialogVisible = false;
-    },
-    //新增banner
-    addItem() {
-      this.dialogTitle = "新增banner";
-      this.dialogVisible = true;
-      this.formObject.formVal = banner.init();
-    },
-    filterParams(obj) {
-      let p = {}
-      let b = ['isDel', 'updTime', 'crtTime']
-      for (let key in obj) {
-        if (!b.includes(key)) {
-          p[key] = obj[key]
-        }
-      }
-      return p;
-    },
-    //获取状态
-    getStatus(val) {
-      return this.bannerStatus[val]
-    },
-    //上下架、删除更新
-    changeParams(row, key) {
-      this.$confirm('确定继续执行该操作吗?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.formObject.formVal = this.filterParams(row)
-          console.log('过滤参数', this.formObject.formVal)
-          if (key == 'isDel') {
-            this.formObject.formVal[key] = row[key] == 0 ? 1 : 0;
-          } else {
-            this.formObject.formVal[key] = row[key] == 1 ? 2 : 1;
-          }
-
-          //更新专题
-          this.updateFunc(this.formObject.formVal);
-        })
-
-    },
-    //获取banner列表
-    getList() {
-      this.listLoading = true;
-      page(this.listQuery).then(res => {
-        this.list = res.data.data
-        this.data = res.data.data
-        this.total = res.data.totalCount;
-        this.listLoading = false;
-      }).catch(err => {
-        this.listLoading = false;
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 20px;
-  width: 100%;
-  border-bottom: 1px solid #e6e6e6;
-}
-.cover {
-  max-width: 200px;
-  height: auto;
-}
-.page-foot {
-  display: flex;
-  justify-content: center;
-  margin-top: 20px;
-}
-</style>

src/views/webSiteManagement/bannerSetting/index.vue

@@ -65,7 +65,7 @@
         top="10%"
         :close-on-click-modal="false"
         :title="dialogTitle"
-        :visible.sync="dialogVisible">
+        :visible.sync="dialogVisible"  @closed="closeDialog"> <!-- @open="onOpen" @closed="closeDialog">-->
         <custom-form
         :formData="formObject"
         @submitFunc="updateFunc"
@@ -82,7 +82,7 @@
 import { banner } from "@/utils/formDatas.js"//表单数据
 import { page, update } from "@/api/website/banner"//接口
 
-import CustomForm from "@/components/CustomForm"
+import CustomForm from "@/components/CustomForm"//自定义表单组件
 
 export default {
   name: "bannerSetting",
@@ -132,6 +132,7 @@ export default {
     getCustomInput(val) {
       this.editForm.url = val
     },
+    //搜索按钮
     search() {
       this.listQuery = {
         status: this.searchForm.status || null,
@@ -185,11 +186,18 @@ export default {
     //编辑
     edit(row) {
       this.dialogTitle = "编辑banner";
-
       this.formObject.formVal = this.filterParams(row)
+      // this.formObject = {
+      //   formVal: this.filterParams(row),
+      //   rules: this.formObject.rules,//表单规则
+      //   formItem: banner.formInfo,//表单项。
+      // }
       this.dialogVisible = true;
 
-      console.log(this.formObject.formVal)
+      // console.log(this.formObject.formVal)
+    },
+    closeDialog() {
+      this.$bus.$emit('upload-clearFiles')
     },
     //更新方法
     updateFunc(params) {
@@ -212,7 +220,26 @@ export default {
       this.dialogTitle = "新增banner";
       this.dialogVisible = true;
       this.formObject.formVal = banner.init();
+
     },
+    // //打开弹窗
+    // onOpen() {
+    //   this.$nextTick(() => {
+    //     this.formObject = {
+    //       formVal: {
+    //         title: "",
+    //         cover: "",
+    //         rank: "",
+    //         url: "",
+    //         status: 1,
+    //         jumpType: 0,
+    //         jumpId: '',
+    //       },
+    //       rules: this.formObject.rules,//表单规则
+    //       formItem: banner.formInfo,//表单项。
+    //     }
+    //   })
+    // },
     filterParams(row) {
       let a = {};
       for (let i in this.formObject.formVal) {

src/views/webSiteManagement/imageLibrary/edit.vue

@@ -6,23 +6,25 @@
 
     <div class="body">
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
-        <el-alert title="基础信息" type="info" :closable="false"></el-alert>
+        <el-alert title="基础信息" type="info" :closable="false" style="margin-bottom: 10px"></el-alert>
 
         <el-form-item label="产品名称" prop="name">
           <el-input v-model="ruleForm.name" placeholder="请输入产品名称"></el-input>
         </el-form-item>
-        <el-form-item label="产品缩略图" prop="coverImage">
+        <el-form-item label="产品缩略图" prop="coverImg">
            <!-- 上传 -->
-          <my-upload :value="ruleForm.coverImage" @input="(val) => getSrc('coverImage', val)"></my-upload>
+          <my-upload :value="ruleForm.coverImg" @input="(val, info) => getSrc('coverImg', val)"></my-upload>
+
         </el-form-item>
         <el-form-item label="上传源文件" :prop="'imageInfoRelationList.url' && 'imageInfoRelationList.price'">
           <!-- 上传 -->
-          <my-upload :value="ruleForm.imageInfoRelationList.url" @input="(val) => getSrc('imageInfoRelationList', val)"></my-upload>
+          <my-upload refName="upload2" :value="ruleForm.imageInfoRelationList.url" @input="(val, info) => getSrc('imageInfoRelationList', val, info)"></my-upload>
+
           <div v-if="ruleForm.imageInfoRelationList.fileWidth">尺寸大小：{{ruleForm.imageInfoRelationList.fileWidth}}</div>
           <el-input size="mini" v-model="ruleForm.imageInfoRelationList.price" placeholder="请输入价格"></el-input>
         </el-form-item>
 
-        <el-alert title="产品参数" type="info" :closable="false"></el-alert>
+        <el-alert title="产品参数" type="info" :closable="false" style="margin-bottom: 10px"></el-alert>
 
         <el-form-item label="影像分类" prop="type">
           <el-select v-model="ruleForm.type" placeholder="请选择">
@@ -34,10 +36,10 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <!-- <el-form-item label="产品类型" prop="">
-          <el-input v-model="ruleForm.type" placeholder="请输入产品类型"></el-input>
-        </el-form-item> -->
-        <el-form-item label="文件格式" prop="paramJson.fileType">
+        <el-form-item label="产品类型" prop="paramJson.productType">
+          <el-input v-model="ruleForm.paramJson.productType" placeholder="请输入产品类型"></el-input>
+        </el-form-item>
+        <el-form-item label="文件格式" prop="paramJson.productType">
           <el-input v-model="ruleForm.paramJson.fileType" placeholder="请输入文件格式"></el-input>
         </el-form-item>
         <el-form-item label="卫星" prop="paramJson.satellite">
@@ -51,6 +53,7 @@
         </el-form-item>
         <el-form-item label="拍摄时间" prop="paramJson.shotTime">
           <el-date-picker
+            value-format="yyyy-MM-dd HH:mm:ss"
             v-model="ruleForm.paramJson.shotTime"
             type="datetime"
             placeholder="选择日期时间">
@@ -68,29 +71,65 @@
             <el-radio :label="2">否</el-radio>
           </el-radio-group>
         </el-form-item>
-        <!-- <el-form-item label="相似图片" prop="type">
-          <el-input v-model="ruleForm.type"></el-input>
-        </el-form-item> -->
+        <el-form-item label="相似图片" prop="relatedIds">
+          <el-button type="primary" icon="el-icon-plus" @click="showImagesDialog">相似图片</el-button>
+          <el-tag type="success">已选 {{images.selects.length}}个</el-tag>
+        </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onSubmit">确定</el-button>
           <el-button>取消</el-button>
         </el-form-item>
       </el-form>
     </div>
+
+
+    <!-- 相似图片弹窗 -->
+    <el-dialog title="相似图片" :visible.sync="images.visible" width="80%" :close-on-click-modal="false">
+      <el-row :gutter="20">
+        <el-col :span="6" v-for="item in images.datas" :key="item.id">
+          <div :class="`grid-content${selectsArr.includes('' + item.id) ? ' active' : ''}`" @click="select(item)">
+            <el-image :src="item.url" lazy></el-image>
+          </div>
+        </el-col>
+      </el-row>
+      <div style="margin-top: 10px; display: flex; align-item: center; justify-content: center;">
+        <el-pagination
+          small
+          layout="prev, pager, next"
+          :page-size="images.pageInfo.limit"
+          :total="images.total"
+          @current-change="currentChange">
+        </el-pagination>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="confirm">确 定</el-button>
+        <el-button @click="images.visible = false">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import MyUpload from "@/components/Upload/singleImageX"//上传组件
 
-// import { satelliteIntroduction } from "@/utils/formDatas.js"//表单数据
-import { update } from "@/api/website/imageLibrary"
+import { update, getAll, getDetail } from "@/api/website/imageLibrary"
 
 export default {
   components: {
     MyUpload
   },
   data() {
+    let checkNumber = function (rule, value, callback) {
+      if (value === '') {
+        callback(new Error('请输入价格'));
+      } else {
+        if (isNaN(value)) {
+          callback(new Error('请输入数字'));
+        } else {
+          callback();
+        }
+      }
+    }
     return {
       //1--影像美图 2--专题图 3--遥感成果图
       imageTypes: {
@@ -100,15 +139,18 @@ export default {
       },
       ruleForm: {
         name: '',
-        coverImage: '',
+        coverImg: '',
         imageInfoRelationList: {
           url: '',
-          price: ''
+          price: null,
+          fileWidth: '',
+          fileSize: '',
         },
         type: '',
+        relatedIds: "",
         paramJson: {
+          productType: '',
           fileType: '',
-          fileWidth: '',
           satellite: '',
           resolution: '',
           address: '',
@@ -121,20 +163,24 @@ export default {
         name: [
           {required:  true, message: '请输入产品名称', trigger: 'blur'}
         ],
-        coverImage: [
+        coverImg: [
           {required:  true, message: '请上传缩略图', trigger: 'change'}
         ],
         'imageInfoRelationList.url': [
           {required:  true, message: '请上传源文件', trigger: 'change'}
         ],
         'imageInfoRelationList.price': [
-          {required:  true, message: '请输入价格', trigger: 'blur'}
+          {required:  true, message: '请输入价格', trigger: 'blur'},
+          {validator: checkNumber, trigger: 'blur'}//校验是否是数字
         ],
         type: [
           {required:  true, message: '请选择影像类型', trigger: 'change'}
         ],
+        'paramJson.productType': [
+          {required:  true, message: '请输入产品类型', trigger: 'blur'}
+        ],
         'paramJson.fileType': [
-          {required:  true, message: '请输入文件类型', trigger: 'blur'}
+          {required:  true, message: '请输入文件格式'}
         ],
         'paramJson.satellite': [
           {required:  true, message: '请输入卫星型号', trigger: 'blur'}
@@ -146,42 +192,142 @@ export default {
           {required:  true, message: '请输入拍摄地点', trigger: 'blur'}
         ],
         'paramJson.shotTime': [
-          {type: 'date', required:  true, message: '请选择拍摄时间', trigger: 'change'}
+          {required:  true, message: '请选择拍摄时间', trigger: 'change'}
         ],
         'paramJson.commercial': [
           {required:  true, message: '请选择', trigger: 'change'}
         ],
         'paramJson.watermark': [
           {required:  true, message: '请选择', trigger: 'change'}
+        ],
+        relatedIds: [
+          {required:  true, message: '请选择'}
         ]
-      }
+      },
+      images: {
+        pageInfo: {
+          page: 1,
+          limit: 20,
+        },
+        total: 100,
+        datas: [],
+        visible: false,
+        selects: []
+      },
+      selectsArr: []
     }
   },
   mounted() {
-    this.$bus.$on('satelliteIntroduction-edit-renderData', this.renderData)
+    //获取所有相似图像
+    this.getAllImages()
+    this.$bus.$on('imageLibrary-edit-renderData', this.renderData)
+  },
+  beforeDestroy() {
+    this.$bus.$off('imageLibrary-edit-renderData')
   },
   methods: {
-    getSrc(key, val) {
+    //打开相似图片dialog弹窗
+    showImagesDialog() {
+      // console.log(this.images.selects)
+      this.selectsArr = JSON.parse(JSON.stringify(this.images.selects))
+      this.images.visible = true;
+    },
+    //相似图片弹窗图片列表切换页面方法
+    currentChange(val) {
+      this.images.pageInfo.page = val;
+      this.getAllImages();
+    },
+    //选择相似图片确定按钮
+    confirm() {
+      if (this.selectsArr.length <= 0) {
+        this.$message.info('至少选出一个')
+        return;
+      }
+
+      this.images.visible = false;
+      this.ruleForm.relatedIds = this.selectsArr.toString();
+      this.images.selects = JSON.parse(JSON.stringify(this.selectsArr));
+    },
+    //选择相似图片
+    select(item) {
+      let selects = this.selectsArr;
+      let index = selects.indexOf(item.id + '')
+      if (index > -1) {
+        selects.splice(index, 1)
+      } else {
+        selects.push(item.id + '')
+      }
+      this.selectsArr = selects
+    },
+    //获取所有相似图像
+    getAllImages() {
+      getAll(this.images.pageInfo).then(res => {
+        this.images.datas = res.data.data
+        this.images.total = res.data.totalCount
+      })
+    },
+    //上传图片，获取图片地址
+    getSrc(key, val, info) {
       let rule = ['imageInfoRelationList'];
-      if (rule.includes(key)) {
-        this.ruleForm[key].url = val;
+
+      if (rule.includes(key) && info) {
+        this.ruleForm[key] = {
+          url: val,
+          price: this.ruleForm[key].price,
+          fileWidth: info.width + '*' + info.height,
+          fileSize: info.size
+        }
+
+        this.$set(this.ruleForm.paramJson, 'fileType', info.type)
       } else {
         this.ruleForm[key] = val;
       }
 
+      // console.log(key, this.ruleForm[key])
     },
+    //点击编辑的时候，获取表格行数据，渲染edit页面
     renderData(val) {
-      this.ruleForm = val
-      console.log('bus end', this.ruleForm)
+      //获取详情
+      // getDetail(val.id).then(res => {
+      //   let val = res.data;
+        let afterFormat =  this.filterParams(val);
+        let data = JSON.parse(JSON.stringify(afterFormat));
+
+        data.paramJson = JSON.parse(data.paramJson);
+        data.imageInfoRelationList = data.imageInfoRelationList[0];
+        data.coverImg = data.coverImg || '';
+        this.ruleForm = data;
+        this.images.selects = this.ruleForm.relatedIds.split(',')//相似图片转为数组格式
+
+        // console.log('bus end', this.ruleForm);
+      // })
     },
+    //返回上一页
     goBack() {
-      this.$emit('change', 'list')
+      this.$emit('change', 'List')
     },
+    //过滤多余属性
+    filterParams(obj) {
+      let p = {}
+      let b = ['isDel', 'status', 'updTime', 'crtTime', 'allowCustom', 'rank', 'relationId', 'similarImageList']
+      for (let key in obj) {
+        if (!b.includes(key)) {
+          if (key === 'imageInfoRelationList') {
+            let temp = this.filterParams(obj[key][0])
+            obj[key] = [temp];
+          }
+
+          p[key] = obj[key]
+        }
+      }
+      return p;
+    },
+    //提交
     onSubmit() {
-      console.log(this.ruleForm)
       this.$refs.ruleForm.validate((valid) => {
         if (valid) {
-          alert('submit!');
+          console.log('submit')
+          this.updateFunc();//上传数据
         } else {
           console.log('error submit!!');
           return false;
@@ -189,31 +335,25 @@ export default {
       });
 
     },
-    // filterParams(obj) {
-    //   let p = {}
-    //   let b = ['isDel', 'status', 'updTime', 'crtTime']
-    //   for (let key in obj) {
-    //     if (!b.includes(key)) {
-    //       p[key] = obj[key]
-    //     }
-    //   }
-    //   return p;
-    // },
-    // //更新方法
-    // updateFunc(params) {
-    //   params.rank = ~~params.rank;
-    //   let datas = this.filterParams(params);
-
-    //   update(datas).then(res => {
-    //     if (res.status ==  200) {
-    //       //返回上一页，更新列表
-    //       this.goBack();
-
-    //     } else {
-    //       this.$message.error(res.message);
-    //     }
-    //   })
-    // }
+    //添加/修改方法
+    updateFunc() {
+      //转换数据格式
+      let params = JSON.parse(JSON.stringify(this.ruleForm));
+
+      params.paramJson = JSON.stringify(params.paramJson);
+      params.imageInfoRelationList = [params.imageInfoRelationList]
+      // console.log(params)
+      //执行方法
+      update(params).then(res => {
+        if (res.status ==  200) {
+          //返回上一页，更新列表
+          this.goBack();
+
+        } else {
+          this.$message.error(res.message);
+        }
+      })
+    }
   }
 }
 </script>
@@ -240,4 +380,11 @@ export default {
 .body {
   padding: 20px 50px 40px
 }
+.grid-content {
+  border: 1px solid transparent;
+}
+.grid-content:hover, .grid-content.active {
+  border: 1px solid #409eff;
+  box-sizing: border-box
+}
 </style>

src/views/webSiteManagement/imageLibrary/index.vue

@@ -33,7 +33,7 @@ export default {
 
       this.$nextTick(() => {
           if (!!val) {
-            this.$bus.$emit('satelliteIntroduction-edit-renderData', val)
+            this.$bus.$emit('imageLibrary-edit-renderData', val)
           }
       })
 

src/views/webSiteManagement/imageLibrary/list.vue

@@ -25,8 +25,8 @@
         <el-table-column align="center" type="index" label="序号" width="65"></el-table-column>
         <el-table-column align="center" label="产品名称" prop="name"></el-table-column>
         <el-table-column align="center" label="产品类型" prop="type"></el-table-column>
-        <el-table-column align="center" label="尺寸" prop="imageInfoRelationList.ileWidth"></el-table-column>
-        <el-table-column align="center" label="价格" prop="name"></el-table-column>
+        <el-table-column align="center" label="尺寸" prop="imageInfoRelationList[0].fileWidth"></el-table-column>
+        <el-table-column align="center" label="价格" prop="imageInfoRelationList[0].price"></el-table-column>
         <el-table-column align="center" label="状态">
           <template slot-scope="scope">
             {{ getStatus(scope.row.status) }}

src/views/webSiteManagement/satelliteIntroduction/edit.vue

@@ -39,7 +39,7 @@ export default {
   methods: {
     renderData(val) {
       this.formObject.formVal = val
-      console.log('bus end', this.formObject.formVal)
+      // console.log('bus end', this.formObject.formVal)
     },
     goBack() {
       this.$emit('change', 'List')

src/views/webSiteManagement/satelliteIntroduction/index.vue

@@ -28,9 +28,7 @@ export default {
   },
   methods: {
     changePage(name, val) {
-
       this.componentVal = name
-
       this.$nextTick(() => {
           if (!!val) {
             this.$bus.$emit('satelliteIntroduction-edit-renderData', val)