230824

src/views/salary/Reimburse.vue

@@ -1,14 +0,0 @@
-<template>
-    <div class="reimburse">
-        报销管理
-    </div>
-</template>
-<script setup lang="ts">
-
-</script>
-<style lang="scss">
-.reimburse{
-    height: 50px;
-    background: #fff;
-}
-</style>

src/views/salary/Reimburse/Reimburse.vue

@@ -0,0 +1,143 @@
+<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 TableBase from '@/components/TableBase/index.vue'
+import { ColumnProps } from '@/components/TableBase/interface/index'
+import { useTablePublic } from '@/hooks/useTablePublic'
+
+let date = new Date()
+const year = date.getFullYear()
+const month = date.getMonth()
+const salaryFromData = reactive({
+  year: year + '',
+  month: (month < 10 ? '0' : '') + month,
+  T_uuid: ''
+})
+const globalStore = GlobalStore()
+const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
+const salaryFromRef = ref<InstanceType<typeof ReimburseFrom> | null>(null)
+const { tableRowClassName } = useTablePublic()
+const tableRowClassNameHandle = (data: any): any => tableRowClassName(data.row.T_uuid, salaryFromData.T_uuid)
+
+// 搜索以及参数
+const columns: ColumnProps[] = [
+  { prop: 'T_name', label: '姓名' },
+  { prop: 'T_post_name', label: '职位' }
+]
+
+const searchs = reactive({
+  T_name: '',
+  T_dept: ''
+})
+const initParam = {
+  User_tokey: globalStore.GET_User_tokey,
+  T_name: '',
+  T_dept: ''
+}
+
+const searchHandle = () => {
+  initParam.T_name = searchs.T_name
+  initParam.T_dept = searchs.T_dept
+  TableRef.value?.searchTable()
+}
+
+const getSalaryParams = (row: any) => {
+  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
+  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()
+}
+const userInfo = reactive({
+  squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
+  name: '',
+  T_dept: '',
+  T_post: ''
+})
+</script>
+
+<template>
+  <div class="salary">
+    <div style="width: 290px" class="salary-table">
+      <TableBase
+        ref="TableRef"
+        :columns="columns"
+        :requestApi="User_List"
+        :initParam="initParam"
+        layout="prev, pager, next"
+        :rowClick="getSalaryParams"
+        :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" />
+              <el-button type="primary" @click="searchHandle" style="margin-left: 5px;">搜索</el-button>
+            </el-col>
+          </el-row>
+        </template>
+      </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">
+        <el-card class="b-r m-b-3">
+          <h3 class="title m-b-5">员工基本信息</h3>
+          <div class="info-content">
+            <el-avatar shape="square" size="large" :src="userInfo.squareUrl" />
+            <div class="info-name">
+              <h4>名字：{{ userInfo.name }}</h4>
+              <h4>
+                <span>部门：{{ userInfo.T_dept }}</span>
+                <span>岗位：{{ userInfo.T_post }}</span>
+              </h4>
+            </div>
+          </div>
+        </el-card>
+        
+        <ReimburseFrom ></ReimburseFrom>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import './index.scss';
+</style>

src/views/salary/Reimburse/ReimburseFrom.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="ReimburseFrom">
+    <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>
+        <el-table-column :show-overflow-tooltip="true" prop="name" 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>
+          </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-card>
+
+    <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-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-column type="index" label="序号" width="70" />
+            <el-table-column label="出差时间">
+              <el-table-column label="起" width="150">
+                <template #default="scope">
+
+                </template>
+              </el-table-column>
+              <el-table-column prop="city" label="止" width="150">
+                <template #default="scope">
+
+                </template>
+              </el-table-column>
+            </el-table-column>
+
+            <el-table-column label="出差地点">
+              <el-table-column label="起" width="150">
+                <template #default="scope">
+
+                </template>
+              </el-table-column>
+              <el-table-column prop="city" label="止" width="150">
+                <template #default="scope">
+
+                </template>
+              </el-table-column>
+            </el-table-column>
+
+
+            <el-table-column prop="address" label="费用类型" width="150">
+              <template #default="scope">
+
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="费用明细" width="150">
+              <template #default="scope">
+
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="费用金额" width="150">
+              <template #default="scope">
+
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="费用事由" width="150">
+              <template #default="scope">
+
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="涉及项目" width="150">
+              <template #default="scope">
+
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="address" label="附件" min-width="80">
+
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+        <el-form-item label="打款明细">
+          <el-table :data="data.tableData" :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">
+              <template #default="scope">
+                <el-button @click="newDel(scope)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="newMingxi" @click="newAdd">
+            <el-icon color="#409EFC" class="no-inherit">
+              <Plus />
+            </el-icon>
+            <span style="padding-left: 5px;">新增明细</span>
+          </div>
+        </el-form-item>
+      </el-form>
+      <div class="demo-drawer__footer" v-if="data.drawerTiti == '编辑'">
+        <el-button type="primary">立即提交</el-button>
+        <el-button @click="data.drawer = false">取消</el-button>
+      </div>
+    </el-drawer>
+
+  </div>
+</template>
+<script lang="ts" setup>
+import { reactive,computed ,watch} from "vue";
+const data = reactive({
+  currentPage: 1,
+  drawer: false,
+  drawerTiti: '',
+  formData: {
+    name: ''
+  },
+  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,
+    },
+  ]
+})
+//删除任务
+const newDel = (e: any) => {
+  data.tableData.splice(e.$index, 1)
+}
+watch(() => data.formData.name,cur => {
+    console.log('监听变化',cur)
+  }
+)
+const cuntData = computed(()=>{
+  let newData:any = []
+  data.tableData.forEach(item=>{
+    newData.push(item.address)
+  })
+  let sum = newData.reduce((a: any,b: any)=>a+b)
+  console.log('计算',newData,sum)
+  return sum
+})
+
+//添加任务
+const newAdd = () => {
+  data.tableData.push({
+    date: '',
+    name: '',
+    address:0,
+  })
+}
+//显示弹窗
+const showDrawer = (e: string) => {
+  switch (e) {
+    case 'det':
+      data.drawer = true
+      data.drawerTiti = '详情'
+      break;
+    case 'edi':
+      data.drawer = true
+      data.drawerTiti = '编辑'
+      break;
+    default:
+      console.log('提交审核')
+      break;
+  }
+
+}
+//关闭窗口
+const handleClose = (e: any) => {
+  data.drawer = false
+}
+//跳转页
+const handleCurrentChange = (e: any) => {
+  console.log('跳转页', e);
+}
+
+//每页多少条
+const handleSizeChange = (e: any) => {
+  console.log('每页多少条', e);
+}
+</script>
+<style scoped lang="scss">
+.newMingxi {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #409EFC;
+  cursor: pointer;
+  line-height: 0;
+  padding: 10px 0 2px 0;
+  color: #409EFC;
+  user-select: none;
+}
+
+// 上传图片框样式
+.el-upload--picture-card {
+  border: 1px dashed #13C3C7;
+}
+
+.el-upload--picture-card:hover {
+  border-color: #13C3C7;
+  color: #13C3C7;
+}
+
+.el-upload--picture-card {
+  width: 50px;
+  height: 50px;
+  font-size: 16px !important;
+}
+
+.el-upload {
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+  font-size: 16px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+  font-size: 16px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item-actions:hover {
+  opacity: 1;
+  font-size: 16px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+  font-size: 16px;
+}
+
+.avatar {
+  width: 50px;
+  height: 50px;
+}
+</style>

src/views/salary/Reimburse/index.scss

@@ -0,0 +1,74 @@
+@import '@/styles/var.scss';
+
+.salary {
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+  .salary-table {
+    @include f-direction;
+  }
+}
+
+.submit {
+  padding: 0.5rem 1.875rem;
+  // margin-top: 1.25rem;
+}
+.form-card {
+  overflow: auto;
+  .form-card-right,
+  .form-card-left {
+    display: flex;
+    flex-direction: column;
+  }
+  .form-card-right {
+    align-items: end;
+  }
+  .form-card-left {
+    align-items: start;
+  }
+}
+.d-flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.justify-start {
+  justify-content: start;
+}
+.input-suffix {
+  width: 100%;
+  flex-direction: column;
+  .w-50 {
+    width: 12.5rem;
+  }
+
+  .inline-flex {
+    white-space: nowrap;
+    display: inline-flex;
+  }
+}
+.title {
+  text-align: center;
+}
+.info-content {
+  display: flex;
+  color: #303133;
+  .info-name {
+    display: flex;
+    flex-direction: column;
+    padding-left: 0.75rem;
+    span:first-child {
+      margin-right: 2rem;
+    }
+  }
+}
+
+.b-r,
+.form-card {
+  border-radius: 8px;
+}
+
+.demonstration {
+  margin-left: 8px;
+}

src/views/salary/ReimburseMy.vue

@@ -26,9 +26,8 @@
                 :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                 style="margin-top: 20px;" />
         </div>
-        <el-drawer v-model="data.drawer" :title="data.drawerTiti" direction="rtl" :before-close="handleClose" size="90%">
-
-            <el-form :model="data.formData" label-position="top">
+        <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-item label="报销总金额">
                     <div style="display: flex;">
                         <el-input v-model="data.formData.name" style="flex: 1;" /><span style="padding-left: 20px;">元</span>
@@ -80,51 +79,69 @@
                         </el-table-column>
                         <el-table-column prop="address" label="费用金额" width="150">
                             <template #default="scope">
-                                <el-input v-model="data.value1" placeholder="费用金额" :disabled="data.disabledNum == scope.$index ? false : true" />
-                                </template>
+                                <el-input v-model="data.value1" 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="费用事由" :disabled="data.disabledNum == scope.$index ? false : true" />
-                                </template>
+                                <el-input v-model="data.value1" 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="涉及项目" :disabled="data.disabledNum == scope.$index ? false : true" />
-                                </template>
+                                <el-input v-model="data.value1" placeholder="涉及项目"
+                                    :disabled="data.disabledNum == scope.$index ? false : true" />
+                            </template>
                         </el-table-column>
 
-                        <el-table-column prop="address" label="附件" width="150" />
-                        <el-table-column prop="address" fixed="right" width="300">
-                            <template #header>
-                                <el-button type="danger" @click="newAdd">新增明细</el-button>
-                            </template>
+                        <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>
+                        <el-table-column prop="address" fixed="right" min-width="300">
                             <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">
+                        <el-icon color="#409EFC" class="no-inherit">
+                        <Plus />
+                        </el-icon>
+                        <span style="padding-left: 5px;">新增明细</span>
+                    </div>
                 </el-form-item>
                 <el-form-item label="打款明细">
-                    <el-table :data="data.tableData" style="width: 30%" border>
-                        <el-table-column type="index" label="序号" fixed width="60" />
-                        <el-table-column prop="address" label="打款时间" />
+                    <el-table :data="data.tableData" :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>
                 </el-form-item>
             </el-form>
-            <div class="demo-drawer__footer">
+            <div class="demo-drawer__footer" v-if="data.drawerTiti=='编辑'">
                 <el-button type="primary">立即提交</el-button>
                 <el-button @click="data.drawer = false">取消</el-button>
             </div>
         </el-drawer>
-
+        <el-dialog v-model="dialogVisible" :draggable="true" style="width: 500px;max-height: 700px;">
+            <img :src="dialogImageUrl" style="width: 100%;height: auto;object-fit: contain;"/>
+        </el-dialog>
     </div>
 </template>
 <script setup lang="ts">
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
+const dialogImageUrl = ref('')
+const dialogVisible = ref(false)
 const options = [
     {
         value: 'Option1',
@@ -148,6 +165,7 @@ const options = [
     },
 ]
 const data = reactive({
+    fileList: [],
     disabledNum: 0,
     value1: null,
     formData: {
@@ -179,6 +197,18 @@ const data = reactive({
         },
     ]
 })
+
+const handleRemove = (r: any) => {
+    console.log('删除', r)
+}
+
+const handlePictureCardPreview = (uploadFile: any) => {
+    console.log('查看', uploadFile)
+    dialogImageUrl.value = uploadFile.url!
+    dialogVisible.value = true
+}
+
+
 const handleSizeChange = (val: number) => {
     console.log(`${val} items per page`)
 }
@@ -207,7 +237,7 @@ const handleClose = () => {
     data.drawer = false
 }
 //点击了编辑
-const EditFun = (e:any)=>{
+const EditFun = (e: any) => {
     data.disabledNum = e.$index
 }
 //添加任务
@@ -217,7 +247,7 @@ const newAdd = () => {
         name: '',
         address: '',
     })
-    data.disabledNum = data.tableData.length-1
+    data.disabledNum = data.tableData.length - 1
 }
 //删除任务
 const newDel = (e: any) => {
@@ -227,6 +257,16 @@ const newDel = (e: any) => {
 }
 </script>
 <style lang="scss">
+.newMingxi {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #409EFC;
+  cursor: pointer;
+  line-height: 0;
+  padding: 10px 0 2px 0;
+  color: #409EFC;
+  user-select: none;
+}
 .reimburseMy {
     &-table {
         padding: 20px;
@@ -235,4 +275,40 @@ const newDel = (e: any) => {
         box-shadow: var(--el-box-shadow-light);
         border-radius: 5px;
     }
-}</style>
+}
+
+// 上传图片框样式
+
+.el-upload--picture-card {
+    width: 50px;
+    height: 50px;
+    font-size: 16px !important;
+}
+
+.el-upload {
+    width: 50px;
+    height: 50px;
+    line-height: 50px;
+    font-size: 16px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 50px;
+    height: 50px;
+    line-height: 50px;
+    font-size: 16px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item-actions:hover {
+    opacity: 1;
+    font-size: 16px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 50px;
+    height: 50px;
+    line-height: 50px;
+    font-size: 16px;
+}
+
+</style>