vue2-client 1.9.39 → 1.9.41

package/src/base-client/components/common/XForm/XForm.vue

@@ -1,316 +1,316 @@
-<template>
-  <div :style="{marginBottom: !visible ? '12px':''}">
-    <div v-show="visible && realJsonData.length > 0" class="table-page-search-wrapper">
-      <a-form-model
-        v-if="loaded"
-        ref="form"
-        :model="form"
-        :rules="rules"
-        layout="inline">
-        <a-row :gutter="24">
-          <x-form-item
-            v-for="(item, index) in realJsonData.slice(0,7)"
-            :key="index"
-            :attr="item"
-            :form="form"
-            :service-name="serviceName"
-            :get-data-params="getDataParams"
-            :env="env"
-            :setForm="setForm"
-          />
-          <div v-for="(groupItem, groupIndex) in groupJsonData" :key="'group-' + groupIndex">
-            <x-form-item
-              v-for="(item, index) in groupItem.groupItems"
-              :key="index"
-              :attr="item"
-              :form="form"
-              :service-name="serviceName"
-              :get-data-params="getDataParams"
-              :env="env"
-              :setForm="setForm"
-            />
-          </div>
-          <div v-show="advanced">
-            <x-form-item
-              v-for="(item, index) in realJsonData.slice(7)"
-              :key="'advanced'+index"
-              :attr="item"
-              :form="form"
-              :service-name="serviceName"
-              :get-data-params="getDataParams"
-              :env="env"
-              :setForm="setForm"
-            />
-          </div>
-          <a-col>
-            <span
-              :style="advanced && { float: 'right', overflow: 'hidden' } || {} "
-              class="table-page-search-submitButtons">
-              <template v-if="realJsonData.length >7">
-                <a @click="toggleAdvanced">
-                  <span v-show="!advanced" style="display: inline-flex; align-items: center;">
-                    <a-icon type="eye" :style="iconStyle"/>&nbsp;更多条件
-                  </span>
-                  <span v-show="advanced" style="display: inline-flex; align-items: center;">
-                    <a-icon type="eye-invisible" :style="iconStyle"/>&nbsp;收起更多
-                  </span>
-                </a>
-                <a-divider type="vertical"/>
-              </template>
-              <a-button
-                htmlType="submit"
-                type="primary"
-                @click="onSubmit">
-                <a-icon :style="iconStyle" type="search"/>查询
-              </a-button>
-              <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
-              <slot></slot>
-            </span>
-          </a-col>
-        </a-row>
-      </a-form-model>
-      <div class="next-divider-dashed" role="separator"></div>
-    </div>
-  </div>
-</template>
-<script>
-import XFormItem from '@vue2-client/base-client/components/common/XForm/XFormItem'
-import { mapState } from 'vuex'
-import moment from 'moment'
-
-export default {
-  name: 'XForm',
-  components: {
-    XFormItem
-  },
-  data () {
-    return {
-      // 内容加载是否完成
-      loaded: false,
-      // 服务名称
-      serviceName: undefined,
-      // 是否展开条件
-      advanced: false,
-      // 表单Model
-      form: undefined,
-      // 校验
-      rules: {},
-      // 图标样式
-      iconStyle: {
-        position: 'relative',
-        top: '1px'
-      },
-      // 表单项集合
-      formItems: [],
-      // 是否显示
-      visible: true,
-      // 调用logic获取数据源的追加参数
-      getDataParams: {},
-      // 当前环境
-      env: 'prod',
-      // 暂存 form 的默认值
-      defaultMap: {}
-    }
-  },
-  computed: {
-    ...mapState('account', { currUser: 'user' }),
-    // 过滤掉仅用于新增/修改场景的表单项
-    realJsonData: function () {
-      return this.formItems.filter(item => (!item.isOnlyAddOrEdit && item.type !== 'group') || (item.type === 'group' && item.groupItems.some(groupItem => !groupItem.isOnlyAddOrEdit)))
-    },
-    // 过滤出用于新增/修改场景的表单项
-    groupJsonData: function () {
-      return this.formItems.filter((item) => {
-        return item.type === 'group'
-      }).map((item) => {
-          item.groupItems = item.groupItems.filter(item => !item.isOnlyAddOrEdit).map((groupItem) => {
-            // 只保留第一个下划线后面的内容
-            // groupItem.model = groupItem.model.substring(groupItem.model.indexOf('_') + 1)
-            return groupItem
-          })
-          return item
-        }
-      )
-    },
-  },
-  methods: {
-    init (params) {
-      const {
-        formItems, serviceName, getDataParams = {}, env = 'prod'
-      } = params
-      this.loaded = false
-      this.formItems = JSON.parse(JSON.stringify(formItems))
-      this.serviceName = serviceName
-      this.env = env
-      const formData = {}
-      for (let i = 0; i < this.realJsonData.length; i++) {
-        const item = this.realJsonData[i]
-        this.setFormProps(formData, item)
-      }
-      // 处理分组数据表单
-      for (let i = 0; i < this.groupJsonData.length; i++) {
-        const groupItem = this.groupJsonData[i]
-        for (let j = 0; j < groupItem.groupItems.length; j++) {
-          const item = groupItem.groupItems[j]
-          this.setFormProps(formData, item)
-        }
-      }
-      this.form = formData
-      this.getDataParams = getDataParams
-      this.loaded = true
-    },
-    // 时间组件赋默认值
-    getDateRange (type, defaultValue, queryType) {
-      const formatMap = {
-        yearPicker: 'YYYY',
-        monthPicker: 'YYYY-MM',
-        datePicker: 'YYYY-MM-DD',
-        rangePicker: 'YYYY-MM-DD HH:mm:ss',
-      }
-      let format = formatMap[type]
-      // 单日选择框范围查询特殊处理
-      if (queryType === 'BETWEEN' && type === 'datePicker') {
-        format = 'YYYY-MM-DD HH:mm:ss'
-      }
-      let start, end
-
-      switch (defaultValue) {
-        case 'curYear':
-          start = moment().startOf('year').format(format)
-          end = moment().endOf('year').format(format)
-          break
-        case 'curMonth':
-          start = moment().startOf('month').format(format)
-          end = moment().endOf('month').format(format)
-          break
-        case 'curDay':
-          start = moment().startOf('day').format(format)
-          end = moment().endOf('day').format(format)
-          break
-        default:
-          return defaultValue
-      }
-      if (queryType === 'BETWEEN' && type === 'datePicker') {
-        return [start, end]
-      }
-      if (['monthPicker', 'yearPicker', 'datePicker'].includes(type)) {
-        return start
-      }
-      return [start, end]
-    },
-    setFormProps (formData, item) {
-      formData[item.model] = undefined
-      if (item.queryFormDefault) {
-        if (['datePicker', 'rangePicker', 'yearPicker', 'monthPicker'].includes(item.type)) {
-          formData[item.model] = this.getDateRange(item.type, item.queryFormDefault, item.queryType)
-        } else if (['treeSelect', 'select', 'checkbox'].includes(item.type) && ['curOrgId', 'curDepId', 'curUserId'].includes(item.queryFormDefault)) {
-          if (item.queryFormDefault === 'curOrgId') {
-            formData[item.model] = item.type === 'select' ? this.currUser.orgid : [this.currUser.orgid]
-          }
-          if (item.queryFormDefault === 'curDepId') {
-            formData[item.model] = item.type === 'select' ? this.currUser.depids : [this.currUser.depids]
-          }
-          if (item.queryFormDefault === 'curUserId') {
-            formData[item.model] = item.type === 'select' ? this.currUser.id : [this.currUser.id]
-          }
-        } else {
-          formData[item.model] = item.queryFormDefault
-        }
-        this.defaultMap[item.model] = formData[item.model]
-      } else {
-        if (item.type === 'intervalPicker') {
-          formData[item.model] = ['', '']
-        }
-      }
-      if (item.rule) {
-        this.rules[item.model] = []
-        const required = item.rule.queryRequired ? item.rule.queryRequired === true || item.rule.queryRequired === 'true' : false
-        let trigger
-        let message
-        if (required) {
-          switch (item.type) {
-            case 'select':
-            case 'checkbox':
-            case 'radio':
-            case 'treeSelect':
-            case 'rangePicker':
-            case 'monthPicker':
-            case 'yearPicker':
-            case 'datePicker':
-            case 'file':
-            case 'image':
-            case 'citySelect':
-            case 'addressSearch':
-            case 'personSetting':
-              message = '请选择' + item.name
-              trigger = 'change'
-              break
-            default:
-              message = '请输入' + item.name
-              trigger = 'blur'
-          }
-          this.rules[item.model].push({
-            required: true,
-            message: message,
-            trigger: trigger
-          })
-        }
-      }
-    },
-    toggleAdvanced () {
-      this.advanced = !this.advanced
-      this.$emit('toggleAdvanced')
-    },
-    toggleVisible () {
-      this.visible = !this.visible
-      return this.visible
-    },
-    resetForm () {
-      this.$refs.form.resetFields()
-    },
-    onSubmit () {
-      this.$refs.form.validate(valid => {
-        for (const key of Object.keys(this.form)) {
-          if (this.form[key] === null || this.form[key] === '') {
-            this.form[key] = undefined
-          }
-          if (Array.isArray(this.form[key]) && !this.form[key][0]) {
-            this.form[key] = undefined
-          }
-          // 如果 form 中没有值，但是有默认值
-          if (this.form[key] === undefined && this.defaultMap[key] !== undefined) {
-            this.form = Object.assign({}, this.form, this.defaultMap)
-          }
-        }
-        const requestParameters = Object.assign({}, this.form)
-        const data = {
-          valid: valid,
-          form: requestParameters
-        }
-        this.$emit('onSubmit', data)
-      })
-    },
-    exports () {
-      this.$emit('exports', this.form)
-    },
-    setForm (obj) {
-      this.form = Object.assign(this.form, obj)
-    },
-  }
-}
-</script>
-<style lang="less" scoped>
-:deep(.ant-form-inline .ant-form-item) {
-  margin-right: 0px;
-  margin-top: 0px;
-  margin-bottom: 12px;
-
-  .ant-form-item-control-wrapper {
-    min-width: 0;
-  }
-}
-
-:deep(.table-page-search-wrapper .table-page-search-submitButtons) {
-  margin-top: 0px;
-}
-</style>
+<template>
+  <div :style="{marginBottom: !visible ? '12px':''}">
+    <div v-show="visible && realJsonData.length > 0" class="table-page-search-wrapper">
+      <a-form-model
+        v-if="loaded"
+        ref="form"
+        :model="form"
+        :rules="rules"
+        layout="inline">
+        <a-row :gutter="24">
+          <x-form-item
+            v-for="(item, index) in realJsonData.slice(0,7)"
+            :key="index"
+            :attr="item"
+            :form="form"
+            :service-name="serviceName"
+            :get-data-params="getDataParams"
+            :env="env"
+            :setForm="setForm"
+          />
+          <div v-for="(groupItem, groupIndex) in groupJsonData" :key="'group-' + groupIndex">
+            <x-form-item
+              v-for="(item, index) in groupItem.groupItems"
+              :key="index"
+              :attr="item"
+              :form="form"
+              :service-name="serviceName"
+              :get-data-params="getDataParams"
+              :env="env"
+              :setForm="setForm"
+            />
+          </div>
+          <div v-show="advanced">
+            <x-form-item
+              v-for="(item, index) in realJsonData.slice(7)"
+              :key="'advanced'+index"
+              :attr="item"
+              :form="form"
+              :service-name="serviceName"
+              :get-data-params="getDataParams"
+              :env="env"
+              :setForm="setForm"
+            />
+          </div>
+          <a-col>
+            <span
+              :style="advanced && { float: 'right', overflow: 'hidden' } || {} "
+              class="table-page-search-submitButtons">
+              <template v-if="realJsonData.length >7">
+                <a @click="toggleAdvanced">
+                  <span v-show="!advanced" style="display: inline-flex; align-items: center;">
+                    <a-icon type="eye" :style="iconStyle"/>&nbsp;更多条件
+                  </span>
+                  <span v-show="advanced" style="display: inline-flex; align-items: center;">
+                    <a-icon type="eye-invisible" :style="iconStyle"/>&nbsp;收起更多
+                  </span>
+                </a>
+                <a-divider type="vertical"/>
+              </template>
+              <a-button
+                htmlType="submit"
+                type="primary"
+                @click="onSubmit">
+                <a-icon :style="iconStyle" type="search"/>查询
+              </a-button>
+              <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
+              <slot></slot>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form-model>
+      <div class="next-divider-dashed" role="separator"></div>
+    </div>
+  </div>
+</template>
+<script>
+import XFormItem from '@vue2-client/base-client/components/common/XForm/XFormItem'
+import { mapState } from 'vuex'
+import moment from 'moment'
+
+export default {
+  name: 'XForm',
+  components: {
+    XFormItem
+  },
+  data () {
+    return {
+      // 内容加载是否完成
+      loaded: false,
+      // 服务名称
+      serviceName: undefined,
+      // 是否展开条件
+      advanced: false,
+      // 表单Model
+      form: undefined,
+      // 校验
+      rules: {},
+      // 图标样式
+      iconStyle: {
+        position: 'relative',
+        top: '1px'
+      },
+      // 表单项集合
+      formItems: [],
+      // 是否显示
+      visible: true,
+      // 调用logic获取数据源的追加参数
+      getDataParams: {},
+      // 当前环境
+      env: 'prod',
+      // 暂存 form 的默认值
+      defaultMap: {}
+    }
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    // 过滤掉仅用于新增/修改场景的表单项
+    realJsonData: function () {
+      return this.formItems.filter(item => (!item.isOnlyAddOrEdit && item.type !== 'group') || (item.type === 'group' && item.groupItems.some(groupItem => !groupItem.isOnlyAddOrEdit)))
+    },
+    // 过滤出用于新增/修改场景的表单项
+    groupJsonData: function () {
+      return this.formItems.filter((item) => {
+        return item.type === 'group'
+      }).map((item) => {
+          item.groupItems = item.groupItems.filter(item => !item.isOnlyAddOrEdit).map((groupItem) => {
+            // 只保留第一个下划线后面的内容
+            // groupItem.model = groupItem.model.substring(groupItem.model.indexOf('_') + 1)
+            return groupItem
+          })
+          return item
+        }
+      )
+    },
+  },
+  methods: {
+    init (params) {
+      const {
+        formItems, serviceName, getDataParams = {}, env = 'prod'
+      } = params
+      this.loaded = false
+      this.formItems = JSON.parse(JSON.stringify(formItems))
+      this.serviceName = serviceName
+      this.env = env
+      const formData = {}
+      for (let i = 0; i < this.realJsonData.length; i++) {
+        const item = this.realJsonData[i]
+        this.setFormProps(formData, item)
+      }
+      // 处理分组数据表单
+      for (let i = 0; i < this.groupJsonData.length; i++) {
+        const groupItem = this.groupJsonData[i]
+        for (let j = 0; j < groupItem.groupItems.length; j++) {
+          const item = groupItem.groupItems[j]
+          this.setFormProps(formData, item)
+        }
+      }
+      this.form = formData
+      this.getDataParams = getDataParams
+      this.loaded = true
+    },
+    // 时间组件赋默认值
+    getDateRange (type, defaultValue, queryType) {
+      const formatMap = {
+        yearPicker: 'YYYY',
+        monthPicker: 'YYYY-MM',
+        datePicker: 'YYYY-MM-DD',
+        rangePicker: 'YYYY-MM-DD HH:mm:ss',
+      }
+      let format = formatMap[type]
+      // 单日选择框范围查询特殊处理
+      if (queryType === 'BETWEEN' && type === 'datePicker') {
+        format = 'YYYY-MM-DD HH:mm:ss'
+      }
+      let start, end
+
+      switch (defaultValue) {
+        case 'curYear':
+          start = moment().startOf('year').format(format)
+          end = moment().endOf('year').format(format)
+          break
+        case 'curMonth':
+          start = moment().startOf('month').format(format)
+          end = moment().endOf('month').format(format)
+          break
+        case 'curDay':
+          start = moment().startOf('day').format(format)
+          end = moment().endOf('day').format(format)
+          break
+        default:
+          return defaultValue
+      }
+      if (queryType === 'BETWEEN' && type === 'datePicker') {
+        return [start, end]
+      }
+      if (['monthPicker', 'yearPicker', 'datePicker'].includes(type)) {
+        return start
+      }
+      return [start, end]
+    },
+    setFormProps (formData, item) {
+      formData[item.model] = undefined
+      if (item.queryFormDefault) {
+        if (['datePicker', 'rangePicker', 'yearPicker', 'monthPicker'].includes(item.type)) {
+          formData[item.model] = this.getDateRange(item.type, item.queryFormDefault, item.queryType)
+        } else if (['treeSelect', 'select', 'checkbox'].includes(item.type) && ['curOrgId', 'curDepId', 'curUserId'].includes(item.queryFormDefault)) {
+          if (item.queryFormDefault === 'curOrgId') {
+            formData[item.model] = item.type === 'select' ? this.currUser.orgid : [this.currUser.orgid]
+          }
+          if (item.queryFormDefault === 'curDepId') {
+            formData[item.model] = item.type === 'select' ? this.currUser.depids : [this.currUser.depids]
+          }
+          if (item.queryFormDefault === 'curUserId') {
+            formData[item.model] = item.type === 'select' ? this.currUser.id : [this.currUser.id]
+          }
+        } else {
+          formData[item.model] = item.queryFormDefault
+        }
+        this.defaultMap[item.model] = formData[item.model]
+      } else {
+        if (item.type === 'intervalPicker') {
+          formData[item.model] = ['', '']
+        }
+      }
+      if (item.rule) {
+        this.rules[item.model] = []
+        const required = item.rule.queryRequired ? item.rule.queryRequired === true || item.rule.queryRequired === 'true' : false
+        let trigger
+        let message
+        if (required) {
+          switch (item.type) {
+            case 'select':
+            case 'checkbox':
+            case 'radio':
+            case 'treeSelect':
+            case 'rangePicker':
+            case 'monthPicker':
+            case 'yearPicker':
+            case 'datePicker':
+            case 'file':
+            case 'image':
+            case 'citySelect':
+            case 'addressSearch':
+            case 'personSetting':
+              message = '请选择' + item.name
+              trigger = 'change'
+              break
+            default:
+              message = '请输入' + item.name
+              trigger = 'blur'
+          }
+          this.rules[item.model].push({
+            required: true,
+            message: message,
+            trigger: trigger
+          })
+        }
+      }
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+      this.$emit('toggleAdvanced')
+    },
+    toggleVisible () {
+      this.visible = !this.visible
+      return this.visible
+    },
+    resetForm () {
+      this.$refs.form.resetFields()
+    },
+    onSubmit () {
+      this.$refs.form.validate(valid => {
+        for (const key of Object.keys(this.form)) {
+          if (this.form[key] === null || this.form[key] === '') {
+            this.form[key] = undefined
+          }
+          if (Array.isArray(this.form[key]) && !this.form[key][0]) {
+            this.form[key] = undefined
+          }
+          // 如果 form 中没有值，但是有默认值
+          if (this.form[key] === undefined && this.defaultMap[key] !== undefined) {
+            this.form = Object.assign({}, this.form, this.defaultMap)
+          }
+        }
+        const requestParameters = Object.assign({}, this.form)
+        const data = {
+          valid: valid,
+          form: requestParameters
+        }
+        this.$emit('onSubmit', data)
+      })
+    },
+    exports () {
+      this.$emit('exports', this.form)
+    },
+    setForm (obj) {
+      this.form = Object.assign(this.form, obj)
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+:deep(.ant-form-inline .ant-form-item) {
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 12px;
+
+  .ant-form-item-control-wrapper {
+    min-width: 0;
+  }
+}
+
+:deep(.table-page-search-wrapper .table-page-search-submitButtons) {
+  margin-top: 0px;
+}
+</style>