|
@@ -0,0 +1,326 @@
|
|
|
+<template>
|
|
|
+ <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
|
|
|
+ :data="manageData"
|
|
|
+ style="width: 100%">
|
|
|
+ <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.department.name }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="ID">
|
|
|
+ <span>{{ props.row.id }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注">
|
|
|
+ <span>{{ props.row.remark }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="ID"
|
|
|
+ prop="id">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="类型">
|
|
|
+ <template slot-scope="props">
|
|
|
+ <span>{{ props.row.type == 'COST' ? '支出' : '收入' }}</span>
|
|
|
+ </template>
|
|
|
+ </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="amount">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <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" :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" :rules="[{ required: true, message: '名称不能为空'}]">
|
|
|
+ <el-select v-model="form.projectId" placeholder="请选择项目">
|
|
|
+ <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="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="happenTime" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
|
|
|
+ <el-input v-model="form.happenTime" autocomplete="off" placeholder="请输入格式2019/00/00"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="名称" prop="name" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </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 v-if="type == 'INCOME'" label="选择产品" prop="productId" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
|
|
|
+ <el-select v-model="form.productId" placeholder="请选择产品">
|
|
|
+ <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 v-else label="支出类型" prop="costTypeId" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
|
|
|
+ <el-select v-model="form.costTypeId" placeholder="请选择类型">
|
|
|
+ <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 v-if="type == 'INCOME'" label="收入状态" prop="incomeStatus" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
|
|
|
+ <el-select v-model="form.incomeStatus" placeholder="请选择状态值">
|
|
|
+ <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 label="添加备注" prop="remark" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
|
|
|
+ <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" :rules="[
|
|
|
+ { required: true, message: '排序不能为空'},
|
|
|
+ { type: 'number', message: '排序必须为数字值'}
|
|
|
+ ]">
|
|
|
+ <el-input v-model.number="form.sort" 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: '',
|
|
|
+ companyType: '',
|
|
|
+ happenTime: '',
|
|
|
+ incomeStatus: '',
|
|
|
+ productId: '',
|
|
|
+ remark: '',
|
|
|
+ amount: '',
|
|
|
+ code: '',
|
|
|
+ name: '',
|
|
|
+ status: '',
|
|
|
+ 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().then(res => {
|
|
|
+ this.manageData = res.data.data;
|
|
|
+ })
|
|
|
+ //获取单位下拉
|
|
|
+ getCostTeamSelect().then(res => {
|
|
|
+ this.costTeamSelectData = res.data.data;
|
|
|
+ })
|
|
|
+ //获取成本类型下拉
|
|
|
+ getCostTypeSelect().then(res => {
|
|
|
+ this.costTypeSelectData = res.data.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //选项框联动
|
|
|
+ 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;
|
|
|
+ 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().then(res => {
|
|
|
+ this.manageData = res.data.data;
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.form.id = this.id;
|
|
|
+ setManage(this.form).then(res => {
|
|
|
+ //获取经营列表
|
|
|
+ getManageList().then(res => {
|
|
|
+ this.manageData = res.data.data;
|
|
|
+ })
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+ } else {
|
|
|
+ return 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%;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|