增加来源添加

src/api/sourceAdd.ts

@@ -0,0 +1,4 @@
+import axios from 'axios'
+import qs from 'qs'
+
+export const sourceAdd = query => axios.post('http://oa-dxtc.test/source/add', 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/router/index.ts

@@ -22,12 +22,20 @@ 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: "/charts",
         //         name: "basecharts",

src/views/Source.vue

@@ -0,0 +1,102 @@
+<template>
+    <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>
+</template>
+<script lang="ts">
+import { reactive, ref } from 'vue';
+import { ElMessage } from "element-plus";
+import { sourceAdd } from "../api/sourceAdd";
+
+export default {
+    name: 'source',
+    setup() {
+        const listQuery = reactive({
+            name: ''
+        });
+        const rules = reactive({
+            name: [
+                { required: true, message: "名称", trigger: "blur" },
+            ]
+        });
+
+        //新增
+        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;
+                    }
+                });
+            });
+        };
+
+        return {
+            reactive,
+            listQuery,
+            rules,
+            addVisible,
+            tableAddData,
+            addForm,
+            handleAdd,
+            saveAdd
+        }
+    }
+
+}
+</script>