leisure-core 0.6.85 → 0.6.86

package/index.js

@@ -16,10 +16,10 @@ import LeMedia from "./le-media/index.js";
 import LeMediaUpload from "./le-media-upload/index.js";
 import LeMediaList from "./le-media-list/index.js";
 
-import LeButtonUpload from "./le-button-upload/index.js";
-import LeButtonSelectMedia from "./le-button-select-media/index.js";
+// import LeButtonUpload from "./le-button-upload/index.js";
+// import LeButtonSelectMedia from "./le-button-select-media/index.js";
 import LeImage from "./le-image/index.js";
-import LeImageContainer from "./le-image-container/index.js";
+// import LeImageContainer from "./le-image-container/index.js";
 
 import LeUpload from "./le-upload/index.js";
 
@@ -60,9 +60,9 @@ const components = [
   LeMediaUpload,
   LeMediaList,
 
-  LeButtonUpload,
-  LeButtonSelectMedia,
-  LeImageContainer,
+  // LeButtonUpload,
+  // LeButtonSelectMedia,
+  // LeImageContainer,
   LeImage,
 
   LeUpload,
@@ -173,9 +173,9 @@ export default {
   LeMediaUpload,
   LeMediaList,
 
-  LeButtonUpload,
-  LeButtonSelectMedia,
-  LeImageContainer,
+  // LeButtonUpload,
+  // LeButtonSelectMedia,
+  // LeImageContainer,
   LeImage,
   LeUpload,
   LeHelp,

package/le-media/src/main.vue

@@ -79,16 +79,41 @@
         v-if="uploadMediaShow"
         @cancel="cancelUploadMedia"
         :mediaObj="mediaObj"
+        :systemMaterialCreateApi="systemMaterialCreateApi"
+        :systemMaterialEditApi="systemMaterialEditApi"
+        :uploadFileApi="uploadFileApi"
       ></le-media-upload>
     </el-dialog>
   </div>
 </template>
 <script>
-import { systemMaterialDel, systemMaterialList } from "@/api/media";
+// import { systemMaterialDel, systemMaterialList } from "@/api/media";
 import { mapGetters } from "vuex";
 
 export default {
   name: "le-media",
+  props: {
+    systemMaterialDelApi: {
+      type: Function,
+      required: true,
+    },
+    systemMaterialListApi: {
+      type: Function,
+      required: true,
+    },
+    systemMaterialCreateApi: {
+      type: Function,
+      required: true,
+    },
+    systemMaterialEditApi: {
+      type: Function,
+      required: true,
+    },
+    uploadFileApi: {
+      type: Function,
+      required: true,
+    },
+  },
   data() {
     return {
       tableData: [],
@@ -124,7 +149,7 @@ export default {
         type: "error",
       })
         .then(() => {
-          systemMaterialDel({ id: id }).then((res) => {
+          this.systemMaterialDelApi({ id: id }).then((res) => {
             this.list();
             if (res.data.code == "10000") {
               this.$message.success("删除成功");
@@ -166,7 +191,7 @@ export default {
         group: this.group,
         title: this.title,
       };
-      systemMaterialList(params).then((res) => {
+      this.systemMaterialListApi(params).then((res) => {
         if (res.data.code == "10000") {
           this.mediaList = res.data.data.list;
           this.total = res.data.data.count;

package/le-media-list/src/main.vue

@@ -83,7 +83,7 @@
   </div>
 </template>
 <script>
-import { systemMaterialList } from "@/api/media";
+// import { systemMaterialList } from "@/api/media";
 import leMixins from "../../le-libs/mixins/main"; //
 export default {
   name: "le-media-list",
@@ -93,6 +93,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    systemMaterialListApi: {
+      type: Function,
+      required: true,
+    },
   },
   data() {
     return {
@@ -146,7 +150,7 @@ export default {
         title: this.title,
         types: this.types,
       };
-      systemMaterialList(params).then((res) => {
+      this.systemMaterialListApi(params).then((res) => {
         if (res.data.code == "10000") {
           this.resultData = res.data.data.list;
           this.total = res.data.data.count;

package/le-media-upload/src/main.vue

@@ -98,11 +98,29 @@
   </el-form>
 </template>
 <script>
-import { uploadFile } from "@/api/upload";
-import { systemMaterialCreate, systemMaterialEdit } from "@/api/media";
+// import { uploadFile } from "@/api/upload";
+// import { systemMaterialCreate, systemMaterialEdit } from "@/api/media";
 export default {
   name: "le-media-upload",
-  props: ["mediaObj"],
+  // props: ["mediaObj"],
+  props: {
+    mediaObj: {
+      type: Object,
+      required: true,
+    },
+    systemMaterialCreateApi: {
+      type: Function,
+      required: true,
+    },
+    systemMaterialEditApi: {
+      type: Function,
+      required: true,
+    },
+    uploadFileApi: {
+      type: Function,
+      required: true,
+    },
+  },
   data() {
     return {
       form: {
@@ -164,7 +182,7 @@ export default {
         }
       } else {
         this.$message.error(
-          "请上传素材" + (this.form.types == 1 ? "图片" : "视频")
+          "请上传素材" + (this.form.types == 1 ? "图片" : "视频"),
         );
       }
     },
@@ -196,7 +214,7 @@ export default {
         this.$message.error("上传图片总大小不能超过 100MB!");
         return;
       }
-      uploadFile(formData).then((res) => {
+      this.uploadFileApi(formData).then((res) => {
         let address = res.data.data;
         if (address && address.length > 0) {
           if (this.form.id) {
@@ -223,7 +241,7 @@ export default {
         this.$message.error("上传视频总大小不能超过 100MB!");
         return;
       }
-      uploadFile(formData).then((res) => {
+      this.uploadFileApi(formData).then((res) => {
         let address = res.data.data;
         if (address && address.length > 0) {
           if (this.form.id) {
@@ -245,7 +263,7 @@ export default {
       };
       this.$refs["ruleForm"].validate((valid) => {
         if (valid) {
-          systemMaterialCreate(params).then((res) => {
+          this.systemMaterialCreateApi(params).then((res) => {
             if (res.data.code == "10000") {
               this.$emit("callMdiaUrl", urls);
               this.$message.success("创建素材成功");
@@ -276,7 +294,7 @@ export default {
       };
       this.$refs["ruleForm"].validate((valid) => {
         if (valid) {
-          systemMaterialEdit(params).then((res) => {
+          this.systemMaterialEditApi(params).then((res) => {
             if (res.data.code == "10000") {
               this.$emit("callMdiaUrl", urls);
               this.$message.success("修改素材成功");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leisure-core",
-  "version": "0.6.85",
+  "version": "0.6.86",
   "description": "leisure-core是京心数据基于vue2.x开发的一套后台管理系统桌面端组件库，封装了大量实用的UI控件模板,非常方便开发者快速搭建前端应用",
   "private": false,
   "author": "北方乐逍遥(zcx7878)",

package/le-button-select-media/index.js

@@ -1,7 +0,0 @@
-import LeButtonSelectMedia from "./src/main.vue";
-
-LeButtonSelectMedia.install = function (Vue) {
-  Vue.component(LeButtonSelectMedia.name, LeButtonSelectMedia);
-};
-
-export default LeButtonSelectMedia;

package/le-button-select-media/src/main.vue

@@ -1,74 +0,0 @@
-<template>
-  <div class="le-button-select-media">
-    <le-button type="primary" id="btnSelectMedia" @click="onClick">{{
-      btnTitle
-    }}</le-button>
-    <le-dialog-container :title="title" :showDialog="showDialog" :showFooter="showFooter" :width="width"
-      :showCloseBtnTop="showCloseBtnTop" @close="closeDialog">
-      <le-media-list :multiple="multiple" ref="selectMedias" v-if="showDialog"
-        @selectContent="selectContent"></le-media-list>
-    </le-dialog-container>
-  </div>
-</template>
-<script>
-import LeButton from "../../le-button/index";
-export default {
-  name: "le-button-select-media",
-  components: { LeButton },
-  props: {
-    btnTitle: {
-      type: String,
-      default: "选择素材",
-    },
-    width: {
-      type: String,
-      default: "70%",
-    },
-    title: {
-      type: String,
-      default: "选择素材",
-    },
-    param: {
-      type: [Object, String, Number],
-      default: () => { },
-    },
-    multiple: {
-      type: Boolean,
-      default: true,
-    },
-    showFooter: {
-      type: Boolean,
-      default: false,
-    },
-    showCloseBtnTop: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      showDialog: false,
-    };
-  },
-  methods: {
-    onClick() {
-      this.showDialog = true;
-    },
-    closeDialog() {
-      this.showDialog = false;
-    },
-    selectContent(value) {
-      this.$emit("selectContent", value, this.param);
-      if (!this.multiple) {
-        this.closeDialog();
-      }
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.le-button-select-media {
-  margin-left: 8px;
-  margin-right: 8px;
-}
-</style>

package/le-button-upload/index.js

@@ -1,7 +0,0 @@
-import LeButtonUpload from "./src/main.vue";
-
-LeButtonUpload.install = function (Vue) {
-  Vue.component(LeButtonUpload.name, LeButtonUpload);
-};
-
-export default LeButtonUpload;

package/le-button-upload/src/main.vue

@@ -1,50 +0,0 @@
-<template>
-  <div>
-    <le-button type="primary" id="btnUpload" @click="onClick">{{
-      title
-    }}</le-button>
-    <le-dialog-container :title="title" :showDialog="showDialog" :width="width" :showCloseBtnTop="showCloseBtnTop"
-      @close="closeDialog">
-      <le-media-upload v-if="showDialog" @cancel="closeDialog" @callMdiaUrl="callMdiaUrl"></le-media-upload>
-    </le-dialog-container>
-  </div>
-</template>
-<script>
-import LeButton from "../../le-button/index";
-export default {
-  name: "le-button-upload",
-  components: {
-    LeButton,
-  },
-  props: {
-    width: {
-      type: String,
-      default: "60%",
-    },
-    title: {
-      type: String,
-      default: "上传素材",
-    },
-    showCloseBtnTop: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      showDialog: false,
-    };
-  },
-  methods: {
-    onClick() {
-      this.showDialog = true;
-    },
-    closeDialog() {
-      this.showDialog = false;
-    },
-    callMdiaUrl(param) {
-      this.$emit("callMdiaUrl", param);
-    },
-  },
-};
-</script>

package/le-image-container/index.js

@@ -1,7 +0,0 @@
-import LeImageContainer from "./src/main.vue";
-
-LeImageContainer.install = function (Vue) {
-  Vue.component(LeImageContainer.name, LeImageContainer);
-};
-
-export default LeImageContainer;

package/le-image-container/src/main.vue

@@ -1,155 +0,0 @@
-<template>
-  <div class="le-image-container">
-    <div
-      class="list"
-      @mouseover="mouseOverImg"
-      @mouseleave="mouseLeaveImg"
-      v-for="(item, index) in imageList"
-      :key="index"
-    >
-      <le-image :src="item" class="img">
-        <div slot="placeholder" class="image-slot">
-          加载中<span class="dot">...</span>
-        </div>
-      </le-image>
-      <span
-        class="delete"
-        @click="delImgList(item)"
-        :id="index"
-        :style="imgDeleCss"
-      >
-        <i class="el-icon-delete"></i>
-      </span>
-    </div>
-    <div style="display: flex">
-      <div class="img">
-        <le-button-upload
-          title="上传素材"
-          @callMdiaUrl="selectContent"
-        ></le-button-upload>
-        <le-button-select-media
-          title="选择素材"
-          :multiple="false"
-          @selectContent="selectContent"
-        ></le-button-select-media>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: "le-image-container",
-  props: {
-    images: {
-      type: Array,
-      default: () => [],
-    },
-    limit: {
-      type: Number,
-      default: 99999,
-    },
-  },
-  data() {
-    return {
-      imgDeleCss: "display:none",
-      imageList: [],
-    };
-  },
-  watch: {
-    images: {
-      handler(val) {
-        this.imageList = val;
-      },
-      immediate: true,
-      deep: true,
-    },
-  },
-  mounted() {},
-  methods: {
-    mouseOverImg() {
-      this.imgDeleCss = "display:block;cursor:pointer";
-    },
-    mouseLeaveImg() {
-      this.imgDeleCss = "display:none";
-    },
-    delImgList(item) {
-      let lenp = this.imageList.indexOf(item);
-      this.imageList.splice(lenp, 1);
-      this.$emit("getImages", this.imageList);
-    },
-    selectContent(val) {
-      let images = this.imageList;
-      let num = images && images.length > 0 ? images.length : 0;
-      if (num < this.limit) {
-        if (!Array.isArray(val)) {
-          if (!val) return;
-          this.imageList.push(val);
-          this.$emit("getImages", this.imageList);
-        } else {
-          this.imageList.push(...val);
-          this.$emit("getImages", this.imageList);
-        }
-      } else {
-        this.$message.warning(`图片数量最多${this.limit}张!`);
-      }
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.le-image-container {
-  display: flex;
-  display: -webkit-flex;
-  flex-wrap: wrap;
-  .list {
-    position: relative;
-    width: 100px;
-    height: 100px;
-    left: 0;
-    top: 0;
-    cursor: default;
-    text-align: center;
-    color: #fff;
-    opacity: 100;
-    font-size: 20px;
-    /* background-color: rgba(0, 0, 0, 0.5); */
-    /* transition: opacity 0.3s; */
-    display: inline;
-
-    .img {
-      width: 100px;
-      height: 100px;
-    }
-
-    .delete {
-      position: absolute;
-      right: 0px;
-      bottom: 0;
-      font-size: 20px;
-      color: #fff;
-      display: block;
-      background-color: rgba(0, 0, 0, 0.5);
-      transition: opacity 0.3s;
-      width: 100%;
-      height: 100%;
-      text-align: center;
-      padding-top: 30%;
-    }
-  }
-  .img {
-    background-color: #fbfdff;
-    border: 1px dashed #c0ccda;
-    border-radius: 6px;
-    width: 100px;
-    height: 100px;
-    cursor: pointer;
-    font-size: 16px;
-    color: #8c939d;
-    display: flex;
-    display: -webkit-flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-}
-</style>