style:高拍仪

@@ -134,7 +134,25 @@ export function getUrlParam (paraName) {
     return '';
   }
 }
-
+/**
+ * @description: 身份证读卡器组件
+ * @author: renchao
+ */
 export function getIdCardInfo () {
   return axios.post(Vue.prototype.BASE_API.IDCARDURL)
+}
+/**
+ * @description: 高拍仪组件
+ * @author: renchao
+ */
+export function getAltimeterInfo () {
+  let data = {
+    "filepath": "base64",
+    "rotate": "0",
+    "cutpage": "0",
+    "camidx": "0",
+    "ColorMode": "0",
+    "quality": "3"
+  }
+  return axios.post("http://127.0.0.1:38088/video=grabimage", JSON.stringify(data))
 }
\ No newline at end of file

 <!--
  * @Description: 
  * @Autor: renchao
- * @LastEditTime: 2023-06-14 11:10:26
+ * @LastEditTime: 2023-06-16 11:12:13
 -->
 <template>
   <div class="rlPopup">
@@ -46,7 +46,7 @@
   </div>
 </template>
 <script>
-  import axios from 'axios'
+  import { getAltimeterInfo } from '@/utils/operation.js'
   import PhotoZoom from '@/components/PhotoZoom'
   import { uploadSjClmx, deleteClmx } from "@/api/clxx.js";
   import publicPicture from '@/components/publicPicture/index.vue'
@@ -149,20 +149,11 @@
           const file = new File([blob], options);
           return file;
         }
-
-        let data = {
-          "filepath": "base64",
-          "rotate": "0",
-          "cutpage": "0",
-          "camidx": "0",
-          "ColorMode": "0",
-          "quality": "3"
-        }
-        axios.post("http://127.0.0.1:38088/video=grabimage", JSON.stringify(data)).then((res) => {
+        getAltimeterInfo().then(res => {
           let blob = dataURLtoBlob('data:image/png;base64,' + res.data.photoBase64);
           let file = blobToFile(blob);
           var formData = new FormData();
-          formData.append('file', file.raw)
+          formData.append('file', file)
           formData.append("bsmSj", this.previewImg.bsmSj);
           formData.append("bsmSlsq", this.previewImg.bsmSlsq);
           uploadSjClmx(formData).then((res) => {

@@ -24,7 +24,7 @@
           </div>
           <el-button type="primary" native-type="submit" style="width:100%" @click="handleAdd()" v-if="!this.$route.query.viewtype">新增</el-button>
         </div>
-        <image-preview ref='imageRef' :previewImg="previewImg" @updateList="updateList" @nextPriview="nextPriview"
+        <image-preview ref='imageRef' v-if="tableData.length>0" :previewImg="previewImg" @updateList="updateList" @nextPriview="nextPriview"
           @prevPriview="prevPriview" />
       </div>
     </div>
@@ -39,7 +39,7 @@
   import { InitClml, saveClml, deleteSjClml, moveClml } from "@/api/clxx.js";
   import { popupDialog } from "@/utils/popup.js";
   export default {
-    components: { clxxAddDialog, imagePreview},
+    components: { clxxAddDialog, imagePreview },
     data () {
       return {
         isDialog: false,

@@ -5,13 +5,11 @@
       <el-tab-pane
         :disabled="isshow"
         label="审批意见"
-        name="spyj"
-      ></el-tab-pane>
+        name="spyj"></el-tab-pane>
       <el-tab-pane
         :disabled="isshow"
         label="材料信息"
-        name="clxx"
-      ></el-tab-pane>
+        name="clxx"></el-tab-pane>
     </el-tabs>
     <div v-if="activeName == 'slxx'">
       <div class="from-clues-header">
@@ -24,8 +22,7 @@
                     v-for="item in qsztList"
                     :key="item.value"
                     :label="item.label"
-                    :value="item.value"
-                  >
+                    :value="item.value">
                   </el-option>
                 </el-select>
               </el-form-item>
@@ -34,17 +31,16 @@
               <el-form-item
                 :prop="item.prop"
                 :label="item.label"
-                label-width="140px"
-              >
+                label-width="140px">
                 <el-input v-model="form[item.prop]"></el-input>
               </el-form-item>
             </el-col>
           </el-row>
         </el-form>
-         <div class="btn">
-            <el-button type="primary" @click="slxxsubmitForm">保存</el-button>
-            <el-button @click="closeDialog">取消</el-button>
-          </div>
+        <div class="btn">
+          <el-button type="primary" @click="slxxsubmitForm">保存</el-button>
+          <el-button @click="closeDialog">取消</el-button>
+        </div>
       </div>
     </div>
     <div v-if="activeName == 'spyj'">
@@ -55,8 +51,7 @@
             :model="ruleForm"
             :rules="rules"
             ref="ruleForm"
-            label-width="120px"
-          >
+            label-width="120px">
             <div class="spyj_form">
               <div class="item_left">初审意见</div>
               <div class="item_right">
@@ -65,15 +60,13 @@
                     <el-form-item
                       label-width="0"
                       class="opinion_item"
-                      prop="shyj"
-                    >
+                      prop="shyj">
                       <el-input
                         type="textarea"
                         :rows="4"
                         class="opinion"
                         placeholder="请输入审批意见"
-                        v-model="ruleForm.shyj"
-                      ></el-input>
+                        v-model="ruleForm.shyj"></el-input>
                     </el-form-item>
                   </el-col>
                 </el-row>
@@ -82,8 +75,7 @@
                     <el-form-item
                       prop="shryxm"
                       label="审查人"
-                      label-width="90px"
-                    >
+                      label-width="90px">
                       <el-input v-model="ruleForm.shr"></el-input>
                     </el-form-item>
                   </el-col>
@@ -91,8 +83,7 @@
                     <el-form-item
                       label="审核时间"
                       prop="shjssj"
-                      label-width="90px"
-                    >
+                      label-width="90px">
                       <el-input v-model="ruleForm.shsj"></el-input>
                     </el-form-item>
                   </el-col>
@@ -104,8 +95,7 @@
             :model="ruleForm"
             :rules="rules"
             ref="ruleForm"
-            label-width="120px"
-          >
+            label-width="120px">
             <div class="spyj_form">
               <div class="item_left">复审意见</div>
               <div class="item_right">
@@ -114,15 +104,13 @@
                     <el-form-item
                       label-width="0"
                       class="opinion_item"
-                      prop="shyj"
-                    >
+                      prop="shyj">
                       <el-input
                         type="textarea"
                         :rows="4"
                         class="opinion"
                         placeholder="请输入审批意见"
-                        v-model="ruleForm.shyj"
-                      ></el-input>
+                        v-model="ruleForm.shyj"></el-input>
                     </el-form-item>
                   </el-col>
                 </el-row>
@@ -131,8 +119,7 @@
                     <el-form-item
                       prop="shryxm"
                       label="审查人"
-                      label-width="90px"
-                    >
+                      label-width="90px">
                       <el-input v-model="ruleForm.shr"></el-input>
                     </el-form-item>
                   </el-col>
@@ -140,8 +127,7 @@
                     <el-form-item
                       label="审核时间"
                       prop="shjssj"
-                      label-width="90px"
-                    >
+                      label-width="90px">
                       <el-input v-model="ruleForm.shsj"></el-input>
                     </el-form-item>
                   </el-col>
@@ -153,8 +139,7 @@
             :model="ruleForm"
             :rules="rules"
             ref="ruleForm"
-            label-width="120px"
-          >
+            label-width="120px">
             <div class="spyj_form">
               <div class="item_left">核定意见</div>
               <div class="item_right">
@@ -163,15 +148,13 @@
                     <el-form-item
                       label-width="0"
                       class="opinion_item"
-                      prop="shyj"
-                    >
+                      prop="shyj">
                       <el-input
                         type="textarea"
                         :rows="4"
                         class="opinion"
                         placeholder="请输入审批意见"
-                        v-model="ruleForm.shyj"
-                      ></el-input>
+                        v-model="ruleForm.shyj"></el-input>
                     </el-form-item>
                   </el-col>
                 </el-row>
@@ -180,8 +163,7 @@
                     <el-form-item
                       prop="shryxm"
                       label="审查人"
-                      label-width="90px"
-                    >
+                      label-width="90px">
                       <el-input v-model="ruleForm.shr"></el-input>
                     </el-form-item>
                   </el-col>
@@ -189,8 +171,7 @@
                     <el-form-item
                       label="审核时间"
                       prop="shjssj"
-                      label-width="90px"
-                    >
+                      label-width="90px">
                       <el-input v-model="ruleForm.shsj"></el-input>
                     </el-form-item>
                   </el-col>
@@ -199,197 +180,197 @@
             </div>
           </el-form>
 
-         </div>
-            <div class="btn">
-            <el-button type="primary" @click="spyjsubmitForm">保存</el-button>
-            <el-button @click="closeDialog">取消</el-button>
-           </div>
+        </div>
+        <div class="btn">
+          <el-button type="primary" @click="spyjsubmitForm">保存</el-button>
+          <el-button @click="closeDialog">取消</el-button>
+        </div>
       </div>
     </div>
     <div v-if="activeName == 'clxx'">
       <div class="from-clues-header">
-           <div class="clxx">
-              <div class="right">
-                <!-- 材料预览 -->
-                <div class="clyl-box">
-                  <div class="menu-tree">
-                    <el-button type="primary" native-type="submit" @click="viewDetail" style="width:100%;margin-top:10px;">查看明细</el-button>
-                    <div class="item">
-                      材料目录({{tableData.length}})
-                      <div style="margin-top:10px">
-                        <div style="text-align: center;line-height:20px;color:black;font-size:14px" v-if="tableData.length == 0">暂无数据</div>
-                        <div v-for="(item,index) in tableData" :key="item.bsmSj"
-                          :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" @click="treeClick(item,index)">
-                          <span v-if="item.isrequired==1" class="required">必选</span>
-                          {{ item.sjmc }}
-                          <span class="cl_number">({{item.children ? item.children.length : 0}})</span>
-                        </div>
-                      </div>
+        <div class="clxx">
+          <div class="right">
+            <!-- 材料预览 -->
+            <div class="clyl-box">
+              <div class="menu-tree">
+                <el-button type="primary" native-type="submit" @click="viewDetail" style="width:100%;margin-top:10px;">查看明细</el-button>
+                <div class="item">
+                  材料目录({{tableData.length}})
+                  <div style="margin-top:10px">
+                    <div style="text-align: center;line-height:20px;color:black;font-size:14px" v-if="tableData.length == 0">暂无数据</div>
+                    <div v-for="(item,index) in tableData" :key="item.bsmSj"
+                      :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" @click="treeClick(item,index)">
+                      <span v-if="item.isrequired==1" class="required">必选</span>
+                      {{ item.sjmc }}
+                      <span class="cl_number">({{item.children ? item.children.length : 0}})</span>
                     </div>
-                    <el-button type="primary" native-type="submit" style="width:100%" @click="handleAdd()">新增</el-button>
                   </div>
-                  <image-preview ref='imageRef' :previewImg="previewImg" @updateList="updateList" @nextPriview="nextPriview"
-                    @prevPriview="prevPriview" />
                 </div>
+                <el-button type="primary" native-type="submit" style="width:100%" @click="handleAdd()">新增</el-button>
               </div>
-             <clxxAddDialog v-model="isDialog" />
-           </div>
-          <div class="btn">
-            <el-button type="primary" @click="clxxsubmitForm">保存</el-button>
-            <el-button @click="closeDialog">取消</el-button>
-         </div>
+              <image-preview ref='imageRef' v-if="tableData.length>0" :previewImg="previewImg" @updateList="updateList" @nextPriview="nextPriview"
+                @prevPriview="prevPriview" />
+            </div>
+          </div>
+          <clxxAddDialog v-model="isDialog" />
+        </div>
+        <div class="btn">
+          <el-button type="primary" @click="clxxsubmitForm">保存</el-button>
+          <el-button @click="closeDialog">取消</el-button>
+        </div>
 
       </div>
     </div>
   </div>
 </template>
 <script>
- import { mapGetters } from "vuex";
+  import { mapGetters } from "vuex";
   import clxxAddDialog from "./tabsconcent/clxxAddDialog.vue";
-   import imagePreview from '@/views/components/imagePreview.vue'
+  import imagePreview from '@/views/components/imagePreview.vue'
   import { InitClml, saveClml, deleteSjClml, moveClml } from "@/api/clxx.js";
-export default {
- components: { clxxAddDialog, imagePreview },
-  props: {
-    formData: {
-      type: Object,
-      default: () => {},
+  export default {
+    components: { clxxAddDialog, imagePreview },
+    props: {
+      formData: {
+        type: Object,
+        default: () => { },
+      },
     },
-  },
-  data() {
-    return {
-      activeName: "slxx",
-      form: {},
-      datalist: [],
-      qsztList: [
-        {
-          value: "1",
-          label: "现势",
+    data () {
+      return {
+        activeName: "slxx",
+        form: {},
+        datalist: [],
+        qsztList: [
+          {
+            value: "1",
+            label: "现势",
+          },
+          {
+            value: "2",
+            label: "历史",
+          },
+        ],
+        label: "",
+        isshow: true,
+
+        // 审批
+        bsmSlsq: "",
+        //刷新值
+        bestepid: "",
+        ruleForm: {},
+        rules: {
+          shyj: [{ required: true, message: "请输入审批意见", trigger: "blur" }],
         },
-        {
-          value: "2",
-          label: "历史",
-        },
-      ],
-      label: "",
-      isshow: true,
-
-      // 审批
-      bsmSlsq: "",
-      //刷新值
-      bestepid: "",
-      ruleForm: {},
-      rules: {
-        shyj: [{ required: true, message: "请输入审批意见", trigger: "blur" }],
-      },
 
-      // 材料
-      isDialog: false,
-      iclass: "",
-      tableData: [],
-      // 材料目录选中
-      treeCheckIndex: 0,
-      treeCheckId: "",
-      key: 0,
-      tableDatas: [],
-      previewImg: {
-        // 收件标识码
-        bsmSj: "",
-        bsmSlsq: this.$parent.bsmSlsq,
-        index: 0,
-        selectedIndex: 0,
-        imgList: [],
-      },
-    };
-  },
+        // 材料
+        isDialog: false,
+        iclass: "",
+        tableData: [],
+        // 材料目录选中
+        treeCheckIndex: 0,
+        treeCheckId: "",
+        key: 0,
+        tableDatas: [],
+        previewImg: {
+          // 收件标识码
+          bsmSj: "",
+          bsmSlsq: this.$parent.bsmSlsq,
+          index: 0,
+          selectedIndex: 0,
+          imgList: [],
+        },
+      };
+    },
     computed: {
       ...mapGetters(["dictData"])
     },
-      created () {
+    created () {
       this.clmlInitList(1)
     },
-  mounted() {
-    if (this.formData.data) {
-      this.$nextTick(() => {
-        this.form = Object.assign({}, this.formData.data);
-        // this.datalist = Object.assign([], this.formData.datalist)
-        this.form.qszt =
-          this.form.qszt == "0"
-            ? "临时"
-            : this.form.qszt == "1"
-            ? "现势"
-            : "历史";
-      });
-    }
+    mounted () {
+      if (this.formData.data) {
+        this.$nextTick(() => {
+          this.form = Object.assign({}, this.formData.data);
+          // this.datalist = Object.assign([], this.formData.datalist)
+          this.form.qszt =
+            this.form.qszt == "0"
+              ? "临时"
+              : this.form.qszt == "1"
+                ? "现势"
+                : "历史";
+        });
+      }
 
-    // this.datalist = this.formData.datalist
-    this.datalist = JSON.parse(JSON.stringify(this.formData.datalist));
-    this.datalist.shift();
-    this.datalist.shift();
-  },
-
-  methods: {
-    //  受理信息保存
-    slxxsubmitForm() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          // addUserCommonOpinion({ commonOpinion: this.form.commonOpinion }).then(res => {
-          //   if (res.code == 200) {
-          //     this.$message.success("新增成功")
-          //     this.closeaddDiglog();
-          //     this.getList()
-          //   } else {
-          //     this.$message.error(res.message)
-          //   }
-          // })
-        } else {
-          return false;
-        }
-      });
-      this.isshow = false;
-    },
-    // 审批意见保存
-    spyjsubmitForm() {
-      console.log("this.ruleForm",this.ruleForm);
-      //     this.ruleForm.bsmSlsq = this.bsmSlsq
-      // this.ruleForm.bestepid = this.bestepid
-      // saveSpyjBySlsq(this.ruleForm).then(res => {
-      //   if (res.code === 200) {
-      //     this.$message.success("保存成功")
-      //     this.refresh += 1
-      //   } else {
-      //     this.$message.error(res.message)
-      //   }
-      // })
+      // this.datalist = this.formData.datalist
+      this.datalist = JSON.parse(JSON.stringify(this.formData.datalist));
+      this.datalist.shift();
+      this.datalist.shift();
     },
 
-    // 材料信息保存
-    clxxsubmitForm() {},
-    closeDialog() {
-      this.$alert("取消后填写内容将被清空", "提示", {
-        confirmButtonText: "确定",
-        callback: (action) => {
-          this.$message({
-            type: "info",
-            message: "已取消",
-          });
-          this.$popupCacel();
-          this.$refs["form"].resetFields();
-        },
-      });
+    methods: {
+      //  受理信息保存
+      slxxsubmitForm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            // addUserCommonOpinion({ commonOpinion: this.form.commonOpinion }).then(res => {
+            //   if (res.code == 200) {
+            //     this.$message.success("新增成功")
+            //     this.closeaddDiglog();
+            //     this.getList()
+            //   } else {
+            //     this.$message.error(res.message)
+            //   }
+            // })
+          } else {
+            return false;
+          }
+        });
+        this.isshow = false;
+      },
+      // 审批意见保存
+      spyjsubmitForm () {
+        console.log("this.ruleForm", this.ruleForm);
+        //     this.ruleForm.bsmSlsq = this.bsmSlsq
+        // this.ruleForm.bestepid = this.bestepid
+        // saveSpyjBySlsq(this.ruleForm).then(res => {
+        //   if (res.code === 200) {
+        //     this.$message.success("保存成功")
+        //     this.refresh += 1
+        //   } else {
+        //     this.$message.error(res.message)
+        //   }
+        // })
+      },
 
-      // this.resetTableFields();
-    },
-    handleTabClick() {},
+      // 材料信息保存
+      clxxsubmitForm () { },
+      closeDialog () {
+        this.$alert("取消后填写内容将被清空", "提示", {
+          confirmButtonText: "确定",
+          callback: (action) => {
+            this.$message({
+              type: "info",
+              message: "已取消",
+            });
+            this.$popupCacel();
+            this.$refs["form"].resetFields();
+          },
+        });
 
-    //使用常用意见
-    useOpinion(opinion) {
-      this.ruleForm.shyj = opinion;
-    },
+        // this.resetTableFields();
+      },
+      handleTabClick () { },
+
+      //使用常用意见
+      useOpinion (opinion) {
+        this.ruleForm.shyj = opinion;
+      },
 
 
-    // 材料上传
-     // 自动预览
+      // 材料上传
+      // 自动预览
       nextPriview () {
         if (this.treeCheckIndex < this.tableData.length) {
           this.treeCheckIndex++
@@ -468,7 +449,7 @@ export default {
       },
       // 添加材料目录
       handleAdd () {
-      console.log("新增");
+        console.log("新增");
         this.isDialog = true;
       },
       // 新增弹窗保存
@@ -532,123 +513,123 @@ export default {
           this.tableData = tableData;
         })
       },
-  },
-};
+    },
+  };
 </script>
 <style scoped lang="scss">
-@import "~@/styles/mixin.scss";
-@import "~@/styles/public.scss";
-
-.from-clues-header {
-  @include flex;
-  flex-direction: column;
-  overflow-y: hidden;
-  padding: 0 2px;
-
-  .btn {
-    margin-top: 40px;
-    margin-bottom: 20px;
-    text-align: center;
-  }
-}
-
-// 审批意见样式
-
-.spyj {
-  .box {
-    overflow-x: auto;
-    width: 100%;
-    height: 95%;
-    background: #fff;
-    text-align: center;
-    padding: 4px;
-    overflow-y: scroll;
-    padding-top: 20px;
-    padding: 20px 40px;
-    /deep/.el-input__inner {
-      width: 200px;
-      border:none;
+  @import "~@/styles/mixin.scss";
+  @import "~@/styles/public.scss";
+
+  .from-clues-header {
+    @include flex;
+    flex-direction: column;
+    overflow-y: hidden;
+    padding: 0 2px;
+
+    .btn {
+      margin-top: 40px;
+      margin-bottom: 20px;
+      text-align: center;
     }
   }
-  .spyj_title {
-    line-height: 68px;
-    border: 1px solid $borderColor;
-    text-align: center;
-    font-size: 22px;
-    font-weight: 400;
-    background-color: #eceef2;
-    display: block;
-    border-bottom: none;
-  }
 
-  /deep/.el-form-item {
-    margin-bottom: 0;
-  }
+  // 审批意见样式
 
-  .bottom10 {
-    margin-bottom: 15px;
-  }
+  .spyj {
+    .box {
+      overflow-x: auto;
+      width: 100%;
+      height: 95%;
+      background: #fff;
+      text-align: center;
+      padding: 4px;
+      overflow-y: scroll;
+      padding-top: 20px;
+      padding: 20px 40px;
+      /deep/.el-input__inner {
+        width: 200px;
+        border: none;
+      }
+    }
+    .spyj_title {
+      line-height: 68px;
+      border: 1px solid $borderColor;
+      text-align: center;
+      font-size: 22px;
+      font-weight: 400;
+      background-color: #eceef2;
+      display: block;
+      border-bottom: none;
+    }
 
-  .spyj_form {
-    display: flex;
-    border: 1px solid $borderColor;
+    /deep/.el-form-item {
+      margin-bottom: 0;
+    }
 
-    .item_left {
-      width: 150px;
-      background-color: #f8f8fa;
-      color: #606266;
-      display: flex;
-      font-size: 14px;
-      text-indent: 80px;
-      align-items: center;
-      border-right: 1px solid $borderColor;
+    .bottom10 {
+      margin-bottom: 15px;
     }
 
-    .item_right {
-      flex: 1;
-      width: 100%;
+    .spyj_form {
+      display: flex;
+      border: 1px solid $borderColor;
 
-      /deep/.el-form-item__label {
+      .item_left {
+        width: 150px;
         background-color: #f8f8fa;
+        color: #606266;
+        display: flex;
+        font-size: 14px;
+        text-indent: 80px;
+        align-items: center;
+        border-right: 1px solid $borderColor;
       }
-      /deep/.el-form-item__content {
-        display: block;
-        text-align: left;
-        text-indent: 10px;
-      }
-      .opinion_item {
-        /deep/.el-form-item__error {
-          margin-top: -16px !important;
-          left: 3px;
+
+      .item_right {
+        flex: 1;
+        width: 100%;
+
+        /deep/.el-form-item__label {
+          background-color: #f8f8fa;
         }
+        /deep/.el-form-item__content {
+          display: block;
+          text-align: left;
+          text-indent: 10px;
+        }
+        .opinion_item {
+          /deep/.el-form-item__error {
+            margin-top: -16px !important;
+            left: 3px;
+          }
 
-        border-bottom: 1px solid $borderColor;
-      }
+          border-bottom: 1px solid $borderColor;
+        }
 
-      .opinion {
-        position: relative;
-        font-size: 14px;
+        .opinion {
+          position: relative;
+          font-size: 14px;
 
-        /deep/.el-textarea__inner {
-          border: none;
+          /deep/.el-textarea__inner {
+            border: none;
+          }
         }
-      }
 
-      .opinion_btn {
-        position: absolute;
-        right: 15px;
-        bottom: 10px;
+        .opinion_btn {
+          position: absolute;
+          right: 15px;
+          bottom: 10px;
+        }
       }
     }
-  }
 
-  .submit_button {
-    text-align: center;
-    margin: 15px 0;
+    .submit_button {
+      text-align: center;
+      margin: 15px 0;
+    }
   }
-}
 
-// 材料信息样式
+  // 材料信息样式
   .active {
     background: $light-blue !important;
     color: #fff;

 <!--
  * @Description: 
  * @Autor: renchao
- * @LastEditTime: 2023-05-17 10:40:46
+ * @LastEditTime: 2023-06-16 11:12:40
 -->
 <template>
   <div class="clxx">
@@ -33,7 +33,7 @@
             </div>
           </div>
         </div>
-        <image-preview ref='imageRef' :previewImg="previewImg" @updateList="updateList" @nextPriview="nextPriview"
+        <image-preview ref='imageRef' v-if="tableData.length>0" :previewImg="previewImg" @updateList="updateList" @nextPriview="nextPriview"
           @prevPriview="prevPriview" />
       </div>
     </div>