AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改

2024-05-11 58
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
数据可视化DataV，5个大屏 1个月
可视分析地图（DataV-Atlas），3 个项目，100M 存储空间
简介： ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio

演示地址：RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/

更多nbcio-boot功能请看演示系统

gitee源代码地址

后端代码： https://gitee.com/nbacheng/nbcio-boot

前端代码：https://gitee.com/nbacheng/nbcio-vue.git

在线演示（包括H5） ： http://218.75.87.38:9888

1、原先 vue的HistoricDetail.vue代码如下：

<style lang="less">
</style>
<template>
  <div class="search">
    <el-tabs tab-position="top" v-model="activeName" :value="processed === true ? 'approval' : 'form'" @tab-click="changeTab">
      <el-tab-pane label="表单信息" name="form">
        <div v-if="customForm.visible"> <!-- 自定义表单 -->
            <component ref="refCustomForm" :disabled="customForm.disabled" v-bind:is="customForm.formComponent" :model="customForm.model"
                        :customFormData="customForm.customFormData" :isNew = "customForm.isNew"></component>
        </div>
        <div style="margin-left:10%;margin-bottom: 30px">
           <!--对上传文件进行显示处理，临时方案 add by nbacheng 2022-07-27 -->
           <el-upload action="#" :on-preview="handleFilePreview" :file-list="fileList" v-if="fileDisplay" />
        </div>
      </el-tab-pane >
      <el-tab-pane label="流转记录" name="record">
        <el-card class="box-card" shadow="never">
          <el-col :span="20" :offset="2">
            <div class="block">
              <el-timeline>
                <el-timeline-item v-for="(item,index) in historyProcNodeList" :key="index" :icon="setIcon(item.endTime)" :color="setColor(item.endTime)">
                  <p style="font-weight: 700">{{ item.activityName }}</p>
                  <el-card v-if="item.activityType === 'startEvent'" class="box-card" shadow="hover">
                    {{ item.assigneeName }} 在 {{ item.createTime }} 发起流程
                  </el-card>
                  <el-card v-if="item.activityType === 'userTask'" class="box-card" shadow="hover">
                    <el-descriptions :column="5" :labelStyle="{'font-weight': 'bold'}">
                      <el-descriptions-item label="实际办理">{{ item.assigneeName || '-'}}</el-descriptions-item>
                      <el-descriptions-item label="候选办理">{{ item.candidate || '-'}}</el-descriptions-item>
                      <el-descriptions-item label="接收时间">{{ item.createTime || '-'}}</el-descriptions-item>
                      <el-descriptions-item label="办结时间">{{ item.endTime || '-' }}</el-descriptions-item>
                      <el-descriptions-item label="耗时">{{ item.duration || '-'}}</el-descriptions-item>
                    </el-descriptions>
                    <div v-if="item.commentList && item.commentList.length > 0">
                      <div v-for="(comment, index) in item.commentList" :key="index">
                        <el-divider content-position="left">
                          <el-tag :type="approveTypeTag(comment.type)" size="mini">{{ commentType(comment.type) }}</el-tag>
                          <el-tag type="info" effect="plain" size="mini">{{ comment.time }}</el-tag>
                        </el-divider>
                        <span>{{ comment.fullMessage }}</span>
                      </div>
                    </div>
                  </el-card>
                  <el-card v-if="item.activityType === 'endEvent'" class="box-card" shadow="hover">
                    {{ item.createTime }} 结束流程
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-col>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="流程跟踪" name="track">
        <el-card class="box-card" shadow="never">
          <process-viewer :key="`designer-${loadIndex}`" :style="'height:' + height" :xml="xmlData"
                          :finishedInfo="finishedInfo" :allCommentList="historyProcNodeList"
          />
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {detailProcessByDataId} from "@/api/workflow/process";
import ProcessViewer from '@/components/ProcessViewer'
import {
    flowableMixin
  } from '@/views/workflow/mixins/flowableMixin'
export default {
  name: 'HistoricDetail',
  mixins: [flowableMixin],
  components: {
    ProcessViewer,
  },
    props: {
    /**/
        dataId: {
            type: String,
            default: '',
            required: true
        }
    },
    computed: {
      commentType() {
        return val => {
          switch (val) {
            case '1': return '通过'
            case '2': return '退回'
            case '3': return '驳回'
            case '4': return '委派'
            case '5': return '转办'
            case '6': return '终止'
            case '7': return '撤回'
            case '8': return '拒绝'
            case '9': return '跳过'
            case '10': return '前加签'
            case '11': return '后加签'
            case '12': return '多实例加签'
            case '13': return '跳转'
            case '14': return '收回'
          }
        }
      },
      approveTypeTag() {
        return val => {
          switch (val) {
            case '1': return 'success'
            case '2': return 'warning'
            case '3': return 'danger'
            case '4': return 'primary'
            case '5': return 'success'
            case '6': return 'danger'
            case '7': return 'info'
          }
        }
      }
    },
    data() {
        return {
          height: document.documentElement.clientHeight - 205 + 'px;',
          // 模型xml数据
          loadIndex: 0,
          xmlData: undefined,
          finishedInfo: {
            finishedSequenceFlowSet: [],
            finishedTaskSet: [],
            unfinishedTaskSet: [],
            rejectedTaskSet: []
          },
          historyProcNodeList: [],
          processed: false,
          activeName:'form', //获取当然tabname
          customForm: { //自定义业务表单
            formId: '',
            title: '',
            disabled: false,
            visible: false,
            formComponent: null,
            model: {},
            /*流程数据*/
            customFormData: {},
            isNew: false,
            disableSubmit: true
          },
          fileDisplay: false, // formdesigner是否显示上传的文件控件
          fileList: [], //表单设计器上传的文件列表
        };
    },
    created() {
        this.init();
    },
    watch: {
      dataId: function(newval, oldName) {
            this.init();
        }
    },
    methods: {
      init() {
       // 获取流程变量
       this.detailProcesssByDataId(this.dataId);
      },
      detailProcesssByDataId(dataId) {
        const params = {dataId: dataId}
        detailProcessByDataId(params).then(res => {
          console.log("detailProcessByDataId res=",res);
          if (res.code === 200 && res.data != null) {
            const data = res.data;
            this.xmlData = data.bpmnXml;
            this.processFormList = data.processFormList;
            if(this.processFormList.length == 1 &&
               this.processFormList[0].formValues.hasOwnProperty('routeName')) {
               this.customForm.disabled = true;
               this.customForm.visible = true;
               this.customForm.formComponent = this.getFormComponent(this.processFormList[0].formValues.routeName).component;
               this.customForm.model = this.processFormList[0].formValues.formData;
               this.customForm.customFormData = this.processFormList[0].formValues.formData;
               console.log("detailProcess customForm",this.customForm);
            }
            this.historyProcNodeList = data.historyProcNodeList;
            this.finishedInfo = data.flowViewer;
          }
        })
      },
      changeTab(tab, event) {
        console.log("changeTab tab=",tab);
        if(tab.name === 'form') {
          console.log("changeTab this.processFormList=",this.processFormList);
          if(this.customForm.formId === "") {
            // 回填数据,这里主要是处理文件列表显示,临时解决，以后应该在formdesigner里完成
            this.processFormList.forEach((item, i) => {
              if (item.hasOwnProperty('list') && item.list != null) {
                this.fillFormData(item.list, item)
                // 更新表单
                this.key = +new Date().getTime()
              }
            });
          }
        }
      },
      setIcon(val) {
        if (val) {
          return "el-icon-check";
        } else {
          return "el-icon-time";
        }
      },
      setColor(val) {
        if (val) {
          return "#2bc418";
        } else {
          return "#b3bdbb";
        }
      },
      fillFormData(list, formConf) { // for formdesigner
        console.log("fillFormData list=",list);
        console.log("fillFormData formConf=",formConf);
        list.forEach((item, i) => {
          // 特殊处理el-upload，包括 回显图片
          if(formConf.formValues[item.id] != '') {
            const val = formConf.formValues[item.id];
            if (item.ele === 'el-upload') {
              console.log('fillFormData val=',val)
              if(item['list-type'] != 'text') {//图片
                this.fileList = []    //隐藏加的el-upload文件列表
                //item['file-list'] = JSON.parse(val)
                if(val != '') {
                  item['file-list'] = JSON.parse(val)
                }
              }
              else {  //列表
                console.log("列表fillFormData val",val)
                this.fileList = JSON.parse(val)
                item['file-list'] = [] //隐藏加的表单设计器的文件列表
              }
              // 回显图片
              this.fileDisplay = true
            }
          }
          if (Array.isArray(item.columns)) {
            this.fillFormData(item.columns, formConf)
          }
        })
      },
    }
};
</script>
<style lang="scss" scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.box-card {
  width: 100%;
  margin-bottom: 20px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.button-new-tag {
  margin-left: 10px;
}
</style>

2、修改成vue3后的代码如下：

<style lang="less">
</style>
<template>
  <div class="search">
    <el-tabs tab-position="top" v-model="activeName" :value="processed === true ? 'approval' : 'form'" @tab-click="changeTab">
      <el-tab-pane label="表单信息" name="form">
        <div v-if="customForm.visible"> <!-- 自定义表单 -->
            <component ref="refCustomForm" :disabled="customForm.disabled" :is="customForm.formComponent" :model="customForm.model"
                        :customFormData="customForm.customFormData" :isNew = "customForm.isNew"></component>
        </div>
        <div style="margin-left:10%;margin-bottom: 30px">
           <!--对上传文件进行显示处理，临时方案 add by nbacheng 2022-07-27 -->
           <el-upload action="#" :on-preview="handleFilePreview" :file-list="fileList" v-if="fileDisplay" />
        </div>
      </el-tab-pane >
      <el-tab-pane label="流转记录" name="record">
        <el-card class="box-card" shadow="never">
          <el-col :span="20" :offset="2">
            <div class="block">
              <el-timeline>
                <el-timeline-item v-for="(item,index) in historyProcNodeList" :key="index" :icon="setIcon(item.endTime)" :color="setColor(item.endTime)">
                  <p style="font-weight: 700">{{ item.activityName }}</p>
                  <el-card v-if="item.activityType === 'startEvent'" class="box-card" shadow="hover">
                    {{ item.assigneeName }} 在 {{ item.createTime }} 发起流程
                  </el-card>
                  <el-card v-if="item.activityType === 'userTask'" class="box-card" shadow="hover">
                    <el-descriptions :column="5" :labelStyle="{'font-weight': 'bold'}">
                      <el-descriptions-item label="实际办理">{{ item.assigneeName || '-'}}</el-descriptions-item>
                      <el-descriptions-item label="候选办理">{{ item.candidate || '-'}}</el-descriptions-item>
                      <el-descriptions-item label="接收时间">{{ item.createTime || '-'}}</el-descriptions-item>
                      <el-descriptions-item label="办结时间">{{ item.endTime || '-' }}</el-descriptions-item>
                      <el-descriptions-item label="耗时">{{ item.duration || '-'}}</el-descriptions-item>
                    </el-descriptions>
                    <div v-if="item.commentList && item.commentList.length > 0">
                      <div v-for="(comment, index) in item.commentList" :key="index">
                        <el-divider content-position="left">
                          <el-tag :type="approveTypeTag(comment.type)" size="small">{{ commentType(comment.type) }}</el-tag>
                          <el-tag type="info" effect="plain" size="small">{{ comment.time }}</el-tag>
                        </el-divider>
                        <span>{{ comment.fullMessage }}</span>
                      </div>
                    </div>
                  </el-card>
                  <el-card v-if="item.activityType === 'endEvent'" class="box-card" shadow="hover">
                    {{ item.createTime }} 结束流程
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-col>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="流程跟踪" name="track">
        <el-card class="box-card" shadow="never">
          <process-viewer :key="`designer-${loadIndex}`" :style="'height:' + height" :xml="xmlData"
                          :finishedInfo="finishedInfo" :allCommentList="historyProcNodeList"
          />
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
  import {detailProcessByDataId} from "@/api/workflow/process";
  import ProcessViewer from '@/components/ProcessViewer'
  import {
      useFlowable
  } from '@/views/workflow/hooks/useFlowable'
  defineOptions({ name: 'HistoricDetail' })
  const props = defineProps({
    dataId: {
        type: String,
        default: '',
        required: true
    }
  })
  const commentType = computed(() => {
    return val => {
      switch (val) {
        case '1': return '通过'
        case '2': return '退回'
        case '3': return '驳回'
        case '4': return '委派'
        case '5': return '转办'
        case '6': return '终止'
        case '7': return '撤回'
        case '8': return '拒绝'
        case '9': return '跳过'
        case '10': return '前加签'
        case '11': return '后加签'
        case '12': return '多实例加签'
        case '13': return '跳转'
        case '14': return '收回'
      }
    }
  })
  const approveTypeTag = computed(() => {
    return val => {
      switch (val) {
        case '1': return 'success'
        case '2': return 'warning'
        case '3': return 'danger'
        case '4': return 'primary'
        case '5': return 'success'
        case '6': return 'danger'
        case '7': return 'info'
      }
    }
  })
  const { getFormComponent } = useFlowable()
  const height = ref(document.documentElement.clientHeight - 205 + 'px;')
  // 模型xml数据
  const loadIndex = ref(0)
  const xmlData = ref(null)
  const finishedInfo = ref({
    finishedSequenceFlowSet: [],
    finishedTaskSet: [],
    unfinishedTaskSet: [],
    rejectedTaskSet: []
  })
  const historyProcNodeList = ref<any>([])
  const processed = ref(false)
  const activeName = ref('form') //获取当然tabname
  const processFormList = ref<any>([])
  const customForm =  ref({ //自定义业务表单
    formId: '',
    title: '',
    disabled: false,
    visible: false,
    formComponent: null,
    model: {},
    /*流程数据*/
    customFormData: {},
    isNew: false,
    disableSubmit: true
  })
  const fileDisplay = ref(false) // formdesigner是否显示上传的文件控件
  const fileList = ref<any>([]) //表单设计器上传的文件列表
  const key = ref<any>()
  const init = () => {
   // 获取流程变量
   detailProcesssByDataId(props.dataId);
  }
  const detailProcesssByDataId = (dataId) => {
    const params = {dataId: dataId}
    detailProcessByDataId(params).then(res => {
      console.log("detailProcessByDataId res=",res);
      if (res.code === 200 && res.data != null) {
        const data = res.data;
        xmlData.value = data.bpmnXml;
        processFormList.value = data.processFormList;
        if(processFormList.value.length == 1 &&
           processFormList.value[0].formValues.hasOwnProperty('routeName')) {
           customForm.value.disabled = true;
           customForm.value.visible = true;
           customForm.value.formComponent = getFormComponent(processFormList.value[0].formValues.routeName).component;
           customForm.value.model = processFormList.value[0].formValues.formData;
           customForm.value.customFormData = processFormList.value[0].formValues.formData;
           console.log("detailProcess customForm.value",customForm.value);
        }
        historyProcNodeList.value = data.historyProcNodeList;
        finishedInfo.value = data.flowViewer;
      }
    })
  }
  const changeTab = (tab, event) => {
    console.log("changeTab tab=",tab);
    const tabname = toRaw(tab);
    if(tabname.paneName.value === 'form') {
      console.log("changeTab processFormList.value=",processFormList.value);
      if(customForm.value.formId === "") {
        // 回填数据,这里主要是处理文件列表显示,临时解决，以后应该在formdesigner里完成
        processFormList.value.forEach((item, i) => {
          if (item.hasOwnProperty('list') && item.list != null) {
            fillFormData(item.list, item)
            // 更新表单
            key.value = +new Date().getTime()
          }
        });
      }
    }
  }
  const setIcon = (val) => {
    if (val) {
      return "el-icon-check";
    } else {
      return "el-icon-time";
    }
  }
  const setColor = (val) => {
    if (val) {
      return "#2bc418";
    } else {
      return "#b3bdbb";
    }
  }
  const fillFormData = (list, formConf) => { // for formdesigner
    console.log("fillFormData list=",list);
    console.log("fillFormData formConf=",formConf);
    list.forEach((item, i) => {
      // 特殊处理el-upload，包括 回显图片
      if(formConf.formValues[item.id] != '') {
        const val = formConf.formValues[item.id];
        if (item.ele === 'el-upload') {
          console.log('fillFormData val=',val)
          if(item['list-type'] != 'text') {//图片
            fileList.value = []    //隐藏加的el-upload文件列表
            //item['file-list'] = JSON.parse(val)
            if(val != '') {
              item['file-list'] = JSON.parse(val)
            }
          }
          else {  //列表
            console.log("列表fillFormData val",val)
            fileList.value = JSON.parse(val)
            item['file-list'] = [] //隐藏加的表单设计器的文件列表
          }
          // 回显图片
          fileDisplay.value = true
        }
      }
      if (Array.isArray(item.columns)) {
        fillFormData(item.columns, formConf)
      }
    })
  }
  onMounted(() => {
    init();
  });
</script>
<style lang="scss" scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.box-card {
  width: 100%;
  margin-bottom: 20px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.button-new-tag {
  margin-left: 10px;
}
</style>

3、效果图如下：


文章标签：
DataV数据可视化
JavaScript
前端开发
移动开发
关键词：
vue3组件VUE.js
信息VUE.js
vue3自定义组件VUE.js
vue3自定义VUE.js
自定义VUE.js
相关实践学习
Github实时数据分析与可视化
基于Github Archive公开数据集，将项目、行为等20+种事件类型数据实时采集至Hologres进行分析，并搭建可视化大屏。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程，理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上，理解并学会运用各个服务组件，了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准，准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
宁波阿成.
目录
相关文章
杀死一只知更鸟debug
|
5天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用，包括单个插槽和多个具名插槽的定义及在父组件中的使用方法，展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
杀死一只知更鸟debug
14 1
sunyalei
|
4天前
|
缓存 监控 UED
升级 Vue3 时，如何减少打包体积的增加？
升级 Vue3 时，如何减少打包体积的增加？
sunyalei
81 59
sunyalei
|
4天前
|
API UED
如何实现Vue2项目升级Vue3？
如何实现Vue2项目升级Vue3？
sunyalei
11 1
人间真情在哪儿
|
4天前
|
JavaScript
vue 函数化组件
vue 函数化组件
人间真情在哪儿
11 1
sunyalei
|
4天前
|
API UED
升级 Vue3 后，项目的打包体积会有什么变化？
升级 Vue3 后，项目的打包体积会有什么变化？
sunyalei
9 0
人间真情在哪儿
|
3天前
|
JavaScript
vue消息订阅与发布
vue消息订阅与发布
人间真情在哪儿
108 59
游客qeoynko2nmbgk
|
4天前
|
JavaScript 前端开发 IDE
Vue学习笔记5：用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5：用Vue的事件监听 实现数据更新的实时视图显示
游客qeoynko2nmbgk
21 7
游客qeoynko2nmbgk
|
4天前
|
JavaScript 前端开发 API
Vue学习笔记4：用reactive() 实现数据更新的实时视图显示
Vue学习笔记4：用reactive() 实现数据更新的实时视图显示
游客qeoynko2nmbgk
22 5
刘大猫.
|
2天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.（了解）表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.（了解）表单校验插件】
刘大猫.
11 4
刘大猫.
|
2天前
|
JavaScript
vue尚品汇商城项目-day07【51.路由懒加载】
vue尚品汇商城项目-day07【51.路由懒加载】
刘大猫.
12 4

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VUE element-ui之form表单中input输入超过规定长度error提醒，并实时显示输入长度，可无限输入
  • 3
    【第12期】Vue3+TypeScript+Vite中动态引入图片等静态资源
  • 4
    基于Vue和SpringBoot的电商管理系统的设计与实现（一）
  • 5
    前端vue给后端list集合对象传值
  • 6
    VUE组件：如何在Vue中实现组件的动态引入？
  • 7
    Vue3 自定义指令实现元素点击的节流与输入框的防抖,后端老哥再也不用担心我频繁发送请求了
  • 8
    Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
  • 9
    vue后台管理系统小功能
  • 10
    Vue —— 基础（二）（计算属性、监听属性）
  • 1
    【vue的技术要点】
    78
  • 2
    【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
    394
  • 3
    在vue中，在哪个生命周期内调用异步请求？
    251
  • 4
    在vue中，Vue 的父组件和子组件生命周期钩子函数执行顺序？
    64
  • 5
    在vue中，直接给一个数组项赋值，Vue 能检测到变化吗？
    206
  • 6
    在vue中，computed 和 watch 的区别和运用的场景？
    64
  • 7
    在vue中，怎样理解 Vue 的单向数据流？
    60
  • 8
    在vue中，Class 与 Style 如何动态绑定？
    43
  • 9
    在vue中，v-show 与 v-if 有什么区别？
    40
  • 10
    在vue中，如何实现SPA单页面应用的路由管理？
    58

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • Springboot项目云开发快速迁移

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • ROS模板参数动态展示
    • 下一篇
    无影云桌面