d

iview-admin/src/api/meta.js

@@ -8,7 +8,13 @@ export const refQuery = (url,q) => {
     data:q
   })
 }
-
+export const ossConfig = (url,q) => {
+  return axios.request({
+    url: url,
+    method: 'post',
+    data:q
+  })
+}
 
 // export const uploadImg = formData => {
 //   return axios.request({

iview-admin/src/view/components/tables/forms/childs/remoteselects.vue

@@ -11,7 +11,7 @@
     :multiple="isMulti"
     :placeholder="placeHolder"
   >
-    <Option v-for="item in datasource" :value="item.value" :key="item.value">{{ item.label }}</Option>
+    <Option v-for="item in transdatas" :value="item.value" :key="item.value">{{ item.label }}</Option>
   </Select>
 </template>
 <script>
@@ -31,6 +31,21 @@ export default {
       loading2:false
     };
   },
+    computed:{
+    transdatas(){
+       if(this.labelField && this.valueField){
+           let mrtn= this.datasource.map(item=>{
+              return {
+                value:item[this.valueField],
+                label:item[this.labelField]
+              }
+          })
+          return mrtn
+       }else{
+         return this.datasource
+       }
+    }
+  },
   watch: {
     value(nv, ov) {
       this.sels = nv;
@@ -41,7 +56,7 @@ export default {
        this.loading2=true
         setTimeout(()=>{
            this.initDataSource(q)
-        },200)
+        },500)
     },
     onchange(v) {
       console.log("=============", v);

iview-admin/src/view/components/tables/forms/childs/uploads.vue

+<template>
+  <div>
+    <div class="demo-upload-list" :key="item.name" v-for="item in uploadList">
+      <template v-if="item.status === 'finished'">
+        <img :src="item.url">
+        <div class="demo-upload-list-cover">
+          <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
+          <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
+        </div>
+      </template>
+      <template v-else>
+        <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
+      </template>
+    </div>
+    <div>
+      <Upload
+        ref="upload"
+        :show-upload-list="false"
+        :default-file-list="defaultList"
+        :on-success="handleSuccess"
+        :format="['jpg','jpeg','png']"
+        :max-size="2048"
+        :on-format-error="handleFormatError"
+        :on-exceeded-size="handleMaxSize"
+        :before-upload="handleBeforeUpload"
+        multiple
+        type="drag"
+        action="action"
+        style="display: inline-block;width:58px;"
+      >
+        >
+        <div style="width: 58px;height:58px;line-height: 58px;">
+          <Icon type="ios-camera" size="20"></Icon>
+        </div>
+      </Upload>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ossConfig } from "@/api/meta";
+export default {
+  name: "uploads",
+  components: {},
+  model: {
+    prop: "value",
+    event: "uploadsuccess"
+  },
+  data() {
+    return {
+      defaultList: [],
+      imgName: "",
+      visible: false,
+      uploadList: [],
+      result: this.value,
+      d: {},
+      action: ""
+    };
+  },
+  methods: {
+    handleView(name) {
+      this.imgName = name;
+      this.visible = true;
+    },
+    handleRemove(file) {
+      const fileList = this.$refs.upload.fileList;
+      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
+    },
+    handleSuccess(res, file, fileList) {
+      file.url =
+        "https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar";
+      file.name = "7eb99afb9d5f317c912f08b5212fd69a";
+    },
+    handleFormatError(file) {
+      this.$Notice.warning({
+        title: "The file format is incorrect",
+        desc:
+          "File format of " +
+          file.name +
+          " is incorrect, please select jpg or png."
+      });
+    },
+    handleMaxSize(file) {
+      this.$Notice.warning({
+        title: "Exceeding file size limit",
+        desc: "File  " + file.name + " is too large, no more than 2M."
+      });
+    },
+    handleBeforeUpload() {
+      const check = this.uploadList.length < 5;
+      if (!check) {
+        this.$Notice.warning({
+          title: "Up to five pictures can be uploaded."
+        });
+      }
+      return check;
+    }
+  },
+  created() {
+    let url = "/api/meta/oss/getOssConfig";
+    ossConfig().then(res => {
+      let rtn = res.data;
+      if (rtn.status == 0) {
+        let data = rtn.data;
+        this.d["key"] = "key";
+        this.d["Bucket"] = data.Bucket;
+        this.d["OSSAccessKeyId"] = data.OSSAccessKeyId;
+        this.d["Signature"] = data.Signature;
+        this.d["policy"] = data.policy;
+        this.d["success_action_status"] = data.success_action_status;
+        this.action = data.url;
+      } else {
+        console.log("cofig fetch failuer");
+      }
+    });
+  },
+  mounted() {
+    this.uploadList = this.$refs.upload.fileList;
+  },
+  watch: {
+    value: function(v) {
+      this.result = v;
+    }
+  }
+};
+</script>
+
+<style>
+.demo-upload-list {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  line-height: 60px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+  position: relative;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  margin-right: 4px;
+}
+
+.demo-upload-list img {
+  width: 100%;
+  height: 100%;
+}
+
+.demo-upload-list-cover {
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.demo-upload-list:hover .demo-upload-list-cover {
+  display: block;
+}
+
+.demo-upload-list-cover i {
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+</style>