vue中，component动态组件的实际应用（三）

vue中，component动态组件的实际应用（三）

4.2、嵌套组件二

展示效果-嵌套组件二

src\views\subgroup\ReferenceLayer.vue

参考图层属性面板列表
<template>
  <div class="reference-layer-container">
    <el-row v-for="( item, key ) of templateRenderList" :key="key">
      <el-col :span="4" class="name-label"  >{{ item.label }}</el-col>
        <el-col :span="10" class='input-label' v-if="item.isSelect">
          <el-select filterable v-model="formData[ item.bindKey ]" placeholder="请选择" class='select-pad'>
            <el-option v-for="i in formList" :key="i.value" :label="i.label" :value="i.value"></el-option>
          </el-select>
        </el-col>
              <el-col :span="10" class="input-label" v-else>
        <el-input  v-model="formData[ item.bindKey ]"/>
      </el-col>
    </el-row>
  </div>
</template>
<script>

  import renderTemplates from './renderTemplates.js';

  export default {
    name: 'ReferenceLayer',

    props: {
      layerName: {type: String, default: ''}
    },

    computed: {
      templateRenderList() {
        console.log('renderTemplates[this.layerName]',renderTemplates['RD_LINK_ACCESSLIMIT']);
        return renderTemplates['RD_LINK_ACCESSLIMIT'] || []
      },

      editObj() {
        // let editObjData = {
        //   objName: "RW_LINK",
        //   RW_LINK:{
        //     COLOR: "",
        //     FORM: 0,
        //     KIND: 1,
        //     id: 412813230905594,
        //     partition_name: 557467528
        //   },
        //   nmp:{
        //     featureObjectId: 184,
        //     uDate: 1653446047192,
        //     uRecord: 1
        //   }
        // }
        let editObjData = {
          objName: "RD_LINK_ACCESSLIMIT",
          RD_LINK_ACCESSLIMIT:{
            COLOR: "",
            FORM: 0,
            KIND: 1,
            id: 12346,
            partition_name: 798
          },
          nmp:{
            featureObjectId: 184,
            uDate: 1653446047192,
            uRecord: 1
          }
        }
        return editObjData;
        // return this.$store.state.map.editObjData;
      },

      formData() {
        const editObj = {
            COLOR: "",
            FORM: 0,
            LINK_PID: 1,
            MESH:123,
            U_RECORD:2,
            STATE:2,
            id: 12346,
            partition_name: 798
          }
        console.log('editObj123',editObj);
        if (!editObj) return {}

        const result = {}
        console.log('this.templateRenderList',this.templateRenderList);
        for (const item of this.templateRenderList) {
          const editKeyValue = editObj[item.bindKey]
          if (item.map) {
            result[item.bindKey] = item.map[editKeyValue]
          } else {
            result[item.bindKey] = editKeyValue
          }
        }
        return result
      }
    },
    data(){
      return{
        formList: [//形态
          { label: '无', value: 0 },
          { label: '新增', value: 1 },
          { label: '删除', value: 2 },
          { label: '修改', value: 3 }
        ],
      }
    }
  }
</script>

<style scoped lang="less">
  .referece-layer-container {
    padding: 9px;
    height: calc(100vh - 100px);
    overflow: auto;

    .name-label {
      font-size: 12px;
      line-height: 40px;
      color: var(--color-light);
    }

    .input-label {
      margin-top: 6px;
    }
  }
</style>

5、模板文件

src\views\subgroup\renderTemplates.js

/*------ 属性列表渲染模板 ------*/ 
/**
    * label：显示名称            
    * bindKey：后端给定的字段
    * map：针对需要转换显示内容的映射表
    [ { label: '更新记录：', bindKey: 'U_RECORD', map?: { 0: '无', 1: '新增' } } ]
-----------------------*/
// 导出的名字对应 layerName
import { default as RD_LINK } from './RdLink'
import { default as RD_LINK_ACCESSLIMIT } from './RdLinkAccessLimit'
export default {
    RD_LINK,
    RD_LINK_ACCESSLIMIT,
}

6、模板配置文件

1、嵌套模板二

src\views\subgroup\RdLinkAccessLimit.js

export default Object.freeze([
    { label: 'LINK号码', bindKey: 'LINK_PID',isSelect: false },
    { label: '图幅号码', bindKey: 'MESH' ,isSelect: false},
    { label: '行记录ID：', bindKey: 'ROW_ID' ,isSelect: false},
    { label: '更新记录：', bindKey: 'U_RECORD',isSelect: false, map: { 0: '无', 1: '新增', 2: '删除', 3: '修改' } },
    { label: '状态：', bindKey: 'STATE', isSelect: true, map: { 0: '无', 1: '新增', 2: '删除', 3: '修改' } },
    { label: '更新时间：', bindKey: 'UPDATE_DATE',isSelect: false},
])

2、嵌套模板一

src\views\subgroup\RdLink.js

const yesOrNoMap = { 0: '否', 1: '是' }
export default Object.freeze([
    { label: 'LINK号码：', bindKey: 'LINK_PID' },
    { label: '起点号码：', bindKey: 'S_NODE_PID' },
    { label: '终点号码：', bindKey: 'E_NODE_PID' },
    { label: 'LINK长度：', bindKey: 'LENGTH' },
    { label: '高程来源：', bindKey: 'Z_SOURCE', map: { 0: '实采', 1: '计算' } },
    {
        label: '高程设备来源：',
        bindKey: 'ZCOLLECT',
        map: { 1: '点云', 2: '高精轨迹', 3: 'ADAS高精度', 4: 'ADAS中精度', 5: 'DTM', 6: '中精度', 7: '低精度' }
    },
    { label: '数据分类：', bindKey: 'DATA_CLASS', map: { 0: '非HD范围内数据', 1: 'HD范围内数据' } },
    {
        label: '功能等级：',
        bindKey: 'FUNCTION_CLASS',
        map: { 1: '等级1', 2: '等级2', 3: '等级3', 4: '等级4', 5: '等级5' }
    },
    { label: 'IMI代码：', bindKey: 'IMI_CODE', map: { 0: '无', 1: '交叉点内部道路', 2: '转弯' } },
    { label: 'SA：', bindKey: 'SA', map: yesOrNoMap },
    { label: 'PA：', bindKey: 'PA', map: yesOrNoMap },
    { label: '休息区：', bindKey: 'RA', map: yesOrNoMap },
    { label: '自行车道：', bindKey: 'BICYCLE', map: yesOrNoMap },
    { label: '环岛：', bindKey: 'ROUNDABOUT', map: yesOrNoMap },
    { label: '辅路：', bindKey: 'FRONTAGE', map: yesOrNoMap },
    { label: '调头口：', bindKey: 'U_TURN', map: yesOrNoMap },
    { label: '提右：', bindKey: 'P_RIGHT_TURN', map: yesOrNoMap },
    { label: '提左：', bindKey: 'P_LEFT_TURN', map: yesOrNoMap },
    { label: '主辅路出入口：', bindKey: 'MAIN_SIDE_ACCESS', map: yesOrNoMap },
    { label: '停车位引导道路：', bindKey: 'PARKING_ACCESS', map: yesOrNoMap },
    { label: '虚拟调头口：', bindKey: 'V_U_TURN', map: yesOrNoMap },
    { label: '卡车专用道：', bindKey: 'TRUCK_ROAD', map: yesOrNoMap },
    { label: '匝道（未定义）：', bindKey: 'RAMP_GEN', map: yesOrNoMap },
    { label: '高速入口匝道：', bindKey: 'RAMP_HW_ENTRY', map: yesOrNoMap },
    { label: '高速出口匝道：', bindKey: 'RAMP_HW_EXIT', map: yesOrNoMap },
    { label: '高速互通：', bindKey: 'HW_CONN', map: yesOrNoMap },
    { label: '图幅号码：', bindKey: 'MESH' },
    { label: '行记录ID：', bindKey: 'ROW_ID' },
    { label: '更新记录：', bindKey: 'U_RECORD', map: { 0: '无', 1: '新增', 2: '删除', 3: '修改' } },
    { label: '更新时间：', bindKey: 'UPDATE_DATE' },
])