ylyx-cli 1.0.14 → 1.0.16

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

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