basefishproducttype.vue
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-base__basefishproducttype}">
<el-form :inline="true" :model="dataForm" @keyup.enter.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" style="width: 100%;">
<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="scope.row.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>-->
<!--<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="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
<el-button v-if="$hasPermission('base:basefishproducttype:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
<el-button v-if="scope.row.pid == ''" @click="addChildHandle(scope.row.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 (this.mixinViewModuleOptions.createdIsNeed) {
this.init()
}
},
methods: {
init () {
this.selectTree()
},
selectTree () {
// 查詢所有父分類及其子分類
this.$http.get('/base/basefishproducttype/selectTree').then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(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 (res.code !== 0) {
return this.$message.error(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" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
<!--<el-form-item label="創建人" prop="createUser">
<el-input v-model="dataForm.createUser" placeholder="創建人"></el-input>
</el-form-item>
<el-form-item label="創建時間" prop="createTime">
<el-input v-model="dataForm.createTime" 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>
</el-form-item>
</el-form>
<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('validate.required'), trigger: 'blur' }
],
createTime: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
updateUser: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
updateTime: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
delFlg: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
/* pid: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
], */
/* picUrl: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
], */
fishType: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
methods: {
init () {
// 上傳圖片
this.uploadUrl = `${window.SITE_CONFIG.apiURL}/sys/oss/upload?token=${Cookies.get('token')}`
this.visible = true
// 把上傳表單中圖片清空
this.imageUrl = ''
this.$nextTick(() => {
this.$refs.dataForm.resetFields()
if (this.dataForm.id) {
this.getInfo()
}
})
},
handleAvatarSuccess (res) {
// console.log(res)
this.dataForm.picUrl = res.data.src
this.imageUrl = res.data.src
},
beforeAvatarUpload (file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('上傳頭像圖片只能是 JPG 格式!')
}
if (!isLt2M) {
this.$message.error('上傳頭像圖片大小不能超過 2MB!')
}
return isJPG && isLt2M
},
// 獲取信息
getInfo () {
this.$http.get(`/base/basefishproducttype/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(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) => {
if (!valid) {
return false
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/base/basefishproducttype/', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(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>