# dms

**Repository Path**: copper-core/dms

## Basic Information

- **Project Name**: dms
- **Description**: dms员工端（无dist包）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-19
- **Last Updated**: 2024-03-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
<img width="200" src="https://gitee.com/chu1204505056/image/raw/master/logo/vab.svg" alt="VAB"/>
<h1>shop-vite</h1>
</div>

## 🔈 注意事项

- shop vite 首次运行，需执行自动化组件导入操作，故网页打开较慢，预计耗时 1-3 分钟，请耐心等待。。。

## 🔈 关于 shop-vite

- shop-vite 与 admin plus 定位不同，shop-vite 定位小而精，admin-plus 定位大而全。
- shop-vite 接口及使用规范继承 admin plus，有过 admin-plus 开发经验的用户可快速上手。
- shop-vite 发布时间较短，不代表最终品质，后续会持续进行更新，敬请期待。
- shop-vite 对比 admin-plus 由于底层脚手架不同，故部分代码无法与 admin-plus 通用，shop-vite
  优点开发时项目启动快，缺点开发时虽启动速度比 webpack5 快十倍，但网页打开速度比 webpack5 稍慢，如果介意网页打开速度请使用 admin-plus。

## 🔈 框架使用建议

- 使用前请一定先阅读 vip 群文档，一般在群公告前 5 条
- 如果您经过翻阅文档、百度后努力尝试仍无法解决问题，可通过 vip 群寻求帮助，讨论时间法定工作日 10 点-16 点
- 对于热心回答群内其他成员问题的用户，所提建议将优先被采纳，并可获得部分内测版本体验资格
- 关于举报盗版侵权：请发送举报材料至zhangwenjia@vue-admin-beautiful.cn，一经查实，官司所得收入 20%归举报人所有，80%归律师事务所所有。
- 关于客服人员满意度评价以及相关建议：请发送材料至zhangwenjia@vue-admin-beautiful.cn，邮件标题：满意度评价，邮件正文：评价依据，我们必将认真对待每一位客户的诉求。
- 关于 bug 反馈：请发送材料至zhangwenjia@vue-admin-beautiful.cn，邮件标题：bug 反馈，邮件正文：bug 截图及描述。

## 🔈 框架使用约定

- 1.购买者可将授权后的产品用于任意「符合国家法律法规」的应用平台，禁止用于黄赌毒等危害国家安全与稳定的网站，否则我们有权利收回产品授权及更新权限，并根据事态轻重追究相应法律责任。
- 2.购买主体购买后可用于开发商业项目，不限制域名和项目数量，购买主体不可将源码分享第三方，否则我们有权利收回产品授权及更新权限，并根据事态轻重追究相应法律责任。
- 3.购买者务必尊重知识产权，严格保证不恶意传播产品源码、不得直接对授权的产品本身进行二次转售或倒卖、开源、不得对授权的产品进行简单包装后声称为自己的产品等，无论有意或无意，我们有权利收回产品授权及更新权限，并根据事态轻重追究相应法律责任。
- 4.购买者不可将 vip 群文档及资料分享给第三方，否则我们有权利收回产品授权及更新权限，并根据事态轻重追究相应法律责任。
- 5.购买者购买项目不可以用来构建存在竞争性质的产品并直接对外销售否则我们有权利收回产品授权及更新权限，并根据事态轻重追究相应法律责任。
- 6.购买者购买项目中的源码（包含全部源码、及部分源码片段）不可以用于任何形式的开源项目，否则我们有权利收回产品授权及更新权限，并根据事态轻重追究相应法律责任。
- 7.购买者用于公司的项目商用时购买必须提供公司名称，用于证明购买过我们的项目来进行商业用途，防范法律风险，我们承诺对购买公司信息信息严格保密，不会泄漏到互联网或用于产品宣传。
- 8.购买者用于个人学习需提供姓名、手机联系方式进行实名认证，如无法提供请勿下单。
- 9.如用于外包项目，购买者购买项目中的源码不可直接对外出售，npm run build 编译后的项目不受限制。
- 10.如果您的公司基于 Shop Vite 系列自行研发的产品（如 OA、ERP、SASS
  等）需对外销售，并且产品中包含我们框架的前端源码，那么您无法购买以上版本，需联系客服购买专属定制版本（不为第三方提供前端框架代码请忽略本条）。
- 11.虚拟物品下单后不支持退货退款。
- 12.购买者需遵守以上约定，最终解释权归 vab 系列著作权人所有，如果您无法遵守以上约定，请勿下单。

```
注：以上协议以 https://vue-admin-beautiful.com/authorization/shop-vite.html 为准
```

## 🔗 链接

- 💻 常规版演示地址：[shop-vite](https://vue-admin-beautiful.com/shop-vite/)
- 📝 使用文档：(文档地址及密码请查看 vip 群群公告第一条)
- 📌 付费版及 vip 群购买地址：[购买地址](https://vue-admin-beautiful.com/authorization/shop-vite.html)

## ✅ 版权须知

Vab 系列产品受国家计算机软件著作权保护（证书号：软著登字第 7051316 号），
禁止公开及传播产品源文件、二次出售等，
违者将承担相应的法律责任，并影响自身使用。

## 🧑‍💻 增值服务

### vip 群

- 每位购买 Shop Vite 的用户均可获得 1 个免费的 vip 互助群免费入群资格，可反馈 bug、协助框架问题解答，无需额外购买

- 免费名额之外，额外加入 vip 群 （100/人 仅限已购买框架的的公司员工加入，购买后联系 微信 zxwk-bfq 即可）

- [购买地址，网页右下角切换付款码即可](https://vue-admin-beautiful.com/authorization/shop-vite.html)

### 定制开发

- 承接各类基于 vab 开发的前端项目
- 承接项目范围 3K+ 至 无上限
- 支持签订合同
- 支持提供发票
- 结算流程：前期款（50%）- 中期款（30%）- 尾款（20%）
- 联系方式：见当前页底部

### 企业一对一远程培训

- 承接一对一远程培训服务（支持提供发票）
- 承接时间： 周一至周六上午 10 点 - 晚上 10 点
- 价格：300 - 10000
- 承接方式：单次、包月、包年
- 联系方式：见当前页底部

### 个人一对一技术指导

- 承接时间： 周一至周六上午 10 点 - 晚上 10 点
- 价格：300
- 承接方式：单日
- 支持零基础远程教学（学员需学习刻苦，有上进心）
- 学员需完成老师布置的任务
- 联系方式：见当前页底部

### 联系方式

```txt

邮箱：chuzhixin@vue-admin-beauiful.cn

邮件标题：企业一对一远程培训 - 公司名称，定制开发 -  公司名称，一对一技术支持 - 公司名称

邮件内容：大致描述 + 联系方式 + 预估需要时间 + 预算

后续： 收到邮件后，工作人员会于第一时间回复

```

### 编码方式

- 组合式API
- 选项式API
- [官方地址](https://cn.vuejs.org/guide/introduction.html)

### 提示

const $baseAlert = inject<any>('$baseAlert')
const $baseNotify = inject<any>('$baseNotify')
const $baseMessage = inject<any>('$baseMessage')

- 使用
- $baseMessage('xxxxxx', 'warning')

### 自适应

- xs <768px 响应式栅格数或者栅格属性对象
- sm ≥768px 响应式栅格数或者栅格属性对象
- md ≥992px 响应式栅格数或者栅格属性对象
- lg ≥1200px 响应式栅格数或者栅格属性对象
- xl ≥1920px 响应式栅格数或者栅格属性对象
- 例如 :span="6" :xs="12" :sm="12" :md="12" :lg="12" :xl="6"

### 页面模板

```<script lang="ts" setup>
  defineOptions({
    name: 'Cooperate', //name 必须唯一 必须和路由的name 一致， 首字母大写
  })

  onMounted(() => {
    // alert('合作提报')
  })

  const handleClick = (key:string)=>{}
</script>
```

### 定义变量

- const show = ref(Boolean) //ref 定义 基本数据类型 比如 Number String Boolean Null
- 取值 show.value

- const state: any = reactive({ aa: 1 }) //ref 定义 对象 比如 Object, Array
- 取值 state.aa
- 注意：为防止 有数组遍历 定义 state:any

### 自定义指令

- v-throttle 节流自定义指令v-throttle
- v-debounce 防抖自定义指令v-debounce
- v-focus 获取焦点自定义指令v-focus

```
<el-button v-throttle="throttleClick">节流函数</el-button>
<el-button v-debounce="debounceClick">防抖函数</el-button>
```
### pinia
```
import { useProductStore } from '/@/store/modules/product'
const productStore = useProductStore()
const { setPriceInfoRow } = productStore
```
### 新增全局组件
#### VabUpload 文件上传
#### VabAutoFrom 模糊查询 下拉筛选 同等功能[el-autocomplete]
- value [v-model]
- list [筛选项]
```
<el-form-item
  v-if="item.type == 'autocomplete'"
  :label="item.label"
  :prop="item.prop"
>
  <VabAutoFrom 
    v-model="searchForm[item.prop]" 
    :list="selectOptions(item.prop)"
  />
</el-form-item>
```
#### VabUploadFile 按钮上传文件 [<el-button>导入</el-button>]
- query [请求参数] [Object]
- api [接口] [String]
- title [按钮title] [导入]
```
<VabUploadFile :query="{ type: 2 }" api="api/dms/xxxx" @Refresh="() => {
  ElMessage({
    message: '导入成功',
    type: 'success',
  })
  _GetProductList() //刷新页面
}"/>
```
#### VabSelectForm [可前后加空格筛选] [模糊 + 多选/单选 + 一键清除]
- value [v-model]
- options [筛选项]
- multiple [多选] [默认false]
```
<VabSelectForm 
  v-model="searchForm[item.prop]" 
  v-if="selectOptions(item.prop)"
  :options="selectOptions(item.prop)"
/>
```

### 单选 [跟随主题变色]
- currentRow [选中块]
- radioKey [唯一值] [可为id/编码、、、、]
- is-checked [选中样式]
- highlight-current-row [表格高亮] [el-table]
- @current-change [handleCurrentChange] [选中块] [el-table] [https://element-plus.gitee.io/zh-CN/component/table.html#%E5%8D%95%E9%80%89]
```
<el-table-column align="center" width="40" fixed="left">
  <template #default="scope">
    <label class="el-checkbox" 
      :class="{ 'is-checked': radioKey == scope.row.id }"
      @click="handleCurrentChange(scope.row)"
    >
      <span class="el-checkbox__input" :class="{ 'is-checked': radioKey == scope.row.id }">
        <span class="el-checkbox__inner"></span>
      </span>
    </label>
  </template>
</el-table-column>

const currentRow = ref<any>() //选中块
const radioKey = ref<any>(-1) //唯一值

// 单选
const handleCurrentChange = (row: any) => {
  radioKey.value = row.id
  currentRow.value = row
}
// 单选[再次点击可取消]
const handleCurrentChange = (row: any) => {
  if (row.id == radioKey.value) {
    radioKey.value = -1
    currentRow.value = null
    return
  }
  radioKey.value = row.id
  currentRow.value = row
}
```

### VabStep [步骤]
- active [激活]
- steps [步骤]
```
  <VabStep />
```
### VabRangeForm [区间输入]
- maxV [最大值]
- minV [最小值]
- [使用]

```
<VabRangeForm :ref="(el) => vabRangeFormRef = el"/>

const vabRangeFormRef = ref<any>()

const check = ()=>{
  // 解构区间
  const { vStart, vEnd } = vabRangeFormRef.value

  //字段赋值
  value_start = vStart
  value_end = vEnd
}
// 重置
const reset = ()=>{
  vabRangeFormRef.value.reset()
}
```

### 复合查询样式 [全局]
- composite_form [el-form] [label-width="130px]
- composite [span]
- composite_label [el-select]
- [引入]
```
<style lang="scss" scoped>
@import '../../components/public.scss';
</style>
```

### 路由优化
#### 跳转
- useRouter()
```
<!-- 1 -->
router.push('/customer/query_customer')
<!-- 2 -->
router.push({
  path: '/customer/query_customer',
  query: {
    id: 11
  },//命名的路由
  params:{
    id: 11 
  } //带查询参数，变成 /register?userId=123
})
```
#### 获取页面参数
- useRoute()
```
<!-- 首先在setup中定义 -->
const route = useRoute()
<!-- query -->
let userId=route.query.userId;
<!-- params -->
let userId=route.params.userId;
```

### VabInputForm [文本输入]
- value [值]
- type [类型] ['text'|'textarea'|'password'|'button'|'checkbox'|'file'|'number'|'radio'|...]
- [使用]

```
 <VabInputForm v-model="value" @keyup.enter.native="onkeydown"/>
```

### VabTimeForm [时间选择器]
- value [值]
- type [类型] [year/month/date/dates/datetime/week/datetimerange/daterange/monthrange]
- [使用]

```
 <VabTimeForm v-model="value" @keyup.enter.native="onkeydown"/>
```

### VabCard [卡片]
- [使用]
```
<vab-card shadow="always">
    <template #header>
      <span class="leve2_title"></span>
    </template>
    <template #default>
    </template>
</vab-card>
```

### Table 触底加载更多
- [使用]
```
const multipleTableRef = ref()
const watchScroll = lodash.debounce(() => {
  multipleTableRef.value.$refs.bodyWrapper.addEventListener('scroll', async (res) => {
    const { clientHeight, scrollTop, scrollHeight } = res.target
    if (clientHeight + scrollTop === scrollHeight) {
      await page.value++
      _GetProductList()
    }
  }, true)
}, 1000)
watchEffect(() => {
  if (multipleTableRef.value) watchScroll()
})
```

### VabAddressForm 省市区选择组件

- options [地区数据]
- value [字段]
- defaultValue [默认值] [用于更新] ['10001','10002','10003']
- vabAddressChange [change事件] [返回固定数据]
- [使用]

```
<VabAddressForm
  :options="arrdessOptions"
  v-model.trim="searchForm.shipping_adress"
  @vabAddressChange="vabAddressChange"
/>
// 选择省市区返回数据
const vabAddressChange = (value: any) => {
  console.log(value, '选择省市区返回数据')
}
```

### 全局吐司 
- [使用]
```
const proxy: any = getCurrentInstance()?.proxy
proxy.$Message('请选择使用组织后再进行操作！', 'warning')
```

### VabTotal 共XXX条
- [使用]
```
<VabTotal :total="product.length"/>
```

### VabButton 按钮
- [使用]
```
更新按钮[带有蓝色边框]
<VabButton update title="撤回" @click="handleClick('withdraw')" />
普通按钮
<VabButton type="primary" title="撤回" @click="handleClick('withdraw')" />
其他按钮
<VabButton title="新建" :attributes="{
  round: true, //圆角
  icon: Message //图标[需引用][import {  Message } from '@element-plus/icons-vue']
}" type="primary" @click="handleClick('create')" />
```


### 滚动到指定位置
- [使用]
```
//跳转指定位置
const scrollInto = (i: number) => {
  let elClass = ''
  if (i == 3) elClass = 'outboundModeId'

  document
    .getElementById(elClass)
    ?.scrollIntoView({ behavior: 'smooth', block: 'center' })
}

```

### el-tag 类型使用 
- [使用]
```
// 失败、拒绝、停用、失效 danger 审核失败、生效失败、 ...失败
// 成功 success 审核成功、生效成功、 ...成功
// 草稿 warning
// 待 '' 待审核、待生效、待...
```