efunbox_resources-web/src/pages/nav1/Nav1.vue

<template>
  <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>