@xfu0401/form-generator 1.0.21 → 1.0.22

package/src/components/huComponents/FGBreadNav.vue

@@ -1,86 +0,0 @@
-<template>
-  <!-- 面包屑导航栏 -->
-  <div class="hu-bread-nav">
-    <i :class="icon" v-if="icon"></i>
-    <div :class="{ 'hu-bread-cont': true, 'hu-bread-cont-border': border }">
-      <div v-for="(item, index) in nav" :key="item[props.id]">
-        <i v-if="index != 0" class="el-icon-arrow-right" />
-        <span style="cursor: pointer" @click="onTitle(item, index)">
-          {{
-          item[props.text]
-          }}
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "FGBreadNav",
-  props: {
-    // 面包屑导航栏
-    /**
-     * {
-     *  text:'',
-     *  id:''
-     * }
-     */
-    nav: {
-      type: Array,
-      default: () => {},
-    },
-    // 是否存在底边框
-    border: {
-      type: Boolean,
-      default: false,
-    },
-    props: {
-      type: Object,
-      default: () => {
-        return {
-          text: "text",
-          id: "id",
-        };
-      },
-    },
-    icon: {
-      type: String,
-      default: "",
-    },
-  },
-  methods: {
-    onTitle(item, index) {
-      let nav = this.nav || [];
-      nav = nav.splice(0, index + 1);
-      this.$emit("update:nav", nav);
-      this.$emit("onNav", index, item[this.props.id], item);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.hu-bread-cont {
-  display: flex;
-  padding: 10px 20px;
-  padding-left: 0;
-  font-size: 12px;
-  overflow-x: auto;
-  white-space: nowrap;
-}
-.hu-bread-cont-border {
-  border: 1px solid #ebedf0;
-}
-.hu-bread-nav {
-  position: relative;
-  padding: 0 16px;
-  padding-left: 36px;
-  height: 36px;
-  > i {
-    position: absolute;
-    left: 16px;
-    line-height: 36px;
-  }
-}
-</style>

package/src/components/huComponents/FGCheckCell.vue

@@ -1,107 +0,0 @@
-<template>
-  <!-- 带多选框的单元格 -->
-  <van-cell @click="clickCell" :is-link="isLink" :center="center">
-    <template #title>
-      <slot name="title">{{ $attrs.title }}</slot>
-    </template>
-    <template v-slot:[dynamicslotname] v-if="position">
-      <van-checkbox
-        :class="{ 'hu-checkCell--square': shape == 'square' }"
-        :style="changStyle"
-        v-bind="$attrs"
-        :shape="shape"
-        v-model="checked"
-      />
-    </template>
-    <template #default>
-      <slot name="value"></slot>
-    </template>
-  </van-cell>
-</template>
-
-<script>
-export default {
-  name: "FGCheckCell",
-  model: {
-    props: "value",
-    event: "update",
-  },
-  props: {
-    // 多选框值
-    value: {
-      type: Boolean,
-      default: false,
-    },
-    // 多选框位置 left-左边 right-右边
-    position: {
-      type: String,
-      default: "left",
-    },
-    // 形状，可选值 round（圆形）
-    shape: {
-      type: String,
-      default: "square",
-    },
-    // 右箭头
-    isLink: {
-      type: Boolean,
-      default: false,
-    },
-    center: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    // 插槽名称
-    dynamicslotname() {
-      return {
-        left: "icon",
-        right: "right-icon",
-      }[this.position];
-    },
-    // 选框样式
-    changStyle() {
-      return {
-        left: { marginRight: "13px" },
-        right: { marginLeft: "13px" },
-      }[this.position];
-    },
-  },
-  data() {
-    return {
-      checked: false,
-    };
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        this.checked = newValue;
-      },
-    },
-  },
-  methods: {
-    // 点击单元格
-    clickCell() {
-      if (this.$attrs.disabled) {
-        return;
-      }
-      this.checked = !this.checked;
-      this.$emit("update", this.checked);
-      this.$emit("clickCell", this.checked);
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-.Fg-phone {
-  .hu-checkCell--square {
-    .van-checkbox__icon .van-icon {
-      border-radius: 3px;
-    }
-  }
-}
-</style>

package/src/components/huComponents/FGCheckList.vue

@@ -1,318 +0,0 @@
-<template>
-  <div class="index-bar-list">
-    <!-- 全选按钮 -->
-    <FGCheckCell
-      v-if="type == 'checkbox' && hasAllCheck && list.length"
-      :title="checkAll ? '取消全选' : '全选'"
-      :value.sync="checkAll"
-      :shape="shape"
-      :position="position"
-      @clickCell="toggleAll(checkAll)"
-    />
-    <!-- 人员列表（图像+姓名 + 复选框） 组件 -->
-    <van-checkbox-group ref="checkboxGroup" v-model="checked" @change="changeList">
-      <van-cell-group inset>
-        <!-- [1] 用于在非 索引列表的情况下，需要将当前列表循环渲染一次 -->
-        <div v-for="indexItem in indexBar ? indexList : [1]" :key="indexItem.index">
-          <van-index-anchor :key="indexItem.index" v-if="indexBar">
-            {{
-            indexItem.title
-            }}
-          </van-index-anchor>
-          <template v-for="item in list">
-            <van-cell
-              :class="['hu_cell', item.disabled ? 'hu_cell--disabled' : '']"
-              v-if="item[props.index] === indexItem.index || !indexBar"
-              clickable
-              :key="item[props.id]"
-              @click.stop="toggle(item)"
-            >
-              <template v-slot:[dynamicslotname]>
-                <van-checkbox
-                  :class="{ 'hu-checkCell--square': shape == 'square' }"
-                  :name="item[props.id]"
-                  :shape="shape"
-                  :ref="'checkboxes' + item[props.id]"
-                  :style="changStyle"
-                  :disabled="item.disabled"
-                  @click.stop
-                >
-                  <template #icon="props" v-if="svgIcon">
-                    <svg-icon :iconClass="props.checked ? svgIcon : ''" class="hu-close"></svg-icon>
-                  </template>
-                </van-checkbox>
-              </template>
-              <!-- 用户头像+名称 -->
-              <FGNameImg
-                class="hu-userListGroup-HuNameImg"
-                :name="item[props.name]"
-                :portraitURL="item[props.portraitURL] || defaultImage"
-              />
-            </van-cell>
-          </template>
-        </div>
-        <!-- </van-index-bar> -->
-      </van-cell-group>
-    </van-checkbox-group>
-  </div>
-</template>
-
-<script>
-import FGNameImg from "./FGNameImg";
-import FGCheckCell from "./FGCheckCell";
-export default {
-  name: "FGCheckList",
-  components: {
-    FGNameImg,
-    FGCheckCell,
-  },
-  props: {
-    list: {
-      // 人员列表
-      /**
-       * {
-       *    index:'索引值'，当列表中某些列表项的索引值相同时，将该组列表项排在同一对应索引文字下
-       *    title:'', 索引值展示的头部文字
-       *    name:'名称'
-       *    id:'用户ID',
-       *    portraitURL:'头像url',
-       * }
-       */
-      type: Array,
-      default: () => [],
-    },
-    // 配置选项名称，将list 中的属性名称修改为自定义字段，如
-    /**
-     *  {
-     *    name: "title",
-     *     id: "userID",
-     *   }
-     *   即代表将list中的列表属性名称为 name 和 id 的分别改为 title 和 userID
-     */
-    props: {
-      type: Object,
-      default: () => {
-        return {
-          index: "index",
-          title: "title",
-          name: "name",
-          id: "id",
-          portraitURL: "portraitURL",
-        };
-      },
-    },
-
-    // 是否显示索引值，若需要显示索引值，则列表中必须包括索引值属性 index
-    indexBar: {
-      type: Boolean,
-      default: false,
-    },
-
-    checkeds: {
-      // 选中的列表
-      type: Array,
-      default: () => [],
-    },
-    // 选择框类型，默认为多选'checkbox'，可改为单选：'radio'
-    type: {
-      type: String,
-      default: "checkbox",
-    },
-    position: {
-      // left-多选框在左侧，right-多选框在右侧
-      type: String,
-      default: "left",
-    },
-    // 选框选中图标
-    svgIcon: {
-      type: String,
-      default: "",
-    },
-    // 形状，可选值 round（圆形）
-    shape: {
-      type: String,
-      default: "square",
-    },
-    // 默认头像
-    defaultImage: {
-      type: String,
-      default: "",
-    },
-    // 是否跳过禁用
-    skipDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否开启全选，默认开启
-    hasAllCheck: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  data() {
-    return {
-      checked: [],
-      checkAll: false, // 全选
-    };
-  },
-
-  computed: {
-    // 获取所有首字母集合
-    indexList() {
-      let arr = [];
-      // 关闭索引值显示
-      if (!this.indexBar) {
-        return arr;
-      }
-      // 获取所有的索引值，并去重
-      let ids = [...new Set(this.getKeyArray(this.props.index, this.list))];
-      ids.forEach((id) => {
-        // 根据索引值获取对应的索引名称并显示
-        arr.push({
-          index: id, // 索引值
-          title: this.list.find((it) => it[this.props.index] == id)[
-            this.props.title
-          ], // 对应索引值显示的文字
-        });
-      });
-      return arr;
-    },
-    // 插槽名称
-    dynamicslotname() {
-      return {
-        left: "icon",
-        right: "right-icon",
-      }[this.position];
-    },
-    // 选框样式
-    changStyle() {
-      return {
-        left: { marginRight: "13px" },
-        right: { marginLeft: "13px" },
-      }[this.position];
-    },
-  },
-
-  watch: {
-    // 回显已选中数据
-    checkeds: {
-      handler(nd) {
-        if (nd.length != this.checked.length) {
-          this.checked = this.getKeyArray(this.props.id, nd);
-        }
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
-  methods: {
-    getKeyArray(key, array) {
-      let arr = [];
-      array.forEach((el) => {
-        arr.push(el[key]);
-      });
-      return arr;
-    },
-    toggle(item) {
-      // 按钮禁用
-      if (item.disabled) {
-        return;
-      }
-      this.$refs["checkboxes" + item[this.props.id]][0].toggle();
-      // 单选
-      if (this.type === "radio") {
-        this.checked = [];
-        this.callBack([item]);
-      }
-    },
-    // 选中人员改变 回传数据给父组件
-    changeList(val) {
-      if (this.type == "checkbox") {
-        let arr = this.list.filter(
-          (item) => val.indexOf(item[this.props.id]) > -1
-        );
-        this.callBack(arr);
-      }
-      this.checkAll = this.list.length === this.checked.length;
-    },
-
-    // 数据回传
-    callBack(val) {
-      this.$emit("change", val);
-      this.$emit("update:checkeds", val);
-    },
-    // 全选
-    toggleAll(val) {
-      setTimeout(() => {
-        if (val) {
-          this.$refs.checkboxGroup.toggleAll({
-            checked: val,
-            skipDisabled: this.skipDisabled, // 跳过禁用的复选框
-          });
-        } else {
-          this.$refs.checkboxGroup.toggleAll({
-            skipDisabled: this.skipDisabled,
-          });
-        }
-      }, 100);
-    },
-    // 选中对应数据  外部调用回显选中
-    checkList(list) {
-      list.forEach((item) => {
-        // 添加延迟
-        setTimeout(() => {
-          if (this.$refs["checkboxes" + item[this.props.id]].length > 0) {
-            this.$refs["checkboxes" + item[this.props.id]][0].toggle(true);
-          }
-        }, 100);
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.Fg-phone {
-  .hu-checkCell--square {
-    :deep(.van-checkbox__icon .van-icon) {
-      border-radius: 3px;
-    }
-  }
-  .hu-index-bar {
-    background-color: transparent;
-  }
-
-  .hu-close {
-    color: #d81e06;
-  }
-
-  .van-cell-group--inset {
-    background-color: transparent;
-    margin: 0;
-    border-radius: 0;
-  }
-
-  .hu_cell {
-    background-color: #fff;
-  }
-
-  .hu_cell--disabled {
-    color: #c8c9cc;
-    .hu-close {
-      color: #f88b93;
-    }
-    position: relative;
-    &::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      background-color: rgba($color: #c8c9cc, $alpha: 0.1);
-      z-index: 1;
-    }
-  }
-}
-</style>

package/src/components/huComponents/FGCheckPopUp.vue

@@ -1,164 +0,0 @@
-<template>
-  <div class="hu-check-popup">
-    <slot name="header"></slot>
-    <!-- 显示全部已选中数据的弹框 -->
-    <div v-if="title > 0" style="margin-bottom: 15px; text-align: center">
-      已选中
-      <span class="blue">{{ title }}</span>
-      项
-    </div>
-    <div>
-      <van-row>
-        <van-col
-          v-for="item in showMember"
-          :key="item[props.id]"
-          :style="{ width: `${100 / (parseInt(showCount) + 1)}%` }"
-        >
-          <FGNameImg
-            :name="item[props.name]"
-            :portraitURL="item[props.portraitURL] || defaultImage"
-            layout="vertical"
-            imageWidth="32"
-          />
-        </van-col>
-        <!-- 展开按钮 -->
-        <van-col
-          span="3"
-          @click="isOpen = true"
-          :style="{ width: `${100 / (parseInt(showCount) + 1)}%` }"
-        >
-          <van-icon name="ellipsis" />
-        </van-col>
-      </van-row>
-    </div>
-    <van-popup
-      v-model="isOpen"
-      position="bottom"
-      closeable
-      close-icon="close"
-      :style="{ height: '80%' }"
-      get-container="body"
-    >
-      <div v-if="title > 0" style="margin: 16px">
-        已选中
-        <span class="blue">{{ title }}</span>
-        项
-      </div>
-      <div>
-        <FGCheckList
-          ref="FGCheckList"
-          position="right"
-          :has-all-check="false"
-          svg-icon="reduce"
-          :defaultImage="defaultImage"
-          :list="selecteds"
-          :props="props"
-          @change="changeList"
-        />
-      </div>
-    </van-popup>
-  </div>
-</template>
-
-<script>
-import FGNameImg from "./FGNameImg";
-import FGCheckList from "./FGCheckList";
-
-export default {
-  name: "FGCheckPopUp",
-  components: { FGCheckList, FGNameImg },
-  props: {
-    // 已选中人员
-    selecteds: {
-      type: Array,
-      default: () => [],
-    },
-    // 在 FGCheckList 组件中所传列表的自定义属性名,具体见组件内说明所示
-    props: {
-      type: Object,
-      default: () => {
-        return {
-          name: "name",
-          id: "id",
-          portraitURL: "portraitURL",
-        };
-      },
-    },
-    // 默认头像
-    defaultImage: {
-      type: String,
-      default: "",
-    },
-    // 底部展示几个数据
-    showCount: {
-      type: [Number, String],
-      default: 7,
-    },
-  },
-  data() {
-    return {
-      title: "",
-      isOpen: false, // 下拉框是否打开
-      showMember: [], // 显示在页面下的已选人员
-    };
-  },
-
-  watch: {
-    // 监听已选中数据
-    selecteds: {
-      handler(nd) {
-        this.showMember = [];
-        this.title = nd.length;
-        // 当已选人数超过 showCount 个时，只显示前 showCount 个
-        nd.forEach((element) => {
-          if (this.showMember.length < parseInt(this.showCount)) {
-            this.showMember.push(element);
-          }
-        });
-        // 当已选人数为0时，关闭弹出框
-        if (nd.length == 0) {
-          this.isOpen = false;
-        }
-      },
-      deep: true,
-      immediate: true,
-    },
-    isOpen(nd) {
-      // 监听下拉窗口打开
-      if (nd) {
-        setTimeout(() => {
-          // 只有打开后才会渲染里面的元素，所以加个延迟
-          if (this.$refs.FGCheckList) {
-            // 选中所有
-            this.$refs.FGCheckList.toggleAll(true);
-          }
-        }, 100);
-      }
-    },
-  },
-  methods: {
-    // 当复选框绑定值变化时
-    changeList(val) {
-      // 数据发生了改变, 更新已选数据
-      if (val.length != this.selecteds.length) {
-        this.$emit("update:selecteds", val);
-        this.$emit("change", val);
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.hu-check-popup {
-  background-color: #fff;
-  border-top: 1px solid #fafafa;
-  padding: 10px 20px;
-  text-align: center;
-}
-.hu-ellipsis {
-  font-size: 30px;
-  text-align: center;
-  color: #515151;
-}
-</style>