角色管理

src/views/device/vehicles.vue

@@ -104,7 +104,7 @@ function reload() {
 <template>
     <div class="common-layout dashboard flex-column-container">
         <div class="flex-item-fixed toolbar">
-            <ElButton :icon="Search" :loading="state.loading" @click="reload">查询</ElButton>
+            <ElButton :icon="Search" :loading="state.loading" @click="reload" type="warning" plain>查询</ElButton>
         </div>
         <DataForm
             class="query-form flex-item-fixed"

src/views/user/roles.vue

@@ -197,8 +197,8 @@ function delRole() {
 </script>
 
 <template>
-    <div class="dashboard flex-column-container">
-        <div class="tools flex-item-fixed">
+    <div class="common-layout dashboard flex-column-container">
+        <div class="toolbar flex-item-fixed">
             <ElButton :icon="Search" :loading="state.loading" @click="reload">查询</ElButton>
             <ElButton :icon="Plus" @click="addOrUpdate(true)">新增</ElButton>
             <ElButton :icon="EditPen" @click="addOrUpdate(false)">编辑</ElButton>
@@ -206,13 +206,13 @@ function delRole() {
         </div>
         <DataForm
             class="query-form flex-item-fixed"
-            style="width: 500px;"
             :data="state.queryData"
             :formFields="data.formFields"
-            :columnCount="2"
+            :columnCount="4"
             layout="bothFixed"
             labelWidth="85px"
             inputWidth="200px"
+            :inline="true"
         />
         <AgGridVue
             ref="gridRef"
@@ -229,10 +229,6 @@ function delRole() {
     height: 100%;
 }
 
-.tools {
-    margin-bottom: 8px;
-}
-
 .query-form {
     height: unset;
 }

src/views/user/users.vue

@@ -210,22 +210,22 @@ function delUser() {
 </script>
 
 <template>
-    <div class="dashboard flex-column-container">
-        <div class="tools flex-item-fixed">
-            <ElButton :icon="Search" :loading="state.loading" @click="reload">查询</ElButton>
+    <div class="common-layout dashboard flex-column-container">
+        <div class="toolbar flex-item-fixed">
+            <ElButton :icon="Search" :loading="state.loading" @click="reload" type="warning" plain>查询</ElButton>
             <ElButton :icon="Plus" @click="addOrUpdate(true)">新增</ElButton>
             <ElButton :icon="EditPen" @click="addOrUpdate(false)">编辑</ElButton>
             <ElButton :icon="Delete" type="danger" :plain="true" @click="delUser">删除</ElButton>
         </div>
         <DataForm
             class="query-form flex-item-fixed"
-            style="width: 500px;"
             :data="state.queryData"
             :formFields="data.formFields"
-            :columnCount="2"
+            :columnCount="4"
             layout="bothFixed"
             labelWidth="85px"
             inputWidth="200px"
+            :inline="true"
         />
         <AgGridVue
             ref="gridRef"
@@ -241,10 +241,6 @@ function delUser() {
     height: 100%;
 }
 
-.tools {
-    margin-bottom: 8px;
-}
-
 .query-form {
     height: unset;
 }