add：验证合同增加明细切换

src/views/storehouse/inventory/IOTNetworkCard.vue

@@ -501,7 +501,7 @@ const exportStatExcel = async () => {
 				<el-pagination
 					v-model:current-page="initParam.page"
 					v-model:page-size="initParam.page_z"
-					:page-sizes="[10, 20, 50, 100]"
+					:page-sizes="[10, 50, 100,500,1000,5000]"
 					layout="total, sizes, prev, pager, next, jumper"
 					:total="total"
 					@size-change="handleSizeChange"

src/views/storehouse/verifyCompany/VerifyContract.vue

@@ -3,7 +3,9 @@ import {
 	exportOperationFile,
 	Storehouse_Stock_Detail_Excel,
 	Storehouse_VerifyContract_Add_Customer,
-	Storehouse_VerifyContract_Customer_List, Storehouse_VerifyContract_Excel,
+	Storehouse_VerifyContract_Customer_List,
+	Storehouse_VerifyContract_Excel,
+	Storehouse_VerifyContract_List,
 	Storehouse_VerifyContract_Update_Customer
 } from '@/api/storehouse'
 import { useRouter } from 'vue-router'
@@ -20,8 +22,10 @@ const isNew = ref(true)
 const router = useRouter()
 const ruleFormRef = ref<FormInstance>()
 const drawerRef = ref<InstanceType<typeof Drawer> | null>(null)
-const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
+const customerTableRef = ref<InstanceType<typeof TableBase> | null>(null)
+const detailTableRef = ref<InstanceType<typeof TableBase> | null>(null)
 const { resetForm, globalStore, searchOnTableList, updateOnTableList } = useTablePublic()
+const isDetailView = ref(false)
 
 const columns: ColumnProps[] = [
   { type: 'index', label: '序号', width: 80 },
@@ -43,6 +47,24 @@ const initParam = reactive({
   T_name: '',
   T_state: ''
 })
+const detailColumns: ColumnProps[] = [
+  { type: 'index', label: '序号', width: 80 },
+  { prop: 'T_customer', label: '公司名称' },
+  { prop: 'T_number', label: '合同编号' },
+  { prop: 'T_date', label: '签订时间' },
+  { prop: 'T_discount', label: '金额' },
+  { prop: 'T_start_date', label: '起始时间' },
+  { prop: 'T_end_date', label: '终止时间' },
+  { prop: 'T_stamping_date', label: '盖章时间' },
+  { prop: 'T_payment_method', label: '付款方式', name: 'T_payment_method' },
+  { prop: 'T_verify_state', label: '是否过期', name: 'T_verify_state' }
+]
+const detailInitParam = reactive({
+  User_tokey: globalStore.GET_User_tokey,
+  T_customer_id: '',
+  T_customer_name: '',
+  T_number: ''
+})
 const openContract = (type: string, row?: any) => {
   isNew.value = type === 'new' ? true : false
   if (type === 'edit') {
@@ -76,7 +98,7 @@ const AddContract = (formEl: FormInstance | undefined) => {
         if (res.Code === 200) {
           ElMessage.success('添加客户成功！！')
           nextTick(() => {
-            updateOnTableList(TableRef.value)
+            updateOnTableList(customerTableRef.value)
             isNew.value = true
             resetForm(ruleFormRef.value)
             drawerRef.value?.closeDrawer()
@@ -86,6 +108,15 @@ const AddContract = (formEl: FormInstance | undefined) => {
     }
   })
 }
+const toggleView = () => {
+  isDetailView.value = !isDetailView.value
+  nextTick(() => {
+    const target = isDetailView.value ? detailTableRef.value : customerTableRef.value
+    if (target) {
+      updateOnTableList(target)
+    }
+  })
+}
 const visible = ref(false)
 const exportExcel = () => (visible.value = true)
 const T_date_detail = ref<string[]>([])
@@ -123,22 +154,28 @@ const confirmExport = async () => {
 
 <template>
   <div class="verify-contract">
+    <div class="view-toggle">
+      <el-button plain type="primary" @click="toggleView">
+        {{ isDetailView ? '返回客户列表' : '查看合同明细' }}
+      </el-button>
+    </div>
     <TableBase
-      ref="TableRef"
+      v-if="!isDetailView"
+      ref="customerTableRef"
       :columns="columns"
       :requestApi="Storehouse_VerifyContract_Customer_List"
       :initParam="initParam"
     >
       <template #table-header>
         <el-row :gutter="20" style="margin-bottom: 0" class="input-suffix">
-          <el-col :xl="6"  :md="6" class="d-flex">
+          <el-col :xl="6" :md="6" class="d-flex">
             <span class="inline-flex items-center">客户名称：</span>
             <el-input
               v-model="initParam.T_name"
               type="text"
               class="w-50 m-2"
               placeholder="按客户名称搜索"
-              @change="searchOnTableList(TableRef)"
+              @change="searchOnTableList(customerTableRef)"
             />
           </el-col>
           <el-col :xl="10" :md="10" class="d-flex">
@@ -146,26 +183,29 @@ const confirmExport = async () => {
             <el-select v-model="initParam.T_state" class="w-50" clearable placeholder="请选择状态~">
               <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
             </el-select>
-            <el-button type="primary" @click="searchOnTableList(TableRef)">搜索</el-button>
-			  <el-popover :visible="visible" placement="bottom" :width="400" trigger="click">
-				  <template #reference>
-					  <el-button type="success" @click="exportExcel">导出</el-button>
-				  </template>
-				  <el-date-picker v-model="T_date_detail" type="daterange" range-separator="~"
-								  start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD"
-								  value-format="YYYY-MM-DD" />
-				  <div class="export-popover">
-					  <el-button size="small" @click="visible = false">取消</el-button>
-					  <el-button size="small" type="primary"
-								 @click="confirmExport">确认</el-button>
-				  </div>
-			  </el-popover>
-
+            <el-button type="primary" @click="searchOnTableList(customerTableRef)">搜索</el-button>
+            <el-popover :visible="visible" placement="bottom" :width="400" trigger="click">
+              <template #reference>
+                <el-button type="success" @click="exportExcel">导出</el-button>
+              </template>
+              <el-date-picker
+                v-model="T_date_detail"
+                type="daterange"
+                range-separator="~"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+              />
+              <div class="export-popover">
+                <el-button size="small" @click="visible = false">取消</el-button>
+                <el-button size="small" type="primary" @click="confirmExport">确认</el-button>
+              </div>
+            </el-popover>
+          </el-col>
+          <el-col :xl="8" :md="8" class="btn">
+            <el-button type="primary" @click="openContract('new')">添加</el-button>
           </el-col>
-          <el-col :xl="8" :md="8"  class="btn"
-            ><el-button type="primary" @click="openContract('new')">添加</el-button>
-
-		  </el-col>
         </el-row>
       </template>
       <template #T_State="{ row }">
@@ -176,9 +216,54 @@ const confirmExport = async () => {
       </template>
       <template #right="{ row }">
         <el-button link type="primary" size="small" :icon="Edit" @click="openContract('edit', row)">编辑</el-button>
-        <el-button link type="success" size="small" :icon="View" @click="processContract(row.T_customer_id)"
-          >明细</el-button
-        >
+        <el-button link type="success" size="small" :icon="View" @click="processContract(row.T_customer_id)">明细</el-button>
+      </template>
+    </TableBase>
+    <TableBase
+      v-else
+      ref="detailTableRef"
+      :columns="detailColumns"
+      :requestApi="Storehouse_VerifyContract_List"
+      :initParam="detailInitParam"
+    >
+      <template #table-header>
+        <el-row :gutter="20" style="margin-bottom: 0" class="input-suffix">
+          <el-col :xl="6" :md="6" class="d-flex">
+            <span class="inline-flex items-center">公司名称：</span>
+            <el-input
+              v-model="detailInitParam.T_customer_name"
+              type="text"
+              class="w-50 m-2"
+              placeholder="按公司名称搜索"
+              @change="searchOnTableList(detailTableRef)"
+            />
+          </el-col>
+          <el-col :xl="6" :md="6" class="d-flex">
+            <span class="inline-flex items-center">合同编号：</span>
+            <el-input
+              v-model="detailInitParam.T_number"
+              type="text"
+              class="w-50 m-2"
+              placeholder="按合同编号搜索"
+              @change="searchOnTableList(detailTableRef)"
+            />
+          </el-col>
+          <el-col :xl="12" :md="12" class="btn">
+            <el-button type="primary" @click="searchOnTableList(detailTableRef)">搜索</el-button>
+          </el-col>
+        </el-row>
+      </template>
+      <template #T_payment_method="{ row }">
+        <el-text v-if="row.T_payment_method === 'A'" type="info">先货后款</el-text>
+        <el-text v-else-if="row.T_payment_method === 'B'" type="info">收部分定金50</el-text>
+        <el-text v-else-if="row.T_payment_method === 'C'" type="info">先款后货</el-text>
+        <el-text v-else>--</el-text>
+      </template>
+      <template #T_verify_state="{ row }">
+        <el-tag v-if="row.T_verify_state === 1" type="warning" effect="dark"> 未签约 </el-tag>
+        <el-tag v-else-if="row.T_verify_state === 2" type="info" effect="dark"> 已作废 </el-tag>
+        <el-tag v-else-if="row.T_verify_state === 3" type="success" effect="dark"> 已签约 </el-tag>
+        <el-tag v-else type="danger" effect="dark"> 即将到期 </el-tag>
       </template>
     </TableBase>
     <Drawer ref="drawerRef" :handleClose="callbackDrawer">
@@ -209,6 +294,12 @@ const confirmExport = async () => {
 .verify-contract {
   @include f-direction;
 
+  .view-toggle {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 10px;
+  }
+
   :deep(.el-drawer__header) {
     margin-bottom: 0;
   }