leisure-common 0.6.85 → 0.6.87

package/index.js

@@ -12,6 +12,15 @@ 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";
+
+import { LeHelp, LeHelpDetail } from "./le-help/index.js";
 
 const components = [
   LeComEmployee,
@@ -27,7 +36,15 @@ const components = [
   LeRole,
   LeRoleUser,
   LeSelectUser,
+  LeButtonSelectMedia,
   LeUser,
+  // LeMedia,
+  // LeMediaUpload,
+  // LeMediaList,
+  LeButtonUpload,
+  LeImageContainer,
+  LeHelp,
+  LeHelpDetail,
 ];
 
 const install = function (Vue) {
@@ -54,4 +71,14 @@ export default {
   LeRoleUser,
   LeSelectUser,
   LeUser,
+  LeButtonSelectMedia,
+
+  // LeMedia,
+  // LeMediaUpload,
+  // LeMediaList,
+  LeButtonUpload,
+  LeImageContainer,
+
+  LeHelp,
+  LeHelpDetail,
 };

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-help/index.js

@@ -0,0 +1,12 @@
+import LeHelp from "./src/main.vue";
+import LeHelpDetail from "./src/detail.vue";
+
+LeHelp.install = function (Vue) {
+  Vue.component(LeHelp.name, LeHelp);
+};
+
+LeHelpDetail.install = function (Vue) {
+  Vue.component(LeHelpDetail.name, LeHelpDetail);
+};
+
+export { LeHelp, LeHelpDetail };

package/le-help/src/detail.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="le-help">
+    <div class="title">{{ title }}</div>
+    <div class="comment" v-html="comment"></div>
+  </div>
+</template>
+<script>
+export default {
+  name: "le-help-detail",
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    comment: {
+      type: String,
+      default: "",
+    },
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.le-help {
+  display: flex;
+  display: -webkit-flex;
+  flex-direction: column;
+
+  .title {
+    text-align: center;
+    font-weight: bold;
+    font-size: 26px;
+  }
+
+  .comment {
+    max-height: 650px;
+    overflow-y: auto;
+  }
+}
+</style>

package/le-help/src/main.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="le-depart-container">
+    <el-form :inline="true">
+      <el-form-item>
+        <el-button type="primary" @click="addHelp()">新建</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table :data="tableData" border row-key="id" stripe style="width: 100%">
+      <el-table-column prop="type" label="类型" align="center">
+      </el-table-column>
+      <el-table-column prop="title" label="标题" align="center">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" align="center" width="180">
+        <template slot-scope="scope">
+          <le-button @click="edit(scope.row)">编辑</le-button>
+          <le-button-msg @click="del(scope.row.id)">删除</le-button-msg>
+        </template>
+      </el-table-column>
+    </el-table>
+    <le-dialog-container
+      title="新建/编辑帮助文档"
+      :showDialog="showDialog"
+      :showFooter="true"
+      @close="handleClose"
+      @saveData="savedepart"
+    >
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="140px"
+        v-if="showDialog"
+      >
+        <el-form-item label="类型" prop="type">
+          <el-input v-model="ruleForm.type"></el-input>
+        </el-form-item>
+        <el-form-item label="标题" prop="title">
+          <el-input v-model="ruleForm.title"></el-input>
+        </el-form-item>
+        <el-form-item label="内容" prop="comment">
+          <le-editor v-model="ruleForm.comment"></le-editor>
+        </el-form-item>
+      </el-form>
+    </le-dialog-container>
+  </div>
+</template>
+<script>
+import { list, edit, del } from "@/api/SystemHelp";
+import { LeEditor } from "leisure-editor";
+import leButton from "../../le-button/index";
+import LeButtonMsg from "../../le-button-msg/index";
+export default {
+  name: "le-help",
+  components: {
+    LeEditor,
+    leButton,
+    LeButtonMsg,
+  },
+  data() {
+    return {
+      tableData: [],
+      ruleForm: {
+        id: "",
+        type: "",
+        title: "",
+        comment: "",
+      },
+      rules: {
+        type: [
+          { required: true, message: "请输入类型", trigger: "blur" },
+          { max: 6, message: "长度在 1 到 6个字符", trigger: "blur" },
+        ],
+        title: [
+          { required: true, message: "请输入标题", trigger: "blur" },
+          { max: 20, message: "长度在 1 到 20个字符", trigger: "blur" },
+        ],
+        comment: [{ required: true, message: "请输入类型", trigger: "blur" }],
+      },
+      showDialog: false,
+    };
+  },
+  computed: {},
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    addHelp() {
+      this.showDialog = true;
+    },
+    edit(row) {
+      this.ruleForm = JSON.parse(JSON.stringify(row));
+      this.showDialog = true;
+    },
+    savedepart() {
+      let params = JSON.parse(JSON.stringify(this.ruleForm));
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          edit(params).then(() => {
+            this.$message.success("提交成功～");
+            this.getList();
+            this.handleClose();
+          });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    handleClose() {
+      this.showDialog = false;
+      this.initForm();
+    },
+    getList() {
+      list().then((res) => {
+        this.tableData = res.data.data || [];
+      });
+    },
+    del(id) {
+      del({
+        id: id,
+      }).then((response) => {
+        this.getList();
+        this.$message.success("删除成功");
+      });
+    },
+    initForm() {
+      this.ruleForm.id = "";
+      this.ruleForm.type = "";
+      this.ruleForm.title = "";
+      this.ruleForm.comment = "";
+    },
+  },
+};
+</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.87",
   "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.87"
   },
   "devDependencies": {}
 }