yumiao-pc/pages/form/components/Comments.vue

<template>
  <div class="page-main md:w-screen-xl m-auto p-3" v-if="form">
    <el-row :gutter="24">
      <el-col :span="18" :xs="24">
        <el-card shadow="hover" class="hover:border-green-50 hover:border-2 mb-5">
          <template #header>
            <div class="card-header font-bold text-xl">
              <span>{{ data?.name }}</span>
            </div>
          </template>
          <p v-html="data?.comments"></p>
        </el-card>
        <el-card shadow="hover" class="hover:border-green-50 hover:border-2 mb-5">
          <template #header>
            <div class="card-header font-bold text-xl">
              <span>预约报名</span>
            </div>
          </template>
          <el-form ref="formRef" :model="form" label-position="top" class="w-full sm:py-2" size="large" status-icon>
            <el-form-item label="您的姓名" prop="name">
              <el-input
                  v-model="form.name"
                  placeholder="张三"
              />
            </el-form-item>
            <el-form-item label="您的年龄(岁)" prop="age">
              <el-input-number
                  v-model="form.age"
                  placeholder="24"
                  :min="6"
                  :max="99"
              />
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input
                  v-model="form.phone"
                  :maxlength="11"
                  placeholder="13800138000"
              />
            </el-form-item>
            <el-form-item label="您预约的疫苗" prop="age">
              <el-radio-group v-model="form.type">
                <el-radio value="九阶" size="large" border>九阶</el-radio>
                <el-radio value="四阶" size="large" border>四阶</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="本次接种的剂次" prop="number">
              <el-checkbox-group v-model="checkList">
                <el-checkbox label="第一剂" value="第一剂" />
                <el-checkbox label="第二剂" value="第二剂" />
                <el-checkbox label="第三剂" value="第三剂" />
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="备注信息" prop="comments">
              <el-input
                  v-model="form.comments"
                  :rows="5"
                  type="textarea"
                  placeholder="请输入备注信息，最多300字"
              />
            </el-form-item>
            <div class="dialog-footer w-full">
              <el-button type="primary" size="large" class="w-full" @click="submitForm(formRef)"> 提交 </el-button>
            </div>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {FullScreen} from '@element-plus/icons-vue'
import type {ApiResult} from "~/api";
import type {FormInstance, FormRules} from "element-plus";
import {useClientRequest} from "~/composables/useClientRequest";
import {reactive, ref} from "vue";
import useFormData from "~/utils/use-form-data";
import type {FormRecord} from "~/api/cms/form-record/model";
import type {Form} from "~/api/cms/form/model";


const props = withDefaults(
    defineProps<{
      title?: string;
      data?: Form;
    }>(),
    {}
);

const formRef = ref<FormInstance>()
const visible = ref<boolean>(false);
const visible2 = ref<boolean>(false);
const checkList = ref<string[]>([]);
const loading = ref<boolean>(true)

const emit = defineEmits<{
  (e: 'done', page: number): void
}>()

const { form, resetFields } = useFormData<FormRecord>({
  formRecordId: undefined,
  formId: undefined,
  name: undefined,
  age: undefined,
  type: undefined,
  extra: undefined,
  formData: undefined,
  formObj: undefined,
  userId: undefined,
  phone: undefined,
  sortNumber: undefined,
  comments: undefined,
  status: undefined,
  createTime: undefined,
  layout: undefined
});


const onComments = () => {
  visible.value = true;
}

const onComplaint = () => {
  visible2.value = true;
}

const onPageChange = (page: number) => {
  emit('done', page)
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  form.formId = props.data?.formId;
  form.extra = checkList.value.join(',')
  useClientRequest<ApiResult<any>>(`/cms/form-record`, {
    method: 'POST',
    body: form
  }).then(res => {
    if (res.code == 0) {
      ElMessage.success(res.message)
      visible.value = false
      resetFields();
      emit('done',1)
    } else {
      return ElMessage.error(res.message)
    }
  })
}
</script>