产品列表数据展示

src/api/customer.ts

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

src/api/project.ts

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

src/api/source.ts

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

src/api/user.ts

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

src/components/Aside.vue

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

src/components/Tags.vue

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

src/router/index.ts

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

src/views/Customer.vue

@@ -5,8 +5,8 @@
                 <el-breadcrumb-item>
                     <i class="el-icon-lx-cascades"></i> 客户列表
                 </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-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 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">
                     <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-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 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>
             <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.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();
@@ -130,40 +174,108 @@ export default {
                 })
                 .catch(() => {});
         };
-
+        const user = JSON.parse(localStorage.getItem('user'));
         // 表格编辑时弹窗和保存
         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;
         const handleEdit = (index, row) => {
             idx = index;
-            Object.keys(form).forEach((item) => {
+            Object.keys(editForm).forEach((item) => {
-                form[item] = row[item];
+                editForm[item] = row[item];
             });
             editVisible.value = true;
         };
         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 {
             query,
             tableData,
+            tableAddData,
+            tableEditData,
             pageTotal,
             editVisible,
-            form,
+            addVisible,
+            editForm,
+            addForm,
             handleSearch,
             handlePageChange,
             handleDelete,
             handleEdit,
+            handleAdd,
             saveEdit,
+            saveAdd,
+            rules,
+            sourceListData
+            //options
         };
     },
 };

src/views/Home.vue

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

src/views/Project.vue

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

src/views/Source.vue

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