From 024c116a5a8bf14cf89d3a9f7f1bfe15fa4a7a9f Mon Sep 17 00:00:00 2001
From: milo <315045773@qq.com>
Date: Mon, 4 Apr 2022 17:05:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9D=A5=E6=BA=90=E5=88=97=E8=A1=A8=E5=8F=8A?=
 =?UTF-8?q?=E6=9D=A5=E6=BA=90=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/source.ts     |   4 ++
 src/api/sourceEdit.ts |   4 ++
 src/views/Source.vue  | 158 ++++++++++++++++++++++++++++++------------
 3 files changed, 123 insertions(+), 43 deletions(-)
 create mode 100644 src/api/source.ts
 create mode 100644 src/api/sourceEdit.ts

diff --git a/src/api/source.ts b/src/api/source.ts
new file mode 100644
index 0000000..bba9012
--- /dev/null
+++ b/src/api/source.ts
@@ -0,0 +1,4 @@
+import axios from 'axios'
+import qs from 'qs'
+
+export const sourceData = query => axios.post('http://oa-dxtc.test/source/index', qs.stringify(query));
diff --git a/src/api/sourceEdit.ts b/src/api/sourceEdit.ts
new file mode 100644
index 0000000..bc19216
--- /dev/null
+++ b/src/api/sourceEdit.ts
@@ -0,0 +1,4 @@
+import axios from 'axios'
+import qs from 'qs'
+
+export const sourceEdit = query => axios.post('http://oa-dxtc.test/source/edit', qs.stringify(query));
diff --git a/src/views/Source.vue b/src/views/Source.vue
index c7ab4a4..975e187 100644
--- a/src/views/Source.vue
+++ b/src/views/Source.vue
@@ -1,54 +1,73 @@
 <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="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>
-    <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";
+import { sourceEdit } from '../api/sourceEdit';
+import { sourceData } from '../api/source';
 
 export default {
-    name: 'source',
+    //name: 'source2',
     setup() {
         const listQuery = reactive({
             name: ''
@@ -59,6 +78,16 @@ export default {
             ]
         });
 
+        //获取表格数据
+        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);
@@ -86,6 +115,39 @@ export default {
             });
         };
 
+        //编辑
+        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,
@@ -94,7 +156,17 @@ export default {
             tableAddData,
             addForm,
             handleAdd,
-            saveAdd
+            saveAdd,
+            tableData,
+            getData,
+            sourceData,
+            editVisible,
+            tableEditData,
+            editForm,
+            idx,
+            handleEdit,
+            saveEdit,
+            sourceEdit
         }
     }