员工费用报销页面布局

fhKeeper/formulahousekeeper/timesheet/src/routes.js

@@ -38,6 +38,7 @@ import PdfView from './views/pdf/pdfview';
 
 // 费用报销
 import expense from './views/expense/expense'
+
 Vue.use(Router)
 
 export const fixedRouter = [
@@ -164,7 +165,11 @@ export const manageRouter = [
         iconCls: 'iconfont firerock-iconcaiwu',
         leaf: true,
         children: [
-            { path: '/expense', component: expense, name: '费用报销' }
+            { 
+                path: '/expense', 
+                component: expense, 
+                name: '费用报销', 
+            }
         ]
     },
 

fhKeeper/formulahousekeeper/timesheet/src/views/expense/expense.vue

@@ -1,38 +1,145 @@
 <template>
-  <div class="sidebars" style="width: 250px">
-    <h2><i class="iconfont firerock-iconcaiwu" style="padding-right: 10px"></i>费用报销模块</h2>
-    <el-col :span="12">
-      <el-menu
-        default-active="1-1"
-        class="el-menu-vertical-demo"
-        @open="handleOpen"
-        @close="handleClose"
-        background-color="#ffffff"
-        text-color="#666666"
-        active-text-color="#20A0FF"
-        style="width:100%">
-        <el-submenu index="1">
-          <template slot="title">
-            <i class="el-icon-location"></i>
-            <span>员工费用报表</span>
-          </template>
-            <el-menu-item index="1-1">一般费用填报</el-menu-item>
-            <el-menu-item index="1-2">差旅费用填报</el-menu-item>
-          </el-submenu>
+  <section>
+    <div class="sidebars" style="width: 250px">
+      <h2><i class="iconfont firerock-iconcaiwu" style="padding-right: 10px"></i>费用报销模块</h2>
+      <el-col :span="12">
+        <el-menu
+          default-active="1-1"
+          class="el-menu-vertical-demo"
+          @select="staffs"
+          background-color="#ffffff"
+          text-color="#666666"
+          active-text-color="#20A0FF"
+          style="width:100%">
+          <el-submenu index="1">
+            <template slot="title">
+              <i class="el-icon-location"></i>
+              <span>员工费用报表</span>
+            </template>
+              <el-menu-item index="1-1">一般费用填报</el-menu-item>
+              <el-menu-item index="1-2">差旅费用填报</el-menu-item>
+              <el-menu-item index="1-3">外包费用填报</el-menu-item>
+            </el-submenu>
+            <!-- <el-menu-item index="2" @select="bills">
+              <i class="el-icon-setting"></i>
+              <span slot="title">我的报销单据</span>
+            </el-menu-item> -->
+          </el-menu>
+           <el-menu
+          default-active="1-1"
+          class="el-menu-vertical-demo"
+          @select="bills"
+          background-color="#ffffff"
+          text-color="#666666"
+          active-text-color="#20A0FF"
+          style="width:100%">
+            <el-menu-item index="2" @select="bills">
+              <i class="el-icon-setting"></i>
+              <span slot="title">我的报销单据</span>
+            </el-menu-item>
+          </el-menu>
+      </el-col>
+    </div>
+    <!-- 内容主体区域 -->
+    <!-- 上面部分 -->
+    <div class="staff" style="margin-left: 250px" v-if="!displayTable">
+      <!-- 公共 -->
+      <div class="public">
+        <el-form :model="form" label-width="80px">
+          <!-- <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> -->
+          <!-- 填报人 -->
+          <el-form-item label="填报人">
+            <el-select v-model="form.region" placeholder="请选择填报人" style="width: 150px">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <!-- 填报日期 -->
+          <el-form-item label="活动时间" style="position: relative;top: 38px;">
+            <el-col :span="11">
+              <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 200px;"></el-date-picker>
+            </el-col>
+          </el-form-item>
+          <!-- 发票张数 -->
+          <el-form-item label="发票张数">
+            <el-input v-model="form.name" style="width: 150px"></el-input>
+          </el-form-item>
+          <!-- 费用类型 -->
+          <el-form-item label="费用类型">
+            <el-select v-model="form.region" placeholder="请选择费用类型" style="width: 150px">
+              <el-option label="一般" value="shanghai"></el-option>
+              <el-option label="外包" value="beijing"></el-option>
+              <el-option label="差旅" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
           
-          <el-submenu index="2">
-          <template slot="title">
-            <i class="el-icon-location"></i>
-            <span>费用报销单据</span>
-          </template>
-            <el-menu-item index="2-1">待处理单据</el-menu-item>
-            <el-menu-item index="2-2">待支付单据</el-menu-item>
-          </el-submenu>
+          <!-- 备注 -->
+          <el-form-item label="备注" style="display: block; width: 70%; float: left;">
+            <el-input type="textarea" v-model="form.desc"></el-input>
+          </el-form-item>
+          <!-- 总成本 -->
+          <div style="float: left; line-height: 55px;margin-left:20px">总成本 1000 元</div>
+        </el-form>
+      </div>
+      <!-- 按钮 -->
+      <div class="pu_button">
+        <el-button type="primary">新增</el-button>
+        <el-button type="success">保存</el-button>
+        <el-button type="warning">提交</el-button>
+      </div>
+      <!-- 表格 -->
+      <div class="pu_table">
+        <el-table
+          :data="tableData"
+          border
+          style="width: 100%">
+          <el-table-column
+            prop="date"
+            label="项目"
+            width="180">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="费用日期"
+            width="180">
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="发票种类">
+          </el-table-column>
+          <el-table-column
+            prop="a"
+            label="费用金额">
+          </el-table-column>
+          <el-table-column
+            prop="b"
+            label="发票号">
+          </el-table-column>
+          <el-table-column
+            prop="c"
+            label="备注">
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
 
-        </el-menu>
-    </el-col>
-  </div>
-  <!-- 内容主体区域 -->
+    <!-- 下面部分 -->
+    <div class="staff" style="margin-left: 250px" v-if="displayTable">
+      <div class="search">
+        <el-input v-model="input" placeholder="单据编号"></el-input>
+        <span>单据类别：
+          <el-select v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </span>
+      </div>
+    </div>
+  </section>
 </template>
 
 <script>
@@ -41,13 +148,85 @@ export default {
   components: {},
   props: {},
   data() {
-    return {};
+    return {
+      displayTable: false,
+      form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: '',
+          kk: ''
+        },
+      tableData: [{
+          date: '测试项目',
+          name: '2021-5-18',
+          address: '测试项目',
+          a: '10000',
+          b: '10086',
+          c: 'abc'
+        },{
+          date: '测试项目',
+          name: '2021-5-18',
+          address: '测试项目',
+          a: '10000',
+          b: '10086',
+          c: 'abc'
+        },{
+          date: '测试项目',
+          name: '2021-5-18',
+          address: '测试项目',
+          a: '10000',
+          b: '10086',
+          c: 'abc'
+        },{
+          date: '测试项目',
+          name: '2021-5-18',
+          address: '测试项目',
+          a: '10000',
+          b: '10086',
+          c: 'abc'
+        },{
+          date: '测试项目',
+          name: '2021-5-18',
+          address: '测试项目',
+          a: '10000',
+          b: '10086',
+          c: 'abc'
+        }],
+        options: [{
+          value: '选项1',
+          label: '黄金糕'
+        }, {
+          value: '选项2',
+          label: '双皮奶'
+        }, {
+          value: '选项3',
+          label: '蚵仔煎'
+        }, {
+          value: '选项4',
+          label: '龙须面'
+        }, {
+          value: '选项5',
+          label: '北京烤鸭'
+        }]
+    };
   },
   computed: {},
   watch: {},
   created() {},
   mounted() {},
-  methods: {},
+  methods: {
+    staffs() { // 控制员工费用报表
+      this.displayTable = false;
+    },
+    bills() { // 控制
+      this.displayTable = true
+    }
+  },
 };
 </script>
 <style scoped>
@@ -67,4 +246,29 @@ export default {
 .sidebars .el-col-12 {
   width: 100%
 }
+
+.staff {
+}
+
+.public {
+  height: 185px;
+  border-bottom: 1px solid #ddd;
+}
+.public .el-form-item {
+ display: inline-block;
+}
+.pu_button {
+  margin-top: 20px;
+  width: 100%;
+  height: 80px;
+  background: #F2F2F2;
+  padding: 20px 0 0 20px;
+  box-sizing: border-box;
+}
+.pu_table {
+  margin: 10px 10px 10px 10px;
+}
+
+/* 我的单据报销凭证 */
+
 </style>

fhKeeper/formulahousekeeper/timesheet/src/views/expenseList/ordinary.vue

@@ -1,21 +0,0 @@
-<template>
-  <div class="layout-container"></div>
-</template>
-
-<script>
-export default {
-  name: "",
-  components: {},
-  props: {},
-  data() {
-    return {};
-  },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {},
-  methods: {},
-};
-</script>
-<style scoped lang='less'>
-</style>