关于vue3中文转拼音和三级联动

1.vue3中文转拼音

npm install pinyin --save

  // 拼音
  const namePinyin = ref('');

 mName是后端传过来的 最后的结果是测试杨 ceshiyang

let mName = record.userId_dictText.split(''); 
namePinyin.value = `${mName.join(' ')}（${pinyin.getFullChars(mName.join(' '))}）`;

2.三级联动：

1.第一个下拉框的样式

 <a-select v-model:value="model.batchId" placeholder="请选择考试批次" @change="handleChange" :disabled="disabled">
        <a-select-option v-for="item in batchIdList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
  </a-select>

2.获得考试批次的数据

  let batchIdList = ref([]);
  const getexamBitchListFc = async () => {
    const res: any = await getExamBatchList();
    //  console.log('getexamBitchListFc',res)
    batchIdList.value = res.records;
    //  bitchData.value=res.records;
    console.log('batchIdList.value', batchIdList.value);
  };

3.当你选中的时候，就要触发下一个下拉框里面的内容 所以用 @change="handleChange"

这边 toData(value); 里面的value就是上面双向绑定的id将id传过去

  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
    toData(value);
    model.value.examId = '';
    model.value.city = '';
  };

4.拿到考试名称列表 

  const toData = (id) => {
    console.log('同一批次考试id', id);
    const params = {
      batchId: id,
    };
    getexamFc(params);
  };

 重点是这个写法 我之前重来不知道可以在es6语法里面再来一层es6语法 这里其实就已经拿到了第二个下拉框的数据，同时将第三个考试城市地址数据整理清楚。

  // 获取这个批次的考试列表
  const getexamFc = async (params?: any) => {
    const res: any = await getexamList(params);
    //  console.log('getexamFc',res);
    examIdList.value = res.records.map((item) => {
      const cityList = item.city.split(',');
      const cityTextList = item.city_dictText.split(',');
      return {
        ...item,
        cityObjList: cityList.map((v, i) => {
          return {
            city: v,
            cityText: cityTextList[i],
          };
        }),
      };
    });
    console.log('examIdList.value', examIdList.value);
  };

5.第二个和第三个下拉框

 <a-form-item label="考试名称" name="examId">
          <a-select v-model:value="model.examId" placeholder="请选择考试名称" :disabled="disabled">
            <a-select-option v-for="item in examIdList" :key="item.id" :value="item.id" @click="tocity(item.cityObjList)">{{
              item.name
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="考试地点" name="city">
          <a-select v-model:value="model.city" placeholder="请选择考试地点" :disabled="disabled">
            <a-select-option v-for="(item, index) in cityList" :key="index" :value="item.city">{{ item.cityText }}</a-select-option>
          </a-select>
        </a-form-item>

全部代码如下：

<template>
  <!-- <a-drawer   :width="500" :title="Title"  :visible="visible" @close="onClose"> -->
  <BasicDrawer width="40%" v-bind="$attrs" @register="registerDrawer" :title="getTitle" destroyOnClose :showFooter="showFooter" @ok="handleSubmit">
    <!-- 表单 -->
    <div class="formBox">
      <a-form ref="formRef" :model="model" :rules="rules" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-form-item label="考试批次" name="batchId">
          <a-select v-model:value="model.batchId" placeholder="请选择考试批次" @change="handleChange" :disabled="disabled">
            <a-select-option v-for="item in batchIdList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="考试名称" name="examId">
          <a-select v-model:value="model.examId" placeholder="请选择考试名称" :disabled="disabled">
            <a-select-option v-for="item in examIdList" :key="item.id" :value="item.id" @click="tocity(item.cityObjList)">{{
              item.name
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="考试地点" name="city">
          <a-select v-model:value="model.city" placeholder="请选择考试地点" :disabled="disabled">
            <a-select-option v-for="(item, index) in cityList" :key="index" :value="item.city">{{ item.cityText }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="通知类型" name="type">
          <a-select v-model:value="model.type" placeholder="请选择" :disabled="disabled">
            <a-select-option value="1">短信</a-select-option>
            <a-select-option value="2">邮件</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="标题" name="title">
          <a-textarea v-model:value="model.title" placeholder="请输入" :disabled="disabled" />
        </a-form-item>
        <a-form-item label="内容" name="content">
          <a-textarea v-model:value="model.content" placeholder="请输入" :disabled="disabled" />
        </a-form-item>
        <a-form-item label="发送时间" name="sendTime">
          <a-date-picker v-model:value="model.sendTime" show-time placeholder="请选择时间" valueFormat="YYYY-MM-DD HH:mm:ss" :disabled="disabled" />
        </a-form-item>
      </a-form>
    </div>
    <template #extra>
      <a-button type="primary" @click="handOk">提交</a-button>
    </template>
    <!-- <BasicForm @register="wertForm" /> -->
  </BasicDrawer>
  <!-- </a-drawer> -->
</template>
<script setup lang="ts">
  import type { Rule } from 'ant-design-vue/es/form';
  import { computed, ref, watch, unref, onMounted, reactive } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { getExamBatchList, geteaxm, getexamList } from './notify.api';
  import { object } from 'vue-types';
  import { compileStyle } from 'node_modules/vue/compiler-sfc';
  import { Dayjs } from 'dayjs';
  import { defHttp } from '/@/utils/http/axios';

  let batchIdList = ref([]);
  let examIdList = ref([]);
  let cityList = ref([]);

  let model = ref({
    batchId: '', // 考试分批列表
    examId: '',
    city: '', // 最后的地址
    type: '',
    title: '',
    content: '',
    sendTime: '',
    applyId: '',
  });
  //  校验
  const rules: Record<string, Rule[]> = {
    batchId: [{ required: true, message: '请选择' }],
    examId: [{ required: true, message: '请选择考试名称' }],
    city: [{ required: true, message: '请选择城市' }],
    type: [{ required: true, message: '请选择通知类型' }],
    title: [{ required: true, message: '请输入标题' }],
    content: [{ required: true, message: '请输入内容' }],
    sendTime: [{ required: true, message: '请选择发送时间' }],
  };

  const onChange = (value: Dayjs, dateString: string) => {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
  };

  const onOk = (value: Dayjs) => {
    console.log('onOk: ', value);
  };

  // 布局
  const labelCol = {
    xs: { span: 24 },
    sm: { span: 5 },
  };
  const wrapperCol = {
    xs: { span: 24 },
    sm: { span: 16 },
  };

  // watch([()=>model.batchId,()=>model.batchId],(newValue) => {
  //   console.log("model的变化", newValue);
  //     },
  //     { immediate: true }
  //     )

  onMounted(() => {
    getexamBitchListFc();
  });

  //  const changeValue=()=>{
  //    model.examId=[];
  //    model.city=[];
  //  }
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
    toData(value);
    model.value.examId = '';
    model.value.city = '';
  };

  // 获取考试批次分批
  const getexamBitchListFc = async () => {
    const res: any = await getExamBatchList();
    //  console.log('getexamBitchListFc',res)
    batchIdList.value = res.records;
    //  bitchData.value=res.records;
    console.log('batchIdList.value', batchIdList.value);
  };

  // 获取这个批次的考试列表
  const getexamFc = async (params?: any) => {
    const res: any = await getexamList(params);
    //  console.log('getexamFc',res);
    examIdList.value = res.records.map((item) => {
      const cityList = item.city.split(',');
      const cityTextList = item.city_dictText.split(',');
      return {
        ...item,
        cityObjList: cityList.map((v, i) => {
          return {
            city: v,
            cityText: cityTextList[i],
          };
        }),
      };
    });
    console.log('examIdList.value', examIdList.value);
  };

  const toData = (id) => {
    console.log('同一批次考试id', id);
    const params = {
      batchId: id,
    };
    getexamFc(params);
  };

  const tocity = (date) => {
    console.log('date', date);
    cityList.value = date;
    // cityList.value=date.map(item=>{
    //   return {
    //     city:item.cityText
    //   }
    // })
    console.log('city', cityList.value);
  };

  // 新增/查看详情标识  查看详情时showFooter为false
  const isUpdate = ref(true);
  const showFooter = ref(true);
  const disabled = ref(false);
  // form实例化
  const formRef = ref();

  //获取标题
  const getTitle = computed(() => {
    if (!unref(isUpdate)) {
      return '考试通知';
    } else {
      // 显示底部 - 代表编辑
      if (unref(showFooter)) {
        return '编辑考试通知';
      }
      return '详情';
    }
  });

  // 独立的 Drawer 内部调用
  const [registerDrawer, { setDrawerProps, closeDrawer, changeLoading }] = useDrawerInner(async (data) => {
    console.log('data', data);
    // 重置表单
    formRef.value.resetFields();
    model.value = {
      batchId: '', // 考试分批列表
      examId: '',
      city: '', // 最后的地址
      type: '',
      title: '',
      content: '',
      sendTime: '',
      applyId: '',
    };
    console.log('data.showFooter', data.showFooter);
    //  接受传参
    showFooter.value = data.showFooter;
    isUpdate.value = !!data?.isUpdate;
    if (isUpdate.value) {
      model.value = data.record;
      model.value.type = model.value.type.toString();
    } else {
      disabled.value = false;
    }
    if (!showFooter.value) {
      disabled.value = true;
    }
    // if (data.edit) {
    //   model = data.record;
    //   console.log('model',model);
    // } else {
    //   model.applyId = data.record.id;
    // }

    // await resetFields();
    //   // 接受传参
    // showFooter.value = data?.showFooter ?? true;
    // isUpdate.value = !!data?.isUpdate;

    //     // 无论新增还是编辑，都可以设置表单值
    // if (typeof data.record === 'object') {
    //   setFieldsValue({
    //     ...data.record,
    //   });
    // }

    // 显示加载
    // setDrawerProps({ confirmLoading: true });

    // 隐藏底部时禁用整个表单
    // setProps({ disabled: !showFooter.value });
    setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
  });

  // 声明Emits
  const emit = defineEmits(['success', 'register']);
  const saveOrUpdate = (params) => {
    return defHttp.post({ url: '/scm/scmMessage/add', params });
  };

  // 提交事件
  async function handleSubmit() {
    try {
      // setDrawerProps({ showFooter: showFooter.value });
      if (!showFooter.value) {
        closeDrawer();
        return;
      }
      console.log(showFooter.value);
      let values = await formRef.value.validate();
      setDrawerProps({ confirmLoading: true });
      changeLoading(true);
      let isUpdateVal = unref(isUpdate);
      //提交表单
      console.log(values, model.value);
      if (isUpdate.value) {
        await saveOrUpdate(model.value);
      } else {
        await saveOrUpdate(model.value);
      }
      //关闭弹窗
      closeDrawer();
      //刷新列表
      emit('success', { isUpdateVal, values });
    } finally {
      setDrawerProps({ confirmLoading: false });
      changeLoading(false);
    }
  }
</script>