来源列表及来源编辑

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

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

src/views/Source.vue

@@ -1,4 +1,5 @@
 <template>
+    <div>
         <div class="crumbs">
             <el-breadcrumb separator="/">
                 <el-breadcrumb-item>
@@ -41,14 +42,32 @@
                 </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 } 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
         }
     }