表格展示方式修改

.history/src/main_20190314094846.js

@@ -0,0 +1,13 @@
+import Vue from 'vue';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import App from './App.vue';
+import router from './router'
+console.log(router)
+Vue.use(ElementUI);
+
+new Vue({
+  el: '#app',
+  router,
+  render: h => h(App)
+});

.history/src/main_20190318180124.js

@@ -0,0 +1,20 @@
+import Vue from 'vue';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import App from './App.vue';
+import router from './router';
+import axios from 'axios';
+import {post,fetch,patch,put} from './utils/http';
+
+Vue.use(ElementUI);
+
+Vue.prototype.$post = post;
+Vue.prototype.$fetch = fetch;
+Vue.prototype.$patch = patch;
+Vue.prototype.$put = put;
+
+new Vue({
+  el: '#app',
+  router,
+  render: h => h(App)
+});

.history/src/pages/manage/cost_20190318173111.vue

@@ -0,0 +1,351 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('COST')">增加成本</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="成本类型"
+          prop="costType.name">
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门"  @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option> 
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>                         
+            <el-option
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option> 
+          </el-select>
+        </el-form-item>               
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input style="width: 30%;" v-model.number="form.amount" autocomplete="off"></el-input>
+        </el-form-item>        
+        <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>  
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="接收日期">
+            </el-date-picker>  
+        </el-form-item>                          
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>            
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        toProjectId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'COST'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      this.form.toDeptId = row.toDeptId;
+      this.form.toProjectId = row.toProjectId;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+                  getManageList({
+                    type: 'COST'
+                  }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'COST'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }  
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/cost_20190319105303.vue

@@ -0,0 +1,351 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('COST')">增加成本</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="成本类型"
+          prop="costType.name">
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门"  @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option> 
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>                         
+            <el-option
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option> 
+          </el-select>
+        </el-form-item>               
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        // { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>        
+        <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>  
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="接收日期">
+            </el-date-picker>  
+        </el-form-item>                          
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>            
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        toProjectId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'COST'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      this.form.toDeptId = row.toDeptId;
+      this.form.toProjectId = row.toProjectId;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+                  getManageList({
+                    type: 'COST'
+                  }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'COST'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }  
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/cost_20190319105458.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('COST')">增加成本</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="成本类型"
+          prop="costType.name">
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="接收日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        // { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>    
+
+        <el-form-item label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>                         
+            <el-option
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option> 
+          </el-select>
+        </el-form-item>  
+          
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门"  @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option> 
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+                     
+          
+        <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>  
+                                  
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>            
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        toProjectId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'COST'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      this.form.toDeptId = row.toDeptId;
+      this.form.toProjectId = row.toProjectId;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+                  getManageList({
+                    type: 'COST'
+                  }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'COST'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }  
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/cost_20190319110238.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('COST')">增加成本</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="成本类型"
+          prop="costType.name">
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="接收日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        // { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>    
+
+        <el-form-item label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>                         
+            <el-option
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option> 
+          </el-select>
+        </el-form-item>  
+
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门"  @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option> 
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+                     
+          
+        <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>  
+                                  
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>            
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        toProjectId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'COST'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      this.form.toDeptId = row.toDeptId;
+      this.form.toProjectId = row.toProjectId;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+                  getManageList({
+                    type: 'COST'
+                  }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'COST'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }  
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/cost_20190319110259.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('COST')">增加成本</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="成本类型"
+          prop="costType.name">
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="接收日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        // { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input style="{{formLabelWidth}}" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>    
+
+        <el-form-item label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>                         
+            <el-option
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option> 
+          </el-select>
+        </el-form-item>  
+          
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门"  @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option> 
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+                     
+          
+        <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>  
+                                  
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>            
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        toProjectId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'COST'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      this.form.toDeptId = row.toDeptId;
+      this.form.toProjectId = row.toProjectId;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+                  getManageList({
+                    type: 'COST'
+                  }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'COST'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }  
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/cost_20190319110306.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('COST')">增加成本</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="成本类型"
+          prop="costType.name">
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="接收日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        // { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input style={{formLabelWidth}} v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>    
+
+        <el-form-item label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>                         
+            <el-option
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option> 
+          </el-select>
+        </el-form-item>  
+          
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门"  @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option> 
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+                     
+          
+        <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>  
+                                  
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>            
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        toProjectId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'COST'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      this.form.toDeptId = row.toDeptId;
+      this.form.toProjectId = row.toProjectId;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+                  getManageList({
+                    type: 'COST'
+                  }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'COST'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }  
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/cost_20190319110316.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('COST')">增加成本</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="成本类型"
+          prop="costType.name">
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="接收日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        // { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input style="formLabelWidth" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>    
+
+        <el-form-item label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>                         
+            <el-option
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option> 
+          </el-select>
+        </el-form-item>  
+          
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门"  @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option> 
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+                     
+          
+        <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>  
+                                  
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>            
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        toProjectId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'COST'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      this.form.toDeptId = row.toDeptId;
+      this.form.toProjectId = row.toProjectId;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+                  getManageList({
+                    type: 'COST'
+                  }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'COST'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }  
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/cost_20190319110337.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('COST')">增加成本</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="成本类型"
+          prop="costType.name">
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="接收日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        // { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input style="width: {{formLabelWidth}}" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>    
+
+        <el-form-item label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>                         
+            <el-option
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option> 
+          </el-select>
+        </el-form-item>  
+          
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门"  @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option> 
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+                     
+          
+        <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>  
+                                  
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>            
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        toProjectId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'COST'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      this.form.toDeptId = row.toDeptId;
+      this.form.toProjectId = row.toProjectId;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+                  getManageList({
+                    type: 'COST'
+                  }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'COST'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }  
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/cost_20190319110411.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('COST')">增加成本</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="成本类型"
+          prop="costType.name">
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="接收日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        // { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input style="width: 45%" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>    
+
+        <el-form-item label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>                         
+            <el-option
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option> 
+          </el-select>
+        </el-form-item>  
+          
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门"  @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option> 
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+                     
+          
+        <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>  
+                                  
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>            
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        toProjectId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'COST'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      this.form.toDeptId = row.toDeptId;
+      this.form.toProjectId = row.toProjectId;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+                  getManageList({
+                    type: 'COST'
+                  }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'COST'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }  
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/cost_20190319110431.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('COST')">增加成本</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="成本类型"
+          prop="costType.name">
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="接收日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        // { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input style="width: 120px" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>    
+
+        <el-form-item label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>                         
+            <el-option
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option> 
+          </el-select>
+        </el-form-item>  
+          
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门"  @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option> 
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+                     
+          
+        <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>  
+                                  
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>            
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        toProjectId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'COST'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      this.form.toDeptId = row.toDeptId;
+      this.form.toProjectId = row.toProjectId;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+                  getManageList({
+                    type: 'COST'
+                  }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'COST'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }  
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/cost_20190319110805.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('COST')">增加成本</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="成本类型"
+          prop="costType.name">
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="接收日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        // { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>    
+
+        <el-form-item label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>                         
+            <el-option
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option> 
+          </el-select>
+        </el-form-item>  
+          
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门"  @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option> 
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+                     
+          
+        <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>  
+                                  
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>            
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        toProjectId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'COST'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      this.form.toDeptId = row.toDeptId;
+      this.form.toProjectId = row.toProjectId;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+                  getManageList({
+                    type: 'COST'
+                  }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'COST'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }  
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/cost_20190319110815.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('COST')">增加成本</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="成本类型"
+          prop="costType.name">
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="接收日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        // { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input size="medium" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>    
+
+        <el-form-item label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>                         
+            <el-option
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option> 
+          </el-select>
+        </el-form-item>  
+          
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门"  @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option> 
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+                     
+          
+        <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>  
+                                  
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>            
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        toProjectId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'COST'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      this.form.toDeptId = row.toDeptId;
+      this.form.toProjectId = row.toProjectId;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+                  getManageList({
+                    type: 'COST'
+                  }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'COST'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }  
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/cost_20190319110821.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('COST')">增加成本</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="成本类型"
+          prop="costType.name">
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="接收日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        // { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input size="samll" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>    
+
+        <el-form-item label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>                         
+            <el-option
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option> 
+          </el-select>
+        </el-form-item>  
+          
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门"  @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option> 
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+                     
+          
+        <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>  
+                                  
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>            
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        toProjectId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'COST'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      this.form.toDeptId = row.toDeptId;
+      this.form.toProjectId = row.toProjectId;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+                  getManageList({
+                    type: 'COST'
+                  }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'COST'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }  
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/cost_20190319111132.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('COST')">增加成本</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="成本类型"
+          prop="costType.name">
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="接收日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        // { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input style="width: 40% " v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>    
+
+        <el-form-item label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>                         
+            <el-option
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option> 
+          </el-select>
+        </el-form-item>  
+          
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门"  @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option> 
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+                     
+          
+        <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>  
+                                  
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>            
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        toProjectId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'COST'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      this.form.toDeptId = row.toDeptId;
+      this.form.toProjectId = row.toProjectId;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+                  getManageList({
+                    type: 'COST'
+                  }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'COST'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }  
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/cost_20190319111143.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('COST')">增加成本</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="成本类型"
+          prop="costType.name">
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="接收日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        // { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input style="width: 38% " v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>    
+
+        <el-form-item label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>                         
+            <el-option
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option> 
+          </el-select>
+        </el-form-item>  
+          
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门"  @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option> 
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+                     
+          
+        <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>  
+                                  
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>            
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        toProjectId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'COST'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      this.form.toDeptId = row.toDeptId;
+      this.form.toProjectId = row.toProjectId;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+                  getManageList({
+                    type: 'COST'
+                  }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'COST'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }  
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/cost_20190319111152.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('COST')">增加成本</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="成本类型"
+          prop="costType.name">
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="接收日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        // { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input style="width: 35% " v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>    
+
+        <el-form-item label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>                         
+            <el-option
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option> 
+          </el-select>
+        </el-form-item>  
+          
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门"  @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option> 
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+                     
+          
+        <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>  
+                                  
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>            
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        toProjectId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'COST'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      this.form.toDeptId = row.toDeptId;
+      this.form.toProjectId = row.toProjectId;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+                  getManageList({
+                    type: 'COST'
+                  }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'COST'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }  
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/cost_20190319140237.vue

@@ -0,0 +1,365 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('COST')">增加成本</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <!-- <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column> -->
+        <el-table-column
+          label="成本类型"
+          prop="costType.name">
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="接收部门"
+          prop="toDepartment.name">
+        </el-table-column>
+        <el-table-column
+          label="接受项目"
+          prop="toProject.name">
+        </el-table-column> 
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>
+        <el-table-column label="备注" prop="remark"></el-table-column>            
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="接收日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        // { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input style="width: 35% " v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>    
+
+        <el-form-item label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>                         
+            <el-option
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option> 
+          </el-select>
+        </el-form-item>  
+          
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门"  @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option> 
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+                     
+          
+        <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>  
+                                  
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>            
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        toProjectId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'COST'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      this.form.toDeptId = row.toDeptId;
+      this.form.toProjectId = row.toProjectId;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+                  getManageList({
+                    type: 'COST'
+                  }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'COST'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }  
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/cost_20190319140300.vue

@@ -0,0 +1,343 @@
+<template>
+  <div class="manage">
+    <div class="add-container">
+      <el-button type="primary" @click="append('COST')">增加成本</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table :data="manageData" style="width: 100%" :row-class-name="tableRowClassName">
+        <!-- <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>-->
+        <el-table-column label="成本类型" prop="costType.name"></el-table-column>
+        <el-table-column label="归属部门" prop="department.name"></el-table-column>
+        <el-table-column label="归属项目" prop="project.name"></el-table-column>
+        <el-table-column label="接收部门" prop="toDepartment.name"></el-table-column>
+        <el-table-column label="接受项目" prop="toProject.name"></el-table-column>
+        <el-table-column label="金额">
+          <template slot-scope="props">
+            <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" prop="remark"></el-table-column>
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">
+      <el-form :model="form" ref="form">
+        <el-form-item
+          label="发生时间"
+          prop="happenTime"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '名称不能为空'}]"
+        >
+          <el-date-picker v-model="form.happenTime" type="date" placeholder="接收日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item
+          label="金额"
+          prop="amount"
+          :label-width="formLabelWidth"
+          :rules="[
+        { required: true, message: '编码不能为空'}, 
+        // { type: 'number', message: '排序必须为数字值'}
+        ]"
+        >
+          <el-input style="width: 35% " v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item
+          label="成本类型"
+          prop="costTypeId"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '状态不能为空'}]"
+        >
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门" @change="getName">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getTeamSelect,
+  getProjectSelect,
+  getProductSelect,
+  getCostTeamSelect,
+  getCostTypeSelect,
+  addManage,
+  getManageList,
+  setManage
+} from "@/api/manageApi";
+export default {
+  data() {
+    return {
+      type: "",
+      dialogFormVisible: false,
+      addFlag: false,
+      id: "",
+      form: {
+        deptId: "",
+        projectId: "",
+        costTypeId: "",
+        companyId: "",
+        happenTime: "",
+        incomeStatus: "",
+        productId: "",
+        remark: "",
+        amount: "",
+        toDeptId: "",
+        toProjectId: "",
+        deptName: "",
+        code: "",
+        name: "",
+        status: "NORMAL",
+        sort: ""
+      },
+      formLabelWidth: "120px",
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    };
+  },
+  created() {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    });
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    });
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    });
+    //获取经营列表
+    getManageList({
+      type: "COST"
+    }).then(res => {
+      this.manageData = res.data.data;
+    });
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    });
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    });
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if (row.type === "COST") {
+        return "cost-row";
+      } else {
+        return "income-row";
+      }
+      return "";
+    },
+    //获取部门名称
+    getName(val) {
+      let obj = {};
+      obj = this.teamSelectData.find(item => {
+        return item.id === val;
+      });
+      let getName = "";
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append(type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true;
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row);
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      this.form.toDeptId = row.toDeptId;
+      this.form.toProjectId = row.toProjectId;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if (this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res);
+              //获取经营列表
+              getManageList({
+                type: "COST"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: "COST"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }
+  }
+};
+</script>
+
+<style scope>
+.manage {
+  padding: 20px;
+  box-sizing: border-box;
+}
+.add-container {
+  float: right;
+  margin-bottom: 20px;
+}
+.right-card {
+  width: 100%;
+  margin: 0 auto;
+}
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+.el-table .cost-row {
+  color: green;
+}
+
+.el-table .income-row {
+  color: red;
+}
+</style>
+

.history/src/pages/manage/index_20190318173111.vue

@@ -0,0 +1,371 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收入状态">
+            <template slot-scope="props">
+              <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+            </template>
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="产品"
+          prop="product.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+            <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>               
+              <el-option
+                v-for="item in productSelectData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>        
+            </el-select> 
+        </el-form-item>         
+        <el-form-item label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>          
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input style="width: 30%;" v-model.number="form.amount" autocomplete="off"></el-input>
+        </el-form-item>                
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">          
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">         
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth" >
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>                                                                   
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>           
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        companyType: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        toProjectId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'INCOME'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/index_20190319095954.vue

@@ -0,0 +1,371 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收入状态">
+            <template slot-scope="props">
+              <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+            </template>
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="产品"
+          prop="product.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="归属123项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+            <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>               
+              <el-option
+                v-for="item in productSelectData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>        
+            </el-select> 
+        </el-form-item>         
+        <el-form-item label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>          
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input style="width: 30%;" v-model.number="form.amount" autocomplete="off"></el-input>
+        </el-form-item>                
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">          
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">         
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth" >
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>                                                                   
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>           
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        companyType: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        toProjectId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'INCOME'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/index_20190319100002.vue

@@ -0,0 +1,371 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收入状态">
+            <template slot-scope="props">
+              <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+            </template>
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="产品"
+          prop="product.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+            <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>               
+              <el-option
+                v-for="item in productSelectData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>        
+            </el-select> 
+        </el-form-item>         
+        <el-form-item label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>          
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        { type: 'number', message: '排序必须为数字值'}
+        ]">
+          <el-input style="width: 30%;" v-model.number="form.amount" autocomplete="off"></el-input>
+        </el-form-item>                
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">          
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">         
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth" >
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>                                                                   
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>           
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        companyType: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        toProjectId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'INCOME'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/index_20190319100123.vue

@@ -0,0 +1,353 @@
+<template>
+  <div class="manage">
+    <div class="add-container">
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table :data="manageData" style="width: 100%" :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无' }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column label="收入状态">
+          <template slot-scope="props">
+            <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="归属部门" prop="department.name"></el-table-column>
+        <el-table-column label="归属项目" prop="project.name"></el-table-column>
+        <el-table-column label="产品" prop="product.name"></el-table-column>
+        <el-table-column label="金额">
+          <template slot-scope="props">
+            <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">
+      <el-form :model="form" ref="form">
+        <el-form-item
+          label="发生时间"
+          prop="happenTime"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '名称不能为空'}]"
+        >
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+          <el-date-picker v-model="form.happenTime" type="date" placeholder="选择日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item
+          label="金额"
+          prop="amount"
+          :label-width="formLabelWidth"
+          :rules="[
+        { required: true, message: '编码不能为空'}, 
+        { type: 'number', message: '排序必须为数字值'}
+        ]"
+        >
+          <el-input style="width: 30%;" v-model.number="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+          <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in productSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="收入状态"
+          prop="incomeStatus"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '状态不能为空'}]"
+        >
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option key label="无" value></el-option>
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getTeamSelect,
+  getProjectSelect,
+  getProductSelect,
+  getCostTeamSelect,
+  getCostTypeSelect,
+  addManage,
+  getManageList,
+  setManage
+} from "@/api/manageApi";
+export default {
+  data() {
+    return {
+      type: "",
+      dialogFormVisible: false,
+      addFlag: false,
+      id: "",
+      form: {
+        deptId: "",
+        projectId: "",
+        costTypeId: "",
+        companyId: "",
+        companyType: "",
+        happenTime: "",
+        incomeStatus: "",
+        productId: "",
+        toProjectId: "",
+        remark: "",
+        amount: "",
+        toDeptId: "",
+        deptName: "",
+        code: "",
+        name: "",
+        status: "NORMAL",
+        sort: ""
+      },
+      formLabelWidth: "120px",
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    };
+  },
+  created() {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    });
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    });
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    });
+    //获取经营列表
+    getManageList({
+      type: "INCOME"
+    }).then(res => {
+      this.manageData = res.data.data;
+    });
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    });
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    });
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if (row.type === "COST") {
+        return "cost-row";
+      } else {
+        return "income-row";
+      }
+      return "";
+    },
+    //获取部门名称
+    getName(val) {
+      let obj = {};
+      obj = this.teamSelectData.find(item => {
+        return item.id === val;
+      });
+      let getName = "";
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append(type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true;
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row);
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if (this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res);
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }
+  }
+};
+</script>
+
+<style scope>
+.manage {
+  padding: 20px;
+  box-sizing: border-box;
+}
+.add-container {
+  float: right;
+  margin-bottom: 20px;
+}
+.right-card {
+  width: 100%;
+  margin: 0 auto;
+}
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+.el-table .cost-row {
+  color: green;
+}
+
+.el-table .income-row {
+  color: red;
+}
+</style>
+

.history/src/pages/manage/index_20190319102105.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收入状态">
+            <template slot-scope="props">
+              <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+            </template>
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="产品"
+          prop="product.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+        { required: true, message: '编码不能为空'}, 
+        { type: 'float', message: '排序必须为数字值'}
+        ]">
+          <el-input style="width: 30%;" v-model.number="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+            <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>               
+              <el-option
+                v-for="item in productSelectData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>        
+            </el-select> 
+        </el-form-item>         
+        <el-form-item label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>          
+                
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">          
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">         
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth" >
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>                                                                   
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>           
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        companyType: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        toProjectId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'INCOME'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/index_20190319102857.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收入状态">
+            <template slot-scope="props">
+              <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+            </template>
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="产品"
+          prop="product.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+          { required: true, message: '编码不能为空'}, 
+          { type: 'password', message: '金额必须为数字值'}
+        ]">
+          <el-input style="width: 30%;" v-model.number="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+            <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>               
+              <el-option
+                v-for="item in productSelectData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>        
+            </el-select> 
+        </el-form-item>         
+        <el-form-item label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>          
+                
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">          
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">         
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth" >
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>                                                                   
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>           
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        companyType: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        toProjectId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'INCOME'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/index_20190319102913.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收入状态">
+            <template slot-scope="props">
+              <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+            </template>
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="产品"
+          prop="product.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+          { required: true, message: '编码不能为空'}, 
+          <!-- { type: 'password', message: '金额必须为数字值'} -->
+        ]">
+          <el-input style="width: 30%;" v-model.number="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+            <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>               
+              <el-option
+                v-for="item in productSelectData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>        
+            </el-select> 
+        </el-form-item>         
+        <el-form-item label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>          
+                
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">          
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">         
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth" >
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>                                                                   
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>           
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        companyType: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        toProjectId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'INCOME'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/index_20190319102919.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收入状态">
+            <template slot-scope="props">
+              <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+            </template>
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="产品"
+          prop="product.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+          { required: true, message: '编码不能为空'}, 
+         // { type: 'password', message: '金额必须为数字值'}
+        ]">
+          <el-input style="width: 30%;" v-model.number="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+            <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>               
+              <el-option
+                v-for="item in productSelectData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>        
+            </el-select> 
+        </el-form-item>         
+        <el-form-item label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>          
+                
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">          
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">         
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth" >
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>                                                                   
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>           
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        companyType: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        toProjectId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'INCOME'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/index_20190319103719.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收入状态">
+            <template slot-scope="props">
+              <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+            </template>
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="产品"
+          prop="product.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+          { required: true, message: '编码不能为空'}, 
+         // { type: 'number', message: '金额必须为数字值'}
+        ]">
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+            <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>               
+              <el-option
+                v-for="item in productSelectData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>        
+            </el-select> 
+        </el-form-item>         
+        <el-form-item label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>          
+                
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">          
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">         
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth" >
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>                                                                   
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>           
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        companyType: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        toProjectId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'INCOME'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/index_20190319103857.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收入状态">
+            <template slot-scope="props">
+              <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+            </template>
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="产品"
+          prop="product.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+          { required: true, message: '编码不能为空'}, 
+         // { type: 'number', message: '金额必须为数字值'}
+        ]">
+          <el-input style="width: 30%;" v-model.tofixed(2)="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+            <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>               
+              <el-option
+                v-for="item in productSelectData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>        
+            </el-select> 
+        </el-form-item>         
+        <el-form-item label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>          
+                
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">          
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">         
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth" >
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>                                                                   
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>           
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        companyType: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        toProjectId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'INCOME'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/index_20190319103906.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收入状态">
+            <template slot-scope="props">
+              <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+            </template>
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="产品"
+          prop="product.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+          { required: true, message: '编码不能为空'}, 
+         // { type: 'number', message: '金额必须为数字值'}
+        ]">
+          <el-input style="width: 30%;" v-model.tofixed(2)="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+            <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>               
+              <el-option
+                v-for="item in productSelectData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>        
+            </el-select> 
+        </el-form-item>         
+        <el-form-item label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>          
+                
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">          
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">         
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth" >
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>                                                                   
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>           
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        companyType: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        toProjectId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'INCOME'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/index_20190319103922.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收入状态">
+            <template slot-scope="props">
+              <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+            </template>
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="产品"
+          prop="product.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+          { required: true, message: '编码不能为空'}, 
+         // { type: 'number', message: '金额必须为数字值'}
+        ]">
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+            <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>               
+              <el-option
+                v-for="item in productSelectData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>        
+            </el-select> 
+        </el-form-item>         
+        <el-form-item label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>          
+                
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">          
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">         
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth" >
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>                                                                   
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>           
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        companyType: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        toProjectId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'INCOME'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/index_20190319104135.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收入状态">
+            <template slot-scope="props">
+              <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+            </template>
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="产品"
+          prop="product.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+          { required: true, message: '编码不能为空'}, 
+          { type: 'number', message: '金额必须为数字值'}
+        ]">
+          <el-input style="width: 30%;" v-model.trim="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+            <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>               
+              <el-option
+                v-for="item in productSelectData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>        
+            </el-select> 
+        </el-form-item>         
+        <el-form-item label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>          
+                
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">          
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">         
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth" >
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>                                                                   
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>           
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        companyType: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        toProjectId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'INCOME'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/index_20190319104217.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收入状态">
+            <template slot-scope="props">
+              <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+            </template>
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="产品"
+          prop="product.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+          { required: true, message: '编码不能为空'}, 
+          { type: 'number', message: '金额必须为数字值'}
+        ]">
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+            <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>               
+              <el-option
+                v-for="item in productSelectData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>        
+            </el-select> 
+        </el-form-item>         
+        <el-form-item label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>          
+                
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">          
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">         
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth" >
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>                                                                   
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>           
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        companyType: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        toProjectId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'INCOME'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/index_20190319104304.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收入状态">
+            <template slot-scope="props">
+              <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+            </template>
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="产品"
+          prop="product.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+          { required: true, message: '编码不能为空'}, 
+          { type: 'float', message: '金额必须为数字值'}
+        ]">
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+            <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>               
+              <el-option
+                v-for="item in productSelectData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>        
+            </el-select> 
+        </el-form-item>         
+        <el-form-item label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>          
+                
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">          
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">         
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth" >
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>                                                                   
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>           
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        companyType: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        toProjectId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'INCOME'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/index_20190319104442.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收入状态">
+            <template slot-scope="props">
+              <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+            </template>
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="产品"
+          prop="product.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+          { required: true, message: '编码不能为空'}, 
+          <!-- { type: 'float', message: '金额必须为数字值'} -->
+        ]">
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+            <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>               
+              <el-option
+                v-for="item in productSelectData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>        
+            </el-select> 
+        </el-form-item>         
+        <el-form-item label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>          
+                
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">          
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">         
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth" >
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>                                                                   
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>           
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        companyType: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        toProjectId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'INCOME'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/index_20190319104448.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="manage">
+    <div class="add-container">    
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table
+      :data="manageData"
+      style="width: 100%"
+      :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收入状态">
+            <template slot-scope="props">
+              <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+            </template>
+        </el-table-column>  
+        <el-table-column
+          label="归属部门"
+          prop="department.name">
+        </el-table-column>
+        <el-table-column
+          label="归属项目"
+          prop="project.name">
+        </el-table-column>
+        <el-table-column
+          label="产品"
+          prop="product.name">
+        </el-table-column>
+        <el-table-column
+          label="金额">
+            <template slot-scope="props">
+              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+            </template>
+        </el-table-column>              
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>    
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+            <el-date-picker
+              v-model="form.happenTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>  
+        </el-form-item>
+        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
+          { required: true, message: '编码不能为空'}, 
+          // { type: 'float', message: '金额必须为数字值'}
+        ]">
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+            <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>               
+              <el-option
+                v-for="item in productSelectData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>        
+            </el-select> 
+        </el-form-item>         
+        <el-form-item label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>          
+                
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">          
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">         
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select> 
+        </el-form-item>
+        
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth" >
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>        
+          </el-select>      
+        </el-form-item>                                                                   
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>           
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>  
+  </div>
+</template>
+
+<script>
+import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+export default {
+  data() {
+    return {
+      type: '',
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        deptId: '',
+        projectId: '',
+        costTypeId: '',
+        companyId: '',
+        companyType: '',
+        happenTime: '',
+        incomeStatus: '',
+        productId: '',
+        toProjectId: '',
+        remark: '',
+        amount: '',
+        toDeptId: '',
+        deptName: '',
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    }
+  },
+  created () {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    })
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    })
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    })
+    //获取经营列表
+    getManageList({
+      type: 'INCOME'
+    }).then(res => {
+      this.manageData = res.data.data;
+    })
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    })
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    })
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (row.type === 'COST') {
+        return 'cost-row';
+      } else {
+        return 'income-row';
+      }
+      return '';
+    },
+    //获取部门名称
+    getName (val) {
+      let obj = {};
+      obj = this.teamSelectData.find((item)=>{
+        return item.id === val;
+      });
+      let getName = ''
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append (type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row)
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if(this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res)
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
+                this.manageData = res.data.data;
+              })
+              this.$refs[formName].resetFields();
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }   
+  }
+}
+</script>
+
+<style scope>
+  .manage {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add-container {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+  .el-table .cost-row {
+    color: green;
+  }
+
+  .el-table .income-row {
+    color: red;
+  }
+</style>
+

.history/src/pages/manage/index_20190319104830.vue

@@ -0,0 +1,353 @@
+<template>
+  <div class="manage">
+    <div class="add-container">
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table :data="manageData" style="width: 100%" :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无' }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column label="收入状态">
+          <template slot-scope="props">
+            <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="归属部门" prop="department.name"></el-table-column>
+        <el-table-column label="归属项目" prop="project.name"></el-table-column>
+        <el-table-column label="产品" prop="product.name"></el-table-column>
+        <el-table-column label="金额">
+          <template slot-scope="props">
+            <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">
+      <el-form :model="form" ref="form">
+        <el-form-item
+          label="发生时间"
+          prop="happenTime"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '名称不能为空'}]"
+        >
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+          <el-date-picker v-model="form.happenTime" type="date" placeholder="选择日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item
+          label="金额"
+          prop="amount"
+          :label-width="formLabelWidth"
+          :rules="[
+          { required: true, message: '编码不能为空'}, 
+          // { type: 'float', message: '金额必须为数字值'}
+        ]"
+        >
+          <el-form-item
+            label="收入状态"
+            prop="incomeStatus"
+            :label-width="formLabelWidth"
+            :rules="[{ required: true, message: '状态不能为空'}]"
+          >
+            <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+              <el-option key label="无" value></el-option>
+              <el-option label="开票/应收" value="INVOICE"></el-option>
+              <el-option label="到账" value="ARRIVAL"></el-option>
+              <el-option label="内部核算" value="INTERNAL"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+          <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in productSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getTeamSelect,
+  getProjectSelect,
+  getProductSelect,
+  getCostTeamSelect,
+  getCostTypeSelect,
+  addManage,
+  getManageList,
+  setManage
+} from "@/api/manageApi";
+export default {
+  data() {
+    return {
+      type: "",
+      dialogFormVisible: false,
+      addFlag: false,
+      id: "",
+      form: {
+        deptId: "",
+        projectId: "",
+        costTypeId: "",
+        companyId: "",
+        companyType: "",
+        happenTime: "",
+        incomeStatus: "",
+        productId: "",
+        toProjectId: "",
+        remark: "",
+        amount: "",
+        toDeptId: "",
+        deptName: "",
+        code: "",
+        name: "",
+        status: "NORMAL",
+        sort: ""
+      },
+      formLabelWidth: "120px",
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    };
+  },
+  created() {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    });
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    });
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    });
+    //获取经营列表
+    getManageList({
+      type: "INCOME"
+    }).then(res => {
+      this.manageData = res.data.data;
+    });
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    });
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    });
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if (row.type === "COST") {
+        return "cost-row";
+      } else {
+        return "income-row";
+      }
+      return "";
+    },
+    //获取部门名称
+    getName(val) {
+      let obj = {};
+      obj = this.teamSelectData.find(item => {
+        return item.id === val;
+      });
+      let getName = "";
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append(type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true;
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row);
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if (this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res);
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }
+  }
+};
+</script>
+
+<style scope>
+.manage {
+  padding: 20px;
+  box-sizing: border-box;
+}
+.add-container {
+  float: right;
+  margin-bottom: 20px;
+}
+.right-card {
+  width: 100%;
+  margin: 0 auto;
+}
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+.el-table .cost-row {
+  color: green;
+}
+
+.el-table .income-row {
+  color: red;
+}
+</style>
+

.history/src/pages/manage/index_20190319104911.vue

@@ -0,0 +1,354 @@
+<template>
+  <div class="manage">
+    <div class="add-container">
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table :data="manageData" style="width: 100%" :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无' }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column label="收入状态">
+          <template slot-scope="props">
+            <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="归属部门" prop="department.name"></el-table-column>
+        <el-table-column label="归属项目" prop="project.name"></el-table-column>
+        <el-table-column label="产品" prop="product.name"></el-table-column>
+        <el-table-column label="金额">
+          <template slot-scope="props">
+            <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">
+      <el-form :model="form" ref="form">
+        <el-form-item
+          label="发生时间"
+          prop="happenTime"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '名称不能为空'}]"
+        >
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+          <el-date-picker v-model="form.happenTime" type="date" placeholder="选择日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item
+          label="金额"
+          prop="amount"
+          :label-width="formLabelWidth"
+          :rules="[
+          { required: true, message: '编码不能为空'}, 
+          // { type: 'float', message: '金额必须为数字值'}
+        ]"
+        >
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="收入状态"
+          prop="incomeStatus"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '状态不能为空'}]"
+        >
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option key label="无" value></el-option>
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+          <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in productSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getTeamSelect,
+  getProjectSelect,
+  getProductSelect,
+  getCostTeamSelect,
+  getCostTypeSelect,
+  addManage,
+  getManageList,
+  setManage
+} from "@/api/manageApi";
+export default {
+  data() {
+    return {
+      type: "",
+      dialogFormVisible: false,
+      addFlag: false,
+      id: "",
+      form: {
+        deptId: "",
+        projectId: "",
+        costTypeId: "",
+        companyId: "",
+        companyType: "",
+        happenTime: "",
+        incomeStatus: "",
+        productId: "",
+        toProjectId: "",
+        remark: "",
+        amount: "",
+        toDeptId: "",
+        deptName: "",
+        code: "",
+        name: "",
+        status: "NORMAL",
+        sort: ""
+      },
+      formLabelWidth: "120px",
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    };
+  },
+  created() {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    });
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    });
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    });
+    //获取经营列表
+    getManageList({
+      type: "INCOME"
+    }).then(res => {
+      this.manageData = res.data.data;
+    });
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    });
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    });
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if (row.type === "COST") {
+        return "cost-row";
+      } else {
+        return "income-row";
+      }
+      return "";
+    },
+    //获取部门名称
+    getName(val) {
+      let obj = {};
+      obj = this.teamSelectData.find(item => {
+        return item.id === val;
+      });
+      let getName = "";
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append(type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true;
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row);
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if (this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res);
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }
+  }
+};
+</script>
+
+<style scope>
+.manage {
+  padding: 20px;
+  box-sizing: border-box;
+}
+.add-container {
+  float: right;
+  margin-bottom: 20px;
+}
+.right-card {
+  width: 100%;
+  margin: 0 auto;
+}
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+.el-table .cost-row {
+  color: green;
+}
+
+.el-table .income-row {
+  color: red;
+}
+</style>
+

.history/src/pages/manage/index_20190319111612.vue

@@ -0,0 +1,357 @@
+<template>
+  <div class="manage">
+    <div class="add-container">
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table :data="manageData" style="width: 100%" :row-class-name="tableRowClassName">
+        <!-- <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无' }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column> -->
+        <el-table-column label="收入状态">
+          <template slot-scope="props">
+            <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="归属部门" prop="department.name"></el-table-column>
+        <el-table-column label="归属项目" prop="project.name"></el-table-column>
+        <el-table-column label="产品" prop="product.name"></el-table-column>
+        <el-table-column label="接收部门" prop="product.name"></el-table-column>
+        <el-table-column label="接受项目" prop="product.name"></el-table-column>
+        <el-table-column label="备注" prop="product.name"></el-table-column>
+        <el-table-column label="金额">
+          <template slot-scope="props">
+            <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">
+      <el-form :model="form" ref="form">
+        <el-form-item
+          label="发生时间"
+          prop="happenTime"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '名称不能为空'}]"
+        >
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+          <el-date-picker v-model="form.happenTime" type="date" placeholder="选择日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item
+          label="金额"
+          prop="amount"
+          :label-width="formLabelWidth"
+          :rules="[
+          { required: true, message: '编码不能为空'}, 
+          // { type: 'float', message: '金额必须为数字值'}
+        ]"
+        >
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="收入状态"
+          prop="incomeStatus"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '状态不能为空'}]"
+        >
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option key label="无" value></el-option>
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+          <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in productSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getTeamSelect,
+  getProjectSelect,
+  getProductSelect,
+  getCostTeamSelect,
+  getCostTypeSelect,
+  addManage,
+  getManageList,
+  setManage
+} from "@/api/manageApi";
+export default {
+  data() {
+    return {
+      type: "",
+      dialogFormVisible: false,
+      addFlag: false,
+      id: "",
+      form: {
+        deptId: "",
+        projectId: "",
+        costTypeId: "",
+        companyId: "",
+        companyType: "",
+        happenTime: "",
+        incomeStatus: "",
+        productId: "",
+        toProjectId: "",
+        remark: "",
+        amount: "",
+        toDeptId: "",
+        deptName: "",
+        code: "",
+        name: "",
+        status: "NORMAL",
+        sort: ""
+      },
+      formLabelWidth: "120px",
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    };
+  },
+  created() {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    });
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    });
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    });
+    //获取经营列表
+    getManageList({
+      type: "INCOME"
+    }).then(res => {
+      this.manageData = res.data.data;
+    });
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    });
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    });
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if (row.type === "COST") {
+        return "cost-row";
+      } else {
+        return "income-row";
+      }
+      return "";
+    },
+    //获取部门名称
+    getName(val) {
+      let obj = {};
+      obj = this.teamSelectData.find(item => {
+        return item.id === val;
+      });
+      let getName = "";
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append(type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true;
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row);
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if (this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res);
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }
+  }
+};
+</script>
+
+<style scope>
+.manage {
+  padding: 20px;
+  box-sizing: border-box;
+}
+.add-container {
+  float: right;
+  margin-bottom: 20px;
+}
+.right-card {
+  width: 100%;
+  margin: 0 auto;
+}
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+.el-table .cost-row {
+  color: green;
+}
+
+.el-table .income-row {
+  color: red;
+}
+</style>
+

.history/src/pages/manage/index_20190319112202.vue

@@ -0,0 +1,358 @@
+<template>
+  <div class="manage">
+    <div class="add-container">
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table :data="manageData" style="width: 100%" :row-class-name="tableRowClassName">
+        <!-- <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无' }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column> -->
+        <el-table-column label="收入状态">
+          <template slot-scope="props">
+            <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="归属部门" prop="department.name"></el-table-column>
+        <el-table-column label="归属项目" prop="project.name"></el-table-column>
+        <el-table-column label="产品" prop="product.name"></el-table-column>
+        <el-table-column label="接收部门" prop="product.name"></el-table-column>
+        <el-table-column label="接受项目" prop="product.name"></el-table-column>
+        <el-table-column label="备注" prop="product.name"></el-table-column>
+        <el-table-column label="金额">
+          <template slot-scope="props">
+            <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">
+      <el-form :model="form" ref="form">
+        <el-form-item
+          label="发生时间"
+          prop="happenTime"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '名称不能为空'}]"
+        >
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+          <el-date-picker v-model="form.happenTime" type="date" placeholder="选择日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item
+          label="金额"
+          prop="amount"
+          :label-width="formLabelWidth"
+          :rules="[
+          { required: true, message: '编码不能为空'}, 
+          // { type: 'float', message: '金额必须为数字值'}
+        ]"
+        >
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="收入状态"
+          prop="incomeStatus"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '状态不能为空'}]"
+        >
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option key label="无" value></el-option>
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+          <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in productSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getTeamSelect,
+  getProjectSelect,
+  getProductSelect,
+  getCostTeamSelect,
+  getCostTypeSelect,
+  addManage,
+  getManageList,
+  setManage
+} from "@/api/manageApi";
+export default {
+  data() {
+    return {
+      type: "",
+      dialogFormVisible: false,
+      addFlag: false,
+      id: "",
+      form: {
+        deptId: "",
+        projectId: "",
+        costTypeId: "",
+        companyId: "",
+        companyType: "",
+        happenTime: "",
+        incomeStatus: "",
+        productId: "",
+        toProjectId: "",
+        remark: "",
+        amount: "",
+        toDeptId: "",
+        deptName: "",
+        code: "",
+        name: "",
+        status: "NORMAL",
+        sort: ""
+      },
+      formLabelWidth: "120px",
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    };
+  },
+  created() {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    });
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    });
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    });
+    //获取经营列表
+    getManageList({
+      type: "INCOME"
+    }).then(res => {
+      this.manageData = res.data.data;
+      console.log(res.data.data)
+    });
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    });
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    });
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if (row.type === "COST") {
+        return "cost-row";
+      } else {
+        return "income-row";
+      }
+      return "";
+    },
+    //获取部门名称
+    getName(val) {
+      let obj = {};
+      obj = this.teamSelectData.find(item => {
+        return item.id === val;
+      });
+      let getName = "";
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append(type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true;
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row);
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if (this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res);
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }
+  }
+};
+</script>
+
+<style scope>
+.manage {
+  padding: 20px;
+  box-sizing: border-box;
+}
+.add-container {
+  float: right;
+  margin-bottom: 20px;
+}
+.right-card {
+  width: 100%;
+  margin: 0 auto;
+}
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+.el-table .cost-row {
+  color: green;
+}
+
+.el-table .income-row {
+  color: red;
+}
+</style>
+

.history/src/pages/manage/index_20190319112537.vue

@@ -0,0 +1,358 @@
+<template>
+  <div class="manage">
+    <div class="add-container">
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table :data="manageData" style="width: 100%" :row-class-name="tableRowClassName">
+        <!-- <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无' }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column> -->
+        <el-table-column label="收入状态">
+          <template slot-scope="props">
+            <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="归属部门" prop="department.name"></el-table-column>
+        <el-table-column label="归属项目" prop="project.name"></el-table-column>
+        <el-table-column label="产品" prop="product.name"></el-table-column>
+        <el-table-column label="接收部门" prop="toDepartment.name"></el-table-column>
+        <el-table-column label="接受项目" prop="product.name"></el-table-column>
+        <el-table-column label="备注" prop="remark"></el-table-column>
+        <el-table-column label="金额">
+          <template slot-scope="props">
+            <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">
+      <el-form :model="form" ref="form">
+        <el-form-item
+          label="发生时间"
+          prop="happenTime"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '名称不能为空'}]"
+        >
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+          <el-date-picker v-model="form.happenTime" type="date" placeholder="选择日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item
+          label="金额"
+          prop="amount"
+          :label-width="formLabelWidth"
+          :rules="[
+          { required: true, message: '编码不能为空'}, 
+          // { type: 'float', message: '金额必须为数字值'}
+        ]"
+        >
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="收入状态"
+          prop="incomeStatus"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '状态不能为空'}]"
+        >
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option key label="无" value></el-option>
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+          <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in productSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getTeamSelect,
+  getProjectSelect,
+  getProductSelect,
+  getCostTeamSelect,
+  getCostTypeSelect,
+  addManage,
+  getManageList,
+  setManage
+} from "@/api/manageApi";
+export default {
+  data() {
+    return {
+      type: "",
+      dialogFormVisible: false,
+      addFlag: false,
+      id: "",
+      form: {
+        deptId: "",
+        projectId: "",
+        costTypeId: "",
+        companyId: "",
+        companyType: "",
+        happenTime: "",
+        incomeStatus: "",
+        productId: "",
+        toProjectId: "",
+        remark: "",
+        amount: "",
+        toDeptId: "",
+        deptName: "",
+        code: "",
+        name: "",
+        status: "NORMAL",
+        sort: ""
+      },
+      formLabelWidth: "120px",
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    };
+  },
+  created() {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    });
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    });
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    });
+    //获取经营列表
+    getManageList({
+      type: "INCOME"
+    }).then(res => {
+      this.manageData = res.data.data;
+      console.log(res.data.data)
+    });
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    });
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    });
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if (row.type === "COST") {
+        return "cost-row";
+      } else {
+        return "income-row";
+      }
+      return "";
+    },
+    //获取部门名称
+    getName(val) {
+      let obj = {};
+      obj = this.teamSelectData.find(item => {
+        return item.id === val;
+      });
+      let getName = "";
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append(type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true;
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row);
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if (this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res);
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }
+  }
+};
+</script>
+
+<style scope>
+.manage {
+  padding: 20px;
+  box-sizing: border-box;
+}
+.add-container {
+  float: right;
+  margin-bottom: 20px;
+}
+.right-card {
+  width: 100%;
+  margin: 0 auto;
+}
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+.el-table .cost-row {
+  color: green;
+}
+
+.el-table .income-row {
+  color: red;
+}
+</style>
+

.history/src/pages/manage/index_20190319112652.vue

@@ -0,0 +1,358 @@
+<template>
+  <div class="manage">
+    <div class="add-container">
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table :data="manageData" style="width: 100%" :row-class-name="tableRowClassName">
+        <!-- <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无' }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column> -->
+        <el-table-column label="收入状态">
+          <template slot-scope="props">
+            <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="归属部门" prop="department.name"></el-table-column>
+        <el-table-column label="归属项目" prop="project.name"></el-table-column>
+        <el-table-column label="产品" prop="product.name"></el-table-column>
+        <el-table-column label="接收部门" prop="toDepartment.name"></el-table-column>
+        <el-table-column label="接受项目" prop="product.name"></el-table-column>
+        <el-table-column label="备注" prop={{remark ? remark : -}} ></el-table-column>
+        <el-table-column label="金额">
+          <template slot-scope="props">
+            <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">
+      <el-form :model="form" ref="form">
+        <el-form-item
+          label="发生时间"
+          prop="happenTime"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '名称不能为空'}]"
+        >
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+          <el-date-picker v-model="form.happenTime" type="date" placeholder="选择日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item
+          label="金额"
+          prop="amount"
+          :label-width="formLabelWidth"
+          :rules="[
+          { required: true, message: '编码不能为空'}, 
+          // { type: 'float', message: '金额必须为数字值'}
+        ]"
+        >
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="收入状态"
+          prop="incomeStatus"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '状态不能为空'}]"
+        >
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option key label="无" value></el-option>
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+          <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in productSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getTeamSelect,
+  getProjectSelect,
+  getProductSelect,
+  getCostTeamSelect,
+  getCostTypeSelect,
+  addManage,
+  getManageList,
+  setManage
+} from "@/api/manageApi";
+export default {
+  data() {
+    return {
+      type: "",
+      dialogFormVisible: false,
+      addFlag: false,
+      id: "",
+      form: {
+        deptId: "",
+        projectId: "",
+        costTypeId: "",
+        companyId: "",
+        companyType: "",
+        happenTime: "",
+        incomeStatus: "",
+        productId: "",
+        toProjectId: "",
+        remark: "",
+        amount: "",
+        toDeptId: "",
+        deptName: "",
+        code: "",
+        name: "",
+        status: "NORMAL",
+        sort: ""
+      },
+      formLabelWidth: "120px",
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    };
+  },
+  created() {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    });
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    });
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    });
+    //获取经营列表
+    getManageList({
+      type: "INCOME"
+    }).then(res => {
+      this.manageData = res.data.data;
+      console.log(res.data.data)
+    });
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    });
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    });
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if (row.type === "COST") {
+        return "cost-row";
+      } else {
+        return "income-row";
+      }
+      return "";
+    },
+    //获取部门名称
+    getName(val) {
+      let obj = {};
+      obj = this.teamSelectData.find(item => {
+        return item.id === val;
+      });
+      let getName = "";
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append(type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true;
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row);
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if (this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res);
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }
+  }
+};
+</script>
+
+<style scope>
+.manage {
+  padding: 20px;
+  box-sizing: border-box;
+}
+.add-container {
+  float: right;
+  margin-bottom: 20px;
+}
+.right-card {
+  width: 100%;
+  margin: 0 auto;
+}
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+.el-table .cost-row {
+  color: green;
+}
+
+.el-table .income-row {
+  color: red;
+}
+</style>
+

.history/src/pages/manage/index_20190319112942.vue

@@ -0,0 +1,358 @@
+<template>
+  <div class="manage">
+    <div class="add-container">
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table :data="manageData" style="width: 100%" :row-class-name="tableRowClassName">
+        <!-- <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无' }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column> -->
+        <el-table-column label="收入状态">
+          <template slot-scope="props">
+            <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="归属部门" prop="department.name"></el-table-column>
+        <el-table-column label="归属项目" prop="project.name"></el-table-column>
+        <el-table-column label="产品" prop="product.name"></el-table-column>
+        <el-table-column label="接收部门" prop="toDepartment.name"></el-table-column>
+        <el-table-column label="接受项目" prop="product.name"></el-table-column>
+        <el-table-column label="备注" prop="remark"></el-table-column>
+        <el-table-column label="金额">
+          <template slot-scope="props">
+            <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">
+      <el-form :model="form" ref="form">
+        <el-form-item
+          label="发生时间"
+          prop="happenTime"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '名称不能为空'}]"
+        >
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+          <el-date-picker v-model="form.happenTime" type="date" placeholder="选择日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item
+          label="金额"
+          prop="amount"
+          :label-width="formLabelWidth"
+          :rules="[
+          { required: true, message: '编码不能为空'}, 
+          // { type: 'float', message: '金额必须为数字值'}
+        ]"
+        >
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="收入状态"
+          prop="incomeStatus"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '状态不能为空'}]"
+        >
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option key label="无" value></el-option>
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+          <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in productSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getTeamSelect,
+  getProjectSelect,
+  getProductSelect,
+  getCostTeamSelect,
+  getCostTypeSelect,
+  addManage,
+  getManageList,
+  setManage
+} from "@/api/manageApi";
+export default {
+  data() {
+    return {
+      type: "",
+      dialogFormVisible: false,
+      addFlag: false,
+      id: "",
+      form: {
+        deptId: "",
+        projectId: "",
+        costTypeId: "",
+        companyId: "",
+        companyType: "",
+        happenTime: "",
+        incomeStatus: "",
+        productId: "",
+        toProjectId: "",
+        remark: "",
+        amount: "",
+        toDeptId: "",
+        deptName: "",
+        code: "",
+        name: "",
+        status: "NORMAL",
+        sort: ""
+      },
+      formLabelWidth: "120px",
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    };
+  },
+  created() {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    });
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    });
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    });
+    //获取经营列表
+    getManageList({
+      type: "INCOME"
+    }).then(res => {
+      this.manageData = res.data.data;
+      console.log(res.data.data)
+    });
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    });
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    });
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if (row.type === "COST") {
+        return "cost-row";
+      } else {
+        return "income-row";
+      }
+      return "";
+    },
+    //获取部门名称
+    getName(val) {
+      let obj = {};
+      obj = this.teamSelectData.find(item => {
+        return item.id === val;
+      });
+      let getName = "";
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append(type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true;
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row);
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if (this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res);
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }
+  }
+};
+</script>
+
+<style scope>
+.manage {
+  padding: 20px;
+  box-sizing: border-box;
+}
+.add-container {
+  float: right;
+  margin-bottom: 20px;
+}
+.right-card {
+  width: 100%;
+  margin: 0 auto;
+}
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+.el-table .cost-row {
+  color: green;
+}
+
+.el-table .income-row {
+  color: red;
+}
+</style>
+

.history/src/pages/manage/index_20190319113025.vue

@@ -0,0 +1,358 @@
+<template>
+  <div class="manage">
+    <div class="add-container">
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table :data="manageData" style="width: 100%" :row-class-name="tableRowClassName">
+        <!-- <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无' }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column> -->
+        <el-table-column label="收入状态">
+          <template slot-scope="props">
+            <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="归属部门" prop="department.name"></el-table-column>
+        <el-table-column label="归属项目" prop="project.name"></el-table-column>
+        <el-table-column label="产品" prop="product.name"></el-table-column>
+        <el-table-column label="接收部门" prop="toDepartment.name"></el-table-column>
+        <el-table-column label="接受项目" prop="toProject.name"></el-table-column>
+        <el-table-column label="备注" prop="remark"></el-table-column>
+        <el-table-column label="金额">
+          <template slot-scope="props">
+            <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">
+      <el-form :model="form" ref="form">
+        <el-form-item
+          label="发生时间"
+          prop="happenTime"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '名称不能为空'}]"
+        >
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+          <el-date-picker v-model="form.happenTime" type="date" placeholder="选择日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item
+          label="金额"
+          prop="amount"
+          :label-width="formLabelWidth"
+          :rules="[
+          { required: true, message: '编码不能为空'}, 
+          // { type: 'float', message: '金额必须为数字值'}
+        ]"
+        >
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="收入状态"
+          prop="incomeStatus"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '状态不能为空'}]"
+        >
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option key label="无" value></el-option>
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+          <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in productSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getTeamSelect,
+  getProjectSelect,
+  getProductSelect,
+  getCostTeamSelect,
+  getCostTypeSelect,
+  addManage,
+  getManageList,
+  setManage
+} from "@/api/manageApi";
+export default {
+  data() {
+    return {
+      type: "",
+      dialogFormVisible: false,
+      addFlag: false,
+      id: "",
+      form: {
+        deptId: "",
+        projectId: "",
+        costTypeId: "",
+        companyId: "",
+        companyType: "",
+        happenTime: "",
+        incomeStatus: "",
+        productId: "",
+        toProjectId: "",
+        remark: "",
+        amount: "",
+        toDeptId: "",
+        deptName: "",
+        code: "",
+        name: "",
+        status: "NORMAL",
+        sort: ""
+      },
+      formLabelWidth: "120px",
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    };
+  },
+  created() {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    });
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    });
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    });
+    //获取经营列表
+    getManageList({
+      type: "INCOME"
+    }).then(res => {
+      this.manageData = res.data.data;
+      console.log(res.data.data)
+    });
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    });
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    });
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if (row.type === "COST") {
+        return "cost-row";
+      } else {
+        return "income-row";
+      }
+      return "";
+    },
+    //获取部门名称
+    getName(val) {
+      let obj = {};
+      obj = this.teamSelectData.find(item => {
+        return item.id === val;
+      });
+      let getName = "";
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append(type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true;
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row);
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if (this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res);
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }
+  }
+};
+</script>
+
+<style scope>
+.manage {
+  padding: 20px;
+  box-sizing: border-box;
+}
+.add-container {
+  float: right;
+  margin-bottom: 20px;
+}
+.right-card {
+  width: 100%;
+  margin: 0 auto;
+}
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+.el-table .cost-row {
+  color: green;
+}
+
+.el-table .income-row {
+  color: red;
+}
+</style>
+

.history/src/pages/manage/index_20190319140808.vue

@@ -0,0 +1,358 @@
+<template>
+  <div class="manage">
+    <div class="add-container">
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table :data="manageData" style="width: 100%" :row-class-name="tableRowClassName">
+        <!-- <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无' }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column> -->
+        <el-table-column label="收入状态">
+          <template slot-scope="props">
+            <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="归属部门" prop="department.name"></el-table-column>
+        <el-table-column label="归属项目" prop="project.name"></el-table-column>
+        <el-table-column label="产品" prop="product.name"></el-table-column>
+        <el-table-column label="接收部门" prop="toDepartment.name"></el-table-column>
+        <el-table-column label="接受项目" prop="toproject.name"></el-table-column>
+        <el-table-column label="备注" prop="remark"></el-table-column>
+        <el-table-column label="金额">
+          <template slot-scope="props">
+            <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">
+      <el-form :model="form" ref="form">
+        <el-form-item
+          label="发生时间"
+          prop="happenTime"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '名称不能为空'}]"
+        >
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+          <el-date-picker v-model="form.happenTime" type="date" placeholder="选择日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item
+          label="金额"
+          prop="amount"
+          :label-width="formLabelWidth"
+          :rules="[
+          { required: true, message: '编码不能为空'}, 
+          // { type: 'float', message: '金额必须为数字值'}
+        ]"
+        >
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="收入状态"
+          prop="incomeStatus"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '状态不能为空'}]"
+        >
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option key label="无" value></el-option>
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+          <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in productSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getTeamSelect,
+  getProjectSelect,
+  getProductSelect,
+  getCostTeamSelect,
+  getCostTypeSelect,
+  addManage,
+  getManageList,
+  setManage
+} from "@/api/manageApi";
+export default {
+  data() {
+    return {
+      type: "",
+      dialogFormVisible: false,
+      addFlag: false,
+      id: "",
+      form: {
+        deptId: "",
+        projectId: "",
+        costTypeId: "",
+        companyId: "",
+        companyType: "",
+        happenTime: "",
+        incomeStatus: "",
+        productId: "",
+        toProjectId: "",
+        remark: "",
+        amount: "",
+        toDeptId: "",
+        deptName: "",
+        code: "",
+        name: "",
+        status: "NORMAL",
+        sort: ""
+      },
+      formLabelWidth: "120px",
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    };
+  },
+  created() {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    });
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    });
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    });
+    //获取经营列表
+    getManageList({
+      type: "INCOME"
+    }).then(res => {
+      this.manageData = res.data.data;
+      console.log(res.data.data)
+    });
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    });
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    });
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if (row.type === "COST") {
+        return "cost-row";
+      } else {
+        return "income-row";
+      }
+      return "";
+    },
+    //获取部门名称
+    getName(val) {
+      let obj = {};
+      obj = this.teamSelectData.find(item => {
+        return item.id === val;
+      });
+      let getName = "";
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append(type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true;
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row);
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if (this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res);
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }
+  }
+};
+</script>
+
+<style scope>
+.manage {
+  padding: 20px;
+  box-sizing: border-box;
+}
+.add-container {
+  float: right;
+  margin-bottom: 20px;
+}
+.right-card {
+  width: 100%;
+  margin: 0 auto;
+}
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+.el-table .cost-row {
+  color: green;
+}
+
+.el-table .income-row {
+  color: red;
+}
+</style>
+

.history/src/pages/manage/index_20190319140846.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="manage">
+    <div class="add-container">
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table :data="manageData" style="width: 100%" :row-class-name="tableRowClassName">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无' }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column label="收入状态">
+          <template slot-scope="props">
+            <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="归属部门" prop="department.name"></el-table-column>
+        <el-table-column label="归属项目" prop="project.name"></el-table-column>
+        <el-table-column label="产品" prop="product.name"></el-table-column>
+        <el-table-column label="接收部门" prop="product.name"></el-table-column>
+        <el-table-column label="接收部门" prop="product.name"></el-table-column>
+        <el-table-column label="金额">
+          <template slot-scope="props">
+            <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">
+      <el-form :model="form" ref="form">
+        <el-form-item
+          label="发生时间"
+          prop="happenTime"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '名称不能为空'}]"
+        >
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+          <el-date-picker v-model="form.happenTime" type="date" placeholder="选择日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item
+          label="金额"
+          prop="amount"
+          :label-width="formLabelWidth"
+          :rules="[
+          { required: true, message: '编码不能为空'}, 
+          // { type: 'float', message: '金额必须为数字值'}
+        ]"
+        >
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="收入状态"
+          prop="incomeStatus"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '状态不能为空'}]"
+        >
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option key label="无" value></el-option>
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+          <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in productSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getTeamSelect,
+  getProjectSelect,
+  getProductSelect,
+  getCostTeamSelect,
+  getCostTypeSelect,
+  addManage,
+  getManageList,
+  setManage
+} from "@/api/manageApi";
+export default {
+  data() {
+    return {
+      type: "",
+      dialogFormVisible: false,
+      addFlag: false,
+      id: "",
+      form: {
+        deptId: "",
+        projectId: "",
+        costTypeId: "",
+        companyId: "",
+        companyType: "",
+        happenTime: "",
+        incomeStatus: "",
+        productId: "",
+        toProjectId: "",
+        remark: "",
+        amount: "",
+        toDeptId: "",
+        deptName: "",
+        code: "",
+        name: "",
+        status: "NORMAL",
+        sort: ""
+      },
+      formLabelWidth: "120px",
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    };
+  },
+  created() {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    });
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    });
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    });
+    //获取经营列表
+    getManageList({
+      type: "INCOME"
+    }).then(res => {
+      this.manageData = res.data.data;
+    });
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    });
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    });
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if (row.type === "COST") {
+        return "cost-row";
+      } else {
+        return "income-row";
+      }
+      return "";
+    },
+    //获取部门名称
+    getName(val) {
+      let obj = {};
+      obj = this.teamSelectData.find(item => {
+        return item.id === val;
+      });
+      let getName = "";
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append(type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true;
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row);
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if (this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res);
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }
+  }
+};
+</script>
+
+<style scope>
+.manage {
+  padding: 20px;
+  box-sizing: border-box;
+}
+.add-container {
+  float: right;
+  margin-bottom: 20px;
+}
+.right-card {
+  width: 100%;
+  margin: 0 auto;
+}
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+.el-table .cost-row {
+  color: green;
+}
+
+.el-table .income-row {
+  color: red;
+}
+</style>
+

.history/src/pages/manage/index_20190319140857.vue

@@ -0,0 +1,358 @@
+<template>
+  <div class="manage">
+    <div class="add-container">
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table :data="manageData" style="width: 100%" :row-class-name="tableRowClassName">
+        <!-- <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无' }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column> -->
+        <el-table-column label="收入状态">
+          <template slot-scope="props">
+            <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="归属部门" prop="department.name"></el-table-column>
+        <el-table-column label="归属项目" prop="project.name"></el-table-column>
+        <el-table-column label="产品" prop="product.name"></el-table-column>
+        <el-table-column label="接收部门" prop="toDepartment.name"></el-table-column>
+        <el-table-column label="接受项目" prop="toProject.name"></el-table-column>
+        <el-table-column label="备注" prop="remark"></el-table-column>
+        <el-table-column label="金额">
+          <template slot-scope="props">
+            <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">
+      <el-form :model="form" ref="form">
+        <el-form-item
+          label="发生时间"
+          prop="happenTime"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '名称不能为空'}]"
+        >
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+          <el-date-picker v-model="form.happenTime" type="date" placeholder="选择日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item
+          label="金额"
+          prop="amount"
+          :label-width="formLabelWidth"
+          :rules="[
+          { required: true, message: '编码不能为空'}, 
+          // { type: 'float', message: '金额必须为数字值'}
+        ]"
+        >
+          <el-input style="width: 30%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="收入状态"
+          prop="incomeStatus"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '状态不能为空'}]"
+        >
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option key label="无" value></el-option>
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+          <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in productSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getTeamSelect,
+  getProjectSelect,
+  getProductSelect,
+  getCostTeamSelect,
+  getCostTypeSelect,
+  addManage,
+  getManageList,
+  setManage
+} from "@/api/manageApi";
+export default {
+  data() {
+    return {
+      type: "",
+      dialogFormVisible: false,
+      addFlag: false,
+      id: "",
+      form: {
+        deptId: "",
+        projectId: "",
+        costTypeId: "",
+        companyId: "",
+        companyType: "",
+        happenTime: "",
+        incomeStatus: "",
+        productId: "",
+        toProjectId: "",
+        remark: "",
+        amount: "",
+        toDeptId: "",
+        deptName: "",
+        code: "",
+        name: "",
+        status: "NORMAL",
+        sort: ""
+      },
+      formLabelWidth: "120px",
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    };
+  },
+  created() {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    });
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    });
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    });
+    //获取经营列表
+    getManageList({
+      type: "INCOME"
+    }).then(res => {
+      this.manageData = res.data.data;
+      console.log(res.data.data)
+    });
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    });
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    });
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if (row.type === "COST") {
+        return "cost-row";
+      } else {
+        return "income-row";
+      }
+      return "";
+    },
+    //获取部门名称
+    getName(val) {
+      let obj = {};
+      obj = this.teamSelectData.find(item => {
+        return item.id === val;
+      });
+      let getName = "";
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append(type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true;
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row);
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if (this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res);
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }
+  }
+};
+</script>
+
+<style scope>
+.manage {
+  padding: 20px;
+  box-sizing: border-box;
+}
+.add-container {
+  float: right;
+  margin-bottom: 20px;
+}
+.right-card {
+  width: 100%;
+  margin: 0 auto;
+}
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+.el-table .cost-row {
+  color: green;
+}
+
+.el-table .income-row {
+  color: red;
+}
+</style>
+

.history/src/pages/manage/index_20190319141045.vue

@@ -0,0 +1,358 @@
+<template>
+  <div class="manage">
+    <div class="add-container">
+      <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
+    </div>
+    <el-card class="right-card">
+      <el-table :data="manageData" style="width: 100%" :row-class-name="tableRowClassName">
+        <!-- <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="备注">
+                <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接收部门">
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无' }}</span>
+              </el-form-item>
+              <el-form-item label="接受项目">
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无' }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column> -->
+        <el-table-column label="收入状态">
+          <template slot-scope="props">
+            <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="归属部门" prop="department.name"></el-table-column>
+        <el-table-column label="归属项目" prop="project.name"></el-table-column>
+        <el-table-column label="产品" prop="product.name"></el-table-column>
+        <el-table-column label="接收部门" prop="toDepartment.name"></el-table-column>
+        <el-table-column label="接受项目" prop="toProject.name"></el-table-column>
+        <el-table-column label="备注" prop="remark"></el-table-column>
+        <el-table-column label="金额">
+          <template slot-scope="props">
+            <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">
+      <el-form :model="form" ref="form">
+        <el-form-item
+          label="发生时间"
+          prop="happenTime"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '名称不能为空'}]"
+        >
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+          <el-date-picker v-model="form.happenTime" type="date" placeholder="选择日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item
+          label="金额"
+          prop="amount"
+          :label-width="formLabelWidth"
+          :rules="[
+          { required: true, message: '编码不能为空'}, 
+          // { type: 'float', message: '金额必须为数字值'}
+        ]"
+        >
+          <el-input style="width: 35%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="收入状态"
+          prop="incomeStatus"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '状态不能为空'}]"
+        >
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option key label="无" value></el-option>
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+          <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in productSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
+          <el-select v-model="form.projectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">
+          <el-select v-model="form.toDeptId" placeholder="请选择部门">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">
+          <el-select v-model="form.toProjectId" placeholder="请选择项目">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in projectSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in teamSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
+          <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getTeamSelect,
+  getProjectSelect,
+  getProductSelect,
+  getCostTeamSelect,
+  getCostTypeSelect,
+  addManage,
+  getManageList,
+  setManage
+} from "@/api/manageApi";
+export default {
+  data() {
+    return {
+      type: "",
+      dialogFormVisible: false,
+      addFlag: false,
+      id: "",
+      form: {
+        deptId: "",
+        projectId: "",
+        costTypeId: "",
+        companyId: "",
+        companyType: "",
+        happenTime: "",
+        incomeStatus: "",
+        productId: "",
+        toProjectId: "",
+        remark: "",
+        amount: "",
+        toDeptId: "",
+        deptName: "",
+        code: "",
+        name: "",
+        status: "NORMAL",
+        sort: ""
+      },
+      formLabelWidth: "120px",
+      teamSelectData: [],
+      projectSelectData: [],
+      productSelectData: [],
+      costTeamSelectData: [],
+      costTypeSelectData: [],
+      manageData: [],
+      companyData: []
+    };
+  },
+  created() {
+    // 获取部门下拉框
+    getTeamSelect().then(res => {
+      this.teamSelectData = res.data.data;
+    });
+    // 获取项目下拉框
+    getProjectSelect().then(res => {
+      this.projectSelectData = res.data.data;
+    });
+    //获取产品下拉框
+    getProductSelect().then(res => {
+      this.productSelectData = res.data.data;
+    });
+    //获取经营列表
+    getManageList({
+      type: "INCOME"
+    }).then(res => {
+      this.manageData = res.data.data;
+      console.log(res.data.data)
+    });
+    //获取单位下拉
+    getCostTeamSelect().then(res => {
+      this.costTeamSelectData = res.data.data;
+    });
+    //获取成本类型下拉
+    getCostTypeSelect().then(res => {
+      this.costTypeSelectData = res.data.data;
+    });
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if (row.type === "COST") {
+        return "cost-row";
+      } else {
+        return "income-row";
+      }
+      return "";
+    },
+    //获取部门名称
+    getName(val) {
+      let obj = {};
+      obj = this.teamSelectData.find(item => {
+        return item.id === val;
+      });
+      let getName = "";
+      this.form.deptName = obj.name;
+    },
+    // 添加
+    append(type) {
+      this.type = type;
+      this.dialogFormVisible = true;
+      this.addFlag = true;
+    },
+    // 编辑
+    handleEdit(index, row) {
+      console.log(row);
+      //回显赋值
+      this.type = row.type;
+      this.form.deptId = row.department.id;
+      this.form.projectId = row.project.id;
+      this.form.code = row.code;
+      this.form.happenTime = row.happenTime;
+      this.form.incomeStatus = row.incomeStatus;
+      this.form.productId = row.productId;
+      this.form.remark = row.remark;
+      this.form.amount = row.amount;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.form.costTypeId = row.costTypeId;
+      this.form.companyId = row.companyId;
+      this.form.companyType = row.companyType;
+      this.id = row.id;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          this.form.happenTime = new Date(this.form.happenTime) * 1;
+          this.form.type = this.type;
+          if (this.addFlag) {
+            addManage(this.form).then(res => {
+              console.log(res);
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          } else {
+            this.form.id = this.id;
+            setManage(this.form).then(res => {
+              //获取经营列表
+              getManageList({
+                type: "INCOME"
+              }).then(res => {
+                this.manageData = res.data.data;
+              });
+              this.$refs[formName].resetFields();
+            });
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }
+  }
+};
+</script>
+
+<style scope>
+.manage {
+  padding: 20px;
+  box-sizing: border-box;
+}
+.add-container {
+  float: right;
+  margin-bottom: 20px;
+}
+.right-card {
+  width: 100%;
+  margin: 0 auto;
+}
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+.el-table .cost-row {
+  color: green;
+}
+
+.el-table .income-row {
+  color: red;
+}
+</style>
+

.history/src/pages/project/index_20190318173111.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="project">
+    <el-button type="primary" class="add" @click="append">增加项目</el-button>
+    <el-card class="right-card">
+      <el-table
+      :data="projectData"
+      style="width: 100%">
+      <!--
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="项目名称">
+                <span>{{ props.row.name }}</span>
+              </el-form-item>
+              <el-form-item label="项目 ID">
+                <span>{{ props.row.id }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        -->
+        <el-table-column
+          label="项目编号"
+          prop="code">
+        </el-table-column>
+        <el-table-column
+          label="项目名称"
+          prop="name">
+        </el-table-column>
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--  
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog title="新增项目" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="项目编码" prop="code" :label-width="formLabelWidth" :rules="[{ required: true, message: '编码不能为空'}]">
+          <el-input v-model="form.code" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="项目名称" prop="name" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+          <el-input v-model="form.name" autocomplete="off"></el-input>
+        </el-form-item>
+        <!--
+        <el-form-item label="项目状态" prop="status" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.status" placeholder="请选择状态值">
+            <el-option label="正常" value="NORMAL"></el-option>
+            <el-option label="已删除" value="DEL"></el-option>
+          </el-select>
+        </el-form-item>
+        -->
+        <el-form-item label="项目排序" prop="sort" :label-width="formLabelWidth">
+          <el-input v-model.number="form.sort" autocomplete="off"></el-input>
+        </el-form-item>             
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>    
+  </div>
+</template>
+<script scoped>
+import { getProjectList, addProject, setProject } from '@/api/projectApi'
+export default {
+  data () {
+    return {
+      projectData: [],
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      index: ''      
+    }
+  },
+  created () {
+    getProjectList().then(res => {
+      console.log(res)
+      this.projectData = res.data.data
+    });
+  },
+  methods: {
+    // 新增项目
+    append() {
+      this.addFlag = true;
+      this.dialogFormVisible = true;
+    },
+    // 编辑项目
+    handleEdit(index, row) {
+      this.form.code = row.code;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.id = row.id;
+      this.index = index;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    //删除项目
+    // handleDelete(index, row) {
+    //   console.log(index, row);
+    //   setProject({
+    //     id: row.id,
+    //     status: 'DEL'
+    //   }).then(res => {
+    //     console.log(res);
+    //   })
+    // },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          console.log(this.form);
+          if(this.addFlag) {
+            addProject(this.form).then(res => {
+              this.projectData.unshift(res.data.data)
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setProject(this.form).then(res => {
+              console.log(res);
+              console.log(this.index)
+              this.projectData.splice(this.index, 1, res.data.data)
+              this.$refs[formName].resetFields(); 
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }  
+  }, 
+}
+</script>
+<style scope>
+  .project {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+</style>
+
+

.history/src/pages/project/index_20190318180828.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="project">
+    <el-button type="primary" class="add" @click="append">增加项目</el-button>
+    <el-card class="right-card">
+      <el-table
+      :data="projectData"
+      style="width: 100%">
+      <!--
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="项目名称">
+                <span>{{ props.row.name }}</span>
+              </el-form-item>
+              <el-form-item label="项目 ID">
+                <span>{{ props.row.id }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        -->
+        <el-table-column
+          label="项目编号"
+          prop="code">
+        </el-table-column>
+        <el-table-column
+          label="项目名称"
+          prop="name">
+        </el-table-column>
+        <el-table-column label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <!--  
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            -->
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog title="新增项目" :visible.sync="dialogFormVisible">     
+      <el-form :model="form" ref="form">
+        <el-form-item label="项目编码" prop="code" :label-width="formLabelWidth" :rules="[{ required: true, message: '编码不能为空'}]">
+          <el-input v-model="form.code" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="项目名称" prop="name" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+          <el-input v-model="form.name" autocomplete="off"></el-input>
+        </el-form-item>
+        <!--
+        <el-form-item label="项目状态" prop="status" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+          <el-select v-model="form.status" placeholder="请选择状态值">
+            <el-option label="正常" value="NORMAL"></el-option>
+            <el-option label="已删除" value="DEL"></el-option>
+          </el-select>
+        </el-form-item>
+        -->
+        <el-form-item label="项目排序" prop="sort" :label-width="formLabelWidth">
+          <el-input v-model.number="form.sort" autocomplete="off"></el-input>
+        </el-form-item>             
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>    
+  </div>
+</template>
+<script scoped>
+import { getProjectList, addProject, setProject } from '@/api/projectApi'
+export default {
+  data () {
+    return {
+      projectData: [],
+      dialogFormVisible: false,
+      addFlag: false,
+      id: '',
+      form: {
+        code: '',
+        name: '',
+        status: 'NORMAL',
+        sort: ''
+      },
+      formLabelWidth: '120px',
+      index: ''      
+    }
+  },
+  created () {
+    // getProjectList().then(res => {
+    //   console.log(res)
+    //   this.projectData = res.data.data
+    // });
+    this.$fetch('manageBase/project')
+    .then(response => {
+       console.log(response)
+    })
+  },
+  methods: {
+    // 新增项目
+    append() {
+      this.addFlag = true;
+      this.dialogFormVisible = true;
+    },
+    // 编辑项目
+    handleEdit(index, row) {
+      this.form.code = row.code;
+      this.form.name = row.name;
+      // this.form.status = row.status;
+      this.form.sort = row.sort;
+      this.id = row.id;
+      this.index = index;
+      this.dialogFormVisible = true;
+      this.addFlag = false;
+    },
+    //删除项目
+    // handleDelete(index, row) {
+    //   console.log(index, row);
+    //   setProject({
+    //     id: row.id,
+    //     status: 'DEL'
+    //   }).then(res => {
+    //     console.log(res);
+    //   })
+    // },
+    // 提交新增
+    submitForm(formName) {
+      //验证表单
+      this.$refs[formName].validate((valid, value) => {
+        if (valid) {
+          console.log(this.form);
+          if(this.addFlag) {
+            addProject(this.form).then(res => {
+              this.projectData.unshift(res.data.data)
+              this.$refs[formName].resetFields();
+            })
+          } else {
+            this.form.id = this.id;
+            setProject(this.form).then(res => {
+              console.log(res);
+              console.log(this.index)
+              this.projectData.splice(this.index, 1, res.data.data)
+              this.$refs[formName].resetFields(); 
+            })
+          }
+          this.dialogFormVisible = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    // 取消
+    resetForm (formName) {
+      this.$refs[formName].resetFields();
+      this.dialogFormVisible = false;
+    }  
+  }, 
+}
+</script>
+<style scope>
+  .project {
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .add {
+    float: right;
+    margin-bottom: 20px;
+  }
+  .right-card {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+</style>
+
+

.history/src/utils/config_20190314094846.js

@@ -0,0 +1,2 @@
+export const baseApi =  'https://readertest.lingjiao.cn/' 
+    

.history/src/utils/config_20190318173723.js

@@ -0,0 +1,2 @@
+export const baseApi =  'http://whiteboardtest.ai160.com' 
+    

.history/src/utils/config_20190318173740.js

@@ -0,0 +1,2 @@
+export const baseApi =  'http://whiteboardtest.ai160.com/' 
+    

.history/src/utils/config_20190318174436.js

@@ -0,0 +1,3 @@
+// export const baseApi =  'https://readertest.lingjiao.cn/' 
+export const baseApi =   'http://whiteboardtest.ai160.com/' 
+    

.history/src/utils/config_20190319141137.js

@@ -0,0 +1,3 @@
+export const baseApi =  'https://readertest.lingjiao.cn/' 
+// export const baseApi =   'http://whiteboardtest.ai160.com/' 
+    

.history/src/utils/http_20190318175757.js

@@ -0,0 +1,118 @@
+import axios from 'axios';
+import {
+    Message
+} from 'element-ui';
+
+axios.defaults.timeout = 5000;
+axios.defaults.baseURL = process.env.BASE_API;
+
+//http request 拦截器
+axios.interceptors.request.use(
+    config => {
+        // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie
+        config.data = JSON.stringify(config.data);
+        config.headers = {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        }
+        // if(token){
+        //   config.params = {'token':token}
+        // }
+        return config;
+    },
+    error => {
+        return Promise.reject(err);
+    }
+);
+
+//http response 拦截器
+axios.interceptors.response.use(
+    response => {
+        if (response.data.errCode == 2) {
+            router.push({
+                path: "/login",
+                querry: {
+                    redirect: router.currentRoute.fullPath
+                } //从哪个页面跳转
+            })
+        }
+        return response;
+    },
+    error => {
+        return Promise.reject(error)
+    }
+)
+
+/**
+ * 封装get方法
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function fetch(url, params = {}) {
+    return new Promise((resolve, reject) => {
+        axios.get(url, {
+                params: params
+            })
+            .then(response => {
+                resolve(response.data);
+            })
+            .catch(err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装post请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function post(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.post(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装patch请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function patch(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.patch(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装put请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function put(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.put(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}

.history/src/utils/http_20190318180124.js

@@ -0,0 +1,124 @@
+import axios from 'axios';
+import {
+    Message
+} from 'element-ui';
+
+axios.defaults.timeout = 5000;
+axios.defaults.baseURL = process.env.BASE_API;
+
+/*** 
+ * 
+ * 复制于 https://www.cnblogs.com/ldlx-mars/p/7908950.html
+ * 
+*/
+
+//http request 拦截器
+axios.interceptors.request.use(
+    config => {
+        // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie
+        config.data = JSON.stringify(config.data);
+        config.headers = {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        }
+        // if(token){
+        //   config.params = {'token':token}
+        // }
+        return config;
+    },
+    error => {
+        return Promise.reject(err);
+    }
+);
+
+//http response 拦截器
+axios.interceptors.response.use(
+    response => {
+        if (response.data.errCode == 2) {
+            router.push({
+                path: "/login",
+                querry: {
+                    redirect: router.currentRoute.fullPath
+                } //从哪个页面跳转
+            })
+        }
+        return response;
+    },
+    error => {
+        return Promise.reject(error)
+    }
+)
+
+/**
+ * 封装get方法
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function fetch(url, params = {}) {
+    return new Promise((resolve, reject) => {
+        axios.get(url, {
+                params: params
+            })
+            .then(response => {
+                resolve(response.data);
+            })
+            .catch(err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装post请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function post(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.post(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装patch请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function patch(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.patch(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装put请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function put(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.put(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}

.history/src/utils/http_20190318181228.js

@@ -0,0 +1,124 @@
+import axios from 'axios';
+import {
+    Message
+} from 'element-ui';
+
+axios.defaults.timeout = 5000;
+axios.defaults.baseURL = process.env.BASE_API;
+
+/*** 
+ * 
+ * 复制于 https://www.cnblogs.com/ldlx-mars/p/7908950.html
+ * 
+*/
+
+//http request 拦截器
+/* axios.interceptors.request.use(
+    config => {
+        // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie
+        config.data = JSON.stringify(config.data);
+        config.headers = {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        }
+        // if(token){
+        //   config.params = {'token':token}
+        // }
+        return config;
+    },
+    error => {
+        return Promise.reject(err);
+    }
+); */
+
+//http response 拦截器 暂时不用
+/* axios.interceptors.response.use(
+    response => {
+        if (response.data.errCode == 2) {
+            router.push({
+                path: "/login",
+                querry: {
+                    redirect: router.currentRoute.fullPath
+                } //从哪个页面跳转
+            })
+        }
+        return response;
+    },
+    error => {
+        return Promise.reject(error)
+    }
+) */
+
+/**
+ * 封装get方法
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function fetch(url, params = {}) {
+    return new Promise((resolve, reject) => {
+        axios.get(url, {
+                params: params
+            })
+            .then(response => {
+                resolve(response.data);
+            })
+            .catch(err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装post请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function post(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.post(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装patch请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function patch(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.patch(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装put请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function put(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.put(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}

.history/src/utils/http_20190318181340.js

@@ -0,0 +1,124 @@
+import axios from 'axios';
+import {
+    Message
+} from 'element-ui';
+
+axios.defaults.timeout = 5000;
+axios.defaults.baseURL = process.env.BASE_API;
+
+/*** 
+ * 
+ * 复制于 https://www.cnblogs.com/ldlx-mars/p/7908950.html
+ * 
+*/
+
+//http request 拦截器
+axios.interceptors.request.use(
+    config => {
+        // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie
+        config.data = JSON.stringify(config.data);
+        config.headers = {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        }
+        // if(token){
+        //   config.params = {'token':token}
+        // }
+        return config;
+    },
+    error => {
+        return Promise.reject(err);
+    }
+);
+
+//http response 拦截器 暂时不用
+/* axios.interceptors.response.use(
+    response => {
+        if (response.data.errCode == 2) {
+            router.push({
+                path: "/login",
+                querry: {
+                    redirect: router.currentRoute.fullPath
+                } //从哪个页面跳转
+            })
+        }
+        return response;
+    },
+    error => {
+        return Promise.reject(error)
+    }
+) */
+
+/**
+ * 封装get方法
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function fetch(url, params = {}) {
+    return new Promise((resolve, reject) => {
+        axios.get(url, {
+                params: params
+            })
+            .then(response => {
+                resolve(response.data);
+            })
+            .catch(err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装post请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function post(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.post(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装patch请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function patch(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.patch(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装put请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function put(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.put(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}

.history/src/utils/http_20190318181605.js

@@ -0,0 +1,124 @@
+import axios from 'axios';
+import {
+    Message
+} from 'element-ui';
+
+axios.defaults.timeout = 5000;
+axios.defaults.baseURL = 'http://whiteboardtest.ai160.com/';
+
+/*** 
+ * 
+ * 复制于 https://www.cnblogs.com/ldlx-mars/p/7908950.html
+ * 
+*/
+
+//http request 拦截器
+axios.interceptors.request.use(
+    config => {
+        // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie
+        config.data = JSON.stringify(config.data);
+        config.headers = {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        }
+        // if(token){
+        //   config.params = {'token':token}
+        // }
+        return config;
+    },
+    error => {
+        return Promise.reject(err);
+    }
+);
+
+//http response 拦截器 暂时不用
+/* axios.interceptors.response.use(
+    response => {
+        if (response.data.errCode == 2) {
+            router.push({
+                path: "/login",
+                querry: {
+                    redirect: router.currentRoute.fullPath
+                } //从哪个页面跳转
+            })
+        }
+        return response;
+    },
+    error => {
+        return Promise.reject(error)
+    }
+) */
+
+/**
+ * 封装get方法
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function fetch(url, params = {}) {
+    return new Promise((resolve, reject) => {
+        axios.get(url, {
+                params: params
+            })
+            .then(response => {
+                resolve(response.data);
+            })
+            .catch(err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装post请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function post(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.post(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装patch请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function patch(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.patch(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装put请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function put(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.put(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}

.history/src/utils/http_20190319141148.js

@@ -0,0 +1,124 @@
+import axios from 'axios';
+import {
+    Message
+} from 'element-ui';
+
+axios.defaults.timeout = 5000;
+axios.defaults.baseURL = 'https://readertest.lingjiao.cn/';
+
+/*** 
+ * 
+ * 复制于 https://www.cnblogs.com/ldlx-mars/p/7908950.html
+ * 
+*/
+
+//http request 拦截器
+axios.interceptors.request.use(
+    config => {
+        // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie
+        config.data = JSON.stringify(config.data);
+        config.headers = {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        }
+        // if(token){
+        //   config.params = {'token':token}
+        // }
+        return config;
+    },
+    error => {
+        return Promise.reject(err);
+    }
+);
+
+//http response 拦截器 暂时不用
+/* axios.interceptors.response.use(
+    response => {
+        if (response.data.errCode == 2) {
+            router.push({
+                path: "/login",
+                querry: {
+                    redirect: router.currentRoute.fullPath
+                } //从哪个页面跳转
+            })
+        }
+        return response;
+    },
+    error => {
+        return Promise.reject(error)
+    }
+) */
+
+/**
+ * 封装get方法
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function fetch(url, params = {}) {
+    return new Promise((resolve, reject) => {
+        axios.get(url, {
+                params: params
+            })
+            .then(response => {
+                resolve(response.data);
+            })
+            .catch(err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装post请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function post(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.post(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装patch请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function patch(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.patch(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装put请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function put(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.put(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}

package-lock.json

@@ -3263,12 +3263,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3283,17 +3285,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3410,7 +3415,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3422,6 +3428,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3436,6 +3443,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3547,7 +3555,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3680,6 +3689,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",

src/main.js

@@ -2,10 +2,17 @@ import Vue from 'vue';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import App from './App.vue';
-import router from './router'
-console.log(router)
+import router from './router';
+import axios from 'axios';
+import {post,fetch,patch,put} from './utils/http';
+
 Vue.use(ElementUI);
 
+Vue.prototype.$post = post;
+Vue.prototype.$fetch = fetch;
+Vue.prototype.$patch = patch;
+Vue.prototype.$put = put;
+
 new Vue({
   el: '#app',
   router,

src/pages/manage/cost.vue

@@ -1,14 +1,11 @@
 <template>
   <div class="manage">
-    <div class="add-container">    
+    <div class="add-container">
       <el-button type="primary" @click="append('COST')">增加成本</el-button>
     </div>
     <el-card class="right-card">
-      <el-table
-      :data="manageData"
-      style="width: 100%"
-      :row-class-name="tableRowClassName">
-        <el-table-column type="expand">
+      <el-table :data="manageData" style="width: 100%" :row-class-name="tableRowClassName">
+        <!-- <el-table-column type="expand">
           <template slot-scope="props">
             <el-form label-position="left" inline class="demo-table-expand">
               <el-form-item label="备注">
@@ -22,170 +19,165 @@
               </el-form-item>
             </el-form>
           </template>
+        </el-table-column>-->
+        <el-table-column label="成本类型" prop="costType.name"></el-table-column>
+        <el-table-column label="归属部门" prop="department.name"></el-table-column>
+        <el-table-column label="归属项目" prop="project.name"></el-table-column>
+        <el-table-column label="接收部门" prop="toDepartment.name"></el-table-column>
+        <el-table-column label="接受项目" prop="toProject.name"></el-table-column>
+        <el-table-column label="金额">
+          <template slot-scope="props">
+            <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+          </template>
         </el-table-column>
-        <el-table-column
-          label="成本类型"
-          prop="costType.name">
-        </el-table-column>  
-        <el-table-column
-          label="归属部门"
-          prop="department.name">
-        </el-table-column>
-        <el-table-column
-          label="归属项目"
-          prop="project.name">
-        </el-table-column>
-        <el-table-column
-          label="金额">
-            <template slot-scope="props">
-              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
-            </template>
-        </el-table-column>              
+        <el-table-column label="备注" prop="remark"></el-table-column>
         <el-table-column label="操作" width="80">
           <template slot-scope="scope">
-            <el-button
-              size="mini"
-              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
             <!--
             <el-button
               size="mini"
               type="danger"
               @click="handleDelete(scope.$index, scope.row)">删除</el-button>
-              -->
+            -->
           </template>
         </el-table-column>
       </el-table>
-    </el-card>    
-    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+    </el-card>
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">
       <el-form :model="form" ref="form">
-        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
-          <el-select v-model="form.deptId" placeholder="请选择部门"  @change="getName">
+        <el-form-item
+          label="发生时间"
+          prop="happenTime"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '名称不能为空'}]"
+        >
+          <el-date-picker v-model="form.happenTime" type="date" placeholder="接收日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item
+          label="金额"
+          prop="amount"
+          :label-width="formLabelWidth"
+          :rules="[
+        { required: true, message: '编码不能为空'}, 
+        // { type: 'number', message: '排序必须为数字值'}
+        ]"
+        >
+          <el-input style="width: 35% " v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item
+          label="成本类型"
+          prop="costTypeId"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '状态不能为空'}]"
+        >
+          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+            <el-option key label="无" value></el-option>
             <el-option
-              key=""
-              label="无"
-              value="">
-            </el-option> 
+              v-for="item in costTypeSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
+          <el-select v-model="form.deptId" placeholder="请选择部门" @change="getName">
+            <el-option key label="无" value></el-option>
             <el-option
               v-for="item in teamSelectData"
               :key="item.id"
               :label="item.name"
-              :value="item.id">
-            </el-option>        
-          </el-select>      
+              :value="item.id"
+            ></el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
           <el-select v-model="form.projectId" placeholder="请选择项目">
-            <el-option
-              key=""
-              label="无"
-              value="">
-            </el-option>             
+            <el-option key label="无" value></el-option>
             <el-option
               v-for="item in projectSelectData"
               :key="item.id"
               :label="item.name"
-              :value="item.id">
-            </el-option>        
-          </el-select> 
-        </el-form-item>
-        <el-form-item label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
-          <el-select v-model="form.costTypeId" placeholder="请选择类型">
-            <el-option
-              key=""
-              label="无"
-              value="">
-            </el-option>                         
-            <el-option
-              v-for="item in costTypeSelectData"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id">
-            </el-option> 
+              :value="item.id"
+            ></el-option>
           </el-select>
-        </el-form-item>               
-        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
-        { required: true, message: '编码不能为空'}, 
-        { type: 'number', message: '排序必须为数字值'}
-        ]">
-          <el-input style="width: 30%;" v-model.number="form.amount" autocomplete="off"></el-input>
-        </el-form-item>        
+        </el-form-item>
+
         <el-form-item label="接收部门" prop="toDeptId" :label-width="formLabelWidth">
           <el-select v-model="form.toDeptId" placeholder="请选择部门">
-            <el-option
-              key=""
-              label="无"
-              value="">
-            </el-option>             
+            <el-option key label="无" value></el-option>
             <el-option
               v-for="item in teamSelectData"
               :key="item.id"
               :label="item.name"
-              :value="item.id">
-            </el-option>        
-          </el-select>      
+              :value="item.id"
+            ></el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="接收项目" prop="toProjectId" :label-width="formLabelWidth">
           <el-select v-model="form.toProjectId" placeholder="请选择项目">
-            <el-option
-              key=""
-              label="无"
-              value="">
-            </el-option>             
+            <el-option key label="无" value></el-option>
             <el-option
               v-for="item in projectSelectData"
               :key="item.id"
               :label="item.name"
-              :value="item.id">
-            </el-option>        
-          </el-select> 
-        </el-form-item>  
-        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
-            <el-date-picker
-              v-model="form.happenTime"
-              type="date"
-              placeholder="接收日期">
-            </el-date-picker>  
-        </el-form-item>                          
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
         <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
           <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
-        </el-form-item>            
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="resetForm('form')">取 消</el-button>
         <el-button type="primary" @click="submitForm('form')">确 定</el-button>
       </div>
-    </el-dialog>  
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+import {
+  getTeamSelect,
+  getProjectSelect,
+  getProductSelect,
+  getCostTeamSelect,
+  getCostTypeSelect,
+  addManage,
+  getManageList,
+  setManage
+} from "@/api/manageApi";
 export default {
   data() {
     return {
-      type: '',
+      type: "",
       dialogFormVisible: false,
       addFlag: false,
-      id: '',
+      id: "",
       form: {
-        deptId: '',
-        projectId: '',
-        costTypeId: '',
-        companyId: '',
-        happenTime: '',
-        incomeStatus: '',
-        productId: '',
-        remark: '',
-        amount: '',
-        toDeptId: '',
-        toProjectId: '',
-        deptName: '',
-        code: '',
-        name: '',
-        status: 'NORMAL',
-        sort: ''
+        deptId: "",
+        projectId: "",
+        costTypeId: "",
+        companyId: "",
+        happenTime: "",
+        incomeStatus: "",
+        productId: "",
+        remark: "",
+        amount: "",
+        toDeptId: "",
+        toProjectId: "",
+        deptName: "",
+        code: "",
+        name: "",
+        status: "NORMAL",
+        sort: ""
       },
-      formLabelWidth: '120px',
+      formLabelWidth: "120px",
       teamSelectData: [],
       projectSelectData: [],
       productSelectData: [],
@@ -193,63 +185,63 @@ export default {
       costTypeSelectData: [],
       manageData: [],
       companyData: []
-    }
+    };
   },
-  created () {
+  created() {
     // 获取部门下拉框
     getTeamSelect().then(res => {
       this.teamSelectData = res.data.data;
-    })
+    });
     // 获取项目下拉框
     getProjectSelect().then(res => {
       this.projectSelectData = res.data.data;
-    })
+    });
     //获取产品下拉框
     getProductSelect().then(res => {
       this.productSelectData = res.data.data;
-    })
+    });
     //获取经营列表
     getManageList({
-      type: 'COST'
+      type: "COST"
     }).then(res => {
       this.manageData = res.data.data;
-    })
+    });
     //获取单位下拉
     getCostTeamSelect().then(res => {
       this.costTeamSelectData = res.data.data;
-    })
+    });
     //获取成本类型下拉
     getCostTypeSelect().then(res => {
       this.costTypeSelectData = res.data.data;
-    })
+    });
   },
   methods: {
-    tableRowClassName({row, rowIndex}) {
-      if (row.type === 'COST') {
-        return 'cost-row';
+    tableRowClassName({ row, rowIndex }) {
+      if (row.type === "COST") {
+        return "cost-row";
       } else {
-        return 'income-row';
+        return "income-row";
       }
-      return '';
+      return "";
     },
     //获取部门名称
-    getName (val) {
+    getName(val) {
       let obj = {};
-      obj = this.teamSelectData.find((item)=>{
+      obj = this.teamSelectData.find(item => {
         return item.id === val;
       });
-      let getName = ''
+      let getName = "";
       this.form.deptName = obj.name;
     },
     // 添加
-    append (type) {
+    append(type) {
       this.type = type;
       this.dialogFormVisible = true;
-      this.addFlag = true
+      this.addFlag = true;
     },
     // 编辑
     handleEdit(index, row) {
-      console.log(row)
+      console.log(row);
       //回显赋值
       this.type = row.type;
       this.form.deptId = row.department.id;
@@ -277,28 +269,28 @@ export default {
         if (valid) {
           this.form.happenTime = new Date(this.form.happenTime) * 1;
           this.form.type = this.type;
-          if(this.addFlag) {
+          if (this.addFlag) {
             addManage(this.form).then(res => {
-              console.log(res)
+              console.log(res);
               //获取经营列表
-                  getManageList({
-                    type: 'COST'
-                  }).then(res => {
+              getManageList({
+                type: "COST"
+              }).then(res => {
                 this.manageData = res.data.data;
-              })
+              });
               this.$refs[formName].resetFields();
-            })
+            });
           } else {
             this.form.id = this.id;
             setManage(this.form).then(res => {
               //获取经营列表
               getManageList({
-                type: 'COST'
+                type: "COST"
               }).then(res => {
                 this.manageData = res.data.data;
-              })
+              });
               this.$refs[formName].resetFields();
-            })
+            });
           }
           this.dialogFormVisible = false;
         } else {
@@ -307,45 +299,45 @@ export default {
       });
     },
     // 取消
-    resetForm (formName) {
+    resetForm(formName) {
       this.$refs[formName].resetFields();
       this.dialogFormVisible = false;
-    }   
+    }
   }
-}
+};
 </script>
 
 <style scope>
-  .manage {
-    padding: 20px;
-    box-sizing: border-box;
-  }
-  .add-container {
-    float: right;
-    margin-bottom: 20px;
-  }
-  .right-card {
-    width: 100%;
-    margin: 0 auto;
-  }  
-  .demo-table-expand {
-    font-size: 0;
-  }
-  .demo-table-expand label {
-    width: 90px;
-    color: #99a9bf;
-  }
-  .demo-table-expand .el-form-item {
-    margin-right: 0;
-    margin-bottom: 0;
-    width: 50%;
-  }
-  .el-table .cost-row {
-    color: green;
-  }
+.manage {
+  padding: 20px;
+  box-sizing: border-box;
+}
+.add-container {
+  float: right;
+  margin-bottom: 20px;
+}
+.right-card {
+  width: 100%;
+  margin: 0 auto;
+}
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+.el-table .cost-row {
+  color: green;
+}
 
-  .el-table .income-row {
-    color: red;
-  }
+.el-table .income-row {
+  color: red;
+}
 </style>
 

src/pages/manage/index.vue

@@ -1,211 +1,197 @@
 <template>
   <div class="manage">
-    <div class="add-container">    
+    <div class="add-container">
       <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
     </div>
     <el-card class="right-card">
-      <el-table
-      :data="manageData"
-      style="width: 100%"
-      :row-class-name="tableRowClassName">
-        <el-table-column type="expand">
+      <el-table :data="manageData" style="width: 100%" :row-class-name="tableRowClassName">
+        <!-- <el-table-column type="expand">
           <template slot-scope="props">
             <el-form label-position="left" inline class="demo-table-expand">
               <el-form-item label="备注">
                 <span>{{ props.row.remark ? props.row.remark : '无' }}</span>
               </el-form-item>
               <el-form-item label="接收部门">
-                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无'  }}</span>
+                <span>{{ props.row.toDepartment.name ? props.row.toDepartment.name : '无' }}</span>
               </el-form-item>
               <el-form-item label="接受项目">
-                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无'  }}</span>
+                <span>{{ props.row.toProject.name ? props.row.toProject.name : '无' }}</span>
               </el-form-item>
             </el-form>
           </template>
+        </el-table-column> -->
+        <el-table-column label="收入状态">
+          <template slot-scope="props">
+            <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
+          </template>
         </el-table-column>
-        <el-table-column
-          label="收入状态">
-            <template slot-scope="props">
-              <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
-            </template>
-        </el-table-column>  
-        <el-table-column
-          label="归属部门"
-          prop="department.name">
-        </el-table-column>
-        <el-table-column
-          label="归属项目"
-          prop="project.name">
-        </el-table-column>
-        <el-table-column
-          label="产品"
-          prop="product.name">
+        <el-table-column label="归属部门" prop="department.name"></el-table-column>
+        <el-table-column label="归属项目" prop="project.name"></el-table-column>
+        <el-table-column label="产品" prop="product.name"></el-table-column>
+        <el-table-column label="接收部门" prop="toDepartment.name"></el-table-column>
+        <el-table-column label="接受项目" prop="toProject.name"></el-table-column>
+        <el-table-column label="备注" prop="remark"></el-table-column>
+        <el-table-column label="金额">
+          <template slot-scope="props">
+            <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
+          </template>
         </el-table-column>
-        <el-table-column
-          label="金额">
-            <template slot-scope="props">
-              <span>{{ props.row.type == 'COST' ? '-' + props.row.amount : '+' + props.row.amount }}</span>
-            </template>
-        </el-table-column>              
         <el-table-column label="操作" width="80">
           <template slot-scope="scope">
-            <el-button
-              size="mini"
-              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
             <!--
             <el-button
               size="mini"
               type="danger"
               @click="handleDelete(scope.$index, scope.row)">删除</el-button>
-              -->
+            -->
           </template>
         </el-table-column>
       </el-table>
-    </el-card>    
-    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">     
+    </el-card>
+    <el-dialog :title="type == 'INCOME' ? '收入' : '成本'" :visible.sync="dialogFormVisible">
       <el-form :model="form" ref="form">
+        <el-form-item
+          label="发生时间"
+          prop="happenTime"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '名称不能为空'}]"
+        >
+          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
+          <el-date-picker v-model="form.happenTime" type="date" placeholder="选择日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item
+          label="金额"
+          prop="amount"
+          :label-width="formLabelWidth"
+          :rules="[
+          { required: true, message: '编码不能为空'}, 
+          // { type: 'float', message: '金额必须为数字值'}
+        ]"
+        >
+          <el-input style="width: 35%;" v-model="form.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item
+          label="收入状态"
+          prop="incomeStatus"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '状态不能为空'}]"
+        >
+          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
+            <el-option key label="无" value></el-option>
+            <el-option label="开票/应收" value="INVOICE"></el-option>
+            <el-option label="到账" value="ARRIVAL"></el-option>
+            <el-option label="内部核算" value="INTERNAL"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
+          <el-select v-model="form.productId" placeholder="请选择产品">
+            <el-option key label="无" value></el-option>
+            <el-option
+              v-for="item in productSelectData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="归属项目" prop="projectId" :label-width="formLabelWidth">
           <el-select v-model="form.projectId" placeholder="请选择项目">
-            <el-option
-              key=""
-              label="无"
-              value="">
-            </el-option>             
+            <el-option key label="无" value></el-option>
             <el-option
               v-for="item in projectSelectData"
               :key="item.id"
               :label="item.name"
-              :value="item.id">
-            </el-option>        
-          </el-select> 
-        </el-form-item>
-        <el-form-item label="归属产品" prop="productId" :label-width="formLabelWidth">
-            <el-select v-model="form.productId" placeholder="请选择产品">
-            <el-option
-              key=""
-              label="无"
-              value="">
-            </el-option>               
-              <el-option
-                v-for="item in productSelectData"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id">
-              </el-option>        
-            </el-select> 
-        </el-form-item>         
-        <el-form-item label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
-          <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
-            <el-option
-              key=""
-              label="无"
-              value="">
-            </el-option>             
-            <el-option label="开票/应收" value="INVOICE"></el-option>
-            <el-option label="到账" value="ARRIVAL"></el-option>
-            <el-option label="内部核算" value="INTERNAL"></el-option>
+              :value="item.id"
+            ></el-option>
           </el-select>
-        </el-form-item>          
-        <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
-        { required: true, message: '编码不能为空'}, 
-        { type: 'number', message: '排序必须为数字值'}
-        ]">
-          <el-input style="width: 30%;" v-model.number="form.amount" autocomplete="off"></el-input>
-        </el-form-item>                
-        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">          
+        </el-form-item>
+
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">
           <el-select v-model="form.toDeptId" placeholder="请选择部门">
-            <el-option
-              key=""
-              label="无"
-              value="">
-            </el-option>             
+            <el-option key label="无" value></el-option>
             <el-option
               v-for="item in teamSelectData"
               :key="item.id"
               :label="item.name"
-              :value="item.id">
-            </el-option>        
-          </el-select>      
+              :value="item.id"
+            ></el-option>
+          </el-select>
         </el-form-item>
-        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">         
+        <el-form-item label="来源项目" prop="toProjectId" :label-width="formLabelWidth">
           <el-select v-model="form.toProjectId" placeholder="请选择项目">
-            <el-option
-              key=""
-              label="无"
-              value="">
-            </el-option>             
+            <el-option key label="无" value></el-option>
             <el-option
               v-for="item in projectSelectData"
               :key="item.id"
               :label="item.name"
-              :value="item.id">
-            </el-option>        
-          </el-select> 
-        </el-form-item>
-        <el-form-item label="发生时间" prop="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
-          <!--<el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>-->
-            <el-date-picker
-              v-model="form.happenTime"
-              type="date"
-              placeholder="选择日期">
-            </el-date-picker>  
+              :value="item.id"
+            ></el-option>
+          </el-select>
         </el-form-item>
-        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth" >
+
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth">
           <el-select v-model="form.deptId" placeholder="请选择部门" ref="select" @change="getName">
-            <el-option
-              key=""
-              label="无"
-              value="">
-            </el-option>             
+            <el-option key label="无" value></el-option>
             <el-option
               v-for="item in teamSelectData"
               :key="item.id"
               :label="item.name"
-              :value="item.id">
-            </el-option>        
-          </el-select>      
-        </el-form-item>                                                                   
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
           <el-input type="textarea" :rows="2" v-model="form.remark" autocomplete="off"></el-input>
-        </el-form-item>           
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="resetForm('form')">取 消</el-button>
         <el-button type="primary" @click="submitForm('form')">确 定</el-button>
       </div>
-    </el-dialog>  
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getTeamSelect, getProjectSelect, getProductSelect, getCostTeamSelect, getCostTypeSelect, addManage, getManageList, setManage } from '@/api/manageApi'
+import {
+  getTeamSelect,
+  getProjectSelect,
+  getProductSelect,
+  getCostTeamSelect,
+  getCostTypeSelect,
+  addManage,
+  getManageList,
+  setManage
+} from "@/api/manageApi";
 export default {
   data() {
     return {
-      type: '',
+      type: "",
       dialogFormVisible: false,
       addFlag: false,
-      id: '',
+      id: "",
       form: {
-        deptId: '',
-        projectId: '',
-        costTypeId: '',
-        companyId: '',
-        companyType: '',
-        happenTime: '',
-        incomeStatus: '',
-        productId: '',
-        toProjectId: '',
-        remark: '',
-        amount: '',
-        toDeptId: '',
-        deptName: '',
-        code: '',
-        name: '',
-        status: 'NORMAL',
-        sort: ''
+        deptId: "",
+        projectId: "",
+        costTypeId: "",
+        companyId: "",
+        companyType: "",
+        happenTime: "",
+        incomeStatus: "",
+        productId: "",
+        toProjectId: "",
+        remark: "",
+        amount: "",
+        toDeptId: "",
+        deptName: "",
+        code: "",
+        name: "",
+        status: "NORMAL",
+        sort: ""
       },
-      formLabelWidth: '120px',
+      formLabelWidth: "120px",
       teamSelectData: [],
       projectSelectData: [],
       productSelectData: [],
@@ -213,63 +199,64 @@ export default {
       costTypeSelectData: [],
       manageData: [],
       companyData: []
-    }
+    };
   },
-  created () {
+  created() {
     // 获取部门下拉框
     getTeamSelect().then(res => {
       this.teamSelectData = res.data.data;
-    })
+    });
     // 获取项目下拉框
     getProjectSelect().then(res => {
       this.projectSelectData = res.data.data;
-    })
+    });
     //获取产品下拉框
     getProductSelect().then(res => {
       this.productSelectData = res.data.data;
-    })
+    });
     //获取经营列表
     getManageList({
-      type: 'INCOME'
+      type: "INCOME"
     }).then(res => {
       this.manageData = res.data.data;
-    })
+      console.log(res.data.data)
+    });
     //获取单位下拉
     getCostTeamSelect().then(res => {
       this.costTeamSelectData = res.data.data;
-    })
+    });
     //获取成本类型下拉
     getCostTypeSelect().then(res => {
       this.costTypeSelectData = res.data.data;
-    })
+    });
   },
   methods: {
-    tableRowClassName({row, rowIndex}) {
-      if (row.type === 'COST') {
-        return 'cost-row';
+    tableRowClassName({ row, rowIndex }) {
+      if (row.type === "COST") {
+        return "cost-row";
       } else {
-        return 'income-row';
+        return "income-row";
       }
-      return '';
+      return "";
     },
     //获取部门名称
-    getName (val) {
+    getName(val) {
       let obj = {};
-      obj = this.teamSelectData.find((item)=>{
+      obj = this.teamSelectData.find(item => {
         return item.id === val;
       });
-      let getName = ''
+      let getName = "";
       this.form.deptName = obj.name;
     },
     // 添加
-    append (type) {
+    append(type) {
       this.type = type;
       this.dialogFormVisible = true;
-      this.addFlag = true
+      this.addFlag = true;
     },
     // 编辑
     handleEdit(index, row) {
-      console.log(row)
+      console.log(row);
       //回显赋值
       this.type = row.type;
       this.form.deptId = row.department.id;
@@ -297,28 +284,28 @@ export default {
         if (valid) {
           this.form.happenTime = new Date(this.form.happenTime) * 1;
           this.form.type = this.type;
-          if(this.addFlag) {
+          if (this.addFlag) {
             addManage(this.form).then(res => {
-              console.log(res)
+              console.log(res);
               //获取经营列表
               getManageList({
-                type: 'INCOME'
+                type: "INCOME"
               }).then(res => {
                 this.manageData = res.data.data;
-              })
+              });
               this.$refs[formName].resetFields();
-            })
+            });
           } else {
             this.form.id = this.id;
             setManage(this.form).then(res => {
               //获取经营列表
               getManageList({
-                type: 'INCOME'
+                type: "INCOME"
               }).then(res => {
                 this.manageData = res.data.data;
-              })
+              });
               this.$refs[formName].resetFields();
-            })
+            });
           }
           this.dialogFormVisible = false;
         } else {
@@ -327,45 +314,45 @@ export default {
       });
     },
     // 取消
-    resetForm (formName) {
+    resetForm(formName) {
       this.$refs[formName].resetFields();
       this.dialogFormVisible = false;
-    }   
+    }
   }
-}
+};
 </script>
 
 <style scope>
-  .manage {
-    padding: 20px;
-    box-sizing: border-box;
-  }
-  .add-container {
-    float: right;
-    margin-bottom: 20px;
-  }
-  .right-card {
-    width: 100%;
-    margin: 0 auto;
-  }
-  .demo-table-expand {
-    font-size: 0;
-  }
-  .demo-table-expand label {
-    width: 90px;
-    color: #99a9bf;
-  }
-  .demo-table-expand .el-form-item {
-    margin-right: 0;
-    margin-bottom: 0;
-    width: 50%;
-  }
-  .el-table .cost-row {
-    color: green;
-  }
+.manage {
+  padding: 20px;
+  box-sizing: border-box;
+}
+.add-container {
+  float: right;
+  margin-bottom: 20px;
+}
+.right-card {
+  width: 100%;
+  margin: 0 auto;
+}
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+.el-table .cost-row {
+  color: green;
+}
 
-  .el-table .income-row {
-    color: red;
-  }
+.el-table .income-row {
+  color: red;
+}
 </style>
 

src/pages/project/index.vue

@@ -89,10 +89,14 @@ export default {
     }
   },
   created () {
-    getProjectList().then(res => {
-      console.log(res)
-      this.projectData = res.data.data
-    });
+    // getProjectList().then(res => {
+    //   console.log(res)
+    //   this.projectData = res.data.data
+    // });
+    this.$fetch('manageBase/project')
+    .then(response => {
+       console.log(response)
+    })
   },
   methods: {
     // 新增项目

src/utils/config.js

@@ -1,2 +1,3 @@
 export const baseApi =  'https://readertest.lingjiao.cn/' 
+// export const baseApi =   'http://whiteboardtest.ai160.com/' 
     

src/utils/http.js

@@ -0,0 +1,124 @@
+import axios from 'axios';
+import {
+    Message
+} from 'element-ui';
+
+axios.defaults.timeout = 5000;
+axios.defaults.baseURL = 'https://readertest.lingjiao.cn/';
+
+/*** 
+ * 
+ * 复制于 https://www.cnblogs.com/ldlx-mars/p/7908950.html
+ * 
+*/
+
+//http request 拦截器
+axios.interceptors.request.use(
+    config => {
+        // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie
+        config.data = JSON.stringify(config.data);
+        config.headers = {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        }
+        // if(token){
+        //   config.params = {'token':token}
+        // }
+        return config;
+    },
+    error => {
+        return Promise.reject(err);
+    }
+);
+
+//http response 拦截器 暂时不用
+/* axios.interceptors.response.use(
+    response => {
+        if (response.data.errCode == 2) {
+            router.push({
+                path: "/login",
+                querry: {
+                    redirect: router.currentRoute.fullPath
+                } //从哪个页面跳转
+            })
+        }
+        return response;
+    },
+    error => {
+        return Promise.reject(error)
+    }
+) */
+
+/**
+ * 封装get方法
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function fetch(url, params = {}) {
+    return new Promise((resolve, reject) => {
+        axios.get(url, {
+                params: params
+            })
+            .then(response => {
+                resolve(response.data);
+            })
+            .catch(err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装post请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function post(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.post(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装patch请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function patch(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.patch(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}
+
+/**
+ * 封装put请求
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+
+export function put(url, data = {}) {
+    return new Promise((resolve, reject) => {
+        axios.put(url, data)
+            .then(response => {
+                resolve(response.data);
+            }, err => {
+                reject(err)
+            })
+    })
+}