|
|
|
@ -12,32 +12,92 @@
|
|
|
|
|
<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-if="Ismain" show-search :filter-option="filterOption" v-model:value="row.field"
|
|
|
|
|
style="width: 150px; margin-right: 6px" placeholder="查询字段" @change="changeHandle($event, row)">
|
|
|
|
|
<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, row)" :filter-option="filterOption1" v-model:value="row.field"
|
|
|
|
|
style="width: 150px; margin-right: 6px" placeholder="查询字段" @change="changeHandle1($event, row)">
|
|
|
|
|
<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="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 v-for="(row, key) in item.conditions" :key="`c-${key}`" class="box-item">
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<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-if="Ismain" show-search :filter-option="filterOption" v-model:value="row.field"
|
|
|
|
|
style="width: 150px; margin-right: 6px" placeholder="查询字段" @change="changeHandle($event, row)">
|
|
|
|
|
<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, row)" :filter-option="filterOption1"
|
|
|
|
|
v-model:value="row.field" style="width: 150px; margin-right: 6px" placeholder="查询字段"
|
|
|
|
|
@change="changeHandle1($event, row)">
|
|
|
|
|
<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="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 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 class="item-btns">
|
|
|
|
|
<a-button type="link" @click="addRow(index)">
|
|
|
|
@ -101,20 +161,20 @@ const props = defineProps({
|
|
|
|
|
default: true,
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
watch(
|
|
|
|
|
() => props.schemas,
|
|
|
|
|
() => {
|
|
|
|
|
init(null)
|
|
|
|
|
},
|
|
|
|
|
{ deep: true },
|
|
|
|
|
)
|
|
|
|
|
// watch(
|
|
|
|
|
// () => props.schemas,
|
|
|
|
|
// () => {
|
|
|
|
|
// init(null)
|
|
|
|
|
// },
|
|
|
|
|
// { deep: true },
|
|
|
|
|
// )
|
|
|
|
|
const emit = defineEmits(['toSearch'])
|
|
|
|
|
// 弹窗开关
|
|
|
|
|
const modalFlag = ref(false)
|
|
|
|
|
const queryData = reactive({
|
|
|
|
|
logicalOperator: '0',
|
|
|
|
|
groups: [],
|
|
|
|
|
})
|
|
|
|
|
}) as any
|
|
|
|
|
// 默认模版数据
|
|
|
|
|
const queryOldData = reactive({
|
|
|
|
|
logicalOperator: '0',
|
|
|
|
@ -127,24 +187,28 @@ const queryOldData = reactive({
|
|
|
|
|
operator: null,
|
|
|
|
|
value: null,
|
|
|
|
|
component: '',
|
|
|
|
|
groups: []
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
field: null,
|
|
|
|
|
operator: null,
|
|
|
|
|
value: null,
|
|
|
|
|
component: '',
|
|
|
|
|
groups: []
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
field: null,
|
|
|
|
|
operator: null,
|
|
|
|
|
value: null,
|
|
|
|
|
component: '',
|
|
|
|
|
groups: []
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
field: null,
|
|
|
|
|
operator: null,
|
|
|
|
|
value: null,
|
|
|
|
|
component: '',
|
|
|
|
|
groups: []
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
@ -156,24 +220,28 @@ const queryOldData = reactive({
|
|
|
|
|
operator: null,
|
|
|
|
|
value: null,
|
|
|
|
|
component: '',
|
|
|
|
|
groups: []
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
field: null,
|
|
|
|
|
operator: null,
|
|
|
|
|
value: null,
|
|
|
|
|
component: '',
|
|
|
|
|
groups: []
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
field: null,
|
|
|
|
|
operator: null,
|
|
|
|
|
value: null,
|
|
|
|
|
component: '',
|
|
|
|
|
groups: []
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
field: null,
|
|
|
|
|
operator: null,
|
|
|
|
|
value: null,
|
|
|
|
|
component: '',
|
|
|
|
|
groups: []
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
@ -213,8 +281,8 @@ const queryOldData1 = reactive({
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
})
|
|
|
|
|
function handleBlur(val,row){
|
|
|
|
|
if(result.value && !changeFlag.value){
|
|
|
|
|
function handleBlur(val, row) {
|
|
|
|
|
if (result.value && !changeFlag.value) {
|
|
|
|
|
row.field = result.value
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -272,8 +340,9 @@ const loading = ref(false)
|
|
|
|
|
const init = (IsApiData) => {
|
|
|
|
|
if (props.IsApi) {
|
|
|
|
|
const content = IsApiData ? IsApiData : {}
|
|
|
|
|
console.log(content,131231)
|
|
|
|
|
let source = {} as any
|
|
|
|
|
if(props.Ismain){
|
|
|
|
|
if (props.Ismain) {
|
|
|
|
|
source = JSON.parse(JSON.stringify(queryOldData))
|
|
|
|
|
} else {
|
|
|
|
|
source = JSON.parse(JSON.stringify(queryOldData1))
|
|
|
|
@ -287,7 +356,7 @@ const init = (IsApiData) => {
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
let source = {} as any
|
|
|
|
|
if(props.Ismain){
|
|
|
|
|
if (props.Ismain) {
|
|
|
|
|
source = JSON.parse(JSON.stringify(queryOldData))
|
|
|
|
|
} else {
|
|
|
|
|
source = JSON.parse(JSON.stringify(queryOldData1))
|
|
|
|
@ -303,6 +372,7 @@ const init = (IsApiData) => {
|
|
|
|
|
|
|
|
|
|
const changeHandle = (e, row) => {
|
|
|
|
|
row.value = null
|
|
|
|
|
console.log(props.schemas)
|
|
|
|
|
props.schemas.forEach((item) => {
|
|
|
|
|
if (item.field == e) {
|
|
|
|
|
row.component = item.component
|
|
|
|
@ -311,7 +381,7 @@ const changeHandle = (e, row) => {
|
|
|
|
|
}
|
|
|
|
|
const changeFlag = ref(true)
|
|
|
|
|
const changeHandle1 = (e, row) => {
|
|
|
|
|
if(e){
|
|
|
|
|
if (e) {
|
|
|
|
|
changeFlag.value = true
|
|
|
|
|
}
|
|
|
|
|
row.value = null
|
|
|
|
@ -325,6 +395,9 @@ const changeHandle1 = (e, row) => {
|
|
|
|
|
const deleteItem = (index, key) => {
|
|
|
|
|
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) => {
|
|
|
|
|
queryData.groups[index].conditions.push({
|
|
|
|
@ -332,6 +405,30 @@ const addRow = (index) => {
|
|
|
|
|
operator: null,
|
|
|
|
|
value: '',
|
|
|
|
|
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 {
|
|
|
|
|
width: 0.8px;
|
|
|
|
|
height: 35px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: #cccccc;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: absolute;
|
|
|
|
@ -444,4 +541,16 @@ defineExpose({
|
|
|
|
|
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>
|
|
|
|
|