From 6e7d3eb76ed32cd4a98d12d41691b37442f19d6d Mon Sep 17 00:00:00 2001
From: break60 <790061044@qq.com>
Date: Mon, 21 Dec 2020 16:12:10 +0800
Subject: [PATCH] [Improvement-3878][ui]Fix the list style

---
 .../pages/udf/pages/function/_source/list.vue | 10 ++++-----
 .../pages/udf/pages/resource/_source/list.vue |  6 ++---
 .../pages/subUdfDirectory/_source/list.vue    | 12 +++++-----
 .../security/pages/queue/_source/list.vue     |  2 +-
 .../security/pages/tenement/_source/list.vue  | 11 +++++-----
 .../security/pages/users/_source/list.vue     | 22 +++++++++----------
 .../pages/warningGroups/_source/list.vue      |  8 ++++---
 .../pages/workerGroups/_source/list.vue       |  2 +-
 .../src/sass/common/_table.scss               |  6 +++++
 9 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue
index 9eaa30aedc..6a98f57823 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/_source/list.vue
@@ -18,7 +18,7 @@
   <div class="list-model">
     <div class="table-box">
       <el-table :data="list" size="mini" style="width: 100%">
-        <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
+        <el-table-column type="index" :label="$t('#')" min-width="120"></el-table-column>
         <el-table-column :label="$t('UDF Function Name')">
           <template slot-scope="scope">
             <el-popover trigger="hover" placement="top">
@@ -29,16 +29,16 @@
             </el-popover>
           </template>
         </el-table-column>
-        <el-table-column prop="className" :label="$t('Class Name')"></el-table-column>
+        <el-table-column prop="className" :label="$t('Class Name')" min-width="120"></el-table-column>
         <el-table-column prop="type" :label="$t('type')"></el-table-column>
-        <el-table-column prop="description" :label="$t('Description')" width="200"></el-table-column>
-        <el-table-column prop="resourceName" :label="$t('Jar Package')"></el-table-column>
+        <el-table-column prop="description" :label="$t('Description')" min-width="150"></el-table-column>
+        <el-table-column prop="resourceName" :label="$t('Jar Package')" min-width="150"></el-table-column>
         <el-table-column :label="$t('Update Time')" min-width="120">
           <template slot-scope="scope">
             <span>{{scope.row.updateTime | formatDate}}</span>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Operation')" width="150">
+        <el-table-column :label="$t('Operation')" min-width="100">
           <template slot-scope="scope">
             <el-tooltip :content="$t('Rename')" placement="top" :enterable="false">
               <span><el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="_edit(scope.row)" circle></el-button></span>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/list.vue
index e38c66565b..e56ae5d599 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/list.vue
@@ -19,7 +19,7 @@
     <div class="table-box">
       <el-table :data="list" size="mini" style="width: 100%">
         <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
-        <el-table-column :label="$t('UDF Resource Name')">
+        <el-table-column :label="$t('UDF Resource Name')" min-width="100">
           <template slot-scope="scope">
             <el-popover trigger="hover" placement="top">
               <p>{{ scope.row.alias }}</p>
@@ -29,7 +29,7 @@
             </el-popover>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Whether directory')" width="100">
+        <el-table-column :label="$t('Whether directory')" min-width="100">
           <template slot-scope="scope">
             {{scope.row.directory? $t('Yes') : $t('No')}}
           </template>
@@ -51,7 +51,7 @@
             <span>{{scope.row.updateTime | formatDate}}</span>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Operation')" width="150">
+        <el-table-column :label="$t('Operation')" min-width="120">
           <template slot-scope="scope">
             <el-tooltip :content="$t('Rename')" placement="top" :enterable="false">
               <span><el-button type="primary" size="mini" icon="el-icon-edit" @click="_rename(scope.row,scope.$index)" circle></el-button></span>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/subUdfDirectory/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/subUdfDirectory/_source/list.vue
index d1f9e0b3a7..cfca456b15 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/subUdfDirectory/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/subUdfDirectory/_source/list.vue
@@ -19,7 +19,7 @@
     <div class="table-box">
       <el-table :data="list" size="mini" style="width: 100%">
         <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
-        <el-table-column :label="$t('UDF Resource Name')" min-width="200">
+        <el-table-column :label="$t('UDF Resource Name')" min-width="150">
           <template slot-scope="scope">
             <el-popover trigger="hover" placement="top">
               <p>{{ scope.row.alias }}</p>
@@ -29,29 +29,29 @@
             </el-popover>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Whether directory')" width="100">
+        <el-table-column :label="$t('Whether directory')" min-width="100">
           <template slot-scope="scope">
             {{scope.row.directory? $t('Yes') : $t('No')}}
           </template>
         </el-table-column>
-        <el-table-column prop="fileName" :label="$t('File Name')" min-width="200"></el-table-column>
+        <el-table-column prop="fileName" :label="$t('File Name')" min-width="150"></el-table-column>
         <el-table-column :label="$t('File Size')">
           <template slot-scope="scope">
             {{_rtSize(scope.row.size)}}
           </template>
         </el-table-column>
         <el-table-column prop="description" :label="$t('Description')" min-width="180"></el-table-column>
-        <el-table-column :label="$t('Create Time')" min-width="140">
+        <el-table-column :label="$t('Create Time')" min-width="120">
           <template slot-scope="scope">
             <span>{{scope.row.createTime | formatDate}}</span>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Update Time')" min-width="140">
+        <el-table-column :label="$t('Update Time')" min-width="120">
           <template slot-scope="scope">
             <span>{{scope.row.updateTime | formatDate}}</span>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Operation')" width="150">
+        <el-table-column :label="$t('Operation')" min-width="120">
           <template slot-scope="scope">
             <el-tooltip :content="$t('Rename')" placement="top" :enterable="false">
               <span><el-button type="primary" size="mini" icon="el-icon-edit" @click="_rename(scope.row,scope.$index)" circle></el-button></span>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/list.vue
index 2df22319d2..41b636d2be 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/list.vue
@@ -31,7 +31,7 @@
             <span>{{scope.row.updateTime | formatDate}}</span>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Operation')" width="130">
+        <el-table-column :label="$t('Operation')" width="100">
           <template slot-scope="scope">
             <el-tooltip :content="$t('Edit')" placement="top">
               <el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="_edit(scope.row)" circle></el-button>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/list.vue
index f2c94fa189..51a04afb48 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/list.vue
@@ -19,15 +19,16 @@
     <div class="table-box">
       <el-table :data="list" size="mini" style="width: 100%">
         <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
-        <el-table-column prop="tenantCode" :label="$t('Tenant Code')" width="180"></el-table-column>
-        <el-table-column prop="description" :label="$t('Description')" width="180"></el-table-column>
-        <el-table-column prop="queueName" :label="$t('Queue')" width="180"></el-table-column>
-        <el-table-column :label="$t('Create Time')">
+        <el-table-column prop="tenantCode" :label="$t('Tenant Code')" min-width="100"></el-table-column>
+        <el-table-column prop="tenantName" :label="$t('Tenant Name')" min-width="100"></el-table-column>
+        <el-table-column prop="description" :label="$t('Description')" min-width="100"></el-table-column>
+        <el-table-column prop="queueName" :label="$t('Queue')" min-width="80"></el-table-column>
+        <el-table-column :label="$t('Create Time')" min-width="120">
           <template slot-scope="scope">
             <span>{{scope.row.createTime | formatDate}}</span>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Update Time')">
+        <el-table-column :label="$t('Update Time')" min-width="120">
           <template slot-scope="scope">
             <span>{{scope.row.updateTime | formatDate}}</span>
           </template>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue
index bb2f79763d..2808aac369 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue
@@ -20,31 +20,31 @@
       <el-table :data="list" size="mini" style="width: 100%">
         <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
         <el-table-column prop="userName" :label="$t('User Name')"></el-table-column>
-        <el-table-column :label="$t('User Type')">
+        <el-table-column :label="$t('User Type')" width="80">
           <template slot-scope="scope">
-            <span>{{scope.row.userType === 'GENERAL_USER'? `${$t('Ordinary users')}` : `${$t('Administrator')}`}}</span>
+            {{scope.row.userType === 'GENERAL_USER' ? `${$t('Ordinary users')}` : `${$t('Administrator')}`}}
           </template>
         </el-table-column>
-        <el-table-column prop="tenantCode" :label="$t('Tenant')" width="160"></el-table-column>
-        <el-table-column prop="queue" :label="$t('Queue')"></el-table-column>
-        <el-table-column prop="email" :label="$t('Email')" min-width="120"></el-table-column>
-        <el-table-column prop="phone" :label="$t('Phone')" min-width="90"></el-table-column>
-        <el-table-column  :label="$t('State')">
+        <el-table-column prop="tenantCode" :label="$t('Tenant')" min-width="120"></el-table-column>
+        <el-table-column prop="queue" :label="$t('Queue')" width="90"></el-table-column>
+        <el-table-column prop="email" :label="$t('Email')" min-width="200"></el-table-column>
+        <el-table-column prop="phone" :label="$t('Phone')" width="100"></el-table-column>
+        <el-table-column :label="$t('State')" width="60">
           <template slot-scope="scope">
-            <span>{{scope.row.state === 1? `${$t('Enable')}` : `${$t('Disable')}`}}</span>
+            {{scope.row.state === 1 ? `${$t('Enable')}` : `${$t('Disable')}`}}
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Create Time')" min-width="120">
+        <el-table-column :label="$t('Create Time')" width="135">
           <template slot-scope="scope">
             <span>{{scope.row.createTime | formatDate}}</span>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Update Time')" min-width="120">
+        <el-table-column :label="$t('Update Time')" width="135">
           <template slot-scope="scope">
             <span>{{scope.row.updateTime | formatDate}}</span>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Operation')" width="130">
+        <el-table-column :label="$t('Operation')" width="120" fixed="right">
           <template slot-scope="scope">
             <el-tooltip :content="$t('Authorize')" placement="top">
               <el-dropdown trigger="click">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/list.vue
index ce9ef00749..29414f4ea0 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/list.vue
@@ -21,15 +21,17 @@
         <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
         <el-table-column prop="groupName" :label="$t('Group Name')"></el-table-column>
         <el-table-column :label="$t('Group Type')" width="100">
-          {{groupType === 'EMAIL' ? `${$t('Email')}` : `${$t('SMS')}`}}
+          <template slot-scope="scope">
+            {{scope.row.groupType === 'EMAIL' ? `${$t('Email')}` : `${$t('SMS')}`}}
+          </template>
         </el-table-column>
         <el-table-column prop="description" :label="$t('Remarks')" width="200"></el-table-column>
-        <el-table-column :label="$t('Create Time')" min-width="120">
+        <el-table-column :label="$t('Create Time')" width="140">
           <template slot-scope="scope">
             <span>{{scope.row.createTime | formatDate}}</span>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Update Time')" min-width="120">
+        <el-table-column :label="$t('Update Time')" width="140">
           <template slot-scope="scope">
             <span>{{scope.row.updateTime | formatDate}}</span>
           </template>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/list.vue
index 596729c070..0c5150e45b 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/list.vue
@@ -20,7 +20,7 @@
       <el-table :data="list" size="mini" style="width: 100%">
         <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
         <el-table-column prop="name" :label="$t('Group')"></el-table-column>
-        <el-table-column label="IPList" width="300">
+        <el-table-column label="IPList" min-width="300">
           <template slot-scope="scope">
             <span>{{scope.row.ipList.join(',')}}</span>
           </template>
diff --git a/dolphinscheduler-ui/src/sass/common/_table.scss b/dolphinscheduler-ui/src/sass/common/_table.scss
index 2d157a3cd6..2f229a1a59 100644
--- a/dolphinscheduler-ui/src/sass/common/_table.scss
+++ b/dolphinscheduler-ui/src/sass/common/_table.scss
@@ -176,7 +176,13 @@
 }
 .el-table th>.cell {
   color: #555;
+  padding-left: 0;
+  padding-right: 0;
 }
 .el-table td div {
   color: #666;
+}
+.el-table td>.cell {
+  padding-left: 0;
+  padding-right: 0;
 }
\ No newline at end of file