leisure-core 0.1.0

package/le-menu/src/main.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="le-menu-mainClass">
+    <div class="titleClass">角色:{{ roleInfo.roleName }}的功能菜单</div>
+    <el-tree
+      :data="menus"
+      ref="elTree"
+      show-checkbox
+      node-key="id"
+      :props="props"
+    >
+      <span class="custom-tree-node" slot-scope="{ node, data }">
+        <span>{{ node.label }}</span>
+        <span v-if="!data.children && data.btns && data.btns.length > 0">
+          <el-button
+            type="text"
+            size="mini"
+            @click="() => buttonPermission(data)"
+          >
+            页面按钮
+          </el-button>
+        </span>
+      </span>
+    </el-tree>
+    <div class="footerClass">
+      <el-button @click="cancel()">取 消</el-button>
+      <el-button type="primary" @click="saveAll">保 存</el-button>
+    </div>
+    <div>
+      <el-dialog
+        width="50%"
+        title="页面按钮"
+        append-to-body
+        :visible.sync="showDialog"
+        :close-on-click-modal="true"
+      >
+        <el-form>
+          <el-checkbox-group v-model="checkBtnList">
+            <el-checkbox
+              v-for="item in btnsList"
+              :label="item.id"
+              :key="item.id"
+              >{{ item.name }}</el-checkbox
+            >
+          </el-checkbox-group>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="closePageButton()">关 闭</el-button>
+          <el-button type="primary" @click="savePageBtn()">保 存</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+import { menuRoleList } from "@/api/menu";
+import { batchAddRoleMenu, listRoleMenu } from "@/api/role";
+export default {
+  name: "le-menu",
+  props: {
+    roleInfo: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      props: {
+        label: "title",
+        btns: "btns",
+        children: "children",
+      },
+      menus: [],
+      showDialog: false,
+      checkBtnList: [], //当前选择的按钮
+      btnsList: [], //按钮列表
+    };
+  },
+  mounted() {
+    this.getMenus();
+  },
+  methods: {
+    fillCheckboxStatus() {
+      this.userRoleList = [];
+      let param = {};
+      param.rid = this.roleInfo.roleId;
+      listRoleMenu(param).then((res) => {
+        let roleMenus = res.data.data;
+        if (roleMenus != undefined && roleMenus.length > 0) {
+          let selectKeys = roleMenus.map(function (item) {
+            return item.mid;
+          });
+          this.$refs.elTree.setCheckedKeys(selectKeys, false);
+        }
+      });
+    },
+    cancel() {
+      this.$emit("close");
+    },
+    buttonPermission(data) {
+      this.btnsList = [];
+      this.checkBtnList = [];
+      let btns = data.btns;
+      if (btns && btns.length > 0) {
+        let json = JSON.parse(btns);
+        json.forEach((btn) => {
+          if (btn && btn.permission && btn.permission == "ok") {
+            if (btn.id && btn.id.length > 0) {
+              if (!this.checkBtnList.includes(btn.id)) {
+                this.checkBtnList.push(btn.id);
+              }
+            }
+          }
+        });
+        this.btnsList = json;
+        this.showDialog = true;
+      }
+    },
+    handleMenuCheckChange(data, checked, indeterminate) {
+      // if (checked) {
+      //   const childes = data.children ?? [];
+      //   if (childes.length == 0) {
+      //     let btns = data.btns;
+      //     if (btns && btns.length > 0) {
+      //       let json = JSON.parse(btns);
+      //       json.forEach((btn) => {
+      //         if (btn && btn.effect && btn.effect == "ok") {
+      //           this.checkBtnList.push(btn.name);
+      //         }
+      //       });
+      //       this.btnsList = json;
+      //       this.showDialog = true;
+      //     }
+      //   }
+      // }
+    },
+    closePageButton() {
+      this.showDialog = false;
+    },
+    savePageBtn() {
+      let btns = this.btnsList;
+      if (btns && btns.length > 0) {
+        btns.forEach((btn) => {
+          if (this.checkBtnList.includes(btn.id)) {
+            btn.permission = "ok"; //标识有权限
+          } else {
+            btn.permission = "no";
+          }
+        });
+      }
+      this.$refs.elTree.getCurrentNode().btns = JSON.stringify(btns);
+      this.save();
+      this.closePageButton();
+    },
+    save() {
+      return new Promise((reslove, reject) => {
+        let nodes = this.$refs.elTree.getCheckedNodes(false);
+        let tops = this.$refs.elTree.getHalfCheckedNodes();
+        let params = new Array();
+        if (nodes != undefined && nodes.length > 0) {
+          nodes.forEach((node) => {
+            let param = {};
+            param.mid = node.id;
+            param.rid = this.roleInfo.roleId;
+            param.isTop = 0;
+            param.btns = node.btns;
+            param.control = node.control;
+            params.push(param);
+          });
+          if (tops != undefined && tops.length > 0) {
+            tops.forEach((top) => {
+              let param = {};
+              param.mid = top.id;
+              param.rid = this.roleInfo.roleId;
+              param.isTop = 1;
+              param.btns = top.btns;
+              param.control = top.control;
+              params.push(param);
+            });
+          }
+          batchAddRoleMenu(params).then(() => {
+            this.$message.success("功能菜单定义成功");
+            reslove();
+          });
+        } else {
+          let param = {};
+          param.rid = this.roleInfo.roleId;
+          params.push(param);
+          batchAddRoleMenu(params).then(() => {
+            this.$message.success("功能菜单定义成功");
+            reslove();
+          });
+        }
+      });
+    },
+    saveAll() {
+      this.save().then(() => {});
+    },
+    getMenus() {
+      let param = {};
+      param.rid = this.roleInfo.roleId;
+      menuRoleList(param).then((res) => {
+        let menus = res.data.data;
+        menus = menus.filter((item) => {
+          // if (item.children) {
+          //   item.children = item.children.filter((child) => {
+          //     return child.isHide == 0;
+          //   });
+          // }
+          return item;
+        });
+        this.menus = menus;
+        this.fillCheckboxStatus();
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.le-menu-mainClass {
+  display: flex;
+  display: -webkit-flex;
+  flex-direction: column;
+  height: calc(100vh - 100px);
+  overflow: auto;
+
+  .titleClass {
+    text-align: center;
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+    text-align: center;
+  }
+
+  .footerClass {
+    text-align: center;
+    margin-top: 5px;
+  }
+}
+</style>

package/le-rich-text/index.js

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

package/le-rich-text/src/main.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="le-rich-text">
+    <div class="header" v-if="showBtn">
+      <le-button-select-media
+        title="选择素材"
+        @selectContent="selectContent"
+      ></le-button-select-media>
+      <el-button type="primary" @click="onSave">保存</el-button>
+    </div>
+    <le-editor
+      style="height: 500px"
+      v-model="content"
+      ref="vueeditor"
+      useCustomImageHandler
+      @image-added="vueEditorHandleImageAdded"
+    ></le-editor>
+    <div class="footer">
+      <span style="float: left; font-size: 12px; margin-left: 20px">
+        图片大小不能超过2M</span
+      >
+      <span style="float: right; margin-right: 20px">
+        {{ innerLength }}/200
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { LeEditor } from "leisure-editor";
+import { uploadFile } from "@/api/upload";
+import { Base64 } from "js-base64";
+export default {
+  name: "le-rich-text",
+  components: {
+    LeEditor,
+  },
+  props: {
+    id: {
+      type: String,
+      default: "btnEditor",
+    },
+    isBase64: {
+      type: Boolean,
+      default: true,
+    },
+    showBtn: {
+      type: Boolean,
+      default: false,
+    },
+    initValue: {
+      type: String,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      content: "",
+      innerLength: 0,
+    };
+  },
+  watch: {
+    initValue: {
+      handler(newValue) {
+        if (this.isBase64 && newValue && newValue.length > 0) {
+          this.content = Base64.decode(newValue);
+        } else this.content = newValue;
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    onSave() {
+      let comments = this.content;
+      if (this.isBase64) {
+        comments = Base64.encode(comments);
+      }
+      this.$emit("onSubmit", comments);
+    },
+    selectContent(value) {
+      let quill = this.$refs.vueeditor.quill;
+      let cursorLocation = quill.selection.savedRange.index;
+      if (value && value.length > 0) {
+        if (Array.isArray(value)) {
+          value.forEach((item) => {
+            quill.insertEmbed(cursorLocation, "image", item);
+          });
+        } else {
+          quill.insertEmbed(cursorLocation, "image", value);
+        }
+      }
+    },
+    async vueEditorHandleImageAdded(
+      file,
+      Editor,
+      cursorLocation,
+      resetUploader
+    ) {
+      // if (file.size > 1048576 * 2) {
+      //   info("图片不能超过2M,请压缩后再上传", this);
+      //   return;
+      // }
+
+      var formData = new FormData();
+      formData.append("files", file);
+      uploadFile(formData).then((res) => {
+        let address = res.data.data;
+        console.log(address);
+        if (address && address.length > 0) {
+          address.forEach((item) => {
+            // const reader = new FileReader();
+            // reader.readAsDataURL(file);
+            // reader.onload = (e) => {
+            //   Editor.insertEmbed(cursorLocation, "image", e.target.result);
+            // };
+            Editor.insertEmbed(cursorLocation, "image", item);
+          });
+        }
+        resetUploader();
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.le-rich-text {
+  .header {
+    display: flex;
+    display: -webkit-flex;
+    justify-content: right;
+    margin-bottom: 4px;
+    margin-right: 10px;
+  }
+  .footer {
+    margin-top: 60px;
+  }
+}
+</style>

package/le-role/index.js

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

package/le-role/src/main.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="le-role-container">
+    <el-form :inline="true" class="demo-form-inline">
+      <el-form-item>
+        <el-button type="primary" @click="addRole()">新建角色</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="tableData"
+      ref="eltablemain"
+      border
+      row-key="id"
+      stripe
+      :max-height="elTableMaxHeight"
+      style="width: 100%"
+    >
+      <el-table-column prop="name" label="名称" width="260"> </el-table-column>
+      <el-table-column prop="note" label="备注"> </el-table-column>
+      <el-table-column label="操作" align="center" width="360" row>
+        <template slot-scope="scope">
+          <le-button text="编辑" @click="openEditWindow(scope.row)"></le-button>
+          <le-button-msg @click="del(scope.row.id)"></le-button-msg>
+          <le-button
+            text="菜单"
+            @click="openMenuWindow(scope.row)"
+            style="margin-left: 10px"
+          ></le-button>
+          <le-button
+            text="用户列表"
+            @click="openUserWindow(scope.row)"
+            style="margin-left: 10px"
+          ></le-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <le-dialog-container
+      :showDialog="showMenu"
+      width="60%"
+      title="功能菜单"
+      @close="closeMenuDialog"
+    >
+      <le-menu @close="closeMenuDialog" :roleInfo="roleInfo"></le-menu>
+    </le-dialog-container>
+    <le-dialog-container
+      title="角色"
+      width="60%"
+      :showDialog="showEdit"
+      @close="closeEditDialog"
+    >
+      <le-role-sub
+        @close="closeEditDialog"
+        @rowRefresh="list"
+        :rowitem="currentRow"
+      ></le-role-sub>
+    </le-dialog-container>
+    <le-dialog-container
+      :title="curRoleName"
+      :showDialog="showUsers"
+      @close="closeUserDialog"
+    >
+      <el-table
+        :data="userlist"
+        border
+        row-key="id"
+        tooltip-effect="dark"
+        style="width: 100%"
+      >
+        <el-table-column prop="account" label="账号" align="center">
+        </el-table-column>
+        <el-table-column prop="account" label="昵称" align="center">
+        </el-table-column>
+      </el-table>
+    </le-dialog-container>
+  </div>
+</template>
+<script>
+import { roleDel, roleList, listUserOfRole } from "@/api/role";
+import LeButton from "leisure-ui/le-button/index";
+import LeButtonMsg from "leisure-ui/le-button-msg/index";
+import LeDialogContainer from "leisure-ui/le-dialog-container/index";
+import LeMenu from "leisure-ui/le-menu/index";
+import leMixins from "leisure-ui/le-libs/mixins/main";
+import LeRoleSub from "./sub.vue";
+export default {
+  name: "le-role",
+  mixins: [leMixins],
+  components: {
+    LeButton,
+    LeButtonMsg,
+    LeDialogContainer,
+    LeRoleSub,
+    LeMenu,
+  },
+  data() {
+    return {
+      tableData: [],
+      showUsers: false,
+      userlist: [],
+      curRoleName: "",
+      currentRow: {},
+      showEdit: false,
+      showMenu: false,
+      roleInfo: {},
+    };
+  },
+  mounted() {
+    this.list();
+  },
+  computed: {},
+  methods: {
+    list() {
+      let param = {};
+      roleList(param).then((res) => {
+        this.tableData = res.data.data;
+      });
+    },
+    del(id) {
+      let param = { id: id };
+      roleDel(param).then((response) => {
+        this.list();
+        this.$message.success(response.data.info, this);
+      });
+    },
+    addRole() {
+      this.showEdit = true;
+    },
+    openEditWindow(item) {
+      // let routeData = {
+      this.currentRow = item;
+      this.showEdit = true;
+    },
+    closeEditDialog() {
+      this.showEdit = false;
+      this.list();
+    },
+    openMenuWindow(item) {
+      // this.roleInfo = JSON.parse(JSON.stringify(item));
+      this.roleInfo.roleId = item.id;
+      this.roleInfo.roleName = item.name;
+      this.showMenu = true;
+      // let routeData = {
+      //   name: "rolemenu",
+      //   params: JSON.parse(JSON.stringify(item)),
+      // };
+      // this.$router.push(routeData);
+    },
+    closeMenuDialog() {
+      this.showMenu = false;
+    },
+    openUserWindow(item) {
+      let param = {};
+      param.rid = item.id;
+      param.pageNo = 1;
+      listUserOfRole(param).then((res) => {
+        this.userlist = res.data.data;
+        this.curRoleName = item.name;
+        this.showUsers = true;
+      });
+    },
+    closeUserDialog() {
+      this.showUsers = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.le-role-container {
+}
+</style>

package/le-role/src/sub.vue

@@ -0,0 +1,79 @@
+<template>
+  <el-form id="form" ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-form-item label="名称" prop="name">
+      <el-input v-model="form.name"></el-input>
+    </el-form-item>
+    <el-form-item label="备注" prop="note">
+      <el-input v-model="form.note"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="onSubmit()">保存</el-button>
+      <el-button @click="close()">取消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { roleCreate, roleEdit } from "@/api/role";
+export default {
+  name: "le-roles-sub",
+  props: {
+    rowitem: {},
+  },
+  data() {
+    return {
+      form: {
+        id: "",
+        name: "",
+        note: "",
+      },
+      rules: {
+        name: [
+          { required: true, message: "请输入角色名称", trigger: "blur" },
+          {
+            min: 1,
+            max: 30,
+            message: "长度在 1 到 30 个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    rowitem: {
+      handler(newValue) {
+        this.form = newValue;
+      },
+      immediate: true,
+    },
+  },
+  mounted() {},
+  methods: {
+    onSubmit() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          let param = JSON.parse(JSON.stringify(this.form));
+          if (param.id && param.id.length > 0) {
+            roleEdit(param).then((res) => {
+              this.close();
+              this.$message.success(res.data.info);
+              this.$refs["form"].resetFields();
+            });
+          } else {
+            roleCreate(param).then((response) => {
+              this.close();
+              this.$message.success(response.data.info);
+              this.$refs["form"].resetFields();
+            });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    close() {
+      this.$emit("close");
+    },
+  },
+};
+</script>

package/le-role-user/index.js

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