Compare commits

...

7 Commits

Author SHA1 Message Date
milo 565eefe8e5 产品列表数据展示 2022-04-10 22:03:40 +08:00
milo 2fcae8c82f 新增项目添加 2022-04-10 21:38:54 +08:00
milo 21e4683f41 新增客户来源 2022-04-04 20:24:11 +08:00
milo 024c116a5a 来源列表及来源编辑 2022-04-04 17:05:16 +08:00
milo f08c7251a8 增加来源添加 2022-04-04 15:22:27 +08:00
milo c6fae04a5b 客户新增和编辑 2022-04-02 15:25:25 +08:00
milo 137a003eb0 标签及样式调整 2022-04-02 15:25:09 +08:00
11 changed files with 629 additions and 56 deletions

View File

@ -2,3 +2,7 @@ import axios from 'axios'
import qs from 'qs' import qs from 'qs'
export const customerData = query => axios.post('http://oa-dxtc.test/customer', qs.stringify(query)); 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));

6
src/api/project.ts Normal file
View File

@ -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));

8
src/api/source.ts Normal file
View File

@ -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));

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

@ -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));

View File

@ -51,6 +51,11 @@ export default {
index: "/customer", index: "/customer",
title: "客户", title: "客户",
}, },
{
icon: "list",
index: "/project",
title: "项目",
},
{ {
icon: "document-copy", icon: "document-copy",
index: "/tabs", index: "/tabs",
@ -101,6 +106,17 @@ export default {
}, },
], ],
}, },
{
icon:'setting',
index: '8',
title: '设置',
subs: [
{
index: '/source',
title: '来源设置'
}
]
}
]; ];
const route = useRoute(); const route = useRoute();

View File

@ -4,15 +4,15 @@
<li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index"> <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> <router-link :to="item.path" class="tags-li-title">{{item.title}}</router-link>
<span class="tags-li-icon" @click="closeTags(index)"> <span class="tags-li-icon" @click="closeTags(index)">
<i class="el-icon-close"></i> <el-icon class="el-icon-close"><close /></el-icon>
</span> </span>
</li> </li>
</ul> </ul>
<div class="tags-close-box"> <div class="tags-close-box">
<el-dropdown @command="handleTags"> <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> </el-button>
<template #dropdown> <template #dropdown>
<el-dropdown-menu size="small"> <el-dropdown-menu size="small">
@ -25,7 +25,7 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { computed } from "vue"; import { computed } from "vue";
import { useStore } from "vuex"; import { useStore } from "vuex";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router"; import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";

View File

@ -22,12 +22,28 @@ const routes = [
}, },
{ {
path: "/customer", path: "/customer",
name: "basetable", name: "customer",
meta: { meta: {
title: '客户' title: '客户'
}, },
component: () => import ( /* webpackChunkName: "table" */ "../views/Customer.vue") 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", // path: "/charts",
// name: "basecharts", // name: "basecharts",

View File

@ -5,8 +5,8 @@
<el-breadcrumb-item> <el-breadcrumb-item>
<i class="el-icon-lx-cascades"></i> 客户列表 <i class="el-icon-lx-cascades"></i> 客户列表
</el-breadcrumb-item> </el-breadcrumb-item>
<el-button type="primary"> <el-button size="small" type="primary" @click="handleAdd()">
<el-icon :size="20"><plus /></el-icon> <el-icon size="small"><plus /></el-icon>
</el-button> </el-button>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
@ -22,36 +22,23 @@
<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"> <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="id" label="ID" width="55" align="center"></el-table-column>
<el-table-column prop="name" label="用户名"></el-table-column> <el-table-column prop="company" label="公司名"></el-table-column>
<el-table-column label="账户余额"> <el-table-column prop="source_name" label="来源"></el-table-column>
<template #default="scope">{{ scope.row.money }}</template> <el-table-column prop="name" label="联系人姓名"></el-table-column>
</el-table-column> <el-table-column prop="telephone" label="联系人电话"></el-table-column>
<el-table-column label="头像(查看大图)" align="center"> <el-table-column prop="wechat" label="微信"></el-table-column>
<template #default="scope"> <el-table-column prop="create_time" label="添加时间"></el-table-column>
<el-image class="table-td-thumb" :src="scope.row.thumb" :preview-src-list="[scope.row.thumb]"> <el-table-column prop="user_name" label="添加人"></el-table-column>
</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 label="操作" width="180" align="center"> <el-table-column label="操作" width="180" align="center">
<template #default="scope"> <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>
<el-button type="text" icon="el-icon-delete" class="red"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -62,13 +49,29 @@
</div> </div>
<!-- 编辑弹出框 --> <!-- 编辑弹出框 -->
<el-dialog title="编辑" v-model="editVisible" width="30%"> <el-dialog title="编辑" v-model="editVisible" width="40%">
<el-form label-width="70px"> <el-form :model="editForm" ref="tableEditData" :rules="rules" label-width="120px">
<el-form-item label="用户名"> <el-form-item label="公司名/客户名" prop="company">
<el-input v-model="form.name"></el-input> <el-input v-model="editForm.company"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="地址"> <el-form-item label="来源" prop="source_id">
<el-input v-model="form.address"></el-input> <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-item>
</el-form> </el-form>
<template #footer> <template #footer>
@ -78,13 +81,50 @@
</span> </span>
</template> </template>
</el-dialog> </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> </div>
</template> </template>
<script> <script>
import { ref, reactive } from "vue"; import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus"; 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 { export default {
name: "basetable", name: "basetable",
@ -96,13 +136,17 @@ export default {
pageSize: 10, pageSize: 10,
}); });
const tableData = ref([]); const tableData = ref([]);
const sourceListData = ref([]);
const pageTotal = ref(0); const pageTotal = ref(0);
// //
const getData = () => { const getData = () => {
customerData(query).then((res) => { customerData(query).then((res) => {
console.log(res); tableData.value = res.data.data;
//tableData.value = res.data; pageTotal.value = res.data.pageTotal || 0;
//pageTotal.value = res.pageTotal || 0; });
sourceData({}).then((res) => {
console.log(res.data.data)
sourceListData.value = res.data.data;
}); });
}; };
getData(); getData();
@ -130,40 +174,108 @@ export default {
}) })
.catch(() => {}); .catch(() => {});
}; };
const user = JSON.parse(localStorage.getItem('user'));
// //
const editVisible = ref(false); const editVisible = ref(false);
let form = reactive({ const tableEditData = ref(null);
name: "", const editForm = reactive({
address: "", company:'',
source_id: 0,
name:'',
telephone:'',
wechat:'',
userid:user.id,
id:0
}); });
let idx = -1; let idx = -1;
const handleEdit = (index, row) => { const handleEdit = (index, row) => {
idx = index; idx = index;
Object.keys(form).forEach((item) => { Object.keys(editForm).forEach((item) => {
form[item] = row[item]; editForm[item] = row[item];
}); });
editVisible.value = true; editVisible.value = true;
}; };
const saveEdit = () => { const saveEdit = () => {
editVisible.value = false; tableEditData.value.validate((valid) => {
ElMessage.success(`修改第 ${idx + 1} 行成功`); if(!valid){
Object.keys(form).forEach((item) => { ElMessage.error('验证失败');
tableData.value[idx][item] = form[item]; 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 { return {
query, query,
tableData, tableData,
tableAddData,
tableEditData,
pageTotal, pageTotal,
editVisible, editVisible,
form, addVisible,
editForm,
addForm,
handleSearch, handleSearch,
handlePageChange, handlePageChange,
handleDelete, handleDelete,
handleEdit, handleEdit,
handleAdd,
saveEdit, saveEdit,
saveAdd,
rules,
sourceListData
//options
}; };
}, },
}; };

View File

@ -51,4 +51,7 @@ export default {
.el-header{ .el-header{
--el-header-padding:0 --el-header-padding:0
} }
.el-main{
--el-main-padding:0
}
</style> </style>

230
src/views/Project.vue Normal file
View File

@ -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>

174
src/views/Source.vue Normal file
View File

@ -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>