From 96cdd73447ae5151ba02ae404e7822a28559c5bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=90=8C=E6=B5=B7?=
 <14166000+zhangtonghai@user.noreply.gitee.com>
Date: Wed, 3 Jul 2024 16:36:05 +0800
Subject: [PATCH] 07/03

---
 .../autoduizang/TenantAuditStepModal.vue      | 385 +++++++++++-------
 src/views/operation/autoduizang/columns.tsx   |  92 ++---
 src/views/operation/autoduizang/index.vue     |  26 +-
 3 files changed, 287 insertions(+), 216 deletions(-)

diff --git a/src/views/operation/autoduizang/TenantAuditStepModal.vue b/src/views/operation/autoduizang/TenantAuditStepModal.vue
index d5332503..3258b033 100644
--- a/src/views/operation/autoduizang/TenantAuditStepModal.vue
+++ b/src/views/operation/autoduizang/TenantAuditStepModal.vue
@@ -6,18 +6,28 @@
     width="80%"
     @register="registerModal"
     @ok="handleSave"
+    @cancel="FnClose"
   >
-    <BasicForm @register="registerForm" />
-    <div class="buttonGroup">
-      <!-- @click="addCtn" -->
-      <div class="nav"> <i class="iconfont icon-icon_tianjia"></i><span>新建</span> </div>
-      <!-- @click="DelCtn" -->
-      <div class="nav"> <i class="iconfont icon-shanchu1"></i><span>删除</span> </div>
+    <div class="FormBox">
+      <BasicForm @register="registerForm" />
     </div>
-    <div class="table-box">
-      <!-- <hot-table ref="hotTb" :data="list" :settings="settings"></hot-table> -->
+    <div class="TableBox">
+      <div class="BoxUnit">
+        <div class="model-botton-box">
+          <a-button class="btn" type="primary" @click="AddLlist">新增费用字段</a-button>
+          <a-button class="btn btn-delete" @click="DelLlist">删除费用字段</a-button>
+        </div>
+        <div style="position: relative">
+          <input
+            class="ds-tb-check"
+            type="checkbox"
+            v-model="allCheckL"
+            :indeterminate="someCheckL"
+          />
+          <hot-table :data="Llist" :settings="Lsettings"> </hot-table>
+        </div>
+      </div>
     </div>
-    <!--右下角按钮-->
     <template #footer>
       <a-button
         pre-icon="ant-design:close-outlined"
@@ -25,7 +35,7 @@
         :loading="loading"
         ghost
         style="margin-right: 0.8rem"
-        @click="closeModal"
+        @click="FnClose"
         >取消</a-button
       >
       <a-button
@@ -47,51 +57,153 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { ref, computed, unref } from 'vue'
-  import { BasicModal, useModalInner } from '/@/components/Modal'
+  import { ref, computed, unref, watchEffect, watch } from 'vue'
+  import { ApiEdit, ApiInfo } from './api'
   import { BasicForm, useForm } from '/@/components/Form/index'
   import { formSchema } from './columns'
-  import { ApiEdit, ApiInfo, ApiList } from './api'
   import { useMessage } from '/@/hooks/web/useMessage'
+  const { notification, createMessage } = useMessage()
   import { HotTable } from '@handsontable/vue3'
+  import { BasicModal, useModalInner } from '/@/components/Modal'
   import { registerAllModules } from 'handsontable/registry'
+  import 'handsontable/dist/handsontable.full.min.css'
   registerAllModules()
-  // 声明Emits
-  const emit = defineEmits(['success', 'register'])
+  // ------------------------------------弹窗------------------------------------------
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增对账模板' : '编辑对账模板'))
+  const emit = defineEmits(['success'])
   const isUpdate = ref(true)
   const loading = ref(false)
   const rowId = ref('')
-  const { createMessage } = useMessage()
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
     resetFields()
+    allCheckL.value = false
+    someCheckL.value = false
     setModalProps({ confirmLoading: false, loading: true })
     isUpdate.value = !!data?.isUpdate
     if (unref(isUpdate)) {
-      // setModalProps({ confirmLoading: true });
+      setModalProps({ confirmLoading: true })
       rowId.value = data.record.id
       const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
       if (res.succeeded) {
         setFieldsValue({
           ...res.data,
         })
-        // console.log('返回数据Form', getFieldsValue());
-        // setFieldsValue({ trainId: unref(res.data.trainId) });
+        Llist.value.push(...res.data.feeList)
       }
-      // setModalProps({ confirmLoading: false });
+      setModalProps({ confirmLoading: false })
     } else {
       setFieldsValue({ permissionIdentity: unref(2) })
     }
     setModalProps({ loading: false })
   })
+  async function init() {
+    const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
+    if (res.succeeded) {
+      setFieldsValue({
+        ...res.data,
+      })
+      Llist.value.splice(0)
+      Llist.value.push(...res.data.feeList)
+    }
+  }
+  // 保存
+  async function handleSave(exit) {
+    try {
+      const values = await validate()
+      values.feeList = Llist.value
+      setModalProps({ confirmLoading: true, loading: true })
+      const res: API.DataResult = await ApiEdit(values)
+      console.log(res)
+      if (res.succeeded) {
+        createMessage.success(res.message)
+        emit('success')
+        //刷新页面
+        if (!exit) {
+          if (unref(isUpdate)) {
+            await refresh()
+          } else {
+            rowId.value = res.data
+            isUpdate.value = true
+            await refresh()
+          }
+        }
+      } else {
+        createMessage.error(res.message)
+      }
+
+      exit && FnClose()
+    } finally {
+      // loading.value = false;
+      setModalProps({ confirmLoading: false, loading: false })
+    }
+  }
+  function FnClose() {
+    Llist.value.splice(0)
+    closeModal()
+  }
+  async function refresh() {
+    const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
+    if (res.succeeded) {
+      await setFieldsValue({
+        ...res.data,
+      })
+    }
+  }
+  // ------------------------------------头部表单------------------------------------------
   const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
     labelWidth: 100,
     schemas: formSchema,
     showActionButtonGroup: false,
   })
-  const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'))
-  const list = ref<any>([])
-  // 定义表格所有列
-  const columns = [
+  // ------------------------------------左侧表------------------------------------------
+  // 全部勾选
+  const allCheckL = ref(false)
+  // 部分勾选
+  const someCheckL = ref(false)
+  const Llist = ref<any>([])
+  watchEffect(() => {
+    // 全选
+    if (allCheckL.value) {
+      Llist.value.forEach((item) => {
+        item.selected = true
+      })
+    } else {
+      // 取消全选
+      Llist.value.forEach((item) => {
+        item.selected = false
+      })
+    }
+  })
+  watch(
+    Llist.value,
+    (val) => {
+      let a = 0
+      let b = 0
+      val.forEach((item) => {
+        if (item.selected) {
+          a += 1
+        } else {
+          b += 1
+        }
+      })
+      if (a == 0) {
+        allCheckL.value = false
+      }
+      if (b == 0) {
+        allCheckL.value = true
+      }
+      if (a != 0 && b != 0) {
+        someCheckL.value = true
+      } else {
+        someCheckL.value = false
+      }
+    },
+    {
+      deep: true,
+    },
+  )
+
+  const LColumns = [
     {
       data: 'selected',
       type: 'checkbox',
@@ -101,106 +213,94 @@
       readOnly: false,
     },
     {
-      title: 'ID',
-      width: 80,
+      title: '主键Id',
+      width: 120,
       data: 'id',
     },
     {
-      title: '主提单号',
-      width: 80,
-      data: 'bsno',
-    },
-    {
-      title: '委托单位',
-      width: 80,
-      data: 'ctnCode0',
+      title: '模板Id',
+      width: 120,
+      data: 'templateId',
     },
     {
-      title: '操作',
-      width: 80,
-      data: 'ctnCode1',
-    },
-    {
-      title: 'ETD',
-      width: 80,
-      data: 'ctnCode2',
+      title: '主提单号',
+      width: 120,
+      data: 'feeName',
     },
     {
-      title: 'RMB对账金额',
-      width: 80,
-      data: 'ctnCode3',
+      title: '本地RMB金额',
+      width: 120,
+      data: 'currency',
     },
     {
-      title: 'USD对账金额',
-      width: 80,
-      data: 'ctnCode4',
+      title: '本地USD金额',
+      width: 120,
+      data: 'currency',
     },
     {
-      title: 'RMB本地金额',
-      width: 80,
-      data: 'ctnCode5',
+      title: '对账RMB金额',
+      width: 120,
+      data: 'currency',
     },
     {
-      title: 'USD本地金额',
-      width: 80,
-      data: 'ctnCode6',
+      title: '对账USD金额',
+      width: 120,
+      data: 'currency',
     },
     {
-      title: 'RMB差额',
-      width: 80,
-      data: 'ctnCode7',
+      title: 'RMB差异',
+      width: 120,
+      data: 'currency',
     },
     {
-      title: 'USD差额',
-      width: 80,
-      data: 'ctnCode8',
+      title: '委托单位',
+      width: 120,
+      data: 'currency',
     },
     {
-      title: '未审核金额',
-      width: 80,
-      data: 'ctnCode9',
+      title: '结算USD',
+      width: 120,
+      data: 'currency',
     },
     {
-      title: '对账完成',
-      width: 80,
-      data: 'ctnCode10',
+      title: '船名',
+      width: 120,
+      data: 'currency',
     },
     {
-      title: '备注',
-      width: 80,
-      data: 'ctnCode11',
+      title: '航次',
+      width: 120,
+      data: 'currency',
     },
     {
-      title: '对账结果',
-      width: 80,
-      data: 'ctnCode12',
+      title: '开船日期',
+      width: 120,
+      data: 'currency',
     },
     {
-      title: '船公司',
-      width: 80,
-      data: 'ctnCode13',
+      title: '操作员',
+      width: 120,
+      data: 'currency',
     },
     {
-      title: 'TEU',
-      width: 80,
-      data: 'ctnCode14',
+      title: '揽货人',
+      width: 120,
+      data: 'currency',
     },
     {
-      title: '揽货人',
-      width: 80,
-      data: 'ctnCode15',
+      title: '说明',
+      width: 120,
+      data: 'currency',
     },
     {
-      title: '委托编号',
-      width: 80,
-      data: 'ctnCode16',
+      title: '一致',
+      width: 120,
+      data: 'currency',
     },
   ]
-
-  // 表格配置项
-  const settings = {
+  const Lsettings = {
     height: '400',
-    width: '100%',
+    // width: '100%',
     autoWrapRow: true,
     autoWrapCol: true,
     // 每行的高度
@@ -208,68 +308,77 @@
     fixedColumnsLeft: 1,
     // 需要隐藏的列
     hiddenColumns: {
-      columns: [1],
+      columns: [1, 2],
       indicators: true,
     },
-    // 控制回车移动
-    enterMoves: 'row',
     columnSorting: true,
-
-    columns: columns,
+    // 设置排序的列和方向
+    // columnSorting: {
+    //   column: 2, // 根据第三列排序
+    //   sortOrder: ['asc', 'desc'] // 允许升序和降序排序
+    // },
+    // 如果通过复制或者填写校验出现错误，清空输入框
+    // afterValidate: function (isValid, value, row, prop, source) {
+    //   if (!isValid) {
+    //     hotTb.value.hotInstance.setDataAtRowProp(row, prop, '')
+    //   }
+    // },
+    columns: LColumns,
     // 此行直接复制，必须(非商用)
     licenseKey: 'non-commercial-and-evaluation',
+    enterMoves: 'row',
+    // 定义所有单元格发生变化的回调处理
+    afterChange(changes, source) {},
   }
-
-  async function handleSave(exit) {
-    try {
-      const values = await validate()
-      setModalProps({ confirmLoading: true, loading: true })
-      // TODO custom api
-      console.log(values)
-      // loading.value = true;
-      const res: API.DataResult = await ApiEdit(values)
-      console.log(res)
-      if (res.succeeded) {
-        createMessage.success(res.message)
-        emit('success')
-        //刷新页面
-        if (!exit) {
-          if (unref(isUpdate)) {
-            await refresh()
-          } else {
-            rowId.value = res.data
-            isUpdate.value = true
-            await refresh()
-          }
-        }
-      } else {
-        createMessage.error(res.message)
-      }
-
-      exit && closeModal()
-    } finally {
-      // loading.value = false;
-      setModalProps({ confirmLoading: false, loading: false })
-    }
+  function AddLlist() {
+    Llist.value.push({})
   }
-  async function refresh() {
-    const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
-    if (res.succeeded) {
-      await setFieldsValue({
-        ...res.data,
+  async function DelLlist() {
+    const data = await validate()
+    if (data.id) {
+      let ApiData: any = { id: data.id, ids: [] }
+      Llist.value.forEach((e, i) => {
+        if (e.selected && e.id) {
+          ApiData.ids.push(e.id)
+        }
+      })
+    } else {
+      Llist.value.forEach((e, i) => {
+        if (e.selected) {
+          Llist.value.splice(i, 1)
+        }
       })
     }
   }
 </script>
+<style lang="less" scoped>
+  .FormBox {
+    // height: 100px;
+  }
+  .TableBox {
+    display: flex;
+    .BoxUnit {
+      flex: 1;
+      .model-botton-box {
+        margin: 40px 0 20px 20px;
 
-<style lang="less">
-  @import url('/@/styles/buttonGroup.scss');
-</style>
-<style lang="scss" scoped>
-  :deep(.ds-tbale-form-operation) {
-    position: relative !important;
-    > div {
-      margin-top: 0;
+        .btn {
+          margin-right: 10px;
+        }
+
+        .btn-delete {
+          border: 1px solid #ff6646;
+          background: #fdf2f0;
+          color: #ff6646;
+
+          &:hover {
+            border: 1px solid #ff6646 !important;
+            background: #fdf2f0 !important;
+            color: #ff6646 !important;
+            opacity: 0.7;
+          }
+        }
+      }
     }
   }
 </style>
diff --git a/src/views/operation/autoduizang/columns.tsx b/src/views/operation/autoduizang/columns.tsx
index 7ab40b00..690364a2 100644
--- a/src/views/operation/autoduizang/columns.tsx
+++ b/src/views/operation/autoduizang/columns.tsx
@@ -2,22 +2,22 @@ import { BasicColumn, FormSchema } from '/@/components/Table'
 import { Tag } from 'ant-design-vue'
 export const columns: BasicColumn[] = [
   {
-    title: '对账记录号',
+    title: '对账编号',
     dataIndex: 'ctnSize0',
     width: 150,
   },
   {
-    title: '对账名称',
+    title: '对账客户',
     dataIndex: 'ctnSize1',
     width: 150,
   },
   {
-    title: '对账人',
+    title: '对账名称',
     dataIndex: 'ctnSize2',
     width: 150,
   },
   {
-    title: '对账备注',
+    title: '对账人',
     dataIndex: 'ctnSize3',
     width: 150,
   },
@@ -27,7 +27,17 @@ export const columns: BasicColumn[] = [
     width: 150,
   },
   {
-    title: '对账客户',
+    title: '对账编号',
+    dataIndex: 'ctnSize5',
+    width: 150,
+  },
+  {
+    title: '结算人',
+    dataIndex: 'ctnSize5',
+    width: 150,
+  },
+  {
+    title: '结算日期',
     dataIndex: 'ctnSize5',
     width: 150,
   },
@@ -44,113 +54,59 @@ export const searchFormSchema: FormSchema[] = [
 export const formSchema: FormSchema[] = [
   {
     field: 'ctnSize0',
-    label: '自动对账编号',
+    label: '对账编号',
     component: 'Input',
     colProps: { span: 5 },
   },
   {
     field: 'ctnSize0',
-    label: '结算对象',
+    label: '对账名称',
     component: 'Input',
     colProps: { span: 5 },
   },
   {
     field: 'ctnSize0',
-    label: '对账方式',
+    label: '队长客户',
     component: 'Input',
     colProps: { span: 5 },
   },
 
   {
     field: 'ctnSize0',
-    label: '对账状态',
+    label: '对账日期',
     component: 'Input',
     colProps: { span: 5 },
   },
   {
     field: 'ctnSize0',
-    label: '对账单编号',
+    label: '对账人',
     component: 'Input',
     colProps: { span: 4 },
   },
   {
     field: 'ctnSize0',
-    label: '起始时间',
+    label: '费用范围',
     component: 'Input',
     colProps: { span: 5 },
   },
   {
     field: 'ctnSize0',
-    label: '结算时间',
+    label: '结算账单编号',
     component: 'Input',
     colProps: { span: 5 },
   },
   {
     field: 'ctnSize0',
-    label: '操作人',
+    label: '结算日期',
     component: 'Input',
     colProps: { span: 5 },
   },
   {
     field: 'ctnSize0',
-    label: '操作时间',
+    label: '结算人',
     component: 'Input',
     colProps: { span: 5 },
   },
-  {
-    field: 'ctnSize0',
-    label: '业务类型',
-    component: 'Input',
-    colProps: { span: 4 },
-  },
-  {
-    field: 'ctnSize0',
-    label: '费用范围',
-    component: 'Input',
-    colProps: { span: 4 },
-  },
-  {
-    field: 'ctnSize0',
-    label: '结算方式',
-    component: 'Input',
-    colProps: { span: 4 },
-  },
-  {
-    field: 'ctnSize0',
-    label: '币别',
-    component: 'Input',
-    colProps: { span: 4 },
-  },
-  {
-    field: 'ctnSize0',
-    label: '费用状态',
-    component: 'Input',
-    colProps: { span: 3 },
-  },
-  {
-    field: 'ctnSize0',
-    label: '核算单位',
-    component: 'Input',
-    colProps: { span: 3 },
-  },
-  {
-    field: 'ctnSize0',
-    label: '包含已对账',
-    component: 'Input',
-    colProps: { span: 3 },
-  },
-  {
-    field: 'ctnSize0',
-    label: '费用类别',
-    component: 'Input',
-    colProps: { span: 3 },
-  },
-  {
-    field: 'ctnSize0',
-    label: '备注',
-    component: 'Input',
-    colProps: { span: 24 },
-  },
 ]
 export const formcolumns: BasicColumn[] = [
   {
diff --git a/src/views/operation/autoduizang/index.vue b/src/views/operation/autoduizang/index.vue
index fe9a85eb..219751a2 100644
--- a/src/views/operation/autoduizang/index.vue
+++ b/src/views/operation/autoduizang/index.vue
@@ -1,11 +1,17 @@
 <template>
   <div>
     <BasicTable @register="registerTable">
-      <template #toolbar>
-        <a-button type="primary" @click="handleCreate"> 添加 </a-button>
+      <template #tableTitle>
+        <div class="nav" @click="handleCreate"> <i class="iconfont icon-jiahao2fill"></i>添加 </div>
+        <!-- <div class="nav" @click="Fnawait">
+          <i
+            class="iconfont icon-a-wendangcaozuoxiazaishangchuanshanchuxinzengfujianyasuochakan-01"
+          ></i
+          >导入
+        </div> -->
       </template>
     </BasicTable>
-    <TenantAuditStepModal ref="Modal" @register="registerModal" @success="handleSuccess" />
+    <TenantAuditStepModal @register="registerModal" @success="handleSuccess" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -17,7 +23,6 @@
   import { columns, searchFormSchema } from './columns'
   import { useMessage } from '/@/hooks/web/useMessage'
   const { notification } = useMessage()
-  const visible = ref<boolean>(false)
   const [registerModal, { openModal }] = useModal()
   const [registerTable, { reload, getForm, getPaginationRef }] = useTable({
     api: async (p) => {
@@ -67,13 +72,14 @@
       fixed: 'right',
     },
   })
-  const Modal = ref()
   function handleCreate() {
-    Modal.value.init()
-    // openModal(true, {
-    //   isParent: false,
-    //   isUpdate: false,
-    // })
+    openModal(true, {
+      isParent: false,
+      isUpdate: false,
+    })
+  }
+  function Fnawait() {
+    notification.warning({ message: '等待开发', duration: 3 })
   }
   function handleSuccess() {
     reload()