1

src/components/tradePavilion/plugin/uploadform.vue

+<style>
+  .diy-component-edit .goods-add {
+    width: 50px;
+    height: 50px;
+    position: relative;
+    margin-right: 15px;
+    margin-bottom: 15px;
+  }
+
+  .diy-component-edit .goods-add .el-button {
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+    padding: 0;
+  }
+
+</style>
+<template>
+  <div :class="{'active':searchData.isCked}">
+    <div class="diy-component-options" v-if="searchData.isCked">
+      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
+      <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
+      <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
+        style="right: -25px; top: 0;"></el-button>
+      <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
+        style="right: -25px; top: 30px;"></el-button>
+    </div>
+    <div class="diy-component-preview">
+      <div class="diy-search" style="min-height:91px;">
+        <el-form label-width="90px">
+          <el-form-item :label="searchData.CompData.Name" style="margin-bottom:0">
+            <div>
+              <template v-for="(item,index) in searchData.CompData.FileList">
+                <template v-if="item">
+                  <img :key="index" :src="item" style="width:80px;margin-right:20px;" alt="">
+                </template>
+                <template v-else>
+                  <img :key="index" src="../../../assets/img/default.png" style="width:80px;margin-right:20px;" alt="">
+                </template>
+              </template>
+              <div class="tradeRemark" style="margin-top:0;">{{searchData.CompData.Remark}}</div>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="diy-component-edit" v-if="searchData.isCked">
+      <el-form label-width="100px">
+        <el-form-item label="名称" required>
+          <el-input v-model="searchData.CompData.Name" size="small"></el-input>
+        </el-form-item>
+        <el-form-item label="上传文件数量">
+          <el-input v-model="searchData.CompData.FileCount"
+            @keyup.native="checkInteger(searchData.CompData,'FileCount')" size="small"></el-input>
+        </el-form-item>
+        <el-form-item label="选择文件" v-if="searchData.CompData.FileCount>0">
+          <div style="display:flex;flex-wrap:wrap;">
+            <div class="goods-add" style="width:50px;height:50px;" v-for="(item,index) in searchData.CompData.FileList"
+              :key="index" :style="{ backgroundImage: 'url(' + item + ')' }">
+              <el-button size="small" icon="el-icon-plus" @click="ckedIndex=index,choicImg=true"></el-button>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="文件类型">
+          <el-select v-model="searchData.CompData.FileType" size="small" placeholder="请选择">
+            <el-option v-for="item in FileTypeList" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="上传文件大小">
+          <el-input v-model="searchData.CompData.FileSizeLimit"
+            @keyup.native="checkInteger(searchData.CompData,'FileSizeLimit')" size="small"></el-input>
+        </el-form-item>
+        <el-form-item label="提示文字">
+          <el-input type="textarea" v-model="searchData.CompData.Remark" size="small"></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 选择图片文件 -->
+    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
+      <ChooseImg @SelectId="SelectId"></ChooseImg>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import ChooseImg from "@/components/global/ChooseImg.vue";
+  export default {
+    props: ["searchData", "index", "dataLeng"],
+    components: {
+      ChooseImg
+    },
+    data() {
+      return {
+        choicImg: false,
+        ckedIndex: -1,
+        FileTypeList: [
+        // {
+        //   label: 'Excel',
+        //   value: '.xls,.xlsx'
+        // },{
+        //   label: 'ppt',
+        //   value: '.ppt,pptx'
+        // },{
+        //   label: 'word',
+        //   value: '.doc,.docx'
+        // },
+        {
+            label:'pdf',
+            value: '.pdf'
+        }]
+      };
+    },
+    created() {},
+    watch: {
+      'searchData.CompData.FileCount'(val, oldVal) {
+        var newSize = 0;
+        if (val != "") {
+          newSize = parseInt(val);
+        }
+        var oldSize = 0;
+        if (oldVal != "") {
+          oldSize = parseInt(oldVal);
+        }
+        if (newSize > 0 && oldSize == 0) {
+          for (var i = 0; i < newSize; i++) {
+            this.searchData.CompData.FileList.push("");
+          }
+        }
+        //清空
+        else if (oldSize > 0 && newSize == 0) {
+
+          this.searchData.CompData.FileList = [];
+        } else if (oldSize > 0 && newSize > 0 && newSize > oldSize) {
+          for (var i = oldSize; i < newSize; i++) {
+            this.searchData.CompData.FileList.push("");
+          }
+        } else if (oldSize > 0 && newSize > 0 && newSize < oldSize) {
+          var tempArray = JSON.parse(JSON.stringify(this.searchData.CompData.FileList));
+          this.searchData.CompData.FileList = [];
+          for (var i = 0; i < newSize; i++) {
+            this.searchData.CompData.FileList.push(tempArray[i]);
+          }
+        }
+      }
+    },
+    methods: {
+      //选择图片
+      SelectId(msg) {
+        this.searchData.CompData.FileList[this.ckedIndex] = msg.url;
+        this.choicImg = false;
+      },
+      //向父组件传值 并调用排序
+      resetSord(IsUp) {
+        this.$emit('getSord', this.index, IsUp);
+      },
+      //点击触发父组件删除
+      delPlugin() {
+        this.$emit('comDelPlugin', this.index);
+      }
+    },
+    mounted() {}
+  };
+
+</script>