diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/addForm.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/addForm.vue
new file mode 100644
index 0000000..c7bfa1d
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/addForm.vue
@@ -0,0 +1,68 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    @cancel="onCancel"
+    @ok="onOk"
+    class="yo-modal-form"
+    title="新增应用"
+  >
+    <FormBody ref="form-body" />
+  </a-modal>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口
+     */
+    onOpen() {
+      this.visible = true;
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.$refs['form-body'].onValidate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api.sysRoleAdd(this.$refs['form-body'].form).then(({ success, message }) => {
+            this.confirmLoading = false;
+            if (success) {
+              this.$message.success('编辑成功');
+              this.onCancel();
+              this.$emit('ok');
+            } else {
+              this.$message.error(message);
+            }
+          });
+        }
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.$refs['form-body'].onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/editForm.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/editForm.vue
new file mode 100644
index 0000000..79bc11f
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/editForm.vue
@@ -0,0 +1,72 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    @cancel="onCancel"
+    @ok="onOk"
+    class="yo-modal-form"
+    title="角色编辑"
+  >
+    <FormBody ref="form-body" />
+  </a-modal>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+
+      confirmLoading: false,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口,并填充外部传入的数据
+     */
+    onOpen(record) {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.$refs['form-body'].onFillData(record);
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.$refs['form-body'].onValidate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api.sysRoleEdit(this.$refs['form-body'].form).then(({ success, message }) => {
+            this.confirmLoading = false;
+            if (success) {
+              this.$message.success('编辑成功');
+              this.onCancel();
+              this.$emit('ok');
+            } else {
+              this.$message.error(message);
+            }
+          });
+        }
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.$refs['form-body'].onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/form.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/form.vue
new file mode 100644
index 0000000..a1de03e
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/form.vue
@@ -0,0 +1,70 @@
+<template>
+  <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
+    <div class="yo-form-group">
+      <a-form-model-item label="角色名" prop="name">
+        <a-input placeholder="请输入角色名" v-model="form.name" />
+      </a-form-model-item>
+      <a-form-model-item label="唯一编码" prop="code">
+        <a-input placeholder="请输入唯一编码" v-model="form.code" />
+      </a-form-model-item>
+      <a-form-model-item label="排序" prop="sort">
+        <a-input-number
+          :max="1000"
+          :min="0"
+          class="w-100-p"
+          placeholder="请输入排序"
+          v-model="form.sort"
+        />
+      </a-form-model-item>
+        <a-form-model-item
+          label="备注"
+          prop="remark"
+        >
+          <a-textarea v-model="form.remark" :rows="4" placeholder="请输入备注"></a-textarea>
+        </a-form-model-item>
+    </div>
+  </a-form-model>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        active: 'N',
+      },
+      rules: {
+        name: [{ required: true, message: '请输入应用名称' }],
+        code: [{ required: true, message: '请输入唯一编码' }],
+      },
+    };
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      this.form = this.$_.cloneDeep(record);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.form = {};
+        this.$refs.form.resetFields();
+      }, 300);
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/index.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/index.vue
new file mode 100644
index 0000000..efe37c7
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/index.vue
@@ -0,0 +1,219 @@
+<template>
+  <container>
+    <br />
+    <a-card :bordered="false">
+      <Auth auth="sysApp:page">
+        <div class="yo-query-bar">
+          <a-form-model :model="query" layout="inline">
+            <a-form-model-item label="角色名称">
+              <a-input placeholder="请输入角色名称" v-model="query.name" />
+            </a-form-model-item>
+            <a-form-model-item label="唯一编号">
+              <a-input placeholder="请输入唯一编码" v-model="query.code" />
+            </a-form-model-item>
+            <a-form-model-item>
+              <a-button-group>
+                <a-button @click="onQuery" type="primary">查询</a-button>
+                <a-button
+                  @click="
+                    () => {
+                      (query = {}), onQuery();
+                    }
+                  "
+                  >重置</a-button
+                >
+              </a-button-group>
+            </a-form-model-item>
+          </a-form-model>
+        </div>
+      </Auth>
+
+      <yo-table :columns="columns" :load-data="loadData" ref="table">
+        <div class="yo-action-bar" slot="title">
+          <div class="yo-action-bar--actions">
+            <a-button @click="onOpen('add-form')">新建角色</a-button>
+          </div>
+        </div>
+
+        <span slot="action" slot-scope="text, record">
+          <yo-table-actions>
+            <Auth auth="sysApp:edit">
+              <a @click="onOpen('edit-form', record)">编辑</a>
+            </Auth>
+            <Auth auth="[sysApp:grantMenu],[sysApp:grantData],[sysRole:delete]">
+              <a-dropdown>
+                <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
+                <a-menu slot="overlay">
+                  <Auth auth="sysApp:grantMenu">
+                    <a-menu-item>
+                      <a style="color:#005cb1;" @click="$refs.roleMenuForm.roleMenu(record)"
+                        >授权菜单</a
+                      >
+                    </a-menu-item>
+                  </Auth>
+                  <Auth auth="sysApp:grantData">
+                    <a-menu-item>
+                      <a style="color:#005cb1;" @click="$refs.roleOrgForm.roleOrg(record)">授权数据</a>
+                    </a-menu-item>
+                  </Auth>
+                  <Auth auth="sysApp:delete">
+                    </a-menu-item>
+                    <a-menu-item>
+                    <a-popconfirm
+                      @confirm="onDelete(record)"
+                      placement="topRight"
+                      title="是否确认删除"
+                    >
+                      <a style="color:#005cb1;">删除</a>
+                    </a-popconfirm>
+                     </a-menu-item>
+                  </Auth>
+                </a-menu>
+              </a-dropdown>
+            </Auth>
+          </yo-table-actions>
+        </span>
+      </yo-table>
+    </a-card>
+    <br />
+     <add-form @ok="onReloadData" ref="add-form" />
+     <edit-form @ok="onReloadData" ref="edit-form" />
+      <role-menu-form ref="roleMenuForm" @ok="onReloadData"/>
+      <role-org-form ref="roleOrgForm" @ok="onReloadData"/>
+  </container>
+</template>
+<script>
+import AddForm from './addForm';
+import editForm from "./editForm";
+import roleMenuForm from "./roleMenuForm";
+import roleOrgForm from "./roleOrgForm";
+export default {
+  components: {
+    AddForm,
+    editForm,
+    roleMenuForm,
+    roleOrgForm,
+  },
+  data() {
+    return {
+      query: {},
+      columns: [
+        {
+          title: "角色名",
+          dataIndex: "name",
+        },
+        {
+          title: "唯一编码",
+          dataIndex: "code",
+        },
+        {
+          title: "排序",
+          dataIndex: "sort",
+        },
+        {
+          title: "操作",
+          width: "200px",
+          dataIndex: "action",
+          scopedSlots: {
+            customRender: "action",
+          },
+        },
+      ],
+    };
+  },
+  created() {
+    this.onLoadCodes();
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api
+        .getRolePage({
+          ...params,
+          ...this.query,
+        })
+        .then((res) => {
+          return res.data;
+        });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+    },
+
+    /**
+     * 加载字典数据时的必要方法
+     */
+    onLoadCodes() {
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownWait({ code: "yes_or_no" }),
+          this.$api.sysDictTypeDropDownWait({ code: "common_status" }),
+        ])
+        .then(([yesOrNo, commonStatus]) => {
+          this.codes.find((p) => p.code === "yes_or_no").values = yesOrNo.data;
+          this.codes.find((p) => p.code === "common_status").values =
+            commonStatus.data;
+        });
+    },
+    bindCodeValue(code, name) {
+      const c = this.codes
+        .find((p) => p.code == name)
+        .values.find((p) => p.code == code);
+      if (c) {
+        return c.value;
+      }
+      return null;
+    },
+
+    /**
+     * 有编辑新增功能的必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, record) {
+      this.$refs[formName].onOpen(record);
+    },
+
+    onResult(success, message, successMessage) {
+      if (success) {
+        this.$message.success(successMessage);
+        this.onReloadData();
+      } else {
+        this.$refs.table.onLoaded();
+        this.$message.error(message);
+      }
+    },
+
+    onSetDefault(record) {
+      this.$refs.table.onLoading();
+      this.$api
+        .sysAppSetAsDefault({ id: record.id })
+        .then(({ success, message }) => {
+          this.onResult(success, message, "设置成功");
+        });
+    },
+
+    onDelete(record) {
+      this.$refs.table.onLoading();
+      this.$api.sysRoleDel(record).then(({ success, message }) => {
+        this.onResult(success, message, "删除成功");
+      });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/roleMenuForm.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/roleMenuForm.vue
new file mode 100644
index 0000000..7d372ce
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/roleMenuForm.vue
@@ -0,0 +1,168 @@
+<template>
+  <a-modal
+    title="授权菜单"
+    :width="600"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="formLoading">
+      <a-form :form="form">
+
+        <a-form-item
+          label="菜单权限"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol">
+
+          <a-tree
+            v-model="checkedKeys"
+            multiple
+            checkable
+            :auto-expand-parent="autoExpandParent"
+            :expanded-keys="expandedKeys"
+            :tree-data="menuTreeData"
+            :selected-keys="selectedKeys"
+            :replaceFields="replaceFields"
+            @expand="onExpand"
+            @select="onSelect"
+            @check="treeCheck"
+          />
+          </a-tree></a-form-item>
+
+      </a-form>
+
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+//   import { sysRoleOwnMenu, sysRoleGrantMenu } from '@/api/modular/system/roleManage'
+
+  export default {
+    data () {
+      return {
+        labelCol: {
+          style: { 'padding-right': '20px' },
+          xs: { span: 24 },
+          sm: { span: 5 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 15 }
+        },
+        menuTreeData: [],
+        expandedKeys: [],
+        checkedKeys: [],
+        halfCheckedKeys: [],
+        visible: false,
+        confirmLoading: false,
+        formLoading: true,
+        autoExpandParent: true,
+        selectedKeys: [],
+        subValues: [],
+        roleEntity: [],
+        replaceFields: {
+          key: 'id'
+        },
+        form: this.$form.createForm(this)
+      }
+    },
+
+    methods: {
+      // 初始化方法
+      roleMenu (record) {
+        this.formLoading = true
+        this.roleEntity = record
+        this.visible = true
+        this.getMenuTree()
+        this.expandedMenuKeys(record)
+      },
+
+      /**
+       * 获取菜单列表
+       */
+      getMenuTree () {
+        this.$api.SysMenuTreeForGrant().then((res) => {
+           if (res.success) {
+             this.menuTreeData = res.data
+             // 默认展开目录级
+             this.menuTreeData.forEach(item => {
+               this.expandedKeys.push(item.id)
+             })
+           }
+        })
+      },
+
+      /**
+       * 此角色已有菜单权限
+       */
+      expandedMenuKeys (record) {
+        this.$api.sysRoleOwnMenu({ id: record.id }).then((res) => {
+          if (res.success) {
+            this.checkedKeys = res.data
+            this.findAllChildren(this.menuTreeData)
+          }
+          this.formLoading = false
+        })
+      },
+
+      treeCheck (checkKeys, event) {
+        this.halfCheckedKeys = event.halfCheckedKeys
+      },
+      onExpand (expandedKeys) {
+        this.expandedKeys = expandedKeys
+        this.autoExpandParent = false
+      },
+      onCheck (checkedKeys) {
+        this.checkedKeys = checkedKeys
+      },
+      onSelect (selectedKeys, info) {
+        this.selectedKeys = selectedKeys
+      },
+
+      handleSubmit () {
+        const { form: { validateFields } } = this
+        this.confirmLoading = true
+        validateFields((errors, values) => {
+          if (!errors) {
+             this.$api.sysRoleGrantMenu({ id: this.roleEntity.id, grantMenuIdList: this.checkedKeys.concat(this.halfCheckedKeys) }).then((res) => {
+              if (res.success) {
+                this.$message.success('授权成功')
+                this.confirmLoading = false
+                this.$emit('ok', values)
+                this.handleCancel()
+              } else {
+                this.$message.error('授权失败：' + res.message)
+              }
+            }).finally((res) => {
+              this.confirmLoading = false
+            })
+          } else {
+            this.confirmLoading = false
+          }
+        })
+      },
+      handleCancel () {
+        // 清空已选择的
+        this.checkedKeys = []
+        // 清空已展开的
+        this.expandedKeys = []
+        this.visible = false
+      },
+      // 遍历树形然后获取到对父节点进行移除，使用子节点，而且将父节点加入到mainMenuList
+      findAllChildren(data) {
+        data.forEach((item, index) => {
+          if (item.children.length !== 0) {
+            for (let i = 0; i < this.checkedKeys.length; i++) {
+              if (item.id === this.checkedKeys[i]) {
+                this.checkedKeys.splice(i, 1)
+              }
+            }
+            this.findAllChildren(item.children)
+          }
+        })
+      }
+    }
+  }
+</script>
diff --git a/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/roleOrgForm.vue b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/roleOrgForm.vue
new file mode 100644
index 0000000..03fd200
--- /dev/null
+++ b/Api/Ewide.Core/Ewide.Core.Web.Src/src/pages/system/role/roleOrgForm.vue
@@ -0,0 +1,195 @@
+<template>
+  <a-modal
+    title="授权数据"
+    :width="600"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="formLoading">
+      <a-form :form="form">
+        <a-form-item
+          label="授权范围"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          has-feedback
+        >
+          <a-select style="width: 100%" placeholder="请选择授权范围" v-decorator="['dataScopeType', {rules: [{ required: true, message: '请选择授权范围！' }]}]" >
+            <a-select-option v-for="(item,index) in dataScopeTypeData" :key="index" :value="item.code" @click="handleChange(item.code)">{{ item.value }}</a-select-option>
+          </a-select>
+        </a-form-item>
+        <div v-show="orgTreeShow">
+          <a-form-item
+            label="选择机构"
+            :labelCol="labelCol"
+            :wrapperCol="wrapperCol"
+          >
+            <a-tree
+              v-model="checkedKeys"
+              checkable
+              checkStrictly
+              :auto-expand-parent="autoExpandParent"
+              :expanded-keys="expandedKeys"
+              :tree-data="orgTreeData"
+              :selected-keys="selectedKeys"
+              :replaceFields="replaceFields"
+              @expand="onExpand"
+              @select="onSelect"
+            />
+          </a-form-item>
+        </div>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+
+
+  export default {
+    data () {
+      return {
+        labelCol: {
+          style: { 'padding-right': '20px' },
+          xs: { span: 24 },
+          sm: { span: 5 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 15 }
+        },
+        orgTreeData: [],
+        expandedKeys: [],
+        checkedKeys: [],
+        visible: false,
+        confirmLoading: false,
+        formLoading: true,
+        autoExpandParent: true,
+        selectedKeys: [],
+        subValues: [],
+        roleEntity: [],
+        dataScopeTypeData: [],
+        orgTreeShow: false,
+        replaceFields: {
+          key: 'id'
+        },
+        form: this.$form.createForm(this)
+      }
+    },
+
+    methods: {
+      // 初始化方法
+      roleOrg (record) {
+        this.roleEntity = record
+        this.visible = true
+        this.formLoading = true
+        this.sysDictTypeDropDown()
+        this.form.getFieldDecorator('dataScopeType', { initialValue: record.dataScopeType.toString() })
+        this.handleChange(record.dataScopeType)
+      },
+
+      /**
+       * 获取字典数据
+       */
+      sysDictTypeDropDown () {
+        // 数据范围
+        this.$api.sysDictTypeDropDown({ code: 'data_scope_type' }).then((res) => {
+          this.dataScopeTypeData = res.data
+          this.formLoading = false
+        })
+      },
+
+      // 范围下拉框事件
+      handleChange (value) {
+        // eslint-disable-next-line eqeqeq
+        if (value == '5') {
+          this.formLoading = true
+          this.orgTreeShow = true
+          // 获取机构树
+          this.getOrgTree()
+          // 已关联数据
+          this.sysRoleOwnData(this.roleEntity)
+        } else {
+          this.orgTreeShow = false
+          // 清理已选中机构
+          this.checkedKeys = []
+        }
+      },
+
+      /**
+       * 获取机构树
+       */
+      getOrgTree () {
+        this.$api.getOrgTree().then((res) => {
+           if (res.success) {
+             this.orgTreeData = res.data
+             // 默认展开
+             this.orgTreeData.forEach(item => {
+               this.expandedKeys.push(item.id)
+             })
+           }
+        })
+      },
+
+      /**
+       * 此角色已有数据列表
+       */
+      sysRoleOwnData (record) {
+        this.$api.sysRoleOwnData({ id: record.id }).then((res) => {
+          if (res.success) {
+            //console.log(JSON.stringify(res.data))
+            this.checkedKeys = res.data
+          }
+          this.formLoading = false
+        })
+      },
+
+      onExpand (expandedKeys) {
+        this.expandedKeys = expandedKeys
+        this.autoExpandParent = false
+      },
+      onCheck (checkedKeys) {
+        //console.log(JSON.stringify(checkedKeys))
+        this.checkedKeys = checkedKeys
+      },
+      onSelect (selectedKeys, info) {
+        this.selectedKeys = selectedKeys
+      },
+
+      handleSubmit () {
+        const { form: { validateFields } } = this
+        this.confirmLoading = true
+        validateFields((errors, values) => {
+          if (!errors) {
+            const checkedKeys = this.checkedKeys.checked === undefined ? this.checkedKeys : this.checkedKeys.checked
+            this.$api.sysRoleGrantData({ id: this.roleEntity.id, grantOrgIdList: checkedKeys, dataScopeType: values.dataScopeType }).then((res) => {
+              this.confirmLoading = false
+              if (res.success) {
+                this.$message.success('授权成功')
+                this.$emit('ok', values)
+                this.handleCancel()
+              } else {
+                this.$message.error('授权失败：' + res.message)
+              }
+            }).finally((res) => {
+              this.confirmLoading = false
+            })
+          } else {
+            this.confirmLoading = false
+          }
+        })
+      },
+      handleCancel () {
+        this.form.resetFields()
+        // 清空已选择的
+        this.checkedKeys = []
+        // 清空已展开的
+        this.expandedKeys = []
+        this.visible = false
+        // 隐藏机构树
+        this.orgTreeShow = false
+      }
+    }
+  }
+</script>