<template>
|
<div class="controlList" style="min-width: 1000px">
|
<Card>
|
<div class="customTitle">
|
<Icon custom="custom custom-liebiao"></Icon>
|
<span style="margin-left: 6px;">融资租赁</span>
|
</div>
|
</Card>
|
<div style="margin-top: 12px;position: relative">
|
<div style="width: 5%;margin: 0 15px;position:absolute;right:32px;top: 15px;z-index:9">
|
<Button size="large" custom-icon="custom custom-tianjia" style="float: left;" type="primary"
|
@click="addControl">添加
|
</Button>
|
</div>
|
<Card class="controlClass">
|
<Tabs v-model="tab" @on-click="changeTab" type="card" style="margin-top: 12px;">
|
<TabPane label="出租人" name="tab1"></TabPane>
|
<TabPane label="承租人" name="tab2"></TabPane>
|
<TabPane label="区域平台企业" name="tab3"></TabPane>
|
</Tabs>
|
<div v-show="tab === 'tab1'">
|
<Card>
|
<Table max-height="520" :loading="loading" border :columns="controlListColumns"
|
:data="controlList">
|
<template slot="action" slot-scope="params">
|
<Tooltip content="取消" theme="light" transfer max-width="200" placement="top">
|
<Icon custom="custom custom-quxiao" size="18"
|
:class="defaultassetsmode ? 'disabledIcon' : 'actionIcon'"
|
@click="deleteControl(params.row)" />
|
</Tooltip>
|
</template>
|
</Table>
|
</Card>
|
<div style="margin-top: 12px">
|
<Page :current="pageIndex" :total="TotalItems" :page-size="10" style="text-align: right"
|
@on-change="changePageIndex" show-elevator />
|
</div>
|
</div>
|
<div v-show="tab === 'tab3'">
|
<Card>
|
<Table max-height="520" :loading="loading" border :columns="controlListColumns3"
|
:data="controlList">
|
<template slot="action" slot-scope="params">
|
<Tooltip content="取消" theme="light" transfer max-width="200" placement="top">
|
<Icon custom="custom custom-quxiao" size="18"
|
:class="defaultassetsmode ? 'disabledIcon' : 'actionIcon'"
|
@click="deleteControl(params.row)" />
|
</Tooltip>
|
</template>
|
</Table>
|
</Card>
|
<div style="margin-top: 12px">
|
<Page :current="pageIndex" :total="TotalItems" :page-size="10" style="text-align: right"
|
@on-change="changePageIndex" show-elevator />
|
</div>
|
</div>
|
<div v-show="tab === 'tab2'">
|
<Card>
|
<Table max-height="520" :loading="loading" border :columns="controlListColumns2"
|
:data="controlList">
|
<template slot="action" slot-scope="params">
|
<Tooltip content="取消" theme="light" transfer max-width="200" placement="top">
|
<Icon custom="custom custom-quxiao" size="18"
|
:class="defaultassetsmode ? 'disabledIcon' : 'actionIcon'"
|
@click="deleteControl(params.row)" />
|
</Tooltip>
|
</template>
|
</Table>
|
</Card>
|
<div style="margin-top: 12px">
|
<Page :current="pageIndex" :total="TotalItems" :page-size="10" style="text-align: right"
|
@on-change="changePageIndex" show-elevator />
|
</div>
|
</div>
|
</Card>
|
</div>
|
<Modal v-model="addControlModal" footer-hide width="635" sticky reset-drag-position :mask="true" draggable>
|
<p slot="header">
|
<Icon custom="custom custom-tianjia" style="margin-right: 10px;"></Icon>
|
<span v-if="tab == 'tab3'">添加监控地区</span>
|
<span v-if="tab == 'tab2'">添加承租人</span>
|
<span v-if="tab == 'tab1'">添加出租人</span>
|
</p>
|
<div class="copyclass" >
|
<el-cascader v-if="tab == 'tab3'" :options="areaListTab" @change="btncontrol" ref="cascader"
|
v-model="areaListTabVal" collapse-tags style="margin: 0px 0 12px 0;width:610px" placeholder="请选择地区"
|
:props="{ checkStrictly: true, }" clearable ></el-cascader>
|
<Form v-else :model="addControlForm" :show-message="false" ref="addControlForm"
|
:rules="addControlFormValid">
|
<div style="display: flex">
|
<label
|
style="width:90px;display: inline-block;text-align:left;line-height: 40px;white-space: nowrap">企业名称</label>
|
<FormItem prop="CompanyName" style="width:100%!important;">
|
<Poptip trigger="focus" word-wrap style="width: 400px" height="100"
|
placement="bottom-start">
|
<Input size="large" v-model="addControlForm.CompanyName" @on-focus="mergeRequest"
|
@on-change="controlChange()" placeholder="请输入企业名称" class="ipt_width" />
|
<div slot="content" style="width: 500px;">
|
<ul class="ul_class_add">
|
<li style="text-align: center"
|
v-show="selectListOp.length === 0 || selectListOp === null">
|
暂无数据</li>
|
<li style="width:220px;height: 20px" v-show="loadingsele">
|
<Spin fix>
|
<Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
|
<div>Loading</div>
|
</Spin>
|
</li>
|
<li class="clearfix" style="cursor:pointer;padding: 4px 2px;"
|
v-show="selectListOp.length > 0" v-for="item in selectListOp"
|
@click="select_li_click(item.Name)">
|
<span style="float: left;">{{ item.Name }}</span>
|
<span
|
style="float: right;display: inline-block;border-radius: 4px;background-color: #e5f7fa;padding: 1px 4px;color: #05b6d0;">
|
{{ item.IsOriginalNameMatch ? '历史名称匹配' : '企业名称匹配' }}</span>
|
</li>
|
</ul>
|
</div>
|
</Poptip>
|
</FormItem>
|
</div>
|
</Form>
|
|
<div>
|
<span>
|
<span style="margin-right: 10px">是否加入下属公司</span>
|
</span>
|
<i-switch v-model="IScompanies" size="large" @on-change="chooseIScompanies">
|
<span slot="open"></span>
|
<span slot="close"></span>
|
</i-switch>
|
</div>
|
|
<div style="margin: 12px 0 0 0;text-align: center">
|
<Button size="large" custom-icon="custom custom-queding" style="margin-right: 20px;font-size: 14px"
|
type="primary" @click="saveAddControl('addControlForm')">保存
|
</Button>
|
<Button size="large" custom-icon="custom custom-quxiao" style="margin-left: 20px;font-size: 14px"
|
type="error" @click="addControlModal = false">取消
|
</Button>
|
</div>
|
</div>
|
</Modal>
|
<Modal v-model="deleteDocuControl" draggable footer-hide sticky reset-drag-position :mask="true"
|
:mask-closable="false" class-name="vertical-center-modal" width="380">
|
<p slot="header">
|
<Icon custom="custom custom-quxiao" style="margin-right: 10px;"></Icon>
|
<span>取消监控</span>
|
</p>
|
<div>
|
<div>是否确认取消对 "<span> {{ deleteZhuti }} </span>" 的监控，取消后该主体的现场检查和管理事项内容将清空。</div>
|
<div class="clearfix" style="width: 200px;margin:20px auto 0px;">
|
<Button size="large" custom-icon="custom custom-queding" style="float: left;" type="primary"
|
@click="deleteDocuConfirm">确认
|
</Button>
|
<Button size="large" custom-icon="custom custom-quxiao" style="float: right;" type="error"
|
@click="deleteDocuControl = false">取消
|
</Button>
|
</div>
|
</div>
|
</Modal>
|
</div>
|
</template>
|
<script>
|
import axios from '@/libs/api.request'
|
import $ from 'jquery'
|
export default {
|
name: 'controlList',
|
data() {
|
return {
|
deleteDocuControl: false,
|
deleteZhuti: '',
|
areaListTabVal: [],
|
loading: false,
|
CompanyId: '',
|
tab: 'tab1',
|
controlList: [],
|
TotalItems: 0,
|
pageIndex: 1,
|
defaultassetsmode: false,
|
Navigation: '',
|
addfundshow: false,
|
addControlModal: false,
|
addControlForm: {
|
CompanyName: ''
|
},
|
addControlFormValid: {
|
CompanyName3: [
|
{ required: true, message: '请输入地区名称', trigger: 'blur' }
|
],
|
CompanyName: [
|
{ required: true, message: '请输入企业名称', trigger: 'blur' }
|
]
|
},
|
selectListOp: [],
|
loadingsele: false,
|
areaListTab: [],
|
type: 1,
|
IScompanies: true,
|
paramsDeleteControl: {},
|
}
|
},
|
mounted() {
|
this.CompanyId = localStorage.getItem('RiskCompanyId')
|
this.getControlList()
|
this.getAreaList()
|
},
|
methods: {
|
chooseIScompanies(e) {
|
|
|
},
|
changeTab(tab) {
|
this.tab = tab
|
this.pageIndex = 1
|
this.addControlForm.CompanyName = ''
|
this.IScompanies = false
|
this.areaListTabVal = []
|
|
this.getControlList()
|
},
|
getControlList() {
|
if (this.tab == "tab1") {
|
this.type = 1
|
|
} else if (this.tab == "tab2") {
|
this.type = 2
|
|
} else if (this.tab == "tab3") {
|
this.type = 3
|
}
|
let data = {
|
CompanyId: this.CompanyId,
|
PageIndex: this.pageIndex,
|
PageSize: 10,
|
Type: this.type
|
}
|
axios.request({
|
url: '/ComRegionMonitor/GetComRegionMonitorList',
|
data,
|
method: 'post'
|
}).then(res => {
|
if (res.data.Check) {
|
this.controlList = res.data.Data.comRegionMonitor
|
this.TotalItems = res.data.Data.TotalItems
|
}
|
})
|
},
|
changePageIndex(e) {
|
this.pageIndex = e
|
this.getControlList()
|
},
|
addControl() {
|
this.addControlForm.CompanyName = ''
|
this.IScompanies = false
|
this.areaListTabVal = []
|
this.addControlModal = true
|
},
|
addList(params) {
|
axios.request({
|
url: '/ComRegionMonitor/AddComRegionMonitor',
|
data: params,
|
method: 'post'
|
}).then(res => {
|
if (res.data.Check) {
|
this.addControlModal = false
|
this.getControlList()
|
}
|
})
|
|
},
|
saveAddControl() {
|
if (this.tab == 'tab1') {
|
if (this.addControlForm.CompanyName == '') {
|
this.$Message.error('请输入企业名称')
|
return false
|
}
|
let data = {
|
IScompanies: this.IScompanies,
|
CompanyId: this.CompanyId,
|
CompanyName: this.addControlForm.CompanyName,
|
Type: this.type
|
}
|
this.addList(data)
|
|
|
} else if (this.tab == 'tab2') {
|
if (this.addControlForm.CompanyName == '') {
|
this.$Message.error('请输入企业名称')
|
return false
|
}
|
let data = {
|
IScompanies: this.IScompanies,
|
|
CompanyId: this.CompanyId,
|
CompanyName: this.addControlForm.CompanyName,
|
Type: this.type
|
}
|
this.addList(data)
|
} else if (this.tab == 'tab3') {
|
if (this.areaListTabVal.length == 0) {
|
this.$Message.error('请选择地区名称')
|
return false
|
}
|
let data = {
|
IScompanies: this.IScompanies,
|
|
CompanyId: this.CompanyId,
|
CompanyName: this.areaListTabVal.join('-'),
|
Type: this.type
|
}
|
this.addList(data)
|
}
|
},
|
mergeRequest() {
|
this.getControlList()
|
},
|
/**
|
* 监控添加时change事件
|
**/
|
controlChange() {
|
this.selectListOp = []
|
this.loadingsele = true
|
let data = {
|
name: this.addControlForm.CompanyName
|
}
|
axios.request({
|
url: '/QiChaCha/GetTycSearch2',
|
data,
|
method: 'post'
|
}).then(res => {
|
if (res.data.Check) {
|
console.log(res.data.Data);
|
this.selectListOp = JSON.parse(JSON.stringify(res.data.Data.Items))
|
this.loadingsele = false
|
} else {
|
this.loadingsele = false
|
}
|
}, res => {
|
this.loadingsele = false
|
})
|
},
|
select_li_click(params) {
|
this.addControlForm.CompanyName = params
|
},
|
getAreaList() {
|
let a = new Date('2022')
|
let areaTime = a
|
// this.areaList = []
|
let area = []
|
let data = {
|
year: areaTime.getFullYear()
|
}
|
axios.request({
|
url: '/CityInvestment/GetAreaCascader',
|
data,
|
method: 'post'
|
}).then(res => {
|
if (res.data.Check) {
|
let a = JSON.parse(JSON.stringify(res.data.Data))
|
// this.areaListTab7=JSON.parse(JSON.stringify(res.data.Data))
|
this.areaListTab = this.getTreeData(a)
|
for (let i = 0; i < this.areaListTab.length; i++) {
|
// if (this.areaListTab[i].value === this.provinceQuery) {
|
// this.areaListTab = [this.areaListTab[i]]
|
// return
|
// }
|
}
|
} else {
|
|
}
|
}, res => {
|
|
})
|
},
|
getTreeData(data) {
|
// 循环遍历json数据
|
for (var i = 0; i < data.length; i++) {
|
if (data[i].children.length < 1) {
|
// children若为空数组，则将children设为undefined
|
data[i].children = undefined;
|
} else {
|
// children若不为空数组，则继续 递归调用 本方法
|
this.getTreeData(data[i].children);
|
}
|
}
|
return data;
|
},
|
btncontrol(e) {
|
console.log(e);
|
},
|
/**
|
* 删除企业监控table的数据
|
**/
|
deleteControl(params) {
|
this.deleteZhuti = params.CompanyName
|
|
this.deleteDocuControl = true
|
this.paramsDeleteControl = params
|
},
|
deleteDocuConfirm() {
|
let data = {
|
Id: this.paramsDeleteControl.Id
|
}
|
axios.request({
|
url: '/ComRegionMonitor/DelComRegionMonitorById',
|
data,
|
method: 'post'
|
}).then(res => {
|
if (res.data.Check) {
|
this.pageIndex = 1
|
this.getControlList()
|
this.deleteDocuControl = false
|
} else {
|
|
}
|
}, res => {
|
|
})
|
},
|
},
|
computed: {
|
controlListColumns() {
|
let columns = []
|
columns.push({
|
title: '序号',
|
key: 'index',
|
width: 80,
|
render: (h, params) => {
|
return h('span', params.index + 1)
|
},
|
align: 'center'
|
})
|
columns.push({
|
title: '出租人',
|
key: 'CompanyName',
|
minWidth: 500,
|
align: 'center'
|
})
|
columns.push({
|
title: '含下属公司',
|
key: 'IScompanies',
|
render: (h, params) => {
|
return h('span', params.row.IScompanies ? '是' : '否')
|
},
|
width: 200,
|
|
align: 'center'
|
})
|
columns.push({
|
title: '添加时间',
|
key: 'CreateDate',
|
minWidth: 150,
|
align: 'center'
|
})
|
columns.push({
|
title: '操作',
|
key: 'action',
|
slot: 'action',
|
width: 150,
|
align: 'center'
|
})
|
return columns
|
},
|
controlListColumns2() {
|
let columns = []
|
columns.push({
|
title: '序号',
|
key: 'index',
|
width: 80,
|
render: (h, params) => {
|
return h('span', params.index + 1)
|
},
|
align: 'center'
|
})
|
columns.push({
|
title: '承租人',
|
key: 'CompanyName',
|
minWidth: 500,
|
align: 'center'
|
})
|
columns.push({
|
title: '含下属公司',
|
key: 'IScompanies',
|
render: (h, params) => {
|
return h('span', params.row.IScompanies ? '是' : '否')
|
},
|
width: 200,
|
|
align: 'center'
|
})
|
columns.push({
|
title: '添加时间',
|
key: 'CreateDate',
|
minWidth: 150,
|
align: 'center'
|
})
|
columns.push({
|
title: '操作',
|
key: 'action',
|
slot: 'action',
|
width: 150,
|
align: 'center'
|
})
|
return columns
|
},
|
controlListColumns3() {
|
let columns = []
|
columns.push({
|
title: '序号',
|
key: 'index',
|
width: 80,
|
render: (h, params) => {
|
return h('span', params.index + 1)
|
},
|
align: 'center'
|
})
|
columns.push({
|
title: '地区',
|
key: 'CompanyName',
|
minWidth: 500,
|
align: 'center'
|
})
|
columns.push({
|
title: '含下属公司',
|
key: 'CompanyName',
|
render: (h, params) => {
|
return h('span', params.row.IScompanies ? '是' : '否')
|
},
|
width: 200,
|
|
align: 'center'
|
})
|
columns.push({
|
title: '添加时间',
|
key: 'CreateDate',
|
minWidth: 150,
|
align: 'center'
|
})
|
columns.push({
|
title: '操作',
|
key: 'action',
|
slot: 'action',
|
width: 150,
|
align: 'center'
|
})
|
return columns
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.emailConfigclass .ivu-input[disabled],
|
fieldset[disabled] .ivu-input {
|
cursor: not-allowed;
|
}
|
|
.copyclass .ivu-poptip-body-content-word-wrap {
|
white-space: unset;
|
}
|
|
.divarrclass04add .ivu-tag .ivu-icon-ios-close {
|
top: 0
|
}
|
|
.divarrclass04add .ivu-input:focus {
|
box-shadow: none;
|
}
|
|
.divarrclass04add .ivu-input {
|
border: none
|
}
|
|
.divarrclass04add span {
|
background: #f3f3f3;
|
padding: 5px;
|
margin: 0 5px 0 0;
|
}
|
|
.divarrclass04add {
|
display: inline-block;
|
width: 100%;
|
height: 32px;
|
line-height: 1.5;
|
font-size: 14px;
|
border: 1px solid #dcdee2;
|
border-radius: 4px;
|
color: #515a6e;
|
background-color: #fff;
|
background-image: none;
|
position: relative;
|
cursor: text;
|
padding: 9px 7px;
|
height: 40px;
|
}
|
|
.copyclass .ivu-poptip {
|
width: 100% !important;
|
}
|
|
.copyclass .ivu-poptip-rel {
|
width: 100%;
|
}
|
|
.ul_class_add {
|
background: #fff;
|
border-color: #e8eaec;
|
/*box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);*/
|
border-radius: 5px;
|
padding: 0 12px;
|
}
|
|
/*.ul_class_add li:hover{*/
|
/*color: #2D8CF0;*/
|
/*cursor: pointer;*/
|
/*}*/
|
.controlClass .ipt_width {
|
width: 100%;
|
}
|
|
.controlClass .ivu-form-item {
|
margin-bottom: 12px;
|
}
|
</style>
|
