@wp1001/ui 2.9.13

package/packages/components/xformitem/utils.jsx

@@ -0,0 +1,181 @@
+import { h, resolveComponent } from 'vue'
+import tableUtils from '../xtable/utils.js'
+
+const OPTIONS_COMPS = ['x-select', 'XSelect', 'x-radios', 'XRadios', 'x-checkboxs', 'XCheckboxs']
+
+export const compRender = (vm) => {
+  const { $props, $attrs, attrs, $emit } = vm
+  let { comp, compType, html, text } = $props
+  const opts = {
+    ...attrs,
+    ...attrs.formAttrs,
+    'onUpdate:modelValue': value => $emit('update:modelValue', value),
+    onChange: value => $emit('change', value)
+  }
+  const children = []
+  if (compType === 'html') {
+    opts.class = 'comp-html'
+  } else {
+    comp = resolveComponent(comp)
+  }
+  if (html) {
+    opts.innerHTML = html
+  }
+  if (text) {
+    children.push(text)
+  }
+  return h(comp, opts, {
+    default: () => children
+  })
+}
+
+const innerSlots = (vm, slotAttrs) => {
+  const { $props, $attrs, attrs, $emit, $slots } = vm
+  const { model, item, modelValue, viewonly, showTooltip } = $props
+  const { slot } = slotAttrs
+  let inner = null
+  if (slot === '$link') {
+    const to = slotAttrs.to(model)
+    const isUrl = /https?\:/.test(to)
+    const options = isUrl ? { href: to, target: '_blank' } : { to }
+    inner = h(isUrl ? 'a' : resolveComponent('router-link'), options, {
+      default: () => tableUtils.methods.calcLink(model, { ...item, ...slotAttrs })
+    })
+  } else if (slot === '$phone') {
+    inner = h('a', {
+      href: `tel:${modelValue}`
+    }, {
+      default: () => modelValue
+    })
+  } else if (slot === '$image') {
+    let images = slotAttrs.images?.(modelValue) ?? [modelValue]
+    images = images.filter(ele => ele)
+    inner = h('div', { }, {
+      default: () => images.map((image, index) => {
+        return h(resolveComponent('el-image'), {
+          src: image, width: 128, height: 128, ...slotAttrs,
+          previewSrcList: images,
+          'initial-index': index,
+          style: { width: '128px', height: '128px', margin: '0 5px 5px 0' }
+        })
+      })
+    })
+  } else if (slot === '$qrcode') {
+    inner = h('img', { src: '', title: modelValue })
+    modelValue && window.QRCode && window.QRCode.toDataURL(modelValue, {
+      width: 128, height: 128, margin: 1, ...slotAttrs
+    }).then(src => { inner.el.src = src })
+  } else {
+    inner = $slots.default()
+  }
+  return inner
+}
+
+export const PcItem = (vm) => {
+  const { $props, $attrs, attrs, $emit, $slots } = vm
+  const { model, item, modelValue, viewonly, slot, showTooltip, placeholder } = $props
+
+  let vnode
+
+  if (slot && !$attrs.label) {
+    vnode = $slots.default()
+  } else {
+    let inner = null
+    if (slot) {
+      inner = $slots.default()
+    } else if (viewonly) {
+      const slotAttrs = attrs.infoAttrs?.slot && attrs.infoAttrs
+        || attrs.tableAttrs?.slot && attrs.tableAttrs
+        || attrs.slot && attrs
+      if (slotAttrs?.slot) {
+        inner = innerSlots(vm, slotAttrs)
+      } else if (OPTIONS_COMPS.includes($props.comp)) {
+        inner = attrs.options.find(o => o[attrs.value ?? 'value'] == modelValue)?.[attrs.text ?? 'text'] ?? modelValue
+      } else if (modelValue && typeof modelValue === 'object') {
+        inner = JSON.stringify(modelValue)
+      } else {
+        inner = modelValue
+      }
+    } else if (showTooltip) {
+      inner = (
+        <el-tooltip effect="dark" content={placeholder} placement="bottom">
+          { compRender(vm) }
+        </el-tooltip>
+      )
+    } else {
+      inner = compRender(vm)
+    }
+    vnode = h(
+      resolveComponent('el-form-item'),
+      { ...$props, ...$attrs },
+      {
+        default: () => [inner],
+        label: () => h('span', {
+          title: $attrs.label,
+          class: 'overflow-text',
+          style: {
+            width: ($props.required ? (parseInt($props.labelWidth) - 13 + 'px') : $props.labelWidth),
+            display: 'inline-block'
+          }
+        }, [$attrs.label])
+      }
+    )
+  }
+  return vnode
+}
+
+export const MobileItem = (vm) => {
+  const { $props, $attrs, attrs, $emit, $slots } = vm
+  const { viewonly, slot, comp, modelValue } = $props
+
+  let vnode
+
+  if (slot && !$attrs.label) {
+    vnode = $slots.default({ ...$props, ...$attrs })
+  } else {
+    const opts = {
+      modelValue,
+      labelWidth: $attrs['label-width'],
+      labelAlign: $attrs['label-align'] ?? $attrs['label-position'],
+      'onUpdate:modelValue': value => $emit('update:modelValue', value),
+      onChange: value => $emit('change', value)
+    }
+    if (slot && $attrs.label || comp) {
+      if (!(slot && $attrs.label) && !viewonly) {
+        delete opts['onUpdate:modelValue']
+      }
+      vnode = h(resolveComponent('van-field'), opts, {
+        input: () => {
+          if (slot && $attrs.label) {
+            return $slots.default()
+          } else if (viewonly) {
+            let inner = null
+            const slotAttrs = attrs.infoAttrs?.slot && attrs.infoAttrs
+              || attrs.tableAttrs?.slot && attrs.tableAttrs
+              || attrs.slot && attrs
+            if (slotAttrs?.slot) {
+              inner = innerSlots(vm, slotAttrs)
+            } else {
+              inner = modelValue
+              if (OPTIONS_COMPS.includes($props.comp)) {
+                inner = attrs.options.find(o => o[attrs.value ?? 'value'] == modelValue)?.[attrs.text ?? 'text'] ?? modelValue
+              }
+              if (modelValue && typeof modelValue === 'object') {
+                inner = JSON.stringify(modelValue)
+              }
+            }
+            return inner
+          }
+          return compRender(vm)
+        }
+      })
+    } else {
+      Object.assign(opts, attrs)
+      if (viewonly) {
+        Object.assign(opts, { readonly: true })
+      }
+      vnode = h(resolveComponent('van-field'), opts)
+    }
+  }
+  return vnode
+}

package/packages/components/xicon/mobile.js

@@ -0,0 +1,35 @@
+// javascript-obfuscator:disable
+const modules = import.meta.glob('../../assets/icons/*.png')
+// javascript-obfuscator:enable
+
+export default {
+  name: 'MobileXIcon',
+  props: {
+    name: String
+  },
+  data () {
+    return {
+      icons: {}
+    }
+  },
+  computed: {
+    iconClass () {
+      const [set, name] = this.name.split(':')
+      return 'icon--' + set + ' icon--' + set + '--' + name
+    }
+  },
+  created () {
+    this.initIcons()
+  },
+  methods: {
+    async initIcons () {
+      const icons = {}
+      await Promise.all(Object.keys(modules).map(async path => {
+        const name = path.split('/').pop().split('.')[0]
+        const res = await modules[path]()
+        icons[name] = res.default
+      }))
+      this.icons = icons
+    }
+  }
+}

package/packages/components/xicon/mobile.vue

@@ -0,0 +1,9 @@
+<script>
+export { default } from './mobile.js'
+</script>
+
+<template>
+  <span v-if="name.includes(':')" :class="iconClass" />
+  <img v-else-if="icons[name]" :src="icons[name]" alt="icon">
+  <van-icon v-else v-bind="$attrs" :name />
+</template>

package/packages/components/xicon/pc.js

@@ -0,0 +1,35 @@
+// javascript-obfuscator:disable
+const modules = import.meta.glob('../../assets/icons/*.png')
+// javascript-obfuscator:enable
+
+export default {
+  name: 'PcXIcon',
+  props: {
+    name: String
+  },
+  data () {
+    return {
+      icons: {}
+    }
+  },
+  computed: {
+    iconClass () {
+      const [set, name] = this.name.split(':')
+      return 'icon--' + set + ' icon--' + set + '--' + name
+    }
+  },
+  created () {
+    this.initIcons()
+  },
+  methods: {
+    async initIcons () {
+      const icons = {}
+      await Promise.all(Object.keys(modules).map(async path => {
+        const name = path.split('/').pop().split('.')[0]
+        const res = await modules[path]()
+        icons[name] = res.default
+      }))
+      this.icons = icons
+    }
+  }
+}

package/packages/components/xicon/pc.vue

@@ -0,0 +1,11 @@
+<script>
+export { default } from './pc.js'
+</script>
+
+<template>
+  <span v-if="name.includes(':')" :class="iconClass" />
+  <img v-else-if="icons[name]" :src="icons[name]" alt="icon">
+  <el-icon v-else v-bind="$attrs">
+    <component :is="name" />
+  </el-icon>
+</template>

package/packages/components/xinfo/index.js

@@ -0,0 +1,100 @@
+const { highdict } = StardustJs
+import tableUtils from '../xtable/utils.js'
+
+export default {
+  name: 'XInfo',
+  props: {
+    data: Object,
+    fields: Array,
+    span: {
+      type: Number,
+      default: window.isMobile ? 24 : 8
+    },
+    showColon: {
+      type: Boolean,
+      default: false
+    },
+    labelWidth: {
+      type: String,
+      default: '80px'
+    },
+    align: String,
+    labelAlign: String,
+    valueAlign: String,
+    defaultValue: ''
+  },
+  computed: {
+    blocks () {
+      const blocks = {}
+      this.fields.filter(f => f.prop || f.comp || f.slot).forEach(f => {
+        const { infoAttrs = {}, ...others } = f
+        const item = { span: this.span, ...others, ...infoAttrs }
+        const name = item.block || '基本信息'
+        let block = blocks[name]
+        if (!block) {
+          blocks[name] = block = []
+          block.span = 0
+        }
+        if (block.span + item.span > 24 && block.length) {
+          block[block.length - 1].span += 24 - block.span
+        } else {
+          block.span += item.span
+        }
+        block.push(item)
+      })
+      return blocks
+    },
+    hideHeader () {
+      const keys = Object.keys(this.blocks)
+      return keys.length === 1 && keys[0] === '基本信息'
+    },
+    _labelAlign () {
+      return this.labelAlign || this.align || 'left'
+    },
+    _valueAlign () {
+      return this.valueAlign || this.align || 'left'
+    }
+  },
+  data () {
+    return {
+      activeNames: [],
+      get: highdict.get
+    }
+  },
+  created () {
+    this.activeNames = Object.keys(this.blocks)
+  },
+  mounted () {
+    if (window.QRCode && this.$refs.qrcodeImg?.length) {
+      this.qrcodeDict ||= {}
+      this.fields.filter(field => {
+        return field.slot === '$qrcode' || field.infoAttrs?.slot === '$qrcode'
+      }).forEach(async (field, index) => {
+        const value = this.get(this.data, field.prop)
+        this.qrcodeDict[value] ||= new Promise(resolve => {
+          window.QRCode.toDataURL(value, {
+            width: 128, height: 128, margin: 1, ...field.infoAttrs
+          }).then(src => {
+            this.qrcodeDict[value] = src
+            resolve(src)
+          })
+        })
+        this.$refs.qrcodeImg[index].src = await this.qrcodeDict[value]
+      })
+    }
+  },
+  methods: {
+    calcValue: tableUtils.methods.calcValue,
+    calcLink: tableUtils.methods.calcLink,
+    calcImages (field, data) {
+      if (!data._images) {
+        const scope = { row: data }
+        tableUtils.methods.calcImages(scope, field)
+        data._images = scope._images
+        data._urls = scope._urls
+        data._image_urls = scope._image_urls
+      }
+      return data._images
+    }
+  }
+}

package/packages/components/xinfo/xinfo.vue

@@ -0,0 +1,140 @@
+<script>
+export { default } from './index.js'
+</script>
+
+<template>
+  <el-collapse
+    v-model="activeNames"
+    class="x-info"
+    :class="[isMobile ? 'mobile-x-info' : 'pc-x-info', { 'hide-header': hideHeader }]"
+  >
+    <el-collapse-item
+      v-for="(items, k) in blocks"
+      :key="k"
+      :title="k"
+      :name="k"
+    >
+      <el-row :gutter="$attrs.gutter || 10">
+        <el-col
+          v-for="field in items"
+          :key="field.prop"
+          :span
+          v-bind="field"
+        >
+          <div
+            v-if="field.label || $slots.label" class="x-info__label"
+            :style="{ width: field.labelWidth || labelWidth }"
+          >
+            <slot v-if="$slots.label" name="label" :label="field.label" />
+            <span v-else>{{ field.label ? (showColon ? (field.label + '：') : field.label) : '' }}</span>
+          </div>
+          <div
+            class="x-info__value"
+            :style="{ width: `calc(100% - ${field.labelWidth || labelWidth})` }"
+          >
+            <a
+              v-if="field.slot === '$link' && /https?\:/.test(field.to(data))"
+              :href="field.to(data)" target="_blank"
+            >
+              {{ calcLink(data, field) }}
+            </a>
+            <router-link
+              v-else-if="field.slot === '$link'"
+              :to="field.to(data)"
+            >
+              {{ calcLink(data, field) }}
+            </router-link>
+            <el-space v-else-if="field.slot === '$image'" wrap>
+              <div class="image-item" v-for="(image, index) in calcImages(field, data)" :key="index">
+                <el-image
+                  v-if="image.type === 'image'"
+                  :src="image.url"
+                  :preview-src-list="data._image_urls"
+                  :initial-index="data._image_urls.indexOf(image.url)"
+                  lazy preview-teleported
+                  v-bind="field"
+                />
+                <video
+                  v-else-if="image.type === 'video'"
+                  :src="image.url" controls
+                />
+                <a
+                  v-else
+                  :href="image.url" target="_blank" @click.native="field.onDownload?.(image, index, $event)"
+                >
+                  <x-icon :name="image.icon" class="file-icon" />
+                </a>
+              </div>
+            </el-space>
+            <a
+              v-else-if="field.slot === '$phone'"
+              :href="`tel:${get(data, field.prop)}`"
+            >
+              {{ get(data, field.prop) }}
+            </a>
+            <img
+              v-else-if="field.slot === '$qrcode'"
+              ref="qrcodeImg"
+              :title="get(data, field.prop)"
+            />
+            <x-icon
+              v-else-if="field.slot === '$icon'"
+              :name="get(data, field.prop)"
+            />
+            <div
+              v-else-if="field.slot === '$html'"
+              v-html="get(data, field.prop)"
+            />
+            <slot
+              v-else-if="field.slot"
+              :name="field.slot"
+              v-bind="{ data, field, value: calcValue(data, field) }"
+            />
+            <component
+              v-else-if="field.comp"
+              :is="field.comp"
+              v-bind="{ ...field, onClick: null }"
+              @click.stop="field.onClick?.(data)"
+            >
+              {{ field.text }}
+            </component>
+            <span v-else>{{ calcValue(data, field) }}</span>
+          </div>
+        </el-col>
+      </el-row>
+    </el-collapse-item>
+  </el-collapse>
+</template>
+
+<style lang="scss" scoped>
+.x-info {
+  &.hide-header {
+    :deep(.el-collapse-item__header) {
+      display: none;
+    }
+  }
+  :deep(.el-collapse-item__content) {
+    padding: 10px 0;
+    .el-col {
+      margin: 3px 0;
+    }
+  }
+  .x-info__label {
+    padding: 0 10px;
+    color: #909999;
+    display: inline-block;
+    vertical-align: top;
+    text-align: v-bind('_labelAlign');
+  }
+  .x-info__value {
+    padding: 0 10px;
+    display: inline-block;
+    color: #303333;
+    text-align: v-bind('_valueAlign');
+  }
+  .file-icon {
+    font-size: 50px;
+    color: #606666;
+  }
+}
+</style>

package/packages/components/xlooper/index.js

@@ -0,0 +1,7 @@
+export default {
+  name: 'XLooper',
+  props: {
+    compName: String,
+    items: Array
+  }
+}

package/packages/components/xlooper/xlooper.vue

@@ -0,0 +1,20 @@
+<script>
+export { default } from './index.js'
+</script>
+
+<template>
+  <div class="x-looper" :class="isMobile ? 'mobile-x-looper' : 'pc-x-looper'">
+    <component
+      v-for="(item, index) in items"
+      :key="index"
+      :is="compName"
+      v-bind="item"
+    >
+      <slot
+        v-if="item.slot || $attrs.slot"
+        :item="item"
+      />
+      <span v-else>{{ item.text }}</span>
+    </component>
+  </div>
+</template>

package/packages/components/xpagination/mobile.js

@@ -0,0 +1,21 @@
+export default {
+  name: 'MobileXPagination',
+  props: {
+    query: Object,
+    total: Number
+  },
+  emits: ['search'],
+  computed: {
+    pageCount () {
+      return Math.ceil(this.total / this.query.limit)
+    }
+  },
+  watch: {
+    'query.page' () {
+      this.$emit('search')
+    },
+    'query.limit' () {
+      this.$emit('search')
+    }
+  }
+}

package/packages/components/xpagination/mobile.vue

@@ -0,0 +1,31 @@
+<script>
+export { default } from './mobile.js'
+</script>
+
+<template>
+  <van-row align="center" class="x-paginaiton mobile-x-paginaiton">
+    <van-col :span="6">
+      <span>总计: {{ total }}</span>
+    </van-col>
+    <van-col :span="18">
+      <van-pagination
+        mode="simple"
+        :items-per-page="query.limit"
+        :total-items="total"
+        v-bind="{...$attrs, ...(mobilePagination || {})}"
+        v-model="query.page"
+        :page-count="pageCount"
+      >
+        <template #prev-text>
+          <van-icon name="arrow-left" />
+          上一页
+        </template>
+        <template #next-text>
+          下一页
+          <van-icon name="arrow" />
+        </template>
+        <template #page="{ text }">{{ text }}</template>
+      </van-pagination>
+    </van-col>
+  </van-row>
+</template>

package/packages/components/xpagination/pc.js

@@ -0,0 +1,21 @@
+export default {
+  name: 'PcXPagination',
+  props: {
+    query: Object,
+    total: Number
+  },
+  emits: ['search'],
+  computed: {
+    pageCount () {
+      return Math.ceil(this.total / this.query.limit)
+    }
+  },
+  watch: {
+    'query.page' () {
+      this.$emit('search')
+    },
+    'query.limit' () {
+      this.$emit('search')
+    }
+  }
+}

package/packages/components/xpagination/pc.vue

@@ -0,0 +1,16 @@
+<script>
+export { default } from './pc.js'
+</script>
+
+<template>
+  <el-pagination
+    background
+    layout="total, sizes, prev, pager, next, jumper"
+    v-bind="{...$attrs, ...(pcPagination || {})}"
+    v-model:current-page="query.page"
+    v-model:page-size="query.limit"
+    :page-count="pageCount"
+    :total
+    class="x-paginaiton pc-x-pagination"
+  />
+</template>

package/packages/components/xpicker/index.js

@@ -0,0 +1,38 @@
+export default {
+  name: 'XPicker',
+  props: {
+    modelValue: Boolean | Number | String,
+    placeholder: String,
+    show: Boolean,
+    columns: Array
+  },
+  emits: [
+    'show',
+    'confirm',
+    'cancel',
+    'update:modelValue'
+  ],
+  computed: {
+    visible: {
+      get () {
+        return this.show
+      },
+      set (value) {
+        this.$emit(value ? 'show' : 'cancel')
+      }
+    },
+    value () {
+      return [this.modelValue]
+    },
+    text () {
+      return this.columns.find(c => c.value === this.modelValue)?.text ?? this.placeholder
+    }
+  },
+  methods: {
+    onConfirm (value) {
+      this.$emit('change', value)
+      this.$emit('confirm', value)
+      this.$emit('update:modelValue', value)
+    }
+  }
+}