20231214

src/api/percentage/index.ts

@@ -4,3 +4,12 @@ import $http from '../index'
 export const percentage_List = (params: any) => $http.post('/storage/Percentage/List', params)
 // 员工-列表
 export const percentage_User_List = (params: any) => $http.post('/storage/Percentage/User/List', params)
+
+// 员工-详情
+export const percentage_Get = (params: any) => $http.post('/storage/Percentage/Get', params)
+
+// 员工-审核
+export const percentage_Approval = (params: any) => $http.post('/storage/Percentage/Approval', params)
+
+// 员工-明细
+export const percentage_Remit = (params: any) => $http.post('/storage/Percentage/Remit', params)

src/components/TableBase/index.vue

@@ -82,7 +82,7 @@ defineExpose({
           
         ></el-table-column>
         <!-- expand 支持 tsx 语法 && 作用域插槽 (tsx > slot) -->
-        <el-table-column v-bind="item" :align="item.align ?? 'center'" v-if="item.type === 'expand'" v-slot="scope">
+        <el-table-column v-bind="item" :align="item.align ?? 'center'" v-if="item.type === 'expand'" v-slot="scope" show-overflow-tooltip>
           <component :is="item.render" :row="scope.row" v-if="item.render"> </component>
           <slot :name="item.type" :row="scope.row" v-else></slot>
         </el-table-column>
@@ -91,7 +91,7 @@ defineExpose({
           v-bind="item"
           :align="item.align ?? 'center'"
           v-if="!item.type && item.prop && item.name !== item.prop"
-          v-slot="scope"
+          v-slot="scope" show-overflow-tooltip
         >
           <div v-if="item.prop=='T_wait_audit'" style="color: red;">
             {{ scope.row[item.prop]==true?'待审核':'' }}
@@ -106,7 +106,7 @@ defineExpose({
           v-bind="item"
           :align="item.align ?? 'center'"
           v-if="!item.type && item.prop && item.name === item.prop"
-          v-slot="scope"
+          v-slot="scope" show-overflow-tooltip
         >
           <slot :name="item.prop" :row="scope.row"></slot>
         </el-table-column>

src/hooks/useTablePublic.ts

@@ -31,7 +31,9 @@ export interface ContractFormType {
   T_uuid: string
   T_number: string
   T_product: any
+  T_type: any 
   T_money: string
+  T_uuid_name:string
   T_discount?: string
   T_customer?: string
   T_start_date?: string
@@ -43,7 +45,16 @@ export interface ContractFormType {
   T_submit: string
   T_recoveries: string
   T_invoice: string
-  T_submit_name: string
+  T_submit_name?: string
+  T_remit:any
+}
+
+
+export interface royaltyType {
+  T_name: string
+  T_num:number
+  T_price:number
+  T_priceNum:number
 }
 
 export const Project_State = [
@@ -70,8 +81,21 @@ export const columns = [
   { label: '产品规格', prop: 'T_spec', align: 'center ' },
   { label: '是否关联SN', prop: 'T_relation_sn', align: 'center ', width: 120, name: 'T_relation_sn' },
   { label: '*数量', prop: 'count', align: 'center ', name: 'count' },
+  { label: '*已出库数量', prop: 'T_product_out', align: 'center ', name: 'T_product_out' },
   { prop: 'operation', label: '操作', width: 80, fixed: 'right' }
 ]
+
+/**
+ * 提成明细
+ */
+export const royalty = [
+  { type: 'index', label: '序号', width: 80, align: 'center ' },
+  { label: '项目', prop: 'T_name', align: 'center ', name: 'T_name' },
+  { label: '*数量', prop: 'T_num', align: 'center ' },
+  { label: '单价', prop: 'T_price', align: 'center ' },
+  { label: '总价', prop: 'T_priceNum', align: 'center ', name: 'T_priceNum' },
+]
+
 export const columnsRecoveries = [
   { type: 'index', label: '序号', width: 80, align: 'center ' },
   { label: '回款时间', prop: 'T_date', align: 'center ' },
@@ -88,6 +112,13 @@ export const columnsInvoice = [
   { label: '开票金额', prop: 'T_money', align: 'center ' },
   { prop: 'operation', label: '操作', width: 150, fixed: 'right' }
 ]
+//打款明细
+export const columnsRemit = [
+  { type: 'index', label: '序号', width: 80, align: 'center ' },
+  { label: '打款时间', prop: 'T_date', align: 'center ' },
+  { label: '打款金额', prop: 'T_money', align: 'center ' },
+  { prop: 'operation', label: '操作', width: 150, fixed: 'right' }
+]
 export const labelsInvoice = {
   date: '开票时间',
   money: '开票金额'

src/router/modules/staticRouter.ts

@@ -41,7 +41,7 @@ export const staticRouter: RouteRecordRaw[] = [
             }
           },
           {
-            path: '/percentageDetail/:id/:type?/:verify?',
+            path: '/percentageDetail/:id/:type?/:verify?/:titles?',
             name: 'PercentageDetail',
             component: () => import('@/views/storehouse/sales/PercentageDetail.vue'),
             meta: {

src/views/storehouse/sales/ContractForm.vue

@@ -63,10 +63,12 @@ const emit = defineEmits<{ (event: 'onTableList'): void }>()
 
 const form = reactive<ContractFormType>({
   T_uuid: '',
+  T_type: '',
   T_number: '',
   T_customer: '',
   T_product: '',
   T_money: '',
+  T_uuid_name:'',
   T_discount: '',
   T_date: '',
   T_remark: '',
@@ -74,6 +76,7 @@ const form = reactive<ContractFormType>({
   T_submit: '',
   T_recoveries: '',
   T_invoice: '',
+  T_remit: '',
   T_submit_name: ''
 })
 

src/views/storehouse/sales/Percentage.vue

@@ -7,18 +7,11 @@ import TableBase from '@/components/TableBase/index.vue'
 import { Edit, Delete, Finished, View } from '@element-plus/icons-vue'
 import type { ColumnProps } from '@/components/TableBase/interface/index'
 import { percentage_List, percentage_User_List } from '@/api/percentage/index'
-import { useTablePublic, options1 } from '@/hooks/useTablePublic'
+import { useTablePublic, options1} from '@/hooks/useTablePublic'
 
-const ContractForm = defineAsyncComponent({
-  loader: () => import(/*webpackChunkName: 'ContractForm'*/ './ContractForm.vue'),
-  delay: 500,
-  timeout: 3000,
-  suspensible: true
-})
 const router = useRouter()
 const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
-const ContractFormRef = ref<InstanceType<typeof ContractForm> | null>(null)
-const { globalStore, searchOnTableList, updateOnTableList } = useTablePublic()
+const { globalStore, searchOnTableList,updateOnTableList  } = useTablePublic()
 
 const columns: ColumnProps[] = [
   { type: 'index', label: '序号', width: 80 },
@@ -34,10 +27,10 @@ const columns: ColumnProps[] = [
   { prop: 'operation', label: '操作', width: 260, fixed: 'right' }
 ]
 
-const openContractFormDrawer = (type: string, row?: any) => {
-  ContractFormRef.value?.openDrawer(type, row)
+const processContract = (id: string,titles:string) => {
+  ContForm.showTable = false
+  router.push({ name: 'PercentageDetail', params: { id, type: fnMd5('contract'),titles:titles}})
 }
-const processContract = (id: string) => router.push({ name: 'PercentageDetail', params: { id, type: fnMd5('contract') } })
 
 const initParam = reactive({
   User_tokey: globalStore.GET_User_tokey,
@@ -73,6 +66,23 @@ onMounted(async () => {
     return { value: item.T_uuid, label: item.T_user }
   })
 })
+
+const ContractFormRef = ref<InstanceType<typeof ContractForm> | null>(null)
+const ContForm = reactive({
+  id:null,
+  showTable:true
+})
+const openContractFormDrawer = (type: string, row?: any) => {
+  ContForm.id = row.Id
+  ContractFormRef.value?.openDrawer(type, row)
+  ContForm.showTable = true
+}
+const ContractForm = defineAsyncComponent({
+  loader: () => import(/*webpackChunkName: 'ContractForm'*/ './PercentageForm.vue'),
+  delay: 500,
+  timeout: 3000,
+  suspensible: true
+})
 </script>
 
 <template>
@@ -83,7 +93,7 @@ onMounted(async () => {
           <el-row :gutter="20" style="margin-bottom: 0">
             <el-col :xl="5" :md="6">
               <span class="inline-flex items-center">合同编号：</span>
-              <el-input v-model="initParam.T_name" type="text" class="w-50 m-2" placeholder="按合同编号搜索"
+              <el-input v-model="initParam.T_name" type="text" class="w-50 m-2" placeholder="按合同编号搜索" clearable
                 @change="searchOnTableList(TableRef)" />
             </el-col>
             <el-col :xl="5" :md="6">
@@ -122,14 +132,14 @@ onMounted(async () => {
         <el-tag v-else-if="row.T_out === 1" type="warning" effect="dark"> 未出库 </el-tag>
         <el-tag v-else type="danger" effect="dark"> --- </el-tag>
       </template>
-      <template #right="{ row }">
-        <el-button link type="warning" size="small" :icon="Finished" @click="processContract(row.T_number)">审核</el-button>
-        <el-button link type="primary" size="small" :icon="Edit"
-          @click="openContractFormDrawer('edit', row)">编辑</el-button>
-        <el-button link type="success" size="small" :icon="View" @click="processContract(row.T_number)">详情</el-button>
+      <template #right="{ row }"> 
+        {{ row.T_State }}
+        <el-button link type="warning" :disabled="![1,3].includes(row.T_State)" size="small"  :icon="Finished" @click="processContract(row.Id,'审核')">审核</el-button>
+        <el-button link type="primary" :disabled="![2,4,5].includes(row.T_State)" size="small"  :icon="Edit"  @click="openContractFormDrawer('edit', row)">打款明细</el-button>
+        <el-button link type="success" size="small"  :icon="View" @click="processContract(row.Id,'详情')">详情</el-button>
       </template>
     </TableBase>
-    <ContractForm ref="ContractFormRef" @onTableList="updateOnTableList(TableRef)" />
+  <ContractForm ref="ContractFormRef" :ContForm="ContForm" @onTableList="updateOnTableList(TableRef)" />
   </div>
 </template>
 

src/views/storehouse/sales/PercentageDetail.vue

@@ -7,17 +7,25 @@ import { ElMessage } from 'element-plus'
 import Drawer from '@/components/Drawer/index.vue'
 import ImageCom from '@/components/Image/index.vue'
 import { ColumnProps } from '@/components/TableBase/interface/index'
-import { Storehouse_Contract_Get, Storehouse_Contract_Approval } from '@/api/storehouse/index'
-
+import { percentage_Get, percentage_Approval } from '@/api/percentage/index'
+import PercentageTable from './PercentageTable.vue'
+import {
+  royalty,
+  columnsRemit,
+  labelsInvoice
+} from '@/hooks/useTablePublic'
 interface InfoType {
   Id: number
   T_State: number
   T_approver: string
   T_approver_name: string
+  T_recoveries_money: number
+  T_contract_money: number
   T_customer: string
   T_date: string
   T_money: number
   T_number: string
+  T_uuid_name:string
   T_out: number
   T_pdf: string
   T_remark: string
@@ -96,13 +104,17 @@ const snColumns = [
   { type: 'index', label: '序号', width: 80, align: 'center ' },
   { label: 'SN', prop: 'sn', align: 'center ' }
 ]
-
+const tableDatalty = ref<any[]>([])//提成
 const getStorehouseContractGet = async () => {
-  const res: any = await Storehouse_Contract_Get({ User_tokey: globalStore.GET_User_tokey, T_number: route.params.id })
+  const res: any = await percentage_Get({ User_tokey: globalStore.GET_User_tokey, T_id: route.params.id })
+
+  console.log('提成详情', route.params, res)
   if (res.Code === 200) {
     info.value = res.Data
-    const { T_Product, T_invoice, T_recoveries } = res.Data
+    const { T_Product, T_remit, T_invoice, T_recoveries,T_item } = res.Data
     tableData.value = T_Product
+    tableDatalty.value = T_item
+    T_remit && InvoiceRef.value?.setMoneyDeatil(T_remit)
     invoiceTableData.value = T_invoice
     recoveriesTableData.value = T_recoveries
     if (!isVerify.value && T_Product) {
@@ -116,14 +128,15 @@ const getStorehouseContractGet = async () => {
 const previewPdf = (str: string) => window.open(str)
 
 const contractApproval = async (state: number) => {
-  const res: any = await Storehouse_Contract_Approval({
+  const res: any = await percentage_Approval({
     User_tokey: globalStore.GET_User_tokey,
-    T_number: route.params.id,
+    T_id: route.params.id,
     T_state: state
   })
   if (res.Code === 200) {
     ElMessage.success('审核成功！！')
     getStorehouseContractGet()
+    router.back()
   }
 }
 const getState = (val: number, type: string) => {
@@ -163,31 +176,43 @@ onMounted(() => {
 onUnmounted(() => {
   isSale.value = false
 })
+
+const InvoiceRef = ref<InstanceType<typeof PercentageTable> | null>(null)
+
 </script>
 <template>
   <div class="contract-detail">
     <div class="info">
       <h1>
-        详情<span v-if="isVerify"> - {{ getState(info?.T_State!, 'T_State') }}</span>
+        {{ route.params.titles }}
       </h1>
       <el-divider />
       <div class="content">
         <el-row>
           <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>合同编号</span></el-col>
-          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
-            ><span>{{ info?.T_number! }}</span></el-col
-          >
+          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"><span>{{ info?.T_number! }}</span></el-col>
         </el-row>
         <el-row v-if="isVerify">
           <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>客户名称</span></el-col>
-          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
-            ><span>{{ info?.T_customer! }}</span></el-col
-          >
+          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"><span>{{ info?.T_customer! }}</span></el-col>
+        </el-row>
+        <el-row v-if="isVerify">
+          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>合同金额</span></el-col>
+          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"><span>{{ info?.T_contract_money! }}</span></el-col>
+        </el-row>
+        <el-row v-if="isVerify">
+          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>回款金额</span></el-col>
+          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"><span>{{ info?.T_recoveries_money! }}</span></el-col>
+        </el-row>
+        <el-row v-if="isVerify">
+          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>提成类型</span></el-col>
+          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
+            <span>{{ info?.T_type! == 1 ? '验证实施' : '报告编写' }}</span>
+          </el-col>
         </el-row>
         <el-row>
-          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"
-            ><span>{{ isVerify ? '产品' : '验证' }}明细</span></el-col
-          >
+          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2">
+            <span>产品明细</span></el-col>
           <el-col :span="21">
             <el-table border stripe :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle">
               <template v-for="item in columns" :key="item.prop">
@@ -198,17 +223,13 @@ onUnmounted(() => {
                       <el-tag v-else type="success" effect="dark">否</el-tag>
                     </span>
                     <ImageCom v-if="item.prop === 'T_product_img'" :src="row.T_product_img" />
-                    <el-tooltip
-                      v-if="item.prop === 'T_product_model'"
-                      effect="dark"
-                      :content="row.T_product_model"
-                      placement="bottom"
-                    >
+                    <el-tooltip v-if="item.prop === 'T_product_model'" effect="dark" :content="row.T_product_model"
+                      placement="bottom">
                       {{ row.T_product_model }}
                     </el-tooltip>
                   </template>
                 </el-table-column>
-                <el-table-column v-bind="item" v-if="item.fixed === 'right'">
+                <!-- <el-table-column v-bind="item" v-if="item.fixed === 'right'">
                   <template #default="{ row }">
                     <el-button
                       type="primary"
@@ -217,134 +238,58 @@ onUnmounted(() => {
                       >查看</el-button
                     >
                   </template>
-                </el-table-column>
+                </el-table-column> -->
               </template>
             </el-table>
           </el-col>
         </el-row>
-        <el-row v-if="isVerify">
-          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>业务日期</span></el-col>
-          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
-            <span>{{ info?.T_date! }}</span></el-col
-          >
-        </el-row>
-
-        <el-row>
-          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>合同金额</span></el-col>
-          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
-            <el-text type="danger">{{ info?.T_money! }}￥</el-text>
-          </el-col>
-        </el-row>
-        <el-row v-if="!isVerify">
-          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>优惠金额</span></el-col>
-          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
-            <el-text type="danger">{{ info?.T_discount! }}￥</el-text>
-          </el-col>
-        </el-row>
-        <el-row v-if="!isVerify">
-          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>签订时间</span></el-col>
-          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
-            <span>{{ info?.T_date! }}</span></el-col
-          >
-        </el-row>
-        <el-row v-if="!isVerify">
-          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>起始时间</span></el-col>
-          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
-            <span>{{ info?.T_start_date! }}</span></el-col
-          >
-        </el-row>
-        <el-row v-if="!isVerify">
-          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>终止时间</span></el-col>
-          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
-            <span>{{ info?.T_end_date! }}</span></el-col
-          >
-        </el-row>
-
         <el-row>
-          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>项目</span></el-col>
-          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
-            <span>{{ info?.T_project }}</span>
+          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2">
+            <span>提成明细：</span></el-col>
+          <el-col :span="21">
+            <el-table border stripe :data="tableDatalty" style="width: 100%"
+              :header-cell-style="{ background: '#dedfe0', height: '50px' }">
+              <template v-for="item in royalty" :key="item.prop">
+                <el-table-column v-bind="item">
+                  <template #default="{ row }" v-if="item.prop === item.name">
+                    <div v-if="item.prop === 'T_priceNum'">{{ Number(row.T_num) * Number(row.T_price) }}</div>
+                  </template>
+                </el-table-column>
+              </template>
+            </el-table>
           </el-col>
         </el-row>
-
-        <el-row v-if="isVerify">
-          <!-- 1-未出库 2-已部分出库 3-已全部出库 -->
-          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>出库状态</span></el-col>
-          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
-            ><span>{{ getState(info?.T_out!, 'T_out') }}</span></el-col
-          >
-        </el-row>
-
         <el-row v-if="isVerify">
-          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"
-            ><span v-if="isVerify">经办人</span><span v-else>合同负责人</span></el-col
-          >
-          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
-            ><span>{{ info?.T_submit_name! }}</span></el-col
-          >
-        </el-row>
-
-        <el-row>
-          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>合同备注</span></el-col>
-          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
-            ><span>{{ info?.T_remark! }}</span></el-col
-          >
-        </el-row>
-
-        <el-row>
-          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>附件</span></el-col>
-          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
-            ><span v-if="!info?.T_pdf!">无</span>
-            <el-button v-else type="primary" @click="previewPdf(info?.T_pdf!)">查看附件</el-button></el-col
-          >
+          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>提成金额</span></el-col>
+          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
+            <span>{{ info?.T_money! }}</span></el-col>
         </el-row>
 
         <el-row>
-          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>回款明细</span></el-col>
-          <el-col :span="21">
-            <el-table
-              border
-              stripe
-              :data="recoveriesTableData"
-              style="width: 100%"
-              :header-cell-style="headerCellStyle"
-            >
-              <el-table-column v-bind="item" v-for="item in columnsRecoveries" :key="item.prop"></el-table-column>
-            </el-table>
-          </el-col>
-        </el-row>
-
-        <el-row v-if="isVerify">
-          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>未回款金额</span></el-col>
+          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>提成人员</span></el-col>
           <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5">
-            <el-text type="danger">{{ info?.T_no_recoveries_money! }}￥</el-text>
+            <div>{{ info?.T_uuid_name! }}</div>
           </el-col>
         </el-row>
-
         <el-row>
-          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>开票明细</span></el-col>
+          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>打款明细</span></el-col>
           <el-col :span="21">
-            <el-table border stripe :data="invoiceTableData" style="width: 100%" :header-cell-style="headerCellStyle">
-              <el-table-column v-bind="item" v-for="item in columnsInvoice" :key="item.prop"></el-table-column>
-            </el-table>
+            <PercentageTable ref="InvoiceRef" :columns="columnsRemit" :showTable="false" title="打款明细" :labels="labelsInvoice">
+              <template #add="{ AddDetail }">
+                <el-button type="primary" @click="AddDetail">
+                  <el-icon>
+                    <Plus />
+                  </el-icon><span style="margin-left: 6px">添加</span>
+                </el-button>
+              </template>
+            </PercentageTable>
           </el-col>
         </el-row>
-        <el-row v-if="isVerify">
-          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>未开票金额</span></el-col>
-          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
-            ><el-text type="danger">{{ info?.T_no_invoice_money! }}￥</el-text></el-col
-          >
-        </el-row>
       </div>
-
       <el-divider />
       <div class="submit">
-        <el-button v-if="info?.T_State === 3 && isSale" type="danger" round @click="contractApproval(2)"
-          >审核不通过</el-button
-        >
-        <el-button v-if="info?.T_State === 3 && isSale" type="success" round @click="contractApproval(1)"
-          >审核通过</el-button
-        >
+        <el-button v-if="route.params.titles=='审核'" type="danger" round @click="contractApproval(3)">审核不通过</el-button>
+        <el-button v-if="route.params.titles=='审核'" type="success" round @click="contractApproval(2)">审核通过</el-button>
         <el-button type="primary" round @click="router.back()">返回</el-button>
       </div>
     </div>
@@ -364,22 +309,28 @@ onUnmounted(() => {
   height: 100%;
   font-weight: bold;
   color: var(--el-text-color-secondary);
+
   .info {
     height: 100%;
     padding: 20px;
+
     h1 {
       font-size: 24px;
+
       span {
         color: #f56c6c;
       }
     }
+
     & .content {
       height: calc(100% - 72px - 25px - 40px);
       overflow-y: auto;
+
       .el-row {
         margin-bottom: 16px;
       }
     }
+
     .submit {
       display: flex;
       justify-content: center;

src/views/storehouse/sales/PercentageForm.vue

@@ -0,0 +1,377 @@
+<script setup lang="ts">
+import {
+  columns,
+  royalty,
+  ContractFormType,
+  useTablePublic,
+  columnsRemit,
+  labelsInvoice
+} from '@/hooks/useTablePublic'
+import {
+  Storehouse_Contract_Gen_Number
+} from '@/api/storehouse/index'
+
+import { percentage_Get,percentage_Remit} from '@/api/percentage/index'
+
+import { ElMessage } from 'element-plus'
+import PercentageTable from './PercentageTable.vue'
+import { ref, reactive, nextTick } from 'vue'
+import Drawer from '@/components/Drawer/index.vue'
+import { Delete } from '@element-plus/icons-vue'
+import Upload from '@/components/Upload/index.vue'
+import ImageCom from '@/components/Image/index.vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import ContractUser from '@/views/storehouse/outStock/receiveUser.vue'
+import InStorageProduct from '@/views/storehouse/inventory/InStorageProduct.vue'
+import { json } from 'stream/consumers'
+
+const isNew = ref(true)
+const isProduct = ref(false)
+const tableData = ref<any[]>([])
+const tableDatalty = ref<any[]>([])//提成
+
+let selectProductData: any[] = []
+const formLabelWidth = ref('120px')
+const { resetForm, globalStore, validate_T_product } = useTablePublic()
+const ruleFormRef = ref<FormInstance>()
+const contractNumberLoading = ref(false)
+const User_tokey = globalStore.GET_User_tokey
+const drawerRef = ref<InstanceType<typeof Drawer> | null>(null)
+const uploadRef = ref<InstanceType<typeof Upload> | null>(null)
+const receiveUserdialog = ref<InstanceType<typeof ContractUser> | null>(null)
+const RecoveriesRef = ref<InstanceType<typeof PercentageTable> | null>(null)
+const InvoiceRef = ref<InstanceType<typeof PercentageTable> | null>(null)
+
+const rules = reactive<FormRules>({
+  T_number: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
+  T_customer: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
+  T_type: [{ required: true, message: '请选择合同类型', trigger: 'blur' }],
+  T_product: [{ validator: validate_T_product, trigger: 'blur' }],
+  T_money: [{ required: true, message: '请输入合同金额', trigger: 'blur' }],
+  T_discount: [{ required: true, message: '请输入优惠金额', trigger: 'blur' }],
+
+  T_date: [{ required: true, message: '请选择签订时间', trigger: 'blur' }],
+  T_submit: [{ required: true, message: '请选择合同负责人', trigger: 'change' }],
+  T_submit_name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }]
+})
+
+const callbackDrawer = (done: () => void) => {
+  closeCancle()
+  done()
+}
+
+// 父级方法
+const emit = defineEmits<{ (event: 'onTableList'): void }>()
+
+const form = reactive<ContractFormType>({
+  T_uuid: '',
+  T_type: '',
+  T_number: '',
+  T_customer: '',
+  T_product: '',
+  T_money: '',
+  T_uuid_name:'',
+  T_discount: '',
+  T_date: '',
+  T_remark: '',
+  T_pdf: '',
+  T_submit: '',
+  T_recoveries: '',
+  T_remit: '',
+  T_invoice:'',
+  T_submit_name: ''
+})
+
+const openDrawer = (type: string, row?: any) => {
+  isNew.value = type === 'new' ? true : false
+  if (!isNew.value) {
+    nextTick(() => {
+      editDataEcho(row)
+    })
+  }
+  drawerRef.value?.openDrawer()
+}
+// edit data echo
+const editDataEcho = async (row: any) => {
+  form.T_uuid = row.T_submit
+  form.T_pdf = row.T_pdf
+  form.T_date = row.T_date
+  form.T_money = row.T_money
+  form.T_discount = row.T_discount
+  form.T_uuid_name = row.T_uuid_name
+
+  form.T_submit = row.T_submit_name
+  form.T_number = row.T_number
+  form.T_customer = row.T_customer
+
+  const res: any = await percentage_Get({
+    User_tokey,
+    T_id: row.Id
+  })
+  if (res.Code === 200) {
+    const { T_Product, T_remit, T_recoveries, T_remark,T_item } = res.Data
+    form.T_remark = T_remark
+    T_Product && (tableData.value = T_Product.map((item: any) => {
+      item.Id = item.T_product_id
+      item.T_img = item.T_product_img
+      item.T_name = item.T_product_class_name 
+      item.T_class_name = item.T_product_name
+      item.T_model = item.T_product_model
+      item.T_spec = item.T_product_spec
+      item.T_relation_sn = item.T_product_relation_sn
+      item.count = item.T_product_total
+      item.T_product_out = item.T_product_out
+      return item
+    }))
+    tableDatalty.value = T_item
+    selectProductData = tableData.value
+    T_remit && InvoiceRef.value?.setMoneyDeatil(T_remit)
+    T_recoveries && RecoveriesRef.value?.setMoneyDeatil(T_recoveries)
+    blurHandle()
+  }
+}
+
+const blurHandle = () => {
+  form.T_product = tableData.value.map(item => {
+    if (!item.count) return undefined
+    return `${item.Id},${item.count}|`
+  })
+}
+const deleteProduct = (row: any) => {
+  tableData.value = tableData.value.filter(item => item.Id !== row.Id)
+
+  // 设置产品的选中
+  drawerProductRef.value?.selectTableChange(row)
+}
+
+const getMontageStr = (arr: any[], value1: string, value2: string): string => {
+  let str = ''
+  arr.forEach(item => {
+    str += `${item[value1]},${item[value2]}|`
+  })
+  return str
+}
+
+const getFomrParams = () => {
+  const recoveriesData = RecoveriesRef.value?.getMoneyDeatil()
+  const invoiceData = InvoiceRef.value?.getMoneyDeatil()
+  if (recoveriesData?.length) form.T_recoveries = getMontageStr(recoveriesData, 'T_date', 'T_money')
+  if (invoiceData?.length) form.T_remit = getMontageStr(invoiceData, 'T_date', 'T_money')
+  const product = getMontageStr(tableData.value, 'Id', 'count')
+  const params = {
+    ...form,
+    User_tokey,
+    T_submit: form.T_uuid,
+    T_product: product
+  }
+  return params
+}
+
+const props = defineProps({
+  ContForm: {
+    type: Object,
+    default: () => {},
+  },
+})
+const AddContract = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate(async valid => {
+    if (valid) {
+      let arr:any = InvoiceRef.value?.getMoneyDeatil()
+      let mapArr:any = []
+      arr?.forEach((item:any)=>{mapArr.push( item.T_date + ',' + item.T_money)})
+      const reslut:any = await percentage_Remit({
+        T_id:props.ContForm.id,
+        T_remit:mapArr.join('|')
+      })
+      console.log('添加123456',reslut)
+      if (reslut.Code === 200) {
+        ElMessage.success(`打款明细调整成功！！`)
+        nextTick(() => {
+          closeCancle()
+          emit('onTableList')
+        })
+      }
+    } else false
+  })
+}
+
+const drawerProductRef = ref<InstanceType<typeof InStorageProduct> | null>(null)
+/**
+ * 添加产品
+ */
+const AddProductionDetailed = () => {
+  isProduct.value = true
+  nextTick(() => {
+    drawerProductRef.value?.openDrawer()
+  })
+}
+/**
+ * 产品选择 是否
+ */
+const ProductselectionChange = (row: any) => {
+  const index = tableData.value.findIndex((item: any) => item.Id === row.Id)
+  if (index === -1) {
+    row.count = ''
+    tableData.value.push(row)
+  } else {
+    tableData.value.splice(index, 1)
+  }
+}
+/**
+ * 全选
+ */
+const ProductSelectionAllChange = (selection: any[]) => (tableData.value = selection)
+/**
+ * 生成合同编号
+ */
+const getContractNumber = async () => {
+  contractNumberLoading.value = true
+  const res: any = await Storehouse_Contract_Gen_Number({ User_tokey }).catch(() => {
+    contractNumberLoading.value = false
+  })
+  if (res.Code === 200) {
+    contractNumberLoading.value = false
+    form.T_number = res.Data
+  }
+}
+/**
+ * 合同负责人
+ */
+const selectApprover = () => receiveUserdialog.value?.openDrawer()
+const getReceiveInfo = ({ T_uuid, T_name }: { T_uuid: string; T_name: string }) => {
+  form.T_submit = T_name
+  form.T_uuid = T_uuid
+}
+const closeCancle = () => {
+  resetForm(ruleFormRef.value)
+  isNew.value = isProduct.value = false
+  tableData.value = []
+  selectProductData = []
+  drawerProductRef.value?.clearSelection()
+  RecoveriesRef.value?.clearDetail()
+  InvoiceRef.value?.clearDetail()
+  drawerRef.value?.closeDrawer()
+}
+defineExpose({
+  openDrawer
+})
+</script>
+
+<template>
+  <div class="contract-form">
+    <Drawer ref="drawerRef" :handleClose="callbackDrawer" size="80%">
+      <template #header="{ params }">
+        <h4 :id="params.titleId" :class="params.titleClass">打款明细</h4>
+      </template>
+      <el-form ref="ruleFormRef" :model="form" :rules="rules">
+        <el-form-item label="合同编号：" :label-width="formLabelWidth" prop="T_number">
+          <div>
+            <el-input v-model="form.T_number" :disabled="!isNew" placeholder="请输入合同编号" class="w-50" />
+          </div>
+        </el-form-item>
+        <el-form-item label="提成类型：" :label-width="formLabelWidth" prop="T_customer">
+          {{ form.T_type == 1 ? '验证实施' : '报告编写' }}
+        </el-form-item>
+        <el-form-item label="产品明细：" :label-width="formLabelWidth" prop="T_product">
+          <el-table border stripe :data="tableData" style="width: 100%"
+            :header-cell-style="{ background: '#dedfe0', height: '50px' }">
+            <template v-for="item in columns" :key="item.prop">
+              <el-table-column v-bind="item" v-if="item.fixed !== 'right'">
+                <template #header v-if="item.prop === 'count'">
+                  <span style="color: red">*数量</span>
+                </template>
+                <template #default="{ row }" v-if="item.prop === item.name">
+                  <!-- <el-input v-if="item.prop === 'count'" v-model.number="row.count" type="text" autocomplete="off" @blur="blurHandle" /> -->
+                  <div v-if="item.prop === 'count'">{{ row.count }}</div>
+                  <span v-if="item.prop === 'T_relation_sn'">
+                    <el-tag v-if="row.T_relation_sn === 1" effect="dark">是</el-tag>
+                    <el-tag v-else type="success" effect="dark">否</el-tag>
+                  </span>
+                  <ImageCom v-if="item.prop === 'T_img'" :src="row.T_img" />
+                </template>
+              </el-table-column>
+            </template>
+          </el-table>
+        </el-form-item>
+        <el-form-item label="提成明细：" :label-width="formLabelWidth" prop="T_product">
+          <el-table border stripe :data="tableDatalty" style="width: 100%"
+            :header-cell-style="{ background: '#dedfe0', height: '50px' }">
+            <template v-for="item in royalty" :key="item.prop">
+              <el-table-column v-bind="item">
+                <template #default="{ row }" v-if="item.prop === item.name">
+                  <div v-if="item.prop === 'T_priceNum'">{{Number(row.T_num) * Number(row.T_price)}}</div>
+                </template>
+              </el-table-column>
+            </template>
+          </el-table>
+        </el-form-item>
+        <el-form-item label="提成金额：" :label-width="formLabelWidth" prop="T_customer">
+          {{ form.T_money}}
+        </el-form-item>
+        <el-form-item label="提成人员：" :label-width="formLabelWidth" prop="T_customer">
+          {{ form.T_uuid_name}}
+        </el-form-item>
+        <el-form-item label="打款明细：" :label-width="formLabelWidth" prop="T_remit">
+          <PercentageTable ref="InvoiceRef" :columns="columnsRemit" :showTable="props.ContForm.showTable?true:false" title="打款明细" :labels="labelsInvoice">
+            <template #add="{ AddDetail }">
+              <el-button type="primary" @click="AddDetail">
+                <el-icon>
+                  <Plus />
+                </el-icon><span style="margin-left: 6px">添加</span>
+              </el-button>
+            </template>
+          </PercentageTable>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div>
+          <el-divider border-style="dashed" />
+          <div class="btn">
+            <el-button @click="closeCancle">取消</el-button>
+            <el-button v-if="isNew" color="#626aef" @click="AddContract(ruleFormRef)">提交</el-button>
+            <el-button v-else color="#626aef" @click="AddContract(ruleFormRef)">修改</el-button>
+          </div>
+        </div>
+      </template>
+    </Drawer>
+    <ContractUser ref="receiveUserdialog" @onUserInfo="getReceiveInfo" title="合同负责人" />
+    <InStorageProduct v-if="isProduct" ref="drawerProductRef" :selectProductData="selectProductData"
+      @ontableData="ProductselectionChange" @ontableDataAll="ProductSelectionAllChange"></InStorageProduct>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.contract-form {
+  :deep(.el-table--border .el-table__cell) {
+    border-right: 0;
+  }
+
+  :deep(.table-header),
+  :deep(.card) {
+    border: 0;
+  }
+
+  .box-card {
+    height: 100%;
+
+    :deep(.el-card__body) {
+      height: calc(100% - 70px);
+    }
+  }
+
+  .btn {
+    margin-top: 32px;
+    display: flex;
+    justify-content: center;
+
+    .el-button {
+      padding: 0 32px;
+    }
+  }
+
+  .w-50 {
+    width: 21.5rem;
+  }
+}
+</style>

src/views/storehouse/sales/PercentageTable.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { ref, reactive, nextTick } from 'vue'
+import { generateRandom } from '@/utils/common'
+import Drawer from '@/components/Drawer/index.vue'
+import { Delete, Edit } from '@element-plus/icons-vue'
+import { useTablePublic } from '@/hooks/useTablePublic'
+import type { FormInstance, FormRules } from 'element-plus'
+import { validate_float } from '@/views/salary/salary/relus'
+import { ColumnProps } from '@/components/TableBase/interface/index'
+
+const isNew = ref(true)
+const tableData = ref<any[]>([])
+const ruleFormRef = ref<FormInstance>()
+const drawerRef = ref<InstanceType<typeof Drawer> | null>(null)
+const { resetForm } = useTablePublic()
+const form = ref({
+  id: '',
+  T_date: '',
+  T_money: ''
+})
+const rules = reactive<FormRules>({
+  T_date: [{ required: true, message: '请输入物联网卡号', trigger: 'blur' }],
+  T_money: [{ required: true, validator: validate_float(), trigger: 'blur' }]
+})
+
+const callbackDrawer = (done: () => void) => {
+  done()
+  resetForm(ruleFormRef.value)
+}
+const AddMoneyDetailed = (type: string, row?: any) => {
+  isNew.value = type === 'edit' ? false : true
+  if (type === 'edit') {
+    form.value = { ...row }
+  }
+  drawerRef.value?.openDrawer()
+}
+const AddMoney = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate(async valid => {
+    if (valid) {
+      if (isNew.value) {
+        tableData.value.push({ ...form.value, id: generateRandom() })
+      } else {
+        const index = tableData.value.findIndex(item => item.id === form.value.id)
+        tableData.value[index] = { ...form.value }
+      }
+      nextTick(() => {
+        isNew.value = true
+        resetForm(ruleFormRef.value)
+        drawerRef.value?.closeDrawer()
+      })
+    }
+  })
+}
+const deleteMoneyDeatil = (row: any) => {
+  
+  tableData.value = tableData.value.filter((item: any) => item.id !== row.id)
+}
+
+const props = defineProps<{ columns: ColumnProps[]; title: string; labels: any,showTable:boolean }>()
+const title = ref(props.title)
+
+const getMoneyDeatil = () => tableData.value
+const setMoneyDeatil = (dataArr: any[]) => {
+  tableData.value = dataArr.map((item: any) => {
+    item.id = generateRandom()
+    return item
+  })
+}
+const clearDetail = () => (tableData.value = [])
+defineExpose({
+  clearDetail,
+  getMoneyDeatil,
+  setMoneyDeatil
+})
+</script>
+<template>
+  <div class="table-detail">
+    <el-table border stripe :data="tableData" style="width: 100%" :header-cell-style="{ height: '50px' }">
+      <template v-for="item in columns" :key="item.prop">
+        <el-table-column v-bind="item" v-if="item.fixed !== 'right'"></el-table-column>
+        <el-table-column v-bind="item" v-if="item.fixed === 'right' && props.showTable">
+          <template #default="{ row }">
+            <el-button link type="primary" size="small" :icon="Edit" @click="AddMoneyDetailed('edit', row)" >编辑</el-button >
+            <el-button link type="danger" size="small" :icon="Delete" @click="deleteMoneyDeatil(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </template>
+      <template #append v-if="props.showTable">
+        <slot name="add" :AddDetail="AddMoneyDetailed"></slot>
+      </template>
+    </el-table>
+    <Drawer ref="drawerRef" :handleClose="callbackDrawer">
+      <template #header="{ params }">
+        <h4 :id="params.titleId" :class="params.titleClass">{{ isNew ? '添加' : '编辑' }} - {{ title }}</h4>
+      </template>
+      <el-form ref="ruleFormRef" :model="form" :rules="rules">
+        <el-form-item :label="labels['date']" label-width="100px" prop="T_date">
+          <el-date-picker
+            v-model="form.T_date"
+            class="my-date-picker"
+            style="width: 100%"
+            type="date"
+            placeholder="打款时间"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+          />
+        </el-form-item>
+        <el-form-item :label="labels['money']" label-width="100px" prop="T_money">
+          <el-input v-model="form.T_money" type="text" autocomplete="off" placeholder="打款金额" />
+        </el-form-item>
+        <el-form-item label-width="100px">
+          <div class="btn">
+            <el-button v-if="isNew" color="#626aef" @click="AddMoney(ruleFormRef)">添加</el-button>
+            <el-button v-else color="#626aef" @click="AddMoney(ruleFormRef)">修改</el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+    </Drawer>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.table-detail {
+  width: 100%;
+}
+.el-form-item {
+  margin-bottom: 18px;
+}
+.btn {
+  margin-top: 32px;
+  display: flex;
+  justify-content: center;
+  .el-button {
+    padding: 0 32px;
+  }
+}
+</style>