230828

package.json

@@ -20,6 +20,7 @@
     "js-md5": "^0.7.3",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.33",
+    "qs": "^6.11.2",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },
@@ -28,6 +29,7 @@
     "@babel/eslint-parser": "^7.21.3",
     "@types/node": "^20.4.5",
     "@types/nprogress": "^0.2.0",
+    "@types/qs": "^6.9.7",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",
     "@vitejs/plugin-vue": "^4.0.0",

src/api/ReimburseMy/index.ts

@@ -6,6 +6,15 @@ export const ReimburseMy_List = (params: any) => $http.post('/testapi/salary/Rei
 //删除报销
 export const ReimburseMy_Del = (params: any) => $http.post('/testapi/salary/Reimburse/Del', params)
 
+//添加报销
+export const ReimburseMy_Add = (params: any) => $http.post('/testapi/salary/Reimburse/Add', params)
 
+//添加报销
+export const ReimburseMy_Get = (params: any) => $http.post('/testapi/salary/Reimburse/Get', params)
 
+//费用类型列表
+export const ReimburseMy_FeeType = (params: any) => $http.post('/testapi/salary/Reimburse/FeeType/List', params)
+
+//费用明细列表
+export const ReimburseMy_FeeDetails = (params: any) => $http.post('/testapi/salary/Reimburse/FeeDetails/List', params)
 

src/api/apiMapList.ts

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

src/api/index.ts

@@ -4,12 +4,12 @@ import { ElMessage, ElNotification } from 'element-plus'
 import { ResultEnum, ResultData, ContentType } from './interface/index'
 import { GlobalStore } from '@/stores/index'
 import router from '@/router/index'
-
+import {mapList} from './apiMapList.js'
+import Qs from 'qs';
 type LoadingType = {
   close?: () => void
 }
 let loadingInstance: LoadingType = {}
-
 const config = {
   // 默认地址请求地址，可在 .env.*** 文件中修改
   baseURL: process.env.NODE_ENV ? '' : (import.meta.env.VITE_BZD_ERP_APP_API as string),
@@ -17,9 +17,6 @@ const config = {
   timeout: ResultEnum.TIMEOUT as number,
   // 跨域时候允许携带凭证
   withCredentials: true,
-  headers: {
-    'Content-Type': ContentType.URLENCODED
-  }
 }
 
 class RequestHttp {
@@ -49,6 +46,9 @@ class RequestHttp {
         // if (globalStore.GET_User_tokey) {
         //   config.headers['User_tokey'] = globalStore.GET_User_tokey
         // }
+        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
       },
       (err: any) => err

src/components/Upload/index.vue

@@ -44,17 +44,17 @@ const beforeUpload = (file: any) => {
     text: 'Loading',
     background: 'rgba(0, 0, 0, 0.7)'
   })
-  uploadData.key = file.name 
+  uploadData.key = file.name
 }
 
-const clickToken = async()=>{
-  
-  UpFileToken({ User_tokey: globalStore.GET_User_tokey}).then(res=>{
+const clickToken = async () => {
+
+  UpFileToken({ User_tokey: globalStore.GET_User_tokey }).then(res => {
     uploadData.token = res.Data as string
   })
-  
-  
- 
+
+
+
 }
 // 图片上传超出界限
 const handleExceed: UploadProps['onExceed'] = (files: any) => {
@@ -120,7 +120,7 @@ watch(
           name: genFileId()
         })
       } else {
-        ;(pre as string[]).forEach((item: string) => {
+        ; (pre as string[]).forEach((item: string) => {
           fileList.value.push({
             url: item,
             name: genFileId()
@@ -141,24 +141,19 @@ defineExpose({
 
 <template>
   <div>
-    <el-upload
-      ref="upload"
-      :accept="accept"
-      :disabled="disabled"
-      v-model:file-list="fileList"
-      action="https://up-z2.qiniup.com"
-      :list-type="listType"
-      :limit="limit"
-      :before-upload="beforeUpload"
-      :auto-upload="true"
-      :on-success="onSuccess"
-      :on-error="onError"
-      :on-exceed="handleExceed"
-      :on-remove="handleRemove"
-      :on-preview="handlePictureCardPreview"
-      :data="uploadData"
-      @click="clickToken"
-    >
+    <el-upload ref="upload" :accept="accept" :disabled="disabled" v-model:file-list="fileList" style="width: 50px;height: 50px;"
+      action="https://up-z2.qiniup.com" :list-type="listType" :limit="limit" :before-upload="beforeUpload"
+      :auto-upload="true" :on-success="onSuccess" :on-error="onError" :on-exceed="handleExceed" :on-remove="handleRemove"
+      :on-preview="handlePictureCardPreview" :data="uploadData" @click="clickToken">
+      
+      <!-- <el-upload v-model:file-list="data.fileList" style="width: 50px;height: 50px;" action="https://up-z2.qiniup.com"
+        :disabled="data.drawerTiti == '详情' ? true : false" list-type="picture-card" :on-preview="handlePictureCardPreview"
+        :on-remove="handleRemove">
+        <el-icon>
+          <Plus />
+        </el-icon>
+      </el-upload> -->
+
       <slot></slot>
       <template #tip>
         <div class="el-upload__tip">
@@ -166,7 +161,7 @@ defineExpose({
         </div>
       </template>
     </el-upload>
-    <el-dialog v-model="dialogVisible">
+    <el-dialog v-model="dialogVisible" style="z-index: 10;" :append-to-body="true">
       <img w-full :src="dialogImageUrl" class="full-img" alt="Preview Image" />
     </el-dialog>
   </div>

src/views/salary/ReimburseMy.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="reimburseMy">
         <div class="reimburseMy-table">
-            <el-button type="primary" icon="Plus" style="margin-bottom: 10px;" @click="showDrawer('news')">新增报销</el-button>
+            <el-button type="primary" icon="Plus" style="margin-bottom: 10px;"
+                @click="showDrawer('news', null)">新增报销</el-button>
             <el-table :data="data.tableData" style="width: 100%" border>
                 <el-table-column :show-overflow-tooltip="true" label="序号" type="index" width="70" />
                 <!-- <el-table-column :show-overflow-tooltip="true" prop="Id" label="ID" width="180" /> -->
@@ -21,10 +22,10 @@
                 <el-table-column :show-overflow-tooltip="true" prop="T_date" label="提交日期" width="220" />
                 <el-table-column label="操作" fixed="right" min-width="320">
                     <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>
                         <el-button @click="delReimbu(scope.row)" type="danger">删除</el-button>
-                        <el-button @click="showDrawer('sub')" type="primary">提交审核</el-button>
+                        <el-button @click="showDrawer('sub', scope.row)" type="primary">提交审核</el-button>
                     </template>
                 </el-table-column>
             </el-table>
@@ -33,10 +34,12 @@
                 style="margin-top: 20px;" />
         </div>
         <el-drawer v-model="data.drawer" :title="data.drawerTiti" direction="rtl" :before-close="handleClose" size="95%">
-            <el-form :model="data.formData" label-position="top">
+            <el-form :model="data.fromData" label-position="top">
                 <el-form-item label="报销总金额">
                     <div style="display: flex;">
-                        <el-input v-model="data.formData.name" style="flex: 1;" /><span style="padding-left: 20px;">元</span>
+                        <el-input v-model.number="data.fromData.T_money" style="flex: 1;"
+                            :disabled="data.drawerTiti == '详情' ? true : false" />
+                        <span style="padding-left: 20px;">元</span>
                     </div>
                 </el-form-item>
                 <el-form-item label="报销明细">
@@ -58,8 +61,8 @@
                         </el-table-column>
                         <el-table-column prop="address" label="出差时间起止时间" width="250">
                             <template #default="scope">
-                                <el-date-picker v-model="data.value1" type="daterange" style="width: 220px;" @change="changeFun"
-                                value-format="YYYY-MM-DD"
+                                <el-date-picker v-model="scope.row.mapPick" type="daterange" style="width: 220px;"
+                                    @change="changeFun($event, scope)" value-format="YYYY-MM-DD"
                                     :disabled="data.disabledNum == scope.$index ? false : true" />
                             </template>
 
@@ -68,59 +71,62 @@
                         <el-table-column prop="address" label="费用类型" width="150">
 
                             <template #default="scope">
-                                <el-select v-model="data.value1" class="m-2" placeholder="费用类型" size="large"
+                                <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 options" :key="item.value" :label="item.label"
-                                        :value="item.value" />
+                                    <el-option v-for="item in data.optionsFeeType" :key="item.Id" :label="item.T_name"
+                                        :value="item.Id" />
                                 </el-select>
                             </template>
                         </el-table-column>
                         <el-table-column prop="address" label="费用明细" width="150">
                             <template #default="scope">
-                                <el-select v-model="data.value1" class="m-2" placeholder="费用明细" size="large"
+                                <el-select v-model.number="scope.row.T_fee_details" class="m-2" placeholder="费用明细"
+                                    size="large" @focus="detailsFocus"
                                     :disabled="data.disabledNum == scope.$index ? false : true">
-                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
-                                        :value="item.value" />
+                                    <el-option v-for="item in data.optionsFeeDetails" :key="item.Id" :label="item.T_name"
+                                        :value="item.Id" />
                                 </el-select>
                             </template>
                         </el-table-column>
                         <el-table-column prop="address" label="费用金额" width="150">
                             <template #default="scope">
-                                <el-input v-model="data.value1" placeholder="费用金额"
+                                <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">
                             <template #default="scope">
-                                <el-input v-model="data.value1" placeholder="费用事由"
+                                <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">
 
                             <template #default="scope">
-                                <el-input v-model="data.value1" placeholder="涉及项目"
+                                <el-input v-model="scope.row.T_project" placeholder="涉及项目"
                                     :disabled="data.disabledNum == scope.$index ? false : true" />
                             </template>
                         </el-table-column>
 
-                        <el-table-column prop="address" label="附件" width="80">
-                            <el-upload v-model:file-list="data.fileList" style="width: 50px;height: 50px;"
-                                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-                                list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
-                                <el-icon>
-                                    <Plus />
-                                </el-icon>
-                            </el-upload>
+                        <el-table-column prop="address" 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>
+                            </template>
+
                         </el-table-column>
-                        <el-table-column prop="address" fixed="right" min-width="300">
+                        <el-table-column prop="address" fixed="right" min-width="300" v-if="data.drawerTiti != '详情'">
                             <template #default="scope">
                                 <el-button type="primary" @click="EditFun(scope)">编辑</el-button>
                                 <el-button @click="newDel(scope)">删除</el-button>
                             </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>
@@ -146,34 +152,23 @@
     </div>
 </template>
 <script setup lang="ts">
-import { ReimburseMy_List, ReimburseMy_Del } from '@/api/ReimburseMy/index'
+import {
+    ReimburseMy_List, ReimburseMy_Del, ReimburseMy_Add, ReimburseMy_Get,
+    ReimburseMy_FeeType, ReimburseMy_FeeDetails
+} from '@/api/ReimburseMy/index'
 import { reactive, ref } from "vue";
 import { ElMessage, ElMessageBox } from 'element-plus'
 const dialogImageUrl = ref('')
 const dialogVisible = ref(false)
-const options = [
-    {
-        value: 'Option1',
-        label: 'Option1',
-    },
-    {
-        value: 'Option2',
-        label: 'Option2',
-    },
-    {
-        value: 'Option3',
-        label: 'Option3',
-    },
-    {
-        value: 'Option4',
-        label: 'Option4',
-    },
-    {
-        value: 'Option5',
-        label: 'Option5',
-    },
-]
+import { GlobalStore } from '@/stores/index'
+import Upload from '@/components/Upload/index.vue'
+
+
 const data = reactive({
+    //费用类型
+    optionsFeeType: [{ Id: '', T_name: '' }],
+    //费用明细
+    optionsFeeDetails: [{ Id: '', T_name: '' }],
     pages: {
         page: 1,
         page_z: 10
@@ -181,31 +176,32 @@ const data = reactive({
     fileList: [],
     total: 0,//列表总页码
     disabledNum: 0,
-    value1: '2023-08-10',
-    formData: {
-        name: ''
-    },
+    pickerdATA: [],
     drawer: false,
     drawerTiti: '',
     tableData: [],
-    fromData:{
+    fromData: {
+        User_tokey: GlobalStore().GET_User_tokey,
         T_money: 0,
         ReimburseDetails: [{
-            "T_trip_start_time": "2023-08-24",
-            "T_trip_end_time": "2023-08-25",
-            "T_trip_origin": "贵阳",
-            "T_trip_terminus": "毕节1",
-            "T_fee_type": 1,
-            "T_fee_details": 2,
-            "T_money": 100,
-            "T_reasons": "费用事由",
-            "T_project": "涉及项目",
-            "T_img": ""
+            mapPick: [],
+            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: ""
         }]
     }
 })
-const changeFun = (e:any)=>{
-    console.log('s',e)
+
+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]
 }
 const ReimburseMyListApi = async () => {
     const res: any = await ReimburseMy_List(data.pages)
@@ -224,22 +220,65 @@ const handlePictureCardPreview = (uploadFile: any) => {
     dialogImageUrl.value = uploadFile.url!
     dialogVisible.value = true
 }
-const subData = ()=>{
-console.log( data.fromData.ReimburseDetails)
+//点击编辑/新增得确定按钮
+const subData = () => {
+    if (data.drawerTiti == '新增') {
+        setAddApi()
+    } else {
+
+    }
+}
+//新增api
+const setAddApi = async () => {
+    const resIt: any = await ReimburseMy_Add(data.fromData)
+    console.log('新增返回', resIt)
+    if (resIt.Code == 200) {
+        ElMessage.success('新增成功')
+        data.drawer = false
+        ReimburseMyListApi()
+    }
+}
+
+//费用类型列表api
+const FeeTypeApi = async () => {
+    const resIt: any = await ReimburseMy_FeeType({})
+    console.log('费用类型', resIt)
+    if (resIt.Code == 200) {
+        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)
+}
+//费用明细列表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
+    }
 }
 //删除报销列表
 const delReimbu = (data: any) => {
     console.log('删除', data)
-    ElMessageBox.confirm('删除报销，是否继续?','提示',{
+    ElMessageBox.confirm('删除报销，是否继续?', '提示', {
         confirmButtonText: 'OK',
         cancelButtonText: 'Cancel',
         type: 'warning',
         center: true,
-    }).then( async () => {
-        const res:any = await ReimburseMy_Del({T_id:data.Id})
-        console.log('返回',res)
-        if(res.Code==200){
+    }).then(async () => {
+        const res: any = await ReimburseMy_Del({ T_id: data.Id })
+        console.log('返回', res)
+        if (res.Code == 200) {
             ElMessage.success('已删除报销')
+            ReimburseMyListApi()
         }
     }).catch(() => {
         ElMessage.info('已取消删除报销')
@@ -251,19 +290,47 @@ const handleCurrentChange = (val: number) => {
     ReimburseMyListApi()
 }
 //显示弹窗
-const showDrawer = (e: string) => {
+const showDrawer = (e: string, datas: any) => {
+    console.log('datas', datas)
+    let id
+    if (datas) id = datas.Id
+    FeeTypeApi()//获取费用类型
     switch (e) {
         case 'news':
             data.drawer = true
             data.drawerTiti = '新增'
+            data.fromData = {
+                User_tokey: GlobalStore().GET_User_tokey,
+                T_money: 0,
+                ReimburseDetails: [{
+                    mapPick: [],
+                    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: ""
+                }]
+            }
+            data.disabledNum = 0
             break;
         case 'det':
             data.drawer = true
             data.drawerTiti = '详情'
+            console.log('datas', datas)
+            GetdetAPi(id)
+            data.disabledNum = -1
             break;
         case 'edi':
             data.drawer = true
             data.drawerTiti = '编辑'
+            data.disabledNum = 0
+            GetdetAPi(id)
+
             break;
         default:
             console.log('提交审核')
@@ -271,6 +338,19 @@ const showDrawer = (e: string) => {
     }
 
 }
+//获取详情
+const GetdetAPi = async (Id: any) => {
+    const resIt: any = await ReimburseMy_Get({ T_id: Id })
+    if (resIt.Code == 200) {
+        const arr = resIt.Data.T_reimburse_details
+        data.fromData.T_money = resIt.Data.T_money
+        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 = () => {
     data.drawer = false
@@ -282,27 +362,33 @@ const EditFun = (e: any) => {
 //添加任务
 const newAdd = () => {
     data.fromData.ReimburseDetails.push({
-        T_trip_start_time: "2023-08-24",
-        T_trip_end_time: "2023-08-25",
-        T_trip_origin: "贵阳",
-        T_trip_terminus: "毕节2",
-        T_fee_type: 1,
-        T_fee_details: 2,
-        T_money: 100,
-        T_reasons: "费用事由",
-        T_project: "涉及项目",
+        mapPick: [],
+        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: ""
     })
-    data.disabledNum = data.tableData.length - 1
+    data.disabledNum = data.fromData.ReimburseDetails.length - 1
 }
 //删除任务
 const newDel = (e: any) => {
 
-    data.tableData.splice(e.$index, 1)
-    console.log('e', data.tableData)
+    data.fromData.ReimburseDetails.splice(e.$index, 1)
+    console.log('e', data.fromData.ReimburseDetails)
 }
 </script>
 <style lang="scss">
+// to fix el-message弹框被el-dialog覆盖的问题。
+.el-message {
+    z-index: 99999999 !important;
+}
+
 .newMingxi {
     display: flex;
     align-items: center;