Merge pull request #4046 from dataease/pr@dev_memory_component

Pr@dev memory component
2022-12-08 11:10:57 +08:00 · 2022-12-08 11:10:57 +08:00 · 48c6adb13d
commit 48c6adb13d
parent 21b3ab1c5c f292c7bd57
15 changed files with 1732 additions and 1477 deletions
--- a/frontend/src/components/canvas/store/layer.js
+++ b/frontend/src/components/canvas/store/layer.js
@ -14,7 +14,6 @@ export default {
          toast('已经到顶了')
        }
      }
-
    },

    downComponent({ componentData, curComponent }) {
--- a/frontend/src/components/deCustomCm/DeTextarea.vue
+++ b/frontend/src/components/deCustomCm/DeTextarea.vue
@ -1,6 +1,6 @@
 <template>
  <el-input
-    v-count="{value, maxlength}"
+    v-count="{value, maxlength, buttonDisabled}"
    :placeholder="$t('fu.search_bar.please_input')"
    show-word-limit
    :disabled="disabled"
@ -16,14 +16,16 @@ export default {
  directives: {
    count: {
      update: function(el, binding) {
-        const lg = binding.value.value?.length || 0
+        const { value, maxlength, buttonDisabled } = binding.value
+        if (buttonDisabled) return
+        const lg = value?.length || 0
        const count = el.querySelector('.el-input__count')
        if (!count) return
        if (!lg) {
          if (count?.classList?.contains('no-zore')) {
            count.classList.remove('no-zore')
          }
-          count.innerHTML = `0/${binding.value.maxlength || 200}`
+          count.innerHTML = `0/${maxlength || 200}`
          return
        }
        if (el.querySelector('.no-zore')) {
@ -34,7 +36,7 @@ export default {
        const num = document.createElement('span')
        const total = document.createElement('span')
        num.style.color = '#1F2329'
-        total.innerHTML = `/${binding.value.maxlength || 200}`
+        total.innerHTML = `/${maxlength || 200}`
        num.innerHTML = lg
        if (!newCount) return
        newCount.classList.add('el-input__count', 'no-zore')
@ -44,6 +46,11 @@ export default {
      }
    }
  },
+  inject: {
+    elForm: {
+      default: ''
+    }
+  },
  props: {
    disabled: Boolean,
    value: String,
@ -52,6 +59,13 @@ export default {
      default: 200
    }
  },
+  computed: {
+    buttonDisabled() {
+      return Object.prototype.hasOwnProperty.call(this.$options.propsData, 'disabled')
+        ? this.disabled
+        : (this.elForm || {}).disabled
+    }
+  },
  methods: {
    handleChange(val) {
      this.$emit('input', val)
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@ -1778,6 +1778,8 @@ export default {
    please_set_driverClass: 'Please specify driver class'
  },
  datasource: {
+    data_source_configuration: 'Data Source Configuration',
+    data_source_table: 'Data Source Table',
    auth_method: 'Auth method',
    passwd: 'UserName Password',
    kerbers_info: 'Please make sure krb5 Conf, KeyTab key, added to path: /opt/dataease/conf',
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@ -1772,6 +1772,8 @@ export default {
    please_set_driverClass: '請指定驅動類'
  },
  datasource: {
+    data_source_configuration: '數據源配寘',
+    data_source_table: '數據源錶',
    auth_method: '認證方式',
    passwd: '用戶名密碼',
    kerbers_info: '請確保 krb5.Conf、Keytab Key，已經添加到路徑：/opt/dataease/conf',
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -1771,6 +1771,8 @@ export default {
    please_set_driverClass: '请指定驱动类'
  },
  datasource: {
+    data_source_configuration: '数据源配置',
+    data_source_table: '数据源表',
    auth_method: '认证方式',
    passwd: '用户名密码',
    kerbers_info: '请确保 krb5.Conf、Keytab Key，已经添加到路径：/opt/dataease/conf',
--- a/frontend/src/permission.js
+++ b/frontend/src/permission.js
@ -53,7 +53,7 @@ const routeBefore = (callBack) => {
    callBack()
  }
 }
-router.beforeEach(async (to, from, next) => routeBefore(() => {
+router.beforeEach(async(to, from, next) => routeBefore(() => {
  // start progress bar
  NProgress.start()
  const mobileIgnores = ['/delink']
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@ -67,8 +67,8 @@
          >
            {{ $t('chart.total') }}
            <span>{{
-                (chart.datasetMode === 0 && !not_support_page_dataset.includes(chart.datasourceType)) ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0)
-              }}</span>
+              (chart.datasetMode === 0 && !not_support_page_dataset.includes(chart.datasourceType)) ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0)
+            }}</span>
            {{ $t('chart.items') }}
          </span>
          <de-pagination
@ -199,7 +199,6 @@ export default {
      } else {
        return {}
      }
-
    },
    trackBarStyleTime() {
      return this.trackBarStyle
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@ -158,7 +158,7 @@
            @click="typeSwitch(ele)"
          >
            <span
-              :title="ele.name"
+              :title="ele.remark"
              class="name"
            >{{ ele.name }}</span>
            <i
@ -180,7 +180,7 @@
            class="table-or-field field"
          >
            <span
-              :title="ele.fieldName"
+              :title="ele.remarks"
              class="name"
            >{{ ele.fieldName }}</span>
            <i
--- a/frontend/src/views/dataset/data/TabDataPreview.vue
+++ b/frontend/src/views/dataset/data/TabDataPreview.vue
@ -80,6 +80,7 @@
 </template>

 <script>
+import _ from 'lodash'
 export default {
  name: 'TabDataPreview',
  props: {
@ -134,6 +135,10 @@ export default {
  },
  mounted() {
    this.init()
+    window.addEventListener('resize', this.calHeight)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calHeight)
  },
  methods: {
    searchRow() {
@ -146,13 +151,10 @@ export default {
    cancel() {
      this.$refs.setCount.doClose()
    },
-    calHeight() {
-      const that = this
-      setTimeout(function() {
-        const currentHeight = document.documentElement.clientHeight
-        that.height = currentHeight - 215
-      }, 10)
-    },
+    calHeight: _.debounce(function() {
+      const currentHeight = document.documentElement.clientHeight
+      this.height = currentHeight - 215
+    }, 200),
    reSearch() {
      if (
        !this.form.row ||
--- a/frontend/src/views/panel/appTemplateMarket/log/index.vue
+++ b/frontend/src/views/panel/appTemplateMarket/log/index.vue
@ -36,8 +36,8 @@
          icon="iconfont icon-icon-filter"
          @click="filterShow"
        >{{
-            $t('user.filter')
-          }}
+           $t('user.filter')
+         }}
          <template v-if="filterTexts.length">
            ({{ cacheCondition.length }})
          </template>
@ -50,7 +50,7 @@
    >
      <span class="sum">{{ paginationConfig.total }}</span>
      <span class="title">{{ $t('user.result_one') }}</span>
-      <el-divider direction="vertical"/>
+      <el-divider direction="vertical" />
      <i
        v-if="showScroll"
        class="el-icon-arrow-left arrow-filter"
@ -63,9 +63,9 @@
          class="text"
        >
          {{ ele }} <i
-          class="el-icon-close"
-          @click="clearOneFilter(index)"
-        />
+            class="el-icon-close"
+            @click="clearOneFilter(index)"
+          />
        </p>
      </div>
      <i
--- a/frontend/src/views/panel/edit/ComponentWait.vue
+++ b/frontend/src/views/panel/edit/ComponentWait.vue
@ -1,8 +1,8 @@
 <template>
  <el-row class="component-wait">
    <el-tabs
-      class="wait-tab"
      v-model="activeName"
+      class="wait-tab"
      style="padding-left: 10px"
    >
      <el-tab-pane
@ -37,7 +37,7 @@
      class="component-wait-main"
      style="padding:10px"
    >
-      <mobile-background-selector/>
+      <mobile-background-selector />
    </el-row>
  </el-row>
 </template>
@ -142,7 +142,6 @@ export default {
  height: 100%;
 }

-
 .wait-tab {
  height: 40px !important;
  background-color: #9ea6b2;
--- a/frontend/src/views/system/datasource/DsForm.vue
+++ b/frontend/src/views/system/datasource/DsForm.vue
--- a/frontend/src/views/system/datasource/DsFormContent.vue
+++ b/frontend/src/views/system/datasource/DsFormContent.vue
--- a/frontend/src/views/system/datasource/DsTable.vue
+++ b/frontend/src/views/system/datasource/DsTable.vue
@ -1,239 +1,129 @@
 <template>
-  <div class="ds-table de-search-table">
-    <el-row class="top-operate">
-      <el-col :span="10">
-        <span class="table-name-top">{{ params.name }}</span>
-      </el-col>
-      <el-col
-        :span="14"
-        class="right-user"
-      >
-        <el-input
-          ref="search"
-          v-model="nickName"
-          :placeholder="$t('system_parameter_setting.search_keywords')"
-          prefix-icon="el-icon-search"
-          class="name-email-search"
-          size="small"
-          clearable
-          @blur="initSearch"
-          @clear="initSearch"
-        />
-      </el-col>
-    </el-row>
-    <div class="table-container">
-      <grid-table
-        v-loading="loading"
-        :table-data="pagingTable"
-        :pagination="paginationConfig"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      >
-        <el-table-column
-          key="name"
-          prop="name"
-          :label="$t('datasource.table_name')"
-        />
-        <el-table-column
-          slot="__operation"
-          key="__operation"
-          :label="$t('commons.operating')"
-          fixed="right"
-          width="108"
-        >
-          <template slot-scope="scope">
-            <el-button
-              class="de-text-btn mar3"
-              type="text"
-              @click="selectDataset(scope.row)"
-            >{{ $t("dataset.detail") }}
-            </el-button>
-          </template>
-        </el-table-column>
-      </grid-table>
-    </div>
-    <el-dialog
-      :title="$t('dataset.detail')"
-      :visible.sync="userDrawer"
-      class="de-dialog-form ds-table-drawer"
-      width="840px"
+  <div class="ds-table-detail">
+    <el-tabs
+      v-model="activeName"
+      class="de-tabs"
    >
-      <el-row
-        style="margin-top: 12px"
-        :gutter="24"
-      >
-        <el-col :span="12">
-          <p class="table-name">
-            {{ $t("datasource.table_name") }}
-          </p>
-          <p class="table-value">
-            {{ dsTableDetail.name }}
-          </p>
-        </el-col>
-        <el-col :span="12">
-          <p class="table-name">
-            {{ $t("datasource.table_description") }}
-          </p>
-          <p class="table-value">
-            {{ dsTableDetail.remark || "-" }}
-          </p>
-        </el-col>
-      </el-row>
-      <el-table
-        :data="dsTableData"
-        stripe
-        style="width: 100%"
-      >
-        <el-table-column
-          prop="fieldName"
-          :label="$t('panel.column_name')"
-        />
-        <el-table-column
-          prop="fieldType"
-          :label="$t('dataset.field_type')"
-        >
-          <template slot-scope="scope">
-            <span v-if="scope.row.fieldType === '0' && params.type==='api'">{{
-              $t("dataset.text")
-            }}</span>
-            <span v-if="scope.row.fieldType === '2' && params.type==='api'">{{
-              $t("dataset.value")
-            }}</span>
-            <span v-if="scope.row.fieldType === '3' && params.type==='api'">{{
-              $t("dataset.value") + '(' + $t("dataset.float") + ')'
-            }}</span>
-            <span v-if="params.type !=='api'">
-              {{ scope.row.fieldType }}
+      <el-tab-pane
+        :label="$t('datasource.data_source_configuration')"
+        name="detail"
+      />
+      <el-tab-pane
+        :label="$t('datasource.data_source_table')"
+        name="table"
+      />
+    </el-tabs>
+    <div class="el-tabs-content">
+      <ds-table-tabs
+        v-if="activeName === 'table'"
+        :params="params"
+      />
+      <template v-else>
+        <div class="ds-top">
+          <deBtn
+            v-if="privileges"
+            secondary
+            @click="editDatasource"
+          >{{ $t('commons.edit') }}
+          </deBtn>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="$t('commons.no_target_permission')"
+            placement="top"
+          >
+            <span v-if="!privileges">
+              <deBtn
+                disabled
+                secondary
+              >{{ $t('commons.edit') }}
+              </deBtn>
            </span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="remarks"
-          :label="$t('datasource.field_description')"
-        />
-      </el-table>
-    </el-dialog>
+          </el-tooltip>
+          <deBtn
+            v-if="privileges"
+            style="margin-left: 12px;"
+            secondary
+            @click="validaDatasource"
+          >{{ $t('commons.validate') }}
+          </deBtn>
+          <deBtn
+            v-if="privileges"
+            type="primary"
+            @click="save"
+          >{{ $t('commons.save') }}
+          </deBtn>
+        </div>
+        <div style="height: calc(100% - 36px)">
+          <ds-form-content
+            ref="DsFormContent"
+            :config-from-tabs="configFromTabs"
+          />
+        </div>
+      </template>
+    </div>
  </div>
 </template>

 <script>
-import keyEnter from '@/components/msgCfm/keyEnter.js'
-import { post } from '@/api/dataset/dataset'
-import GridTable from '@/components/gridTable/index.vue'
-
+import DsTableTabs from './DsTableTabs'
+import DsFormContent from './DsFormContent'
 export default {
-  components: { GridTable },
-  mixins: [keyEnter],
+  components: { DsTableTabs, DsFormContent },
  props: {
    params: {
      type: Object,
-      default: () => {
-      }
+      default: () => {}
    }
  },
  data() {
    return {
-      userDrawer: false,
-      paginationConfig: {
-        currentPage: 1,
-        pageSize: 10,
-        total: 0
-      },
-      dsTableDetail: {},
-      nickName: '',
-      loading: false,
-      dsTableData: [],
-      tableData: [],
-      filterTable: []
+      activeName: 'detail'
    }
  },
  computed: {
-    pagingTable() {
-      const { currentPage, pageSize } = this.paginationConfig
-      return this.filterTable.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+    configFromTabs() {
+      return { ...this.params, showModel: 'show' }
+    },
+    privileges() {
+      return this.hasDataPermission('manage', this.params.privileges)
    }
  },
-  created() {
-    this.search()
-  },
  methods: {
-    handleSizeChange(pageSize) {
-      this.paginationConfig.currentPage = 1
-      this.paginationConfig.pageSize = pageSize
+    editDatasource() {
+      this.$refs.DsFormContent.editDatasource()
    },
-    handleCurrentChange(currentPage) {
-      this.paginationConfig.currentPage = currentPage
+    validaDatasource() {
+      this.$refs.DsFormContent.validaDatasource()
    },
-    initSearch() {
-      this.handleCurrentChange(1)
-      this.filterTable = this.tableData.filter(ele => ele.name.includes(this.nickName))
-      this.paginationConfig.total = this.filterTable.length
-    },
-    selectDataset(row) {
-      this.dsTableDetail = row
-      this.userDrawer = true
-      var table = { dataSourceId: this.params.id }
-      table.info = JSON.stringify({ table: row.name })
-      post('/dataset/table/getFields', table).then((response) => {
-        this.dsTableData = response.data
-      })
-    },
-    search() {
-      this.loading = true
-      post('/datasource/getTables/' + this.params.id, {}).then((response) => {
-        this.tableData = response.data
-        this.initSearch()
-      }).finally(() => {
-        this.loading = false
-      })
+    save() {
+      this.$refs.DsFormContent.save()
    }
  }
 }
 </script>

-<style lang="scss">
-.ds-table-drawer {
-  .table-value,
-  .table-name {
-    font-family: PingFang SC;
-    font-size: 14px;
-    font-weight: 400;
-    margin: 0;
-  }
-
-  .table-name {
-    color: var(--deTextSecondary, #646a73);
-  }
-
-  .table-value {
-    margin: 4px 0 24px 0;
-    color: var(--deTextPrimary, #1f2329);
-  }
-}
-
-.ds-table {
+<style lang="less">
+.ds-table-detail {
  height: 100%;
  padding: 10px 14px;
  box-sizing: border-box;
-
-  .mar3 {
-    margin-left: -5px;
+  .el-tabs-content {
+    height: calc(100% - 56px);
  }

-  .table-name-top {
-    font-family: PingFang SC;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 24px;
-    color: var(--deTextPrimary, #1f2329);
+  .ds-top {
+    height: 36px;
+    text-align: right;
  }

-  .table-container {
-    height: calc(100% - 50px);
+  .w600 {
+    padding-top: 0 !important;
  }

-  .el-table__fixed-right::before {
-    background: transparent;
+  .de-ds-cont {
+    padding: 0 !important;
+    background: transparent !important;
  }
 }
 </style>
--- a/frontend/src/views/system/datasource/DsTableTabs.vue
+++ b/frontend/src/views/system/datasource/DsTableTabs.vue
@ -0,0 +1,237 @@
+<template>
+  <div class="ds-table de-search-table">
+    <el-row class="top-operate">
+      <el-col :span="10">
+        <span class="table-name-top">{{ params.name }}</span>
+      </el-col>
+      <el-col
+        :span="14"
+        class="right-user"
+      >
+        <el-input
+          ref="search"
+          v-model="nickName"
+          :placeholder="$t('system_parameter_setting.search_keywords')"
+          prefix-icon="el-icon-search"
+          class="name-email-search"
+          size="small"
+          clearable
+          @blur="initSearch"
+          @clear="initSearch"
+        />
+      </el-col>
+    </el-row>
+    <div class="table-container">
+      <grid-table
+        v-loading="loading"
+        :table-data="pagingTable"
+        :pagination="paginationConfig"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <el-table-column
+          key="name"
+          prop="name"
+          :label="$t('datasource.table_name')"
+        />
+        <el-table-column
+          slot="__operation"
+          key="__operation"
+          :label="$t('commons.operating')"
+          fixed="right"
+          width="108"
+        >
+          <template slot-scope="scope">
+            <el-button
+              class="de-text-btn mar3"
+              type="text"
+              @click="selectDataset(scope.row)"
+            >{{ $t("dataset.detail") }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </grid-table>
+    </div>
+    <el-dialog
+      :title="$t('dataset.detail')"
+      :visible.sync="userDrawer"
+      class="de-dialog-form ds-table-drawer"
+      width="840px"
+    >
+      <el-row
+        style="margin-top: 12px"
+        :gutter="24"
+      >
+        <el-col :span="12">
+          <p class="table-name">
+            {{ $t("datasource.table_name") }}
+          </p>
+          <p class="table-value">
+            {{ dsTableDetail.name }}
+          </p>
+        </el-col>
+        <el-col :span="12">
+          <p class="table-name">
+            {{ $t("datasource.table_description") }}
+          </p>
+          <p class="table-value">
+            {{ dsTableDetail.remark || "-" }}
+          </p>
+        </el-col>
+      </el-row>
+      <el-table
+        :data="dsTableData"
+        stripe
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="fieldName"
+          :label="$t('panel.column_name')"
+        />
+        <el-table-column
+          prop="fieldType"
+          :label="$t('dataset.field_type')"
+        >
+          <template slot-scope="scope">
+            <span v-if="scope.row.fieldType === '0' && params.type==='api'">{{
+              $t("dataset.text")
+            }}</span>
+            <span v-if="scope.row.fieldType === '2' && params.type==='api'">{{
+              $t("dataset.value")
+            }}</span>
+            <span v-if="scope.row.fieldType === '3' && params.type==='api'">{{
+              $t("dataset.value") + '(' + $t("dataset.float") + ')'
+            }}</span>
+            <span v-if="params.type !=='api'">
+              {{ scope.row.fieldType }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="remarks"
+          :label="$t('datasource.field_description')"
+        />
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import keyEnter from '@/components/msgCfm/keyEnter.js'
+import { post } from '@/api/dataset/dataset'
+import GridTable from '@/components/gridTable/index.vue'
+
+export default {
+  components: { GridTable },
+  mixins: [keyEnter],
+  props: {
+    params: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      userDrawer: false,
+      paginationConfig: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      },
+      dsTableDetail: {},
+      nickName: '',
+      loading: false,
+      dsTableData: [],
+      tableData: [],
+      filterTable: []
+    }
+  },
+  computed: {
+    pagingTable() {
+      const { currentPage, pageSize } = this.paginationConfig
+      return this.filterTable.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+    }
+  },
+  created() {
+    this.search()
+  },
+  methods: {
+    handleSizeChange(pageSize) {
+      this.paginationConfig.currentPage = 1
+      this.paginationConfig.pageSize = pageSize
+    },
+    handleCurrentChange(currentPage) {
+      this.paginationConfig.currentPage = currentPage
+    },
+    initSearch() {
+      this.handleCurrentChange(1)
+      this.filterTable = this.tableData.filter(ele => ele.name.includes(this.nickName))
+      this.paginationConfig.total = this.filterTable.length
+    },
+    selectDataset(row) {
+      this.dsTableDetail = row
+      this.userDrawer = true
+      var table = { dataSourceId: this.params.id }
+      table.info = JSON.stringify({ table: row.name })
+      post('/dataset/table/getFields', table).then((response) => {
+        this.dsTableData = response.data
+      })
+    },
+    search() {
+      this.loading = true
+      post('/datasource/getTables/' + this.params.id, {}).then((response) => {
+        this.tableData = response.data
+        this.initSearch()
+      }).finally(() => {
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ds-table-drawer {
+  .table-value,
+  .table-name {
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 400;
+    margin: 0;
+  }
+
+  .table-name {
+    color: var(--deTextSecondary, #646a73);
+  }
+
+  .table-value {
+    margin: 4px 0 24px 0;
+    color: var(--deTextPrimary, #1f2329);
+  }
+}
+
+.ds-table {
+  height: 100%;
+  width: 100%;
+
+  .mar3 {
+    margin-left: -5px;
+  }
+
+  .table-name-top {
+    font-family: PingFang SC;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    color: var(--deTextPrimary, #1f2329);
+  }
+
+  .table-container {
+    height: calc(100% - 50px);
+  }
+
+  .el-table__fixed-right::before {
+    background: transparent;
+  }
+}
+</style>