Components ​

<script>
export default {
  inheritAttrs: false,
}
</script>

<template>
  <el-dialog v-bind="$attrs" v-on="$listeners"></el-dialog>
</template>

<template>
  <form>
    <slot></slot>
  </form>
</template>

<script>
export default {
  name: 'iForm',
  props: {
    model: Object,
    rules: Object,
  },
  provide() {
    return {
      form: this,
    }
  },
  data() {
    return {
      fields: [],
    }
  },
  created() {
    this.$on('on-form-item-add', field => {
      if (field) this.fields.push(field)
    })

    this.$on('on-form-item-remove', field => {
      if (field.prop) this.fields.splice(this.fields.indexOf(field), 1)
    })
  },
  methods: {
    // 重置表单
    resetFields() {
      this.fields.forEach(field => field.resetField())
    },
    validate(callback) {
      return new Promise(resolve => {
        let valid = true,
          count = 0

        this.fields.forEach(field => {
          field.validate('', errors => {
            errors && (valid = false)
            if (++count === this.fields.length) {
              resolve(valid)

              typeof callback === 'function' && callback(valid)
            }
          })
        })
      })
    },
  },
}
</script>

<template>
  <div>
    <label v-if="label" :class="{ 'i-form-item-label-required': required }">
      {{ label }}
    </label>
    <div>
      <slot></slot>
      <div v-if="validateState === 'error'" class="i-form-item-message">
        {{ validateMessage }}
      </div>
    </div>
  </div>
</template>

<script>
import AsyncValidator from 'async-validator'
import Emitter from '@/mixins/emitter.js'

export default {
  name: 'iFormItem',
  mixins: [ Emitter ],
  inject: ['form'],
  props: {
    label: {
      type: String,
      default: '',
    },
    prop: String,
  },
  data () {
    return {
      isRequired: false, // 是否为必填
      validateState: '', // 校验状态
      validateMessage: '', // 校验不通过时的提示
    }
  },
  computed: {
    fieldValue () {
      return this.form.model[this.prop]
    },
  },
  // 组件渲染时，将实例缓存在 Form 中
  mounted () {
    // 如果没有传入 prop，则无需校验，也就无需缓存
    this.prop && this.dispatch('iForm', 'on-form-item-add')

    // 设置初始值，以便在重置时恢复默认值
    this.initialValue = this.fieldValue

    this.setRules()
  },
  // 组件销毁前，将实例从 Form 的缓存中删除
  beforeDestory () {
    this.dispatch('iForm', 'on-form-item-add', this)
  },
  methods: {
    setRules () {
      let rules = this.getRules()

      // 如果当前校验规则中有必填项，则标记
      rules.length && rules.every(rule => (this.isRequired = rule.required))

      this.$on.('on-form-blur', this.onFieldBlur)
      this.$on.('on-form-change', this.onFieldChange)
    },
    // 从 Form 的 rules 属性中，获取当前 FormItem 的校验规则
    getRules () {
      let formRules = this.form.rules

      formRules = formRules ? formRules[this.prop] : []

      return [].concat(formRules || [])
    },
    // 只支持 blur 和 change，所以过滤出符合要求的 rule 规则
    getFilteredRule (trigger) {
      const rules = this.getRules()

      return rules.filter(rule => !rule.trigger || rule.trigger.indexOf(trigger) !== -1)
    },
    /**
     * 校验表单数据
     * @param {string} 校验类型
     * @param {function} 回调函数
     */
    validate (trigger, callback = function () {}) {
      let rules = this.getFilterdRule(trigger)

      if (!rules || rules.length === 0) return false

      // 设置状态为校验中
      this.validateState = 'validating'

      let descriptor = {}
      descriptor[this.prop] = rules

      const validator = new AsyncValidator(descriptor)
      let model = {}

      model[this.prop] = this.fieldValue

      validator.validate(model, { firstFields: true }, errors => {
        this.validateState = !errors ? 'success' : 'error'
        this.validateMessage = errors ? errors[0].message : ''

        callback(this.validateMessage)
      })
    },
    // 重置表单数据以及校验
    resetField () {
      this.validateState = ''
      this.validateMessage = ''

      this.form.model[this.prop] = this.initialValue
    },
    onFieldBlur () {
      this.validate('blur')
    },
    onFieldChange () {
      this.validate('change')
    },
  },
}
</script>

<style>
.i-form-item-label-required:before {
  content: '*';
  color: red;
}
.i-form-item-message {
  color: red;
}
</style>

<template>
  <input
    type="text"
    :value="currentValue"
    @input="handleInput"
    @blur="handleBlur"
  />
</template>

<script>
import Emitter from '@/mixins/emitter.js'

export default {
  name: 'iInput',
  mixins: [Emitter],
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      currentValue: this.value,
    }
  },
  methods: {
    handleInput(event) {
      const value = event.target.value

      this.currentValue = value
      this.$emit('input', value)
      this.dispatch('iFormItem', 'on-form-change', value)
    },
    handleBlur() {
      this.dispatch('iFormItem', 'on-form-blur', this.currentValue)
    },
  },
}
</script>

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: '',
    },
  },
  computed: {
    iconName: () => `#icon-${this.iconClass}`,
    svgClass: () => `svg-icon ${this.className || ''}`,
  },
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

<template>
  <div>
    <SvgIcon class="my-icon" icon-class="up" />
  </div>
</template>

<style>
.my-class {
  font-size: 20px;
  color: #f00;
}
</style>

<script>
export default {
  name: 'BaseDialog',
  props: {
    title: {
      type: String,
      default: '提示',
    },
    width: {
      type: String,
      default: '30%',
    },
    customClass: {
      type: String,
      default: '',
    },
    footer: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogVisiable: false,
    }
  },
  methods: {
    open() {
      this.dialogVisiable = true
    },
    close() {
      this.$emit('before-close')
      this.dialogVisiable = false
    },
    beforeClose(done) {
      this.$emit('before-close')
      done()
    },
  },
}
</script>

<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisiable"
      :title="title"
      :width="width"
      :before-close="beforeClose"
      :custom-class="'wisdom-custom-dialog__borderRadius ' + customClass"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <slot name="title" />
      <slot />
      <span slot="footer">
        <template v-if="footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="$emit('submit')">提 交</el-button>
        </template>
        <slot v-else name="footer" />
      </span>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.el-custom-dialog__borderRadius {
  border-radius: 6px !important;

  .el-dialog__header {
    border-bottom: 1px solid #dcdfe6;
  }
}
</style>

<template>
  <div>
    <el-table
      v-loading="loading"
      :element-loading-text="loadingText"
      :data="data"
      ref="table"
      :stripe="stripe"
      :border="border"
      :max-height="maxHeight"
      :highlight-current-row="highlightCurrentRow"
      @selection-change="selectionChange"
    >
      <template v-for="col in columns">
        <el-table-column
          v-if="col.slot"
          :key="col.prop + ' ' + col.name"
          :type="col.type || ''"
          :prop="col.prop"
          :label="col.name"
          :width="col.width"
          :fiexd="col.fixed || false"
          :align="col.align || 'center'"
          :sortable="col.sortable"
        >
          <template #default="{ row, column, $index }">
            <slot
              :row="row"
              :column="column"
              :[$index]="$index"
              :name="col.slot"
            ></slot>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :key="col.prop + ' ' + col.name"
          :type="col.type || ''"
          :prop="col.prop"
          :label="col.name"
          :width="col.width"
          :fiexd="col.fixed || false"
          :align="col.align || 'center'"
          :sortable="col.sortable"
        ></el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'SelfTable',
  props: {
    data: {
      type: Array,
      required: true,
    },
    stripe: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
      required: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    loadingText: {
      type: String,
      default: '拼命加载中',
    },
    maxHeight: {
      type: Number || String,
    },
    highlightCurrentRow: {
      type: Boolean,
      default: true,
    },
    selectionChange: {
      type: Function,
      default: () => {},
    },
    sortable: {
      type: Boolean || String,
      default: false,
    },
  },
  methods: {
    toggleAllSelection() {
      this.$refs.table.toggleAllSelection()
    },
    clearSelection() {
      this.$refs.table.clearSelection()
    },
  },
}
</script>

<script lang="ts" setup>
import { computed, ref } from 'vue'

interface IProps {
  // 显示内容
  text?: string
  // 显示位置
  placement?: string
  // tip 内容
  content?: string
  // 要显示的行数
  lineNumber: number
}

const prop = withDefaults(defineProps<IProps>(), {
  placement: 'top',
  lineNumber: 1,
})

let showTooltip = ref(true)

const onMouseEnter = ({ target }) =>
  (showTooltip.value = !(
    dom.offsetWidth < dom.scrollWidth || dom.offsetHeight < dom.scrollHeight
  ))
</script>

<template>
  <el-tooltip
    v-bind="$attrs"
    :disabled="showTooltip"
    :placement="placement"
    class="elli-tip-box"
  >
    <template #content>
      <span v-if="content || text">{{ content || text }}</span>
      <span v-else><slot></slot></span>
    </template>

    <div
      :class="[
        { lineNumber > 1 ? 'text-ellipsis-multiple' : 'text-ellipsis' }
      ]"
      @mouseenter.stop="onMouseEnter"
    >
      <slot>{{ text }}</slot>
    </div>
  </el-tooltip>
</template>

<style scoped>
.text-ellipsis-multiple {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-line-clamp: v-bind('prop.lineNumber');
}

.text-ellipsis {
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

<template>
  <div v-loading="loading" :style="'height:' + height">
    <iframe
      :src="src"
      frameborder="no"
      style="width: 100%;height: 100%"
      scrolling="auto"
    />
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      height: document.documentElement.clientHeight - 94.5 + 'px;',
      loading: true,
    }
  },
  mounted() {
    setTimeout(() => {
      this.loading = false
    }, 230)
    window.onresize = () => {
      this.height = document.documentElement.clientHeight - 94.5 + 'px;'
    }
  },
}
</script>