v1.9 优化数据权限界面间距比较大问题

wuxw
1 parent 9e2379c0
Showing 7 changed files with 84 additions and 105 deletions
src/api/staff/staffCommunityApi.js
src/components/org/dataPrivilegeStaff.vue
src/components/org/dataPrivilegeUnit.vue
src/components/role/AddPrivilegeGroup.vue
src/components/role/EditPrivilegeGroup.vue
src/views/org/dataPrivilegeManageList.vue
src/views/user/login/Login.vue
@@ -27,7 +27,6 @@ export function listStaffCommunity(params) {
       method: 'get',
       params: {
         ...params,
-        communityId: getCommunityId()
       }
     }).then(response => {
       resolve(response.data)
 <template>
   <div class="data-privilege-staff">
-    <el-form :inline="true" :model="searchForm">
-      <el-form-item :label="$t('dataPrivilege.staffName')">
+    <el-form :inline="true" :model="searchForm" class="text-right">
+      <el-form-item >
         <el-input v-model="searchForm.staffName" :placeholder="$t('dataPrivilege.inputStaffName')" clearable>
         </el-input>
       </el-form-item>
-      <el-form-item :label="$t('dataPrivilege.phone')">
+      <el-form-item >
         <el-input v-model="searchForm.tel" :placeholder="$t('dataPrivilege.inputPhone')" clearable>
         </el-input>
       </el-form-item>
@@ -132,7 +132,7 @@ export default {
       this.$refs.deleteDataPrivilegeStaff.open(row)
     },
     handleDetail(row) {
-      this.$router.push(`/staff/detail/${row.staffId}`)
+      this.$router.push(`/views/staff/staffDetail?staffId=${row.staffId}`)
     },
     handleSizeChange(val) {
       this.pagination.size = val
@@ -150,6 +150,7 @@ export default {
 <style scoped>
 .data-privilege-staff {
   padding: 20px;
+  padding-top:10px;
 }
 .search-card {
@@ -99,6 +99,7 @@ export default {
 <style scoped>
 .data-privilege-unit {
   padding: 20px;
+  padding-top: 0;
 }
 .action-bar {
 <template>
-    <el-dialog :title="isEdit ? $t('role.editRole') : $t('role.addRole')" :visible.sync="visible" width="50%"
+    <el-dialog :title="isEdit ? $t('role.editRole') : $t('role.addRole')" :visible.sync="visible" width="40%"
         @close="resetForm">
         <el-form ref="form" :model="form" :rules="rules" label-width="120px">
             <el-alert v-if="errorInfo" :title="errorInfo" type="error" show-icon />
             <el-form-item :label="$t('role.name')" prop="name">
-                <el-input v-model="form.name" :placeholder="$t('role.nameRequired')" />
+                <el-input v-model="form.name" :placeholder="$t('role.requiredName')" />
             </el-form-item>
             <el-form-item :label="$t('role.description')" prop="description">
-                <el-input v-model="form.description" type="textarea" :placeholder="$t('role.descLength')" :rows="4" />
+                <el-input v-model="form.description" type="textarea" :placeholder="$t('role.descriptionLength')" :rows="4" />
             </el-form-item>
         </el-form>
@@ -19,7 +19,7 @@
         </div>
     </el-dialog>
 </template>
-  
+
 <script>
 import { savePrivilegeGroup, updatePrivilegeGroup } from '@/api/role/roleApi'
@@ -86,7 +86,7 @@ export default {
 }
 </script>
-  
+
 <style lang="scss" scoped>
 .el-alert {
     margin-bottom: 20px;
 <template>
-    <el-dialog
-      :title="$t('role.edit')"
-      :visible.sync="visible"
-      width="50%"
-      @close="resetForm"
-    >
-      <el-form
-        ref="form"
-        :model="form"
-        :rules="rules"
-        label-width="120px"
-      >
-        <el-form-item
-          :label="$t('role.name')"
-          prop="name"
-        >
-          <el-input
-            v-model="form.name"
-            :placeholder="$t('role.requiredName')"
-          />
-        </el-form-item>
-        
-        <el-form-item
-          :label="$t('role.description')"
-          prop="description"
-        >
-          <el-input
-            v-model="form.description"
-            type="textarea"
-            :placeholder="$t('role.descriptionLength')"
-          />
-        </el-form-item>
-      </el-form>
-      
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="visible = false">{{ $t('role.cancel') }}</el-button>
-        <el-button type="primary" @click="submitForm">{{ $t('role.save') }}</el-button>
-      </span>
-    </el-dialog>
-  </template>
-  
-  <script>
-  import { updatePrivilegeGroup } from '@/api/role/roleApi'
-  
-  export default {
-    name: 'EditPrivilegeGroup',
-    data() {
-      return {
-        visible: false,
-        form: {
-          pgId: '',
-          name: '',
-          description: ''
-        },
-        rules: {
-          name: [
-            { required: true, message: this.$t('role.requiredName'), trigger: 'blur' },
-            { min: 2, max: 10, message: this.$t('role.nameLength'), trigger: 'blur' }
-          ],
-          description: [
-            { max: 200, message: this.$t('role.descriptionLength'), trigger: 'blur' }
-          ]
-        }
+  <el-dialog :title="$t('role.edit')" :visible.sync="visible" width="40%" @close="resetForm">
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form-item :label="$t('role.name')" prop="name">
+        <el-input v-model="form.name" :placeholder="$t('role.requiredName')" />
+      </el-form-item>
+
+      <el-form-item :label="$t('role.description')" prop="description">
+        <el-input v-model="form.description" type="textarea" :placeholder="$t('role.descriptionLength')" />
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('role.cancel') }}</el-button>
+      <el-button type="primary" @click="submitForm">{{ $t('role.save') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { updatePrivilegeGroup } from '@/api/role/roleApi'
+
+export default {
+  name: 'EditPrivilegeGroup',
+  data() {
+    return {
+      visible: false,
+      form: {
+        pgId: '',
+        name: '',
+        description: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: this.$t('role.requiredName'), trigger: 'blur' },
+          { min: 2, max: 10, message: this.$t('role.nameLength'), trigger: 'blur' }
+        ],
+        description: [
+          { max: 200, message: this.$t('role.descriptionLength'), trigger: 'blur' }
+        ]
       }
+    }
+  },
+  methods: {
+    show(role) {
+      this.form = {
+        pgId: role.pgId,
+        name: role.name,
+        description: role.description
+      }
+      this.visible = true
     },
-    methods: {
-      show(role) {
-        this.form = {
-          pgId: role.pgId,
-          name: role.name,
-          description: role.description
-        }
-        this.visible = true
-      },
-      submitForm() {
-        this.$refs.form.validate(async valid => {
-          if (valid) {
-            try {
-              await updatePrivilegeGroup(this.form)
-              this.$message.success(this.$t('role.updateSuccess'))
-              this.$emit('success')
-              this.visible = false
-            } catch (error) {
-              this.$message.error(error.message)
-            }
+    submitForm() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await updatePrivilegeGroup(this.form)
+            this.$message.success(this.$t('role.updateSuccess'))
+            this.$emit('success')
+            this.visible = false
+          } catch (error) {
+            this.$message.error(error.message)
           }
-        })
-      },
-      resetForm() {
-        this.$refs.form.resetFields()
-      }
+        }
+      })
+    },
+    resetForm() {
+      this.$refs.form.resetFields()
     }
   }
-  </script>
 \ No newline at end of file
+}
+</script>
 \ No newline at end of file
 <template>
-  <div class="data-privilege-container">
+  <div class="data-privilege-container padding">
     <el-row class="data-privilege-wrapper">
       <el-col :span="4" class="left-panel">
         <data-privilege-div ref="dataPrivilegeDiv" @switch-data-privilege="handleSwitchDataPrivilege" />
@@ -7,8 +7,8 @@
       <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>
+            <span>{{ $t('dataPrivilege.title') }}: {{ currentDataPrivilege.name }}</span>
+            <div>{{ currentDataPrivilege.description }}</div>
           </div>
           <div class="tab-wrapper">
             <el-tabs v-model="activeTab" @tab-click="handleTabClick(activeTab)">
@@ -83,8 +83,7 @@ export default {
 <style lang="scss" scoped>
 .data-privilege-container {
-  padding: 0;
-  margin: 0;
+
   height: 100%;
   .data-privilege-wrapper {
@@ -66,7 +66,9 @@ export default {
   created() {
     localStorage.clear();
     this.getSystemInfo()
-    this.refreshCaptcha();
+    setTimeout(() => {
+      this.refreshCaptcha();
+    }, 1000);
   },
   components: {