WeBankFinTech · peacewong · Aug 16, 2019 · Aug 16, 2019 · Aug 16, 2019 · Aug 16, 2019
diff --git a/src/js/component/editor/index.scss b/src/js/component/editor/index.scss
@@ -4,10 +4,24 @@
 	height: 100%;
 	width: 100%;
 
-	.monaco-editor {
+	.monaco-editor.vs {
 		.overflow-guard {
 			.monaco-scrollable-element {
-				left: 82px !important;
+				.token {
+					&.log-error {
+						color: red;
+						font-weight: bold;
+					}
+					&.log-warn {
+						color: yellow;
+					}
+					&.log-info {
+						color: blue;
+					}
+					&.log-date {
+						color: green;
+					}
+				}
 			}
 		}
 	}

diff --git a/src/js/component/editor/keyword/python.js b/src/js/component/editor/keyword/python.js
@@ -1,5 +1,5 @@
-import _ from 'lodash';
-import globalcache from '@js/service/db/globalcache.js';
+import { map, isEmpty } from 'lodash';
+import util from '../util';
 import storage from '@/js/helper/storage';
 
 const pyKeywordInfoProposals = [
@@ -215,69 +215,55 @@ const pyKeywordInfoProposals = [
     },
 ];
 
-/**
- * 对拿到的数据格式化成completionList格式
- * @param {*} monaco 编辑器
- * @param {*} list 格式化列表
- * @return {*} 格式化后的列表
- */
-function completionListFormatter(monaco, list) {
-    const formatList = [];
-    list.forEach((item) => {
-        if (item.udfType === 1 || item.udfType === 3) {
-            formatList.push({
-                label: item.udfName,
-                kind: monaco.languages.CompletionItemKind.Function,
-                insertText: item.udfName,
-                detail: item.udfType > 2 ? '方法函数' : 'UDF函数',
-                documentation: item.description,
-            });
-        }
-    });
-    return formatList;
-}
+let functionProposals = [];
 
 export default {
     async register(monaco) {
-        const userInfo = storage.get('userInfo');
-        const userName = userInfo.basic.userName;
-        const globalCache = await globalcache.getCache(userName);
+        const lang = 'python';
 
-        const pyProposals = _.map(pyKeywordInfoProposals, (item) => ({
+        const pyProposals = map(pyKeywordInfoProposals, (item) => ({
             label: item.label.toLowerCase(),
             kind: monaco.languages.CompletionItemKind.Keyword,
             insertText: item.insertText.toLowerCase(),
             detail: item.detail,
             documentation: item.documentation,
         }));
 
-        let functionProposals = completionListFormatter(monaco, globalCache.fnList);
+        util.getHiveList(monaco, lang).then((list) => {
+            functionProposals = list.udfProposals;
+        });
 
         monaco.languages.registerCompletionItemProvider('python', {
             triggerCharacters: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789._'.split(''),
             async provideCompletionItems(model, position) {
+                if (isEmpty(functionProposals)) {
+                    util.getHiveList(monaco, lang).then((list) => {
+                        functionProposals = list.udfProposals;
+                    });
+                }
+
                 const textUntilPosition = model.getValueInRange({
                     startLineNumber: position.lineNumber,
                     startColumn: 1,
                     endLineNumber: position.lineNumber,
                     endColumn: position.column,
                 });
-                let completionList = null;
                 const keywordMatch = textUntilPosition.match(/([^"]*)?$/i);
                 const functionMatch = textUntilPosition.match(/\s+/i);
                 if (functionMatch) {
                     const isFunctionChange = storage.get('isFunctionChange_python');
                     // 如果函数发生load状态变化，则重新从indexdb中获取fnlist
                     if (isFunctionChange) {
                         storage.set('isFunctionChange_python', false);
-                        const globalCache = await globalcache.getCache(userName);
-                        functionProposals = completionListFormatter(monaco, globalCache.fnList);
+                        await util.getHiveList(monaco, lang).then((list) => {
+                            return list.udfProposals;
+                        });
                     }
-                    completionList = functionProposals;
+                    return functionProposals;
                 } else if (keywordMatch) {
-                    completionList = pyProposals;
+                    return pyProposals;
                 }
-                return completionList;
+                return [];
             },
         });
     },

diff --git a/src/js/component/panel/panelItem.vue b/src/js/component/panel/panelItem.vue
@@ -103,7 +103,7 @@ export default {
             } else if (this.isDiy) {
                 styleAttr = Object.assign({
                     'position': 'fixed',
-                    'z-index': 1100,
+                    'z-index': 100,
                 }, this.diyStyle);
             } else {
                 styleAttr = {
@@ -112,7 +112,7 @@ export default {
                     'right': 0,
                     'top': 0,
                     'bottom': 0,
-                    'z-index': 1100,
+                    'z-index': 100,
                 };
             }
             return styleAttr;

diff --git a/src/js/module/globalHistory/expand.js → src/js/component/table/expand.js b/src/js/module/globalHistory/expand.js → src/js/component/table/expand.js
diff --git a/src/js/module/globalHistory/table.vue → src/js/component/table/historyTable.vue b/src/js/module/globalHistory/table.vue → src/js/component/table/historyTable.vue
@@ -16,7 +16,7 @@
             :key="th.key"
             :style="{'min-width': th.width + 'px', 'text-align': th.align}"
             class="we-table-thead-cell">
-            {{ th.title }}
+            {{ th.title || '#' }}
           </th>
         </tr>
       </thead>
@@ -26,21 +26,24 @@
           :key="index"
           class="we-table-row">
           <td
-            v-for="(th) in columns"
+            v-for="(th, index) in columns"
             :key="th.key"
             :style="{'text-align': th.align}"
             class="we-table-row-cell">
             <div
               class="we-table-row-label"
-              :style="{'width': th.width + 'px'}"
-              :class="{'ellipsis': th.ellipsis}">
+              :style="{'width': th.width ? th.width + 'px' : getComputedWidth(th)}"
+              :class="{'ellipsis': th.ellipsis}"
+              :title="th.ellipsis ? td[th.key] : ''">
               <table-expand
                 v-if="th.renderType"
                 :row="td"
                 :column="th"
                 :index="index"
                 :render="renderComponent({type: th.renderType, cell: td, key: th.key, params: th.renderParams})"></table-expand>
-              <span v-else>{{ td[th.key] }}</span>
+              <span
+                v-else
+                :class="th.className">{{ td[th.key] }}</span>
             </div>
           </td>
         </tr>
@@ -52,6 +55,7 @@
 import moment from 'moment';
 import util from '@/js/util';
 import TableExpand from './expand';
+import elementResizeEvent from '@js/helper/elementResizeEvent';
 export default {
     components: {
         TableExpand,
@@ -69,9 +73,15 @@ export default {
     },
     data() {
         return {
-
+            offsetWidth: 0,
         };
     },
+    mounted() {
+        elementResizeEvent.bind(this.$el, this.resize);
+    },
+    beforeDestroy: function() {
+        elementResizeEvent.unbind(this.$el);
+    },
     methods: {
         renderComponent({ type, cell, key, params }) {
             const value = cell[key];
@@ -88,6 +98,10 @@ export default {
                     return this.renderFormatTime(value);
                 case 'convertTime':
                     return this.renderConvertTime(value);
+                case 'index':
+                    return this.renderIndex(cell);
+                case 'a':
+                    return this.renderA(value, cell, params);
                 default:
                     return null;
             }
@@ -244,6 +258,43 @@ export default {
                 return h('span', {}, util.convertTimestamp(value));
             };
         },
+        renderIndex(cell) {
+            const index = this.data.findIndex((item) => item.taskID === cell.taskID);
+            return (h) => {
+                return h('span', {}, index + 1);
+            };
+        },
+        renderA(value, cell, params) {
+            return (h) => {
+                return h('div', {
+                    style: {
+                        cursor: 'pointer',
+                        color: '#ed4014',
+                    },
+                    on: {
+                        click: (ev) => {
+                            params.action({ row: cell });
+                        },
+                    },
+                }, value);
+            };
+        },
+        getComputedWidth(current) {
+            this.offsetWidth = this.$el && this.$el.offsetWidth;
+            let usedWidth = 0;
+            const unHasWidthList = [];
+            this.columns.forEach((item) => {
+                const width = item.width || 0;
+                usedWidth += width;
+                if (!item.width) {
+                    unHasWidthList.push(item);
+                }
+            });
+            return (this.offsetWidth - 30 - usedWidth) / unHasWidthList.length + 'px';
+        },
+        resize() {
+            this.offsetWidth = this.$el && this.$el.offsetWidth;
+        },
     },
 };
 </script>

diff --git a/src/js/component/table/index.js b/src/js/component/table/index.js
@@ -1,3 +1,7 @@
-import WeTable from './table.vue'
+import WeTable from './table.vue';
+import historyTable from './historyTable.vue';
 
-export default WeTable
+export default {
+    WeTable,
+    historyTable,
+};
diff --git a/src/js/component/table/index.scss b/src/js/component/table/index.scss
@@ -92,12 +92,10 @@ $border-color          : #e0e0e0;
     border-bottom: 1px solid $border-color;
 }
 .we-column-item{
-    height: 42px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    height: 67px;
     border-bottom: 1px solid $border-color;
-    padding: 12px 0 12px 10px;
+    padding: 6px;
+    word-break: break-all;
     &.odd{
         background: rgb(250, 250, 250)
     }
@@ -108,4 +106,100 @@ $border-color          : #e0e0e0;
         color: red;
         font-style: italic;
     }
-}
+    .we-column-item-content {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow-y: auto;
+    }
+}
+.hidden-div {
+    .hidden-div-item {
+        padding: 12px 10px 12px 10px;
+        word-break: break-all;
+    }
+}
+.we-table-wrap {
+    overflow: auto;
+    display: block;
+    .we-table {
+        border: 1px solid #dcdee2;
+        table-layout: fixed;
+        .we-table-thead {
+            background-color: #2d8cf0;
+            color: #fff;
+            .we-table-thead-cell {
+                border-right: 1px solid #dcdee2;
+                border-bottom: 1px solid #dcdee2;
+                min-width: 0;
+                height: 48px;
+                box-sizing: border-box;
+                text-align: left;
+                text-overflow: ellipsis;
+                vertical-align: middle;
+            }
+        }
+        .we-table-row {
+            height: 40px;
+            &:nth-child(2n) {
+                background-color: #f8f8f9;
+            }
+            &:hover {
+                background-color: #ebf7ff;
+            }
+            .we-table-row-cell {
+                border-right: 1px solid #dcdee2;
+                border-bottom: 1px solid #dcdee2;
+                min-width: 0;
+                height: 48px;
+                box-sizing: border-box;
+                text-align: left;
+                text-overflow: ellipsis;
+                vertical-align: middle;
+                .we-table-row-label {
+                    line-height: 20px;
+                    padding-left: 18px;
+                    padding-right: 18px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: normal;
+                    word-break: break-all;
+                    -webkit-box-sizing: border-box;
+                    box-sizing: border-box;
+                    &.ellipsis {
+                        text-align: left;
+                        word-break: keep-all;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                    .render-btn {
+                        color: #515a6e;
+                        background-color: transparent;
+                        border-color: transparent;
+                        padding: 1px 7px 2px;
+                        font-size: 12px;
+                        border-radius: 3px;
+                        display: inline-block;
+                        margin-bottom: 0;
+                        font-weight: 400;
+                        text-align: center;
+                        cursor: pointer;
+                        background-image: none;
+                        border: 1px solid transparent;
+                        white-space: nowrap;
+                        border-radius: 4px;
+                        transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear;
+                        &:hover {
+                            color: #57a3f3;
+                            background-color: #fff;
+                            border-color: transparent;
+                            text-decoration: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}