feature-JimuReport-1106-yjl
sunzehua 1 month ago
parent 8a447a6ae2
commit d5acb72a84

@ -36,7 +36,7 @@ export const searchFormSchema: FormSchema[] = [
colProps: { span: 5 }, colProps: { span: 5 },
}, },
{ {
field: 'carrierCode', field: 'carrierId',
label: '船公司', label: '船公司',
component: 'ApiSelect', component: 'ApiSelect',
required: false, required: false,
@ -47,7 +47,7 @@ export const searchFormSchema: FormSchema[] = [
api: GetCarrierSelectList, api: GetCarrierSelectList,
labelField: 'pinYinCode', labelField: 'pinYinCode',
showName: 'cnName', showName: 'cnName',
valueField: 'cnName', valueField: 'id',
resultField: 'data', resultField: 'data',
immediate: false, immediate: false,
} }

@ -1,5 +1,5 @@
<template> <template>
<BasicModal v-bind="$attrs" :use-wrapper="true" :title="getTitle" :width="900" @register="registerModal" <BasicModal v-bind="$attrs" :use-wrapper="true" :title="getTitle" :width="1000" @register="registerModal"
@ok="handleSave"> @ok="handleSave">
<!-- 费用模版表单 --> <!-- 费用模版表单 -->
<BasicForm @register="registerForm" @linkageForm="ChangeColumnView" /> <BasicForm @register="registerForm" @linkageForm="ChangeColumnView" />
@ -325,6 +325,7 @@ const [registerModal, { setModalProps, closeModal, updateFormField }] = useModal
resetFields() resetFields()
setModalProps({ confirmLoading: false, loading: true }) setModalProps({ confirmLoading: false, loading: true })
isUpdate.value = !!data?.isUpdate isUpdate.value = !!data?.isUpdate
console.log(data)
if (unref(isUpdate)) { if (unref(isUpdate)) {
setModalProps({ confirmLoading: true }) setModalProps({ confirmLoading: true })
rowId.value = data.record.id rowId.value = data.record.id
@ -336,10 +337,11 @@ const [registerModal, { setModalProps, closeModal, updateFormField }] = useModal
...res.data, ...res.data,
}) })
columnViewType.value = true columnViewType.value = true
setTimeout(() => { console.log(JSON.parse(res.data.dataRules))
RefcolumnView.value.init(JSON.parse(res.data.dataRules)) RefcolumnView.value.init(JSON.parse(res.data.dataRules))
RefcolumnView1.value.init(JSON.parse(res.data.additionDataRules)) if(res.data.additionDataRules){
}, 200); RefcolumnView1.value.init(JSON.parse(res.data.additionDataRules))
}
detailId.value = res.data.id detailId.value = res.data.id
} }

@ -12,32 +12,92 @@
<a-switch v-model:checked="item.logicalOperator" checked-value="1" class="mt2" un-checked-value="0" <a-switch v-model:checked="item.logicalOperator" checked-value="1" class="mt2" un-checked-value="0"
checked-children="或" un-checked-children="且" /> checked-children="或" un-checked-children="且" />
<div style="flex: 1; margin-left: 30px"> <div style="flex: 1; margin-left: 30px">
<div v-for="(row, key) in item.conditions" :key="`c-${key}`" <div v-for="(row, key) in item.conditions" :key="`c-${key}`" class="box-item">
style="margin-bottom: 6px; position: relative"> <div>
<div v-if="key != item.conditions.length - 1" class="r-line"></div> <div>
<div :style="{ left: key == 0 ? '-29px' : '-16px' }" class="v-line"></div> <div v-if="key != item.conditions.length - 1" class="r-line"></div>
<a-select v-if="Ismain" show-search :filter-option="filterOption" v-model:value="row.field" <div :style="{ left: key == 0 ? '-29px' : '-16px' }" class="v-line"></div>
style="width: 150px; margin-right: 6px" placeholder="查询字段" @change="changeHandle($event, row)"> <a-select v-if="Ismain" show-search :filter-option="filterOption" v-model:value="row.field"
<a-select-option v-for="item in schemas" :label="item.label" :key="item.field" :value="item.field"> style="width: 150px; margin-right: 6px" placeholder="查询字段" @change="changeHandle($event, row)">
{{ item.label }} <a-select-option v-for="item in schemas" :label="item.label" :key="item.field"
</a-select-option> :value="item.field">
</a-select> {{ item.label }}
<a-select v-if="!Ismain" show-search @blur="handleBlur($event, row)" :filter-option="filterOption1" v-model:value="row.field" </a-select-option>
style="width: 150px; margin-right: 6px" placeholder="查询字段" @change="changeHandle1($event, row)"> </a-select>
<a-select-option v-for="item in schemas" :label="item.label" :key="item.field" :value="item.field"> <a-select v-if="!Ismain" show-search @blur="handleBlur($event, row)" :filter-option="filterOption1"
{{ item.label }} v-model:value="row.field" style="width: 150px; margin-right: 6px" placeholder="查询字段"
</a-select-option> @change="changeHandle1($event, row)">
</a-select> <a-select-option v-for="item in schemas" :label="item.label" :key="item.field"
<a-select v-model:value="row.operator" style="width: 90px; margin-right: 6px" placeholder="筛选符"> :value="item.field">
<a-select-option v-for="item in operatorOptions" :key="item.value" :value="item.value"> {{ item.label }}
{{ item.label }} </a-select-option>
</a-select-option> </a-select>
</a-select> <a-select v-model:value="row.operator" style="width: 90px; margin-right: 6px" placeholder="筛选符">
<a-date-picker v-if="row.component == 'RangePicker'" placeholder="请选择" style="width: 150px" <a-select-option v-for="item in operatorOptions" :key="item.value" :value="item.value">
v-model:value="row.value" /> {{ item.label }}
<a-input v-else v-model:value="row.value" placeholder="请输入" style="width: 150px"></a-input> </a-select-option>
<span v-if="item.conditions.length != 1" @click="deleteItem(index, key)" </a-select>
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 v-for="(detailItem, detailIndex) in row.groups" class="ds-advanced-search-item flex"
:key="`f-${detailIndex}`">
<data :style="{ left: detailIndex == 0 ? '-30px' : '-15px' }" class="v-line"
style="top: 21px"></data>
<data v-if="detailIndex != row.groups.length - 1" class="r-line r-height"
style="left: -15px; top: 21px"></data>
<a-switch v-model:checked="detailItem.logicalOperator" checked-value="1" class="mt2"
un-checked-value="0" checked-children="或" un-checked-children="且" />
<div>
<div v-for="(rowDetail, keyDetail) in detailItem.conditions" :key="`c-${keyDetail}`"
class="box-item-detail">
<div v-if="key != detailItem.conditions.length - 1" class="r-line"></div>
<div :style="{ left: key == 0 ? '-29px' : '-16px' }" class="v-line"></div>
<a-select v-if="Ismain" show-search :filter-option="filterOption"
v-model:value="rowDetail.field" style="width: 150px; margin-right: 6px" placeholder="查询字段"
@change="changeHandle($event, rowDetail)">
<a-select-option v-for="item in schemas" :label="item.label" :key="item.field"
:value="item.field">
{{ item.label }}
</a-select-option>
</a-select>
<a-select v-if="!Ismain" show-search @blur="handleBlur($event, rowDetail)"
:filter-option="filterOption1" v-model:value="rowDetail.field"
style="width: 150px; margin-right: 6px" placeholder="查询字段"
@change="changeHandle1($event, rowDetail)">
<a-select-option v-for="item in schemas" :label="item.label" :key="item.field"
:value="item.field">
{{ item.label }}
</a-select-option>
</a-select>
<a-select v-model:value="rowDetail.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="rowDetail.component == 'RangePicker'" placeholder="请选择"
style="width: 150px" v-model:value="rowDetail.value" />
<a-input v-else v-model:value="rowDetail.value" placeholder="请输入"
style="width: 150px"></a-input>
<span v-if="detailItem.conditions.length != 1" @click="deleteItemDetail(index, key, detailIndex,keyDetail)"
class="iconfont icon-shanchu21"></span>
</div>
</div>
<a-button type="link" @click="addDetailDetail(index, key, detailIndex)">
<span class="iconfont icon-new_document"></span> 添加条件
</a-button>
</div>
</div>
<a-button type="link" @click="addDetailGroup(index, key)">
<span class="iconfont icon-new_document"></span> 添加条件组
</a-button>
</div> </div>
<div class="item-btns"> <div class="item-btns">
<a-button type="link" @click="addRow(index)"> <a-button type="link" @click="addRow(index)">
@ -101,20 +161,20 @@ const props = defineProps({
default: true, default: true,
}, },
}) })
watch( // watch(
() => props.schemas, // () => props.schemas,
() => { // () => {
init(null) // init(null)
}, // },
{ deep: true }, // { deep: true },
) // )
const emit = defineEmits(['toSearch']) const emit = defineEmits(['toSearch'])
// //
const modalFlag = ref(false) const modalFlag = ref(false)
const queryData = reactive({ const queryData = reactive({
logicalOperator: '0', logicalOperator: '0',
groups: [], groups: [],
}) }) as any
// //
const queryOldData = reactive({ const queryOldData = reactive({
logicalOperator: '0', logicalOperator: '0',
@ -127,24 +187,28 @@ const queryOldData = reactive({
operator: null, operator: null,
value: null, value: null,
component: '', component: '',
groups: []
}, },
{ {
field: null, field: null,
operator: null, operator: null,
value: null, value: null,
component: '', component: '',
groups: []
}, },
{ {
field: null, field: null,
operator: null, operator: null,
value: null, value: null,
component: '', component: '',
groups: []
}, },
{ {
field: null, field: null,
operator: null, operator: null,
value: null, value: null,
component: '', component: '',
groups: []
}, },
], ],
}, },
@ -156,24 +220,28 @@ const queryOldData = reactive({
operator: null, operator: null,
value: null, value: null,
component: '', component: '',
groups: []
}, },
{ {
field: null, field: null,
operator: null, operator: null,
value: null, value: null,
component: '', component: '',
groups: []
}, },
{ {
field: null, field: null,
operator: null, operator: null,
value: null, value: null,
component: '', component: '',
groups: []
}, },
{ {
field: null, field: null,
operator: null, operator: null,
value: null, value: null,
component: '', component: '',
groups: []
}, },
], ],
}, },
@ -213,8 +281,8 @@ const queryOldData1 = reactive({
}, },
], ],
}) })
function handleBlur(val,row){ function handleBlur(val, row) {
if(result.value && !changeFlag.value){ if (result.value && !changeFlag.value) {
row.field = result.value row.field = result.value
} }
} }
@ -272,8 +340,9 @@ const loading = ref(false)
const init = (IsApiData) => { const init = (IsApiData) => {
if (props.IsApi) { if (props.IsApi) {
const content = IsApiData ? IsApiData : {} const content = IsApiData ? IsApiData : {}
console.log(content,131231)
let source = {} as any let source = {} as any
if(props.Ismain){ if (props.Ismain) {
source = JSON.parse(JSON.stringify(queryOldData)) source = JSON.parse(JSON.stringify(queryOldData))
} else { } else {
source = JSON.parse(JSON.stringify(queryOldData1)) source = JSON.parse(JSON.stringify(queryOldData1))
@ -287,7 +356,7 @@ const init = (IsApiData) => {
} }
} else { } else {
let source = {} as any let source = {} as any
if(props.Ismain){ if (props.Ismain) {
source = JSON.parse(JSON.stringify(queryOldData)) source = JSON.parse(JSON.stringify(queryOldData))
} else { } else {
source = JSON.parse(JSON.stringify(queryOldData1)) source = JSON.parse(JSON.stringify(queryOldData1))
@ -303,6 +372,7 @@ const init = (IsApiData) => {
const changeHandle = (e, row) => { const changeHandle = (e, row) => {
row.value = null row.value = null
console.log(props.schemas)
props.schemas.forEach((item) => { props.schemas.forEach((item) => {
if (item.field == e) { if (item.field == e) {
row.component = item.component row.component = item.component
@ -311,7 +381,7 @@ const changeHandle = (e, row) => {
} }
const changeFlag = ref(true) const changeFlag = ref(true)
const changeHandle1 = (e, row) => { const changeHandle1 = (e, row) => {
if(e){ if (e) {
changeFlag.value = true changeFlag.value = true
} }
row.value = null row.value = null
@ -325,6 +395,9 @@ const changeHandle1 = (e, row) => {
const deleteItem = (index, key) => { const deleteItem = (index, key) => {
queryData.groups[index].conditions.splice(key, 1) queryData.groups[index].conditions.splice(key, 1)
} }
function deleteItemDetail(index,index1,index2,index3){
queryData.groups[index].conditions[index1].groups[index2].conditions.splice(index3, 1)
}
// //
const addRow = (index) => { const addRow = (index) => {
queryData.groups[index].conditions.push({ queryData.groups[index].conditions.push({
@ -332,6 +405,30 @@ const addRow = (index) => {
operator: null, operator: null,
value: '', value: '',
component: '', component: '',
groups: []
})
}
function addDetailGroup(index, index1) {
console.log(queryData)
queryData.groups[index].conditions[index1].groups.push({
logicalOperator: 'and',
conditions: [
{
field: null,
operator: null,
value: null,
component: '',
},
],
})
}
function addDetailDetail(index, index1, index2) {
console.log(queryData, index, index1)
queryData.groups[index].conditions[index1].groups[index2].conditions.push({
field: null,
operator: null,
value: '',
component: '',
}) })
} }
// //
@ -418,7 +515,7 @@ defineExpose({
.r-line { .r-line {
width: 0.8px; width: 0.8px;
height: 35px; height: 100%;
background: #cccccc; background: #cccccc;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
@ -444,4 +541,16 @@ defineExpose({
top: 13px; top: 13px;
} }
// }</style> .box-item {
margin-bottom: 10px;
position: relative;
display: flex;
align-items: center;
}
.box-item-detail {
margin-bottom: 6px;
position: relative;
margin-left: 35px
}
</style>

Loading…
Cancel
Save