11
This commit is contained in:
libing
parent
d6159bd581
commit
7147334d54
@ -1,5 +1,93 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="20" type='flex'>
|
||||
<el-col :span="5" :xs="5">
|
||||
<div class="head-container">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="15" :xs="15">
|
||||
<el-input
|
||||
v-model="countryName"
|
||||
placeholder="国家名称"
|
||||
clearable
|
||||
size="small"
|
||||
prefix-icon="el-icon-search"
|
||||
style="margin-bottom: 20px"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
class="filter-tree tree"
|
||||
:data="countryTree"
|
||||
:props="defaultProps"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4" :xs="4">
|
||||
<div class="head-container">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="15" :xs="15">
|
||||
<el-input
|
||||
v-model="areaName"
|
||||
placeholder="片区"
|
||||
clearable
|
||||
size="small"
|
||||
prefix-icon="el-icon-search"
|
||||
style="margin-bottom: 20px"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="4" :xs="4">
|
||||
<el-button
|
||||
type="normal"
|
||||
size="mini"
|
||||
icon="el-icon-plus"
|
||||
:disabled="false"
|
||||
@click="handleAreaAdd">
|
||||
</el-button>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="head-container">
|
||||
<el-tree
|
||||
ref="areaTree"
|
||||
class="filter-tree tree"
|
||||
:data="areaTree"
|
||||
:props="defaultProps"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
@node-click="handleNodeAreaClick"
|
||||
>
|
||||
<span slot-scope="{ node, data }"
|
||||
@mouseenter="mouseenter(data)"
|
||||
@mouseleave="mouseleave(data)"
|
||||
style="width:100%">
|
||||
<template>
|
||||
<span style="font-size:13px">{{ data.label }}</span>
|
||||
<span v-show="data.show && data.id > 0" style="margin-left: 10px;">
|
||||
<i @click="handleUpdateArea(data)" class="el-icon-edit"></i>
|
||||
<i @click="handleDeleteArea(data)" class="el-icon-delete"></i>
|
||||
</span>
|
||||
</template>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="20" :xs="20">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
|
||||
<el-form-item label="" prop="regionName">
|
||||
@ -183,37 +271,53 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :title="titleForm" :visible.sync="openForm" width="500px" append-to-body>
|
||||
<emisCountryAreaForm :id="currentId" @on-changed="handleFormChanged" @on-cancel="cancelForm"></EmisCountryAreaForm>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :title="titleView" :visible.sync="openView" width="60%" :close-on-click-modal="false" append-to-body>
|
||||
<emisRegionView :id="id" ></EmisRegionView>
|
||||
</el-dialog>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listEmisRegion, getEmisRegion, delEmisRegion, addEmisRegion, updateEmisRegion } from "@/api/emis/emisRegion";
|
||||
import { listEmisCountry, getEmisCountry, delEmisCountry, addEmisCountry, updateEmisCountry } from "@/api/emis/emisCountry";
|
||||
import { listEmisCountryArea, getEmisCountryArea, delEmisCountryArea, addEmisCountryArea, updateEmisCountryArea } from "@/api/emis/emisCountryArea";
|
||||
import elDateSimplePicker from '@/components/DatePickerAdv/elDateSimplePicker';
|
||||
import emisRegionView from '@/views/emis/emisRegion/emisRegionView';
|
||||
import emisRegionForm from '@/views/emis/emisRegion/emisRegionForm';
|
||||
import emisCountryAreaForm from '@/views/emis/emisCountryArea/emisCountryAreaForm';
|
||||
|
||||
export default {
|
||||
name: "emisRegion",
|
||||
components: { elDateSimplePicker,emisRegionView,emisRegionForm },
|
||||
components: { elDateSimplePicker,emisRegionView,emisRegionForm ,emisCountryAreaForm},
|
||||
dicts: [
|
||||
'emis_region_level_type',
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
countryName:"",
|
||||
areaName:'',
|
||||
currentId:0,
|
||||
// 是否展开，默认全部折叠
|
||||
isExpandAll: false,
|
||||
// 重新渲染表格状态
|
||||
refreshTable: true,
|
||||
|
||||
countryTree:[],
|
||||
countryIdsOptions:[],
|
||||
areaTree:[],
|
||||
countryAreaIdsOptions:[],
|
||||
tableDataCopy:[],
|
||||
tableData:[],
|
||||
showTable:false,
|
||||
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label"
|
||||
},
|
||||
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
@ -279,6 +383,16 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getCountryList();
|
||||
},
|
||||
watch: {
|
||||
// 根据名称筛选部门树
|
||||
countryName(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
},
|
||||
areaName(val) {
|
||||
this.$refs.areaTree.filter(val);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/** 查询四级省市区镇表列表 */
|
||||
@ -299,6 +413,48 @@ export default {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getAreaList(){
|
||||
this.loading = true;
|
||||
listEmisCountryArea(this.queryParams).then(response => {
|
||||
this.loading = false;
|
||||
this.areaTree = [];
|
||||
this.countryAreaIdsOptions = [];
|
||||
var cTree={"id":"","label":"片区","children":[]};
|
||||
//var lastContinentId = -1;
|
||||
response.rows.forEach(item =>{
|
||||
var optItem={value:item.id,label:item.name};
|
||||
this.countryAreaIdsOptions.push(optItem)
|
||||
|
||||
var treeItem={"id":item.id,"label":item.name,"show":false};
|
||||
cTree.children.push(treeItem);
|
||||
//lastContinentId = item.id;
|
||||
});
|
||||
//this.queryParams.continentId = lastContinentId;
|
||||
this.areaTree.push(cTree);
|
||||
//this.getList();
|
||||
});
|
||||
},
|
||||
getCountryList() {
|
||||
this.loading = true;
|
||||
listEmisCountry(this.queryParams).then(response => {
|
||||
this.loading = false;
|
||||
this.countryTree = [];
|
||||
this.countryIdsOptions = [];
|
||||
var cTree={"id":"","label":"国家列表","children":[]};
|
||||
//var lastContinentId = -1;
|
||||
response.rows.forEach(item =>{
|
||||
var optItem={value:item.id,label:item.name};
|
||||
this.countryIdsOptions.push(optItem)
|
||||
|
||||
var treeItem={"id":item.id,"label":item.name};
|
||||
cTree.children.push(treeItem);
|
||||
//lastContinentId = item.id;
|
||||
});
|
||||
//this.queryParams.continentId = lastContinentId;
|
||||
this.countryTree.push(cTree);
|
||||
//this.getAreaList();
|
||||
});
|
||||
},
|
||||
load (tree, treeNode, resolve) {
|
||||
// 层级关系备份
|
||||
const idCopy = JSON.parse(JSON.stringify(tree.idList))
|
||||
@ -345,6 +501,31 @@ export default {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 筛选节点
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
},
|
||||
// 节点单击事件
|
||||
handleNodeClick(data) {
|
||||
this.queryParams.countryId = data.id;
|
||||
//this.form.continentId= data.id;
|
||||
this.handleCountryAreaQuery();
|
||||
},
|
||||
// 节点单击事件
|
||||
handleNodeAreaClick(data) {
|
||||
this.queryParams.areaId = data.id;
|
||||
//this.form.continentId= data.id;
|
||||
this.handleAreaQuery();
|
||||
},
|
||||
mouseenter(data) {
|
||||
console.log("111"+data);
|
||||
this.$set(data, 'show', true)
|
||||
},
|
||||
mouseleave(data) {
|
||||
console.log("222"+data);
|
||||
this.$set(data, 'show', false)
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
@ -376,6 +557,16 @@ export default {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleAreaQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleCountryAreaQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getAreaList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
@ -418,6 +609,26 @@ export default {
|
||||
// this.openEmisRegion = true;
|
||||
// this.titleEmisRegion = "修改";
|
||||
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAreaAdd(row) {
|
||||
this.reset();
|
||||
this.openForm = true;
|
||||
this.title = "新增";
|
||||
},
|
||||
handleUpdateArea(row){
|
||||
this.currentId = row.id || this.ids;
|
||||
this.openForm = true;
|
||||
this.titleForm = "修改";
|
||||
},
|
||||
handleDeleteArea(row){
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认删除').then(function() {
|
||||
return delEmisCountryArea(ids);
|
||||
}).then(() => {
|
||||
this.getAreaList()
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
handleView(row) {
|
||||
this.id=row.id;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user