表单组件

src/components/testForm/index.vue

@@ -19,9 +19,11 @@
             :type="i.itemType ? i.itemType : 'text'"
             :placeholder="i.placeholder ? i.placeholder : '请输入'"
             :clearable="i.clearable ? i.clearable : false"
+            :readonly="i.readonly != undefined ? i.readonly : false"
             :rules="getRules(i.prop)"
           >
           </van-field>
+          <!-- switch -->
           <van-field v-if="i.type == 'switch'" :label="i.label" :name="i.prop">
             <template #input>
               <van-switch v-model="formData[i.prop]" />
@@ -77,8 +79,9 @@
             :name="i.prop"
             v-model="formData[i.prop + 'Name']"
             is-link
-            readonly
-            @click="i.showPicker = true"
+            :readonly="i.readonly != undefined ? i.readonly : true"
+            :placeholder="i.placeholder ? i.placeholder : '请选择'"
+            @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
             :rules="getRules(i.prop)"
           >
           </van-field>
@@ -90,6 +93,9 @@
           >
             <van-picker
               :columns="i.pickerOption.columns"
+              :columns-field-names="
+                i.fieldNames ? i.fieldNames : onePickerFieldNames
+              "
               @cancel="i.showPicker = false"
               @confirm="(option) => onConfirmPicker(option, i, index)"
             />
@@ -101,8 +107,9 @@
             :name="i.prop"
             v-model="formData[i.prop]"
             is-link
-            readonly
-            @click="i.showPicker = true"
+            :readonly="i.readonly != undefined ? i.readonly : true"
+            :placeholder="i.placeholder ? i.placeholder : '请选择'"
+            @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
             :rules="getRules(i.prop)"
           >
           </van-field>
@@ -127,8 +134,9 @@
             :name="i.prop"
             v-model="formData[i.prop + 'Name']"
             is-link
-            readonly
-            @click="i.showPicker = true"
+            :readonly="i.readonly != undefined ? i.readonly : true"
+            :placeholder="i.placeholder ? i.placeholder : '请选择'"
+            @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
             :rules="getRules(i.prop)"
           />
           <van-popup
@@ -146,7 +154,6 @@
               @finish="(option) => (i.finishFn ? i.finishFn(option) : () => {})"
             />
           </van-popup>
-
           <!-- 级联 公共 -->
           <van-field
             v-if="i.type == 'cascader' && i.itemType == 'common'"
@@ -154,8 +161,9 @@
             :name="i.prop"
             v-model="formData[i.prop + 'Name']"
             is-link
-            readonly
-            @click="i.showPicker = true"
+            :readonly="i.readonly != undefined ? i.readonly : true"
+            :placeholder="i.placeholder ? i.placeholder : '请选择'"
+            @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
             :rules="getRules(i.prop)"
           />
           <van-popup
@@ -182,7 +190,19 @@
                 (option) => (i.finishFn ? i.finishFn(i, option) : () => {})
               " -->
           </van-popup>
-
+          <!-- 文件上传 -->
+          <van-field name="uploader" v-if="i.type == 'upload'" :label="i.label">
+            <template #input>
+              <van-uploader
+                v-model="formData[i.prop]"
+                :after-read="afterRead"
+                multiple
+                :max-count="9"
+                :max-size="5 * 1024 * 1024"
+                @oversize="onOversize"
+              />
+            </template>
+          </van-field>
           <!-- 插槽 -->
           <van-field v-if="i.type == 'slot'" :label="i.label">
             <template #input>
@@ -213,6 +233,7 @@
             :type="i.itemType ? i.itemType : 'text'"
             :placeholder="i.placeholder ? i.placeholder : '请输入'"
             :clearable="i.clearable ? i.clearable : false"
+            :readonly="i.readonly != undefined ? i.readonly : false"
             :rules="getRules(i.prop)"
           >
           </van-field>
@@ -223,7 +244,8 @@
             :name="i.prop"
             v-model="formData[btnConfigCopy.prop][index][i.prop + 'Name']"
             is-link
-            readonly
+            :readonly="i.readonly != undefined ? i.readonly : true"
+            :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="handleListItemClick(i, index, sonIndex)"
             :rules="getRules(i.prop)"
           >
@@ -235,7 +257,8 @@
             :name="i.prop"
             v-model="formData[btnConfigCopy.prop][index][i.prop]"
             is-link
-            readonly
+            :readonly="i.readonly != undefined ? i.readonly : true"
+            :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="handleListItemClick(i, index, sonIndex)"
             :rules="getRules(i.prop)"
           >
@@ -252,6 +275,9 @@
         >
           <van-picker
             :columns="item.pickerOption.columns"
+            :columns-field-names="
+              item.fieldNames ? item.fieldNames : onePickerFieldNames
+            "
             @cancel="item.showPicker = false"
             @confirm="(option) => onConfirmListPicker(option, item)"
           />
@@ -336,8 +362,13 @@ const { formConfig, formOption, rules } = toRefs(props);
 const formData = computed(() => {
   return proxy.modelValue;
 });
-//
-const fieldNames = { text: "label", value: "id" };
+const cityOption = ref([]);
+const fileList = ref([]);
+const fieldNames = { text: "label", value: "id", children: "children" };
+const onePickerFieldNames = {
+  text: "text",
+  value: "value",
+};
 const emit = defineEmits(["update:modelValue"]);
 
 const onSubmit = () => {
@@ -355,9 +386,8 @@ const getReadonly = (i) => {
 };
 
 // 国家初始化
-const cityOption = ref([]);
 const cityOptionInit = () => {
-  proxy.post("/areaInfo/list", formData.value).then((res) => {
+  proxy.post("/areaInfo/list", { parentId: "0" }).then((res) => {
     cityOption.value = res.data.map((item, index) => {
       return {
         ...item,
@@ -369,59 +399,125 @@ const cityOptionInit = () => {
     });
   });
 };
+const recursionFn = (arr, val, valueAtt, childrenAtt) => {
+  for (let i = 0; i < arr.length; i++) {
+    const e = arr[i];
+    if (e[valueAtt] !== val) {
+      if (e[childrenAtt] && e[childrenAtt].length > 0) {
+        const current = recursionFn(e.children, val, valueAtt, childrenAtt);
+        if (current) {
+          return current;
+        }
+      }
+    } else {
+      return e;
+    }
+  }
+};
+const selectDataEcho = (item, val) => {
+  if (item.type === "picker" && item.itemType === "onePicker") {
+    const textAtt = item.fieldNames
+      ? item.fieldNames.text
+      : onePickerFieldNames.text;
+    const valueAtt = item.fieldNames
+      ? item.fieldNames.value
+      : onePickerFieldNames.value;
+    const current = item.pickerOption.columns.find((x) => x[valueAtt] === val);
+    return current ? current[textAtt] : "";
+  } else if (item.type === "cascader" && item.itemType === "common") {
+    const textAtt = item.fieldNames ? item.fieldNames.text : fieldNames.text;
+    const valueAtt = item.fieldNames ? item.fieldNames.value : fieldNames.value;
+    const childrenAtt = item.fieldNames
+      ? item.fieldNames.children
+      : fieldNames.children;
+    const arr = item.options ? item.options : [];
+    const current = recursionFn(arr, val, valueAtt, childrenAtt);
+    return current ? current[textAtt] : "";
+  }
+};
 
 let btnConfigCopy = {};
 const btnPickerList = ref([]);
-const formDataInit = () => {
-  var map = {
-    input: "",
-    radio: "",
-    switch: false,
-    checkbox: [],
-    date: "",
-    picker: "",
-    cascader: "",
-  };
-  // 判断是否需要按钮
-  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);
-    }
-  }
-  for (let i = 0; i < formConfig.value.length; i++) {
-    const element = formConfig.value[i];
-    if (element.type === "slot") {
-      continue;
-    }
-    if (element.type === "cascader" && element.itemType === "city") {
-      cityOptionInit();
+const formDataInit = (flag) => {
+  if (!flag) {
+    var map = {
+      input: "",
+      radio: "",
+      switch: false,
+      checkbox: [],
+      date: "",
+      picker: "",
+      cascader: "",
+      upload: [],
+    };
+    // 判断是否需要按钮
+    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 (element.type === "picker" || element.type === "cascader") {
-      formData.value[element.prop] = map[element.type];
-      formData.value[element.prop + "Name"] = map[element.type];
+    // 初始化默认值
+    for (let i = 0; i < formConfig.value.length; i++) {
+      const element = formConfig.value[i];
+      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];
+        } else if (map[element.type] != undefined) {
+          formData.value[element.prop] = map[element.type];
+        }
+      }
     }
-    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") {
+        formData.value[element.prop + "Name"] = selectDataEcho(
+          element,
+          formData.value[element.prop]
+        );
+      } else if (element.type === "cascader" && element.itemType === "common") {
+        formData.value[element.prop + "Name"] = selectDataEcho(
+          element,
+          formData.value[element.prop]
+        );
+      }
     }
   }
   emit("update:modelValue", formData.value);
-  console.log(formData.value, "aws");
 };
 
-formDataInit();
+formDataInit(false);
 // 选择框  确定事件
 const onConfirmPicker = (option, item, index) => {
   switch (item.itemType) {
     case "onePicker": {
-      formData.value[item.prop + "Name"] = option.selectedOptions[0].text;
-      formData.value[item.prop] = option.selectedOptions[0].value;
+      formData.value[item.prop + "Name"] =
+        option.selectedOptions[0][
+          item.fieldNames.text ? item.fieldNames.text : onePickerFieldNames.text
+        ];
+      formData.value[item.prop] =
+        option.selectedOptions[0][
+          item.fieldNames.value
+            ? item.fieldNames.value
+            : onePickerFieldNames.value
+        ];
       formConfig.value[index].showPicker = false;
     }
     case "datePicker": {
@@ -435,18 +531,35 @@ const onConfirmPicker = (option, item, index) => {
 const currentIndex = ref(-1);
 const currentSonIndex = ref(-1);
 const handleListItemClick = (i, index, sonIndex) => {
-  currentIndex.value = index;
-  currentSonIndex.value = sonIndex;
-  btnConfigCopy.listConfig[sonIndex].showPicker = true;
+  if (i.readonly && i.readonly === true) {
+    return;
+  }
+  if (i.readonly !== undefined && i.readonly === false) {
+    currentIndex.value = index;
+    currentSonIndex.value = sonIndex;
+    btnConfigCopy.listConfig[sonIndex].showPicker = true;
+  }
+  if (!formOption.value.readonly) {
+    currentIndex.value = index;
+    currentSonIndex.value = sonIndex;
+    btnConfigCopy.listConfig[sonIndex].showPicker = true;
+  }
 };
 const onConfirmListPicker = (option, item) => {
   switch (item.itemType) {
     case "onePicker": {
       formData.value[btnConfigCopy.prop][currentIndex.value][
         item.prop + "Name"
-      ] = option.selectedOptions[0].text;
+      ] =
+        option.selectedOptions[0][
+          item.fieldNames.text ? item.fieldNames.text : onePickerFieldNames.text
+        ];
       formData.value[btnConfigCopy.prop][currentIndex.value][item.prop] =
-        option.selectedOptions[0].value;
+        option.selectedOptions[0][
+          item.fieldNames.value
+            ? item.fieldNames.value
+            : onePickerFieldNames.value
+        ];
       btnConfigCopy.listConfig[currentSonIndex.value].showPicker = false;
     }
     case "datePicker": {
@@ -538,14 +651,86 @@ const getAreaInfo = (selectedOptions, item, index) => {
     });
 };
 // 城市变动事件
-const cityOnChange = (selectedOptions, item, index) => {
-  getAreaInfo(selectedOptions, item, index);
+const cityOnChange = (options, item, index) => {
+  getAreaInfo(options, item, index);
 };
 
 const commonOnChange = ({ selectedOptions }, item, index) => {
   formData.value[item.prop + "Name"] =
     selectedOptions[selectedOptions.length - 1].label;
 };
+// 文件上传
+const onOversize = () => {
+  showToast("文件大小不能超过 5MB");
+};
+
+const afterRead = (file) => {
+  if (file && file.length > 0) {
+    for (let i = 0; i < file.length; i++) {
+      file[i].status = "uploading";
+      file[i].message = "上传中...";
+      proxy.post("/fileInfo/getSing", { fileName: file[i].file.name }).then(
+        (res) => {
+          let forms = new FormData();
+          forms.append("file", file[i].file);
+          proxy
+            .post("https://winfaster.obs.cn-south-1.myhuaweicloud.com", {
+              ...res.data.uploadBody,
+              file: forms.get("file"),
+            })
+            .then(
+              () => {
+                file[i].id = res.data.id;
+                file[i].url = res.data.fileUrl;
+                file[i].fileName = res.data.fileName;
+                delete file[i].status;
+                delete file[i].message;
+              },
+              () => {
+                file[i].status = "failed";
+                file[i].message = "上传失败";
+              }
+            );
+        },
+        () => {
+          file[i].status = "failed";
+          file[i].message = "上传失败";
+        }
+      );
+    }
+  } else {
+    file.status = "uploading";
+    file.message = "上传中...";
+    proxy.post("/fileInfo/getSing", { fileName: file.file.name }).then(
+      (res) => {
+        let forms = new FormData();
+        forms.append("file", file.file);
+        proxy
+          .post("https://winfaster.obs.cn-south-1.myhuaweicloud.com", {
+            ...res.data.uploadBody,
+            file: forms.get("file"),
+          })
+          .then(
+            () => {
+              file.id = res.data.id;
+              file.url = res.data.fileUrl;
+              file.fileName = res.data.fileName;
+              delete file.status;
+              delete file.message;
+            },
+            () => {
+              file.status = "failed";
+              file.message = "上传失败";
+            }
+          );
+      },
+      () => {
+        file.status = "failed";
+        file.message = "上传失败";
+      }
+    );
+  }
+};
 const testForm = ref(null); // 延迟使用，因为还没有返回跟挂载
 watch(
   formData.value,
@@ -556,6 +741,11 @@ watch(
     deep: true,
   }
 );
+
+defineExpose({
+  formDataInit,
+});
+// onMounted(() => {});
 </script>
 
 <style lang="scss" scoped>

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

@@ -30,7 +30,7 @@ const classification = ref([]);
 const proxy = getCurrentInstance().proxy;
 const formDom = ref(null);
 const formOption = reactive({
-  readonly: false,
+  readonly: false, //用于控制整个表单是否只读
   disabled: false,
   labelAlign: "top",
   scroll: true,
@@ -47,6 +47,7 @@ const formOption = reactive({
         label: "姓名",
         prop: "name",
         clearable: true,
+        readonly: true,
       },
       {
         type: "picker",
@@ -54,15 +55,20 @@ const formOption = reactive({
         prop: "select",
         itemType: "onePicker",
         showPicker: false,
+        readonly: false,
+        fieldNames: {
+          text: "att",
+          value: "id",
+        },
         pickerOption: {
           columns: [
             {
-              text: "100",
-              value: "1",
+              att: "ceshi",
+              id: "1",
             },
             {
-              text: "2000",
-              value: "2",
+              att: "ceshi1",
+              id: "2",
             },
           ],
         },
@@ -106,56 +112,60 @@ const formConfig = reactive([
     label: "密码",
     prop: "password",
   },
-  {
-    type: "switch",
-    label: "开关",
-    prop: "switch1",
-  },
-  {
-    type: "checkbox",
-    label: "复选框组",
-    prop: "checkbox",
-    data: [
-      {
-        text: "1",
-        value: "1",
-      },
-      {
-        text: "2",
-        value: "2",
-      },
-    ],
-  },
-  {
-    type: "radio",
-    label: "单选框",
-    prop: "radio",
-    data: [
-      {
-        label: "dan1",
-        id: "10",
-      },
-      {
-        title: "dan2",
-        value: "20",
-      },
-    ],
-  },
+  // {
+  //   type: "switch",
+  //   label: "开关",
+  //   prop: "switch1",
+  // },
+  // {
+  //   type: "checkbox",
+  //   label: "复选框组",
+  //   prop: "checkbox",
+  //   data: [
+  //     {
+  //       text: "1",
+  //       value: "1",
+  //     },
+  //     {
+  //       text: "2",
+  //       value: "2",
+  //     },
+  //   ],
+  // },
+  // {
+  //   type: "radio",
+  //   label: "单选框",
+  //   prop: "radio",
+  //   data: [
+  //     {
+  //       label: "dan1",
+  //       id: "10",
+  //     },
+  //     {
+  //       title: "dan2",
+  //       value: "20",
+  //     },
+  //   ],
+  // },
   {
     type: "picker",
     label: "选择器",
     prop: "select",
     itemType: "onePicker",
     showPicker: false,
+    fieldNames: {
+      text: "label",
+      value: "id",
+    },
     pickerOption: {
       columns: [
         {
-          text: "100",
-          value: "1",
+          label: "值1",
+          id: "1",
         },
         {
-          text: "2000",
-          value: "2",
+          label: "值2",
+          id: "2",
         },
       ],
     },
@@ -179,13 +189,14 @@ const formConfig = reactive([
     fieldNames: {
       text: "label",
       value: "id",
+      children: "children",
     },
-    onChangeFn: (option) => {
-      // console.log("aa");
-    },
-    finishFn: (current, option) => {
-      current.showPicker = false;
-    },
+    // onChangeFn: (option) => {
+    //   // console.log("aa");
+    // },
+    // finishFn: (current, option) => {
+    //   current.showPicker = false;
+    // },
   },
   {
     type: "cascader",
@@ -194,6 +205,11 @@ const formConfig = reactive([
     itemType: "city",
     showPicker: false,
   },
+  {
+    type: "upload",
+    label: "上传qqq",
+    prop: "fileList",
+  },
   // {
   //   type: "slot",
   //   slotName: "测试",
@@ -209,10 +225,25 @@ const rules = {
   select: [{ required: true, message: "请选择" }],
   date: [{ required: true, message: "请选择时间" }],
   common: [{ required: true, message: "请选择级联" }],
-  city: [{ required: true, message: "请选择城市" }],
+  // city: [{ required: true, message: "请选择城市" }],
 };
 const formData = reactive({
-  data: {},
+  data: {
+    name: "scz",
+    password: "123456789",
+    reamlke: "beizhu回显",
+    select: "1",
+    date: "2022-01-09",
+    common: "1640595238534144001",
+    city: "1",
+    cityName: "合肥",
+    fileList: [
+      {
+        url: "https://os.winfaster.cn/byteSailing/test/2023/04/25/2e13ecba1978472d9e97fcec6335c975.png",
+        fileName: "board-2.png",
+      },
+    ],
+  },
 });
 const onSubmit = () => {
   console.log(formData.data, "wssa");
@@ -227,7 +258,8 @@ onMounted(() => {
       const index = formConfig.findIndex(
         (x) => x.type == "cascader" && x.itemType == "common"
       );
-      formConfig[index].options = [...classification.value];
+      formConfig[index].options = classification.value;
+      formDom.value.formDataInit(true);
     });
 });
 </script>

src/views/procurementManagement/supplierConfig/add.vue

@@ -1,51 +1,118 @@
 <template>
-	<div class="form">
-		<van-nav-bar title="供应商管理" left-text="返回" left-arrow @click-left="onClickLeft"> </van-nav-bar>
-		<van-form @submit="onSubmit" label-align="top" style="margin-top: 20px; overflow-y: auto">
-			<van-cell-group inset>
-				<van-field v-model="formData.typeName" is-link readonly label="供应商类型" placeholder="请选择供应商类型"
-					@click="typeModal = true" :rules="[{ required: true, message: '供应商类型不能为空' }]" required />
-				<van-popup v-model:show="typeModal" position="bottom">
-					<van-picker :columns="classification" @confirm="onConfirmType" @cancel="typeModal = false" />
-				</van-popup>
+  <div class="form">
+    <van-nav-bar
+      title="供应商管理"
+      left-text="返回"
+      left-arrow
+      @click-left="onClickLeft"
+    >
+    </van-nav-bar>
+    <van-form
+      @submit="onSubmit"
+      label-align="top"
+      style="margin-top: 20px; overflow-y: auto"
+    >
+      <van-cell-group inset>
+        <van-field
+          v-model="formData.typeName"
+          is-link
+          readonly
+          label="供应商类型"
+          placeholder="请选择供应商类型"
+          @click="typeModal = true"
+          :rules="[{ required: true, message: '供应商类型不能为空' }]"
+          required
+        />
+        <van-popup v-model:show="typeModal" position="bottom">
+          <van-picker
+            :columns="classification"
+            @confirm="onConfirmType"
+            @cancel="typeModal = false"
+          />
+        </van-popup>
 
-				<van-field v-model="formData.name" name="供应商名称" label="供应商名称" placeholder="请填写供应商名称"
-					:rules="[{ required: true, message: '供应商名称不能为空' }]" required />
+        <van-field
+          v-model="formData.name"
+          name="供应商名称"
+          label="供应商名称"
+          placeholder="请填写供应商名称"
+          :rules="[{ required: true, message: '供应商名称不能为空' }]"
+          required
+        />
 
-				<van-field v-model="formData.cityName" is-link readonly label="所在城市" placeholder="选择所在城市"
-					@click="cityModal = true" :rules="[{ required: true, message: '所在城市不能为空' }]" required />
-				<van-popup v-model:show="cityModal" round position="bottom">
-					<van-cascader v-model="formData.city" title="请选择所在地区" :options="areaInfo" @close="showArea = false"
-						@change="cityOnChange" @finish="getAreaInfo" />
+        <van-field
+          v-model="formData.cityName"
+          is-link
+          readonly
+          label="所在城市"
+          placeholder="选择所在城市"
+          @click="cityModal = true"
+          :rules="[{ required: true, message: '所在城市不能为空' }]"
+          required
+        />
+        <van-popup v-model:show="cityModal" round position="bottom">
+          <van-cascader
+            v-model="formData.city"
+            title="请选择所在地区"
+            :options="areaInfo"
+            @close="showArea = false"
+            @change="cityOnChange"
+            @finish="getAreaInfo"
+          />
+        </van-popup>
+        <van-field
+          v-model="formData.areaDetail"
+          rows="3"
+          type="textarea"
+          name="详细地址"
+          label="详细地址"
+          placeholder="请填写详细地址"
+        />
 
-				</van-popup>
-				<van-field v-model="formData.areaDetail" rows="3" type="textarea" name="详细地址" label="详细地址"
-					placeholder="请填写详细地址" />
+        <van-field
+          v-model="formData.contactPerson"
+          name="联系人"
+          label="联系人"
+          placeholder="请填写联系人"
+          :rules="[{ required: true, message: '联系人不能为空' }]"
+          required
+        />
 
-				<van-field v-model="formData.contactPerson" name="联系人" label="联系人" placeholder="请填写联系人"
-					:rules="[{ required: true, message: '联系人不能为空' }]" required />
-
-				<van-field v-model="formData.contactNumber" name="联系电话" label="联系电话" placeholder="请填写联系电话"
-					:rules="[{ required: true, message: '联系电话不能为空' }]" required />
-				<van-field name="uploader" label="文件上传">
-					<template #input>
-						<van-uploader v-model="fileList" :after-read="afterRead" multiple :max-count="9"
-							:max-size="5 * 1024 * 1024" @oversize="onOversize" />
-					</template>
-				</van-field>
-			</van-cell-group>
-			<div style="margin: 16px">
-				<van-button round block type="primary" native-type="submit"> 提交 </van-button>
-			</div>
-		</van-form>
-	</div>
+        <van-field
+          v-model="formData.contactNumber"
+          name="联系电话"
+          label="联系电话"
+          placeholder="请填写联系电话"
+          :rules="[{ required: true, message: '联系电话不能为空' }]"
+          required
+        />
+        <van-field name="uploader" label="文件上传">
+          <template #input>
+            <van-uploader
+              v-model="fileList"
+              :after-read="afterRead"
+              multiple
+              :max-count="9"
+              :max-size="5 * 1024 * 1024"
+              @oversize="onOversize"
+            />
+          </template>
+        </van-field>
+      </van-cell-group>
+      <div style="margin: 16px">
+        <van-button round block type="primary" native-type="submit">
+          提交
+        </van-button>
+      </div>
+    </van-form>
+  </div>
 </template>
   
 <script setup>
 import { ref, getCurrentInstance, onMounted } from "vue";
 import { showSuccessToast, showToast } from "vant";
 import { useRoute } from "vue-router";
-import { showLoadingToast, closeToast, showNotify } from 'vant';
+import { showLoadingToast, closeToast, showNotify } from "vant";
 
 const proxy = getCurrentInstance().proxy;
 const route = useRoute();
@@ -54,231 +121,259 @@ const typeModal = ref(false);
 const cityModal = ref(false);
 const areaInfo = ref([]);
 const classification = ref([
-	{
-		text: "贸易商",
-		value: 1,
-	},
-	{
-		text: "工厂",
-		value: 2,
-	}
+  {
+    text: "贸易商",
+    value: 1,
+  },
+  {
+    text: "工厂",
+    value: 2,
+  },
 ]);
 const fieldNames = {
-	text: "label",
-	value: "id",
+  text: "label",
+  value: "id",
 };
 const typeList = ref([
-	{
-		text: "原料",
-		value: "1",
-	},
-	{
-		text: "辅料",
-		value: "2",
-	},
-	{
-		text: "配件",
-		value: "3",
-	},
-	{
-		text: "包材",
-		value: "4",
-	},
-	{
-		text: "其他",
-		value: "5",
-	},
+  {
+    text: "原料",
+    value: "1",
+  },
+  {
+    text: "辅料",
+    value: "2",
+  },
+  {
+    text: "配件",
+    value: "3",
+  },
+  {
+    text: "包材",
+    value: "4",
+  },
+  {
+    text: "其他",
+    value: "5",
+  },
 ]);
 
 const formData = ref({
-	id: null,
-	definition: "2",
-	productClassifyId: null,
-	productClassifyName: null,
-	code: null,
-	customCode: null,
-	type: null,
-	typeName: null,
-	name: null,
-	spec: null,
-	unit: null,
-	remark: null,
-	fileList: [],
+  id: null,
+  definition: "2",
+  productClassifyId: null,
+  productClassifyName: null,
+  code: null,
+  customCode: null,
+  type: null,
+  typeName: null,
+  name: null,
+  spec: null,
+  unit: null,
+  remark: null,
+  fileList: [],
 });
 const onConfirmType = ({ selectedOptions }) => {
-	formData.value.type = selectedOptions[0].value;
-	formData.value.typeName = selectedOptions[0].text;
-	typeModal.value = false;
+  formData.value.type = selectedOptions[0].value;
+  formData.value.typeName = selectedOptions[0].text;
+  typeModal.value = false;
 };
 const cityOnChange = (selectedOptions) => {
-
-	getAreaInfo(selectedOptions)
+  getAreaInfo(selectedOptions);
 };
 const onConfirmCity = (selectedOptions) => {
-	console.log(selectedOptions)
+  console.log(selectedOptions);
 };
 
 const getAreaInfo = (selectedOptions) => {
-	showLoadingToast('加载中...');
-	proxy.post("/areaInfo/list", { parentId: selectedOptions.value }).then((res) => {
-		let countryIndex = selectedOptions.selectedOptions[0].index;
-		let provinceIndex = selectedOptions.tabIndex === 1 ? selectedOptions.selectedOptions[1].index : null;
-		let cityIndex = selectedOptions.tabIndex === 2 ? selectedOptions.selectedOptions[2].index : null;
-		//已经没有下级数据
-		if (res.data.length === 0) {
-			if (selectedOptions.tabIndex === 1) {
-				formData.value.cityName = selectedOptions.selectedOptions.map((item) => item.text).join(' ');
-				cityModal.value = false;
-				formData.value.selectedOptions = selectedOptions;
-				return;
-			}
-		}
-		if (selectedOptions.tabIndex === 2) {
-			formData.value.cityName = selectedOptions.selectedOptions.map((item) => item.text).join(' ');
-			cityModal.value = false;
-			formData.value.selectedOptions = selectedOptions;
-			return;
-		}
-		if (selectedOptions.tabIndex === 0) {
-			areaInfo.value[countryIndex].children = res.data.map((item, index) => {
-				return {
-					...item,
-					index: index,
-					text: item.name,
-					value: item.id,
-				};
-			});
-		} else if (selectedOptions.tabIndex === 1) {
-			areaInfo.value[countryIndex].children[provinceIndex].children = res.data.map((item, index) => {
-				return {
-					...item,
-					index: index,
-					text: item.name,
-					value: item.id,
-				};
-			});
-		} else if (selectedOptions.tabIndex === 2) {
-			areaInfo.value[countryIndex].children[provinceIndex].children[cityIndex].children = res.data.map((item, index) => {
-				return {
-					...item,
-					index: index,
-					text: item.name,
-					value: item.id,
-				};
-			});
-		}
-		console.log(areaInfo)
-		closeToast();
-	});
+  showLoadingToast("加载中...");
+  proxy
+    .post("/areaInfo/list", { parentId: selectedOptions.value })
+    .then((res) => {
+      let countryIndex = selectedOptions.selectedOptions[0].index;
+      let provinceIndex =
+        selectedOptions.tabIndex === 1
+          ? selectedOptions.selectedOptions[1].index
+          : null;
+      let cityIndex =
+        selectedOptions.tabIndex === 2
+          ? selectedOptions.selectedOptions[2].index
+          : null;
+      //已经没有下级数据
+      if (res.data.length === 0) {
+        if (selectedOptions.tabIndex === 1) {
+          formData.value.cityName = selectedOptions.selectedOptions
+            .map((item) => item.text)
+            .join(" ");
+          cityModal.value = false;
+          formData.value.selectedOptions = selectedOptions;
+          return;
+        }
+      }
+      if (selectedOptions.tabIndex === 2) {
+        formData.value.cityName = selectedOptions.selectedOptions
+          .map((item) => item.text)
+          .join(" ");
+        cityModal.value = false;
+        formData.value.selectedOptions = selectedOptions;
+        return;
+      }
+      if (selectedOptions.tabIndex === 0) {
+        areaInfo.value[countryIndex].children = res.data.map((item, index) => {
+          return {
+            ...item,
+            index: index,
+            text: item.name,
+            value: item.id,
+          };
+        });
+      } else if (selectedOptions.tabIndex === 1) {
+        areaInfo.value[countryIndex].children[provinceIndex].children =
+          res.data.map((item, index) => {
+            return {
+              ...item,
+              index: index,
+              text: item.name,
+              value: item.id,
+            };
+          });
+      } else if (selectedOptions.tabIndex === 2) {
+        areaInfo.value[countryIndex].children[provinceIndex].children[
+          cityIndex
+        ].children = res.data.map((item, index) => {
+          return {
+            ...item,
+            index: index,
+            text: item.name,
+            value: item.id,
+          };
+        });
+      }
+      console.log(areaInfo);
+      closeToast();
+    });
 };
 
-
 const fileList = ref([]);
 const afterRead = (file) => {
-	if (file && file.length > 0) {
-		for (let i = 0; i < file.length; i++) {
-			file[i].status = "uploading";
-			file[i].message = "上传中...";
-			proxy.post("/fileInfo/getSing", { fileName: file[i].file.name }).then(
-				(res) => {
-					let forms = new FormData();
-					forms.append("file", file[i].file);
-					proxy.post("https://winfaster.obs.cn-south-1.myhuaweicloud.com", { ...res.data.uploadBody, file: forms.get("file") }).then(
-						() => {
-							file[i].id = res.data.id;
-							file[i].url = res.data.fileUrl;
-							file[i].fileName = res.data.fileName;
-							delete file[i].status;
-							delete file[i].message;
-						},
-						() => {
-							file[i].status = "failed";
-							file[i].message = "上传失败";
-						}
-					);
-				},
-				() => {
-					file[i].status = "failed";
-					file[i].message = "上传失败";
-				}
-			);
-		}
-	} else {
-		file.status = "uploading";
-		file.message = "上传中...";
-		proxy.post("/fileInfo/getSing", { fileName: file.file.name }).then(
-			(res) => {
-				let forms = new FormData();
-				forms.append("file", file.file);
-				proxy.post("https://winfaster.obs.cn-south-1.myhuaweicloud.com", { ...res.data.uploadBody, file: forms.get("file") }).then(
-					() => {
-						file.id = res.data.id;
-						file.url = res.data.fileUrl;
-						file.fileName = res.data.fileName;
-						delete file.status;
-						delete file.message;
-					},
-					() => {
-						file.status = "failed";
-						file.message = "上传失败";
-					}
-				);
-			},
-			() => {
-				file.status = "failed";
-				file.message = "上传失败";
-			}
-		);
-	}
+  if (file && file.length > 0) {
+    for (let i = 0; i < file.length; i++) {
+      file[i].status = "uploading";
+      file[i].message = "上传中...";
+      proxy.post("/fileInfo/getSing", { fileName: file[i].file.name }).then(
+        (res) => {
+          let forms = new FormData();
+          forms.append("file", file[i].file);
+          proxy
+            .post("https://winfaster.obs.cn-south-1.myhuaweicloud.com", {
+              ...res.data.uploadBody,
+              file: forms.get("file"),
+            })
+            .then(
+              () => {
+                file[i].id = res.data.id;
+                file[i].url = res.data.fileUrl;
+                file[i].fileName = res.data.fileName;
+                delete file[i].status;
+                delete file[i].message;
+              },
+              () => {
+                file[i].status = "failed";
+                file[i].message = "上传失败";
+              }
+            );
+        },
+        () => {
+          file[i].status = "failed";
+          file[i].message = "上传失败";
+        }
+      );
+    }
+  } else {
+    file.status = "uploading";
+    file.message = "上传中...";
+    proxy.post("/fileInfo/getSing", { fileName: file.file.name }).then(
+      (res) => {
+        let forms = new FormData();
+        forms.append("file", file.file);
+        proxy
+          .post("https://winfaster.obs.cn-south-1.myhuaweicloud.com", {
+            ...res.data.uploadBody,
+            file: forms.get("file"),
+          })
+          .then(
+            () => {
+              file.id = res.data.id;
+              file.url = res.data.fileUrl;
+              file.fileName = res.data.fileName;
+              delete file.status;
+              delete file.message;
+            },
+            () => {
+              file.status = "failed";
+              file.message = "上传失败";
+            }
+          );
+      },
+      () => {
+        file.status = "failed";
+        file.message = "上传失败";
+      }
+    );
+  }
 };
 const onOversize = () => {
-	showToast("文件大小不能超过 5MB");
+  showToast("文件大小不能超过 5MB");
 };
 const onClickLeft = () => history.back();
 const onSubmit = () => {
-	if (fileList.value && fileList.value.length > 0) {
-		formData.value.fileList = fileList.value.map((item) => {
-			return {
-				id: item.id,
-				fileName: item.fileName,
-			};
-		});
-	} else {
-		formData.value.fileList = [];
-	}
-	console.log(formData.value.selectedOptions)
-	if(formData.value.selectedOptions) {
-		formData.value.countryId = formData.value.selectedOptions.selectedOptions[0].value;
-		formData.value.provinceId = formData.value.selectedOptions.tabIndex === 2 ? formData.value.selectedOptions.selectedOptions[1].value : null
-		formData.value.cityId = formData.value.selectedOptions.tabIndex === 1 ? 
-								formData.value.selectedOptions.selectedOptions[1].value : 
-								formData.value.selectedOptions.selectedOptions[2].value;
-	}
-	proxy.post("/supplierInfo/" + route.query.type, formData.value).then(() => {
-		showSuccessToast(route.query.type == 'add' ? '添加成功' : '修改成功');
-		setTimeout(() => {
-			history.back();
-		}, 500);
-	});
+  if (fileList.value && fileList.value.length > 0) {
+    formData.value.fileList = fileList.value.map((item) => {
+      return {
+        id: item.id,
+        fileName: item.fileName,
+      };
+    });
+  } else {
+    formData.value.fileList = [];
+  }
+  console.log(formData.value.selectedOptions);
+  if (formData.value.selectedOptions) {
+    formData.value.countryId =
+      formData.value.selectedOptions.selectedOptions[0].value;
+    formData.value.provinceId =
+      formData.value.selectedOptions.tabIndex === 2
+        ? formData.value.selectedOptions.selectedOptions[1].value
+        : null;
+    formData.value.cityId =
+      formData.value.selectedOptions.tabIndex === 1
+        ? formData.value.selectedOptions.selectedOptions[1].value
+        : formData.value.selectedOptions.selectedOptions[2].value;
+  }
+  proxy.post("/supplierInfo/" + route.query.type, formData.value).then(() => {
+    showSuccessToast(route.query.type == "add" ? "添加成功" : "修改成功");
+    setTimeout(() => {
+      history.back();
+    }, 500);
+  });
 };
 
 onMounted(() => {
-	proxy.post("/areaInfo/list", formData.value).then((res) => {
-		areaInfo.value = res.data.map((item, index) => {
-			return {
-				...item,
-				index: index,
-				text: item.chineseName,
-				value: item.id,
-				children: []
-			};
-		});
-	});
-	if(route.query.type == 'add') return
-	proxy.post("/supplierInfo/detail", { id: route.query.id }).then((res) => {
-		formData.value = res.data
-		formData.value.typeName = res.data.type == 1 ? '供应商' : '客户'
-	})
+  proxy.post("/areaInfo/list", formData.value).then((res) => {
+    areaInfo.value = res.data.map((item, index) => {
+      return {
+        ...item,
+        index: index,
+        text: item.chineseName,
+        value: item.id,
+        children: [],
+      };
+    });
+  });
+  if (route.query.type == "add") return;
+  proxy.post("/supplierInfo/detail", { id: route.query.id }).then((res) => {
+    formData.value = res.data;
+    formData.value.typeName = res.data.type == 1 ? "供应商" : "客户";
+  });
 });
 </script>