222

schangxiang@126.com

2025-05-06 38b161e4d52362081bfe78fb5b51fbf384db7ce2

 HIAWms/web/README.md

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,228 @@
# information-standard-tpl

## å®‰è£…环境

安装[nodeJs](https://nodejs.cn/)环境,下载 nodejs，安装完成后，

```js
node - v
```

## å®‰è£… yarn

```js
npm install -g yarn
```

## å®‰è£…依赖

```js
yarn
```

## è¿è¡Œ

```js
npm run dev
// or
yarn dev

```

## ç¼–译

```js
npm run build
```

## ç›®å½•ç»“æž„

```js
|- public
|- script
|- src
|----api //暂时废弃
|----assets //资源
|----cms //cms sdk依赖
|----components //cms sdk依赖
|------BaseDialog //封装的弹窗，样式统一
|------Table//封装的表格，样式统一
|------other...//其他
|----provider //全局注入，element命名空间
|------provider.ts // h
|------provider.vue // render组件
|----utils //工具
|------enum //枚举
|----widgets //组件
|------hook.ts //钩子
|------...
index.html
```

## åŠŸèƒ½

#### å‘½åç©ºé—´

> `element-plus`采用`sass`的`$namespace`来解决`css`样式冲突问题

```js
$namespace = 'cs'
```

element-plus ç»„件的样式从 el-xx æ›¿æ¢æˆ cs-xx，使用时，仍然使用<el-xx></el-xx>

> element-plus è‡ªåŠ¨æŒ‰éœ€å¼•å…¥ï¼Œæ— éœ€æ‰‹åŠ¨å¼•å…¥ï¼Œæ— éœ€å…¨å±€å®‰è£…

<b>！！！注意</b>

使用 ElMessage å’Œ ElMessageBox æ—¶ï¼Œéœ€è¦æ‰‹åŠ¨å¼•å…¥

```js
import { ElMessage, ElMessageBox } from 'element-plus'
```

### æƒé™

在/src/widgets/hook.ts ä¸­å¼•å…¥æƒé™æŽ§åˆ¶ hook

```js
import { usePermission } from '@/libs/Permission/Permission'
import { permissionCodes } from '../enum'

usePermission(props, permissionCodes)

...
defineComponent({
  directives: {
    permission: vPermission,
  },
})

 <IconButton
 //权限控制
  v-permission="workSection-add"
  icon="add-p"
  onClick={onAddProcess}
  type="primary"
>
  æ·»åŠ MyEntityName
</IconButton>

```

### è·¯ç”±åœ°å€

路由地址统一由 package.json ä¸­çš„ name å’Œ/widgets/[组件名]拼接而成
如：

> https://localhost:8001/#/base/PersonnelQualification

### ç»Ÿä¸€ä½¿ç”¨`BaseDialog`和`Table`来开发

#### å¼¹çª—例子

```vue
<BaseDialog
  :title="t('编辑人员资质')"
  v-model="visible"
  class="person-dialog"
  @close="visible = false"
  @confirm="onConfirm"
>
      <el-form
        label-width="113px"
        :inline="true"
        :model="formData"
        label-position="left"
      >
        <el-form-item :label="t('人员ID')" class="person-item">
          <el-input
            v-model="formData.user"
            :placeholder="t('请输入人员ID')"
            class="person-input"
            disabled
            clearable
          />
        </el-form-item>
        ...
      </el-form>
    </BaseDialog>
```

#### Table è¡¨æ ¼ç»„件

```vue
<div class="table-content">
    <Table
    :dataSource="dataSource"
    :columns="columns"
    :total="total"
    :pageSize="MaxResultCount"
    :isChecked="true"
    @sort="onSort"
    @page="onPageChange"
    >
    <template #printTime="{ row }">
        <span>{{ dayjs(row.printTime).format('YYYY-MM-DD HH:MM:ss') }}</span>
    </template>
    <template #action="{ row }">
        <el-button @click="onEdit(row)" class="btn-edit" type="info">{{
        t('修改')
        }}</el-button>
    </template>
    </Table>
</div>

...

<script>
const columns = [
  {
    title: '序号',
    type: 'seq',
    width: '60',
  },
  {
    title: '人员ID',
    field: 'personID',
  },
  {
    title: '人员姓名',
    field: 'name',
  },
  {
    title: '资质工序码',
    field: 'qualification',
  },
  {
    title: '卡号',
    field: 'cardNumber',
  },
  {
    title: '操作',
    field: 'action',
    width: '100',
  },
]
</script>
```

### åˆ†æ”¯å‘½å

> å¼€å‘：feature/xx
> ç¨³å®šï¼šrelease/xx

### é—®é¢˜

如遇到问题，把问题抛到群里，大家一起想办法解决，不要一个人闷着。

### å¾®å‰ç«¯é…ç½®

**`single-spa`**
待补充...

### èµ„源整合平台

解决开发效率和项目资源浪费等问题
待补充...
方案待更新...