milo
/
oa-dxtc-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

来源列表及来源编辑

master
milo 2022-04-04 17:05:16 +08:00
parent f08c7251a8
commit 024c116a5a
3 changed files with 123 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

158
src/views/Source.vue
View File

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