关于前端:使用Vueantdvue实现一个字典模块

简介

  对于 vue 初学者，这个有肯定水平上的帮忙，逻辑比较简单，所以没什么正文，新增和编辑用的是页面路由跳转，this.$router.push，有问题能够私信我，共同进步。

开始吧

<template>
<a-card>

<div :class="advanced ?'search': null">
  <a-form-model layout="horizontal" :model="form" ref="ruleForm">
    <div :class="advanced ? null :'fold'">
      <a-row>
        <a-col :md="8" :sm="24">
          <a-form-model-item
            label="字典编号"
            v-model="form.id"
            :labelCol="{span: 5}"
            :wrapperCol="{span: 18, offset: 1}"
            prop="id"
          >
            <a-input placeholder="请输出" v-model="form.id" />
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-model-item
            label="字典名称"
            v-model="form.dictName"
            :labelCol="{span: 5}"
            :wrapperCol="{span: 18, offset: 1}"
            prop="dictName"
          >
            <a-input placeholder="请输出" v-model="form.dictName" />
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-model-item
            label="字典类型"
            :labelCol="{span: 5}"
            :wrapperCol="{span: 18, offset: 1}"
            prop="dictType"
          >
            <a-input
              style="width: 100%"
              placeholder="请输出"
              v-model="form.dictType"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-if="advanced">
        <a-col :md="8" :sm="24">
          <a-form-model-item
            label="创立工夫"
            :labelCol="{span: 5}"
            :wrapperCol="{span: 18, offset: 1}"
            prop="createTime"
          >
            <a-range-picker v-model="form.createTime" style="width:100%">
            </a-range-picker>
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-model-item
            label="字典状态"
            :labelCol="{span: 5}"
            :wrapperCol="{span: 18, offset: 1}"
            prop="status"
          >
            <a-select v-model="form.status" placeholder="请抉择">
              <a-select-option value="1">
                失常
              </a-select-option>
              <a-select-option value="0">
                停用
              </a-select-option>
            </a-select> 
          </a-form-model-item>
        </a-col>
      </a-row>
    </div>
    <span style="float: right; margin-top: 3px;">
      <a-button type="primary" @click="query()"> 查问 </a-button>
      <a-button
        style="margin-left: 8px"
        @click="reset"
        class="btn btn-default"
        type="default"
        > 重置 </a-button
      >
    </span>
  </a-form-model>
</div>
<div>
  <a-space class="operator">
    <a-button @click="addNew" type="primary"> 新建 </a-button>
  </a-space>
  <standard-table
    :pagination="{total: totalCount, pageSize: 20,}"
    :columns="columns"
    :dataSource="dataSource"
    :rowKey="(record) => record.id"
    @change="pageNumberChange"
  >
    <div slot="action" slot-scope="{record}">
      <a style="margin-right: 8px" @click="register(record.id)">
        <a-icon type="edit" /> 编辑
      </a>
      <a @click="deleteRecord(record.id)"> <a-icon type="delete" /> 删除 </a>
    </div>
    <template slot="statusTitle" slot-scope="{text}">
      {{text | changestatus}}
    </template>
  </standard-table>
</div>

</a-card>
</template>
<script>
import StandardTable from ‘@/components/table/StandardTable’
import axios from ‘axios’
import moment from ‘moment’
const columns = [
{

title: '字典编号',
dataIndex: 'id',
key: 'id',

},
{

title: '字典名称',
dataIndex: 'dictName',
scopedSlots: {customRender: 'dictName'},
key: 'dictName',

},
{

title: '字典类型',
dataIndex: 'dictType',
key: 'dictType',

},
{

title: '状态',
dataIndex: 'status',
needTotal: true,
scopedSlots: {customRender: 'statusTitle'},
key: 'status',

},
{

title: '创立工夫',
dataIndex: 'createTime',
key: 'createTime',
// defaultSortOrder: 'descend',
sorter: (a, b) => {return a.createTime> b.createTime? 1 : -1},

},
{

title: '备注',
dataIndex: 'remark',
key: 'remark',

},
{

title: '操作',
scopedSlots: {customRender: 'action'},

},
]
export default {
name: ‘QueryList’,
components: {StandardTable},
filters: {

changestatus(status){if(status == '1'){status = '失常'} else {status = '停用'}
  return status
}

},
mounted() {

this.init()

},
data() {

return {form: {},
  advanced: true,
  columns: columns,
  dataSource: [],
  expandedRowKeys: [],
  totalCount: 0, // 总数居
  dafaultcurrent: 1, // 当前页
  pages: '',
  pageSize: 20,
}

},
methods: {

pageNumberChange(page) {this.getPageList({page: page.current, size: page.pageSize})
},
getPageList(params){
  let that = this
  axios
    .get('/api/admin/dict_type/list/page', {params:params,})
    .then(function(response) {
      that.dataSource = response.data.data.list
      that.totalCount = response.data.data.totalCount
    })
    .catch(function(error) {console.log(error)
    })
},
init() {this.getPageList()
},
query() {let searchlist = { ...this.form}
  if (searchlist.createTime && searchlist.createTime.length > 0) {let createTime1 = moment(searchlist.createTime[0]).valueOf()
    let createTime2 = moment(searchlist.createTime[1]).valueOf()
    searchlist.createTime = [createTime1,createTime2].join(',')
  }
  this.getPageList(searchlist)
},
reset() {this.$refs.ruleForm.resetFields()
  this.init()},
register(id) {
  this.$router.push({
    name: '新增数据',
    query: {id: id,},
  })
},
deleteRecord(id) {let ids = [id].join(',')
  let that = this
  that.$confirm({
    title: '提醒: 确定要删除该数据嘛',
    content: '删除后不可复原 aaa',
    okText: '确定',
    okType: 'danger',
    cancelText: '勾销',
    onOk() {
      axios
        .delete('/api/admin/dict_type/delete', { params: { ids} })
        .then(function() {that.init()
        })
        .catch(function(error) {console.log(error)
        })
    },
    onCancel() {// 敞开提醒},
  })
},
addNew() {this.$router.push('/add')
},

},
}
</script>

完结

就是很简略，在这做一个记录吧，从零开始学做出第一个 vue 我的项目，还有有点成就感的，小白一个，不要喷