Merge branch 'main' of github.com:dataease/dataease into main

2021-05-31 12:50:23 +08:00 · 2021-05-31 12:50:23 +08:00 · dccfd6ec27
commit dccfd6ec27
parent 99bae93fb5 cfd8e6eb2b
9 changed files with 220 additions and 116 deletions
--- a/frontend/src/components/canvas/components/AttrList.vue
+++ b/frontend/src/components/canvas/components/AttrList.vue
@ -1,81 +1,82 @@
 <template>
-    <div class="attr-list">
-        <el-form>
-            <el-form-item v-for="(key, index) in styleKeys.filter(item => item != 'rotate')" :key="index" :label="map[key]">
-                <el-color-picker v-if="key == 'borderColor'" v-model="curComponent.style[key]"></el-color-picker>
-                <el-color-picker v-else-if="key == 'color'" v-model="curComponent.style[key]"></el-color-picker>
-                <el-color-picker v-else-if="key == 'backgroundColor'" v-model="curComponent.style[key]"></el-color-picker>
-                <el-select v-else-if="key == 'textAlign'" v-model="curComponent.style[key]">
-                    <el-option
-                        v-for="item in options"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                    ></el-option>
-                </el-select>
-                <el-input type="number" v-else v-model="curComponent.style[key]" />
-            </el-form-item>
-            <el-form-item label="内容" v-if="curComponent && !excludes.includes(curComponent.component)">
-                <el-input type="textarea" v-model="curComponent.propValue" />
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="attr-list">
+    <el-form>
+      <el-form-item v-for="(key, index) in styleKeys.filter(item => (item != 'rotate' && item != 'borderWidth'))" :key="index" :label="map[key]">
+        <el-color-picker v-if="key == 'borderColor'" v-model="curComponent.style[key]" />
+        <el-color-picker v-else-if="key == 'color'" v-model="curComponent.style[key]" />
+        <el-color-picker v-else-if="key == 'backgroundColor'" v-model="curComponent.style[key]" />
+        <el-select v-else-if="key == 'textAlign'" v-model="curComponent.style[key]">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-input v-if="key ==='opacity'" v-model="curComponent.style[key]" type="number" :min="0" :step="0.1" :max="1" />
+        <el-input v-else v-model="curComponent.style[key]" type="number" />
+      </el-form-item>
+      <!--      <el-form-item v-if="curComponent && !excludes.includes(curComponent.component)" label="内容">-->
+      <!--        <el-input v-model="curComponent.propValue" type="textarea" />-->
+      <!--      </el-form-item>-->
+    </el-form>
+  </div>
 </template>

 <script>
 export default {
-    data() {
-        return {
-            excludes: ['Picture', 'Group'], // 这些组件不显示内容
-            options: [
-                {
-                    label: '左对齐',
-                    value: 'left',
-                },
-                {
-                    label: '居中',
-                    value: 'center',
-                },
-                {
-                    label: '右对齐',
-                    value: 'right',
-                },
-            ],
-            map: {
-                left: 'x 坐标',
-                top: 'y 坐标',
-                height: '高',
-                width: '宽',
-                color: '颜色',
-                backgroundColor: '背景色',
-                borderWidth: '边框宽度',
-                borderColor: '边框颜色',
-                borderRadius: '边框半径',
-                fontSize: '字体大小',
-                fontWeight: '字体粗细',
-                lineHeight: '行高',
-                letterSpacing: '字间距',
-                textAlign: '对齐方式',
-                opacity: '透明度',
-            },
+  data() {
+    return {
+      excludes: ['Picture', 'Group'], // 这些组件不显示内容
+      options: [
+        {
+          label: this.$t('panel.aline_left'),
+          value: 'left'
+        },
+        {
+          label: this.$t('panel.aline_center'),
+          value: 'center'
+        },
+        {
+          label: this.$t('panel.aline_right'),
+          value: 'right'
        }
+      ],
+      map: {
+        left: this.$t('panel.left'),
+        top: this.$t('panel.top'),
+        height: this.$t('panel.height'),
+        width: this.$t('panel.width'),
+        color: this.$t('panel.color'),
+        backgroundColor: this.$t('panel.backgroundColor'),
+        borderWidth: this.$t('panel.borderWidth'),
+        borderColor: this.$t('panel.borderColor'),
+        borderRadius: this.$t('panel.borderRadius'),
+        fontSize: this.$t('panel.fontSize'),
+        fontWeight: this.$t('panel.fontWeight'),
+        lineHeight: this.$t('panel.lineHeight'),
+        letterSpacing: this.$t('panel.letterSpacing'),
+        textAlign: this.$t('panel.textAlign'),
+        opacity: this.$t('panel.opacity')
+      }
+    }
+  },
+  computed: {
+    styleKeys() {
+      return this.$store.state.curComponent ? Object.keys(this.$store.state.curComponent.style) : []
    },
-    computed: {
-        styleKeys() {
-            return this.$store.state.curComponent? Object.keys(this.$store.state.curComponent.style) : []
-        },
-        curComponent() {
-            return this.$store.state.curComponent
-        },
-    },
+    curComponent() {
+      return this.$store.state.curComponent
+    }
+  }
 }
 </script>

 <style lang="scss" scoped>
 .attr-list {
    overflow: auto;
-    padding: 20px;
+    padding: 0px;
    padding-top: 0;
    height: 100%;
 }
-</style>
+</style>
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@ -11,6 +11,19 @@
      <!--        <span> {{ $t('panel.canvas_scale') }} </span>-->
      <!--        <input v-model="scale" @input="handleScaleChange"> %-->
      <!--      </div>-->
+
+      <el-tooltip :content="$t('panel.style')">
+        <el-button :class="styleButtonActive?'button-show':'button-closed'" class="el-icon-magic-stick" size="mini" circle @click="showPanel" />
+      </el-tooltip>
+
+      <el-tooltip v-if="!aidedButtonActive" :content="$t('panel.open_aided_design') ">
+        <el-button class="el-icon-help button-closed" size="mini" circle @click="changeAidedDesign" />
+      </el-tooltip>
+
+      <el-tooltip v-if="aidedButtonActive" :content="$t('panel.close_aided_design') ">
+        <el-button class="el-icon-help button-show" size="mini" circle @click="changeAidedDesign" />
+      </el-tooltip>
+
      <el-tooltip :content="$t('panel.undo') ">
        <el-button class="el-icon-refresh-right" size="mini" circle @click="undo" />
      </el-tooltip>
@ -56,11 +69,8 @@ import {
 export default {
  name: 'Toolbar',
  props: {
-    buttonActive: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
+    styleButtonActive: Boolean,
+    aidedButtonActive: Boolean
  },
  data() {
    return {
@ -233,6 +243,9 @@ export default {

    clickPreview() {
      this.$emit('previewFullScreen')
+    },
+    changeAidedDesign() {
+      this.$emit('changeAidedDesign')
    }
  }
 }
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@ -908,7 +908,30 @@ export default {
    topComponent: 'Top Component',
    bottomComponent: 'Bottom Component',
    upComponent: 'Up One Level',
-    downComponent: 'Down One Level'
+    downComponent: 'Down One Level',
+    open_aided_design: 'Open Component Aided Design',
+    close_aided_design: 'Close Component Aided Design',
+    open_style_design: 'Open Style Design',
+    close_style_design: 'Close Style Design',
+    left: 'X-Axis',
+    top: 'Y-Axis',
+    height: 'Height',
+    width: 'Width',
+    color: 'Color',
+    backgroundColor: 'BackgroundColor',
+    borderWidth: 'BorderWidth',
+    borderColor: 'BorderColor',
+    borderRadius: 'BorderRadius',
+    fontSize: 'FontSize',
+    fontWeight: 'FontWeight',
+    lineHeight: 'LineHeight',
+    letterSpacing: 'LetterSpacing',
+    textAlign: 'TextAlign',
+    opacity: 'Opacity',
+    aline_left: 'Aline Left',
+    aline_center: 'Aline Center',
+    aline_right: 'Aline Right',
+    select_component: 'Check Component'
  },
  plugin: {
    local_install: 'Local installation',
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@ -908,7 +908,30 @@ export default {
    topComponent: '置于顶层',
    bottomComponent: '置于底层',
    upComponent: '上移一层',
-    downComponent: '下移一层'
+    downComponent: '下移一层',
+    open_aided_design: '打开组件辅助设计',
+    close_aided_design: '关闭组件辅助设计',
+    open_style_design: '打开样式设计',
+    close_style_design: '关闭样式设计',
+    left: 'x 坐标',
+    top: 'y 坐标',
+    height: '高',
+    width: '宽',
+    color: '颜色',
+    backgroundColor: '背景色',
+    borderWidth: '边框宽度',
+    borderColor: '边框颜色',
+    borderRadius: '边框半径',
+    fontSize: '字体大小',
+    fontWeight: '字体粗细',
+    lineHeight: '行高',
+    letterSpacing: '字间距',
+    textAlign: '对齐方式',
+    opacity: '透明度',
+    aline_left: '左对齐',
+    aline_center: '居中',
+    aline_right: '右对齐',
+    select_component: '请选择组件'
  },
  plugin: {
    local_install: '本地安裝',
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -908,8 +908,30 @@ export default {
    topComponent: '置于顶层',
    bottomComponent: '置于底层',
    upComponent: '上移一层',
-    downComponent: '下移一层'
-
+    downComponent: '下移一层',
+    open_aided_design: '打开组件辅助设计',
+    close_aided_design: '关闭组件辅助设计',
+    open_style_design: '打开样式设计',
+    close_style_design: '关闭样式设计',
+    left: 'x 坐标',
+    top: 'y 坐标',
+    height: '高',
+    width: '宽',
+    color: '颜色',
+    backgroundColor: '背景色',
+    borderWidth: '边框宽度',
+    borderColor: '边框颜色',
+    borderRadius: '边框半径',
+    fontSize: '字体大小',
+    fontWeight: '字体粗细',
+    lineHeight: '行高',
+    letterSpacing: '字间距',
+    textAlign: '对齐方式',
+    opacity: '透明度',
+    aline_left: '左对齐',
+    aline_center: '居中',
+    aline_right: '右对齐',
+    select_component: '请选择组件'
  },
  plugin: {
    local_install: '本地安装',
--- a/frontend/src/views/dataset/common/DatasetGroupSelector.vue
+++ b/frontend/src/views/dataset/common/DatasetGroupSelector.vue
@ -51,7 +51,7 @@
    </el-col>

    <!--scene-->
-    <el-col v-if="sceneMode">
+    <el-col v-if="sceneMode" v-loading="dsLoading">
      <el-row class="title-css">
        <span class="title-text">
          {{ currGroup.name }}
@ -150,7 +150,8 @@ export default {
      tableForm: {
        name: '',
        sort: 'type asc,create_time desc,name asc'
-      }
+      },
+      dsLoading: false
    }
  },
  computed: {},
@ -219,6 +220,7 @@ export default {
    tableTree() {
      this.tableData = []
      if (this.currGroup) {
+        this.dsLoading = true
        post('/dataset/table/list', {
          sort: 'type asc,create_time desc,name asc',
          sceneId: this.currGroup.id,
@ -235,6 +237,9 @@ export default {
          this.$nextTick(function() {
            this.unionDataChange()
          })
+          this.dsLoading = false
+        }).catch(res => {
+          this.dsLoading = false
        })
      }
    },
--- a/frontend/src/views/dataset/common/DatasetTableData.vue
+++ b/frontend/src/views/dataset/common/DatasetTableData.vue
@ -1,5 +1,5 @@
 <template>
-  <el-col ref="container" style="width: 100%;height:100%">
+  <el-col ref="container" v-loading="dataLoading" style="width: 100%;height:100%">
    <span>{{ table.name }}</span>
    <ux-grid
      ref="plxTable"
@ -43,7 +43,8 @@ export default {
    return {
      fields: [],
      data: [],
-      height: 'auto'
+      height: 'auto',
+      dataLoading: false
    }
  },
  watch: {
@ -64,6 +65,7 @@ export default {
    initData() {
      this.resetData()
      if (this.table.id) {
+        this.dataLoading = true
        this.table.row = 100
        post('/dataset/table/getPreviewData/1/100', this.table).then(response => {
          this.fields = response.data.fields
@ -76,6 +78,9 @@ export default {
            this.$error(response.data.msg, 3000)
          }
          this.$refs.plxTable.reloadData(datas)
+          this.dataLoading = false
+        }).catch(res => {
+          this.dataLoading = false
        })
      }
    },
--- a/frontend/src/views/dataset/data/TabDataPreview.vue
+++ b/frontend/src/views/dataset/data/TabDataPreview.vue
@ -169,7 +169,7 @@ export default {
    font-size: 12px;
  }
  .span-number{
-    color: #f18126;
+    color: #0a7be0;
  }
  .table-count{
    color: #606266;
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@ -8,28 +8,34 @@
      </el-col>
      <!--横向工具栏-->
      <el-col :span="16">
-        <Toolbar :button-active="show&&showIndex===2" @showPanel="showPanel" @close-left-panel="closeLeftPanel" @previewFullScreen="previewFullScreen" />
+        <Toolbar
+          :style-button-active="show&&showIndex===2"
+          :aided-button-active="aidedButtonActive"
+          @showPanel="showPanel"
+          @previewFullScreen="previewFullScreen"
+          @changeAidedDesign="changeAidedDesign"
+        />
      </el-col>
    </el-header>
    <de-container>
+      <!--左侧导航栏-->
      <de-aside-container class="ms-aside-container">
        <div style="width: 60px; left: 0px; top: 0px; bottom: 0px;  position: absolute">
          <div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto; font-size: 14px">
-            <!-- 视图图表 -->
+            <!-- 视图图表 start -->
            <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;">
              <el-button :class="show&&showIndex===0? 'button-show':'button-closed'" circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" />
            </div>
-            <!-- 视图文字 -->
            <div style="position: relative; margin: 18px auto 16px;">
              <div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
                {{ $t('panel.view') }}
              </div>
            </div>
-            <!-- 视图分割线 -->
            <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
              <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
            </div>
-            <!-- 过滤组件 -->
+            <!-- 视图图表 end -->
+            <!-- 过滤组件 start -->
            <div tabindex="-1" style="position: relative; margin: 16px auto">
              <div style="height: 60px; position: relative">
                <div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
@ -42,43 +48,18 @@
                </div>
              </div>
            </div>
-            <!-- 分割线 -->
-            <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
-              <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
-            </div>
-
-            <!-- 视图图表 -->
-            <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;">
-              <el-button :class="show&&showIndex===2? 'button-show':'button-closed'" circle class="el-icon-magic-stick" size="mini" @click="showPanel(2)" />
-            </div>
-            <!-- 视图文字 -->
-            <div style="position: relative; margin: 18px auto 16px;">
-              <div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
-                {{ $t('panel.style') }}
-              </div>
-            </div>
-            <!-- 视图分割线 -->
            <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
              <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
            </div>
+            <!-- 过滤组件 end -->
          </div>
        </div>
-        <!--        <div ref="leftPanel" :class="{show:show}" class="leftPanel-container">-->
-        <!--          <div />-->
-        <!--          <div v-if="show" class="leftPanel">-->
-        <!--            <div style="height:100%;overflow-y: auto">-->
-        <!--              <view-select v-show=" show && showIndex===0" />-->
-        <!--              <filter-group v-show=" show &&showIndex===1" />-->
-        <!--              <subject-setting v-show=" show &&showIndex===2" />-->
-        <!--            </div>-->
-        <!--          </div>-->
-        <!--        </div>-->
      </de-aside-container>

      <!--画布区域-->
-      <el-main>
+      <de-main-container style="margin-left: 5px;margin-right: 5px">
+        <!--左侧抽屉-->
        <el-drawer
-          title="我是标题"
          :visible.sync="show"
          :with-header="false"
          style="position: absolute;"
@ -101,9 +82,14 @@
          @mousedown="handleMouseDown"
          @mouseup="deselectCurComponent"
        >
-          <Editor />
+          <Editor style="margin: 15px;" />
        </div>
-      </el-main>
+      </de-main-container>
+      <de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">
+        <AttrList v-if="curComponent" />
+        <p v-else class="placeholder">{{ $t('panel.select_component') }}</p>
+      </de-aside-container>
+
    </de-container>

    <el-dialog
@ -160,6 +146,7 @@ import Toolbar from '@/components/canvas/components/Toolbar'
 import { findOne } from '@/api/panel/panel'
 import PreviewFullScreen from '@/components/canvas/components/Editor/PreviewFullScreen'
 import Preview from '@/components/canvas/components/Editor/Preview'
+import AttrList from '@/components/canvas/components/AttrList.vue'

 // 引入样式
 import '@/components/canvas/assets/iconfont/iconfont.css'
@ -181,7 +168,8 @@ export default {
    FilterDialog,
    SubjectSetting,
    PreviewFullScreen,
-    Preview
+    Preview,
+    AttrList
  },
  data() {
    return {
@ -197,7 +185,9 @@ export default {
      currentWidget: null,
      currentFilterCom: null,
      subjectVisible: false,
-      previewVisible: false
+      previewVisible: false,
+      componentStyleShow: true,
+      aidedButtonActive: false
    }
  },

@ -417,6 +407,9 @@ export default {
    },
    previewFullScreen() {
      this.previewVisible = true
+    },
+    changeAidedDesign() {
+      this.aidedButtonActive = !this.aidedButtonActive
    }

  }
@ -511,5 +504,24 @@ export default {
 .button-closed{
  background-color: #ffffff!important;
 }
+.style-aside{
+  width: 85px;
+  max-width:85px!important;
+  border: 1px solid #E6E6E6;
+  padding: 3px;
+  transition: all 0.3s;
+
+}
+.placeholder{
+  font-size: 14px;
+  color: gray;
+}
+.show {
+  transform: translateX(0);
+}
+
+.hidden {
+  transform: translateX(100%);
+}

 </style>