【中汽测试】树状结构加查询

src/components/CollapsiblePanelForm.vue

@@ -1,503 +0,0 @@
-<template>
-  <a-form-model :model="formInline" v-if="isFormInline" class="form-add" :rules="rules" ref="ruleForm">
-    <template v-for="(val,index) in dataList">
-      <div :key="index" class="collapsible-panel-form" v-if="val && val.length > 0">
-        <div class="collapsible-panel-form-header">
-          <span>{{ index }}</span>
-          <div class="retractable-btn" @click="handleChangeRetractable(index)">
-            <a-icon type="double-right" :class="retractableFlag[index] ? 'pack-up-btn' : 'unfold-btn'" />
-            {{ retractableFlag[index] ? '收起' : '展开' }}
-          </div>
-        </div>
-        <div class="form-flex-box collapsible-panel-form-content" v-show="retractableFlag[index]">
-          <template v-for="(item, index) in val">
-            <div :key="index"
-                 class="box-title-text form-flex-item"
-                 :class="{'form-flex-item-line': item.fieldShowType === FieldType.STANDARD_MORE.value}"
-                 v-if="!hiddenFieldList.includes(item.dbFieldName)">
-              <div class="title-text">
-                <span class="required" v-if="item.fieldMustInput === '1'">*</span>
-                <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
-              </div>
-              <a-form-model-item class="item-model" :prop="item.dbFieldName">
-                <!--   1, 日期单选  -->
-                <a-date-picker v-if="item.fieldShowType === FieldType.DATE_SINGLE.value"
-                               class="box-input"
-                               :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
-                               :getCalendarContainer="(trigger) => trigger.parentNode"
-                               format="YYYY-MM-DD"
-                               value-format="YYYY-MM-DD"
-                               v-model="formInline[item.dbFieldName]"
-                               :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
-                               style="width: 100%" />
-                <!--   2, 单选用户  -->
-                <user-selection v-else-if="item.fieldShowType === FieldType.USER_SINGLE.value"
-                                :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
-                                v-model="formInline[item.dbFieldName]"
-                                :filedName="item.dbFieldName"
-                                @nameChange="userSelectNameChange"
-                                :nameStr="formInline[item.dbFieldName + '_dictText']"
-                                type="radio"
-                                :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
-                <!--   3, 单选组织机构  -->
-                <j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_SINGLE.value"
-                                 v-model="formInline[item.dbFieldName]"
-                                 :backDepart="true" />
-                <!--   4, 日期多选  -->
-                <j-multiple-date-picker v-else-if="item.fieldShowType === FieldType.DATE_MORE.value"
-                                        class="box-input"
-                                        v-model="formInline[item.dbFieldName]"
-                                        :fieldName="item.dbFieldName"
-                                        :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
-                <!--   5, 多行文本  -->
-                <a-textarea v-else-if="item.fieldShowType === FieldType.TEXTAREA.value"
-                            :placeholder="$t('pleaseEnter')+item.dbFieldTxt"
-                            :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
-                            :maxLength="500"
-                            v-model="formInline[item.dbFieldName]" :rows="4" />
-                <!--   6, 标准多选  -->
-                <standard-selection v-else-if="item.fieldShowType === FieldType.STANDARD_MORE.value"
-                                    :source="flag"
-                                    :disabledSourceSearch="true"
-                                    :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
-                                    v-model="formInline[item.dbFieldName]" />
-                <!--   7, 多选组织机构  -->
-                <j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_MORE.value"
-                                 v-model="formInline[item.dbFieldName]"
-                                 :multi="true"
-                                 :backDepart="true"
-                                 :treeOpera="true" />
-                <!--   8, 上传文件  -->
-                <a-button v-else-if="item.fieldShowType === FieldType.FILE_UP.value" type="primary" class="button-text"
-                          @click="clickButtonToUpload(item)">
-                  {{
-                    (formInline[item.dbFieldName] === 'null' || formInline[item.dbFieldName] === ''
-                      || formInline[item.dbFieldName] === null || formInline[item.dbFieldName] === undefined)
-                      ? $t('uploadFile.clickUpload')
-                      : $t('uploadFile.viewUploadedFiles')
-                  }}
-                </a-button>
-                <!--   9, 文本框  -->
-                <a-input v-else-if="item.fieldShowType === FieldType.TEXT_BOX.value"
-                         class="box-input"
-                         :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
-                         v-model="formInline[item.dbFieldName]"
-                         :maxLength="50"
-                         :placeholder="specialPlaceholder[item.dbFieldName] || $t('pleaseEnter')+item.dbFieldTxt" />
-                <!--   10, 下拉单选（数据字典）  -->
-                <j-dict-select-tag v-else-if="item.fieldShowType === FieldType.OPTION_SINGLE.value"
-                                   class="box-input"
-                                   v-model="formInline[item.dbFieldName]"
-                                   :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
-                                   :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
-                                   :type="'select'"
-                                   :triggerChange="false"
-                                   :dictCode="item.dictField" />
-                <!--   11, 下拉多选（数据字典）  -->
-                <j-multi-select-tag v-else-if="item.fieldShowType === FieldType.OPTION_MORE.value"
-                                    class="box-input"
-                                    v-model="formInline[item.dbFieldName]"
-                                    :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
-                                    :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
-                                    :type="'select'"
-                                    :triggerChange="false"
-                                    :dictCode="item.dictField" />
-                <!--   12, 树选择       -->
-                <a-tree-select
-                  v-else-if="item.fieldShowType === FieldType.TREE.value"
-                  v-model="formInline[item.dbFieldName]"
-                  :getPopupContainer="triggerNode=> triggerNode.parentNode"
-                  style="width: 100%"
-                  :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
-                  :tree-data="optionsData[item.dbFieldName]"
-                  tree-checkable
-                  treeCheckStrictly
-                  :label-in-value="false"
-                  :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
-                <!--  14, 年份选择 -->
-                <j-date v-else-if="item.fieldShowType === FieldType.YEAR_PICKER.value"
-                        show-type="year"
-                        :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
-                        v-model="formInline[item.dbFieldName]"
-                        :default-value="defaultValue[item.dbFieldName]"
-                        date-format="YYYY"
-                        :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
-                <!--   15, 树选择（单选）       -->
-                <a-tree-select v-else-if="item.fieldShowType === FieldType.TREE_SINGLE.value"
-                               v-model="formInline[item.dbFieldName]"
-                               :getPopupContainer="triggerNode=> triggerNode.parentNode"
-                               style="width: 100%"
-                               :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
-                               :tree-data="optionsData[item.dbFieldName]"
-                               :label-in-value="false"
-                               :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
-              </a-form-model-item>
-            </div>
-          </template>
-        </div>
-      </div>
-    </template>
-    <upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false"></upload-file>
-  </a-form-model>
-</template>
-
-<script>
-import UserSelection from './selection/UserSelection.vue'
-import JMultipleDatePicker from './JMultipleDatePicker.vue'
-import StandardSelection from './selection/StandardSelection.vue'
-import JDictSelectTag from './dict/JDictSelectTag.vue'
-import JMultiSelectTag from './dict/JMultiSelectTag.vue'
-import UploadFile from './UploadFile.vue'
-import { FieldType } from '../enums/commonEnums.js'
-import { getAction } from '../api/manage.js'
-import { getFormDictTreeList } from '../api/api.js'
-
-export default {
-  name: 'CollapsiblePanelForm',
-  components: { UserSelection, JMultipleDatePicker, StandardSelection, JDictSelectTag, JMultiSelectTag, UploadFile },
-  props: {
-    // 获取表单数据的方法
-    getFormFunc: {
-      type: Function,
-      required: false,
-      default: () => {
-        return function () {
-        }
-      }
-    },
-    // 获取详细信息的方法
-    getDocumentInfoFunc: {
-      type: Function,
-      required: false,
-      default: () => {
-        return function () {
-        }
-      }
-    },
-    // 标准模块的区分：1，国内； 2，国外；3，企标
-    flag: {
-      type: String,
-      default: null
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    // 特殊的placeholder，目前只处理了输入框，有需要再处理别的
-    specialPlaceholder: {
-      type: Object,
-      required: false,
-      default: () => {
-        return {}
-      }
-    },
-    // 默认值
-    defaultValue: {
-      type: Object,
-      required: false,
-      default: () => {
-        return {}
-      }
-    },
-    // 不可修改值
-    disabledFieldList: {
-      type: Array,
-      required: false,
-      default: () => {
-        return []
-      }
-    },
-    // 需要隐藏的字段
-    hiddenFieldList: {
-      type: Array,
-      required: false,
-      default: () => {
-        return []
-      }
-    },
-    // 是否可收起
-    isRetractable: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  data () {
-    return {
-      FieldType,
-      loading: false,
-      formInline: {},
-      isFormInline: false,
-      rules: {},
-      confirmLoading: false,
-      type: 2,
-      dataList: [],
-      ruleList: [],
-      uploadName: '',
-      optionsData: {}, // 用接口获取到的下拉数据
-      retractableFlag: {} // 面板展开收起的标识
-    }
-  },
-  created () {
-    if (this.$route.query.id) {
-      this.edit()
-    } else {
-      this.add()
-    }
-  },
-  methods: {
-    add () {
-      this.formInline = Object.assign({}, this.defaultValue)
-      this.$forceUpdate()
-      this.getForm()
-    },
-    edit () {
-      this.loading = true
-      this.getForm(() => {
-        if (!this.getDocumentInfoFunc || typeof this.getDocumentInfoFunc !== 'function') {
-          this.loading = false
-          return
-        }
-        // type标识是新增表单还是详情页
-        this.getDocumentInfoFunc({ id: this.$route.query.id.id, type: this.type }).then((res) => {
-          if (res.success) {
-            // 处理树结构多选回显
-            const formList = Object.values(this.dataList).reduce((acc, cur) => acc.concat(cur), [])
-            const treeMultipleField = formList.filter(tt => tt.fieldShowType === FieldType.TREE.value)
-            this.formInline = res.result
-            treeMultipleField.forEach(field => {
-              const valueArr = []
-              if (this.formInline[field.dbFieldName]) {
-                const values = this.formInline[field.dbFieldName].split(',')
-                for (let i = 0; i < values.length; i++) {
-                  valueArr[i] = {
-                    value: values[i]
-                  }
-                }
-                this.formInline[field.dbFieldName] = valueArr
-              } else {
-                this.formInline[field.dbFieldName] = undefined
-              }
-            })
-            const dictField = formList.filter(tt => tt.fieldShowType === FieldType.OPTION_SINGLE.value)
-            dictField.forEach(field => {
-              this.formInline[field.dbFieldName] = this.formInline[field.dbFieldName] || null
-            })
-            this.loading = false
-          } else {
-            this.loading = false
-          }
-        })
-      })
-    },
-    // 获取表单列表
-    getForm (callBack) {
-      if (!this.getFormFunc || typeof this.getFormFunc !== 'function') {
-        return
-      }
-      this.confirmLoading = true
-      const params = {
-        module: this.flag,
-        type: this.type
-      }
-      this.getFormFunc(params).then((res) => {
-        if (res.success) {
-          this.dataList = res.result
-          this.ruleList = res.result
-          this.integrateData()
-          this.getOptionsData() // 获取下拉数据
-          Object.keys(this.dataList).forEach(key => {
-            this.retractableFlag[key] = true
-          })
-          callBack && callBack()
-        }
-      })
-    },
-    // 设置表单校验
-    integrateData () {
-      this.isFormInline = false
-      const ruleList = []
-      for (const item in this.ruleList) {
-        this.ruleList[item].forEach(ol => {
-          ruleList.push(ol)
-        })
-      }
-      const rules = {}
-      ruleList.forEach((res, index) => {
-        const rule = []
-        if (res.fieldMustInput === '1') {
-          if ([FieldType.TEXT_BOX.value, FieldType.TEXTAREA.value].includes(res.fieldShowType)) {
-            rule.push({
-              required: true,
-              message: res.dbFieldTxt + this.$t('cannotEmpty'),
-              trigger: 'blur'
-            })
-          } else if (res.fieldShowType === FieldType.DATE_SINGLE.value) {
-            // 解决第一次校验不消失的问题
-            rule.push({
-              required: true,
-              message: res.dbFieldTxt + this.$t('cannotEmpty'),
-              trigger: ['change', 'blur']
-            })
-          } else {
-            rule.push({
-              required: true,
-              message: res.dbFieldTxt + this.$t('cannotEmpty'),
-              trigger: 'change'
-            })
-          }
-        }
-        if (rule.length > 0) {
-          rules[res.dbFieldName] = rule
-        }
-      })
-      this.rules = rules
-      this.isFormInline = true
-      this.confirmLoading = false
-    },
-    /**
-     * 处理需要通过接口获取的下拉数据
-     */
-    getOptionsData () {
-      const formList = Object.values(this.dataList).reduce((acc, cur) => acc.concat(cur), [])
-      formList.forEach(item => {
-        if (item.fieldShowType === FieldType.TREE.value || item.fieldShowType === FieldType.TREE_SINGLE.value) {
-          // 展示类型是树选择，且有接口的
-          if (item.fieldHref) {
-            getAction(item.fieldHref).then(res => {
-              if (res.success) {
-                this.$set(this.optionsData, item.dbFieldName, res.result)
-              }
-            })
-          } else if (item.dictId) {
-            getFormDictTreeList({ dictId: item.dictId }).then(res => {
-              if (res.success) {
-                this.$set(this.optionsData, item.dbFieldName, res.result)
-              }
-            })
-          }
-        }
-      })
-    },
-    // 点击点击上传按钮
-    clickButtonToUpload (item) {
-      this.$refs.uploadFile.open(this.formInline[item.dbFieldName])
-      this.uploadName = item.dbFieldName
-    },
-    // 文件上传改变后的回调
-    uploadFileChange (data) {
-      const attIdList = []
-      if (data && data.length > 0) {
-        data.map(item => {
-          attIdList.push(item.id)
-        })
-      }
-      /** 赋值给当前对应的表单文件 */
-      this.formInline[this.uploadName] = attIdList.join(',')
-      this.formInline = { ...this.formInline }
-    },
-    // 标准选择变化
-    standardSelectionChange (value, id) {
-      // this.formInline[value + '_by'] = id
-      this.formInline = { ...this.formInline }
-    },
-    // 选择用户得到用户名
-    userSelectNameChange (value, fieldName) {
-      this.formInline[fieldName + '_dictText'] = value
-    },
-    submit () {
-      this.$refs.ruleForm.validate(valid => {
-        if (valid) {
-          const formInline = JSON.parse(JSON.stringify(this.formInline))
-          Object.keys(formInline).forEach(res => {
-            if (formInline[res] instanceof Array) {
-              if (formInline[res][0] instanceof Object) {
-                // 说明是树选择
-                formInline[res] = formInline[res].map(item => item.value).join(',')
-              } else {
-                formInline[res] = formInline[res].join(',')
-              }
-            }
-          })
-          this.$emit('submitFormData', formInline)
-        } else {
-          this.$emit('addFormWarning')
-          return false
-        }
-      })
-    },
-    clearValidate () {
-      this.$refs.ruleForm.clearValidate()
-    },
-    handleChangeRetractable (key) {
-      this.$set(this.retractableFlag, key, !this.retractableFlag[key])
-      this.$forceUpdate()
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-/deep/ .ant-form-item-children {
-  width: 100%;
-  display: inline-block;
-}
-
-.form-flex-box {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.form-flex-item-line {
-  width: 100%;
-}
-
-.collapsible-panel-form {
-  margin-top: 20px;
-
-  &-header {
-    height: 56px;
-    line-height: 56px;
-    background: rgba(245, 245, 245, 0.6);
-    border-radius: 8px 8px 0 0;
-    border: 1px solid #E5E6EB;
-    padding: 0 20px;
-    font-size: 16px;
-    font-family: PingFang SC-Medium, PingFang SC, sans-serif;
-    font-weight: 600;
-    color: #1D2129;
-    display: flex;
-    justify-content: space-between;
-
-    .retractable-btn {
-      cursor: pointer;
-      font-size: 14px;
-      font-family: PingFang SC-Regular, PingFang SC, sans-serif;
-      color: @primary-color;
-    }
-
-    .anticon {
-      margin-right: 8px;
-    }
-
-    .pack-up-btn {
-      transform: rotate(-90deg);
-    }
-
-    .unfold-btn {
-      transform: rotate(90deg);
-    }
-  }
-
-  &-content {
-    border: 1px solid #E5E6EB;
-    border-top: none;
-    border-radius: 0 0 8px 8px;
-    padding: 20px;
-  }
-}
-
-.form-flex-item {
-  width: calc(100% / 3);
-}
-</style>

src/components/customField/AddForm.vue

@@ -111,6 +111,8 @@
                   tree-checkable
                   treeCheckStrictly
                   :label-in-value="false"
+                  show-search
+                  :filterTreeNode="filterTreeOption"
                   :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
                 <!--  14, 年份选择 -->
                 <j-date v-else-if="item.fieldShowType === FieldType.YEAR_PICKER.value"
@@ -128,6 +130,8 @@
                                :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
                                :tree-data="optionsData[item.dbFieldName]"
                                :label-in-value="false"
+                               show-search
+                               :filterTreeNode="filterTreeOption"
                                :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
                 <!--16、树形弹框选择-->
                 <tree-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value"
@@ -636,7 +640,11 @@ export default {
     },
     getFlag (fieldName) {
       return this.flagByField[fieldName] || this.flag
-    }
+    },
+    filterTreeOption (input, option) {
+      const text = option.componentOptions.propsData.title || option.componentOptions.propsData.label
+      return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
   }
 }
 </script>

src/components/customField/Search.vue

@@ -16,6 +16,8 @@
               :getPopupContainer="triggerNode=> triggerNode.parentNode"
               :tree-data="optionsData[item.dbFieldName]"
               tree-checkable
+              show-search
+              :filterTreeNode="filterTreeOption"
               :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
             />
           </a-form-item>
@@ -29,6 +31,8 @@
               :maxTagCount="1"
               :getPopupContainer="triggerNode=> triggerNode.parentNode"
               :tree-data="optionsData[item.dbFieldName]"
+              show-search
+              :filterTreeNode="filterTreeOption"
               :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
             />
           </a-form-item>
@@ -74,7 +78,7 @@
             <j-multi-select-tag v-model="queryParam[item.dbFieldName]"
                                 :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
                                 :type="'select'" :maxTagCount="1"
-                                :triggerChange="false" :dictCode="item.dictField"/>
+                                :triggerChange="false" :dictCode="item.dictField" />
           </a-form-item>
         </template>
         <!--   组织机构选择  -->
@@ -89,6 +93,8 @@
               class="box-input"
               style="width: 100%"
               :tree-data="categoryTreeList"
+              show-search
+              :filterTreeNode="filterTreeOption"
               :placeholder="$t('pleaseSelect') + item.dbFieldTxt"
             />
           </a-form-item>
@@ -108,6 +114,8 @@
               :placeholder="$t('pleaseSelect') + item.dbFieldTxt"
               treeCheckable
               treeCheckStrictly
+              show-search
+              :filterTreeNode="filterTreeOption"
             />
           </a-form-item>
         </template>
@@ -141,6 +149,8 @@
                 tree-checkable
                 treeCheckStrictly
                 :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                show-search
+                :filterTreeNode="filterTreeOption"
               />
             </a-form-item>
           </template>
@@ -154,6 +164,8 @@
                 :getPopupContainer="triggerNode=> triggerNode.parentNode"
                 :tree-data="optionsData[item.dbFieldName]"
                 :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                show-search
+                :filterTreeNode="filterTreeOption"
               />
             </a-form-item>
           </template>
@@ -179,6 +191,8 @@
                 style="width: 100%"
                 :tree-data="categoryTreeList"
                 :placeholder="$t('pleaseSelect') + item.dbFieldTxt"
+                show-search
+                :filterTreeNode="filterTreeOption"
               />
             </a-form-item>
           </template>
@@ -197,6 +211,7 @@
                 :placeholder="$t('pleaseSelect') + item.dbFieldTxt"
                 treeCheckable
                 treeCheckStrictly
+                :filterTreeNode="filterTreeOption"
               />
             </a-form-item>
           </template>
@@ -223,7 +238,7 @@
               <j-multi-select-tag v-model="queryParam[item.dbFieldName]"
                                   :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
                                   :type="'select'" :maxTagCount="1"
-                                  :triggerChange="false" :dictCode="item.dictField"/>
+                                  :triggerChange="false" :dictCode="item.dictField" />
             </a-form-item>
           </template>
           <!--  年份选择 -->
@@ -244,7 +259,10 @@
           {{ !toggleSearchStatus ? $t('open') : $t('putAway') }}
           <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
         </a>
-        <a-button icon="search" type="primary" @click="searchQuery" style="margin-left: 8px" v-has="searchHas">{{ $t('query') }}</a-button>
+        <a-button icon="search" type="primary" @click="searchQuery" style="margin-left: 8px" v-has="searchHas">{{
+            $t('query')
+          }}
+        </a-button>
         <a-button icon="reload" type="primary" ghost style="margin-left: 8px" @click="searchReset">{{ $t('reset') }}</a-button>
       </div>
     </a-row>
@@ -396,6 +414,10 @@ export default {
     },
     handleToggleSearch () {
       this.toggleSearchStatus = !this.toggleSearchStatus
+    },
+    filterTreeOption (input, option) {
+      const text = option.componentOptions.propsData.title || option.componentOptions.propsData.label
+      return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
     }
   }
 }