表单开发：js增强初始化异常，请检查增强

  • Cwj
  • 2025-02-24 10:17

useFun 函数在  \src\components\LowDesign\src\LowTable\index.vue ，vite构建后存在useFun 作用域问题，导致js增强，上下文用到的 usefun 函数不是同一个。


步骤复现
1、前端自定义页面，添加表格配置项

<template>
  <div class="shop-config">
    <div class="tab">
      <div class="tab-list">
        <div
          @click="handleClick(index)"
          v-for="(item, index) in tabList.list"
          :key="index"
          class="tab-item"
          :class="{ 'tab-item-active': tabList.active === index }"
          >{{ item }}
        </div>
      </div>
      <div class="tab-content">
        <LowTable :tableId="tableId" :enhanceData="{ hideHeader: 'disabled' }"> </LowTable>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { LowTable } from '@/components/LowDesign'
const tableId = '1889993272934191106'

const tabList = ref({
  active: 0,
  list: ['本周拜访计划', '历史拜访']
})
const handleClick = (index) => {
  tabList.value.active = index
}
const list = ref([])
</script>

<style scoped lang="scss">
.shop-config {
  background: rgba(242, 242, 242, 1);
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  .tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 18px 12px 18px;
    gap: 18px;
    .main {
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(215, 215, 215, 0.482);
      padding-bottom: 16px;
      .left {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 18px;
        .top {
          display: flex;
          align-items: center;
          gap: 18px;
          .title {
            font-weight: 700;
            font-style: normal;
            font-size: 24px;
          }
          .address {
            display: flex;
            align-items: center;
            gap: 10px;
            img {
              width: 13px;
              height: 20px;
            }
            font-size: 16px;
            color: #555555;
          }
        }
        .tag {
          display: flex;
          gap: 18px;
          .tag-box {
            font-size: 16px;
            color: #333333;
            background-color: rgba(245, 154, 35, 0.24313725490196078);
            border-radius: 16px;
            padding: 6px 10px;
          }
        }
      }
      .right {
        width: 200px;
        display: flex;
        justify-content: center;
        .button {
          cursor: pointer;
          font-size: 18px;
          color: #2a82e4;
          border: 1px solid rgba(42, 130, 228, 1);
          border-radius: 24px;
          background: #fff;
          padding: 8px 30px 8px 30px;
        }
      }
    }
  }
  .tab {
    width: 100%;
    .tab-list {
      display: flex;
      width: 100%;
      .tab-item-active {
        background: url('https://z436qg.axshare.com/gsc/Z436QG/dd/9c/f4/dd9cf4b3af2f436082b690b569587b65/images/工作清单/u1.svg?pageId=5b9095a6-c895-494f-b2ed-ff69e56c3f2f');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
      }
      .tab-item {
        cursor: pointer;
        width: 50%;
        padding: 30px 0 30px 0;
        text-align: center;
        font-weight: 700;
        font-style: normal;
        font-size: 20px;
      }
    }
  }
}
</style>

2、当前表格配置自定义按钮，配置打开弹窗并加载 另一个表格配置项
image.png

// 初始化控件
useFun.controlInit('TableView', 'tableView_qyxybdidan', {
  tableId: '1892131593961562114', //
  fixedSearch: {}, //固定表格搜索值（不会被覆盖）
  enhanceData: {}, //传递给表格js增强内部调用配置
  showType: 'dialog', //弹窗类型 dialog | drawer
  popOption: { //弹窗配置
    title: '巡店', //标题
    width: '', //弹窗宽度
    fullscreen: false, //是否全屏
    footerBtn: [ //底部按钮配置
      // {
      //   params: {}, //el-button 其他参数
      //   name: '测试按钮', //按钮名称
      //   display: true, //是否显示
      //   loading: true, //点击时是否有loading
      //   icon: '', //图标
      //   clickFun: (loading) => {
      //     //点击事件
      //     if (loading) loading() //关闭loading
      //   }
      // }
    ],
    headerBtn: [], //顶部按钮配置（配置同上）
    dialogParams: {}, //弹窗其他配置
    handleClose: (done) => { //关闭弹窗前的回调
      done()
    }
  }
})

//控件调用
const { tableView_qyxybdidan } = Vue.toRefs(rendControlData.value)
// tableView_qyxybdidan.value.show = false //显示TableView
const controlData = tableView_qyxybdidan.value.params //TableView的配置
// componentRef.value.tableView_72173 TableView的Ref控件引用
// tableView_qyxybdidan.value.show = true




return {

  quxundian(row) {
    controlData.fixedSearch = {
      main_id: row.id
    }
    tableView_qyxybdidan.value.show = true
  }

}

3、本地开发模式下，一切正常。vite构建后，增强js 找不到  lowTable组件中usefun 扩展的 controlInit 函数

项目：JeeLowCode

评论区

超级管理员 2025-02-24 10:22

 回复

获取一下最新代码，这个问题应该是解决了

Cwj 2025-02-24 10:38

 回复

是哪一天提交记录呢？上周五发现的问题，我今天早上刚更新的，还存在

超级管理员 2025-02-24 11:26

 回复

@Cwj

前端代码，这个2月10号修复的，我这边用你的代码试一下看看

超级管理员 2025-02-24 11:42

 回复

@Cwj

我这边，本地和打包后看都是正常的。看一下你代码有没有更新到

image.png

Cwj 2025-02-24 13:55

 回复

好，我用源码试试


Cwj 2025-02-24 15:08

 回复

我构建完成后，自定义按钮事件不生效


Cwj 2025-02-24 15:45

 回复

我把console 放出来了，顺便打印了增强js,还是老问题
image.png

Cwj 2025-02-24 15:50

 回复

image.png

image.png

Cwj 2025-02-24 15:53

 回复

浏览器debugger 出来的  useFun函数作用域中不存在 controlInit方法。增强js中使用的useFun 应该是顶层的原型链，而不是再次声明后扩展的useFun


image.png

Cwj 2025-02-24 15:54

 回复

临时方案：我目前是把这里声明的usefun改为了useFun1，增强js中使用 usefun1


超级管理员 2025-02-24 16:58

 回复

@Cwj

奇怪了还是复现不了你这个问题，截图上useFun通用的增强方法都在就是表单开发的独自有的方法不见了，但是通用和独有的都是在一个方法扔出来的对象里面，不应该会出现一半在一半不在

超级管理员 2025-02-24 16:58

 回复

@Cwj

演示环境可以复现？

Cwj 2025-02-24 17:50

 回复

复现不了， 有本地自定义路由。可以腾讯会议

Cwj 2025-02-24 18:06

 回复

复现步骤
1、views下创建目录 ryt/shopCofnig/index.vue

<template>
  <div class="shop-config">
    <div class="tab">
      <div class="tab-list">
        <div
          @click="handleClick(index)"
          v-for="(item, index) in tabList.list"
          :key="index"
          class="tab-item"
          :class="{ 'tab-item-active': tabList.active === index }"
          >{{ item }}
        </div>
      </div>
      <div class="tab-content">
        <LowTable :tableId="tableId" :enhanceData="{ hideHeader: 'disabled' }"> </LowTable>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { LowTable } from '@/components/LowDesign'
const tableId = '表id'

const tabList = ref({
  active: 0,
  list: ['本周拜访计划', '历史拜访']
})
const handleClick = (index) => {
  tabList.value.active = index
}
const list = ref([])
</script>

<style scoped lang="scss">
.shop-config {
  background: rgba(242, 242, 242, 1);
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  .tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 18px 12px 18px;
    gap: 18px;
    .main {
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(215, 215, 215, 0.482);
      padding-bottom: 16px;
      .left {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 18px;
        .top {
          display: flex;
          align-items: center;
          gap: 18px;
          .title {
            font-weight: 700;
            font-style: normal;
            font-size: 24px;
          }
          .address {
            display: flex;
            align-items: center;
            gap: 10px;
            img {
              width: 13px;
              height: 20px;
            }
            font-size: 16px;
            color: #555555;
          }
        }
        .tag {
          display: flex;
          gap: 18px;
          .tag-box {
            font-size: 16px;
            color: #333333;
            background-color: rgba(245, 154, 35, 0.24313725490196078);
            border-radius: 16px;
            padding: 6px 10px;
          }
        }
      }
      .right {
        width: 200px;
        display: flex;
        justify-content: center;
        .button {
          cursor: pointer;
          font-size: 18px;
          color: #2a82e4;
          border: 1px solid rgba(42, 130, 228, 1);
          border-radius: 24px;
          background: #fff;
          padding: 8px 30px 8px 30px;
        }
      }
    }
  }
  .tab {
    width: 100%;
    .tab-list {
      display: flex;
      width: 100%;
      .tab-item-active {
        background: url('https://z436qg.axshare.com/gsc/Z436QG/dd/9c/f4/dd9cf4b3af2f436082b690b569587b65/images/工作清单/u1.svg?pageId=5b9095a6-c895-494f-b2ed-ff69e56c3f2f');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
      }
      .tab-item {
        cursor: pointer;
        width: 50%;
        padding: 30px 0 30px 0;
        text-align: center;
        font-weight: 700;
        font-style: normal;
        font-size: 20px;
      }
    }
  }
}
</style>

2、配置访问路径。系统管理->菜单管理创建顶层目录 xxx,访问路径为/ryt；创建子集菜单 xxx，访问路径为 shop-config，组将路径为ryt/shopConfig/index
3、配置第一张表。在线开发->表单开发。给该表创建自定义按钮
image.png

4、给该表配置增强js。目的 弹窗展示另一张表内容

// 初始化控件
useFun.controlInit('TableView', 'tableView_qyxybdidan', {
  tableId: '', //
  fixedSearch: {}, //固定表格搜索值（不会被覆盖）
  enhanceData: {}, //传递给表格js增强内部调用配置
  showType: 'dialog', //弹窗类型 dialog | drawer
  popOption: { //弹窗配置
    title: '巡店', //标题
    width: '', //弹窗宽度
    fullscreen: false, //是否全屏
    footerBtn: [], //底部按钮配置 
    headerBtn: [], //顶部按钮配置（配置同上）
    dialogParams: {}, //弹窗其他配置
    handleClose: (done) => { //关闭弹窗前的回调
      done()
    }
  }
})

//控件调用
const { tableView_qyxybdidan } = Vue.toRefs(rendControlData.value)

const controlData = tableView_qyxybdidan.value.params //TableView的配置




return {

  quxundian(row) {
    console.log("自定义按钮")
    controlData.fixedSearch = {
      main_id: row.id
    }
    tableView_qyxybdidan.value.show = true
  }
}

5、本地预览正常。修改 .env.prod


===


6、执行构建命令。并预览

pnpn run build:prod
pnpn run serve:prod


Cwj 2025-02-24 18:07

 回复

不知道为啥乱了

超级管理员 2025-02-25 09:48

 回复

@Cwj

复现不了，我从git获取最新代码，按你上面的步骤去测试，打包后是正常的没有出现你这个问题

Cwj 2025-02-25 10:32

 回复

我也是从git 获取的最新代码，可以腾讯会议吗


超级管理员 2025-02-25 10:51

 回复

@Cwj

暂时不方便，你可以试一下在lowTable写个监听 监听一下useFun变化，然后放开打印，打包上去看看。在打包直接访问表单开发的功能测试也是这样？

image.png

Cwj 2025-02-25 14:36

 回复

本地模式正常
image.png

构建完成后
image.png

Cwj 2025-02-25 14:37

 回复

目前看，是增强js中使用的usefun 是顶层的原型链

Cwj 2025-02-25 14:39

 回复

image.png

我在构建完成，增强js中打印了 useFun

超级管理员 2025-02-25 15:53

 回复

@Cwj

试一下把 lowTable顶部导入  

import useFunObj from '../utils/useFun'

给注释一下包括下面使用useFunObj的地方也注释，再打包看一下useFun


Cwj 2025-02-25 16:40

 回复

我注释了340、1641行

构建后可以使用
image.png本地模式下：
image.png

Cwj 2025-02-25 16:41

 回复

缺少了useFun 的 api，不知道会影响到哪里

超级管理员 2025-02-25 17:03

 回复

@Cwj

找到问题就方便了，

把 import useFunObj from '../utils/useFun'

改为 import defaultUseObj from '../utils/defaultUseUtil' 下面引用也改一下，然后复制一份useFun.ts文件改为defaultUseUtil.ts 看一下如果可以的话后面我统一更新一下

超级管理员 2025-02-25 17:05

 回复

估计是文件名的问题

Cwj 2025-02-25 17:23

 回复

本地模式正常
image.png构建后正常
image.png

Cwj 2025-02-25 17:24

 回复

正常使用


Cwj 2025-02-25 17:25

 回复

这个对话能否按时间倒序下，


超级管理员 2025-02-25 17:42

 回复

@Cwj

前端代码已更新

Cwj 2025-02-26 09:20

 回复

好

Cwj 2025-03-10 10:31

 回复

image.png我这里又出现了这个问题，包括 form。方便问下你们在本地调试的node、npm、pnpm 版本吗

Cwj 2025-03-10 10:31

 回复

@超级管理员

我这里又出现了这个问题，包括 form。方便问下你们在本地调试的node、npm、pnpm 版本吗

Cwj 2025-03-10 10:33

 回复

我重新拉取仓库的代码后，运行起来没问题，打包后也是这样

超级管理员 2025-03-10 10:35

 回复

@Cwj

image.png

Cwj 2025-03-10 10:41

 回复

@超级管理员

好的。我测试下

Cwj 2025-03-10 11:44

 回复

切换完成版本后我这里还是存在一样的问题。

Cwj 2025-03-10 11:45

 回复

image.pngimage.png

Cwj 2025-03-10 11:47

 回复

@超级管理员

请问， useFun在 table、form 继承后是否可以更改名称。 比如  useFunTable、useFunForm。在增强 js 中使用useFunTable、useFunForm 会不会影响到其他呢

超级管理员 2025-03-10 13:41

 回复

@Cwj

好奇怪就你这边有出现过这个问题，实在不行你可以在加个字段试一下吧

一样也是 看看吧

const useFunTable = reactive(initEnhanceUseFun())


Cwj 2025-03-10 14:03

 回复

@超级管理员

这个上下文 是可以拿得到的

Cwj 2025-03-10 14:04

 回复

@Cwj @超级管理员

image.png、还是这个方案


超级管理员 2025-03-10 14:09

 回复

@Cwj

那就全局看一下 哪些地方用了 变更一下名字或者加多个变量

或者看一下顶部引入通用的useFun是不是没有改到，毕竟上次你说可以了

现在是改成

import defaultUseObj from '../utils/defaultUseUtil'

Cwj 2025-03-10 16:12

 回复

@超级管理员

我更新了这部分代码后， 就不行了
image.png

回复