From d5acb72a8471b5b345d274d72ec5f85786a140cf Mon Sep 17 00:00:00 2001
From: sunzehua <sunzehua@jchshipping.net>
Date: Tue, 22 Oct 2024 13:30:48 +0800
Subject: [PATCH] =?UTF-8?q?=E8=88=B1=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bookingcabin/ContractnoList/columns.tsx   |   4 +-
 .../TenantAuditStepModal.vue                  |  10 +-
 .../CodeDataRuleTemplate/columnView.vue       | 191 ++++++++++++++----
 3 files changed, 158 insertions(+), 47 deletions(-)

diff --git a/src/views/bookingcabin/ContractnoList/columns.tsx b/src/views/bookingcabin/ContractnoList/columns.tsx
index 78ada26d..d26de5f3 100644
--- a/src/views/bookingcabin/ContractnoList/columns.tsx
+++ b/src/views/bookingcabin/ContractnoList/columns.tsx
@@ -36,7 +36,7 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 5 },
   },
   {
-    field: 'carrierCode',
+    field: 'carrierId',
     label: '船公司',
     component: 'ApiSelect',
     required: false,
@@ -47,7 +47,7 @@ export const searchFormSchema: FormSchema[] = [
         api: GetCarrierSelectList,
         labelField: 'pinYinCode',
         showName: 'cnName',
-        valueField: 'cnName',
+        valueField: 'id',
         resultField: 'data',
         immediate: false,
       }
diff --git a/src/views/system/CodeDataRuleTemplate/TenantAuditStepModal.vue b/src/views/system/CodeDataRuleTemplate/TenantAuditStepModal.vue
index 423a6422..87a116ea 100644
--- a/src/views/system/CodeDataRuleTemplate/TenantAuditStepModal.vue
+++ b/src/views/system/CodeDataRuleTemplate/TenantAuditStepModal.vue
@@ -1,5 +1,5 @@
 <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">
     <!-- 费用模版表单 -->
     <BasicForm @register="registerForm" @linkageForm="ChangeColumnView" />
@@ -325,6 +325,7 @@ const [registerModal, { setModalProps, closeModal, updateFormField }] = useModal
     resetFields()
     setModalProps({ confirmLoading: false, loading: true })
     isUpdate.value = !!data?.isUpdate
+    console.log(data)
     if (unref(isUpdate)) {
       setModalProps({ confirmLoading: true })
       rowId.value = data.record.id
@@ -336,10 +337,11 @@ const [registerModal, { setModalProps, closeModal, updateFormField }] = useModal
           ...res.data,
         })
         columnViewType.value = true
-        setTimeout(() => {
+          console.log(JSON.parse(res.data.dataRules))
           RefcolumnView.value.init(JSON.parse(res.data.dataRules))
-          RefcolumnView1.value.init(JSON.parse(res.data.additionDataRules))
-        }, 200);
+          if(res.data.additionDataRules){
+            RefcolumnView1.value.init(JSON.parse(res.data.additionDataRules))
+          }
 
         detailId.value = res.data.id
       }
diff --git a/src/views/system/CodeDataRuleTemplate/columnView.vue b/src/views/system/CodeDataRuleTemplate/columnView.vue
index 8551f0e8..44833245 100644
--- a/src/views/system/CodeDataRuleTemplate/columnView.vue
+++ b/src/views/system/CodeDataRuleTemplate/columnView.vue
@@ -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>