@wp1001/ui 2.9.13

package/packages/components/xtags/mobile.js

@@ -0,0 +1,17 @@
+export default {
+  name: 'MobileXTags',
+  props: {
+    data: Array,
+    text: {
+      type: String,
+      default: 'text'
+    }
+  },
+  emits: ['close'],
+  computed: {
+    _data () {
+      if (!this.data?.length) return []
+      return this.data.map(ele => typeof ele === 'object' ? ele : { text: ele })
+    }
+  }
+}

package/packages/components/xtags/mobile.vue

@@ -0,0 +1,21 @@
+<script>
+export { default } from './mobile.js'
+</script>
+
+<template>
+  <div class="x-tags mobile-x-tags">
+    <van-tag
+      v-for="(item, index) in _data" :key="index"
+      v-bind="{ ...$attrs, item }"
+      @close="$emit('close', item[text], index)"
+    >
+      {{ item[text] }}
+    </van-tag>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.van-tag {
+  margin-right: 10px;
+}
+</style>

package/packages/components/xtags/pc.js

@@ -0,0 +1,17 @@
+export default {
+  name: 'PcXTags',
+  props: {
+    data: Array,
+    text: {
+      type: String,
+      default: 'text'
+    }
+  },
+  emits: ['close'],
+  computed: {
+    _data () {
+      if (!this.data?.length) return []
+      return this.data.map(ele => typeof ele === 'object' ? ele : { text: ele })
+    }
+  }
+}

package/packages/components/xtags/pc.vue

@@ -0,0 +1,22 @@
+<script>
+export { default } from './pc.js'
+</script>
+
+<template>
+  <div class="x-tags pc-x-tags">
+    <el-tag
+      v-for="(item, index) in _data" :key="index"
+      v-bind="{ ...$attrs, item }"
+      :type="item.type || $attrs.type"
+      @close="$emit('close', item[text], index)"
+    >
+      {{ item[text] }}
+    </el-tag>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-tag {
+  margin-right: 10px;
+}
+</style>

package/packages/components/xtinymce/index.js

@@ -0,0 +1,71 @@
+// 功能若复杂，这里继续修改
+
+export default {
+  name: 'XTinymce',
+  props: {
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ['update:modelValue'],
+  data () {
+    return {
+      id: 'tm-' + Date.now().toString(16)
+    }
+  },
+  watch: {
+    modelValue (value) {
+      if (value === this._content) return
+      this.instance?.setContent(value)
+    }
+  },
+  mounted () {
+    this.initEditor()
+  },
+  beforeUnmount () {
+    if (this.instance) {
+      this.instance.destroy()
+      this.instance = null
+    }
+  },
+  methods: {
+    async initEditor () {
+      const instances = await window.tinymce.init({
+        language: 'zh_CN',
+        language_url: './lib/tinymce/zh_CN.js',
+        selector: 'textarea#' + this.id,
+        height: 500,
+        plugins: [
+          'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
+          'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
+          'insertdatetime', 'media', 'table', 'help', 'wordcount'
+        ],
+        toolbar: `
+          undo redo | blocks | 
+          bold italic backcolor | alignleft aligncenter 
+          alignright alignjustify | bullist numlist outdent indent | 
+          removeformat | help
+          content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }
+        `,
+        placeholder: '请输入、编辑富文本内容~',
+        ...this.config
+      })
+      const instance = instances[instances.length - 1]
+      instance.on('change', e => {
+        this._content = instance.getContent()
+        this.$emit('update:modelValue', this._content)
+      })
+      instance.on('input', e => {
+        this._content = e.target.innerHTML
+        this.$emit('update:modelValue', this._content)
+      })
+      this.instance = instance
+      window._tinymce_instances_ = instances
+    }
+  }
+}

package/packages/components/xtinymce/xtinymce.vue

@@ -0,0 +1,9 @@
+<script>
+export { default } from './index.js'
+</script>
+
+<template>
+  <div class="x-tinymce" :class="isMobile ? 'mobile-x-tinymce' : 'pc-x-tinymce'">
+    <textarea :id v-html="modelValue"></textarea>
+  </div>
+</template>

package/packages/components/xuploader/xfileuploader.js

@@ -0,0 +1,48 @@
+import { injectVanFieldProvide } from '../../utils/funcs.js'
+import { Message } from '../../utils/message.js'
+
+export default {
+  name: 'XFileUploader',
+  props: {
+    modelValue: Array | String,
+    multiple: Boolean,
+    accept: String,
+    action: String
+  },
+  emits: ['update:modelValue'],
+  data () {
+    return {
+      fileList: []
+    }
+  },
+  computed: {
+    limit () {
+      return this.$attrs.limit || (this.multiple ? 1e9 : 1)
+    }
+  },
+  watch: {
+    modelValue: {
+      handler (value) {
+        this.fileList = Array.isArray(value) ? value : (value ? [{ url: value }] : [])
+      },
+      immediate: true
+    }
+  },
+  created () {
+    injectVanFieldProvide(this)
+  },
+  methods: {
+    handleSelect () {
+      this.$emit('update:modelValue', this.fileList)
+      this.provide?.resetValidation()
+    },
+    handleRemove (...props) {
+      this.$emit('update:modelValue', this.fileList)
+      this.provide?.resetValidation()
+      this.$attrs['on-remove']?.(...props)
+    },
+    handleExceed (files, uploadFiles) {
+      Message({ type: 'warning', message: '图片数量不能超过 ' + this.limit + ' 个' })
+    }
+  }
+}

package/packages/components/xuploader/xfileuploader.vue

@@ -0,0 +1,54 @@
+<script>
+export { default } from './xfileuploader.js'
+</script>
+
+<template>
+  <el-upload
+    v-model:file-list="fileList"
+    @update:file-list="handleSelect"
+    drag
+    :action
+    :accept
+    :multiple
+    :limit
+    class="x-file-uploader"
+    :class="[
+      isMobile ? 'mobile-x-file-uploader' : 'pc-x-file-uploader',
+      { disabled: $attrs.disabled || fileList.length >= limit }
+    ]"
+    :on-exceed="handleExceed"
+    v-bind="$attrs"
+    :auto-upload="false"
+    :on-remove="handleRemove"
+  >
+    <div class="mask">
+      <pc-x-icon name="upload-filled" />
+      <div v-if="!disabled" class="el-upload__text">
+        将文件拖到此处，或<em>点击上传</em>
+      </div>
+    </div>
+  </el-upload>
+</template>
+
+<style lang="scss" scoped>
+.x-file-uploader {
+  text-align: center;
+  position: relative;
+  &.disabled {
+    :deep(.el-upload) {
+      display: none;
+    }
+  }
+  :deep(.el-upload-dragger) {
+    height: 200px;
+  }
+  .mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+}
+</style>

package/packages/components/xuploader/ximageuploader.js

@@ -0,0 +1,53 @@
+import { injectVanFieldProvide } from '../../utils/funcs.js'
+import { Message } from '../../utils/message.js'
+
+export default {
+  name: 'XImageUploader',
+  props: {
+    modelValue: Array | String,
+    multiple: Boolean,
+    action: String
+  },
+  emits: ['update:modelValue'],
+  data () {
+    return {
+      fileList: [],
+      previewingImage: {},
+      dialogVisible: false
+    }
+  },
+  computed: {
+    limit () {
+      return this.$attrs.limit || (this.multiple ? 1e9 : 1)
+    }
+  },
+  watch: {
+    modelValue: {
+      handler (value) {
+        this.fileList = Array.isArray(value) ? value : (value ? [{ url: value }] : [])
+      },
+      immediate: true
+    }
+  },
+  created () {
+    injectVanFieldProvide(this)
+  },
+  methods: {
+    handleSelect () {
+      this.$emit('update:modelValue', this.fileList)
+      this.provide?.resetValidation()
+    },
+    handleRemove (...props) {
+      this.$emit('update:modelValue', this.fileList)
+      this.provide?.resetValidation()
+      this.$attrs['on-remove']?.(...props)
+    },
+    handlePreview (img) {
+      this.previewingImage = img
+      this.dialogVisible = true
+    },
+    handleExceed (files, uploadFiles) {
+      Message({ type: 'warning', message: '图片数量不能超过 ' + this.limit + ' 个' })
+    }
+  }
+}

package/packages/components/xuploader/ximageuploader.vue

@@ -0,0 +1,52 @@
+<script>
+export { default } from './ximageuploader.js'
+</script>
+
+<template>
+  <el-upload
+    v-model:file-list="fileList"
+    @update:file-list="handleSelect"
+    :action
+    list-type="picture-card"
+    accept="image/*"
+    :multiple
+    :limit
+    class="x-image-uploader"
+    :class="[
+      isMobile ? 'mobile-x-image-uploader' : 'pc-x-image-uploader',
+      { disabled: $attrs.disabled || fileList.length >= limit }
+    ]"
+    :on-preview="handlePreview"
+    :on-exceed="handleExceed"
+    v-bind="$attrs"
+    :auto-upload="false"
+    :on-remove="handleRemove"
+  >
+    <template #default>
+      <el-icon><Plus /></el-icon>
+    </template>
+  </el-upload>
+  <x-dialog
+    v-model="dialogVisible"
+    actionsheet
+    :title="'预览图片' + (previewingImage.name || '')"
+  >
+    <img :src="previewingImage.url" alt="previewing-image" class="previewing-image">
+  </x-dialog>
+</template>
+
+<style lang="scss" scoped>
+.x-image-uploader {
+  &.disabled {
+    :deep(.el-upload) {
+      display: none;
+    }
+  }
+}
+.previewing-image {
+  display: block;
+  width: 100%;
+  margin: auto;
+  padding-bottom: 15px;
+}
+</style>

package/packages/comps.js

@@ -0,0 +1,108 @@
+import xarray from './components/xarray/xarray.vue'
+import xautorows from './components/xautorows/xautorows.vue'
+import mobilexbutton from './components/xbutton/mobile.vue'
+import pcxbutton from './components/xbutton/pc.vue'
+import mobilexbuttons from './components/xbuttons/mobile.vue'
+import pcxbuttons from './components/xbuttons/pc.vue'
+import xchart from './components/xchart/xchart.vue'
+import mobilexcheckboxs from './components/xcheckboxs/mobile.vue'
+import pcxcheckboxs from './components/xcheckboxs/pc.vue'
+import mobilexcol from './components/xcol/mobile.vue'
+import pcxcol from './components/xcol/pc.vue'
+import mobilexdialog from './components/xdialog/mobile.vue'
+import mobilexdatepicker from './components/xdatepicker/mobile.vue'
+import pcxdatepicker from './components/xdatepicker/pc.vue'
+import pcxdialog from './components/xdialog/pc.vue'
+import xdict from './components/xdict/xdict.vue'
+import mobilexdistrictselect from './components/xdistrictselect/mobile.vue'
+import pcxdistrictselect from './components/xdistrictselect/pc.vue'
+import mobilexform from './components/xform/mobile.vue'
+import pcxform from './components/xform/pc.vue'
+import mobilexformitem from './components/xformitem/mobile.vue'
+import pcxformitem from './components/xformitem/pc.vue'
+import mobilexicon from './components/xicon/mobile.vue'
+import pcxicon from './components/xicon/pc.vue'
+import xinfo from './components/xinfo/xinfo.vue'
+import xlooper from './components/xlooper/xlooper.vue'
+import mobilexpagination from './components/xpagination/mobile.vue'
+import pcxpagination from './components/xpagination/pc.vue'
+import xpicker from './components/xpicker/xpicker.vue'
+import mobilexradios from './components/xradios/mobile.vue'
+import pcxradios from './components/xradios/pc.vue'
+import mobilexrow from './components/xrow/mobile.vue'
+import pcxrow from './components/xrow/pc.vue'
+import mobilexscan from './components/xscan/mobile.vue'
+import pcxscan from './components/xscan/pc.vue'
+import xsearcher from './components/xsearcher/xsearcher.vue'
+import mobilexselect from './components/xselect/mobile.vue'
+import pcxselect from './components/xselect/pc.vue'
+import xselectv2 from './components/xselectv2/xselectv2.vue'
+import mobilextable from './components/xtable/mobile.vue'
+import pcxtable from './components/xtable/pc.vue'
+import mobilextabletools from './components/xtabletools/mobile.vue'
+import pcxtabletools from './components/xtabletools/pc.vue'
+import xtablev2 from './components/xtablev2/xtablev2.vue'
+import mobilextags from './components/xtags/mobile.vue'
+import pcxtags from './components/xtags/pc.vue'
+import xtinymce from './components/xtinymce/xtinymce.vue'
+import xfileuploader from './components/xuploader/xfileuploader.vue'
+import ximageuploader from './components/xuploader/ximageuploader.vue'
+
+const modules = {
+  xarray,
+  xautorows,
+  mobilexbutton,
+  pcxbutton,
+  mobilexbuttons,
+  pcxbuttons,
+  xchart,
+  mobilexcheckboxs,
+  pcxcheckboxs,
+  mobilexcol,
+  pcxcol,
+  mobilexdatepicker,
+  pcxdatepicker,
+  mobilexdialog,
+  pcxdialog,
+  xdict,
+  mobilexdistrictselect,
+  pcxdistrictselect,
+  mobilexform,
+  pcxform,
+  mobilexformitem,
+  pcxformitem,
+  mobilexicon,
+  pcxicon,
+  xinfo,
+  xlooper,
+  mobilexpagination,
+  pcxpagination,
+  xpicker,
+  mobilexradios,
+  pcxradios,
+  mobilexrow,
+  pcxrow,
+  mobilexscan,
+  pcxscan,
+  xsearcher,
+  mobilexselect,
+  pcxselect,
+  xselectv2,
+  mobilextable,
+  pcxtable,
+  mobilextabletools,
+  pcxtabletools,
+  xtablev2,
+  mobilextags,
+  pcxtags,
+  xtinymce,
+  xfileuploader,
+  ximageuploader
+}
+
+const comps = {}
+for (let key in modules) {
+  comps[modules[key].name] = modules[key]
+}
+
+export default comps

package/packages/controllers/BaseController.js

@@ -0,0 +1,125 @@
+import { nextTick, watch } from 'vue'
+import uiUtils from '../utils/index.js'
+
+const { funcs, highdict, dates } = window.StardustJs
+const { storage } = window.StardustBrowser
+
+const VUE_LIFE_HOOKS = [
+  'onBeforeMount',
+  'onMounted',
+  'onBeforeUpdate',
+  'onUpdated',
+  'onBeforeUnmount',
+  'onUnmounted',
+  'onErrorCaptured',
+  'onRenderTracked',
+  'onRenderTriggered',
+  'onActivated',
+  'onDeactivated'
+]
+
+class BaseController {
+  constructor ({ model, vue }) {
+    this.model = model
+    this._bindMethods()
+    if (vue) {
+      const vm = vue.getCurrentInstance()
+      Object.defineProperties(this, {
+        vue: { get: () => vue },
+        vm: { get: () => vm }
+      })
+      this._initLifeHooks()
+    }
+    nextTick(() => this.onInit())
+  }
+
+  onInit () {
+    this.__eval_action_watcher__ = watch(this.router.currentRoute, route => {
+      route.query?._action_ && this._evalAction()
+    }, { immediate: true })
+  }
+
+  get app () { throw '请自行注入 app' }
+
+  get $el () { return this.vm && this.vm.ctx.$el || null }
+
+  get router () { throw '请自行注入 router' }
+
+  get route () { return this.router.currentRoute.value }
+
+  get params () { return this.route.params }
+
+  get query () { return this.route.query }
+
+  get store () { throw '请自行注入 store' }
+
+  get uiUtils () { return uiUtils }
+
+  get service () { throw '请自行注入 service' }
+
+  get $api () { return this.service.api }
+
+  get $request () { return this.service.request }
+
+  get $restful () { return this.service.restful }
+
+  get config () { return this.app.config.globalProperties }
+
+  get $js () { return window.StardustJs }
+
+  get $browser () { return window.StardustBrowser }
+
+  get $dates () { return dates }
+
+  get $highdict () { return highdict }
+
+  get $copy () { return funcs.deepCopy }
+
+  get $sleep () { return funcs.sleep }
+
+  get $storage () { return storage }
+
+  get $local () { return storage.local }
+
+  get $session () { return storage.session }
+
+  _bindMethods () {
+    const thisKeys = [...Object.keys(this), ...this._getMethods()]
+    const proto = Object.getOwnPropertyDescriptors(this.__proto__)
+    const subKeys = Object.keys(proto).filter(method => method !== 'constructor')
+    const allKeys = Array.from(new Set([...thisKeys, ...subKeys]))
+    const methods = allKeys.filter(key => typeof this[key] === 'function')
+    methods.forEach(method => {
+      this[method] = this[method].bind(this)
+    })
+  }
+
+  _initLifeHooks () {
+    this.vue.onBeforeUnmount(() => {
+      this.__eval_action_watcher__?.()
+    })
+    VUE_LIFE_HOOKS.forEach(hook => {
+      this[hook] && this.vue[hook](this[hook].bind(this))
+    })
+  }
+
+  _evalAction () {
+    const { _action_, _action_params_, ...others } = this.query
+    if (_action_ && this[_action_]) {
+      this[_action_]?.(JSON.parse(_action_params_ || '{}'))
+      this.router.replace(this.route.path + '?' + funcs.encodeQuery(others))
+    }
+  }
+
+  _getMethods () {
+    return [
+      '_bindMethods',
+      '_initLifeHooks',
+      '_evalAction',
+      '_getMethods',
+      'onInit'
+    ]
+  }
+}
+
+export default BaseController