vue3+andv实现将二进制流转换为各种文件

最新推荐文章于 2024-05-30 15:12:10 发布

扶苏2

最新推荐文章于 2024-05-30 15:12:10 发布

阅读量145

点赞数 3

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_63650203/article/details/139200610

版权

1.首先我遇到的一个点就是如何将后端不同数据的字段渲染到页面上，这是要用到:field-names="fieldNames",对其进行定义自己的字段名，和后端接口查询出来的数据一样

const fieldNames= {
    title: 'dataAssetsName',
    key: 'dataAssertsId',
    parentId:'parentId'
  }

2.第二个就上对结构进行一系列的增加修改删除的操作，在#title中能够进行一些dom的操作。一些具体的操作主要是对其进行一个a-modal的编写，在子组件中进行相应的操作。通过在插槽中添加相应的dom 结构实现基本的业务结构。

<a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" :field-names="fieldNames"
        :tree-data="treeData" style="border-radius: 0px; background-color: #edecec; font-size: 15px;">
        <template #title="{ dataAssetsName, dataAssertsId ,parentId}" v-if="props.type==2">
          <div style="display: flex;">
            <FileFilled style="margin-right: 5px;" />
            <div style="margin-right: 10px;" @click="toggleControls(dataAssertsId)">{{ dataAssetsName
              }}{{ parentId }}</div>
            <div v-if="activeKey === dataAssertsId">
              <a style="margin-right: 5px">
                <PlusCircleFilled style="color: #6b6b6b;" @click="handleAdd(dataAssertsId, 0,parentId)" />/
              </a>
              <a style="margin-right: 5px">
                <MinusCircleFilled style="color: #6b6b6b;" @click="handleDelete(dataAssertsId)" />
              </a>
              <a>
                <EditFilled style="color: #6b6b6b;" @click="handleAdd(dataAssertsId, dataAssetsName)" />
              </a>
            </div>
          </div>
        </template>
</a-tree>

3、当我们的业务逻辑中有许多地方要用到相同的结构时，我们可以对树形组件进行封装，使得减少项目中的复杂程度，以及避免程序加载缓慢。在这里我们就可以用到配置项的概念，将不同的参数和方法单独封装起来，使得引用的是一个变量。在一个页面中可以同时引用同一个组件，进行相应的逻辑处理。

 //统一将三个树形的一些参数配置在configObj中
  const configObj = {
    1:{
      filedNames:{
        title: 'interfaceTypeName',
      key: 'interfaceTypeId',
      parentId: 'parentid'
      },
      //修改
      updateMethod:updateInterfaceType,
      //新增
      createMethod:addInterfaceType,
      getDataMethod:getAllInterfaceType,
      deleteMethod:deleteInterfaceType,
      title:"接口分类"
    },
    //数据资产表目录
    2:{
      filedNames:{
        title: 'dataAssetsName',
      key: 'dataAssertsId',
      parentId: 'parentId'
      },
      //修改
      updateMethod:updateDatabase,
      //新增
      createMethod:addDataAssetsContent,
      getDataMethod:getDataAssetsContent,
      deleteMethod:deleteDataAssetsContent,
      title:"数据资产表目录"
    },
    //脚本分类
    3:{
        filedNames:{
            title: 'scriptsContentName',
        key: 'scriptsContentId',
        parentId: 'parentId',
        },
        //修改
        updateMethod:updateScriptsContent,
        //新增
        createMethod:addScriptsContent,
        getDataMethod:getAllScriptsContent,
        deleteMethod:deleteScriptsContent,
        title:"脚本分类"
    }
  }
  
  const nowConfig = computed(() => configObj[props.type])

     <span>{{ nowConfig.title }}</span>
        <PlusCircleFilled style="margin-left: 5px;color: #6b6b6b;" @click="handleAdd(0,0,1)"/>
      </div>
      <div v-if="props.type == 2">
        <a-input-search v-model:value="searchQuery" @click="filterTree" style="margin-bottom: 8px" placeholder="Search" />
      </div>
      <div style="border-radius: 0px; background-color: #edecec;">
        <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" :field-names=nowConfig.filedNames
          :tree-data="treeData" style="border-radius: 0px; background-color: #edecec; font-size: 15px;">
          <template #title="obj">
              <FileFilled style="margin-right: 5px;"  />
              <a-span style="margin-right: 10px;" @click="toggleControls(obj[nowConfig.filedNames.key])" class="file-name"> {{ obj[nowConfig.filedNames.title] }}</a-span>
              <a-span class="control-icon">
                <a style="margin-right: 5px">
                  <PlusCircleFilled style="color: #6b6b6b;" @click="handleAdd(obj[nowConfig.filedNames.key], 0, obj[nowConfig.filedNames.parentId])" />
                </a>
                <a style="margin-right: 5px">
                  <MinusCircleFilled style="color: #6b6b6b;" @click="handleDelete(obj[nowConfig.filedNames.key])" />
                </a>
                <a>
                  <EditFilled style="color: #6b6b6b;" @click="handleAdd(obj[nowConfig.filedNames.key], obj[nowConfig.filedNames.title])" />
                </a>
              </a-span>
          </template>    
        </a-tree>
      </div>