|
@@ -1,6 +1,120 @@
|
|
|
<template>
|
|
|
-<div>
|
|
|
-nav1
|
|
|
-</div>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" @click="addEdit">增加</el-button>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ label="id">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span style="margin-left: 10px">{{ scope.row.id }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="姓名">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span style="margin-left: 10px">{{ scope.row.name }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="danger"
|
|
|
+ @click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-dialog
|
|
|
+ :title="title"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="50%"
|
|
|
+ center>
|
|
|
+ <el-form :model="form" ref="ruleForm">
|
|
|
+ <el-form-item label="姓名" prop="name" :label-width="formLabelWidth" :rules="{required: true, message: '姓名不能为空'}">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="setTable('ruleForm')">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
+<script>
|
|
|
+ import { companyList, setCompanyList, addCompanyList } from '../../api/nav1.js';
|
|
|
+ import { mapGetters } from 'vuex';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [],
|
|
|
+ dialogVisible: false,
|
|
|
+ form: {
|
|
|
+ name: '',
|
|
|
+ status:'DEL'
|
|
|
+ },
|
|
|
+ formLabelWidth: '120px',
|
|
|
+ setIndex: '',
|
|
|
+ title: '',
|
|
|
+ type: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleEdit(index, row) {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.setIndex = index;
|
|
|
+ this.form.id = row.id;
|
|
|
+ this.title = '编辑';
|
|
|
+ this.type = 'set';
|
|
|
+ console.log(index, row);
|
|
|
+ },
|
|
|
+ handleDelete(index, row) {
|
|
|
+ console.log(index, row);
|
|
|
+ },
|
|
|
+ setTable(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ console.log(this.form)
|
|
|
+ const form = this.form;
|
|
|
+ if(this.type == 'add') {
|
|
|
+ addCompanyList(form).then(res => {
|
|
|
+ companyList().then(res => {
|
|
|
+ if(res.code == 200) {
|
|
|
+ this.tableData = res.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }else {
|
|
|
+ const index = this.setIndex;
|
|
|
+ setCompanyList(form).then(res => {
|
|
|
+ this.tableData[index].name = form.name;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.dialogVisible = false;
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addEdit() {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.title = '增加';
|
|
|
+ this.type = 'add';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ companyList().then(res => {
|
|
|
+ if(res.code == 200) {
|
|
|
+ this.tableData = res.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|