imatrix-ui 2.8.21-dw → 2.8.21

package/packages/super-grid/src/search-form-dialog.vue

@@ -0,0 +1,79 @@
+<template>
+  <el-dialog
+    :show-close="true"
+    :append-to-body="true"
+    title="查询条件"
+    visible
+    @close="$emit('close')"
+  >
+    <search-form
+      ref="sf"
+      :columns="columns"
+      :code="code"
+      :url="url"
+      :pagination="pagination"
+      :query="query"
+      :search-param="searchParam"
+      :init-search-props="initSearchProps"
+      @search="doSearch"
+      @reset="resetSearch"
+    />
+  </el-dialog>
+</template>
+<script>
+import SearchForm from './search-form'
+export default {
+  name: 'SearchFormDialog',
+  components: {
+    SearchForm
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: null
+    },
+    code: {
+      type: String,
+      default: null
+    },
+    url: {
+      type: String,
+      default: null
+    },
+    pagination: {
+      type: Object,
+      default: null
+    },
+    query: {
+      type: Object,
+      default: null
+    },
+    searchParam: {
+      type: Object,
+      default: null
+    },
+    initSearchProps: {
+      type: Array,
+      default: null
+    }
+
+  },
+  data() {
+    return {}
+  },
+  computed: {
+
+  },
+  created() {
+
+  },
+  methods: {
+    doSearch(searchForm) {
+      this.$emit('search', searchForm)
+    },
+    resetSearch() {
+      this.$emit('reset')
+    }
+  }
+}
+</script>

package/packages/super-grid/src/search-form-item.vue

@@ -0,0 +1,386 @@
+<template>
+  <el-form-item :prop="column.prop" :label-width="'112px'">
+    <template v-slot:label>
+      <span v-if="column.searchLabel && column.searchLabel !== ''" :title="column.searchLabel.replace(/\\n/g, '</br>')" v-html="column.searchLabel.replace(/\\n/g, '</br>')" />
+      <span v-else :title="column.label.replace(/\\n/g, '</br>')" v-html="column.label.replace(/\\n/g, '</br>')" />
+    </template>
+    <span v-if="customComponent(column) === true">
+      <component
+        :is="column.componentName"
+        :ref="column.componentName"
+        class="customComponent"
+        :select-options="column.valueSet"
+        :prop="column.prop"
+        :value="getFormItemValue(column.prop)"
+        :row="searchForm"
+        :entity="searchForm"
+        @input="setValueToModelProp(column.prop,$event,column.componentName)"
+      />
+    </span>
+    <!-- 日期区间-两个输入框方式 -->
+    <span v-else-if="column.componentType ==='dateSection'">
+      <el-date-picker
+        :value="getFormItemValue(column.prop,0)"
+        :style="column.searchControlWidth"
+        type="date"
+        :placeholder="$t('imatrixUIMessage.startDate')"
+        @input="setValueToModelProp(column.prop,$event,null,0)"
+      />
+      <el-date-picker
+        :value="getFormItemValue(column.prop,1)"
+        :style="column.searchControlWidth"
+        type="date"
+        :placeholder="$t('imatrixUIMessage.endDate')"
+        @input="setValueToModelProp(column.prop,$event,null,1)"
+      />
+    </span>
+    <!--后面再优化年份及年份区间控件--->
+    <year-range-picker
+      v-else-if="column.componentType === 'yearRange' "
+      :value="getFormItemValue(column.prop)"
+      type="yearRange"
+      @change="setYearRangeValue(column.prop,$event)"
+    />
+    <el-date-picker
+      v-else-if="column.componentType==='dateTimePicker'"
+      :value="getFormItemValue(column.prop)"
+      :default-time="getDefaultTime(column)"
+      type="datetimerange"
+      :range-separator="$t('imatrixUIPublicModel.to')"
+      unlink-panels
+      :style="column.searchControlWidth"
+      :start-placeholder="$t('imatrixUIMessage.startDate')"
+      :end-placeholder="$t('imatrixUIMessage.endDate')"
+      value-format="yyyy-MM-dd HH:mm:ss"
+      @input="setValueToModelProp(column.prop,$event)"
+    />
+
+    <el-date-picker
+      v-else-if="column.dataType === 'DATE' || column.componentType==='date' "
+      :value="getFormItemValue(column.prop)"
+      type="daterange"
+      :style="column.searchControlWidth"
+      :range-separator="$t('imatrixUIPublicModel.to')"
+      unlink-panels
+      :start-placeholder="$t('imatrixUIMessage.startDate')"
+      :end-placeholder="$t('imatrixUIMessage.endDate')"
+      value-format="yyyy-MM-dd"
+      @input="setValueToModelProp(column.prop,$event)"
+    />
+    <el-date-picker
+      v-else-if="column.dataType === 'TIME' && column.componentType==='timepicker'"
+      :value="getFormItemValue(column.prop)"
+      type="datetimerange"
+      :range-separator="$t('imatrixUIPublicModel.to')"
+      unlink-panels
+      :style="column.searchControlWidth"
+      :start-placeholder="$t('imatrixUIMessage.startDate')"
+      :end-placeholder="$t('imatrixUIMessage.endDate')"
+      value-format="HH:mm:ss"
+      @input="setValueToModelProp(column.prop,$event)"
+    />
+
+    <el-time-picker
+      v-else-if="column.componentType==='timepicker' && column.dataType !== 'TIME' && column.dataType !== 'DATE' "
+      type="fixed-time"
+      :placeholder="$t('imatrixUIMessage.selectTime')"
+      style="width: 100%;"
+      value-format="HH:mm:ss"
+      :value="getFormItemValue(column.prop)"
+      @input="setValueToModelProp(column.prop,$event)"
+    />
+
+    <organization-input
+      v-else-if="componentTypeTypeIsTree(column.componentType)"
+      :value="getFormItemValue(column.prop)"
+      :fields="getTreeFields(column.orgTreeSet)"
+      :models="searchForm"
+      :multiple="getTreeIsMultiTree(column.componentType)"
+      :tree-type="getTreeType(column.componentType)"
+      @setValue="organizationInputEvent"
+      @clear="clearOrganizationInputEvent"
+    />
+
+    <el-select
+      v-else-if="((column.componentType && column.componentType==='select') || column.dataType === 'BOOLEAN') && !isDynamicDataSourceSource(column)"
+      clearable
+      :style="column.searchControlWidth"
+      :placeholder="$t('imatrixUIMessage.pleaseSelect')"
+      :value="getFormItemValue(column.prop)"
+      @input="setValueToModelProp(column.prop,$event)"
+    >
+      <el-option
+        v-for="item in column.valueSet"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+    <el-select
+      v-else-if="column.componentType && column.componentType==='multiselect' && !isDynamicDataSourceSource(column)"
+      clearable
+      multiple
+      :style="column.searchControlWidth"
+      collapse-tags
+      :placeholder="$t('imatrixUIMessage.pleaseSelect')"
+      :value="getFormItemValue(column.prop)"
+      @input="setValueToModelProp(column.prop,$event)"
+    >
+      <el-option
+        v-for="item in column.valueSet"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+    <dynamic-source-select
+      v-else-if="column.componentType && (column.componentType==='multiselect' || column.componentType==='select') && isDynamicDataSourceSource(column)"
+      :value="getFormItemValue(column.prop)"
+      :base-props="{
+        multiple: column.componentType==='multiselect'?true:false
+      }"
+      :entity="searchForm"
+      :options="getDynamicDataSourceOptions(column)"
+      :table-name="tableName"
+      :is-join-table="isJoinTable"
+      :list-code="code"
+      @input="setValueToModelProp(column.prop,$event)"
+    />
+    <!--
+            <el-input-number
+              v-else-if="column.componentType && column.componentType==='inputNumber'"
+              :value="getFormItemValue(column.prop)"
+              @input="setValueToModelProp(column.prop,$event)"
+            /> -->
+
+    <search-form-number
+      v-else-if="column.componentType && column.componentType==='inputNumber'"
+      @setValue="setNumberValue"
+    />
+
+    <el-switch
+      v-else-if="column.componentType && column.componentType==='switch'"
+      active-color="#13ce66"
+      inactive-color="#ff4949"
+      :style="column.searchControlWidth"
+      :value="getFormItemValue(column.prop)"
+      @input="setValueToModelProp(column.prop,$event)"
+    />
+    <el-slider
+      v-else-if="column.componentType && column.componentType==='slider'"
+      :value="getFormItemValue(column.prop)"
+      :style="column.searchControlWidth"
+      @input="setValueToModelProp(column.prop,$event)"
+    />
+
+    <el-rate
+      v-else-if="column.componentType && column.componentType==='rate'"
+      :value="getFormItemValue(column.prop)"
+      :style="column.searchControlWidth"
+      @input="setValueToModelProp(column.prop,$event)"
+    />
+    <el-input v-else :value="getFormItemValue(column.prop)" :style="column.searchControlWidth" @keyup.enter.native="submitForm('searchForm')" @input="setValueToModelProp(column.prop,$event)" />
+  </el-form-item>
+</template>
+
+<script>
+import searchMethods from './search-methods'
+import searchFormNumber from './search-form-number'
+import store from './store'
+import { getDynamicDataSourceOptions, isDynamicDataSourceSource } from './utils'
+import Vue from 'vue'
+export default {
+  name: 'SearchFormItem',
+  components: {
+    searchFormNumber
+  },
+  props: {
+    column: {
+      type: Object,
+      default: null
+    },
+    code: {
+      type: String,
+      default: null
+    },
+    isSql: {
+      type: Boolean,
+      default: false
+    },
+    tableName: {
+      type: String,
+      default: null
+    },
+    isJoinTable: {
+      type: Boolean,
+      default: false
+    },
+    // 查询表单信息
+    searchForm: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    const customComponentNames = new Set()
+    return {
+      customComponentNames: customComponentNames,
+      dateOne: null,
+      dataTwo: null
+    }
+  },
+  methods: {
+    ...searchMethods,
+    getDynamicDataSourceOptions(column) {
+      return getDynamicDataSourceOptions(column, this.isSql)
+    },
+    // 值设置是否是动态数据源类型的数据源
+    isDynamicDataSourceSource(column) {
+      return isDynamicDataSourceSource(column)
+    },
+    setValueToModelProp(prop, value, componentName, index) {
+      if (prop && prop.indexOf('.') > 0) {
+        const parentOjbect = this.getParentObject(prop)
+        // 嵌套属性中的最后一个属性是属于这个中间父对象的，所有要通过中间父对象来赋值
+        if (index != null && index !== undefined) {
+          // parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index] = value
+          this.$set(parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)], index, value)
+        } else {
+          parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)] = value
+        }
+      } else {
+        if (index != null && index !== undefined) {
+          this.$set(this.searchForm[prop], index, value)
+        } else {
+          this.searchForm[prop] = value
+        }
+      }
+    },
+    componentTypeTypeIsTree(componentType) {
+      if (componentType) {
+        if (componentType.indexOf('DeptManTree') > 0) {
+          // 说明是部门人员树
+          return true
+        }
+        if (componentType.indexOf('DeptTree') > 0) {
+          // 说明是部门树
+          return true
+        }
+        if (componentType.indexOf('WgManTree') > 0) {
+          // 说明是工作组人员树
+          return true
+        }
+        if (componentType.indexOf('WgManTree') > 0) {
+          // 说明是工作组树
+          return true
+        }
+      }
+      return false
+    },
+    getTreeFields(orgTreeSetJson) {
+      if (orgTreeSetJson && orgTreeSetJson !== '') {
+        const orgTreeSet = JSON.parse(orgTreeSetJson)
+        if (orgTreeSet.length) {
+          return orgTreeSet
+        } else {
+          if (orgTreeSet.orgTreeSetArr) {
+            return orgTreeSet.orgTreeSetArr
+          }
+        }
+      }
+    },
+    getTreeIsMultiTree(componentType) {
+      if (componentType && componentType.indexOf('single') >= 0 && componentType.indexOf('Tree') > 0) {
+        return false
+      } else {
+        return true
+      }
+    },
+    getTreeType(componentType) {
+      if (componentType) {
+        if (componentType.indexOf('DeptManTree') > 0) {
+          // 说明是部门人员树
+          return 'DeptUserTree'
+        }
+        if (componentType.indexOf('DeptTree') > 0) {
+          // 说明是部门树
+          return 'DeptTree'
+        }
+        if (componentType.indexOf('WgTree') > 0) {
+          // 说明是工作组人员树
+          return 'WgTree'
+        }
+        if (componentType.indexOf('WgManTree') > 0) {
+          // 说明是工作组树
+          return 'WgUserTree'
+        }
+      }
+    },
+    // 组织结构树文本框值改变事件
+    organizationInputEvent(prop, value) {
+      if (prop) {
+        // 必须手动调用一下input事件，否则不会更新组件的值
+        this.$set(this.searchForm, prop, value)
+      }
+    },
+    // 组织结构树文本框值清空事件
+    clearOrganizationInputEvent(prop) {
+      if (prop) {
+        // 必须手动调用一下input事件，否则不会更新组件的值
+        this.$set(this.searchForm, prop, null)
+      }
+    },
+    customComponent(column) {
+      const gridParams = store.get(this.code)
+      if (column.componentName && column.componentName !== '') {
+        this.customComponentNames.add(column.componentName)
+        return true
+      }
+      if ((!column.componentName || column.componentName === '') &&
+            gridParams.options &&
+            gridParams.options.search &&
+            gridParams.options.search.customSearchElements) {
+        // 定义了自定义查询组件
+        const propSearchEle = gridParams.options.search.customSearchElements[column.prop]
+        // console.log('customComponent-customSearchElements-propSearchEle-', column.prop)
+        if (propSearchEle) {
+          column.componentName = 'custom-' + column.prop
+          const component = propSearchEle.call(this, column)
+          // console.log('customComponent-customSearchElements-')
+          if (component) {
+            this.customComponentNames.add(column.componentName)
+            Vue.component(column.componentName, component)
+            return true
+          }
+        }
+      }
+      return false
+    },
+    setNumberValue(value, r, n) {
+      let itemValue = this.getFormItemValue(this.column.prop)
+      itemValue = value
+      this.setValueToModelProp(this.column.prop, itemValue)
+    },
+    setYearRangeValue(prop, value) {
+      this.$set(this.searchForm[prop], 0, value[0])
+      this.$set(this.searchForm[prop], 1, value[1])
+    },
+    getDefaultTime(column) {
+      if (column['valueSetOptions']) {
+        const valueSetOptions = JSON.parse(column['valueSetOptions'])
+        if (valueSetOptions.defaultTime) {
+          return [valueSetOptions.defaultTime, valueSetOptions.defaultTime]
+        } else {
+          return ['00:00:00']
+        }
+      } else {
+        return ['00:00:00']
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/packages/super-grid/src/search-form-number.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <el-input-number
+      v-model="number1"
+      @change="setValue()"
+    />
+    <span>---</span>
+    <el-input-number
+      v-model="number2"
+      @change="setValue()"
+    />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    r: {
+      type: Number,
+      default: null
+    },
+    n: {
+      type: Number,
+      default: null
+    }
+  },
+  data() {
+    return {
+      number1: null,
+      number2: null
+    }
+  },
+  methods: {
+    setValue() {
+      this.$emit('setValue', [this.number1, this.number2], this.r, this.n)
+    }
+  }
+}
+</script>

package/packages/super-grid/src/search-form-open.vue

@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <div class="grid-search-row">
+      <el-row v-for="r of rowNum" v-show="myOpen || r === 1" :key="r">
+        <el-col v-for="n of fieldNum" :key="n" :xs="spanNum" :sm="spanNum" :md="spanNum" :lg="spanNum" :xl="spanNum">
+          <template v-if="fieldNum*(r-1)+(n-1) < searchableColumns.length">
+            <!--初始进入台账页面时 或 展开时显示按钮--->
+            <search-form-item
+              v-show="(!myOpen && r===1 && n < fieldNum) || (myOpen)"
+              :search-form="searchForm"
+              :column="searchableColumns[fieldNum*(r-1)+(n-1)]"
+              :code="code"
+              :is-sql="isSql"
+              :table-name="tableName"
+              :is-join-table="isJoinTable"
+            />
+          </template>
+          <!--初始进入台账页面时 或 展开时显示按钮--->
+          <search-button
+            v-if="(!myOpen && r===1 && n === fieldNum) || (myOpen && !isButtonNewRow && r === rowNum && n === fieldNum)"
+            ref="searchBtnOpen"
+            :is-open="myOpen"
+            @submit-form="$emit('submit-form')"
+            @reset-form="$emit('reset-form')"
+            @save-condition="$emit('save-condition')"
+            @open-fold="openFold"
+          />
+        </el-col>
+      </el-row>
+    </div>
+    <!--按钮单独一行放置时--->
+    <el-row v-if="isShowNewBtnRow">
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+        <search-button
+          ref="searchBtnOpen"
+          :is-open="myOpen"
+          @submit-form="$emit('submit-form')"
+          @reset-form="$emit('reset-form')"
+          @save-condition="$emit('save-condition')"
+          @open-fold="openFold"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import searchMethods from './search-methods'
+import SearchFormItem from './search-form-item.vue'
+import SearchButton from './search-button.vue'
+export default {
+  name: 'SearchFormOpen',
+  components: {
+    SearchFormItem,
+    SearchButton
+  },
+  props: {
+    // 第一行的字段集合
+    searchableColumns: {
+      type: Array,
+      default: null
+    },
+    // 查询表单信息
+    searchForm: {
+      type: Object,
+      default: null
+    },
+    code: {
+      type: String,
+      default: null
+    },
+    isSql: {
+      type: Boolean,
+      default: false
+    },
+    tableName: {
+      type: String,
+      default: null
+    },
+    isJoinTable: {
+      type: Boolean,
+      default: false
+    },
+    spanNum: {
+      type: Number,
+      default: 8
+    },
+    // 每行几个字段
+    fieldNum: {
+      type: Number,
+      default: null
+    },
+    // 一共多少行
+    rowNum: {
+      type: Number,
+      default: null
+    },
+    // 查询条件是否展开
+    isOpen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    let isButtonNewRow = false
+    let isShowNewBtnRow = false
+    if (this.searchableColumns.length % this.fieldNum === 0 || this.rowNum > 6) {
+      // 表示查询字段正好占满行，或行数大于6时，需要另起一行放查询按钮
+      isButtonNewRow = true
+      isShowNewBtnRow = true
+    }
+    if (isButtonNewRow && !myOpen) {
+      // 需要另起一行，但是当前是收起状态，暂不显示最后一行按钮
+      isShowNewBtnRow = false
+    }
+    const myOpen = this.isOpen
+    return {
+      isButtonNewRow,
+      isShowNewBtnRow,
+      myOpen
+    }
+  },
+  watch: {
+    myOpen() {
+      if (this.isButtonNewRow) {
+        if (!this.myOpen) {
+          // 需要另起一行，但是当前是收起状态，暂不显示最后一行按钮
+          this.isShowNewBtnRow = false
+        } else {
+          // 需要另起一行，当前是展开状态，显示最后一行按钮
+          this.isShowNewBtnRow = true
+        }
+      }
+    }
+  },
+  methods: {
+    ...searchMethods,
+    openFold(isOpen) {
+      this.myOpen = isOpen
+      this.$emit('open-fold', isOpen)
+    },
+    // 查询完毕
+    searchComplete() {
+      if (this.$refs.searchBtnOpen) {
+        if (Array.isArray(this.$refs.searchBtnOpen)) {
+          if (this.$refs.searchBtnOpen.length > 0) {
+            this.$refs.searchBtnOpen[0].searchComplete()
+          }
+        } else {
+          this.$refs.searchBtnOpen.searchComplete()
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style  scoped>
+.grid-search-row{
+    overflow: auto;
+    max-height: 320px;
+  }
+</style>