jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue

<template>
  <ElForm :style="getStyle()" :label-width="labelWidth" class="FormConfig" size="mini">
    <template v-for="(item, index) in formList">
      <ElFormItem class="formItem" :rules="getRules(item)" v-if="formItemVisible(item)" :key="item.key"
        :label="item.label" :style="gridStyle(item, index)">
        <slot :name="item.key" :data="item" :formData="modelFormData">
          <component :is="getComponent(item.type)" v-bind="getBindData(item)" v-model="modelFormData[item.key]"
            v-on="resolveListeners(item.ons)" />
        </slot>
      </ElFormItem>
    </template>
  </ElForm>
</template>

<script>
import { resolveName } from "./utils/index"
import { reduceDefaultValue } from "./utils/defaultValue"

const files = require.context('./components', true, /^.\/[^/]+\/index\.vue$|^.\/[^/]+.vue$/);

const components = files.keys().reduce((prev, key) => {
  prev[key.match(/[^./]+/g)[0]] = files(key).default;

  return prev;
}, {
  Empty: 'div'
})

export default {
  name: 'FormConfig',
  components: {
    // FormInput,
    // FormTimePicker
  },
  provide() {
    return {
      getComponent: this.getComponent,
      getBindData: this.getBindData
    }
  },
  props: {
    /**
     * {
     *  label: String;
     *  key: String;
     *  type: 'input' | 'timePicker',
     *  gridArea?: "",
     *  gridColumn?: "",
     *  gridRow?: "",
     *  options?: {}
     * }[]
     */
    formList: {
      type: Array,
      default: () => []
    },
    labelWidth: {
      type: String,
      default: "auto"
    },
    rules: {
      type: Object,
      default: null
    },
    column: {
      type: [String, Number],
      default: "3"
    }
  },
  model: {
    prop: 'value',
    event: "update:value"
  },
  data() {
    return {
      formData: this.value || {}
    }
  },
  created() {
    this.reset();
  },
  computed: {
    modelFormData: {
      get() {
        return this.formData;
      },
      set(data) {
        this.formData = data;
        this.$emit('update:value', this.formData);
      }
    },
    gridStyle() {
      return (item, index) => ({
        gridRow: `span ${item.gridRow || 1}`,
        gridColumn: `span ${item.gridColumn || item.isAlone && this.column || 1}`,
      })
    },
    formItemVisible() {
      return item => {
        const result = item.visible ? item.visible(this.modelFormData) : true;

        // if (!result) {
        //   delete this.formData[item.key];
        // }

        return result;
      }
    }
  },
  methods: {
    resolveListeners(callbacks) {

      if (!callbacks) return;

      const result = {};

      for (const key in callbacks) {
        result[key] = (...args) => callbacks[key](...args, this.modelFormData, this)
      }

      return result
    },
    reset() {
      return this.modelFormData = reduceDefaultValue(this.formList);
    },
    getStyle() {
      return {
        gridTemplateColumns: `repeat(${this.column}, 1fr)`,
      }
    },
    getBindData(item) {
      return {
        placeholder: "请输入",
        ...item.options
      }
    },
    getComponent(type) {
      if (!type) type = 'input';

      const componentKey = resolveName(type);

      const ElComponentKey = `El${componentKey}`;

      return components[componentKey] || components[ElComponentKey] || ElComponentKey;
    },
    getRules(item) {
      if (this.rules?.[item.key]) return this.rules[item.key];

      if (item.rules) return item.rules;

      if (item.required) return [
        {
          required: true,
          message: `${item.options?.placeholder || `${item.label}不能为空`}`,
          trigger: "blur",
        },
      ]
    }
  }
}
</script>

<style lang='scss' scoped>
.list-item {
  display: inline-block;
  margin-right: 10px;
}

.list-enter-active,
.list-leave-active {
  transition: all 1s;
  position: absolute;
}

.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.FormConfig {
  display: grid;
  align-content: start;
  width: 100%;
  gap: 15px 15px;
  overflow-x: hidden;
  padding-right: 9px;

  .formItem {
    display: flex;
    align-items: center;
  }


  ::v-deep {
    .el-form-item {
      align-items: center;
      margin: 0;
      height: 100%;

      &:first-child {
        .el-form-item__label-wrap {
          // padding-top: 9px;
          margin: 0 !important;
        }
      }

      .el-form-item__label-wrap {
        width: fit-content;
      }

      .el-form-item__label {
        height: 22px;
        font-size: 15px;
        // font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #3DE8FF;
        line-height: 19px;
        // -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
      }

      .el-form-item__content {
        margin: 0 !important;
        flex: 1;
        height: 100%;

        .el-input__prefix {
          color: #fff;
        }
      }
    }
  }
}
</style>