imatrix-ui 2.8.21-dw → 2.8.21

package/packages/super-grid/src/public-methods.js

@@ -0,0 +1,31 @@
+const publicMethods = {
+  clearSelection: function() {
+    this.$refs.superGrid.clearSelection()
+  },
+  toggleRowSelection: function(row, selected) {
+    this.$refs.superGrid.toggleRowSelection(row, selected)
+  },
+  toggleAllSelection: function() {
+    this.$refs.superGrid.toggleAllSelection()
+  },
+  toggleRowExpansion: function(row, expanded) {
+    this.$refs.superGrid.toggleRowExpansion(row, expanded)
+  },
+  setCurrentRow: function(row) {
+    this.$refs.superGrid.setCurrentRow(row)
+  },
+  clearSort: function() {
+    this.$refs.superGrid.clearSort()
+  },
+  clearFilter: function(columnKey) {
+    this.$refs.superGrid.clearFilter(columnKey)
+  },
+  doLayout: function() {
+    this.$refs.superGrid.doLayout()
+  },
+  sort: function(prop, order) {
+    this.$refs.superGrid.sort(prop, order)
+  }
+
+}
+export default publicMethods

package/packages/super-grid/src/row-operation.vue

@@ -0,0 +1,161 @@
+<template>
+  <!--将@click改为@mousedown.native是因为操作列保存按钮时事件和input等组件的@blur冲突，导致保存需要保存两次，因为
+@blur先于@click执行的，所以只会执行@blur，@click就失效了，@mousedown是先于@blur执行的-->
+  <span :style="myStyle">
+    <span v-if="isShowButton()">
+      <span v-if="label">
+        <!-- <el-tooltip :content="label" class="item" effect="dark" placement="top-start"> -->
+        <component
+          :is="elementType"
+          v-if="operationSetting.permission"
+          v-permission="operationSetting.permission"
+          :disabled="preventReclick"
+          v-bind="operationSetting"
+          @mousedown.native="onClickFun"
+        >{{ label }}</component>
+        <component
+          :is="elementType"
+          v-else
+          :disabled="preventReclick"
+          v-bind="operationSetting"
+          @mousedown.native="onClickFun"
+        >{{ label }}</component>
+        <!-- </el-tooltip> -->
+      </span>
+      <span v-else>
+        <component
+          :is="elementType"
+          v-if="operationSetting.permission"
+          v-permission="operationSetting.permission"
+          :disabled="preventReclick"
+          v-bind="operationSetting"
+          @mousedown.native="onClickFun"
+        />
+        <component
+          :is="elementType"
+          v-else
+          :disabled="preventReclick"
+          v-bind="operationSetting"
+          @mousedown.native="onClickFun"
+        />
+      </span>
+
+    </span>
+  </span>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import customFormatter from './custom-formatter'
+export default {
+  name: 'RowOperation',
+  props: {
+    editing: {// 当前行是否是编辑行
+      type: Boolean,
+      default: false
+    },
+    isShow: {
+      type: [Boolean, Function],
+      default: true
+    },
+    onClick: {
+      type: Function,
+      default: function() {}
+    },
+    entity: {
+      type: Object,
+      default: null
+    },
+    column: {
+      type: Object,
+      default: null
+    },
+    rowIndex: {
+      type: Number,
+      default: null
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    operationSetting: {
+      type: Object,
+      default: null
+    },
+    operationIndex: {
+      type: Number,
+      default: null
+    }
+  },
+  data() {
+    return {
+      elementType: 'el-button', // 组件标签，默认是按钮
+      myStyle: null // 组件样式
+
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'preventReclick'
+    ])
+  },
+  created() {
+    if (this.operationSetting.elementType && this.operationSetting.elementType === 'el-link') {
+      this.operationSetting.type = 'primary'
+    }
+    if (!this.operationSetting.elementType || this.operationSetting.elementType === 'el-button') {
+      this.operationSetting.size = 'mini'
+    }
+    if (this.operationSetting.style) {
+      // 等于配置的样式
+      this.myStyle = this.operationSetting.style
+    } else if (this.operationIndex !== 0 && (this.operationSetting.elementType === undefined || this.operationSetting.elementType === 'el-button')) {
+      // 如果不是第0个元素，且是按钮时，添加左边距10px，使按钮不紧挨着
+      this.myStyle = { marginLeft: '10px' }
+    }
+    if (this.operationSetting.elementType) {
+      this.elementType = this.operationSetting.elementType
+    }
+    // if (!this.operationSetting.icon) {
+    //   if (this.operationSetting.code === 'lineEditUpdate') {
+    //     this.operationSetting.icon = 'el-icon-edit'
+    //   } else if (this.operationSetting.code === 'lineEditSave') {
+    //     this.operationSetting.icon = 'el-icon-check'
+    //   } else if (this.operationSetting.code === 'lineEditDelete') {
+    //     this.operationSetting.icon = 'el-icon-delete'
+    //   } else if (this.operationSetting.code === 'restoreEdit') {
+    //     this.operationSetting.icon = 'el-icon-circle-close'
+    //   } else if (this.operationSetting.code === 'viewDetail') {
+    //     this.operationSetting.icon = 'el-icon-view'
+    //   }
+    // }
+  },
+  methods: {
+    onClickFun() {
+      customFormatter.onClickFun(this.entity, this.column, this.onClick, this.rowIndex)
+    },
+    isShowButton() {
+      // const start = new Date().getTime()
+      const val = customFormatter.isShowButtonFun(this.entity, this.column, this.isShow, this.rowIndex)
+      if (val) {
+        if (this.editing) {
+          if (this.operationSetting.code === 'lineEditUpdate') {
+            return false
+          }
+        } else {
+          if (this.operationSetting.code === 'restoreEdit') {
+            return false
+          }
+        }
+      }
+      // const end = new Date().getTime()
+      // console.log('---super-grid--isShowButtonFun--time1=', (end - start))
+      return val
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/packages/super-grid/src/search-button.vue

@@ -0,0 +1,66 @@
+<template>
+  <div style="text-align: right">
+    <!-- :loading="loading" -->
+    <el-button size="small" @click="$emit('save-condition')">
+      {{ $t('superGrid.saveCondition') }}
+    </el-button>
+    <el-button :loading="loading" size="small" @click="resetForm">
+      {{ $t('imatrixUIPublicModel.reset') }}
+    </el-button>
+    <el-button :loading="loading" type="primary" size="small" @click="submitForm">
+      {{ $t('imatrixUIMessage.search') }}
+    </el-button>
+    <el-button size="small" type="text" :icon="isMyOpen?'el-icon-caret-top':'el-icon-caret-bottom'" @click="openFold">
+      {{ isMyOpen?$t('superGrid.fold'): $t('superGrid.open') }}
+    </el-button>
+    <!-- <span v-if="advancedQuery !== null && advancedQuery!== undefined && advancedQuery === true && normalQuery !== null && normalQuery!== undefined && normalQuery === true" style="margin-left:10px">
+          <el-button v-if="searchType === 'advanced'" size="mini" @click="searchType = 'normal'">
+            {{ $t('imatrixUIPublicModel.switchToNormalQuery') }}
+          </el-button>
+          <el-button v-if="searchType === 'normal'" size="mini" @click="searchType = 'advanced'">
+            {{ $t('imatrixUIPublicModel.switchToAdvancedQuery') }}
+          </el-button>
+        </span> -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchButton',
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const isMyOpen = this.isOpen
+    return {
+      isMyOpen, // false表示折叠状态，应该显示“展开”,true表示当前是展开状态，应该显示“折叠”
+      loading: false
+    }
+  },
+  methods: {
+    openFold() {
+      this.isMyOpen = !this.isMyOpen
+      this.$emit('open-fold', this.isMyOpen)
+    },
+    submitForm() {
+      this.loading = true
+      this.$emit('submit-form')
+    },
+    resetForm() {
+      this.loading = true
+      this.$emit('reset-form')
+    },
+    // 加载完毕
+    searchComplete() {
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/packages/super-grid/src/search-condition-input.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <el-dialog
+      visible
+      :title="$t('superGrid.saveConditionTitle')"
+      :close-on-click-modal="false"
+      append-to-body
+      @open="$emit('open')"
+      @opend="$emit('opend')"
+      @close="$emit('close')"
+      @closed="$emit('closed')"
+    >
+      <el-form ref="conditionForm" :model="searchCondition" size="mini" label-position="left" label-width="120px">
+        <el-form-item
+          prop="conditionName"
+          :label="$t('superGrid.searchConditionName')"
+          :rules="[
+            { required:true, message: this.$t('superGrid.pleaseInputSearchConditionName'),trigger:'blur'}
+          ]"
+        >
+          <el-input v-model="searchCondition.conditionName" size="mini" />
+        </el-form-item>
+      </el-form>
+      <template v-slot:footer>
+        <div class="dialog-footer" style="padding-bottom:10px">
+          <el-button size="small" @click="$emit('close')">
+            {{ $t('imatrixUIPublicModel.cancel') }}
+          </el-button>
+          <el-button size="small" type="primary" @click="saveCondition">
+            {{ $t('imatrixUIPublicModel.sure') }}
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'SearchConditionInput',
+  data() {
+    return {
+      searchCondition: {
+        conditionName: null
+      }
+    }
+  },
+  methods: {
+    saveCondition() {
+      this.$refs['conditionForm'].validate((valid) => {
+        if (valid) {
+          this.$emit('close', this.searchCondition.conditionName)
+        } else {
+          // console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  }
+}
+</script>

package/packages/super-grid/src/search-condition-list.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-tabs v-model="editConditionId" type="card" @tab-remove="removeCondition" @tab-click="selectCondition">
+    <el-tab-pane
+      v-for="item in searchConditions"
+      :key="item.id"
+      :label="item.name"
+      :disabled="item.queryType !== pageQueryType"
+      :closable="item.queryType === pageQueryType"
+      :name="item.id+''"
+    />
+  </el-tabs>
+</template>
+<script>
+export default {
+  name: 'SearchConditionList',
+  components: {
+  },
+  props: {
+    searchConditions: {
+      type: Array,
+      default: null
+    },
+    searchType: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    let pageQueryType = 'FIXED'
+    if (this.searchType && this.searchType === 'advanced') {
+      pageQueryType = 'CUSTOM'
+    }
+    return {
+      pageQueryType,
+      editConditionId: null // 当前选择的条件id
+    }
+  },
+  watch: {
+    searchType: {
+      handler(newValue, oldValue) {
+        this.searchType = newValue
+        this.pageQueryType = 'FIXED'
+        if (newValue && newValue === 'advanced') {
+          this.pageQueryType = 'CUSTOM'
+        }
+      }
+    }
+  },
+  methods: {
+    removeCondition(conditionId) {
+      this.$emit('remove-condition', conditionId)
+    },
+    selectCondition(tab, event) {
+      const conditionId = tab.name
+      this.$emit('select-condition', conditionId)
+    }
+  }
+}
+</script>