涉及到elementUI，table组件，分页组件，dialog组件，form组件....
image.png
完整Demo
<template>
<div class="sdm-bg">
<div class="sdm-bg-sty sdm-bg-data">
<div class="sdm-bg-title-btn">
<h3>数据集类型列表</h3>
<!-- <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true">添加数据集类型</el-button> -->
<div>
<a class="batch_del" @click="[dialogVisible = true,id=-1]">添加数据集类型</a>
</div>
</div>
<el-table v-loading="loading" :data="tableData" style="width: 100%">
<el-table-column
label="序号"
type="index"
width="100"
:index="i=>(currentPage-1)*pageSize + i+1"
/>
<!-- index 第二页的序号累计在第一页的基础上-->
<el-table-column prop="name" label="数据集类型名称" />
<el-table-column prop="code" label="数据集类型编码" />
<el-table-column prop="desc" label="数据集类型描述" />
<el-table-column label="操作" width="160">
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
<!-- <el-button type="text" size="small" @click="handleDisabled(scope.row)">{{ scope.row.disabled === 0 ? '关闭' : '开启' }}</el-button>
<el-button type="text" size="small" @click="handlelock(scope.row)">{{ scope.row.locked === 0 ? '锁定' : '解锁' }} </el-button> -->
</template>
</el-table-column>
</el-table>
<pagination :page="currentPage" :limit="pageSize" :total="total" @pagination="pagination" />
</div>
<!-- 编辑/新增 弹窗 start -->
<el-dialog
:title=" id==-1 ? '添加数据集类型':'修改数据集类型'"
:visible.sync="dialogVisible"
width="35%"
:before-close="handleClose"
>
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="128px" class="demo-ruleForm">
<el-form-item label="数据集类型名称" prop="name">
<el-input v-model="ruleForm.name" placeholder="请输入" />
</el-form-item>
<el-form-item label="数据集类型编码" prop="code">
<el-input v-model="ruleForm.code" placeholder="请输入" />
</el-form-item>
<el-form-item label="数据集类型描述" prop="desc">
<el-input v-model="ruleForm.desc" placeholder="请输入" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑/新增 弹窗 end -->
</div>
</template>
<script>
import Pagination from '@/components/Pagination/index'
export default {
name: 'Index',
components: { Pagination },
data() {
var validator = (rule, value, callback) => {
if (value === '') {
callback(new Error(rule.message2));
} else if (value.toString().trim() === '') {
callback('不能全为空格');
} else {
callback();
}
};
return {
title: '',
tableData: [],
currentPage: 1,
pageSize: 10,
total: 0,
dialogVisible: false,
id: -1,
ruleForm: {
name: '',
desc: '',
code: ''
},
loading: false,
rules: {
name: [
{ required: true, message2: '请输入名称', trigger: 'blur', validator }
],
desc: [
{ required: true, message2: '请输入描述', trigger: 'blur', validator }
],
code: [
{ required: true, message2: '请输入编码', trigger: 'blur', validator }
]
}
}
},
mounted() {
this.initPage()
},
methods: {
initPage() {
this.loading = true
this.$api.DS.getDataSetType({
pageNum: this.currentPage,
pageSize: this.pageSize
}).then(res => {
this.loading = false
const { status, message, data, total } = res || {}
if (status === 200) {
this.tableData = data
this.total = total
} else {
this.$message.error(message)
}
}).catch(err => {
this.loading = false
console.log(err)
})
},
refreshList() {
this.initPage()
},
add() {
this.$api.DS.addDataSetType(this.ruleForm).then(res => {
if (res.status === 200) {
this.$message.success(res.message)
this.handleClose()
this.currentPage = 1
this.initPage()
} else {
this.$message.error(res.message)
}
}).catch(err => {
// this.$message.error(err.message)
console.log(err)
})
},
update() {
this.$api.DS.editDataSetType({
id: this.id,
...this.ruleForm
}).then(res => {
if (res.status === 200) {
this.$message.success(res.message)
this.handleClose()
// this.currentPage = 1
this.initPage()
} else {
this.$message.error(res.message)
}
}).catch(err => {
// this.$message.error(err.message)
console.log(err)
})
},
handleEdit(row) {
this.id = row.id
var { name, desc, code } = row
Object.assign(this.ruleForm, { name, desc, code })
this.dialogVisible = true
},
handleDel(row) { // 删除
// const content = row.locked === 0 ? '确定要锁定吗?' : '确定要解锁吗?'
this.$confirm('确定要删除吗', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$axios.delete(`web/dataSetType/delete?id=${row.id}`).then(res => {
const { status, message } = res.data || {}
if (status === 200) {
this.initPage()
this.$message({
type: 'success',
message: message
});
} else {
this.$message.error(message)
}
}).catch(err => {
console.log(err)
})
}).catch((err) => {
this.$message({
type: 'info',
message: err
});
});
},
handlelock(row) {
const content = row.locked === 0 ? '确定要锁定吗?' : '确定要解锁吗?'
this.$confirm(content, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$axios.get(`web/tenant/${row.locked == 0 ? 'lock' : 'unlock'}/${row.id}`).then(res => {
const { status, message } = res.data || {}
if (status === 200) {
this.initPage()
this.$message({
type: 'success',
message: message
});
} else {
this.$message.error(message)
}
}).catch(err => {
console.log(err)
})
}).catch((err) => {
this.$message({
type: 'info',
message: err
});
});
},
handleClose() {
this.resetForm()
this.dialogVisible = false
},
resetForm() {
this.$refs['ruleForm'].resetFields();
this.ruleForm = {
name: '',
desc: '',
code: ''
}
},
save() { // 提交
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
if (this.id === -1) {
this.add()
} else {
this.update()
}
} else {
console.log('error submit!!');
return false;
}
});
},
handleDisabled(row) {
const content = row.disabled === 0 ? '确定要关闭吗?' : '确定要开启吗?'
this.$confirm(content, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$axios.get(`web/tenant/${row.disabled == 0 ? 'close' : 'open'}/${row.id}`).then(res => {
const { status, message } = res.data || {}
if (status === 200) {
this.initPage()
this.$message({
type: 'success',
message: message
});
} else {
this.$message.error(message)
}
}).catch(err => {
console.log(err)
})
}).catch((err) => {
this.$message({
type: 'info',
message: err
});
});
},
pagination(val) {
this.pageSize = val.limit
this.currentPage = val.page
this.initPage()
},
resetTitle() {
this.title = ''
this.initPage()
}
}
}
</script>
<style scoped>
</style>
分页组件我对其进行了二次封装，需要可看我另篇笔记~
网友评论