# hy-template-gen

> 生成通用element-ui模板代码

Latest version **1.1.3** (published 2023-05-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install hy-template-gen
pnpm add hy-template-gen
yarn add hy-template-gen
bun add hy-template-gen
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2023-05-25 |
| First published | 2022-08-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 27 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | hongyu |
| Maintainers | hongyu163 |
| Keywords | genorator, element-ui, template |

## Links

- npm: https://www.npmjs.com/package/hy-template-gen
- npm.io page: https://npm.io/package/hy-template-gen

## Alternatives

- [localforage](https://npm.io/package/localforage.md) — 6.2M weekly downloads
- [localforage-observable](https://npm.io/package/localforage-observable.md) — 30.8K weekly downloads
- [@y/y](https://npm.io/package/@y/y.md) — 30.1K weekly downloads
- [@metaobjectsdev/render](https://npm.io/package/@metaobjectsdev/render.md) — 3.5K weekly downloads
- [@ledgerhq/coin-algorand](https://npm.io/package/@ledgerhq/coin-algorand.md) — 1.1K weekly downloads

## Recent versions

- 1.1.3 (latest) — 2023-05-25
- 1.1.2 — 2023-05-25
- 1.1.0 — 2023-05-25
- 1.0.22 — 2022-11-04
- 1.0.21 — 2022-09-30
- 1.0.20 — 2022-09-16
- 1.0.19 — 2022-09-16
- 1.0.18 — 2022-09-09
- 1.0.17 — 2022-09-08
- 1.0.16 — 2022-09-08
- 1.0.15 — 2022-09-07
- 1.0.14 — 2022-09-07
- 1.0.13 — 2022-09-07
- 1.0.12 — 2022-09-07
- 1.0.11 — 2022-09-07
- … 11 more at https://npm.io/package/hy-template-gen/versions

## README

## 使用函数生成增删改查页面

本项目提供5个函数
- replaceMatch （填充模板）
参数：模板字符串，参数Object
- getTemplate, （获取模板字符串）
参数：模板名称，模板文件夹位置path
- writeFile, （写入文件）
参数：文件夹路径，文件名，保存内容
- getTemplates, （获取文件夹下所有模板文件）
参数：路径，第二层必须是文件夹列表，第三层才是模板文件列表
- replaceState（递归填充模板内容）
参数：options.str，options参考下面的写法



提供多个element模板
1. 组件模板
- components/datepicker
```vue
<el-form-item prop="#${prop}" label="#${label}">
      <el-date-picker
       v-model="dataForm.#${prop}"
      type="date"
      placeholder="请选择#${label}"
      value-format="yyyy-MM-dd">
    </el-date-picker>
</el-form-item>
```
- components/input
```vue
<el-form-item prop="#${prop}" label="#${label}">
<el-input
  v-model="dataForm.#${prop}"
  placeholder="请输入#${label}"
  clearable
></el-input>
</el-form-item>
```
- components/radio
```vue
<el-form-item prop="#${prop}" label="#${label}">
  <el-radio-group v-model="dataForm.#${prop}">
    <el-radio v-for="(item, index) in $getDictDataList('#${dict}')" :key="index" :label="item.dictValue">{{item.dictLabel}}</el-radio>
  </el-radio-group>
</el-form-item>
```
- components/select
```vue
<el-form-item prop="#${prop}" label="#${label}">
<el-select
  v-model="dataForm.#${prop}"
  placeholder="请选择#${label}"
  clearable
>
<el-option v-for="(item, index) in $getDictDataList('#${dict}')" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
```
- components/switch
```vue
<el-form-item prop="#${prop}" label="#${label}">
 <el-switch v-model="dataForm.#${prop}" :active-value="#${activeValue}" :inactive-value="#${inactiveValue}">
  </el-select>
</el-form-item>
```
- components/table-column-dict
```vue
<el-table-column type="#${type}" prop="#${prop}" label="#${label}" header-align="center" align="center">
 <template slot-scope="scope">
  {{ $getDictLabel(scope.row.#${prop}, '#${dict}') }}
 </template>
</el-table-column>
```
- components/table-column
```vue
<el-table-column type="#${type}" prop="#${prop}" label="#${label}" header-align="center" align="center">
</el-table-column>
```
- components/textarea
```vue
<el-form-item prop="#${prop}" label="#${label}">
 <el-input v-model="dataForm.#${prop}" placeholder="请输入#${label}" type="textarea" :rows="#${rows}" clearable></el-input>
</el-form-item>
```
2. 页面模板
- pages/params-add-or-update
- pages/params


## 如何使用
1. 例子1（递归填充内容）
```javascript

const { replaceMatch, getTemplate, writeFile, getTemplates, replaceState } = require("hy-template-gen")

let options = {
 path: './test',
 name: 'supplier.vue',
 str: [{
  template: 'pages/params',
  templatePath: "", // 为空时使用项目提供的模板，填写时使用填写的模板文件夹路径
  params: {
   filterList: [{ // params[key]为数组时表明这个填充的内容也是由模板生成的，这样就实现了模板递归填充
    template: 'components/input',
    params: {
     label: 'aX',
     prop: 'ab',
    }
   }, {
    template: 'components/input',
    params: {
     label: 'aw',
     prop: 'awafa',
    }
   },],
   permissionPath: 'supplier:supplier',
   tableColumns: [{
    template: 'components/table-column',
    params: {
     type: '',
     label: '',
     prop: '',
    }
   }],
   filename: 'supplier',
   servicePath: 'supplier/supplier',
   dataForm: JSON.stringify({
    id: "",
    type: "",
    name: "",
   })
  }

 }]
}

async function genPage1 () {
 options.str = await replaceState(options.str)
 writeFile(options.path, options.name, options.str)
}


```

---
_Source: https://npm.io/package/hy-template-gen · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._