@xfu0401/form-generator 1.0.21 → 1.0.22

package/src/components/formGenerator/formComponents/phoneComponents/components/orgPicker.vue

@@ -1,343 +0,0 @@
-<template>
-  <van-popup
-    v-model="state"
-    position="right"
-    closeable
-    :overlay="false"
-    :style="{ height: '100vh', width: '100vw',overflow:'hidden' }"
-    get-container="body"
-  >
-    <div class="org-pick">
-      <form action="#" v-if="search">
-        <van-search v-model="searchValue" :placeholder="search?.text" @input="handleSearch" @search="handleSearch"></van-search>
-      </form>
-      <FGBreadNav
-        icon="el-icon-office-building"
-        :nav.sync="breadNav"
-        @onNav="onNav"
-        :border="false"
-      />
-      <span v-if="breadNav.length" class="blue preNext" @click="onPre">上一级</span>
-      <div class="org-pick-list" :class="checkList.length ? 'org-pick-selected' : ''">
-        <!-- 全选 -->
-        <FGCheckCell
-          v-if="multiple"
-          :title="checkedAll ? '取消全选' : '全选'"
-          :value="checkedAll"
-          @clickCell="toggleAll"
-        />
-        <van-empty v-if="list.length === 0 && !loading" description="暂无数据" />
-        <!-- 人员列表（图像+姓名 + 复选框） 组件 -->
-        <FGCheckCell
-          v-for="item in list"
-          :key="item[defaultProps.id]"
-          v-model="item.selected"
-          :disabled="item.disabled"
-          @clickCell="handleChange([item], item.selected)"
-        >
-          <template #title>
-            <FGNameImg
-              :portraitURL="item[defaultProps.avatar]"
-              :name="item[defaultProps.name]"
-              :defaultSvg="'default-'+item[defaultProps.type]"
-            />
-          </template>
-          <template #value v-if="item[defaultProps.type] == 'dept'">
-            <div class="blue cursor" @click.stop.prevent="handleNext(item)">下级</div>
-          </template>
-        </FGCheckCell>
-      </div>
-
-      <!-- 已选 -->
-      <div class="org-pick-bottom">
-        <FGCheckPopUp
-          v-if="checkList.length > 0"
-          :selecteds.sync="checkList"
-          :props="defaultProps"
-          @change="filterCheckList"
-        />
-        <!-- 确认 -->
-        <van-button class="org-button--submit" @click="onConfirm">确认</van-button>
-      </div>
-    </div>
-  </van-popup>
-</template>
-
-<script>
-import { requestUrl } from "@/api/data";
-import { unionFun, differenceSetFun } from "@/components/formGenerator/utils";
-import { deepClone } from "../../../utils/index";
-import FGBreadNav from "@/components/huComponents/FGBreadNav";
-import FGCheckPopUp from "@/components/huComponents/FGCheckPopUp";
-import FGCheckCell from "@/components/huComponents/FGCheckCell";
-import FGNameImg from "@/components/huComponents/FGNameImg";
-
-export default {
-  name: "OrgPicker",
-  components: {
-    FGBreadNav,
-    FGCheckPopUp,
-    FGCheckCell,
-    FGNameImg,
-  },
-  props: {
-    type: {
-      default: "user", // org选择部门/人员  user-选人  dept-选部门 role-选角色
-      type: String,
-    },
-    multiple: {
-      // 是否多选
-      default: false,
-      type: Boolean,
-    },
-    data: {
-      type: Object,
-      default: () => {},
-    },
-    // 搜索配置
-    search: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      searchValue: "",
-      state: false,
-      list: [], // 已选中用户
-      checkList: [],
-      loading: false,
-      checkedAll: false,
-      breadNav: [], // 存储显示到面包屑导航中的数据
-    };
-  },
-  computed: {
-    requestProps() {
-      return this.data.props.request || {};
-    },
-    responseProps() {
-      return this.data.props.response || {};
-    },
-    defaultProps() {
-      return {
-        name: "name",
-        id: "id",
-        type: "type",
-        portraitURL: this.responseProps.avatar,
-        ...this.responseProps,
-      };
-    },
-  },
-
-  methods: {
-    init() {
-      this.checkList = [];
-      this.breadNav = [];
-      this.list = [];
-      this.checkedAll = false;
-    },
-    open(checkList) {
-      this.init();
-      // 回显已选中数据
-      if (checkList) {
-        this.checkList = checkList.map((item) => {
-          let obj = item;
-          return obj;
-        });
-      }
-      this.loadData();
-      this.toggle();
-    },
-
-    toggle() {
-      this.state = !this.state;
-    },
-
-    toggleAll(value) {
-      this.checkedAll = value;
-      const list = this.list.filter((item) => !item.disabled);
-      this.handleChange(list, value);
-    },
-    // 下级
-    handleNext(item) {
-      // 将当前组织架构名存储在面包屑导航中
-      this.breadNav.push({
-        text: item[this.defaultProps.name],
-        id: item[this.defaultProps.id],
-      });
-      this.breadNav = [...new Set(this.breadNav)];
-      this.loadData(item[this.defaultProps.id]);
-    },
-
-    // 点击面包屑导航
-    onNav(index, id) {
-      this.loadData(id);
-    },
-    onPre() {
-      this.breadNav.pop();
-      const id = this.breadNav[this.breadNav.length - 1]?.id || "";
-      this.loadData(id);
-    },
-
-    // 单独点击某个多选框/全选框
-    // list-发生改变的单位数组，state-需要改变的状态 true-选中，false-取消选中
-    handleChange(list, state) {
-      if (!this.multiple) this.checkList = [];
-      if (state) {
-        // 并集即为选中
-        this.checkList = unionFun(this.checkList, list, this.defaultProps.id);
-      } else {
-        // 差集即为取消选中
-        this.checkList = differenceSetFun(
-          this.checkList,
-          list,
-          this.defaultProps.id
-        );
-      }
-      this.filterCheckList();
-    },
-
-    // 过滤当前选中
-    filterCheckList() {
-      // 在这里更新数据
-      const checkedIds = this.checkList.map(
-        (item) => item[this.defaultProps.id]
-      );
-      this.list.forEach((item) => {
-        item.selected = false;
-        if (checkedIds.includes(item[this.defaultProps.id]))
-          item.selected = true;
-      });
-      this.$forceUpdate();
-    },
-
-    // 确认分享
-    onConfirm() {
-      const checkList = deepClone(this.checkList);
-      checkList.forEach((item) => {
-        delete item.selected;
-      });
-      this.$emit("callBack", checkList);
-      this.$emit("update", checkList);
-      this.toggle();
-    },
-    // 搜索
-    handleSearch() {
-      if (!this.searchValue) return this.loadData();
-      let data = this.search.request;
-      data[this.search.props.request.userName] = this.searchValue;
-      this.list = [];
-      this.loading = true;
-      requestUrl(
-        this.search.url,
-        this.search.method,
-        data,
-        this.search.reDataType
-      )
-        .then((rsp) => {
-          this.list = rsp.result.map((item) => {
-            let obj = {
-              ...item,
-              disabled:
-                item[this.defaultProps.type] !== "user" && this.type == "user",
-            };
-            return obj;
-          });
-
-          this.filterCheckList();
-          if (this.search?.response) {
-            const func = new Function("response", this.search.response);
-            func(rsp.result);
-          }
-        })
-        .catch((err) => {
-          if (this.search?.error) {
-            const func = new Function("error", this.search.error);
-            func(err);
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-          this.finished = true;
-        });
-    },
-
-    loadData(deptId) {
-      let data = this.data.request;
-      this.list = [];
-      if (deptId) this.$set(data, this.requestProps.deptId, deptId);
-      this.loading = true;
-      requestUrl(this.data.url, this.data.method, data, this.data.reDataType)
-        .then((rsp) => {
-          this.list = rsp.result.map((item) => {
-            let obj = {
-              ...item,
-              disabled:
-                item[this.defaultProps.type] !== "user" && this.type == "user",
-            };
-            return obj;
-          });
-
-          this.filterCheckList();
-          if (this.data?.response) {
-            const func = new Function("response", this.data.response);
-            func(rsp.result);
-          }
-        })
-        .catch((err) => {
-          if (this.data?.error) {
-            const func = new Function("error", this.data.error);
-            func(err);
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-          this.finished = true;
-        });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.org-button--submit {
-  margin: 10px 20px;
-  width: calc(100% - 40px);
-  display: block;
-  border-radius: 999px;
-  background: linear-gradient(148deg, #478df4 0%, #42d0ea 100%);
-  color: #fff;
-  border: 0px;
-}
-
-.org-pick {
-  overflow: hidden;
-  padding-top: 40px;
-  height: 100vh;
-  .cursor {
-    cursor: pointer;
-  }
-  .preNext {
-    cursor: pointer;
-    padding: 10px 16px;
-    font-size: 12px;
-  }
-  .org-pick-list {
-    height: calc(100% - 54px - 36px - 32px - 40px - 64px);
-    overflow-y: auto;
-    padding-bottom: 40px;
-    box-sizing: border-box;
-  }
-  .org-pick-selected {
-    height: calc(100% - 54px - 36px - 32px - 40px - 175px);
-  }
-  display: flex;
-  flex-direction: column;
-  .org-pick-bottom {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-}
-</style>

package/src/components/formGenerator/formComponents/phoneComponents/components/tableShow.vue

@@ -1,149 +0,0 @@
-<template>
-  <table
-    class="Fg-pho-table"
-    :class="tableClass"
-    align="center"
-    cellspacing="0"
-    cellpadding="0"
-    border="0"
-    :width="width"
-    :style="newStyle"
-  >
-    <!-- <caption>标题</caption> -->
-    <tr class="Fg-pho-table__header" v-if="$attrs.showHeader">
-      <th
-        v-if="index"
-        class="Fg-pho-table__cell"
-        width="80"
-        :style="{backgroundColor:$attrs.color}"
-      >序号</th>
-      <th
-        class="Fg-pho-table__cell"
-        v-for="(item,i) in head"
-        :key="i"
-        :width="item.width"
-        :style="{backgroundColor:$attrs.color}"
-      >{{item.label}}</th>
-    </tr>
-    <tr class="Fg-pho-table__body" v-for="(item,i) in data" :key="i" :class="trClass(i)">
-      <td class="Fg-pho-table__cell" align="center">{{i+1}}</td>
-      <td class="Fg-pho-table__cell" v-for="(itemm,j) in head" :key="j" :align="itemm.align">
-        <span v-if="itemm.render=='text'">{{item[itemm.prop]}}</span>
-        <phone-form-tag
-          v-else-if="itemm.render=='tag'"
-          type="primary"
-          :size="$attrs.size"
-          :value="item[itemm.prop]"
-        />
-        <van-image
-          v-else-if="itemm.render=='img'"
-          style="width: 50px; height: 50px"
-          :src="item[itemm.prop]"
-          fit="fill"
-        ></van-image>
-        <span v-else>{{item[itemm.prop]}}</span>
-      </td>
-    </tr>
-  </table>
-</template>
-
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-
-export default {
-  name: "TableShow",
-  mixins: [comMixin],
-  props: {
-    head: {
-      type: Array,
-      default: () => [],
-    },
-    data: {
-      type: Array,
-      default: () => [],
-    }, // 是否显示序号
-    index: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  mounted() {},
-  computed: {
-    width() {
-      return this.head.reduce(
-        (pre, next) => pre + (parseInt(next.width) || 0),
-        0
-      );
-    },
-    tableClass() {
-      const size = "Fg-pho-table--" + this.$attrs.size;
-      const border = this.$attrs.border ? "Fg-pho-table--border" : "";
-      return `${size} ${border}`;
-    },
-  },
-
-  methods: {
-    trClass(i) {
-      return i % 2 && this.$attrs.stripe ? "Fg-pho-table--striped" : "";
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-table,
-td,
-th {
-  border: none;
-}
-.Fg-pho-table {
-  .Fg-pho-table__header {
-    color: #909399;
-  }
-  .Fg-pho-table__cell {
-    padding-left: 10px;
-    padding-right: 10px;
-    line-height: 23px;
-    border-bottom: 1px solid #ebeef5;
-  }
-  .Fg-pho-table--striped {
-    background-color: #fafafa;
-  }
-}
-.Fg-pho-table--border {
-  .Fg-pho-table__header {
-    .Fg-pho-table__cell {
-      border-top: 1px solid #ebeef5;
-    }
-  }
-
-  .Fg-pho-table__header,
-  .Fg-pho-table__body {
-    .Fg-pho-table__cell {
-      border-left: 1px solid #ebeef5;
-    }
-    .Fg-pho-table__cell:last-child {
-      border-right: 1px solid #ebeef5;
-    }
-  }
-}
-.Fg-pho-table--mini {
-  font-size: 12px;
-  .Fg-pho-table__cell {
-    padding: 6px 0;
-  }
-}
-.Fg-pho-table--small {
-  font-size: 12px;
-  .Fg-pho-table__cell {
-    padding: 8px 0;
-  }
-}
-.Fg-pho-table--medium {
-  font-size: 14px;
-  .Fg-pho-table__cell {
-    padding: 10px 0;
-  }
-}
-</style>

package/src/components/formGenerator/formComponents/phoneComponents/components/textShow.vue

@@ -1,25 +0,0 @@
-<template>
-  <div class="Fg-text-show">{{value}}</div>
-</template>
-
-<script>
-export default {
-  name: "TextShow",
-  props: {
-    value: {
-      type: [Number, String],
-      default: "",
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/style/color";
-.Fg-text-show {
-  padding: 10px 16px;
-  padding-top: 0;
-  color: #323233;
-  word-break: break-all;
-}
-</style>

package/src/components/formGenerator/formComponents/phoneComponents/components/timePicker.vue

@@ -1,90 +0,0 @@
-<template>
-  <!-- 弹框选择时间或日期组件 -->
-  <van-popup v-model="showPicker" position="bottom" get-container="body">
-    <van-datetime-picker
-      v-model="currentDate"
-      type="time"
-      :min-hour="minHour"
-      :max-hour="maxHour"
-      :min-minute="minMinute"
-      :max-minute="maxMinute"
-      @confirm="onConfirm"
-      @cancel="showPicker = false"
-    />
-  </van-popup>
-</template>
-
-<script>
-import moment from "moment";
-
-export default {
-  props: {
-    // 可选择的最小时间，格式为 10:00 不包括秒
-    minTime: {
-      default: "",
-    },
-    // 可选择的最大时间，格式为 10:00 不包括秒
-    maxTime: {
-      default: "",
-    },
-
-    // 时间格式：HH:mm:ss
-    format: {
-      type: String,
-      default: "HH:mm:ss",
-    },
-  },
-  data() {
-    return {
-      currentDate: "", // 默认日期 当天
-      showPicker: false, // 弹框是否显示
-    };
-  },
-  computed: {
-    // 可选的最小小时
-    minHour() {
-      let times = this.minTime.split(":") || [];
-      return times[0] || 0;
-    },
-    // 可选的最大小时
-    maxHour() {
-      let times = this.maxTime.split(":") || [];
-      return times[0] || 23;
-    },
-    // 可选的最小分钟
-    minMinute() {
-      let times = this.minTime.split(":") || [];
-      return times[1] || 0;
-    },
-    // 可选的最大分钟
-    maxMinute() {
-      let times = this.maxTime.split(":") || [];
-      return times[1] || 59;
-    },
-  },
-  methods: {
-    // 从外部打开时间选择器,datetime-回显的时间
-    open(datetime) {
-      if (datetime) {
-        this.currentDate = datetime;
-      }
-      this.toggle(true);
-    },
-
-    // 确认选择某一时刻
-    onConfirm(value) {
-      // 带上日期的时间，moment无法识别仅有时间的格式
-      let datetime = moment().format("YYYY-MM-DD") + " " + value + ":00";
-      let dateValue = moment(datetime, moment.ISO_8601).format(
-        this.format.toUpperCase()
-      );
-      this.$emit("callBack", dateValue);
-      this.toggle(false);
-    },
-
-    toggle(type) {
-      this.showPicker = type;
-    },
-  },
-};
-</script>