iView(1) 增删改查案例

浅浅的花香味﹌ 2022-01-27 13:35 320阅读 0赞

今天分享一波基于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**

--------------------

### 先看效果吧： ###

数据库字段：  
![在这里插入图片描述][20190527163706557.png]  
前端页面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70]  
添加form表单：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 1]  
编辑form表单：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 2]  
详情：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 3]  
其中编辑和详情页都已做了form表单的回显数据

--------------------

### 下面是demo源码： ###

demo.vue

<template>
      <div class="demo">
        <div slot="zhengqing">
         
          <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>
        </div>
        <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>
    
        
        
        <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">
                
                <FormItem label="用户名：" prop="username" label-position="top">
    
    
                  <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>
          <div class="demo-drawer-footer">
            <Button type="primary" @click="ok">保存</Button>
            <Button style="margin-right: 8px" @click="drawer = false">关闭</Button>
          </div>
        </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>
      </div>
    </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就好了 ~

[iView]: https://iview.github.io/
[20190527163706557.png]: /images/20220127/40120635a13c4a808b0c1c2c3f5f2977.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70]: /images/20220127/7278f7e7cba54c2a87a5c0bf38509f14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 1]: /images/20220127/d47049b03edf42739bc49c59afaebf83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 2]: /images/20220127/4b7992f9935f4b9884c6f4cdce189e71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 3]: /images/20220127/ac278d0175a54679bcd39c4c68ead09f.png