页面逻辑修改

liujun0708-动火作业流程图逻辑修改
WenShiJun 2024-07-06 17:45:26 +08:00
parent 039184942f
commit 985165d502
3 changed files with 217 additions and 69 deletions

View File

@ -1,70 +1,126 @@
<template>
<div class="app-container">
<div class="filter-container" style="display: flex; justify-content: space-between;">
<div>
<el-tag>详情</el-tag>
<div>
<div class="app-container">
<div class="level-title">
<h1>通信机构详情</h1>
</div>
<div>
<el-button type="primary" @click="goBack"></el-button>
<div class="mb-20">
<table class="table-ui">
<tr>
<td class="tbg">通信机构名称</td>
<td>{{ form.ORG_NAME }}</td>
<td class="tbg">地址</td>
<td>{{ form.ADDRESS }}</td>
</tr>
<tr>
<td class="tbg">通信机构类型</td>
<td>{{ form.ORG_TYPE_NAME }}</td>
<td class="tbg">通信机构级别</td>
<td>{{ form.ORG_LEVEL }}</td>
</tr>
<tr>
<td class="tbg">邮编</td>
<td>{{ form.POSTAL_CODE }}</td>
<td class="tbg">机构密级</td>
<td>{{ form.SECURITY_LEVEL }}</td>
</tr>
<tr>
<td class="tbg">值班电话</td>
<td>{{ form.DUTY_PHONE }}</td>
<td class="tbg">传真</td>
<td>{{ form.FAX }}</td>
</tr>
<tr>
<td class="tbg">所属区域</td>
<td colspan="3">{{ form.ADMINISTRATIVE_REGION_NAME }}</td>
</tr>
<tr>
<td class="tbg">经度</td>
<td>{{ form.LONGITUDE }}</td>
<td class="tbg">纬度</td>
<td>{{ form.LATITUDE }}</td>
</tr>
<tr>
<td class="tbg">应急通讯车数</td>
<td>{{ form.EMERGENCY_COMMUNICATION_VEHICLES }}</td>
<td class="tbg">应急发电车数</td>
<td>{{ form.EMERGENCY_POWER_VEHICLES }}</td>
</tr>
<tr>
<td class="tbg">卫星电话数</td>
<td>{{ form.SATELLITE_PHONES }}</td>
<td class="tbg">基站总数</td>
<td>{{ form.TOTAL_BASE_STATIONS }}</td>
</tr>
<tr>
<td class="tbg">应急通讯方式</td>
<td colspan="3">{{ form.EMERGENCY_COMMUNICATION_MODE }}</td>
</tr>
<tr>
<td class="tbg">负责人</td>
<td>{{ form.RESPONSIBLE_PERSON }}</td>
<td class="tbg">负责人办公电话</td>
<td>{{ form.RESPONSIBLE_OFFICE_PHONE }}</td>
</tr>
<tr>
<td class="tbg">负责人移动电话</td>
<td>{{ form.RESPONSIBLE_MOBILE_PHONE }}</td>
<td class="tbg">负责人住宅电话</td>
<td>{{ form.RESPONSIBLE_HOME_PHONE }}</td>
</tr>
<tr>
<td class="tbg">联系人</td>
<td>{{ form.CONTACT_PERSON }}</td>
<td class="tbg">联系人办公电话</td>
<td>{{ form.CONTACT_OFFICE_PHONE }}</td>
</tr>
<tr>
<td class="tbg">联系人移动电话</td>
<td>{{ form.CONTACT_MOBILE_PHONE }}</td>
<td class="tbg">联系人住宅电话</td>
<td>{{ form.CONTACT_HOME_PHONE }}</td>
</tr>
<tr>
<td class="tbg">联系人电子邮箱</td>
<td>{{ form.CONTACT_EMAIL }}</td>
</tr>
<tr>
<td class="tbg">主管单位名称</td>
<td>{{ form.SUPERVISING_UNIT_NAME }}</td>
<td class="tbg">主管单位地址</td>
<td>{{ form.SUPERVISING_UNIT_ADDRESS }}</td>
</tr>
<tr>
<td class="tbg">企业基本情况</td>
<td colspan="3">{{ form.COMPANY_OVERVIEW }}</td>
</tr>
<tr>
<td class="tbg">应急能力描述</td>
<td colspan="3">{{ form.EMERGENCY_CAPACITY_DESCRIPTION }}</td>
</tr>
<tr>
<td class="tbg">备注</td>
<td colspan="3">{{ form.REMARK }}</td>
</tr>
</table>
</div>
</div>
<el-table ref="multipleTable" :data="[form]" :header-cell-style="{'font-weight': 'bold','color': '#000'}" tooltip-effect="dark" border fit highlight-current-row>
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="ORG_NAME" label="通信机构名称" />
<el-table-column prop="ORG_TYPE" label="通信机构类型" />
<el-table-column prop="ORG_LEVEL" label="通信机构级别" />
<el-table-column prop="ADDRESS" label="地址" />
<el-table-column prop="POSTAL_CODE" label="邮编" />
<el-table-column prop="SECURITY_LEVEL" label="机构密级" />
<el-table-column prop="DUTY_PHONE" label="值班电话" />
<el-table-column prop="FAX" label="传真" />
<el-table-column prop="ADMINISTRATIVE_REGION_NAME" label="行政区域" />
<el-table-column prop="COORDINATE" label="坐标" />
<el-table-column prop="EMERGENCY_COMMUNICATION_VEHICLES" label="应急通讯车数" />
<el-table-column prop="EMERGENCY_POWER_VEHICLES" label="应急发电车数" />
<el-table-column prop="SATELLITE_PHONES" label="卫星电话数" />
<el-table-column prop="TOTAL_BASE_STATIONS" label="基站总数" />
<el-table-column prop="EMERGENCY_COMMUNICATION_MODE" label="应急通讯方式" />
<el-table-column prop="RESPONSIBLE_PERSON" label="负责人" />
<el-table-column prop="RESPONSIBLE_OFFICE_PHONE" label="负责人办公电话" />
<el-table-column prop="RESPONSIBLE_MOBILE_PHONE" label="负责人移动电话" />
<el-table-column prop="RESPONSIBLE_HOME_PHONE" label="负责人住宅电话" />
<el-table-column prop="CONTACT_PERSON" label="联系人" />
<el-table-column prop="CONTACT_OFFICE_PHONE" label="联系人办公电话" />
<el-table-column prop="CONTACT_MOBILE_PHONE" label="联系人移动电话" />
<el-table-column prop="CONTACT_HOME_PHONE" label="联系人住宅电话" />
<el-table-column prop="CONTACT_EMAIL" label="联系人电子邮箱" />
<el-table-column prop="SUPERVISING_UNIT" label="主管单位" />
<el-table-column prop="SUPERVISING_UNIT_ADDRESS" label="主管单位地址" />
<el-table-column prop="COMPANY_OVERVIEW" label="企业基本情况" />
<el-table-column prop="EMERGENCY_CAPACITY_DESCRIPTION" label="应急能力描述" />
<el-table-column prop="REMARK" label="备注" />
</el-table>
<div class="ui-height" />
<div class="ui-foot">
<el-button type="primary" @click="goBack"></el-button>
</div>
</div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { requestFN } from '@/utils/request'
import { Treeselect } from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: { Pagination, Treeselect },
data() {
return {
listQuery: {
page: 1,
limit: 10
},
total: 0,
varList: [],
KEYWORDS: '',
dialogFormEdit: false,
dialogFormShow: false,
dialogType: 'add',
form: {
ORG_NAME: '',
ORG_TYPE: '',
ORG_TYPE_NAME: '',
ORG_LEVEL: '',
ADDRESS: '',
POSTAL_CODE: '',
@ -73,7 +129,8 @@ export default {
FAX: '',
ADMINISTRATIVE_REGION: '',
ADMINISTRATIVE_REGION_NAME: '',
COORDINATE: '',
LONGITUDE: '',
LATITUDE: '',
EMERGENCY_COMMUNICATION_VEHICLES: 0,
EMERGENCY_POWER_VEHICLES: 0,
SATELLITE_PHONES: 0,
@ -89,21 +146,13 @@ export default {
CONTACT_HOME_PHONE: '',
CONTACT_EMAIL: '',
SUPERVISING_UNIT: '',
SUPERVISING_UNIT_NAME: '',
SUPERVISING_UNIT_ADDRESS: '',
COMPANY_OVERVIEW: '',
EMERGENCY_CAPACITY_DESCRIPTION: '',
REMARK: ''
},
Id: '',
treeData: [],
DepartmentData: [],
normalizer(node) {
return {
id: node.DICTIONARIES_ID,
label: node.name,
children: node.nodes
}
}
Id: ''
}
},
created() {
@ -140,12 +189,13 @@ export default {
})
},
getDetail(Id) {
const params = { Id: Id }
const params = { Id }
requestFN('/major/communication/detail', params).then((response) => {
const data = response.msg
this.form = {
ORG_NAME: data.ORG_NAME,
ORG_TYPE: data.ORG_TYPE,
ORG_TYPE_NAME: data.ORG_TYPE_NAME,
ORG_LEVEL: data.ORG_LEVEL,
ADDRESS: data.ADDRESS,
POSTAL_CODE: data.POSTAL_CODE,
@ -154,7 +204,8 @@ export default {
FAX: data.FAX,
ADMINISTRATIVE_REGION: data.ADMINISTRATIVE_REGION,
ADMINISTRATIVE_REGION_NAME: data.ADMINISTRATIVE_REGION_NAME,
COORDINATE: data.COORDINATE,
LONGITUDE: data.LONGITUDE,
LATITUDE: data.LATITUDE,
EMERGENCY_COMMUNICATION_VEHICLES: data.EMERGENCY_COMMUNICATION_VEHICLES,
EMERGENCY_POWER_VEHICLES: data.EMERGENCY_POWER_VEHICLES,
SATELLITE_PHONES: data.SATELLITE_PHONES,
@ -170,6 +221,7 @@ export default {
CONTACT_HOME_PHONE: data.CONTACT_HOME_PHONE,
CONTACT_EMAIL: data.CONTACT_EMAIL,
SUPERVISING_UNIT: data.SUPERVISING_UNIT,
SUPERVISING_UNIT_NAME: data.SUPERVISING_UNIT_NAME,
SUPERVISING_UNIT_ADDRESS: data.SUPERVISING_UNIT_ADDRESS,
COMPANY_OVERVIEW: data.COMPANY_OVERVIEW,
EMERGENCY_CAPACITY_DESCRIPTION: data.EMERGENCY_CAPACITY_DESCRIPTION,
@ -183,3 +235,13 @@ export default {
}
}
</script>
<style lang="sass" scoped>
.table-ui
td
line-height: 34px
.tbg
width: 200px
.ui-foot
text-align: center
margin-top: 20px
</style>

View File

@ -18,7 +18,7 @@
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="ORG_NAME" label="通信机构名称" width="180" />
<el-table-column prop="ORG_TYPE" label="通信机构类型" show-overflow-tooltip="true" />
<el-table-column prop="ORG_TYPE_NAME" label="通信机构类型" show-overflow-tooltip="true" />
<el-table-column prop="ORG_LEVEL" label="通信机构级别" show-overflow-tooltip="true" />
<el-table-column prop="ADDRESS" label="地址" show-overflow-tooltip="true" />
<el-table-column prop="DUTY_PHONE" label="值班电话" show-overflow-tooltip="true" />
@ -46,7 +46,16 @@
<el-input v-model="form.ORG_NAME" placeholder="请输入通信机构名称..." />
</el-form-item>
<el-form-item label="通信机构类型" prop="ORG_TYPE">
<el-input v-model="form.ORG_TYPE" placeholder="请输入通信机构类型..." />
<Treeselect
:options="yjorgTypeData"
:normalizer="normalizer"
v-model="form.ORG_TYPE"
placeholder="请选择机构类型"
no-options-text="暂无数据"
no-children-text="暂无数据"
@input="handleOrgTypeChange"
/>
</el-form-item>
<el-form-item label="通信机构级别" prop="ORG_LEVEL">
<el-input v-model="form.ORG_LEVEL" placeholder="请输入通信机构级别..." />
@ -75,6 +84,7 @@
placeholder="请选择所属区域"
no-options-text="暂无数据"
no-children-text="暂无数据"
@input="handleRegionChange"
/>
</el-form-item>
<el-row :gutter="20">
@ -145,6 +155,7 @@
placeholder="请选择主管单位"
no-options-text="暂无数据"
no-children-text="暂无数据"
@input="handleDepartmentChange"
/>
</el-form-item>
<el-form-item label="主管单位地址" prop="SUPERVISING_UNIT_ADDRESS">
@ -239,6 +250,7 @@ export default {
form: {
ORG_NAME: '',
ORG_TYPE: '',
ORG_TYPE_NAME: '',
ORG_LEVEL: '',
ADDRESS: '',
POSTAL_CODE: '',
@ -246,6 +258,7 @@ export default {
DUTY_PHONE: '',
FAX: '',
ADMINISTRATIVE_REGION: '',
ADMINISTRATIVE_REGION_NAME: '',
LONGITUDE: '',
LATITUDE: '',
EMERGENCY_COMMUNICATION_VEHICLES: 0,
@ -263,6 +276,7 @@ export default {
CONTACT_HOME_PHONE: '',
CONTACT_EMAIL: '',
SUPERVISING_UNIT: '',
SUPERVISING_UNIT_NAME: '',
SUPERVISING_UNIT_ADDRESS: '',
COMPANY_OVERVIEW: '',
EMERGENCY_CAPACITY_DESCRIPTION: '',
@ -390,6 +404,7 @@ export default {
caseSummaryList: [],
treeData: [],
DepartmentData: [],
yjorgTypeData: [],
normalizer(node) {
return {
id: node.DICTIONARIES_ID,
@ -400,11 +415,30 @@ export default {
}
},
created() {
this.getyjorgTypeDataList()
this.getList()
this.getTreeList()
this.getDepartmentList()
},
methods: {
handleRegionChange(value) {
const selectedRegion = this.treeData.find(region => region.DICTIONARIES_ID === value)
if (selectedRegion) {
this.form.ADMINISTRATIVE_REGION_NAME = selectedRegion.name
}
},
handleOrgTypeChange(value) {
const selectedOrgType = this.yjorgTypeData.find(type => type.DICTIONARIES_ID === value)
if (selectedOrgType) {
this.form.ORG_TYPE_NAME = selectedOrgType.name
}
},
handleDepartmentChange(value) {
const selectedDepartment = this.DepartmentData.find(department => department.id === value)
if (selectedDepartment) {
this.form.SUPERVISING_UNIT_NAME = selectedDepartment.label
}
},
resetQuery() {
this.KEYWORDS_ORG_NAME = ''
this.KEYWORDS_ORG_TYPE = ''
@ -415,6 +449,16 @@ export default {
this.$parent.CASE_ID = CASE_ID
this.$parent.ticketType = ticketType
},
getyjorgTypeDataList() {
const params = {
PARENT_ID: '2bd21d9d4d254f179e79f75d6377f651'
}
requestFN('/dictionaries/listTree', params).then((data) => {
this.yjorgTypeData = JSON.parse(data.zTreeNodes)
}).catch((e) => {
console.error('获取树形数据失败', e)
})
},
getDepartmentList() {
requestFN('/department/listAll').then((data) => {
this.DepartmentData = data.list.map(item => ({
@ -431,6 +475,7 @@ export default {
}
requestFN('/dictionaries/listTree', params).then((data) => {
this.treeData = JSON.parse(data.zTreeNodes)
console.log(this.treeData)
}).catch((e) => {
console.error('获取树形数据失败', e)
})
@ -590,6 +635,7 @@ export default {
Id: data.ID,
ORG_NAME: data.ORG_NAME,
ORG_TYPE: data.ORG_TYPE,
ORG_TYPE_NAME: data.ORG_TYPE_NAME,
ORG_LEVEL: data.ORG_LEVEL,
ADDRESS: data.ADDRESS,
POSTAL_CODE: data.POSTAL_CODE,
@ -597,6 +643,7 @@ export default {
DUTY_PHONE: data.DUTY_PHONE,
FAX: data.FAX,
ADMINISTRATIVE_REGION: data.ADMINISTRATIVE_REGION,
ADMINISTRATIVE_REGION_NAME: data.ADMINISTRATIVE_REGION_NAME,
LONGITUDE: data.LONGITUDE,
LATITUDE: data.LATITUDE,
EMERGENCY_COMMUNICATION_VEHICLES: data.EMERGENCY_COMMUNICATION_VEHICLES,
@ -614,6 +661,7 @@ export default {
CONTACT_HOME_PHONE: data.CONTACT_HOME_PHONE,
CONTACT_EMAIL: data.CONTACT_EMAIL,
SUPERVISING_UNIT: data.SUPERVISING_UNIT,
SUPERVISING_UNIT_NAME: data.SUPERVISING_UNIT_NAME,
SUPERVISING_UNIT_ADDRESS: data.SUPERVISING_UNIT_ADDRESS,
COMPANY_OVERVIEW: data.COMPANY_OVERVIEW,
EMERGENCY_CAPACITY_DESCRIPTION: data.EMERGENCY_CAPACITY_DESCRIPTION,

View File

@ -18,7 +18,7 @@
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="ORG_NAME" label="运输机构名称" width="180" />
<el-table-column prop="ORG_TYPE" label="运输机构类型" show-overflow-tooltip="true" />
<el-table-column prop="ORG_TYPE_NAME" label="运输机构类型" show-overflow-tooltip="true" />
<el-table-column prop="ORG_LEVEL" label="运输机构级别" show-overflow-tooltip="true" />
<el-table-column prop="ADDRESS" label="地址" show-overflow-tooltip="true" />
<el-table-column prop="DUTY_PHONE" label="值班电话" show-overflow-tooltip="true" />
@ -46,7 +46,16 @@
<el-input v-model="form.ORG_NAME" placeholder="请输入运输机构名称..." />
</el-form-item>
<el-form-item label="运输机构类型" prop="ORG_TYPE">
<el-input v-model="form.ORG_TYPE" placeholder="请输入运输机构类型..." />
<Treeselect
:options="yjorgTypeData"
:normalizer="normalizer"
v-model="form.ORG_TYPE"
placeholder="请选择机构类型"
no-options-text="暂无数据"
no-children-text="暂无数据"
@input="handleOrgTypeChange"
/>
</el-form-item>
<el-form-item label="运输机构级别" prop="ORG_LEVEL">
<el-input v-model="form.ORG_LEVEL" placeholder="请输入运输机构级别..." />
@ -72,6 +81,7 @@
placeholder="请选择所属区域"
no-options-text="暂无数据"
no-children-text="暂无数据"
@input="handleRegionChange"
/>
</el-form-item>
<el-row :gutter="20">
@ -231,12 +241,14 @@ export default {
form: {
ORG_NAME: '',
ORG_TYPE: '',
ORG_TYPE_NAME: '',
ORG_LEVEL: '',
ADDRESS: '',
POSTAL_CODE: '',
SECURITY_LEVEL: '',
DUTY_PHONE: '',
ADMINISTRATIVE_REGION: '',
ADMINISTRATIVE_REGION_NAME: '',
LONGITUDE: '',
LATITUDE: '',
EMERGENCY_TRANSPORT_MODE: '',
@ -372,6 +384,7 @@ export default {
caseSummaryList: [],
treeData: [],
DepartmentData: [],
yjorgTypeData: [],
normalizer(node) {
return {
id: node.DICTIONARIES_ID,
@ -382,11 +395,24 @@ export default {
}
},
created() {
this.getyjorgTypeDataList()
this.getList()
this.getTreeList()
this.getDepartmentList()
},
methods: {
handleRegionChange(value) {
const selectedRegion = this.treeData.find(region => region.DICTIONARIES_ID === value)
if (selectedRegion) {
this.form.ADMINISTRATIVE_REGION_NAME = selectedRegion.name
}
},
handleOrgTypeChange(value) {
const selectedOrgType = this.yjorgTypeData.find(type => type.DICTIONARIES_ID === value)
if (selectedOrgType) {
this.form.ORG_TYPE_NAME = selectedOrgType.name
}
},
handleDepartmentChange(value) {
const selectedDepartment = this.DepartmentData.find(department => department.id === value)
if (selectedDepartment) {
@ -560,6 +586,16 @@ export default {
this.listLoading = false
})
},
getyjorgTypeDataList() {
const params = {
PARENT_ID: '2bd21d9d4d254f179e79f75d6377f651'
}
requestFN('/dictionaries/listTree', params).then((data) => {
this.yjorgTypeData = JSON.parse(data.zTreeNodes)
}).catch((e) => {
console.error('获取树形数据失败', e)
})
},
//* *************************************************************
handleEdit(id) {
this.dialogFormEdit = true
@ -577,12 +613,14 @@ export default {
this.form = {
ORG_NAME: data.ORG_NAME,
ORG_TYPE: data.ORG_TYPE,
ORG_TYPE_NAME: data.ORG_TYPE_NAME,
ORG_LEVEL: data.ORG_LEVEL,
ADDRESS: data.ADDRESS,
POSTAL_CODE: data.POSTAL_CODE,
SECURITY_LEVEL: data.SECURITY_LEVEL,
DUTY_PHONE: data.DUTY_PHONE,
ADMINISTRATIVE_REGION: data.ADMINISTRATIVE_REGION,
ADMINISTRATIVE_REGION_NAME: data.ADMINISTRATIVE_REGION_NAME,
LONGITUDE: data.LONGITUDE,
LATITUDE: data.LATITUDE,
EMERGENCY_TRANSPORT_MODE: data.EMERGENCY_TRANSPORT_MODE,