|
|
|
@ -3,30 +3,38 @@ |
|
|
|
<el-form :inline="true" :model="queryParams"> |
|
|
|
<el-form-item :label="$t('area.areaName')"> |
|
|
|
<el-input |
|
|
|
v-model="queryParams.user" |
|
|
|
v-model="queryParams.areaName" |
|
|
|
:placeholder="$t('share.PleaseEnter') + $t('area.areaName')" |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('area.regionCode')"> |
|
|
|
<el-input |
|
|
|
v-model="queryParams.user" |
|
|
|
v-model="queryParams.areaCode" |
|
|
|
:placeholder="$t('share.PleaseEnter') + $t('area.regionCode')" |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('area.areaType')"> |
|
|
|
<el-select |
|
|
|
v-model="queryParams.region" |
|
|
|
v-model="queryParams.areaType" |
|
|
|
:placeholder="$t('share.PleaseChoose') + $t('area.areaType')" |
|
|
|
> |
|
|
|
<!-- <el-option label="区域一" value="shanghai"></el-option> |
|
|
|
<el-option label="区域二" value="beijing"></el-option> --> |
|
|
|
<el-option |
|
|
|
:label="item.dictLabel" |
|
|
|
:value="item.dictValue" |
|
|
|
v-for="item in areaTypeData" |
|
|
|
:key="item.dictValue" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini">{{ |
|
|
|
$t("share.search") |
|
|
|
}}</el-button> |
|
|
|
<el-button icon="el-icon-refresh" size="mini">{{ |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
icon="el-icon-search" |
|
|
|
size="mini" |
|
|
|
@click="handleQuery" |
|
|
|
>{{ $t("share.search") }}</el-button |
|
|
|
> |
|
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ |
|
|
|
$t("share.reset") |
|
|
|
}}</el-button> |
|
|
|
</el-form-item> |
|
|
|
@ -43,12 +51,12 @@ |
|
|
|
> |
|
|
|
</el-col> |
|
|
|
<el-col :span="1.5"> |
|
|
|
<el-button icon="el-icon-sort" plain size="mini">{{ |
|
|
|
<el-button icon="el-icon-sort" plain size="mini" @click="toggleExpandAll(isExpandAll)">{{ |
|
|
|
$t("area.UnfoldAndFold") |
|
|
|
}}</el-button> |
|
|
|
</el-col> |
|
|
|
<el-col :span="1.5"> |
|
|
|
<el-button type="primary" size="mini">{{ |
|
|
|
<el-button type="primary" size="mini" @click="handleExport">{{ |
|
|
|
$t("share.export") |
|
|
|
}}</el-button> |
|
|
|
</el-col> |
|
|
|
@ -57,56 +65,53 @@ |
|
|
|
<el-table |
|
|
|
:data="tableData" |
|
|
|
style="width: 100%; margin-bottom: 20px" |
|
|
|
row-key="id" |
|
|
|
default-expand-all |
|
|
|
row-key="areaId" |
|
|
|
:default-expand-all="isExpandAll" |
|
|
|
:key="treeKey" |
|
|
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" |
|
|
|
> |
|
|
|
<el-table-column prop="date" :label="$t('area.areaName')"> |
|
|
|
<el-table-column prop="areaName" :label="$t('area.areaName')"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="name" |
|
|
|
prop="areaCode" |
|
|
|
:label="$t('area.regionCode')" |
|
|
|
width="180" |
|
|
|
align="center" |
|
|
|
> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="address" :label="$t('area.sort')" align="center"> |
|
|
|
|
|
|
|
<el-table-column prop="orderNum" :label="$t('area.sort')" align="center"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="address" |
|
|
|
:label="$t('area.areaType')" |
|
|
|
align="center" |
|
|
|
> |
|
|
|
<el-table-column :label="$t('area.areaType')" align="center"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-tag type="success">{{ areaTypeFn(scope.row.areaType) }}</el-tag> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="address" |
|
|
|
prop="createTime" |
|
|
|
:label="$t('share.CreationTime')" |
|
|
|
align="center" |
|
|
|
> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="address" |
|
|
|
:label="$t('share.operate')" |
|
|
|
width="180" |
|
|
|
align="center" |
|
|
|
> |
|
|
|
<el-table-column :label="$t('share.operate')" width="180" align="center"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button |
|
|
|
type="text" |
|
|
|
size="small" |
|
|
|
@click="handleEdit(scope.$index, scope.row)" |
|
|
|
@click="handleEdit(scope.row.areaId)" |
|
|
|
>{{ $t("share.edit") }}</el-button |
|
|
|
> |
|
|
|
<el-button |
|
|
|
type="text" |
|
|
|
size="small" |
|
|
|
@click="handleAdd(scope.$index, scope.row)" |
|
|
|
@click="handleAdd(scope.row.areaId)" |
|
|
|
>{{ $t("share.new") }}</el-button |
|
|
|
> |
|
|
|
<el-button |
|
|
|
type="text" |
|
|
|
size="small" |
|
|
|
@click="handleDelete(scope.$index, scope.row)" |
|
|
|
@click="handleDelete(scope.row.areaId)" |
|
|
|
v-if="scope.row.parentId !== 0" |
|
|
|
>{{ $t("share.delete") }}</el-button |
|
|
|
> |
|
|
|
</template> |
|
|
|
@ -126,21 +131,13 @@ |
|
|
|
:rules="rules" |
|
|
|
ref="ruleForm" |
|
|
|
> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item |
|
|
|
:label="$t('area.SuperiorRegion')" |
|
|
|
prop="SuperiorRegion" |
|
|
|
> |
|
|
|
<el-select |
|
|
|
v-model="dialogForm.SuperiorRegion" |
|
|
|
:placeholder=" |
|
|
|
$t('share.PleaseChoose') + $t('area.SuperiorRegion') |
|
|
|
" |
|
|
|
style="width: 100%" |
|
|
|
> |
|
|
|
<!-- <el-option label="区域一" value="shanghai"></el-option> |
|
|
|
<el-option label="区域二" value="beijing"></el-option> --> |
|
|
|
</el-select> |
|
|
|
<el-col :span="12" v-if="dialogForm.parentId !== 0"> |
|
|
|
<el-form-item :label="$t('area.SuperiorRegion')" prop="parentId"> |
|
|
|
<treeSelect |
|
|
|
:menuOptions="menuOptions" |
|
|
|
@selectValue="selectValue" |
|
|
|
:editData="editData" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
@ -148,10 +145,13 @@ |
|
|
|
<el-select |
|
|
|
v-model="dialogForm.areaType" |
|
|
|
:placeholder="$t('share.PleaseChoose') + $t('area.areaType')" |
|
|
|
style="width: 100%" |
|
|
|
> |
|
|
|
<!-- <el-option label="区域一" value="shanghai"></el-option> |
|
|
|
<el-option label="区域二" value="beijing"></el-option> --> |
|
|
|
<el-option |
|
|
|
:label="item.dictLabel" |
|
|
|
:value="item.dictValue" |
|
|
|
v-for="item in areaTypeData" |
|
|
|
:key="item.dictValue" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
@ -166,14 +166,15 @@ |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item :label="$t('area.regionCode')"> |
|
|
|
<el-input |
|
|
|
v-model="dialogForm.areaCode" |
|
|
|
:placeholder="$t('share.PleaseEnter') + $t('area.regionCode')" |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item :label="$t('area.sort')" prop="sort"> |
|
|
|
<el-form-item :label="$t('area.sort')" prop="orderNum"> |
|
|
|
<el-input-number |
|
|
|
v-model="dialogForm.sort" |
|
|
|
v-model="dialogForm.orderNum" |
|
|
|
controls-position="right" |
|
|
|
:min="0" |
|
|
|
></el-input-number> |
|
|
|
@ -182,67 +183,239 @@ |
|
|
|
</el-form> |
|
|
|
</el-row> |
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
<el-button @click="dialogVisible = false">{{$t('share.cancel')}}</el-button> |
|
|
|
<el-button type="primary" @click="dialogVisible = false" |
|
|
|
>{{$t('share.confirm')}}</el-button |
|
|
|
> |
|
|
|
<el-button @click="dialogVisible = false">{{ |
|
|
|
$t("share.cancel") |
|
|
|
}}</el-button> |
|
|
|
<el-button type="primary" @click="submitForm">{{ |
|
|
|
$t("share.confirm") |
|
|
|
}}</el-button> |
|
|
|
</span> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { |
|
|
|
getList, |
|
|
|
areaType, |
|
|
|
postRemove, |
|
|
|
postAdd, |
|
|
|
getItem, |
|
|
|
edit, |
|
|
|
} from "@/api/area/area"; |
|
|
|
// import Treeselect from "@riophae/vue-treeselect"; |
|
|
|
// import "@riophae/vue-treeselect/dist/vue-treeselect.css"; |
|
|
|
import treeSelect from "./components/treeSelect.vue"; |
|
|
|
export default { |
|
|
|
components: { treeSelect }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
queryParams: {}, |
|
|
|
tableData: [{}], |
|
|
|
dialogVisible: false, |
|
|
|
title: this.$t("area.AddArea"), |
|
|
|
dialogForm: { |
|
|
|
// num: 0, |
|
|
|
}, |
|
|
|
dialogForm: {}, |
|
|
|
rules: { |
|
|
|
SuperiorRegion: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: |
|
|
|
this.$t("share.PleaseChoose") + this.$t("area.SuperiorRegion"), |
|
|
|
trigger: "change", |
|
|
|
}, |
|
|
|
], |
|
|
|
// parentId: [ |
|
|
|
// { |
|
|
|
// required: true, |
|
|
|
// message: |
|
|
|
// this.$t("share.PleaseChoose") + this.$t("area.SuperiorRegion"), |
|
|
|
// trigger: "change", |
|
|
|
// }, |
|
|
|
// ], |
|
|
|
areaName: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: |
|
|
|
this.$t("share.PleaseEnter") + this.$t("area.areaName"), |
|
|
|
message: this.$t("share.PleaseEnter") + this.$t("area.areaName"), |
|
|
|
trigger: "blur", |
|
|
|
}, |
|
|
|
], |
|
|
|
sort:[ |
|
|
|
{ |
|
|
|
orderNum: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: |
|
|
|
this.$t("share.PleaseChoose") + this.$t("area.sort"), |
|
|
|
message: this.$t("share.PleaseChoose") + this.$t("area.sort"), |
|
|
|
trigger: "change", |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
areaTypeData: [], |
|
|
|
queryParamsType: 0, |
|
|
|
// 多级下拉 |
|
|
|
menuOptions: [], |
|
|
|
type: 0, |
|
|
|
editData: {}, |
|
|
|
isExpandAll:true |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.init(); |
|
|
|
areaType().then((res) => { |
|
|
|
console.log(res, 1111111); |
|
|
|
if (res.code == 200) { |
|
|
|
this.areaTypeData = res.data; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 初始化 |
|
|
|
init() { |
|
|
|
getList(this.queryParams).then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.menuOptions = this.tableListFn(res.data); |
|
|
|
if (this.queryParamsType == 0) { |
|
|
|
this.tableData = this.tableListFn(res.data); |
|
|
|
} else { |
|
|
|
this.tableData = res.data; |
|
|
|
} |
|
|
|
|
|
|
|
this.$message({ |
|
|
|
type: "success", |
|
|
|
message: "查询成功", |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
//表格扁平转树结构 |
|
|
|
tableListFn(list) { |
|
|
|
var map = {}, |
|
|
|
node, |
|
|
|
tree = []; |
|
|
|
for (let i = 0; i < list.length; i++) { |
|
|
|
map[list[i].areaId] = list[i]; |
|
|
|
list[i].children = []; |
|
|
|
} |
|
|
|
for (let i = 0; i < list.length; i += 1) { |
|
|
|
list[i]; |
|
|
|
if (list[i].parentId !== 0) { |
|
|
|
// 不是根节点 |
|
|
|
map[list[i].parentId].children.push(list[i]); // 放到父节点的children里 |
|
|
|
} else { |
|
|
|
// 是根节点 |
|
|
|
tree.push(list[i]); // 根节点计入结果数组 |
|
|
|
} |
|
|
|
} |
|
|
|
return tree; |
|
|
|
}, |
|
|
|
areaTypeFn(type) { |
|
|
|
var name = ""; |
|
|
|
this.areaTypeData.forEach((item) => { |
|
|
|
if (item.dictValue == type) { |
|
|
|
name = item.dictLabel; |
|
|
|
} |
|
|
|
}); |
|
|
|
return name; |
|
|
|
}, |
|
|
|
// 查询 |
|
|
|
handleQuery() { |
|
|
|
console.log(this.queryParams); |
|
|
|
if (JSON.stringify(this.queryParams) === "{}") { |
|
|
|
this.queryParamsType = 0; |
|
|
|
} else { |
|
|
|
this.queryParamsType = 1; |
|
|
|
} |
|
|
|
this.init(); |
|
|
|
}, |
|
|
|
// 重置 |
|
|
|
resetQuery() { |
|
|
|
this.queryParams = {}; |
|
|
|
this.queryParamsType = 0; |
|
|
|
this.init(); |
|
|
|
}, |
|
|
|
add() { |
|
|
|
this.dialogForm = {}; |
|
|
|
this.type = 0; |
|
|
|
this.dialogVisible = true; |
|
|
|
this.title = this.$t("area.AddArea"); |
|
|
|
}, |
|
|
|
handleEdit(){ |
|
|
|
this.dialogVisible = true; |
|
|
|
handleEdit(id) { |
|
|
|
this.type = 1; |
|
|
|
this.title = this.$t("area.EditArea"); |
|
|
|
getItem(id).then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.dialogForm = res.data; |
|
|
|
this.editData = res.data; |
|
|
|
this.dialogVisible = true; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
handleAdd() { |
|
|
|
this.dialogVisible = true; |
|
|
|
handleAdd(areaId) { |
|
|
|
this.dialogForm = {}; |
|
|
|
this.dialogForm.parentId=areaId; |
|
|
|
let data = { |
|
|
|
parentId: areaId, |
|
|
|
}; |
|
|
|
this.title = this.$t("area.AddArea"); |
|
|
|
this.editData = data; |
|
|
|
this.dialogVisible = true; |
|
|
|
}, |
|
|
|
selectValue(val) { |
|
|
|
this.dialogForm.parentId = val; |
|
|
|
}, |
|
|
|
submitForm() { |
|
|
|
console.log(this.dialogForm, 111111111); |
|
|
|
// return |
|
|
|
if (!this.dialogForm.parentId) |
|
|
|
return this.$message.error("请选择上级区域"); |
|
|
|
if (this.type == 0) { |
|
|
|
postAdd(this.dialogForm).then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.$message({ |
|
|
|
type: "success", |
|
|
|
message: "添加成功!", |
|
|
|
}); |
|
|
|
this.dialogVisible = false; |
|
|
|
this.init(); |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
edit(this.dialogForm).then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.$message({ |
|
|
|
type: "success", |
|
|
|
message: "编辑成功!", |
|
|
|
}); |
|
|
|
this.dialogVisible = false; |
|
|
|
this.init(); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 删除 |
|
|
|
handleDelete(id) { |
|
|
|
this.$confirm(`确定要删除Id为${id}的数据吗？`, "删除", { |
|
|
|
confirmButtonText: "确定", |
|
|
|
cancelButtonText: "取消", |
|
|
|
type: "warning", |
|
|
|
}) |
|
|
|
.then(() => { |
|
|
|
postRemove(id).then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.$message({ |
|
|
|
type: "success", |
|
|
|
message: "删除成功!", |
|
|
|
}); |
|
|
|
this.init(); |
|
|
|
} |
|
|
|
}); |
|
|
|
}) |
|
|
|
.catch(() => { |
|
|
|
this.$message({ |
|
|
|
type: "info", |
|
|
|
message: "已取消删除", |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
toggleExpandAll(isExpandAll){ |
|
|
|
this.treeKey = +new Date() |
|
|
|
this.isExpandAll = !isExpandAll; |
|
|
|
}, |
|
|
|
/** 导出按钮操作 */ |
|
|
|
handleExport() { |
|
|
|
this.download('/basedata/area/export', { |
|
|
|
...this.queryParams |
|
|
|
}, `area_${new Date().getTime()}.xlsx`) |
|
|
|
} |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
wangxingyuan
9 months ago