ze-react-component-library/es/ZEAuthEditor/ZEAuthEditor.js

ZeroETP React Component Library

import "antd/es/space/style";
import _Space from "antd/es/space";
import "antd/es/drawer/style";
import _Drawer from "antd/es/drawer";
import "antd/es/radio/style";
import _Radio from "antd/es/radio";
import "antd/es/spin/style";
import _Spin from "antd/es/spin";
import "antd/es/button/style";
import _Button from "antd/es/button";
import "antd/es/popconfirm/style";
import _Popconfirm from "antd/es/popconfirm";
import "antd/es/message/style";
import _message from "antd/es/message";

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
  function adopt(value) {
    return value instanceof P ? value : new P(function (resolve) {
      resolve(value);
    });
  }

  return new (P || (P = Promise))(function (resolve, reject) {
    function fulfilled(value) {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    }

    function rejected(value) {
      try {
        step(generator["throw"](value));
      } catch (e) {
        reject(e);
      }
    }

    function step(result) {
      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
    }

    step((generator = generator.apply(thisArg, _arguments || [])).next());
  });
};

var __generator = this && this.__generator || function (thisArg, body) {
  var _ = {
    label: 0,
    sent: function sent() {
      if (t[0] & 1) throw t[1];
      return t[1];
    },
    trys: [],
    ops: []
  },
      f,
      y,
      t,
      g;
  return g = {
    next: verb(0),
    "throw": verb(1),
    "return": verb(2)
  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
    return this;
  }), g;

  function verb(n) {
    return function (v) {
      return step([n, v]);
    };
  }

  function step(op) {
    if (f) throw new TypeError("Generator is already executing.");

    while (_) {
      try {
        if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
        if (y = 0, t) op = [op[0] & 2, t.value];

        switch (op[0]) {
          case 0:
          case 1:
            t = op;
            break;

          case 4:
            _.label++;
            return {
              value: op[1],
              done: false
            };

          case 5:
            _.label++;
            y = op[1];
            op = [0];
            continue;

          case 7:
            op = _.ops.pop();

            _.trys.pop();

            continue;

          default:
            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
              _ = 0;
              continue;
            }

            if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
              _.label = op[1];
              break;
            }

            if (op[0] === 6 && _.label < t[1]) {
              _.label = t[1];
              t = op;
              break;
            }

            if (t && _.label < t[2]) {
              _.label = t[2];

              _.ops.push(op);

              break;
            }

            if (t[2]) _.ops.pop();

            _.trys.pop();

            continue;
        }

        op = body.call(thisArg, _);
      } catch (e) {
        op = [6, e];
        y = 0;
      } finally {
        f = t = 0;
      }
    }

    if (op[0] & 5) throw op[1];
    return {
      value: op[0] ? op[1] : void 0,
      done: true
    };
  }
};

import React, { useState, useRef, useEffect } from "react";
import flatten from "flat";
import { getRoles, createRole, updateRole, deleteRole, getAccounts, createAccount, updateAccount, deleteAccount } from "../request";
import { getSchemas } from "zeroetp-api-sdk";
import { roleColumns, accountColumns } from "./constants";
import { useRequest } from "@umijs/hooks";
import useLocale from "../hooks/useLocale";
import ProTable from "@ant-design/pro-table";
import DefaultQueryHandler from "./DefaultQueryHandler";
import ZESchemaForm from "../ZESchemaForm";
import { getColumnSimpleSearchProps } from "../components/PropertyFilter/FilterComponents";
import { queryToTreeRules, treeRulesToDefaultQuery } from "../ZEUtil/rule.util";
import { usePageMenus } from "../ZEConfigProvider";
var types = [{
  label: "角色",
  value: "role"
}, {
  label: "账号",
  value: "account"
}];

var loopRoles = function loopRoles(arr, source, level, currentRole, filter) {
  return arr.map(function (d) {
    var disabled = d.role === currentRole;
    var children = source.filter(function (a) {
      return a.parent === d.role;
    });
    var restSource = source.filter(function (a) {
      return a.parent !== d.role;
    });

    if (d.parent && level === 0) {
      return null;
    }

    if (disabled) {
      return null;
    }

    return {
      label: d.role,
      value: d.role,
      children: loopRoles(children, restSource, level + 1, currentRole, filter)
    };
  }).filter(function (f) {
    return f && (filter ? filter(f) : true);
  });
};

var genDefaultQueryHandlerValue = function genDefaultQueryHandlerValue(schemas, editingRecord) {
  var permissions = {};

  if (editingRecord === null || editingRecord === void 0 ? void 0 : editingRecord.resource) {
    var resources = editingRecord.resource.split("|");

    var _loop_1 = function _loop_1(resource) {
      var _a = resource.split(":"),
          schema = _a[0],
          permission = _a[1];

      if (schema === "*") {
        schemas.forEach(function (s) {
          permissions[s._id] = permission || "w";
        });
      } else {
        permissions[schema] = permission || "w";
      }
    };

    for (var _i = 0, resources_1 = resources; _i < resources_1.length; _i++) {
      var resource = resources_1[_i];

      _loop_1(resource);
    }
  }

  var defaultQuery = editingRecord ? editingRecord.default_query : {};
  var parsedQuery = {};

  if (defaultQuery) {
    Object.keys(defaultQuery).forEach(function (k) {
      try {
        parsedQuery[k] = JSON.parse(defaultQuery[k]);
      } catch (error) {
        parsedQuery[k] = defaultQuery[k];
      }
    });
  }

  var ret = schemas === null || schemas === void 0 ? void 0 : schemas.map(function (s) {
    return {
      _id: s._id,
      schema: s,
      permission: permissions[s._id] || "n",
      rule: parsedQuery[s._id] ? [queryToTreeRules(parsedQuery[s._id])] : [{
        id: "0"
      }]
    };
  });
  return ret;
};

var ZEAuthEditor = function ZEAuthEditor() {
  var _a;

  var t = useLocale().t;
  var pageMenus = usePageMenus();

  var _b = useState(false),
      drawerVisible = _b[0],
      setDrawerVisible = _b[1];

  var _c = useState(),
      editingRecord = _c[0],
      _setEditingRecord = _c[1];

  var formRef = useRef();

  var _d = useState(false),
      saveLoading = _d[0],
      setSaveLoading = _d[1];

  var _e = useState("edit"),
      mode = _e[0],
      setMode = _e[1];

  var _f = useState("role"),
      type = _f[0],
      setType = _f[1];

  var _g = useState(),
      accountRole = _g[0],
      setAccountRole = _g[1];

  var typeName = (_a = types.find(function (d) {
    return d.value === type;
  })) === null || _a === void 0 ? void 0 : _a.label;
  var fetches = {
    getAllData: type === "role" ? getRoles : getAccounts,
    createData: type === "role" ? createRole : createAccount,
    updateData: type === "role" ? updateRole : updateAccount,
    deleteData: type === "role" ? deleteRole : deleteAccount
  };
  var tableRef = useRef();
  var getAllData = fetches.getAllData,
      createData = fetches.createData,
      updateData = fetches.updateData,
      deleteData = fetches.deleteData;

  var _h = useRequest(getRoles, {
    formatResult: function formatResult(res) {
      return (res === null || res === void 0 ? void 0 : res.roles) || [];
    },
    manual: true
  }),
      _j = _h.data,
      roles = _j === void 0 ? [] : _j,
      loadRoles = _h.run;

  var _k = useRequest(type === "role" ? getAllData : function () {
    return Promise.resolve(null);
  }, {
    formatResult: function formatResult(res) {
      return (res === null || res === void 0 ? void 0 : res[type === "role" ? "roles" : "accounts"]) || [];
    },
    refreshDeps: [type]
  }),
      _l = _k.data,
      data = _l === void 0 ? [] : _l,
      fetchData = _k.run,
      loading = _k.loading;

  var schemas = useRequest(getSchemas, {
    formatResult: function formatResult(res) {
      return (res === null || res === void 0 ? void 0 : res.schemas) || [];
    }
  }).data;

  var getInitialValues = function getInitialValues(record) {
    if (record === void 0) {
      record = editingRecord;
    }

    var isAdmin = type === "account" && (record === null || record === void 0 ? void 0 : record.role) === "admin";
    var permissions = pageMenus === null || pageMenus === void 0 ? void 0 : pageMenus.map(function (_m) {
      var _a;

      _m.id = _m.path;
      var m = (_a = record === null || record === void 0 ? void 0 : record.menu_permissions) === null || _a === void 0 ? void 0 : _a.find(function (f) {
        return f.path === _m.path;
      });

      if (!m) {
        m = __assign(__assign({}, _m), {
          menus: _m.menus.map(function (d) {
            return d.value;
          })
        });
      }

      var fm = flatten({
        permissions: m
      }, {
        maxDepth: 2
      });
      return __assign({
        id: m.id,
        permissions: m
      }, fm);
    });
    return __assign(__assign({}, record), {
      permissions: isAdmin ? permissions : [],
      default_query: genDefaultQueryHandlerValue(schemas, record)
    });
  };

  var setEditingRecord = function setEditingRecord(v) {
    _setEditingRecord(v);

    setAccountRole(v === null || v === void 0 ? void 0 : v.role);
  };

  var onCancel = function onCancel() {
    setMode("edit");
    setDrawerVisible(false);
    setEditingRecord(null);
  };

  var onFinish = function onFinish() {
    return __awaiter(void 0, void 0, void 0, function () {
      var formData, menu_permissions, promise, query, default_query_1, resources_2, payload;

      var _a, _b;

      return __generator(this, function (_c) {
        setSaveLoading(true);
        formData = ((_a = formRef.current) === null || _a === void 0 ? void 0 : _a.getFieldsValue()) || {};
        menu_permissions = ((_b = formData.permissions) === null || _b === void 0 ? void 0 : _b.map(function (d) {
          var _a;

          delete d.id;
          delete d.permissions;
          return (_a = flatten.unflatten(d)) === null || _a === void 0 ? void 0 : _a.permissions;
        })) || []; // 删掉多余字段

        if (formData.permissions) {
          delete formData.permissions;
        }

        try {
          promise = void 0;
          query = formData.default_query || [];
          default_query_1 = {};
          resources_2 = [];
          query.forEach(function (d) {
            if (d.rule instanceof Array) {
              var schemaQuery = treeRulesToDefaultQuery(d.rule)[0];

              if (schemaQuery) {
                default_query_1[d.schema._id] = schemaQuery;
              }
            }

            resources_2.push(d.schema._id + ":" + d.permission);
          });
          payload = __assign(__assign({}, formData), {
            default_query: default_query_1,
            menu_permissions: menu_permissions,
            resource: resources_2.join("|")
          });

          if (payload.default_query && Object.keys(payload.default_query).length === 0) {
            delete payload.default_query;
          }

          if (editingRecord) {
            delete payload._id;
            promise = updateData(editingRecord._id, payload);
          } else {
            promise = createData(payload);
          }

          promise.then(function () {
            var _a, _b;

            _message.success("保存成功");

            onCancel();

            if (type === "account") {
              editingRecord ? (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.reload() : (_b = tableRef.current) === null || _b === void 0 ? void 0 : _b.reloadAndRest();
            } else {
              fetchData();
            }
          }).finally(function () {
            setSaveLoading(false);
          });
        } catch (error) {
          console.log(error);
        }

        return [2
        /*return*/
        ];
      });
    });
  };

  var onDelete = function onDelete(id) {
    return __awaiter(void 0, void 0, void 0, function () {
      var res;
      return __generator(this, function (_a) {
        switch (_a.label) {
          case 0:
            if (!id) return [3
            /*break*/
            , 2];
            return [4
            /*yield*/
            , deleteData(id)];

          case 1:
            res = _a.sent();

            if (res) {
              _message.success("删除成功");

              fetchData();
            }

            _a.label = 2;

          case 2:
            return [2
            /*return*/
            ];
        }
      });
    });
  };

  var columns = (type === "role" ? roleColumns : accountColumns).map(function (d) {
    var filterProps = getColumnSimpleSearchProps(d.dataIndex);
    return __assign(__assign(__assign({}, d), {
      width: 200,
      title: t(d.title)
    }), ["role", "username", "name"].includes(d.dataIndex) ? __assign(__assign({}, filterProps), {
      filterDropdown: function filterDropdown(args) {
        var _a;

        return (_a = filterProps === null || filterProps === void 0 ? void 0 : filterProps.filterDropdown) === null || _a === void 0 ? void 0 : _a.call(filterProps, __assign(__assign({}, args), {
          t: t
        }));
      }
    }) : {});
  }).concat([{
    title: t("action"),
    fixed: "right",
    width: 140,
    valueType: "option",
    render: function render(text, record) {
      return [/*#__PURE__*/React.createElement("a", {
        key: "edit",
        onClick: function onClick() {
          setMode("edit");
          setDrawerVisible(true);
          setEditingRecord(record);
        }
      }, "\u7F16\u8F91"), /*#__PURE__*/React.createElement(_Popconfirm, {
        title: "\u662F\u5426\u786E\u5B9A\u5220\u9664",
        key: "delete",
        onConfirm: function onConfirm() {
          onDelete(record === null || record === void 0 ? void 0 : record._id);
        }
      }, /*#__PURE__*/React.createElement(_Button, {
        type: "link",
        danger: true,
        style: {
          padding: 0
        }
      }, "\u5220\u9664"))];
    }
  }]);
  var roleOptions = loopRoles(roles, roles, 0);
  useEffect(function () {
    var _a;

    if (type === "account") {
      (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.reloadAndRest();
    }
  }, [type]);
  useEffect(function () {
    if (drawerVisible) {
      loadRoles();
    }
  }, [drawerVisible]);
  useEffect(function () {
    var _a, _b;

    (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.resetFields();
    (_b = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _b === void 0 ? void 0 : _b.setFieldsValue(getInitialValues());
  }, [editingRecord, drawerVisible]);
  return /*#__PURE__*/React.createElement(_Spin, {
    spinning: loading
  }, /*#__PURE__*/React.createElement(ProTable, {
    key: type,
    actionRef: tableRef,
    toolBarRender: function toolBarRender() {
      return [/*#__PURE__*/React.createElement(_Radio.Group, {
        key: "type",
        options: types,
        onChange: function onChange(e) {
          setType(e.target.value);
          setAccountRole(undefined);
        },
        value: type,
        optionType: "button"
      }), /*#__PURE__*/React.createElement(_Button, {
        key: "add",
        type: "primary",
        onClick: function onClick() {
          setMode("edit");
          setDrawerVisible(true);
          setEditingRecord(null);
        }
      }, "\u65B0\u5EFA")];
    },
    rowKey: "_id",
    headerTitle: /*#__PURE__*/React.createElement(React.Fragment, null, typeName, "\u5217\u8868"),
    dataSource: type === "account" ? undefined : data,
    request: type === "account" ? function (params, sort, _filter) {
      return __awaiter(void 0, void 0, void 0, function () {
        var filter;
        return __generator(this, function (_a) {
          switch (_a.label) {
            case 0:
              filter = {};
              Object.entries(_filter).map(function (_a) {
                var k = _a[0],
                    v = _a[1];

                if (v) {
                  filter[k] = v;
                }
              });
              return [4
              /*yield*/
              , fetches.getAllData(__assign(__assign({}, params), filter))];

            case 1:
              return [2
              /*return*/
              , _a.sent()];
          }
        });
      });
    } : undefined,
    columns: columns,
    search: false,
    options: false,
    scroll: {
      x: columns.reduce(function (p, c) {
        return p + c.width;
      }, 0)
    },
    pagination: type === "account" ? {
      pageSize: 10
    } : false
  }), /*#__PURE__*/React.createElement(_Drawer, {
    open: drawerVisible,
    width: 600,
    maskClosable: mode === "edit" ? false : true,
    onClose: onCancel,
    title: editingRecord ? "\u66F4\u65B0" + typeName : "\u65B0\u589E" + typeName,
    footer: mode === "edit" ? /*#__PURE__*/React.createElement("div", {
      style: {
        display: "flex",
        flexDirection: "row-reverse"
      }
    }, /*#__PURE__*/React.createElement(_Space, null, /*#__PURE__*/React.createElement(_Button, {
      onClick: onCancel
    }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(_Button, {
      type: "primary",
      onClick: function onClick() {
        var _a;

        (_a = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _a === void 0 ? void 0 : _a.submit();
      },
      loading: saveLoading
    }, "\u786E\u5B9A"))) : false
  }, type === "role" ? /*#__PURE__*/React.createElement(ZESchemaForm, {
    schemaID: "role",
    formRef: formRef,
    columns: roleColumns.map(function (d) {
      if (d === null || d === void 0 ? void 0 : d.title) {
        d.title = t(d.title);
      }

      if (d.dataIndex === "role" && editingRecord) {
        return __assign(__assign({}, d), {
          readonly: true
        });
      }

      if (d.dataIndex === "parent") {
        return __assign(__assign({}, d), {
          fieldProps: function fieldProps(form, config) {
            var currentRole = form.getFieldValue("role");
            return {
              options: loopRoles(roles, roles, 0, currentRole, function (f) {
                return (f === null || f === void 0 ? void 0 : f.value) !== "admin";
              }),
              treeDefaultExpandAll: true
            };
          }
        });
      }

      if (d.dataIndex === "default_query") {
        return __assign(__assign({}, d), {
          renderFormItem: function renderFormItem(_dom, config) {
            return /*#__PURE__*/React.createElement(DefaultQueryHandler, __assign({}, config, {
              type: "role"
            }));
          }
        });
      }

      return d;
    }),
    isKeyPressSubmit: false,
    schema: {
      _id: "role",
      type: "entity",
      name: "角色",
      properties: [{
        name: "role",
        primal_type: "string",
        type: "string",
        constraints: {
          required: true
        }
      }]
    },
    submitter: false,
    onFinish: onFinish
  }) : /*#__PURE__*/React.createElement(ZESchemaForm, {
    schemaID: "account",
    formRef: formRef,
    initialValues: getInitialValues(),
    columns: accountColumns.map(function (d) {
      if (d === null || d === void 0 ? void 0 : d.title) {
        d.title = t(d.title);
      }

      if (d.dataIndex === "username" && editingRecord) {
        return __assign(__assign({}, d), {
          readonly: true
        });
      }

      if (d.dataIndex === "role") {
        return __assign(__assign({}, d), {
          fieldProps: {
            options: roleOptions,
            treeDefaultExpandAll: true,
            onChange: function onChange(v) {
              var _a;

              setAccountRole(v); // 重置permissions

              (_a = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _a === void 0 ? void 0 : _a.setFieldsValue({
                permissions: getInitialValues({
                  role: v
                }).permissions
              });
            }
          }
        });
      }

      if (d.dataIndex === "default_query") {
        return __assign(__assign({}, d), {
          renderFormItem: function renderFormItem(_dom, config) {
            return /*#__PURE__*/React.createElement(DefaultQueryHandler, __assign({}, config, {
              type: "account"
            }));
          }
        });
      }

      if (d.dataIndex === "permissions") {
        return __assign(__assign({}, d), {
          valueType: "table",
          hideInForm: accountRole !== "admin",
          fieldProps: {
            recordCreatorProps: {
              style: {
                display: "none"
              }
            }
          },
          columns: [{
            dataIndex: "permissions.page",
            title: "页面名称",
            editable: false,
            width: 120
          }, {
            dataIndex: "permissions.path",
            title: "页面路径",
            editable: false,
            width: 120
          }, {
            dataIndex: "permissions.menus",
            title: "显示菜单",
            valueType: "checkboxGroup",
            fieldProps: function fieldProps(_, _a) {
              var _b;

              var entity = _a.entity;
              var path = entity["permissions.path"];
              return {
                options: (_b = pageMenus === null || pageMenus === void 0 ? void 0 : pageMenus.find(function (d) {
                  return d.path === path;
                })) === null || _b === void 0 ? void 0 : _b.menus
              };
            }
          }]
        });
      }

      return d;
    }),
    isKeyPressSubmit: false,
    schema: {
      _id: "account",
      type: "entity",
      name: "账号",
      properties: [{
        name: "username",
        primal_type: "string",
        type: "string",
        constraints: {
          required: true
        }
      }, {
        name: "name",
        primal_type: "string",
        type: "string",
        constraints: {
          required: true
        }
      }, {
        name: "password",
        primal_type: "string",
        type: "string",
        constraints: {
          required: editingRecord ? false : true
        }
      }, {
        name: "role",
        primal_type: "string",
        type: "string",
        constraints: {
          required: true
        }
      }]
    },
    submitter: false,
    onFinish: onFinish
  })));
};

export default ZEAuthEditor;