code init

2021-05-25 18:06:45 +08:00
parent 02698d6dab
commit f54a8d4fa1
1367 changed files with 540755 additions and 21713 deletions
@@ -0,0 +1,190 @@
+<!-- 多选时间组件 -->
+<template>
+  <el-col :span="span">
+    <el-form-item
+      :label="config.attrName"
+      :prop="config.attrField"
+      :label-width="labelWidth"
+      class="add-form-item"
+      :class="{'form-item-disabled': disabled}"
+    >
+      <el-input
+        v-show="false"
+        :value="value"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        clearable
+      ></el-input>
+      <div class="date-picker-group" v-if="!disabled">
+        <template v-for="(tag, index) in tagList">
+          <transition name="el-zoom-in-center">
+            <div class="tag-wrap" v-if="tagAnimateList.includes(tag)" :key="index">
+              <el-tag
+                size="small"
+                :closable="!disabled"
+                @close="handleRemoveTag(index)">{{ tag }}</el-tag>
+            </div>
+          </transition>
+        </template>
+        <div class="tag-wrap" v-if="datePickerVisible">
+          <el-date-picker
+            ref="datePicker"
+            v-model="datePickerVal"
+            type="date"
+            :disabled="disabled"
+            :placeholder="placeholder"
+            format="yyyy-MM-dd"
+            :picker-options="pickerOptions"
+            @input="handleChange"
+          >
+          </el-date-picker>
+        </div>
+        <div class="tag-wrap" v-else>
+          <el-button
+            class="add-date"
+            type="primary"
+            plain
+            size="mini"
+            @click="handleAddDate">增加日期</el-button>
+        </div>
+      </div>
+      <div class="date-picker-group" v-else>
+        <template v-for="(tag, index) in tagList">
+          <transition name="el-zoom-in-center">
+            <div class="tag-wrap" v-if="tagAnimateList.includes(tag)" :key="index">
+              <el-tag
+                size="small"
+                :closable="!disabled"
+                @close="handleRemoveTag(index)">{{ tag }}</el-tag>
+            </div>
+          </transition>
+        </template>
+      </div>
+    </el-form-item>
+  </el-col>
+</template>
+
+<script>
+export default {
+  name: 'CusTomDataPickerGroup',
+  mixins: [],
+  props: {
+    config: {
+      type: Object,
+      required: true
+    },
+    value: {
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 栅格比例
+    span: {
+      type: Number,
+      default: 24
+    },
+    labelWidth: {
+      type: String,
+      default: '150px'
+    }
+  },
+  components: {},
+  data () {
+    return {
+      datePickerVal: '',
+      tagList: [],
+      datePickerVisible: false,
+      tagAnimateList: []
+    }
+  },
+  methods: {
+    handleChange (value) {
+      const val = this.$dateFormat(value, 'yyyy-MM-dd')
+      this.tagList.push(val)
+      this.datePickerVisible = false
+      this.datePickerVal = ''
+      this.$emit('input', this.tagList.join(','))
+    },
+
+    handleAddDate () {
+      this.datePickerVisible = true
+      this.$nextTick(() => {
+        this.$refs.datePicker.focus()
+      })
+    },
+
+    handleRemoveTag (index) {
+      this.tagList.splice(index, 1)
+      this.$emit('input', this.tagList.join(','))
+    }
+  },
+  computed: {
+    placeholder () {
+      return `请选择${this.config.attrName}`
+    },
+    showMessage () {
+      return `${this.config.attrName}不能为空`
+    },
+    isRequired () {
+      return !!this.config.isMust
+    },
+    isString (str) {
+      return (typeof str === 'string') && str.constructor === String
+    },
+    pickerOptions () {
+      const _this = this
+      return {
+        disabledDate (time) {
+          return _this.tagList.includes(_this.$dateFormat(time, 'yyyy-MM-dd'))
+        }
+      }
+    }
+  },
+  watch: {
+    value (val) {
+      this.tagList = val !== '' && val !== null ? val.split(',') : []
+    },
+    tagList: {
+      handler (val) {
+        setTimeout(() => {
+          this.tagAnimateList = JSON.parse(JSON.stringify(val))
+        })
+      }
+    }
+  },
+  mounted () {
+    this.tagList = this.value !== '' && this.value !== null && typeof (this.value) !== 'undefined' ? this.value.split(',') : []
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .add-form-item {
+    height: auto;
+    min-height: 50px;
+    .date-picker-group {
+      min-height: 49px;
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: flex-start;
+      padding-left: 10px;
+      .tag-wrap {
+        height: 50px;
+        display: inline-flex;
+        align-items: center;
+        margin-right: 5px;
+        user-select: none;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+      .add-date {
+        height: 24px;
+        padding: 0 8px;
+        line-height: 22px;
+      }
+    }
+  }
+</style>