费用报销模块，员工费用布局完成

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

@@ -45,78 +45,156 @@
     <div class="staff" style="margin-left: 250px" v-if="!displayTable">
       <!-- 公共 -->
       <div class="public">
-        <el-form :model="form" label-width="80px">
+        <el-form :model="addForm" 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 v-model="addForm.ownerId" placeholder="请选择填报人" style="width: 150px">
+              <span v-for="(item, index) in users" :key="index">
+                <el-option :label="item.name" :value="item.id"></el-option>
+              </span>
             </el-select>
           </el-form-item>
           <!-- 填报日期 -->
-          <el-form-item label="活动时间" style="position: relative;top: 38px;">
+          <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-date-picker type="date" placeholder="选择日期" v-model="addForm.createDate" value-format="yyyy-MM-dd" 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-input v-model="addForm.ticketNum" 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 v-model="addForm.type" placeholder="请选择费用类型" style="width: 150px">
+              <el-option label="一般" value="0"></el-option>
+              <el-option label="外包" value="1"></el-option>
+              <el-option label="差旅" value="2"></el-option>
             </el-select>
           </el-form-item>
           
           <!-- 备注 -->
           <el-form-item label="备注" style="display: block; width: 70%; float: left;">
-            <el-input type="textarea" v-model="form.desc"></el-input>
+            <el-input type="textarea" v-model="addForm.remark"></el-input>
           </el-form-item>
           <!-- 总成本 -->
-          <div style="float: left; line-height: 55px;margin-left:20px">总成本 1000 元</div>
+          <div style="float: left; line-height: 55px;margin-left:20px">总成本 <el-link disabled v-model="addForm.totalAmount">{{addForm.totalAmount}}</el-link> 元</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>
+        <el-button type="primary" @click="addxz">新增</el-button>
+        <el-button type="warning" @click="submits">提交</el-button>
       </div>
+
+      <!-- 新增页面 -->
+      <el-dialog
+        title="新增"
+        :visible.sync="dialogVisible"
+        width="30%"
+        :before-close="handleClose">
+        
+        <div class="messages">
+          <el-form ref="form" :model="form" label-width="80px">
+            <!-- 项目 -->
+            <el-form-item label="项目">
+              <el-select v-model="form.projectId" placeholder="项目" style="width: 150px">
+                <el-option v-for="(item, index) in projectList" :key="index" :label="item.projectName" :value="item.id" @click="ok(item)"></el-option>
+              </el-select>
+            </el-form-item>
+            <!-- 费用日期 -->
+            <div class="sdat">费用日期：<el-date-picker
+              v-model="form.happenDate"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期">
+            </el-date-picker></div>
+            <!-- 发票种类 -->
+            <el-form-item label="发票种类">
+              <el-select v-model="form.invoiceType" default-value="yyyy-MM-dd" placeholder="请选择费用类型" style="width: 150px">
+                <el-option label="增值税专用发票" value="0"></el-option>
+                <el-option label="增值税普通发票" value="1"></el-option>
+              </el-select>
+            </el-form-item>
+          <!-- 费用金额 -->
+          <el-form-item label="费用金额">
+              <el-input v-model.number="form.amount"></el-input>
+            </el-form-item>
+          <!-- 发票号 -->
+            <el-form-item label="发票号">
+              <el-input disabled v-model="form.invoiceNo"></el-input>
+            </el-form-item>
+          <!-- 税率 -->
+            <el-form-item label="税率">
+              <el-input v-model.number="form.taxPercent"></el-input>%
+            </el-form-item>
+          <!-- 税额 -->
+            <el-form-item label="税额">
+              <el-input v-model.number="form.taxValue"></el-input>元
+            </el-form-item>
+            <!-- 备注 -->
+            <el-form-item label="备注">
+              <el-input v-model="form.remark"></el-input>
+            </el-form-item>
+          
+          </el-form>
+        </div>
+
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="ensure">确 定</el-button>
+        </span>
+      </el-dialog>
+
       <!-- 表格 -->
       <div class="pu_table">
         <el-table
-          :data="tableData"
+          :data="invoiceList"
           border
           style="width: 100%">
           <el-table-column
-            prop="date"
+            prop="projectName"
             label="项目"
             width="180">
           </el-table-column>
           <el-table-column
-            prop="name"
+            prop="happenDate"
             label="费用日期"
             width="180">
           </el-table-column>
+          <!-- <el-table-column
+            prop="invoiceType"
+            label="发票种类" v-if="invoiceType == '0'">
+            增值税专用发票
+          </el-table-column>
+          <el-table-column
+            prop="invoiceType"
+            label="发票种类" v-if="invoiceType == '1'">
+            增值税普通发票
+          </el-table-column> -->
           <el-table-column
-            prop="address"
+            prop="invoiceType"
             label="发票种类">
           </el-table-column>
           <el-table-column
-            prop="a"
+            prop="amount"
             label="费用金额">
           </el-table-column>
           <el-table-column
-            prop="b"
+            prop="invoiceNo"
             label="发票号">
           </el-table-column>
           <el-table-column
-            prop="c"
+            prop="taxPercent"
+            label="税率%">
+          </el-table-column>
+          <el-table-column
+            prop="taxValue"
+            label="税额">
+          </el-table-column>
+          <el-table-column
+            prop="remark"
             label="备注">
           </el-table-column>
         </el-table>
@@ -149,54 +227,13 @@ export default {
   props: {},
   data() {
     return {
+      users: [], // 人员信息
       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'
-        }],
+      getLists: [],
+      ProjectList: [], // 项目列表
+      companyId: [], // 人员的id
+      dialogVisible: false,
+      code: null,
         options: [{
           value: '选项1',
           label: '黄金糕'
@@ -213,25 +250,107 @@ export default {
           value: '选项5',
           label: '北京烤鸭'
         }],
-      addForm:{code:null,companyId:null,createDate:null, ticketNum:0,type:0,remark:null,totalAmount:0,},
+      addForm:{code:null,ownerId:null,createDate: null, ticketNum:0,type:0,remark:null,totalAmount:0,},
       page: 1,
       size:20,
-
+      form: {happenDate: null,invoiceType:null,amount:null,invoiceNo:null,taxPercent:null,taxValue:null,remark:null},
+      invoiceList: [],
+      kkk: null, // 
+      ddId: null,
+      dldl: []
     };
   },
   computed: {},
   watch: {},
   created() {},
-  mounted() {},
+  mounted() {
+    this.getUsers() // 获取人员信息
+    this.getList() // 获取单据列表
+    this.getProjectList()
+  },
   methods: {
-
     staffs() { // 控制员工费用报表
       this.displayTable = false;
     },
     bills() { // 控制
       this.displayTable = true
     },
-
+    //  获取人员信息
+    getUsers() {
+        this.http.post(this.port.manage.list, {
+            departmentId: -1,
+            pageIndex: 1,
+            pageSize: 99999
+        },
+        res => {
+            if (res.code == "ok") {
+                this.users = res.data.records;
+                console.log(this.users, '得到的数据');
+            } else {
+                this.$message({
+                message: res.msg,
+                type: "error"
+                });
+            }
+        },
+        error => {
+            this.$message({
+                message: error,
+                type: "error"
+            });
+        });
+    },
+    // 提交事件
+    submits() {
+      this.add() // 获取单据编码
+    },
+    // 点击新增
+    addxz() {
+      this.dialogVisible = true
+      this.getNextCode() // 获取到单据编码
+    },
+    // 点击确定
+    ensure() {
+      this.dialogVisible = false
+      this.form.projectName = this.projectList.filter(p=>p.id == this.form.projectId)[0].projectName;
+      this.invoiceList.push(this.form)
+      // this.ok()
+      this.form = {happenDate: null,invoiceType:null,amount:null,invoiceNo:null,taxPercent:null,taxValue:null,remark:null}
+    },
+    // ok(){
+    //   var nadao = this.projectList
+    //   var kk = this.form.projectId
+    //   var c = 0
+    //   console.log(kk, nadao);
+    //   for(var i = 0; i <= nadao.length; i++) {
+    //       c++
+    //       if(nadao[i].projectName == kk){
+    //           this.ddId = nadao[c - 1].id
+    //       }
+    //   }
+    //   console.log(this.ddId);
+    // },
+    //获取项目列表
+    getProjectList() {
+        this.http.post( this.port.project.list, {},
+        res => {
+            if (res.code == "ok") {
+                this.projectList = res.data;
+                console.log(this.projectList, '打印过来的');
+            } else {
+                this.$message({
+                    message: res.msg,
+                    type: "error"
+                });
+            }
+        },
+        error => {
+            this.$message({
+                message: error,
+                type: "error"
+            });
+        });
+    },
     //获取单据列表
     getList() {
       this.http.post('/expense-sheet/list', {pageIndex: this.page,
@@ -241,6 +360,8 @@ export default {
                     },
         res => {
             if (res.code == "ok") {
+                this.getLists = res.data
+                console.log(this.getLists, '获取过来的单据列表');
                 this.$message({
                 message: '填报成功',
                 type: "success"
@@ -284,7 +405,10 @@ export default {
     },
     //创建单据
     add() {
-      this.addForm.items = '';//这里要传发票列表的json转string
+      // happenDate
+      // this.addForm.items = JSON.stringify(this.form);//这里要传发票列表的json转string
+      this.addForm.items = JSON.stringify(this.invoiceList)//这里要传发票列表的json转string
+      console.log(this.addForm, '传过去的数据');
         this.http.post('/expense-sheet/add', this.addForm,
         res => {
             if (res.code == "ok") {
@@ -314,6 +438,8 @@ export default {
         res => {
             if (res.code == "ok") {
                 this.addForm.code = res.data;
+                this.form.invoiceNo = res.data
+                console.log(this.addForm.code, '获取到的单据编码');
             } else {
                 this.$message({
                 message: res.msg,
@@ -373,4 +499,9 @@ export default {
 
 /* 我的单据报销凭证 */
 
+
+/*  */
+.sdat{
+  margin:0 0 20px 10px;
+}
 </style>