完善form表单

src/components/testForm/index.vue

@@ -218,10 +218,17 @@
         inset
         v-for="(item, index) in formData[btnConfigCopy.prop]"
         :key="index"
-        style="margin-top: 10px !important"
       >
-        <div>
-          明细{{ index + 1 }} <span @click="handleRemove(index)">删除</span>
+        <div class="row">
+          <div>{{ btnConfigCopy.listTitle || "明细" }}{{ index + 1 }}</div>
+          <van-button
+            plain
+            type="primary"
+            @click="handleRemove(index)"
+            size="mini"
+            style="border: none; background: #ecebeb"
+            >删除</van-button
+          >
         </div>
         <!-- 循环表单数据 -->
         <div v-for="(i, sonIndex) in btnConfigCopy.listConfig" :key="i.prop">
@@ -299,7 +306,7 @@
       </div>
 
       <!-- 按钮 -->
-      <div class="btn-box">
+      <div class="btn-box" v-if="btnConfigCopy.isNeed">
         <van-button
           :plain="btnConfigCopy.plain ? btnConfigCopy.plain : false"
           :type="btnConfigCopy.itemType ? btnConfigCopy.itemType : 'primary'"
@@ -318,7 +325,7 @@
           }}</van-button
         >
       </div>
-      <div style="margin: 16px">
+      <div style="margin: 16px" v-show="!formOption.hiddenSubmitBtn">
         <van-button round block type="primary" native-type="submit">
           提交
         </van-button>
@@ -437,7 +444,6 @@ const selectDataEcho = (item, val) => {
 };
 
 let btnConfigCopy = {};
-const btnPickerList = ref([]);
 const formDataInit = (flag) => {
   if (!flag) {
     var map = {
@@ -452,42 +458,40 @@ const formDataInit = (flag) => {
     };
     // 判断是否需要按钮
     if (formOption.value.btnConfig && formOption.value.btnConfig.isNeed) {
-      formData.value[formOption.value.btnConfig.prop] = [];
       btnConfigCopy = { ...formOption.value.btnConfig };
-      if (
-        formOption.value.btnConfig.listConfig &&
-        formOption.value.btnConfig.listConfig.length > 0
-      ) {
-        btnPickerList.value = formOption.value.btnConfig.listConfig
-          .filter((x) => x.type === "picker")
-          .map((x) => x.itemType);
+      if (formData.value[btnConfigCopy.prop] === undefined) {
+        formData.value[btnConfigCopy.prop] = [];
       }
     }
     // 初始化默认值
     for (let i = 0; i < formConfig.value.length; i++) {
       const element = formConfig.value[i];
+      if (element.type === "cascader" && element.itemType === "city") {
+        cityOptionInit();
+        // formData.value[element.prop] = map[element.type];
+        // formData.value[element.prop + "Name"] = map[element.type];
+      }
       if (
         formData.value[element.prop] === undefined ||
         formData.value[element.prop] === ""
       ) {
         if (element.type === "slot") {
           continue;
-        } else if (element.type === "cascader" && element.itemType === "city") {
-          cityOptionInit();
-          formData.value[element.prop] = map[element.type];
-          formData.value[element.prop + "Name"] = map[element.type];
         } else if (element.type === "picker" || element.type === "cascader") {
-          formData.value[element.prop] = map[element.type];
-          formData.value[element.prop + "Name"] = map[element.type];
+          if (element.itemType !== "datePicker") {
+            formData.value[element.prop] = map[element.type];
+            formData.value[element.prop + "Name"] = map[element.type];
+          }
         } else if (map[element.type] != undefined) {
           formData.value[element.prop] = map[element.type];
         }
       }
     }
   } else {
+    // 选择框值回显
     for (let i = 0; i < formConfig.value.length; i++) {
       const element = formConfig.value[i];
-      if (element.type === "picker") {
+      if (element.type === "picker" && element.itemType !== "datePicker") {
         formData.value[element.prop + "Name"] = selectDataEcho(
           element,
           formData.value[element.prop]
@@ -499,7 +503,30 @@ const formDataInit = (flag) => {
         );
       }
     }
+    if (formOption.value.btnConfig && formOption.value.btnConfig.isNeed) {
+      const list = formData.value[btnConfigCopy.prop];
+      for (let i = 0; i < list.length; i++) {
+        const x = list[i];
+        for (let j = 0; j < btnConfigCopy.listConfig.length; j++) {
+          const listEle = btnConfigCopy.listConfig[j];
+          if (
+            listEle.type === "picker" &&
+            listEle.itemType &&
+            listEle.itemType !== "datePicker"
+          ) {
+            formData.value[btnConfigCopy.prop][i][listEle.prop + "Name"] =
+              selectDataEcho(
+                listEle,
+                formData.value[btnConfigCopy.prop][i][listEle.prop]
+              );
+          } else {
+            continue;
+          }
+        }
+      }
+    }
   }
+  console.log(formData.value, "表单值");
   emit("update:modelValue", formData.value);
 };
 
@@ -602,7 +629,7 @@ const getAreaInfo = (selectedOptions, item, index) => {
             .map((item) => item.text)
             .join(" ");
           formConfig.value[index].showPicker = false;
-          formData.value.selectedOptions = selectedOptions;
+          formData.value.cityObj = selectedOptions;
           return;
         }
       }
@@ -611,7 +638,7 @@ const getAreaInfo = (selectedOptions, item, index) => {
           .map((item) => item.text)
           .join(" ");
         formConfig.value[index].showPicker = false;
-        formData.value.selectedOptions = selectedOptions;
+        formData.value.cityObj = selectedOptions;
         return;
       }
       if (selectedOptions.tabIndex === 0) {
@@ -754,4 +781,14 @@ defineExpose({
   width: 100%;
   text-align: center;
 }
+.row {
+  color: #999999;
+  background: #ecebeb;
+  height: 32px;
+  line-height: 32px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 15px;
+}
 </style>

src/views/MES/produceManage/completeProject1/index.vue

@@ -35,11 +35,13 @@ const formOption = reactive({
   labelAlign: "top",
   scroll: true,
   labelWidth: "62pk",
+  // hiddenSubmitBtn: true,
   btnConfig: {
     isNeed: true,
     label: "明细",
     prop: "list",
     plain: true,
+    // itemType: "default",
     listConfig: [
       {
         type: "input",
@@ -56,6 +58,7 @@ const formOption = reactive({
         itemType: "onePicker",
         showPicker: false,
         readonly: false,
+        // 指定label、value
         fieldNames: {
           text: "att",
           value: "id",
@@ -79,14 +82,13 @@ const formOption = reactive({
         prop: "date",
         itemType: "datePicker",
         showPicker: false,
-        split: "-",
+        split: "-", //时间分隔符
         columnsType: ["year", "month"], //只选年月
       },
     ],
     clickFn: () => {
       formData.data.list.push({
         name: "cz",
-        showPicker: false,
       });
     },
   },
@@ -185,6 +187,7 @@ const formConfig = reactive([
     prop: "common",
     itemType: "common",
     showPicker: false,
+    // options: classification.value,
     options: [],
     fieldNames: {
       text: "label",
@@ -234,18 +237,51 @@ const formData = reactive({
     reamlke: "beizhu回显",
     select: "1",
     date: "2022-01-09",
-    common: "1640595238534144001",
-    city: "1",
+    common: "1651135364980989953",
+    city: "22",
     cityName: "合肥",
-    fileList: [
+    // fileList: [
+    //   {
+    //     url: "https://os.winfaster.cn/byteSailing/test/2023/04/25/2e13ecba1978472d9e97fcec6335c975.png",
+    //     fileName: "board-2.png",
+    //   },
+    // ],
+    list: [
+      {
+        name: "qqq",
+        select: "1",
+        date: "2022-01",
+      },
       {
-        url: "https://os.winfaster.cn/byteSailing/test/2023/04/25/2e13ecba1978472d9e97fcec6335c975.png",
-        fileName: "board-2.png",
+        name: "www",
+        select: "2",
+        date: "2023-01",
       },
     ],
   },
 });
 const onSubmit = () => {
+  // 城市级联选择器和上传附件数据需手动赋值
+  if (formData.data.fileList && formData.data.fileList.length > 0) {
+    formData.data.fileList = formData.data.fileList.map((item) => ({
+      id: item.id,
+      fileName: item.fileName,
+    }));
+  } else {
+    formData.data.fileList = [];
+  }
+  if (formData.data.cityObj) {
+    formData.data.countryId =
+      formData.data.cityObj.selectedOptions[0].value;
+    formData.data.provinceId =
+      formData.data.cityObj.tabIndex === 2
+        ? formData.data.cityObj.selectedOptions[1].value
+        : null;
+    formData.data.cityId =
+      formData.data.cityObj.tabIndex === 1
+        ? formData.data.cityObj.selectedOptions[1].value
+        : formData.data.cityObj.selectedOptions[2].value;
+  }
   console.log(formData.data, "wssa");
 };
 // getList();