up

src/api/system/ocApi.ts

@@ -133,9 +133,22 @@ export function deleteOcById(ocId: number) {
  * @param ocId
  * @param status
  */
-export function updateOcStatus(ocId: number, status: number) {
+export function updateStatus(ocId: number, status: number) {
   return apiRequest({
     url: `/oc/updateStatus/${ocId}/${status}`,
     method: 'PUT',
   })
 }
+
+/**
+ * 更新单位状态
+ * @returns
+ * @param ocId
+ * @param status
+ */
+export function updateLicStatus(ocId: number, status: number) {
+  return apiRequest({
+    url: `/oc/updateLicStatus/${ocId}/${status}`,
+    method: 'PUT',
+  })
+}

src/utils/tool.ts

@@ -797,3 +797,14 @@ export function modelObjectOAM(i: string | number) {
   ]
   return strs[i as unknown as keyof typeof dataType]
 }
+
+export function ocTypeFilter(i: string | number) {
+  const strs = [
+    '未知',
+    '运营方',
+    '企业单位',
+    '政府机构',
+    '合作伙伴',
+  ]
+  return strs[i as unknown as keyof typeof strs]
+}

src/views/customer/components/OcAdmin.vue

@@ -0,0 +1,120 @@
+<route lang="yaml">
+meta:
+  enabled: false
+</route>
+
+<script lang="ts" setup name="Oc">
+import { ElMessage } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { createOcAdmin, getOcAdmin, updateOcAdmin } from '@/api/system/ocApi'
+const emit = defineEmits(['success'])
+
+const formRef = ref<FormInstance>()
+const formRules = ref<FormRules>({
+  ocName: [
+    { required: true, message: '请输入标题', trigger: 'blur' },
+  ],
+  ocTypeId: [
+    { required: true, message: '请输入类型', trigger: 'blur' },
+  ],
+  ocCatId: [
+    { required: true, message: '请输入分类', trigger: 'blur' },
+  ],
+})
+
+const state = reactive({
+  title: '',
+  dialogVisible: false,
+  loading: false,
+  formData: {
+    ocId: undefined, // 企业Id
+    adminId: undefined,
+    adminName: '', // 账号
+    adminPhone: '', // 手机号
+  },
+  actionType: 1,
+})
+
+onMounted(() => {})
+
+const getData = async (ocId: number) => {
+  state.loading = true
+  const { data } = await getOcAdmin(ocId)
+  state.loading = false
+  state.formData = data
+}
+
+function onSubmit() {
+  formRef.value && formRef.value.validate(async (valid) => {
+    if (valid) {
+      if (state.actionType === 1) {
+        await createOcAdmin(state.formData)
+        state.dialogVisible = false
+        emit('success')
+      }
+      else {
+        await updateOcAdmin(state.formData)
+        state.dialogVisible = false
+        emit('success')
+      }
+      ElMessage.success({
+        message: '保存成功',
+        center: true,
+      })
+    }
+  })
+}
+
+function onCancel() {
+  state.dialogVisible = false
+}
+
+function resetFormData() {
+  state.formData = {
+    ocId: undefined, // 企业Id
+    adminId: undefined,
+    adminName: '', // 账号
+    adminPhone: '', // 手机号
+  }
+}
+
+defineExpose({
+  showAddModel(ocId: number) {
+    resetFormData()
+    state.title = '新增管理员'
+    state.actionType = 1
+    state.dialogVisible = true
+  },
+  showEditModel(ocId: number) {
+    resetFormData()
+    state.title = '编辑管理员'
+    state.actionType = 2
+    state.dialogVisible = true
+    getData(ocId)
+  },
+
+})
+</script>
+
+<template>
+  <el-drawer v-model="state.dialogVisible" :title="state.title" width="600px" :close-on-click-modal="false" append-to-body destroy-on-close>
+    <el-form ref="formRef" :model="state.formData" :rules="formRules" label-width="120px" label-suffix="：">
+      <el-form-item label="管理员名称" prop="adminName">
+        <el-input v-model="state.formData.adminName" placeholder="请输入账号" />
+      </el-form-item>
+
+      <el-form-item label="管理员手机号" prop="adminPhone">
+        <el-input v-model="state.formData.adminPhone" placeholder="请输入手机号" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button size="large" @click="onCancel">
+        取消
+      </el-button>
+      <el-button type="primary" size="large" @click="onSubmit">
+        保存
+      </el-button>
+    </template>
+  </el-drawer>
+</template>

src/views/customer/ent/index.vue

@@ -1,7 +1,9 @@
-<script lang="ts" setup name="positionIndex">
+<script lang="ts" setup name="EntIndex">
 import { ElMessage, ElMessageBox } from 'element-plus'
 import OcComponent from '../components/Oc.vue'
-import { deleteOcById, getOcByList } from '@/api/system/ocApi'
+import OcAdminComponent from '../components/OcAdmin.vue'
+import { deleteOcById, getOcByList, resetAdminPwd, updateLicStatus, updateStatus } from '@/api/system/ocApi'
+import { ocTypeFilter } from '@/utils/tool'
 
 const state = reactive({
   loading: false,
@@ -54,28 +56,46 @@ function onOcDel(row: any) {
   }).catch(() => {})
 }
 
-const adminRef = ref()
+const ocAdminRef = ref()
 // 添加管理员账号
 function onAdminAdd(row: any) {
   const { ocId } = row
-  adminRef.value.showAddModel(ocId)
+  ocAdminRef.value.showAddModel(ocId)
 }
 
 // 修改管理员账号
 function onAdminEdit(row: any) {
   const { ocId } = row
-  adminRef.value.showEditModel(ocId)
+  ocAdminRef.value.showEditModel(ocId)
 }
 
+// 状态变更
+const onStatusChange = async (status: number, row: { ocId: number }) => {
+  await updateStatus(row.ocId, status)
+}
+
+// license状态变更
+const onLicStatusChange = async (status: number, row: { ocId: number }) => {
+  await updateLicStatus(row.ocId, status)
+}
+
+function onPasswordReset(row: { ocId: number; adminId: number; adminName: string }) {
+  ElMessageBox.confirm(`确认删除「${row.adminName}」吗？`, '确认信息').then(async () => {
+    const { ocId, adminId } = row
+    await resetAdminPwd(ocId, adminId)
+    ElMessage.success({
+      message: '删除成功',
+      center: true,
+    })
+  }).catch(() => {})
+}
 </script>
 
 <template>
   <div :class="{ 'absolute-container': state.tableAutoHeight }">
-    <page-header title="企业单位管理">
-    </page-header>
+    <page-header title="企业单位管理" />
 
     <page-main>
-
       <tool-bar>
         <template #right>
           <el-input v-model="state.search.keywords" placeholder="请输入名称，支持模糊查询" style="padding-right: 10px;" clearable />
@@ -106,19 +126,25 @@ function onAdminEdit(row: any) {
           </template>
         </el-table-column>
 
-        <el-table-column prop="ocTypeId" label="类型">
+        <el-table-column prop="ocTypeId" label="类型" header-align="center" align="center" width="120">
           <template #default="scope">
-            <span>{{ scope.row.ocTypeId }}</span>
+            <span>{{ ocTypeFilter(scope.row.ocTypeId) }}</span>
           </template>
         </el-table-column>
 
-        <el-table-column prop="ocCatId" label="分类">
-          <template #default="scope">scope.
+        <el-table-column prop="ocCatId" label="分类" header-align="center" align="center" width="120">
+          <template #default="scope">
             <span>{{ scope.row.ocCatTitle }}</span>
           </template>
         </el-table-column>
 
-        <el-table-column label="管理员账号" width="250" align="center" header-align="center">
+        <el-table-column prop="ocRemark" label="备注" header-align="center" align="left">
+          <template #default="scope">
+            <span>{{ scope.row.ocRemark }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="管理员账号" header-align="center" align="center" width="150">
           <template #default="scope">
             <div>
               <el-tag v-if="scope.row.adminId > 0" @click="onAdminEdit(scope.row)">
@@ -131,13 +157,41 @@ function onAdminEdit(row: any) {
           </template>
         </el-table-column>
 
-        <el-table-column prop="ocRemark" label="备注">
+        <el-table-column align="center" label="License控制" width="120">
           <template #default="scope">
-            <span>{{ scope.row.ocRemark }}</span>
+            <div v-if="scope.row.isFixed !== 1">
+              <el-switch
+                v-model="scope.row.status"
+                :active-value="1"
+                :inactive-value="2"
+                :loading="scope.row.loading"
+                inline-prompt
+                active-text="启用"
+                inactive-text="禁用"
+                @change="(status) => onStatusChange(scope.row.status, scope.row)"
+              />
+            </div>
           </template>
         </el-table-column>
 
-        <el-table-column label="操作" width="250" align="center" fixed="right">
+        <el-table-column align="center" label="状态" width="120">
+          <template #default="scope">
+            <div v-if="scope.row.isFixed !== 1">
+              <el-switch
+                v-model="scope.row.licStatus"
+                :active-value="1"
+                :inactive-value="2"
+                :loading="scope.row.loading"
+                inline-prompt
+                active-text="启用"
+                inactive-text="禁用"
+                @change="(status) => onLicStatusChange(scope.row.status, scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" header-align="center" align="center" width="220">
           <template #default="scope">
             <el-button type="primary" size="small" plain @click="onOcEdit(scope.row)">
               编辑
@@ -145,11 +199,15 @@ function onAdminEdit(row: any) {
             <el-button v-if="!scope.row.isFixed" type="danger" size="small" plain @click="onOcDel(scope.row)">
               删除
             </el-button>
+            <el-button v-if="!scope.row.adminId > 0" type="danger" size="small" plain @click="onPasswordReset(scope.row)">
+              重置管理员密码
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
     </page-main>
     <OcComponent ref="ocRef" @success="getDataList" />
+    <OcAdminComponent ref="ocAdminRef" @success="getDataList" />
   </div>
 </template>
 

src/views/customer/org/index.vue

@@ -1,27 +1,238 @@
-<route lang="yaml">
-meta:
-  enabled: false
-</route>
-
-<script lang="ts" setup>
-const value = ref(true)
-const value1 = ref(true)
-const value2 = ref(true)
-const value3 = ref(false)
+<script lang="ts" setup name="OrgIndex">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import OcComponent from '../components/Oc.vue'
+import OcAdminComponent from '../components/OcAdmin.vue'
+import { deleteOcById, getOcByList, resetAdminPwd, updateLicStatus, updateStatus } from '@/api/system/ocApi'
+import { ocTypeFilter } from '@/utils/tool'
+
+const state = reactive({
+  loading: false,
+  // 表格是否自适应高度
+  tableAutoHeight: false,
+  // 搜索
+  search: {
+    ocTypeId: 3,
+    keywords: '',
+  },
+  // 列表数据
+  dataList: [],
+})
+
+const ocRef = ref()
+
+const getDataList = async () => {
+  state.loading = true
+  const { data } = await getOcByList(state.search)
+  state.dataList = data
+  state.loading = false
+}
+
+onMounted(() => {
+  getDataList()
+})
+
+function onSearch() {
+  getDataList()
+}
+
+function onOcAdd() {
+  const ocTypeId = state.search.ocTypeId
+  ocRef.value.showAddModel(ocTypeId)
+}
+
+function onOcEdit(row: any) {
+  const ocId = row.ocId
+  ocRef.value.showEditModel(ocId)
+}
+
+function onOcDel(row: any) {
+  ElMessageBox.confirm(`确认删除「${row.ocName}」吗？`, '确认信息').then(async () => {
+    await deleteOcById(row.ocId)
+    await getDataList()
+    ElMessage.success({
+      message: '删除成功',
+      center: true,
+    })
+  }).catch(() => {})
+}
+
+const ocAdminRef = ref()
+// 添加管理员账号
+function onAdminAdd(row: any) {
+  const { ocId } = row
+  ocAdminRef.value.showAddModel(ocId)
+}
+
+// 修改管理员账号
+function onAdminEdit(row: any) {
+  const { ocId } = row
+  ocAdminRef.value.showEditModel(ocId)
+}
+
+// 状态变更
+const onStatusChange = async (status: number, row: { ocId: number }) => {
+  await updateStatus(row.ocId, status)
+}
+
+// license状态变更
+const onLicStatusChange = async (status: number, row: { ocId: number }) => {
+  await updateLicStatus(row.ocId, status)
+}
+
+function onPasswordReset(row: { ocId: number; adminId: number; adminName: string }) {
+  ElMessageBox.confirm(`确认删除「${row.adminName}」吗？`, '确认信息').then(async () => {
+    const { ocId, adminId } = row
+    await resetAdminPwd(ocId, adminId)
+    ElMessage.success({
+      message: '删除成功',
+      center: true,
+    })
+  }).catch(() => {})
+}
 </script>
 
 <template>
-  <div>
-    <page-header title="开关" />
-    <page-main title="基础用法" class="demo">
-      <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" />
-    </page-main>
-    <page-main title="文字描述" class="demo">
-      <el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费" />
-    </page-main>
-    <page-main title="禁用状态" class="demo">
-      <el-switch v-model="value2" disabled style="margin-right: 10px;" />
-      <el-switch v-model="value3" disabled />
+  <div :class="{ 'absolute-container': state.tableAutoHeight }">
+    <page-header title="政府机构管理" />
+
+    <page-main>
+      <tool-bar>
+        <template #right>
+          <el-input v-model="state.search.keywords" placeholder="请输入名称，支持模糊查询" style="padding-right: 10px;" clearable />
+          <el-button type="primary" @click="onSearch">
+            <template #icon>
+              <el-icon>
+                <svg-icon name="i-ep:search" />
+              </el-icon>
+            </template>
+          </el-button>
+
+          <el-button size="default" @click.stop="onOcAdd">
+            <template #icon>
+              <el-icon>
+                <svg-icon name="i-ep:plus" />
+              </el-icon>
+            </template>
+            公司单位
+          </el-button>
+        </template>
+      </tool-bar>
+      <el-table v-loading="state.loading" class="list-table" :data="state.dataList" size="small" border stripe highlight-current-row height="100%">
+        <el-table-column type="index" label="序号" width="60" header-align="center" align="center" />
+
+        <el-table-column prop="ocName" label="名称" header-align="center" align="center" width="200">
+          <template #default="scope">
+            <span>{{ scope.row.ocName }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="ocTypeId" label="类型" header-align="center" align="center" width="120">
+          <template #default="scope">
+            <span>{{ ocTypeFilter(scope.row.ocTypeId) }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="ocCatId" label="分类" header-align="center" align="center" width="120">
+          <template #default="scope">
+            <span>{{ scope.row.ocCatTitle }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="ocRemark" label="备注" header-align="center" align="left">
+          <template #default="scope">
+            <span>{{ scope.row.ocRemark }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="管理员账号" header-align="center" align="center" width="150">
+          <template #default="scope">
+            <div>
+              <el-tag v-if="scope.row.adminId > 0" @click="onAdminEdit(scope.row)">
+                {{ scope.row.adminName }}
+              </el-tag>
+              <el-tag v-else @click="onAdminAdd(scope.row)">
+                <i class="el-icon-plus" /> 管理员账号
+              </el-tag>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column align="center" label="License控制" width="120">
+          <template #default="scope">
+            <div v-if="scope.row.isFixed !== 1">
+              <el-switch
+                v-model="scope.row.status"
+                :active-value="1"
+                :inactive-value="2"
+                :loading="scope.row.loading"
+                inline-prompt
+                active-text="启用"
+                inactive-text="禁用"
+                @change="(status) => onStatusChange(scope.row.status, scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column align="center" label="状态" width="120">
+          <template #default="scope">
+            <div v-if="scope.row.isFixed !== 1">
+              <el-switch
+                v-model="scope.row.licStatus"
+                :active-value="1"
+                :inactive-value="2"
+                :loading="scope.row.loading"
+                inline-prompt
+                active-text="启用"
+                inactive-text="禁用"
+                @change="(status) => onLicStatusChange(scope.row.status, scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" header-align="center" align="center" width="220">
+          <template #default="scope">
+            <el-button type="primary" size="small" plain @click="onOcEdit(scope.row)">
+              编辑
+            </el-button>
+            <el-button v-if="!scope.row.isFixed" type="danger" size="small" plain @click="onOcDel(scope.row)">
+              删除
+            </el-button>
+            <el-button v-if="!scope.row.adminId > 0" type="danger" size="small" plain @click="onPasswordReset(scope.row)">
+              重置管理员密码
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
     </page-main>
+    <OcComponent ref="ocRef" @success="getDataList" />
+    <OcAdminComponent ref="ocAdminRef" @success="getDataList" />
   </div>
 </template>
+
+<style lang="scss" scoped>
+.absolute-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .page-header {
+    margin-bottom: 0;
+  }
+
+  .page-main {
+    // 让 page-main 的高度自适应
+    flex: 1;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
+    .search-container {
+      margin-bottom: 0;
+    }
+  }
+}
+</style>

src/views/customer/partner/index.vue

@@ -1,27 +1,238 @@
-<route lang="yaml">
-meta:
-  enabled: false
-</route>
-
-<script lang="ts" setup>
-const value = ref(true)
-const value1 = ref(true)
-const value2 = ref(true)
-const value3 = ref(false)
+<script lang="ts" setup name="PartnerIndex">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import OcComponent from '../components/Oc.vue'
+import OcAdminComponent from '../components/OcAdmin.vue'
+import { deleteOcById, getOcByList, resetAdminPwd, updateLicStatus, updateStatus } from '@/api/system/ocApi'
+import { ocTypeFilter } from '@/utils/tool'
+
+const state = reactive({
+  loading: false,
+  // 表格是否自适应高度
+  tableAutoHeight: false,
+  // 搜索
+  search: {
+    ocTypeId: 4,
+    keywords: '',
+  },
+  // 列表数据
+  dataList: [],
+})
+
+const ocRef = ref()
+
+const getDataList = async () => {
+  state.loading = true
+  const { data } = await getOcByList(state.search)
+  state.dataList = data
+  state.loading = false
+}
+
+onMounted(() => {
+  getDataList()
+})
+
+function onSearch() {
+  getDataList()
+}
+
+function onOcAdd() {
+  const ocTypeId = state.search.ocTypeId
+  ocRef.value.showAddModel(ocTypeId)
+}
+
+function onOcEdit(row: any) {
+  const ocId = row.ocId
+  ocRef.value.showEditModel(ocId)
+}
+
+function onOcDel(row: any) {
+  ElMessageBox.confirm(`确认删除「${row.ocName}」吗？`, '确认信息').then(async () => {
+    await deleteOcById(row.ocId)
+    await getDataList()
+    ElMessage.success({
+      message: '删除成功',
+      center: true,
+    })
+  }).catch(() => {})
+}
+
+const ocAdminRef = ref()
+// 添加管理员账号
+function onAdminAdd(row: any) {
+  const { ocId } = row
+  ocAdminRef.value.showAddModel(ocId)
+}
+
+// 修改管理员账号
+function onAdminEdit(row: any) {
+  const { ocId } = row
+  ocAdminRef.value.showEditModel(ocId)
+}
+
+// 状态变更
+const onStatusChange = async (status: number, row: { ocId: number }) => {
+  await updateStatus(row.ocId, status)
+}
+
+// license状态变更
+const onLicStatusChange = async (status: number, row: { ocId: number }) => {
+  await updateLicStatus(row.ocId, status)
+}
+
+function onPasswordReset(row: { ocId: number; adminId: number; adminName: string }) {
+  ElMessageBox.confirm(`确认删除「${row.adminName}」吗？`, '确认信息').then(async () => {
+    const { ocId, adminId } = row
+    await resetAdminPwd(ocId, adminId)
+    ElMessage.success({
+      message: '删除成功',
+      center: true,
+    })
+  }).catch(() => {})
+}
 </script>
 
 <template>
-  <div>
-    <page-header title="开关" />
-    <page-main title="基础用法" class="demo">
-      <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" />
-    </page-main>
-    <page-main title="文字描述" class="demo">
-      <el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费" />
-    </page-main>
-    <page-main title="禁用状态" class="demo">
-      <el-switch v-model="value2" disabled style="margin-right: 10px;" />
-      <el-switch v-model="value3" disabled />
+  <div :class="{ 'absolute-container': state.tableAutoHeight }">
+    <page-header title="合作伙伴管理" />
+
+    <page-main>
+      <tool-bar>
+        <template #right>
+          <el-input v-model="state.search.keywords" placeholder="请输入名称，支持模糊查询" style="padding-right: 10px;" clearable />
+          <el-button type="primary" @click="onSearch">
+            <template #icon>
+              <el-icon>
+                <svg-icon name="i-ep:search" />
+              </el-icon>
+            </template>
+          </el-button>
+
+          <el-button size="default" @click.stop="onOcAdd">
+            <template #icon>
+              <el-icon>
+                <svg-icon name="i-ep:plus" />
+              </el-icon>
+            </template>
+            公司单位
+          </el-button>
+        </template>
+      </tool-bar>
+      <el-table v-loading="state.loading" class="list-table" :data="state.dataList" size="small" border stripe highlight-current-row height="100%">
+        <el-table-column type="index" label="序号" width="60" header-align="center" align="center" />
+
+        <el-table-column prop="ocName" label="名称" header-align="center" align="center" width="200">
+          <template #default="scope">
+            <span>{{ scope.row.ocName }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="ocTypeId" label="类型" header-align="center" align="center" width="120">
+          <template #default="scope">
+            <span>{{ ocTypeFilter(scope.row.ocTypeId) }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="ocCatId" label="分类" header-align="center" align="center" width="120">
+          <template #default="scope">
+            <span>{{ scope.row.ocCatTitle }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="ocRemark" label="备注" header-align="center" align="left">
+          <template #default="scope">
+            <span>{{ scope.row.ocRemark }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="管理员账号" header-align="center" align="center" width="150">
+          <template #default="scope">
+            <div>
+              <el-tag v-if="scope.row.adminId > 0" @click="onAdminEdit(scope.row)">
+                {{ scope.row.adminName }}
+              </el-tag>
+              <el-tag v-else @click="onAdminAdd(scope.row)">
+                <i class="el-icon-plus" /> 管理员账号
+              </el-tag>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column align="center" label="License控制" width="120">
+          <template #default="scope">
+            <div v-if="scope.row.isFixed !== 1">
+              <el-switch
+                v-model="scope.row.status"
+                :active-value="1"
+                :inactive-value="2"
+                :loading="scope.row.loading"
+                inline-prompt
+                active-text="启用"
+                inactive-text="禁用"
+                @change="(status) => onStatusChange(scope.row.status, scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column align="center" label="状态" width="120">
+          <template #default="scope">
+            <div v-if="scope.row.isFixed !== 1">
+              <el-switch
+                v-model="scope.row.licStatus"
+                :active-value="1"
+                :inactive-value="2"
+                :loading="scope.row.loading"
+                inline-prompt
+                active-text="启用"
+                inactive-text="禁用"
+                @change="(status) => onLicStatusChange(scope.row.status, scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" header-align="center" align="center" width="220">
+          <template #default="scope">
+            <el-button type="primary" size="small" plain @click="onOcEdit(scope.row)">
+              编辑
+            </el-button>
+            <el-button v-if="!scope.row.isFixed" type="danger" size="small" plain @click="onOcDel(scope.row)">
+              删除
+            </el-button>
+            <el-button v-if="!scope.row.adminId > 0" type="danger" size="small" plain @click="onPasswordReset(scope.row)">
+              重置管理员密码
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
     </page-main>
+    <OcComponent ref="ocRef" @success="getDataList" />
+    <OcAdminComponent ref="ocAdminRef" @success="getDataList" />
   </div>
 </template>
+
+<style lang="scss" scoped>
+.absolute-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .page-header {
+    margin-bottom: 0;
+  }
+
+  .page-main {
+    // 让 page-main 的高度自适应
+    flex: 1;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
+    .search-container {
+      margin-bottom: 0;
+    }
+  }
+}
+</style>