iView(1) 增删改查 案例

IT教程 11个月前 https://55wd.com
1,513

iview

今天分享一波基于vue的一套关于iView的增删改查demo源码

温馨小提示

iView官网文档:https://www.iviewui.com/docs/guide/install

Vue Router : https://router.vuejs.org/zh/

iview-admin后台管理系统框架源码下载:https://github.com/iview/iview-admin

项目在线访问地址:https://admin.iviewui.com/login

先看效果吧:

数据库字段:

iView(1) 增删改查 案例

前端页面:

iView(1) 增删改查 案例

添加form表单:

iView(1) 增删改查 案例

编辑form表单:

iView(1) 增删改查 案例

详情:

iView(1) 增删改查 案例

其中编辑和详情页都已做了form表单的回显数据

下面是demo源码:

demo.vue

<template>
  <p class="demo">
    <p slot="zhengqing">
     <!-- <Select v-model="zqListQuery.username" placeholder="全部" clearable style="width:200px">
        <Option v-for="item in userNameList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>-->
      <Input v-model="zqListQuery.username" placeholder="用户名" style="width: 200px" />
      <Input v-model="zqListQuery.password" placeholder="密码" style="width: 200px" />
      <Button type="primary" @click="getListPage">查询</Button>
      <Button type="primary" @click="handleCreate">添加</Button>
    </p>
    <Table :columns="columns" size="small" style="margin-top:10px" :loading="listLoading" :data="list" disabled-hover>
      <template slot-scope="{row}" slot="action">
        <text-Button @click="handleDetail(row)">详情</text-Button>
        <Divider type="vertical" />
        <text-Button @click="handleUpdate(row)">编辑</text-Button>
        <Divider type="vertical" />
        <text-Button @click="handleDelete(row)">删除</text-Button>
      </template>
    </Table>
    <!-- 分页 -->
    <cus-page @pageChange="handleCurrentChange" @pageSizeChange="handleSizeChange" :pageSize="zqListQuery.pageSize" :total="total"></cus-page>

    <!--  添加和编辑弹出抽屉  +++++++++++++++++++++++++++++++++++++++++++++++++++++     -->
    <!--  :title 加:为绑定数据 即实现自定义标题  -->
    <Drawer :title="titleValue[dialogStatus]" v-model="drawer" width="30%" :mask-closable="true" :styles="drawerStyles">
      <Form ref="zq_formData" :model="zq_formData" label-position="right" :label-width="120" :rules="ruleFormData">
        <Row>
          <Col span="24">
            <!-- TODO prop:校验  与v-model对应 外加上面的:rules和下面的2个方法配置使用 即可 -->
            <FormItem label="用户名:" prop="username" label-position="top">
<!--          <Select v-model="zq_formData.username" placeholder="遍历" clearable>
                <Option v-for="item in userNameList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>-->
<!--          <DatePicker v-model="zq_formData.dateTime" type="datetime" placeholder="日期"></DatePicker>-->
              <Input v-model="zq_formData.username" placeholder="请输入用户名" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <FormItem label="密码:" prop="password" label-position="top">
              <Input v-model="zq_formData.password" placeholder="请输入密码" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <p class="demo-drawer-footer">
        <Button type="primary" @click="ok">保存</Button>
        <Button style="margin-right: 8px" @click="drawer = false">关闭</Button>
      </p>
    </Drawer>

    <!--  详情弹出抽屉  +++++++++++++++++++++++++++++++++++++++++++++++++++++     -->
    <Drawer ref="zq_zq_formData_detail" :title="titleValue[dialogStatus]" v-model="drawer_detail" width="30%" :mask-closable="true" :styles="drawerStyles">
      <Form :model="zq_zq_formData_detail" label-position="right" :label-width="120">
        <Row>
          <Col span="24">
            <FormItem label="用户名:">
              <Input v-model="zq_zq_formData_detail.username" disabled></Input>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <FormItem label="密码:">
              <Input v-model="zq_zq_formData_detail.password" disabled></Input>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <FormItem label="性别:">
              <Input v-model="zq_zq_formData_detail.sex" disabled></Input>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Drawer>
  </p>
</template>
<script>
  import {
    getDemoListPage,
    getDemoList,
    saveOrUpdateDemo,
    deleteDemo
  } from '@/api/zhengqing/demo' //抽取出去的js  -> 作用:发送请求
  import {forEach} from '../../libs/tools'

  export default {
    name: 'zq-app',
    data () {
      //校验
      const validateUsername = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入用户名!!!'))
        } else {
          callback()
        }
      };
      const validatePassword = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入密码!!!'))
        } else {
          callback()
        }
      };
      return {
        //高级查询需要传到后端的参数
        zqListQuery: {
          page: 1,
          pageSize: 10,
          username: undefined,
          password: undefined,
        },
        list: undefined,//表格数据
        total: undefined,//总数据条数
        drawer: false, // 添加和编辑抽屉弹出页
        drawer_detail: false, // 详情抽屉弹出页
        listLoading: false,//是否加载
        dialogStatus: '',//title自定义标题
        titleValue:{
          create:"新增",
          detail:"详情",
          update:"编辑"
        },//title信息
        zq_formData: {
          username: undefined, // 用户名
          password: undefined, // 密码
          sex: undefined // 性别
        },
        zq_zq_formData_detail: {
          username: undefined, // 用户名
          password: undefined, // 密码
          sex: undefined // 性别
        },
        //表格数据
        columns: [
          {
            title: '用户名',
            key: 'username',
            align: 'center',
            width: 300
          },
          {
            title: '密码',
            key: 'password',
            align: 'center'
          },
          {
            title: '性别',
            key: 'sex',
            align: 'center'
          },
          {
            title: '操作',
            align: 'center',
            slot: 'action'
          }
        ],
        // 抽屉样式
        drawerStyles: {
          height: 'calc(100% - 55px)',
          overflow: 'auto',
          paddingBottom: '53px',
          position: 'static'
        },
        //校验
        ruleFormData: {
          username: [
            {
              required: true,
              validator: validateUsername,
              trigger: 'blur'
            }
          ],
          password: [
            {
              required: true,
              validator: validatePassword,
              trigger: 'blur'
            }
          ]
        }
      }
    },
    created () {
      this.getListPage();//高级查询
      this.getFormatList();//这里可以放一些需要format的请求或者其它
    },
    methods: {
      getFormatList () {
        getDemoList().then(res => {
          this.userNameList = res.data.data;// 对应选择器 value和label
        });
      },
      getListPage () {
        this.listLoading = true;
        getDemoListPage(this.zqListQuery).then(res => {
          var records = res.data.data.records;
          /*if (records.length > 0) {
            for (var i = 0; i < records.length; i++) {
              records[i].dateTime = new Date(records[i].dateTime);// TODO 处理时间格式化滴
              //TODO 处理状态滴
              if (records[i].state == 0){
                records[i].state = "未处理";
              }
            }
          }*/
          this.list = records;
          this.total = res.data.data.total;
          this.listLoading = false
        })
      },
      handleCreate () {
        this.dialogStatus = 'create';//对应标题
        this.getFormatList();
        this.resetFormColumns();//重置
        this.drawer = true;//弹出抽屉修改为显示状态
      },
      handleUpdate (row) {
        this.zq_formData = Object.assign({}, row);//回显数据
        this.dialogStatus = 'update';
        this.getFormatList();
        this.drawer = true;
      },
      handleDetail (row) {
        this.zq_zq_formData_detail = Object.assign({}, row);
        this.dialogStatus = 'detail';
        this.drawer_detail = true
      },
      handleDelete (row) {
        deleteDemo({ id: row.id })
          .then(response => {
            if (response.data.status == 1) {
              this.getListPage();
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$message({
                message: response.data.message,
                type: 'error'
              })
            }
          })
          .catch(err => {
            this.fetchSuccess = false;
            console.log(err);
          })
      },
      ok () {
        this.$refs.zq_formData.validate(valid => {
          if (valid) {
            saveOrUpdateDemo(this.zq_formData)
              .then(response => {
                if (response.data.status == 1) {
                  this.getListPage();
                  this.$Notice.success({
                    title: '成功',
                    desc: '保存成功',
                    duration: 2
                  });
                  this.drawer = false;
                } else {
                  this.$message({
                    message: response.data.message,
                    type: 'error'
                  })
                }
              })
              .catch(err => {
                this.fetchSuccess = false;
                console.log(err);
              })
          }
        })
      },
      cancel () {
        this.drawer = false;
      },
      handleSizeChange (val) {
        this.zqListQuery.pageSize = val;
        this.getListPage();
        this.getFormatList();
      },
      handleCurrentChange (val) {
        this.zqListQuery.page = val;
        this.getListPage();
        this.getFormatList();
      },
      resetFormColumns () {
        this.zq_formData = {
          username: undefined, // 用户名
          password: undefined, // 密码
          sex: undefined // 性别
        }
      }
    }
  }
</script>
<!-- 样式 -->
<style lang="less" scoped>
  .demo {
    .demo-title {
      height: 70px;
      line-height: 70px;
      background: #2b3b65;
      padding-left: 20px;
      font-size: 24px;
      color: #fff;
    }
  }
  .demo-drawer-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: center;
    background: #fff;
  }
</style>

demo.js

import axios from '@/libs/api.request'

export const getDemoListPage = (query) => {
  return axios.request({
    url: '/api/zhengqing/demo/listPage',
    data: query,
    method: 'post'
  })
};

export const getDemoList = (query) => {
  return axios.request({
    url: '/api/zhengqing/demo/list',
    data: query,
    method: 'post'
  })
};

export const getUserNameList = (query) => {
  return axios.request({
    url: '/api/zhengqing/demo/list',
    data: query,
    method: 'post'
  })
};

export const saveOrUpdateDemo = (form) => {
  return axios.request({
    url: '/api/zhengqing/demo/save',
    data: form,
    method: 'post'
  })
};

export const deleteDemo = (id) => {
  return axios.request({
    url: '/api/zhengqing/demo/delete',
    data: id,
    method: 'post'
  })
};

至于后端代码就不放了,根据各自的需求返回合适的数据data就好了 ~

C语言学生管理系统增删改查

基于C语言和txt文件的增删改查 转载请注明出处 1、背景 本系统基于学生信息管理,完成了学生的信息的读取、增加、删除、修改

Android之SQLite实现简单的增删改查

SQLite是一款轻型的数据库,是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品中使用了它,它占

asp+access实现增删改查

最近了解了下asp,踩了不少坑,就想着记录下,方便以后查看。谁说编程语言大部分一样的,其实还是有区别的。作为小白的我就遇到很多语法

Android--SQLite数据库实现增删改查

SQLite–轻量级数据库 一般常见于安卓客户端。用于存储一些重要数据,因其操作容易、使用简单的好处博得一大批迷妹。今天就来说一

文章回顾

大家看了本文iView(1) 增删改查 案例的精彩教程资源内容,是不是对iView(1) 增删改查 案例了解更多,真心希望iView(1) 增删改查 案例能帮助到你, 小编会一直给你带来更多教程资源文章信息。

版权声明:46b22e67a5679fa4 发表于 2020-02-20 22:42:02。

本文由第三方用户分享仅代表作者观点,不代表本网站立场,秉承互联网开放分享的精神,目的在于传递更多信息,加强各行业互通交流,但对内容不作任何保证或承诺,请读者自行参考斟酌。网站发布的信息(包含但不限于版式、图片、字体、文章等素材)由第三方用户分享,版权归原作者所有,本站不承担任何相关的版权纠纷等相关责任。如您认为本篇内容侵犯了您的权益,请与我们联系,我们会及时处理。

豌豆资源网专注分享全网综合资源网站大全,致力于超实用的内容资源搜索。

转载请注明:
本文标题:iView(1) 增删改查 案例
本文地址:https://55wd.com/s43915/

你可能感兴趣

随便逛逛