客户新增和编辑

master
milo 2022-04-02 15:25:25 +08:00
parent 137a003eb0
commit c6fae04a5b
3 changed files with 138 additions and 49 deletions

4
src/api/customerAdd.ts Normal file
View File

@ -0,0 +1,4 @@
import axios from 'axios'
import qs from 'qs'
export const customerAdd = query => axios.post('http://oa-dxtc.test/customer/add', qs.stringify(query));

4
src/api/customerEdit.ts Normal file
View File

@ -0,0 +1,4 @@
import axios from 'axios'
import qs from 'qs'
export const customerEdit = query => axios.post('http://oa-dxtc.test/customer/edit', qs.stringify(query));

View File

@ -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,22 @@
<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="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 +48,19 @@
</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="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,6 +70,30 @@
</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="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>
@ -85,6 +101,8 @@
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { customerData } from "../api/customer";
import { customerAdd } from "../api/customerAdd";
import { customerEdit } from '../api/customerEdit';
export default {
name: "basetable",
@ -100,9 +118,8 @@ export default {
//
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;
});
};
getData();
@ -130,40 +147,104 @@ 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:'',
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:'',
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,
};
},
};