leisure-core 1.0.2 → 1.0.4

package/le-list-form/src/main.vue

@@ -0,0 +1,474 @@
+<template>
+  <el-form
+    :model="formPop"
+    :rules="rules"
+    ref="ruleForm"
+    :label-width="labelWidth"
+    class="le-form-container"
+    :disabled="formDisabled"
+  >
+    <div class="form-layout" :class="{ 'has-right-content': hasRightContent }">
+      <div class="form-main">
+        <div class="form-grid" :style="gridStyle">
+          <el-form-item
+            v-for="(item, index) in filteredFormColumns"
+            :label="item.label"
+            :prop="item.prop"
+            :key="`form-item-${index}-${item.prop}`"
+            class="leisure-form-item-class"
+          >
+            <div
+              class="comContainerClass"
+              :class="{ 'radio-container': item.type === 'radio' }"
+            >
+              <component
+                :is="componentType(item.type)"
+                v-model="formPop[item.prop]"
+                v-bind="mergeProps(getComponentProps(item), item.attr || {})"
+                v-on="item.event"
+                class="compontClass"
+                :class="{ 'radio-group-class': item.type === 'radio' }"
+                :key="`component-${index}-${item.prop}-${item.type}`"
+                :ref="(el) => setFieldRef(item.ref, el, item.prop)"
+              >
+                <template v-if="item.type === 'radio'">
+                  <el-radio
+                    v-for="(option, radioIndex) in item.options"
+                    :label="option.id"
+                    :key="`radio-${index}-${radioIndex}`"
+                    >{{ option.lable }}</el-radio
+                  >
+                </template>
+                <template v-else-if="item.type === 'select'">
+                  <le-select-option
+                    :options="fieldOptions[item.prop]"
+                    :label="item.kv.label"
+                    :value="item.kv.key"
+                    :keyNum="item.keyNum"
+                    :key="`select-${index}-${item.prop}`"
+                  />
+                </template>
+              </component>
+              <slot :name="item.prop"></slot>
+            </div>
+          </el-form-item>
+        </div>
+      </div>
+      <!-- 右侧附件区域 - 新增 -->
+      <div class="form-sidebar" v-if="hasRightContent">
+        <div class="sidebar-content">
+          <slot name="sidebar"></slot>
+        </div>
+      </div>
+    </div>
+
+    <div class="form-body-footer">
+      <slot></slot>
+    </div>
+    <el-form-item v-rfooter class="form-footer">
+      <slot name="footerBtn"></slot>
+      <le-button
+        type="primary"
+        @click="saveData"
+        v-if="handleStatus == 1 || handleStatus == 2"
+        >保存</le-button
+      >
+      <le-button
+        type="info"
+        @click="close()"
+        :disabled="false"
+        v-if="showCloseBtn"
+        >关闭</le-button
+      >
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { EventBus } from "../../le-libs/js/event.js";
+export default {
+  name: "le-list-form",
+  props: {
+    formColumns: {
+      type: Array,
+      default: () => [],
+    },
+    formData: {
+      type: Object,
+      default: () => {},
+    },
+    rules: {
+      type: Object,
+      default: () => {},
+    },
+    labelWidth: {
+      type: String,
+      default: "100px",
+    },
+    fieldOptions: {
+      type: Object,
+      default: () => {},
+    },
+    handleStatus: {
+      type: Number,
+      default: 0, //0:详情 1:新增 2:编辑
+    },
+    columnsPerRow: {
+      type: Number,
+      default: 1,
+      validator: (value) => value > 0 && value <= 4,
+    },
+    columnGap: {
+      type: String,
+      default: "20px",
+    },
+    rowGap: {
+      type: String,
+      default: "16px",
+    },
+    externalComponentMap: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 新增属性：是否显示右侧边栏
+    showSidebar: {
+      type: Boolean,
+      default: false,
+    },
+    formDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    showCloseBtn: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  watch: {
+    formData: {
+      handler(val) {
+        if (val) {
+          this.formPop = JSON.parse(JSON.stringify(val));
+          this.$emit("itemChange", this.formPop);
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    fieldOptions: {
+      handler(val) {
+        this.options = val;
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      formPop: {},
+      options: {},
+      fieldComponents: {},
+    };
+  },
+  computed: {
+    filteredFormColumns() {
+      return this.formColumns.filter((item) => {
+        if (typeof item.hidden === "function") {
+          return !item.hidden(this.formPop);
+        }
+        return !item.hidden;
+      });
+    },
+
+    // 判断是否有右侧内容
+    hasRightContent() {
+      return this.showSidebar || this.$slots["sidebar"];
+    },
+
+    dynamicComponentMap() {
+      const baseMap = {
+        input: {
+          component: "le-input",
+          props: { placeholder: "请输入" },
+        },
+        checkbox: { component: "el-checkbox", props: {} },
+        inputValidate: {
+          component: "le-input-validate",
+          props: { placeholder: "请输入" },
+        },
+        number: {
+          component: "le-input-number",
+          props: {},
+        },
+        radio: { component: "el-radio-group", props: {} },
+        money: {
+          component: "le-input-advanced",
+          props: {},
+        },
+        date: {
+          component: "le-date-picker",
+          props: {
+            format: "yyyy-MM-dd",
+            "value-format": "timestamp",
+            translateDate: true,
+          },
+        },
+        dateAuto: {
+          component: "le-date-picker-auto",
+          props: {
+            format: "yyyy-MM-dd",
+            "value-format": "timestamp",
+          },
+        },
+        select: { component: "le-select", props: {} },
+        smulti: { component: "le-select-multi", props: {} },
+        image: { component: "le-image-container", props: {} },
+        area: {
+          component: "le-area",
+          props: {},
+        },
+      };
+      return { ...baseMap, ...this.externalComponentMap };
+    },
+
+    gridStyle() {
+      return {
+        "grid-template-columns": `repeat(${this.columnsPerRow}, 1fr)`,
+        "column-gap": this.columnGap,
+        "row-gap": this.rowGap,
+      };
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$emit("form-ready", {
+        setFieldValue: this.setFieldValue,
+        getFormData: this.getFormData,
+        initFormData: this.initFormData,
+        getFieldComponent: this.getFieldComponent, // 暴露获取字段组件的方法
+        getAllFieldComponents: this.getAllFieldComponents, // 暴露获取所有字段组件的方法
+      });
+    });
+  },
+  methods: {
+    // 设置字段组件引用
+    setFieldRef(refName, el, propName) {
+      if (el) {
+        // 组件挂载时，el 是组件实例
+        if (refName) {
+          // 如果有自定义 ref 名称，使用它
+          this.fieldComponents[refName] = el;
+          this.$refs[refName] = el; // 同时设置到 $refs 上
+        } else {
+          // 如果没有自定义 ref，使用 prop 名称作为默认 ref
+          const defaultRef = `field_${propName}`;
+          this.fieldComponents[defaultRef] = el;
+          this.$refs[defaultRef] = el;
+        }
+      } else {
+        // 组件销毁时，el 为 null，清除引用
+        if (refName) {
+          delete this.fieldComponents[refName];
+          delete this.$refs[refName];
+        } else {
+          const defaultRef = `field_${propName}`;
+          delete this.fieldComponents[defaultRef];
+          delete this.$refs[defaultRef];
+        }
+      }
+    },
+    // 获取特定字段的组件实例
+    getFieldComponent(refName) {
+      // 先从存储的实例中查找
+      if (this.fieldComponents[refName]) {
+        return this.fieldComponents[refName];
+      }
+
+      // 再从 $refs 中查找
+      if (this.$refs[refName]) {
+        return this.$refs[refName];
+      }
+
+      console.warn(`未找到字段组件: ${refName}`);
+      return null;
+    },
+
+    // 获取所有字段组件实例
+    getAllFieldComponents() {
+      return { ...this.fieldComponents, ...this.$refs };
+    },
+    componentType(type) {
+      if (!this.dynamicComponentMap[type]) {
+        return "le-input";
+      }
+      return this.dynamicComponentMap[type]?.component || "le-input";
+    },
+    getComponentProps(item) {
+      let type = item.type;
+
+      if (!this.dynamicComponentMap[type]) {
+        return {};
+      }
+
+      let props = this.dynamicComponentMap[type]?.props || {};
+      if (type === "image") {
+        let images = [];
+        images.push(this.formPop[item.prop]);
+        props = { ...props, images: images };
+        return props;
+      }
+      return this.dynamicComponentMap[item.type]?.props || {};
+    },
+    mergeProps(defaultProps, customProps) {
+      return { ...defaultProps, ...customProps };
+    },
+    close() {
+      EventBus.$emit("closeDialog");
+      this.$emit("closeDialog");
+    },
+    saveData() {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          this.$emit("saveData", this.formPop, () => {});
+        } else {
+          return false;
+        }
+      });
+    },
+
+    initFormData(additionalData = {}) {
+      this.formPop = {
+        ...this.formPop,
+        ...additionalData,
+      };
+    },
+
+    setFieldValue(field, value) {
+      this.$set(this.formPop, field, value);
+    },
+
+    getFormData() {
+      return { ...this.formPop };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.le-form-container {
+  width: 100%;
+}
+
+.form-layout {
+  display: flex;
+  gap: 20px;
+  transition: all 0.3s ease;
+
+  // 有右侧内容时的布局
+  &.has-right-content {
+    .form-main {
+      width: 80%;
+    }
+    .form-sidebar {
+      width: 20%;
+    }
+  }
+
+  // 无右侧内容时的布局
+  &:not(.has-right-content) {
+    .form-main {
+      width: 100%;
+    }
+  }
+}
+
+.form-main {
+  transition: width 0.3s ease;
+}
+
+.form-sidebar {
+  transition: width 0.3s ease;
+
+  .sidebar-content {
+    border-radius: 6px;
+    padding: 16px;
+    min-height: 200px;
+
+    可以在这里添加右侧内容的统一样式 h4 {
+      margin: 0 0 12px 0;
+      color: #2c3e50;
+      font-size: 14px;
+      font-weight: 600;
+    }
+  }
+}
+
+.form-grid {
+  display: grid;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+.leisure-form-item-class {
+  margin-bottom: 0;
+}
+
+.form-body-footer {
+  margin-top: 10px;
+}
+
+.comContainerClass {
+  display: flex;
+  display: -webkit-flex;
+  line-height: inherit;
+  justify-content: center;
+
+  &.radio-container {
+    align-items: center;
+    min-height: 40px;
+  }
+
+  .compontClass {
+    flex: 1;
+
+    &.radio-group-class {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      line-height: normal;
+    }
+  }
+}
+
+.form-footer {
+  margin-top: 20px;
+  text-align: right;
+}
+
+// 响应式处理
+@media (max-width: 1200px) {
+  .form-layout.has-right-content {
+    flex-direction: column;
+
+    .form-main,
+    .form-sidebar {
+      width: 100%;
+    }
+
+    .form-sidebar {
+      margin-top: 20px;
+      order: 2; // 在移动端让侧边栏显示在下方
+    }
+  }
+}
+
+// 小屏幕优化
+@media (max-width: 768px) {
+  .form-sidebar .sidebar-content {
+    padding: 12px;
+    min-height: 150px;
+  }
+}
+</style>

package/le-login/index.js

@@ -0,0 +1,7 @@
+import LeLogin from "./src/main.vue";
+
+LeLogin.install = function (Vue) {
+  Vue.component(LeLogin.name, LeLogin);
+};
+
+export default LeLogin;