1

src/views/customer/file/add.vue

@@ -1,98 +1,229 @@
 <template>
   <div class="form">
-    <van-nav-bar :title="$t('customerFile.followUpRecord')" :left-text="$t('common.back')" left-arrow @click-left="onClickLeft"> </van-nav-bar>
-    <testForm v-model="formData.data" :formOption="formOption" :formConfig="formConfig" :rules="rules" @onSubmit="onSubmit" ref="formDom">
-      <template #date>
-        <div style="width: 100%">
-          <van-cell-group inset>
-            <van-field
-              v-model="formData.data.date"
-              is-link
-              readonly
-              :label="$t('customerFile.date')"
-              :placeholder="$t('common.pleaseSelect')"
-              style="padding: 0 !important"
-              :required="true"
-              @click="clickDate" />
-            <van-popup v-model:show="showPicker" round position="bottom">
-              <van-picker-group
-                :title="$t('customerFile.date')"
-                :tabs="[$t('common.selectDate'), $t('common.selectTime')]"
-                @confirm="onConfirm"
-                @cancel="onCancel">
-                <van-date-picker v-model="currentDate" />
-                <van-time-picker v-model="currentTime" :columns-type="columnsType" />
-              </van-picker-group>
-            </van-popup>
-          </van-cell-group>
-        </div>
-      </template>
-    </testForm>
+    <van-nav-bar :title="$t('customerFile.' + route.query.type)" :left-text="$t('common.back')" left-arrow @click-left="onClickLeft"> </van-nav-bar>
+    <testForm v-model="formData.data" :formOption="formOption" :formConfig="formConfig" :rules="rules" @onSubmit="onSubmit" ref="formDom"> </testForm>
   </div>
 </template>
 
 <script setup>
-import { ref, getCurrentInstance, reactive } from "vue";
-import { showSuccessToast } from "vant";
-import testForm from "@/components/testForm/index.vue";
-import { formatDate } from "@/utils/auth";
+import { ref, getCurrentInstance, onMounted, reactive } from "vue";
+import { showSuccessToast, showFailToast } from "vant";
 import { useRoute } from "vue-router";
+import { getUserInfo } from "@/utils/auth";
+import testForm from "@/components/testForm/index.vue";
 
 const proxy = getCurrentInstance().proxy;
 const onClickLeft = () => history.back();
 const route = useRoute();
-const currentDate = ref([]);
-const currentTime = ref([]);
-const columnsType = ["hour", "minute", "second"];
-const onConfirm = () => {
-  formData.data.date = currentDate.value.join("-") + " " + currentTime.value.join(":");
-  showPicker.value = false;
-};
-const onCancel = () => {
-  showPicker.value = false;
-};
-const clickDate = () => {
-  currentDate.value = formatDate(new Date(formData.data.date), "yyyy-MM-dd").split("-");
-  currentTime.value = formatDate(new Date(formData.data.date), "hh:mm:ss").split(":");
-  showPicker.value = true;
+const getDict = () => {
+  let query = {
+    pageNum: 1,
+    pageSize: 999,
+    tenantId: getUserInfo().tenantId,
+  };
+  proxy.post("/dictTenantData/page", { ...query, dictCode: "customer_source" }).then((res) => {
+    if (res.data.rows && res.data.rows.length > 0) {
+      formConfig[4].data = res.data.rows.map((item) => {
+        return {
+          text: item.dictValue,
+          value: item.dictKey,
+        };
+      });
+    }
+  });
+  proxy.post("/dictTenantData/page", { ...query, dictCode: "customer_status" }).then((res) => {
+    if (res.data.rows && res.data.rows.length > 0) {
+      formConfig[5].data = res.data.rows.map((item) => {
+        return {
+          text: item.dictValue,
+          value: item.dictKey,
+        };
+      });
+    }
+  });
+  proxy.post("/dictTenantData/page", { ...query, dictCode: "customer_tag" }).then((res) => {
+    if (res.data.rows && res.data.rows.length > 0) {
+      formConfig[7].data = res.data.rows.map((item) => {
+        return {
+          text: item.dictValue,
+          value: item.dictKey,
+        };
+      });
+    }
+  });
+  proxy.get("/tenantUser/list", { pageNum: 1, pageSize: 10000, tenantId: getUserInfo().tenantId }).then((res) => {
+    if (res.rows && res.rows.length > 0) {
+      formConfig[6].data = res.rows.map((item) => {
+        return {
+          text: item.nickName,
+          value: item.userId,
+        };
+      });
+    }
+  });
 };
+getDict();
 const formData = reactive({
   data: {
-    date: formatDate(new Date(), "yyyy-MM-dd hh:mm:ss"),
-    content: null,
+    customerCode: null,
+    code: null,
+    countryId: null,
+    provinceId: null,
+    cityId: null,
+    address: null,
+    zipCode: null,
+    name: null,
+    status: null,
+    source: null,
+    userId: null,
+    customerUserList: [],
   },
 });
 const formDom = ref(null);
-const showPicker = ref(false);
 const formOption = reactive({
   readonly: false, //用于控制整个表单是否只读
   disabled: false,
   labelAlign: "top",
   scroll: true,
   labelWidth: "62pk",
+  hiddenSubmitBtn: false,
+  btnConfig: {
+    isNeed: true,
+    prop: "customerUserList",
+    plain: true,
+    listTitle: proxy.t("customerFile.customerContact"),
+    listConfig: [
+      {
+        type: "input",
+        label: proxy.t("customerFile.contact"),
+        prop: "name",
+      },
+      {
+        type: "input",
+        label: proxy.t("customerFile.email"),
+        prop: "email",
+      },
+    ],
+    clickFn: () => {
+      if (formData.data.customerUserList && formData.data.customerUserList.length > 0) {
+        formData.data.customerUserList.push({
+          name: null,
+          email: null,
+        });
+      } else {
+        formData.data.customerUserList = [
+          {
+            name: null,
+            email: null,
+          },
+        ];
+      }
+    },
+  },
 });
 const formConfig = reactive([
   {
-    type: "slot",
-    slotName: "date",
+    type: "input",
+    label: proxy.t("customerFile.customerName"),
+    prop: "name",
+    itemType: "text",
+  },
+  {
+    type: "cascader",
+    label: proxy.t("customerFile.cityText"),
+    prop: "city",
+    itemType: "city",
+    showPicker: false,
   },
   {
     type: "input",
-    label: proxy.t("customerFile.contentTwo"),
-    prop: "content",
+    label: proxy.t("customerFile.address"),
+    prop: "address",
     itemType: "textarea",
   },
+  {
+    type: "input",
+    label: proxy.t("customerFile.code"),
+    prop: "code",
+    itemType: "text",
+  },
+  {
+    type: "picker",
+    label: proxy.t("customerFile.source"),
+    prop: "source",
+    itemType: "onePicker",
+    showPicker: false,
+    fieldNames: {
+      text: "text",
+      value: "value",
+    },
+    data: [],
+  },
+  {
+    type: "picker",
+    label: proxy.t("customerFile.status"),
+    prop: "status",
+    itemType: "onePicker",
+    showPicker: false,
+    fieldNames: {
+      text: "text",
+      value: "value",
+    },
+    data: [],
+  },
+  {
+    type: "picker",
+    label: proxy.t("customerFile.userId"),
+    prop: "userId",
+    itemType: "onePicker",
+    showPicker: false,
+    fieldNames: {
+      text: "text",
+      value: "value",
+    },
+    data: [],
+  },
+  {
+    type: "multipleChoice",
+    label: proxy.t("customerFile.tag"),
+    prop: "tags",
+    itemType: "multiple",
+    showPicker: false,
+    fieldNames: {
+      text: "text",
+      value: "value",
+    },
+    data: [],
+  },
 ]);
 const rules = {
-  date: [{ required: true, message: proxy.t("customerFile.dateMsg") }],
-  content: [{ required: true, message: proxy.t("customerFile.contentTwoMsg") }],
+  name: [{ required: true, message: proxy.t("customerFile.customerNameMsg") }],
+  city: [{ required: true, message: proxy.t("customerFile.cityMsg") }],
+  source: [{ required: true, message: proxy.t("customerFile.sourceMsg") }],
+  status: [{ required: true, message: proxy.t("customerFile.statusMsg") }],
+  email: [{ required: true, message: proxy.t("customerFile.emailMsg") }],
 };
 const onSubmit = () => {
-  proxy.post("/customerFollowRecords/add", { ...formData.data, customerId: route.query.id }).then(() => {
-    showSuccessToast(proxy.t("common.addSuccess"));
-    setTimeout(() => {
-      history.back();
-    }, 500);
-  });
+  if (formData.data.customerUserList && formData.data.customerUserList.length > 0) {
+    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;
+    }
+    if (formData.data.tags && formData.data.tags.length > 0) {
+      formData.data.tag = formData.data.tags.join(",");
+    } else {
+      formData.data.tag = "";
+    }
+    proxy.post("/customer/" + route.query.type, formData.data).then(() => {
+      showSuccessToast(proxy.t("common.addSuccess"));
+      setTimeout(() => {
+        history.back();
+      }, 500);
+    });
+  } else {
+    showFailToast(proxy.t("customerFile.submitMsg"));
+  }
 };
 </script>

src/views/customer/file/addRecords.vue

@@ -17,7 +17,7 @@
             <van-popup v-model:show="showPicker" round position="bottom">
               <van-picker-group
                 :title="$t('customerFile.date')"
-                :tabs="[$t('customerFile.selectDate'), $t('customerFile.selectTime')]"
+                :tabs="[$t('common.selectDate'), $t('common.selectTime')]"
                 @confirm="onConfirm"
                 @cancel="onCancel">
                 <van-date-picker v-model="currentDate" />