[update] 一般检索样式修改

src/common/lang/dashboard/en.js

@@ -2,6 +2,8 @@
 module.exports = {
   // 一般检索
   generalSearch: {
+    advancedSearch: 'Advanced Search',
+    homePage: 'Home',
     queryCondition: 'Query Condition',
     retrievalMode: 'Retrieval Mode',
     resourceType: 'Resource Type'

src/common/lang/dashboard/zh.js

@@ -2,6 +2,8 @@
 module.exports = {
   // 一般检索
   generalSearch: {
+    advancedSearch: '高级搜索',
+    homePage: '首页',
     queryCondition: '查询条件',
     retrievalMode: '检索方式',
     resourceType: '资源类型'

src/common/lang/en-us.js

@@ -4,6 +4,7 @@ const standardRegulationLibrary = require('./standardRegulationLibrary/en-us')
 const enterpriseStandardLibrary = require('./enterpriseStandardLibrary/en.js')
 const businessSupport = require('./businessSupport/en')
 const projectLibrary = require('./projectLibrary/en.js')
+const dashboard = require('./dashboard/en')
 
 module.exports = {
   // 共用
@@ -536,5 +537,7 @@ module.exports = {
   // 业务支持
   businessSupport,
   // 项目库
-  projectLibrary
+  projectLibrary,
+  // 首页
+  dashboard
 }

src/common/lang/zh-cn.js

@@ -4,6 +4,7 @@ const standardRegulationLibrary = require('./standardRegulationLibrary/zh-cn')
 const enterpriseStandardLibrary = require('./enterpriseStandardLibrary/zh.js')
 const businessSupport = require('./businessSupport/zh')
 const projectLibrary = require('./projectLibrary/zh.js')
+const dashboard = require('./dashboard/zh')
 
 module.exports = {
   // 共用
@@ -538,5 +539,7 @@ module.exports = {
   // 业务支持
   businessSupport,
   // 项目库
-  projectLibrary
+  projectLibrary,
+  // 首页
+  dashboard
 }

src/views/dashboard/search/AdvancedSearch.vue

@@ -0,0 +1,58 @@
+<template>
+  <a-card :bordered="false">
+    <!--  一般检索和高级检索的tab切换  -->
+    <div class="tab-wrapper">
+      <span>一般检索</span>
+      <span>高级检索</span>
+      <span>{{ toggleSearchStatus ? '收起条件' : '展开条件' }}</span>
+    </div>
+    <a-divider>检索类别</a-divider>
+    <div>
+      <span>标准类型</span>
+      <a-radio-group v-model="currStandardType" :options="standardTypeOptions" @change="standardTypeChange"></a-radio-group>
+    </div>
+    <search ref="searchRef" :getQueryConditionFunc="getQueryConditionFunc"></search>
+  </a-card>
+</template>
+
+<script>
+import { getEnterpriseStandardSearchForm } from '@/api/enterpriseStandardLibraryApi'
+
+export default {
+  name: 'AdvancedSearch',
+  data () {
+    return {
+      toggleSearchStatus: false, // 检索条件的展开和收起，false收缩状态
+      currStandardType: 1,
+      standardTypeOptions: [
+        { label: '国内标准法规', value: 1 },
+        { label: '海外标准法规', value: 2 },
+        { label: '企业标准', value: 3 }
+      ],
+      getQueryConditionFunc: undefined // 获取查询条件列表
+    }
+  },
+  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
+        }
+      }
+    }
+  },
+  methods: {
+    // 标准类型改变
+    standardTypeChange () {}
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/dashboard/search/GeneralSearch.vue

@@ -3,13 +3,13 @@
     <!--  搜索框部分  -->
     <div class="top-search-div">
       <div class="top-search-div-content">
-        <a-input-search class="input-search" :placeholder="$t('pleaseEnter')+$t('dashboard.generalSearch.queryCondition')" enter-button @search="onSearch" />
+        <a-input-search class="input-search" :placeholder="$t('pleaseEnter')+$t('dashboard.generalSearch.queryCondition')" v-model="searchValue" enter-button @search="onSearch" />
-        <a class="search-link">高级搜索</a>
+        <a class="search-link" @click="clickAdvancedSearch">{{ $t('dashboard.generalSearch.advancedSearch') }}</a>
-        <a class="search-link">首页</a>
+        <a class="search-link">{{ $t('dashboard.generalSearch.homePage') }}</a>
       </div>
     </div>
     <!--  筛选区域 -->
-    <div class="filter-area-div">
+    <div class="filter-area-div" ref="filterArea">
       <!--   检索方式  -->
       <a-row :gutter="24" class="filter-row">
         <a-col :md="6" class="label-col"><span class="search_label">{{ $t('dashboard.generalSearch.retrievalMode') }}</span></a-col>
@@ -31,29 +31,151 @@
       <!--   其他筛选条件  -->
       <template v-if="toggleSearchStatus">
         <template v-for="(value, key) in selectOptions">
-          <a-row :key="key" :gutter="24" class="filter-row">
+          <div :key="key" :gutter="24" class="filter-row">
-            <a-col :md="6" class="label-col"><span class="search_label">{{ value.label }}</span></a-col>
+            <div class="label-col"><span class="search_label">{{ lang === 'zh-cn' ? value.label : value.labelEn }}</span></div>
-            <a-col :md="18" class="option-col">
+            <div class="option-col">
-              <div v-for="item in value.options" :key="item.key" class="option-div" :class="value.current === item.key ? 'option-curr' : ''" @click="selectOptionsChange(key, item.key)">
+              <div v-for="item in value.options" :key="item.value" class="option-div" :class="value.current === item.value ? 'option-curr' : ''" @click="selectOptionsChange(key, item.value)">
-                {{ item.label }}
+                {{ item.title }}
+              </div>
+            </div>
           </div>
-            </a-col>
-          </a-row>
         </template>
       </template>
-      <div class="toggle-div" @click="handleToggleChange">
+      <div class="toggle-div" @click="handleToggleChange" v-if="selectOptions && Object.keys(selectOptions).length !== 0">
         <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
         {{ toggleSearchStatus ? $t('putAway') : $t('open') }}
       </div>
     </div>
+    <!--  查询结果展示区域  -->
+    <div class="result-wrapper">
+      <div class="result-div" v-for="item in dataSource" :key="item.standardNumber">
+        <div class="result-title-wrapper">
+          <p class="result-title">{{ item.standard_number + ' ' + item.standard_name }}</p>
+          <p class="result-source">{{ item.source }}</p>
+          <p class="result-date">{{ item.publishDate }}</p>
+        </div>
+        <div class="result-content-wrapper">
+          <span class="result-field-span" v-for="field in formInLine" :key="field.dbFieldName">{{field.dbFieldTxt}}: {{ item[field.dbFieldName] || '--' }}</span>
+        </div>
+      </div>
+    </div>
+    <a-pagination
+      v-if="dataSource && dataSource.length > 0"
+      class="page-content"
+      show-quick-jumper
+      show-size-changer
+      v-model="ipagination.current"
+      :pageSize="ipagination.pageSize"
+      :pageSizeOptions="ipagination.pageSizeOptions"
+      :total="ipagination.total"
+      :showTotal="ipagination.showTotal"
+    />
   </a-card>
 </template>
 
 <script>
+import { ajaxGetDictItems, getCarTypeProjectList } from '@/api/api'
+
+// 国内的其他检索条件
+const domesticOtherOptions = {
+  standardCategory: { // 标准类别
+    label: '标准类别',
+    labelEn: 'Standard Class',
+    code: 'standard_type',
+    current: 'all',
+    options: []
+  },
+  dynamicType: { // 动力类型
+    label: '动力类型',
+    labelEn: 'Dynamic Type',
+    current: 'all',
+    code: 'POWER_TYPE_DOMESTIC',
+    options: []
+  },
+  applicableVehicleType: { // 适用车辆类型
+    label: '适用车辆类型',
+    labelEn: 'Applicable Vehicle Type',
+    current: 'all',
+    href: getCarTypeProjectList,
+    options: []
+  },
+  standardType: { // 标准性质
+    label: '标准性质',
+    labelEn: 'Standard Property',
+    current: 'all',
+    code: 'standard_property',
+    options: []
+  },
+  status: { // 状态
+    label: '状态',
+    labelEn: 'Status',
+    current: 'all',
+    code: 'standard_state',
+    options: []
+  }
+}
+
+// 海外的其他检索条件
+const overseasOtherOptions = {
+  standardCategory: { // 标准类别
+    label: '标准类别',
+    code: 'standard_type',
+    current: 'all',
+    options: []
+  },
+  dynamicType: { // 动力类型
+    label: '动力类型',
+    labelEn: 'Dynamic Type',
+    current: 'all',
+    code: 'POWER_TYPE_DOMESTIC',
+    options: []
+  },
+  applicableVehicleType: { // 适用车辆类型
+    label: '适用车辆类型',
+    labelEn: 'Applicable Vehicle Type',
+    current: 'all',
+    href: getCarTypeProjectList,
+    options: []
+  },
+  status: { // 状态
+    label: '状态',
+    labelEn: 'Status',
+    current: 'all',
+    code: 'standard_state',
+    options: []
+  }
+}
+
+// 企标的其他检索条件
+const enterpriseOtherOptions = {
+  standardCode: { // 企业标准代号
+    label: '企业标准代号',
+    labelEn: 'Enterprise Standard Code',
+    code: 'enterprise_standard_code',
+    current: 'all',
+    options: []
+  },
+  standardStatus: { // 标准状态
+    label: '标准状态',
+    labelEn: 'Standard State',
+    code: 'standard_state',
+    current: 'all',
+    options: []
+  },
+  standardLevel: { // 标准等级分类
+    label: '标准等级分类',
+    labelEn: 'Standard Grade Classification',
+    code: 'standard_grade_classify',
+    current: 'all',
+    options: []
+  }
+}
+
 export default {
   name: 'GeneralSearch',
   data () {
     return {
+      searchValue: '', // 搜索框内容
       toggleSearchStatus: false, // 检索条件收缩还是展开， false收缩状态
       retrievalModeOptions: [
         { key: 1, label: '全文检索' },
@@ -68,62 +190,69 @@ export default {
         { key: 5, label: '动态消息' }
       ], // 资源类型可选择项
       resourceTypeCurrent: 1, // 资源类型当前选中项
-      selectOptions: { // 其他筛选条件
+      selectOptions: {}, // 其他筛选条件
-        standardCategory: { // 标准类别
+      dataSource: [
-          label: '标准类别',
+        { standard_number: 'GB 7258-12', standard_name: '机动车安全', source: '国内标准法规', publishDate: '2023-08-25' },
-          current: 1,
+        { standard_number: 'GB 7258-12', standard_name: '机动车安全', source: '国内标准法规', publishDate: '2023-08-25' },
-          options: [
+        { standard_number: 'GB 7258-12', standard_name: '机动车安全', source: '国内标准法规', publishDate: '2023-08-25' },
-            { key: 1, label: 'GB', number: 3 },
+        { standard_number: 'GB 7258-12', standard_name: '机动车安全', source: '国内标准法规', publishDate: '2023-08-25' },
-            { key: 2, label: 'GB/T', number: 2 },
+        { standard_number: 'GB 7258-12', standard_name: '机动车安全', source: '国内标准法规', publishDate: '2023-08-25' }
-            { key: 3, label: 'QC/T', number: 3 },
+      ],
-            { key: 4, label: 'GA', number: 1 }
+      formInLine: [
-          ]
+        {
+          dbFieldName: 'standard_number',
+          dbFieldNameOld: 'standard_number',
+          dbFieldTxt: '企标编号'
         },
-        dynamicType: { // 动力类型
+        {
-          label: '动力类型',
+          dbFieldName: 'standard_name',
+          dbFieldNameOld: 'standard_name',
+          dbFieldTxt: '企标名称'
+        }
+      ],
+      ipagination: {
         current: 1,
-          options: [
+        pageSize: 10,
-            { key: 1, label: '汽油', number: 3 },
+        pageSizeOptions: ['10', '20', '30'],
-            { key: 2, label: '柴油', number: 2 },
+        showTotal: (total, range) => {
-            { key: 3, label: '纯电动', number: 3 },
+          return range[0] + '-' + range[1] + ' ' + this.$t('total') + total + this.$t('strip')
-            { key: 4, label: '混合动力', number: 1 },
-            { key: 5, label: '燃油电池', number: 1 },
-            { key: 6, label: '替代燃料', number: 1 }
-          ]
         },
-        applicableVehicleType: { // 适用车辆类型
+        total: 0,
-          label: '适用车辆类型',
+        showQuickJumper: true,
-          current: 1,
+        showSizeChanger: true
-          options: [
-            { key: 1, label: 'N1', number: 3 },
-            { key: 2, label: 'N2', number: 2 },
-            { key: 3, label: 'N3', number: 3 },
-            { key: 4, label: 'M1', number: 1 },
-            { key: 5, label: 'M2', number: 1 },
-            { key: 6, label: 'M3', number: 1 }
-          ]
-        },
-        standardType: { // 标准类型
-          label: '标准类型',
-          current: 1,
-          options: [
-            { key: 1, label: '标准性', number: 3 },
-            { key: 2, label: '强制性', number: 2 }
-          ]
-        },
-        status: { // 状态
-          label: '状态',
-          current: 1,
-          options: [
-            { key: 1, label: '即将实施', number: 3 },
-            { key: 2, label: '现行有效', number: 2 },
-            { key: 3, label: '废止', number: 3 }
-          ]
       }
     }
+  },
+  computed: {
+    lang () {
+      return localStorage.language
     }
   },
   methods: {
+    // 更新selectOptions中的options
+    initSelectOptionsData () {
+      for (const item in this.selectOptions) {
+        if (this.selectOptions[item].code) {
+          ajaxGetDictItems(this.selectOptions[item].code).then(res => {
+            if (res.success) {
+              this.selectOptions[item].options = res.result
+              this.selectOptions[item].options.unshift({ text: '全部', title: '全部', value: 'all' })
+            } else {
+              this.selectOptions[item].options = []
+            }
+          })
+        } else if (this.selectOptions[item].href) {
+          this.selectOptions[item].href().then(res => {
+            if (res.success) {
+              this.selectOptions[item].options = res.result
+              this.selectOptions[item].options.unshift({ text: '全部', title: '全部', value: 'all' })
+            } else {
+              this.selectOptions[item].options = []
+            }
+          })
+        }
+      }
+    },
     // 获取要显示数量的筛选条件的数据
     initFilterData () {
 
@@ -137,6 +266,20 @@ export default {
     // 资源类型改变
     resourceTypeChange (key) {
       this.resourceTypeCurrent = key
+      if (key === 2) {
+        // 是国内标准法规
+        this.selectOptions = JSON.parse(JSON.stringify(domesticOtherOptions))
+      } else if (key === 3) {
+        // 是海外标准法规
+        this.selectOptions = JSON.parse(JSON.stringify(overseasOtherOptions))
+      } else if (key === 4) {
+        // 是企标
+        this.selectOptions = JSON.parse(JSON.stringify(enterpriseOtherOptions))
+      } else {
+        this.selectOptions = {}
+      }
+      // 更新其他筛选项的数据
+      this.initSelectOptionsData()
     },
     // 其他检索条件改变
     selectOptionsChange (changeKey, value) {
@@ -145,21 +288,34 @@ export default {
     // 收齐展开点击
     handleToggleChange () {
       this.toggleSearchStatus = !this.toggleSearchStatus
+    },
+    // 点击高级搜索按钮
+    clickAdvancedSearch () {
+      this.$router.push({
+        path: '/advancedSearch'
+      })
     }
   }
 }
 </script>
 
 <style scoped lang="less">
+@import '~@assets/less/common.less';
 /deep/ .ant-card-body {
   padding: 0;
+  height: calc(100vh - 45px - 59px - 12px);
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 // 头部搜索区域
 .top-search-div {
   width: 100%;
   height: 124px;
   background-image: url("../../../assets/image/searchPageBack.png");
-  background-size: contain;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -185,28 +341,38 @@ export default {
 // 筛选区域
 .filter-area-div {
   padding: 10px 20px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #E5E6EB;
   .filter-row {
-    height: 44px;
+    height: auto;
     line-height: 44px;
+    display: flex;
   }
   .label-col {
+    width: 200px;
     text-align: left;
     color: #86909c;
   }
   .option-col {
-    height: 100%;
+    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: 0 4px;
+      margin: 6px 4px;
+      overflow: hidden;
+      white-space: nowrap;
     }
   }
 }
+// 选中项样式
 .option-curr {
   background: rgba(213, 44, 38, 0.08);
   color: #D52C26;
@@ -221,4 +387,70 @@ export default {
     height: 8px;
   }
 }
+
+// 查询结果展示区域
+.result-wrapper {
+  overflow-y: auto;
+  padding: 24px;
+}
+
+// 单个查询结果
+.result-div {
+  width: 100%;
+  height: auto;
+  background: #F8F8F8;
+  border-radius: 4px 4px 4px 4px;
+  padding: 20px;
+  box-sizing: border-box;
+  margin-bottom: 16px;
+  .result-title-wrapper {
+    display: flex;
+    align-items: center;
+    .result-title {
+      color: #1D2129;
+      font-size: 18px;
+      font-family: PingFang SC-Semibold, PingFang SC;
+      font-weight: 600;
+      line-height: 28px;
+      margin-right: 20px;
+    }
+    .result-source {
+      height: 28px;
+      line-height: 28px;
+      background: #D52C26;
+      border-radius: 4px 4px 4px 4px;
+      font-size: 14px;
+      font-family: PingFang SC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      padding: 0 8px;
+    }
+    .result-date {
+      font-size: 16px;
+      font-family: PingFang SC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #86909C;
+      line-height: 19px;
+      flex: auto;
+      text-align: right;
+    }
+  }
+  .result-content-wrapper {
+    font-size: 14px;
+    font-family: PingFang SC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #1D2129;
+    line-height: 20px;
+    .result-field-span {
+      margin-right: 12px;
+    }
+  }
+}
+
+// 分页
+.page-content {
+  height: 32px;
+  text-align: right;
+  margin: 10px 24px 24px 0;
+}
 </style>