设备台账编辑页面调整及角色菜单权限样式调整

src/views/mes/criticalComponent/CriticalComponentForm.vue

@@ -51,14 +51,14 @@
             type="textarea"
           />
         </el-form-item>
-        <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.count')" prop="count">
+<!--        <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.count')" prop="count">
           <el-input
             v-model="formData.count"
             :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderCount')"
             clearable
             type="number"
           />
-        </el-form-item>
+        </el-form-item>-->
         <el-row :gutter="16">
           <el-col :span="12" >
             <el-form-item  :label="t('EquipmentManagement.EquipmentKeyItems.qrcode')" prop="qrcodeUrl">

src/views/mes/criticalComponent/index.vue

@@ -141,12 +141,12 @@
             prop="description"
             min-width="180"
           />
-          <el-table-column
+<!--          <el-table-column
             :label="t('EquipmentManagement.EquipmentKeyItems.count')"
             align="center"
             prop="count"
             min-width="180"
-          />
+          />-->
           <el-table-column
             :label="t('EquipmentManagement.EquipmentKeyItems.remark')"
             align="center"

src/views/mes/deviceledger/detail/editIndex.vue

@@ -54,6 +54,12 @@
                               :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceSpec')" />
                   </el-form-item>
                 </el-col>
+                <el-col :span="12">
+                  <el-form-item :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')" prop="factoryEntryDate">
+                    <el-date-picker v-model="formData.factoryEntryDate" type="date" value-format="YYYY-MM-DD"
+                                    :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderFactoryEntryDate')" class="!w-full" />
+                  </el-form-item>
+                </el-col>
                 <el-col v-if="isScheduledEnabled" :span="12">
                   <el-form-item
                     :label="t('EquipmentManagement.EquipmentLedger.ratedCapacity')"
@@ -76,18 +82,22 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item :label="t('EquipmentManagement.EquipmentLedger.productionDate')" prop="productionDate">
+<!--                  <el-form-item :label="t('EquipmentManagement.EquipmentLedger.productionDate')" prop="productionDate">
                     <el-date-picker v-model="formData.productionDate" type="date" value-format="YYYY-MM-DD"
                                     :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderProductionDate')" class="!w-full" />
-                  </el-form-item>
+                  </el-form-item>-->
+                    <el-form-item :label="t('EquipmentManagement.EquipmentLedger.outgoingTime')" prop="outgoingTime">
+                      <el-date-picker v-model="formData.outgoingTime" type="date" value-format="YYYY-MM-DD"
+                                      :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderOutgoingTime')" class="!w-full" />
+                    </el-form-item>
                 </el-col>
               </el-row>
 
               <el-row :gutter="20">
                 <el-col :span="12">
-                  <el-form-item :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')" prop="factoryEntryDate">
-                    <el-date-picker v-model="formData.factoryEntryDate" type="date" value-format="YYYY-MM-DD"
-                                    :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderFactoryEntryDate')" class="!w-full" />
+                  <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceBrand')" prop="deviceBrand">
+                    <el-input v-model="formData.deviceBrand"
+                              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceBrand')" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
@@ -108,15 +118,23 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
+                <el-form-item :label="t('EquipmentManagement.EquipmentLedger.sn')" prop="sn">
+                  <el-input v-model="formData.sn"
+                            :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderSn')" />
+                </el-form-item>
+                </el-col>
+
+              </el-row>
+
+              <el-row :gutter="20">
+                <el-col :span="12">
+
                   <el-form-item :label="t('EquipmentManagement.EquipmentLedger.criticalComponent')" prop="componentIds">
                     <el-input :model-value="criticalComponentDisplay" readonly clearable class="device-ledger-selection-input"
                               :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderComponentIds')"
                               @clear="clearCriticalComponent" @click="openCriticalComponentDialog" />
                   </el-form-item>
                 </el-col>
-              </el-row>
-
-              <el-row :gutter="20">
                 <el-col :span="12">
                   <el-form-item :label="t('EquipmentManagement.EquipmentLedger.sparePart')" prop="beijianIds">
                     <el-input :model-value="beijianDisplay" readonly clearable class="device-ledger-selection-input"
@@ -218,71 +236,48 @@
         <el-button type="primary" :loading="formLoading" :disabled="fileUploading" @click="submitForm">{{ t('common.save') }}</el-button>
       </div>
     </div>
-    <el-dialog v-model="criticalComponentDialogVisible" :title="t('EquipmentManagement.EquipmentLedger.gjTitle')" width="1200px" class="device-ledger-transfer-dialog"
-               append-to-body>
-      <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" min-label-width="68px"
-               style="margin-bottom: 10px">
-        <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.code')" prop="code">
-          <el-input v-model="queryParams.code" :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderCode')"
-                    clearable @keyup.enter="handleQuery" class="!w-240px" />
-        </el-form-item>
-        <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.name')" prop="name">
-          <el-input v-model="queryParams.name" :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderName')"
-                    clearable @keyup.enter="handleQuery" class="!w-240px" />
-        </el-form-item>
-        <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.description')" prop="description">
-          <el-input v-model="queryParams.description"
-                    :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderDescription')" clearable
-                    @keyup.enter="handleQuery" class="!w-240px" />
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="handleQuery">
-            <Icon icon="ep:search" class="mr-5px" />
-            {{ t('common.query') }}
-          </el-button>
-          <el-button @click="resetQuery">
-            <Icon icon="ep:refresh" class="mr-5px" />
-            {{ t('common.reset') }}
-          </el-button>
-        </el-form-item>
-      </el-form>
-      <ContentWrap>
-        <el-table ref="multipleTableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"  class="no-select-all"
-                  @selection-change="handleSelectionChange" @select="handleSelect" @select-all="handleSelectAll" row-key="id">
-          <el-table-column type="selection" width="55" :reserve-selection="true" />
-          <el-table-column :label="t('EquipmentManagement.EquipmentKeyItems.code')" align="center" prop="code"
-                           min-width="140" sortable />
-          <el-table-column :label="t('EquipmentManagement.EquipmentKeyItems.name')" align="center" prop="name"
-                           min-width="140" sortable />
-          <el-table-column :label="t('EquipmentManagement.EquipmentKeyItems.description')" align="center"
-                           prop="description" min-width="180" />
-          <!--                      <el-table-column :label="t('EquipmentManagement.EquipmentKeyItems.count')" align="center" prop="count" min-width="180">
-                <template #default="scope">
-                  <el-input-number
-                    v-model="scope.row.count"
-                    :min="0"
-                    :precision="0"
-                    controls-position="right"
-                    class="!w-full"
-                  />
-                </template>
-              </el-table-column>-->
-          <el-table-column :label="t('EquipmentManagement.EquipmentKeyItems.remark')" align="center" prop="remark"
-                           min-width="180" />
-          <el-table-column :label="t('EquipmentManagement.EquipmentKeyItems.createTime')" align="center" prop="createTime"
-                           :formatter="dateFormatter" width="180" sortable />
-        </el-table>
-
-        <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
-                    @pagination="getList" />
-
-      </ContentWrap>
-      <template #footer>
-        <el-button @click="criticalComponentDialogVisible = false">{{ t('common.cancel') }}</el-button>
-        <el-button type="primary" @click="confirmCriticalComponentDialog">{{ t('common.ok') }}</el-button>
-      </template>
-    </el-dialog>
 
+    <!-- 关键件弹出框     -->
+      <TableSelectDialog
+        ref="criticalComponentSelectDialogRef"
+        :title="t('EquipmentManagement.EquipmentLedger.gjTitle')"
+        :columns="criticalComponentColumns"
+        :fetch-api="fetchCriticalComponentPage"
+        :query-params="queryParams"
+        :default-selected-keys="ids"
+        row-key="id"
+        @confirm="handleCriticalComponentSelectConfirm"
+      >
+        <template #header>
+          <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" min-label-width="68px"
+                   style="margin-bottom: 10px">
+            <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.code')" prop="code">
+              <el-input v-model="queryParams.code" :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderCode')"
+                        clearable @keyup.enter="handleQuery" class="!w-240px" />
+            </el-form-item>
+            <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.name')" prop="name">
+              <el-input v-model="queryParams.name" :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderName')"
+                        clearable @keyup.enter="handleQuery" class="!w-240px" />
+            </el-form-item>
+            <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.description')" prop="description">
+              <el-input v-model="queryParams.description"
+                        :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderDescription')" clearable
+                        @keyup.enter="handleQuery" class="!w-240px" />
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="handleQuery">
+                <Icon icon="ep:search" class="mr-5px" />
+                {{ t('common.query') }}
+              </el-button>
+              <el-button @click="resetQuery">
+                <Icon icon="ep:refresh" class="mr-5px" />
+                {{ t('common.reset') }}
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </template>
+      </TableSelectDialog>
+      <!-- 备件弹出框     -->
     <el-dialog v-model="beijianDialogVisible" :title="t('EquipmentManagement.EquipmentLedger.bjTitle')" width="860px" class="device-ledger-transfer-dialog"
                append-to-body>
       <!--    <div class="device-ledger-transfer">
@@ -381,7 +376,7 @@ const actionBarStyle = reactive({
   width: '100%'
 })
 let actionBarObserver: ResizeObserver | undefined
-
+const criticalComponentSelectDialogRef = ref(false)
 const updateActionBarRect = () => {
   const rect = detailPageRef.value?.getBoundingClientRect()
   if (!rect) return
@@ -623,14 +618,19 @@ const bjToggleSelection = () => {
     }
   })
 }
-
+const selectedDeviceRows = ref<any[]>([])
 const ids = ref<number[]>([])
 const bjIds = ref<number[]>([])
 const openCriticalComponentDialog = () => {
-  criticalComponentDraft.value = [...(formData.value.componentIds ?? [])]
+/*  criticalComponentDraft.value = [...(formData.value.componentIds ?? [])]
   criticalComponentDialogVisible.value = true
   ids.value = [...(formData.value.componentIds ?? [])]
-  setDefaultSelections()
+  setDefaultSelections()*/
+
+  const rows = selectedDeviceRows.value.map((item) => ({ ...item, id: Number(item.id) }))
+  criticalComponentSelectDialogRef.value?.open(rows)
+  let initIds= formData.value.machineId!=undefined?formData.value.machineId.toString().split(","):[]
+  ids.value=initIds.map((id) => Number(id))
 }
 const openBeijianDialog = () => {
   beijianDraft.value = [...(formData.value.beijianIds ?? [])]
@@ -709,6 +709,8 @@ const initFormData = () => ({
   deviceManagerIds: [] as number[],
   productionDate: undefined,
   factoryEntryDate: undefined,
+  sn: undefined,
+  outgoingTime: undefined,
   remark: undefined,
   componentIds: [] as number[],
   beijianIds: [] as number[],
@@ -765,7 +767,15 @@ const beijianOptions = ref<SelectionOption[]>([])
 const savedCriticalComponentOptions = ref<SelectionOption[]>([])
 const savedBeijianOptions = ref<SelectionOption[]>([])
 const editableCriticalComponentRows = ref<any[]>([])
-
+const getCriticalComponentId = (item: any): number | undefined =>
+  normalizeNumberish(
+    item?.componentId ??
+    item?.criticalComponentId ??
+    item?.criticalId ??
+    item?.criticalComponent?.id ??
+    item?.component?.id ??
+    item?.id
+  )
 const buildCriticalComponentOptions = (items: any[] = []): SelectionOption[] =>
   (items ?? [])
     .map((item: any) => {
@@ -888,6 +898,8 @@ const buildPrintData = () => {
     deviceSpec: formData.value.deviceSpec,
     deviceBrand: formData.value.deviceBrand,
     deviceModel: formData.value.deviceModel,
+    sn: formData.value.sn,
+    outgoingTime: formData.value.outgoingTime,
     deviceLocation: formData.value.deviceLocation,
     remark: formData.value.remark,
     qrcodeUrl: formData.value.qrcodeUrl
@@ -941,6 +953,7 @@ const bindFormData = (detail: DeviceLedgerVO) => {
     deviceLine: normalizeNumberish((detail as any)?.deviceLine),
     deviceManagerIds: parseIdsValue((detail as any)?.deviceManager),
     productionDate: normalizeYmd((detail as any)?.productionDate),
+    outgoingTime: normalizeYmd((formData.value as any).outgoingTime),
     factoryEntryDate: normalizeYmd((detail as any)?.factoryEntryDate),
     componentIds: parseIdsValue((detail as any)?.componentId),
     beijianIds: parseIdsValue((detail as any)?.beijianId),
@@ -975,6 +988,7 @@ const buildSubmitData = () => {
     deviceType: normalizeNumberish(formData.value.deviceType),
     deviceLine: normalizeNumberish((formData.value as any).deviceLine),
     productionDate: normalizeYmd(formData.value.productionDate),
+    outgoingTime: normalizeYmd((formData.value as any).outgoingTime),
     factoryEntryDate: normalizeYmd(formData.value.factoryEntryDate),
     deviceManager: formData.value.deviceManagerIds?.length ? formData.value.deviceManagerIds.join(',') : undefined,
     componentId: formData.value.componentIds?.length ? formData.value.componentIds.join(',') : undefined,
@@ -1091,6 +1105,7 @@ async function initForm() {
         deviceLine: normalizeNumberish((detail as any)?.deviceLine),
         deviceManagerIds: parseIdsValue((detail as any)?.deviceManager),
         productionDate: normalizeYmd((detail as any)?.productionDate),
+        outgoingTime: normalizeYmd((detail as any)?.outgoingTime),
         factoryEntryDate: normalizeYmd((detail as any)?.factoryEntryDate),
         componentIds: parseIdsValue((detail as any)?.componentId),
         beijianIds: parseIdsValue((detail as any)?.beijianId),
@@ -1114,6 +1129,80 @@ async function getDetailList() {
     detailLoading.value = false
   }
 }
+
+const criticalComponentColumns = computed(() => [
+  { label: t('EquipmentManagement.EquipmentKeyItems.code'), prop: 'code', minWidth: 140 },
+  { label: t('EquipmentManagement.EquipmentKeyItems.name'), prop: 'name', minWidth: 140 },
+  { label: t('EquipmentManagement.EquipmentKeyItems.description'), prop: 'description', minWidth: 180 },
+  { label: t('EquipmentManagement.EquipmentKeyItems.remark'), prop: 'remark', minWidth: 180 },
+  { label: t('EquipmentManagement.EquipmentKeyItems.createTime'), prop: 'createTime', width: 180 }
+])
+
+const fetchCriticalComponentPage = async (params: Record<string, any>) => {
+  return await CriticalComponentApi.getCriticalComponentPage(params)
+}
+const handleCriticalComponentSelectConfirm = ({ ids: selectedIds, rows }: { ids: Array<number | string>; rows: any[] }) => {
+/*  selectedRows.value = rows
+  savedCriticalComponentOptions.value = mergeSelectionOptions(savedCriticalComponentOptions.value, buildCriticalComponentOptions(rows))
+  const selected = filterValidSelectedIds(
+    [...(formData.value.componentIds ?? []), ...selectedIds],
+    mergeSelectionOptions(savedCriticalComponentOptions.value, criticalComponentOptions.value)
+  )
+  formData.value.componentIds = selected
+  appendSelectedCriticalComponentRows(selected)*/
+  formData.value.devices = payload.rows
+    .map((item) => {
+      const id = Number(item.id)
+      if (!Number.isFinite(id)) return undefined
+      return {
+        id,
+        name: item.deviceName || item.name || item.code || `设备ID:${id}`
+      }
+    })
+    .filter((item): item is { id: number; name: string } => Boolean(item))
+  selectedDeviceRows.value = payload.rows
+  formData.value.machineId = payload.ids.join(',')
+  ids.value = payload.ids.map((id) => Number(id))
+}
+
+const buildCriticalComponentRowById = (id: number) => {
+  const row = selectedRows.value.find((item: any) => normalizeNumberish(item.id) === id)
+  if (row) {
+    return {
+      ...row,
+      id,
+      count: normalizeNumberish(row?.count) ?? 0
+    }
+  }
+
+  const option = mergeSelectionOptions(savedCriticalComponentOptions.value, criticalComponentOptions.value).find((item) => item.value === id)
+  const label = option?.label ?? String(id)
+  const [code, ...nameParts] = label.split('-')
+  return {
+    id,
+    code: nameParts.length ? code : '',
+    name: nameParts.length ? nameParts.join('-') : label,
+    count: 0,
+    description: '',
+    remark: '',
+    createTime: undefined
+  }
+}
+
+const appendSelectedCriticalComponentRows = (selectedIds: number[]) => {
+  const existingIds = new Set(
+    editableCriticalComponentRows.value
+      .map((row: any) => getCriticalComponentId(row))
+      .filter((id): id is number => id !== undefined)
+  )
+  const rowsToAppend = selectedIds
+    .filter((id) => !existingIds.has(id))
+    .map((id) => buildCriticalComponentRowById(id))
+  if (rowsToAppend.length) {
+    editableCriticalComponentRows.value = [...editableCriticalComponentRows.value, ...rowsToAppend]
+  }
+}
+
 onMounted(async () => {
   await ensureOptionsLoaded()
   initForm()

src/views/system/role/RoleAssignMenuForm.vue

@@ -1,5 +1,39 @@
 <template>
-  <Dialog v-model="dialogVisible" :title="t('SystemManagement.Role.menuPermission')">
+  <el-drawer
+    v-model="dialogVisible"
+    :with-header="false"
+    append-to-body
+    class="role-permission-drawer"
+    direction="rtl"
+    size="640px"
+  >
+    <div class="role-permission-drawer__shell">
+      <div class="role-permission-drawer__header">
+        <div class="role-permission-drawer__title">
+          <el-button text circle class="role-permission-drawer__close" @click="dialogVisible = false">
+            <Icon icon="ep:close" />
+          </el-button>
+          <span>{{ t('SystemManagement.Role.menuPermission') }}</span>
+        </div>
+        <el-dropdown trigger="click">
+          <el-button>
+            更多操作
+            <Icon icon="ep:arrow-down" class="ml-4px" />
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="handleCheckedTreeNodeAll">
+                {{ t('SystemManagement.Role.selectAll') }}
+              </el-dropdown-item>
+              <el-dropdown-item @click="handleCheckedTreeExpand">
+                {{ t('SystemManagement.Role.expandCollapse') }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+
+      <div class="role-permission-drawer__body">
     <el-form
       ref="formRef"
       v-loading="formLoading"
@@ -7,15 +41,17 @@
       label-width="auto"
       class="role-assign-menu-form"
     >
-      <el-form-item :label="t('SystemManagement.Role.name')">
-        <el-tag>{{ formData.name }}</el-tag>
-      </el-form-item>
-      <el-form-item :label="t('SystemManagement.Role.code')">
-        <el-tag>{{ formData.code }}</el-tag>
-      </el-form-item>
-      <el-form-item :label="t('SystemManagement.Role.menuPermission')">
-        <el-card class="w-full h-400px !overflow-y-scroll" shadow="never">
-          <template #header>
+      <div class="role-assign-menu-form__meta-row">
+        <el-form-item :label="t('SystemManagement.Role.name')" class="role-assign-menu-form__meta">
+          <el-tag>{{ formData.name }}</el-tag>
+        </el-form-item>
+        <el-form-item :label="t('SystemManagement.Role.code')" class="role-assign-menu-form__meta">
+          <el-tag>{{ formData.code }}</el-tag>
+        </el-form-item>
+      </div>
+      <el-form-item label-width="0" class="role-assign-menu-form__permission">
+        <div class="role-permission-tree-panel">
+          <div class="role-permission-tree-panel__title">所拥有的权限</div>
             <div class="role-assign-menu-form__header">
               <el-tabs v-model="activeClientType" @tab-change="handleClientTypeChange">
                 <el-tab-pane :label="t('SystemManagement.Menu.clientTypeWeb')" :name="1" />
@@ -40,23 +76,27 @@
             />
               </div>
             </div>
-          </template>
           <el-tree
             ref="treeRef"
+            class="role-permission-tree"
             :data="menuOptions"
             :props="defaultProps"
             :empty-text="t('SystemManagement.Role.loadingText')"
             node-key="id"
             show-checkbox
           />
-        </el-card>
+        </div>
       </el-form-item>
     </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">{{ t('common.ok') }}</el-button>
-      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
-    </template>
-  </Dialog>
+      </div>
+
+      <div class="role-permission-drawer__footer">
+        <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
+        <el-button :disabled="formLoading" @click="submitForm">仅保存</el-button>
+        <el-button :disabled="formLoading" type="primary" @click="submitForm">保存并关闭</el-button>
+      </div>
+    </div>
+  </el-drawer>
 </template>
 <script lang="ts" setup>
 import { defaultProps, handleTree } from '@/utils/tree'
@@ -231,25 +271,182 @@ const handleCheckedTreeExpand = () => {
 </script>
 
 <style scoped>
+.role-permission-drawer :deep(.el-drawer__body) {
+  padding: 0;
+  overflow: hidden;
+}
+
+.role-permission-drawer__shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--el-bg-color);
+}
+
+.role-permission-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 0 0 74px;
+  padding: 0 24px 0 16px;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.role-permission-drawer__title {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  color: var(--el-text-color-primary);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.role-permission-drawer__close {
+  margin-right: 10px;
+  color: var(--el-text-color-secondary);
+}
+
+.role-permission-drawer__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 24px 18px 92px;
+  box-sizing: border-box;
+}
+
+.role-permission-drawer__footer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 14px 18px;
+  box-sizing: border-box;
+  border-top: 1px solid var(--el-border-color-lighter);
+  background: var(--el-bg-color);
+}
+
 .role-assign-menu-form :deep(.el-form-item__label) {
   min-width: 80px;
 }
 
+.role-assign-menu-form__meta-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.role-assign-menu-form__meta {
+  margin-bottom: 0;
+}
+
+.role-assign-menu-form__meta :deep(.el-form-item__content) {
+  min-width: 0;
+}
+
+.role-assign-menu-form__meta :deep(.el-tag) {
+  max-width: 100%;
+  height: 28px;
+  overflow: hidden;
+  border-color: var(--el-border-color-lighter);
+  background: var(--el-fill-color-extra-light);
+  color: var(--el-text-color-primary);
+  line-height: 26px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.role-assign-menu-form__permission {
+  margin-top: 6px;
+  margin-bottom: 0;
+}
+
+.role-permission-tree-panel {
+  width: 100%;
+}
+
+.role-permission-tree-panel__title {
+  margin-bottom: 22px;
+  color: var(--el-text-color-primary);
+  font-size: 16px;
+  line-height: 24px;
+}
+
 .role-assign-menu-form__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
+  margin-bottom: 12px;
 }
 
 .role-assign-menu-form__header :deep(.el-tabs__header) {
   margin: 0;
 }
 
+.role-assign-menu-form__header :deep(.el-tabs__nav-wrap::after) {
+  display: none;
+}
+
 .role-assign-menu-form__actions {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
 }
+
+.role-permission-tree {
+  --el-tree-node-hover-bg-color: transparent;
+  color: var(--el-text-color-primary);
+  font-size: 14px;
+}
+
+.role-permission-tree :deep(.el-tree-node__content) {
+  height: 28px;
+  padding-right: 8px;
+}
+
+.role-permission-tree :deep(.el-tree-node__expand-icon) {
+  color: var(--el-text-color-primary);
+  font-size: 12px;
+}
+
+.role-permission-tree :deep(.el-checkbox) {
+  height: 18px;
+  margin-right: 8px;
+}
+
+.role-permission-tree :deep(.el-checkbox__inner) {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+}
+
+.role-permission-tree :deep(.el-tree-node__label) {
+  line-height: 22px;
+}
+
+@media (max-width: 768px) {
+  .role-permission-drawer :deep(.el-drawer) {
+    width: 100% !important;
+  }
+
+  .role-permission-drawer__header {
+    padding-right: 14px;
+  }
+
+  .role-permission-drawer__body {
+    padding-right: 14px;
+    padding-left: 14px;
+  }
+
+  .role-assign-menu-form__meta-row {
+    grid-template-columns: 1fr;
+  }
+}
 </style>