331 lines
12 KiB
Vue
331 lines
12 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-row :gutter="0" type='flex'>
|
||
|
|
<el-col :span="24">
|
||
|
|
<div>
|
||
|
|
<el-form :model="queryParams" ref="queryForm" size="mini" label-width="68px">
|
||
|
|
<el-row :gutter="0">
|
||
|
|
<el-col :span="24">
|
||
|
|
<el-form-item label="国家" prop="countryCode">
|
||
|
|
<CountryPicker :placeholder="$t('选择国家')" v-model="queryParams.countryCode" @onChange="initData"></CountryPicker>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<!-- <el-col :span="12">
|
||
|
|
<el-form-item label="网点类型" prop="siteType">
|
||
|
|
<el-select v-model="siteType" placeholder="网点类型"
|
||
|
|
clearable filterable @change="initData" style="width:100%">
|
||
|
|
<el-option
|
||
|
|
v-for="dict in dict.type.emis_site_type"
|
||
|
|
:key="dict.value"
|
||
|
|
:label="dict.label"
|
||
|
|
:value="dict.value"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col> -->
|
||
|
|
<el-col :span="15">
|
||
|
|
<el-form-item label="上级网点" prop="parentSiteCode" >
|
||
|
|
<div style="display: inline-flex;width:100%;">
|
||
|
|
<div style="width:70px;overflow: hidden;">
|
||
|
|
<el-dropdown style="width:100%;height: 100%;padding-left: 5px;background: #d7d7d7;" @command="handleSelectSiteType">
|
||
|
|
<span class='el-dropdown-link'><span style="font-size:12px;width:30px;overflow:hidden;font-weight: 700;">{{siteTypeName}}</span><i class='el-icon-arrow-down el-icon--right'></i></span>
|
||
|
|
<el-dropdown-menu slot='dropdown'>
|
||
|
|
<el-dropdown-item :key="0" label="" command=""> 全部 </el-dropdown-item>
|
||
|
|
<el-dropdown-item v-for="dict in dict.type.emis_site_type"
|
||
|
|
:key="dict.value"
|
||
|
|
:label="dict.label"
|
||
|
|
:command="dict.value"
|
||
|
|
:class="{'selected':siteType==dict.value}"
|
||
|
|
>{{dict.label}}</el-dropdown-item>
|
||
|
|
</el-dropdown-menu>
|
||
|
|
</el-dropdown>
|
||
|
|
</div>
|
||
|
|
<div style="width:100%" class="siteSelect">
|
||
|
|
<EmisSiteSimplePicker :placeholder="$t('上级网点')" v-model="queryParams.parentSiteCode" :siteType="siteType" :isInitiated="true" :countryCode="queryParams.countryCode" @onChange="initData"></EmisSiteSimplePicker>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="9">
|
||
|
|
<el-form-item label="含下级" prop="blIncludeChildSite" label-width="90px">
|
||
|
|
<el-radio-group size="mini" v-model="queryParams.params.blIncludeChildSite" @change="initData">
|
||
|
|
<el-radio :label="1" style="margin-right: 0px;">是</el-radio>
|
||
|
|
<el-radio :label="0">否</el-radio>
|
||
|
|
</el-radio-group>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="24">
|
||
|
|
<el-form-item label="网点名称" prop="filterName" style="margin-bottom:5px">
|
||
|
|
<el-input
|
||
|
|
v-model="filterName"
|
||
|
|
placeholder="网点名称"
|
||
|
|
clearable
|
||
|
|
size="small"
|
||
|
|
prefix-icon="el-icon-search"
|
||
|
|
style="margin-bottom: 10px"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
<!-- <div class="head-container">
|
||
|
|
<el-radio-group v-model="siteSelectType">
|
||
|
|
<el-radio :label="1">按网点层级展示</el-radio>
|
||
|
|
<el-radio :label="2">按省市区层级展示</el-radio>
|
||
|
|
</el-radio-group>
|
||
|
|
</div> -->
|
||
|
|
<div style="border: 1px solid #dcdfe6;padding: 5px;" >
|
||
|
|
<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
|
||
|
|
<el-tree
|
||
|
|
:loading="loading"
|
||
|
|
ref="tree"
|
||
|
|
class="filter-tree tree"
|
||
|
|
:data="dataTree"
|
||
|
|
:props="defaultProps"
|
||
|
|
:expand-on-click-node="false"
|
||
|
|
:filter-node-method="filterNode"
|
||
|
|
node-key="siteCode"
|
||
|
|
@check-change="handleCheckChange"
|
||
|
|
highlight-current
|
||
|
|
show-checkbox
|
||
|
|
style="max-height:100%;overflow-y: auto"
|
||
|
|
>
|
||
|
|
<!-- @node-click="handleNodeClick" -->
|
||
|
|
<span slot-scope="{ node, data }" class="slot-t-node">
|
||
|
|
<template>
|
||
|
|
<i
|
||
|
|
v-if="data.children !=null && data.children.length >0 "
|
||
|
|
:class="{
|
||
|
|
'el-icon-folder': !node.expanded,
|
||
|
|
'el-icon-folder-opened': node.expanded,
|
||
|
|
}"
|
||
|
|
style="color: #000;"
|
||
|
|
/>
|
||
|
|
<span v-if="data.children !=null && data.children.length >0 " style="font-weight: bold;">({{ data.siteCode }}){{ data.siteName }}</span>
|
||
|
|
<span v-else>({{ data.siteCode }}){{ data.siteName }}</span>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
</span>
|
||
|
|
</el-tree>
|
||
|
|
</div>
|
||
|
|
<div style="text-align: center;margin-bottom: 20px;padding-top: 20px;">
|
||
|
|
<el-button type="primary" @click="submitForm">保存</el-button>
|
||
|
|
<el-button @click="cancel">取 消</el-button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</el-col>
|
||
|
|
<!-- <el-col :span="6">
|
||
|
|
<div>已选择站点</div>
|
||
|
|
<el-input v-model="form.areaSite" type="textarea" rows="15" disabled placeholder="区域站点列表" />
|
||
|
|
<div>新增加站点</div>
|
||
|
|
<el-input v-model="form.areaSite" type="textarea" rows="15" disabled placeholder="区域站点列表" />
|
||
|
|
</el-col> -->
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { listSimpleEmisSite } from "@/api/emis/emisSite";
|
||
|
|
import CountryPicker from '@/views/emis/EmisBaseTools/CountryPicker.vue';
|
||
|
|
import EmisSiteSimplePicker from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "EmisSiteTreePicker",
|
||
|
|
components: {CountryPicker,EmisSiteSimplePicker},
|
||
|
|
dicts: ['emis_site_type'],
|
||
|
|
props: {
|
||
|
|
countryCode:{
|
||
|
|
type: [String],
|
||
|
|
required: false
|
||
|
|
},
|
||
|
|
parentSiteCode:{
|
||
|
|
type: [String],
|
||
|
|
required: false
|
||
|
|
},
|
||
|
|
selectSiteCode: {
|
||
|
|
type: [String],
|
||
|
|
required: false
|
||
|
|
},
|
||
|
|
selectSiteName: {
|
||
|
|
type: [String],
|
||
|
|
required: false
|
||
|
|
},
|
||
|
|
isAddSite: {
|
||
|
|
type: [Boolean],
|
||
|
|
required: false
|
||
|
|
},
|
||
|
|
placeholder:{
|
||
|
|
type: [String],
|
||
|
|
required: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
loading:false,
|
||
|
|
checkAll:false,
|
||
|
|
isIndeterminate: true,
|
||
|
|
siteSelectType:1,
|
||
|
|
siteType:null,
|
||
|
|
siteTypeName:'全部',
|
||
|
|
selectSiteCodeStr:this.selectSiteCode,
|
||
|
|
selectSiteNameStr:null,
|
||
|
|
svalue: this.value,
|
||
|
|
filterName:"",
|
||
|
|
dataTree:[],
|
||
|
|
checkList:[],
|
||
|
|
defaultProps: {
|
||
|
|
children: "children",
|
||
|
|
label: "siteName"
|
||
|
|
},
|
||
|
|
queryParams:{
|
||
|
|
countryCode:null,
|
||
|
|
siteType:null,
|
||
|
|
parentSiteCode:this.parentSiteCode,
|
||
|
|
status:1,
|
||
|
|
params:{
|
||
|
|
blIncludeChildSite:null,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
value(newVal) {
|
||
|
|
},
|
||
|
|
svalue(newVal, oldVal) {
|
||
|
|
},
|
||
|
|
countryCode(newVal, oldVal) {
|
||
|
|
this.queryParams.countryCode = this.countryCode;
|
||
|
|
this.initData();
|
||
|
|
},
|
||
|
|
parentSiteCode(newVal, oldVal) {
|
||
|
|
this.queryParams.parentSiteCode = this.parentSiteCode;
|
||
|
|
this.initData();
|
||
|
|
},
|
||
|
|
isAddSite(val){
|
||
|
|
this.initData();
|
||
|
|
},
|
||
|
|
// 根据名称筛选部门树
|
||
|
|
filterName(val) {
|
||
|
|
this.$refs.tree.filter(val);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
// this.queryParams.siteType=2;
|
||
|
|
this.siteType=2;
|
||
|
|
this.queryParams.params.blIncludeChildSite = 1;
|
||
|
|
this.initData();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 筛选节点
|
||
|
|
filterNode(value, data) {
|
||
|
|
if (!value) return true;
|
||
|
|
return ( data.siteCode.toLowerCase().indexOf(value.toLowerCase()) !== -1 || data.siteName.toLowerCase().indexOf(value.toLowerCase()) !== -1 ) ;
|
||
|
|
},
|
||
|
|
handleSelectSiteType(siteType){
|
||
|
|
const item = this.dict.type.emis_site_type.find((item) => item.value === siteType);
|
||
|
|
this.siteType=siteType;
|
||
|
|
if(item!=null && item!=undefined){
|
||
|
|
this.siteTypeName = item.label.length >2?item.label.substr(0,2):item.label;
|
||
|
|
|
||
|
|
}else{
|
||
|
|
this.siteTypeName='全部';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 节点单击事件
|
||
|
|
handleNodeCheckChange(data) {
|
||
|
|
},
|
||
|
|
initData() {
|
||
|
|
this.loading = true;
|
||
|
|
|
||
|
|
// console.log(this.queryParams)
|
||
|
|
// console.log(this.selectSiteCodeStr)
|
||
|
|
|
||
|
|
if(this.selectSiteCodeStr!=null){
|
||
|
|
this.checkList = this.selectSiteCodeStr.split(',');
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log(this.isAddSite);
|
||
|
|
|
||
|
|
listSimpleEmisSite(this.queryParams).then(response => {
|
||
|
|
this.loading = false;
|
||
|
|
// 追加节点 过滤已经选中节点
|
||
|
|
if(this.isAddSite){
|
||
|
|
let filterSite = [];
|
||
|
|
response.rows.forEach(item=>{
|
||
|
|
if(!this.checkList.includes(item.siteCode)){
|
||
|
|
filterSite.push(item);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.dataTree = this.handleTree(filterSite,'siteCode','parentSiteCode');
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
this.dataTree = this.handleTree(response.rows,'siteCode','parentSiteCode');
|
||
|
|
// this.dataTree = this.handleTree(response.rows,'siteCode','province');
|
||
|
|
// 设置选中的key
|
||
|
|
if(this.selectSiteCodeStr != null){
|
||
|
|
this.$refs.tree.setCheckedKeys(this.checkList);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
},
|
||
|
|
handleCheckChange(data, checked, indeterminate) {
|
||
|
|
// console.log("通过key获取", this.$refs.tree.getCheckedKeys());
|
||
|
|
this.selectSiteNameStr="";
|
||
|
|
this.selectSiteCodeStr="";
|
||
|
|
let checkNodes = this.$refs.tree.getCheckedNodes();
|
||
|
|
checkNodes.forEach(item=>{
|
||
|
|
this.selectSiteNameStr = this.selectSiteNameStr+item.siteName+",";
|
||
|
|
this.selectSiteCodeStr = this.selectSiteCodeStr+item.siteCode+",";
|
||
|
|
});
|
||
|
|
|
||
|
|
this.selectSiteNameStr = this.selectSiteNameStr.substr(0,this.selectSiteNameStr.length-1);
|
||
|
|
this.selectSiteCodeStr = this.selectSiteCodeStr.substr(0,this.selectSiteCodeStr.length-1);
|
||
|
|
|
||
|
|
// this.handleNodeCheckChange();
|
||
|
|
|
||
|
|
},
|
||
|
|
handleCheckAllChange(val){
|
||
|
|
if (this.checkAll) {
|
||
|
|
this.$refs.tree.setCheckedNodes(this.dataTree);
|
||
|
|
this.checkAll = true;
|
||
|
|
|
||
|
|
} else {
|
||
|
|
this.$refs.tree.setCheckedKeys([]);
|
||
|
|
this.checkAll = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
submitForm(){
|
||
|
|
|
||
|
|
// this.$emit("input", this.selectSiteCodeStr);
|
||
|
|
let item ={
|
||
|
|
selectSiteCodeStr:this.isAddSite?this.selectSiteCode+","+this.selectSiteCodeStr:this.selectSiteCodeStr,
|
||
|
|
selectSiteNameStr:this.isAddSite?this.selectSiteName+","+this.selectSiteNameStr:this.selectSiteNameStr
|
||
|
|
}
|
||
|
|
console.log(item.selectSiteNameStr);
|
||
|
|
|
||
|
|
this.$emit("on-changed",item);
|
||
|
|
},
|
||
|
|
cancel(){
|
||
|
|
this.$emit("on-cancel");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.selected{
|
||
|
|
color:red;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|