[Improvement-3878][ui]Fix the list style (#4280)

* [Improvement-3878]Tenant list delete user name

* [Improvement-3878][ui]Fix the list style

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>

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>

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>

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>

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>

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">

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>

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>

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;
 }