初始化
This commit is contained in:
砂糖
286
frontend/packages/BigScreenList/CatalogEditForm.vue
Normal file
286
frontend/packages/BigScreenList/CatalogEditForm.vue
Normal file
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="分组管理"
|
||||
:visible.sync="formVisible"
|
||||
:append-to-body="true"
|
||||
destroy-on-close
|
||||
class="bs-dialog-wrap bs-el-dialog catalog-edit-wrap "
|
||||
>
|
||||
<el-form
|
||||
v-if="formVisible"
|
||||
ref="dataForm"
|
||||
label-position="right"
|
||||
label-width="100px"
|
||||
class="bs-el-form"
|
||||
>
|
||||
<el-input
|
||||
v-model="searchKey"
|
||||
class="bs-el-input"
|
||||
placeholder="请输入分组名称"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
@clear="reSearch"
|
||||
@keyup.enter.native="reSearch"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="reSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="addCatalog"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
<el-table
|
||||
class="bs-el-table"
|
||||
height="100%"
|
||||
:data="tableList"
|
||||
>
|
||||
<el-empty />
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
label="名称"
|
||||
prop="name"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
label="排序"
|
||||
prop="orderNum"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
width="150"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="editCatalog(scope.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
@click="catalogDel(scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
<!-- 新增或编辑目录弹窗 -->
|
||||
<el-dialog
|
||||
:title="currentCatalog.code ? '编辑分组':'新增分组'"
|
||||
:visible.sync="catalogVisible"
|
||||
custom-class="bs-el-dialog"
|
||||
width="30%"
|
||||
class="bs-dialog-wrap bs-el-dialog"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="currentCatalog"
|
||||
label-width="80px"
|
||||
:rules="formRules"
|
||||
class="bs-el-form"
|
||||
>
|
||||
<el-form-item
|
||||
label="分组名称"
|
||||
prop="name"
|
||||
>
|
||||
<el-input
|
||||
v-model.trim="currentCatalog.name"
|
||||
class="bs-el-input"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="排序"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="currentCatalog.orderNum"
|
||||
:min="0"
|
||||
:max="30000"
|
||||
controls-position="right"
|
||||
class="bs-el-input-number"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button
|
||||
class="bs-el-button-default"
|
||||
@click="catalogVisible = false"
|
||||
>
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="addOrEditCatalog"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
export default {
|
||||
name: 'CatalogEditForm',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
catalogType: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
catalogList: {
|
||||
type: Array,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const validateName = (rule, value, callback) => {
|
||||
this.$dataRoomAxios.post('/bigScreen/type/nameRepeat', {
|
||||
id: this.currentCatalog.id,
|
||||
name: value,
|
||||
type: this.catalogType
|
||||
}, true).then((r) => {
|
||||
if (r.data) {
|
||||
callback(new Error('分组名称已存在'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
return {
|
||||
searchKey: '', // 分组查询
|
||||
catalogVisible: false,
|
||||
currentCatalog: {},
|
||||
formVisible: false,
|
||||
formRules: {
|
||||
name: [
|
||||
{ required: true, message: '分组名称不能为空', trigger: 'blur' },
|
||||
{ validator: validateName, trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableList: {
|
||||
get () {
|
||||
return cloneDeep(this.catalogList)
|
||||
},
|
||||
set () {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
mounted () {
|
||||
// this.getCatalogList()
|
||||
},
|
||||
methods: {
|
||||
reSearch () {
|
||||
|
||||
},
|
||||
// 获取分组列表
|
||||
getCatalogList () {
|
||||
this.$dataRoomAxios.get(`/bigScreen/type/list/${this.catalogType}`)
|
||||
.then((data) => {
|
||||
this.tableList = data
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
// 新增编辑目录（点击确定）
|
||||
addOrEditCatalog () {
|
||||
this.$refs.form.validate(async (valid) => {
|
||||
if (!valid) {
|
||||
return
|
||||
}
|
||||
if (!this.currentCatalog.id) {
|
||||
this.$dataRoomAxios.post('/bigScreen/type/add',
|
||||
{
|
||||
...this.currentCatalog,
|
||||
type: this.catalogType
|
||||
}).then(data => {
|
||||
this.catalogVisible = false
|
||||
this.getCatalogList()
|
||||
}).catch(() => {
|
||||
})
|
||||
} else {
|
||||
this.$dataRoomAxios.post('/bigScreen/type/update', { ...this.currentCatalog, type: this.type || 'bigScreenCatalog' }).then(data => {
|
||||
this.catalogVisible = false
|
||||
this.getCatalogList()
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
addCatalog () {
|
||||
this.currentCatalog = {
|
||||
name: '',
|
||||
id: '',
|
||||
code: '',
|
||||
orderNum: 0
|
||||
}
|
||||
this.catalogVisible = true
|
||||
},
|
||||
editCatalog (row) {
|
||||
this.currentCatalog = cloneDeep(row)
|
||||
this.catalogVisible = true
|
||||
},
|
||||
// 删除目录
|
||||
catalogDel (catalog) {
|
||||
this.$confirm('确定删除该目录？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
customClass: 'bs-el-message-box'
|
||||
}).then(async () => {
|
||||
this.$dataRoomAxios.post(`/bigScreen/type/delete/${catalog.id}`).then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功'
|
||||
})
|
||||
this.getCatalogList()
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: '删除失败!'
|
||||
})
|
||||
})
|
||||
}).catch()
|
||||
},
|
||||
// 关闭目录弹窗
|
||||
handleClose () {
|
||||
this.catalogVisible = false
|
||||
this.$refs.form.clearValidate()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../assets/style/bsTheme.scss';
|
||||
.catalog-edit-wrap{
|
||||
.el-input {
|
||||
width: 200px;
|
||||
margin-right: 20px
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user