[Improvement][ui]List vacancy optimization and icon icon repair (#4286)

* [Improvement][ui] List vacancy optimization and icon icon repair
4 years ago · e24e690c0b
13 changed files with 82 additions and 13 deletions
--- a/dolphinscheduler-ui/src/js/conf/home/index.js
+++ b/dolphinscheduler-ui/src/js/conf/home/index.js
@ -28,6 +28,7 @@ import i18n from '@/module/i18n'
 import { sync } from 'vuex-router-sync'
 import Chart from '@/module/ana-charts'
 import '@/module/filter/formatDate'
+import '@/module/filter/filterNull'
 import themeData from '@/module/echarts/themeData.json'
 import Permissions from '@/module/permissions'
 import 'sass/conf/home/index.scss'
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js
@ -150,7 +150,7 @@ const tasksState = {
    id: 0,
    desc: `${i18n.$t('Submitted successfully')}`,
    color: '#A9A9A9',
-    icoUnicode: 'fa-dot-circle-o',
+    icoUnicode: 'fa fa-dot-circle-o',
    isSpin: false
  },
  RUNNING_EXECUTION: {
--- a/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue
@ -32,7 +32,6 @@
            </div>
          </template>
        </el-table-column>
-        <el-table-column prop="description" :label="$t('Description')" width="200"></el-table-column>
        <el-table-column :label="$t('Create Time')" min-width="120">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | formatDate}}</span>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
@ -47,7 +47,11 @@
            <span>{{scope.row.updateTime | formatDate}}</span>
          </template>
        </el-table-column>
-        <el-table-column prop="description" :label="$t('Description')"></el-table-column>
+        <el-table-column :label="$t('Description')">
+          <template slot-scope="scope">
+            <span>{{scope.row.description | filterNull}}</span>
+          </template>
+        </el-table-column>
        <el-table-column prop="modifyBy" :label="$t('Modify User')"></el-table-column>
        <el-table-column :label="$t('Timing state')">
          <template slot-scope="scope">
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
@ -32,7 +32,11 @@
        <el-table-column prop="userName" :label="$t('Owned Users')"></el-table-column>
        <el-table-column prop="defCount" :label="$t('Process Define Count')"></el-table-column>
        <el-table-column prop="instRunningCount" :label="$t('Process Instance Running Count')"></el-table-column>
-        <el-table-column prop="description" :label="$t('Description')" width="200"></el-table-column>
+        <el-table-column :label="$t('Description')" width="200">
+          <template slot-scope="scope">
+            <span>{{scope.row.description | filterNull}}</span>
+          </template>
+        </el-table-column>
        <el-table-column :label="$t('Create Time')" min-width="120">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | formatDate}}</span>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue
@ -35,7 +35,11 @@
          </template>
        </el-table-column>
        <el-table-column prop="fileName" :label="$t('File Name')"></el-table-column>
-        <el-table-column prop="description" :label="$t('Description')" width="200"></el-table-column>
+        <el-table-column :label="$t('Description')" width="200">
+          <template slot-scope="scope">
+            <span>{{scope.row.description | filterNull}}</span>
+          </template>
+        </el-table-column>
        <el-table-column :label="$t('Size')">
          <template slot-scope="scope">
            {{_rtSize(scope.row.size)}}
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/subdirectory/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/subdirectory/_source/list.vue
@ -35,7 +35,11 @@
          </template>
        </el-table-column>
        <el-table-column prop="fileName" :label="$t('File Name')"></el-table-column>
-        <el-table-column prop="description" :label="$t('Description')" width="200"></el-table-column>
+        <el-table-column :label="$t('Description')" width="200">
+          <template slot-scope="scope">
+            <span>{{scope.row.description | filterNull}}</span>
+          </template>
+        </el-table-column>
        <el-table-column :label="$t('Size')">
          <template slot-scope="scope">
            {{_rtSize(scope.row.size)}}
--- 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
@ -31,7 +31,11 @@
        </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')" min-width="150"></el-table-column>
+        <el-table-column :label="$t('Description')" min-width="150">
+          <template slot-scope="scope">
+            <span>{{scope.row.description | filterNull}}</span>
+          </template>
+        </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">
--- 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
@ -40,7 +40,11 @@
            {{_rtSize(scope.row.size)}}
          </template>
        </el-table-column>
-        <el-table-column prop="description" :label="$t('Description')" width="200"></el-table-column>
+        <el-table-column :label="$t('Description')" width="200">
+          <template slot-scope="scope">
+            <span>{{scope.row.description | filterNull}}</span>
+          </template>
+        </el-table-column>
        <el-table-column :label="$t('Create Time')" min-width="120">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | formatDate}}</span>
--- 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
@ -20,8 +20,11 @@
      <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')" 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 :label="$t('Description')" min-width="100">
+          <template slot-scope="scope">
+            <span>{{scope.row.description | filterNull}}</span>
+          </template>
+        </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">
--- 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
@ -28,7 +28,11 @@
        <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 prop="phone" :label="$t('Phone')" width="100">
+          <template slot-scope="scope">
+            <span>{{scope.row.phone | filterNull}}</span>
+          </template>
+        </el-table-column>
        <el-table-column :label="$t('State')" width="60">
          <template slot-scope="scope">
            {{scope.row.state === 1 ? `${$t('Enable')}` : `${$t('Disable')}`}}
--- a/dolphinscheduler-ui/src/js/module/filter/filter.js
+++ b/dolphinscheduler-ui/src/js/module/filter/filter.js
@ -22,9 +22,23 @@ import dayjs from 'dayjs'
 */
 const formatDate = (value, fmt) => {
  fmt = fmt || 'YYYY-MM-DD HH:mm:ss'
-  return dayjs(value).format(fmt)
+  if (value === null) {
+    return '-'
+  } else {
+    return dayjs(value).format(fmt)
+  }
+}
+/**
+ * filter null
+ */
+const filterNull = (value) => {
+  if (value === null || value === '') {
+    return '-'
+  } else {
+    return value
+  }
 }

 export {
-  formatDate
+  formatDate, filterNull
 }
--- a/dolphinscheduler-ui/src/js/module/filter/filterNull.js
+++ b/dolphinscheduler-ui/src/js/module/filter/filterNull.js
@ -0,0 +1,24 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Vue from 'vue'
+import { filterNull } from './filter'
+
+/**
+ * @param {String} fmt optional, define filter null
+ */
+Vue.filter('filterNull', filterNull)