[update] 高级搜索页面

src/api/dashboard.js

@@ -0,0 +1,24 @@
+import { getAction } from './manage'
+
+// 国内标准的高级搜索，查询搜索条件
+const getDomesticStandardQuery = (params) => getAction('/laws/standard/domestic/getQueryCondition', params)
+// 国外标准的高级搜索，查询搜索条件
+const getOverseasStandardQuery = (params) => getAction('/laws/standard/overseas/getQueryCondition', params)
+// 企业标准的高级搜索，查询搜索条件
+const getEnterStandardQuery = (params) => getAction('/laws/standard/enterprise/getQueryCondition', params)
+
+// 国内标准的高级搜索,查询列表数据
+const getDomesticStandardList = (params) => getAction('/laws//standard/domestic/getCommonPage', params)
+// 国外标准的高级搜索,查询列表数据
+const getOverseasStandardList = (params) => getAction('/laws//standard/overseas/getCommonPage', params)
+// 企标的高级搜索,查询列表数据
+const getEnterStandardList = (params) => getAction('/laws/standard/enterprise/getCommonPage', params)
+
+export {
+  getDomesticStandardQuery,
+  getOverseasStandardQuery,
+  getEnterStandardQuery,
+  getDomesticStandardList,
+  getOverseasStandardList,
+  getEnterStandardList
+}

src/components/customField/Search.vue

@@ -36,7 +36,7 @@
         <!--  输入框 -->
         <template
           v-if="[FieldType.TEXT_BOX.value, FieldType.TEXTAREA.value,FieldType.USER_SINGLE.value,
-              FieldType.STANDARD_MORE.value]
+              FieldType.STANDARD_MORE.value,FieldType.TREE_MODAL_SELECT.value]
               .includes(item.fieldShowType)">
           <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-input :placeholder="$t('pleaseEnter')+item.dbFieldTxt"

src/views/dashboard/search/AdvancedSearch.vue

@@ -2,57 +2,450 @@
   <a-card :bordered="false">
     <!--  一般检索和高级检索的tab切换  -->
     <div class="tab-wrapper">
-      <span>一般检索</span>
-      <span>高级检索</span>
-      <span>{{ toggleSearchStatus ? '收起条件' : '展开条件' }}</span>
+      <span class="tab-title">一般检索</span>
+      <span class="tab-title tab-title-curr">高级检索</span>
+      <a @click="handleToggleChange">{{ toggleSearchStatus ? '收起条件' : '展开条件' }}</a>
     </div>
     <a-divider>检索类别</a-divider>
+    <div class="filter-area-div" ref="filterArea">
+      <a-row :gutter="24" class="filter-row">
+        <a-col :md="2" class="label-col"><span class="search_label">标准类型</span></a-col>
+        <a-col :md="18" class="option-col">
+          <div v-for="item in standardTypeOptions" :key="item.value" class="option-div" :class="currStandardType === item.value ? 'option-curr' : ''" @click="standardTypeChange(item.value)">
+            {{ item.label }}
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+    <a-form v-if="toggleSearchStatus" layout="inline" @keyup.enter.native="searchQuery">
+      <a-row :gutter="24">
+        <a-col :md="(24 / (minLength + 1))"
+               :sm="(24 / minLength)"
+               v-for="(item) in searchList"
+               :key="item.id"
+               style="line-height: 48px">
+          <!-- 树形选择器 -->
+          <template v-if="item.fieldShowType === FieldType.TREE.value">
+            <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-tree-select
+                tree-node-filter-prop="title"
+                v-model="queryParam[item.dbFieldName]"
+                :maxTagCount="1"
+                :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                :tree-data="optionsData[item.dbFieldName]"
+                tree-checkable
+                :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+              />
+            </a-form-item>
+          </template>
+          <!--   树形选择器（单选）   -->
+          <template v-if="item.fieldShowType === FieldType.TREE_SINGLE.value">
+            <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-tree-select
+                tree-node-filter-prop="title"
+                v-model="queryParam[item.dbFieldName]"
+                :maxTagCount="1"
+                :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                :tree-data="optionsData[item.dbFieldName]"
+                :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+              />
+            </a-form-item>
+          </template>
+          <!--  输入框 -->
+          <template
+            v-if="[FieldType.TEXT_BOX.value, FieldType.TEXTAREA.value,FieldType.USER_SINGLE.value,
+                FieldType.STANDARD_MORE.value,FieldType.TREE_MODAL_SELECT.value]
+                .includes(item.fieldShowType)">
+            <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input :placeholder="$t('pleaseEnter')+item.dbFieldTxt"
+                       v-model="queryParam[item.dbFieldName]"></a-input>
+            </a-form-item>
+          </template>
+          <!--   数字输入框  -->
+          <!--          <template v-else-if="item.fieldShowType === FieldType.TEXT_NUMBER.value">-->
+          <!--            <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
+          <!--              <a-input-number :placeholder="$t('pleaseEnter')+item.dbFieldTxt"-->
+          <!--                              v-model="queryParam[item.dbFieldName]" :min="1" :max="99999999"/>-->
+          <!--            </a-form-item>-->
+          <!--          </template>-->
+          <!--   日期区间  -->
+          <template v-else-if="[FieldType.DATE_SINGLE.value, FieldType.DATE_MORE.value].includes(item.fieldShowType)">
+            <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-range-picker v-model="queryParam[item.dbFieldName]"
+                              :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                              format="YYYY-MM-DD" value-format="YYYY-MM-DD"
+                              @change="onChange(item.dbFieldName)"></a-range-picker>
+            </a-form-item>
+          </template>
+          <!--  字典单选框  -->
+          <template v-else-if="item.fieldShowType === FieldType.OPTION_SINGLE.value">
+            <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-dict-select-tag v-model="queryParam[item.dbFieldName]"
+                                 :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                                 :type="'select'"
+                                 :triggerChange="false" :dictCode="item.dictField" />
+            </a-form-item>
+          </template>
+          <!--  字典多选框  -->
+          <template v-else-if="item.fieldShowType === FieldType.OPTION_MORE.value">
+            <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-multi-select-tag v-model="queryParam[item.dbFieldName]"
+                                  :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                                  :type="'select'" :maxTagCount="1"
+                                  :triggerChange="false" :dictCode="item.dictField"/>
+            </a-form-item>
+          </template>
+          <!--   组织机构选择  -->
+          <template v-else-if="item.fieldShowType === FieldType.ORGAN_SINGLE.value">
+            <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-tree-select
+                tree-node-filter-prop="title"
+                v-model="queryParam[item.dbFieldName]"
+                :maxTagCount="1"
+                :show-search="true"
+                :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                class="box-input"
+                style="width: 100%"
+                :tree-data="categoryTreeList"
+                :placeholder="$t('pleaseSelect') + item.dbFieldTxt"
+              />
+            </a-form-item>
+          </template>
+          <!--  组织机构多选  -->
+          <template v-else-if="item.fieldShowType === FieldType.ORGAN_MORE.value">
+            <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-tree-select
+                tree-node-filter-prop="title"
+                v-model="queryParam[item.dbFieldName]"
+                :maxTagCount="1"
+                :show-search="true"
+                :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                class="box-input"
+                style="width: 100%"
+                :tree-data="categoryTreeList"
+                :placeholder="$t('pleaseSelect') + item.dbFieldTxt"
+                treeCheckable
+                treeCheckStrictly
+              />
+            </a-form-item>
+          </template>
+          <!--  年份选择 -->
+          <template
+            v-if="item.fieldShowType === FieldType.YEAR_PICKER.value">
+            <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-date show-type="year"
+                      :allowClear="false"
+                      v-model="queryParam[item.dbFieldName]"
+                      date-format="YYYY"
+                      :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
+            </a-form-item>
+          </template>
+        </a-col>
+      </a-row>
+      <div class="table-page-search-submitButtons">
+        <a-button icon="search" type="primary" @click="searchQuery" :loading="loading">{{ $t('query') }}</a-button>
+        <a-button icon="reload" type="primary" ghost style="margin-left: 8px" @click="searchReset" :loading="loading">{{ $t('reset') }}</a-button>
+      </div>
+    </a-form>
     <div>
-      <span>标准类型</span>
-      <a-radio-group v-model="currStandardType" :options="standardTypeOptions" @change="standardTypeChange"></a-radio-group>
+      <j-table
+        :can-drag="true"
+        :scroll="{x: '100%'}"
+        ref="table"
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        @change="handleTableChange">
+
+      </j-table>
     </div>
-    <search ref="searchRef" :getQueryConditionFunc="getQueryConditionFunc"></search>
   </a-card>
 </template>
 
 <script>
-import { getEnterpriseStandardSearchForm } from '@/api/enterpriseStandardLibraryApi'
+import { filterObj } from '@/utils/util'
+import { StandardSource, FieldType } from '@/enums/commonEnums'
+import { getAction } from '@/api/manage'
+import { getFormDictTreeList, queryDepartTreeList } from '@/api/api'
+import {
+  getDomesticStandardList,
+  getOverseasStandardList,
+  getEnterStandardList,
+  getDomesticStandardQuery,
+  getOverseasStandardQuery,
+  getEnterStandardQuery
+} from '@/api/dashboard'
+import JTable from '@/components/jero/JTable'
 
 export default {
   name: 'AdvancedSearch',
+  components: { JTable },
   data () {
     return {
+      FieldType,
+      loading: false,
       toggleSearchStatus: false, // 检索条件的展开和收起，false收缩状态
-      currStandardType: 1,
+      currStandardType: '1',
       standardTypeOptions: [
-        { label: '国内标准法规', value: 1 },
-        { label: '海外标准法规', value: 2 },
-        { label: '企业标准', value: 3 }
+        { label: '国内标准法规', value: StandardSource.DOMESTIC.value },
+        { label: '海外标准法规', value: StandardSource.OVERSEAS.value },
+        { label: '企业标准', value: StandardSource.ENTERPRISE.value }
       ],
-      getQueryConditionFunc: undefined // 获取查询条件列表
+      labelCol: {
+        xl: 8,
+        xxl: 6
+      },
+      wrapperCol: {
+        span: 14
+      },
+      getQueryConditionFunc: undefined, // 获取查询条件列表
+      minLength: 2,
+      searchList: [], // 搜索条件
+      optionsData: [], // 搜索条件下拉数据
+      categoryTreeList: [], // 组织机构下拉框数据
+      queryParam: {},
+      columns: [],
+      dataSource: [],
+      /* 分页参数 */
+      ipagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' ' + this.$t('total') + total + this.$t('strip')
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      }
     }
   },
   watch: {
     currStandardType: {
       immediate: true,
       handler (val) {
-        if (val === 1) {
-          this.getQueryConditionFunc = getEnterpriseStandardSearchForm
-        } else if (val === 2) {
-          this.getQueryConditionFunc = getEnterpriseStandardSearchForm
-        } else if (val === 3) {
-          this.getQueryConditionFunc = getEnterpriseStandardSearchForm
+        if (val === '1') {
+          this.getQueryConditionFunc = getDomesticStandardQuery
+        } else if (val === '2') {
+          this.getQueryConditionFunc = getOverseasStandardQuery
+        } else if (val === '3') {
+          this.getQueryConditionFunc = getEnterStandardQuery
         }
+        this.getSearch()
       }
     }
   },
+  mounted () {
+    this.getQueryConditionFunc = getDomesticStandardQuery
+    this.getSearch()
+    this.getSysCategoryTree()
+  },
   methods: {
     // 标准类型改变
-    standardTypeChange () {}
+    standardTypeChange (value) {
+      this.currStandardType = value
+    },
+    onChange (item) {
+      if (this.queryParam[item] && this.queryParam[item].length > 0) {
+        const startDate = item + '_start'
+        const endDate = item + '_end'
+        this.queryParam[startDate] = this.queryParam[item][0]
+        this.queryParam[endDate] = this.queryParam[item][1]
+      } else {
+        this.queryParam[item] = []
+      }
+    },
+    // 获取组织机构树
+    getSysCategoryTree () {
+      queryDepartTreeList().then((res) => {
+        if (res.success) {
+          this.categoryTreeList = res.result
+        } else {
+          this.categoryTreeList = []
+        }
+      })
+    },
+    // 获取查询条件列表
+    getSearch () {
+      if (!this.getQueryConditionFunc || typeof this.getQueryConditionFunc !== 'function') {
+        return
+      }
+      const params = {
+        module: this.currStandardType
+      }
+      this.getQueryConditionFunc(params).then((res) => {
+        if (res.success) {
+          this.searchList = res.result
+          this.getOptionsData() // 获取下拉数据
+        }
+      })
+    },
+    /**
+     * 处理需要通过接口获取的下拉数据
+     */
+    getOptionsData () {
+      const formList = Object.values(this.searchList).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)
+              }
+            })
+          }
+        }
+      })
+    },
+    getQueryParams () {
+      const formInline = JSON.parse(JSON.stringify(this.queryParam))
+      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(',')
+          }
+        }
+      })
+      formInline.pageNo = this.ipagination.current
+      formInline.pageSize = this.ipagination.pageSize
+      const param = Object.assign(formInline)
+      return filterObj(param)
+    },
+    loadData (arg) {
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      const params = this.getQueryParams()// 查询条件
+      let func
+      if (this.currStandardType === StandardSource.DOMESTIC.value) {
+        func = getDomesticStandardList
+      } else if (this.currStandardType === StandardSource.OVERSEAS.value) {
+        func = getOverseasStandardList
+      } else if (this.currStandardType === StandardSource.ENTERPRISE.value) {
+        func = getEnterStandardList
+      }
+      this.loading = true
+      func(params).then((res) => {
+        if (res.success) {
+          this.dataSource = res.result.records || res.result
+          if (res.result.total) {
+            this.ipagination.total = res.result.total
+          } else {
+            this.ipagination.total = 0
+          }
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 收齐展开点击
+    handleToggleChange () {
+      this.toggleSearchStatus = !this.toggleSearchStatus
+    },
+    handleTableChange (pagination, filters, sorter) {
+      // 分页、排序、筛选变化时触发
+      if (Object.keys(sorter).length > 0) {
+        this.isorter.column = sorter.order ? sorter.field : 'createTime'
+        this.isorter.order = sorter.order === 'ascend' ? 'asc' : 'desc'
+      }
+      this.ipagination = pagination
+      this.loadData()
+    },
+    // 查询
+    searchQuery () {
+      this.loadData(1)
+    },
+    // 重置
+    searchReset () {
+      this.queryParam = {}
+      this.loadData(1)
+    }
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+.tab-wrapper {
+  span {
+    margin-right: 20px;
+    cursor: pointer;
+  }
+  .tab-title {
+    font-size: 20px;
+  }
+  .tab-title-curr {
+    color: @primary-color;
+  }
+}
+// 筛选区域
+.filter-area-div {
+  padding: 10px 20px;
+  box-sizing: border-box;
+  .filter-row {
+    height: auto;
+    line-height: 44px;
+    display: flex;
+  }
+  .label-col {
+    text-align: left;
+    color: #86909c;
+  }
+  .option-col {
+    width: calc(100% - 200px);
+    height: auto;
+    color: #1D2129;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    .option-div {
+      width: auto;
+      height: 32px;
+      line-height: 32px;
+      padding: 0 12px;
+      cursor: pointer;
+      margin: 6px 4px;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+}
+// 选中项样式
+.option-curr {
+  background: rgba(213, 44, 38, 0.08);
+  color: @primary-color;
+  border-radius: 4px 4px 4px 4px;
+}
 
+/deep/ .ant-form {
+  padding: 0 20px;
+}
+
+/deep/ .ant-form-item {
+  width: 100%;
+}
+
+/deep/ .ant-form-item-label {
+  text-align: left;
+  label {
+    color: #86909c !important;
+  }
+}
+
+.table-page-search-submitButtons {
+  text-align: center;
+}
 </style>