info-from/src/views/info.vue

<template>
  <div class="container">
    <el-form label-position="left">
      <template v-for="(item, index) in fromData">
        <template v-if="item.type === 'upload'">
          <el-form-item :label="item.title" label-width="200px">
            <FileUpload
              v-model:modelValue="item.content"
              v-model:loaderData="loaderData"
            />
          </el-form-item>
        </template>
        <template v-if="item.type === 'input'">
          <el-form-item
            :label="item.title"
            label-width="200px"
            :required="
              item.title == '手机号' ||
              item.title == '微信号' ||
              item.title == '需要设计的内容'
            "
          >
            <el-input
              v-model="item.content"
              :placeholder="'请输入' + item.title"
            />
          </el-form-item>
        </template>
      </template>
      <el-button type="primary" @click="saveData">确认</el-button>
      <el-button type="primary" @click="handleDownload(loaderData)"
        >下载全部文件</el-button
      >
    </el-form>
    <div style="text-align: center; margin-top: 50px">
      闽ICP备2023014112号-1
    </div>
  </div>
</template>

<script setup>
import { getFormData, saveFormData } from "../api/index";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { handleBatchDownload } from "../utils/downFile";
const baseUrl = "https://dfdiyfile.oss-cn-fuzhou.aliyuncs.com/";
import { ref } from "vue";
import FileUpload from "../components/FileUpload/index";
const { currentRoute } = useRouter();
const tid = currentRoute.value.query.tid;
const userId = currentRoute.value.query.userId;

const fromData = ref([]);
const uploadList = ref([]);
const CeErpOrderFormData = ref({});
const loaderData = ref([]);
async function saveData() {
  let mobile = false;
  let wx = false;
  let need_content = false;
  let mobile_number = "123";
  fromData.value?.map((item) => {
    if (item.title == "手机号" && !item?.content) {
      mobile = true;
    }
    if (item.title == "手机号" && item?.content) {
      mobile_number = item?.content;
    }
    if (item.title == "微信号" && !item?.content) {
      wx = true;
    }
    if (item.title == "需要设计的内容" && !item?.content) {
      need_content = true;
    }
  });
  if (need_content) {
    return ElMessage({
      message: "需要设计的内容不能为空",
      type: "error",
    });
  }
  if (mobile && wx) {
    return ElMessage({
      message: "手机号或者微信号不能都为空",
      type: "error",
    });
  }
  let regex =
    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
  // if (mobile_number != "123" && !regex.test(mobile_number)) {
  //   return ElMessage({
  //     message: "请输入正确手机号",
  //     type: "error",
  //   });
  // }
  let data = await saveFormData({
    id: CeErpOrderFormData.value ? CeErpOrderFormData.value.id : 0,
    tid,
    userId,
    content: JSON.stringify(fromData.value),
  });
  if (data.type === "success") {
    ElMessage({
      message: "保存成功",
      type: "success",
    });
  }
}
async function getData() {
  if (!tid) {
    return ElMessage({
      message: "获取不到参数",
      type: "error",
    });
  }
  try {
    let data = await getFormData({ tid });
    if (data.code === 200) {
      let product = data.product;
      CeErpOrderFormData.value = data.CeErpOrderFormData;
      let info = {};
      let json_info = `[{"title":"logo文件上传/模板截图/设计素材上传等等~","type":"upload"},
            {"title":"需要设计的内容","type":"input"},
            {"title":"手机号","type":"input"},
            {"title":"微信号","type":"input"},
            {"title":"请上传微信二维码","type":"upload"}]`;
      if (!product) {
        product = {
          FormJson: json_info,
        };
      }
      if (CeErpOrderFormData.value && CeErpOrderFormData.value.content) {
        CeErpOrderFormData.value = {
          content: JSON.parse(CeErpOrderFormData.value.content),
          id: CeErpOrderFormData.value.ID,
          tid: CeErpOrderFormData.value.tid,
        };
        CeErpOrderFormData.value?.content.map((item) => {
          if (
            item.type == "upload" &&
            item.content &&
            typeof item.content == "string"
          ) {
            item.content?.split(",")?.map((e) => {
              loaderData.value.push(baseUrl + e);
            });
          }
        });
      }
      product.FormJson = json_info;
      if (product && product.FormJson != "") {
        let formJson = JSON.parse(product.FormJson);
        let need = true;
        formJson.map((item) => {
          if (item.type === "upload") {
            item.content = [];
          } else {
            item.content = "";
          }
          if (CeErpOrderFormData.value && CeErpOrderFormData.value.content) {
            CeErpOrderFormData.value.content.map((e) => {
              if (e.title === item.title && e.type === item.type) {
                item.content = e.content;
              }
            });
          }
          if (item.title == "手机号") {
            need = false;
          }
          if (item.title == "微信号") {
            need = false;
          }
        });

        if (need) {
          formJson.push(
            ...[
              { title: "手机号", type: "input" },
              { title: "微信号", type: "input" },
            ]
          );
        }
        fromData.value = formJson;
      }
    }
  } catch (error) {
    console.log("🚀 ~ file: info.vue:15 ~ getData ~ error:", error);
  }
}
function handleDownload(data) {
  handleBatchDownload(data);
}
getData();
</script>

<style scoped lang="scss">
.container {
  max-width: 1400px;
  margin: 0 auto;
}
</style>