smallchill
6 years ago
parent
7f2fb5e83b
commit
f002a6d8d1
2 changed files with 297 additions and 0 deletions
@ -0,0 +1,53 @@ |
|||||||
|
import request from '@/router/axios'; |
||||||
|
|
||||||
|
export const getList = (current, size, params) => { |
||||||
|
return request({ |
||||||
|
url: '/api/blade-system/region/list', |
||||||
|
method: 'get', |
||||||
|
params: { |
||||||
|
...params, |
||||||
|
current, |
||||||
|
size, |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export const getLazyTree = (parentCode, params) => { |
||||||
|
return request({ |
||||||
|
url: '/api/blade-system/region/lazy-tree', |
||||||
|
method: 'get', |
||||||
|
params: { |
||||||
|
...params, |
||||||
|
parentCode |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export const getDetail = (code) => { |
||||||
|
return request({ |
||||||
|
url: '/api/blade-system/region/detail', |
||||||
|
method: 'get', |
||||||
|
params: { |
||||||
|
code |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export const remove = (id) => { |
||||||
|
return request({ |
||||||
|
url: '/api/blade-system/region/remove', |
||||||
|
method: 'post', |
||||||
|
params: { |
||||||
|
id, |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export const submit = (row) => { |
||||||
|
return request({ |
||||||
|
url: '/api/blade-system/region/submit', |
||||||
|
method: 'post', |
||||||
|
data: row |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,244 @@ |
|||||||
|
<template> |
||||||
|
<el-row> |
||||||
|
<el-col :span="9"> |
||||||
|
<basic-container> |
||||||
|
<avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"/> |
||||||
|
</basic-container> |
||||||
|
</el-col> |
||||||
|
<el-col :span="15"> |
||||||
|
<basic-container> |
||||||
|
<el-button-group> |
||||||
|
<el-button type="primary" size="medium" icon="el-icon-circle-plus-outline" @click="addChildren">新增下级 |
||||||
|
</el-button> |
||||||
|
<el-button type="primary" size="medium" icon="el-icon-delete" @click="handleDelete">删除</el-button> |
||||||
|
<el-button type="primary" size="medium" icon="el-icon-upload2">导入</el-button> |
||||||
|
<el-button type="primary" size="medium" icon="el-icon-download">导出</el-button> |
||||||
|
</el-button-group> |
||||||
|
</basic-container> |
||||||
|
<basic-container> |
||||||
|
<avue-form ref="form" :option="regionOption" v-model="regionForm" @submit="handleSubmit"> |
||||||
|
<template slot="code" slot-scope="{}"> |
||||||
|
<el-input placeholder="请输入区划子编号" v-model="regionForm.subCode"> |
||||||
|
<template slot="prepend">{{regionForm.parentCode}}</template> |
||||||
|
</el-input> |
||||||
|
</template> |
||||||
|
</avue-form> |
||||||
|
</basic-container> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import {getLazyTree, getDetail, submit, remove} from "@/api/base/region"; |
||||||
|
import {mapGetters} from "vuex"; |
||||||
|
import {validatenull} from "@/util/validate"; |
||||||
|
|
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
treeData: [], |
||||||
|
treeOption: { |
||||||
|
nodeKey: 'id', |
||||||
|
lazy: true, |
||||||
|
treeLoad: function (node, resolve) { |
||||||
|
const parentCode = (node.level === 0) ? "00" : node.data.id; |
||||||
|
getLazyTree(parentCode).then(res => { |
||||||
|
resolve(res.data.data.map(item => { |
||||||
|
return { |
||||||
|
...item, |
||||||
|
leaf: !item.hasChildren |
||||||
|
} |
||||||
|
})) |
||||||
|
}); |
||||||
|
}, |
||||||
|
addBtn: false, |
||||||
|
menu: false, |
||||||
|
size: 'small', |
||||||
|
props: { |
||||||
|
labelText: '标题', |
||||||
|
label: 'title', |
||||||
|
value: 'value', |
||||||
|
children: 'children' |
||||||
|
} |
||||||
|
}, |
||||||
|
regionForm: {}, |
||||||
|
regionOption: { |
||||||
|
labelWidth: 100, |
||||||
|
column: [ |
||||||
|
{ |
||||||
|
label: "父区划编号", |
||||||
|
prop: "parentCode", |
||||||
|
span: 24, |
||||||
|
disabled: false, |
||||||
|
rules: [{ |
||||||
|
required: true, |
||||||
|
message: "请输入父区划编号", |
||||||
|
trigger: "blur" |
||||||
|
}] |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "区划编号", |
||||||
|
prop: "code", |
||||||
|
formslot: true, |
||||||
|
span: 24, |
||||||
|
rules: [{ |
||||||
|
required: true, |
||||||
|
message: "请输入区划编号", |
||||||
|
trigger: "blur" |
||||||
|
}] |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "区划子编号", |
||||||
|
prop: "subCode", |
||||||
|
display: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "区划名称", |
||||||
|
prop: "name", |
||||||
|
span: 24, |
||||||
|
rules: [{ |
||||||
|
required: true, |
||||||
|
message: "请输入区划名称", |
||||||
|
trigger: "blur" |
||||||
|
}] |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "区划等级", |
||||||
|
prop: "level", |
||||||
|
type: "radio", |
||||||
|
dicUrl: "/api/blade-system/dict/dictionary?code=region", |
||||||
|
props: { |
||||||
|
label: "dictValue", |
||||||
|
value: "dictKey" |
||||||
|
}, |
||||||
|
dataType: "number", |
||||||
|
span: 24, |
||||||
|
rules: [{ |
||||||
|
required: true, |
||||||
|
message: "请选择区划等级", |
||||||
|
trigger: "blur" |
||||||
|
}] |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "区划排序", |
||||||
|
prop: "sort", |
||||||
|
type: "number", |
||||||
|
span: 24, |
||||||
|
rules: [{ |
||||||
|
required: true, |
||||||
|
message: "请输入区划排序", |
||||||
|
trigger: "blur" |
||||||
|
}] |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "区划备注", |
||||||
|
prop: "remark", |
||||||
|
type: "textarea", |
||||||
|
minRows: 6, |
||||||
|
span: 24, |
||||||
|
}, |
||||||
|
] |
||||||
|
}, |
||||||
|
data: [] |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
'regionForm.subCode'() { |
||||||
|
this.regionForm.code = this.regionForm.parentCode + this.regionForm.subCode; |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
...mapGetters(["permission"]), |
||||||
|
permissionList() { |
||||||
|
return { |
||||||
|
addBtn: this.vaildData(this.permission.region_add, false), |
||||||
|
viewBtn: this.vaildData(this.permission.region_view, false), |
||||||
|
delBtn: this.vaildData(this.permission.region_delete, false), |
||||||
|
editBtn: this.vaildData(this.permission.region_edit, false) |
||||||
|
}; |
||||||
|
}, |
||||||
|
ids() { |
||||||
|
let ids = []; |
||||||
|
this.selectionList.forEach(ele => { |
||||||
|
ids.push(ele.id); |
||||||
|
}); |
||||||
|
return ids.join(","); |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initTree() { |
||||||
|
this.treeData = []; |
||||||
|
getLazyTree("00").then(res => { |
||||||
|
this.treeData = res.data.data.map(item => { |
||||||
|
return { |
||||||
|
...item, |
||||||
|
leaf: !item.hasChildren |
||||||
|
} |
||||||
|
}) |
||||||
|
}); |
||||||
|
}, |
||||||
|
nodeClick(data) { |
||||||
|
const column = this.findObject(this.regionOption.column, "parentCode"); |
||||||
|
column.disabled = true; |
||||||
|
getDetail(data.id).then(res => { |
||||||
|
this.regionForm = res.data.data; |
||||||
|
debugger |
||||||
|
this.regionForm.subCode = this.regionForm.code.replace(this.regionForm.parentCode, ''); |
||||||
|
}) |
||||||
|
}, |
||||||
|
addChildren() { |
||||||
|
if (validatenull(this.regionForm.code)) { |
||||||
|
this.$message.warning("请先选择一项区划"); |
||||||
|
return; |
||||||
|
} |
||||||
|
this.regionForm.parentCode = this.regionForm.code; |
||||||
|
this.regionForm.code = ''; |
||||||
|
this.regionForm.subCode = ''; |
||||||
|
this.regionForm.name = ''; |
||||||
|
this.regionForm.level = (this.regionForm.level === 5) ? 5 : this.regionForm.level + 1; |
||||||
|
}, |
||||||
|
handleSubmit(form, done, loading) { |
||||||
|
form.code = form.parentCode + form.subCode; |
||||||
|
submit(form).then(() => { |
||||||
|
this.$message({ |
||||||
|
type: "success", |
||||||
|
message: "操作成功!" |
||||||
|
}); |
||||||
|
this.initTree(); |
||||||
|
this.regionForm.subCode = ''; |
||||||
|
this.$refs.form.resetForm(); |
||||||
|
done(); |
||||||
|
}, error => { |
||||||
|
loading(); |
||||||
|
window.console.log(error); |
||||||
|
}); |
||||||
|
}, |
||||||
|
handleDelete() { |
||||||
|
if (validatenull(this.regionForm.code)) { |
||||||
|
this.$message.warning("请先选择一项区划"); |
||||||
|
return; |
||||||
|
} |
||||||
|
this.$confirm(`确定将 [${this.regionForm.name}] 数据删除?`, { |
||||||
|
confirmButtonText: "确定", |
||||||
|
cancelButtonText: "取消", |
||||||
|
type: "warning" |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
return remove(this.regionForm.code); |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$message({ |
||||||
|
type: "success", |
||||||
|
message: "操作成功!" |
||||||
|
}); |
||||||
|
this.initTree(); |
||||||
|
this.regionForm.subCode = ''; |
||||||
|
this.$refs.form.resetForm(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
</style> |
||||||
Loading…
Reference in new issue