leisure-core 0.7.7 → 0.7.8

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

@@ -1,474 +0,0 @@
-<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

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