first commit

src/views/info.vue

@@ -0,0 +1,201 @@
+<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>