dai
3 years ago
10 changed files with 557 additions and 71 deletions
@ -0,0 +1,289 @@ |
|||||
|
<template > |
||||
|
<div class="g-main"> |
||||
|
<div class="m-table"> |
||||
|
|
||||
|
<div class="u-table-btn2"> |
||||
|
|
||||
|
<div class="u-table-btn2-left"> |
||||
|
<el-button style="" |
||||
|
size="small" |
||||
|
class="diy-button--blue" |
||||
|
icon="el-icon-plus" |
||||
|
@click="handleAdd({},'add')">新增分类</el-button> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="m-table-item"> |
||||
|
<el-table ref="ref_table" |
||||
|
:data="tableData" |
||||
|
border |
||||
|
row-key="id" |
||||
|
default-expand-all |
||||
|
:height="tableHeight" |
||||
|
style="width: 100%" |
||||
|
:tree-props="{children: 'childrenList', hasChildren: 'hasChildren'}" |
||||
|
> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="分类名称" |
||||
|
> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="sort" |
||||
|
label="排序" |
||||
|
> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" |
||||
|
fixed="right" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
class="operate"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
v-if="scope.row.pid==0" |
||||
|
type="text" |
||||
|
class="div-table-button--blue" |
||||
|
size="small" |
||||
|
@click="handleAdd(scope.row,'add0')">添加二级分类</el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
class="div-table-button--blue" |
||||
|
size="small" |
||||
|
@click="handleAdd(scope.row,'edit')">修改</el-button> |
||||
|
|
||||
|
<el-button |
||||
|
type="text" |
||||
|
class="div-table-button--blue" |
||||
|
size="small" |
||||
|
@click="handleDelete(scope.row)">删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div> |
||||
|
<el-pagination @size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:current-page.sync="pageNo" |
||||
|
:page-sizes="[20, 50, 100, 200]" |
||||
|
:page-size="pageSize" |
||||
|
layout="sizes, prev, pager, next, total" |
||||
|
:total="total"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
<el-dialog :visible.sync="formShow" |
||||
|
:close-on-click-modal="false" |
||||
|
:close-on-press-escape="false" |
||||
|
:title="formTitle" |
||||
|
width="670px" |
||||
|
top="5vh" |
||||
|
class="dialog-h" |
||||
|
@closed="diaClose"> |
||||
|
<commonDemand-form ref="ref_form" |
||||
|
@dialogCancle="addFormCancle" |
||||
|
@dialogOk="addFormOk"></commonDemand-form> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import commonDemandForm from './commonDemandForm' |
||||
|
import { requestPost,requestGet } from "@/js/dai/request"; |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import { Loading } from 'element-ui' // 引入Loading服务 |
||||
|
import axios from 'axios' |
||||
|
let loading // 加载动画 |
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
searchHeight: 0,//搜索栏高度, |
||||
|
pageNo:0, |
||||
|
pageSize:20, |
||||
|
total:0, |
||||
|
formTitle:"", |
||||
|
formShow:false, |
||||
|
tableData: [], |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
commonDemandForm |
||||
|
}, |
||||
|
activated () { |
||||
|
|
||||
|
}, |
||||
|
async mounted () { |
||||
|
this.loadTable() |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
|
||||
|
async loadTable () { |
||||
|
const url = "/governance/commonServiceType/treeList" |
||||
|
let {data,msg,code } = await requestGet(url) |
||||
|
if(code == 0){ |
||||
|
this.tableData = data |
||||
|
}else{ |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
diaClose () { |
||||
|
this.$refs.ref_form.resetData() |
||||
|
this.formShow = false |
||||
|
}, |
||||
|
addFormOk () { |
||||
|
this.formShow = false |
||||
|
this.loadTable() |
||||
|
}, |
||||
|
addFormCancle () { |
||||
|
this.formShow = false |
||||
|
}, |
||||
|
async handleDetail (row) { |
||||
|
this.detailShow = true |
||||
|
const _data = await this.detail(row) |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.ref_form_detail.initForm(_data) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
handleAdd (row,type) { |
||||
|
if(type=="add"){ |
||||
|
console.log(row.id); |
||||
|
this.formTitle = '新增分类' |
||||
|
this.formShow = true |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.ref_form.initForm(type, row) |
||||
|
}) |
||||
|
}else if(type=="add0"){ |
||||
|
this.formTitle = '新增分类' |
||||
|
this.formShow = true |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.ref_form.initForm(type, row) |
||||
|
}) |
||||
|
}else if(type == 'edit'){ |
||||
|
this.formTitle = '修改分类' |
||||
|
this.formShow = true |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.ref_form.initForm(type, row) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
selectAll (selection) { |
||||
|
|
||||
|
this.selection = selection |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
selectionChange (selection) { |
||||
|
this.selection = selection |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
async handleDelete (row) { |
||||
|
|
||||
|
this.$confirm("确认删除?", "提示", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning" |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.deleteDemand(row) |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
if (err == "cancel") { |
||||
|
this.$message({ |
||||
|
type: "info", |
||||
|
message: "已取消删除" |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
async deleteDemand (row) { |
||||
|
const url = `/governance/commonServiceType/delete/${row.id}` |
||||
|
const { data, code, msg } = await requestPost(url) |
||||
|
if (code === 0) { |
||||
|
this.$message({ |
||||
|
type: "success", |
||||
|
message: "删除成功" |
||||
|
}); |
||||
|
this.loadTable() |
||||
|
} else if (code > 8000) { |
||||
|
this.$message({ |
||||
|
message: msg, |
||||
|
duration: 0 |
||||
|
}) |
||||
|
this.loadTable() |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
handleDiyClose () { |
||||
|
this.diyDialog = false; |
||||
|
}, |
||||
|
handleClose (done) { |
||||
|
this.diyDialog = false |
||||
|
}, |
||||
|
|
||||
|
handleSizeChange (val) { |
||||
|
this.pageSize = val |
||||
|
this.pageNo = 1 |
||||
|
this.loadTable() |
||||
|
}, |
||||
|
handleCurrentChange (val) { |
||||
|
this.pageNo = val |
||||
|
this.loadTable() |
||||
|
}, |
||||
|
|
||||
|
// 开启加载动画 |
||||
|
startLoading () { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: '正在加载……', // 加载中需要显示的文字 |
||||
|
background: 'rgba(0,0,0,.7)' // 背景颜色 |
||||
|
}) |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading () { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
tableHeight () { |
||||
|
console.log(this.searchHeight) |
||||
|
let height = this.searchHeight + 270 |
||||
|
return this.$store.state.inIframe ? this.clientHeight - height + this.iframeHeight : this.clientHeight - height |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
...mapGetters(['clientHeight', 'iframeHeight']) |
||||
|
}, |
||||
|
watch: { |
||||
|
}, |
||||
|
props: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped > |
||||
|
@import "@/assets/scss/modules/management/list-main.scss"; |
||||
|
</style> |
||||
|
|
||||
|
<style > |
||||
|
.el-message.is-closable .el-message__content { |
||||
|
line-height: 20px; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
|
||||
@ -0,0 +1,176 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="dialog-h-content scroll-h"> |
||||
|
<div > |
||||
|
<el-form ref="ref_form" |
||||
|
:inline="true" |
||||
|
:model="dataForm" |
||||
|
:rules="dataRule" |
||||
|
label-width="150px" |
||||
|
class="g-edit-form"> |
||||
|
<el-form-item prop="name" label="名称"> |
||||
|
<el-input v-model="dataForm.name" placeholder="请输入名称" ></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="sort" :label="$t('dept.sort')"> |
||||
|
<el-input-number v-model="dataForm.sort" @change="handleChangeSortNum" :min="0" :label="$t('dept.sort')" ></el-input-number> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="m-edit-btn"> |
||||
|
<el-button size="small" |
||||
|
@click="handleCancle">取 消</el-button> |
||||
|
<el-button size="small" |
||||
|
class="diy-button--blue" |
||||
|
@click="handleComfirm">保 存</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { Loading } from 'element-ui' // 引入Loading服务 |
||||
|
import { requestPost } from '@/js/dai/request' |
||||
|
import { number } from 'echarts' |
||||
|
let loading // 加载动画 |
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情 |
||||
|
searchOptions: [], |
||||
|
searchValue: '', |
||||
|
resultList: [], |
||||
|
loading: false, |
||||
|
dataForm: { |
||||
|
name:"", |
||||
|
sort:0, |
||||
|
pid:0, |
||||
|
type:"" |
||||
|
}, |
||||
|
|
||||
|
propertyFormShow: false, |
||||
|
|
||||
|
|
||||
|
keyWords: '', |
||||
|
} |
||||
|
}, |
||||
|
components: {}, |
||||
|
mounted () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
async initForm (type, row) { |
||||
|
this.$refs.ref_form.resetFields(); |
||||
|
this.type = type |
||||
|
this.formType = type |
||||
|
if(type == "add0"){ |
||||
|
this.dataForm.pid =row.id |
||||
|
}else if(type =='add'){ |
||||
|
console.log(row.id); |
||||
|
this.dataForm.pid = 0 |
||||
|
}else if(type =='edit'){ |
||||
|
this.dataForm = JSON.parse(JSON.stringify(row)) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleAddProperty () { |
||||
|
this.propertyForm.name = '' |
||||
|
this.propertyFormShow = true |
||||
|
}, |
||||
|
|
||||
|
async handleComfirm () { |
||||
|
this.$refs['ref_form'].validate((valid, messageObj) => { |
||||
|
if (!valid) { |
||||
|
app.util.validateRule(messageObj) |
||||
|
} else { |
||||
|
this.addComClass() |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
async addComClass(){ |
||||
|
const url = "/governance/commonServiceType/save" |
||||
|
const updateUrl = "/governance/commonServiceType/update" |
||||
|
let params = { |
||||
|
pid :this.type=='edit'? this.dataForm.id:this.dataForm.pid, |
||||
|
name:this.dataForm.name, |
||||
|
sort:this.dataForm.sort |
||||
|
} |
||||
|
let updateParms = { |
||||
|
id :this.type=='edit'? this.dataForm.id:this.dataForm.pid, |
||||
|
name:this.dataForm.name, |
||||
|
sort:this.dataForm.sort |
||||
|
} |
||||
|
console.log(params); |
||||
|
let {data,code,msg} = await requestPost(this.type=='edit'?updateUrl:url,this.type=='edit'?updateParms:params) |
||||
|
if(code == 0){ |
||||
|
this.$emit('dialogOk') |
||||
|
this.$message({ |
||||
|
type: "success", |
||||
|
message: '操作成功', |
||||
|
duration: 1 |
||||
|
}) |
||||
|
|
||||
|
}else{ |
||||
|
this.$message({ |
||||
|
type: "error", |
||||
|
message:msg, |
||||
|
duration: 0 |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
handleCancle () { |
||||
|
this.$emit('dialogCancle') |
||||
|
}, |
||||
|
resetData () { |
||||
|
|
||||
|
this.propertyFormShow = false |
||||
|
}, |
||||
|
handleChangeSortNum(value) { |
||||
|
this.dataForm.sort = value |
||||
|
}, |
||||
|
// 开启加载动画 |
||||
|
startLoading () { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: '正在加载……', // 加载中需要显示的文字 |
||||
|
background: 'rgba(0,0,0,.7)' // 背景颜色 |
||||
|
}) |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading () { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
dataRule () { |
||||
|
return { |
||||
|
name: [ |
||||
|
{ required: true, message: '分类名称不能为空', trigger: 'blur' }, |
||||
|
{ |
||||
|
min: 1, |
||||
|
max: 50, |
||||
|
message: '分类名称长度在 1 到 50个字符', |
||||
|
trigger: 'blur' |
||||
|
} |
||||
|
], |
||||
|
sort: [ |
||||
|
{ required: true, message: '分类顺序不能为空', trigger: 'blur' }, |
||||
|
], |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
props: {} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped > |
||||
|
@import "@/assets/scss/modules/management/edit-main.scss"; |
||||
|
</style> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
Loading…
Reference in new issue