添加意见反馈

1

src/components/layout/layoutTop.tsx

@@ -24,7 +24,7 @@ export default defineComponent({
     const showHeadFlag = ref(false);
     const showImGroup = ref(false);
     const showImGroupLoading = ref(true);
-    const showSuggestionViseble = ref(true)
+    const showSuggestionViseble = ref(false)
     const users = useUserStore();
     const showWord = ref(false);
     const { info } = storeToRefs(users);
@@ -237,12 +237,12 @@ export default defineComponent({
 
           <NModal
             class={['modalTitle', 'background']}
-            style={{ width: '687px' }}
+            style={{ width: '910px' }}
             v-model:show={showSuggestionViseble.value}
             preset="card"
             showIcon={false}
             title="意见反馈">
-              <SuggestionOption></SuggestionOption>
+              <SuggestionOption onClose={()=>showSuggestionViseble.value = false}></SuggestionOption>
           </NModal>
         </div>
       </>

src/components/layout/modals/api.ts

@@ -0,0 +1,31 @@
+import request from '@/utils/request';
+/**
+ * 新增意见
+ */
+export const addSuggestion = (params: any) => {
+  return request.post('/edu-app/sysSuggestion/save', {
+    data: params
+    // requestType: 'form'
+  });
+};
+
+/**
+ * 获取意见类型
+ */
+
+export const getSuggestionList = (params: any) => {
+  return request.post('/edu-app/sysSuggestionType/page', {
+    data: params
+    // requestType: 'form'
+  });
+};
+
+/**
+ * 获取系统参数
+ */
+export const sysParamConfigPage = (params: any) => {
+  return request.post('/edu-app/sysParamConfig/page', {
+    data: params
+    // requestType: 'form'
+  });
+};

src/components/layout/modals/suggestion-option.module.less

@@ -12,4 +12,65 @@
 
 .updatePassword {
   padding: 40px;
+}
+
+.countInput {
+  border-radius: 8px;
+  min-height: 265px;
+}
+
+.addInput {
+  font-size: 16px;
+  font-weight: 400;
+  color: #777777;
+  line-height: 22px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  img {
+    width: 36px;
+    height: 36px;
+    margin-bottom: 20px;
+  }
+}
+
+:global {
+  .n-upload-trigger.n-upload-trigger--image-card {
+    width: 150px;
+    height: 150px;
+    background: #FDFDFD;
+    border-radius: 8px;
+  }
+
+  .n-upload-file-list .n-upload-file.n-upload-file--image-card-type {
+    width: 150px;
+    height: 150px;
+    background: #FDFDFD;
+    border-radius: 8px;
+
+  }
+
+
+  .n-upload-file-list.n-upload-file-list--grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 150px);
+    grid-gap: 20px;
+    margin-top: 0;
+  }
+}
+
+.messageWrap {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  p {
+    height: 25px;
+    font-size: 18px;
+    font-weight: 400;
+    color: #777777;
+    line-height: 25px;
+    margin-right: 40px;
+  }
 }

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

@@ -1,5 +1,5 @@
 import { defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './suggestion-option.module.less'
+import styles from './suggestion-option.module.less';
 import {
   NButton,
   NForm,
@@ -7,16 +7,17 @@ import {
   NInput,
   NSelect,
   NSpace,
-  useMessage
+  useMessage,
+  NUpload,
+  UploadFileInfo,
+  NImage
 } from 'naive-ui';
-import { useRouter } from 'vue-router';
+
 import { useUserStore } from '/src/store/modules/users';
-import { gradeToCN } from '/src/utils/contants';
-import { sendSms } from '/src/views/login/api';
-import { updatePassword } from '@/views/home/api';
-import openEye from '/src/views/login/images/openEye.png';
-import closeEye from '/src/views/login/images/closeEye.png';
+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'],
@@ -26,19 +27,149 @@ export default defineComponent({
     const forms = reactive({
       suggestionTypeId: null,
       clientType: 'TEACHER',
-      content:'',
+      content: '',
       attachmentUrls: ''
     });
+    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 ()=>{
 
-    const formsRef = ref();
-    const onSubmit = () => {
-      console.log('onSubmit')
-    }
 
+      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.updatePassword}>
         <NForm
@@ -55,29 +186,76 @@ export default defineComponent({
             <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>
-          <CSelect
-                {...({
-                  options: [
-                    {
-                      label: '训练状态',
-                      value: null
-                    },
-                    {
-                      label: '已结束',
-                      value: 1
-                    },
-                    {
-                      label: '进行中',
-                      value: 0
-                    }
-                  ],
-                  placeholder: '训练状态',
-                  clearable: true,
-                  inline: true
-                } as any)}
-                v-model:value={forms.suggestionTypeId}></CSelect>
+            <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')}>
@@ -87,7 +265,6 @@ export default defineComponent({
               确认
             </NButton>
           </NSpace>
-
         </NForm>
       </div>
     );