@xfu0401/form-generator 1.0.21 → 1.0.22

package/src/components/huComponents/FGIconsDialog.vue

@@ -1,124 +0,0 @@
-<template>
-  <el-dialog
-    class="icon-dialog"
-    :visible.sync="visible"
-    v-if="visible"
-    width="980px"
-    top="8vh"
-    append-to-body
-  >
-    <div slot="title">
-      选择图标
-      <el-input
-        v-model="input"
-        size="mini"
-        :style="{ width: '260px' }"
-        placeholder="请输入图标名称"
-        prefix-icon="el-icon-search"
-        clearable
-        @input="handleSearch"
-      />
-    </div>
-    <el-row class="icon-ul">
-      <el-col
-        :span="4"
-        v-for="icon in iconList"
-        :key="icon"
-        :class="active === icon ? 'active-item' : ''"
-      >
-        <div @click="onSelect(icon)">
-          <i :class="icon"></i>
-          {{ icon }}
-        </div>
-      </el-col>
-    </el-row>
-  </el-dialog>
-</template>
-<script>
-import { iconFontList } from "@/utils/iconData";
-
-export default {
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    value: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      visible: false,
-      iconList: iconFontList,
-      active: null,
-      input: "",
-    };
-  },
-
-  methods: {
-    onOpen() {
-      this.active = this.value;
-      this.iconList = iconFontList;
-      this.visible = true;
-    },
-    onSelect(icon) {
-      this.active = icon;
-      this.$emit("select", icon);
-      this.$emit("update", icon);
-      this.visible = false;
-    },
-    handleSearch() {
-      this.iconList = iconFontList.filter(
-        (icon) => icon.indexOf(this.input) > -1
-      );
-    },
-  },
-};
-</script>
-<style lang="scss">
-@import "../formGenerator/styles/generator.scss";
-
-.icon-dialog {
-  overflow: hidden;
-  .icon-ul {
-    .el-col {
-      > div {
-        cursor: pointer;
-        height: 108px;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        i {
-          font-size: 28px;
-          margin-bottom: 10px;
-        }
-      }
-
-      &:hover {
-        background: #f2f2f2;
-      }
-      &.active-item {
-        background: #e1f3fb;
-        color: $themeColor;
-      }
-      > i {
-        font-size: 30px;
-        line-height: 50px;
-      }
-    }
-  }
-  .el-dialog__header {
-    padding-top: 14px;
-  }
-  .el-dialog__body {
-    height: 80vh;
-    margin: 0 20px 20px 20px;
-    padding: 0;
-    overflow: auto;
-  }
-}
-</style>

package/src/components/huComponents/FGNameImg.vue

@@ -1,147 +0,0 @@
-<template>
-  <!-- 用户头像&姓名&点击头像访问豆豆 -->
-  <div :class="layout === 'vertical' ? 'hu-nameImg--vertical' : 'hu-name-img'">
-    <van-image
-      class="hu-name-img--image"
-      :round="round"
-      :width="imageWidth"
-      :height="imageWidth"
-      :src="portraitURL"
-    >
-      <template #error>
-        <svg-icon :iconClass="defaultSvg" style="height: 100%; width: 100%" />
-      </template>
-    </van-image>
-    <span
-      class="hu-nameImg-text"
-      :style="{
-        width:
-          layout === 'vertical'
-            ? `${imageWidth}px`
-            : `calc(100% - 12px - ${imageWidth}px)`,
-      }"
-    >
-      {{ name }}
-      <slot name="chat">
-        <van-icon name="chat-o" v-if="isChat" style="font-size: 18px" />
-      </slot>
-    </span>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "FGNameImg",
-  components: {},
-  props: {
-    // 默认头像
-    defaultImg: {
-      type: String,
-      default: "",
-    },
-    // 默认svg
-    defaultSvg: {
-      type: String,
-      default: "default-user",
-    },
-    // 显示名称
-    name: {
-      type: String,
-      default: "名称",
-    },
-    // 是否可以点击跳转到豆豆进行通信
-    isChat: {
-      type: Boolean,
-      default: false,
-    },
-
-    // 头像
-    portraitURL: {
-      type: String,
-      default: "",
-    },
-    // 头像形状是否为圆形
-    round: {
-      type: Boolean,
-      default: false,
-    },
-    // 用来进行密信聊天的用户id
-    id: {
-      type: String,
-      default: "",
-    },
-    // 图片宽度
-    imageWidth: {
-      type: String,
-      default: "36",
-    },
-    // 布局，默认水平布局horizontal，可填垂直布局：vertical
-    layout: {
-      type: String,
-      default: "horizontal",
-    },
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    // 点击进行对话
-    chat() {
-      // if (this.isChat) {
-      //   Dialog.confirm({
-      //     title: "提示",
-      //     message: "即将前往密信聊天，是否继续？",
-      //   })
-      //     .then(() => {
-      //       openChat(this.id);
-      //       // on confirm
-      //     })
-      //     .catch(() => {
-      //       // on cancel
-      //     });
-      // }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scope>
-.hu-name-img {
-  display: flex;
-  align-items: center;
-  vertical-align: middle;
-  font-size: 14px;
-  color: #2b2b2b;
-  .van-image {
-    margin-right: 12px;
-  }
-}
-.hu-name-img--image {
-  .van-image__error {
-    background-color: transparent;
-  }
-}
-.hu-nameImg-text {
-  line-height: 20px;
-  height: 20px;
-}
-.hu-nameImg--vertical {
-  flex: 1;
-  margin-right: 10px;
-  display: flex;
-  flex-direction: column;
-  align-content: center;
-  justify-content: center;
-  align-items: center;
-  .hu-nameImg-text {
-    display: inline-block;
-    text-align: center;
-    margin-top: 2px;
-    font-size: 11px;
-    color: #5f5f5f;
-    overflow: hidden; //溢出隐藏
-    white-space: nowrap; //禁止换行
-    text-overflow: ellipsis; //使用省略号表示文本已被截断
-  }
-}
-</style>

package/src/components/huComponents/FGOptions.vue

@@ -1,118 +0,0 @@
-<template>
-  <div>
-    <el-divider>{{ title }}</el-divider>
-    <draggable
-      :list="columns"
-      :animation="340"
-      group="selectItem"
-      handle=".option-drag"
-      @end="handleEmit"
-    >
-      <div v-for="(item, index) in columns" :key="index" class="select-item">
-        <div class="select-line-icon option-drag">
-          <i class="el-icon-s-operation" />
-        </div>
-        <el-input v-model="item.label" :placeholder="title + '名'" size="small" @input="handleEmit" />
-        <el-input
-          :placeholder="title + '值'"
-          size="small"
-          :value="item.value"
-          @input="setOptionValue(item, $event)"
-        />
-        <div class="close-btn select-line-icon" @click="handleDelete(index)">
-          <i class="el-icon-remove-outline" />
-        </div>
-      </div>
-    </draggable>
-    <div style="margin-left: 20px">
-      <el-button icon="el-icon-circle-plus-outline" type="text" @click="addSelectItem">添加{{ title }}</el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import draggable from "vuedraggable";
-
-export default {
-  components: {
-    draggable,
-  },
-  props: {
-    options: {
-      type: Array,
-      default: () => [],
-    },
-    title: {
-      type: String,
-      default: "选项",
-    },
-  },
-  data() {
-    return {
-      columns: this.options,
-    };
-  },
-  watch: {
-    options(newValue, oldValue) {
-      this.columns = newValue;
-    },
-  },
-
-  methods: {
-    addSelectItem() {
-      this.columns.push({
-        label: "",
-        value: "-1",
-        allowDrop: true,
-        children: [],
-      });
-      this.handleEmit();
-    },
-    setOptionValue(item, val) {
-      console.log("wwww");
-      item.value = val + "";
-      this.handleEmit();
-    },
-    handleDelete(index) {
-      this.columns.splice(index, 1);
-      this.handleEmit();
-    },
-    handleEmit() {
-      this.$emit("update:options", this.columns);
-      this.$emit("change", this.columns);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../formGenerator/styles/generator.scss";
-
-.select-item {
-  display: flex;
-  border: 1px dashed #fff;
-  box-sizing: border-box;
-  & .close-btn {
-    cursor: pointer;
-    color: #f56c6c;
-  }
-  & .el-input + .el-input {
-    margin-left: 4px;
-  }
-}
-.select-item + .select-item {
-  margin-top: 4px;
-}
-.select-item.sortable-chosen {
-  border: 1px dashed $themeColor;
-}
-.select-line-icon {
-  line-height: 32px;
-  font-size: 22px;
-  padding: 0 4px;
-  color: #777;
-}
-.option-drag {
-  cursor: move;
-}
-</style>

package/src/components/huComponents/FGSelect.vue

@@ -1,46 +0,0 @@
-<template>
-  <el-select v-model="formValue" :multiple="multiple" v-bind="$attrs" style="width:100%">
-    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
-  </el-select>
-</template>
-
-<script>
-export default {
-  name: "FGSelect",
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    options: {
-      type: Array,
-      default: () => [],
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    formValue: {
-      get() {
-        if (!this.multiple) return this.value;
-        if (this.value) return this.value.split(",");
-        return [];
-      },
-      set(val) {
-        const value = this.multiple ? (val ? val?.join(",") : "") : val;
-        console.log("value", value);
-        this.$emit("update", value);
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

package/src/components/huComponents/FGTreeNode.vue

@@ -1,103 +0,0 @@
-<template>
-  <!-- 可以手动添加数据的级联树 -->
-  <div>
-    <el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false">
-      <span class="hu-tree-node" slot-scope="{ node, data }">
-        <span>{{ node.label }}</span>
-        <span>
-          <el-button type="text" size="mini" @click="() => append(data)" icon="el-icon-plus" />
-          <el-button
-            type="text"
-            size="mini"
-            @click="() => remove(node, data)"
-            icon="el-icon-delete"
-          />
-        </span>
-      </span>
-    </el-tree>
-    <div>
-      <el-button icon="el-icon-circle-plus-outline" type="text" @click="addTreeItem">添加父级</el-button>
-    </div>
-    <TreeNodeDialog ref="TreeNodeVisible" title="添加选项" @commit="appendNode" />
-  </div>
-</template>
-
-<script>
-import TreeNodeDialog from "./FGTreeNodeDialog.vue";
-
-export default {
-  components: {
-    TreeNodeDialog,
-  },
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    value: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      currentNode: null, // 当前节点
-      data: JSON.parse(JSON.stringify(this.value)),
-    };
-  },
-
-  methods: {
-    append(data) {
-      this.currentNode = data;
-      this.addTreeItem();
-    },
-
-    remove(node, data) {
-      const parent = node.parent;
-      const children = parent.data.children || parent.data;
-      const index = children.findIndex((d) => d.id === data.id);
-      children.splice(index, 1);
-      this.$emit("update", this.data);
-    },
-    addTreeItem() {
-      this.$refs.TreeNodeVisible.open();
-    },
-    // 添加子节点
-    appendNode(node) {
-      if (this.currentNode) {
-        if (!this.currentNode.children) {
-          this.$set(this.currentNode, "children", []);
-        }
-        this.currentNode.children.push(node);
-        this.currentNode = null;
-      } else {
-        // 在根节点上添加节点
-        this.data.push(node);
-      }
-      this.$emit("update", this.data);
-      this.$emit("change", this.data);
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-.hu-tree-node {
-  width: 100%;
-  font-size: 14px;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-right: 8px;
-  .node-operation {
-    float: right;
-  }
-  i[class*="el-icon"] + i[class*="el-icon"] {
-    margin-left: 6px;
-  }
-  .el-icon-delete {
-    color: #157a0c;
-  }
-}
-</style>

package/src/components/huComponents/FGTreeNodeDialog.vue

@@ -1,89 +0,0 @@
-<template>
-  <FGDialog ref="FGDialog" height="auto" @confirm="handelConfirm">
-    <el-row :gutter="0">
-      <el-form ref="elForm" :model="formData" :rules="rules" label-width="100px">
-        <el-col :span="24">
-          <el-form-item label="选项名" prop="label">
-            <el-input v-model="formData.label" placeholder="请输入选项名" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
-          <el-form-item label="选项值" prop="value">
-            <el-input v-model="formData.value" placeholder="请输入选项值" clearable>
-              <el-select slot="append" v-model="dataType" :style="{width: '100px'}">
-                <el-option
-                  v-for="(item, index) in dataTypeOptions"
-                  :key="index"
-                  :label="item.label"
-                  :value="item.value"
-                  :disabled="item.disabled"
-                />
-              </el-select>
-            </el-input>
-          </el-form-item>
-        </el-col>
-      </el-form>
-    </el-row>
-  </FGDialog>
-</template>
-<script>
-import { isNumberStr } from "@/components/formGenerator/utils/index";
-export default {
-  components: {},
-  inheritAttrs: false,
-  props: [],
-  data() {
-    return {
-      formData: {
-        label: undefined,
-        value: undefined,
-      },
-      rules: {
-        label: [{ required: true, message: "请输入选项名", trigger: "blur" }],
-        value: [{ required: true, message: "请输入选项值", trigger: "blur" }],
-      },
-      dataType: "string",
-      dataTypeOptions: [
-        { label: "字符串", value: "string" },
-        { label: "数字", value: "number" },
-      ],
-    };
-  },
-  computed: {},
-  watch: {
-    // eslint-disable-next-line func-names
-    "formData.value": function (val) {
-      this.dataType = isNumberStr(val) ? "number" : "string";
-    },
-    // id(val) {
-    //   // saveTreeNodeId(val);
-    // }
-  },
-  methods: {
-    open() {
-      this.formData = {
-        label: undefined,
-        value: undefined,
-      };
-      this.$refs.FGDialog.open();
-    },
-    close() {
-      this.$refs.FGDialog.close();
-    },
-    handelConfirm() {
-      this.$refs.elForm.validate((valid) => {
-        if (!valid) return;
-        if (this.dataType === "number") {
-          this.formData.value = parseFloat(this.formData.value);
-        }
-        this.formData.id = Date.now().toString();
-        this.$emit("commit", this.formData);
-        this.close();
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-</style>