项目修改

master
milo 2022-04-13 22:35:35 +08:00
parent 565eefe8e5
commit 4c1c07d0b2
2 changed files with 164 additions and 3 deletions

View File

@ -4,3 +4,5 @@ import qs from 'qs'
export const projectData = query => axios.post('http://oa-dxtc.test/project/index', qs.stringify(query));
export const projectAdd = addQuery => axios.post('http://oa-dxtc.test/project/add', qs.stringify(addQuery));
export const projectEdit = editQuery => axios.post('http://oa-dxtc.test/project/edit', qs.stringify(editQuery));

View File

@ -13,7 +13,17 @@
<div class="container">
<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="name" label="项目名称"></el-table-column>
<el-table-column prop="company" label="客户名称"></el-table-column>
<el-table-column prop="user_name" label="负责人"></el-table-column>
<el-table-column prop="amount" label="金额"></el-table-column>
<el-table-column prop="received" label="已回款"></el-table-column>
<el-table-column prop="pending" label="待回款"></el-table-column>
<el-table-column prop="contract_end_date" label="合同结束"></el-table-column>
<el-table-column prop="estimated_start_date" label="预估开始"></el-table-column>
<el-table-column prop="estimated_end_date" label="预估结束"></el-table-column>
<el-table-column prop="start_date" label="实际开始"></el-table-column>
<el-table-column prop="end_date" label="实际结束"></el-table-column>
<el-table-column label="操作" width="180" align="center">
<template #default="scope">
<el-button type="text" @click="handleEdit(scope.$index, scope.row)">
@ -120,12 +130,104 @@
</span>
</template>
</el-dialog>
<!-- 编辑弹出框 -->
<el-dialog title="编辑" v-model="editVisible" width="40%">
<el-form :model="editForm" ref="tableEditData" label-width="120px" :rules="rules">
<el-form-item label="项目名称" prop="name">
<el-input v-model="editForm.name"></el-input>
</el-form-item>
<el-form-item label="客户" prop="customer_id">
<el-select v-model="editForm.customer_id" class="m-2" placeholder="客户" size="small" name="customer_id">
<el-option
v-for="item in customerListData"
:key="item.id"
:value="item.id"
:label="item.company"
/>
</el-select>
</el-form-item>
<el-form-item label="项目对接人" prop="user_id">
<el-select v-model="editForm.user_id" class="m-2" placeholder="项目对接人" size="small" name="user_id">
<el-option
v-for="item in userListData"
:key="item.id"
:value="item.id"
:label="item.name"
/>
</el-select>
</el-form-item>
<el-form-item label="合同日期">
<el-col :span="11">
<el-form-item prop="contract_signing_date">
<el-date-picker type="date" placeholder="合同签订日期" v-model="editForm.contract_signing_date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="contract_end_date">
<el-date-picker type="date" placeholder="合同约定项目结束日期" v-model="editForm.contract_end_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="项目工期" prop="contract_construction_period">
<el-input-number v-model="editForm.contract_construction_period" :min="1" />
</el-form-item>
<el-form-item label="预估日期">
<el-col :span="11">
<el-form-item prop="estimated_start_date">
<el-date-picker type="date" placeholder="预估开始日期" v-model="editForm.estimated_start_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="estimated_end_date">
<el-date-picker type="date" placeholder="预估结束日期" v-model="editForm.estimated_end_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="预估工期" prop="estimated_construction_period">
<el-input-number v-model="editForm.estimated_construction_period" :min="1" />
</el-form-item>
<el-form-item label="实际日期">
<el-col :span="11">
<el-form-item prop="start_date">
<el-date-picker type="date" placeholder="实际开始日期" v-model="editForm.start_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="end_date">
<el-date-picker type="date" placeholder="实际结束日期" v-model="editForm.end_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="实际工期" prop="construction_period">
<el-input-number v-model="editForm.construction_period" :min="1" />
</el-form-item>
<el-form-item label="项目金额" prop="amount">
<el-input-number v-model="editForm.amount" :precision="2" :step="0.1" />
</el-form-item>
<el-form-item label="已回款金额" prop="received">
<el-input-number v-model="editForm.received" :precision="2" :step="0.1" />
</el-form-item>
<el-form-item label="待回款金额" prop="pending">
<el-input-number v-model="editForm.pending" :precision="2" :step="0.1" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="editVisible = false"> </el-button>
<el-button type="primary" @click="saveEdit"> </el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script lang="ts">
import { reactive, ref } from 'vue';
import { ElMessage } from "element-plus";
import { projectData, projectAdd } from "../api/project";
import { projectData, projectAdd, projectEdit } from "../api/project";
import { customerData } from '../api/customer';
import { userData } from '../api/user';
@ -211,6 +313,54 @@ export default{
});
});
};
//
const editVisible = ref(false);
const tableEditData = ref(null);
const editForm = reactive({
name:'',
customer_id: 0,
user_id: 0,
contract_signing_date:'',
contract_end_date:'',
contract_construction_period: 0,
estimated_start_date:'',
estimated_end_date:'',
estimated_construction_period:0,
start_date:'',
end_date:'',
construction_period:0,
amount:0.00,
received:0.00,
pending:0.00,
id:0
});
let idx = -1;
const handleEdit = (index, row) => {
idx = index;
Object.keys(editForm).forEach((item) => {
editForm[item] = row[item];
});
editVisible.value = true;
};
const saveEdit = () => {
tableEditData.value.validate((valid) => {
if(!valid){
ElMessage.error('验证失败');
return false;
}
projectEdit(editForm).then((res) => {
if(res.data.code == 0){
ElMessage.success(`修改第 ${idx + 1} 行成功`);
editVisible.value = false;
}else{
ElMessage.error(res.data.msg);
return false;
}
});
});
};
return {
tableData,
customerListData,
@ -222,7 +372,16 @@ export default{
handleAdd,
saveAdd,
projectAdd,
ElMessage
projectData,
customerData,
userData,
ElMessage,
editVisible,
tableEditData,
editForm,
idx,
handleEdit,
saveEdit
}
}
}