1.4 影像图库商品介绍

src/views/webSiteManagement/imageLibrary/edit.vue

 <template>
   <div class="block">
     <div class="head">
-      <div class="go-back" @click="goBack"><i class="el-icon-back"></i>返回上一页</div>
+      <div class="go-back" @click="goBack">
+        <i class="el-icon-back"></i>返回上一页
+      </div>
     </div>
 
     <div class="body">
-      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
-        <el-alert title="基础信息" type="info" :closable="false" style="margin-bottom: 10px"></el-alert>
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+        class="demo-ruleForm"
+      >
+        <el-alert
+          title="基础信息"
+          type="info"
+          :closable="false"
+          style="margin-bottom: 10px"
+        ></el-alert>
 
         <el-form-item label="产品名称" prop="name">
-          <el-input class="half-width" v-model="ruleForm.name" placeholder="请输入产品名称"></el-input>
+          <el-input
+            class="half-width"
+            v-model="ruleForm.name"
+            placeholder="请输入产品名称"
+          ></el-input>
         </el-form-item>
         <el-form-item label="产品缩略图" prop="coverImg">
-           <!-- 上传 -->
-          <my-upload :value="ruleForm.coverImg" @input="(val, info) => getSrc('coverImg', 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'">
+        <el-form-item
+          label="上传源文件"
+          :prop="'imageInfoRelationList.url' && 'imageInfoRelationList.price'"
+        >
           <!-- 上传 -->
-          <my-upload refName="upload2" :value="ruleForm.imageInfoRelationList.url" @input="(val, info) => getSrc('imageInfoRelationList', val, info)"></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 class="half-width" size="small" v-model="ruleForm.imageInfoRelationList.price" placeholder="请输入价格"></el-input>
+          <div v-if="ruleForm.imageInfoRelationList.fileWidth">
+            尺寸大小：{{ ruleForm.imageInfoRelationList.fileWidth }}
+          </div>
+          <el-input
+            class="half-width"
+            size="small"
+            v-model="ruleForm.imageInfoRelationList.price"
+            placeholder="请输入价格"
+          ></el-input>
         </el-form-item>
 
-        <el-alert title="产品参数" type="info" :closable="false" style="margin-bottom: 10px"></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="请选择">
@@ -32,24 +70,45 @@
               v-for="(item, index) in imageTypes"
               :key="~~index"
               :label="item"
-              :value="~~index">
+              :value="~~index"
+            >
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="产品类型" prop="paramJson.productType">
-          <el-input class="half-width" v-model="ruleForm.paramJson.productType" placeholder="请输入产品类型"></el-input>
+          <el-input
+            class="half-width"
+            v-model="ruleForm.paramJson.productType"
+            placeholder="请输入产品类型"
+          ></el-input>
         </el-form-item>
         <el-form-item label="文件格式" prop="paramJson.productType">
-          <el-input class="half-width" v-model="ruleForm.paramJson.fileType" placeholder="请输入文件格式"></el-input>
+          <el-input
+            class="half-width"
+            v-model="ruleForm.paramJson.fileType"
+            placeholder="请输入文件格式"
+          ></el-input>
         </el-form-item>
         <el-form-item label="卫星" prop="paramJson.satellite">
-          <el-input class="half-width" v-model="ruleForm.paramJson.satellite" placeholder="请输入卫星型号"></el-input>
+          <el-input
+            class="half-width"
+            v-model="ruleForm.paramJson.satellite"
+            placeholder="请输入卫星型号"
+          ></el-input>
         </el-form-item>
         <el-form-item label="分辨率" prop="paramJson.resolution">
-          <el-input class="half-width" v-model="ruleForm.paramJson.resolution" placeholder="请输入产品分辨率"></el-input>
+          <el-input
+            class="half-width"
+            v-model="ruleForm.paramJson.resolution"
+            placeholder="请输入产品分辨率"
+          ></el-input>
         </el-form-item>
         <el-form-item label="拍摄地点" prop="paramJson.address">
-          <el-input class="half-width" v-model="ruleForm.paramJson.address" placeholder="请输入拍摄地点"></el-input>
+          <el-input
+            class="half-width"
+            v-model="ruleForm.paramJson.address"
+            placeholder="请输入拍摄地点"
+          ></el-input>
         </el-form-item>
         <el-form-item label="拍摄时间" prop="paramJson.shotTime">
           <el-date-picker
@@ -57,7 +116,8 @@
             v-model="ruleForm.paramJson.shotTime"
             type="datetime"
             placeholder="选择日期时间"
-            :picker-options="datePickerOptions">
+            :picker-options="datePickerOptions"
+          >
           </el-date-picker>
         </el-form-item>
         <el-form-item label="可否商用" prop="paramJson.commercial">
@@ -73,8 +133,22 @@
           </el-radio-group>
         </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-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 label="产品介绍">
+          <kind-editor
+            id="editor_id"
+            :content.sync="ruleForm.intro"
+            :afterChange="afterChange()"
+            :loadStyleMode="false"
+            @on-content-change="onContentChange"
+          ></kind-editor>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onSubmit">确定</el-button>
@@ -83,23 +157,40 @@
       </el-form>
     </div>
 
-
     <!-- 相似图片弹窗 -->
-    <el-dialog title="相似图片" :visible.sync="images.visible" width="80%" :close-on-click-modal="false">
+    <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)">
+          <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;">
+      <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">
+          @current-change="currentChange"
+        >
         </el-pagination>
       </div>
       <div slot="footer" class="dialog-footer">
@@ -111,96 +202,94 @@
 </template>
 
 <script>
-import MyUpload from "@/components/Upload/singleImageX"//上传组件
-
-import { update, getAll, getDetail } from "@/api/website/imageLibrary"
+import MyUpload from "@/components/Upload/singleImageX"; //上传组件
 
+import { update, getAll, getDetail } from "@/api/website/imageLibrary";
+import KindEditor from "@/components/Kindeditor";
 export default {
   components: {
-    MyUpload
+    MyUpload,
+    KindEditor,
   },
   data() {
     let checkNumber = function (rule, value, callback) {
-      if (value === '') {
-        callback(new Error('请输入价格'));
+      if (value === "") {
+        callback(new Error("请输入价格"));
       } else {
         if (isNaN(value)) {
-          callback(new Error('请输入数字'));
+          callback(new Error("请输入数字"));
         } else {
           callback();
         }
       }
-    }
+    };
     return {
       //1--影像美图 2--专题图 3--遥感成果图
       imageTypes: {
-        1: '影像美图',
-        2: '专题图',
-        3: '遥感成果图',
+        1: "影像美图",
+        2: "专题图",
+        3: "遥感成果图",
       },
       ruleForm: {
-        name: '',
-        coverImg: '',
+        name: "",
+        coverImg: "",
         imageInfoRelationList: {
-          url: '',
+          url: "",
           price: null,
-          fileWidth: '',
-          fileSize: '',
+          fileWidth: "",
+          fileSize: "",
         },
-        type: '',
+        intro: "",
+        type: "",
         relatedIds: "",
         paramJson: {
-          productType: '',
-          fileType: '',
-          satellite: '',
-          resolution: '',
-          address: '',
-          shotTime: '',
-          commercial: '',
-          watermark: '',
-        }
+          productType: "",
+          fileType: "",
+          satellite: "",
+          resolution: "",
+          address: "",
+          shotTime: "",
+          commercial: "",
+          watermark: "",
+        },
       },
       rules: {
-        name: [
-          {required:  true, message: '请输入产品名称', trigger: 'blur'}
-        ],
+        name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
         coverImg: [
-          {required:  true, message: '请上传缩略图', trigger: 'change'}
+          { required: true, message: "请上传缩略图", trigger: "change" },
         ],
-        'imageInfoRelationList.url': [
-          {required:  true, message: '请上传源文件', trigger: 'change'}
+        "imageInfoRelationList.url": [
+          { required: true, message: "请上传源文件", trigger: "change" },
         ],
-        'imageInfoRelationList.price': [
-          {required:  true, message: '请输入价格', trigger: 'blur'},
-          {validator: checkNumber, trigger: 'blur'}//校验是否是数字
+        "imageInfoRelationList.price": [
+          { required: true, message: "请输入价格", trigger: "blur" },
+          { validator: checkNumber, trigger: "blur" }, //校验是否是数字
         ],
         type: [
-          {required:  true, message: '请选择影像类型', trigger: 'change'}
+          { required: true, message: "请选择影像类型", trigger: "change" },
         ],
-        'paramJson.productType': [
-          {required:  true, message: '请输入产品类型', trigger: 'blur'}
+        "paramJson.productType": [
+          { required: true, message: "请输入产品类型", trigger: "blur" },
         ],
-        'paramJson.fileType': [
-          {required:  true, message: '请输入文件格式'}
+        "paramJson.fileType": [{ required: true, message: "请输入文件格式" }],
+        "paramJson.satellite": [
+          { required: true, message: "请输入卫星型号", trigger: "blur" },
         ],
-        'paramJson.satellite': [
-          {required:  true, message: '请输入卫星型号', trigger: 'blur'}
+        "paramJson.resolution": [
+          { required: true, message: "请输入分辨率", trigger: "blur" },
         ],
-        'paramJson.resolution': [
-          {required:  true, message: '请输入分辨率', trigger: 'blur'}
+        "paramJson.address": [
+          { required: true, message: "请输入拍摄地点", trigger: "blur" },
         ],
-        'paramJson.address': [
-          {required:  true, message: '请输入拍摄地点', trigger: 'blur'}
+        "paramJson.shotTime": [
+          { required: true, message: "请选择拍摄时间", trigger: "change" },
         ],
-        'paramJson.shotTime': [
-          {required:  true, message: '请选择拍摄时间', trigger: 'change'}
+        "paramJson.commercial": [
+          { required: true, message: "请选择", trigger: "change" },
         ],
-        'paramJson.commercial': [
-          {required:  true, message: '请选择', trigger: 'change'}
+        "paramJson.watermark": [
+          { required: true, message: "请选择", trigger: "change" },
         ],
-        'paramJson.watermark': [
-          {required:  true, message: '请选择', trigger: 'change'}
-        ]
       },
       images: {
         pageInfo: {
@@ -210,29 +299,40 @@ export default {
         total: 100,
         datas: [],
         visible: false,
-        selects: []
+        selects: [],
       },
       selectsArr: [],
       datePickerOptions: {
         disabledDate: (time) => {
-          return time.getTime() > new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 -1)
-        }
-      }
-    }
+          return (
+            time.getTime() >
+            new Date(
+              new Date(new Date().toLocaleDateString()).getTime() +
+                24 * 60 * 60 * 1000 -
+                1
+            )
+          );
+        },
+      },
+    };
   },
   mounted() {
     //获取所有相似图像
-    this.getAllImages()
-    this.$bus.$on('imageLibrary-edit-renderData', this.renderData)
+    this.getAllImages();
+    this.$bus.$on("imageLibrary-edit-renderData", this.renderData);
   },
   beforeDestroy() {
-    this.$bus.$off('imageLibrary-edit-renderData')
+    this.$bus.$off("imageLibrary-edit-renderData");
   },
   methods: {
+    afterChange() {},
+    onContentChange(val) {
+      this.ruleForm.intro = val;
+    },
     //打开相似图片dialog弹窗
     showImagesDialog() {
       // console.log(this.images.selects)
-      this.selectsArr = JSON.parse(JSON.stringify(this.images.selects))
+      this.selectsArr = JSON.parse(JSON.stringify(this.images.selects));
       this.images.visible = true;
     },
     //相似图片弹窗图片列表切换页面方法
@@ -249,70 +349,77 @@ export default {
     //选择相似图片
     select(item) {
       let selects = this.selectsArr;
-      let index = selects.indexOf(item.id + '')
+      let index = selects.indexOf(item.id + "");
       if (index > -1) {
-        selects.splice(index, 1)
+        selects.splice(index, 1);
       } else {
-        selects.push(item.id + '')
+        selects.push(item.id + "");
       }
-      this.selectsArr = selects
+      this.selectsArr = selects;
     },
     //获取所有相似图像
     getAllImages() {
-      getAll(this.images.pageInfo).then(res => {
-        this.images.datas = res.data.data
-        this.images.total = res.data.totalCount
-      })
+      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'];
+      let rule = ["imageInfoRelationList"];
 
       if (rule.includes(key) && info) {
         this.ruleForm[key] = {
           url: val,
           price: this.ruleForm[key].price,
-          fileWidth: info.width + '*' + info.height,
-          fileSize: info.size
-        }
+          fileWidth: info.width + "*" + info.height,
+          fileSize: info.size,
+        };
 
-        this.$set(this.ruleForm.paramJson, 'fileType', info.type)
+        this.$set(this.ruleForm.paramJson, "fileType", info.type);
       } else {
         this.ruleForm[key] = val;
       }
-
     },
     //点击编辑的时候，获取表格行数据，渲染edit页面
     renderData(params) {
       //获取详情
       let val = params;
-      let afterFormat =  this.filterParams(val);
+      let afterFormat = this.filterParams(val);
       let data = JSON.parse(JSON.stringify(afterFormat));
 
       // data.paramJson = JSON.parse(data.paramJson);
       //注意：imageInfoRelationListParse为imageInfoRelationList参数的最后一项，赋值显示
       data.imageInfoRelationList = data.imageInfoRelationListParse[0];
-      data.coverImg = data.coverImg || '';
+      data.coverImg = data.coverImg || "";
       this.ruleForm = data;
-      this.images.selects = this.ruleForm.relatedIds.split(',')//相似图片转为数组格式
-
+      this.images.selects = this.ruleForm.relatedIds.split(","); //相似图片转为数组格式
     },
     //返回上一页
     goBack() {
-      this.$emit('change', 'List')
+      this.$emit("change", "List");
     },
     //过滤多余属性
     filterParams(obj) {
-      let p = {}
-      let b = ['isDel', 'status', 'updTime', 'crtTime', 'allowCustom', 'rank', 'relationId', 'similarImageList']
+      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])
+          if (key === "imageInfoRelationList") {
+            let temp = this.filterParams(obj[key][0]);
             obj[key] = [temp];
           }
 
-          p[key] = obj[key]
+          p[key] = obj[key];
         }
       }
       return p;
@@ -321,14 +428,13 @@ export default {
     onSubmit() {
       this.$refs.ruleForm.validate((valid) => {
         if (valid) {
-          console.log('submit')
-          this.updateFunc();//上传数据
+          console.log("submit");
+          this.updateFunc(); //上传数据
         } else {
-          console.log('error submit!!');
+          console.log("error submit!!");
           return false;
         }
       });
-
     },
     //添加/修改方法
     updateFunc() {
@@ -336,21 +442,20 @@ export default {
       let params = JSON.parse(JSON.stringify(this.ruleForm));
 
       params.paramJson = JSON.stringify(params.paramJson);
-      params.imageInfoRelationList = [params.imageInfoRelationList]
+      params.imageInfoRelationList = [params.imageInfoRelationList];
       // console.log(params)
       //执行方法
-      update(params).then(res => {
-        if (res.status ==  200) {
+      update(params).then((res) => {
+        if (res.status == 200) {
           //返回上一页，更新列表
           this.goBack();
-
         } else {
           this.$message.error(res.message);
         }
-      })
-    }
-  }
-}
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -373,16 +478,17 @@ export default {
   }
 }
 .body {
-  padding: 20px 50px 40px
+  padding: 20px 50px 40px;
 }
 .grid-content {
   border: 1px solid transparent;
 }
-.grid-content:hover, .grid-content.active {
+.grid-content:hover,
+.grid-content.active {
   border: 1px solid #409eff;
-  box-sizing: border-box
+  box-sizing: border-box;
 }
 .half-width {
-  width: 50%
+  width: 50%;
 }
 </style>