@xfu0401/form-generator 1.1.24 → 1.1.25

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

@@ -1,306 +0,0 @@
-<template>
-  <!-- 附件上传控件 -->
-  <div>
-    <div class="form-components" v-if="!$attrs.onlyShow">
-      <div v-if="readonly" class="form-readonly"></div>
-      <el-upload
-        class="upload-demo"
-        action="#"
-        :download="download"
-        :multiple="multiple"
-        :name="name"
-        :accept="acceptStr"
-        :limit="limit"
-        :file-list="fileList"
-        :http-request="uploadFile"
-        :before-upload="beforeUpload"
-        :style="newStyle"
-      >
-        <el-button size="small" type="primary" :disabled="disabled" :loading="loading">点击上传</el-button>
-        <div
-          v-if="__config__?.showTip"
-          slot="tip"
-          class="Fg-upload-tips"
-          :style="newStyle?.font"
-        >*{{ tips }}</div>
-      </el-upload>
-    </div>
-    <div v-else>
-      <FilesShow
-          v-if="fileList.length"
-          :value.sync="fileList"
-          :onlyShow="$attrs.onlyShow"
-          :readonly="readonly || disabled"
-          :dName="dName"
-          :download="download"
-          @change="handleChange"
-      />
-    </div>
-  </div>
-</template>
-<script>
-import FilesShow from "../components/filesShow";
-import OSS from 'ali-oss'
-import { requestPostJson } from "@/api/data";
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "form-upload",
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  components: {
-    FilesShow,
-  },
-  props: {
-    // 绑定的输入值
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    // 是否只读
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否禁用
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    // 表单属性
-    __config__: {
-      type: Object,
-      default: () => {},
-    },
-    // 文件类型
-    accept: {
-      type: [String, Array],
-      default: "",
-    },
-    // 文件上传地址
-    action: {
-      type: String,
-      default: "",
-    },
-    // 文件下载地址
-    download: {
-      type: String,
-      default: "",
-    },
-    // 是否多选
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    // 	上传的文件字段名
-    name: {
-      type: String,
-      default: "",
-    },
-    // 	下载的文件字段名
-    dName: {
-      type: String,
-      default: "",
-    },
-    // 最大允许上传个数
-    limit: {
-      type: Number,
-      default: 10,
-    },
-  },
-  computed: {
-    tips() {
-      // 最大上传文件+单位
-      const sizeUnit = this.__config__.fileSize + this.__config__.sizeUnit;
-      if (this.accept) {
-        return `只能上传${this.accept}文件，且不超过${sizeUnit}的文件${
-          this.$attrs.remark || ""
-        }`;
-      }
-      return `只能上传不超过${sizeUnit}的文件${this.$attrs.remark || ""}`;
-    },
-    acceptStr() {
-      if (!this.accept) return "";
-      return this.accept?.join(",");
-    },
-  },
-  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",
-        // },
-      ],
-      loading: false,
-    };
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler: function (nd, od) {
-        try {
-          // 回显
-          this.fileList = JSON.parse(nd || "[]");
-        } catch (error) {
-          console.log("error", error);
-        }
-      },
-    },
-  },
-  methods: {
-    beforeUpload(file) {
-      if (this.fileList.length >= this.limit) {
-        this.$message({
-          message: `最多允许上传${this.limit}个文件`,
-          type: "info",
-        });
-        return false;
-      }
-      const fileSize = this.__config__.fileSize; // 文件大小
-      const fileUnit = this.__config__.sizeUnit; // 文件单位
-      // 实际上传的文件大小单位为B，需要将文件大小限制的单位转换为B
-      const maxSize =
-        fileSize *
-        { KB: 1024, MB: Math.pow(1024, 2), GB: Math.pow(1024, 3) }[fileUnit];
-      let isLt = file.size < maxSize; // 判断是否超过文件大小
-      if (!isLt) {
-        this.$message({
-          message: `请上传小于${fileSize + fileUnit}的文件!`,
-          type: "info",
-        });
-        return false;
-      } else {
-        this.loading = true;
-        return true;
-      }
-    },
-
-    // 自定义文件上传
-    uploadFile(param) {
-      const file = param.file
-      const ext = file.name.substring(file.name.lastIndexOf('.') + 1)
-      const _this = this
-      requestPostJson("/MCAPI/sts_token", {filename: file.name, ext: ext}).then(res => {
-        if (!res.result) {
-          param.onError()
-          return
-        }
-        const credentials = res.data
-        console.log("初始化oss")
-        const client = new OSS({
-          // 将<YOUR_BUCKET>设置为OSS Bucket名称。
-          bucket: "dhmp-file",
-          // 将<YOUR_REGION>设置为OSS Bucket所在地域，例如region: 'oss-cn-hangzhou'。
-          region: "oss-cn-chengdu",
-          accessKeyId: credentials.AccessKeyId,
-          accessKeySecret: credentials.AccessKeySecret,
-          stsToken: credentials.SecurityToken
-        });
-        _this.loading = true
-        // img 文件夹下  obj.file.name 文件的名字 obj.file文件对象
-        client.multipartUpload(credentials.path, file, {
-          // 进度条的配置项
-          progress: function (percentage) { // 获取进度条的值
-            const percent = percentage * 100
-            param.onProgress({percent: percent.toFixed(2)})
-          },
-          // 每传输完一个分片 进度条会走一个百分比 不设置的话由于partsize过大 可能导致很长时间进度条都看不到效果
-          partSize: 102400 // 指定上传的每个分片的大小，范围为100 KB~5 GB。单个分片默认大小为1 * 1024 * 1024（即1 MB）
-        }).then(async response => {
-          console.log(response)
-          if (response.res.status === 200) {
-            _this.loading = false
-            _this.fileList.push({
-              id: credentials.path,
-              name: file.name,
-              url: credentials.pathAll
-            });
-            _this.handleChange(_this.fileList);
-            param.onSuccess()
-          }
-        }).catch(function (err) {
-          _this.loading = false
-          console.error('error: ', err)
-          param.onError()
-        })
-      }).catch(err => {
-        _this.loading = false
-        console.error('error: ', err)
-        param.onError()
-      })
-      // let formData = new FormData();
-      // if (Array.isArray(file)) {
-      //   // 选择多个文件
-      //   file.forEach((item) => {
-      //     formData.append(this.name, item.file);
-      //   });
-      // } else {
-      //   // 选择单个文件
-      //   formData.append(this.name, file.file);
-      // }
-      // this.loading = true;
-      // requestPost2(this.action, formData)
-      //   .then((res) => {
-      //     // 只能上传一个文件，将原文件清空再添加
-      //     if (!this.multiple) {
-      //       this.fileList = [];
-      //     }
-      //     this.onSuccess(res);
-      //   })
-      //   .catch((err) => {
-      //     this.onError(err);
-      //   });
-    },
-
-    // 上传成功
-    // onSuccess(res) {
-    //   if (res.code == 1) {
-    //     try {
-    //       res.result.mFilePath.forEach((path, index) => {
-    //         this.fileList.push({
-    //           id: res.result.idList[index],
-    //           name: res.result.mFileName[index],
-    //           url: path,
-    //           size: res.result.fileLengths[index] || "", // 文件大小
-    //         });
-    //       });
-    //       this.handleChange(this.fileList);
-    //       this.$message({
-    //         message: `上传成功！`,
-    //         type: "success",
-    //       });
-    //       this.loading = false;
-    //     } catch (error) {
-    //       console.log(error);
-    //       this.onError(error);
-    //     }
-    //   } else {
-    //     this.onError(res);
-    //   }
-    // },
-    // 上传失败
-    // onError(err) {
-    //   this.$message({
-    //     message: err.msg || `上传失败！`,
-    //     type: "error",
-    //   });
-    //   this.loading = false;
-    // },
-
-    handleChange(fileArr) {
-      let value = fileArr.length ? JSON.stringify(fileArr) : null;
-      this.$emit("update", value);
-      this.$emit("change", value);
-      this.onChange(value);
-    },
-  },
-};
-</script>

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

@@ -1,82 +0,0 @@
-<template>
-  <!-- 附件上传控件 -->
-  <div class="Fg-upload-temp">
-    <FormUpload v-model="formValue" v-bind="$attrs" @change="handleChange" />
-    <el-link
-      v-if="!$attrs.onlyShow"
-      class="Fg-upload-temp-link"
-      :href="href"
-      :type="type"
-      :icon="icon"
-      target="_blank"
-      :underline="false"
-    >
-      <span :style="$attrs.font">{{linkName}}</span>
-    </el-link>
-  </div>
-</template>
-<script>
-import FormUpload from "./formUpload.vue";
-export default {
-  name: "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>
-.Fg-upload-temp {
-  position: relative;
-  .Fg-upload-temp-link {
-    position: absolute;
-    top: 0;
-    left: 140px;
-  }
-}
-</style>

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

@@ -1,142 +0,0 @@
-<template>
-  <div class="form-user-picker">
-    <div v-if="!$attrs.onlyShow" :style="newStyle" style="margin-bottom: 5px">
-      <el-button
-        :disabled="disabled"
-        type="primary"
-        icon="el-icon-user"
-        round
-        size="small"
-        :style="newStyle"
-        @click="handleClick"
-      >选择人员</el-button>
-      <span class="form-user-picker--text">{{ placeholder }}</span>
-    </div>
-    <NameShow
-      v-if="selected.length"
-      :value="selected"
-      :props="dataObj.props"
-      :onlyShow="$attrs.onlyShow"
-      :readonly="readonly || disabled"
-      @change="handleDelete"
-    />
-    <UserPicker
-      ref="userPicker"
-      :data="dataObj"
-      :search="search"
-      :multiple="multiple"
-      type="user"
-      @callBack="handleSelect"
-    />
-  </div>
-</template>
-
-<script>
-import UserPicker from "../components/userPicker.vue";
-import NameShow from "../components/nameShow.vue";
-
-import { comMixin } from "../../../utils/comMixins";
-export default {
-  mixins: [comMixin],
-  name: "form-user-picker",
-  components: {
-    UserPicker,
-    NameShow,
-  },
-  model: {
-    prop: "value", // 绑定的值，通过父组件传递
-    event: "update",
-  },
-  props: {
-    // 绑定的输入值
-    value: {
-      type: [String],
-      default: "",
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    // 可打印
-    enablePrint: {
-      type: Boolean,
-      default: false,
-    },
-    placeholder: {
-      type: String,
-      default: "",
-    },
-
-    __config__: {
-      type: Object,
-      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.readonly) return;
-      this.$refs.userPicker.open(this.selected);
-    },
-    handleSelect(values) {
-      this.selected = values;
-      let newValue = null;
-      if (values.length) {
-        newValue = JSON.stringify(values);
-      }
-      this.$emit("update", newValue);
-      this.$emit("confirm", newValue);
-      this.$emit("validate", newValue);
-      this.onConfirm(newValue);
-    },
-    handleDelete(values) {
-      this.selected = values;
-      let newValue = null;
-      if (values.length) {
-        newValue = JSON.stringify(values);
-      }
-      this.$emit("update", newValue);
-      this.$emit("delete", newValue);
-      this.$emit("validate", newValue);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.form-user-picker {
-  .form-user-picker--text {
-    margin-left: 10px;
-    color: #c0c4cc;
-  }
-}
-</style>

package/src/components/formGenerator/formComponents/pcForm.vue

@@ -1,155 +0,0 @@
-<template>
-  <!-- 中间表单内容 -->
-  <el-form
-    class="pcForm"
-    :ref="formConf.formRef"
-    :size="formConf.size"
-    :model="formModel"
-    :label-position="formConf.labelPosition"
-    :disabled="formConf.disabled"
-    :label-width="formConf.labelWidth + 'px'"
-  >
-    <form-row-container
-      :list.sync="list"
-      :formConf="formConf"
-      :isEdit="false"
-      enabled
-      :isPreview="isPreview"
-      :onlyShow="onlyShow"
-      @selectHis="handleSelectHis"
-      @validate="validateItem"
-    />
-    <!-- <el-form-item v-if="formConf.formBtns">
-      <el-button type="primary" @click="validateForm(() => {})">提交</el-button>
-      <el-button @click="resetForm()">重置</el-button>
-    </el-form-item>-->
-  </el-form>
-</template>
-
-<script>
-import { deepClone, toCamelCase, traverseTree } from "../utils/index";
-export default {
-  name: "pcForm",
-  props: {
-    formList: {
-      type: Array,
-      default: () => [],
-    },
-    formConf: {
-      type: Object,
-      default: () => {},
-    },
-    onlyShow: {
-      type: Boolean,
-      default: false,
-    },
-    isPreview: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      formModel: {},
-      formArray: [],
-      list: [],
-    };
-  },
-
-  watch: {
-    formList: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        if (newValue) {
-          this.list = deepClone(newValue);
-        }
-      },
-    },
-    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((valid) => {
-        this.$emit("submit", this.list);
-        // 可以从外部传递方法
-        cb(valid, this.formArray, deepClone(this.list));
-      });
-    },
-    // 重置
-    resetForm() {
-      this.$refs[this.formConf.formRef].resetFields();
-      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);
-    },
-    // 单独校验某一个组件
-    validateItem(item) {
-      this.$nextTick(() => {
-        // 此处是为了解决级联组件只校验上一次结果，不校验当前结果的bug
-        if (this.$refs[this.formConf.formRef]) {
-          this.$refs[this.formConf.formRef].validateField([item.__vModel__]);
-        }
-      });
-    },
-    handleSelectHis(value) {
-      this.$emit("selectHis", value)
-    }
-  },
-};
-</script>
-
-<style lang="scss">
-</style>