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

<template>
  <div>
    <!-- <TitleBar propTitle="经营数据查询" /> -->
    <el-form  :model="form" ref="form" class="marginTop">
      <el-form-item label="类别" :label-width="formLabelWidth">
        <el-radio-group v-model="form.type" placeholder="请选择类别" size="medium">
          <el-radio border label="INCOME">收入</el-radio>
          <el-radio border label="COST">成本</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="时间范围" :label-width="formLabelWidth">
        <el-date-picker placeholder="起始时间" v-model="form.startTime" style="width: 100%;"></el-date-picker>
        <el-date-picker placeholder="结束时间" v-model="form.endTime" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item
        label="支出类型"
        v-if="form.type==='COST'"
        prop="costTypeId"
        :label-width="formLabelWidth"
      >
        <el-select v-model="form.costTypeId" placeholder="请选择支出类型" ref="select">
          <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="收入状态" v-if="form.type==='INCOME'" :label-width="formLabelWidth">
        <el-radio-group v-model="form.incomeStatus" placeholder="请选择状态值" size="medium">
          <el-radio border label="INVOICE">开票/应收</el-radio>
          <el-radio border label="ARRIVAL">到账</el-radio>
          <el-radio border label="INTERNAL">内部核算</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="归属项目"
        v-if="form.type!==''"
        style="display:inline-block;"
        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="归属部门" style="display:inline-block;" prop="deptId" v-if="form.type!==''" :label-width="formLabelWidth">
        <el-select v-model="form.deptId" placeholder="请选择部门" ref="select">
          <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="来源项目"
        style="display:inline-block;"
        prop="toProjectId"
        v-if="form.type!==''"
        :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="toDeptId"
        style="display:inline-block;"
        v-if="form.type!==''"
        :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="归属产品"
        v-if="form.type==='INCOME'"
        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
        style="position: absolute; width:23%; display:block; margin:0 auto; left: 0; right: 0;"
      >
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="info" @click="onReset">重置</el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="info" @click="reset">重置</el-button>
      </el-form-item>-->
    </el-form>
    <!-- 查询结果收入表 -->
    <el-table
      :data="searchResult"
      style="width: 100%;margin-top:50px;"
      :row-class-name="tableRowClassName"
      show-summary
      v-if="tableType === 'INCOME'"
      border
    >
      <el-table-column prop="happenTime" sortable :formatter="dateFormat" label="发生日期"></el-table-column>
      <el-table-column prop="amount" sortable label="金额"></el-table-column>
      <el-table-column label="收入状态" prop="incomeStatus" :formatter="incomeTypeFormat">
        <!-- <template slot-scope="props">
          <span>{{ props.row.incomeStatus == 'INVOICE' ? '开票/应收' : props.row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' }}</span>
        </template> -->
      </el-table-column>
      <el-table-column label="产品" prop="product.name"></el-table-column>
      <el-table-column label="归属项目" prop="project.name"></el-table-column>
      <el-table-column label="归属部门" prop="department.name"></el-table-column>
      <el-table-column label="接收项目" prop="toProject.name"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
    </el-table>
    <!-- 查询结果成本表 -->
    <el-table
      :data="searchResult"
      style="width: 100%;margin-top:50px;"
      :row-class-name="tableRowClassName"
      show-summary
      v-if="tableType === 'COST'"
      border
    >
      <el-table-column prop="happenTime" sortable :formatter="dateFormat" label="时间"></el-table-column>
      <el-table-column prop="amount" sortable label="金额"></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="toProject.name"></el-table-column>
      <el-table-column label="接收部门" prop="toDepartment.name"></el-table-column>

      <el-table-column label="备注" prop="remark"></el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  getTeamSelect,
  getProjectSelect,
  getProductSelect,
  getCostTeamSelect,
  getCostTypeSelect,
  addManage,
  getManageList,
  setManage
} from "@/api/manageApi";
import TitleBar from "../layout/titleBar/TitleBar.vue";
import { formatTime } from "../../utils/common";
export default {
  components: {
    TitleBar
  },
  data() {
    return {
      type: "",
      dialogFormVisible: false,
      addFlag: false,
      id: "",
      searchResult: [],
      form: {
        type: "",
        productId: "",
        projectId: "",
        toDeptId: "",
        toProjectId: "",
        deptId: "",
        incomeStatus: "",
        status: "NORMAL",
        costTypeId: ""
      },
      formLabelWidth: "120px",
      teamSelectData: [],
      projectSelectData: [],
      productSelectData: [],
      costTeamSelectData: [],
      costTypeSelectData: [],
      manageData: [],
      companyData: [],
      tableType: ""
    };
  },
  created() {
    // 获取部门下拉框
    getTeamSelect().then(res => {
      this.teamSelectData = res.data;
    });
    // 获取项目下拉框
    getProjectSelect().then(res => {
      this.projectSelectData = res.data;
    });
    //获取产品下拉框
    getProductSelect().then(res => {
      this.productSelectData = res.data;
    });
    //获取经营列表
    getManageList({
      type: "INCOME"
    }).then(res => {
      this.manageData = res.data;
      console.log(res.data);
    });
    //获取单位下拉
    getCostTeamSelect().then(res => {
      this.costTeamSelectData = res.data;
    });
    //获取成本类型下拉
    getCostTypeSelect().then(res => {
      this.costTypeSelectData = res.data;
    });
  },
  methods: {
    onSubmit() {
      this.searchResult = '';
      if (this.form.type === "INCOME") {
        this.form.costTypeId = "";
        this.tableType = "INCOME";
      }
      if (this.form.type === "COST") {
        this.form.incomeStatus = "";
        this.form.productId = "";
        this.tableType = "COST";
      }
      this.$fetch("manageBase/manage", this.form).then(response => {
        console.log(response);
        this.searchResult = response.data;
      });
    },
    onReset() {
      this.form.type = "";
      this.form.costTypeId = "";
      this.tableType = "";
      this.$refs.form.resetFields();
    },
    tableRowClassName({ row, rowIndex }) {
      console.log(row.type);
      if (row.type === "COST") {
        return "cost-row-search";
      } else {
        return "income-row-search";
      }
      // 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;
    },
    // 格式化时间
    dateFormat(row, column) {
      return formatTime(row.happenTime);
    },
    incomeTypeFormat(row) {
      return row.incomeStatus == 'INVOICE' ? '开票/应收' : row.incomeStatus == 'ARRIVAL' ? '到账' : '内部核算' 
    },
    moneyFormat(row) {
      if (row.type == "COST") {
        return "-" + row.amount;
      } else {
        return row.amount;
      }
    }
  }
};
</script>

<style scope>
.marginTop {
  margin-top: 20px;
}
.el-table .cost-row-search {
  /* color: green; */
  background: #f0f9eb;
}

.el-table .income-row-search {
  /* color: red; */
  background: rgba(248, 181, 172, 0.267);
  /* color: #f0f9eb; */
}
</style>