230912

components.d.ts

@@ -43,6 +43,7 @@ declare module '@vue/runtime-core' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']

src/api/Reimburse/index.ts

@@ -0,0 +1,15 @@
+import $http from '../index'
+// 列表 === 我的报销列表
+export const Reimburse_UserList = (params: any) => $http.post('/testapi/salary/Reimburse/User/List', params)
+
+
+
+//报销列表
+export const Reimburse_List = (params: any) => $http.post('/testapi/salary/Reimburse/List', params)
+
+//报销详情
+export const Reimburse_Get = (params: any) => $http.post('/testapi/salary/Reimburse/Get', params)
+
+export const Reimburse_Edit = (params: any) => $http.post('/testapi/salary/Reimburse/Edit_Remit', params)
+
+

src/api/ReimburseMy/index.ts

@@ -9,6 +9,9 @@ export const ReimburseMy_Del = (params: any) => $http.post('/testapi/salary/Reim
 //添加报销
 export const ReimburseMy_Add = (params: any) => $http.post('/testapi/salary/Reimburse/Add', params)
 
+//编辑报销
+export const ReimburseMy_Edit = (params: any) => $http.post('/testapi/salary/Reimburse/Edit', params)
+
 //添加报销
 export const ReimburseMy_Get = (params: any) => $http.post('/testapi/salary/Reimburse/Get', params)
 
@@ -18,3 +21,7 @@ export const ReimburseMy_FeeType = (params: any) => $http.post('/testapi/salary/
 //费用明细列表
 export const ReimburseMy_FeeDetails = (params: any) => $http.post('/testapi/salary/Reimburse/FeeDetails/List', params)
 
+//提交审核
+export const ReimburseMy_Submit = (params: any) => $http.post('/testapi/salary/Reimburse/Submit_Audit', params)
+
+

src/api/apiMapList.ts

@@ -1 +1 @@
-export const mapList = ["/testapi/salary/Reimburse/Add"]
+export const mapList = ["/testapi/salary/Reimburse/Add","/testapi/salary/Reimburse/Edit"]

src/api/index.ts

@@ -46,7 +46,7 @@ class RequestHttp {
         // if (globalStore.GET_User_tokey) {
         //   config.headers['User_tokey'] = globalStore.GET_User_tokey
         // }
-        console.log('请求体',config);
+        // console.log('请求体',config);
         // config.data = Qs(config.data)
         mapList.includes(config.url as string)?config.headers['Content-Type'] = ContentType.JSON:config.headers['Content-Type'] = ContentType.URLENCODED
         return config

src/plugins/reimbursemyData.js

@@ -0,0 +1,66 @@
+export default dataList = [{
+    mapPick: [],
+    selectData:[],
+    T_trip_start_time: "",
+    T_trip_end_time: "",
+    T_trip_origin: "",
+    T_trip_terminus: "",
+    T_fee_type: null,
+    T_fee_details: null,
+    T_money: 0,
+    T_reasons: "",
+    T_project: "",
+    T_img: ""
+},{
+    mapPick: [],
+    selectData:[],
+    T_trip_start_time: "",
+    T_trip_end_time: "",
+    T_trip_origin: "",
+    T_trip_terminus: "",
+    T_fee_type: null,
+    T_fee_details: null,
+    T_money: 0,
+    T_reasons: "",
+    T_project: "",
+    T_img: ""
+},{
+    mapPick: [],
+    selectData:[],
+    T_trip_start_time: "",
+    T_trip_end_time: "",
+    T_trip_origin: "",
+    T_trip_terminus: "",
+    T_fee_type: null,
+    T_fee_details: null,
+    T_money: 0,
+    T_reasons: "",
+    T_project: "",
+    T_img: ""
+},{
+    mapPick: [],
+    selectData:[],
+    T_trip_start_time: "",
+    T_trip_end_time: "",
+    T_trip_origin: "",
+    T_trip_terminus: "",
+    T_fee_type: null,
+    T_fee_details: null,
+    T_money: 0,
+    T_reasons: "",
+    T_project: "",
+    T_img: ""
+},{
+    mapPick: [],
+    selectData:[],
+    T_trip_start_time: "",
+    T_trip_end_time: "",
+    T_trip_origin: "",
+    T_trip_terminus: "",
+    T_fee_type: null,
+    T_fee_details: null,
+    T_money: 0,
+    T_reasons: "",
+    T_project: "",
+    T_img: ""
+}]

src/views/salary/Reimburse/Reimburse.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import { ElMessage } from 'element-plus'
-
 import ReimburseFrom from './ReimburseFrom.vue'
 
-import { User_List } from '@/api/user/index'
 import { GlobalStore } from '@/stores/index'
-import { Salary_Get } from '@/api/salary/index'
+import { Reimburse_UserList } from '@/api/Reimburse/index'
 import TableBase from '@/components/TableBase/index.vue'
 import { ColumnProps } from '@/components/TableBase/interface/index'
 import { useTablePublic } from '@/hooks/useTablePublic'
 
+const data = reactive({
+  fromDatas:{T_uuid:''}
+})
+
+
+
 let date = new Date()
 const year = date.getFullYear()
 const month = date.getMonth()
@@ -21,7 +25,7 @@ const salaryFromData = reactive({
 })
 const globalStore = GlobalStore()
 const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
-const salaryFromRef = ref<InstanceType<typeof ReimburseFrom> | null>(null)
+const ReimburseFromRef = ref<InstanceType<typeof ReimburseFrom> | null>(null)
 const { tableRowClassName } = useTablePublic()
 const tableRowClassNameHandle = (data: any): any => tableRowClassName(data.row.T_uuid, salaryFromData.T_uuid)
 
@@ -48,31 +52,18 @@ const searchHandle = () => {
 }
 
 const getSalaryParams = (row: any) => {
+  console.log('点击222',row.T_uuid)
   userInfo.name = row.T_name
   userInfo.T_dept = row.T_dept_name
   userInfo.T_post = row.T_post_name
 
   salaryFromData.T_uuid = row.T_uuid
+  data.fromDatas.T_uuid = row.T_uuid //yj
   getSalary()
 }
+
 const getSalary = async () => {
-  let T_date = `${salaryFromData.year}-${salaryFromData.month}`
-  const res = await Salary_Get({ T_uuid: salaryFromData.T_uuid, T_date })
-  salaryFromRef.value?.DataEcho(res.Data)
-}
-const salarDateMonthChange = (val: string) => {
-  if (!val) return
-  if (!salaryFromData.T_uuid) {
-    ElMessage.warning('请选择员工!!!')
-  }
-  getSalary()
-}
-const salarDateYearChange = (val: string) => {
-  if (!val) return
-  if (!salaryFromData.T_uuid) {
-    ElMessage.warning('请选择员工!!!')
-  }
-  getSalary()
+  console.log('点击')
 }
 const userInfo = reactive({
   squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
@@ -88,25 +79,13 @@ const userInfo = reactive({
       <TableBase
         ref="TableRef"
         :columns="columns"
-        :requestApi="User_List"
+        :requestApi="Reimburse_UserList"
         :initParam="initParam"
         layout="prev, pager, next"
         :rowClick="getSalaryParams"
-        :tableRowClassName="tableRowClassNameHandle"
-      >
+        :tableRowClassName="tableRowClassNameHandle">
         <template #table-header>
           <el-row :gutter="24" class="input-suffix margin-left-0 margin-right-0">
-            <el-col :span="24" class="d-flex padding-left-0 padding-right-0" style="margin-bottom: 5px">
-              <span class="inline-flex">部门：</span>
-              <el-select v-model="searchs.T_dept" clearable placeholder="请选择部门">
-                <el-option
-                  v-for="item in globalStore.GET_Dept_List"
-                  :key="item.Id"
-                  :label="item.T_name"
-                  :value="item.Id"
-                />
-              </el-select>
-            </el-col>
             <el-col :span="24" class="d-flex padding-right-0 padding-left-0">
               <span class="inline-flex">姓名：</span>
               <el-input v-model="searchs.T_name" type="text" />
@@ -114,7 +93,7 @@ const userInfo = reactive({
             </el-col>
           </el-row>
         </template>
-      </TableBase>
+      </TableBase> 
     </div>
     <el-row class="h-100 f-1 margin-left-3">
       <el-col :span="24" class="h-100" style="overflow: hidden; display: flex; flex-direction: column">
@@ -132,7 +111,7 @@ const userInfo = reactive({
           </div>
         </el-card>
         
-        <ReimburseFrom ></ReimburseFrom>
+        <ReimburseFrom ref="ReimburseFromRef" :fromDatas="data.fromDatas"></ReimburseFrom>
       </el-col>
     </el-row>
   </div>

src/views/salary/Reimburse/ReimburseFrom.vue

@@ -3,47 +3,46 @@
     <el-card class="b-r m-b-3">
       <el-table :data="data.tableData" style="width: 100%" border>
         <el-table-column :show-overflow-tooltip="true" type="index" width="50" />
-        <el-table-column :show-overflow-tooltip="true" prop="date" label="ID" width="180" />
-        <el-table-column :show-overflow-tooltip="true" prop="address" label="报销总金额" width="180" />
-        <el-table-column :show-overflow-tooltip="true" prop="address" label="打款金额" width="180" />
-        <el-table-column :show-overflow-tooltip="true" prop="date" label="状态" width="150">
-          <el-tag>已审核</el-tag>
-          <el-tag>已部分打款</el-tag>
-          <el-tag>已全部打款</el-tag>
-          <el-tag class="ml-2" type="warning">待审核</el-tag>
-          <el-tag class="ml-2" type="danger">未提交审核</el-tag>
+        <el-table-column :show-overflow-tooltip="true" prop="Id" label="ID" width="80" />
+        <el-table-column :show-overflow-tooltip="true" prop="T_money" label="报销总金额" width="100" />
+        <el-table-column :show-overflow-tooltip="true" prop="T_remit" label="打款金额" width="100" />
+        <el-table-column :show-overflow-tooltip="true" prop="T_State" label="状态" width="150">
+          <template #default="scope">
+              <el-tag v-if="scope.row.T_State == 1" class="ml-2" type="danger">未提交审核</el-tag>
+              <el-tag v-if="scope.row.T_State == 2" class="ml-2" type="warning">待审核</el-tag>
+              <el-tag v-if="scope.row.T_State == 3">审核通过</el-tag>
+              <el-tag v-if="scope.row.T_State == 4" class="ml-2" type="danger">审核不通过</el-tag>
+              <el-tag v-if="scope.row.T_State == 5" type="warning">已部分打款</el-tag>
+              <el-tag v-if="scope.row.T_State == 6">已全部打款</el-tag>
+          </template>
         </el-table-column>
-        <el-table-column :show-overflow-tooltip="true" prop="name" label="提交日期" width="220" />
-        <el-table-column label="操作" fixed="right" min-width="320">
+        <el-table-column :show-overflow-tooltip="true" prop="T_date" label="提交日期" width="220" />
+        <el-table-column label="操作" fixed="right" min-width="100">
           <template #default="scope">
-            <el-button @click="showDrawer('det')">详情</el-button>
-            <el-button @click="showDrawer('edi')">编辑</el-button>
+            <el-button @click="showDrawer('det',scope.row)">详情</el-button>
+            <el-button @click="showDrawer('edi',scope.row)">编辑</el-button>
           </template>
         </el-table-column>
       </el-table>
-      <el-pagination v-model:current-page="data.currentPage" layout="total, sizes, prev, pager, next, jumper" :total="400"
-        @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top: 20px;" />
+      <el-pagination v-model:current-page="data.pages.page" layout="total, prev, pager, next, jumper" :total="data.total"
+      v-model:page-size="data.pages.page_z" @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top: 20px;" />
+
     </el-card>
 
-    <el-drawer v-model="data.drawer" :title="data.drawerTiti" direction="rtl" :before-close="handleClose" size="95%">
+    <el-drawer v-model="data.drawer" :title="data.drawerTiti" direction="rtl" :before-close="handleClose" size="100%">
       <el-form :model="data.formData" label-position="top">
-        <el-form-item label="报销总金额">
-          <div style="display: flex;">
-            <el-input v-model="cuntData" disabled style="flex: 1;" /><span style="padding-left: 20px;">元</span>
-          </div>
-        </el-form-item>
         <el-form-item label="报销明细">
-          <el-table :data="data.tableData" style="width: 100%">
+          <el-table :data="data.formData.T_reimburse_details" style="width: 100%">
             <el-table-column type="index" label="序号" width="70" />
             <el-table-column label="出差时间">
-              <el-table-column label="起" width="150">
+              <el-table-column label="起" width="120">
                 <template #default="scope">
-
+                  {{ scope.row.T_trip_start_time }}
                 </template>
               </el-table-column>
-              <el-table-column prop="city" label="止" width="150">
+              <el-table-column prop="city" label="止" width="120">
                 <template #default="scope">
-
+                  {{ scope.row.T_trip_end_time }}
                 </template>
               </el-table-column>
             </el-table-column>
@@ -51,60 +50,79 @@
             <el-table-column label="出差地点">
               <el-table-column label="起" width="150">
                 <template #default="scope">
-
+                  {{ scope.row.T_trip_terminus }}
                 </template>
               </el-table-column>
               <el-table-column prop="city" label="止" width="150">
                 <template #default="scope">
-
+                  {{ scope.row.T_trip_origin }}
                 </template>
               </el-table-column>
             </el-table-column>
 
 
-            <el-table-column prop="address" label="费用类型" width="150">
+            <el-table-column label="费用类型" width="150">
               <template #default="scope">
-
+                {{ scope.row.T_fee_type_name }}
               </template>
             </el-table-column>
-            <el-table-column prop="address" label="费用明细" width="150">
+            <el-table-column label="费用明细" width="150">
               <template #default="scope">
-
+                {{ scope.row.T_fee_details_name }}
               </template>
             </el-table-column>
-            <el-table-column prop="address" label="费用金额" width="150">
+            <el-table-column label="费用金额" width="100">
               <template #default="scope">
-
+                {{ scope.row.T_money }}
               </template>
             </el-table-column>
-            <el-table-column prop="address" label="费用事由" width="150">
+            <el-table-column label="费用事由" width="150">
               <template #default="scope">
-
+                {{ scope.row.T_reasons }}
               </template>
             </el-table-column>
-            <el-table-column prop="address" label="涉及项目" width="150">
+            <el-table-column label="涉及项目" width="150">
               <template #default="scope">
-
+                {{ scope.row.T_project }}
               </template>
             </el-table-column>
-
-            <el-table-column prop="address" label="附件" min-width="80">
-
+            <el-table-column label="附件" min-width="80">
+              <template #default="scope">
+                <img :src="scope.row.T_img" style="width: 50px;height: 50px;">
+              </template>
             </el-table-column>
           </el-table>
         </el-form-item>
+        <el-form-item label="报销总金额">
+          <div style="display: flex;">
+            <el-input v-model="data.formData.T_money" disabled style="flex: 1;" /><span style="padding-left: 20px;">元</span>
+          </div>
+        </el-form-item>
         <el-form-item label="打款明细">
-          <el-table :data="data.tableData" :header-cell-style="{ background: '#f5f7fa' }" border>
+          <el-table :data="data.formData.T_remit_detail" :header-cell-style="{ background: '#f5f7fa' }" border>
             <el-table-column type="index" label="序号" fixed width="70" />
-            <el-table-column prop="address" label="打款时间" width="300" />
-            <el-table-column prop="address" label="打款金额" />
-            <el-table-column prop="address" fixed="right" min-width="300">
+            <el-table-column label="打款时间" :width="data.drawerTiti == '编辑'?'300':''">
               <template #default="scope">
-                <el-button @click="newDel(scope)">删除</el-button>
+                <el-date-picker v-model="scope.row.T_time" type="date" value-format="YYYY-MM-DD" placeholder="打款时间" :disabled="data.drawerTiti == '详情'?true:false"/>
+              </template>
+           </el-table-column>
+           <el-table-column label="打款金额" :width="data.drawerTiti == '编辑'?'300':''">
+              <template #default="scope">
+                <el-input v-model="scope.row.T_money" placeholder="打款金额" :disabled="data.drawerTiti == '详情'?true:false" />
+              </template>
+           </el-table-column>
+            <el-table-column fixed="right" min-width="300" v-if="data.drawerTiti == '编辑'">
+              <template #default="scope">
+                <el-popconfirm title="删除当前明细，确定删除吗?" @confirm="newDel" width="235" 
+                confirm-button-text="立即删除" cancel-button-text="取消">
+                    <template #reference>
+                      <el-button>删除</el-button>
+                    </template>
+                  </el-popconfirm>
               </template>
             </el-table-column>
           </el-table>
-          <div class="newMingxi" @click="newAdd">
+          <div class="newMingxi" @click="newAdd" v-if="data.drawerTiti == '编辑'">
             <el-icon color="#409EFC" class="no-inherit">
               <Plus />
             </el-icon>
@@ -113,7 +131,7 @@
         </el-form-item>
       </el-form>
       <div class="demo-drawer__footer" v-if="data.drawerTiti == '编辑'">
-        <el-button type="primary">立即提交</el-button>
+        <el-button type="primary" @click="subFun">立即提交</el-button>
         <el-button @click="data.drawer = false">取消</el-button>
       </div>
     </el-drawer>
@@ -122,78 +140,127 @@
 </template>
 <script lang="ts" setup>
 import { reactive,computed ,watch} from "vue";
+import { Reimburse_Get,Reimburse_List ,Reimburse_Edit} from '@/api/Reimburse/index'
+import { ElMessage } from 'element-plus'
+
+// 接受父组件参数，配置默认值
+const props = defineProps<{
+  fromDatas:{
+    T_uuid:string
+  },
+}>()
+
 const data = reactive({
+  Id:null,
   currentPage: 1,
   drawer: false,
   drawerTiti: '',
   formData: {
-    name: ''
+    Id:null,
+    T_State:null,
+    T_date:null,
+    T_money:null,
+    T_reimburse_details:[{
+      Id:null,
+      T_State:null,
+      T_fee_details:null,
+      T_fee_details_name:null,
+      T_fee_type:null,
+      T_fee_type_name:null,
+      T_img:null,
+      T_money:null,
+      T_project:null,
+      T_reasons:null,
+      T_reimburse_id:null,
+      T_trip_end_time:null,
+      T_trip_origin:null,
+      T_trip_start_time:null,
+      T_trip_terminus:null,
+    }],
+    T_remit:null,
+    T_remit_detail:[{
+      T_time:'',
+      T_money:'',
+    }],
+    T_uid: null,
+    T_user_name:null,
   },
-  tableData: [
-    {
-      date: '2016-05-03',
-      name: 'Tom',
-      address:30.5,
-    },
-    {
-      date: '2016-05-02',
-      name: 'Tom',
-      address: 45,
-    },
-    {
-      date: '2016-05-04',
-      name: 'Tom',
-      address: 72,
-    },
-    {
-      date: '2016-05-01',
-      name: 'Tom',
-      address:62,
-    },
-  ]
+  pages:{//列表请求参数
+    page:1,
+    page_z:10
+  },
+  total:0,
+  tableData: []
 })
-//删除任务
-const newDel = (e: any) => {
-  data.tableData.splice(e.$index, 1)
+watch(() => props.fromDatas,cur => {
+  console.log('监听变化props.fromDatas',cur)
+  Reimburse_GetApi()
+},{deep:true})
+
+const Reimburse_GetApi = async ()=>{
+  const res:any = await Reimburse_List({
+    T_uuid:props.fromDatas.T_uuid,
+    ...data.pages
+  })
+  data.tableData = res.Data.Data
+  
+  data.total = res.Data.Num
 }
-watch(() => data.formData.name,cur => {
-    console.log('监听变化',cur)
-  }
-)
-const cuntData = computed(()=>{
-  let newData:any = []
-  data.tableData.forEach(item=>{
-    newData.push(item.address)
+
+//函数
+const subFun = async ()=>{
+  const arr = [...data.formData.T_remit_detail]
+  const arrMap:any = []
+  arr.forEach((item:any)=>{
+    arrMap.push(item.T_time + ',' + item.T_money)
   })
-  let sum = newData.reduce((a: any,b: any)=>a+b)
-  console.log('计算',newData,sum)
-  return sum
-})
+  const resIt:any = await Reimburse_Edit({T_id:data.Id,T_remit_detials:arrMap.join('|')+'|'}) 
+  if (resIt.Code==200){
+    ElMessage.success('ok，编辑成功')
+    ReimburseGet(data.Id)
+    data.drawer = false
+  }
+}
+
 
 //添加任务
 const newAdd = () => {
-  data.tableData.push({
-    date: '',
-    name: '',
-    address:0,
+  data.formData.T_remit_detail.push({
+    T_time:'',
+    T_money:'',
   })
 }
+//删除任务
+const newDel = (e: any) => {
+  data.formData.T_remit_detail.splice(e.$index, 1)
+}
+
+//详情api
+const ReimburseGet = async (Id:any)=>{
+  const resIt:any = await Reimburse_Get({T_id:Id})
+  resIt.Data.T_remit_detail==null?resIt.Data.T_remit_detail=[]:resIt.Data.T_remit_detail=resIt.Data.T_remit_detail
+  data.formData = resIt.Data
+}
+
 //显示弹窗
-const showDrawer = (e: string) => {
+const showDrawer = (e: string,obj:any) => {
+  console.log('obj',obj)
+  data.Id = obj.Id
   switch (e) {
     case 'det':
       data.drawer = true
       data.drawerTiti = '详情'
+      ReimburseGet(obj.Id)
       break;
     case 'edi':
       data.drawer = true
       data.drawerTiti = '编辑'
+      ReimburseGet(obj.Id)
       break;
     default:
       console.log('提交审核')
       break;
   }
-
 }
 //关闭窗口
 const handleClose = (e: any) => {
@@ -201,12 +268,14 @@ const handleClose = (e: any) => {
 }
 //跳转页
 const handleCurrentChange = (e: any) => {
-  console.log('跳转页', e);
+  data.pages.page = e
+  Reimburse_GetApi()
 }
 
 //每页多少条
 const handleSizeChange = (e: any) => {
-  console.log('每页多少条', e);
+  data.pages.page_z = e
+  Reimburse_GetApi()
 }
 </script>
 <style scoped lang="scss">

src/views/salary/ReimburseMy.vue

@@ -20,20 +20,27 @@
                     </template>
                 </el-table-column>
                 <el-table-column :show-overflow-tooltip="true" prop="T_date" label="提交日期" width="220" />
-                <el-table-column label="操作" fixed="right" min-width="320">
+                <el-table-column label="操作" fixed="right" min-width="350">
                     <template #default="scope">
                         <el-button @click="showDrawer('det', scope.row)">详情</el-button>
-                        <el-button @click="showDrawer('edi', scope.row)">编辑</el-button>
-                        <el-button @click="delReimbu(scope.row)" type="danger">删除</el-button>
-                        <el-button @click="showDrawer('sub', scope.row)" type="primary">提交审核</el-button>
+                        <el-button @click="showDrawer('edi', scope.row)" v-if="scope.row.T_State != 6 &&
+                        scope.row.T_State != 5 && scope.row.T_State != 3
+                        ">编辑</el-button>
+                        <el-button @click="delReimbu(scope.row)" type="danger" v-if="scope.row.T_State != 6 &&
+                        scope.row.T_State != 5 && scope.row.T_State != 3
+                        ">删除</el-button>
+                        <el-button @click="showDrawer('sub', scope.row)" type="primary"  v-if="scope.row.T_State != 6 &&
+                        scope.row.T_State != 5 && scope.row.T_State != 3
+                        ">提交审核</el-button>
                     </template>
                 </el-table-column>
             </el-table>
+            
             <el-pagination v-model:current-page="data.pages.page" layout="total, prev, pager, next, jumper"
                 v-model:page-size="data.pages.page_z" :total="data.total" @current-change="handleCurrentChange"
                 style="margin-top: 20px;" />
         </div>
-        <el-drawer v-model="data.drawer" :title="data.drawerTiti" direction="rtl" :before-close="handleClose" size="95%">
+        <el-drawer v-model="data.drawer" :title="data.drawerTiti" direction="rtl" :before-close="handleClose" size="100%">
             <el-form :model="data.fromData" label-position="top">
                 <el-form-item label="报销总金额">
                     <div style="display: flex;">
@@ -48,18 +55,18 @@
                         <el-table-column label="出差地点">
                             <el-table-column label="起点站" width="150">
                                 <template #default="scope">
-                                    <el-input v-model="scope.row.T_trip_origin" placeholder="起点"
+                                    <el-input v-model="scope.row.T_trip_origin" placeholder="起点站"
                                         :disabled="data.disabledNum == scope.$index ? false : true" />
                                 </template>
                             </el-table-column>
                             <el-table-column prop="city" label="终点站" width="150">
                                 <template #default="scope">
-                                    <el-input v-model="scope.row.T_trip_terminus" placeholder="起点"
+                                    <el-input v-model="scope.row.T_trip_terminus" placeholder="终点站"
                                         :disabled="data.disabledNum == scope.$index ? false : true" />
                                 </template>
                             </el-table-column>
                         </el-table-column>
-                        <el-table-column prop="address" label="出差时间起止时间" width="250">
+                        <el-table-column label="出差时间起止时间" width="250">
                             <template #default="scope">
                                 <el-date-picker v-model="scope.row.mapPick" type="daterange" style="width: 220px;"
                                     @change="changeFun($event, scope)" value-format="YYYY-MM-DD"
@@ -67,40 +74,37 @@
                             </template>
 
                         </el-table-column>
-
-                        <el-table-column prop="address" label="费用类型" width="150">
-
+                        <el-table-column label="费用类型" width="150">
                             <template #default="scope">
                                 <el-select v-model.number="scope.row.T_fee_type" class="m-2" placeholder="费用类型" size="large"
                                     :disabled="data.disabledNum == scope.$index ? false : true">
                                     <el-option v-for="item in data.optionsFeeType" :key="item.Id" :label="item.T_name"
-                                        :value="item.Id" />
+                                        @click="clickFeeType(item)" :value="item.Id" />
                                 </el-select>
                             </template>
                         </el-table-column>
-                        <el-table-column prop="address" label="费用明细" width="150">
+                        <el-table-column label="费用明细" width="150">
                             <template #default="scope">
-                                <el-select v-model.number="scope.row.T_fee_details" class="m-2" placeholder="费用明细"
-                                    size="large" @focus="detailsFocus"
+                                <el-select v-model.number="scope.row.T_fee_details" class="m-2" placeholder="费用明细" size="large"
                                     :disabled="data.disabledNum == scope.$index ? false : true">
-                                    <el-option v-for="item in data.optionsFeeDetails" :key="item.Id" :label="item.T_name"
+                                    <el-option v-for="item in scope.row.selectData" :key="item.Id" :label="item.T_name"
                                         :value="item.Id" />
                                 </el-select>
                             </template>
                         </el-table-column>
-                        <el-table-column prop="address" label="费用金额" width="150">
+                        <el-table-column label="费用金额" width="150">
                             <template #default="scope">
                                 <el-input v-model.number="scope.row.T_money" placeholder="费用金额"
                                     :disabled="data.disabledNum == scope.$index ? false : true" />
                             </template>
                         </el-table-column>
-                        <el-table-column prop="address" label="费用事由" width="150">
+                        <el-table-column label="费用事由" width="150">
                             <template #default="scope">
                                 <el-input v-model="scope.row.T_reasons" placeholder="费用事由"
                                     :disabled="data.disabledNum == scope.$index ? false : true" />
                             </template>
                         </el-table-column>
-                        <el-table-column prop="address" label="涉及项目" width="150">
+                        <el-table-column label="涉及项目" width="150">
 
                             <template #default="scope">
                                 <el-input v-model="scope.row.T_project" placeholder="涉及项目"
@@ -108,20 +112,22 @@
                             </template>
                         </el-table-column>
 
-                        <el-table-column prop="address" label="附件" :min-width="data.drawerTiti != '详情' ? '80' : ''">
+                        <el-table-column label="附件" :min-width="data.drawerTiti != '详情' ? '80' : ''" >
                             <template #default="scope">
-                                <Upload ref="uploadRef" :isImg="true" :limit="1" v-model="scope.row.T_img"
-                                     accept="image/*">
-                                    <el-icon>
-                                        <Plus />
-                                    </el-icon>
-                                </Upload>
+                                <Upload :limit="1" v-model="scope.row.T_img" accept="image/*"
+                                    style="display: inline-block;float: left;"
+                                     :disabled="data.drawerTiti=='详情'?true:false"
+                                     :show-file-list="false">
+                                        <el-icon>
+                                            <Plus />
+                                        </el-icon>
+                                    </Upload>
+                                    <img :src="scope.row.T_img" style="width: 40px;margin-left: 10px;">
                             </template>
-
                         </el-table-column>
-                        <el-table-column prop="address" fixed="right" min-width="300" v-if="data.drawerTiti != '详情'">
+                        <el-table-column fixed="right" min-width="300" v-if="data.drawerTiti != '详情'">
                             <template #default="scope">
-                                <el-button type="primary" @click="EditFun(scope)">编辑</el-button>
+                                <el-button type="primary" @click="EditFun(scope)">修改</el-button>
                                 <el-button @click="newDel(scope)">删除</el-button>
                             </template>
                         </el-table-column>
@@ -133,16 +139,17 @@
                         <span style="padding-left: 5px;">新增明细</span>
                     </div>
                 </el-form-item>
-                <el-form-item label="打款明细" v-if="data.drawerTiti == '详情'">
-                    <el-table :data="data.tableData" :header-cell-style="{ background: '#f5f7fa' }" border>
+                 <el-form-item label="打款明细" v-if="data.drawerTiti == '详情'">
+                    <el-table :data="data.tableRemit" :header-cell-style="{ background: '#f5f7fa' }" border>
                         <el-table-column type="index" label="序号" fixed width="70" />
-                        <el-table-column prop="address" label="打款时间" width="300" />
-                        <el-table-column prop="address" label="打款金额" />
+                        <el-table-column prop="T_time" label="打款时间" width="300" />
+                        <el-table-column prop="T_money" label="打款金额" />
+                       
                     </el-table>
                 </el-form-item>
             </el-form>
-            <div class="demo-drawer__footer" v-if="data.drawerTiti != '详情'">
-                <el-button type="primary" @click="subData">立即提交</el-button>
+            <div class="demo-drawer__footer">
+                <el-button type="primary" @click="subData" v-if="data.drawerTiti != '详情'">立即提交</el-button>
                 <el-button @click="data.drawer = false">取消</el-button>
             </div>
         </el-drawer>
@@ -153,10 +160,10 @@
 </template>
 <script setup lang="ts">
 import {
-    ReimburseMy_List, ReimburseMy_Del, ReimburseMy_Add, ReimburseMy_Get,
-    ReimburseMy_FeeType, ReimburseMy_FeeDetails
+    ReimburseMy_List, ReimburseMy_Del, ReimburseMy_Add,ReimburseMy_Edit, ReimburseMy_Get,
+    ReimburseMy_FeeType,ReimburseMy_Submit
 } from '@/api/ReimburseMy/index'
-import { reactive, ref } from "vue";
+import { computed, reactive, ref,watch } from "vue";
 import { ElMessage, ElMessageBox } from 'element-plus'
 const dialogImageUrl = ref('')
 const dialogVisible = ref(false)
@@ -164,11 +171,10 @@ import { GlobalStore } from '@/stores/index'
 import Upload from '@/components/Upload/index.vue'
 
 
+
 const data = reactive({
     //费用类型
-    optionsFeeType: [{ Id: '', T_name: '' }],
-    //费用明细
-    optionsFeeDetails: [{ Id: '', T_name: '' }],
+    optionsFeeType: [{ Id: '', T_name: '',FeeDetails:[]}],
     pages: {
         page: 1,
         page_z: 10
@@ -180,11 +186,14 @@ const data = reactive({
     drawer: false,
     drawerTiti: '',
     tableData: [],
-    fromData: {
+    tableRemit:[],//打款明细
+    fromData: {//新增，编辑的提交参数
         User_tokey: GlobalStore().GET_User_tokey,
         T_money: 0,
-        ReimburseDetails: [{
+        T_id:'',
+        ReimburseDetails:[{
             mapPick: [],
+            selectData:[],
             T_trip_start_time: "",
             T_trip_end_time: "",
             T_trip_origin: "",
@@ -199,6 +208,8 @@ const data = reactive({
     }
 })
 
+
+
 const changeFun = (timeKey: any, e: any) => {
     data.fromData.ReimburseDetails[e.$index].T_trip_start_time = timeKey[0]
     data.fromData.ReimburseDetails[e.$index].T_trip_end_time = timeKey[1]
@@ -225,7 +236,18 @@ const subData = () => {
     if (data.drawerTiti == '新增') {
         setAddApi()
     } else {
-
+        seteditApi()
+    }
+}
+//编辑
+const seteditApi = async()=>{
+    console.log('编辑',data.fromData)
+    const resIt: any = await ReimburseMy_Edit(data.fromData)
+    console.log('编辑', resIt)
+    if (resIt.Code == 200) {
+        ElMessage.success('编辑报销数据成功')
+        data.drawer = false
+        ReimburseMyListApi()
     }
 }
 //新增api
@@ -247,24 +269,26 @@ const FeeTypeApi = async () => {
         data.optionsFeeType = resIt.Data
     }
 }
-//触发费用明细changs事件
-const detailsFocus = () => {
-    if (!data.fromData.ReimburseDetails[data.disabledNum].T_fee_type) {
-        ElMessage.error('请先选择费用类型')
-        return
-    } else {
-        FeeDetailsApi(data.fromData.ReimburseDetails[data.disabledNum].T_fee_type)
-    }
-    console.log('changs', data.fromData.ReimburseDetails[data.disabledNum].T_fee_type)
+const clickFeeType = (data:any) => {
+    console.log('点击',data)
+    // data.fromData.ReimburseDetails[data.disabledNum].T_fee_details = null
 }
-//费用明细列表api  
-const FeeDetailsApi = async (e: any) => {
-    const resIt: any = await ReimburseMy_FeeDetails({ T_feeType: e })
-    console.log('新增返回', resIt)
-    if (resIt.Code == 200) {
-        data.optionsFeeDetails = resIt.Data
+
+watch(() => data.fromData, (newvalue,oldvalue) => {
+    const arr = data.fromData.ReimburseDetails
+    for (let index = 0; index < arr.length; index++) {
+        if (arr[index].T_fee_type) {
+            let select:any = (data.optionsFeeType.find(item => item.Id == arr[index].T_fee_type))?.FeeDetails ?? [{ Id: "", T_name: "" }]
+            data.fromData.ReimburseDetails[index].selectData = select
+        } else {
+            return []
+        }
     }
-}
+  },{ deep: true}
+);
+
+
+
 //删除报销列表
 const delReimbu = (data: any) => {
     console.log('删除', data)
@@ -294,16 +318,19 @@ const showDrawer = (e: string, datas: any) => {
     console.log('datas', datas)
     let id
     if (datas) id = datas.Id
-    FeeTypeApi()//获取费用类型
+    
     switch (e) {
         case 'news':
+            FeeTypeApi()//获取费用类型
             data.drawer = true
             data.drawerTiti = '新增'
             data.fromData = {
                 User_tokey: GlobalStore().GET_User_tokey,
+                T_id:'',
                 T_money: 0,
                 ReimburseDetails: [{
                     mapPick: [],
+                    selectData:[],
                     T_trip_start_time: "",
                     T_trip_end_time: "",
                     T_trip_origin: "",
@@ -319,37 +346,52 @@ const showDrawer = (e: string, datas: any) => {
             data.disabledNum = 0
             break;
         case 'det':
+            FeeTypeApi()//获取费用类型
             data.drawer = true
             data.drawerTiti = '详情'
-            console.log('datas', datas)
+            console.log('datas', datas,e)
             GetdetAPi(id)
             data.disabledNum = -1
             break;
         case 'edi':
+            FeeTypeApi()//获取费用类型
             data.drawer = true
             data.drawerTiti = '编辑'
             data.disabledNum = 0
             GetdetAPi(id)
-
+            data.fromData.T_id = id
             break;
         default:
             console.log('提交审核')
+            SubmitApi(id)
             break;
     }
-
 }
-//获取详情
+//提交审核api
+const SubmitApi = async(Id:any)=>{
+    const resIt: any = await ReimburseMy_Submit({ T_id: Id })
+    console.log('获取详情',resIt)
+    if (resIt.Code == 200) {
+        ElMessage.success('ok，提交成功')
+        ReimburseMyListApi()
+    }
+}
+//获取详情Api
 const GetdetAPi = async (Id: any) => {
     const resIt: any = await ReimburseMy_Get({ T_id: Id })
+    console.log('获取详情',resIt)
     if (resIt.Code == 200) {
         const arr = resIt.Data.T_reimburse_details
+        data.tableRemit = resIt.Data.T_remit_detail
         data.fromData.T_money = resIt.Data.T_money
+        data.fromData.ReimburseDetails = []
         arr.forEach((item: any) => {
             item.mapPick = [item.T_trip_start_time, item.T_trip_end_time]
         })
         data.fromData.ReimburseDetails = arr
+        
     }
-    console.log('获取详情', resIt)
+   
 }
 //关闭弹窗
 const handleClose = () => {
@@ -363,6 +405,7 @@ const EditFun = (e: any) => {
 const newAdd = () => {
     data.fromData.ReimburseDetails.push({
         mapPick: [],
+        selectData:[],
         T_trip_start_time: "",
         T_trip_end_time: "",
         T_trip_origin: "",

ts.config.app.json

@@ -0,0 +1,5 @@
+{
+    "compilerOptions":{
+        "moduleResolution":"node"
+    }
+}

tsconfig.json

@@ -19,5 +19,6 @@
     }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  
   "references": [{ "path": "./tsconfig.node.json" }]
 }