kailong321200875 / vue-element-plus-admin Goto Github PK

I want to pass value to different components not only the textbox. For e.g: CheckBox or ComboBox...
I checked the example and it's fixed values

F:\学灯网录制的视频教程\前端脚手架20220407\vue-element-plus-admin-master\node_modules.pnpm\[email protected][email protected]\node_modules\vite-plugin-html\dist\index.cjs:125
const proxy = viteConfig.server?.proxy ?? {};
^

SyntaxError: Unexpected token '.'
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object. (F:\学灯网录制的视频教程\前端脚手架20220407\vue-element-plus-admin-master\vite.config.ts:46:31)
at Module._compile (internal/modules/cjs/loader.js:999:30)
at Object.require.extensions. [as .ts] (F:\学灯网录制的视频教程\前端脚手架20220407\vue-element-plus-admin-master\node_modules.pnpm\[email protected][email protected]\node_modules\vite\dist\node\chunks\dep-9c153816.js:71416:20)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at loadConfigFromBundledFile (F:\学灯网录制的视频教程\前端脚手架20220407\vue-element-plus-admin-master\node_modules.pnpm\[email protected][email protected]\node_modules\vite\dist\node\chunks\dep-9c153816.js:71424:17)
at loadConfigFromFile (F:\学灯网录制的视频教程\前端脚手架20220407\vue-element-plus-admin-master\node_modules.pnpm\[email protected][email protected]\node_modules\vite\dist\node\chunks\dep-9c153816.js:71343:32)
Waiting for the debugger to disconnect...
 ELIFECYCLE  Command failed with exit code 1.

Hello @kailong321200875
How can I update my current version?

作者您好,我有两个路由问题,向您请教

1. 生成的嵌套路由的问题
   为什么使用 createRouter 生成二级路由

   // 文件地址:  utils/routerHelper.ts
   

const promoteRouteLevel = (route: AppRouteRecordRaw) => {
let router: Router | null = createRouter({
routes: [route as unknown as RouteRecordNormalized],
history: createWebHashHistory()
})
.....
}

2. 用 createRouter 生成的路由有个问题, 
   二级及更深的路由的 path 属性的设置, 不能 '/menu1', 只能 'menu1'
   如果是 '/menu1' 这样的路径, 生成的路由就不是全路径了,页面就读取不到这个路由了
   这是忘记对这块进行处理了吗?

感谢您看我的问题~

头部menu右键菜单点开时，上一个右键菜单没有被关闭

Hello @kailong321200875
I'd like to use any component without any label like following.

Hello @kailong321200875
CRUD Schema you created is very smart and intelligent so it's very convenient to use.
And I'd like to know how to change the orders in search bar.
For example the order in table is A, B, C, D and the order in search form is B, A, D, C.
Is this possible in CRUD Schema?

Hi,

How can I use this for a project I'm working on? What are the steps required to use this as a plain template for my use case? I there any specific file I need to remove?

Hello @kailong321200875
I'd like to use a default label and another label in form.
I tried like following but not working.

Can I fix this?

Hello @kailong321200875
I used this statement to fix select component width but not working yet. No changes.

请教作者
比如 用户列表密码项， 页面不用显示，但是编辑里面可以出现。
另外某个列数据如果使用自定义组件，有没有案例可供参考
谢谢

点详情的时候能显示上方的tag吗，并且tag名称直接显示标题的名称，并且同时可以打开多个。

低版本谷歌（78.x.xxx.xxx）？或者？？可选链写法不支持报错，需要升级到最新版本

Hello @kailong321200875
I'm just developing frontend side using this template and have 401 error code in response when the session is expired in backend side.
The backend is not editable so I handle response and logout manually.
I think the code will be here.

// config/axios/index.ts
// response 拦截器
service.interceptors.response.use(
  (response: AxiosResponse<Recordable>) => {
    if (response.data.code === result_code) {
      return response
    } else {
      ElMessage.error(response.data.msg)

      // handle here. Expected code will be here I think.....
      if (response.data.code === 401 && response.data.msg === '登陆过期！') {
        wsCache.clear()
        tagsViewStore.delAllViews()
        resetRouter() // 重置静态路由表
        router.replace('/login')
      }
    }
  },
  (error: AxiosError) => {
    console.log('err' + error) // for debug
    ElMessage.error(error.message)
    return Promise.reject(error)
  }
)

But it's not working.
How can I fix this?
Sorry for asking basic question.

Hello @kailong321200875
I tried to use api option in Select component to fetch options from backend directly.
But there is no request.
I used formSchema and useForm hook.

What's wrong?

作者您好，首先非常感谢你的这一套项目，对于我们帮助很大
如今我遇到这样一个问题，就是Dialog组件和Form配合使用时会报错
The form is not registered. Please use the register method to register
按照你给的例子分开，将Form当成一个组件不会报错，但实际在开发中往往有时写在一起会更方便一些，不知道这个问题是设计如此还是存在的问题呢

如题
点击标签页最右侧按钮，菜单正常

prettier is not working.

It always tell me that it cannot format 'xxx' files, like the pic below.

I've try my other projects, and they all work fine, so I do not think it is vscode error or prettier settings error.

Hello @kailong321200875
I'd like to use Crud schema for Input component with a label right and custom size. Like in this image.

I just tried like this one.

  {
    field: 'hasChild',
    label: '生育情況',
    form: {
      component: 'Select',
      colProps: {
        span: 4
      },
      show: true
    },
    table: {
      show: false
    }
  },
  {
    field: 'boyNum',
    label: '',
    form: {
      component: 'Input',
      colProps: {
        span: 2
      },
      show: true
    },
    table: {
      show: false
    }
  },
  {
    field: 'girlNum',
    label: '',
    form: {
      component: 'Input',
      colProps: {
        span: 2
      },
      show: true
    },
    table: {
      show: false
    }
  },

The result is like this.

I should fix this but how can?

Hello @kailong321200875
I use span to set grid in select component in crud schema but is not working.

  {
    field: 'isMarried',
    label: '婚姻狀況',
    form: {
      component: 'Select',
      colProps: {
        span: 8
      },
      show: true
    },
    table: {
      show: false
    }
  },

The result is like this one.

Actually it's working well in Input but not others including DatePicker.
How can I fix?

希望加一个新建菜单的页面,规定下icon与title

Hello @kailong321200875
I tried to use useValidator to validate it's mobile number or not.
Like here.

But I'm not sure how I can use this func, especially parameters.

How can I fix?

Hello @kailong321200875
Can I use ref in component in CRUD schema?
Like this one.

const my = ref(false)

// Schema
  {
    field: 'my',
    label: '',
    form: { show: false },
    table: { show: false },
    search: {
      show: true,
      component: 'Hidden',
      colProps: { span: 0 },
      value: my
    }
  },

const myOrder = () => {
  my.value = !my.value
}

But the value is not changing along to myOrder() function.
How can I fix?

Hello @kailong321200875
I hope you had a good weekend.
And I'd like to change the height of dialog because it has only fixed height without necessary. Like this.

如题。

你们好，不知道为什么el-table-column 里面添加的按钮并不展示在页面上，单独添加的按钮是可以展示的，不知道是为什么。
页面展示如图：

代码：
<el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="260"> <template #action="{ row }"> <el-button>Default</el-button> <el-button type="text" icon="el-icon-edit" @click="handleUpdate(row)">修改</el-button> <el-button type="text" icon="el-icon-circle-check" @click="handleDataScope(row)" >数据权限</el-button > <el-button v-if="row.roleId > 2" type="text" icon="el-icon-delete" @click="handleDelete(row)" >删除</el-button > </template> </el-table-column>

怎么在本地代理配置，vite.config.ts
以下代码一直在404错误：
server: { proxy: { // 选项写法 '/api': { target: 'http://47.***.***.***', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } }, hmr: { overlay: false }, host: '0.0.0.0' },

Hello @kailong321200875
I'd like to go to /login when the session is expired in the backend side.
But below code works sometimes but not other times.
In case of not working, router.replace() only changes the value of url in browser link bar, not execute.
How can I fix?

// response 拦截器
service.interceptors.response.use(
  (response: AxiosResponse<Recordable>) => {
    console.log(response.data)
    if (response.data.code === result_code) {
      return response
    } else if (response.data.code === 401 && response.data.msg === '登陆过期！') {
      wsCache.clear()
      tagsViewStore.delAllViews()
      resetRouter() // 重置静态路由表
      router.replace({
        path: '/login'
      })
    } else {
      ElMessage.error(response.data.msg)
    }
  },
  (error: AxiosError) => {
    console.log('err' + error) // for debug
    ElMessage.error(error.message)
    return Promise.reject(error)
  }
)

您好，demo下载到本地电脑运行时，登录和其他接口的代理域名代码是在哪里？
vite.config.ts里的proxy代码是注释的，所以目前找不到默认接口的代理是在哪？

如题 谢谢大佬

Hello @kailong321200875
I have search bar with input and select components.
No problems in input but not in select.
Now I'm updating my previous version using this template and it's load options from backend originally.
I'd like to establish this function by editing search schema.

Just want to set componentProps using link of api from backend.
Like this one.

componentsProps: '/sys/dict/option-list'

Is this possible?

Hello @kailong321200875
Thank you for your kind responses.

I tried to deploy my project on vercel and it's done.
But the api is not working.
vite.config.ts

src/config/axios/config.ts

When I try to make a request in deployed website, 404 error is occured.

How can I fix?

I think this is typing bug in https://element-plus-admin-doc.cn/components/form.html#useform.

谢谢

Hello @kailong321200875
Actually I used to use React.js and Vue.js is first for me.
And I'd like to declare variable like Ref and v-model in Schema to handle in script setup.
For example there are two components type and list like following

The list in the right should be changed along the type.
But I have no solution to do this now.
Only thing I can do is to get value using getFormData() from whole schema when radio is changed and then execute setSchemaOption().
I think this is not the best solution.
How can I fix?

Hell @kailong321200875
I used componentProps: { style: { width: '100%' } } to set width fit in datepicker component but not working well.

Hello @kailong321200875
I'd like to show placeholder in input in search and pass string on schema.
But I can't find any props in form schema.

How can I fix?

您好：
在api目录同级，新建api_base目录放入从swagger生成的接口文件，为什么报错404？

1，vite.config.ts配置了域名，

2，src/config/axios/config.ts也配置了域名

Hello @kailong321200875
Thank you for your kind response.
Those are the most helpful for me.
Thank you again.

And I got another issue and here is.
It's just code formatting problem.

1. I enjoy using prettier for code formatting and it's working well in other projects and also checked now.
   but it's not working in this template.
   I can't find that in formatter list, like following.
   
   How can I fix this?

2. Why is this error occurred?
   
   It's just code format error(eslint related) and possible to affect project running?
   What formatter extension should I use fix this formatting error automatically in vscode?

Hello @kailong321200875
I have an issue in using an AutoComplete component.
I need to show dropdown with HEADER like this one.

But I can't handle the header like above.

How can I fix?

RT

Axios如何配Authorization? config.headers['Authorization'] = token 会出错

const adminList = [ { path: '/level', component: '#', redirect: '/level/menu1', name: 'Level', meta: { title: 'router.level', icon: 'carbon:skill-level-advanced' }, children: [ { path: 'menu1', name: 'Menu1', component: 'views/Level/Menu2', meta: { title: 'router.menu1' } }, { path: 'menu2', name: 'Menu2Demo', component: 'views/Level/Menu2', meta: { title: 'router.menu2' } } ] }, { path: '/level3', component: '#', redirect: '/level/menu1/menu1-1/menu1-1-1', name: 'Level3', meta: { title: 'router.level', icon: 'carbon:skill-level-advanced' }, children: [ { path: 'menu1', name: 'Menu13', component: 'views/Level/Menu2', meta: { title: 'router.menu1' } }, { path: 'menu2', name: 'Menu23Demo', component: 'views/Level/Menu2', meta: { title: 'router.menu2' } } ] } ]

Hello @kailong321200875
I forked example dialog page and should set some string to a input component.
I can get form data using getFormData() but setValue() is not a defined function here.
I logged write but it doesn't have a methods.
What's wrong?

我根据您的模板做了一套, vuecli 并且没有使用 ts 开发的模板,不知道是否有机会, 可以给您看一下?

Hello @kailong321200875
This is amazing open source template with Vite and Elementplus.
Thank you for your effort.

And I have an issue.
I always get undefined response when I make a request in api.

// api/login/index.ts
export const loginApi = async (data: UserLoginType): Promise<IResponse> => {
  const res = await request.post({
    url: '/index/login/system',
    headersType: 'application/x-www-form-urlencoded',
    data
  })
  console.log('in api: ', res)
  // this returns undefined. but there's correct response when I checked in console.
  return res && res.data
}

// vite.config.ts
    ...
    server: {
      port: 4000,
      proxy: {
        // 选项写法
        '/api': {
          target: 'http://35.194.244.237:9998',
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, '')
        }
      },
      hmr: {
        overlay: false
      },
      host: '0.0.0.0'
    },
   ...

I also tried with sample api link for test.
https://jsonplaceholder.typicode.com/todos/1
But the result is the same.

How can I fix this?

keep-alive好像没效啊= =我每次切换都能执行onMounted