efun-finance/.history/src/pages/manage/cost_20190319110815.vue

<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>