新增普通报销台账界面

client/src/api/oa/commonCost/index.ts

@@ -0,0 +1,6 @@
+import request from '@/config/axios'
+
+// 获得行政管理_考勤列表_我的
+export const getCommonCostPage = (params) => {
+  return request.get({ url: '/CommonCost/page', params }, '/business')
+}

client/src/views/OaSystem/financialManagement/ptbxPage/index.vue

@@ -1,17 +1,206 @@
 <template>
-  <div class="purchaseContractBox">
-    <img src="@/assets/imgs/kfz.jpg" />
+  <div class="_ptbxBook">
+    <div class="searchBox">
+      <div class="form">
+        <span class="formSpan">报销单号：</span>
+        <el-input
+          v-model="queryParams.commonCostNo"
+          placeholder="请输入报销单号"
+          style="width: 210px"
+        />
+      </div>
+      <div class="form">
+        <span class="formSpan">报销人：</span>
+        <el-input v-model="queryParams.userId" placeholder="请输入报销人" style="width: 160px" />
+      </div>
+      <div class="form">
+        <span class="formSpan">报销人部门：</span>
+        <el-select
+          width="160px"
+          v-model="queryParams.deptId"
+          class="m-2"
+          placeholder="请选择部门"
+          size="large"
+        >
+          <el-option
+            v-for="item in industryListAll"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <div class="form">
+        <span class="formSpan">申请时间：</span>
+        <el-date-picker
+          v-model="queryParams.applyTime"
+          type="daterange"
+          unlink-panels
+          range-separator="到"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        />
+      </div>
+      <div class="form">
+        <span class="formSpan">项目部门：</span>
+        <el-input
+          v-model="queryParams.projectDeptId"
+          placeholder="请输入项目部门"
+          style="width: 160px"
+        />
+      </div>
+      <div class="form">
+        <span class="formSpan">报销类型：</span>
+        <el-input
+          v-model="queryParams.costType"
+          placeholder="请输入报销类型"
+          style="width: 160px"
+        />
+      </div>
+      <div class="form">
+        <span class="formSpan">状态：</span>
+        <el-input v-model="queryParams.status" style="width: 160px" />
+      </div>
+      <div class="form">
+        <span class="formSpan">报销总金额：</span>
+        <el-input
+          v-model="queryParams.totalAmount"
+          placeholder="请输入报销总金额"
+          style="width: 160px"
+        />
+      </div>
+      <div class="from">
+        <div class="btnBox">
+          <el-button type="primary" style="background: #3485ff" @click="handleQuery">
+            <img src="@/assets/imgs/OA/search.png" class="mr-8px" alt="" />
+            查询</el-button
+          >
+          <el-button type="primary">
+            <img src="@/assets/imgs/OA/open.png" class="mr-8px" alt="" />
+            导出</el-button
+          >
+        </div>
+      </div>
+    </div>
+    <div class="infoBox">
+      <ul>
+        <li v-for="(item, index) in infoList" :key="index" class="mr-40px">
+          <p>{{ item.name }}：</p>
+          <h4 class="font-size-18px">{{ item.num }}</h4>
+        </li>
+      </ul>
+    </div>
+    <div class="tableBox">
+      <div class="table" ref="tableRef">
+        <el-table
+          v-loading="loading"
+          :data="list"
+          style="width: 100%; height: 100%"
+          :style="{ height: tableHeight + 'px' }"
+          :header-cell-style="{
+            background: '#F7F8FA',
+            color: '#121518',
+            height: '50px'
+          }"
+        >
+          <el-table-column align="center" label="序号" width="60">
+            <template #default="scope">{{ scope.$index + 1 }}</template>
+          </el-table-column>
+          <el-table-column align="center" prop="commonCostNo" label="报销单号" />
+          <el-table-column align="center" prop="userNickname" label="报销人" />
+          <el-table-column align="center" prop="deptName" label="报销人部门" />
+          <el-table-column
+            align="center"
+            prop="applyTime"
+            :formatter="dateFormatter"
+            label="申请时间"
+          />
+          <el-table-column align="center" prop="totalAmount" label="报销总金额" />
+          <el-table-column align="center" prop="xmjl" label="项目名称" />
+          <el-table-column align="center" prop="lxsj" label="项目部门" />
+          <el-table-column align="center" prop="yssj" label="状态" />
+          <el-table-column align="center" label="操作" width="80">
+            <template #default="scope">
+              <div class="operateBtn" @click="operateClick(scope.row)">
+                <span>查看</span>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pageBox">
+        <el-pagination
+          v-model:current-page="queryParams.pageNo"
+          :page-size="10"
+          background
+          layout="total, prev, pager, next, jumper"
+          :total="total"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.purchaseContractBox {
-  margin-top: 20px;
-  height: calc(100% - 20px);
-  background-color: #fff;
-  border-radius: 20px;
-  padding: 20px;
-  position: relative;
-  text-align: center;
+<script setup lang="ts">
+import * as CommonCostApi from '@/api/oa/commonCost'
+import { dateFormatter } from '@/utils/formatTime'
+
+defineOptions({ name: 'CommonCost' })
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  commonCostNo: undefined,
+  userId: undefined,
+  deptId: undefined,
+  applyTime: [],
+  projectDeptId: undefined,
+  costType: undefined,
+  status: undefined,
+  totalAmount: undefined
+})
+const infoList: any = ref([
+  {
+    name: '报销总金额(元)',
+    num: '0'
+  },
+  {
+    name: '已报销总金额(元)',
+    num: '0'
+  },
+  {
+    name: '办理中总金额(元)',
+    num: '0'
+  }
+])
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await CommonCostApi.getCommonCostPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
 }
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style lang="scss" scoped>
+@import url(./ptbxBook.scss);
 </style>

client/src/views/OaSystem/financialManagement/ptbxPage/ptbxBook.scss

@@ -0,0 +1,98 @@
+._ptbxBook {
+  width: calc(100% - 30px);
+  height: calc(100% - 30px);
+  background: #FFFFFF;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #DEE0E3;
+  margin: 15px;
+
+  .searchBox {
+    width: 100%;
+    height: 125px;
+    background: #F7F8FA;
+    border-radius: 4px 4px 0 0;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 0 20px;
+    box-sizing: border-box;
+
+    .form {
+      display: flex;
+      align-items: center;
+      margin-right: 20px;
+
+      .formSpan {
+        font-size: 16px;
+      }
+
+      .btnBox {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  .infoBox {
+    width: 100%;
+    height: 55px;
+    background: #EDF2FB;
+
+    ul {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+
+      li {
+        list-style: none;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  .tableBox {
+    width: 100%;
+    height: calc(100% - 180px);
+    padding: 15px 20px;
+    position: relative;
+
+    .table {
+      width: 100%;
+      height: calc(100% - 40px);
+
+      .operateBtn {
+        width: 54px;
+        height: 24px;
+        background: #EBF2FF;
+        border-radius: 16px 16px 16px 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        span {
+          color: #2E77E6;
+        }
+      }
+    }
+
+    .pageBox {
+      position: absolute;
+      right: 20px;
+      bottom: 10px;
+      text-align: right;
+    }
+  }
+  :deep(.el-radio__label),
+  :deep(.el-checkbox__label){
+      font-size: 16px;
+  }
+  :deep(.el-radio-group){
+    label {
+      margin-right: 10px;
+    }
+  }
+}