ow

WebVue/src/views/security/FunctionOperation.vue

@@ -175,7 +175,7 @@
                     </a-collapse-panel>
                     <a-collapse-panel key="2" header="下级菜单">
                         <a-table bordered :data-source="data.SecurityFunctionMapSons" :columns="columnSons"
-                            :pagination="false" :scroll="{ x: 520, y: 600 }">
+                            :row-class-name="rowSonClassName" :pagination="false" :scroll="{ x: 520, y: 600 }">
                             <template #bodyCell="datas">
                                 <template v-if="datas.column.dataIndex === 'index'">
                                     <span>{{ datas.index + 1 }}</span>
@@ -470,6 +470,7 @@ const onReset = (() => {
     data.value.SecurityFunctionMapSons = [];
     functionName.value = '';
     hasData.value = false;
+    selectedSonIndex.value = -1;
 })
 
 const onCreate = (() => {
@@ -501,6 +502,7 @@ const onSave = (async () => {
         loading.value = false;
         hasData.value = true;
         isEdit.value = false;
+        selectedSonIndex.value = -1;
 
     } catch (error) {
         loading.value = false;
@@ -579,10 +581,17 @@ const addSon = (event: MouseEvent) => {
     event.stopPropagation();
 };
 
+const selectedSonIndex = ref<number>(-1);
+
+const rowSonClassName = (record: SecurityFunctionMapViewEntity, index: number) => {
+    return index === selectedSonIndex.value ? 'son-row-selected' : '';
+};
+
 const upSon = (index: number) => {
     if (index > 0) {
         const item = data.value.SecurityFunctionMapSons.splice(index, 1)[0];
         data.value.SecurityFunctionMapSons.splice(index - 1, 0, item);
+        selectedSonIndex.value = index - 1;
     }
 };
 
@@ -590,6 +599,7 @@ const downSon = (index: number) => {
     if (index < data.value.SecurityFunctionMapSons.length) {
         const item = data.value.SecurityFunctionMapSons.splice(index, 1)[0];
         data.value.SecurityFunctionMapSons.splice(index + 1, 0, item);
+        selectedSonIndex.value = index + 1;
     }
 };
 
@@ -699,4 +709,21 @@ const handleSelectPermission = (async () => {
     bottom: 8px;
     border-top: 1px solid silver;
 }
+
+.son-row-selected td {
+    border-top: 2px solid #1677ff !important;
+    border-bottom: 2px solid #1677ff !important;
+}
+
+.son-row-selected td:first-child {
+    border-left: 2px solid #1677ff !important;
+}
+
+.son-row-selected td:last-child {
+    border-right: 2px solid #1677ff !important;
+}
+
+.son-row-selected > td {
+    background-color: #e6f4ff !important;
+}
 </style>