Merge pull request #4046 from dataease/pr@dev_memory_component

Pr@dev memory component

frontend/src/components/canvas/store/layer.js

@@ -14,7 +14,6 @@ export default {
           toast('已经到顶了')
         }
       }
-
     },
 
     downComponent({ componentData, curComponent }) {

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)

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',

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',

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',

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']

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)
+              (chart.datasetMode === 0 && !not_support_page_dataset.includes(chart.datasourceType)) ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0)
-              }}</span>
+            }}</span>
             {{ $t('chart.items') }}
           </span>
           <de-pagination
@@ -199,7 +199,6 @@ export default {
       } else {
         return {}
       }
-
     },
     trackBarStyleTime() {
       return this.trackBarStyle

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

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() {
+    calHeight: _.debounce(function() {
-      const that = this
+      const currentHeight = document.documentElement.clientHeight
-      setTimeout(function() {
+      this.height = currentHeight - 215
-        const currentHeight = document.documentElement.clientHeight
+    }, 200),
-        that.height = currentHeight - 215
-      }, 10)
-    },
     reSearch() {
       if (
         !this.form.row ||

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"
+            class="el-icon-close"
-          @click="clearOneFilter(index)"
+            @click="clearOneFilter(index)"
-        />
+          />
         </p>
       </div>
       <i

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;

frontend/src/views/system/datasource/DsTable.vue

@@ -1,239 +1,129 @@
 <template>
-  <div class="ds-table de-search-table">
+  <div class="ds-table-detail">
-    <el-row class="top-operate">
+    <el-tabs
-      <el-col :span="10">
+      v-model="activeName"
-        <span class="table-name-top">{{ params.name }}</span>
+      class="de-tabs"
-      </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
+      <el-tab-pane
-        style="margin-top: 12px"
+        :label="$t('datasource.data_source_configuration')"
-        :gutter="24"
+        name="detail"
-      >
+      />
-        <el-col :span="12">
+      <el-tab-pane
-          <p class="table-name">
+        :label="$t('datasource.data_source_table')"
-            {{ $t("datasource.table_name") }}
+        name="table"
-          </p>
+      />
-          <p class="table-value">
+    </el-tabs>
-            {{ dsTableDetail.name }}
+    <div class="el-tabs-content">
-          </p>
+      <ds-table-tabs
-        </el-col>
+        v-if="activeName === 'table'"
-        <el-col :span="12">
+        :params="params"
-          <p class="table-name">
+      />
-            {{ $t("datasource.table_description") }}
+      <template v-else>
-          </p>
+        <div class="ds-top">
-          <p class="table-value">
+          <deBtn
-            {{ dsTableDetail.remark || "-" }}
+            v-if="privileges"
-          </p>
+            secondary
-        </el-col>
+            @click="editDatasource"
-      </el-row>
+          >{{ $t('commons.edit') }}
-      <el-table
+          </deBtn>
-        :data="dsTableData"
+          <el-tooltip
-        stripe
+            class="item"
-        style="width: 100%"
+            effect="dark"
-      >
+            :content="$t('commons.no_target_permission')"
-        <el-table-column
+            placement="top"
-          prop="fieldName"
+          >
-          :label="$t('panel.column_name')"
+            <span v-if="!privileges">
-        />
+              <deBtn
-        <el-table-column
+                disabled
-          prop="fieldType"
+                secondary
-          :label="$t('dataset.field_type')"
+              >{{ $t('commons.edit') }}
-        >
+              </deBtn>
-          <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-tooltip>
-        </el-table-column>
+          <deBtn
-        <el-table-column
+            v-if="privileges"
-          prop="remarks"
+            style="margin-left: 12px;"
-          :label="$t('datasource.field_description')"
+            secondary
-        />
+            @click="validaDatasource"
-      </el-table>
+          >{{ $t('commons.validate') }}
-    </el-dialog>
+          </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 DsTableTabs from './DsTableTabs'
-import { post } from '@/api/dataset/dataset'
+import DsFormContent from './DsFormContent'
-import GridTable from '@/components/gridTable/index.vue'
-
 export default {
-  components: { GridTable },
+  components: { DsTableTabs, DsFormContent },
-  mixins: [keyEnter],
   props: {
     params: {
       type: Object,
-      default: () => {
+      default: () => {}
-      }
     }
   },
   data() {
     return {
-      userDrawer: false,
+      activeName: 'detail'
-      paginationConfig: {
-        currentPage: 1,
-        pageSize: 10,
-        total: 0
-      },
-      dsTableDetail: {},
-      nickName: '',
-      loading: false,
-      dsTableData: [],
-      tableData: [],
-      filterTable: []
     }
   },
   computed: {
-    pagingTable() {
+    configFromTabs() {
-      const { currentPage, pageSize } = this.paginationConfig
+      return { ...this.params, showModel: 'show' }
-      return this.filterTable.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+    },
+    privileges() {
+      return this.hasDataPermission('manage', this.params.privileges)
     }
   },
-  created() {
-    this.search()
-  },
   methods: {
-    handleSizeChange(pageSize) {
+    editDatasource() {
-      this.paginationConfig.currentPage = 1
+      this.$refs.DsFormContent.editDatasource()
-      this.paginationConfig.pageSize = pageSize
     },
-    handleCurrentChange(currentPage) {
+    validaDatasource() {
-      this.paginationConfig.currentPage = currentPage
+      this.$refs.DsFormContent.validaDatasource()
     },
-    initSearch() {
+    save() {
-      this.handleCurrentChange(1)
+      this.$refs.DsFormContent.save()
-      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">
+<style lang="less">
-.ds-table-drawer {
+.ds-table-detail {
-  .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%;
   padding: 10px 14px;
   box-sizing: border-box;
-
+  .el-tabs-content {
-  .mar3 {
+    height: calc(100% - 56px);
-    margin-left: -5px;
   }
 
-  .table-name-top {
+  .ds-top {
-    font-family: PingFang SC;
+    height: 36px;
-    font-size: 16px;
+    text-align: right;
-    font-weight: 500;
-    line-height: 24px;
-    color: var(--deTextPrimary, #1f2329);
   }
 
-  .table-container {
+  .w600 {
-    height: calc(100% - 50px);
+    padding-top: 0 !important;
   }
 
-  .el-table__fixed-right::before {
+  .de-ds-cont {
-    background: transparent;
+    padding: 0 !important;
+    background: transparent !important;
   }
 }
 </style>

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>