✨ 用户文档菜单（用于数据权限示例）

src/api/sample/document.js

@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+
+export function getPage(query) {
+  return request({
+    url: '/sample/document/page',
+    method: 'get',
+    params: query
+  })
+}
+
+export function addObj(obj) {
+  return request({
+    url: '/sample/document',
+    method: 'post',
+    data: obj
+  })
+}
+
+export function delObj(id) {
+  return request({
+    url: '/sample/document/' + id,
+    method: 'delete'
+  })
+}
+
+export function putObj(obj) {
+  return request({
+    url: '/sample/document',
+    method: 'put',
+    data: obj
+  })
+}

src/views/sample/document/DocumentModalForm.vue

@@ -0,0 +1,67 @@
+<template>
+  <a-modal
+    :title="title"
+    :visible="visible"
+    :mask-closable="false"
+    :body-style="{paddingBottom: '8px'}"
+    :confirm-loading="submitLoading"
+    @ok="handleSubmit"
+    @cancel="handleClose"
+  >
+    <a-form
+      :form="form"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+    >
+      <a-form-item v-if="isUpdateForm" style="display: none">
+        <a-input v-decorator="['id']" />
+      </a-form-item>
+      <a-form-item label="文档名称">
+        <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入文档名称!' }] }]" placeholder="文档名称" />
+      </a-form-item>
+      <a-form-item label="所属用户">
+        <lov-local
+          v-decorator="['userId', { rules: [{ required: true, message: '请选择所属用户!' }] }]"
+          placeholder="所属用户"
+          v-bind="sysUserLov"
+          :multiple="false"
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script>
+import { PopUpFormMixin } from '@/mixins'
+import { addObj, putObj } from '@/api/sample/document'
+import { sysUserLov } from '@/components/Lov/lovOptions'
+
+export default {
+  name: 'DocumentModalForm',
+  mixins: [PopUpFormMixin],
+  data () {
+    return {
+      reqFunctions: {
+        create: addObj,
+        update: putObj
+      },
+
+      labelCol: {
+        sm: { span: 24 },
+        md: { span: 5 }
+      },
+      wrapperCol: {
+        sm: { span: 24 },
+        md: { span: 19 }
+      },
+
+      // 校验配置
+      decoratorOptions: {},
+
+      // 系统用户Lov
+      sysUserLov
+    }
+  },
+  methods: {}
+}
+</script>

src/views/sample/document/DocumentPage.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="ant-pro-page-container-children-content">
+    <!-- 查询条件 -->
+    <div class="ant-pro-table-search">
+      <a-form v-bind="searchFormLayout">
+        <a-row :gutter="16">
+          <a-col :md="8" :sm="24">
+            <a-form-item label="ID">
+              <a-input v-model="queryParam.id" placeholder="" />
+            </a-form-item>
+          </a-col>
+
+          <!-- <template v-if="advanced">
+           </template>-->
+          <a-col :md="8" :sm="24" class="table-page-search-wrapper">
+            <div class="table-page-search-submitButtons">
+              <a-button type="primary" @click="reloadTable">查询</a-button>
+              <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
+              <!--<a @click="toggleAdvanced" style="margin-left: 8px">
+                {{ advanced ? '收起' : '展开' }}
+                <a-icon :type="advanced ? 'up' : 'down'"/>
+              </a>-->
+            </div>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <a-card :bordered="false" :body-style="{paddingTop: 0, paddingBottom: 0}">
+      <!-- 操作按钮区域 -->
+      <div class="ant-pro-table-toolbar">
+        <div class="ant-pro-table-toolbar-title">文档表，用于演示数据权限，可切换不同用户并授予不同角色体验效果（需退出重新登录）</div>
+        <div class="ant-pro-table-toolbar-option">
+          <a-button
+            v-has="'sample:document:add'"
+            type="primary"
+            icon="plus"
+            @click="handleAdd()"
+          >新建
+          </a-button>
+        </div>
+      </div>
+
+      <!--数据表格区域-->
+      <div class="ant-pro-table-wrapper">
+        <a-table
+          ref="table"
+          size="middle"
+          :row-key="rowKey"
+          :columns="columns"
+          :data-source="dataSource"
+          :pagination="pagination"
+          :loading="loading"
+          @change="handleTableChange"
+        >
+          <template #action-slot="text, record">
+            <a-popconfirm
+              v-has="'sample:document:del'"
+              title="确认要删除吗？"
+              @confirm="() => handleDel(record)"
+            >
+              <a href="javascript:" class="ballcat-text-danger">删除</a>
+            </a-popconfirm>
+          </template>
+        </a-table>
+      </div>
+    </a-card>
+
+    <!--表单弹窗-->
+    <document-modal-form ref="formModal" @reload-page-table="reloadTable" />
+  </div>
+</template>
+
+<script>
+import { getPage, delObj } from '@/api/sample/document'
+import { TablePageMixin } from '@/mixins'
+import DocumentModalForm from '@/views/sample/document/DocumentModalForm'
+
+export default {
+  name: 'DocumentPage',
+  components: { DocumentModalForm },
+  mixins: [TablePageMixin],
+  data () {
+    return {
+      getPage: getPage,
+      delObj: delObj,
+
+      columns: [
+        {
+          title: '#',
+          dataIndex: 'id'
+        },
+        {
+          title: '文档名称',
+          dataIndex: 'name'
+        },
+        {
+          title: '所属用户ID',
+          dataIndex: 'userId'
+        },
+        {
+          title: '所属用户',
+          dataIndex: 'username'
+        },
+        {
+          title: '所属组织ID',
+          dataIndex: 'organizationId'
+        },
+        {
+          title: '所属组织',
+          dataIndex: 'organizationName'
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'createTime',
+          width: '150px',
+          sorter: true
+        },
+        {
+          title: '操作',
+          align: 'center',
+          width: '150px',
+          scopedSlots: { customRender: 'action-slot' }
+        }
+      ]
+    }
+  },
+  methods: {
+    /**
+     * 新建文档表，用于演示数据权限
+     */
+    handleAdd () {
+      const attributes = { title: '新建用户文档' }
+      this.$refs.formModal.add(attributes)
+    },
+    /**
+     * 编辑文档表，用于演示数据权限
+     * @param record 当前文档表，用于演示数据权限属性
+     */
+    handleEdit (record) {
+      const attributes = { title: '编辑用户文档' }
+      this.$refs.formModal.update(record, attributes)
+    }
+  }
+}
+</script>