页面逻辑修改

src/views/emergen_cyrescue/emergency_information/security_agency/assurance_management/components/detail.vue

@@ -1,70 +1,126 @@
 <template>
+  <div>
     <div class="app-container">
-    <div class="filter-container" style="display: flex; justify-content: space-between;">
+      <div class="level-title">
-      <div>
+        <h1>通信机构详情</h1>
-        <el-tag>详情</el-tag>
       </div>
-      <div>
+      <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>
+    <div class="ui-height" />
+    <div class="ui-foot">
       <el-button type="primary" @click="goBack">返回基本信息</el-button>
     </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>
 </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: '',
+      Id: ''
-      treeData: [],
-      DepartmentData: [],
-      normalizer(node) {
-        return {
-          id: node.DICTIONARIES_ID,
-          label: node.name,
-          children: node.nodes
-        }
-      }
     }
   },
   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>

src/views/emergen_cyrescue/emergency_information/security_agency/assurance_management/components/list.vue

@@ -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,

src/views/emergen_cyrescue/emergency_information/security_agency/transportation_management/components/list.vue

@@ -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,