@xfu0401/form-generator 1.0.21 → 1.0.22

package/src/components/formGenerator/configComponents/SpaceConfig.vue

@@ -1,187 +0,0 @@
-<template>
-  <div>
-    <div class="Fg-space">
-      <div class="Fg-margin">
-        <div class="Fg-space-title">
-          <span>外边距</span>
-          <i class="el-icon-delete" @click="clearMargin"></i>
-        </div>
-        <input v-model="formValue.marginLeft" class="Fg-input-left" :disabled="disabled" />
-        <input v-model="formValue.marginTop" class="Fg-input-top" :disabled="disabled" />
-        <input v-model="formValue.marginRight" class="Fg-input-right" :disabled="disabled" />
-        <input v-model="formValue.marginBottom" class="Fg-input-bottom" :disabled="disabled" />
-      </div>
-      <div class="Fg-padding">
-        <div class="Fg-space-title">
-          <span>内边距</span>
-          <i class="el-icon-delete" @click="clearPadding"></i>
-        </div>
-        <input v-model="formValue.paddingLeft" class="Fg-input-left" :disabled="disabled" />
-        <input v-model="formValue.paddingTop" class="Fg-input-top" :disabled="disabled" />
-        <input v-model="formValue.paddingRight" class="Fg-input-right" :disabled="disabled" />
-        <input v-model="formValue.paddingBottom" class="Fg-input-bottom" :disabled="disabled" />
-      </div>
-      <div class="Fg-wh">
-        <!-- <div class="Fg-space-title">
-          <span>宽x高</span>
-          <i class="el-icon-delete" @click="clearWh"></i>
-        </div>-->
-        <input v-model="formValue.width" class="Fg-input-width" :disabled="disabled" />
-        <span class="Fg-input-x">x</span>
-        <input v-model="formValue.height" class="Fg-input-height" :disabled="disabled" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: Object,
-      default: () => {},
-    },
-    // 是否禁用
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      style: {},
-      message: "",
-    };
-  },
-  computed: {
-    formValue: {
-      get() {
-        return this.value;
-      },
-      set(val) {
-        this.$emit("input", val);
-      },
-    },
-  },
-  methods: {
-    clearMargin() {
-      if (this.disabled) return;
-      this.formValue.marginLeft = "";
-      this.formValue.marginTop = "";
-      this.formValue.marginRight = "";
-      this.formValue.marginBottom = "";
-    },
-    clearPadding() {
-      if (this.disabled) return;
-      this.formValue.paddingLeft = "";
-      this.formValue.paddingTop = "";
-      this.formValue.paddingRight = "";
-      this.formValue.paddingBottom = "";
-    },
-    clearWh() {
-      if (this.disabled) return;
-      this.formValue.width = "";
-      this.formValue.height = "";
-    },
-  },
-  // watch: {
-  //   formValue: {
-  //     immediate: true,
-  //     deep: true,
-  //     handler(newValue) {
-
-  //     },
-  //   },
-  // },
-};
-</script>
-
-
-<style lang="scss" scoped>
-.Fg-space {
-  position: relative;
-  height: 180px;
-  font-size: 13px;
-  .Fg-space-title {
-    padding: 5px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    i {
-      cursor: pointer;
-    }
-  }
-  input {
-    background: transparent;
-    border: none;
-    border-bottom: 1px solid #000; /* 添加下划线 */
-    outline: none; /* 移除聚焦时的默认轮廓 */
-    width: 30px;
-    margin: 0 5px;
-    height: 20px;
-    padding: 0;
-    &:hover,
-    &:active {
-      background: #e8e9e3;
-    }
-  }
-  .Fg-input-left,
-  .Fg-input-top,
-  .Fg-input-right,
-  .Fg-input-bottom {
-    position: absolute;
-    z-index: 1;
-  }
-  .Fg-input-left {
-    top: 50%;
-    left: 0;
-    transform: translateY(-10px);
-  }
-  .Fg-input-top {
-    top: 5px;
-    left: 50%;
-    transform: translateX(-20px);
-  }
-  .Fg-input-right {
-    top: 50%;
-    right: 0;
-    transform: translateY(-10px);
-  }
-  .Fg-input-bottom {
-    bottom: 5px;
-    left: 50%;
-    transform: translateX(-20px);
-  }
-}
-.Fg-margin {
-  background-color: #f2cea5;
-  position: absolute;
-  // inset: 0; // google 64 版本不兼容
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-}
-.Fg-padding {
-  background-color: #c6cf92;
-  position: absolute;
-  // inset: 30px 40px; // google 64 版本不兼容
-  left: 40px;
-  top: 30px;
-  bottom: 30px;
-  right: 40px;
-}
-.Fg-wh {
-  background-color: #94b5c0;
-  position: absolute;
-  // inset: 60px 80px; // google 64 版本不兼容
-  left: 80px;
-  top: 60px;
-  bottom: 60px;
-  right: 80px;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>

package/src/components/formGenerator/configComponents/StyleConfig.vue

@@ -1,258 +0,0 @@
-<template>
-  <div class="FG-style">
-    <!-- 全局样式选择框 -->
-    <el-form-item label="className">
-      <el-select v-model="style.className" multiple placeholder="请选择">
-        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name"></el-option>
-      </el-select>
-    </el-form-item>
-    <SpaceConfig v-model="style" style="margin-bottom:22px" :disabled="disabled" />
-    <el-form-item label="颜色">
-      <InputColor v-model="style.color" />
-    </el-form-item>
-    <el-form-item label="背景颜色">
-      <InputColor v-model="style.backgroundColor" />
-    </el-form-item>
-    <el-form-item label="透明度">
-      <el-slider v-model="style.opacity" :min="0" :max="1" :step="0.1"></el-slider>
-    </el-form-item>
-    <!-- <el-form-item label="缩放" style="margin-bottom:0">
-      <el-slider v-model="style.scale" :min="0" :max="2" :step="0.1"></el-slider>
-    </el-form-item>-->
-    <el-form size="mini" label-position="left" label-width="100px" :disabled="disabled">
-      <el-collapse v-model="activeNames" style="margin-bottom:22px">
-        <el-collapse-item title="边框" name="1" v-if="style.border!==undefined">
-          <div slot="title" class="SC-collapse-title">
-            <span>边框</span>
-            <span :style="style.border">样式预览</span>
-          </div>
-          <el-form-item label="边框样式" size="mini">
-            <el-select v-model="style.border.borderStyle" :style="{ width: '100%' }" clearable>
-              <el-option
-                v-for="item in selectOptions['borderStyle']"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="边框宽度">
-            <InputNumber v-model="style.border.borderWidth" unit="px" min="0" />
-          </el-form-item>
-          <el-form-item label="边框颜色">
-            <InputColor v-model="style.border.borderColor" />
-          </el-form-item>
-          <el-form-item label="圆角">
-            <InputNumber v-model="style.border.borderRadius" :units="units" min="0" />
-          </el-form-item>
-        </el-collapse-item>
-        <el-collapse-item title="字体" name="3" v-if="style.font!==undefined">
-          <div slot="title" class="SC-collapse-title">
-            <span>字体</span>
-            <span :style="style.font">样式预览</span>
-          </div>
-          <el-form-item label="文字大小">
-            <InputNumber v-model="style.font.fontSize" :units="units" />
-          </el-form-item>
-
-          <el-form-item label="文字粗细">
-            <el-select v-model="style.font.fontWeight" :style="{ width: '100%' }">
-              <el-option label="正常" value="normal" />
-              <el-option label="粗体" value="bold" />
-              <el-option label="特粗体" value="bolder" />
-              <el-option label="细体" value="lighter" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="对齐方式">
-            <el-select v-model="style.font.textAlign" :style="{ width: '100%' }" clearable>
-              <el-option
-                v-for="item in selectOptions['textAlign']"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="文字间距">
-            <InputNumber v-model="style.font.letterSpacing" :units="units" />
-          </el-form-item>
-          <el-form-item label="文字行高">
-            <!-- <el-input-number
-              v-model="style.font.lineHeight"
-              :precision="1"
-              :step="0.5"
-              controls-position="right"
-              :min="1"
-              :max="10"
-              :style="{ width: '100%' }"
-            ></el-input-number>-->
-            <InputNumber v-model="style.font.lineHeight" :units="units" />
-          </el-form-item>
-        </el-collapse-item>
-        <el-collapse-item title="修饰" name="4" v-if="style.textDecoration!==undefined">
-          <div slot="title" class="SC-collapse-title">
-            <span>修饰</span>
-            <span :style="style.textDecoration">样式预览</span>
-          </div>
-          <el-form-item label="线条类型">
-            <el-select
-              v-model="style.textDecoration.textDecorationLine"
-              :style="{ width: '100%' }"
-              clearable
-            >
-              <el-option
-                v-for="item in selectOptions['textDecorationLine']"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="线条样式">
-            <el-select
-              v-model="style.textDecoration.textDecorationStyle"
-              :style="{ width: '100%' }"
-              clearable
-            >
-              <el-option
-                v-for="item in selectOptions['textDecorationStyle']"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="线条颜色">
-            <InputColor v-model="style.textDecoration.textDecorationColor" />
-          </el-form-item>
-        </el-collapse-item>
-        <el-collapse-item title="阴影" name="5" v-if="style.boxShadow!==undefined">
-          <div slot="title" class="SC-collapse-title">
-            <span>阴影</span>
-            <!-- <el-input v-model="style.boxShadow"></el-input> -->
-            <span :style="{boxShadow:style.boxShadow}">样式预览</span>
-          </div>
-          <ShadowConfig v-model="style.boxShadow" />
-        </el-collapse-item>
-      </el-collapse>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import SpaceConfig from "./SpaceConfig.vue";
-import ShadowConfig from "./ShadowConfig";
-import InputNumber from "@/components/huComponents/InputNumber";
-import InputColor from "@/components/huComponents/InputColor";
-export default {
-  components: {
-    SpaceConfig,
-    ShadowConfig,
-    InputNumber,
-    InputColor,
-  },
-  props: {
-    value: {
-      type: Object,
-      default: () => {},
-    },
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    // 是否禁用
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      fontSize: "",
-      letterSpacing: 0,
-      activeNames: [],
-    };
-  },
-  mounted() {},
-  computed: {
-    units() {
-      return ["px", "em", "rem", "%"];
-    },
-    selectOptions() {
-      return {
-        borderStyle: [
-          { value: "solid", label: "实线" },
-          { value: "dashed", label: "虚线" },
-          { value: "dotted", label: "点状虚线" },
-          { value: "double", label: "双实线" },
-          { value: "groove", label: "3D 凹槽" },
-          { value: "ridge", label: "3D 垄状" },
-          { value: "inset", label: "3D 嵌入" },
-          { value: "outset", label: "3D 突出" },
-        ],
-        textAlign: [
-          { label: "左对齐", value: "left" },
-          { label: "居中对齐", value: "center" },
-          { label: "右对齐", value: "right" },
-          { label: "两端对齐", value: "justify" },
-        ],
-        textDecorationLine: [
-          { label: "下划线", value: "underline" },
-          { label: "上划线", value: "overline" },
-          { label: "删除线", value: "line-through" },
-        ],
-        textDecorationStyle: [
-          { label: "单实线", value: "solid" },
-          { label: "双实线", value: "double" },
-          { label: "点虚线", value: "dotted" },
-          { label: "虚线", value: "dashed" },
-          { label: "波浪线", value: "wavy" },
-        ],
-      };
-    },
-    style: {
-      get() {
-        return this.value;
-      },
-      set(val) {
-        this.$emit("input", val);
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-.FG-style {
-  .el-collapse-item__header,
-  .el-collapse-item__wrap,
-  .el-collapse {
-    border: none;
-  }
-  .el-collapse-item__content {
-    padding: 16px;
-    background-color: #f5f5f5;
-    border-radius: 5px;
-
-    .el-form-item:last-child {
-      margin-bottom: 0;
-    }
-  }
-  .SC-collapse-title {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-right: 10px;
-    span:nth-child(2) {
-      // background: rebeccapurple;
-      width: 162px;
-      box-sizing: border-box;
-      color: #666666;
-      text-align: center;
-      font-size: 14px;
-      line-height: 1;
-    }
-  }
-}
-</style>

package/src/components/formGenerator/configComponents/TableConfig.vue

@@ -1,75 +0,0 @@
-<template>
-  <!-- 边框设置 -->
-  <div class="FG-border">
-    <el-form-item label="边框颜色" v-if="active.borderColor !== undefined">
-      <el-color-picker v-model="active.borderColor" />
-    </el-form-item>
-    <el-form-item label="边框宽度" v-if="active.borderWidth !== undefined">
-      <el-input-number
-        v-model="active.borderWidth"
-        controls-position="right"
-        :min="0"
-        :max="10"
-        :style="{ width: '100%' }"
-      ></el-input-number>
-    </el-form-item>
-    <!-- <el-form-item label="cellspacing" v-if="active.cellspacing !== undefined">
-      <el-input type="number" v-model.number="active.cellspacing" />
-    </el-form-item>-->
-    <el-form-item label="内边距" v-if="active.cellpadding !== undefined">
-      <el-input type="number" v-model.number="active.cellpadding" />
-    </el-form-item>
-    <!-- <el-form-item label="对齐方式" v-if="active.tableAlign !== undefined">
-      <el-select v-model="active.tableAlign" :style="{ width: '100%' }" clearable>
-        <el-option label="左对齐" value="left" />
-        <el-option label="居中" value="center" />
-        <el-option label="右对齐" value="right" />
-      </el-select>
-    </el-form-item>-->
-  </div>
-</template>
-
-<script>
-import { deepClone } from "../utils";
-export default {
-  props: {
-    value: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      active: {}
-    };
-  },
-  mounted() {},
-  computed: {},
-
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        if (JSON.stringify(newValue) !== JSON.stringify(this.active)) {
-          this.active = deepClone(newValue);
-        }
-      }
-    },
-    active: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        if (JSON.stringify(newValue) !== JSON.stringify(this.value)) {
-          this.$emit("input", newValue);
-        }
-      }
-    }
-  },
-
-  methods: {}
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

package/src/components/formGenerator/configComponents/TableHead.vue

@@ -1,141 +0,0 @@
-<template>
-  <el-dialog
-    title="列表管理"
-    width="1010px"
-    v-if="dialogVisible"
-    :visible.sync="dialogVisible"
-    :close-on-click-modal="false"
-    modal-append-to-body
-    append-to-body
-    top="8vh"
-    class="Fg-dialog2"
-    destroy-on-close
-  >
-    <el-table class="Fg-table-head" :data="data" size="small" border stripe style="width: 100%">
-      <el-table-column type="index" width="50"></el-table-column>
-      <el-table-column prop="prop" label="字段名称" width="120" align="center">
-        <template slot-scope="scope">
-          <el-input v-model="scope.row.prop" maxlength="50" clearable></el-input>
-        </template>
-      </el-table-column>
-      <el-table-column prop="label" label="标题" width="120" align="center">
-        <template slot-scope="scope">
-          <el-input v-model="scope.row.label" maxlength="50" clearable></el-input>
-        </template>
-      </el-table-column>
-      <el-table-column prop="width" label="宽度" width="100" align="center">
-        <template slot-scope="scope">
-          <el-input type="number" v-model.number="scope.row.width"></el-input>
-        </template>
-      </el-table-column>
-      <el-table-column prop="align" label="对齐方式" width="100" align="center">
-        <template slot-scope="scope">
-          <el-select v-model="scope.row.align" :style="{ width: '100%' }">
-            <el-option label="左对齐" value="left" />
-            <el-option label="居中" value="center" />
-            <el-option label="右对齐" value="right" />
-          </el-select>
-        </template>
-      </el-table-column>
-      <el-table-column prop="render" label="渲染" width="100" align="center">
-        <template slot-scope="scope">
-          <el-select v-model="scope.row.render" :style="{ width: '100%' }">
-            <el-option label="文本" value="text" />
-            <el-option label="日期" value="date" />
-            <el-option label="日期时间" value="datetime" />
-            <el-option label="标签" value="tag" />
-            <el-option label="图片" value="img" />
-            <!-- <el-option label="按钮" value="button" /> 移动端不支持 -->
-          </el-select>
-        </template>
-      </el-table-column>
-      <el-table-column prop="hide" label="隐藏" width="80" align="center">
-        <template slot-scope="scope">
-          <el-switch v-model="scope.row.hide"></el-switch>
-        </template>
-      </el-table-column>
-      <el-table-column prop="total" label="是否合计" width="80" align="center">
-        <template slot-scope="scope">
-          <el-switch v-model="scope.row.total"></el-switch>
-        </template>
-      </el-table-column>
-      <el-table-column prop="money" label="是否金额" width="80" align="center">
-        <template slot-scope="scope">
-          <el-switch v-model="scope.row.money" @change="changeMoney(scope.row, $event)"></el-switch>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" fixed="right" width="120">
-        <template slot-scope="scope">
-          <el-button type="text" @click="handleAdd(scope.$index+1)">添加</el-button>
-          <el-button type="text" @click="handleDelete(scope)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-button icon="el-icon-circle-plus-outline" type="text" @click="handleAdd(data.length)">添加</el-button>
-    <div slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">取 消</el-button>
-      <el-button type="primary" @click="confirm">确 定</el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import { deepClone } from "../utils";
-export default {
-  name: "TableDialog",
-  props: {
-    value: {},
-  },
-  data() {
-    return {
-      dialogVisible: false,
-      data: this.value,
-    };
-  },
-  methods: {
-    open(data) {
-      this.data = deepClone(data || this.value);
-      this.dialogVisible = true;
-    },
-    confirm() {
-      this.$emit("input", this.data);
-      this.$emit("confirm", this.data);
-      this.dialogVisible = false;
-    },
-    handleDelete(scope) {
-      this.data.splice(scope?.$index, 1);
-    },
-    handleAdd(index) {
-      this.data.splice(index, 0, {
-        prop: "",
-        label: "",
-        width: "",
-        align: "center",
-        render: "text",
-        hide: false,
-        total: false,
-        money: false
-      });
-    },
-    changeMoney(row, value) {
-      if (value) {
-        row.align = 'right'
-      } else {
-        row.align = 'center'
-      }
-    }
-  },
-};
-</script>
-
-<style lang="scss" >
-.Fg-table-head {
-  .el-input__inner {
-    height: 30px;
-    line-height: 30px;
-  }
-  .el-input__icon {
-    line-height: 30px;
-  }
-}
-</style>

package/src/components/formGenerator/formComponents/pcComponents/assistComs/formButton.vue

@@ -1,25 +0,0 @@
-<template>
-  <el-button
-    v-if="!$attrs.onlyShow"
-    v-bind="$attrs"
-    :style="newStyle"
-    @click="onClick"
-  >{{ $attrs.value }}</el-button>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "form-button",
-  props: {
-    __slot__: {
-      type: Object,
-      default: () => {},
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-</style>