leisure-common 0.6.85 → 0.6.86

package/index.js

@@ -12,6 +12,13 @@ import LeRoleUser from "./le-role-user/index.js";
 
 import LeSelectUser from "./le-select-user/index.js";
 import LeUser from "./le-user/index.js";
+import LeButtonSelectMedia from "./le-button-select-media/index.js";
+
+// 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 LeImageContainer from "./le-image-container/index.js";
 
 const components = [
   LeComEmployee,
@@ -27,7 +34,13 @@ const components = [
   LeRole,
   LeRoleUser,
   LeSelectUser,
+  LeButtonSelectMedia,
   LeUser,
+  // LeMedia,
+  // LeMediaUpload,
+  // LeMediaList,
+  LeButtonUpload,
+  LeImageContainer,
 ];
 
 const install = function (Vue) {
@@ -54,4 +67,11 @@ export default {
   LeRoleUser,
   LeSelectUser,
   LeUser,
+  LeButtonSelectMedia,
+
+  // LeMedia,
+  // LeMediaUpload,
+  // LeMediaList,
+  LeButtonUpload,
+  LeImageContainer,
 };

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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,87 @@
+<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"
+        :systemMaterialListApi="systemMaterialListApi"
+        ref="selectMedias"
+        v-if="showDialog"
+        @selectContent="selectContent"
+      ></le-media-list>
+    </le-dialog-container>
+  </div>
+</template>
+<script>
+import { systemMaterialList } from "@/api/media";
+export default {
+  name: "le-button-select-media",
+  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: {
+    systemMaterialListApi(params) {
+      return systemMaterialList(params);
+    },
+    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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,70 @@
+<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
+        :mediaObj="mediaObj"
+        :systemMaterialCreateApi="systemMaterialCreateApi"
+        :systemMaterialEditApi="systemMaterialEditApi"
+        :uploadFileApi="uploadFileApi"
+        v-if="showDialog"
+        @cancel="closeDialog"
+        @callMdiaUrl="callMdiaUrl"
+      ></le-media-upload>
+    </le-dialog-container>
+  </div>
+</template>
+<script>
+import { uploadFile } from "@/api/upload";
+import { systemMaterialCreate, systemMaterialEdit } from "@/api/media";
+export default {
+  name: "le-button-upload",
+  props: {
+    width: {
+      type: String,
+      default: "60%",
+    },
+    title: {
+      type: String,
+      default: "上传素材",
+    },
+    showCloseBtnTop: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      showDialog: false,
+    };
+  },
+  methods: {
+    uploadFileApi(param) {
+      return uploadFile(param);
+    },
+    systemMaterialCreateApi(param) {
+      return systemMaterialCreate(param);
+    },
+    systemMaterialEditApi() {
+      return systemMaterialEdit(param);
+    },
+    onClick() {
+      this.showDialog = true;
+    },
+    closeDialog() {
+      this.showDialog = false;
+    },
+    callMdiaUrl(param) {
+      this.$emit("callMdiaUrl", param);
+    },
+  },
+};
+</script>

package/le-image-container/index.js

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,155 @@
+<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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leisure-common",
-  "version": "0.6.85",
+  "version": "0.6.86",
   "description": "leisure-common是京心数据在leisure-core基础上开发的一套后台管理系统基于故事的电商行业组件库，封装了大量实用的UI控件模板,方便开发者快速搭建前端应用",
   "private": false,
   "author": "北方乐逍遥(zcx7878)",
@@ -13,7 +13,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "leisure-core": "^0.6.85"
+    "leisure-core": "^0.6.86"
   },
   "devDependencies": {}
 }