imatrix-ui 0.0.15 → 0.1.1-up

package/components/super-grid/public-methods.js

@@ -0,0 +1,30 @@
+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/components/super-grid/row-operation.vue

@@ -0,0 +1,193 @@
+<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
+          v-bind="operationSetting"
+          :is="elementType"
+          v-if="operationSetting.permission"
+          v-permission="operationSetting.permission"
+          :disabled="preventReclick"
+          @mousedown="onClickFun(operationSetting)"
+          >{{ label }}</component
+        >
+        <component
+          v-bind="operationSetting"
+          :is="elementType"
+          v-else
+          :disabled="preventReclick"
+          @mousedown="onClickFun(operationSetting)"
+          >{{ label }}</component
+        >
+        <!-- </el-tooltip> -->
+      </span>
+      <span v-else>
+        <component
+          v-bind="operationSetting"
+          :is="elementType"
+          v-if="operationSetting.permission"
+          v-permission="operationSetting.permission"
+          :disabled="preventReclick"
+          @mousedown="onClickFun(operationSetting)"
+        />
+        <component
+          v-bind="operationSetting"
+          :is="elementType"
+          v-else
+          :disabled="preventReclick"
+          @mousedown="onClickFun(operationSetting)"
+        />
+      </span>
+    </span>
+  </span>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import customFormatter from './custom-formatter'
+import { analysisCondition } from '../../src/utils/util'
+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(button) {
+      customFormatter.onClickFun(
+        this.entity,
+        this.column,
+        this.onClick,
+        this.rowIndex,
+        button
+      )
+    },
+    isShowButton() {
+      // const start = new Date().getTime()
+      const val = customFormatter.isShowButtonFun(
+        this.entity,
+        this.column,
+        this.isShow,
+        this.rowIndex
+      )
+      if (this.operationSetting.buttonDisplayConditionsList) {
+        const displayJudgment = JSON.stringify(
+          this.operationSetting.buttonDisplayConditionsList
+        )
+        return analysisCondition(
+          displayJudgment,
+          this.entity,
+          {},
+          {},
+          true,
+          null,
+          null
+        )
+      }
+
+      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>

package/components/super-grid/search-button.vue

@@ -0,0 +1,74 @@
+<template>
+  <div style="text-align: right" class="search-button">
+    <!-- :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>
+import { $on, $off, $once, $emit } from '../utils/gogocodeTransfer'
+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
+      $emit(this, 'open-fold', this.isMyOpen)
+    },
+    submitForm() {
+      this.loading = true
+      $emit(this, 'submit-form')
+    },
+    resetForm() {
+      this.loading = true
+      $emit(this, 'reset-form')
+    },
+    // 加载完毕
+    searchComplete() {
+      this.loading = false
+    },
+  },
+  emits: ['save-condition', 'open-fold', 'submit-form', 'reset-form'],
+}
+</script>

package/components/super-grid/search-condition-input.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <el-dialog
+      model-value
+      :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>
+import { $on, $off, $once, $emit } from '../utils/gogocodeTransfer'
+export default {
+  name: 'SearchConditionInput',
+  data() {
+    return {
+      searchCondition: {
+        conditionName: null,
+      },
+    }
+  },
+  methods: {
+    saveCondition() {
+      this.$refs['conditionForm'].validate((valid) => {
+        if (valid) {
+          $emit(this, 'close', this.searchCondition.conditionName)
+        } else {
+          // console.log('error submit!!')
+          return false
+        }
+      })
+    },
+  },
+  emits: ['open', 'opend', 'close', 'closed', 'opend', 'close', 'closed'],
+}
+</script>

package/components/super-grid/search-condition-list.vue

@@ -0,0 +1,68 @@
+<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>
+import { $on, $off, $once, $emit } from '../utils/gogocodeTransfer'
+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: {
+      deep: true,
+
+      handler(newValue, oldValue) {
+        this.searchType = newValue
+        this.pageQueryType = 'FIXED'
+        if (newValue && newValue === 'advanced') {
+          this.pageQueryType = 'CUSTOM'
+        }
+      },
+    },
+  },
+  methods: {
+    removeCondition(conditionId) {
+      $emit(this, 'remove-condition', conditionId)
+    },
+    selectCondition(tab, event) {
+      const conditionId = tab.name
+      $emit(this, 'select-condition', conditionId)
+    },
+  },
+  emits: ['remove-condition', 'select-condition'],
+}
+</script>