@lx-frontend/wrap-element-ui 1.0.28 → 2.0.0-beta.2

package/src/components/SearchForm/index.vue

@@ -20,31 +20,31 @@
       <el-input
         v-if="type === 'input'"
         :placeholder="placeholder ? placeholder : showLabel ? '请输入' : label"
-        :value="formData[prop]"
+        :model-value="formData[prop]"
         :maxlength="maxlength"
-        @input="val => handleInput(val, prop, inputLimitCallback)"
+        @update:modelValue="val => handleInput(val, prop, inputLimitCallback)"
       />
       <div
         v-if="type === 'doubleInput'"
         :class="doubleIsInline ? 'form-double-inline': ''"
       >
         <el-input
-          @input="val => handleInput(val, prop[0], inputLimitCallback)"
-          :value="formData[prop[0]]"
+          @update:modelValue="val => handleInput(val, prop[0], inputLimitCallback)"
+          :model-value="formData[prop[0]]"
           :placeholder="(placeholder || [])[0] || '请输入'"
         />
         <el-input
           :placeholder="(placeholder || [])[1] || '请输入'"
-          :value="formData[prop[1]]"
-          @input="val => handleInput(val, prop[1], inputLimitCallback)"
+          :model-value="formData[prop[1]]"
+          @update:modelValue="val => handleInput(val, prop[1], inputLimitCallback)"
         />
       </div>
       <el-select
         v-if="type === 'select'"
-        :value="formData[prop]"
-        :placeholder="placeholder ? placeholder : showLabel ? '请输入' : label"
+        :model-value="formData[prop]"
+        :placeholder="withoutAll ? (placeholder ? placeholder : showLabel ? '请输入' : label) : (showLabel ? '全部' : label)"
         :clearable="clearable"
-        @input="val => handleInput(val, prop)"
+        @update:modelValue="val => handleInput(val, prop)"
         @change="(...args) => changeCb && changeCb(...args)"
         :filterable="filterable"
         :multiple="multiple"
@@ -65,46 +65,46 @@
       </el-select>
       <el-date-picker
         v-if="type === 'datePicker'"
-        @input="val => handleInput(val, prop)"
+        @update:modelValue="val => handleInput(val, prop)"
         @change="(...args) => changeCb && changeCb(...args)"
-        :value="formData[prop]"
-        format="yyyy-MM-dd"
-        value-format="yyyy-MM-dd"
+        :model-value="formData[prop]"
+        format="YYYY-MM-DD"
+        value-format="YYYY-MM-DD"
         :type="dateType"
         :range-separator="rangeSeparator || '到'"
         :placeholder="dateType == 'date' ? placeholder || '选择日期' : '选择日期范围'"
         start-placeholder="开始日期"
         end-placeholder="结束日期"
-        :picker-options="pickerOptions"
+        :disabled-date="pickerOptions?.disabledDate"
       />
       <div
         v-if="type === 'doubleDatePicker'"
         :class="doubleIsInline ? 'form-double-inline': ''"
       >
         <el-date-picker
-          @input="val => handleInput(val, prop[0], '', key)"
+          @update:modelValue="val => handleInput(val, prop[0], '', key)"
           @change="(...args) => changeCb && changeCb(...args)"
-          :value="formData[prop[0]]"
-          value-format="yyyy-MM-dd"
-          format="yyyy-MM-dd"
+          :model-value="formData[prop[0]]"
+          value-format="YYYY-MM-DD"
+          format="YYYY-MM-DD"
           type="date"
           :editable="false"
           :placeholder="(placeholder || [])[0] || '开始日期'"
-          :picker-options="pickerOptions?.start || genStartDateDisabledOptions(formData[prop[1]], limit)"
+          :disabled-date="pickerOptions?.start?.disabledDate || genStartDateDisabledOptions(formData[prop[1]], limit)?.disabledDate"
         />
         <el-date-picker
-          @input="val => handleInput(val, prop[1], '', key)"
+          @update:modelValue="val => handleInput(val, prop[1], '', key)"
           @change="(...args) => changeCb && changeCb(...args)"
-          :value="formData[prop[1]]"
-          value-format="yyyy-MM-dd"
-          format="yyyy-MM-dd"
+          :model-value="formData[prop[1]]"
+          value-format="YYYY-MM-DD"
+          format="YYYY-MM-DD"
           type="date"
           :editable="false"
           :placeholder="(placeholder || [])[1] || '结束日期'"
-          :picker-options="pickerOptions?.end || genEndDateDisabledOptions(formData[prop[0]], limit)"
+          :disabled-date="pickerOptions?.end?.disabledDate || genEndDateDisabledOptions(formData[prop[0]], limit)?.disabledDate"
         />
         <el-checkbox
-          :value="checkedIds[key]"
+          :model-value="checkedIds[key]"
           v-if="isEmpty"
           @change="(value) => handelIsEmpty(prop, value, key)"
           class="is-empty"
@@ -117,146 +117,136 @@
         :name="slotName"
       />
     </el-form-item>
-    <span v-if="isShowSearchBtn">
+    <el-form-item
+      v-if="isShowSearchBtn"
+      label-width="0"
+      class="search-form__buttons"
+    >
       <el-button
         class="search"
         @click="handleSearch"
         type="primary"
-      >{{ searchText }}</el-button>
+      >
+        {{ searchText }}
+      </el-button>
       <el-button
         v-if="showClear"
         @click="handleClearParams"
-      >{{ clearText }}</el-button>
-    </span>
+      >
+        {{ clearText }}
+      </el-button>
+    </el-form-item>
   </el-form>
 </template>
 
-<script>
-import { genStartDateDisabledOptions, genEndDateDisabledOptions } from '../helper';
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import { genStartDateDisabledOptions, genEndDateDisabledOptions } from '../helper'
 
-export default {
-  name: 'SearchForm',
-  props: {
-    labelPosition: {
-      default: 'right',
-      type: String
-    },
-    isShowSearchBtn: {
-      default: true,
-      type: Boolean
-    },
-    isInline: {
-      default: false,
-      type: Boolean
-    },
-    config: {
-      required: true,
-      type: Array
-    },
-    width: {
-      default: '100px',
-      type: String
-    },
-    formData: {
-      required: true
-    },
-    showClear: {
-      default: true,
-      type: Boolean
-    },
-    showLabel: {
-      default: true,
-      type: Boolean
-    },
-    ownerClear: {
-      type: Function
-    },
-    resetCheckedIds: {
-      type: Boolean
-    },
-    searchText: {
-      default: '搜索',
-      type: String
-    },
-    clearText: {
-      default: '清除',
-      type: String
-    }
-  },
-  data () {
-    return {
-      visible: true,
-      initialData: {},
-      checkedIds: {}
-    }
-  },
-  watch: {
-    resetCheckedIds () {
-      this.config.filter(c => c.type === 'doubleDatePicker').map(t => t.key).forEach(k => {
-        this.$set(this.checkedIds, k, false)
-      })
-    }
-  },
-  mounted () {
-    this.initialData = Object.freeze({ ...this.formData })
-  },
-  methods: {
-    genStartDateDisabledOptions,
-    genEndDateDisabledOptions,
-    handleInput (val, prop, inputLimitCallback, key) {
-      if (inputLimitCallback && !inputLimitCallback(val)) return false
-      if (val) {
-        this.$set(this.checkedIds, key, false)
-      }
-      this.$emit('update:formData', { ...this.formData, [prop]: val })
-      this.$emit('isPickerEmpty', this.checkedIds)
-    },
+defineOptions({ name: 'SearchForm' })
+
+interface IProps {
+  labelPosition?: string
+  isShowSearchBtn?: boolean
+  isInline?: boolean
+  config: Record<string, any>[]
+  width?: string
+  formData: Record<string, any>
+  showClear?: boolean
+  showLabel?: boolean
+  ownerClear?: () => void
+  resetCheckedIds?: boolean
+  searchText?: string
+  clearText?: string
+}
+
+interface IEmits {
+  (e: 'update:formData', val: Record<string, any>): void
+  (e: 'isPickerEmpty', val: Record<string, boolean>): void
+  (e: 'search', formData: Record<string, any>): void
+  (e: 'clear'): void
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  labelPosition: 'right',
+  isShowSearchBtn: true,
+  isInline: false,
+  width: '100px',
+  showClear: true,
+  showLabel: true,
+  searchText: '搜索',
+  clearText: '清除',
+})
 
-    handleSearch () {
-      this.$emit('search', this.formData)
-    },
+const emit = defineEmits<IEmits>()
 
-    handelIsEmpty (prop, value, key) {
-      if (value) {
-        // eslint-disable-next-line
-        this.formData[prop[0]] = '';
-        // eslint-disable-next-line
-        this.formData[prop[1]] = '';
-      }
-      this.$set(this.checkedIds, key, value)
-      this.$emit('isPickerEmpty', this.checkedIds)
-    },
+const initialData = ref<Record<string, any>>({})
+const checkedIds = ref<Record<string, boolean>>({})
 
-    handleClearParams () { // 父组件可以通过调用 `this.$refs[xx].handleClearParams()` 来清空表单数据
-      if (this.ownerClear && typeof this.ownerClear === 'function') {
-        this.ownerClear()
-        return
-      }
-      Object.keys(this.checkedIds).forEach((k) => {
-        this.checkedIds[k] = false
-      })
-      this.$emit('update:formData', { ...this.formData, ...this.initialData })
-      this.$emit('clear')
-    },
+watch(() => props.resetCheckedIds, () => {
+  props.config.filter(c => c.type === 'doubleDatePicker').map(t => t.key).forEach((k: string) => {
+    checkedIds.value[k] = false
+  })
+})
 
-    handleFormClose () {
-      this.visible = false;
-    },
+onMounted(() => {
+  initialData.value = Object.freeze({ ...props.formData })
+})
+
+const handleInput = (val: any, prop: string | number, inputLimitCallback?: any, key?: string) => {
+  if (inputLimitCallback && !inputLimitCallback(val)) return false
+  if (val && key) {
+    checkedIds.value[key] = false
   }
+  emit('update:formData', { ...props.formData, [prop]: val })
+  emit('isPickerEmpty', checkedIds.value)
+}
+
+const handleSearch = () => {
+  emit('search', props.formData)
+}
+
+const handelIsEmpty = (prop: string[], value: boolean, key: string) => {
+  if (value) {
+    emit('update:formData', { ...props.formData, [prop[0]]: '', [prop[1]]: '' })
+  }
+  checkedIds.value[key] = value
+  emit('isPickerEmpty', checkedIds.value)
+}
+
+const handleClearParams = () => {
+  if (props.ownerClear && typeof props.ownerClear === 'function') {
+    props.ownerClear()
+    return
+  }
+  Object.keys(checkedIds.value).forEach((k) => {
+    checkedIds.value[k] = false
+  })
+  emit('update:formData', { ...props.formData, ...initialData.value })
+  emit('clear')
 }
 </script>
 <style scoped lang="less">
 .form-double-inline {
   display: flex;
-  & .el-input {
+  :deep(.el-input) {
     &:not(:first-child) {
       margin-left: 4px;
     }
   }
-  & .el-date-editor{
-    &:not(:first-child){
+  :deep(.el-date-editor) {
+    &:not(:first-child) {
       margin-left: 4px;
     }
   }
+  :deep(.is-empty) {
+    margin-left: 4px;
+  }
+}
+:deep(.el-select) {
+  min-width: 180px;
+}
+:deep(.el-form-item__label) {
+  height: auto;
 }
 </style>

package/src/components/SearchForm/types/index.ts

@@ -1,4 +1,4 @@
-import { DatePicker } from "element-ui/types/element-ui"
+import type { DatePickerProps } from 'element-plus'
 
 type BaseOption = {
   label: string
@@ -41,7 +41,7 @@ type DatePickerOption = BaseOption & {
   type: 'datePicker'
   dateType?: string
   rangeSeparator?: string
-  datePickerOptions?: DatePicker['pickerOptions']
+  datePickerOptions?: DatePickerProps['disabledDate']
 }
 
 type BaseDoubleOption = Omit<BaseOption, 'prop'> & {
@@ -62,8 +62,8 @@ type DoubleDatePickerOptionBase = BaseDoubleOption & {
 
 type DoubleDatePickerOption = DoubleDatePickerOptionBase & {
   pickerOptions?: {
-    start?: DatePicker['pickerOptions']
-    end?: DatePicker['pickerOptions']
+    start?: DatePickerProps['disabledDate']
+    end?: DatePickerProps['disabledDate']
   }
 }
 

package/src/components/SearchSelect/index.vue

@@ -10,7 +10,7 @@
       v-model="content"
       class="search-select__input"
       :placeholder="placeholder"
-      @input="handleInputChange"
+      @update:modelValue="handleInputChange"
       @focus="handleFocus"
       @blur="handleBlur"
     />
@@ -38,72 +38,88 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'SearchSelect',
-  props: {
-    value: {
-      default: '',
-      type: String,
-    },
-    placeholder: {
-      default: '请输入',
-      type: String,
-    },
-    list: {
-      default: () => [],
-      type: Array,
-    },
-    showList: {
-      default: () => [],
-      type: Array,
-    }
-  },
-  data() {
-    return {
-      content: '',
-      visible: false,
-      currentId: 0
-    }
-  },
-  watch: {
-    value(val) {
-      this.content = val
-    }
-  },
-  methods: {
-    handleFocus() {
-      this.visible = true
-      this.$emit('input', this.content)
-    },
-    handleInputChange(params) {
-      this.$emit('update:value', params)
-      this.$emit('input', params)
-    },
-    navigateOptions(e, params) {
-      e.target.selectionStart = this.content.length
-      if (params === 'next') this.currentId = this.currentId === this.list.length - 1 ? 0 : this.currentId + 1
-      if (params === 'prev') this.currentId = this.currentId === 0 ? this.list.length - 1 : this.currentId - 1
-    },
-    selectOption() {
-      this.visible = false
-      this.$refs.input.blur()
-      this.$emit('select', this.list[this.currentId])
-    },
-    handleBlur() {
-      const timer = setTimeout(() => {
-        this.visible = false
-        clearTimeout(timer)
-      }, 300)
-    },
-    handleSelect(item) {
-      this.$emit('select', item)
-    },
-    getKey (item, index) {
-      return btoa(escape(`${item}_${index}`))
-    }
-  },
-};
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+defineOptions({ name: 'SearchSelect' })
+
+interface IProps {
+  value?: string
+  modelValue?: string
+  placeholder?: string
+  list?: any[]
+  showList?: any[]
+}
+
+interface IEmits {
+  (e: 'input', val: string): void
+  (e: 'update:modelValue', val: string): void
+  (e: 'update:value', val: string): void
+  (e: 'select', item: any): void
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  value: '',
+  modelValue: '',
+  placeholder: '请输入',
+  list: () => [],
+  showList: () => [],
+})
+
+const emit = defineEmits<IEmits>()
+
+const content = ref('')
+const visible = ref(false)
+const currentId = ref(0)
+const input = ref<{ blur: () => void }>()
+
+watch(() => props.value, (val) => {
+  content.value = val
+})
+
+watch(() => props.modelValue, (val) => {
+  content.value = val
+})
+
+const handleFocus = () => {
+  visible.value = true
+  emit('input', content.value)
+  emit('update:modelValue', content.value)
+}
+
+const handleInputChange = (params: string) => {
+  emit('update:value', params)
+  emit('input', params)
+  emit('update:modelValue', params)
+}
+
+const navigateOptions = (e: KeyboardEvent, params: string) => {
+  const target = e.target as HTMLInputElement
+  target.selectionStart = content.value.length
+  if (params === 'next') currentId.value = currentId.value === props.list.length - 1 ? 0 : currentId.value + 1
+  if (params === 'prev') currentId.value = currentId.value === 0 ? props.list.length - 1 : currentId.value - 1
+}
+
+const selectOption = () => {
+  visible.value = false
+  input.value?.blur()
+  emit('select', props.list[currentId.value])
+}
+
+const handleBlur = () => {
+  const timer = setTimeout(() => {
+    visible.value = false
+    clearTimeout(timer)
+  }, 300)
+}
+
+const handleSelect = (item: any) => {
+  emit('select', item)
+}
+
+const getKey = (item: any, index: number) => {
+  return btoa(escape(`${item}_${index}`))
+}
 </script>
 
 <style lang="less">

package/src/components/index.ts

@@ -8,7 +8,7 @@ import SearchSelect from './SearchSelect/index.vue'
 import AddMembers from './AddMembers/index.vue'
 import PopoverForm from './PopoverForm/index.vue'
 import EditableTable from './EditableTable/index.vue'
-import SingleMessage from './singleMessage/index'
+import { SingleMessage } from './singleMessage/index'
 
 export {
   DemoComponent,

package/src/components/singleMessage/index.ts

@@ -1,44 +1,15 @@
-import { Message } from 'element-ui';
-import MessageType from 'element-ui/packages/message';
-
-
-let messageInstance: MessageType = null;
-
-const closeMsg = (message: MessageType) => {
-  message.singleTimer = setTimeout(() => {
-    message.singleTimer && clearTimeout(message.singleTimer);
-    message.close();
-    messageInstance = null;
-  }, 3000);
-};
-
-const singleMessage: MessageType = (options: any) => {
-  if (
-    messageInstance
-    && (messageInstance.message !== options.message || messageInstance.type !== options.type)
-  ) {
-    messageInstance.close();
-    messageInstance = Message({ ...options, duration: 0 });
-    return closeMsg(messageInstance);
-  }
-  if (messageInstance) {
-    messageInstance.singleTimer && clearTimeout(messageInstance.singleTimer);
-    return closeMsg(messageInstance);
-  }
-  messageInstance = Message({ ...options, duration: 0 });
-  closeMsg(messageInstance);
-};
-
-['error', 'success', 'info', 'warning'].forEach(type => {
-  singleMessage[type] = options => {
-    if (typeof options === 'string') {
-      options = {
-        message: options,
-      };
-    }
-    options.type = type;
-    return singleMessage(options);
-  };
-});
-
-export default singleMessage;
+import { ElMessage } from 'element-plus';
+
+export interface ISingleMessageOption {
+  message: string;
+  type?: 'success' | 'warning' | 'info' | 'error';
+  duration?: number;
+}
+
+export function SingleMessage(option: ISingleMessageOption) {
+  ElMessage({
+    message: option.message,
+    type: option.type || 'success',
+    duration: option.duration || 3000,
+  });
+}