<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>