客户对账

src/views/operation/CustomerReconciliation/detail/detailColumns.tsx

@@ -19,7 +19,23 @@ export const schemas: FormSchema[] = [
     component: 'Input',
     label: '对账编号',
     dynamicDisabled: true,
+    show: false,
+    colProps: { span: 4 },
+  },
+  {
+    field: 'isLocking',
+    component: 'Select',
+    label: '业务锁定',
     colProps: { span: 4 },
+    dynamicDisabled: true,
+    defaultValue: false,
+    show: false,
+    componentProps: {
+      options: [
+        { label: '否', value: false },
+        { label: '是', value: true },
+      ],
+    },
   },
   { field: 'billName', component: 'Input', label: '对账单名称', colProps: { span: 4 } },
   {
@@ -74,6 +90,42 @@ export const schemas: FormSchema[] = [
   //   defaultValue: false,
   //   colProps: { span: 2 },
   // },
+
+  {
+    field: 'isNoTax',
+    component: 'Switch',
+    label: '是否不含税',
+    defaultValue: false,
+    colProps: { span: 2 },
+  },
+  // isLocking
+  // { field: 'billName', component: 'Input', label: '对账单名称', colProps: { span: 4 } },
+  // { field: 'field2', component: 'Input', label: '账单说明', colProps: { span: 4 } },
+  // { field: 'field3', component: 'Input', label: '对账日期', colProps: { span: 4 } },
+  // { field: 'field4', component: 'Input', label: '状态', colProps: { span: 4 } },
+  // { field: 'field5', component: 'Input', label: '是否含税', colProps: { span: 4 } },
+  // { field: 'field6', component: 'Input', label: '打印模板', colProps: { span: 4 } },
+  // { field: 'field7', component: 'Input', label: '账单类别', colProps: { span: 4 } },
+  // { field: 'field8', component: 'Input', label: '费用范围', colProps: { span: 4 } },
+  // { field: 'field9', component: 'Input', label: '备注', colProps: { span: 12 } },
+]
+// 表单
+export const Editschemas: FormSchema[] = [
+  {
+    field: 'id',
+    component: 'Input',
+    label: '主键Id',
+    show: false,
+    colProps: { span: 4 },
+  },
+  {
+    field: 'billNo',
+    component: 'Input',
+    label: '对账编号',
+    dynamicDisabled: true,
+    show: false,
+    colProps: { span: 4 },
+  },
   {
     field: 'isLocking',
     component: 'Select',
@@ -81,6 +133,7 @@ export const schemas: FormSchema[] = [
     colProps: { span: 4 },
     dynamicDisabled: true,
     defaultValue: false,
+    show: false,
     componentProps: {
       options: [
         { label: '否', value: false },
@@ -88,24 +141,95 @@ export const schemas: FormSchema[] = [
       ],
     },
   },
+  {
+    field: 'billName',
+    component: 'DEdit',
+    label: '对账单名称',
+    colProps: { span: 4 },
+    componentProps: (e) => {
+      return {
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    field: 'billType',
+    component: 'DEdit',
+    label: '收付类型',
+    colProps: { span: 4 },
+    componentProps: (e) => {
+      return {
+        options: billTypeData,
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    field: 'customerName',
+    component: 'DEdit',
+    label: '对账客户Name',
+    colProps: { span: 4 },
+    show: false,
+    componentProps: (e) => {
+      return {
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    field: 'customerId',
+    component: 'DEdit',
+    label: '对账客户',
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        allowClear: true,
+        showSearch: true,
+        api: GetAllClientList,
+        labelField: 'shortName',
+        valueField: 'id',
+        resultField: 'data',
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.customerName = obj.label
+          }
+        },
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
   {
     field: 'isNoTax',
-    component: 'Switch',
+    component: 'DEdit',
     label: '是否不含税',
     defaultValue: false,
     colProps: { span: 2 },
+    componentProps: (e) => {
+      return {
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
   },
-  // isLocking
-  // { field: 'billName', component: 'Input', label: '对账单名称', colProps: { span: 4 } },
-  // { field: 'field2', component: 'Input', label: '账单说明', colProps: { span: 4 } },
-  // { field: 'field3', component: 'Input', label: '对账日期', colProps: { span: 4 } },
-  // { field: 'field4', component: 'Input', label: '状态', colProps: { span: 4 } },
-  // { field: 'field5', component: 'Input', label: '是否含税', colProps: { span: 4 } },
-  // { field: 'field6', component: 'Input', label: '打印模板', colProps: { span: 4 } },
-  // { field: 'field7', component: 'Input', label: '账单类别', colProps: { span: 4 } },
-  // { field: 'field8', component: 'Input', label: '费用范围', colProps: { span: 4 } },
-  // { field: 'field9', component: 'Input', label: '备注', colProps: { span: 12 } },
 ]
+
 //左侧列表
 export const columnsL: BasicColumn[] = [
   // { title: '对账Id', dataIndex: 'checkId', align: 'left' },

src/views/operation/CustomerReconciliation/detail/index.vue

@@ -1,46 +1,120 @@
 <template>
-  <div class="CsMain p-4" id="detail">
+  <div style="height: 100%">
+    <div class="infoclientBox">
       <div class="buttonBox">
-      <!-- <div  @click="Save"> <i class="iconfont icon-icon_baocun"></i>保存</div> -->
+        <a-tooltip placement="top" :mouseEnterDelay="0.5">
-      <!-- <div  @click="waitFor"> <i class="iconfont icon-printing"></i>标准打印</div> -->
+          <template #title>
-      <!-- <div  @click="waitFor"> <i class="iconfont icon-icon_baocun"></i>保存并关闭</div> -->
+            <span>新建</span>
+          </template>
+          <span class="ds-action-svg-btn" @click="GoDetailed">
+            <img src="../../../../assets/svg/infoclient/xinjian.svg" class="SvgImg" />
+          </span>
+        </a-tooltip>
+        <a-tooltip placement="top" :mouseEnterDelay="0.5">
+          <template #title>
+            <span>保存</span>
+          </template>
+          <span class="ds-action-svg-btn" @click="Save">
+            <img src="../../../../assets/svg/infoclient/baocun.svg" class="SvgImg" />
+          </span>
+        </a-tooltip>
+        <a-tooltip placement="top" :mouseEnterDelay="0.5">
+          <template #title>
+            <span>提交锁定</span>
+          </template>
+          <span @click="Lock" class="ds-action-svg-btn">
+            <img src="../../../../assets/icons/lock.svg" class="SvgImg" />
+          </span>
+        </a-tooltip>
+        <a-tooltip placement="top" :mouseEnterDelay="0.5">
+          <template #title>
+            <span>解除锁定</span>
+          </template>
+          <span @click="UnLock" class="ds-action-svg-btn">
+            <img src="../../../../assets/icons/openLock.svg" class="SvgImg" />
+          </span>
+        </a-tooltip>
+        <a-tooltip placement="top" :mouseEnterDelay="0.5">
+          <template #title>
+            <span>上一条</span>
+          </template>
+          <span class="ds-action-svg-btn" @click="ClickLast('next')">
+            <img src="../../../../assets/svg/infoclient/shangxia.svg" class="SvgImg rotate" />
+          </span>
+        </a-tooltip>
+        <a-tooltip placement="top" :mouseEnterDelay="0.5">
+          <template #title>
+            <span>下一条</span>
+          </template>
+          <span class="ds-action-svg-btn" @click="ClickLast('last')">
+            <img src="../../../../assets/svg/infoclient/shangxia.svg" class="SvgImg" />
+          </span>
+        </a-tooltip>
 
-      <!-- <div > <i class="iconfont icon-jiahao2fill"></i>费用提交审核</div> -->
+        <Divider type="vertical" />
-      <div class="left">
+        <span class="CsisLocking" :class="RauditClass()">
-        <a-button v-repeat type="link" @click="Lock">
+          <span class="iconfont icon-locksuo" v-if="isLocking">
-          <span class="iconfont icon-locksuo IconColor"></span>
+            <span class="text">锁定</span>
-          锁定
+          </span>
-        </a-button>
+          <span class="iconfont icon-a-jiesuo1_jiesuo" v-else>
-        <a-button v-repeat type="link" @click="UnLock">
+            <span class="text">未锁定</span>
-          <span class="iconfont icon-lock-openkaisuo IconColor"></span>
+          </span>
-          撤销锁定
+        </span>
-        </a-button>
+        <!-- <Divider type="vertical" />
+      <span class="gradeClass">
+        <span>客户等级：</span>
+        <a-select class="gradeSelect" :bordered="false" v-model:value="grade">
+          <a-select-option value="A">A</a-select-option>
+          <a-select-option value="B">B</a-select-option>
+          <a-select-option value="C">C</a-select-option>
+          <a-select-option value="D">D</a-select-option>
+        </a-select>
+      </span> -->
+        <!-- <Divider type="vertical" />
+      <span>
+        <a-select
+          class="CustomerOrSupplierSelect"
+          :class="CustomerOrSupplier"
+          :bordered="false"
+          v-model:value="CustomerOrSupplier"
+        >
+          <a-select-option value="isCustomer">
+            <span class="iconfont icon-yonghu1"></span>
+            客户
+          </a-select-option>
+          <a-select-option value="isSupplier">
+            <span class="iconfont icon-a-dianpushangchengxianxing"></span>
+            供应商
+          </a-select-option>
+          <a-select-option value="isCustomerAndisSupplier">
+            <span class="iconfont icon-quxiaopeidui"></span>
+            客户&供应商
+          </a-select-option>
+        </a-select>
+      </span> -->
       </div>
-      <a-button v-repeat type="link" @click="GoDetailed">
+      <div class="CsbillNo"> 对账编号：{{ billNo }} </div>
-        <span class="iconfont icon-new_document"></span>
-        新建
-      </a-button>
     </div>
-
+    <div class="CsMain p-4" id="detail">
-    <!-- <a-tabs v-model:activeKey="activeKey" type="card" class="CsTabs">
-      <a-tab-pane key="1" tab="账单明细"> -->
       <ActionBar
+        ref="RefActionBar"
+        v-show="false"
         :id="route.query.id"
         temId="1777229219986804736"
         name="khdz"
         :save="Save"
+        lasttext="下一条"
+        nexttext="上一条"
       ></ActionBar>
       <a-row class="CsHeader" :gutter="5">
         <a-col :span="24" class="headerForm">
           <a-spin :spinning="spinningT">
-          <BasicForm @register="registerForm" />
+            <BasicForm @register="registerForm" @linkageForm="linkageForm" class="ds-form-detail" />
           </a-spin>
         </a-col>
       </a-row>
-    <!-- <a-row class="CsBottom" :gutter="5">
+      <a-row class="CsBottom">
-      <a-col :span="24" class="bottomTableL"> -->
+        <a-col :span="16" class="bottomTableL">
-    <div class="CsBottom">
-      <div class="bottomTableL">
           <a-spin :spinning="spinningL">
             <BasicTable
               class="ds-table"
@@ -51,7 +125,7 @@
                 <p class="tableTitle">账单明细</p>
                 <a-button v-repeat type="link" @click="addDetail">
                   <span class="iconfont icon-new_document"></span>
-                新增账单明细
+                  添加
                 </a-button>
                 <a-popconfirm
                   title="确定删除选中数据？"
@@ -61,12 +135,12 @@
                 >
                   <a-button v-repeat type="link">
                     <span class="iconfont icon-shanchu21"></span>
-                  删除账单明细
+                    删除
                   </a-button>
                 </a-popconfirm>
                 <a-button v-repeat type="link" @click="OpenFileModel">
                   <span class="iconfont icon-fujian"></span>
-                附件管理
+                  附件
                 </a-button>
               </template>
             </BasicTable>
@@ -80,12 +154,12 @@
               </div>
             </div>
           </a-spin>
-      </div>
+        </a-col>
-      <div class="bottomTableR">
+        <a-col :span="8" class="bottomTableR">
           <a-spin :spinning="spinningR">
             <BasicTable class="ds-table" @register="registerTableR">
               <template #tableTitle>
-              <p class="tableTitle">费用账单明细</p>
+                <!-- <p class="tableTitle">费用账单明细</p> -->
                 <a-popconfirm
                   title="是否要删除选中数据?"
                   ok-text="是"
@@ -94,14 +168,14 @@
                 >
                   <a-button v-repeat type="link">
                     <span class="iconfont icon-shanchu21"></span>
-                  删除账单费用明细
+                    删除
                   </a-button>
                 </a-popconfirm>
               </template>
             </BasicTable>
           </a-spin>
-      </div>
+        </a-col>
-    </div>
+      </a-row>
       <BasicModal v-bind="$attrs" width="80%" @register="registerFileModel" title="附件管理">
         <BasicTable class="ds-table" @register="registerTableFile">
           <template #tableTitle>
@@ -139,9 +213,11 @@
         <BasicForm @register="registerFormFile" />
       </BasicModal>
     </div>
+  </div>
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue'
+  import { Divider } from 'ant-design-vue'
   import { useRoute } from 'vue-router'
   const route = useRoute()
   import { useMessage } from '/@/hooks/web/useMessage'
@@ -153,7 +229,14 @@
   const go = useGo()
   import Info from './info/index.vue'
   import ShowData from './showData/index.vue'
-  import { columnsL, columnsR, columnsFile, schemas, schemasFile } from './detailColumns'
+  import {
+    columnsL,
+    columnsR,
+    columnsFile,
+    schemas,
+    schemasFile,
+    Editschemas,
+  } from './detailColumns'
   import {
     EditCheckBill,
     GetCheckBillInfo,
@@ -169,7 +252,16 @@
   const id = ref(route.query.id)
   const spinningL = ref(false)
   const spinningT = ref(false)
+  const billNo = ref()
+  const isLocking = ref(false)
   init()
+  // -------------------------------------
+  const RefActionBar = ref()
+  // 上一票/下一票
+  function ClickLast(type) {
+    RefActionBar.value.toPage(type)
+  }
+  // -------------------------------------
   const Ldata = ref({})
   function init() {
     if (id.value) {
@@ -186,6 +278,8 @@
       GetCheckBillInfo({ id: id.value }).then((res) => {
         setFieldsValue(res.data)
         spinningT.value = false
+        billNo.value = res.data.billNo
+        isLocking.value = res.data.isLocking
       })
       GetCheckBillBusinessList(ApiData).then((res) => {
         setTableDataL(res.data.list)
@@ -199,10 +293,23 @@
       // })
     }
   }
+  function RauditClass() {
+    let RData = ''
+    switch (isLocking.value) {
+      case true:
+        RData = 'active'
+        break
+      default:
+        RData = 'rejected'
+        break
+    }
+    return RData
+  }
+
   // 头部表格
-  const [registerForm, { getFieldsValue, setFieldsValue }] = useForm({
+  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema }] = useForm({
     labelWidth: 120,
-    schemas,
+    schemas: id.value ? schemas : Editschemas,
     showActionButtonGroup: false,
     actionColOptions: {
       span: 5,
@@ -210,6 +317,13 @@
     // 是否禁用表单所有控件
     disabled: false,
   })
+  const linkageForm = (e) => {
+    schemas.forEach((item) => {
+      if (item.field == e.schema.field) {
+        updateSchema(item)
+      }
+    })
+  }
   // 左侧表格
   const [registerTableL, { getSelectRows: getSelectRowsL, setTableData: setTableDataL }] = useTable(
     {
@@ -222,6 +336,7 @@
       bordered: true,
       showIndexColumn: true,
       immediate: false,
+      canResize: true,
     },
   )
   const spinningR = ref(false)
@@ -527,8 +642,56 @@
   }
 </style> -->
 <style lang="less" scoped>
+  // ----------------------
+  .infoclientBox {
+    display: flex;
+    background: rgba(245, 249, 252, 1);
+    padding: 8px 20px;
+    .buttonBox {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      height: 32px;
+    }
+    .CsbillNo {
+      height: 32px;
+      line-height: 32px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #7a8897;
+    }
+    .ConfigFormBox {
+      flex: 1;
+      display: flex;
+      justify-content: flex-end;
+    }
+    .ds-action-svg-btn {
+      margin-right: 20px;
+
+      .SvgImg {
+        width: 16px;
+        cursor: pointer;
+        &.rotate {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+  .CsisLocking {
+    .text {
+      padding-left: 8px;
+    }
+    &.active {
+      color: #17a6a3;
+    }
+    &.rejected {
+      color: red;
+    }
+  }
+
+  // ----------------------
   .CsMain {
-    height: 100%;
+    height: calc(100% - 48px);
     display: flex;
     flex-direction: column;
     .buttonBox {
@@ -564,14 +727,20 @@
       }
     }
     .CsBottom {
+      width: 100%;
       height: calc(100vh - 300px);
       display: flex;
-      flex-direction: column;
+      // flex-direction: column;
       // flex: 1;
       // padding-top: 0 !important;
       .bottomTableL {
-        height: calc(100vh - 535px);
+        flex: 2;
-        border: 1px solid #e8ebed;
+        :deep(.ant-table-container) {
+          padding: 0 20px 0 0;
+        }
+        // height: calc(100vh - 535px);
+        border-top: 1px solid #e8ebed;
+        border-right: 1px solid #e8ebed;
         margin-bottom: 10px;
         position: relative;
         .totalBox {
@@ -612,8 +781,12 @@
         }
       }
       .bottomTableR {
-        height: calc(100vh - 600px);
+        flex: 1;
-        border: 1px solid #e8ebed;
+        // height: calc(100vh - 600px);
+        border-top: 1px solid #e8ebed;
+        :deep(.ant-table-container) {
+          padding: 0 0 0 20px;
+        }
       }
       :deep(.ant-spin-nested-loading) {
         height: 100%;
@@ -630,7 +803,9 @@
                   .ant-table {
                     height: calc(100% - 30px);
                     .ant-table-container {
+                      border: none;
                       height: calc(100% - 54px);
+                      // padding: 0;
                       .ant-table-body {
                         max-height: auto !important;
                         height: auto !important;

src/views/operation/CustomerReconciliation/detail/info/index.vue

@@ -11,11 +11,7 @@
     :showFooter="false"
   >
     <div class="CsMain">
-      <a-row class="p-4 CsHeader" :gutter="5">
-        <a-col :span="24" class="headerForm">
       <BasicForm @register="registerForm" @submit="handleSubmit" />
-        </a-col>
-      </a-row>
       <div class="CsBottom">
         <div class="bottomTableL">
           <a-spin :spinning="spinningL">

src/views/operation/CustomerReconciliation/index.vue

@@ -11,41 +11,77 @@
         "
       >
         <template #tableTitle>
-          <div class="buttonGroup">
+          <div class="ds-h-aciton-btns-fee">
-            <a-button v-repeat type="link" @click="Lock">
+            <a-tooltip placement="top" :mouseEnterDelay="0.5">
-              <span class="iconfont icon-locksuo IconColor"></span>
+              <template #title>
-              锁定
+                <span>新增</span>
-            </a-button>
+              </template>
-            <a-button v-repeat type="link" @click="UnLock">
+              <span @click="GoDetailed(false, null)" class="ds-action-svg-btn">
-              <span class="iconfont icon-lock-openkaisuo IconColor"></span>
+                <img src="../../../assets/svg/infoclient/xinjian.svg" class="SvgImg" />
-              撤销锁定
+              </span>
-            </a-button>
+            </a-tooltip>
-            <a-button v-repeat type="link" @click="ExportExcel">
+            <a-tooltip placement="top" :mouseEnterDelay="0.5">
-              <span class="iconfont icon-weibiaoti--"></span>
+              <template #title>
-              EXCEL导出
+                <span>删除</span>
-            </a-button>
-          </div>
               </template>
-        <template #toolbar>
-          <a-button v-repeat type="link" @click="GoDetailed(false, null)">
-            <span class="iconfont icon-new_document"></span>
-            添加
-          </a-button>
               <a-popconfirm
                 title="确定删除当前选中数据？"
+                @confirm="FnDel"
                 ok-text="是"
                 cancel-text="否"
-            @confirm="FnDel"
               >
-            <a-button type="link">
+                <span class="ds-action-svg-btn">
-              <span class="iconfont icon-shanchu21"></span>
+                  <img src="../../../assets/svg/infoclient/shanchu.svg" class="SvgImg" />
-              删除
+                </span>
-            </a-button>
               </a-popconfirm>
-          <a-button v-repeat type="link" @click="printFee">
+            </a-tooltip>
-            <span class="iconfont icon-xiaopiaodayin"></span>
+            <a-tooltip placement="top" :mouseEnterDelay="0.5">
-            打印
+              <template #title>
-          </a-button>
+                <span>打印</span>
+              </template>
+              <span @click="printFee" class="ds-action-svg-btn">
+                <img src="../../../assets/svg/infoclient/dayin.svg" class="SvgImg" />
+              </span>
+            </a-tooltip>
+            <!-- <a-tooltip placement="top" :mouseEnterDelay="0.5">
+              <template #title>
+                <span>分享</span>
+              </template>
+              <span class="ds-action-svg-btn">
+                <img src="../../../assets/svg/infoclient/tijiao.svg" class="SvgImg" />
+              </span>
+            </a-tooltip> -->
+            <a-tooltip placement="top" :mouseEnterDelay="0.5">
+              <template #title>
+                <span>导出excel</span>
+              </template>
+              <span @click="ExportExcel" class="ds-action-svg-btn" style="padding-top: 4px">
+                <SvgIcon size="16" name="export" />
+              </span>
+            </a-tooltip>
+            <a-tooltip placement="top" :mouseEnterDelay="0.5">
+              <template #title>
+                <span>提交锁定</span>
+              </template>
+              <span @click="Lock" class="ds-action-svg-btn">
+                <img src="../../../assets/icons/lock.svg" class="SvgImg" />
+              </span>
+            </a-tooltip>
+            <a-tooltip placement="top" :mouseEnterDelay="0.5">
+              <template #title>
+                <span>解除锁定</span>
+              </template>
+              <span @click="UnLock" class="ds-action-svg-btn">
+                <img src="../../../assets/icons/openLock.svg" class="SvgImg" />
+              </span>
+            </a-tooltip>
+          </div>
+          <div class="buttonGroup">
+            <!-- <a-button v-repeat type="link" @click="Lock">
+              <span class="iconfont icon-renwu_ IconColor"></span>
+              生成发票申请
+            </a-button> -->
+          </div>
         </template>
         <template v-slot:bodyCell="{ column, record }">
           <template v-if="column.key === 'action'">
@@ -86,6 +122,7 @@
   import DsPrint from '/@/components/Print/index.vue'
   import { useMessage } from '/@/hooks/web/useMessage'
   const { notification } = useMessage()
+  import { SvgIcon } from '/@/components/Icon'
   import { useGo } from '/@/hooks/web/usePage'
   const go = useGo()
   // 引入处理入参方法
@@ -388,4 +425,29 @@
   .topTable {
     height: calc(100vh - 145px);
   }
+  .ds-h-aciton-btns-fee {
+    display: flex;
+    align-items: center;
+    height: 38px;
+    padding-right: 10px;
+    border-right: 1px solid rgb(194, 188, 188);
+
+    .ds-action-svg-btn {
+      display: inline-block;
+      width: 32px;
+      height: 32px;
+      padding: 7px 8px;
+      border-radius: 2px;
+      margin-right: 8px;
+      cursor: pointer;
+
+      .next {
+        transform: rotate(180deg);
+      }
+    }
+
+    .ds-action-svg-btn:hover {
+      box-shadow: 0px 2px 4px #cad1db;
+    }
+  }
 </style>