|
|
@@ -0,0 +1,272 @@
|
|
|
+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: ''
|
|
|
+ });
|
|
|
+ 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.updatePassword}>
|
|
|
+ <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>
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|
mo
