From 0d86c19b122011dc528c624597b0952660d69aba Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期日, 26 六月 2022 09:32:53 +0800
Subject: [PATCH] 1.优化动态路由

---
 src/views/jcsz/zzjg.vue |   89 ++++++++++++++++++++++++++++++--------------
 1 files changed, 61 insertions(+), 28 deletions(-)

diff --git a/src/views/jcsz/zzjg.vue b/src/views/jcsz/zzjg.vue
index cf1f0fb..235f4ac 100644
--- a/src/views/jcsz/zzjg.vue
+++ b/src/views/jcsz/zzjg.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div class="body" style="background-color: #ffffff;  padding: 20px 10px 0 20px;" :style="{height:mainHeight+'px'}">
-      <div style="height: 50px;">
+    <div class="body" :style="{height:mainHeight+'px'}">
+      <div style="padding: 10px 5px 0 0">
         <el-form
           ref="form"
           :model="form"
@@ -9,15 +9,15 @@
           inline
           style="display: flex;justify-content: space-between"
         >
-          <div style="display: flex;justify-content: space-around;width: 85%">
+          <div class="elForm">
             <el-form-item label="缁勭粐缂栫爜" style=" display: flex;">
-              <el-input v-model="form.OrgCode" placeholder="璇疯緭鍏�" style="width: calc(100%-30px)" />
+              <el-input v-model="form.OrgCode" placeholder="璇疯緭鍏�" style="width: 200px" />
             </el-form-item>
             <el-form-item label="缁勭粐鍚嶇О" style=" display: flex;">
-              <el-input v-model="form.OrgName" placeholder="璇疯緭鍏�" style="width: calc(100%-30px)" />
+              <el-input v-model="form.OrgName" placeholder="璇疯緭鍏�" style="width: 200px" />
             </el-form-item>
             <el-form-item label="缁勭粐绫诲瀷" style=" display: flex;">
-              <el-select v-model="form.OrgType" style="width: calc(100%-30px)" placeholder="璇烽�夋嫨">
+              <el-select v-model="form.OrgType" :popper-append-to-body="false" filterable style="width: 200px" placeholder="璇烽�夋嫨">
                 <el-option
                   v-for="item in OrgTypeArr"
                   :key="item.value"
@@ -27,7 +27,7 @@
               </el-select>
             </el-form-item>
             <el-form-item label="鍒涘缓浜哄憳" style=" display: flex;">
-              <el-input v-model="form.UserName" style="width: calc(100%-30px)" placeholder="璇疯緭鍏�" />
+              <el-input v-model="form.UserName" style="width: 200px" placeholder="璇疯緭鍏�" />
             </el-form-item>
           </div>
           <div style="display: flex;align-items: start;margin-top: 5px;">
@@ -36,28 +36,30 @@
           </div>
         </el-form>
       </div>
-      <div style="margin-bottom: 20px;display: flex">
+      <el-divider />
+      <div style="margin-left: 10px;display: flex">
         <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">鏂板</el-button>
-        <!--        <el-button type="primary" icon="el-icon-edit" @click="edit('edit')">淇敼</el-button>-->
-        <!--        <el-button type="primary" icon="el-icon-delete" @click="del">鎵归噺鍒犻櫎</el-button>-->
       </div>
-
-      <div style="display: flex;border: 1px solid #eee">
+      <el-divider />
+      <div class="elTableDiv">
         <el-table
           :data="tableData"
           border
-          highlight-current-row
+          stripe
           :style="{width: 100+'%',height:tableHeight+'px'}"
+          highlight-current-row
+          :height="tableHeight"
           :header-cell-style="this.$headerCellStyle"
           :cell-style="this.$cellStyle"
           @sort-change="sortChange"
         >
+
           <!--          <el-table-column-->
           <!--            type="selection"-->
           <!--            width="50"-->
           <!--          />-->
           <el-table-column
-            prop="id"
+            prop="RowNum"
             width="50"
             label="搴忓彿"
           />
@@ -97,6 +99,7 @@
           <el-table-column
             prop="lm_date"
             label="鍒涘缓鏃堕棿"
+            show-overflow-tooltip
             sortable="custom"
           />
           <el-table-column
@@ -125,17 +128,17 @@
     </div>
 
     <el-dialog
-      :title="operation==='add'?'娣诲姞':'淇敼'"
+      :title="operation==='add'?'鏂板':'淇敼'"
       :visible.sync="dialogVisible"
       width="50%"
       top="15vh"
       @closed="handleClose"
+      @close="handleClose"
     >
       <el-form ref="dialogForm" :rules="dialogFormRules" :model="dialogForm" label-width="80px">
         <el-form-item label="缁勭粐绫诲瀷" prop="OrgType">
           <el-radio-group
             v-model="dialogForm.OrgType"
-            style="display: flex;align-items: end;height: 29px;"
             @change="changeRadio"
           >
             <el-radio
@@ -156,10 +159,13 @@
           <el-select
             v-model="dialogForm.SupUnit"
             style="width: 220px"
+            filterable
+            :popper-append-to-body="false"
             placeholder="璇烽�夋嫨"
           >
             <el-option
               v-for="item in SupUnitArr"
+              :key="item.id"
               :label="item.org_name"
               :value="item.id"
             />
@@ -217,7 +223,7 @@
         prop: 'lm_date', // 鎺掑簭瀛楁
         order: 'desc', // 鎺掑簭瀛楁
         page: 1, // 绗嚑椤�
-        rows: 10 // 姣忛〉澶氬皯鏉�
+        rows: 20 // 姣忛〉澶氬皯鏉�
       },
       OrgTypeArr: [
         { label: '宸ュ巶', value: 'F' },
@@ -383,20 +389,19 @@
           AddUpdateOrganization(data).then(res => {
             if (res.code === '200') {
               this.$message.success(this.operation === 'add' ? '娣诲姞鎴愬姛锛�' : '淇敼鎴愬姛锛�')
+              this.dialogVisible = false
               this.getOrganizationSearch()
             } else {
               this.$message.error(this.operation === 'add' ? '娣诲姞澶辫触锛�' : '淇敼澶辫触锛�')
             }
           })
-
-          this.dialogVisible = false
         }
       })
     },
     // 鑾峰彇椤甸潰楂樺害
     getHeight() {
       this.$nextTick(() => {
-        this.mainHeight = window.innerHeight - 200
+        this.mainHeight = window.innerHeight - 250
         this.tableHeight = this.mainHeight - 100
       })
     }
@@ -411,17 +416,28 @@
   height: 30px;
   display: flex;
   align-items: center;
+  //border: 1px solid $main_color;
+  border: none;
+  padding: 0 20px;
+}
+::v-deep .el-button--primary:hover {
+  border: none;
 }
 
-::v-deep .el-button--info {
-  //background-color: $main_color !important;
+::v-deep .el-button--info{
   height: 30px;
   display: flex;
   align-items: center;
+  padding: 0 20px;
 }
 
 ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
   background-color: $main_color !important;
+}
+
+::v-deep .el-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
 }
 
 .footerButton {
@@ -434,6 +450,7 @@
   height: 30px;
   display: flex;
   align-items: center;
+  padding: 0 20px;
 }
 
 ::v-deep .el-button--default:hover {
@@ -459,11 +476,11 @@
 }
 
 ::v-deep .el-input__inner {
-  height: 30px
+  height: 30px;
+  line-height:30px;
 }
 
 ::v-deep .el-table .caret-wrapper {
-  //float: right;
   transform: scale(0.8);
 }
 
@@ -486,8 +503,24 @@
   align-items: center;
 }
 
-//::v-deep .el-message-box__btns button:nth-child(2){
-//  background-color: $main_color !important;
-// border-color: $main_color !important;
-//}
+.body ::v-deep .el-divider{
+  border: 1px solid #eee;
+  width: 99%;
+  margin: 10px auto;
+}
+.body ::v-deep .el-form-item{
+  margin-bottom: 0;
+}
+
+::v-deep .el-input__inner:focus {
+  border-color: $main_color;
+}
+
+::v-deep .el-select .el-input__inner:focus{
+  border-color: $main_color;
+}
+
+::v-deep .el-select-dropdown__item.selected{
+color: $main_color;
+}
 </style>

--
Gitblit v1.9.3