简介
对于 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 我的项目,还有有点成就感的,小白一个,不要喷