imatrix-ui 0.0.15 → 0.1.1-up

package/components/super-grid/search-form-dialog.vue

@@ -0,0 +1,77 @@
+<template>
+  <el-dialog
+    :show-close="true"
+    :append-to-body="true"
+    title="查询条件"
+    model-value
+    @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 { $on, $off, $once, $emit } from '../utils/gogocodeTransfer'
+import SearchForm from './search-form.vue'
+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) {
+      $emit(this, 'search', searchForm)
+    },
+    resetSearch() {
+      $emit(this, 'reset')
+    },
+  },
+  emits: ['close', 'search', 'reset'],
+}
+</script>

package/components/super-grid/search-form-item.vue

@@ -0,0 +1,470 @@
+<template>
+  <el-form-item
+    :prop="column.prop"
+    :label-width="
+      column.querySetting ? getLabelWidth(column.querySetting) : '110px'
+    "
+  >
+    <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
+        :model-value="getFormItemValue(column.prop, 0)"
+        :style="column.searchControlWidth"
+        type="date"
+        :placeholder="$t('imatrixUIMessage.startDate')"
+        @input="setValueToModelProp(column.prop, $event, null, 0)"
+      />
+      <el-date-picker
+        :model-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
+      filterable
+      :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
+      filterable
+      :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,
+      }"
+      :allow-create="true"
+      :filterable="true"
+      :list-toolbar-form-data="listToolbarFormData"
+      :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'"-->
+    <!--  :item-value="searchForm[column.prop]"-->
+    <!--  :module-config="moduleConfig"-->
+    <!--  @setValue="setNumberValue"-->
+    <!--/>-->
+
+    <el-switch
+      v-else-if="column.componentType && column.componentType === 'switch'"
+      active-color="#13ce66"
+      inactive-color="#ff4949"
+      :style="column.searchControlWidth"
+      :model-value="getFormItemValue(column.prop)"
+      @input="setValueToModelProp(column.prop, $event)"
+    />
+    <el-slider
+      v-else-if="column.componentType && column.componentType === 'slider'"
+      :model-value="getFormItemValue(column.prop)"
+      :style="column.searchControlWidth"
+      @input="setValueToModelProp(column.prop, $event)"
+    />
+
+    <el-rate
+      v-else-if="column.componentType && column.componentType === 'rate'"
+      :model-value="getFormItemValue(column.prop)"
+      :style="column.searchControlWidth"
+      @input="setValueToModelProp(column.prop, $event)"
+    />
+    <el-input
+      v-else
+      :model-value="getFormItemValue(column.prop)"
+      :style="column.searchControlWidth"
+      @keyup.enter="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 * as Vue from 'vue'
+export default {
+  name: 'SearchFormItem',
+  components: {
+    // searchFormNumber,
+  },
+  inject: ['getListToolbarFormData'],
+  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,
+      moduleConfig: {},
+    }
+  },
+  computed: {
+    listToolbarFormData() {
+      console.log(this.getListToolbarFormData())
+      const data = this.getListToolbarFormData()
+      if (data && data.listToolbarFormData) {
+        return this.getListToolbarFormData().listToolbarFormData
+      }
+      return null
+    },
+  },
+  created() {
+    if (this.column.valueSetOptions) {
+      this.moduleConfig = JSON.parse(this.column.valueSetOptions)
+    }
+    console.log('searchitem页面', this.column)
+  },
+  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
+          parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index] = value
+        } else {
+          parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)] = value
+        }
+      } else {
+        if (index != null && index !== undefined) {
+          this.searchForm[prop][index] = value
+        } else {
+          this.searchForm[prop] = value
+        }
+      }
+    },
+    getLabelWidth(querySetting) {
+      const configData = JSON.parse(querySetting)
+      if (
+        configData.labelWidth !== '' &&
+        configData.labelWidth !== null &&
+        configData.labelWidth !== undefined
+      ) {
+        return configData.labelWidth + 'px'
+      } else {
+        return '110px'
+      }
+    },
+    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.searchForm[prop] = value
+      }
+    },
+    // 组织结构树文本框值清空事件
+    clearOrganizationInputEvent(prop) {
+      if (prop) {
+        // 必须手动调用一下input事件，否则不会更新组件的值
+        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)
+            window.$vueApp.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.searchForm[prop][0] = value[0]
+      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>
+::v-deep .el-range-separator {
+  min-width: 20px;
+}
+</style>

package/components/super-grid/search-form-number.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-input-number
+      v-model="number1"
+      :min="
+        moduleConfig.min == 0
+          ? 0
+          : !moduleConfig.min
+          ? -Infinity
+          : moduleConfig.min
+      "
+      :max="
+        moduleConfig.max == 0
+          ? 0
+          : !moduleConfig.max
+          ? Infinity
+          : moduleConfig.max
+      "
+      :step="moduleConfig.step ? moduleConfig.step : 1"
+      :precision="moduleConfig.precision ? moduleConfig.precision : 0"
+      :controls-position="moduleConfig.position ? moduleConfig.position : ''"
+      @change="setValue()"
+    />
+    <span>---</span>
+    <el-input-number
+      v-model="number2"
+      :min="
+        moduleConfig.min == 0
+          ? 0
+          : !moduleConfig.min
+          ? -Infinity
+          : moduleConfig.min
+      "
+      :max="
+        moduleConfig.max == 0
+          ? 0
+          : !moduleConfig.max
+          ? Infinity
+          : moduleConfig.max
+      "
+      :step="moduleConfig.step ? moduleConfig.step : 1"
+      :precision="moduleConfig.precision ? moduleConfig.precision : 0"
+      :controls-position="moduleConfig.position ? moduleConfig.position : ''"
+      @change="setValue()"
+    />
+  </div>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '../utils/gogocodeTransfer'
+export default {
+  props: {
+    r: {
+      type: Number,
+      default: null,
+    },
+    n: {
+      type: Number,
+      default: null,
+    },
+    itemValue: {
+      type: Array,
+      default: () => {
+        return [0, 0]
+      },
+    },
+    moduleConfig: {
+      type: Object,
+    },
+  },
+  data() {
+    const number1 =
+      this.moduleConfig.min === 0
+        ? 0
+        : !this.moduleConfig.min
+        ? 0
+        : this.moduleConfig.min
+    const number2 =
+      this.moduleConfig.max === 0
+        ? 0
+        : !this.moduleConfig.max
+        ? 100
+        : this.moduleConfig.max
+
+    return {
+      number1,
+      number2,
+    }
+  },
+  watch: {
+    itemValue: {
+      deep: true,
+      handler(newValue) {
+        if (newValue) {
+          this.number1 = newValue[0] ? newValue[0] : 0
+          this.number2 = newValue[1] ? newValue[1] : 0
+        }
+      },
+    },
+  },
+  created() {
+    $emit(this, 'setValue', [this.number1, this.number2], this.r, this.n)
+  },
+  methods: {
+    setValue() {
+      $emit(this, 'setValue', [this.number1, this.number2], this.r, this.n)
+    },
+  },
+  emits: ['setValue'],
+}
+</script>