项目初始化

datax-ui/src/views/chartboard/chart/make.vue

@@ -16,12 +16,12 @@
           </div>
           <div style="margin: -20px;">
             <div class="field-widget-cate"><i class="icon iconfont icon-weidu"></i><span>维度列</span></div>
-            <draggable v-model="dimensions" tag="ul" :options="{sort: false, ghostClass: 'ghost', group: {name: 'dimensions', pull: true, put: false}}">
-              <li v-for="(item, index) in dimensions" :key="index" class="field-widget-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></li>
+            <draggable v-model="dimensions" class="field-widget-tag" :options="{sort: false, ghostClass: 'ghost', group: {name: 'dimensions', pull: true, put: false}}">
+              <el-tag v-for="(item, index) in dimensions" :key="index" class="field-widget-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></el-tag>
             </draggable>
             <div class="field-widget-cate"><i class="icon iconfont icon-zhibiao"></i><span>指标列</span></div>
-            <draggable v-model="measures" tag="ul" :options="{sort: false, ghostClass: 'ghost', group: {name: 'measures', pull: true, put: false}}">
-              <li v-for="(item, index) in measures" :key="index" class="field-widget-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></li>
+            <draggable v-model="measures" class="field-widget-tag" :options="{sort: false, ghostClass: 'ghost', group: {name: 'measures', pull: true, put: false}}">
+              <el-tag v-for="(item, index) in measures" :key="index" class="field-widget-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></el-tag>
             </draggable>
           </div>
         </el-card>
@@ -222,48 +222,37 @@ export default {
         font-size: 13px;
         background-color: #f5f7fa;
         border-bottom: 1px solid #e4e7ed;
+        .icon {
+          margin-right: 6px;
+        }
       }
-      ul {
+      .field-widget-tag {
         position: relative;
         overflow: hidden;
         padding: 10px 10px;
         margin: 0;
         min-height: 200px;
-      }
-      .field-widget-label {
-        font-size: 12px;
-        display: block;
-        width: 48%;
-        line-height: 25px;
-        position: relative;
-        float: left;
-        left: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        margin: 1%;
-        color: #333;
-        border: 1px solid #F4F6FC;
-        &:hover {
-          color: #409EFF;
-          border: 1px dashed #409EFF;
-        }
-        & > div {
+        .field-widget-label {
+          font-size: 12px;
           display: block;
-          cursor: move;
-          background: #F4F6FC;
+          width: 48%;
+          position: relative;
+          float: left;
+          left: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          margin: 1%;
+          color: #333;
           border: 1px solid #F4F6FC;
-          text-align: center;
-          .icon {
-            margin-right: 6px;
-            margin-left: 8px;
-            font-size: 14px;
-            display: inline-block;
-            vertical-align: middle;
+          &:hover {
+            color: #409EFF;
+            border: 1px dashed #409EFF;
           }
-          span {
-            display: inline-block;
-            vertical-align: middle;
+          & > div {
+            display: block;
+            cursor: move;
+            text-align: center;
           }
         }
       }
@@ -302,7 +291,7 @@ export default {
           display: inline-block;
           border: 1px solid #ebecef;
           height: 32px;
-          line-height: 30px;
+          line-height: 35px;
           border-radius: 4px;
           .draggable-item-handle {
             background-color: #ecf5ff;