@wp1001/ui 2.9.13

package/packages/components/xdistrictselect/pc.js

@@ -0,0 +1,127 @@
+import { areaList } from '@vant/area-data'
+
+const areas = {
+  provinces: [],
+  cities: [],
+  counties: []
+}
+
+areas.provinces = Object.entries(areaList.province_list).map(ele => ({ value: ele[0], text: ele[1] }))
+areas.cities = Object.entries(areaList.city_list).map(ele => ({ value: ele[0], text: ele[1] }))
+areas.counties = Object.entries(areaList.county_list).map(ele => ({ value: ele[0], text: ele[1] }))
+
+export default {
+  name: 'PcXDistrictSelect',
+  props: {
+    modelValue: String | Array,
+    seperator: {
+      type: String,
+      default: '/'
+    },
+    level: {
+      type: String,
+      default: 'county'
+    }
+  },
+  emits: ['update:modelValue', 'change'],
+  data () {
+    return {
+      inited: true,
+      province: '',
+      city: '',
+      county: '',
+      provinces: Object.freeze(areas.provinces),
+      cities: [],
+      counties: []
+    }
+  },
+  computed: {
+    number () {
+      return ({ province: 1, city: 2, county: 3 })[this.level]
+    },
+    span () {
+      return 24 / this.number
+    }
+  },
+  watch: {
+    province (newVal) {
+      if (!this.county) {
+        this.update()
+      }
+      this.city = this.county = ''
+      if (!newVal) {
+        this.cities = []
+        this.counties = []
+        return
+      }
+      const prefix = newVal.slice(0, 2)
+      this.cities = Object.freeze(areas.cities.filter(ele => ele.value.slice(0, 2) === prefix))
+    },
+    city (newVal) {
+      if (!this.county) {
+        this.update()
+      }
+      this.county = ''
+      if (!newVal) {
+        this.counties = []
+        return
+      }
+      const prefix = newVal.slice(0, 4)
+      this.counties = Object.freeze(areas.counties.filter(ele => ele.value.slice(0, 4) === prefix))
+    },
+    county () {
+      this.update()
+    },
+    modelValue: {
+      handler: 'init',
+      immediate: true
+    }
+  },
+  methods: {
+    async init () {
+      this.inited = false
+      const parts = Array.isArray(this.modelValue) ? this.modelValue : (this.modelValue || '').split(this.seperator)
+      const [province, city, county] = parts
+      if (province) {
+        const ele = Object.entries(areaList.province_list).find(ele => ele[1] === province)
+        this.province = ele?.[0]
+      } else {
+        this.province = ''
+        this.inited = true
+        return
+      }
+      await this.$nextTick()
+      if (city) {
+        const pCode = this.province?.slice(0, 2)
+        const ele = Object.entries(areaList.city_list).find(ele => ele[0].startsWith(pCode) && ele[1] === city)
+        this.city = ele?.[0]
+      } else {
+        this.city = ''
+        this.inited = true
+        return
+      }
+      await this.$nextTick()
+      if (county) {
+        const cCode = this.city?.slice(0, 4)
+        const ele = Object.entries(areaList.county_list).find(ele => ele[0].startsWith(cCode) && ele[1] === county)
+        this.county = ele?.[0]
+      } else {
+        this.county = ''
+      }
+      this.inited = true
+      this.update()
+    },
+    update () {
+      if (!this.inited) {
+        return
+      }
+      let value = [
+        this.province && areaList.province_list[this.province] || '',
+        this.number > 1 && this.city && areaList.city_list[this.city] || '',
+        this.number > 2 && this.county && areaList.county_list[this.county] || ''
+      ].slice(0, this.number).join(this.seperator)
+      this.$emit('update:modelValue', value)
+      this.$emit('change', value)
+    }
+  }
+}

package/packages/components/xdistrictselect/pc.vue

@@ -0,0 +1,32 @@
+<script>
+export { default } from './pc.js'
+</script>
+
+<template>
+  <x-row
+    class="x-district-select pc-x-district-select"
+    :gutter="10"
+  >
+    <x-col :span="span">
+      <x-select
+        v-model="province"
+        :options="provinces"
+        placeholder="省份"
+      />
+    </x-col>
+    <x-col v-if="number > 1" :span="span">
+      <x-select
+        v-model="city"
+        :options="cities"
+        placeholder="城市"
+      />
+    </x-col>
+    <x-col v-if="number > 2" :span="span">
+      <x-select
+        v-model="county"
+        :options="counties"
+        placeholder="县区"
+      />
+    </x-col>
+   </x-row>
+</template>

package/packages/components/xform/mobile.js

@@ -0,0 +1,29 @@
+import utils from './utils.js'
+
+export default {
+  name: 'MobileXForm',
+  inheritAttrs: false,
+  props: {
+    ...utils.props(),
+    labelWidth: {
+      type: String,
+      default: props => props.labelWidth || '80px'
+    },
+    useWhen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:fref'],
+  computed: {
+    ...utils.computed
+  },
+  mounted () {
+    const contanier = this.dialog ?? this.form
+    contanier && (contanier.formRef = this.$refs.formRef)
+    this.$emit('update:fref', this.$refs.formRef)
+  },
+  methods: {
+    ...utils.methods
+  }
+}

package/packages/components/xform/mobile.vue

@@ -0,0 +1,43 @@
+<script>
+export { default } from './mobile.js'
+</script>
+
+<template>
+  <van-form
+    ref="formRef"
+    :class="['x-form', 'mobile-x-form', { 'hide-labels': hideLabels, viewonly: _viewonly }]"
+  >
+    <slot v-if="$slots.pre" name="pre" />
+
+    <el-row :gutter :justify="$attrs.justify" :align="$attrs.align" :tag="$attrs.tag">
+      <el-col
+        v-for="(item, index) in _visibleItems"
+        :key="item.prop"
+        :span="item.span" :offset="item.offset" :tag="item.tag"
+        :xs="item.xs" :sm="item.sm" :md="item.md" :lg="item.lg" :xl="item.xl"
+      >
+        <mobile-x-form-item
+          :label-width="labelWidth"
+          :label-position="$attrs['label-position'] || 'left'"
+          :viewonly="_viewonly"
+          v-bind="item"
+          :model="_model"
+          :item="item"
+          :rules="item.rules || _rules[item.prop]"
+          :modelValue="_model[item.prop]"
+          @update:modelValue="value => _model[item.prop] = value"
+          :placeholder="calcPlaceholder(item)"
+        >
+          <slot
+            v-if="item.infoAttrs?.slot || item.tableAttrs?.slot"
+            :name="item.infoAttrs?.slot || item.tableAttrs?.slot"
+            :item="item" :index="index"
+          />
+          <slot v-if="item.slot" :name="item.slot" :item="item" :index="index" />
+        </mobile-x-form-item>
+      </el-col>
+    </el-row>
+
+    <slot v-if="$slots.default" name="default" />
+  </van-form>
+</template>

package/packages/components/xform/pc.js

@@ -0,0 +1,42 @@
+import utils from './utils.js'
+
+export default {
+  name: 'PcXForm',
+  inheritAttrs: false,
+  props: {
+    ...utils.props(),
+    title: {
+      type: String,
+      default: '表单'
+    },
+    labelWidth: {
+      type: String,
+      default: props => props.labelWidth || (props.dialog ? '100px' : '0px')
+    },
+    useCollapse: {
+      type: Boolean,
+      default: false
+    },
+    useWhen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:fref'],
+  data () {
+    return {
+      activeNames: ['name']
+    }
+  },
+  computed: {
+    ...utils.computed
+  },
+  mounted () {
+    const contanier = this.dialog ?? this.form
+    contanier && (contanier.formRef = this.$refs.formRef)
+    this.$emit('update:fref', this.$refs.formRef)
+  },
+  methods: {
+    ...utils.methods
+  }
+}

package/packages/components/xform/pc.vue

@@ -0,0 +1,76 @@
+<script>
+export { default } from './pc.js'
+</script>
+
+<template>
+  <el-collapse
+    v-model="activeNames"
+    :class="(useCollapse ? 'use' : 'no') + '-collapse x-form-collapse'"
+  >
+    <el-collapse-item :name="activeNames[0]">
+      <template #title>
+        <div class="collapse-header">
+          <slot v-if="$slots['collapse-title']" name="collapse-title" />
+          <span v-else class="collapse-title">{{ title }}</span>
+        </div>
+      </template>
+      <el-form
+        ref="formRef"
+        v-bind="$attrs"
+        :model="_model"
+        :rules="_rules"
+        :label-width="labelWidth"
+        :label-position="$attrs['label-position'] || 'right'"
+        :class="['x-form', 'pc-x-form', { 'hide-labels': hideLabels, viewonly: _viewonly }]"
+      >
+        <slot v-if="$slots.pre" name="pre" />
+
+        <el-row :gutter :justify="$attrs.justify" :align="$attrs.align" :tag="$attrs.tag">
+          <el-col
+            v-for="(item, index) in _visibleItems"
+            :key="item.prop"
+            :span="item.span" :offset="item.offset" :tag="item.tag"
+            :xs="item.xs" :sm="item.sm" :md="item.md" :lg="item.lg" :xl="item.xl"
+          >
+            <pc-x-form-item
+              :label-width="labelWidth"
+              :show-tooltip="$attrs.showTooltip || false"
+              :viewonly="_viewonly"
+              v-bind="item"
+              v-model="_model[item.prop]"
+              :model="_model"
+              :item="item"
+              :prop="item.prop || item.model"
+              :clearable="item.clearable !== false"
+              :placeholder="calcPlaceholder(item)"
+              @update:modelValue="item.onChange || null"
+            >
+              <slot
+                v-if="item.infoAttrs?.slot || item.tableAttrs?.slot"
+                :name="item.infoAttrs?.slot || item.tableAttrs?.slot"
+                :item="item" :index="index"
+              />
+              <slot v-if="item.slot" :name="item.slot" :item="item" :index="index" />
+            </pc-x-form-item>
+          </el-col>
+        </el-row>
+
+        <slot v-if="$slots.default" name="default" />
+      </el-form>
+    </el-collapse-item>
+  </el-collapse>
+</template>
+
+<style lang="scss" scoped>
+.x-form-collapse {
+  .collapse-header {
+    border-left: 5px solid var(--el-color-primary);
+    padding-left: 10px;
+    height: 30px;
+    line-height: 30px;
+  }
+  .collapse-title span {
+    color: var(--el-color-danger);
+  }
+}
+</style>

package/packages/components/xform/utils.js

@@ -0,0 +1,95 @@
+import { isWhenMatched } from '../../utils/index.js'
+
+export function props () {
+  return {
+    dialog: Object,
+    form: Object,
+    model: Object,
+    items: Array,
+    rules: Object,
+    fref: Object,
+    doms: Array,
+    gutter: {
+      type: Number,
+      default: 5
+    },
+    hideLabels: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+
+export function _model () {
+  const { dialog, form, model } = this.$props
+  return model || (dialog || form).form
+}
+
+export function _items () {
+  const { hideLabels, dialog, form } = this.$props
+  const its = this.items || (dialog || form).formItems
+  return its.map((it, index) => {
+    delete it.visible
+    if (!hideLabels) {
+      return it
+    }
+    return {
+      ...it,
+      label: ' ',
+      _label: it.label,
+      prop: it.prop || ('_' + index)
+    }
+  }).filter(it => {
+    if (!this.dialog) {
+      return true
+    }
+    return this.dialog.isEditing ? (it.canEdit !== false) : (it.canAdd !== false)
+  }).map(it => {
+    return Object.assign({}, it, it.formAttrs)
+  })
+}
+
+export function _visibleItems () {
+  const items = this._items.filter(it => !it.formAttrs?.domid || this._doms.includes(it.formAttrs.domid))
+  if (!this.useWhen) return items
+  return items.filter(it => isWhenMatched(it.when || it.formAttrs?.when, this._model))
+}
+
+export function _doms () {
+  return this.doms || this.$store?.acl?.routeDoms || []
+}
+
+export function _rules () {
+  const { dialog, form, rules } = this.$props
+  return rules || (dialog || form).formRules
+}
+
+export function _viewonly () {
+  const { dialog, form } = this.$props
+  return this.$attrs.viewonly ?? (dialog || form).viewonly
+}
+
+export function calcPlaceholder (item) {
+  if (this._viewonly) return ''
+  let { placeholder, comp } = item
+  if (!placeholder) {
+    placeholder = 'options' in item || /(date|time)/i.test(comp) ? '请选择' : '请输入'
+    placeholder += item.label?.trim() || item._label || item.text || item.model || ''
+  }
+  return placeholder
+}
+
+export default {
+  props,
+  computed: {
+    _model,
+    _items,
+    _visibleItems,
+    _doms,
+    _rules,
+    _viewonly
+  },
+  methods: {
+    calcPlaceholder
+  }
+}

package/packages/components/xformitem/mobile.js

@@ -0,0 +1,56 @@
+import { MobileItem } from './utils.jsx'
+
+export default {
+  name: 'MobileXFormItem',
+  props: {
+    modelValue: Boolean | Number | String | Array,
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    viewonly: {
+      type: Boolean,
+      default: false
+    },
+    model: Object,
+    item: Object,
+
+    // 接收下面这几个属性，为了避免这些属性被绑定到当前组件根节点上，在下面会进行过滤传给子组件
+    comp: String,
+    compType: String,
+    options: Array,
+    platform: String,
+    iconSize: String | Number,
+    min: Number,
+    max: Number,
+    maxlength: String | Number,
+    buttonSize: String | Number,
+    activeColor: String,
+    slot: String,
+    time: Number,
+    percentage: Number,
+    barHeight: String | Number,
+    text: String,
+    html: String
+  },
+  emits: ['update:modelValue', 'change'],
+  computed: {
+    attrs () {
+      const {
+        prop,
+        label,
+        platform,
+        comp,
+        compType,
+        iconSize,
+        slot,
+        html,
+        ...others
+      } = { ...this.$props, ...this.$attrs }
+      return others
+    }
+  },
+  render () {
+    return MobileItem(this)
+  }
+}

package/packages/components/xformitem/mobile.vue

@@ -0,0 +1,3 @@
+<script>
+export { default } from './mobile.js'
+</script>

package/packages/components/xformitem/pc.js

@@ -0,0 +1,72 @@
+import { PcItem } from './utils.jsx'
+
+export default {
+  name: 'PcXFormItem',
+  props: {
+    modelValue: Boolean | Number | String | Array,
+    comp: {
+      type: String,
+      default: 'ElInput'
+    },
+    showTooltip: {
+      type: Boolean,
+      default: false
+    },
+    viewonly: {
+      type: Boolean,
+      default: false
+    },
+    labelWidth: String,
+    model: Object,
+    item: Object,
+
+    // 接收下面这几个属性，为了避免这些属性被绑定到当前组件根节点上，在下面会进行过滤传给子组件
+    compType: String,
+    slot: String,
+    span: Number,
+    clearable: Boolean,
+    html: String,
+    text: String,
+    options: Array,
+    platform: String,
+    placeholder: String,
+    maxlength: String | Number,
+    prefixIcon: String,
+    suffixIcon: String,
+    modelName: String,
+    params: Object,
+    labelTexts: Array,
+    required: Boolean,
+    minWidth: String | Number,
+    _label: String
+  },
+  emits: ['update:modelValue', 'change'],
+  computed: {
+    attrs () {
+      const {
+        prop,
+        label,
+        platform,
+        comp,
+        slot,
+        compType,
+        span,
+        offset,
+        showTooltip,
+        required,
+        format,
+        style,
+        html,
+        class: klass,
+        ...others
+      } = { ...this.$props, ...this.$attrs }
+      return others
+    },
+    width () {
+      return this.$attrs.label ? this.labelWidth : '0px'
+    }
+  },
+  render () {
+    return PcItem(this)
+  }
+}

package/packages/components/xformitem/pc.vue

@@ -0,0 +1,10 @@
+<script>
+export { default } from './pc.js'
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-form-item__content) {
+  margin-left: 0 !important;
+  width: calc(100% - v-bind('width'));
+}
+</style>