⼈⼈框架中使⽤element-ui树形数据表格展⽰两级分类并实现增删改查的⼀个⽰
例
basefishproducttype.vue
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-base__basefishproducttype}">
<el-form :inline="true" :model="dataForm" @native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
</el-form-item>
<el-form-item>
<el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
</el-form-item>
<el-form-item>
<el-button v-if="$hasPermission('base:basefishproducttype:save')" type="primary" @click="addOrUpdateHandle()">{{ '新增⼀级类型' }}</el-button>
</el-form-item>
<el-form-item>
<el-button v-if="$hasPermission('base:basefishproducttype:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading" :data="fishProductTypeListTree" row-key="id" :tree-props="{children: 'childBaseFishProductTypeDTOList'}" border @selection-change="dataListSelectionChangeHandle" > <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<!--<el-table-column prop="id" label="主键" header-align="center" align="center"></el-table-column>-->
<!--<el-table-column prop="delFlg" label="逻辑位 0失效1有效" header-align="center" align="center"></el-table-column>-->
<!--<el-table-column prop="delFlg" label="是否删除" header-align="center" align="center"></el-table-column>-->
<el-table-column prop="name" label="类型名称" header-align="center" align="center"></el-table-column>
<!--<el-table-column prop="pid" label="⽗级类型ID" header-align="center" align="center"></el-table-column>-->
<el-table-column prop="picUrl" label="类型图⽚" header-align="center" align="center">
<template slot-scope="scope">
<img :src="w.picUrl" height="50px">
</template>
</el-table-column>
<!--<el-table-column prop="fishType" label="渔品类型业务类型 0共有类型 1竞拍类型 2商城类型" header-align="center" align="center"></el-table-column>-->
<el-table-column prop="fishType" label="渔品类型业务类型" header-align="center" align="center" :formatter="showFishType"></el-table-column>
<!--<el-table-column prop="createUser" label="创建⼈" header-align="center" align="center"></el-table-column>-->
view ui框架<!--<el-table-column prop="jsonCreateTime" label="创建时间" header-align="center" align="center"></el-table-column>-->
<!--<el-table-column prop="updateUser" label="更新⼈" header-align="center" align="center"></el-table-column>-->
<!--<el-table-column prop="jsonUpdateTime" label="更新时间" header-align="center" align="center"></el-table-column>-->
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope">
<el-button v-if="$hasPermission('base:basefishproducttype:update')" type="text" size="small" @click="w.id)">{{ $t('update') }}</el-button>
<el-button v-if="$hasPermission('base:basefishproducttype:delete')" type="text" size="small" @click="w.id)">{{ $t('delete') }}</el-button>
<el-button v-if="w.pid == ''" @click="w.id)">添加⼦类型</el-button>
</template>
</el-table-column>
</el-table>
<!--<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle">
</el-pagination>-->
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="selectTree"></add-or-update>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './basefishproducttype-add-or-update'
export default {
mixins: [mixinViewModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/base/basefishproducttype/page',
getDataListIsPage: true,
exportURL: '/base/basefishproducttype/export',
deleteURL: '/base/basefishproducttype',
deleteIsBatch: true,
createdIsNeed: true
},
dataForm: {
id: ''
},
fishProductTypeListTree: []
}
},
components: {
AddOrUpdate
},
created () {
if (atedIsNeed) {
this.init()
}
},
methods: {
init () {
this.selectTree()
},
selectTree () {
// 查询所有⽗分类及其⼦分类
this.$('/base/basefishproducttype/selectTree').then(({ data: res }) => {
if (de !== 0) {
return this.$(res.msg)
}
// console.log(res)
this.fishProductTypeListTree = res.data
}).catch(() => {})
},
showFishType (row) {
if (row.fishType === '0') {
return '共有类型'
} else if (row.fishType === '1') {
return '竞拍类型'
} else if (row.fishType === '2') {
return '商城类型'
}
},
// ⽗分类添加⼦分类
addChildHandle (pid) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.dataForm = {}
this.$refs.addOrUpdate.dataForm.pid = pid
this.$refs.addOrUpdate.init()
})
},
// 删除
deleteHandle (id) {
if (this.mixinViewModuleOptions.deleteIsBatch && !id && this.dataListSelections.length <= 0) {
return this.$message({
message: this.$t('prompt.deleteBatch'),
type: 'warning',
duration: 500
})
}
this.$confirm(this.$t('prompt.info', { handle: this.$t('delete') }), this.$t('prompt.title'), {
confirmButtonText: this.$t('confirm'),
cancelButtonText: this.$t('cancel'),
type: 'warning'
}).then(() => {
this.$http.delete(
`${this.mixinViewModuleOptions.deleteURL}${this.mixinViewModuleOptions.deleteIsBatch ? '' : '/' + id}`,
this.mixinViewModuleOptions.deleteIsBatch ? {
data: id ? [id] : this.dataListSelections.map(item => item[this.mixinViewModuleOptions.deleteIsBatchKey])
} : {}
).then(({ data: res }) => {
if (de !== 0) {
return this.$(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
// 删除完成后进⾏查询
this.selectTree()
}
})
}).catch(() => {})
}).catch(() => {})
},
}
}
</script>
basefishproducttype-add-or-update.vue
<template>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"> <!--<el-form-item label="创建⼈" prop="createUser">
<el-input v-model="ateUser" placeholder="创建⼈"></el-input>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-input v-model="ateTime" placeholder="创建时间"></el-input>
</el-form-item>
<el-form-item label="更新⼈" prop="updateUser">
<el-input v-model="dataForm.updateUser" placeholder="更新⼈"></el-input>
</el-form-item>
<el-form-item label="更新时间" prop="updateTime">
<el-input v-model="dataForm.updateTime" placeholder="更新时间"></el-input>
</el-form-item>-->
<!--<el-form-item label="逻辑位 0失效1有效" prop="delFlg">
<el-input v-model="dataForm.delFlg" placeholder="逻辑位 0失效1有效"></el-input>
</el-form-item>-->
<el-form-item label="类型名称" prop="name">
<el-input v-model="dataForm.name" placeholder="类型名称"></el-input>
</el-form-item>
<!--<el-form-item label="⽗级类型ID" prop="pid">
<el-input v-model="dataForm.pid" placeholder="⽗级类型ID"></el-input>
</el-form-item>-->
<!--<el-form-item label="⽗级类型" prop="pid">
<el-select v-model="dataForm.pid" placeholder="⽗级类型">
<el-option
v-for="item in fishProductTypeList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>-->
<!--<el-form-item label="类型图⽚" prop="picUrl">
<el-input v-model="dataForm.picUrl" placeholder="类型图⽚地址"></el-input>
</el-form-item>-->
<el-form-item label="类型图⽚" prop="picUrl">
<el-upload
class="avatar-uploader"
:action="uploadUrl"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<!--<el-form-item label="渔品类型业务类型 0共有类型 1竞拍类型 2商城类型" prop="fishType">
<el-input v-model="dataForm.fishType" placeholder="渔品类型业务类型 0共有类型 1竞拍类型 2商城类型"></el-input>
</el-form-item>-->
<!--<el-form-item label="渔品类型业务类型" prop="fishType">
<el-input v-model="dataForm.fishType" placeholder="渔品类型业务类型"></el-input>
</el-form-item>-->
<el-form-item label="渔品类型业务类型" prop="fishType">
<el-select v-model="dataForm.fishType" placeholder="渔品类型业务类型">
<el-option label="共有类型" value="0"></el-option>
<el-option label="竞拍类型" value="1"></el-option>
<el-option label="商城类型" value="2"></el-option>
</el-select>
<template slot="footer">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
</template>
</el-dialog>
</template>
<script>
import debounce from 'lodash/debounce'
import Cookies from 'js-cookie'
export default {
data () {
return {
visible: false,
dataForm: {
id: '',
createUser: '',
createTime: '',
updateUser: '',
updateTime: '',
delFlg: '',
name: '',
pid: '',
picUrl: '',
fishType: ''
},
fishProductTypeList: [],
fishProductTypeListTree: [],
uploadUrl: '',
imageUrl: ''
}
},
computed: {
dataRule () {
return {
createUser: [
{ required: true, message: this.$t('quired'), trigger: 'blur' }
],
createTime: [
{ required: true, message: this.$t('quired'), trigger: 'blur' }
],
updateUser: [
{ required: true, message: this.$t('quired'), trigger: 'blur' }
],
updateTime: [
{ required: true, message: this.$t('quired'), trigger: 'blur' }
],
delFlg: [
{ required: true, message: this.$t('quired'), trigger: 'blur' }
],
name: [
{ required: true, message: this.$t('quired'), trigger: 'blur' }
],
/
* pid: [
{ required: true, message: this.$t('quired'), trigger: 'blur' }
], */
/* picUrl: [
{ required: true, message: this.$t('quired'), trigger: 'blur' }
], */
fishType: [
{ required: true, message: this.$t('quired'), trigger: 'blur' }
]
}
}
},
methods: {
init () {
// 上传图⽚
this.uploadUrl = `${window.SITE_CONFIG.apiURL}/sys/oss/upload?token=${('token')}` this.visible = true
// 把上传表单中图⽚清空
this.imageUrl = ''
this.$nextTick(() => {
this.$setFields()
if (this.dataForm.id) {
}
})
},
handleAvatarSuccess (res) {
// console.log(res)
this.dataForm.picUrl = res.data.src
this.imageUrl = res.data.src
},
beforeAvatarUpload (file) {
const isJPG = pe === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$('上传头像图⽚只能是 JPG 格式!')
}
if (!isLt2M) {
this.$('上传头像图⽚⼤⼩不能超过 2MB!')
}
return isJPG && isLt2M
},
// 获取信息
getInfo () {
this.$(`/base/basefishproducttype/${this.dataForm.id}`).then(({ data: res }) => {
if (de !== 0) {
return this.$(res.msg)
}
// console.log(res)
// 修改时上传表单中图⽚显⽰!!!
this.imageUrl = res.data.picUrl
this.dataForm = {
...this.dataForm,
...res.data
}
}).catch(() => {})
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs.dataForm.validate((valid) => {
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/base/basefishproducttype/', this.dataForm).then(({ data: res }) => { if (de !== 0) {
return this.$(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
// 新增或修改完成后查询数据刷新页⾯
this.$emit('refreshDataList')
}
})
}).catch(() => {})
})
}, 1000, { leading: true, trailing: false })
}
}
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论