wans

src/components/Upload/CUploadFile.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="clearfix">
+    <a-upload
+      :action="action"
+      :fileList="fileList"
+      multiple
+      @change="handleChange"
+      :customRequest="customRequest"
+      :remove="handleRemove"
+      :beforeUpload="beforeUpload">
+      <div class="file-btn" v-if="fileList.length < maxSize">
+        <a-icon type="paper-clip" />
+        <div class="ant-upload-text">点击上传</div>
+      </div>
+    </a-upload>
+  </div>
+</template>
+
+<script>
+import { uploadFile } from '@/api/upms/file'
+export default {
+  name: 'Upload',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  data () {
+    return {
+      previewVisible: false,
+      previewImage: '',
+      fileList: [],
+      isWatch: true,
+      action: process.env.VUE_APP_API_BASE_URL + '/upms/files/upload'
+    }
+  },
+  props: {
+    maxSize: {
+      type: Number,
+      default: 1
+    },
+    value: {
+      type: Array
+    }
+  },
+  watch: {
+    fileList: {
+      handler (newV, oldV) {
+        this.fileList = newV
+        this.$emit('change', newV)
+      },
+      deep: true,
+      immediate: true
+    },
+    value: {
+      deep: true,
+      immediate: true,
+      handler: function (newV) {
+        // 数据为空的三种情况
+        if (this.isWatch) {
+          this.isWatch = false
+          if (newV === null || newV === '' || newV === undefined) {
+            this.fileList = []
+            return
+          }
+          this.fileList = this.BaseTool.UPLOAD.transImg(newV)
+        }
+      }
+    }
+  },
+  methods: {
+    base (fileList) {
+      this.fileList = fileList
+    },
+    handleCancel () {
+      this.previewVisible = false
+    },
+    handlePreview (file) {
+      this.previewImage = file.url || file.thumbUrl
+      this.previewVisible = true
+    },
+    handleChange ({ fileList }) {
+      // this.fileList = fileList
+      // this.$emit('catchFile', fileList)
+    },
+    async customRequest (data) {
+      const formData = new FormData()
+      formData.append('file', data.file)
+      data.onProgress()
+      this.$loading.show()
+      uploadFile(formData).then(res => {
+        this.$loading.hide()
+        data.onSuccess()
+        this.fileList.push({
+          uid: '-1',
+          name: res.data.name,
+          status: 'done',
+          url: this.BaseTool.Constant.FILE_URL + res.data.url
+        })
+        this.$emit('catchFile', this.fileList)
+      })
+    },
+    handleRemove (file) {
+      const index = this.fileList.indexOf(file)
+      const newFileList = this.fileList.slice()
+      newFileList.splice(index, 1)
+      this.fileList = newFileList
+      this.$emit('catchFile', this.fileList)
+      return true
+    },
+    beforeUpload (file, fileList) {
+      const reg = /\.(doc|docx|html|pdf|txt|mht|xlsx|xls|jpg|png|zip|png|jpg|gif|jpeg|webp|zip|rar|7z|dxf)(\?.*)?$/
+      // if (this.fileType === 1) {
+      //   reg = /\.(jpg|png|gif)(\?.*)?$/
+      // }
+      return new Promise((resolve, reject) => {
+        if (reg.test(file.name)) {
+          resolve()
+        } else {
+          this.$message.error(`请上传正确的文件格式`)
+          reject(new Error('请上传正确的文件格式'))
+        }
+      })
+    }
+  }
+}
+</script>
+<style>
+  /* you can make up upload button and sample style by using stylesheets */
+  .ant-upload-select-picture-card i {
+    font-size: 32px;
+    color: #999;
+  }
+
+  .ant-upload-select-picture-card .ant-upload-text {
+    margin-top: 8px;
+    color: #666;
+  }
+  .ant-upload-btn {
+    margin-top: 20px;
+  }
+</style>
+<style lang="less" scoped>
+.file-btn {
+  border-radius: 3px;
+  background-color: rgba(242, 247, 255, 1);
+  color: rgba(8, 123, 232, 1);
+  border: 1px dashed rgba(8, 123, 232, 1);
+  display: flex;
+  width: 129px;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/components/Upload/CUploadImg.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="clearfix">
+    <a-upload
+      :action="action"
+      multiple
+      :fileList="fileList"
+      list-type="picture-card"
+      @preview="handlePreview"
+      @change="handleChange"
+      :customRequest="customRequest"
+      :remove="handleRemove"
+      :beforeUpload="beforeUpload">
+      <div v-if="fileList.length < maxSize">
+        <a-icon type="upload" style="margin-left: 15px" />
+        <div class="ant-upload-text">上传文件</div>
+      </div>
+    </a-upload>
+    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel" :width="1200">
+      <img style="width: 100%" :src="previewImage" />
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { uploadFile } from '@/api/upms/file'
+export default {
+  name: 'UploadImg',
+  data () {
+    return {
+      previewVisible: false,
+      previewImage: '',
+      fileList: [],
+      action: process.env.VUE_APP_API_BASE_URL + '/upms/files/upload'
+    }
+  },
+  props: {
+    maxSize: {
+      type: Number,
+      default: 1
+    },
+    value: {
+      type: Array
+    }
+  },
+  watch: {
+    fileList: {
+      handler (newV, oldV) {
+        this.fileList = newV
+        this.$emit('change', newV)
+      },
+      deep: true,
+      immediate: true
+    },
+    value: {
+      deep: true,
+      immediate: true,
+      handler: function (newV) {
+        // 数据为空的三种情况
+        if (this.isWatch) {
+          this.isWatch = false
+          if (newV === null || newV === '' || newV === undefined) {
+            this.fileList = []
+            return
+          }
+          this.fileList = this.BaseTool.UPLOAD.transImg(newV)
+        }
+      }
+    }
+  },
+  methods: {
+    handleCancel () {
+      this.previewVisible = false
+    },
+    handlePreview (file) {
+      this.previewImage = file.url || file.thumbUrl
+      this.previewVisible = true
+    },
+    handleChange ({ fileList }) {
+      // this.fileList = fileList
+      // this.$emit('catchFile', fileList)
+    },
+    async customRequest (data) {
+      const formData = new FormData()
+      formData.append('file', data.file)
+      data.onProgress()
+      this.$loading.show()
+      uploadFile(formData).then((res) => {
+        this.$loading.hide()
+        data.onSuccess()
+        const reg = new RegExp('[；，。！？;,]')
+        if (reg.test(res.data.fileName)) {
+          this.$message.error(`文件名包含非法字符`)
+        } else {
+          this.fileList.push({
+            uid: '-1',
+            name: res.data.name,
+            status: 'done',
+            url: this.BaseTool.Constant.FILE_URL + res.data.url
+          })
+        }
+        this.$emit('catchFile', this.fileList)
+      })
+    },
+    handleRemove (file) {
+      const index = this.fileList.indexOf(file)
+      const newFileList = this.fileList.slice()
+      newFileList.splice(index, 1)
+      this.fileList = newFileList
+      this.$emit('catchFile', this.fileList)
+      return true
+    },
+    beforeUpload (file, fileList) {
+      const reg = /\.(jpg|png|zip|png|jpg|gif|jpeg|webp)(\?.*)?$/
+      // if (this.fileType === 1) {
+      //   reg = /\.(jpg|png|gif)(\?.*)?$/
+      // }
+      return new Promise((resolve, reject) => {
+        if (reg.test(file.name.toLowerCase())) {
+          resolve()
+        } else {
+          this.$message.error(`请上传正确的图片格式`)
+          reject(new Error('请上传正确的图片格式'))
+        }
+      })
+    }
+  }
+}
+</script>
+<style>
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}
+.ant-upload-btn {
+  margin-top: 20px;
+}
+</style>

src/views/test/Test1.vue

@@ -50,6 +50,11 @@
               />
             </VueDraggable>
           </a-row>
+          <a-row>
+            <a-col :span="24">
+              <a-button type="primary" @click="handleSubmit">提交</a-button>
+            </a-col>
+          </a-row>
         </a-form>
       </a-card>
     </a-col>
@@ -101,6 +106,18 @@ export default {
     handleDelete (val) {
       this.list2 = this.list2.filter(v => v.id !== val.id)
     },
+    handleSubmit () {
+      const {
+        form: { validateFieldsAndScroll }
+      } = this
+      this.confirmLoading = true
+      validateFieldsAndScroll((errors, values) => {
+        console.log(values)
+        if (errors) {
+          this.confirmLoading = false
+        }
+      })
+    },
     handleSelect (item) {
       this.$refs.detail.base(item, this.config)
     }

src/views/test/modules/Component.vue

@@ -15,9 +15,10 @@
       </a-select>
       <!-- 日期时间 -->
       <a-date-picker style="width:100%" v-if="detail.type==='date'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" />
-      <!-- 单选框 -->
       <!-- 文件上传 -->
+      <UploadFile v-if="detail.type==='uploadFile'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" />
       <!-- 图片上传 -->
+      <UploadImg v-if="detail.type==='uploadImg'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" />
     </a-form-item>
     <!-- 分割线 -->
     <a-divider v-bind="detail.attrs" v-if="detail.type==='divider'">
@@ -29,8 +30,14 @@
 </template>
 
 <script>
+import UploadFile from '@/components/Upload/CUploadFile.vue'
+import UploadImg from '@/components/Upload/CUploadImg.vue'
 export default {
   name: 'MComponent',
+  components: {
+    UploadFile,
+    UploadImg
+  },
   props: {
     detail: {
       type: Object,

src/views/test/modules/Detail.vue

@@ -85,6 +85,12 @@
           <a-input placeholder="YYYY-MM-DD HH:mm:ss" v-model="model.attrs.format" ></a-input>
         </a-form-item>
       </template>
+      <!-- 上传 -->
+      <template v-if="model.type === 'uploadFile'||model.type === 'uploadImg'">
+        <a-form-item label="最大上传数">
+          <a-input-number v-model="model.attrs.maxSize" />
+        </a-form-item>
+      </template>
       <a-popconfirm
         title="确定删除该组件?"
         ok-text="确定"
@@ -110,9 +116,6 @@
           </a-radio>
         </a-radio-group>
       </a-form-item>
-      <a-form-item label="组件描述">
-        <a-input v-model="model.desc" />
-      </a-form-item>
     </a-form>
   </a-card>
 </template>

src/views/test/modules/components.js

@@ -87,7 +87,8 @@ export const componentList = [
     required: true,
     label: '文件上传',
     attrs: {
-      placeholder: '请输入'
+      placeholder: '请输入',
+      maxSize: 5
     }
   },
   {
@@ -99,7 +100,8 @@ export const componentList = [
     required: true,
     label: '图片上传',
     attrs: {
-      placeholder: '请输入'
+      placeholder: '请输入',
+      maxSize: 5
     }
   },
   {