Vue增删改查

Vue增删改查

<template>
  <div id="app">
    <div class="top">
      <el-input v-model="query.name" placeholder="请输入姓名"></el-input>
      <el-input v-model="query.idNo" placeholder="请输入证件号码"></el-input>
    </div>

    <div>
      <el-button type="primary" @click="queryData">查询</el-button>
      <el-button
        type="primary"
        @click="handleDelete"
        :disabled="!selectedUser.id"
        >删除</el-button
      >
      <el-button type="primary" @click="dialogFormVisible = true"
        >增加</el-button
      >
      <el-button type="primary" @click="edit" :disabled="!selectedUser.id"
        >修改</el-button
      >
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      @row-click="rowClick"
      :row-class-name="tableRowClassName"
    >
      >
      <el-table-column prop="id" label="序号" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="idNo" label="证件号码"> </el-table-column>
    </el-table>

    <el-dialog
      title="收货地址"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="证件号码"
          :label-width="formLabelWidth"
          prop="idNo"
        >
          <el-input v-model="form.idNo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelForm">取 消</el-button>
        <el-button type="primary" @click="submitFrom('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/user'

export default {
  name: 'App',
  data() {
    return {
      tableData: [],
      selectedUser: {}, // 删除和修改用
      dialogFormVisible: false,
      query: {
        name: '',
        idNo: ''
      },
      form: {
        name: '',
        idNo: ''
      },
      formLabelWidth: '100px',
      rules: {
        name: [
          { required: true, message: '请填写姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        idNo: [{ required: true, message: '请填写身份证号', trigger: 'change' }]
      }
    }
  },
  methods: {
    async fetchUserInfo() {
      const res = await getUserInfo()

      if (res.status === 200) {
        this.tableData = res.data.data
      }
    },

    submitFrom(formName) {
      this.$refs[formName].validate(isSuccess => {
        if (isSuccess) {
          // 表示所有校验通过，添加用户
          // 接口
          // 判断添加还是修改
          // const request = this.selectedUser.id?editUser:addUser
          // request(this.form).then(res => {
          //   if (res.status === 200) {
          //     this.fetchUserInfo()
          //   }
          // })
          // this.closeDialog()

          // 自己测试
          const { name, idNo, id } = this.form
          if (id) {
            this.tableData = this.tableData.map(item => {
              if (item.id === id) {
                return { ...this.form }
              }
              return item
            })
          } else {
            this.tableData.push({
              id: this.tableData.length + 1,
              name,
              idNo
            })
          }
          this.closeDialog()
        }
      })
    },

    cancelForm() {
      this.closeDialog()
    },

    async handleDelete() {
      // 接口
      // const res = await deleteUser({ id: this.selectedUser.id })
      // if (res.status === 200) {
      //   this.fetchUserInfo()
      // }

      // 自己测试
      this.tableData = this.tableData.filter(
        item => item.id !== this.selectedUser.id
      )
    },

    async edit() {
      this.dialogFormVisible = true
      this.form = this.selectedUser
    },

    closeDialog() {
      this.$refs['form'].resetFields()
      this.dialogFormVisible = false
    },

    rowClick(row) {
      this.selectedUser = this.selectedUser.id === row.id ? {} : { ...row }
    },

    tableRowClassName({ row }) {
      if (row.id === this.selectedUser.id) {
        return 'selected-row'
      }
      return ''
    },

    queryData() {
      //接口
      // queryData(this.query // ).then(res => {
      //   if (res.status === 200) {
      //     this.tableData = res.data.data
      //   }
      // })
      // 待完成
      // const data = this.tableData.reduce((acc, item) => {
      //   const isPass = { ...this.query }
      //   for (const key in this.query) {
      //     if (item[key].includes(this.query[key])) {
      //       console.log(item[key])
      //     }
      //   }
      //   // 校验全部通过
      //   if (!Object.values(isPass).includes(false)) {
      //     return
      //   }
      //   acc.push(item)
      //   return acc
      // }, [])
      // console.log(data)
    }
  },

  mounted() {
    this.fetchUserInfo()
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  .top {
    display: flex;
  }
  .selected-row {
    background: #66b1ff;
    color: #fff;
    &:hover {
      color: #606266;
    }
  }
}

.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background: none;
}
</style>