classroom-instruments/src/components/layout/modals/suggestion-option.tsx

import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './suggestion-option.module.less';
import {
  NButton,
  NForm,
  NFormItem,
  NInput,
  NSelect,
  NSpace,
  useMessage,
  NUpload,
  UploadFileInfo,
  NImage
} from 'naive-ui';

import { useUserStore } from '/src/store/modules/users';
import chioseAdd from '../images/chioseAdd.png';
import CSelect from '../../CSelect';
import { policy } from '../../upload-file/api';
import { addSuggestion, getSuggestionList,sysParamConfigPage } from '../modals/api';
export default defineComponent({
  name: 'train-update',
  emits: ['close', 'submit'],
  setup(props, { emit }) {
    const message = useMessage();
    const userStore = useUserStore();
    const forms = reactive({
      suggestionTypeId: null,
      clientType: 'TEACHER',
      content: '',
      attachmentUrls: '',
      type: "APP",
      mobileNo:userStore.getUserInfo.phone
    });
    const state = reactive([]) as any;

    const suggestionTypeList = ref([]as any)
    const ossUploadUrl = `https://gyt.ks3-cn-beijing.ksyuncs.com/`;
    const uploadRef = ref();
    const fileListRef = ref<UploadFileInfo[]>([]);
    const formsRef = ref();
    const btnLoading = ref(false);
    const tempFiileBuffer = ref();
    const email = ref('')
    const phone = ref('')
    const onSubmit = async () => {
      if (!forms.suggestionTypeId) {
        message.error('请选择反馈类型');
        return;
      }
      if (!forms.content) {
        message.error('请填写反馈信息');
        return;
      }
      const attachmentUrlsList = fileListRef.value.map((item:any)=>{
        console.log(item,'item')
        const name = item.name;
        // const suffix = name.slice(name.lastIndexOf('.'));
        const fileName = `${item.id + name}`;
        const url = ossUploadUrl + fileName;
        return url
      })
      const attachmentUrls = attachmentUrlsList.join(',')
      try{

        const res = await addSuggestion({...forms,attachmentUrls})
        message.success('提交成功')
        emit('close')
      }catch(e){
        console.log(e)
      }
      console.log('onSubmit');
    };
    const onBeforeUpload = async (options: any) => {
      console.log(options, 'onBeforeUpload');
      const file = options.file;
      // 文件大小
      let isLt2M = true;

      const size = 2;
      if (size) {
        isLt2M = file.file.size / 1024 / 1024 < size;
        if (!isLt2M) {
          message.error(`文件大小不能超过${size}M`);
          return false;
        }
      }

      if (!isLt2M) {
        return isLt2M;
      }
      // 是否裁切
      try {
        btnLoading.value = true;
        const name = file.file.name;
        const fileName = `${file.id + name}`;
        const obj = {
          filename: fileName,
          bucketName: 'gyt',
          postData: {
            filename: fileName,
            acl: 'public-read',
            key: fileName,
            unknowValueField: []
          }
        };
        const { data } = await policy(obj);
        state.push({
          id: file.id,
          tempFiileBuffer: file.file,
          policy: data.policy,
          signature: data.signature,
          acl: 'public-read',
          key: fileName,
          KSSAccessKeyId: data.kssAccessKeyId,
          name: fileName
        })
      } catch {
        //
        // message.error('上传失败')
        btnLoading.value = false;
        return false;
      }
      return true;
    };
    const onFinish = (options: any) => {
      // const url =
      const name = options.file.name;
      // const suffix = name.slice(name.lastIndexOf('.'));
      const fileName = `${options.file.id + name}`;
      const url = ossUploadUrl + fileName;
      // urlList.value.push(url);
      // onFinishAfter(options);
    };
    const onRemove = async (event:any) => {
      console.log(event)
      btnLoading.value = false;
    };

    const getTypeList = async () => {
      try {
        const res = await getSuggestionList({ rows: 9999, page: 1 });
      suggestionTypeList.value = res.data.rows;
      } catch (e) {
        console.log('请求报错')
        console.log(e);
      }
    };


    const getPhoneInfo = async ()=>{


      try {
        const {data} = await sysParamConfigPage({ page: 1, rows: 999, group: 'OTHER' });
        const rows = data.rows || []
        email.value = rows.find((item:any)=>{
          return item.paramName == 'customer_service_email'
        }).paramValue
        phone.value = rows.find((item:any)=>{
          return item.paramName == 'customer_service_phone'
        }).paramValue

        console.log( email.value , phone.value)
      } catch (e) {
        console.log('请求报错')
        console.log(e);
      }

    }
    onMounted(()=>{
      getTypeList()
      getPhoneInfo()
    })
    return () => (
      <div class={styles.suggestOption}>
      <div class={[styles.updatePassword,isubmit.value?styles.isAni:'']}>
        <div class={[styles.formWrap,isubmit.value?styles.isAni:'']}>
          <NImage
            class={styles.closeBtn}
            src={suggestClose}
            previewDisabled   onClick={() => emit('close')}></NImage>
          <NImage class={styles.bgLine} src={bgLine} previewDisabled></NImage>
          <h2 class={styles.formTitle}>意见反馈</h2>
          <div class={styles.formWrapInfo}>
            <NForm
              labelAlign="right"
              labelPlacement="left"
              labelWidth={'auto'}
              ref={formsRef}
              model={forms}
              requireMarkPlacement="left">
              {/* <NFormItem
            path="currentClass"
            label=""
            class={styles.phoneContainer}>
            <p class={styles.phone}>{forms.mobile}</p>
          </NFormItem> */}

          <NFormItem
            rule={[
              {
                required: true,
                message: '请选择反馈类型'
              }
            ]}
            path="suggestionTypeId">
            <CSelect
              value-field="id"
              label-field="name"
              style={{ width: '357px!important' }}
              {...({
                options: suggestionTypeList.value,
                placeholder: '反馈类型(必选)',
                clearable: true,
                inline: true
              } as any)}
              v-model:value={forms.suggestionTypeId}></CSelect>
          </NFormItem>
          <NFormItem path='content'         rule={[
              {
                required: true,
                message: '请输入反馈内容'
              }
            ]}>
            <NInput
              class={styles.countInput}
              type="textarea"
              rows={5}
              placeholder={'请输入反馈内容'}
              maxlength={500}
              showCount
              v-model:value={forms.content}></NInput>
          </NFormItem>
          <NFormItem>
            <NUpload
              list-type="image-card"
              accept=".jpg,jpeg,.png"
              v-model:fileList={fileListRef.value}
              ref={uploadRef}
              multiple={true}
              max={5}
              data={(file: any) => {
                const item = state.find((c: any) => {
                  return c.id == file.file.id;
                });
                const { id, tempFiileBuffer, ...more } = item;
                return { ...more };
              }}
              showPreviewButton
              action={ossUploadUrl}
              onBeforeUpload={(options: any) => onBeforeUpload(options)}
              onRemove={(options: any) => onRemove(options)}
              onFinish={(options: any) => onFinish(options)}>
              <div class={styles.addInput}>
                <NImage previewDisabled src={chioseAdd}></NImage>
                点击上传
              </div>
            </NUpload>
          </NFormItem>
          {
            (phone.value || email.value)?  <NFormItem>
            <div class={styles.messageWrap}>
             {phone.value? <p>客服电话：{phone.value}</p>:null}
             {email.value?  <p>邮箱：{email.value}</p>:null}

            </div>
           </NFormItem>:null
          }

          <NSpace class={styles.updateBtnGroup}>
            <NButton strong type="default" round onClick={() => emit('close')}>
              取消
            </NButton>
            <NButton strong type="primary" round onClick={() => onSubmit()}>
              确认
            </NButton>
          </NSpace>
        </NForm>
      </div>
      </div>
    );
  }
});