此组件是基于 OMS 样式规范而进行封装

1.安装依赖

npm i hsry-oms-ui

2.引入组件,在 main.ts 中引入

// main.ts
import hsryOmsUi from 'hsry-oms-ui';
import 'hsry-oms-ui/style.css';

// 全局注册
app.use(hsryOmsUi);

3.使用组件

3.1、PageTemplage 组件

<!-- template -->
<PageTemplate ref="pagetemplate">
  <template #search>
    <!-- 搜索区域 -->
  </template>
  <template #buttonLeft>
    <!-- 左侧按钮区域 -->
  </template>
  <template #buttonRight>
    <!-- 右侧按钮区域 -->
  </template>
  <template #table>
    <!-- 表格区域 -->
  </template>
</PageTemplate>

// script
// 展开和收起按钮方法
const queryShow = ref(false);
const pagetemplate = ref();
const handleMore = () => {
  queryShow.value = !queryShow.value;
  pagetemplate.value.getChineDom(queryShow.value);
};

3.2、VDialog 组件（弹窗）

<!-- 使用示例 -->
<VDialog v-model="dialogVisible" title="弹窗标题" @confirm="confirm">
  <div>弹窗内容</div>
</VDialog>

| 参数 | 说明 | 类型 | 默认值 | | :---------- | :---------------------------------- | :------- | :----: | | modelValue | 弹窗显示隐藏 | Boolean | false | | width | 弹窗宽度 | String | 500px | | title | 弹窗标题 | String | - | | draggable | 弹窗是否可拖拽 | Boolean | false | | titleShow | 是否显示弹窗标题，取值：inline/none | String | inline | | cancelText | 取消按钮文字 | String | 取消 | | cancelShow | 取消按钮显示 | Boolean | true | | confirmText | 确认按钮文字 | String | 确定 | | confirmShow | 确认按钮显示 | Boolean | true | | bottomShow | 底部按钮显示 | Boolean | true | | btnLoadig | 确认按钮 loading | Boolean | false | | confirm | 确认按钮点击事件 | Function | - | | cancel | 取消按钮点击事件 | Function | - | | close | 关闭弹窗事件 | Function | - |

3.3、VMessageBox 组件（对话框）

<!-- 组件式 -->
<VMessageBox v-model="dialogVisible" title="对话框标题" @confirm="confirm">
  <div>弹窗内容</div>
</VMessageBox>

// 函数式（推荐）
// 引用全局
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
proxy?.$modal.dialog({ title: '提示', message: '对话框内容', type: 'warning' }).then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(err)
})
// 手动引入
import { createDialog } from 'hsry-oms-ui';
createDialog({ title: '提示', message: '对话框内容', type: 'warning' })
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

| 参数 | 说明 | 类型 | 默认值 | | :---------- | :------------------------------------------ | :------- | :-----: | | modelValue | 对话框显示隐藏 | Boolean | false | | type | 对话框类型，取值：success/error/warning/tip | String | success | | message | 对话框内容 | String | - | | width | 对话框宽度 | String | 500px | | title | 对话框标题 | String | - | | titleShow | 是否显示弹窗标题，取值：inline/none | String | inline | | cancelText | 取消按钮文字 | String | 取消 | | cancelShow | 取消按钮显示 | Boolean | true | | confirmText | 确认按钮文字 | String | 确定 | | confirmShow | 确认按钮显示 | Boolean | true | | bottomShow | 底部按钮显示 | Boolean | true | | btnLoadig | 确认按钮 loading | Boolean | false | | confirm | 确认按钮点击事件 | Function | - | | cancel | 取消按钮点击事件 | Function | - | | close | 关闭对话框事件 | Function | - |

4.字体图标使用和按钮规范

<!-- 使用字体图标 -->
<span class="iconfont icon-OMS_daochu"></span>
<!-- 或 -->
<i class="iconfont icon-OMS_daochu"></i>

<!-- 按钮使用规范 -->
<!-- 导出 -->
<el-button type="primary">
  <i class="iconfont icon-OMS_daochu pr-1"></i>
  导出
</el-button>
<!-- 新增 -->
<el-button type="primary" plain icon="Plus">新增</el-button>
<!-- 导入 -->
<el-button type="primary" icon="Download">导入</el-button>
<!-- 修改 -->
<el-button type="warning">
  <i class="iconfont icon-OMS_xiugai pr-1"></i>
  修改
</el-button>
<!-- 确认 -->
<el-button type="success" icon="Edit"> 客户签收、司机签收、批量确认</el-button>
<!-- 删除 -->
<el-button type="danger" plain icon="Delete">删除</el-button>
<!-- 推送 -->
<el-button>
  <i class="iconfont icon-OMS_tuisong pr-1"></i>
  推送
</el-button>
<!-- 打印 -->
<el-button icon="Printer">打印</el-button>

动态表格

配置

1.角色管理，复制代码
2.复制selectLayout页面布局组件
3.api->role.ts 文件中添加updateLayout 接口（此接口需要后端配合）
4.store->modules 文件夹中添加 pagePermission.ts 文件，user.ts 添加路由与鉴权配置
5.src->permission.ts 添加动态表格鉴权
6.src->directive->permission->index.ts 添加鉴权方法和指令
7.src->directive->index.ts 注册鉴权指令
8.utils->common.ts 添加判断屏幕大小方法 getSearchNum （此方法在hsry-oms-ui包中已封装，也可直接引入使用）
9.添加FieldCheck 组件

使用

1. 引入权限方法

import { VhasColumn, VhasExport } from '@/directive/permission/index';

2. 搜索权限

<!-- v-hasQuery="['xxx']" -->
<el-form-item label="销售单号" prop="osoCode" v-hasQuery="['osoCode']">
  <el-input v-model="queryParams.osoCode" placeholder="请输入销售单号" clearable @keyup.enter="handleQuery" />
</el-form-item>

<!-- v-hasExpand -->
<el-button type="primary" plain @click="handleMore" v-hasExpand>
  {{ queryShow ? '收起' : '展开' }}更多
  <el-icon v-if="queryShow"><CaretTop /></el-icon>
  <el-icon v-else><CaretBottom /></el-icon>
</el-button>

3. 表格列权限

<field-check></field-check>

<!-- VhasColumn('xxx') -->
<el-table-column label="销售单号" align="center" prop="osoCode" width="185" v-if="VhasColumn('osoCode')" />

4.导出

let exportData = queryParams.value;
exportData.tableHead = VhasExport();
proxy?.download(
  'xxx（导出接口）',
  {
    ...exportData
  },
  `xxx信息导出_${new Date().getTime()}.xlsx`
);

5. 对应 api 文件夹内 layout.ts 文件配置

export const info {
  /*
  * 注：旧版首字母大写，新版首字母小写
  * 新旧版请以接口返回的nam为准,name后带一串数字（id）为新版
  */
  name: 'SalesOrder',
  label: '销售订单',
  queryList: [
    {
      name: 'osoShopDateTime',
      label: '下单日期',
      locks: true
    },
    {
      name: 'osoGmtDeliveryTime',
      label: '到货日期',
      locks: false
    },
  ],
   table:[
    {
      name: 'main',
      label: '页面主表格',
      columnList: [
        {
          name: 'osoCode',
          label: '订单编号',
          locks: false
        },
        {
          name: 'osoShopDate',
          label: '下单日期',
          locks: false
        }
      ]
    }
   ]
}

注：

1.script 标签中的 name 必须和 layout.ts 中的 name 一致
2.菜单路由配置，路由地址也需和以上两个一致，但首字母小写即可（oms旧写法）
3.ruoyi 新版路由name加上了id，新版layout.ts中name请使用首字母小写