@xfu0401/form-generator 1.0.21 → 1.0.22

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

@@ -1,310 +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>
-
-      <van-uploader
-        v-if="!$attrs.onlyShow"
-        style="padding: 0 16px 10px 16px"
-        :readonly="readonly"
-        :disabled="disabled"
-        :multiple="multiple"
-        :max-size="maxSize"
-        :max-count="limit"
-        :accept="acceptStr"
-        :preview-image="false"
-        :after-read="afterRead"
-        @oversize="onOversize"
-      >
-        <div class="form-upload-button">
-          <svg-icon iconClass="addSold" />
-        </div>
-        <div class="form-upload-tips" v-if="showTip" :style="newStyle.font">*{{ tips }}</div>
-      </van-uploader>
-    </div>
-    <!-- 展示栏 -->
-    <FilesShow
-      v-if="fileList.length"
-      :value.sync="fileList"
-      :onlyShow="$attrs.onlyShow"
-      :readonly="readonly"
-      :dName="dName"
-      :download="download"
-      style="padding: 0 16px 10px 16px"
-      @change="handleChange"
-    />
-  </div>
-</template>
-
-<script>
-import { formatFile } from "../../../utils/index";
-import { Toast } from "vant";
-import { requestPost2 } from "@/api/data";
-import FilesShow from "../components/filesShow";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "phone-form-upload",
-  components: {
-    FilesShow,
-  },
-  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: "",
-    },
-    // 下载地址
-    download: {
-      type: String,
-      default: "",
-    },
-    // 	下载的文件字段名
-    dName: {
-      type: String,
-      default: "",
-    },
-
-    // 文件大小
-    fileSize: {
-      type: [String, Number],
-      default: 50,
-    },
-    // 文件单位
-    sizeUnit: {
-      type: String,
-      default: "MB",
-    },
-    // 是否只读，仅作展示
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否展示文件提示语,默认展示
-    showTip: {
-      type: Boolean,
-      default: true,
-    },
-    // 文件类型
-    accept: {
-      type: [String, Array],
-      default: "",
-    },
-    // 是否多选
-    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 {
-      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;
-    },
-    acceptStr() {
-      if (!this.accept) return "";
-      return this.accept?.join(",");
-    },
-    tips() {
-      // 最大上传文件+单位
-      const sizeUnit = this.fileSize + this.sizeUnit;
-      if (this.accept) {
-        return `只能上传${this.accept}文件，且不超过${sizeUnit}的文件${
-          this.$attrs.remark || ""
-        }`;
-      }
-      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) {
-      console.log(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 {
-  margin-top: 5px;
-  font-size: 13px;
-  color: $blue;
-}
-.form-upload-button {
-  color: $blue;
-  font-size: 48px;
-  display: inline-block;
-}
-</style>

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

@@ -1,81 +0,0 @@
-<template>
-  <!-- 附件上传控件 -->
-  <div class="pho-upload-temp">
-    <FormUpload v-model="formValue" v-bind="$attrs" @change="handleChange" />
-    <phone-form-link
-      v-if="!$attrs.onlyShow"
-      :value="linkName"
-      class="pho-upload-temp-link"
-      :href="href"
-      :type="type"
-      :icon="icon"
-      target="_blank"
-      :underline="false"
-    ></phone-form-link>
-  </div>
-</template>
-<script>
-import FormUpload from "./formUpload.vue";
-export default {
-  name: "phone-form-upload-temp",
-  components: {
-    FormUpload,
-  },
-  props: {
-    // 绑定的输入值
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    linkName: {
-      type: String,
-      default: "",
-    },
-    href: {
-      type: String,
-      default: "",
-    },
-    type: {
-      type: String,
-      default: "",
-    },
-
-    icon: {
-      type: String,
-      default: "",
-    },
-  },
-
-  data() {
-    return {
-      formValue: "",
-      loading: false,
-    };
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler: function (nd, od) {
-        this.formValue = nd;
-      },
-    },
-  },
-  methods: {
-    handleChange(value) {
-      this.$emit("input", value);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.pho-upload-temp {
-  position: relative;
-  .pho-upload-temp-link {
-    position: absolute;
-    top: 12px;
-    right: 16px;
-  }
-}
-</style>

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

@@ -1,114 +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"
-      :style="newStyle.font"
-      @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 || $attrs.disabled"
-      @change="handleDelete"
-    />
-    <OrgPicker
-      ref="OrgPicker"
-      :data="dataObj"
-      :multiple="$attrs.multiple"
-      :search="search"
-      type="user"
-      @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-user-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) {
-      this.$emit("update", value.length ? JSON.stringify(value) : null);
-      this.$emit("confirm", value.length ? JSON.stringify(value) : null);
-      this.onConfirm(value.length ? JSON.stringify(value) : null);
-    },
-    handleDelete(value) {
-      this.$emit("update", value.length ? JSON.stringify(value) : null);
-      this.$emit("delete", value.length ? JSON.stringify(value) : null);
-    },
-  },
-};
-</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/phoneForm.vue

@@ -1,134 +0,0 @@
-<template>
-  <!-- 移动端预览 -->
-  <van-form
-    v-if="formConf && formList.length"
-    :model="formModel"
-    :ref="formConf.formRef"
-    :label-width="formConf.labelWidth"
-    label-align="top"
-    :disabled="formConf.disabled"
-    show-error-message
-  >
-    <phone-form-row-container :list.sync="list" :formConf="formConf" :onlyShow="onlyShow" @selectHis="handleSelectHis" />
-  </van-form>
-</template>
-
-<script>
-import { deepClone, toCamelCase, traverseTree } from "../utils/index";
-export default {
-  name: "phoneForm",
-  props: {
-    // 表单属性
-    formConf: {
-      type: Object,
-      default: () => {},
-    },
-    // 表单列表
-    formList: {
-      type: Array,
-      default: () => [],
-    },
-    onlyShow: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      formModel: {},
-      formArray: [],
-      list: [],
-    };
-  },
-  watch: {
-    formList: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        if (newValue) {
-          this.list = deepClone(newValue);
-          this.$form.setForm(this.list);
-        }
-      },
-    },
-    list: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        if (newValue) {
-          // 将表单列表数据存储
-          this.$form.setForm(newValue);
-          this.formArray = [];
-          // 根据表单列表生成动态表单模型数据
-          this.getFormModel(newValue);
-        }
-      },
-    },
-  },
-  computed: {},
-  methods: {
-    toCamelCase,
-    // 根据表单列表生成动态表单模型数据
-    getFormModel(list) {
-      list.forEach((el) => {
-        if (el?.__vModel__ && el.__config__) {
-          let obj = JSON.parse(JSON.stringify(this.formModel));
-          this.formModel = Object.assign(obj, {
-            [el.__vModel__]: el.__config__.defaultValue,
-          });
-          this.formArray.push({
-            fieldId: el.__vModel__,
-            fieldKey: el.__config__.formKey,
-            tag: el.__config__.tag,
-            defaultValue: el.__config__.defaultValue,
-            type: typeof el.__config__.defaultValue,
-            formCode: this.formConf.formCode,
-          });
-        }
-        if (el?.children) {
-          this.getFormModel(el.children);
-        }
-      });
-    },
-    submitForm(cb) {
-      this.$emit("update:formList", this.list);
-      this.$emit("submit", this.list);
-      cb(this.formArray, deepClone(this.list));
-    },
-    validateForm(cb) {
-      this.$emit("update:formList", this.list);
-      this.$refs[this.formConf.formRef]
-        .validate()
-        .then(() => {
-          this.$emit("submit", this.list);
-          cb(true, this.formArray, deepClone(this.list));
-        })
-        .catch((error) => {
-          //检验失败
-          cb(false, this.formModel, deepClone(this.list));
-        });
-    },
-    // 重置
-    resetForm() {
-      this.$refs[this.formConf.formRef].resetValidation();
-      traverseTree(this.list, (node) => {
-        if (
-          node &&
-          node.__config__ &&
-          node.disabled !== true &&
-          node.readonly !== true &&
-          node.__config__.tagType != "assist"
-        ) {
-          node.__config__.defaultValue = null;
-        }
-      }); // 从根节点开始遍历整个树
-      this.$emit("update:formList", this.list);
-    },
-    handleSelectHis(value) {
-      this.$emit("selectHis", value)
-    }
-  },
-};
-</script>
-
-<style lang="scss"></style>