web-component-gallery 1.3.12 → 2.0.2

package/plugins/lib/form/components/ASelectCustom.vue

@@ -1,226 +0,0 @@
-<template>
-  <div
-    @mousedown="
-      e => {
-        e.preventDefault()
-        !attrs.disabled && (selectOpen = true)
-      }
-    "
-    ref="main"
-    class="ASelectCustom"
-  >
-    <Select
-      class="t_select"
-      v-model="childSelectedValue"
-      :style="{ width: width || '100%' }"
-      :placeholder="placeholder"
-      :open="selectOpen"
-      :filterOption="filterOption"
-      @select="handleSelect"
-      v-bind="attrs"
-      v-on="$listeners"
-      :mode="mode"
-    > 
-      <template v-for="(index, name) in $slots" v-slot:[name]>
-        <slot :name="name" />
-      </template>
-      <template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
-        <slot :name="name" v-bind="data"></slot>
-      </template>
-      <div slot="dropdownRender" slot-scope="menu">
-        <Checkbox v-if="mode && !isShowPagination" :checked="selectChecked" @change="selectAll">
-          全选
-        </Checkbox>
-        <v-nodes :vnodes="menu" />
-        <div class="t_select__pagination" v-if="isShowPagination">
-          <Pagination
-            :page-size.sync="paginationOption.pageSize"
-            v-model="paginationOption.current"
-            :total="paginationOption.total"
-            @change="currentChange"
-            v-bind="{
-              size: 'small',
-              'hide-on-single-page': true,
-              showQuickJumper: true,
-              ...$attrs,
-              ...paginationOption.bind
-            }"
-            v-on="$listeners"
-          />
-        </div>
-      </div>
-      <SelectOption v-for="(item, index) in options" :key="index" :value="item[valueKey]">
-        {{ customLabel ? customLabelHandler(item) : item[labelKey] }}
-      </SelectOption>
-    </Select>
-  </div>
-</template>
-<script>
-import { Select, Checkbox, Pagination } from 'ant-design-vue'
-
-export default {
-  name: 'TAntdSelect',
-  components: {
-    VNodes: {
-      functional: true,
-      render: (h, ctx) => ctx.props.vnodes
-    },
-    Select,
-    SelectOption: Select.Option,
-    Checkbox,
-    Pagination
-  },
-  props: {
-    value: {
-      type: [String, Number, Array, Boolean, Object],
-      default: undefined
-    },
-    // 多选 'multiple'
-    mode: {
-      type: String
-    },
-    // 是否支持输入
-    isInput: {
-      type: Boolean,
-      default: false
-    },
-    placeholder: {
-      type: String,
-      default: '请选择'
-    },
-    // 选择框宽度
-    width: {
-      type: String
-    },
-    // 是否自定义设置下拉label
-    customLabel: {
-      type: String
-    },
-    // 传入的option数组中，要作为最终选择项的键值key
-    valueKey: {
-      type: String,
-      default: 'value'
-    },
-    // 传入的option数组中，要作为显示项的键值名称
-    labelKey: {
-      type: String,
-      default: 'label'
-    },
-    // 下拉框组件数据源
-    options: {
-      type: Array
-    },
-    // 是否显示分页
-    isShowPagination: {
-      type: Boolean,
-      default: false
-    },
-    // 分页配置项
-    paginationOption: {
-      type: Object,
-      default: () => {
-        return {
-          pageSize: 6, // 每页显示条数
-          current: 1, // 当前页
-          total: 0 // 总条数
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      selectOpen: false
-    }
-  },
-  computed: {
-    childSelectedValue: {
-      get() {
-        return this.value
-      }, 
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    attrs() {
-      return {
-        allowClear: true,
-        showSearch: true,
-        ...this.$attrs
-      }
-    },
-    selectChecked: {
-      get() {
-        return this.childSelectedValue?.length === this.options?.length
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    }
-  },
-  mounted() {
-    document.addEventListener('click', this.bodyCloseMenus)
-  },
-  beforeDestroy() {
-    document.removeEventListener('click', this.bodyCloseMenus)
-  },
-  methods: {
-    filterOption(input, option) {
-      this.isInput && (this.childSelectedValue = input)
-      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-    },
-    // 点击空白区域
-    bodyCloseMenus(e) {
-      if (this.$refs.main && !this.$refs.main.contains(e.target)) {
-        if (this.selectOpen == true) {
-          this.selectOpen = false
-        }
-      }
-    },
-    // 点击全选
-    selectAll(val) {
-      const options = JSON.parse(JSON.stringify(this.options))
-      if (val.target.checked) {
-        const childSelectedValue = options?.map(item => {
-          return item[this.valueKey]
-        })
-        setTimeout(() => {
-          this.$emit('input', childSelectedValue)
-        }, 0)
-      } else {
-        this.$emit('input', null)
-      }
-      this.selectOpen = false
-    },
-    handleSelect(value, option) {
-      if (value) {
-        this.selectOpen = false
-      }
-      const options = this.options.find(e => e[this.valueKey] == value)
-      options[this.valueKey] && this.$emit('select', value, options)
-    },
-    // 切换分页
-    currentChange(val) {
-      // console.log('切换分页', val)
-      if (!this.mode) {
-        this.childSelectedValue = null
-      }
-      setTimeout(() => {
-        this.selectOpen = true
-      }, 0)
-      this.$emit('current-change', val)
-    },
-    // 自定义label显示
-    customLabelHandler(item) {
-      // eslint-disable-next-line no-eval
-      return eval(this.customLabel)
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-// 添加flex属性解决css中div莫名高度
-.ASelectCustom {
-  width: 100%;
-  // display: flex;
-}
-</style>

package/plugins/lib/form/components/ATagsInput.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="ant-input TAntdTags" v-on="$listeners">
-    <Tooltip 
-      :key="i"
-      :title="child[labelKey]"
-      v-for="(child, i) in selectChecked"
-    >
-      <Tag
-        closable
-        @close="() => tagsClose(child[valueKey])" 
-      >
-        <span>{{ child[labelKey] }}</span>
-      </Tag>
-    </Tooltip>
-    <span v-if="!selectChecked.length">请点击进行选择</span>
-  </div>
-</template>
-
-<script>
-
-import { Tag, Tooltip } from 'ant-design-vue'
-
-export default {
-  name: 'TAntdTags',
-  components: { Tag, Tooltip },
-  model: {
-    prop: 'value',
-    event: 'update:tagsInput'
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    selectChecked: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('update:tagsInput', val)
-      } 
-    }
-  },
-
-  props: {
-    value: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    /* 传入的option数组中，要作为最终选择项的键值key */
-    valueKey: {
-      type: String,
-      default: 'value'
-    },
-    /* 传入的option数组中，要作为显示项的键值名称 */
-    labelKey: {
-      type: String,
-      default: 'label'
-    }
-  },
-
-  methods: {
-    tagsClose(checked) {
-      const selectChecked = 
-        this.selectChecked.filter(node => node[this.valueKey] !== checked)
-      this.$emit('update:tagsInput', selectChecked)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-@import url('../../style/mixins.less');
-.TAntdTags {
-  width: 100%;
-  height: auto;
-  cursor: pointer;
-
-  :deep(.ant-tag) {
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-
-    span {
-      display: inline-block;
-      max-width: 100px;
-      overflow-x: hidden;
-      .ellipsis();
-    }
-  }
-}
-</style>

package/plugins/lib/form/components/ATimePicker.vue

@@ -1,73 +0,0 @@
-<template>
-  <div class="ATimePicker">
-    <TimePicker
-      :format="format"
-      v-model="time[0]"
-      placeholder="开始时间"
-      :valueFormat="valueFormat"
-      @change="e => time.splice(0, 1, e)"
-    />
-    <span>~</span>
-    <TimePicker :format="format" v-model="time[1]" placeholder="结束时间" :valueFormat="valueFormat" />
-  </div> 
-</template>
-
-<script> 
-
-import { TimePicker } from 'ant-design-vue'
-
-export default {
-  components: {
-    TimePicker
-  },
-  model: {
-    prop: 'value',
-    event: 'update:timePicker'
-  },
-  props: {
-    value: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    format: {
-      type: String,
-      default: 'HH:mm:ss'
-    },
-    valueFormat: {
-      type: String,
-      default: 'HH:mm:ss'
-    }
-  },
-  watch: {
-    value(e, o) {
-      if (e.toString() == o.toString()) return
-      this.time = e
-    },
-    'time.length': {
-      handler(e) {
-        this.$emit('update:timePicker', e == 2 ? this.time : [])
-      },
-      deep: true
-    }
-  },
-  data() {
-    return {
-      time: []
-    }
-  },
-  created() {},
-  methods: {}
-}
-</script>
-<style lang="less" scoped>
-@import "~ant-design-vue/es/style/themes/default";
-.ATimePicker {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  &>span { margin: 0 @padding-xs; }
-  :deep(.ant-time-picker) { flex: 1; }
-}
-</style>

package/plugins/lib/form/components/AUpload.vue

@@ -1,183 +0,0 @@
-<template>
-  <div class="TAntdUpload">
-    <Upload
-      name="file"
-      :file-list="fileList"
-      :accept="fileAccept"
-      v-bind="uploadAttrs"
-      @change="handleFileChange"
-      @preview="handleFilePreview"
-      @reject="$message.error(`上传文件类型只能为${fileAccept}`)"
-    >
-      <Button 
-        type="primary"
-        v-if="uploadAttrs.listType === 'text'"
-      >
-        <Icon type="upload" />上传
-      </Button>
-      <template v-else>
-        <Icon v-if="!fileList || fileList.length < uploadLen"
-          type="plus" 
-          style="fontsize: 36px"
-        />
-      </template>
-    </Upload>
-
-    <span class="tips" v-if="tips">{{ tips }}</span>
-  </div>
-</template>
-
-<script>
-
-import { Icon, Button, Upload } from 'ant-design-vue'
-
-export default {
-  model: {
-    prop: 'value',
-    event: 'handleFileUpload'
-  },
-  components: { Icon, Button, Upload },
-  props: {
-    value: {
-      type: [String, Array],
-      default: () => []
-    },
-    /* 提示文字 */
-    tips: String,
-    /* 上传文件数量限制 */
-    uploadLen: {
-      type: Number,
-      default: 1
-    },
-    /* 上传接口 */
-    fileUploadUrl: String,
-    /* 显示需要pin的接口前缀 */
-    filePrefixUrl: String,
-    /* 上传文件格式限制 */
-    fileAccept: String,
-    /* 上传文件携带Headers信息 */
-    fileHeaders: Object,
-    /* 删除文件函数回调 */
-    fileRemoveHandle: Function
-  }, 
-  data() {
-    return {
-      fileList: [],
-      modalValue: []
-    }
-  },
-  watch: {
-    value() {
-      this.setResetFile()
-    }
-  },
-  computed: {
-    uploadAttrs() {
-      return {
-        listType: 'picture-card',
-        prefix: this.filePrefixUrl ?? this.$https.FILEURL,
-        action: this.fileUploadUrl ?? this.$https.UPLOADURL,
-        headers: this.fileHeaders ?? this.$store.getters.fileHeaders,
-        ...this.$attrs
-      }
-    }
-  },
-  mounted() {
-    this.setResetFile()
-  },
-  methods: {
-    setResetFile() {
-      let arrayObject
-      try {
-        arrayObject = JSON.parse(this.value)
-      } catch (e) { 
-        arrayObject = [].concat(this.value) 
-      }
-      this.modalValue = arrayObject ?? []
-      this.fileList = this.modalValue.map(file => ({
-        ...file,
-        url: `${this.uploadAttrs.prefix}${file.url}`,
-        type: file.contentType,
-        status: 'done'
-      }))
-    },
-
-    handleFilePreview({ uid, contentType, url }) {
-
-      let suffix = url.substr( url.lastIndexOf('.') + 1 )
-      const pictureSuffix = ['JPEG', 'JPG', 'GIF', 'PNG', 'TIFF', 'WEBP', 'BMP']
-
-      if (contentType.includes('image') || pictureSuffix.includes(suffix.toUpperCase())) {
-        this.$viewerApi({
-          options: {
-            url: 'url',
-            toolbar: true,
-            initialViewIndex: this.fileList.findIndex(file => file.url == url)
-          },
-          images: this.fileList
-        })
-        return
-      }
-
-      this.$dialog( 
-        'Brower',
-        { data: url },
-        {
-          title: '预览文件',
-          width: 1104,
-          height: 848,
-          centered: true,
-          maskClosable: false,
-          footer: false,
-          bodyStyle: {
-            height: 'calc( 100% - 54px )'
-          }
-        }
-      )
-    },
-
-    handleFileChange({ file, fileList }) {
-
-      file.status == 'uploading' && (this.fileList = fileList)
-
-      switch (file.status) {
-        case 'removed':
-          const params = { id: file.uid }
-          const requestHandle = 
-                this.fileRemoveHandle ? 
-                this.fileRemoveHandle(params) : 
-                this.$store.dispatch('fileRemoveHandle', params)
-          requestHandle.then( Response => {
-            const i = this.modalValue.findIndex(e => e.uid == file.uid)
-            this.modalValue.splice(i, 1)
-            this.$emit('handleFileUpload', JSON.stringify(this.modalValue))
-          } )
-          break
-        case 'done':
-          const { data } = file.response
-          const uploadFileObj = { ...data, uid: data.id }
-          delete uploadFileObj.id
-          this.modalValue.push(uploadFileObj)
-          this.$emit('handleFileUpload', JSON.stringify(this.modalValue))
-          break
-      }
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.TAntdUpload {
-  .tips {
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  :deep(.ant-upload) {
-    background: transparent;
-  }
-  :deep(.ant-upload-picture-card-wrapper) {
-    display: flex;
-  }
-}
-</style>

package/plugins/lib/form/components/RenderComp.vue

@@ -1,69 +0,0 @@
-<template>
-  <component 
-    :is="component" 
-    v-bind="$attrs"
-    v-on="$listeners"
-    v-model="nodeValue" 
-    :placeholder='getPlaceholder()'
-    :getPopupContainer="
-      triggerNode => {
-        return triggerNode.parentNode || document.body
-      }
-    "
-  />
-</template>
-<script>
-import { Input,InputNumber,Checkbox,DatePicker,Cascader,TreeSelect,Switch } from 'ant-design-vue' 
-
-export default {
-  name: 'RenderComp',
-  model: {
-    prop: "value",
-    event: "update:renderComp"
-  },
-  components: {
-    Input,
-    Textarea: Input.TextArea,
-    InputNumber,
-    Checkbox,
-    CheckboxGroup: Checkbox.Group,
-    DatePicker,
-    Cascader,
-    TreeSelect,
-    ASwitch: Switch,
-    ARadio: () => import('./ARadio.vue'),
-    AUpload: () => import( './AUpload.vue' ), 
-    ATagsInput: () => import('./ATagsInput.vue'),
-    ASelectCustom: () => import('./ASelectCustom.vue'),
-    ACascaderMultiple: () => import('./ACascaderMultiple.vue'),
-    ATimePicker: () => import('./ATimePicker.vue'),
-    ARangePicker: () => import('./ARangePicker.vue')
-  },
-  props: {
-    value: [String, Number, Boolean, Object, Array, Symbol], 
-    component: {
-        type: String,
-        default: 'Input'
-    }
-  },
-  computed: {
-    nodeValue: {
-      get () { 
-        return this.value
-      },  
-      set ( value ) { 
-        this.$emit('update:renderComp',  value)   
-      } 
-    } 
-  },
-  mounted() {
-  },
-  methods: {
-    getPlaceholder() { 
-      const RegExp = this.component.toLowerCase() 
-      if( /range/.test( RegExp ) ) return [ '开始时间', '结束时间' ]
-      return this.$attrs.placeholder || /(select|picker|radio|upload)/.test( RegExp ) ? "请选择" : "请输入"
-    }
-  }
-}
-</script>

package/plugins/lib/form/index.js

@@ -1,55 +0,0 @@
-/* Model新增修改表单 */
-import Model from './Model.js'
-/* Search搜索表单 */
-import Search from './Search.vue'
-
-Model.install = function (Vue) { 
-  Vue.component(Model.name, Model)
-}
-
-Search.install = function (Vue) { 
-  Vue.component(Search.name, Search)
-} 
-
-export { 
-  Model,
-  Search,
-}  
-
-/* 下拉多选框（可支持树结构 */
-import ACascaderMultiple from './components/ACascaderMultiple.vue'
-/* 下拉单选及分页框 */
-import ASelectCustom from './components/ASelectCustom.vue'
-/* 单选框（可支持配置button形式 */
-import ARadio from './components/ARadio.vue'
-/* (已下需优化修改) */
-/* tag多项展示框（需修改 */
-import ATagsInput from './components/ATagsInput.vue'
-/* 日期选择框 */
-import ARangePicker from './components/ARangePicker.vue'
-/* 时间区间框（只单进行一天中的时间段选择 */
-import ATimePicker from './components/ATimePicker.vue'
-/* 文件上传选择器 */
-import AUpload from './components/AUpload.vue' 
- 
-const components = {
-    ACascaderMultiple,
-    ASelectCustom,
-    ARadio,
-    ATagsInput,
-    ARangePicker,
-    ATimePicker,
-    AUpload
-}   
-
-const install = function (Vue) { 
-  if (install.installed) return
-  Object.keys(components).forEach(component => { 
-    Vue.component(components[component].name, components[component])
-  })
-}
-
-export default {
-  install,
-  ...components
-}