开发者中心

# 公共组件

# 1、sh-echart 图表

<sh-echart :data="data"></sh-echart>

具体使用同 pc 端组件

# 2、sh-list 列表

包含请求接口、下拉刷新、拉上请求更多数据。

/**
 * :api 接口
 * :param 请求参数
 * :minHeight 列表最小高度，默认：80vh
 * :immediate 加载时默认请求接口，默认：true
 * :page 当期页，默认：1
 * :limit 每页条数，默认：10
 */
<sh-list :api="listApi" :param="form" ref="list">
  <div slot-scope="scope"></div>
</sh-list>

// 重载列表
this.$refs.list.loadList()

用法示例：

<sh-list :api="listApi" :param="form" ref="list">
  <div slot-scope="scope">
     <div class="link">
      <p class="type">
        <span>开始时间：{{ scope.item.egressStartTime }}</span>
      </p>
      <p class="type">
        <span>结束时间：{{ scope.item.egressStartTime }}</span>
      </p>
      <p class="type">
        <span>时长(小时)：{{ $dayjs(scope.item.egressEndTime).diff(scope.item.egressStartTime,'minute') / 60 }}</span>
      </p>
    </div>
  </div>
</sh-list>

后端数据格式和pc端分页保持一致：

入参：
{
	page: 1,
	limit: 10
}
出参：
{
	code: 0,
	count: 2,
	data: [
		{id: "9a97ad53dd254e27aa33e5265a2cb421", createTime: "2021-04-19 08:31:50"},
		{id: "9a97ad53dd254e27aa33e5265a2cb422", createTime: "2021-04-19 08:31:50"},
	],
	msg: "成功"
}

# 3、sh-select 下拉框

默认使用：

<sh-select label="项目" v-model="value" :columns="columns"></sh-select>

参数：

/**
 * :label 左侧文本
 * v-model value值
 * :columns 数组数据,如：[{label: '账号', value: '3h100'}]
 * :option 显示的键值，默认：{label: 'label', value: 'value'}
 * @change 改变时触发方法，return 选中项
 */

例如：

<sh-select label="项目" v-model="id" :columns="projectList" :option="{label: 'name', value: 'id'}"></sh-select>

// data数据
projectList: [
	{id: 'SGXK13213465', name: '三和项目'},
	{id: '914512006750', name: '一洲项目'}
]

# 4、sh-loading 加载

使用：

<template>
  <sh-loading :loading="loading"></sh-loading>
</template>

参数：

/**
 * @param loading {Boolean} 是否显示加载
 * @param text {String} 加载文案，默认：正在加载...
 * @param size {String} 加载图标大小，默认：40px
 */

# 5、sh-field 输入框

基于 van-field 封装

使用：

<template>
  <sh-field rules="required" placeholder="请输入目的地" label="目的地" v-model="form.endPoint"></sh-field>
</template>

参数：

/**
 * @param rules {String|Array} 校验规则,type 为 string，可传入为：rules="required",type 为 Array,参考 van-field 的 Rule 数据结构
 * @param label {String} 输入框左侧文本
 * @param input-align {String} 输入框对齐方式，可选值为 center left,默认 right
 */

# 6、sh-checkbox 复选框组

使用：

<template>
  <sh-checkbox :label="label" :columns="columns" rules="required" v-model="form.epidemicHistory" ></sh-checkbox>
</template>

参数：

/**
 * @param label {String} 输入框左侧文本
 * @param columns {Array} 选项
 * @param v-model {String} 选中的值，以逗号隔开
 * @param disabled {Boolean} 是否禁用复选框，默认false
 * @param rules {String|Array} 校验规则,type 为 string，可传入为：rules="required",type 为 Array,参考 van-field 的 Rule 数据结构
 */

# 7、sh-city-cascader 省市区街道级联

使用：

<template>
  <sh-city-cascader :label="label" :level="4" rules="required" v-model="form.workCity" :value2.sync="form.workCityIds"></sh-city-cascader>
</template>

参数：

/**
 * @param label {String} 输入框左侧文本
 * @param level {Number} 级别，1、2、3、4 对应 省、市、区、街道
 * @param v-model {String} 名称，以逗号隔开
 * @param value2.sync {String} id，以逗号隔开
 * @param isLink {Boolean} 是否展示右侧箭头并开启点击反馈，默认true
 * @param disabled {Boolean} 是否禁用，默认false
 * @param rules {String|Array} 校验规则,type 为 string，可传入为：rules="required",type 为 Array,参考 van-field 的 Rule 数据结构
 */

# 8、sh-date 日历

使用：

<template>
  <sh-date :label="label" v-model="date"></sh-date>
</template>

参数：

/**
 * @param label {String} 输入框左侧文本
 * @param v-model {String} 当前选中的时间
 * @param disabled {Boolean} 是否禁用，默认false
 * @param rules {String|Array} 校验规则,type 为 string，可传入为：rules="required",type 为 Array,参考 van-field 的 Rule 数据结构
 */

# 9、sh-date-time 时间选择

使用：

<template>
  <sh-date-time :label="label" v-model="form.birthday"></sh-date-time>
</template>

参数：

/**
 * @param label {String} 输入框左侧文本
 * @param v-model {String} 当前选中的时间
 * @param type {String} 时间类型，可选值为 date time year-month month-day datehour,默认datetime
 * @param disabled {Boolean} 是否禁用，默认false
 * @param rules {String|Array} 校验规则,type 为 string，可传入为：rules="required",type 为 Array,参考 van-field 的 Rule 数据结构
 */

# 10、sh-select-time 时间选择器（间隔 30min）

使用：

<template>
  <sh-select-time :show.sync="timeShow" @confirm="onConfirmTime"></sh-select-time>
</template>

参数：

/**
 * @param show.sync {Boolean} 是否展示时间选择器
 * @confirm 点击完成按钮时触发的事件，value: 当前选中的时间
 */

# 11、sh-form 表单

将表单组件组合使用

使用示例：

<template>
  <sh-form ref="form">
    <sh-field placeholder="正则校验" label="文本" v-model="form.text" :rules="['required',{ pattern, message: '文本必须不少于6位' }]"></sh-field>
    <sh-field placeholder="请输入目的地" rules="required" label="目的地" v-model="form.endPoint"></sh-field>
    <sh-field type='textarea' placeholder='用车线路说明' rules="required" label="用车线路说明" v-model="form.routeDescription"></sh-field>
    <sh-checkbox rules="required" label="是否有以下情况" v-model="form.epidemicHistory" :columns="epidemicHistory"></sh-checkbox>
    <sh-date label="返程日期" rules="required" :minDate="minBackDate" v-model="form.backDate"></sh-date>
    <sh-date-time rules="required" label="出生日期" v-model="form.birthDay"></sh-date-time>
    <sh-field rules="required" label="单选框">
      <template #input>
        <van-radio-group v-model="form.radio" direction="horizontal">
          <van-radio name="1">单选框 1</van-radio>
          <van-radio name="2">单选框 2</van-radio>
        </van-radio-group>
      </template>
    </sh-field>
    <sh-field readonly :value="form.startTime" clickable rules="required" label="开始时间" @click="timeShow = true" />
    <sh-select-time :show.sync="timeShow" @confirm="onConfirmTime"></sh-select-time>
    <div style="margin: 16px;">
      <van-button round block type="info" @click="submit">提交</van-button>
    </div>
  </sh-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        text:'',
        endPoint:'',
        routeDescription:'',
        epidemicHistory:'',
        epidemicHistory: '',
        startTime: '',
        backDate: '',
        birthDay: '',
        radio:null
      },
      pattern: /\d{6}/,
      minBackDate: new Date(2020, 7, 1),
      epidemicHistory: [
        { value: '0', label: '来自中高风险地区' },
        { value: '1', label: '1周内到过中高风险地区' },
        { value: '2', label: '2周内接触中高风险地区人' },
        { value: '3', label: '2周内居住或到过中高风险地区' },
        { value: '4', label: '2周内家人或朋友有类似症状' },
        { value: '5', label: '2周内家人或朋友到过中高风险地区' },
        { value: '6', label: '周围1公里有新增确诊' }
      ],
      timeShow: false
    }
  },
  methods: {
    onConfirmTime(date) {
      this.form.startTime = date
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          console.log(this.form)
          this.$toast('提交成功！')
        }
      })
    }
  }
}
</script>

校验方法：

this.$refs.form.validate(valid => {
  if (!valid) {
    ...
  }
})

# 12、sh-select-field 下拉搜索

使用：

<template>
  <sh-select-field :form="form" :option="option" :width="width" @loadList="loadList"></sh-select-field>
</template>

参数：

/**
 * @param form {Object} 属性与option标识符一致
 *  @param option {String} 选项数组，text表示文字，value表示标识符。
 *  @param width {String} 选中项显示的宽度，默认：100px
 *  @loadList 加载方法
 */

# 13、sh-select-search 选择搜索

使用：

<template>
  <sh-select-search :option="option" :form="form" border searchLabel="searchValue"  @loadList="loadList">
  </sh-select-search>
</template>

<script>
export default {
  data() {
    return {
      form: {
        selectkey1: 0, // 下拉选择搜索,
        selectkey2: 'a',
        searchValue: '搜索值'// 输入框搜索字段
      },
      option: { // key为下拉框绑定字段，value(Array)为van-dropdown-menu option
        selectkey1: [
          { text: '默认排序', value: 0 },
          { text: '按紧急程度', value: 1 },
          { text: '按最近创建时间', value: 2 },
          { text: '按最早截止时间', value: 3 }]
        // selectkey2: [
        //   { text: '默认排序', value: 'a' },
        //   { text: '好评排序', value: 'b' },
        //   { text: '销量排序', value: 'c' }]
      }
    }
  },
  methods: {
    loadList() {
      // 发送请求
      console.log('form', this.form, '')
    }
  }

}
</script>

参数：

/**
 * @param option {Object} 搜索框配置项，key为下拉框所要绑定字段，value(Array)为van-dropdown-menu 的 option
 * @param form {Object} 组件绑定字段项，请与searchLabel及option的key值对应，可设置默认值
 * @param border {Boolean} 是否显示下边框，默认false
 * @param searchLabel {String} 输入框搜索绑定字段，为必填项
 * @param placeholder {String} 输入框占位提示文字
 * @param defaultLoad {Boolean} 是否默认首次加载，默认是
 * @loadList {funtcion} 重载列表方法
 */

# 14、sh-org-person 选择人员

使用：

<template>
  <div>
    <van-cell-group>
      <van-field v-model="name" label="单选" placeholder="选择人员" readonly  @click="show = true"/>
      <van-field v-model="names" label="多选" placeholder="选择人员" readonly  @click="shows = true"/>
    </van-cell-group>
    <sh-org-person :show.sync="show" @getPerson="getPerson"></sh-org-person>
    <sh-org-person :show.sync="shows" @getPerson="getPersons" :checkbox="true" :data="defaultData"></sh-org-person>
  </div>
</template>

参数：

/**
 * @param show.sync {Boolean} 是否展示人员选择器
 * @param isActiveObj {Object} 人员回显
 * @param checkbox {Boolean} 是否多选，默认false,单选
 * @getPerson 选中触发的事件
 */

# 15、sh-view-image 图片预览

使用：

  <sh-view-image :src='src'></sh-view-image>

参数：

/**
 * @param src {String} 图片链接
 * @param closeable {Boolean} 是否显示关闭图标,默认true
 * @param width {Number | String} 缩略图宽度，默认单位为px
 * @param height {Number | String} 缩略图高度，默认单位为px
 * /

插槽：

名称 说明 参数
default 自定义显示内容，默认为图片 -

# 16、sh-tree 树形控件

基于 liquor-tree 封装，如此组件不能满足您的需求，请参考文档 (opens new window)自行定制

使用

<template>
  <sh-tree ref="tree" checkbox :api='api' v-model="shows" :default-checked-keys='defaultData'  @onSubmit='onSubmit'>
  </sh-tree>
</template>

参数：

/**
 * @param v-model {Boolean} 是否显示弹出层，默认false
 * @param api {String} 接口
 * @param param {Object} 接口请求参数
 * @param data {Array} 展示数据
 * @param checkbox {Boolean} 是否多选，默认 false
 * @param defaultExpandAll {Boolean} 是否默认展开所有节点，默认 false
 * @param defaultExpandedFirstLevel {Boolean} 当数据length为 1，即树状结构存在唯一顶级时，是否展开第一级，默认 true
 * @param autoCheckChildren {Boolean} 在显示复选框的情况下，是否严格的遵循父子互相关联的做法，默认true
 * @param props {Object} 树形控件的结构配置,默认为： {children: 'children',text: 'text'}
 * @param nodeIndent {Number} 缩进，默认 8
 * @param defaultCheckedKeys {Array} 默认选中节点的 主键 的数组
 * @param defaultExpandedKeys {Array} 默认展开的节点的 主键 的数组
 * @onSubmit {Function} 点击确定后的回调处理，checkbox 为 true 时返回选中节点的数组，单选模式时返回对应选中的节点（Object）
 */

使用：

组件提供两种数据展示方式

  • 1、data 传入
  • 2、api 接口传入（post请求）,可通过 param 传入请求参数

重新定义默认树的结构

例如，你有数据：

[
 { 'SOME-AWESOME-PROPERTY-FOR-TEXT': 'Item 1' },
 { 'SOME-AWESOME-PROPERTY-FOR-TEXT': 'Item 2' },
 { 'SOME-AWESOME-PROPERTY-FOR-TEXT': 'Item 3', 'kids': [
  { 'SOME-AWESOME-PROPERTY-FOR-TEXT': 'Item 3.1' },
  { 'SOME-AWESOME-PROPERTY-FOR-TEXT': 'Item 3.2' }
 ]}
]

你只需要在组件中添加 props 选项:

{
 'children': 'kids',
 'text': 'SOME-AWESOME-PROPERTY-FOR-TEXT'
}

自定义树节点的内容

提供插槽用于自定义树节点的内容

如：

<sh-tree ref="tree" :api='api' v-model="shows1" @onSubmit='onSubmit1'>
  <template slot-scope="{node}">
    <span class="tree-text">
      <template v-if="!node.hasChildren()">
        <van-icon name="user-o" size="18" class="icon" />
        {{ node.text }}
      </template>
      <template v-else>
        {{ node.text }}
      </template>
    </span>
  </template>
</sh-tree>

具体使用示例：

<template>
  <div>
    <!-- 多选 -->
    <sh-field readonly label='人员(多选)' @click="()=>shows = true" :value='select' placeholder="请选择" is-link />
    <sh-tree class="tree" ref="tree" checkbox :api='api' v-model="shows" :default-checked-keys='defaultData' @onSubmit='onSubmit'>
      <template slot-scope="{node}">
        <span class="tree-text">
          <template v-if="!node.hasChildren()">
            <van-icon name="user-o" size="18" class="icon" />
            {{ node.text }}
          </template>
          <template v-else>
            {{ node.text }}
          </template>
        </span>
      </template>
    </sh-tree>

    <!-- 单选 -->
    <sh-field readonly label='人员(单选)' @click="()=>shows1 = true" :value='select1' placeholder="请选择" is-link></sh-field>
    <sh-tree ref="tree" :api='api' v-model="shows1" @onSubmit='onSubmit1'></sh-tree>

    <!-- 自定义数据及结构 -->
    <sh-field readonly label='自定义' @click="()=>shows2 = true" :value='select2' placeholder="请选择" is-link></sh-field>
    <sh-tree ref="tree" checkbox :data='data' :props="{children:'children',text: 'label'}" :defaultExpandedKeys="[1,4]" :defaultCheckedKeys="[10]" v-model="shows2" @onSubmit='onSubmit2' :autoCheckChildren='false'>
    </sh-tree>
  </div>
</template>

<script>
import { PERSON_TREES } from '@/apis/admin'
export default {
  data() {
    return {
      shows: false,
      shows1: false,
      shows2: false,
      api: PERSON_TREES,
      select: '测试，王五',
      select1: '',
      select2: '三级 1-1-2',
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultData: ['c4a30f6e0cfa4d1b8a0e6f8e75569514', 'a71c513875b54ad28cbc958311ab99ce']
    }
  },
  methods: {
    onSubmit(data) {
      console.log(data)
      this.select = data.map(c => c.text).join('，')
      this.shows = false
    },
    onSubmit1(data) {
      console.log(data)
      this.select1 = data.text
      this.shows1 = false
    },
    onSubmit2(data) {
      console.log(data)
      this.select2 = data.map(c => c.text).join('，')
      this.shows2 = false
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-text {
  display: flex;
  align-items: center;
  .icon {
    margin-right: 5px;
  }
}
</style>

# 17、sh-signature-pad 数字签名

基于 signature_pad 封装

使用：

<sh-signature-pad :visible.sync='visible' @cancel="cancel" fileName='signature' @confirm="confirm" :api='api' :url='signUrl'></sh-signature-pad>

参数：

/**
* @param :visible.sync {Boolean} 是否显示弹出层，默认false
* @param {String} fileName 文件名
* @param api {String} 接口 （post请求/Content-Type: multipart/form-data）
* @param params {Object} 接口请求参数
* @param url {String} 签名图片链接
* @param {Function} @confirm 点击确定的回调，返回签名图片的信息
* @param {Function} @cancel 点击取消的回调
* @param {Object} options 签名属性配置项，默认 {
          penColor: '#000000', // 笔刷颜色
          minWidth: 0.5, // 最小宽度
          maxWidth: 6,
          backgroundColor: '#f2f2f2'
        }
*/

# 18、sh-pdf-popup pdf预览

基于 pdfh5 封装，提供 h5 pdf预览手势缩放，懒加载

使用：

<sh-field label='pdf预览' is-link readonly @click="()=>show=true"></sh-field>
<sh-pdf-popup v-model="show" :api='api' :params='params' :lazy='false' @complete='complete'></sh-pdf-popup>

组件提供两种 pdf 展示方式

  • 1、url 传入 pdf 地址
  • 2、api 接口传入（get请求）,可通过 param 传入请求参数

参数：

/**
 * @param v-model {Boolean} 是否显示弹出层，默认false
 * @param api {String} 接口
 * @param params {Object} 接口请求参数
 * @param url {Object} pdf地址
 * @param lazy {Boolean} 是否懒加载，默认false
 * @param complete {Function} pdf加载完成事件，加载失败、渲染成功都会触发。status有两种状态success和error,依次返回状态、信息、耗时、pdf页数 (status, msg, time, totalNum)
*/

# 19、sh-svg-icon svg图标

用法同网页端 sh-svg-icon