up

src/views/PartyshistoryRecoder/components/addImg.vue

@@ -236,6 +236,7 @@ export default {
       } else {
         this.id = ''
         this.type = ''
+        this.image_id=[];
         this.init();
         this.$refs['dialog'].clearValidate();
         delete this.form.id

src/views/PartyshistoryRecoder/components/addPointer.vue

@@ -1,29 +1,15 @@
 <template>
   <div>
-    <xy-dialog
+    <xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增点位场馆' : '编辑点位场馆'"
-      ref="dialog"
+      :form="form" :rules="rules" @submit="submit">
-      :is-show.sync="isShow"
-      type="form"
-      :title="type === 'add' ? '新增点位场馆' : '编辑点位场馆'"
-      :form="form"
-      :rules="rules"
-      @submit="submit"
-    >
       <template v-slot:name>
         <div class="xy-table-item">
           <div class="xy-table-item-label">
-            <span style="color: red; font-weight: 600; padding-right: 4px"
+            <span style="color: red; font-weight: 600; padding-right: 4px">*</span>
-              >*</span
-            >
             名称 ：
           </div>
           <div class="xy-table-item-content">
-            <el-input
+            <el-input v-model="form.name" clearable placeholder="请输入名称" style="width: 300px"></el-input>
-              v-model="form.name"
-              clearable
-              placeholder="请输入名称"
-              style="width: 300px"
-            ></el-input>
           </div>
         </div>
       </template>
@@ -31,22 +17,12 @@
         <div class="xy-table-item">
           <div class="xy-table-item-label">封面图 ：</div>
           <div class="xy-table-item-content">
-            <el-upload
+            <el-upload style="width: 300px" class="upload-demo" :action="action" :on-success="
-              style="width: 300px"
-              class="upload-demo"
-              :action="action"
-              :on-success="
                 (response, file, fileList) =>
                   successHandle(response, file, fileList, 'image_id')
-              "
+              " :before-upload="uploadBefore" :file-list="image_id" :on-remove="
-              :before-upload="uploadBefore"
-              :file-list="image_id"
-              :on-remove="
                 (file, fileList) => removeHande(file, fileList, 'image_id')
-              "
+              " :limit="1" list-type="picture-card">
-              :limit="1"
-              list-type="picture-card"
-            >
               <i slot="default" class="el-icon-plus"></i>
               <div slot="tip" class="el-upload__tip">
                 只能上传jpg/png文件，且不超过500kb
@@ -59,13 +35,8 @@
         <div class="xy-table-item">
           <div class="xy-table-item-label">纬度 ：</div>
           <div class="xy-table-item-content">
-            <el-input-number
+            <el-input-number v-model="form.lat" clearable placeholder="请输入纬度" style="width: 300px"
-              v-model="form.lat"
+              :controls="false"></el-input-number>
-              clearable
-              placeholder="请输入纬度"
-              style="width: 300px"
-              :controls="false"
-            ></el-input-number>
           </div>
         </div>
       </template>
@@ -73,13 +44,8 @@
         <div class="xy-table-item">
           <div class="xy-table-item-label">经度 ：</div>
           <div class="xy-table-item-content">
-            <el-input-number
+            <el-input-number v-model="form.lng" clearable placeholder="请输入经度" style="width: 300px"
-              v-model="form.lng"
+              :controls="false"></el-input-number>
-              clearable
-              placeholder="请输入经度"
-              style="width: 300px"
-              :controls="false"
-            ></el-input-number>
           </div>
         </div>
       </template>
@@ -87,14 +53,8 @@
         <div class="xy-table-item">
           <div class="xy-table-item-label">x轴位置 ：</div>
           <div class="xy-table-item-content xy-table-item-price-per">
-            <el-input-number
+            <el-input-number v-model="form.x" clearable :precision="2" placeholder="请输入x轴位置" style="width: 300px"
-              v-model="form.x"
+              :controls="false"></el-input-number>
-              clearable
-              :precision="2"
-              placeholder="请输入x轴位置"
-              style="width: 300px"
-              :controls="false"
-            ></el-input-number>
           </div>
         </div>
       </template>
@@ -102,51 +62,47 @@
         <div class="xy-table-item">
           <div class="xy-table-item-label">y轴位置 ：</div>
           <div class="xy-table-item-content xy-table-item-price-per">
-            <el-input-number
+            <el-input-number v-model="form.y" :precision="2" clearable placeholder="请输入y轴位置" style="width: 300px"
-              v-model="form.y"
+              :controls="false"></el-input-number>
-              :precision="2"
-              clearable
-              placeholder="请输入y轴位置"
-              style="width: 300px"
-              :controls="false"
-            ></el-input-number>
           </div>
         </div>
       </template>
+      <template v-slot:video_image_id>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">视频封面图 ：</div>
+          <div class="xy-table-item-content">
+            <el-upload style="width: 300px" class="upload-demo" :action="action" :on-success="
+                (response, file, fileList) =>
+                  successHandle(response, file, fileList, 'video_image_id')
+              " :before-upload="uploadBefore" :file-list="video_image_id" :on-remove="
+                (file, fileList) => removeHande(file, fileList, 'video_image_id')
+              " :limit="1" list-type="picture-card">
+              <i slot="default" class="el-icon-plus"></i>
+              <div slot="tip" class="el-upload__tip">
+                只能上传jpg/png文件，且不超过500kb
+              </div>
+            </el-upload>
+          </div>
+        </div>
+      </template>
+
       <template v-slot:video_id>
         <div class="xy-table-item">
           <div class="xy-table-item-label">视频 ：</div>
           <div class="xy-table-item-content">
-            <el-upload
+            <el-upload style="width: 300px" ref="upload" multiple :on-success="
-              style="width: 300px"
-              ref="upload"
-              multiple
-              :on-success="
                 (response, file, fileList) =>
                   successHandle(response, file, fileList, 'video_id')
-              "
+              " :before-upload="uploadBefore" accept=".mp4,.avi,.wmv" :action="action" :file-list="video_id"
-              :before-upload="uploadBefore"
+              :auto-upload="false" :on-remove="
-              accept=".mp4,.avi,.wmv"
-              :action="action"
-              :file-list="video_id"
-              :auto-upload="false"
-              :on-remove="
                 (file, fileList) => removeHande(file, fileList, 'video_id')
-              "
+              ">
-            >
+              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
-              <el-button slot="trigger" size="small" type="primary"
+              <el-button style="margin-left: 10px" size="small" type="success"
-                >选取文件</el-button
+                @click="$refs['upload'].submit()">开始上传</el-button>
-              >
-              <el-button
-                style="margin-left: 10px"
-                size="small"
-                type="success"
-                @click="$refs['upload'].submit()"
-                >开始上传</el-button
-              >
               <div slot="tip" class="el-upload__tip">
                 支持文件格式：.mp4 .avi .wmv
-                <br />单个文件不能超过20M
+                <br />单个文件不能超过300M
               </div>
             </el-upload>
           </div>
@@ -165,190 +121,210 @@
 </template>
 
 <script>
-import { show, save } from "@/api/index";
+  import {
-import tinymce from "@/components/XyTinymce"
+    show,
-export default {
+    save
-  components: {
+  } from "@/api/index";
-    tinymce
+  import tinymce from "@/components/XyTinymce"
-  },
+  export default {
-  props: {},
+    components: {
-  data() {
+      tinymce
-    return {
+    },
-      isShow: false,
+    props: {},
-      id: "",
+    data() {
-      type: "",
+      return {
-      image_id: [],
+        isShow: false,
-      action: process.env.VUE_APP_UPLOAD_API,
+        id: "",
-      video_id: [],
+        type: "",
+        image_id: [],
+        video_image_id:[],
+        action: process.env.VUE_APP_UPLOAD_API,
+        video_id: [],
 
-      form: {
+        form: {
-        activity_list_id: 7,
+          activity_list_id: 7,
-        name: "",
+          name: "",
-        image_id: "",
+          image_id: "",
-        lat: "",
+          lat: "",
-        lng: "",
+          lng: "",
-        x: "",
+          x: "",
-        y: "",
+          y: "",
-        video_id: "",
+          video_id: "",
-        content: "",
+          video_image_id: "",
-      },
+          content: "",
-      rules: {
+        },
-        name: [
+        rules: {
-          {
+          name: [{
             required: true,
             message: "请填写名称",
-          },
+          }, ],
-        ],
+        },
-      },
+      };
-    };
-  },
-  methods: {
-    show() {
-      this.isShow = true;
-    },
-    hidden() {
-      this.isShow = false;
     },
-    init() {
+    methods: {
-      for (let key in this.form) {
+      show() {
-        if (this.form[key] instanceof Array) {
+        this.isShow = true;
-          this.form[key] = [];
+      },
+      hidden() {
+        this.isShow = false;
+      },
+      init() {
+        for (let key in this.form) {
+          if (this.form[key] instanceof Array) {
+            this.form[key] = [];
+          } else {
+            this.form[key] = "";
+          }
+        }
+        this.$refs["dialog"].clearValidate();
+      },
+      setId(id) {
+        if (typeof id == "number") {
+          this.id = id;
         } else {
-          this.form[key] = "";
+          console.error("error typeof id: " + typeof id);
         }
-      }
+      },
-      this.$refs["dialog"].clearValidate();
+      getId() {
-    },
+        return this.id;
-    setId(id) {
+      },
-      if (typeof id == "number") {
+      setType(type = "add") {
-        this.id = id;
+        let types = ["add", "editor"];
-      } else {
+        if (types.includes(type)) {
-        console.error("error typeof id: " + typeof id);
+          this.type = type;
-      }
+        } else {
-    },
+          console.warn("Unknown type: " + type);
-    getId() {
+        }
-      return this.id;
+      },
-    },
+      setForm(key = [], value = []) {
-    setType(type = "add") {
+        if (key instanceof Array) {
-      let types = ["add", "editor"];
+          key.forEach((key, index) => {
-      if (types.includes(type)) {
+            this.form[key] = value[index] ?? "";
-        this.type = type;
+          });
-      } else {
+        }
-        console.warn("Unknown type: " + type);
+        if (typeof key === "string") {
-      }
+          this.form[key] = value;
-    },
+        }
-    setForm(key = [], value = []) {
+        if (!key) {
-      if (key instanceof Array) {
+          this.init();
-        key.forEach((key, index) => {
+        }
-          this.form[key] = value[index] ?? "";
+      },
-        });
-      }
-      if (typeof key === "string") {
-        this.form[key] = value;
-      }
-      if (!key) {
-        this.init();
-      }
-    },
 
-    //上传
+      //上传
-    successHandle(response, file, fileList, key) {
+      successHandle(response, file, fileList, key) {
-      this[key] = fileList;
+        this[key] = fileList;
-    },
+      },
-    removeHande(file, fileList, key) {
+      removeHande(file, fileList, key) {
-      this[key] = fileList;
+        this[key] = fileList;
-    },
+      },
-    uploadBefore(file) {
+      uploadBefore(file) {
-      console.log(file);
+        console.log(file);
-      if (file.size / 1000 > 20 * 1024) {
+        if (file.size / 1000 > 300 * 1024) {
-        this.$message({
+          this.$message({
-          type: "warning",
+            type: "warning",
-          message: "上传图片大小超过20MB！",
+            message: "上传大小超过300MB！",
+          });
+          return false;
+        }
+      },
+
+      async getDetail() {
+        const res = await show({
+          id: this.id,
+          table_name: "map_points",
+          with_relations: ['video', 'image',"videoImage"]
         });
-        return false;
+        this.$integrateData(this.form, res);
-      }
+        this.image_id = res.image ? [{
-    },
+          url: res.image?.url,
+          name: res.image?.original_name,
+          response: res.image
+        }] : []
+        this.video_id = res.video ? [{
+          url: res.video?.url,
+          name: res.video?.original_name,
+          response: res.video
+        }] : []
 
-    async getDetail() {
-      const res = await show({ id: this.id, table_name: "map_points", with_relations: ['video','image'] });
-      this.$integrateData(this.form, res);
-      this.image_id = res.image ? [{
-        url: res.image?.url,
-        name: res.image?.original_name,
-        response: res.image
-      }] : []
-      this.video_id = res.video ? [{
-        url: res.video?.url,
-        name: res.video?.original_name,
-        response: res.video
-      }] : []
-    },
 
-    submit() {
+        this.video_image_id = res.video_image ? [{
-      if (this.type === "add") {
+          url: res.video_image?.url,
-        if (this.form.hasOwnProperty("id")) {
+          name: res.video_image?.original_name,
-          delete this.form.id;
+          response: res.video_image
+        }] : [];
+      },
+
+      submit() {
+        if (this.type === "add") {
+          if (this.form.hasOwnProperty("id")) {
+            delete this.form.id;
+          }
         }
-      }
+        if (this.type === "editor") {
-      if (this.type === "editor") {
+          Object.defineProperty(this.form, "id", {
-        Object.defineProperty(this.form, "id", {
+            value: this.id,
-          value: this.id,
+            enumerable: true,
-          enumerable: true,
+            configurable: true,
-          configurable: true,
+            writable: true,
-          writable: true,
-        });
-      }
-      this.form.image_id = this.image_id[0]?.response?.id
-      this.form.video_id = this.video_id[0]?.response?.id
-      save(Object.assign(this.form, { table_name: "map_points" })).then(
-        (res) => {
-          this.$message({
-            type: "success",
-            message:
-              this.type === "add" ? "新增点位场馆" : "编辑点位场馆" + "成功",
           });
-          this.isShow = false;
-          this.$emit("refresh");
         }
-      );
+        this.form.image_id = this.image_id[0]?.response?.id;
+        this.form.video_id = this.video_id[0]?.response?.id;
+        this.form.video_image_id = this.video_image_id[0]?.response?.id;
+        save(Object.assign(this.form, {
+          table_name: "map_points"
+        })).then(
+          (res) => {
+            this.$message({
+              type: "success",
+              message: this.type === "add" ? "新增点位场馆" : "编辑点位场馆" + "成功",
+            });
+            this.isShow = false;
+            this.$emit("refresh");
+          }
+        );
+      },
     },
-  },
+    watch: {
-  watch: {
+      isShow(val) {
-    isShow(val) {
+        if (val) {
-      if (val) {
+          if (this.type === "editor") {
-        if (this.type === "editor") {
+            this.getDetail();
-          this.getDetail();
+          }
+        } else {
+          this.id = "";
+          this.type = "";
+          this.image_id = [];
+          this.video_id = [];
+          this.video_image_id = [];
+          this.init();
+          this.$refs["dialog"].clearValidate();
+          delete this.form.id;
         }
-      } else {
+      },
-        this.id = "";
-        this.type = "";
-        this.image_id=[];
-        this.video_id=[];
-        this.init();
-        this.$refs["dialog"].clearValidate();
-        delete this.form.id;
-      }
     },
-  },
+  };
-};
 </script>
 
 <style scoped lang="scss">
-::v-deep .el-input__inner {
+  ::v-deep .el-input__inner {
-  text-align: left;
+    text-align: left;
-}
-.xy-table-item-price-per {
-  position: relative;
-  &::after {
-    position: absolute;
-    right: 10px;
-    top: 0;
-    content: "%";
   }
-  ::v-deep .el-input__clear {
+
+  .xy-table-item-price-per {
     position: relative;
-    right: 46px;
+
-    z-index: 2;
+    &::after {
+      position: absolute;
+      right: 10px;
+      top: 0;
+      content: "%";
+    }
+
+    ::v-deep .el-input__clear {
+      position: relative;
+      right: 46px;
+      z-index: 2;
+    }
   }
-}
 </style>

src/views/PartyshistoryRecoder/components/imgBox.vue

@@ -22,7 +22,7 @@
         @pageSizeChange="pageSizeChange"
         @pageIndexChange="pageChange"
         @delete="row => destroy({
-          table_name: 'map_point_contents',
+          table_name: 'map_point_images',
           id: row.id,
           activity_list_id: 7
         }).then(_ => getList())"