iov-pro-components 0.0.3

package/docs/components/description.md

@@ -0,0 +1,519 @@
+# 描述列表
+以列表形式呈现多个字段内容。当数据缺失时，统一展示兜底文案。
+
+## 基础用法
+
+::: demo
+```html
+<template>
+  <iov-pro-description
+    :items="items"
+    :data-source="dataSource"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      items: [
+        { label: '姓名', prop: 'name' },
+        { label: '年龄', prop: 'age' }
+      ],
+      dataSource: { name: '张无忌', age: 18 }
+    }
+  }
+}
+</script>
+```
+:::
+
+## 枚举
+
+::: demo
+```html
+<template>
+  <iov-pro-description
+    :items="items"
+    :data-source="dataSource"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    const DICT = {
+      SEX: [
+        { label: '男', value: 1 },
+        { label: '女', value: 2 }
+      ]
+    }
+
+    return {
+      items: [
+        { label: '姓名', prop: 'name' },
+        { label: '年龄', prop: 'age' },
+        { label: '性别', prop: 'sex', type: 'enum', enums: DICT.SEX }
+      ],
+      dataSource: { name: '张无忌', age: 18, sex: 1 }
+    }
+  }
+}
+</script>
+```
+:::
+
+## 标签
+
+::: demo
+```html
+<template>
+  <iov-pro-description
+    :items="items"
+    :data-source="dataSource"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    const DICT = {
+      SEX: [
+        { label: '男', value: 1 },
+        { label: '女', value: 2 }
+      ],
+      USER_TAG: [
+        { label: '帅', value: 1 },
+        { label: '美', value: 2 },
+        { label: '穷', value: 3 }
+      ]
+    }
+
+    return {
+      items: [
+        { label: '姓名', prop: 'name' },
+        { label: '年龄', prop: 'age' },
+        { label: '性别', prop: 'sex', type: 'enum', enums: DICT.SEX },
+        { label: '画像标签', prop: 'tags', type: 'tag', enums: DICT.USER_TAG }
+      ],
+      dataSource: {
+        name: '张无忌',
+        age: 18,
+        sex: 1,
+        tags: [1, 2]
+      }
+    }
+  }
+}
+</script>
+```
+:::
+
+## 富文本
+
+::: demo
+```html
+<template>
+  <iov-pro-description
+    :items="items"
+    :data-source="dataSource"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    const DICT = {
+      SEX: [
+        { label: '男', value: 1 },
+        { label: '女', value: 2 }
+      ],
+      USER_TAG: [
+        { label: '帅', value: 1 },
+        { label: '美', value: 2 },
+        { label: '穷', value: 3 }
+      ]
+    }
+
+    return {
+      items: [
+        { label: '姓名', prop: 'name' },
+        { label: '年龄', prop: 'age' },
+        { label: '性别', prop: 'sex', type: 'enum', enums: DICT.SEX },
+        { label: '画像标签', prop: 'tags', type: 'tag', enums: DICT.USER_TAG },
+        { label: '自我描述', prop: 'desc', type: 'rich-text' }
+      ],
+      dataSource: {
+        name: '张无忌',
+        age: 18,
+        sex: 1,
+        tags: [1, 2],
+        desc: '<p>我叫张无忌，来自武当山。曾经参与过6大门派围攻光明顶。对于处理冲突有丰富经验，希望老师们给我一个机会和大家一同工作。</p>'
+      }
+    }
+  }
+}
+</script>
+```
+:::
+
+## 超链接
+
+::: demo
+```html
+<template>
+  <iov-pro-description
+    :items="items"
+    :data-source="dataSource"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    const DICT = {
+      SEX: [
+        { label: '男', value: 1 },
+        { label: '女', value: 2 }
+      ],
+      USER_TAG: [
+        { label: '帅', value: 1 },
+        { label: '美', value: 2 },
+        { label: '穷', value: 3 }
+      ]
+    }
+
+    return {
+      items: [
+        { label: '姓名', prop: 'name' },
+        { label: '年龄', prop: 'age' },
+        { label: '性别', prop: 'sex', type: 'enum', enums: DICT.SEX },
+        { label: '画像标签', prop: 'tags', type: 'tag', enums: DICT.USER_TAG },
+        { label: '自我描述', prop: 'desc', type: 'rich-text' },
+        { label: '简历', prop: 'link', type: 'link', onClick: this.onDownloadFile }
+      ],
+      dataSource: {
+        name: '张无忌',
+        age: 18,
+        sex: 1,
+        tags: [1, 2],
+        link: [{ icon: 'https://img.alicdn.com/imgextra/i3/O1CN01WVKxVr22NW6oPUd9C_!!6000000007108-2-tps-96-96.png', name: '张无忌简历.doc', uuid: 'uid918371270182' }],
+        desc: '<p>大家好：</p><p>&nbsp;&nbsp;&nbsp;&nbsp;我叫张无忌，来自武当山。曾经参与过6大门派围攻光明顶。对于处理冲突有丰富经验，希望老师们给我一个机会和大家一同工作。<br/></p>'
+      }
+    }
+  },
+
+  methods: {
+    /**
+     * 下载文件
+     */
+    onDownloadFile() {
+      window.location.href = 'https://www.baidu.com'
+    }
+  }
+}
+</script>
+```
+:::
+
+## 文件
+
+数据中需要设置 `isPrivate` 字段，如果 `isPrivate` 为 `true`，则此文件是私有桶文件，需要通过 `uuid` 获取可访问文件链接。如果 `isPrivate` 为 `false`，则此文件是公有桶文件，可直接通过url访问文件链接。
+
+::: demo
+```html
+<template>
+  <iov-pro-preview>
+    <iov-pro-description
+      :items="items"
+      :data-source="dataSource"
+    />
+  </iov-pro-preview>
+</template>
+
+<script>
+export default {
+  data() {
+    const DICT = {
+      SEX: [
+        { label: '男', value: 1 },
+        { label: '女', value: 2 }
+      ],
+      USER_TAG: [
+        { label: '帅', value: 1 },
+        { label: '美', value: 2 },
+        { label: '穷', value: 3 }
+      ]
+    }
+
+    return {
+      items: [
+        { label: '姓名', prop: 'name' },
+        { label: '年龄', prop: 'age' },
+        { label: '性别', prop: 'sex', type: 'enum', enums: DICT.SEX },
+        { label: '画像标签', prop: 'tags', type: 'tag', enums: DICT.USER_TAG },
+        { label: '自我描述', prop: 'desc', type: 'rich-text' },
+        { label: '简历', prop: 'file', type: 'file' }
+      ],
+      dataSource: {
+        name: '张无忌',
+        age: 18,
+        sex: 1,
+        tags: [1, 2],
+        file: [
+          { name: '张无忌简历.png', uuid: 'uid918371270182', isPrivate: true },
+          { name: '周芷若简历.png', uuid: 'uid918371270182', isPrivate: false, url: 'https://prod-common-public.obs-helf.cucloud.cn/mall/goods/893f1000000000114669556' }
+        ],
+        desc: '<p>大家好：</p><p>&nbsp;&nbsp;&nbsp;&nbsp;我叫张无忌，来自武当山。曾经参与过6大门派围攻光明顶。对于处理冲突有丰富经验，希望老师们给我一个机会和大家一同工作。<br/></p>'
+      }
+    }
+  },
+
+  methods: {
+    /**
+     * 下载文件
+     */
+    onDownloadFile() {
+      window.location.href = 'https://www.baidu.com'
+    }
+  }
+}
+</script>
+```
+:::
+
+如果要使用 `iov-pro-preview` 组件，则需要在初始化 `Iov Pro Components` 时配置私有桶接口以及私有桶缓存时长（不配置则无）。配置如下：
+```js
+Vue.use(IovProComponents, {
+  // 说明此项配置是针对preview组件生效
+  preview: {
+    // 获取私有桶文件链接函数
+    // 入参：uuid - 文件id
+    // 返回值：文件url
+    request: Function,
+    // 私有桶缓存的时长
+    cacheTime: 0
+  }
+})
+```
+
+## 插槽
+配置中需要有`value`字段或者`dataSource`对应`prop`需要有值。否则将展示兜底文案。
+::: demo
+```html
+<template>
+  <iov-pro-description
+    :items="items"
+    :data-source="dataSource"
+  >
+    <template #phone>{{ dataSource.phone }}(请勿泄露*)</template>
+  </iov-pro-description>
+</template>
+
+<script>
+export default {
+  data() {
+    const DICT = {
+      SEX: [
+        { label: '男', value: 1 },
+        { label: '女', value: 2 }
+      ],
+      USER_TAG: [
+        { label: '帅', value: 1 },
+        { label: '美', value: 2 },
+        { label: '穷', value: 3 }
+      ]
+    }
+
+    return {
+      items: [
+        { label: '姓名', prop: 'name' },
+        { label: '年龄', prop: 'age' },
+        { label: '性别', prop: 'sex', type: 'enum', enums: DICT.SEX },
+        { label: '年龄', prop: 'address' },
+        { label: '电话', prop: 'phone', type: 'slot' },
+        { label: '画像标签', prop: 'tags', type: 'tag', enums: DICT.USER_TAG },
+        { label: '自我描述', prop: 'desc', type: 'rich-text' },
+        { label: '简历', prop: 'link', type: 'link', onClick: this.onDownloadFile }
+      ],
+      dataSource: {
+        name: '张无忌',
+        age: 18,
+        sex: 1,
+        address: '南京市雨花台区',
+        phone: '13800000000',
+        tags: [1, 2],
+        link: [{ icon: 'https://img.alicdn.com/imgextra/i3/O1CN01WVKxVr22NW6oPUd9C_!!6000000007108-2-tps-96-96.png', name: '张无忌简历.doc', uuid: 'uid918371270182' }],
+        desc: '<p>大家好：</p><p>&nbsp;&nbsp;&nbsp;&nbsp;我叫张无忌，来自武当山。曾经参与过6大门派围攻光明顶。对于处理冲突有丰富经验，希望老师们给我一个机会和大家一同工作。<br/></p>'
+      }
+    }
+  },
+
+  methods: {
+    /**
+     * 下载文件
+     */
+    onDownloadFile() {
+      window.location.href = 'https://www.baidu.com'
+    }
+  }
+}
+</script>
+```
+:::
+
+
+## 设置label宽度
+
+::: demo
+```html
+<template>
+  <iov-pro-description
+    :items="items"
+    :data-source="dataSource"
+    label-width="200"
+  >
+    <template #phone>{{ dataSource.phone }}(请勿泄露*)</template>
+  </iov-pro-description>
+</template>
+
+<script>
+export default {
+  data() {
+    const DICT = {
+      SEX: [
+        { label: '男', value: 1 },
+        { label: '女', value: 2 }
+      ],
+      USER_TAG: [
+        { label: '帅', value: 1 },
+        { label: '美', value: 2 },
+        { label: '穷', value: 3 }
+      ]
+    }
+
+    return {
+      items: [
+        { label: '姓名', prop: 'name' },
+        { label: '年龄', prop: 'age' },
+        { label: '性别', prop: 'sex', type: 'enum', enums: DICT.SEX },
+        { label: '年龄', prop: 'address' },
+        { label: '电话', prop: 'phone', type: 'slot' },
+        { label: '画像标签', prop: 'tags', type: 'tag', enums: DICT.USER_TAG },
+        { label: '自我描述', prop: 'desc', type: 'rich-text' },
+        { label: '简历', prop: 'link', type: 'link', onClick: this.onDownloadFile }
+      ],
+      dataSource: {
+        name: '张无忌',
+        age: 18,
+        sex: 1,
+        address: '南京市雨花台区',
+        phone: '13800000000',
+        tags: [1, 2],
+        link: [{ icon: 'https://img.alicdn.com/imgextra/i3/O1CN01WVKxVr22NW6oPUd9C_!!6000000007108-2-tps-96-96.png', name: '张无忌简历.doc', uuid: 'uid918371270182' }],
+        desc: '<p>大家好：</p><p>&nbsp;&nbsp;&nbsp;&nbsp;我叫张无忌，来自武当山。曾经参与过6大门派围攻光明顶。对于处理冲突有丰富经验，希望老师们给我一个机会和大家一同工作。<br/></p>'
+      }
+    }
+  },
+
+  methods: {
+    /**
+     * 下载文件
+     */
+    onDownloadFile() {
+      window.location.href = 'https://www.baidu.com'
+    }
+  }
+}
+</script>
+```
+:::
+
+## 展示固定值
+::: demo
+```html
+<template>
+  <iov-pro-description
+    :items="items"
+    :data-source="dataSource"
+    label-width="200"
+  >
+    <template #phone>{{ dataSource.phone }}(请勿泄露*)</template>
+  </iov-pro-description>
+</template>
+
+<script>
+export default {
+  data() {
+    const DICT = {
+      SEX: [
+        { label: '男', value: 1 },
+        { label: '女', value: 2 }
+      ],
+      USER_TAG: [
+        { label: '帅', value: 1 },
+        { label: '美', value: 2 },
+        { label: '穷', value: 3 }
+      ]
+    }
+
+    return {
+      items: [
+        { label: '姓名', prop: 'name' },
+        { label: '年龄', prop: 'age' },
+        { label: '性别', prop: 'sex', type: 'enum', enums: DICT.SEX },
+        { label: '年龄', prop: 'address' },
+        { label: '电话', prop: 'phone', type: 'slot' },
+        { label: '画像标签', prop: 'tags', type: 'tag', enums: DICT.USER_TAG },
+        { label: '自我描述', prop: 'desc', type: 'rich-text' },
+        { label: '简历', prop: 'link', type: 'link', onClick: this.onDownloadFile },
+        { label: '备注', value: '金庸推荐' }
+      ],
+      dataSource: {
+        name: '张无忌',
+        age: 18,
+        sex: 1,
+        address: '南京市雨花台区',
+        phone: '13800000000',
+        tags: [1, 2],
+        link: [{ icon: 'https://img.alicdn.com/imgextra/i3/O1CN01WVKxVr22NW6oPUd9C_!!6000000007108-2-tps-96-96.png', name: '张无忌简历.doc', uuid: 'uid918371270182' }],
+        desc: '<p>大家好：</p><p>&nbsp;&nbsp;&nbsp;&nbsp;我叫张无忌，来自武当山。曾经参与过6大门派围攻光明顶。对于处理冲突有丰富经验，希望老师们给我一个机会和大家一同工作。<br/></p>'
+      }
+    }
+  },
+
+  methods: {
+    /**
+     * 下载文件
+     */
+    onDownloadFile() {
+      window.location.href = 'https://www.baidu.com'
+    }
+  }
+}
+</script>
+```
+:::
+
+## Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| dataSource | 数据源 | Array | -  | - |
+| items | 描述项配置,详见下方Items配置 | Array | - | - |
+| defaultValue | 兜底默认值 | String | - | - |
+| labelWidth | 描述项文案宽度 | String | - | - |
+
+## Items Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| type | 描述项支持的类型 | String | text/tag/enum/rich-text/link/file/slot  | text |
+| label | 描述项文案 | String | - | - |
+| value | 描述项值 | String | - | - |
+| prop | 描述项从dataSource取值字段名 | String | - | - |
+| span | 描述项展示栅格的数值 | Number | 1-24 | 12 |
+| slotName | 当type设置为slot时，此字段将会作为插槽名称，如果未设置，则默认为prop值 | String | - | - |
+| showOverflowTooltip | 文字提示超出限制显示模式 | Boolean | - | - |
+| labelWidth | 描述项文案宽度 | Number/String | - | - |
+| onClick | 当type为link/file时，点击链接将会触发此方法 | Function(value) | - | - |

package/docs/components/dialog-select.md

@@ -0,0 +1,91 @@
+# 弹窗搜索 DialogSelect
+
+## 基础使用
+::: demo
+```html
+<template>
+  <div class="app-container">
+    <el-button icon="iov-icon-plus" size="small" @click="onClick">添加订购商品</el-button>
+    <br /><br />
+    <iov-pro-table :columns="SELECTED_GOODS_TABLE_COLUMNS" :data-source="form.goodsSkuList" :config="{table: { border: true }, pagination: getPaginationConfig(form.goodsSkuList)}">
+      <template #operation="scope">
+        <el-link type="primary" @click="onRemove(scope.$index)">移除</el-link>
+      </template>
+    </iov-pro-table>
+    <iov-pro-dialog-select
+      v-model="form.goodsSkuList"
+      title="添加订购商品"
+      row-key="skuNo"
+      placeholder="搜索商品名称或商品编码"
+      :data="goodsList"
+      :visible.sync="visible"
+      :filter-field="['skuNo', 'skuName']"
+      :unselect-columns="UNSELECT_GOODS_TABLE_COLUMNS"
+      :selected-columns="SELECTED_GOODS_TABLE_COLUMNS"
+    />
+  </div>
+</template>
+<script>
+// 未选择商品表格列
+const UNSELECT_GOODS_TABLE_COLUMNS = [
+  { type: 'selection', width: '60px', selectable: () => true, reserveSelection: true },
+  { label: '商品编码', prop: 'skuNo', minWidth: '150px', showOverflowTooltip: true },
+  { label: '商品名称', prop: 'skuName', minWidth: '150px', showOverflowTooltip: true }
+]
+// 已选择商品表格列
+const SELECTED_GOODS_TABLE_COLUMNS = [
+  { label: '商品编码', prop: 'skuNo', minWidth: '150px', showOverflowTooltip: true },
+  { label: '商品名称', prop: 'skuName', minWidth: '150px', showOverflowTooltip: true },
+  { label: '操作', prop: 'operation', minWidth: '80px', showOverflowTooltip: true, type: 'slot', slotName: 'operation', align: 'right' }
+]
+export default {
+  data() {
+    return {
+      form: {
+        goodsSkuList: []
+      },
+      goodsList: [
+        { "skuName": "1119项目人民币2", "skuNo": "LLDZ5356CV59008" },
+        { "skuName": "1119项目人民币2", "skuNo": "LLDZ5356MT1F007" },
+        { "skuName": "1119项目人民币2",  "skuNo": "LLDZ5356WT8Y006" },
+        { "skuName": "1119项目人民币2", "skuNo": "LLDZ5356W485005" }
+      ],
+      visible: false,
+      UNSELECT_GOODS_TABLE_COLUMNS,
+      SELECTED_GOODS_TABLE_COLUMNS
+    }
+  },
+  methods: {
+    onClick() {
+      this.visible = !this.visible
+    },
+
+    onRemove(index) {
+      this.form.goodsSkuList.splice(index, 1)
+    },
+
+    getPaginationConfig(list = []) {
+      return list?.length <= 5
+        ? false
+        : { pageSize: 5, pageSizes: [5, 10, 20, 50] }
+    },
+  }
+}
+</script>
+```
+:::
+
+## Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| v-model | 绑定值	 | [] | -  | - |
+| title | 弹窗标题 | String | -  | - |
+| row-key | 数据唯一标识 | String/Number | - | - |
+| placeholder | 搜索框占位符 | String | - | - |
+| data | 全部数据列表 | String | - | - |
+| visible | 弹窗是否可见 | Boolean | - | false |
+| filter-field | 搜索框过滤字段 | Array | - | - |
+| unselect-columns | 全部数据表格scheme | Array | - | - |
+| selected-columns | 已选数据表格scheme | Array | - | - |
+

package/docs/components/display.md

@@ -0,0 +1,36 @@
+# 显示组件
+组件初始化后，当显示状态为隐藏时，不渲染真实dom。当显示状态变更为显示后，才真正渲染dom。后面再切换显示状态，仅隐藏dom节点，并不移除dom。
+
+## 基础用法
+
+::: demo
+```vue
+<template>
+  <el-tabs v-model="activeName">
+    <el-tab-pane label="页签1" name="tab1">
+      <iov-pro-display :visible="activeName === 'tab1'">页签1内容</iov-pro-display>
+    </el-tab-pane>
+    <el-tab-pane label="页签2" name="tab2">
+      <iov-pro-display :visible="activeName === 'tab2'">页签2内容</iov-pro-display>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeName: 'tab1'
+    }
+  }
+}
+</script>
+```
+:::
+
+
+## Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| visible | 是否显示 | Boolean | -  | false |

package/docs/components/enums.md

@@ -0,0 +1,33 @@
+# 枚举 Enums
+
+## 基础用法
+::: demo
+```html
+<template>
+  <iov-pro-enums
+    :value="1"
+    :enums="enums"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      enums: [
+        { label: '男', value: 1 },
+        { label: '女', value: 2 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| value | 数据 | Number/String | -  | - |
+| enums | 枚举，仅支持 `Label` + `Value` 格式 | Array | - | - |