byte-sailing-mobile/src/views/customer/file/addRecords.vue

<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>
  </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 { useRoute } from "vue-router";

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 formData = reactive({
  data: {
    date: formatDate(new Date(), "yyyy-MM-dd hh:mm:ss"),
    content: null,
  },
});
const formDom = ref(null);
const showPicker = ref(false);
const formOption = reactive({
  readonly: false, //用于控制整个表单是否只读
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
});
const formConfig = reactive([
  {
    type: "slot",
    slotName: "date",
  },
  {
    type: "input",
    label: proxy.t("customerFile.contentTwo"),
    prop: "content",
    itemType: "textarea",
  },
]);
const rules = {
  date: [{ required: true, message: proxy.t("customerFile.dateMsg") }],
  content: [{ required: true, message: proxy.t("customerFile.contentTwoMsg") }],
};
const onSubmit = () => {
  proxy.post("/customerFollowRecords/add", { ...formData.data, customerId: route.query.id }).then(() => {
    showSuccessToast(proxy.t("common.addSuccess"));
    setTimeout(() => {
      history.back();
    }, 500);
  });
};
</script>