leisure-core 0.1.0

package/le-home/src/main.vue

@@ -0,0 +1,570 @@
+<template>
+  <el-container class="le-home-cp-container">
+    <el-header class="header">
+      <el-row>
+        <el-col :span="18" class="leftsection">
+          <div class="grid-content bg-purple">
+            <span class="userinfo-inner">{{ companyInfo.name }}</span>
+          </div>
+        </el-col>
+        <el-col :span="6" class="rightsection">
+          <div class="grid-content bg-purple-light">
+            <el-dropdown size="medium" trigger="click" @command="handleCommand">
+              <span class="el-dropdown-link userinfo-inner-t">
+                {{ username }}
+                <i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="1">修改密码</el-dropdown-item>
+                <el-dropdown-item command="2">退出</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        </el-col>
+      </el-row>
+    </el-header>
+    <el-container>
+      <el-aside class="aside" :class="{ aside_hide: isHideMenu }">
+        <el-menu
+          :unique-opened="true"
+          class="menu"
+          background-color=" #3A3A3A"
+          text-color="#fff"
+          active-text-color="#ffd04b"
+        >
+          <el-submenu
+            :index="item1.name"
+            v-for="item1 in menuData"
+            :key="item1.id"
+          >
+            <template slot="title">
+              <div @click="clickTitle">
+                <i :class="item1.icon"></i>&nbsp;
+                <span>{{ item1.title }}</span>
+              </div>
+            </template>
+            <el-menu-item
+              class="menuItem"
+              v-for="item2 in item1.children"
+              :key="item2.id"
+              :index="item2.name"
+              @click="clickMenuItem(item2)"
+            >
+              &nbsp;&nbsp;
+              <span>{{ item2.title }}</span>
+            </el-menu-item>
+          </el-submenu>
+        </el-menu>
+      </el-aside>
+      <el-main class="main" style="padding: 10px 20px">
+        <div class="aside_open_close" @click="asidechange">
+          <i class="el-icon-arrow-left" v-if="aside_open_close"></i>
+          <i class="el-icon-arrow-right" v-else></i>
+        </div>
+        <div>
+          <el-tabs
+            class="el-tabs_"
+            v-model="tabNameCurrent"
+            closable
+            @tab-click="handleTabClick"
+            @tab-remove="removeTab"
+          >
+            <el-tab-pane
+              v-for="item in tabsAll"
+              :key="item.name"
+              :label="item.title"
+              :name="item.name"
+            >
+            </el-tab-pane>
+          </el-tabs>
+          <router-view :key="$route.fullPath"></router-view>
+        </div>
+      </el-main>
+    </el-container>
+    <el-dialog
+      title="修改密码"
+      ref="elDialog"
+      :visible.sync="showChangePwd"
+      width="30%"
+      :close-on-click-modal="false"
+      @close="cancelChangePwd"
+      center
+    >
+      <el-form
+        :model="ruleForm"
+        status-icon
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="密码" prop="pwd">
+          <el-input
+            type="password"
+            v-model="ruleForm.pwd"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPwd">
+          <el-input
+            type="password"
+            v-model="ruleForm.confirmPwd"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button type="info" @click="cancelChangePwd('ruleForm')"
+          >取 消</el-button
+        >
+        <el-button type="primary" @click="saveChangePwd('ruleForm')"
+          >确认修改</el-button
+        >
+      </div>
+    </el-dialog>
+    <div v-show="contextMenuVisible">
+      <ul
+        :style="{ left: menuLeft + 'px', top: menuTop + 'px' }"
+        class="contextmenu"
+      >
+        <li>
+          <el-button
+            type="text"
+            size="mini"
+            icon="el-icon-refresh"
+            @click="closeOtherTab"
+            >关闭其它</el-button
+          >
+        </li>
+        <li>
+          <el-button
+            type="text"
+            size="mini"
+            icon="el-icon-error"
+            @click="closeAllTabs"
+            >关闭所有</el-button
+          >
+        </li>
+      </ul>
+    </div>
+  </el-container>
+</template>
+<script>
+export default {
+  name: "le-home",
+  props: {
+    companyInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  data() {
+    var validatePass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入密码"));
+      } else {
+        if (value.length < 6) {
+          callback(new Error("密码至少6位"));
+        } else {
+          if (this.ruleForm.confirmPwd !== "") {
+            this.$refs.ruleForm.validateField("confirmPwd	");
+          }
+          callback();
+        }
+      }
+    };
+    var validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.ruleForm.pwd) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      style: {
+        display: "block",
+      },
+
+      isHideMenu: false,
+      aside_open_close: true,
+      menuData: [],
+      title: "",
+      cacheView: [],
+      showChangePwd: false,
+      username: "",
+      changeUid: "",
+      tabNameCurrent: "",
+      tabsAll: [],
+      ruleForm: {
+        pwd: "",
+        confirmPwd: "",
+      },
+      rules: {
+        pwd: [{ validator: validatePass, trigger: "blur" }],
+        confirmPwd: [{ validator: validatePass2, trigger: "blur" }],
+      },
+      //右键菜单
+      contextMenuVisible: false,
+      menuLeft: 0,
+      menuTop: 0,
+    };
+  },
+  mounted() {
+    this.username =
+      this.$store.getters.userinfo.nick || this.$store.getters.userinfo.account;
+    let tab_top_dom = document.getElementsByClassName("el-tabs_");
+    tab_top_dom[0].oncontextmenu = this.openContextMenu;
+    this.$store.commit("setCname", this.companyInfo.name);
+    let dict = [
+      {
+        title: "是",
+        value: 1,
+      },
+      {
+        title: "否",
+        value: 0,
+      },
+    ];
+
+    this.$store.commit("setDict", dict);
+
+    this.menuData = this.$store.getters.menu;
+    this.menuData = this.$store.getters.menu.filter(function (item) {
+      if (item.children) {
+        item.children = item.children.filter(function (item1) {
+          return item1.isHide === 0;
+        });
+      }
+      return item;
+    });
+  },
+  watch: {
+    contextMenuVisible() {
+      if (this.contextMenuVisible) {
+        document.body.addEventListener("click", this.closeMenu);
+      } else {
+        document.body.removeEventListener("click", this.closeMenu);
+      }
+    },
+  },
+  methods: {
+    openContextMenu(e) {
+      e.preventDefault(); //防止默认菜单弹出
+      this.contextMenuVisible = true;
+
+      this.menuLeft = e.clientX;
+      this.menuTop = e.clientY + 20;
+    },
+    closeMenu() {
+      this.contextMenuVisible = false;
+    },
+    closeOtherTab() {
+      this.tabsAll = this.tabsAll.filter(
+        (item) => item.name == this.tabNameCurrent
+      );
+    },
+    closeAllTabs() {
+      this.contextMenuVisible = false;
+      this.tabNameCurrent = "";
+      this.tabsAll = [];
+      this.$router.push({ path: "/home" });
+    },
+    //解决空白标签页右键
+    openContextMenu1(e) {
+      if (e.srcElement.id != "") {
+        this.contextMenuVisible = true;
+        //这个参数是获取右键标签页的id属性，应该和你的key有关，你要截取-后面部分的
+        this.closeindex = e.srcElement.id.split("-")[1]; //
+      } else {
+        this.contextMenuVisible = false;
+      }
+    },
+    handleCommand(command) {
+      if (command == 1) {
+        this.changPwd();
+      }
+      if (command == 2) {
+        this.signout();
+      }
+    },
+    changPwd() {
+      this.changeUid = this.$store.getters.userinfo.id;
+      this.ruleForm.pwd = "";
+      this.ruleForm.confirmPwd = "";
+      this.showChangePwd = true;
+    },
+    cancelChangePwd() {
+      this.showChangePwd = false;
+      this.changeUid = "";
+      this.ruleForm.pwd = "";
+      this.ruleForm.confirmPwd = "";
+    },
+    saveChangePwd(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          let params = {
+            pwd: this.ruleForm.pwd,
+            confirmPwd: this.ruleForm.confirmPwd,
+            uid: this.changeUid,
+          };
+          this.$emit("userChangePwd", params, this.changePwdAfter);
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    changePwdAfter(res) {
+      if (res.data.code == "10000") {
+        this.$message.success("修改密码成功");
+        localStorage.clear();
+        this.$store.commit("setUserInfo", null);
+        this.$router.replace({ path: "/" });
+      } else {
+        this.$message.error(res.data.info);
+      }
+    },
+    signout() {
+      this.$confirm("退出登录, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.$router.push({ path: "/" });
+        localStorage.clear();
+      });
+    },
+    clickMenuItem(item) {
+      this.style.display = "none";
+      if (item.name == this.tabNameCurrent) return;
+      if (this.tabsAll && this.tabsAll.length > 0) {
+        let routeE = this.tabsAll.filter((x) => {
+          return x.name == item.name;
+        });
+        if (routeE && routeE.length > 0) {
+          let currentTab = routeE[0];
+          this.tabNameCurrent = currentTab.name;
+          this.$router.push(currentTab); //
+        } else {
+          this._navi2Page(item);
+        }
+      } else {
+        this._navi2Page(item);
+      }
+    },
+    _navi2Page(item) {
+      let value;
+      if (item.param) {
+        value = {
+          name: item.name,
+          title: item.title,
+          params: {
+            status: item.param,
+            btns: item.btns,
+          },
+        };
+      } else {
+        if (item.component && item.component != "") {
+          value = {
+            name: item.name,
+            title: item.title,
+            params: {
+              btns: item.btns,
+            },
+          };
+        }
+      }
+      this.tabNameCurrent = value.name;
+      if (this.tabsAll && this.tabsAll.length >= 8) {
+        let elen = this.tabsAll.length;
+        this.tabsAll[elen - 1] = value;
+      } else this.tabsAll.push(value);
+      this.$router.push(value);
+    },
+    handleTabClick(clickTab, event) {
+      // if (clickTab.name == this.tabNameCurrent) return;
+      let tabs = this.tabsAll;
+      let currentTab;
+      tabs.forEach((tab, index) => {
+        if (tab.name === clickTab.name) {
+          currentTab = tab;
+        }
+      });
+      this.$router.push(currentTab);
+    },
+    removeTab(targetName) {
+      let tabs = this.tabsAll;
+      let nextTab;
+      tabs.forEach((tab, index) => {
+        if (tab.name == targetName) {
+          nextTab = tabs[index + 1] || tabs[index - 1];
+          if (nextTab) {
+            this.tabNameCurrent = nextTab.name;
+          }
+        }
+      });
+      this.tabsAll = tabs.filter((tab) => tab.name !== targetName);
+      if (nextTab) {
+        this.$router.push(nextTab);
+      } else {
+        this.tabNameCurrent = "";
+        this.$router.push("/Home");
+      }
+    },
+    clickTitle() {
+      this.style.display = "block";
+    },
+
+    asidechange() {
+      this.isHideMenu = !this.isHideMenu;
+      if (this.isHideMenu) {
+        this.aside_open_close = false;
+      } else {
+        this.aside_open_close = true;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.le-home-cp-container {
+  height: 100vh;
+  font-size: 15px;
+
+  .header {
+    background: #212121;
+    color: #fff;
+    height: 60px;
+  }
+
+  .aside {
+    background: #3a3a3a;
+    color: #fff;
+    width: 200px !important;
+    transform: width 0.5s;
+  }
+
+  .aside_hide {
+    width: 0px !important;
+  }
+
+  .el-aside {
+    height: calc(100vh - 60px);
+  }
+
+  .el-main {
+    /* padding: 0 !important; */
+    height: calc(100vh - 60px);
+    overflow: hidden !important;
+  }
+
+  .menu {
+    background: none;
+    color: #fff;
+  }
+
+  .main {
+    /* height: 100%; */
+    position: relative;
+    color: #212121;
+  }
+
+  .headerlogo {
+    line-height: 60px;
+    margin-top: 10px;
+  }
+
+  .rightsection {
+    line-height: 60px;
+    text-align: right;
+  }
+
+  .leftsection {
+    line-height: 60px;
+    text-align: start;
+    font-size: 22px;
+  }
+
+  .userinfo-inner {
+    margin-left: 20px;
+  }
+
+  .userinfo-inner-t {
+    color: #fff !important;
+    font-size: 20px;
+  }
+
+  .el-icon-arrow-down {
+    font-size: 16px;
+  }
+  .el-dropdown-menu__item {
+    font-size: 15px !important;
+  }
+
+  .logofont {
+    font-size: 25px;
+    /* margin-bottom: 30px; */
+    padding-bottom: 10px;
+    line-height: 60px;
+  }
+
+  .cursor {
+    cursor: pointer;
+  }
+  .aside_open_close {
+    position: absolute;
+    left: 0;
+    top: 25%;
+    width: 16px;
+    height: 60px;
+    line-height: 60px;
+    color: #fff;
+    background-color: #2a333a;
+    border-radius: 0 6px 6px 0;
+    font-size: 20px;
+    z-index: 1000;
+    cursor: pointer;
+  }
+  .aside_open_close:hover {
+    background-color: #ff8e2b;
+    color: #fff;
+  }
+
+  .contextmenu {
+    width: 100px;
+    margin: 0;
+    border: 1px solid #ccc;
+    background: #fff;
+    z-index: 3000;
+    position: absolute;
+    list-style-type: none;
+    padding: 5px 0;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #333;
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
+
+    .li {
+      margin: 0;
+      padding: 0px 2px;
+
+      :hover {
+        background: #f2f2f2;
+        cursor: pointer;
+      }
+      .button {
+        color: #2c3e50;
+      }
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+</style>

package/le-image/index.js

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

package/le-image/src/main.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="le-image">
+    <div
+      class="list"
+      @mouseover="mouseOverImg"
+      @mouseleave="mouseLeaveImg"
+      v-for="(item, index) in imageList"
+      :key="index"
+    >
+      <el-image :src="item" class="img">
+        <div slot="placeholder" class="image-slot">
+          加载中<span class="dot">...</span>
+        </div>
+      </el-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",
+  props: {
+    images: {
+      type: Array,
+      default: () => [],
+    },
+    limit: {
+      type: Number,
+      default: 99999,
+    },
+  },
+  data() {
+    return {
+      imgDeleCss: "display:none",
+      imageList: [],
+    };
+  },
+  watch: {
+    images(val) {
+      this.imageList = val;
+    },
+  },
+  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) {
+        this.imageList.push(val);
+        this.$emit("getImages", this.imageList);
+      } else {
+        this.$message.warning(`图片数量最多${this.limit}张!`);
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.le-image {
+  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>