@wp1001/ui 2.9.13

package/packages/components/xsearcher/xsearcher.vue

@@ -0,0 +1,170 @@
+<script>
+export { default } from './index.js'
+</script>
+
+<template>
+  <div class="x-searcher" :class="isMobile ? 'mobile-x-searcher' : 'pc-x-searcher'">
+    <el-input
+      v-if="!isMobile"
+      :modelValue="$attrs.formatValue?.(modelValue) ?? modelValue"
+      :placeholder="_placeholder"
+      :clearable
+      :readonly
+      :disabled
+      @focus="handleFocus"
+      @clear="handleClear"
+      @click="handleShow"
+    />
+    <van-cell
+      v-else
+      :title="modelValue ? ($attrs.formatValue?.(modelValue) ?? modelValue) : _placeholder"
+      is-link
+      :class="modelValue ? 'x-searcher__value' : 'x-searcher__placeholder'"
+      @click="handleShow"
+    />
+
+    <x-dialog
+      v-model="visible" :title :width :fullscreen actionsheet
+      class="x-searcher__dialog"
+      :class="[
+        isMobile ? 'mobile-x-searcher__dialog' : 'pc-x-searcher__dialog',
+        hideSearcher ? 'hide-searcher' : '',
+        $attrs['dialog-class'] ?? $attrs.dialogClass
+      ]"
+      :onSubmit="multiple ? () => visible = false : null"
+    >
+      <template v-if="$slots.header" #header>
+        <slot name="header" />
+      </template>
+      <van-search
+        v-if="!hideSearcher"
+        v-model="keywords"
+        show-action
+        :clearable="isMobile"
+        :placeholder="searcherPlaceholder || '输入关键词搜索'"
+        @search="handleSearch"
+      >
+        <template #action>
+          <div @click="handleSearch">搜索</div>
+        </template>
+      </van-search>
+      <x-table
+        v-if="header?.length"
+        :table="{}" :data="list" :columns="calcColumns()" plain
+      >
+        <template v-if="$slots.cell" #cell="{ scope, column, value }">
+          <slot name="cell" :item="scope.row" :column :value :index="scope.$index" />
+        </template>
+        <template #operates="{ scope }">
+          <slot name="right" :item="scope.row" :index="scope.$index" />
+        </template>
+      </x-table>
+      <van-list
+        v-else
+        v-loading="loading" element-loading-text="加载中..."
+        :class="{ 'no-data': !list.length }"
+      >
+        <van-cell
+          v-for="(item, index) in list" :key="index"
+          :title="calcTitles(item)"
+          :label="calcSubTitles(item)"
+          @click="handleSelect(item, index)"
+        >
+          <template v-if="$slots.title" #title>
+            <slot name="title" :item :index />
+          </template>
+          <template v-if="$slots['sub-title']" #label>
+            <slot name="sub-title" :item :index />
+          </template>
+          <template #right-icon>
+            <span class="right-custom">
+              <slot name="right" :item :index />
+            </span>
+            <van-icon
+              v-if="Array.isArray(modelValue) ? modelValue.includes(item[value]) : modelValue === item[value]"
+              name="success" class="is-current"
+            />
+          </template>
+        </van-cell>
+      </van-list>
+      <van-empty v-show="!list.length" :description="emptyText || ('未查询到' + title)" />
+    </x-dialog>
+  </div>
+</template>
+
+<style lang="scss">
+.x-searcher {
+  .van-cell {
+    padding: 0 !important;
+  }
+  &__placeholder {
+    color: #c3c3c3;
+  }
+  &__dialog {
+    .el-dialog__body {
+      padding-top: 0 !important;
+    }
+    &.hide-searcher {
+      .van-list {
+        height: 100%;
+      }
+    }
+    .van-search {
+      padding: 10px 0;
+      position: sticky;
+      left: 0;
+      top: 0;
+      z-index: 100;
+      .van-search__action {
+        padding-right: 0;
+      }
+    }
+    .el-table {
+      max-height: 400px !important;
+    }
+    .van-list {
+      position: relative;
+      height: calc(100% - 44px);
+      padding-bottom: 10px;
+      overflow-y: auto;
+      &.no-data {
+        height: 0 !important;
+      }
+      .van-cell {
+        position: relative;
+        cursor: pointer;
+        padding: 5px;
+        &:hover {
+          background-color: #eee;
+        }
+        .van-cell__label {
+          margin-top: 0;
+        }
+      }
+    }
+    .right-custom {
+      position: absolute;
+      right: 20px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .is-current {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      line-height: 24px;
+    }
+  }
+}
+.mobile-x-searcher__dialog {
+  .van-action-sheet__content {
+    height: 60vh;
+  }
+  .van-list {
+    .van-cell {
+      padding: 5px 0;
+    }
+  }
+}
+</style>

package/packages/components/xselect/mobile.js

@@ -0,0 +1,86 @@
+import { formatOptions } from '../../utils/index.js'
+import { remoteSearch } from './util.js'
+
+export default {
+  name: 'MobileXSelect',
+  inheritAttrs: false,
+  props: {
+    modelValue: Boolean | Number | String | Array,
+    modelName: String,
+    params: Object,
+    modelValue: Boolean | Number | String,
+    text: {
+      type: String,
+      default: 'text'
+    },
+    value: {
+      type: String,
+      default: 'value'
+    },
+    sort: Boolean | String,
+    options: Array | Object
+  },
+  emits: ['update:modelValue', 'change'],
+  computed: {
+    canEdit () {
+      return !this.$attrs.disabled && !this.$attrs.readonly
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      _value: undefined,
+      _options: []
+    }
+  },
+  watch: {
+    modelValue: {
+      immediate: true,
+      handler (value) {
+        this._value = value
+      }
+    },
+    options: {
+      immediate: true,
+      deep: true,
+      handler () {
+        this._options = formatOptions(this.options, this)
+      }
+    }
+  },
+  created () {
+    if (this.modelName) {
+      this.remoteSearch()
+    }
+  },
+  methods: {
+    formatOptions,
+    remoteSearch (query) {
+      if (!this.modelName) {
+        return this._options
+      }
+      remoteSearch(this.service.restful, query, this)
+    },
+    onShow () {
+      if (!this.canEdit) return
+      this.visible = true
+    },
+    onClick (e) {
+      if (!this.canEdit) return
+      if (!e.target.classList.contains('van-overlay')) {
+        this.onShow()
+      }
+    },
+    onConfirm () {
+      if (this._value == null || this._value === '') {
+        this._value = this._options[0].value
+      }
+      this.visible = false
+      this.$emit('update:modelValue', this._value)
+      this.$emit('change', this._value)
+    },
+    onChange (e) {
+      this._value = e.selectedValues[0]
+    }
+  }
+}

package/packages/components/xselect/mobile.vue

@@ -0,0 +1,24 @@
+<script>
+export { default } from './mobile.js'
+</script>
+
+<template>
+  <div
+    @click.native="onClick"
+    class="x-select mobile-x-select"
+  >
+    <x-picker
+      v-bind="$attrs"
+      :modelValue="_value"
+      @update:modelValue="onChange"
+      :show="visible"
+      :columns="_options"
+      class="x-select__picker"
+      @click.stop
+      @show="onShow"
+      @cancel="visible = false"
+      @confirm="onConfirm"
+      @change="onChange"
+    />
+  </div>
+</template>

package/packages/components/xselect/pc.js

@@ -0,0 +1,114 @@
+import { markRaw } from 'vue'
+import { formatOptions } from '../../utils/index.js'
+import { remoteSearch, calcMainLabel, calcRemarkLabel } from './util.js'
+
+export default {
+  name: 'PcXSelect',
+  props: {
+    modelName: String,
+    params: Object,
+    modelValue: Boolean | Number | String,
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    text: {
+      type: String,
+      default: 'text'
+    },
+    labelTexts: Array,
+    value: {
+      type: String,
+      default: 'value'
+    },
+    filterable: {
+      type: Boolean,
+      default: true
+    },
+    remote: {
+      type: Boolean,
+      default: false
+    },
+    sort: Boolean | String,
+    options: Array | Object,
+
+    // 接收下面这几个属性，为了避免这些属性被绑定到当前组件根节点上，在下面会进行过滤传给子组件
+    platform: String
+  },
+  emits: ['update:modelValue'],
+  data () {
+    return {
+      loading: false,
+      _options: [],
+      list: []
+    }
+  },
+  computed: {
+    placeholder () {
+      if (this.$attrs.placeholder) return this.$attrs.placeholder
+      return this.remote ? '请搜索关键词以选择' : '请选择'
+    }
+  },
+  watch: {
+    options: {
+      immediate: true,
+      deep: true,
+      handler () {
+        const ops = formatOptions(this.options, this)
+        if (!this.$slots.custom) {
+          ops.forEach((op, index) => {
+            op._main_ = calcMainLabel(this.options[index], this)
+            op._remark_ = calcRemarkLabel(this.options[index], this)
+          })
+        }
+        this._options = markRaw(ops)
+        this.list = this._options
+      }
+    }
+  },
+  created () {
+    const ps = this.remoteSearch()
+    const un = this.$watch(() => this.modelValue, value => {
+      if (!value) return
+      ps.then(this.remoteSearch)
+      un()
+    })
+  },
+  methods: {
+    formatOptions,
+    handleRemote (e) {
+      const keywords = e.target.value.trim()
+      if (keywords === this._last_keywords_) return
+      this._last_keywords_ = keywords
+      if (this.$attrs.remoteMethod) this.$attrs.remoteMethod(keywords)
+      else if (this.remoteSearch) this.remoteSearch(keywords)
+    },
+    onChange (value) {
+      this.$emit('update:modelValue', value)
+    },
+    filter (keywords) {
+      keywords = keywords.trim()
+      if (!keywords) {
+        return this.list = markRaw(this._options)
+      }
+      const isRemarking = !this.$slots.custom && this.labelTexts
+      this.list = markRaw(this._options.filter(op => {
+        let text = op.text
+        if (isRemarking) text += op._main_ + op._remark_
+        return text.includes(keywords)
+      }))
+    },
+    async remoteSearch (query) {
+      if (!this.remote && !this.modelName) {
+        return this._options
+      }
+      await remoteSearch(this.service.restful, query, this)
+    },
+    calcMainLabel (option) {
+      return calcMainLabel(option, this)
+    },
+    calcRemarkLabel (option) {
+      return calcRemarkLabel(option, this)
+    }
+  }
+}

package/packages/components/xselect/pc.vue

@@ -0,0 +1,55 @@
+<script>
+export { default } from './pc.js'
+</script>
+
+<template>
+  <el-select
+    class="x-select pc-x-select"
+    :class="plain ? 'x-select--plain' : ''"
+    :loading
+    :value-on-clear="null"
+    v-bind="$attrs"
+    :modelValue
+    :filterable
+    :remote
+    clearable
+    :placeholder
+    :filter-method="remote ? undefined : ($attrs.filterMethod || filter)"
+    @keyup.enter="handleRemote"
+    @update:modelValue="onChange"
+  >
+    <el-option
+      v-for="(option, index) in list"
+      v-bind="$attrs"
+      :disabled="option.raw?.disabled"
+      :key="option.value"
+      :label="option.text"
+      :value="option.value"
+    >
+      <slot
+        v-if="$slots.custom"
+        name="custom"
+        :option
+        :raw="option.raw"
+      />
+      <span v-else>
+        <span class="main">{{ option._main_ }}</span>
+        <span class="remark">{{ option._remark_ }}</span>
+      </span>
+    </el-option>
+  </el-select>
+</template>
+
+<style lang="scss" scoped>
+.x-select--plain {
+  width: 100px;
+  :deep(.el-select__wrapper) {
+    box-shadow: none;
+    cursor: pointer;
+  }
+}
+.remark {
+  color: #a0aaaa;
+  margin-left: 10px;
+}
+</style>

package/packages/components/xselect/util.js

@@ -0,0 +1,66 @@
+const { highdict } = StardustJs
+
+const remoteSearch = async (restful, query, vm) => {
+  if (vm.loading || vm.options._loading) return
+  vm.loading = true
+  vm.options._loading = true
+  const keywords = query?.trim().split(' ').filter(k => k)
+  const { text = 'text', value = 'value', labelTexts, $props, $attrs, params = {} } = vm
+  params.attributes = [...new Set(params.attributes || [...(labelTexts || []), text, value])]
+  params.page ||= 1
+  params.limit ||= 20
+  params.where ||= {}
+  const ors = []
+  if (keywords?.length) {
+    if (labelTexts?.length > 1) {
+      labelTexts.forEach(t => {
+        keywords.forEach(k => {
+          ors.push({ [t]: { '[Op.like]': `%${k}%` } })
+        })
+      })
+    } else {
+      keywords.forEach(k => {
+        ors.push({ [text]: { '[Op.like]': `%${k}%` } })
+      })
+    }
+  }
+  if (ors.length) params.where['[Op.or]'] = ors
+  const data = await restful.search(vm.modelName, params, 'data')
+  if ($props.modelValue != undefined && $props.modelValue !== '') {
+    const values = Array.isArray($props.modelValue) ? $props.modelValue : [$props.modelValue]
+    const allValues = data.map(ele => ele[value])
+    const unfoundValues = values.filter(v => !allValues.includes(v))
+    if (unfoundValues.length) {
+      const unfoundData = await restful.search(vm.modelName, {
+        ...params,
+        where: {
+          [value]: { '[Op.in]': unfoundValues }
+        }
+      }, 'data')
+      data.push(...unfoundData)
+    }
+    data.sort((a, b) => values.indexOf(b[value]) - values.indexOf(a[value]))
+  }
+  vm.options.splice(0, vm.options.length, ...data)
+  vm.loading = false
+  vm.options._loading = false
+}
+
+const calcMainLabel = (option, vm) => {
+  if (!option || typeof option !== 'object') return option
+  if (!vm.labelTexts?.length) return highdict.get(option, vm.text)
+  return highdict.get(option, vm.labelTexts[0])
+}
+
+const calcRemarkLabel = (option, vm) => {
+  if (!option || typeof option !== 'object') return ''
+  if (!vm.labelTexts || vm.labelTexts.length < 2) return ''
+  const labels = vm.labelTexts.slice(1).map(text => highdict.get(option, text))
+  return '(' + labels.join(' - ') + ')'
+}
+
+export {
+  remoteSearch,
+  calcMainLabel,
+  calcRemarkLabel
+}

package/packages/components/xselectv2/index.js

@@ -0,0 +1,91 @@
+import { markRaw } from 'vue'
+import { formatOptions } from '../../utils/index.js'
+import { remoteSearch, calcMainLabel, calcRemarkLabel } from '../xselect/util.js'
+
+export default {
+  name: 'XSelectV2',
+  props: {
+    modelName: String,
+    params: Object,
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    text: {
+      type: String,
+      default: 'text'
+    },
+    labelTexts: Array,
+    value: {
+      type: String,
+      default: 'value'
+    },
+    filterable: {
+      type: Boolean,
+      default: true
+    },
+    remote: {
+      type: Boolean,
+      default: false
+    },
+    sort: Boolean | String,
+    options: Array | Object,
+  },
+  data () {
+    return {
+      loading: false,
+      _options: [],
+      list: []
+    }
+  },
+  watch: {
+    options: {
+      immediate: true,
+      deep: true,
+      handler () {
+        const ops = formatOptions(this.options, this)
+        if (!this.$slots.custom) {
+          ops.forEach((op, index) => {
+            op._main_ = calcMainLabel(this.options[index], this)
+            op._remark_ = calcRemarkLabel(this.options[index], this)
+          })
+        }
+        this._options = markRaw(ops)
+        this.list = this._options
+      }
+    }
+  },
+  created () {
+    if (this.modelName) {
+      this.remoteSearch()
+    }
+  },
+  methods: {
+    formatOptions,
+    handleRemote (e) {
+      const keywords = e.target.value.trim()
+      if (keywords === this._last_keywords_) return
+      this._last_keywords_ = keywords
+      if (this.$attrs.remoteMethod) this.$attrs.remoteMethod(keywords)
+      else if (this.remoteSearch) this.remoteSearch(keywords)
+    },
+    filter (keywords) {
+      keywords = keywords.trim()
+      if (!keywords) {
+        return this.list = markRaw(this._options)
+      }
+      const isCustom = !!this.$slots.custom
+      this.list = markRaw(this._options.filter(op => {
+        let text = op.text
+        if (!isCustom) text += op._main_ + op._remark_
+        return text.includes(keywords)
+      }))
+    },
+    remoteSearch (query) {
+      if (!this.remote && !this.modelName) {
+        return this._options
+      }
+      remoteSearch(this.service.restful, query, this)
+    }
+  }
+}

package/packages/components/xselectv2/xselectv2.vue

@@ -0,0 +1,46 @@
+<script>
+export { default } from './index.js'
+</script>
+
+<template>
+  <el-select-v2
+    class="x-select-v2 pc-x-select-v2"
+    :class="plain ? 'x-select-v2--plain' : ''"
+    :loading
+    v-bind="$attrs"
+    :options="list"
+    :props="{ label: 'text' }"
+    :filterable
+    :remote
+    clearable
+    :filter-method="remote ? undefined : ($attrs.filterMethod || filter)"
+    @keyup.enter="handleRemote"
+  >
+    <template #default="{ item, index }">
+      <slot
+        v-if="$slots.custom"
+        name="custom"
+        :option="item"
+        :raw="item.raw"
+      />
+      <span v-else>
+        <span class="main">{{ item._main_ }}</span>
+        <span class="remark">{{ item._remark_ }}</span>
+      </span>
+    </template>
+  </el-select-v2>
+</template>
+
+<style lang="scss" scoped>
+.x-select-v2--plain {
+  width: 100px;
+  :deep(.el-select__wrapper) {
+    box-shadow: none;
+    cursor: pointer;
+  }
+}
+.remark {
+  color: #a0aaaa;
+  margin-left: 10px;
+}
+</style>