Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>云医购前端插件New to Visual Studio Code? Get it now.
云医购前端插件

云医购前端插件

yyigou

|
12 installs
| (0) | Free
云医购前端vscode插件,用于快捷生成代码片段,创建文件夹、文件等操作
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

yyigou-tool

云医购前端vscode插件,用于快捷生成代码片段,创建文件夹、文件等操作

文件树结构

├─.... // 不重要的文件
├─package.json // 配置文件
├─src
|  ├─config.js // 自定义配置文件
|  ├─createFolderTemplate.js // 创建文件夹模板指令
|  ├─creatTemplate.js   // 创建模板指令
|  ├─extension.js // 扩展入口文件
|  ├─util.js // 工具类
|  ├─saveAndUpdate
|  |  .... // 模板文件
|  ├─main
|  |  .... // 模板文件
|  ├─dialog
|  |  .... // 模板文件
├─snippets // 代码片段文件夹
|    ├─default-snippets.json // 默认代码片段
|    ├─yyg-customForm-table.json
|    └─.... // 其他由模板结合config生成的代码片段.json文件
├─icon
|  └icon_128x128.png // 插件图标

插件功能清单

  • [x] 组件代码片段
    • [x] productSelect: ProductSelect 产品选择
    • [x] customerSelect: CustomerSelect 客户选择
    • [x] supplierSelect: SupplierSelect 供应商选择
    • [x] brandSelect: BrandSelect 品牌选择
    • [x] factorySelect: FactorySelect 厂家选择
    • [x] pageSlide: PageSlide 组件
    • [x] ylVxeTable: YlVxeTable 组件
    • [x] customForm: customForm 组件
    • [x] ylDialogSearch: YlDialogSearch 组件
  • [x] 页面代码片段
    • [x] yyg-customForm-table 有查询条件的列表弹窗(查询条件使用customForm)
    • [x] yyg-form-leftTree 有查询条件的左树右表弹窗
    • [x] yyg-form-table 有查询条件的列表弹窗(查询条件使用el-form)
    • [x] yyg-form 表单弹窗
    • [x] yyg-table 列表弹窗
    • [x] yyg-haveTab-index 有tab页使用customForm的查询列表-1
    • [x] yyg-haveTab-customForm-index 有tab页使用customForm的查询列表-2
    • [x] yyg-leftTree-index 左树右表查询列表
    • [x] yyg-noTab-customForm-index 无tab页使用customForm的查询列表
    • [x] yyg-noTab-form-index 无tab页使用el-form的查询列表
  • [x] 其他代码片段
    • [x] http: http请求
    • [x] removeNavPush: 打开新页面
    • [x] ccboxreserve: 清除table选中状态
    • [x] tools.getSelectValue: 枚举值转对应文案
  • [x] 右键菜单功能扩展
    • [x] 列表
      • [x] Tab页功能列表(查询条件使用customForm)
      • [x] 非Tab页功能列表(查询条件使用customForm)
      • [x] Tab页查询列表(查询条件使用customForm)
      • [x] 非Tab页查询列表(查询条件使用customForm)
      • [x] 左树右表查询列表
      • [x] 含拆单功能列表模板(查询条件使用customFormNew)
    • [x] 弹窗
      • [x] 表单弹窗模板
      • [x] 列表弹窗模板
      • [x] 有查询条件的列表弹窗(查询条件使用customForm)模板
      • [x] 有查询条件的列表弹窗(查询条件使用el-form)模板
      • [x] 有查询条件的左树右表弹窗模板

打包

vsce package

代码片段

生成代码片段 .json 文件

根据src目录下dialog/main文件夹下 .vue 文件,结合 config 配置生成代码片段所需 .json 文件,置于 snippets文件夹内

yarn snip

default-snippets.json 文件为默认的一些代码片段,包含组件代码片段及其他常用代码片段。

使用方法

在 .vue 文件中,输入指定代码即可根据提示显示对应的代码片段

  • yyg-customForm-table: 有查询条件的列表弹窗(查询条件使用customForm)
  • yyg-form-leftTree: 有查询条件的左树右表弹窗
  • yyg-form-table: 有查询条件的列表弹窗(查询条件使用el-form)
  • yyg-form: 表单弹窗
  • yyg-table: 列表弹窗
  • yyg-haveTab-index: 有tab页使用customForm的查询列表-1
  • yyg-haveTab-customForm-index: 有tab页使用customForm的查询列表-2
  • yyg-leftTree-index: 左树右表查询列表
  • yyg-noTab-customForm-index: 无tab页使用customForm的查询列表
  • yyg-noTab-form-index: 无tab页使用el-form的查询列表
  • productSelect: ProductSelect 产品选择
  • customerSelect: CustomerSelect 客户选择
  • supplierSelect: SupplierSelect 供应商选择
  • brandSelect: BrandSelect 品牌选择
  • factorySelect: FactorySelect 厂家选择
  • pageSlide: PageSlide 组件
  • ylVxeTable: YlVxeTable 组件
  • customForm: customForm 组件
  • ylDialogSearch: YlDialogSearch 组件
  • http: http请求
  • removeNavPush: 打开新页面
  • ccboxreserve: 清除table选中状态
  • tools.getSelectValue: 枚举值转对应文案

代码片段

菜单扩展

菜单拓展

列表

Tab页功能列表(查询条件使用customForm)
1. 功能操作预览

功能操作预览

2. 生成文件结构如下
├─btns.js
├─index.vue
├─Normal.vue
├─searchForm.js
├─statusList.js
├─tableCols.js
├─url.js
├─saveAndUpdate
|       ├─index.vue
|       ├─mods
|       |  ├─goodsList.vue
|       |  └goodsListTableCols.js
非Tab页功能列表(查询条件使用customForm)
1. 功能操作预览

2. 生成文件结构如下
├─btns.js
├─index.vue
├─searchForm.js
├─statusList.js
├─tableCols.js
├─url.js
├─saveAndUpdate
|       ├─index.vue
|       ├─mods
|       |  ├─goodsList.vue
|       |  └goodsListTableCols.js
Tab页查询列表(查询条件使用customForm)
1. 功能操作预览

功能操作预览

2. 生成文件结构如下
├─btns.js
├─index.vue
├─Normal.vue
├─searchForm.js
├─statusList.js
├─tableCols.js
└url.js
非Tab页查询列表(查询条件使用customForm)
1. 功能操作预览

功能操作预览

2. 生成文件结构如下
├─btns.js
├─index.vue
├─searchForm.js
├─statusList.js
├─tableCols.js
└url.js
Tab页含拆单功能列表模板(查询条件使用customFormNew)
1. 功能操作预览

功能操作预览

2. 生成文件结构如下
├─btns.js
├─index.vue
├─Normal.vue
├─searchForm.js
├─statusList.js
├─tableCols.js
├─url.js
├─saveAndUpdate
|       ├─index.vue
|       ├─mods
|       |  ├─goodsList.vue
|       |  ├─goodsListTableCols.js
|       |  ├─mods
|       |  |  ├─SelectGoods.vue
|       |  |  └tableCols.js
├─orderAdd
|    ├─index.vue
|    ├─selectOrder
|    |      ├─index.vue
|    |      ├─searchForm.js
|    |      └tableCols.js
左树右表查询列表

弹窗

  1. 在目标文件夹上右键,选择菜单对应操作
  2. 请输入您想要创建的文件名称(包括后缀),Enter确认,即可根据所输入文件名生成相应文件,文件内容默认为对应模板数据,请根据需求自行修改
  1. 表单弹窗模板
  2. 列表弹窗模板
  3. 有查询条件的列表弹窗(查询条件使用customForm)模板
  4. 有查询条件的列表弹窗(查询条件使用el-form)模板
  5. 有查询条件的左树右表弹窗模板
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft