@eim-materials/eim-pc-admin-lite/src/pages/role/mixins/roleMixin.js

该模板适用于从 0 到 1 开始搭建项目，内置基础的页面，路由和菜单展示。

import { roleTreeConfig } from '@/router';
import titleBar from '@/components/title-bar';
import api from '@/api/api';
import vueSelectedUserOrOrg from 'vue-selected-user-or-org/dist/js/vue-selected-user-or-org.min';

export default {
  data() {
    return {
      form: {},
      roleTree: [],
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
        ],
      },
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      checked: false,
      selectedCount: 0,
      allCount: 0,
    };
  },
  components: {
    titleBar,
    vueSelectedUserOrOrg,
  },
  methods: {
    selectedRoleChanged(val) {
      if (val) {
        this.setMenuTreeCheckedKeys(['all']);
      } else {
        this.setMenuTreeCheckedKeys([]);
      }
    },
    setMenuTreeCheckedKeys(key) {
      const selectedKey = [].concat(key);
      this.$refs.menuTree.setCheckedKeys(selectedKey);
    },
    menuTreeDataChange() {
      this.form.perms = this.$refs.menuTree.getCheckedKeys(true);
      this.selectedCount = this.form.perms.length;
      this.checked = this.selectedCount === this.allCount;
    },
    getMenuTreeAllNodesCount(tree) {
      this.allCount += tree.filter(treeNode => !treeNode.children).length;
      const childTree = tree.filter(treeNode => treeNode.children);
      childTree.forEach(treeChild => this.getMenuTreeAllNodesCount(treeChild.children));
    },
    getAdminRoleSave() {
      const paramsObj = {
        id: this.form.id,
        name: this.form.name,
        remarks: this.form.remarks,
        perms: this.form.perms,
        users: this.form.users,
      };
      const params = {
        data: JSON.stringify(paramsObj),
        headers: {
          'content-type': 'application/json; charset=utf-8',
        },
      };
      if (!this.form.name) {
        this.$message({
          message: '角色名称不能为空',
          type: 'error',
        });
        return;
      }
      api.getAdminRoleSave({
        params,
      }).then((data) => {
        if (data.state === 0) {
          this.$message({
            message: data.message,
            type: 'success',
          });
          setTimeout(() => this.$router.go(-1), 2000);
        } else {
          this.$message({
            message: data.message,
            type: 'error',
          });
        }
      });
    },
    deleteSelectedPerson(id) {
      this.form.users.splice(this.form.users.findIndex(person => person.userId === id), 1);
    },
    goBack() {
      this.$router.go(-1);
    },
    save() {
      this.getAdminRoleSave();
    },
    reporterFn(e) {
      e.preventDefault();
      const url = '/uom/user/tree_data';
      const searchUrl = '/uom/user/tree_data';
      const tree = this.$refs.newtree;
      this.selectPerson(url, searchUrl, tree);
    },
    /* eslint no-param-reassign: 0 */
    selectPerson(reqUserUrl, searchUserUrl, tree, callback, maxNum) {
      const selected = [];
      let personData = null;

      // 已选
      if (Array.isArray(this.form.users) && this.form.users.length) {
        this.form.users.forEach((item) => {
          selected.push({
            id: item.userId,
            name: item.userName,
          });
        });
      } else {
        this.form.users = [];
      }
      personData = {
        type: 'user',
        selected,
        reqUserUrl,
        searchUserUrl,
        confirmCallback: (data) => {
          this.form.users.length = 0;
          data.forEach((v) => {
            this.form.users.push({
              userName: v.name || '',
              userId: v.id || '',
            });
          });
          this.form = Object.assign({}, this.form, { users: this.form.users });
          if (typeof callback === 'function') { callback(this.form.users); }
        },
      };
      // 如果传了最大值，默认全选
      if (maxNum) {
        personData.maxNum = maxNum;
      }
      tree.show(personData);
    },
  },
  created() {
    this.roleTree = roleTreeConfig;
    this.getMenuTreeAllNodesCount(this.roleTree);
  },
};