From 8592fee744f96751c3d5b069d31ba2baf5f4034d Mon Sep 17 00:00:00 2001
From: wuxw <928255095@qq.com>
Date: Sat, 28 Jun 2025 22:49:19 +0800
Subject: [PATCH] 开发排版功能

---
 src/api/org/classesManageApi.js                 |  81 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/api/org/dataPrivilegeManageApi.js           | 193 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/org/addClasses.vue               | 116 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/org/addDataPrivilege.vue         |  90 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/org/addDataPrivilegeStaff.vue    | 157 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/org/addDataPrivilegeUnit.vue     | 158 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/org/classesState.vue             |  93 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/org/dataPrivilegeDiv.vue         | 129 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/org/dataPrivilegeStaff.vue       | 163 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/org/dataPrivilegeUnit.vue        | 107 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/org/deleteClasses.vue            |  68 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/org/deleteDataPrivilege.vue      |  62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/org/deleteDataPrivilegeStaff.vue |  71 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/org/deleteDataPrivilegeUnit.vue  |  71 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/org/editClasses.vue              | 115 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/org/editDataPrivilege.vue        | 100 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/i18n/userI18n.js                            |   6 ++++++
 src/router/userRouter.js                        |  14 ++++++++++++--
 src/views/org/classesManageLang.js              | 118 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/org/classesManageList.vue             | 210 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/org/dataPrivilegeManageLang.js        | 118 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/org/dataPrivilegeManageList.vue       | 131 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 22 files changed, 2369 insertions(+), 2 deletions(-)
 create mode 100644 src/api/org/classesManageApi.js
 create mode 100644 src/api/org/dataPrivilegeManageApi.js
 create mode 100644 src/components/org/addClasses.vue
 create mode 100644 src/components/org/addDataPrivilege.vue
 create mode 100644 src/components/org/addDataPrivilegeStaff.vue
 create mode 100644 src/components/org/addDataPrivilegeUnit.vue
 create mode 100644 src/components/org/classesState.vue
 create mode 100644 src/components/org/dataPrivilegeDiv.vue
 create mode 100644 src/components/org/dataPrivilegeStaff.vue
 create mode 100644 src/components/org/dataPrivilegeUnit.vue
 create mode 100644 src/components/org/deleteClasses.vue
 create mode 100644 src/components/org/deleteDataPrivilege.vue
 create mode 100644 src/components/org/deleteDataPrivilegeStaff.vue
 create mode 100644 src/components/org/deleteDataPrivilegeUnit.vue
 create mode 100644 src/components/org/editClasses.vue
 create mode 100644 src/components/org/editDataPrivilege.vue
 create mode 100644 src/views/org/classesManageLang.js
 create mode 100644 src/views/org/classesManageList.vue
 create mode 100644 src/views/org/dataPrivilegeManageLang.js
 create mode 100644 src/views/org/dataPrivilegeManageList.vue

diff --git a/src/api/org/classesManageApi.js b/src/api/org/classesManageApi.js
new file mode 100644
index 0000000..73a30fc
--- /dev/null
+++ b/src/api/org/classesManageApi.js
@@ -0,0 +1,81 @@
+import request from '@/utils/request'
+
+// 获取班次列表
+export function listClasses(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/classes.listClasses',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 添加班次
+export function saveClasses(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/classes.saveClasses',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新班次
+export function updateClasses(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/classes.updateClasses',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除班次
+export function deleteClasses(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/classes.deleteClasses',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新班次状态
+export function updateClassesState(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/classes.updateClassesState',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/org/dataPrivilegeManageApi.js b/src/api/org/dataPrivilegeManageApi.js
new file mode 100644
index 0000000..1e7d476
--- /dev/null
+++ b/src/api/org/dataPrivilegeManageApi.js
@@ -0,0 +1,193 @@
+import request from '@/utils/request'
+
+// 获取数据权限列表
+export function listDataPrivilege(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataPrivilege.listDataPrivilege',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 添加数据权限
+export function saveDataPrivilege(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataPrivilege.saveDataPrivilege',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新数据权限
+export function updateDataPrivilege(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataPrivilege.updateDataPrivilege',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除数据权限
+export function deleteDataPrivilege(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataPrivilege.deleteDataPrivilege',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取数据权限单元列表
+export function listDataPrivilegeUnit(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataPrivilegeUnit.listDataPrivilegeUnit',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取未关联的单元列表
+export function listUnitsNotInDataPrivilege(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataPrivilegeUnit.listUnitsNotInDataPrivilege',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 保存数据权限单元
+export function saveDataPrivilegeUnit(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataPrivilegeUnit.saveDataPrivilegeUnit',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除数据权限单元
+export function deleteDataPrivilegeUnit(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataPrivilegeUnit.deleteDataPrivilegeUnit',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取数据权限员工列表
+export function listDataPrivilegeStaff(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataPrivilegeStaff.listDataPrivilegeStaff',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取未关联的员工列表
+export function listStaffNotInDataPrivilege(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataPrivilegeStaff.listStaffNotInDataPrivilege',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 保存数据权限员工
+export function saveDataPrivilegeStaff(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataPrivilegeStaff.saveDataPrivilegeStaff',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除数据权限员工
+export function deleteDataPrivilegeStaff(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataPrivilegeStaff.deleteDataPrivilegeStaff',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/components/org/addClasses.vue b/src/components/org/addClasses.vue
new file mode 100644
index 0000000..e972f80
--- /dev/null
+++ b/src/components/org/addClasses.vue
@@ -0,0 +1,116 @@
+<template>
+  <el-dialog :title="$t('classesManage.add.title')" :visible.sync="visible" width="60%" @close="handleClose">
+    <el-form ref="form" :model="formData" label-width="120px">
+      <el-form-item :label="$t('classesManage.add.name')" prop="name" :rules="[
+        { required: true, message: $t('classesManage.validate.nameRequired'), trigger: 'blur' },
+        { max: 100, message: $t('classesManage.validate.nameMaxLength'), trigger: 'blur' }
+      ]">
+        <el-input v-model="formData.name" :placeholder="$t('classesManage.add.namePlaceholder')" />
+      </el-form-item>
+
+      <el-form-item v-for="(time, index) in formData.times" :key="time.id"
+        :label="index === 0 ? $t('classesManage.add.workTime') : ''">
+        <el-col :span="10">
+          <el-time-picker v-model="time.startTime" :placeholder="$t('classesManage.add.startTimePlaceholder')"
+            format="HH:mm" value-format="HH:mm" />
+        </el-col>
+        <el-col :span="2" style="text-align: center">-</el-col>
+        <el-col :span="10">
+          <el-time-picker v-model="time.endTime" :placeholder="$t('classesManage.add.endTimePlaceholder')"
+            format="HH:mm" value-format="HH:mm" />
+        </el-col>
+        <el-col :span="2">
+          <el-button type="danger" icon="el-icon-delete" circle @click="removeTime(index)" />
+        </el-col>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="addTime">
+          {{ $t('classesManage.add.addTime') }}
+        </el-button>
+      </el-form-item>
+
+      <el-form-item :label="$t('classesManage.add.remark')" prop="remark" :rules="[
+        { required: true, message: $t('classesManage.validate.remarkRequired'), trigger: 'blur' },
+        { max: 200, message: $t('classesManage.validate.remarkMaxLength'), trigger: 'blur' }
+      ]">
+        <el-input v-model="formData.remark" type="textarea" :placeholder="$t('classesManage.add.remarkPlaceholder')"
+          :rows="3" />
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        {{ $t('common.save') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { saveClasses } from '@/api/org/classesManageApi'
+import { getUuid } from '@/utils/commonUtil'
+
+export default {
+  name: 'AddClasses',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        name: '',
+        remark: '',
+        times: []
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.resetForm()
+      this.addTime()
+      this.visible = true
+    },
+    resetForm() {
+      this.formData = {
+        name: '',
+        remark: '',
+        times: []
+      }
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.clearValidate()
+      })
+    },
+    addTime() {
+      this.formData.times.push({
+        id: getUuid(),
+        startTime: '',
+        endTime: ''
+      })
+    },
+    removeTime(index) {
+      this.formData.times.splice(index, 1)
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    async handleSubmit() {
+      try {
+        await this.$refs.form.validate()
+        this.loading = true
+        await saveClasses(this.formData)
+        this.$message.success(this.$t('common.saveSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        if (error !== 'validate') {
+          this.$message.error(error.message || this.$t('common.saveFailed'))
+        }
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/org/addDataPrivilege.vue b/src/components/org/addDataPrivilege.vue
new file mode 100644
index 0000000..d89e17a
--- /dev/null
+++ b/src/components/org/addDataPrivilege.vue
@@ -0,0 +1,90 @@
+<template>
+  <el-dialog 
+    :title="$t('dataPrivilege.addTitle')" 
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose">
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form-item :label="$t('dataPrivilege.name')" prop="name">
+        <el-input 
+          v-model="form.name" 
+          :placeholder="$t('dataPrivilege.namePlaceholder')" />
+      </el-form-item>
+      <el-form-item :label="$t('dataPrivilege.code')" prop="code">
+        <el-input 
+          v-model="form.code" 
+          :placeholder="$t('dataPrivilege.codePlaceholder')" />
+      </el-form-item>
+      <el-form-item :label="$t('dataPrivilege.remark')" prop="remark">
+        <el-input 
+          v-model="form.remark" 
+          type="textarea"
+          :placeholder="$t('dataPrivilege.remarkPlaceholder')" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { saveDataPrivilege } from '@/api/org/dataPrivilegeManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddDataPrivilege',
+  data() {
+    return {
+      visible: false,
+      form: {
+        name: '',
+        code: '',
+        remark: '',
+        communityId: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: this.$t('dataPrivilege.nameRequired'), trigger: 'blur' },
+          { max: 50, message: this.$t('dataPrivilege.nameMaxLength'), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$t('dataPrivilege.codeRequired'), trigger: 'blur' },
+          { max: 30, message: this.$t('dataPrivilege.codeMaxLength'), trigger: 'blur' }
+        ],
+        remark: [
+          { required: true, message: this.$t('dataPrivilege.remarkRequired'), trigger: 'blur' },
+          { max: 256, message: this.$t('dataPrivilege.remarkMaxLength'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.form.communityId = getCommunityId()
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.resetFields()
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await saveDataPrivilege(this.form)
+            this.$message.success(this.$t('dataPrivilege.addSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            console.error('Failed to add data privilege:', error)
+          }
+        }
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/org/addDataPrivilegeStaff.vue b/src/components/org/addDataPrivilegeStaff.vue
new file mode 100644
index 0000000..131b6b1
--- /dev/null
+++ b/src/components/org/addDataPrivilegeStaff.vue
@@ -0,0 +1,157 @@
+<template>
+  <el-dialog :title="$t('dataPrivilege.staff')" :visible.sync="visible" width="70%" top="5vh" @close="handleClose">
+    <div class="search-bar">
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-input v-model="searchForm.staffId" :placeholder="$t('dataPrivilege.inputStaffId')" clearable>
+          </el-input>
+        </el-col>
+        <el-col :span="8">
+          <el-input v-model="searchForm.staffName" :placeholder="$t('dataPrivilege.inputStaffName')" clearable>
+          </el-input>
+        </el-col>
+        <el-col :span="8">
+          <el-button type="primary" @click="handleSearch">
+            <i class="el-icon-search"></i>{{ $t('common.search') }}
+          </el-button>
+          <el-button @click="handleReset">
+            <i class="el-icon-refresh"></i>{{ $t('common.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </div>
+
+    <el-table :data="tableData" border style="width: 100%; margin-top: 15px" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center">
+      </el-table-column>
+      <el-table-column prop="userId" :label="$t('dataPrivilege.staffId')" align="center">
+      </el-table-column>
+      <el-table-column prop="name" :label="$t('dataPrivilege.staffName')" align="center">
+      </el-table-column>
+      <el-table-column prop="address" :label="$t('dataPrivilege.staffAddress')" align="center">
+      </el-table-column>
+    </el-table>
+
+    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+      :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
+    </el-pagination>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleSubmit" :disabled="selectedStaffs.length === 0">
+        {{ $t('common.submit') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { listStaffNotInDataPrivilege, saveDataPrivilegeStaff } from '@/api/org/dataPrivilegeManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddDataPrivilegeStaff',
+  data() {
+    return {
+      visible: false,
+      dpId: '',
+      searchForm: {
+        staffId: '',
+        staffName: ''
+      },
+      tableData: [],
+      selectedStaffs: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      this.dpId = params.dpId
+      this.visible = true
+      this.loadData()
+    },
+    handleClose() {
+      this.searchForm = {
+        staffId: '',
+        staffName: ''
+      }
+      this.selectedStaffs = []
+    },
+    async loadData() {
+      try {
+        const params = {
+          page: this.pagination.current,
+          row: this.pagination.size,
+          dpId: this.dpId,
+          staffId: this.searchForm.staffId,
+          staffName: this.searchForm.staffName,
+          communityId: getCommunityId()
+        }
+        const { data, total } = await listStaffNotInDataPrivilege(params)
+        this.tableData = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('Failed to load staffs:', error)
+      }
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.loadData()
+    },
+    handleReset() {
+      this.searchForm = {
+        staffId: '',
+        staffName: ''
+      }
+      this.pagination.current = 1
+      this.loadData()
+    },
+    handleSelectionChange(val) {
+      this.selectedStaffs = val
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.loadData()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.loadData()
+    },
+    async handleSubmit() {
+      try {
+        const staffs = this.selectedStaffs.map(item => ({
+          staffId: item.userId,
+          staffName: item.name
+        }))
+
+        await saveDataPrivilegeStaff({
+          dpId: this.dpId,
+          staffs,
+          communityId: getCommunityId()
+        })
+
+        this.$message.success(this.$t('dataPrivilege.associateSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        console.error('Failed to associate staffs:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.search-bar {
+  margin-bottom: 15px;
+}
+
+.dialog-footer {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/org/addDataPrivilegeUnit.vue b/src/components/org/addDataPrivilegeUnit.vue
new file mode 100644
index 0000000..05edfef
--- /dev/null
+++ b/src/components/org/addDataPrivilegeUnit.vue
@@ -0,0 +1,158 @@
+<template>
+  <el-dialog :title="$t('dataPrivilege.buildingUnit')" :visible.sync="visible" width="70%" top="5vh"
+    @close="handleClose">
+    <div class="search-bar">
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-input v-model="searchForm.floorNum" :placeholder="$t('dataPrivilege.inputBuildingNum')" clearable>
+          </el-input>
+        </el-col>
+        <el-col :span="8">
+          <el-input v-model="searchForm.unitNum" :placeholder="$t('dataPrivilege.inputUnitNum')" clearable>
+          </el-input>
+        </el-col>
+        <el-col :span="8">
+          <el-button type="primary" @click="handleSearch">
+            <i class="el-icon-search"></i>{{ $t('common.search') }}
+          </el-button>
+          <el-button @click="handleReset">
+            <i class="el-icon-refresh"></i>{{ $t('common.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </div>
+
+    <el-table :data="tableData" border style="width: 100%; margin-top: 15px" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center">
+      </el-table-column>
+      <el-table-column prop="floorNum" :label="$t('dataPrivilege.buildingNum')" align="center">
+      </el-table-column>
+      <el-table-column prop="unitNum" :label="$t('dataPrivilege.unitNum')" align="center">
+      </el-table-column>
+    </el-table>
+
+    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+      :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
+    </el-pagination>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleSubmit" :disabled="selectedUnits.length === 0">
+        {{ $t('common.submit') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { listUnitsNotInDataPrivilege, saveDataPrivilegeUnit } from '@/api/org/dataPrivilegeManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddDataPrivilegeUnit',
+  data() {
+    return {
+      visible: false,
+      dpId: '',
+      searchForm: {
+        floorNum: '',
+        unitNum: ''
+      },
+      tableData: [],
+      selectedUnits: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      this.dpId = params.dpId
+      this.visible = true
+      this.loadData()
+    },
+    handleClose() {
+      this.searchForm = {
+        floorNum: '',
+        unitNum: ''
+      }
+      this.selectedUnits = []
+    },
+    async loadData() {
+      try {
+        const params = {
+          page: this.pagination.current,
+          row: this.pagination.size,
+          dpId: this.dpId,
+          floorNum: this.searchForm.floorNum,
+          unitNum: this.searchForm.unitNum,
+          communityId: getCommunityId()
+        }
+        const { data, total } = await listUnitsNotInDataPrivilege(params)
+        this.tableData = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('Failed to load units:', error)
+      }
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.loadData()
+    },
+    handleReset() {
+      this.searchForm = {
+        floorNum: '',
+        unitNum: ''
+      }
+      this.pagination.current = 1
+      this.loadData()
+    },
+    handleSelectionChange(val) {
+      this.selectedUnits = val
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.loadData()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.loadData()
+    },
+    async handleSubmit() {
+      try {
+        const units = this.selectedUnits.map(item => ({
+          unitId: item.unitId,
+          unitNum: item.unitNum,
+          floorId: item.floorId,
+          floorNum: item.floorNum
+        }))
+
+        await saveDataPrivilegeUnit({
+          dpId: this.dpId,
+          units,
+          communityId: getCommunityId()
+        })
+
+        this.$message.success(this.$t('dataPrivilege.associateSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        console.error('Failed to associate units:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.search-bar {
+  margin-bottom: 15px;
+}
+
+.dialog-footer {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/org/classesState.vue b/src/components/org/classesState.vue
new file mode 100644
index 0000000..e8d3c5e
--- /dev/null
+++ b/src/components/org/classesState.vue
@@ -0,0 +1,93 @@
+<template>
+  <el-dialog
+    :title="$t('classesManage.state.title')"
+    :visible.sync="visible"
+    width="30%"
+    @close="handleClose"
+  >
+    <div class="state-content">
+      <el-alert
+        :type="formData.state === '1001' ? 'success' : 'warning'"
+        :title="
+          $t('classesManage.state.confirmMessage', {
+            action: formData.stateName,
+            name: $t('classesManage.state.classes')
+          })
+        "
+        :closable="false"
+        show-icon
+      />
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button
+        :type="formData.state === '1001' ? 'success' : 'warning'"
+        @click="handleConfirm"
+        :loading="loading"
+      >
+        {{ $t('common.confirm') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { updateClassesState } from '@/api/org/classesManageApi'
+
+export default {
+  name: 'ClassesState',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      formData: {
+        classesId: '',
+        stateName: '',
+        state: ''
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.formData = {
+        classesId: data.classesId,
+        stateName: data.stateName,
+        state: data.state
+      }
+      this.visible = true
+    },
+    handleClose() {
+      this.formData = {
+        classesId: '',
+        stateName: '',
+        state: ''
+      }
+    },
+    async handleConfirm() {
+      try {
+        this.loading = true
+        await updateClassesState(this.formData)
+        this.$message.success(
+          this.$t('classesManage.state.successMessage', {
+            action: this.formData.stateName
+          })
+        )
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        this.$message.error(error.message || this.$t('common.operationFailed'))
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.state-content {
+  margin-bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/org/dataPrivilegeDiv.vue b/src/components/org/dataPrivilegeDiv.vue
new file mode 100644
index 0000000..9e7af32
--- /dev/null
+++ b/src/components/org/dataPrivilegeDiv.vue
@@ -0,0 +1,129 @@
+<template>
+  <div>
+
+    <el-card class="box-card">
+      <div class="button-group">
+        <el-button type="primary" size="small" @click="handleAdd">
+          <i class="el-icon-plus"></i>{{ $t('dataPrivilege.add') }}
+        </el-button>
+        <el-button type="primary" size="small" @click="handleEdit" :disabled="!currentDataPrivilege.dpId">
+          <i class="el-icon-edit"></i>{{ $t('dataPrivilege.edit') }}
+        </el-button>
+        <el-button type="primary" size="small" @click="handleDelete" :disabled="!currentDataPrivilege.dpId">
+          <i class="el-icon-delete"></i>{{ $t('dataPrivilege.delete') }}
+        </el-button>
+      </div>
+
+      <div class="data-privilege-list">
+        <ul>
+          <li v-for="(item, index) in dataPrivileges" :key="index"
+            :class="{ active: item.dpId === currentDataPrivilege.dpId }" @click="handleSelect(item)">
+            {{ item.name }}
+          </li>
+        </ul>
+      </div>
+    </el-card>
+    <!-- 添加数据权限对话框 -->
+    <add-data-privilege ref="addDataPrivilege" @success="handleRefresh" />
+    <!-- 编辑数据权限对话框 -->
+    <edit-data-privilege ref="editDataPrivilege" @success="handleRefresh" />
+    <!-- 删除数据权限对话框 -->
+    <delete-data-privilege ref="deleteDataPrivilege" @success="handleRefresh" />
+  </div>
+</template>
+
+<script>
+import { listDataPrivilege } from '@/api/org/dataPrivilegeManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import AddDataPrivilege from '@/components/org/addDataPrivilege'
+import EditDataPrivilege from '@/components/org/editDataPrivilege'
+import DeleteDataPrivilege from '@/components/org/deleteDataPrivilege'
+export default {
+  name: 'DataPrivilegeDiv',
+  components: {
+    AddDataPrivilege,
+    EditDataPrivilege,
+    DeleteDataPrivilege
+  },
+  data() {
+    return {
+      dataPrivileges: [],
+      currentDataPrivilege: {},
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.loadData()
+  },
+  methods: {
+    handleRefresh() {
+      this.loadData()
+    },
+    async loadData() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.communityId
+        }
+        const { data } = await listDataPrivilege(params)
+        this.dataPrivileges = data
+        if (data.length > 0) {
+          this.currentDataPrivilege = data[0]
+          this.$emit('switch-data-privilege', data[0])
+        }
+      } catch (error) {
+        console.error('Failed to load data privileges:', error)
+      }
+    },
+    handleSelect(item) {
+      this.currentDataPrivilege = item
+      this.$emit('switch-data-privilege', item)
+    },
+    handleAdd() {
+      this.$refs.addDataPrivilege.open()
+    },
+    handleEdit() {
+      this.$refs.editDataPrivilege.open(this.currentDataPrivilege)
+    },
+    handleDelete() {
+      this.$refs.deleteDataPrivilege.open(this.currentDataPrivilege)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.box-card {
+  height: 100%;
+
+  .button-group {
+    margin-bottom: 15px;
+  }
+
+  .data-privilege-list {
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      li {
+        padding: 10px;
+        cursor: pointer;
+        border-bottom: 1px solid #eee;
+        transition: all 0.3s;
+
+        &:hover {
+          background-color: #f5f5f5;
+        }
+
+        &.active {
+          background-color: #e6f7ff;
+          color: #1890ff;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/org/dataPrivilegeStaff.vue b/src/components/org/dataPrivilegeStaff.vue
new file mode 100644
index 0000000..24e6922
--- /dev/null
+++ b/src/components/org/dataPrivilegeStaff.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="data-privilege-staff">
+
+    <el-form :inline="true" :model="searchForm">
+      <el-form-item :label="$t('dataPrivilege.staffName')">
+        <el-input v-model="searchForm.staffName" :placeholder="$t('dataPrivilege.inputStaffName')" clearable>
+        </el-input>
+      </el-form-item>
+      <el-form-item :label="$t('dataPrivilege.phone')">
+        <el-input v-model="searchForm.tel" :placeholder="$t('dataPrivilege.inputPhone')" clearable>
+        </el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSearch">
+          <i class="el-icon-search"></i>{{ $t('common.search') }}
+        </el-button>
+        <el-button @click="handleReset">
+          <i class="el-icon-refresh"></i>{{ $t('common.reset') }}
+        </el-button>
+        <el-button type="primary" @click="handleAdd">
+          <i class="el-icon-plus"></i>{{ $t('dataPrivilege.associateStaff') }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+
+    <el-table :data="tableData" border style="width: 100%" v-loading="loading">
+      <el-table-column prop="staffName" :label="$t('dataPrivilege.name')" align="center">
+      </el-table-column>
+      <el-table-column prop="tel" :label="$t('dataPrivilege.phone')" align="center">
+      </el-table-column>
+      <el-table-column prop="email" :label="$t('dataPrivilege.email')" align="center">
+      </el-table-column>
+      <el-table-column prop="address" :label="$t('dataPrivilege.address')" align="center">
+      </el-table-column>
+      <el-table-column :label="$t('dataPrivilege.gender')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.sex === 0 ? $t('dataPrivilege.male') : $t('dataPrivilege.female') }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('common.operation')" align="center" width="200">
+        <template slot-scope="scope">
+          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
+            {{ $t('common.delete') }}
+          </el-button>
+          <el-button size="mini" type="primary" @click="handleDetail(scope.row)">
+            {{ $t('common.detail') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+      :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
+    </el-pagination>
+
+    <add-data-privilege-staff ref="addDataPrivilegeStaff" @success="loadData" />
+    <delete-data-privilege-staff ref="deleteDataPrivilegeStaff" @success="loadData" />
+  </div>
+</template>
+
+<script>
+import { listDataPrivilegeStaff } from '@/api/org/dataPrivilegeManageApi'
+import AddDataPrivilegeStaff from '@/components/org/addDataPrivilegeStaff'
+import DeleteDataPrivilegeStaff from '@/components/org/deleteDataPrivilegeStaff'
+
+export default {
+  name: 'DataPrivilegeStaff',
+  components: {
+    AddDataPrivilegeStaff,
+    DeleteDataPrivilegeStaff
+  },
+  data() {
+    return {
+      dpId: '',
+      loading: false,
+      searchForm: {
+        staffName: '',
+        tel: ''
+      },
+      tableData: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+  },
+  methods: {
+    open(dpId) {
+      this.dpId = dpId
+      this.loadData()
+    },
+    async loadData() {
+      this.loading = true
+      try {
+        const params = {
+          page: this.pagination.current,
+          row: this.pagination.size,
+          dpId: this.dpId,
+          staffName: this.searchForm.staffName,
+          tel: this.searchForm.tel
+        }
+        const { data, total } = await listDataPrivilegeStaff(params)
+        this.tableData = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('Failed to load data privilege staff:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.loadData(this.dpId)
+    },
+    handleReset() {
+      this.searchForm = {
+        staffName: '',
+        tel: ''
+      }
+      this.pagination.current = 1
+      this.loadData(this.dpId)
+    },
+    handleAdd() {
+      this.$refs.addDataPrivilegeStaff.open({ dpId: this.dpId })
+    },
+    handleDelete(row) {
+      this.$refs.deleteDataPrivilegeStaff.open(row)
+    },
+    handleDetail(row) {
+      this.$router.push(`/staff/detail/${row.staffId}`)
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.loadData(this.dpId)
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.loadData(this.dpId)
+    }
+  },
+
+}
+</script>
+
+<style scoped>
+.data-privilege-staff {
+  padding: 20px;
+}
+
+.search-card {
+  margin-bottom: 20px;
+}
+
+.el-pagination {
+  margin-top: 15px;
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/org/dataPrivilegeUnit.vue b/src/components/org/dataPrivilegeUnit.vue
new file mode 100644
index 0000000..1a5497f
--- /dev/null
+++ b/src/components/org/dataPrivilegeUnit.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="data-privilege-unit">
+    <div class="action-bar text-right">
+      <el-button type="primary" size="small" @click="handleAdd">
+        <i class="el-icon-plus"></i>{{ $t('dataPrivilege.associateUnit') }}
+      </el-button>
+    </div>
+
+    <el-table :data="tableData" border style="width: 100%" v-loading="loading">
+      <el-table-column prop="floorNum" :label="$t('dataPrivilege.building')" align="center">
+      </el-table-column>
+      <el-table-column prop="unitNum" :label="$t('dataPrivilege.unit')" align="center">
+      </el-table-column>
+      <el-table-column :label="$t('common.operation')" align="center" width="150">
+        <template slot-scope="scope">
+          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
+            {{ $t('common.delete') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+      :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
+    </el-pagination>
+
+    <add-data-privilege-unit ref="addDataPrivilegeUnit" @success="loadData" />
+    <delete-data-privilege-unit ref="deleteDataPrivilegeUnit" @success="loadData" />
+  </div>
+</template>
+
+<script>
+import { listDataPrivilegeUnit } from '@/api/org/dataPrivilegeManageApi'
+import AddDataPrivilegeUnit from '@/components/org/addDataPrivilegeUnit'
+import DeleteDataPrivilegeUnit from '@/components/org/deleteDataPrivilegeUnit'
+
+export default {
+  name: 'DataPrivilegeUnit',
+  components: {
+    AddDataPrivilegeUnit,
+    DeleteDataPrivilegeUnit
+  },
+  data() {
+    return {
+      dpId: '',
+      loading: false,
+      tableData: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    open(dpId) {
+      this.dpId = dpId
+      this.loadData()
+    },
+    async loadData() {
+      this.loading = true
+      try {
+        const params = {
+          page: this.pagination.current,
+          row: this.pagination.size,
+          dpId: this.dpId
+        }
+        const { data, total } = await listDataPrivilegeUnit(params)
+        this.tableData = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('Failed to load data privilege units:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleAdd() {
+      this.$refs.addDataPrivilegeUnit.open({ dpId: this.dpId })
+    },
+    handleDelete(row) {
+      this.$refs.deleteDataPrivilegeUnit.open(row)
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.loadData(this.dpId)
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.loadData(this.dpId)
+    }
+  },
+}
+</script>
+
+<style scoped>
+.data-privilege-unit {
+  padding: 20px;
+}
+
+.action-bar {
+  margin-bottom: 15px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/org/deleteClasses.vue b/src/components/org/deleteClasses.vue
new file mode 100644
index 0000000..791abe0
--- /dev/null
+++ b/src/components/org/deleteClasses.vue
@@ -0,0 +1,68 @@
+<template>
+  <el-dialog
+    :title="$t('classesManage.delete.title')"
+    :visible.sync="visible"
+    width="30%"
+    @close="handleClose"
+  >
+    <div class="delete-content">
+      <el-alert
+        type="warning"
+        :title="$t('classesManage.delete.confirmMessage')"
+        :closable="false"
+        show-icon
+      />
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="danger" @click="handleConfirm" :loading="loading">
+        {{ $t('common.confirmDelete') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteClasses } from '@/api/org/classesManageApi'
+
+export default {
+  name: 'DeleteClasses',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      classesId: ''
+    }
+  },
+  methods: {
+    open(data) {
+      this.classesId = data.classesId
+      this.visible = true
+    },
+    handleClose() {
+      this.classesId = ''
+    },
+    async handleConfirm() {
+      try {
+        this.loading = true
+        await deleteClasses({ classesId: this.classesId })
+        this.$message.success(this.$t('common.deleteSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        this.$message.error(error.message || this.$t('common.deleteFailed'))
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.delete-content {
+  margin-bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/org/deleteDataPrivilege.vue b/src/components/org/deleteDataPrivilege.vue
new file mode 100644
index 0000000..c424a95
--- /dev/null
+++ b/src/components/org/deleteDataPrivilege.vue
@@ -0,0 +1,62 @@
+<template>
+  <el-dialog
+    :title="$t('dataPrivilege.deleteTitle')"
+    :visible.sync="visible"
+    width="30%"
+    center>
+    <div class="delete-content">
+      <p>{{ $t('dataPrivilege.deleteConfirm') }}</p>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="danger" @click="handleConfirm">{{ $t('common.confirm') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteDataPrivilege } from '@/api/org/dataPrivilegeManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteDataPrivilege',
+  data() {
+    return {
+      visible: false,
+      dpId: '',
+      communityId: ''
+    }
+  },
+  methods: {
+    open(data) {
+      this.dpId = data.dpId
+      this.communityId = getCommunityId()
+      this.visible = true
+    },
+    async handleConfirm() {
+      try {
+        await deleteDataPrivilege({
+          dpId: this.dpId,
+          communityId: this.communityId
+        })
+        this.$message.success(this.$t('dataPrivilege.deleteSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        console.error('Failed to delete data privilege:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.delete-content {
+  text-align: center;
+  font-size: 16px;
+  margin-bottom: 20px;
+}
+.dialog-footer {
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/org/deleteDataPrivilegeStaff.vue b/src/components/org/deleteDataPrivilegeStaff.vue
new file mode 100644
index 0000000..b3fefea
--- /dev/null
+++ b/src/components/org/deleteDataPrivilegeStaff.vue
@@ -0,0 +1,71 @@
+<template>
+  <el-dialog :title="$t('dataPrivilege.confirmOperation')" :visible.sync="visible" width="400px" center>
+    <div class="delete-content">
+      <p>{{ $t('dataPrivilege.confirmCancelAuth') }}</p>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="danger" @click="handleConfirm" :loading="loading">
+        {{ $t('common.confirmDelete') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteDataPrivilegeStaff } from '@/api/org/dataPrivilegeManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteDataPrivilegeStaff',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      form: {
+        dpId: '',
+        staffId: '',
+        communityId: ''
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.form = {
+        dpId: data.dpId,
+        staffId: data.staffId,
+        dpsId: data.dpsId,
+        communityId: getCommunityId()
+      }
+      this.visible = true
+      this.loading = false
+    },
+    async handleConfirm() {
+      this.loading = true
+      try {
+        await deleteDataPrivilegeStaff(this.form)
+        this.$message.success(this.$t('dataPrivilege.deleteSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        console.error('Failed to delete data privilege staff:', error)
+        this.$message.error(this.$t('dataPrivilege.deleteFailed'))
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.delete-content {
+  text-align: center;
+  font-size: 16px;
+  margin-bottom: 20px;
+}
+
+.dialog-footer {
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/org/deleteDataPrivilegeUnit.vue b/src/components/org/deleteDataPrivilegeUnit.vue
new file mode 100644
index 0000000..26e8a70
--- /dev/null
+++ b/src/components/org/deleteDataPrivilegeUnit.vue
@@ -0,0 +1,71 @@
+<template>
+  <el-dialog :title="$t('dataPrivilege.confirmOperation')" :visible.sync="visible" width="400px" center>
+    <div class="delete-content">
+      <p>{{ $t('dataPrivilege.confirmCancelUnit') }}</p>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="danger" @click="handleConfirm" :loading="loading">
+        {{ $t('common.confirmDelete') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteDataPrivilegeUnit } from '@/api/org/dataPrivilegeManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteDataPrivilegeUnit',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      form: {
+        dpId: '',
+        unitId: '',
+        communityId: ''
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.form = {
+        dpId: data.dpId,
+        unitId: data.unitId,
+        dpUnitId: data.dpUnitId,
+        communityId: getCommunityId()
+      }
+      this.visible = true
+      this.loading = false
+    },
+    async handleConfirm() {
+      this.loading = true
+      try {
+        await deleteDataPrivilegeUnit(this.form)
+        this.$message.success(this.$t('dataPrivilege.deleteSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        console.error('Failed to delete data privilege unit:', error)
+        this.$message.error(this.$t('dataPrivilege.deleteFailed'))
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.delete-content {
+  text-align: center;
+  font-size: 16px;
+  margin-bottom: 20px;
+}
+
+.dialog-footer {
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/org/editClasses.vue b/src/components/org/editClasses.vue
new file mode 100644
index 0000000..a46c115
--- /dev/null
+++ b/src/components/org/editClasses.vue
@@ -0,0 +1,115 @@
+<template>
+  <el-dialog :title="$t('classesManage.edit.title')" :visible.sync="visible" width="60%" @close="handleClose">
+    <el-form ref="form" :model="formData" label-width="120px">
+      <el-form-item :label="$t('classesManage.edit.name')" prop="name" :rules="[
+        { required: true, message: $t('classesManage.validate.nameRequired'), trigger: 'blur' },
+        { max: 100, message: $t('classesManage.validate.nameMaxLength'), trigger: 'blur' }
+      ]">
+        <el-input v-model="formData.name" :placeholder="$t('classesManage.edit.namePlaceholder')" />
+      </el-form-item>
+
+      <el-form-item v-for="(time, index) in formData.times" :key="time.id"
+        :label="index === 0 ? $t('classesManage.edit.workTime') : ''">
+        <el-col :span="10">
+          <el-time-picker v-model="time.startTime" :placeholder="$t('classesManage.edit.startTimePlaceholder')"
+            format="HH:mm" value-format="HH:mm" />
+        </el-col>
+        <el-col :span="2" style="text-align: center">-</el-col>
+        <el-col :span="10">
+          <el-time-picker v-model="time.endTime" :placeholder="$t('classesManage.edit.endTimePlaceholder')"
+            format="HH:mm" value-format="HH:mm" />
+        </el-col>
+        <el-col :span="2">
+          <el-button type="danger" icon="el-icon-delete" circle @click="removeTime(index)" />
+        </el-col>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="addTime">
+          {{ $t('classesManage.edit.addTime') }}
+        </el-button>
+      </el-form-item>
+
+      <el-form-item :label="$t('classesManage.edit.remark')" prop="remark" :rules="[
+        { required: true, message: $t('classesManage.validate.remarkRequired'), trigger: 'blur' },
+        { max: 200, message: $t('classesManage.validate.remarkMaxLength'), trigger: 'blur' }
+      ]">
+        <el-input v-model="formData.remark" type="textarea" :placeholder="$t('classesManage.edit.remarkPlaceholder')"
+          :rows="3" />
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        {{ $t('common.save') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { updateClasses } from '@/api/org/classesManageApi'
+import { getUuid } from '@/utils/commonUtil'
+
+export default {
+  name: 'EditClasses',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        classesId: '',
+        name: '',
+        remark: '',
+        times: []
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.formData = {
+        classesId: data.classesId,
+        name: data.name,
+        remark: data.remark,
+        times: data.times.map(item => ({
+          id: getUuid(),
+          startTime: item.startTime,
+          endTime: item.endTime
+        }))
+      }
+      this.visible = true
+    },
+    addTime() {
+      this.formData.times.push({
+        id: getUuid(),
+        startTime: '',
+        endTime: ''
+      })
+    },
+    removeTime(index) {
+      this.formData.times.splice(index, 1)
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    async handleSubmit() {
+      try {
+        await this.$refs.form.validate()
+        this.loading = true
+        await updateClasses(this.formData)
+        this.$message.success(this.$t('common.saveSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        if (error !== 'validate') {
+          this.$message.error(error.message || this.$t('common.saveFailed'))
+        }
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/org/editDataPrivilege.vue b/src/components/org/editDataPrivilege.vue
new file mode 100644
index 0000000..d100c60
--- /dev/null
+++ b/src/components/org/editDataPrivilege.vue
@@ -0,0 +1,100 @@
+<template>
+  <el-dialog
+    :title="$t('dataPrivilege.editTitle')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose">
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form-item :label="$t('dataPrivilege.name')" prop="name">
+        <el-input
+          v-model="form.name"
+          :placeholder="$t('dataPrivilege.namePlaceholder')" />
+      </el-form-item>
+      <el-form-item :label="$t('dataPrivilege.code')" prop="code">
+        <el-input
+          v-model="form.code"
+          :placeholder="$t('dataPrivilege.codePlaceholder')" />
+      </el-form-item>
+      <el-form-item :label="$t('dataPrivilege.remark')" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          :placeholder="$t('dataPrivilege.remarkPlaceholder')" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { updateDataPrivilege } from '@/api/org/dataPrivilegeManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditDataPrivilege',
+  data() {
+    return {
+      visible: false,
+      form: {
+        dpId: '',
+        name: '',
+        code: '',
+        remark: '',
+        communityId: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: this.$t('dataPrivilege.nameRequired'), trigger: 'blur' },
+          { max: 50, message: this.$t('dataPrivilege.nameMaxLength'), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$t('dataPrivilege.codeRequired'), trigger: 'blur' },
+          { max: 30, message: this.$t('dataPrivilege.codeMaxLength'), trigger: 'blur' }
+        ],
+        remark: [
+          { required: true, message: this.$t('dataPrivilege.remarkRequired'), trigger: 'blur' },
+          { max: 256, message: this.$t('dataPrivilege.remarkMaxLength'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.form = {
+        dpId: data.dpId,
+        name: data.name,
+        code: data.code,
+        remark: data.remark,
+        communityId: getCommunityId()
+      }
+      this.visible = true
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await updateDataPrivilege(this.form)
+            this.$message.success(this.$t('dataPrivilege.editSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            console.error('Failed to edit data privilege:', error)
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dialog-footer {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/i18n/userI18n.js b/src/i18n/userI18n.js
index 508eb7a..74f7f81 100644
--- a/src/i18n/userI18n.js
+++ b/src/i18n/userI18n.js
@@ -1,13 +1,19 @@
 import { messages as staffCommunityMessages } from '../views/staff/staffCommunityLang'
 import { messages as staffAppAuthManageMessages } from '../views/staff/staffAppAuthManageLang'
+import { messages as dataPrivilegeManageMessages } from '../views/org/dataPrivilegeManageLang'
+import { messages as classesManageMessages } from '../views/org/classesManageLang'
 
 export const messages = {
     en: {
         ...staffCommunityMessages.en,
         ...staffAppAuthManageMessages.en,
+        ...dataPrivilegeManageMessages.en,
+        ...classesManageMessages.en,
     },
     zh: {
         ...staffCommunityMessages.zh,
         ...staffAppAuthManageMessages.zh,
+        ...dataPrivilegeManageMessages.zh,
+        ...classesManageMessages.zh,
     }
 }
\ No newline at end of file
diff --git a/src/router/userRouter.js b/src/router/userRouter.js
index b3d40b8..3773adf 100644
--- a/src/router/userRouter.js
+++ b/src/router/userRouter.js
@@ -5,8 +5,18 @@ export default [
         component: () => import('@/views/staff/staffCommunityList.vue')
     },
     {
-        path:'/pages/property/staffAppAuthManage',
-        name:'/pages/property/staffAppAuthManage',
+        path: '/pages/property/staffAppAuthManage',
+        name: '/pages/property/staffAppAuthManage',
         component: () => import('@/views/staff/staffAppAuthManageList.vue')
+    },
+    {
+        path: '/pages/property/dataPrivilegeManage',
+        name: '/pages/property/dataPrivilegeManage',
+        component: () => import('@/views/org/dataPrivilegeManageList.vue')
+    },
+    {
+        path:'/pages/property/classesManage',
+        name:'/pages/property/classesManage',
+        component: () => import('@/views/org/classesManageList.vue')
         },
 ]
\ No newline at end of file
diff --git a/src/views/org/classesManageLang.js b/src/views/org/classesManageLang.js
new file mode 100644
index 0000000..ac0aa71
--- /dev/null
+++ b/src/views/org/classesManageLang.js
@@ -0,0 +1,118 @@
+export const messages = {
+  en: {
+    classesManage: {
+      search: {
+        title: 'Search Conditions',
+        namePlaceholder: 'Please enter class name'
+      },
+      list: {
+        title: 'Class Information'
+      },
+      table: {
+        classesId: 'ID',
+        name: 'Class Name',
+        times: 'Time Period',
+        state: 'Status',
+        createTime: 'Create Time',
+        remark: 'Remark'
+      },
+      add: {
+        title: 'Add Class',
+        name: 'Class Name',
+        namePlaceholder: 'Please enter class name',
+        workTime: 'Work Time',
+        startTimePlaceholder: 'Start Time',
+        endTimePlaceholder: 'End Time',
+        addTime: 'Add Time',
+        remark: 'Remark',
+        remarkPlaceholder: 'Please enter remark'
+      },
+      edit: {
+        title: 'Edit Class',
+        name: 'Class Name',
+        namePlaceholder: 'Please enter class name',
+        workTime: 'Work Time',
+        startTimePlaceholder: 'Start Time',
+        endTimePlaceholder: 'End Time',
+        addTime: 'Add Time',
+        remark: 'Remark',
+        remarkPlaceholder: 'Please enter remark'
+      },
+      delete: {
+        title: 'Delete Confirmation',
+        confirmMessage: 'Are you sure to delete this class?'
+      },
+      state: {
+        title: 'Status Confirmation',
+        confirmMessage: 'Are you sure to {action} this {name}?',
+        successMessage: '{action} successfully',
+        classes: 'class'
+      },
+      validate: {
+        nameRequired: 'Class name is required',
+        nameMaxLength: 'Class name cannot exceed 100 characters',
+        remarkRequired: 'Remark is required',
+        remarkMaxLength: 'Remark cannot exceed 200 characters'
+      },
+      fetchError: 'Failed to fetch class data'
+    }
+  },
+  zh: {
+    classesManage: {
+      search: {
+        title: '查询条件',
+        namePlaceholder: '请输入班次名称'
+      },
+      list: {
+        title: '班次信息'
+      },
+      table: {
+        classesId: '编号',
+        name: '班次名称',
+        times: '时段',
+        state: '状态',
+        createTime: '创建时间',
+        remark: '备注说明'
+      },
+      add: {
+        title: '添加班次',
+        name: '班次名称',
+        namePlaceholder: '请输入班次名称',
+        workTime: '工作时间',
+        startTimePlaceholder: '上班时间',
+        endTimePlaceholder: '下班时间',
+        addTime: '增加时段',
+        remark: '备注说明',
+        remarkPlaceholder: '请输入备注说明'
+      },
+      edit: {
+        title: '修改班次',
+        name: '班次名称',
+        namePlaceholder: '请输入班次名称',
+        workTime: '工作时间',
+        startTimePlaceholder: '上班时间',
+        endTimePlaceholder: '下班时间',
+        addTime: '增加时段',
+        remark: '备注说明',
+        remarkPlaceholder: '请输入备注说明'
+      },
+      delete: {
+        title: '删除确认',
+        confirmMessage: '确定删除该班次吗?'
+      },
+      state: {
+        title: '状态确认',
+        confirmMessage: '确定{action}该{name}吗?',
+        successMessage: '{action}成功',
+        classes: '班次'
+      },
+      validate: {
+        nameRequired: '班次名称不能为空',
+        nameMaxLength: '班次名称不能超过100个字符',
+        remarkRequired: '备注说明不能为空',
+        remarkMaxLength: '备注说明不能超过200个字符'
+      },
+      fetchError: '获取班次数据失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/org/classesManageList.vue b/src/views/org/classesManageList.vue
new file mode 100644
index 0000000..932cbfc
--- /dev/null
+++ b/src/views/org/classesManageList.vue
@@ -0,0 +1,210 @@
+<template>
+  <div class="classes-manage-container">
+    <!-- 查询条件 -->
+    <el-card class="search-wrapper">
+      <div slot="header" class="text-left">
+        <span>{{ $t('classesManage.search.title') }}</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input v-model="searchForm.name" :placeholder="$t('classesManage.search.namePlaceholder')" clearable />
+        </el-col>
+        <el-col :span="4">
+          <el-button type="primary" @click="handleSearch">
+            <i class="el-icon-search"></i>
+            {{ $t('common.search') }}
+          </el-button>
+          <el-button @click="handleReset">
+            <i class="el-icon-refresh"></i>
+            {{ $t('common.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 班次信息 -->
+    <el-card class="list-wrapper">
+      <div slot="header" class="flex justify-between ">
+        <span>{{ $t('classesManage.list.title') }}</span>
+        <div style="float: right">
+          <el-button type="primary" size="small" @click="handleShowDocument">
+            <i class="el-icon-document"></i>
+            {{ $t('common.document') }}
+          </el-button>
+          <el-button type="primary" size="small" @click="handleAdd">
+            <i class="el-icon-plus"></i>
+            {{ $t('common.add') }}
+          </el-button>
+        </div>
+      </div>
+
+      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
+        <el-table-column prop="classesId" :label="$t('classesManage.table.classesId')" align="center" />
+        <el-table-column prop="name" :label="$t('classesManage.table.name')" align="center" />
+        <el-table-column :label="$t('classesManage.table.times')" align="center">
+          <template slot-scope="scope">
+            <div v-for="(time, index) in scope.row.times" :key="index">
+              {{ time.startTime }}~{{ time.endTime }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('classesManage.table.state')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.state === '1001' ? $t('common.enabled') : $t('common.disabled') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('classesManage.table.createTime')" align="center" />
+        <el-table-column prop="remark" :label="$t('classesManage.table.remark')" align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="300" fixed="right">
+          <template slot-scope="scope">
+            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">
+              {{ $t('common.edit') }}
+            </el-button>
+            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
+              {{ $t('common.delete') }}
+            </el-button>
+            <el-button v-if="scope.row.state === '1001'" size="mini" type="warning" @click="handleDisable(scope.row)">
+              {{ $t('common.disabled') }}
+            </el-button>
+            <el-button v-else size="mini" type="success" @click="handleEnable(scope.row)">
+              {{ $t('common.enabled') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination :current-page.sync="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+        :total="page.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </el-card>
+
+    <!-- 组件 -->
+    <add-classes ref="addClasses" @success="handleSuccess" />
+    <edit-classes ref="editClasses" @success="handleSuccess" />
+    <delete-classes ref="deleteClasses" @success="handleSuccess" />
+    <classes-state ref="classesState" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { listClasses } from '@/api/org/classesManageApi'
+import AddClasses from '@/components/org/addClasses'
+import EditClasses from '@/components/org/editClasses'
+import DeleteClasses from '@/components/org/deleteClasses'
+import ClassesState from '@/components/org/classesState'
+
+export default {
+  name: 'ClassesManageList',
+  components: {
+    AddClasses,
+    EditClasses,
+    DeleteClasses,
+    ClassesState
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        name: ''
+      },
+      tableData: [],
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.page.current,
+          row: this.page.size,
+          name: this.searchForm.name
+        }
+        const { data, total } = await listClasses(params)
+        this.tableData = data
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('classesManage.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.page.current = 1
+      this.getList()
+    },
+    handleReset() {
+      this.searchForm = {
+        name: ''
+      }
+      this.handleSearch()
+    },
+    handleAdd() {
+      this.$refs.addClasses.open()
+    },
+    handleEdit(row) {
+      this.$refs.editClasses.open(row)
+    },
+    handleDelete(row) {
+      this.$refs.deleteClasses.open(row)
+    },
+    handleEnable(row) {
+      this.$refs.classesState.open({
+        classesId: row.classesId,
+        stateName: this.$t('common.enable'),
+        state: '1001'
+      })
+    },
+    handleDisable(row) {
+      this.$refs.classesState.open({
+        classesId: row.classesId,
+        stateName: this.$t('common.disable'),
+        state: '2002'
+      })
+    },
+    handleShowDocument() {
+      // TODO: 显示文档逻辑
+    },
+    handleSuccess() {
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.classes-manage-container {
+  padding: 0;
+  margin: 0;
+
+  .search-wrapper {
+    margin-bottom: 20px;
+
+    .el-input {
+      width: 100%;
+    }
+  }
+
+  .list-wrapper {
+    .el-pagination {
+      margin-top: 20px;
+      text-align: right;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/org/dataPrivilegeManageLang.js b/src/views/org/dataPrivilegeManageLang.js
new file mode 100644
index 0000000..59a5af9
--- /dev/null
+++ b/src/views/org/dataPrivilegeManageLang.js
@@ -0,0 +1,118 @@
+export const messages = {
+  en: {
+    dataPrivilege: {
+      title: 'Data Privilege',
+      add: 'Add',
+      edit: 'Edit',
+      delete: 'Delete',
+      addTitle: 'Add Data Privilege',
+      editTitle: 'Edit Data Privilege',
+      deleteTitle: 'Delete Confirmation',
+      name: 'Name',
+      code: 'Code',
+      remark: 'Remark',
+      namePlaceholder: 'Please enter name',
+      codePlaceholder: 'Please enter code',
+      remarkPlaceholder: 'Please enter remark',
+      nameRequired: 'Name is required',
+      nameMaxLength: 'Name cannot exceed 50 characters',
+      codeRequired: 'Code is required',
+      codeMaxLength: 'Code cannot exceed 30 characters',
+      remarkRequired: 'Remark is required',
+      remarkMaxLength: 'Remark cannot exceed 256 characters',
+      addSuccess: 'Added successfully',
+      editSuccess: 'Modified successfully',
+      deleteSuccess: 'Deleted successfully',
+      deleteFailed: 'Delete failed',
+      deleteConfirm: 'Are you sure to delete this data privilege?',
+      confirmOperation: 'Please confirm your operation',
+      unitAuth: 'Unit Authorization',
+      staffRelation: 'Staff Relation',
+      building: 'Building',
+      unit: 'Unit',
+      operation: 'Operation',
+      associateUnit: 'Associate Unit',
+      buildingUnit: 'Building Unit',
+      inputBuildingNum: 'Input building number',
+      inputUnitNum: 'Input unit number',
+      buildingNum: 'Building Number',
+      unitNum: 'Unit Number',
+      confirmCancelUnit: 'Confirm to cancel building unit authorization?',
+      associateSuccess: 'Association successful',
+      staff: 'Staff',
+      staffName: 'Staff Name',
+      phone: 'Phone',
+      email: 'Email',
+      address: 'Address',
+      gender: 'Gender',
+      male: 'Male',
+      female: 'Female',
+      inputStaffName: 'Input staff name',
+      inputPhone: 'Input phone number',
+      inputStaffId: 'Input staff ID',
+      staffId: 'Staff ID',
+      staffAddress: 'Staff Address',
+      associateStaff: 'Associate Staff',
+      confirmCancelAuth: 'Confirm to cancel staff authorization?',
+      detail: 'Detail'
+    }
+  },
+  zh: {
+    dataPrivilege: {
+      title: '数据权限',
+      add: '添加',
+      edit: '修改',
+      delete: '删除',
+      addTitle: '添加数据权限',
+      editTitle: '修改数据权限',
+      deleteTitle: '删除确认',
+      name: '名称',
+      code: '编号',
+      remark: '备注',
+      namePlaceholder: '请输入名称',
+      codePlaceholder: '请输入编号',
+      remarkPlaceholder: '请输入备注',
+      nameRequired: '名称不能为空',
+      nameMaxLength: '名称不能超过50个字符',
+      codeRequired: '编号不能为空',
+      codeMaxLength: '编号不能超过30个字符',
+      remarkRequired: '备注不能为空',
+      remarkMaxLength: '备注不能超过256个字符',
+      addSuccess: '添加成功',
+      editSuccess: '修改成功',
+      deleteSuccess: '删除成功',
+      deleteFailed: '删除失败',
+      deleteConfirm: '确定删除此数据权限吗？',
+      confirmOperation: '请确认您的操作',
+      unitAuth: '单元授权',
+      staffRelation: '员工关联',
+      building: '楼栋',
+      unit: '单元',
+      operation: '操作',
+      associateUnit: '关联单元',
+      buildingUnit: '楼栋单元',
+      inputBuildingNum: '输入楼栋编号',
+      inputUnitNum: '输入单元编号',
+      buildingNum: '楼栋编号',
+      unitNum: '单元编号',
+      confirmCancelUnit: '确定取消楼栋单元授权吗？',
+      associateSuccess: '关联成功',
+      staff: '员工',
+      staffName: '员工名称',
+      phone: '手机号',
+      email: '邮箱',
+      address: '地址',
+      gender: '性别',
+      male: '男',
+      female: '女',
+      inputStaffName: '输入员工名称',
+      inputPhone: '输入手机号',
+      inputStaffId: '输入员工编号',
+      staffId: '员工编号',
+      staffAddress: '员工地址',
+      associateStaff: '关联员工',
+      confirmCancelAuth: '确定取消员工授权吗？',
+      detail: '详情'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/org/dataPrivilegeManageList.vue b/src/views/org/dataPrivilegeManageList.vue
new file mode 100644
index 0000000..b6de160
--- /dev/null
+++ b/src/views/org/dataPrivilegeManageList.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="data-privilege-container">
+    <el-row class="data-privilege-wrapper">
+      <el-col :span="4" class="left-panel">
+        <data-privilege-div ref="dataPrivilegeDiv" @switch-data-privilege="handleSwitchDataPrivilege" />
+      </el-col>
+      <el-col :span="20" class="right-panel">
+        <el-card class="box-card">
+          <div slot="header" class="text-left">
+            <h5>{{ $t('dataPrivilege.title') }}: {{ currentDataPrivilege.name }}</h5>
+            <p>{{ currentDataPrivilege.description }}</p>
+          </div>
+          <div class="tab-wrapper">
+            <el-tabs v-model="activeTab" @tab-click="handleTabClick(activeTab)">
+              <el-tab-pane :label="$t('dataPrivilege.unitAuth')" name="dataPrivilegeUnit">
+                <data-privilege-unit v-if="activeTab === 'dataPrivilegeUnit'" ref="dataPrivilegeUnit"
+                  />
+              </el-tab-pane>
+              <el-tab-pane :label="$t('dataPrivilege.staffRelation')" name="dataPrivilegeStaff">
+                <data-privilege-staff v-if="activeTab === 'dataPrivilegeStaff'" ref="dataPrivilegeStaff"
+                  />
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+
+  </div>
+</template>
+
+<script>
+import DataPrivilegeDiv from '@/components/org/dataPrivilegeDiv'
+import DataPrivilegeUnit from '@/components/org/dataPrivilegeUnit'
+import DataPrivilegeStaff from '@/components/org/dataPrivilegeStaff'
+
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DataPrivilegeManageList',
+  components: {
+    DataPrivilegeDiv,
+    DataPrivilegeUnit,
+    DataPrivilegeStaff,
+  },
+  data() {
+    return {
+      activeTab: 'dataPrivilegeUnit',
+      currentDataPrivilege: {
+        dpId: '',
+        name: '',
+        description: ''
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    handleSwitchDataPrivilege(data) {
+      this.currentDataPrivilege = { ...data }
+      this.handleTabClick(this.activeTab)
+    },
+    handleTabClick(tab) {
+      this.activeTab = tab
+      setTimeout(() => {
+        this.$refs[tab].open(this.currentDataPrivilege.dpId)
+      }, 100)
+    },
+    handleRefresh() {
+      this.$refs.dataPrivilegeDiv.loadData()
+      if (this.activeTab === 'unit') {
+        this.$refs.dataPrivilegeUnit && this.$refs.dataPrivilegeUnit.loadData()
+      } else {
+        this.$refs.dataPrivilegeStaff && this.$refs.dataPrivilegeStaff.loadData()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.data-privilege-container {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+
+  .data-privilege-wrapper {
+    height: 100%;
+
+    .left-panel {
+      padding-right: 0;
+      height: 100%;
+    }
+
+    .right-panel {
+      padding-left: 10px;
+      height: 100%;
+
+      .box-card {
+        height: 100%;
+
+        .clearfix {
+          h5 {
+            margin: 0 0 10px 0;
+            font-size: 16px;
+          }
+
+          p {
+            margin: 0;
+            color: #999;
+          }
+        }
+
+        .line-x {
+          height: 1px;
+          background-color: #e6e6e6;
+          margin: 15px 0;
+        }
+
+        .tab-wrapper {
+          height: calc(100% - 80px);
+          overflow: auto;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
--
libgit2 0.21.4