@xfu0401/form-generator 1.1.24 → 1.1.25

package/src/components/formGenerator/formComponents/phoneComponents/selectComs/formImage.vue

@@ -1,278 +0,0 @@
-<template>
-  <!-- 文件上传 -->
-  <div class="pho-form-item" :style="newStyle">
-    <div
-      style="display: flex; justify-content: space-between"
-      :style="isTop ? 'flex-direction: column;' : ''"
-    >
-      <van-field
-        class="form-input-hidden"
-        v-bind="$attrs"
-        :value="value"
-        :name="$attrs.__vModel__"
-        readonly
-        :label="showLabel ? label : ''"
-        :label-width="labelWidth"
-        :required="required"
-        input-align="right"
-      >
-        <span v-if="showLabel" slot="label" :style="newStyle.font">{{label}}</span>
-      </van-field>
-    </div>
-    <ImageShow
-      :value.sync="fileList"
-      :onlyShow="$attrs.onlyShow"
-      :readonly="readonly || disabled"
-      @change="handleChange"
-    >
-      <template v-if="!$attrs.onlyShow && fileList.length!==limit">
-        <van-uploader
-          :readonly="readonly"
-          :disabled="disabled"
-          :multiple="multiple"
-          :max-size="maxSize"
-          :max-count="limit"
-          accept="image/*"
-          :preview-image="false"
-          :after-read="afterRead"
-          @oversize="onOversize"
-        />
-      </template>
-    </ImageShow>
-    <div
-      class="form-upload-tips"
-      v-if="showTip && !$attrs.onlyShow"
-      :style="newStyle.font"
-    >*{{ tips }}</div>
-  </div>
-</template>
-
-<script>
-import { formatFile } from "../../../utils/index";
-import { Toast } from "vant";
-import ImageShow from "../components/imageShow";
-import { comMixin } from "../../../utils/comMixins";
-import { requestPost2 } from "@/api/data";
-
-export default {
-  mixins: [comMixin],
-  name: "phone-form-image",
-  components: {
-    ImageShow,
-  },
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    // value 和 formValue 存储的都是选择的文件，前者是字符串形式，后者为数组形式
-    // 选择的文件的字符串形式
-    value: {
-      default: "",
-    },
-    // 是否为上下布局
-    isTop: {
-      type: Boolean,
-      default: false,
-    },
-    // 标签
-    label: {
-      type: String,
-      default: "",
-    },
-    // 是否必填
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    // 文件上传地址
-    action: {
-      type: String,
-      default: "",
-    },
-
-    // 文件大小
-    fileSize: {
-      type: [String, Number],
-      default: 50,
-    },
-    // 文件单位
-    sizeUnit: {
-      type: String,
-      default: "MB",
-    },
-    // 是否只读，仅作展示
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否展示文件提示语,默认展示
-    showTip: {
-      type: Boolean,
-      default: true,
-    },
-
-    // 是否多选
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    // 禁用
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    // label标题的宽度
-    labelWidth: {
-      type: [String, Number],
-      default: "100%",
-    },
-    // 	上传的文件字段名
-    name: {
-      type: String,
-      default: "",
-    },
-    // 最大允许上传个数
-    limit: {
-      type: Number,
-      default: 10,
-    },
-    // 是否展示标题
-    showLabel: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      files: [],
-      fileList: [
-        // {
-        //   name: "food.jpeg",
-        //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-        // },
-        // {
-        //   name: "food2.jpeg",
-        //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-        // },
-      ],
-      formatFile,
-    };
-  },
-
-  computed: {
-    maxSize() {
-      const fileSize = this.fileSize; // 文件大小
-      const fileUnit = this.sizeUnit; // 文件单位
-      // 实际上传的文件大小单位为B，需要将文件大小限制的单位转换为B
-      const maxSize =
-        fileSize *
-        { KB: 1024, MB: Math.pow(1024, 2), GB: Math.pow(1024, 3) }[fileUnit];
-      return maxSize;
-    },
-    tips() {
-      // 最大上传文件+单位
-      const sizeUnit = this.fileSize + this.sizeUnit;
-      return `只能上传不超过${sizeUnit}的图片${this.$attrs.remark || ""}`;
-    },
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler: function (nd, od) {
-        try {
-          // 回显
-          this.fileList = JSON.parse(nd || "[]");
-        } catch (error) {
-          console.log("error", error);
-        }
-      },
-    },
-  },
-
-  methods: {
-    onOversize() {
-      Toast.fail("图片大小不允许上传！");
-    },
-
-    // 文件读取完成后的回调函数
-    afterRead(file) {
-      if (this.fileList.length >= this.limit) {
-        return Toast(`最多允许上传${this.limit}个图片`);
-      }
-      // 只能上传一个文件，将原文件清空再添加
-      if (!this.multiple) this.fileList = [];
-      let formData = new FormData();
-      if (Array.isArray(file)) {
-        // 选择多个文件
-        file.forEach((item) => {
-          formData.append(this.name, item.file);
-          this.fileList.push({
-            id: item.file?.lastModified,
-            name: item.file?.name,
-            url: "",
-          });
-        });
-      } else {
-        // 选择单个文件
-        formData.append(this.name, file.file);
-        this.fileList.push({
-          id: file.file?.lastModified,
-          name: file.file?.name,
-          url: "",
-        });
-      }
-      requestPost2(this.action, formData)
-        .then((res) => {
-          if (res.code == 1) {
-            let fileArr = [];
-            if (this.multiple) {
-              fileArr = JSON.parse(this.value || "[]");
-            }
-            Toast.success("上传成功！");
-            try {
-              res.result.mFilePath.forEach((path, index) => {
-                fileArr.push({
-                  id: res.result.idList[index],
-                  name: res.result.mFileName[index],
-                  url: path,
-                  size: res.result.fileLengths[index] || "", // 文件大小
-                });
-                this.handleChange(fileArr);
-              });
-            } catch (error) {
-              this.onError(error);
-            }
-          } else {
-            this.onError(res);
-          }
-        })
-        .catch((err) => {
-          this.onError(err);
-        });
-    },
-    // 上传失败
-    onError(err) {
-      Toast.fail(err.msg || `上传失败！`);
-      this.fileList = JSON.parse(this.value || "[]");
-    },
-    handleChange(fileArr) {
-      const value = fileArr.length ? JSON.stringify(fileArr) : null;
-      this.$emit("update", value);
-      this.$emit("change", value);
-      this.onChange(value);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/style/color";
-.form-upload-tips {
-  padding: 0 16px;
-  padding-bottom: 10px;
-  font-size: 13px;
-  color: $blue;
-}
-</style>

package/src/components/formGenerator/formComponents/phoneComponents/selectComs/formOrgPicker.vue

@@ -1,107 +0,0 @@
-<template>
-  <div class="pho-form-item" :style="newStyle">
-    <van-field
-      class="form-input-hidden"
-      v-bind="$attrs"
-      :name="$attrs.__vModel__"
-      :value="selected.length ? value : ''"
-      :label="$attrs.showLabel ? $attrs.label : ''"
-      input-align="right"
-      readonly
-      right-icon="plus"
-    >
-      <span v-if="$attrs.showLabel" slot="label" :style="newStyle.font">{{$attrs.label}}</span>
-    </van-field>
-    <div v-if="!$attrs.onlyShow" class="user-picker-add form-placeholder" @click="handleClick">
-      {{ $attrs.placeholder }}
-      <van-icon name="plus" />
-    </div>
-    <!-- 展示栏 -->
-    <NameShow
-      v-if="selected.length"
-      style="padding: 0 12px 12px 12px"
-      v-model="selected"
-      :props="dataObj.props"
-      :onlyShow="$attrs.onlyShow"
-      :readonly="$attrs.readonly"
-      @change="callBack"
-    />
-    <OrgPicker
-      ref="OrgPicker"
-      :data="dataObj"
-      :multiple="$attrs.multiple"
-      type="dept"
-      :search="search"
-      @callBack="callBack"
-    />
-  </div>
-</template>
-
-<script>
-import OrgPicker from "../components/orgPicker.vue";
-import NameShow from "../components/nameShow.vue";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-org-picker",
-  components: {
-    OrgPicker,
-    NameShow,
-  },
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    // 绑定的输入值
-    value: {
-      type: [String],
-      default: "",
-    },
-
-    // 搜索配置
-    search: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      selected: JSON.parse(this.values || "[]"),
-    };
-  },
-
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        this.selected = JSON.parse(newValue || "[]");
-      },
-    },
-  },
-  methods: {
-    // 此处是为了不调用comMixins混入中的init方法
-    init() {},
-    handleClick() {
-      if (this.$attrs.disabled || this.$attrs.readonly) return;
-      this.$refs.OrgPicker.open(this.selected);
-    },
-    callBack(value) {
-      const newValue = value.length ? JSON.stringify(value) : null;
-      this.$emit("update", newValue);
-      this.$emit("confirm", newValue);
-      this.onConfirm(newValue);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.user-picker-add {
-  padding: 12px 16px;
-  padding-top: 0;
-  cursor: pointer;
-  font-size: 13px;
-}
-</style>

package/src/components/formGenerator/formComponents/phoneComponents/selectComs/formRadioGroup.vue

@@ -1,93 +0,0 @@
-<template>
-  <!-- 单选框组 -->
-  <div
-    class="pho-form-item pho-form-flex"
-    :style="{...newStyle,flexDirection:$attrs.isTop ? 'column' : ''}"
-  >
-    <van-field
-      class="form-input-hidden"
-      v-bind="$attrs"
-      :value="defaultValue"
-      :label="showLabel ? $attrs.label : ''"
-      :name="$attrs.__vModel__"
-      :placeholder="$attrs.placeholder"
-      input-align="right"
-    >
-      <span v-if="showLabel" slot="label" :style="newStyle.font">{{$attrs.label}}</span>
-    </van-field>
-    <TextShow v-if="$attrs.onlyShow" :value="$utils.getOptionsText(value,resData,props)" />
-    <van-radio-group
-      v-else
-      class="right-box"
-      v-model="formValue"
-      v-bind="$attrs"
-      direction="horizontal"
-      @change="handleChange"
-    >
-      <van-radio
-        v-for="item in resData"
-        :key="item[props.value]"
-        :name="item[props.value]"
-        :icon-size="16"
-        style="margin-bottom: 5px"
-      >{{ item[props.label] }}</van-radio>
-    </van-radio-group>
-  </div>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-import TextShow from "../components/textShow.vue";
-export default {
-  components: { TextShow },
-  mixins: [comMixin],
-  name: "phone-form-radio-group",
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    value: {
-      type: [Number, String],
-      default: "",
-    },
-    // 是否展示标题
-    showLabel: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      formValue: "",
-    };
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        this.formValue = newValue;
-      },
-    },
-  },
-  computed: {
-    defaultValue() {
-      const item = this.resData.find(
-        (item) => item[this.props.value] == this.value
-      );
-      if (item) return item[this.props.label];
-      return "";
-    },
-  },
-  methods: {
-    handleChange(value) {
-      this.$emit("update", value);
-      // this.$emit("change", value);
-      this.onChange(value);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/formGenerator/formComponents/phoneComponents/selectComs/formRate.vue

@@ -1,85 +0,0 @@
-<template>
-  <!-- 评分 -->
-  <div class="pho-form-item" :style="newStyle">
-    <van-field
-      v-bind="$attrs"
-      :label="showLabel ? $attrs.label : ''"
-      :name="$attrs.__vModel__"
-      :required="$attrs.required"
-      :rules="$attrs.regList"
-      :placeholder="$attrs.placeholder"
-      input-align="right"
-    >
-      <span v-if="showLabel" slot="label" :style="newStyle.font">{{$attrs.label}}</span>
-      <template #input>
-        <van-rate
-          v-model="formValue"
-          v-bind="$attrs"
-          :count="$attrs.max"
-          touchable
-          :readonly="$attrs.readonly || $attrs.onlyShow"
-          @change="handleChange"
-        />
-        <!-- 显示分数 -->
-        <span v-if="$attrs.showScore" style="margin-left: 5px">
-          {{
-          formValue
-          }}
-        </span>
-        <!-- 显示文字 -->
-        <span v-if="$attrs.showText" style="margin-left: 5px">
-          {{
-          texts[Math.ceil(formValue) - 1]
-          }}
-        </span>
-      </template>
-    </van-field>
-  </div>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-rate",
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    value: {
-      type: [Number, String],
-      default: "",
-    },
-    // 是否展示标题
-    showLabel: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      formValue: 0,
-      texts: ["极差", "失望", "一般", "满意", "惊喜"], // 辅助文字
-    };
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        this.formValue = newValue;
-      },
-    },
-  },
-  methods: {
-    handleChange(val) {
-      this.$emit("update", val);
-      this.$emit("change", val);
-      this.onChange(val);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/formGenerator/formComponents/phoneComponents/selectComs/formSelect.vue

@@ -1,138 +0,0 @@
-<template>
-  <!-- 选择器 -->
-  <div class="pho-form-item" :style="newStyle">
-    <van-field
-      v-bind="$attrs"
-      :value="text"
-      :label="showLabel ? $attrs.label : ''"
-      :name="$attrs.__vModel__"
-      input-align="right"
-      theme="round"
-      :clickable="!$attrs.onlyShow"
-      is-link
-      readonly
-      @click="onClick"
-    >
-      <TextShow
-        slot="input"
-        style="padding:0"
-        v-if="$attrs.onlyShow"
-        :value="$utils.getOptionsText(value,resData,props)"
-      />
-      <span v-if="showLabel" slot="label" :style="newStyle.font">{{$attrs.label}}</span>
-      <template #right-icon v-if="clearable">
-        <div @click.stop="handleClear">
-          <van-icon name="clear" />
-        </div>
-      </template>
-    </van-field>
-    <van-popup v-model="showPicker" position="bottom" get-container="body">
-      <van-picker
-        v-if="!$attrs.multiple"
-        show-toolbar
-        :columns="options"
-        @confirm="handleConfirm"
-        @cancel="showPicker = false"
-      />
-      <template v-else>
-        <div class="van-picker__toolbar">
-          <button class="van-picker__cancel" @click="showPicker = false">取消</button>
-          <button class="van-picker__confirm" @click="handleConfirm({value:checks.join(',')})">确定</button>
-        </div>
-        <van-checkbox-group v-model="checks">
-          <van-cell
-            v-for="(item,i) in options"
-            clickable
-            :key="i"
-            :title="item.text"
-            @click="toggle(i)"
-          >
-            <template #right-icon>
-              <van-checkbox :name="item.value" ref="checkboxes" />
-            </template>
-          </van-cell>
-        </van-checkbox-group>
-      </template>
-    </van-popup>
-  </div>
-</template>
-
-<script>
-import { comMixin } from "../../../utils/comMixins";
-import TextShow from "../components/textShow.vue";
-export default {
-  components: { TextShow },
-  mixins: [comMixin],
-  name: "phone-form-select",
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    value: {
-      type: [Number, String],
-      default: "",
-    },
-    // 是否展示标题
-    showLabel: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      showPicker: false,
-      checks: [],
-    };
-  },
-  computed: {
-    // 选择器选项
-    options() {
-      let opts = this.resData;
-      return opts.map((item) => {
-        return { text: item[this.props.label], value: item[this.props.value] };
-      });
-    },
-    // 显示的文字
-    text() {
-      const arr = this.value?.split(",") || [];
-      return this.options
-        .filter((item) => arr.includes(item.value))
-        .map((item) => item.text)
-        .join(",");
-    },
-  },
-  methods: {
-    toggle(index) {
-      this.$refs.checkboxes[index].toggle();
-    },
-
-    onClick() {
-      if (this.$attrs.disabled || this.$attrs.readonly || this.$attrs.onlyShow)
-        return;
-      this.checks = this.value ? this.value.split(",") : [];
-
-      this.showPicker = true;
-    },
-    submit() {
-      const value = this.checks ? this.checks.join(",") : "";
-      this.handleConfirm(value);
-    },
-    handleClear() {
-      this.$emit("update", "");
-      this.$emit("clear");
-      this.onClear;
-    },
-    // 确认选中
-    handleConfirm(value) {
-      this.$emit("update", value.value);
-      this.$emit("change", value.value);
-      this.onChange(value.value);
-      this.$emit("confirm", value.value);
-      this.showPicker = false;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>