ci-plus 1.3.6 → 1.3.8

package/src/select/README.md

@@ -0,0 +1,571 @@
+CiSelect 下拉选择组件
+单选
+
+```ts
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <ci-select
+        placeholder="请选择工序"
+        v-model="selectVlaue"
+        :optionSource="stepList"
+        valueCustom="label"
+        @change="selectChange"
+        width="200px"
+      />
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+
+<script setup lang="ts" name="Single">
+import { ref } from 'vue'
+const selectVlaue = ref<any>()
+const stepList = [
+  { label: '开始' },
+  { label: 'POSUI' },
+  { label: '11' },
+  { label: 'GX123' },
+  { label: '烘干破碎' },
+  { label: '车间仓库' },
+  { label: 'ui3333' },
+  { label: 'hhh333' }
+]
+const selectChange = (val: any) => {
+  console.log('selectChange', val, selectVlaue.value)
+}
+</script>
+```
+
+自定义显示下拉项label
+设置customLabel字符串表达式：${item.label}（${item.id}）;注意：表达式必须以item开头，且后面的属性必须存在optionSource中
+
+```vue
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <ci-select
+        placeholder="自定义显示下拉项label"
+        v-model="selectVlaue"
+        :optionSource="stepList"
+        valueCustom="label"
+        customLabel="`${item.label}（${item.id}）`"
+        @change="selectChange"
+      ></ci-select>
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const selectVlaue = ref<any>()
+const stepList = ref([
+  { label: '开始', id: 1 },
+  { label: 'POSUI', id: 2 },
+  { label: '11', id: 3 },
+  { label: 'GX123', id: 4 },
+  { label: '烘干破碎', id: 5 },
+  { label: '车间仓库', id: 6 },
+  { label: 'ui3333', id: 7 },
+  { label: 'hhh333', id: 8 }
+])
+const selectChange = (val: any) => {
+  console.log('selectChange', val, selectVlaue.value)
+}
+</script>
+```
+
+单选分页
+在组件中配置：isShowPagination 及 paginationOption
+
+```vue
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <ci-select
+        placeholder="请选择工序（单选分页）"
+        v-model="selectVlaue"
+        :optionSource="stepList"
+        labelCustom="materialName"
+        valueCustom="id"
+        @current-change="currentChange"
+        @change="selectChange"
+        isShowPagination
+        :paginationOption="paginationOption"
+      />
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+<script setup lang="ts" name="Pagination">
+import { onMounted, ref } from 'vue'
+import data from './data.json'
+import data1 from './data1.json'
+const selectVlaue = ref<any>()
+const stepList = ref([])
+const paginationOption = ref({
+  pageSize: 6, // 每页显示条数
+  currentPage: 1, // 当前页
+  pagerCount: 7, // 按钮数，超过时会折叠
+  total: 0 // 总条数
+})
+onMounted(() => {
+  getList(1)
+})
+const getList = async (pageNum) => {
+  let res
+  if (pageNum === 1) {
+    res = await data
+  } else {
+    res = await data1
+  }
+  if (res.success) {
+    stepList.value = res.data.records
+    paginationOption.value.total = res.data.total
+    // console.log('获取数据', paginationOption.value)
+  }
+}
+// 切换分页
+const currentChange = (val: any) => {
+  console.log('切换分页current-change事件', val)
+  getList(val)
+}
+const selectChange = (val: any) => {
+  console.log(`change返回值${val};v-model值${selectVlaue.value}`)
+}
+</script>
+```
+
+单选禁用
+在组件中数据源：optionSource 不满足条件时，新增disabled属性，设置为true即可
+
+```vue
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <ci-select
+        placeholder="单选禁用"
+        v-model="selectVlaue"
+        :optionSource="stepList"
+        valueCustom="label"
+        @change="selectChange"
+        width="200px"
+      />
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+<script setup lang="ts" name="singleDisabled">
+import { onMounted, ref } from 'vue'
+const selectVlaue = ref<any>()
+const stepList: any = ref([])
+onMounted(() => {
+  getData()
+})
+const getData = () => {
+  let list = [
+    { label: '开始', id: 1 },
+    { label: 'POSUI', id: 2 },
+    { label: '11', id: 3 },
+    { label: 'GX123', id: 4 },
+    { label: '烘干破碎', id: 5 },
+    { label: '单选禁用项', id: undefined },
+    { label: '车间仓库', id: 6 },
+    { label: 'ui3333', id: 7 },
+    { label: 'hhh333', id: 8 }
+  ]
+  list.map((item: any) => {
+    if (item.id === undefined) {
+      item.disabled = true
+    }
+  })
+  stepList.value = list
+}
+// 选中值发生变化时触发
+const selectChange = (val: any) => {
+  console.log('selectChange', val, selectVlaue.value)
+}
+</script>
+```
+
+多选禁用
+在组件中数据源：optionSource 不满足条件时，新增disabled属性，设置为true即可
+
+```vue
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <ci-select
+        placeholder="多选禁用"
+        v-model="selectVlaue"
+        :optionSource="stepList"
+        valueCustom="label"
+        @change="selectChange"
+        multiple
+      />
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+<script setup lang="ts" name="Multiple">
+import { ref, onMounted } from 'vue'
+const selectVlaue = ref<any>()
+const stepList: any = ref([])
+onMounted(() => {
+  getData()
+})
+const getData = () => {
+  let list = [
+    { label: '开始', id: 1 },
+    { label: 'POSUI', id: 2 },
+    { label: '11', id: 3 },
+    { label: 'GX123', id: 4 },
+    { label: '烘干破碎', id: 5 },
+    { label: '单选禁用项1', id: undefined },
+    { label: '单选禁用项2', id: undefined },
+    { label: '车间仓库', id: 6 },
+    { label: 'ui3333', id: 7 },
+    { label: 'hhh333', id: 8 }
+  ]
+  list.map((item: any) => {
+    if (item.id === undefined) {
+      item.disabled = true
+    }
+  })
+  stepList.value = list
+}
+const selectChange = (val: any) => {
+  console.log('selectChange', val, selectVlaue.value)
+}
+</script>
+```
+
+多选
+
+```vue
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <ci-select
+        placeholder="请选择工序"
+        v-model="selectVlaue"
+        :optionSource="stepList"
+        valueCustom="label"
+        @change="selectChange"
+        multiple
+      />
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+<script setup lang="ts" name="Multiple">
+import { ref } from 'vue'
+const selectVlaue = ref<any>()
+const stepList = [
+  { label: '开始' },
+  { label: 'POSUI' },
+  { label: '11' },
+  { label: 'GX123' },
+  { label: '烘干破碎' },
+  { label: '车间仓库' },
+  { label: 'ui3333' },
+  { label: 'hhh333' }
+]
+const selectChange = (val: any) => {
+  console.log('selectChange', val, selectVlaue.value)
+}
+</script>
+```
+
+多选--隐藏多余标签的多选
+use collapse-tags
+use collapse-tags-tooltip
+use max-collapse-tags
+
+```vue
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <div>use collapse-tags</div>
+      <ci-select
+        placeholder="请选择(多选)"
+        v-model="selectVlaue1"
+        :optionSource="stepList"
+        valueCustom="label"
+        collapse-tags
+        multiple
+        @change="selectChange($event, '1')"
+      />
+    </t-layout-page-item>
+    <t-layout-page-item>
+      <div>use collapse-tags-tooltip</div>
+      <ci-select
+        placeholder="请选择(多选)"
+        v-model="selectVlaue2"
+        :optionSource="stepList"
+        valueCustom="label"
+        collapse-tags
+        collapse-tags-tooltip
+        multiple
+        @change="selectChange($event, '2')"
+      />
+    </t-layout-page-item>
+    <t-layout-page-item>
+      <div>use max-collapse-tags</div>
+      <ci-select
+        placeholder="请选择(多选)"
+        v-model="selectVlaue3"
+        :optionSource="stepList"
+        valueCustom="label"
+        collapse-tags
+        collapse-tags-tooltip
+        :max-collapse-tags="3"
+        multiple
+        @change="selectChange($event, '3')"
+      />
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+<script setup lang="ts" name="multipleCollapseTags">
+import { ref } from 'vue'
+const selectVlaue1 = ref<any>()
+const selectVlaue2 = ref<any>()
+const selectVlaue3 = ref<any>()
+const stepList = [
+  { label: '开始' },
+  { label: 'POSUI' },
+  { label: '11' },
+  { label: 'GX123' },
+  { label: '烘干破碎' },
+  { label: '车间仓库' },
+  { label: 'ui3333' },
+  { label: 'hhh333' }
+]
+const selectChange = (val: any, type) => {
+  console.log(`selectChange--selectVlaue${type}`, val)
+}
+</script>
+```
+
+多选分页
+在组件中配置：isShowPagination 及 paginationOption；多选不支持翻页选中功能
+
+```vue
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <ci-select
+        placeholder="请选择工序（多选分页）"
+        v-model="selectVlaue"
+        :optionSource="stepList"
+        labelCustom="materialName"
+        valueCustom="id"
+        @current-change="currentChange"
+        @change="selectChange"
+        isShowPagination
+        multiple
+        :paginationOption="paginationOption"
+      />
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+<script setup lang="ts" name="Pagination">
+import { onMounted, ref } from 'vue'
+import data from './data.json'
+import data1 from './data1.json'
+const selectVlaue = ref<any>()
+const stepList = ref([])
+const paginationOption = ref({
+  pageSize: 6, // 每页显示条数
+  currentPage: 1, // 当前页
+  pagerCount: 7, // 按钮数，超过时会折叠
+  total: 0 // 总条数
+})
+onMounted(() => {
+  getList(1)
+})
+const getList = async (pageNum) => {
+  let res
+  if (pageNum === 1) {
+    res = await data
+  } else {
+    res = await data1
+  }
+  if (res.success) {
+    stepList.value = res.data.records
+    paginationOption.value.total = res.data.total
+    // console.log('获取数据', paginationOption.value)
+  }
+}
+// 切换分页
+const currentChange = (val: any) => {
+  console.log('切换分页current-change事件', val)
+  getList(val)
+}
+const selectChange = (val: any) => {
+  console.log(`change返回值${val};v-model值${selectVlaue.value}`)
+}
+</script>
+```
+
+虚拟列表--单选
+在组件中配置：use-virtual 即可
+
+```vue
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <ci-select
+        placeholder="请选择(虚拟列表--单选)"
+        v-model="selectVlaue"
+        :optionSource="stepList"
+        useVirtual
+        @change="selectChange"
+      />
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+<script setup lang="ts" name="useVirtual">
+import { ref } from 'vue'
+const selectVlaue = ref<any>()
+const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
+const stepList = Array.from({ length: 1000 }).map((_, idx) => ({
+  value: `Option ${idx + 1}`,
+  label: `${initials[idx % 10]}${idx}`
+}))
+const selectChange = (val: any) => {
+  console.log('selectChange', val, selectVlaue.value)
+}
+</script>
+```
+
+虚拟列表--多选
+在组件中配置：use-virtual 即可
+
+```vue
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <ci-select
+        placeholder="请选择(虚拟列表--多选)"
+        v-model="selectVlaue"
+        :optionSource="stepList"
+        useVirtual
+        multiple
+        @change="selectChange"
+      />
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+<script setup lang="ts" name="useVirtual">
+import { ref } from 'vue'
+const selectVlaue = ref<any>()
+const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
+const stepList = Array.from({ length: 1000 }).map((_, idx) => ({
+  value: `Option ${idx + 1}`,
+  label: `${initials[idx % 10]}${idx}`
+}))
+const selectChange = (val: any) => {
+  console.log('selectChange', val, selectVlaue.value)
+}
+</script>
+```
+
+虚拟列表--隐藏多余标签的多选
+use collapse-tags
+use collapse-tags-tooltip
+use max-collapse-tags
+
+```vue
+<template>
+  <t-layout-page>
+    <t-layout-page-item>
+      <div>use collapse-tags</div>
+      <ci-select
+        placeholder="请选择(虚拟列表--多选选)"
+        v-model="selectVlaue1"
+        :optionSource="stepList"
+        useVirtual
+        collapse-tags
+        multiple
+        @change="selectChange($event, '1')"
+      />
+    </t-layout-page-item>
+    <t-layout-page-item>
+      <div>use collapse-tags-tooltip</div>
+      <ci-select
+        placeholder="请选择(虚拟列表--多选选)"
+        v-model="selectVlaue2"
+        :optionSource="stepList"
+        useVirtual
+        collapse-tags
+        collapse-tags-tooltip
+        multiple
+        @change="selectChange($event, '2')"
+      />
+    </t-layout-page-item>
+    <t-layout-page-item>
+      <div>use max-collapse-tags</div>
+      <ci-select
+        placeholder="请选择(虚拟列表--多选选)"
+        v-model="selectVlaue3"
+        :optionSource="stepList"
+        useVirtual
+        collapse-tags
+        collapse-tags-tooltip
+        :max-collapse-tags="3"
+        multiple
+        @change="selectChange($event, '3')"
+      />
+    </t-layout-page-item>
+  </t-layout-page>
+</template>
+
+<script setup lang="ts" name="useVirtual">
+import { ref } from 'vue'
+const selectVlaue1 = ref<any>()
+const selectVlaue2 = ref<any>()
+const selectVlaue3 = ref<any>()
+const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
+const stepList = Array.from({ length: 1000 }).map((_, idx) => ({
+  value: `Option ${idx + 1}`,
+  label: `${initials[idx % 10]}${idx}`
+}))
+const selectChange = (val: any, type) => {
+  console.log(`selectChange--selectVlaue${type}`, val)
+}
+</script>
+```
+
+CiSelect Attributes
+1、代码示例
+下拉选择组件————可实现单选多选（多选可使用全选功能）
+
+```html
+<ci-select
+  placeholder="请选择工序"
+  v-model="selectVlaue"
+  :optionSource="state.stepList"
+  valueCustom="label"
+  @change="selectChange"
+/>
+```
+
+2、配置参数（Attributes）继承 el-select&el-select-v2 Attributes
+
+参数 说明 类型 默认值
+v-model 绑定值 boolean / string / number/Array 无
+multiple 是否多选 Boolean false
+optionSource 下拉数据源 Array 无
+customLabel 是否自定义设置下拉label String -
+valueCustom 传入的 option 数组中，要作为最终选择项的键值 key String 'key'
+labelCustom 传入的 option 数组中，要作为显示项的键值名称 String 'label'
+useVirtual 是否开启虚拟列表(继承el-select-v2属性) Boolean false
+isShowPagination 是否开启分页 Boolean false
+paginationOption 分页配置 Object -
+
+2-1、paginationOption配置参数（Attributes）继承 el-pagination Attributes
+
+参数 说明 类型 默认值
+currentPage 当前页数 number 1
+pageSize 每页显示条目个数 number 6
+pagerCount 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠 number 5
+total 总条目数 number 0
+layout 组件布局，子组件名用逗号分隔 string 'total, prev, pager, next, jumper'
+bind el-pagination属性 Object -
+
+3、继承 el-select&el-pagination&el-select-v2 events

package/src/select/index.ts

@@ -0,0 +1,4 @@
+import _Select from './select.vue'
+import { withInstall } from '../utils/index';
+export const CiSelect = withInstall(_Select)
+export default CiSelect