Compare commits
7 Commits
0217700c2c
...
565eefe8e5
| Author | SHA1 | Date |
|---|---|---|
 milo
|
565eefe8e5 | |
|
milo
|
2fcae8c82f | |
|
milo
|
21e4683f41 | |
|
milo
|
024c116a5a | |
|
milo
|
f08c7251a8 | |
|
milo
|
c6fae04a5b | |
|
milo
|
137a003eb0 |
|
|
@ -2,3 +2,7 @@ import axios from 'axios'
|
|||
import qs from 'qs'
|
||||
|
||||
export const customerData = query => axios.post('http://oa-dxtc.test/customer', qs.stringify(query));
|
||||
|
||||
export const customerAdd = addQuery => axios.post('http://oa-dxtc.test/customer/add', qs.stringify(addQuery));
|
||||
|
||||
export const customerEdit = editQuery => axios.post('http://oa-dxtc.test/customer/edit', qs.stringify(editQuery));
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import axios from 'axios'
|
||||
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));
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import axios from 'axios'
|
||||
import qs from 'qs'
|
||||
|
||||
export const sourceData = query => axios.post('http://oa-dxtc.test/source/index', qs.stringify(query));
|
||||
|
||||
export const sourceAdd = addQuery => axios.post('http://oa-dxtc.test/source/add', qs.stringify(addQuery));
|
||||
|
||||
export const sourceEdit = editQuery => axios.post('http://oa-dxtc.test/source/edit', qs.stringify(editQuery));
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import axios from 'axios'
|
||||
import qs from 'qs'
|
||||
|
||||
export const userData = query => axios.post('http://oa-dxtc.test/user/index', qs.stringify(query));
|
||||
|
|
@ -51,6 +51,11 @@ export default {
|
|||
index: "/customer",
|
||||
title: "客户",
|
||||
},
|
||||
{
|
||||
icon: "list",
|
||||
index: "/project",
|
||||
title: "项目",
|
||||
},
|
||||
{
|
||||
icon: "document-copy",
|
||||
index: "/tabs",
|
||||
|
|
@ -101,6 +106,17 @@ export default {
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon:'setting',
|
||||
index: '8',
|
||||
title: '设置',
|
||||
subs: [
|
||||
{
|
||||
index: '/source',
|
||||
title: '来源设置'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const route = useRoute();
|
||||
|
|
|
|||
|
|
@ -4,15 +4,15 @@
|
|||
<li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">
|
||||
<router-link :to="item.path" class="tags-li-title">{{item.title}}</router-link>
|
||||
<span class="tags-li-icon" @click="closeTags(index)">
|
||||
<i class="el-icon-close"></i>
|
||||
<el-icon class="el-icon-close"><close /></el-icon>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tags-close-box">
|
||||
<el-dropdown @command="handleTags">
|
||||
<el-button size="mini" type="primary">
|
||||
<el-button size="small" type="primary">
|
||||
标签选项
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
<el-icon class="el-icon-arrow-down el-icon--right"><arrow-down /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu size="small">
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
|
||||
|
|
|
|||
|
|
@ -22,12 +22,28 @@ const routes = [
|
|||
},
|
||||
{
|
||||
path: "/customer",
|
||||
name: "basetable",
|
||||
name: "customer",
|
||||
meta: {
|
||||
title: '客户'
|
||||
},
|
||||
component: () => import ( /* webpackChunkName: "table" */ "../views/Customer.vue")
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/source',
|
||||
name: 'source',
|
||||
meta: {
|
||||
title: '来源'
|
||||
},
|
||||
component: () => import( '../views/Source.vue' )
|
||||
},
|
||||
{
|
||||
path: '/project',
|
||||
name: 'project',
|
||||
meta: {
|
||||
title: '项目'
|
||||
},
|
||||
component: () => import( '../views/Project.vue' )
|
||||
},
|
||||
//{
|
||||
// path: "/charts",
|
||||
// name: "basecharts",
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
<el-breadcrumb-item>
|
||||
<i class="el-icon-lx-cascades"></i> 客户列表
|
||||
</el-breadcrumb-item>
|
||||
<el-button type="primary">
|
||||
<el-icon :size="20"><plus /></el-icon>
|
||||
<el-button size="small" type="primary" @click="handleAdd()">
|
||||
<el-icon size="small"><plus /></el-icon>
|
||||
</el-button>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
|
|
@ -22,36 +22,23 @@
|
|||
|
||||
<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 label="账户余额">
|
||||
<template #default="scope">￥{{ scope.row.money }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="头像(查看大图)" align="center">
|
||||
<template #default="scope">
|
||||
<el-image class="table-td-thumb" :src="scope.row.thumb" :preview-src-list="[scope.row.thumb]">
|
||||
</el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址"></el-table-column>
|
||||
<el-table-column label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag :type="
|
||||
scope.row.state === '成功'
|
||||
? 'success'
|
||||
: scope.row.state === '失败'
|
||||
? 'danger'
|
||||
: ''
|
||||
">{{ scope.row.state }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="date" label="注册时间"></el-table-column>
|
||||
<el-table-column prop="company" label="公司名"></el-table-column>
|
||||
<el-table-column prop="source_name" label="来源"></el-table-column>
|
||||
<el-table-column prop="name" label="联系人姓名"></el-table-column>
|
||||
<el-table-column prop="telephone" label="联系人电话"></el-table-column>
|
||||
<el-table-column prop="wechat" label="微信"></el-table-column>
|
||||
<el-table-column prop="create_time" label="添加时间"></el-table-column>
|
||||
<el-table-column prop="user_name" label="添加人"></el-table-column>
|
||||
<el-table-column label="操作" width="180" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
|
||||
<el-button type="text" @click="handleEdit(scope.$index, scope.row)">
|
||||
<el-icon><edit-pen /></el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button type="text" class="red" @click="handleDelete(scope.$index, scope.row)">
|
||||
<el-icon><delete /></el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
<el-button type="text" icon="el-icon-delete" class="red"
|
||||
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -62,13 +49,29 @@
|
|||
</div>
|
||||
|
||||
<!-- 编辑弹出框 -->
|
||||
<el-dialog title="编辑" v-model="editVisible" width="30%">
|
||||
<el-form label-width="70px">
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
<el-dialog title="编辑" v-model="editVisible" width="40%">
|
||||
<el-form :model="editForm" ref="tableEditData" :rules="rules" label-width="120px">
|
||||
<el-form-item label="公司名/客户名" prop="company">
|
||||
<el-input v-model="editForm.company"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址">
|
||||
<el-input v-model="form.address"></el-input>
|
||||
<el-form-item label="来源" prop="source_id">
|
||||
<el-select v-model="editForm.source_id" class="m-2" placeholder="来源" size="small" name="source_id">
|
||||
<el-option
|
||||
v-for="item in sourceListData"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人姓名" prop="name">
|
||||
<el-input v-model="editForm.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人电话" prop="telephone">
|
||||
<el-input v-model="editForm.telephone"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="微信">
|
||||
<el-input v-model="editForm.wechat"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
|
|
@ -78,13 +81,50 @@
|
|||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 添加弹出框 -->
|
||||
<el-dialog title="新增" v-model="addVisible" width="40%">
|
||||
<el-form :model="addForm" ref="tableAddData" label-width="120px" :rules="rules">
|
||||
<el-form-item label="公司名/客户名" prop="company">
|
||||
<el-input v-model="addForm.company"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="来源" prop="source_id">
|
||||
<el-select v-model="addForm.source_id" class="m-2" placeholder="来源" size="small" name="source_id">
|
||||
<el-option
|
||||
v-for="item in sourceListData"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人姓名" prop="name">
|
||||
<el-input v-model="addForm.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人电话" prop="telephone">
|
||||
<el-input v-model="addForm.telephone"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="微信">
|
||||
<el-input v-model="addForm.wechat"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="addVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveAdd">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { customerData } from "../api/customer";
|
||||
import { customerData, customerAdd, customerEdit } from "../api/customer";
|
||||
// import { customerAdd } from "../api/customerAdd";
|
||||
// import { customerEdit } from '../api/customerEdit';
|
||||
import { sourceData } from '../api/source';
|
||||
|
||||
export default {
|
||||
name: "basetable",
|
||||
|
|
@ -96,13 +136,17 @@ export default {
|
|||
pageSize: 10,
|
||||
});
|
||||
const tableData = ref([]);
|
||||
const sourceListData = ref([]);
|
||||
const pageTotal = ref(0);
|
||||
// 获取表格数据
|
||||
const getData = () => {
|
||||
customerData(query).then((res) => {
|
||||
console.log(res);
|
||||
//tableData.value = res.data;
|
||||
//pageTotal.value = res.pageTotal || 0;
|
||||
tableData.value = res.data.data;
|
||||
pageTotal.value = res.data.pageTotal || 0;
|
||||
});
|
||||
sourceData({}).then((res) => {
|
||||
console.log(res.data.data)
|
||||
sourceListData.value = res.data.data;
|
||||
});
|
||||
};
|
||||
getData();
|
||||
|
|
@ -130,40 +174,108 @@ export default {
|
|||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
const user = JSON.parse(localStorage.getItem('user'));
|
||||
// 表格编辑时弹窗和保存
|
||||
const editVisible = ref(false);
|
||||
let form = reactive({
|
||||
name: "",
|
||||
address: "",
|
||||
const tableEditData = ref(null);
|
||||
const editForm = reactive({
|
||||
company:'',
|
||||
source_id: 0,
|
||||
name:'',
|
||||
telephone:'',
|
||||
wechat:'',
|
||||
userid:user.id,
|
||||
id:0
|
||||
});
|
||||
let idx = -1;
|
||||
const handleEdit = (index, row) => {
|
||||
idx = index;
|
||||
Object.keys(form).forEach((item) => {
|
||||
form[item] = row[item];
|
||||
Object.keys(editForm).forEach((item) => {
|
||||
editForm[item] = row[item];
|
||||
});
|
||||
editVisible.value = true;
|
||||
};
|
||||
const saveEdit = () => {
|
||||
editVisible.value = false;
|
||||
ElMessage.success(`修改第 ${idx + 1} 行成功`);
|
||||
Object.keys(form).forEach((item) => {
|
||||
tableData.value[idx][item] = form[item];
|
||||
tableEditData.value.validate((valid) => {
|
||||
if(!valid){
|
||||
ElMessage.error('验证失败');
|
||||
return false;
|
||||
}
|
||||
customerEdit(editForm).then((res) => {
|
||||
if(res.data.code == 0){
|
||||
ElMessage.success(`修改第 ${idx + 1} 行成功`);
|
||||
editVisible.value = false;
|
||||
}else{
|
||||
ElMessage.error(res.data.msg);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
//新增
|
||||
const addVisible = ref(false);
|
||||
const rules = reactive({
|
||||
company: [
|
||||
{ required: true, message: "请输入公司名", trigger: "blur"},
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: "联系人姓名", trigger: "blur" },
|
||||
],
|
||||
telephone:[
|
||||
{ required: true, message: "联系人电话", trigger: "blur" },
|
||||
]
|
||||
});
|
||||
const tableAddData = ref(null);
|
||||
const addForm = reactive({
|
||||
company:'',
|
||||
name:'',
|
||||
source_id: 0,
|
||||
telephone:'',
|
||||
wechat:'',
|
||||
userid:user.id
|
||||
});
|
||||
const handleAdd = () => {
|
||||
addVisible.value = true;
|
||||
};
|
||||
const saveAdd = () => {
|
||||
tableAddData.value.validate((valid) => {
|
||||
if(!valid){
|
||||
ElMessage.error('验证失败');
|
||||
return false;
|
||||
}
|
||||
customerAdd(addForm).then((res) => {
|
||||
if(res.data.code == 0){
|
||||
ElMessage.success("添加成功");
|
||||
addVisible.value = false;
|
||||
}else{
|
||||
ElMessage.error(res.data.msg);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
query,
|
||||
tableData,
|
||||
tableAddData,
|
||||
tableEditData,
|
||||
pageTotal,
|
||||
editVisible,
|
||||
form,
|
||||
addVisible,
|
||||
editForm,
|
||||
addForm,
|
||||
handleSearch,
|
||||
handlePageChange,
|
||||
handleDelete,
|
||||
handleEdit,
|
||||
handleAdd,
|
||||
saveEdit,
|
||||
saveAdd,
|
||||
rules,
|
||||
sourceListData
|
||||
//options
|
||||
};
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -51,4 +51,7 @@ export default {
|
|||
.el-header{
|
||||
--el-header-padding:0
|
||||
}
|
||||
.el-main{
|
||||
--el-main-padding:0
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,230 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item>
|
||||
<i class="el-icon-lx-cascades"></i> 项目列表
|
||||
</el-breadcrumb-item>
|
||||
<el-button size="small" type="primary" @click="handleAdd()">
|
||||
<el-icon size="small"><plus /></el-icon>
|
||||
</el-button>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<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 label="操作" width="180" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="text" @click="handleEdit(scope.$index, scope.row)">
|
||||
<el-icon><edit-pen /></el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button type="text" class="red" @click="handleDelete(scope.$index, scope.row)">
|
||||
<el-icon><delete /></el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 添加弹出框 -->
|
||||
<el-dialog title="新增" v-model="addVisible" width="40%">
|
||||
<el-form :model="addForm" ref="tableAddData" label-width="120px" :rules="rules">
|
||||
<el-form-item label="项目名称" prop="name">
|
||||
<el-input v-model="addForm.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户" prop="customer_id">
|
||||
<el-select v-model="addForm.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="addForm.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="addForm.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="addForm.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="addForm.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="addForm.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="addForm.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="addForm.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="addForm.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="addForm.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="addForm.construction_period" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="项目金额" prop="amount">
|
||||
<el-input-number v-model="addForm.amount" :precision="2" :step="0.1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="已回款金额" prop="received">
|
||||
<el-input-number v-model="addForm.received" :precision="2" :step="0.1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="待回款金额" prop="pending">
|
||||
<el-input-number v-model="addForm.pending" :precision="2" :step="0.1" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="addVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveAdd">确 定</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 { customerData } from '../api/customer';
|
||||
import { userData } from '../api/user';
|
||||
|
||||
export default{
|
||||
setup() {
|
||||
const tableData = ref([]);
|
||||
const customerListData = ref([]);
|
||||
const userListData = ref([]);
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{ required: true, message: "请输入项目名称", trigger: "blur"},
|
||||
],
|
||||
customer_id: [
|
||||
{ required: true, message: "请选择客户", trigger: "blur" },
|
||||
],
|
||||
user_id:[
|
||||
{ required: true, message: "请选负责人", trigger: "blur" },
|
||||
]
|
||||
});
|
||||
|
||||
// 获取初始数据
|
||||
const query = reactive({
|
||||
page: 1
|
||||
});
|
||||
const pageTotal = ref(0);
|
||||
const getData = () => {
|
||||
//项目列表数据
|
||||
projectData(query).then((res) => {
|
||||
tableData.value = res.data.data;
|
||||
pageTotal.value = res.data.pageTotal || 0;
|
||||
});
|
||||
|
||||
//客户列表谁
|
||||
customerData({}).then((res) => {
|
||||
console.log(res.data.data)
|
||||
customerListData.value = res.data.data;
|
||||
});
|
||||
//负责人列表数据
|
||||
userData({}).then((res) => {
|
||||
console.log(res.data.data)
|
||||
userListData.value = res.data.data;
|
||||
});
|
||||
};
|
||||
getData();
|
||||
|
||||
//新增
|
||||
const addVisible = ref(false);
|
||||
const tableAddData = ref(null);
|
||||
const addForm = 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,
|
||||
received:0,
|
||||
pending:0
|
||||
});
|
||||
const handleAdd = () => {
|
||||
addVisible.value = true;
|
||||
};
|
||||
const saveAdd = () => {
|
||||
tableAddData.value.validate((valid) => {
|
||||
if(!valid){
|
||||
ElMessage.error('验证失败');
|
||||
return false;
|
||||
}
|
||||
projectAdd(addForm).then((res) => {
|
||||
if(res.data.code == 0){
|
||||
ElMessage.success("添加成功");
|
||||
addVisible.value = false;
|
||||
}else{
|
||||
ElMessage.error(res.data.msg);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
return {
|
||||
tableData,
|
||||
customerListData,
|
||||
userListData,
|
||||
rules,
|
||||
addVisible,
|
||||
tableAddData,
|
||||
addForm,
|
||||
handleAdd,
|
||||
saveAdd,
|
||||
projectAdd,
|
||||
ElMessage
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item>
|
||||
<i class="el-icon-lx-cascades"></i> 来源列表
|
||||
</el-breadcrumb-item>
|
||||
<el-button size="small" type="primary" @click="handleAdd()">
|
||||
<el-icon size="small"><plus /></el-icon>
|
||||
</el-button>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<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 label="操作" width="180" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="text" @click="handleEdit(scope.$index, scope.row)">
|
||||
<el-icon><edit-pen /></el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button type="text" class="red" @click="handleDelete(scope.$index, scope.row)">
|
||||
<el-icon><delete /></el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- 添加弹出框 -->
|
||||
<el-dialog title="新增" v-model="addVisible" width="40%">
|
||||
<el-form :model="addForm" ref="tableAddData" label-width="120px" :rules="rules">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="addForm.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="addVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveAdd">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 编辑弹出框 -->
|
||||
<el-dialog title="编辑" v-model="editVisible" width="40%">
|
||||
<el-form :model="editForm" ref="tableEditData" :rules="rules" label-width="120px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="editForm.name"></el-input>
|
||||
</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 { sourceAdd } from "../api/sourceAdd";
|
||||
// import { sourceEdit } from '../api/sourceEdit';
|
||||
import { sourceData, sourceAdd, sourceEdit } from '../api/source';
|
||||
|
||||
export default {
|
||||
//name: 'source2',
|
||||
setup() {
|
||||
const listQuery = reactive({
|
||||
name: ''
|
||||
});
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{ required: true, message: "名称", trigger: "blur" },
|
||||
]
|
||||
});
|
||||
|
||||
//获取表格数据
|
||||
const tableData = ref([]);
|
||||
const getData = () => {
|
||||
sourceData(listQuery).then((res) => {
|
||||
//console.log(res);
|
||||
tableData.value = res.data.data;
|
||||
});
|
||||
}
|
||||
getData();
|
||||
|
||||
//新增
|
||||
const addVisible = ref(false);
|
||||
const tableAddData = ref(null);
|
||||
const addForm = reactive({
|
||||
name:''
|
||||
});
|
||||
const handleAdd = () => {
|
||||
addVisible.value = true;
|
||||
};
|
||||
const saveAdd = () => {
|
||||
tableAddData.value.validate((valid) => {
|
||||
if(!valid){
|
||||
ElMessage.error('验证失败');
|
||||
return false;
|
||||
}
|
||||
sourceAdd(addForm).then((res) => {
|
||||
if(res.data.code == 0){
|
||||
ElMessage.success("添加成功");
|
||||
addVisible.value = false;
|
||||
}else{
|
||||
ElMessage.error(res.data.msg);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
//编辑
|
||||
const editVisible = ref(false);
|
||||
const tableEditData = ref(null);
|
||||
const editForm = reactive({
|
||||
name : '',
|
||||
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;
|
||||
}
|
||||
sourceEdit(editForm).then((res) => {
|
||||
if(res.data.code == 0){
|
||||
ElMessage.success(`修改第 ${idx + 1} 行成功`);
|
||||
editVisible.value = false;
|
||||
}else{
|
||||
ElMessage.error(res.data.msg);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
reactive,
|
||||
listQuery,
|
||||
rules,
|
||||
addVisible,
|
||||
tableAddData,
|
||||
addForm,
|
||||
handleAdd,
|
||||
saveAdd,
|
||||
tableData,
|
||||
getData,
|
||||
sourceData,
|
||||
editVisible,
|
||||
tableEditData,
|
||||
editForm,
|
||||
idx,
|
||||
handleEdit,
|
||||
saveEdit,
|
||||
sourceEdit
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue