efun-finance/src/pages/manage/cost.vue

<template>
  <div class="manage">
    <!-- <TitleBar propTitle="成本管理" /> -->
    <div class="searchBtn">
      <el-form :model="form" ref="searchForm" class="marginTop">
        <el-form-item label="发生日期范围" :label-width="formLabelWidth">
          <el-row :gutter="10">
            <el-col :span="4">
              <el-date-picker placeholder="起始时间" style="width:100%" v-model="searchForm.startTime"></el-date-picker>
            </el-col>
            <el-col :span="4">
              <el-date-picker placeholder="结束时间" style="width:100%" v-model="searchForm.endTime"></el-date-picker>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item style="position: absolute; width:23%; left:300px;">
          <el-button type="primary" @click="onSearch">检索</el-button>
          <el-button type="info" @click="onReset">清空条件</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="add-container">
      <el-button type="primary" @click="append('COST')">增加成本</el-button>
    </div>
    <el-card class="right-card">
      <el-table
        :data="manageData"
        :row-class-name="isDel"
        align="right"
        border
        empty-text="无"
        max-height="750"
      >
        <el-table-column
          width="105px"
          label="发生日期"
          :formatter="dateFormat"
          prop="happenTime"
          align="right"
        ></el-table-column>
        <el-table-column
          width="105px"
          align="right"
          label="金额"
          :formatter="moneyFormat"
          prop="amount"
        ></el-table-column>
        <el-table-column width="160px" align="right" label="成本类别" prop="costType.name"></el-table-column>
        <el-table-column width="180px" align="right" label="发生项目/人" prop="project.name"></el-table-column>
        <el-table-column width="250px" align="right" label="发生部门" prop="department.name"></el-table-column>

        <!-- <el-table-column label="接收项目" width="220px" align="right" prop="toProject.name"></el-table-column> -->
        <el-table-column label="供应商" width="290px" align="right" prop="toDepartment.name"></el-table-column>

        <el-table-column label="备注" min-width="300px" align="right" prop="remark"></el-table-column>
        <el-table-column label="操作" align="center" width="160">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              v-if="scope.row.status==='NORMAL'"
              @click="handleAbandon(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-column
          width="120px"
          align="right"
          label="录入日期"
          :formatter="recordTimeFormat"
          prop="gmtModife"
        ></el-table-column>
      </el-table>
      <el-pagination
        background
        @current-change="handlePageChange"
        :page-size="50"
        layout="prev, pager, next"
        :total="totalNumber"
      ></el-pagination>
    </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: 230px; display: block" 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.code +'--'+ item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="归属部门"
          prop="deptId"
          :rules="[{ required: true, message: '归属部门不能为空'}]"
          :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.code +'--'+ 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.code +'--'+ 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 costTeamSelectData"
              :key="item.id"
              :label="item.code +'--'+ 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.code +'--'+ 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"
            style="width: 250px; display: block"
            :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";
import TitleBar from "../layout/titleBar/TitleBar.vue";
import { formatTime } from "../../utils/common";
export default {
  components: {
    TitleBar
  },
  data() {
    return {
      type: "",
      dialogFormVisible: false,
      addFlag: false,
      id: "",
      searchFlag: false,
      form: {
        deptId: "",
        projectId: "",
        costTypeId: 0,
        companyId: "",
        happenTime: "",
        incomeStatus: "",
        productId: "",
        remark: "",
        amount: "",
        toDeptId: "",
        toProjectId: "",
        deptName: "",
        code: "",
        name: "",
        status: "NORMAL",
        sort: ""
      },
      searchForm: {
        type: "COST",
        productId: [],
        projectId: [],
        toDeptId: "",
        toProjectId: "",
        deptId: [],
        incomeStatus: [],
        status: "NORMAL",
        costTypeId: [],
        startTime: null,
        endTime: null,
        minAmount: "",
        maxAmount: "",
        isEntry: true,
        pageNo: 1,
        pageSize: 50
      },
      pageNo: 1,
      pageSize: 50,
      formLabelWidth: "120px",
      totalSum: 0,
      teamSelectData: [],
      projectSelectData: [],
      productSelectData: [],
      costTeamSelectData: [],
      costTypeSelectData: [],
      manageData: [],
      companyData: [],
      totalNumber: 0
    };
  },
  created() {
    // const isSuper = sessionStorage.getItem("isSuper");
    // if (isSuper === 'false') {
    //   this.$message.warning({
    //     message: "没有权限"
    //   });
    //   window.location.href = "/query/";
    //   return;
    // }
    // 获取部门下拉框
    getTeamSelect('COMPANY').then(res => {
      this.teamSelectData = res.data;
      this.form.deptId = res.data[0].id;
    });
    // 获取项目下拉框
    getProjectSelect().then(res => {
      this.projectSelectData = res.data;
    });
    //获取产品下拉框
    getProductSelect().then(res => {
      this.productSelectData = res.data;
    });
    //获取经营列表
    getManageList({
      type: "COST",
      isEntry: true,
      pageNo: 1,
      pageSize: 50
    }).then(res => {
      this.manageData = res.data.content;
      this.totalNumber = parseInt(res.data.totalElements);
    });
    //获取供应商下拉
    getTeamSelect('OTHERS').then(res => {
      this.costTeamSelectData = res.data;
    });
    //获取成本类型下拉
    getCostTypeSelect().then(res => {
      this.costTypeSelectData = res.data;
      this.form.costTypeId = res.data[0].id;
    });
  },
  methods: {
    // 金额格式化
    moneyFormat(row) {
      let num = row.amount.toFixed(2);
      num += "";
      return num.replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
        return $1 + ",";
      });
    },
    // 切换页码
    handlePageChange(val) {
      getManageList({
        type: "COST",
        pageNo: val,
        pageSize: 50,
        isEntry: true
      }).then(res => {
        this.manageData = res.data.content;
        this.totalNumber = parseInt(res.data.totalElements);
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.type === "COST") {
        return "cost-row";
      } else {
        return "income-row";
      }
      return "";
    },
    isDel({ row, rowIndex }) {
      if (row.status === "DEL") {
        return "isDel";
      }
    },
    //获取部门名称
    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 ? row.department.id : "";
      this.form.projectId = row.project ? 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;
    },
    // 作废一条
    handleAbandon(index, row) {
      console.log(index);
      console.log(row);
      const temp = {};
      temp.id = row.id;
      temp.status = "DEL";
      setManage(temp).then(res => {
        console.log(res);
        // 刷新列表
        getManageList({
          type: "COST",
          pageNo: this.pageNo,
          pageSize: 50,
          isEntry: true
        }).then(res => {
          this.manageData = res.data.content;
          this.totalSize = res.data.totalPages;
        });
      });
      this.$message({
        message: "操作成功",
        type: "success"
      });
    },
    // 提交新增
    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",
                pageNo: 1,
                pageSize: 50,
                isEntry: true
              }).then(res => {
                this.manageData = res.data.content;
                this.totalSize = res.data.totalPages;
              });
              this.$refs[formName].resetFields();
              this.$message({
                message: "添加成功",
                type: "success"
              });
            });
          } else {
            this.form.id = this.id;
            setManage(this.form).then(res => {
              //获取经营列表
              getManageList({
                type: "COST",
                pageNo: 1,
                pageSize: 50,
                startTime: this.searchFlag ? this.searchForm.startTime : null,
                endTime: this.searchFlag ? this.searchForm.endTime : null,
                isEntry: true
              }).then(res => {
                this.manageData = res.data.content;
                this.totalSize = res.data.totalPages;
              });
              this.$refs[formName].resetFields();
              this.$message({
                message: "修改成功",
                type: "success"
              });
            });
          }
          this.dialogFormVisible = false;
        } else {
          return false;
        }
      });
    },
    // 取消
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisible = false;
    },
    // 格式化时间
    dateFormat(row, column) {
      return formatTime(row.happenTime);
    },
    recordTimeFormat(row) {
      return formatTime(row.gmtModified);
    },
    // 按时间检索
    onSearch() {
      this.$post("manageBase/manage/search", this.searchForm).then(response => {
        if (response.data && response.data.length == 0 || !response.data) {
          this.totalSum = 0;
          this.$message("未找到相应数据");
          return;
        }
        this.searchFlag = true;
        this.manageData = response.data.content;
        this.totalNumber = parseInt(response.data.totalElements);
      });
    },
    // 清空检索条件
    onReset() {
      this.searchFlag = false;
      this.searchForm.startTime = null;
      this.searchForm.endTime = null;
      getManageList({
        type: "COST",
        pageNo: 1,
        pageSize: 50,
        isEntry: true
      }).then(res => {
        this.manageData = res.data.content;
        this.totalNumber = parseInt(res.data.totalElements);
      });
    }
  }
};
</script>

<style scope>
.manage {
  padding: 20px;
  /* padding-top: 0; */
  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;
}
.isDel {
  color: #aaa;
  text-decoration: line-through;
}
</style>