ylyx-cli 1.0.0

package/templates/vue-app/files/src/views/systemSet/role/index.vue

@@ -0,0 +1,314 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <div v-if="crud.props.searchToggle">
+        <!-- 搜索 -->
+        <el-input
+          v-model="query.blurry"
+          size="small"
+          clearable
+          placeholder="输入角色名称"
+          style="width: 200px"
+          class="filter-item"
+          @keyup.enter.native="crud.toQuery" />
+        <rrOperation />
+      </div>
+      <crudOperation :permission="permission" />
+    </div>
+    <!-- 表单渲染 -->
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :before-close="crud.cancelCU"
+      :visible.sync="crud.status.cu > 0"
+      :title="crud.status.title"
+      width="520px">
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="角色名称" prop="name">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="角色说明" prop="description">
+          <el-input v-model="form.description" rows="5" type="textarea" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="crud.cancelCU">取消</el-button>
+        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU"
+          >确认</el-button
+        >
+      </div>
+    </el-dialog>
+    <el-row :gutter="15">
+      <!--角色管理-->
+      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17" style="margin-bottom: 10px">
+        <el-card class="box-card" shadow="never">
+          <div slot="header" class="clearfix">
+            <span class="role-span">角色列表</span>
+          </div>
+          <el-table
+            ref="table"
+            v-loading="crud.loading"
+            highlight-current-row
+            style="width: 100%"
+            :data="crud.data"
+            @selection-change="crud.selectionChangeHandler"
+            @current-change="handleCurrentChange">
+            <el-table-column label="序号" type="index" align="center">
+              <template slot-scope="scope">
+                 <span>{{ (crud.page.page - 1) * crud.page.size + scope.$index + 1 }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="角色" />
+            <el-table-column :show-overflow-tooltip="true" prop="description" label="角色说明" />
+            <el-table-column
+              :show-overflow-tooltip="true"
+              width="165px"
+              prop="updateTime"
+              label="更新时间" />
+            <el-table-column
+              v-if="checkPer(['admin', 'roles:edit', 'roles:del'])"
+              label="操作"
+              width="120px"
+              align="center"
+              fixed="right">
+              <template slot-scope="scope">
+                <udOperation :data="scope.row" :permission="permission" />
+              </template>
+            </el-table-column>
+          </el-table>
+          <!--分页组件-->
+          <pagination />
+        </el-card>
+      </el-col>
+      <!--       菜单授权-->
+      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="7">
+        <el-card class="box-card" shadow="never">
+          <div slot="header" class="clearfix">
+            <el-tooltip class="item" effect="dark" content="选择指定角色分配菜单" placement="top">
+              <span class="role-span">菜单分配</span>
+            </el-tooltip>
+            <el-button
+              v-permission="['admin', 'roles:edit']"
+              :disabled="!showButton"
+              :loading="menuLoading"
+              icon="el-icon-check"
+              size="mini"
+              style="float: right; padding: 6px 9px"
+              type="primary"
+              @click="saveMenu"
+              >保存</el-button
+            >
+          </div>
+          <div>
+            <el-checkbox v-model="checked" @change="handleCheckboxChange">全部权限</el-checkbox>
+            <el-tree
+              ref="menu"
+              lazy
+              :data="menus"
+              :default-checked-keys="menuIds"
+              :load="getMenuDatas"
+              :props="defaultProps"
+              check-strictly
+              accordion
+              show-checkbox
+              node-key="id"
+              @check="menuChange" />
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import crudRoles from '@/api/system/role';
+import { getMenusTree, getChild } from '@/api/system/menu';
+import CRUD, { presenter, header, form, crud } from '@crud/crud';
+import rrOperation from '@crud/RR.operation';
+import crudOperation from '@crud/CRUD.operation';
+import udOperation from '@crud/UD.operation';
+import pagination from '@crud/Pagination';
+import DateRangePicker from '@/components/DateRangePicker';
+let defaultmenus = [];
+let firstMenu = [];
+const defaultForm = { id: null, name: null, description: null };
+export default {
+  name: 'Role',
+  components: { pagination, crudOperation, rrOperation, udOperation, DateRangePicker },
+  cruds() {
+    return CRUD({
+      title: '角色',
+      url: 'api/roles',
+      sort: 'updateTime,desc',
+      crudMethod: { ...crudRoles },
+    });
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      defaultProps: { children: 'children', label: 'label', isLeaf: 'leaf' },
+      currentId: 0,
+      menuLoading: false,
+      showButton: false,
+      menus: [],
+      menuIds: [], // 多选时使用
+      permission: {
+        add: ['admin', 'roles:add'],
+        edit: ['admin', 'roles:edit'],
+        del: ['admin', 'roles:del'],
+      },
+      rules: {
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        permission: [{ required: true, message: '请输入权限', trigger: 'blur' }],
+      },
+      checked: false,
+    };
+  },
+  watch: {
+    checked(val) {
+      // console.log(val,'watch')
+    },
+  },
+  methods: {
+    handleCheckboxChange(val) {
+      this.checked = val;
+      const data = this.$refs.menu.getCheckedKeys();
+      console.log(data, 'data');
+      if (val === true) {
+        this.menuIds = [];
+        defaultmenus.forEach((item, index) => {
+          this.menuChange(item, data);
+        });
+      } else {
+        this.menuIds = [];
+        firstMenu = [];
+        this.$refs.menu.setCheckedKeys(this.menuIds);
+      }
+    },
+    getMenuDatas(node, resolve) {
+      setTimeout(() => {
+        getMenusTree(node.data.id ? node.data.id : 0).then(res => {
+          if (node.data.id === undefined) defaultmenus = res.content;
+          console.log('defaultmenus', defaultmenus);
+          resolve(res.content);
+        });
+      }, 100);
+    },
+    [CRUD.HOOK.beforeRefresh](crud) {
+      crud.query.loginType = 0;
+    },
+    [CRUD.HOOK.afterRefresh]() {
+      this.$refs.menu.setCheckedKeys([]);
+    },
+    // 触发单选
+    handleCurrentChange(val) {
+      if (val) {
+        const _this = this;
+        // 清空菜单的选中
+        this.$refs.menu.setCheckedKeys([]);
+        // 保存当前的角色id
+        this.currentId = val.id;
+        // 初始化默认选中的key
+        this.menuIds = [];
+        val.menus.forEach(function (data) {
+          _this.menuIds.push(data.id);
+        });
+        this.showButton = true;
+      }
+    },
+    menuChange(menu, data) {
+      console.log(data);
+      let flag;
+      if (data.checkedKeys) {
+        flag = data.checkedKeys.indexOf(menu.id) !== -1;
+      } else {
+        flag = data.indexOf(menu.id) !== -1;
+      }
+      const param = {
+        id: menu.id,
+        flag: flag,
+      };
+      // 获取该节点的所有子节点，id 包含自身
+      getChild(param).then(childIds => {
+        // 判断是否在 menuIds 中，如果存在则删除，否则添加
+        if (this.menuIds.indexOf(menu.id) !== -1) {
+          for (let i = 0; i < childIds.length; i++) {
+            const index = this.menuIds.indexOf(childIds[i]);
+            if (index !== -1) {
+              this.menuIds.splice(index, 1);
+            }
+          }
+        } else {
+          for (let i = 0; i < childIds.length; i++) {
+            const index = this.menuIds.indexOf(childIds[i]);
+            if (index === -1) {
+              this.menuIds.push(childIds[i]);
+            }
+          }
+        }
+        if (menu.type === 1) {
+          if (this.menuIds.indexOf(menu.id) !== -1) {
+            if (firstMenu.indexOf(menu.id) === -1) firstMenu.push(menu.id);
+          } else {
+            const index = firstMenu.indexOf(menu.id);
+            firstMenu.splice(index, 1);
+          }
+        }
+        console.log(defaultmenus.length, firstMenu.length);
+        this.checked = defaultmenus.length === firstMenu.length;
+        this.$refs.menu.setCheckedKeys(this.menuIds);
+      });
+    },
+    // 保存菜单
+    saveMenu() {
+      this.menuLoading = true;
+      const role = { id: this.currentId, menus: [] };
+      // 得到已选中的 key 值
+      this.menuIds.forEach(function (id) {
+        const menu = { id: id };
+        role.menus.push(menu);
+      });
+      crudRoles
+        .editMenu(role)
+        .then(() => {
+          this.crud.notify('保存成功', CRUD.NOTIFICATION_TYPE.SUCCESS);
+          this.menuLoading = false;
+          this.update();
+        })
+        .catch(() => {
+          this.menuLoading = false;
+        });
+    },
+    // 改变数据
+    update() {
+      // 无刷新更新 表格数据
+      crudRoles.get(this.currentId).then(res => {
+        for (let i = 0; i < this.crud.data.length; i++) {
+          if (res.id === this.crud.data[i].id) {
+            this.crud.data[i] = res;
+            break;
+          }
+        }
+      });
+    },
+    checkboxT(row) {
+      return true;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.role-span {
+  font-weight: bold;
+  color: #303133;
+  font-size: 15px;
+}
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+///*::v-deep .el-input-number .el-input__inner {*/
+///*   text-align: left;*/
+///* }*/
+</style>