优化代码
This commit is contained in:
18500206848
214
src/views/manage/policies/article/classify/index.vue
Normal file
214
src/views/manage/policies/article/classify/index.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
:page.sync="page"
|
||||
ref="crud"
|
||||
@search-change="searchChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template slot="createTime" slot-scope="{row}">
|
||||
<div>{{dateFormat(new Date(row.createTime), "yyyy/MM/dd")}}</div>
|
||||
</template>
|
||||
<template slot="menuLeft">
|
||||
<el-button size="small" type="primary" @click="add">新增分类</el-button>
|
||||
</template>
|
||||
<template slot="menu" slot-scope="{row}">
|
||||
<el-button size="small" type="text" @click="modify(row)">编辑</el-button>
|
||||
<el-button size="small" type="text" @click="del(row)">删除</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
<!-- 新增、编辑 -->
|
||||
<el-drawer :title="drawerTitle" :visible.sync="viewDrawer" size="60%">
|
||||
<el-form :model="formOption" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item label="分类名称" prop="name">
|
||||
<el-input v-model="formOption.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')" :loading="btnLoading">保存</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">取消</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</el-drawer>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { dateFormat } from "@/util/date";
|
||||
import {getArticleCategoryList, articleCategoryAdd, articleCategoryEdit, articleCategoryDel} from '@/api/help/article/classify'
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
data () {
|
||||
return {
|
||||
btnLoading:false,
|
||||
loading:false,
|
||||
viewDrawer:false,
|
||||
drawerTitle: '新增分类',
|
||||
formOption: {},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入分类名称', trigger: 'blur' },
|
||||
{ max: 6, message: '最大输入6个汉字', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
option: {
|
||||
height: "auto",
|
||||
tip: false,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 4,
|
||||
border: true,
|
||||
index: true,
|
||||
indexLabel: "序号",
|
||||
columnBtn: false,
|
||||
selection: false,
|
||||
viewBtn: false,
|
||||
addBtn: false,
|
||||
editBtn:false,
|
||||
delBtn: false,
|
||||
menuWidth: 300,
|
||||
labelWidth: 151,
|
||||
dialogClickModal: false,
|
||||
dialogType: "drawer",
|
||||
dialogFullscreen: true,
|
||||
|
||||
column: [
|
||||
{
|
||||
label: "分类名称",
|
||||
prop: "name",
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: "创建日期",
|
||||
prop: "createTime",
|
||||
display: false,
|
||||
slot: true
|
||||
}
|
||||
]
|
||||
},
|
||||
data: [],
|
||||
page: {
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
total: 100,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
dateFormat,
|
||||
add () {
|
||||
this.formOption = {}
|
||||
this.drawerTitle = '新增分类'
|
||||
this.viewDrawer = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.ruleForm.clearValidate();
|
||||
})
|
||||
},
|
||||
modify (row) {
|
||||
this.formOption = JSON.parse(JSON.stringify(row))
|
||||
this.drawerTitle = '编辑分类'
|
||||
this.viewDrawer = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.ruleForm.clearValidate();
|
||||
})
|
||||
},
|
||||
del (row) {
|
||||
this.$confirm('是否删除此数据, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
articleCategoryDel(JSON.stringify(row)).then(res => {
|
||||
this.$message({
|
||||
message: res.data.msg,
|
||||
type: 'success',
|
||||
})
|
||||
this.refreshChange()
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
});
|
||||
});
|
||||
},
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
this.btnLoading = true
|
||||
if (this.drawerTitle === '新增分类') {
|
||||
articleCategoryAdd(this.formOption).then(res => {
|
||||
this.$message({
|
||||
message: res.data.msg,
|
||||
type: 'success',
|
||||
})
|
||||
this.refreshChange()
|
||||
this.viewDrawer = false
|
||||
this.btnLoading = false
|
||||
})
|
||||
} else if (this.drawerTitle === '编辑分类') {
|
||||
var data = {
|
||||
name: this.formOption.name,
|
||||
id: this.formOption.id
|
||||
}
|
||||
articleCategoryEdit(data).then(res => {
|
||||
this.$message({
|
||||
message: res.data.msg,
|
||||
type: 'success',
|
||||
})
|
||||
this.refreshChange()
|
||||
this.viewDrawer = false
|
||||
this.btnLoading = false
|
||||
})
|
||||
}
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
this.viewDrawer = false
|
||||
|
||||
},
|
||||
/* 表格方法 */
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
var data = {
|
||||
current: page.currentPage,
|
||||
size: page.pageSize
|
||||
}
|
||||
getArticleCategoryList(data).then((res) => {
|
||||
this.data = res.data.data.records;
|
||||
this.page.total = res.data.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
searchChange(params,done) {},
|
||||
currentChange(val) {
|
||||
this.page.currentPage = val
|
||||
},
|
||||
sizeChange(val) {
|
||||
this.page.currentPage = 1
|
||||
this.page.pageSize = val
|
||||
},
|
||||
refreshChange () {
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-form-item{
|
||||
margin-bottom: 22px !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user