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

<template>
  <el-form :model="form" ref="form">
    <el-form-item
      label="状态"
      prop="incomeStatus"
      :label-width="formLabelWidth"
      :rules="[{ required: true, message: '状态不能为空'}]"
    >
      <el-radio-group v-model="form.incomeStatus" placeholder="请选择状态值">
        <el-radio label="开票/应收" name="INVOICE"  value="INVOICE"></el-radio>
        <el-radio label="到账" name="ARRIVAL" value="ARRIVAL"></el-radio>
        <el-radio label="内部核算" name="INTERNAL" value="INTERNAL"></el-radio>
      </el-radio-group>
    </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>
</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>