查询优化

szh-new
lijingjia 4 months ago
parent eda1fd88a3
commit bc56062ceb

@ -6,75 +6,85 @@
<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"
>
<div class="flex ant-form-small">
<a-switch
v-model:checked="queryData.logicalOperator"
checked-value="1"
un-checked-value="0"
checked-children="或"
un-checked-children="且"
/>
<div style="flex: 1">
<div v-for="(item, index) in queryData.conditions" class="ds-advanced-search-item flex" :key="`f-${index}`">
<a-switch
v-model:checked="item.logicalOperator"
checked-value="1"
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;">
<a-select
v-model:value="row.field"
style="width: 130px; margin-right: 6px;"
placeholder="查询字段"
@change="changeHandle($event, row)"
>
<a-select-option v-for="item in schemas" :key="item.field" :value="item.field">
{{ item.label }}
</a-select-option>
</a-select>
<a-select
v-model:value="row.operator"
style="width: 90px; margin-right: 6px;"
placeholder="筛选符"
>
<a-select-option v-for="item in operatorOptions" :key="item.value" :value="item.value">
{{ 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>
</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)">
<span class="iconfont icon-shanchuzu"></span>
删除整组
</a-button>
<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="或"
un-checked-children="且"
/>
<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; 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: 150px; margin-right: 6px;"
placeholder="查询字段"
@change="changeHandle($event, row)"
>
<a-select-option v-for="item in schemas" :key="item.field" :value="item.field">
{{ item.label }}
</a-select-option>
</a-select>
<a-select
v-model:value="row.operator"
style="width: 90px; margin-right: 6px;"
placeholder="筛选符"
>
<a-select-option v-for="item in operatorOptions" :key="item.value" :value="item.value">
{{ item.label }}
</a-select-option>
</a-select>
<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 v-if="queryData.conditions.length != 1" type="link" @click="deleteGroup(index)">
<span class="iconfont icon-shanchuzu"></span>
删除整组
</a-button>
</div>
</div>
</div>
</div>
</div>
<a-button class="add-group" type="link" @click="addGroup">
<span class="iconfont icon-calendar"></span>
添加条件组
</a-button>
</div>
</a-spin>
<a-button class="add-group" type="link" @click="addGroup">
<span class="iconfont icon-calendar"></span>
添加条件组
</a-button>
<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,31 +304,72 @@
</script>
<style lang="less">
.ds-advanced-search-item {
margin-left: 15px;
padding: 10px 15px;
border-left: 1px solid #257AFA;
background: #F5F9FC;
margin-bottom: 20px;
border-radius: 2px;
.icon-shanchu21 {
margin-left: 6px;
color: #257AFA;
cursor: pointer;
.ds-advanced-search-modal {
.ant-form-small {
margin-top: 15px;
min-height: 400px;
}
.item-btns {
text-align: right;
color: #257AFA;
.iconfont {
.ds-advanced-search-item {
position: relative;
margin-left: 30px;
padding: 10px 15px;
border-left: 1px solid #257AFA;
background: #F5F9FC;
margin-bottom: 20px;
border-radius: 2px;
.icon-shanchu21 {
margin-left: 6px;
color: #257AFA;
cursor: pointer;
}
.item-btns {
text-align: right;
color: #257AFA;
.iconfont {
cursor: pointer;
}
padding-right: 18px;
}
}
.ds-advanced-search-item:last-child {
margin-bottom: 0;
}
.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;
}
}
.ds-advanced-search-item:last-child {
margin-bottom: 0;
}
.add-group {
position: absolute;
bottom: 16px;
}
</style>

@ -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(

@ -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,

@ -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,

@ -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
}

@ -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
}

@ -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)

Loading…
Cancel
Save