更改细节

src/pages/layout/nav/Nav.vue

@@ -4,8 +4,11 @@
         <el-menu-item index="/manage/query">
             <span slot="title">经营数据查询</span>
         </el-menu-item>
+        <el-menu-item index="/manage/cost">
+            <span slot="title">经营数据成本</span>
+        </el-menu-item>
         <el-menu-item index="/manage/index">
-            <span slot="title">经营数据管理</span>
+            <span slot="title">经营数据收入</span>
         </el-menu-item>
         <el-menu-item index="/team/index">
             <span slot="title">部门管理</span>
@@ -19,9 +22,11 @@
         <el-menu-item index="/costType/index">
             <span slot="title">成本类型管理</span>
         </el-menu-item>
+        <!--
         <el-menu-item index="/costTeam/index">
             <span slot="title">成本部门/单位/人管理</span>
         </el-menu-item>
+        -->
       </el-menu>
     </div>
 </template>

src/pages/manage/cost.vue

@@ -0,0 +1,335 @@
+<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="请选择部门">
+            <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 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 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: '',
+        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 '';
+    },
+    // 添加
+    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 {
+    margin-bottom: 20px;
+  }
+  .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>
+

src/pages/manage/index.vue

@@ -2,7 +2,6 @@
   <div class="manage">
     <div class="add-container">    
       <el-button type="primary" @click="append('INCOME')">增加收入</el-button>
-      <el-button type="primary" @click="append('COST')">增加成本</el-button>
     </div>
     <el-card class="right-card">
       <el-table
@@ -13,7 +12,13 @@
           <template slot-scope="props">
             <el-form label-position="left" inline class="demo-table-expand">
               <el-form-item label="备注">
-                <span>{{ props.row.remark }}</span>
+                <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>
@@ -59,19 +64,14 @@
     </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" :rules="[{ required: true, message: '名称不能为空'}]">
-          <el-select v-model="form.deptId" placeholder="请选择部门">
-            <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-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"
@@ -79,8 +79,13 @@
             </el-option>        
           </el-select> 
         </el-form-item>
-        <el-form-item v-if="type == 'INCOME'" label="选择产品" prop="productId" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
+        <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"
@@ -89,74 +94,80 @@
               </el-option>        
             </el-select> 
         </el-form-item> 
-        <el-form-item v-else label="成本类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
-          <el-select v-model="form.costTypeId" placeholder="请选择类型">
+        <el-form-item label="归属部门" prop="deptId" :label-width="formLabelWidth" >
+          <el-select v-model="form.deptId" placeholder="请选择部门">
+            <el-option
+              key=""
+              label="无"
+              value="">
+            </el-option>             
             <el-option
-              v-for="item in costTypeSelectData"
+              v-for="item in teamSelectData"
               :key="item.id"
               :label="item.name"
               :value="item.id">
-            </el-option> 
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="type == 'INCOME'" label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
+            </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 v-else label="部门/单位/人"  prop="companyType" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
-          <el-select v-model="form.companyType" placeholder="请选择状态值" @change="selectChange">
-            <el-option label="外部" value="COMPANY"></el-option>
-            <el-option label="部门" value="DEPARTMENT"></el-option>
-            <el-option label="项目" value="PROJECT"></el-option>
-          </el-select>
-          <el-select v-model="form.companyId" placeholder="请选择状态值">
-            <el-option
-              v-for="item in companyData"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id">
-            </el-option> 
-          </el-select>
-        </el-form-item>                  
+        </el-form-item>          
         <el-form-item label="金额" prop="amount" :label-width="formLabelWidth" :rules="[
         { required: true, message: '编码不能为空'}, 
         { type: 'number', message: '排序必须为数字值'}
         ]">
           <el-input 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="datetime"
-                placeholder="选择日期时间">
-            </el-date-picker>
-        </el-form-item>
-        <!--
-        <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">
-          <el-input v-model="form.name" autocomplete="off"></el-input>
-        </el-form-item>               
+              v-model="form.happenTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>  
+        </el-form-item>                                                          
         <el-form-item label="添加备注" prop="remark" :label-width="formLabelWidth">
           <el-input v-model="form.remark" 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-item>           
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="resetForm('form')">取 消</el-button>
@@ -184,8 +195,10 @@ export default {
         happenTime: '',
         incomeStatus: '',
         productId: '',
+        toProjectId: '',
         remark: '',
         amount: '',
+        toDeptId: '',
         code: '',
         name: '',
         status: 'NORMAL',
@@ -215,7 +228,9 @@ export default {
       this.productSelectData = res.data.data;
     })
     //获取经营列表
-    getManageList().then(res => {
+    getManageList({
+      type: 'INCOME'
+    }).then(res => {
       this.manageData = res.data.data;
     })
     //获取单位下拉
@@ -236,22 +251,6 @@ export default {
       }
       return '';
     },
-    //选项框联动
-    selectChange(val) {
-      switch (val) {
-        case 'COMPANY':
-          this.companyData = this.costTeamSelectData
-        break
-        case 'DEPARTMENT':
-          this.companyData = this.teamSelectData
-          break;
-        case 'PROJECT':
-          this.companyData = this.projectSelectData
-          break;          
-        default:
-          break;
-      }
-    },
     // 添加
     append (type) {
       this.type = type;
@@ -291,7 +290,9 @@ export default {
             addManage(this.form).then(res => {
               console.log(res)
               //获取经营列表
-              getManageList().then(res => {
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
                 this.manageData = res.data.data;
               })
               this.$refs[formName].resetFields();
@@ -300,7 +301,9 @@ export default {
             this.form.id = this.id;
             setManage(this.form).then(res => {
               //获取经营列表
-              getManageList().then(res => {
+              getManageList({
+                type: 'INCOME'
+              }).then(res => {
                 this.manageData = res.data.data;
               })
               this.$refs[formName].resetFields();

src/router/index.js

@@ -75,7 +75,11 @@ export const pageRoter = [
             path: 'query',
             name:'Manage', 
             component: () => import('@/pages/manage/query'),
-          }]
+        },{
+            path: 'cost',
+            name:'Manage', 
+            component: () => import('@/pages/manage/cost'),
+        }]
     }
 ]