iview-CRUD模板

页面

index.vue

<template>
  <div class="page">
    <SearchBar />

    <Button class="create-btn" type="primary" @click="$refs['CUModal'].create()" v-if="createPermit">新增</Button>

    <div v-if="listPermit">
      <Table :columns="tableColumns" :data="tableData">
        <template slot-scope="{ row, index }" slot="action">
          <div class="action-btns">
            <Button class="btn" type="primary" size="small" @click="$refs['CUModal'].update(row.id)" v-if="updatePermit">修改</Button>
            <Button class="btn" type="error" size="small" @click="$refs['DModal'].open(row.id)" v-if="deletePermit">删除</Button>
          </div>
        </template>
      </Table>

      <Page
        class="component-page"
        :current="page"
        :total="total"
        @on-change="changePage"
        show-elevator
      />
    </div>

    <CUModal ref="CUModal" />
    <DModal ref="DModal" />
  </div>
</template>

<script>
import { RequestList } from 'xxx'

import SearchBar from './modules/SearchBar'
import CUModal from './modules/CUModal'
import DModal from './modules/DModal'

// 权限管理工具
import { hasOneOf } from '@/libs/tools'

export default {
  components: {
    SearchBar,
    CUModal,
    DModal
  },
  props: {},
  data () {
    return {
      tableColumns: [
        {
          title: 'Name',
          key: 'name'
        },
        {
          title: 'Age',
          key: 'age'
        },
        {
          title: 'Address',
          key: 'address'
        },
        {
          title: 'action',
          slot: 'action'
        }
      ],
      tableData: [ ],
      total: 0,
      page: 1,
      searchKeys: {}
    }
  },
  computed: {
    // 权限管理
    access () {
      return this.$store.state.user.access
    },
    // 查看列表
    listPermit () {
      return true
      // return hasOneOf(['xxx'], this.access)
    },
    // 新增
    createPermit () {
      return true
      // return hasOneOf(['xxx'], this.access)
    },
    // 更新
    updatePermit () {
      return true
      // return hasOneOf(['xxx'], this.access)
    },
    // 删除
    deletePermit () {
      return true
      // return hasOneOf(['xxx'], this.access)
    }
  },
  watch: {},
  created () {
    this.getTableData()
  },
  mounted () {},
  methods: {
    search (searchKeys) {
      this.searchKeys = searchKeys
      this.page = 1
      this.getTableData()
    },

    changePage (page) {
      this.page = page
      this.getTableData()
    },

    getTableData () {
      if (!this.listPermit) {
        return
      }
      let params = {
        page: this.page,
        size: 10,
        ...this.searchKeys
      }
      RequestList(params).then(({ data }) => {
        let res = data
        console.log(res)
        if (res.code !== 0) {
          this.$Message.error(res.msg)
          return
        }
        this.total = res.data.total
        this.tableData = res.data.list
      })
    }
  }
}
</script>
<style lang="less" scoped>
.page {
  .create-btn {
    margin-bottom: 10px;
  }
  .action-btns {
    .btn {
      margin-right: 5px;
    }
  }
  .component-page {
    text-align: center;
    margin: 10px 0;
  }
}
</style>

搜索栏

./modules/SearchBar.vue

<template>
  <Row class="search-bar">
    <Col span="8" class="item">
      <div class="item-label">搜索项1:</div>
      <Input class="item-input" v-model="formData.value1" clearable />
    </Col>

    <Col span="8" class="item">
      <div class="item-label">搜索项2:</div>
      <Select class="item-input" v-model="formData.value2" clearable>
        <Option value="1">Option1</Option>
        <Option value="2">Option2</Option>
        <Option value="3">Option3</Option>
      </Select>
    </Col>

    <Col span="8" class="item">
      <div class="item-label">搜索项3:</div>
      <Input class="item-input" v-model="formData.value3" clearable />
    </Col>

    <Col span="8" class="item">
      <div class="item-label">搜索项4:</div>
      <Input class="item-input" v-model="formData.value4" clearable />
    </Col>

    <Col span="8" class="item btns">
      <Button class="btn" type="primary" @click="search">搜索</Button>
      <Button class="btn" @click="reset">重置</Button>
    </Col>
  </Row>
</template>

<script>
export default {
  components: {},
  props: {},
  data () {
    return {
      formData: {
        value1: '',
        value2: '',
        value3: '',
        value4: ''
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    reset () {
      this.formData = JSON.parse(JSON.stringify(this.$options.data().formData))
      this.$parent.search({})
    },
    search () {
      let searchKeys = JSON.parse(JSON.stringify(this.formData))
      this.$parent.search(searchKeys)
    }
  }
}
</script>
<style lang="less" scoped>
.search-bar {
  .item {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    .item-label {
      width: 20%;
    }
    .item-input {
      width: 60%;
    }
  }
  .btns {
    .btn {
      margin-right: 10px;
    }
  }
}
</style>

新增/更新

./modules/CUModal.vue

<template>
  <Modal
    class="CU-modal"
    v-model="show"
    title="Common Modal dialog box title"
    :loading="loading"
    @on-ok="ok"
    @on-cancel="close"
  >
    <Form ref="form" :model="formData" :rules="ruleValidate" :label-width="80">
      <FormItem label="Name" prop="name">
        <Input v-model="formData.name" placeholder="Enter your name"></Input>
      </FormItem>
      <FormItem label="E-mail" prop="mail">
        <Input v-model="formData.mail" placeholder="Enter your e-mail"></Input>
      </FormItem>
      <FormItem label="City" prop="city">
        <Select v-model="formData.city" placeholder="Select your city">
          <Option value="beijing">New York</Option>
          <Option value="shanghai">London</Option>
          <Option value="shenzhen">Sydney</Option>
        </Select>
      </FormItem>
      <FormItem label="Date">
        <Row>
          <Col span="11">
            <FormItem prop="date">
              <DatePicker type="date" placeholder="Select date" v-model="formData.date"></DatePicker>
            </FormItem>
          </Col>
          <Col span="2" style="text-align: center">-</Col>
          <Col span="11">
            <FormItem prop="time">
              <TimePicker type="time" placeholder="Select time" v-model="formData.time"></TimePicker>
            </FormItem>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="Gender" prop="gender">
        <RadioGroup v-model="formData.gender">
          <Radio label="male">Male</Radio>
          <Radio label="female">Female</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="Hobby" prop="interest">
        <CheckboxGroup v-model="formData.interest">
          <Checkbox label="Eat"></Checkbox>
          <Checkbox label="Sleep"></Checkbox>
          <Checkbox label="Run"></Checkbox>
          <Checkbox label="Movie"></Checkbox>
        </CheckboxGroup>
      </FormItem>
      <FormItem label="Desc" prop="desc">
        <Input
          v-model="formData.desc"
          type="textarea"
          :autosize="{minRows: 2,maxRows: 5}"
          placeholder="Enter something..."
        ></Input>
      </FormItem>
    </Form>
  </Modal>
</template>

<script>
import {
  RequestInsert,
  RequestUpdate,
  RequestDetail
} from 'xxx'

var fromdata = {
  name: '',
  mail: '',
  city: '',
  gender: '',
  interest: [],
  date: '',
  time: '',
  desc: ''
}
export default {
  components: {},
  props: {},
  data () {
    return {
      type: 'C',
      show: false,
      loading: true,

      formData: JSON.parse(JSON.stringify(formdata)),
      ruleValidate: {
        name: [
          {
            required: true,
            message: 'The name cannot be empty',
            trigger: 'blur'
          }
        ],
        mail: [
          {
            required: true,
            message: 'Mailbox cannot be empty',
            trigger: 'blur'
          },
          { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
        ],
        city: [
          {
            required: true,
            message: 'Please select the city',
            trigger: 'change'
          }
        ],
        gender: [
          {
            required: true,
            message: 'Please select gender',
            trigger: 'change'
          }
        ],
        interest: [
          {
            required: true,
            type: 'array',
            min: 1,
            message: 'Choose at least one hobby',
            trigger: 'change'
          },
          {
            type: 'array',
            max: 2,
            message: 'Choose two hobbies at best',
            trigger: 'change'
          }
        ],
        date: [
          {
            required: true,
            type: 'date',
            message: 'Please select the date',
            trigger: 'change'
          }
        ],
        time: [
          {
            required: true,
            type: 'string',
            message: 'Please select time',
            trigger: 'change'
          }
        ],
        desc: [
          {
            required: true,
            message: 'Please enter a personal introduction',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 20,
            message: 'Introduce no less than 20 words',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    create () {
      this.type = 'C'
      this.show = true
    },
    update (id) {
      this.type = 'U'
      RequestDetail({ id }).then((res) => {
        if (res.code !== 0) {
          this.$Message.error(res.msg)
          return
        }
        for (const key in this.formData) {
          this.formData[key] = res.data[key]
        }
        this.formData['id'] = id
        this.show = true
      })
    },
    close () {
      this.show = false
      this.formData = JSON.parse(JSON.stringify(formdata))
      this.$nextTick(() => {
        this.$refs['form'].resetFields()
      })
    },
    ok () {
      this.loading = false
      setTimeout(() => {
        this.loading = true
      }, 0)

      // 表单验证
      console.log(this.formData)
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.type === 'C') {
            this.createSubmit()
          }
          if (this.type === 'U') {
            this.updateSubmit()
          }
        } else {
          this.$Message.error('请补充表单')
        }
      })
    },
    createSubmit () {
      RequestInsert(this.formData).then((res) => {
        if (res.code !== 0) {
          this.$Message.error(res.msg)
          return
        }
        this.close()
        this.$Message.success('Success')
        this.$parent.getTableData()
      })
    },
    updateSubmit () {
      RequestUpdate(this.formData).then((res) => {
        if (res.code !== 0) {
          this.$Message.error(res.msg)
          return
        }
        this.close()
        this.$Message.success('Success')
        this.$parent.getTableData()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.CU-modal {
}
</style>

删除

./modules/DModal.vue

<template>
  <div class="d-modal"></div>
</template>

<script>
import { RequestDelete } from 'xxx'
export default {
  components: {},
  props: {},
  data () {
    return {
      id: ''
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    open (id) {
      this.$Modal.confirm({
        title: '删除',
        content: '<p>是否确认删除?</p>',
        onOk: () => {
          this.id = id
          this.deltelSubmit()
        },
        onCancel: () => {}
      })
    },
    deltelSubmit () {
      let params = {
        id: this.id
      }
      RequestDelete(params).then((res) => {
        if (res.code !== 0) {
          this.$Message.error(res.msg)
          return
        }
        this.$Message.success('Success')
        this.$parent.getTableData()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.d-modal {
}
</style>