查询优化

src/components/Form/src/components/AdvancedSearch.vue

@@ -6,18 +6,18 @@
 <template>
   <!-- 高级查询 -->
   <Modal
-    class="ds-modal-small"
+    class="ds-modal-small ds-advanced-search-modal"
     title="高级查询"
     :maskClosable="false"
-    width="650px"
+    width="670px"
     :visible="modalFlag"
-    cancelText="重置"
-    @ok="search"
-    @cancel="cancel"
+    @cancel="modalFlag = false"
   > 
+    <a-spin :spinning="loading">
       <div class="flex ant-form-small">
         <a-switch
           v-model:checked="queryData.logicalOperator"
+          class="mt10"
           checked-value="1"
           un-checked-value="0"
           checked-children="或"
@@ -25,18 +25,23 @@
         />
         <div style="flex: 1">
           <div v-for="(item, index) in queryData.conditions" class="ds-advanced-search-item flex" :key="`f-${index}`">
+            <data :style="{left: index == 0 ? '-30px' : '-15px'}" class="v-line" style="top: 21px;"></data>
+            <data v-if="index != queryData.conditions.length - 1" class="r-line r-height" style="left: -15px; top: 21px;"></data>
             <a-switch
               v-model:checked="item.logicalOperator"
               checked-value="1"
+              class="mt2"
               un-checked-value="0"
               checked-children="或"
               un-checked-children="且"
             />
-          <div style="flex: 1">
-            <div v-for="(row, key) in item.conditions" :key="`c-${key}`" style="margin-bottom: 6px;">
+            <div style="flex: 1; margin-left: 30px">
+              <div v-for="(row, key) in item.conditions" :key="`c-${key}`" style="margin-bottom: 6px; position: relative;">
+                <div v-if="(key != item.conditions.length - 1)" class="r-line"></div>
+                <div :style="{ left: key == 0 ? '-29px' : '-16px' }" class="v-line"></div>
                 <a-select
                   v-model:value="row.field"
-                style="width: 130px; margin-right: 6px;"
+                  style="width: 150px; margin-right: 6px;"
                   placeholder="查询字段"
                   @change="changeHandle($event, row)"
                 >
@@ -53,16 +58,16 @@
                     {{ item.label }}
                   </a-select-option>
                 </a-select>
-              <a-date-picker v-if="row.component == 'RangePicker'" placeholder="请选择" style="width: 120px" v-model:value="row.value" />
-              <a-input v-else v-model:value="row.value" placeholder="请输入" style="width: 120px"></a-input>
-              <span @click="deleteItem(index, key)" class="iconfont icon-shanchu21"></span>
+                <a-date-picker v-if="row.component == 'RangePicker'" placeholder="请选择" style="width: 150px" v-model:value="row.value" />
+                <a-input v-else v-model:value="row.value" placeholder="请输入" style="width: 150px"></a-input>
+                <span v-if="item.conditions.length != 1" @click="deleteItem(index, key)" class="iconfont icon-shanchu21"></span>
               </div>
               <div class="item-btns">
                 <a-button type="link" @click="addRow(index)">
                   <span class="iconfont icon-new_document"></span>
                   添加条件
                 </a-button>
-              <a-button type="link" @click="deleteGroup(index)">
+                <a-button v-if="queryData.conditions.length != 1" type="link" @click="deleteGroup(index)">
                   <span class="iconfont icon-shanchuzu"></span>
                   删除整组
                 </a-button>
@@ -70,11 +75,16 @@
             </div>
           </div>
         </div>
+      </div>
+    </a-spin>
     <a-button class="add-group" type="link" @click="addGroup">
       <span class="iconfont icon-calendar"></span>
       添加条件组
     </a-button>
-    </div>
+    <template #footer>
+      <a-button key="back" @click="reset">重 置</a-button>
+      <a-button key="submit" type="primary" :loading="loading" @click="search">查 询</a-button>
+    </template>
   </Modal>
 </template>
 <script lang="ts" setup name="AdvancedSearch">
@@ -84,6 +94,7 @@
   import { GetUserQuerySet, UpdateUserQuerySet } from '/@/views/operation/seaexport/api/BookingLedger.js'
   import { Modal } from 'ant-design-vue'
   import { get, omit } from 'lodash-es'
+  // 预留，后期补双语
   import { useI18n } from '/@/hooks/web/useI18n'
   const props = defineProps({
     schemas: {
@@ -162,38 +173,39 @@
       }
     ]
   })
+  // 筛选符options
   const operatorOptions = [
     {
-      value: 'equal',
+      value: 0,
       label: '等于',
     },
     {
-      value: 'not_equal',
+      value: 10,
       label: '不等于',
     },
     {
-      value: 'GreaterThan',
+      value: 2,
       label: '大于',
     },
     {
-      value: 'GreaterThanOrEqual',
+      value: 3,
       label: '大于等于',
     },
     {
-      value: 'LessThan',
+      value: 4,
       label: '小于',
     },
     {
-      value: 'LessThanOrEqual',
+      value: 5,
       label: '小于等于',
     },
     {
       label: '包含',
-      value: 'contains',
+      value: 1,
     },
     {
       label: '不包含',
-      value: 'not_contain',
+      value: 13
     },
   ]
   // 存储接口返回的查询条件
@@ -201,15 +213,18 @@
     logicalOperator: '',
     conditions: ''
   }
+  const loading = ref(false)
+  // 初始化弹窗，请求高级查询数据
   const init = () => {
     modalFlag.value = true
+    loading.value = true
     const permissionId = permissionsInfo().permissionId
     GetUserQuerySet({ permissionId }).then(res => {
+      loading.value = false
       const { data } = res
       const content = JSON.parse(data?.content || '{}')
       const source = JSON.parse(JSON.stringify(queryOldData))
       if (content && content?.conditions?.length) {
-        console.log(content)
         // sourceData.logicalOperator = JSON.stringify(JSON.parse(content.logicalOperator))
         // sourceData.conditions = JSON.stringify(JSON.parse(content.conditions))
         queryData.logicalOperator = content.logicalOperator
@@ -220,10 +235,11 @@
         queryData.logicalOperator = source.logicalOperator
         queryData.conditions = source.conditions
       }
+    }).catch(() => {
+      loading.value = false
     })
   }
-  const cancel = () => {
-    modalFlag.value = false
+  const reset = () => {
     const source = JSON.parse(JSON.stringify(queryOldData))
     queryData.logicalOperator = source.logicalOperator
     queryData.conditions = source.conditions
@@ -234,6 +250,7 @@
     // if (JSON.stringify(sourceData) != JSON.stringify(queryData)) {
       
     // }
+    modalFlag.value = false
     emit('toSearch', queryData)
     const propsData = {
       permissionId: permissionsInfo().permissionId,
@@ -287,8 +304,14 @@
 </script>
 
 <style lang="less">
-.ds-advanced-search-item {
-  margin-left: 15px;
+.ds-advanced-search-modal {
+  .ant-form-small {
+    margin-top: 15px;
+    min-height: 400px;
+  }
+  .ds-advanced-search-item {
+    position: relative;
+    margin-left: 30px;
     padding: 10px 15px;
     border-left: 1px solid #257AFA;
     background: #F5F9FC;
@@ -305,13 +328,48 @@
       .iconfont {
         cursor: pointer;
       }
+      padding-right: 18px;
     }
-}
-.ds-advanced-search-item:last-child {
+  }
+  .ds-advanced-search-item:last-child {
     margin-bottom: 0;
-}
-.add-group {
+  }
+  .add-group {
     position: absolute;
     bottom: 16px;
+    margin-left: 65px;
+  }
+  .ant-switch {
+    background: #257AFA;
+    font-weight: 600;
+  }
+  .ant-switch-checked {
+    background: #17A6A3;
+    font-weight: 600;
+  }
+  .r-line {
+    width: 0.8px;
+    height: 35px;
+    background: #CCCCCC;
+    display: inline-block;
+    position: absolute;
+    left: -16px;
+    top: 13px;
+  }
+  .r-line:last-child {
+    height: 10px;
+  }
+  .r-height {
+    height: calc(100% + 20px);
+  }
+  .v-line {
+    width: 30px;
+    height: 0.8px;
+    background: #CCCCCC;
+    display: inline-block;
+    position: absolute;
+    left: -16px;
+    top: 13px;
+  }
 }
 </style>

src/components/Form/src/components/FormAction.vue

@@ -60,7 +60,7 @@
     <AdvancedSearch
       ref="advanceSearch"
       :schemas="schemas"
-      @toSearch="submitAction"
+      @toSearch="toSearch"
     />
   </a-col>
 </template>
@@ -94,6 +94,10 @@
       useAdvancedSearch: propTypes.bool.def(false),
       // 多单号查询
       useNumbersSearch: propTypes.bool.def(false),
+      // 高级查询更新参数使用
+      fetch: {
+        type: Function
+      },
       showSubmitButton: propTypes.bool.def(true),
       showAdvancedButton: propTypes.bool.def(true),
       resetButtonOptions: {
@@ -108,6 +112,11 @@
         type: Object as PropType<Partial<ColEx>>,
         default: () => ({}),
       },
+      // 传进来的表格操作的方法集合
+      tableAction: {
+        type: Object,
+        default: () => ({}),
+      },
       actionSpan: propTypes.number.def(6),
       isAdvanced: propTypes.bool,
       hideAdvanceBtn: propTypes.bool,
@@ -145,7 +154,7 @@
       })
       // 执行高级查询
       const toSearch = (params) => {
-        console.log(params)
+        props.fetch({ advanced : params })
       }
       const getSubmitBtnOptions = computed(() => {
         return Object.assign(

src/components/Form/src/props.ts

@@ -84,7 +84,7 @@ export const basicProps = {
   // 自定义重置函数
   resetFunc: Function as PropType<() => Promise<void>>,
   submitFunc: Function as PropType<() => Promise<void>>,
-
+  fetch: Function as PropType<() => Promise<void>>,
   // 以下为默认props
   hideRequiredMark: propTypes.bool,
 

src/components/Table/src/BasicTable.vue

@@ -6,6 +6,7 @@
       ref="formRef"
       submit-on-reset
       v-bind="getFormProps"
+      :fetch="fetch"
       :table-action="tableAction"
       :autoSubmitOnEnter="true"
       @register="registerForm"
@@ -233,7 +234,6 @@
 
       const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange } =
         useTableForm(getProps, slots, fetch, getLoading)
-      console.log(getFormProps)
       const getBindValues = computed(() => {
         const dataSource = unref(getDataSourceRef)
         let propsData: Recordable = {
@@ -340,6 +340,7 @@
         wrapRef,
         tableAction,
         redoHeight,
+        fetch,
         getFormProps: getFormProps as any,
         replaceFormSlotKey,
         getFormSlotKeys,

src/components/Table/src/hooks/useDataSource.ts

@@ -297,6 +297,44 @@ export function useDataSource(
         opt?.sortInfo ?? {},
         opt?.filterInfo ?? {},
       )
+      // 如果是高级查询，塞入高级查询参数
+      if (opt && opt.advanced) {
+        const ap = {
+          Key: opt?.advanced?.logicalOperator,
+          Value: {
+            ConditionalList: []
+          }
+        }
+        // 配置高级查询参数固定格式
+        opt.advanced?.conditions.forEach(item => {
+          let obj = {
+            Key: '',
+            Value: null
+          }
+          obj['Key'] = item.logicalOperator
+          if (item?.conditions) {
+            item.conditions.forEach(row => {
+              // 只有当查询条件字段和筛选符都有值的时候才行（不然后台报错）
+              if (row.field && row.value) {
+                obj.Value = {
+                  FieldName: row.field,
+                  FieldValue: row.value,
+                  ConditionalType: row.operator
+                }
+              }
+            })
+          }
+          if (obj.Value != null) {
+            ap.Value.ConditionalList.push(obj)
+          }
+        })
+        if (ap.Value.ConditionalList.length) {
+          params['advancedSearchParams'] = { ConditionalList: [ap] }
+        } else {
+          // ConditionalList没有值还不能传空数组。。。
+          params['advancedSearchParams'] = { ConditionalList: [] }
+        }
+      }
       if (beforeFetch && isFunction(beforeFetch)) {
         params = (await beforeFetch(params)) || params
       }

src/hooks/web/common.ts

@@ -27,7 +27,6 @@ export function closePage(topath) {
   } else {
     // 父级路由
     const parent = router?.options?.history?.state?.back
-    console.log(router)
     // 如果存在父级路由,直接返回父级
     if (parent) {
       router.push(parent)
@@ -119,3 +118,70 @@ function toBlob(fileData, name) {
     document.body.removeChild(a)
   }, 0)
 }
+
+// 返回表格查询的参数
+export function formatParams(params = {}) {
+  const postData = {
+    queryCondition: '',
+    pageCondition: {
+      pageIndex: params?.page,
+      pageSize: params?.pageSize,
+      sortConditions: []
+    }
+  }
+  const conditions = []
+  for (let key in params) {
+    if (key != 'page' && key != 'pageSize' && key != 'order' && key != 'field') {
+      if (key == 'advancedSearchParams') {
+        // 高级查询
+        conditions.push(params[key])
+      } else {
+        // 其他查询
+        if (Array.isArray(params[key])) {
+          if (params[key][0].length && params[key][0].length > 3) {
+            // 判定成日期
+            conditions.push({
+              FieldName: key,
+              FieldValue: params[key][0],
+              ConditionalType: 3
+            })
+            conditions.push({
+              FieldName: key,
+              FieldValue: params[key][1],
+              ConditionalType: 5
+            })
+          } else {
+            // 判定为筛选
+            params[key].forEach(item => {
+              conditions.push({
+                FieldName: key,
+                FieldValue: item,
+                ConditionalType: 1
+              })
+            })
+          }
+        } else {
+          // 其他普通查询
+          if (params[key] || params[key] === 0) {
+            conditions.push({
+              FieldName: key,
+              FieldValue: params[key],
+              ConditionalType: 1
+            })
+          }
+        }
+      }
+    }
+  }
+  // 排序
+  if (params?.field) {
+    postData.pageCondition.sortConditions = [{
+      sortField: params.field,
+      listSortDirection: params.order == "ascend" ? 0 : 1
+    }]
+  } else {
+    postData.pageCondition.sortConditions = []
+  }
+  postData.queryCondition = JSON.stringify(conditions)
+  return postData
+}

src/views/operation/seaexport/index.vue

@@ -82,20 +82,6 @@
         <a-textarea v-model:value="moreNumVal" style="height: 200px" />
       </div>
     </a-modal>
-    <!-- 高级查询 -->
-    <a-modal
-      class="high-search"
-      title="高级查询"
-      :maskClosable="false"
-      width="40%"
-      :visible="AdvancedQueryVisible"
-      @ok="FnAdvancedQuery"
-      @cancel="FnCancelAdvancedQuery"
-    >
-      <div class="CsConditionFilter">
-        <ConditionFilter v-model="AdvancedQueryData" :filter-fields="fields" :disabled="false" />
-      </div>
-    </a-modal>
     <a-modal
       :title="
         TaskShippingOrderCompareData.isExistsDiff ? '下货纸比对（有差异）' : '下货纸比对（正常）'
@@ -179,17 +165,15 @@
 <script lang="ts" setup name="海运出口">
   import TableActionBar from './components/tableActionBar.vue'
   import tableActionBarRight from './components/tableActionBarRight.vue'
-  import ConditionFilter from '/@/components/Condition/index.vue'
   import { onMounted, ref } from 'vue'
   import { BasicTable, useTable, TableAction } from '/@/components/Table'
-  import { PageDataByBooking, UpdateUserQuerySet, GetUserQuerySet } from './api/BookingLedger.js'
+  import { PageDataByBooking, } from './api/BookingLedger.js'
   import { getColumnsByClient } from '/@/views/baseinfo/formcopy/api'
   import { useModal } from '/@/components/Modal'
   import { columns, searchFormSchema, FeeStatus } from './columns'
   import { useGo } from '/@/hooks/web/usePage'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { formatTableData } from '/@/hooks/web/common'
-  import { FilterRules } from '/@/components/Condition/index'
   import { Field } from '/@/components/Render/interface'
   import { useOptionsStore } from '/@/store/modules/options'
   const optionsStore = useOptionsStore()
@@ -197,8 +181,10 @@
   import { useI18n } from '/@/hooks/web/useI18n'
   const { t } = useI18n()
   import initData from './modules/initData.js'
-  import { useRouter, useRoute } from 'vue-router'
+  import { useRouter } from 'vue-router'
   import { useAppStore } from '/@/store/modules/app'
+  // 引入处理入参方法
+  import { formatParams } from '/@/hooks/web/common'
   const appStore = useAppStore()
   const router = useRouter()
   const { notification } = useMessage()
@@ -326,142 +312,21 @@
       })
     },
     beforeFetch: (p) => {
-      console.log(p)
-      var data = getForm().getFieldsValue()
-      const postParam: API.PageRequest = {
-        queryCondition: '',
-        pageCondition: {
-          pageIndex: p.current,
-          pageSize: p.pageSize,
-          sortConditions: []
-        }
-      }
-      if (p.field) {
-        postParam.sortConditions = [
-          {
-            sortField: p.field,
-            listSortDirection: p.order == "ascend" ? 0 : 1
-          }
-        ]
-      } else {
-        postParam.sortConditions = []
-      }
-      let condition: API.ConditionItem[] = []
-      if (!!data.mblno) {
-        condition.push({
-          FieldName: 'mblno',
-          FieldValue: data.mblno,
-          ConditionalType: 1
-        })
-      }
-      if (!!data.hblno) {
-        condition.push({
-          FieldName: 'hblno',
-          FieldValue: data.hblno,
-          ConditionalType: 1
-        })
-      }
-      if (!!data.customerId) {
-        condition.push({
-          FieldName: 'customerId',
-          FieldValue: data.customerId,
-          ConditionalType: 1
-        })
-      }
-      if (!!data.etd) {
-        condition.push({
-          FieldName: 'etd',
-          FieldValue: data.etd[0],
-          ConditionalType: 3
-        })
-        condition.push({
-          FieldName: 'etd',
-          FieldValue: data.etd[1],
-          ConditionalType: 5
-        })
-      }
-      if (!!data.operatorId) {
-        condition.push({
-          FieldName: 'operatorId',
-          FieldValue: data.operatorId,
-          ConditionalType: 1
-        })
-      }
-      if (!!data.saleId) {
-        condition.push({
-          FieldName: 'saleId',
-          FieldValue: data.saleId,
-          ConditionalType: 1
-        })
-      }
-      if (!!data.vesselId) {
-        condition.push({
-          FieldName: 'vesselId',
-          FieldValue: data.vesselId,
-          ConditionalType: 1
-        })
-      }
-      if (!!data.voyno) {
-        condition.push({
-          FieldName: 'voyno',
-          FieldValue: data.voyno,
-          ConditionalType: 1
-        })
-      }
-      if (!!data.dischargePortId) {
-        condition.push({
-          FieldName: 'dischargePortId',
-          FieldValue: data.dischargePortId,
-          ConditionalType: 1
-        })
-      }
-      if (!!data.destinationId) {
-        condition.push({
-          FieldName: 'destinationId',
-          FieldValue: data.destinationId,
-          ConditionalType: 1
-        })
-      }
-      if (!!data.carrierId) {
-        condition.push({
-          FieldName: 'carrierId',
-          FieldValue: data.carrierId,
-          ConditionalType: 1
-        })
-      }
-      if (!!data.laneId) {
-        condition.push({
-          FieldName: 'laneId',
-          FieldValue: data.laneId,
-          ConditionalType: 1
-        })
-      }
-      if (!!data.laneId) {
-        condition.push({
-          FieldName: 'laneId',
-          FieldValue: data.laneId,
-          ConditionalType: 1
-        })
-      }
-      if (isAdvancedQuery.value) {
-        condition.push(ConditionalList.value)
-      }
-      if (moreNumVal.value) {
-        let ManyQueryData: any = { ConditionalList: [] }
-        moreNumVal.value
-          .replace(/\n|\r/g, ',')
-          .split(',')
-          .forEach((item) => {
-            ManyQueryData.ConditionalList.push({
-              Key: 0,
-              Value: { FieldName: 'mblno', FieldValue: item, ConditionalType: 1 },
-            })
-          })
+      return formatParams(p)
+      // if (moreNumVal.value) {
+      //   let ManyQueryData: any = { ConditionalList: [] }
+      //   moreNumVal.value
+      //     .replace(/\n|\r/g, ',')
+      //     .split(',')
+      //     .forEach((item) => {
+      //       ManyQueryData.ConditionalList.push({
+      //         Key: 0,
+      //         Value: { FieldName: 'mblno', FieldValue: item, ConditionalType: 1 },
+      //       })
+      //     })
 
-        condition.push(ManyQueryData)
-      }
-      postParam.queryCondition = JSON.stringify(condition)
-      return postParam
+      //   condition.push(ManyQueryData)
+      // }
     },
     afterFetch: () => {
       isAdvancedQuery.value = false
@@ -471,7 +336,9 @@
     columns,
     formConfig: {
       labelWidth: 120,
+      // 表格表单需要的过滤字段集合
       schemas: searchFormSchema,
+      // 是否显示高级查询(默认否)
       useAdvancedSearch: true
     },
     isTreeTable: false,
@@ -527,8 +394,6 @@
     moreNumVisible.value = false
   }
   const isAdvancedQuery = ref(false)
-  const AdvancedQueryVisible = ref(false)
-  const AdvancedQueryData = ref<FilterRules>({ logicalOperator: 'and', conditions: [], groups: [] })
   const showColumns = ref({})
   const formAllData = ref([])
   const fromTableAllData = ref({})
@@ -542,14 +407,6 @@
   const TaskShippingOrderCompareVisible = ref(false)
   const formatSheetVisible = ref(false)
   
-  //打开高级查询弹窗
-  function FnOpenAdvancedQuery() {
-    AdvancedQueryVisible.value = true
-  }
-  //关闭高级查询弹窗
-  function FnCancelAdvancedQuery() {
-    AdvancedQueryVisible.value = false
-  }
   // 批量编辑
   function batchEditing() {
     const select = getSelectRows()
@@ -567,60 +424,6 @@
   }
   const permissionId = ref<String>('')
   const ConditionalList: Ref<any> = ref()
-  //执行高级查询
-  async function FnAdvancedQuery() {
-    let Api = (data) => {
-      let Obj: any = {}
-      let key: number = 0
-      data.logicalOperator == 'and' ? (key = 0) : (key = 1)
-      if (data.conditions.length) {
-        if (!Obj.ConditionalList) {
-          Obj.ConditionalList = []
-        }
-
-        let Arr: any[] = []
-        data.conditions.forEach((item) => {
-          Arr.push({
-            Key: key,
-            Value: {
-              FieldName: item.field,
-              FieldValue: item.operator,
-              ConditionalType: item.value,
-            },
-          })
-        })
-        Obj.ConditionalList.push(...Arr)
-      }
-      if (data.groups.length) {
-        if (!Obj.ConditionalList) {
-          Obj.ConditionalList = []
-        }
-        let Arr: any[] = []
-        data.groups.forEach((item) => {
-          Arr.push({
-            Key: key,
-            Value: Api(item),
-          })
-        })
-        Obj.ConditionalList.push(...Arr)
-      }
-      return Obj
-    }
-
-    ConditionalList.value = {
-      ConditionalList: Api(AdvancedQueryData.value).ConditionalList,
-    }
-
-    let ApiData = {
-      permissionId: permissionId.value,
-      content: JSON.stringify(AdvancedQueryData.value),
-    }
-    const res: API.DataResult = await UpdateUserQuerySet(ApiData)
-    if (res.succeeded) {
-      isAdvancedQuery.value = true
-      reload()
-    }
-  }
   async function createdInit() {
     showColumns.value = JSON.parse(JSON.stringify(initData.columns))
     formAllData.value = JSON.parse(JSON.stringify(initData.condAllData))
@@ -661,17 +464,6 @@
 
       fields.value = data
     }
-    FnGetUserQuerySet()
-    // getConfigUser(true)
-  }
-  async function FnGetUserQuerySet() {
-    const res: API.DataResult = await GetUserQuerySet({
-      permissionId: permissionId.value,
-    })
-    if (res.succeeded) {
-      console.log(res)
-      AdvancedQueryData.value = JSON.parse(res.data.content)
-    }
   }
   function handledbclick(record) {
     editColumns(record)