@lx-frontend/wrap-element-ui 0.4.2-beta.1 → 0.4.2

package/packages/PopoverForm/src/PopoverForm.vue

@@ -1,66 +1,66 @@
-<template>
-  <el-popover :placement="placement" :disabled="isDisabled" :width="width || 300" v-model="show" trigger="click" :visible-arrow="true">
-    <div class="el-popover__header">
-      {{title}}
-      <slot name="title"></slot>
-      <el-button type="text" icon="el-icon-close" @click="handleClose"></el-button>
-    </div>
-    <slot name="form"></slot>
-
-    <div v-if="withSubmitBtn" class="el-popover__footer">
-      <slot name="footer"></slot>
-      <el-button type="primary" class="wp100" @click="handleSubmit">{{ okText }}</el-button>
-    </div>
-    <span slot='reference'>
-      <slot name='reference'></slot>
-    </span>
-  </el-popover>
-</template>
-<script>
-export default {
-  name: 'PopoverForm',
-  props: {
-    title: String,
-    width: Number,
-    placement: {
-      type: String,
-      default: 'left',
-    },
-    withSubmitBtn: {
-      type: Boolean,
-      default: true,
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    okText: {
-      type: String,
-      default: '确认',
-    },
-  },
-  data() {
-    return {
-      show: false,
-    };
-  },
-  methods: {
-    handleClose() {
-      this.show = false;
-    },
-    handleSubmit() {
-      this.$emit('on-sure');
-    },
-  },
-  watch: {
-    show(val) {
-      this.$emit('on-change', val);
-    },
-  },
-};
-</script>
-<style type="scss" scoped>
-  .wp100{
-    width: 100%;
-  }
-</style>
+<template>
+  <el-popover :placement="placement" :disabled="isDisabled" :width="width || 300" v-model="show" trigger="click" :visible-arrow="true">
+    <div class="el-popover__header">
+      {{title}}
+      <slot name="title"></slot>
+      <el-button type="text" icon="el-icon-close" @click="handleClose"></el-button>
+    </div>
+    <slot name="form"></slot>
+
+    <div v-if="withSubmitBtn" class="el-popover__footer">
+      <slot name="footer"></slot>
+      <el-button type="primary" class="wp100" @click="handleSubmit">{{ okText }}</el-button>
+    </div>
+    <span slot='reference'>
+      <slot name='reference'></slot>
+    </span>
+  </el-popover>
+</template>
+<script>
+export default {
+  name: 'PopoverForm',
+  props: {
+    title: String,
+    width: Number,
+    placement: {
+      type: String,
+      default: 'left',
+    },
+    withSubmitBtn: {
+      type: Boolean,
+      default: true,
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    okText: {
+      type: String,
+      default: '确认',
+    },
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+  methods: {
+    handleClose() {
+      this.show = false;
+    },
+    handleSubmit() {
+      this.$emit('on-sure');
+    },
+  },
+  watch: {
+    show(val) {
+      this.$emit('on-change', val);
+    },
+  },
+};
+</script>
+<style type="scss" scoped>
+  .wp100{
+    width: 100%;
+  }
+</style>

package/packages/SearchForm/index.js

@@ -1,7 +1,7 @@
-import SearchForm from './src/SearchForm.vue'
-
-SearchForm.install = function (Vue) {
-  Vue.component(SearchForm.name, SearchForm)
-}
-
-export default SearchForm
+import SearchForm from './src/SearchForm.vue'
+
+SearchForm.install = function (Vue) {
+  Vue.component(SearchForm.name, SearchForm)
+}
+
+export default SearchForm

package/packages/SearchForm/src/SearchForm.vue

@@ -1,225 +1,218 @@
-<template>
-  <el-form class='search-form' :inline="isInline" :label-width="width">
-    <el-form-item
-      v-for="({
-        isEmpty = true, key, type, prop, separator, label, placeholder, candidate, filterable=false, withoutAll=false, collapseTags=false,
-        clearable=false, multiple=false, multipleLimit=0, changeCb, inputLimitCallback, slotName, dateType='date',
-        doubleIsInline = true, pickerOptionsStart, pickerOptionsEnd,
-       }) in config"
-      :key="label"
-      :label="showLabel ? label : ''"
-      style="margin-right: 10px"
-    >
-      <el-input
-        v-if="type === 'input'"
-        :placeholder="placeholder ? placeholder : showLabel ? '请输入' : label"
-        :value="formData[prop]"
-        @input="val => handleInput(val, prop, inputLimitCallback)"
-      ></el-input>
-      <div v-if="type === 'doubleInput'" :class="doubleIsInline ? 'form-double-inline': ''">
-        <el-input
-          @input="val => handleInput(val, prop[0], inputLimitCallback)"
-          :value="formData[prop[0]]"
-          :placeholder="(placeholder || [])[0] || '请输入'"
-        ></el-input>
-        <el-input
-          :placeholder="(placeholder || [])[1] || '请输入'"
-          :value="formData[prop[1]]"
-          @input="val => handleInput(val, prop[1], inputLimitCallback)"
-        ></el-input>
-      </div>
-      <el-select
-        v-if="type === 'select'"
-        :value="formData[prop]"
-        :placeholder="placeholder ? placeholder : showLabel ? '请输入' : label"
-        :clearable="clearable"
-        @input="val => handleInput(val, prop)"
-        @change="(...args) => changeCb && changeCb(...args)"
-        :filterable="filterable"
-        :multiple="multiple"
-        :multipleLimit="multipleLimit"
-        :collapseTags="collapseTags"
-      >
-        <el-option
-          v-if="!withoutAll"
-          value=""
-          :label="showLabel ? '全部' : label"
-        />
-        <el-option
-          v-for="({name, value, code, id}) in candidate"
-          :key="id || name"
-          :value="value || code || id"
-          :label="name"
-        />
-      </el-select>
-      <el-date-picker
-        v-if="type === 'datePicker'"
-        @input="val => handleInput(val, prop)"
-        @change="(...args) => changeCb && changeCb(...args)"
-        :value="formData[prop]"
-        format="yyyy-MM-dd"
-        :type="dateType"
-        range-separator="到"
-        :placeholder="dateType == 'date' ? placeholder || '选择日期' : '选择日期范围'"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
-      />
-      <div v-if="type === 'doubleDatePicker'" :class="doubleIsInline ? 'form-double-inline': ''">
-        <el-date-picker
-          @input="val => handleInput(val, prop[0], '', key)"
-          @change="(...args) => changeCb && changeCb(...args)"
-          :value="formData[prop[0]]"
-          value-format="yyyy-MM-dd"
-          format="yyyy-MM-dd"
-          type="date"
-          :placeholder="(placeholder || [])[0] || '开始日期'"
-          :pickerOptions="pickerOptionsStart ? pickerOptionsStart : ''"
-        />
-        <span v-if="separator" class="ml4">{{separator}}</span>
-        <el-date-picker
-          @input="val => handleInput(val, prop[1], '', key)"
-          @change="(...args) => changeCb && changeCb(...args)"
-          :value="formData[prop[1]]"
-          value-format="yyyy-MM-dd"
-          format="yyyy-MM-dd"
-          type="date"
-          :placeholder="(placeholder || [])[1] || '结束日期'"
-          :pickerOptions="pickerOptionsEnd ? pickerOptionsEnd : ''"
-        />
-        <el-checkbox :value="checkedIds[key]" v-if="isEmpty" @change="(value) => handelIsEmpty(prop, value, key)" class="is-empty">空白</el-checkbox> 
-      </div>
-      <slot
-        v-if="type === 'slot'"
-        :name="slotName"
-      />
-    </el-form-item >
-    <span v-if="isShowSearchBtn">
-      <el-button class="search" @click="handleSearch" type="primary">{{searchText}}</el-button>
-      <el-button v-if="showClear" @click="handleClearParams">{{clearText}}</el-button>
-    </span>
-  </el-form>
-</template>
-
-<script>
-export default {
-  name: 'SearchForm',
-  props: {
-    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
-    },
-    pickerOptions: {
-      type: Function
-    }
-  },
-  data () {
-    return {
-      visible: true,
-      initialData: {},
-      checkedIds: {}
-    }
-  },
-  mounted () {
-    this.initialData = Object.freeze({ ...this.formData })
-  },
-  methods: {
-    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)
-    },
-
-    handleSearch () {
-      this.$emit('search', this.formData)
-    },
-
-    handelIsEmpty (prop, value, key) {
-      if (value) {
-        this.formData[prop[0]] = '';
-        this.formData[prop[1]] = '';
-      }
-      this.$set(this.checkedIds, key, value)
-      this.$emit('isPickerEmpty', this.checkedIds)
-    },
-
-    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 })
-    },
-
-    handleFormClose () {
-      this.visible = false;
-    },
-  },
-  watch: {
-    resetCheckedIds () {
-      this.config.filter(c => c.type === 'doubleDatePicker').map(t => t.key).forEach(k => {
-        this.$set(this.checkedIds, k, false)
-      })
-    }
-  }
-}
-</script>
-<style scoped lang="scss">
-.form-double-inline {
-  display: flex;
-  & .el-input {
-    width: 100%;
-    &:not(:first-child) {
-      margin-left: 4px;
-    }
-  }
-  & .el-date-editor{
-    &:not(:first-child){
-      margin-left: 4px;
-    }
-  }
-  .ml4{ margin-left: 4px;}
-}
+<template>
+  <el-form class='search-form' :inline="isInline" :label-width="width">
+    <el-form-item
+      v-for="({
+        isEmpty = true, key, type, prop, label, placeholder, candidate, filterable=false, withoutAll=false, collapseTags=false,
+        clearable=false, multiple=false, multipleLimit=0, changeCb, inputLimitCallback, slotName, dateType='date',
+        doubleIsInline = true,
+       }) in config"
+      :key="label"
+      :label="showLabel ? label : ''"
+      style="margin-right: 10px"
+    >
+      <el-input
+        v-if="type === 'input'"
+        :placeholder="placeholder ? placeholder : showLabel ? '请输入' : label"
+        :value="formData[prop]"
+        @input="val => handleInput(val, prop, inputLimitCallback)"
+      ></el-input>
+      <div v-if="type === 'doubleInput'" :class="doubleIsInline ? 'form-double-inline': ''">
+        <el-input
+          @input="val => handleInput(val, prop[0], inputLimitCallback)"
+          :value="formData[prop[0]]"
+          :placeholder="(placeholder || [])[0] || '请输入'"
+        ></el-input>
+        <el-input
+          :placeholder="(placeholder || [])[1] || '请输入'"
+          :value="formData[prop[1]]"
+          @input="val => handleInput(val, prop[1], inputLimitCallback)"
+        ></el-input>
+      </div>
+      <el-select
+        v-if="type === 'select'"
+        :value="formData[prop]"
+        :placeholder="placeholder ? placeholder : showLabel ? '请输入' : label"
+        :clearable="clearable"
+        @input="val => handleInput(val, prop)"
+        @change="(...args) => changeCb && changeCb(...args)"
+        :filterable="filterable"
+        :multiple="multiple"
+        :multipleLimit="multipleLimit"
+        :collapseTags="collapseTags"
+      >
+        <el-option
+          v-if="!withoutAll"
+          value=""
+          :label="showLabel ? '全部' : label"
+        />
+        <el-option
+          v-for="({name, value, code, id}) in candidate"
+          :key="id || name"
+          :value="value || code || id"
+          :label="name"
+        />
+      </el-select>
+      <el-date-picker
+        v-if="type === 'datePicker'"
+        @input="val => handleInput(val, prop)"
+        @change="(...args) => changeCb && changeCb(...args)"
+        :value="formData[prop]"
+        format="yyyy-MM-dd"
+        :type="dateType"
+        range-separator="到"
+        :placeholder="dateType == 'date' ? placeholder || '选择日期' : '选择日期范围'"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      />
+      <div v-if="type === 'doubleDatePicker'" :class="doubleIsInline ? 'form-double-inline': ''">
+        <el-date-picker
+          @input="val => handleInput(val, prop[0], '', key)"
+          @change="(...args) => changeCb && changeCb(...args)"
+          :value="formData[prop[0]]"
+          value-format="yyyy-MM-dd"
+          format="yyyy-MM-dd"
+          type="date"
+          :placeholder="(placeholder || [])[0] || '开始日期'"
+        />
+        <el-date-picker
+          @input="val => handleInput(val, prop[1], '', key)"
+          @change="(...args) => changeCb && changeCb(...args)"
+          :value="formData[prop[1]]"
+          value-format="yyyy-MM-dd"
+          format="yyyy-MM-dd"
+          type="date"
+          :placeholder="(placeholder || [])[1] || '结束日期'"
+        />
+        <el-checkbox :value="checkedIds[key]" v-if="isEmpty" @change="(value) => handelIsEmpty(prop, value, key)" class="is-empty">空白</el-checkbox> 
+      </div>
+      <slot
+        v-if="type === 'slot'"
+        :name="slotName"
+      />
+    </el-form-item >
+    <span v-if="isShowSearchBtn">
+      <el-button class="search" @click="handleSearch" type="primary">{{searchText}}</el-button>
+      <el-button v-if="showClear" @click="handleClearParams">{{clearText}}</el-button>
+    </span>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'SearchForm',
+  props: {
+    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: {}
+    }
+  },
+  mounted () {
+    this.initialData = Object.freeze({ ...this.formData })
+  },
+  methods: {
+    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)
+    },
+
+    handleSearch () {
+      this.$emit('search', this.formData)
+    },
+
+    handelIsEmpty (prop, value, key) {
+      if (value) {
+        this.formData[prop[0]] = '';
+        this.formData[prop[1]] = '';
+      }
+      this.$set(this.checkedIds, key, value)
+      this.$emit('isPickerEmpty', this.checkedIds)
+    },
+
+    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 })
+    },
+
+    handleFormClose () {
+      this.visible = false;
+    },
+  },
+  watch: {
+    resetCheckedIds () {
+      this.config.filter(c => c.type === 'doubleDatePicker').map(t => t.key).forEach(k => {
+        this.$set(this.checkedIds, k, false)
+      })
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.form-double-inline {
+  display: flex;
+  & .el-input {
+    width: 100%;
+    &:not(:first-child) {
+      margin-left: 4px;
+    }
+  }
+  & .el-date-editor{
+    &:not(:first-child){
+      margin-left: 4px;
+    }
+  }
+}
 </style>

package/packages/SearchSelect/index.js

@@ -1,7 +1,7 @@
-import SearchSelect from './src/SearchSelect.vue'
-
-SearchSelect.install = function (Vue) {
-  Vue.component(SearchSelect.name, SearchSelect)
-}
-
-export default SearchSelect
+import SearchSelect from './src/SearchSelect.vue'
+
+SearchSelect.install = function (Vue) {
+  Vue.component(SearchSelect.name, SearchSelect)
+}
+
+export default SearchSelect