car-wash-front/src/pages-user/feedback/add.vue

<template>
  <view>
    <uv-popup ref="popup_ref" mode="bottom" custom-style="min-height: 800rpx;padding:15rpx;overflow-y:scroll;" round="10" closeable safeAreaInsetTop
              @close="close">
      <view class="w100 flex-center">纠错上报</view>
      <uv-form
          labelPosition="top"
          labelWidth="100"
          :model="state.ruleForm"
          :rules="state.rules"
          ref="feedback_form_ref">


        <uv-form-item label="概要描述" prop="title">
          <uv-input required="true" type="text" :readonly="state.mode==='detail'" v-model="state.ruleForm.title" placeholder="请填写概要描述" clearable count
                    maxlength="100">
          </uv-input>
        </uv-form-item>
        <uv-form-item label="问题类别" prop="type" @click="handleShowAction">
          <uv-input v-model="state.ruleForm.typeName" disabled disabledColor="#ffffff" placeholder="请选择" border="none">
          </uv-input>
          <template v-slot:right>
            <uv-icon name="arrow-right"></uv-icon>
          </template>
        </uv-form-item>
        <uv-form-item label="详细描述" prop="content">
          <uv-textarea autoHeight required="true" height="50" :disabled="state.mode==='detail'" v-model="state.ruleForm.content" placeholder="请填写详细描述信息" count
                       maxlength="300">
          </uv-textarea>
        </uv-form-item>

        <uv-form-item label="问题截图" prop="attachList">
          <uv-upload
              :fileList="state.attachList"
              name="1"
              multiple
              :maxCount="9"
              @delete="handleDelete"
              @afterRead="handleUpload"
              :previewFullImage="true"
          ></uv-upload>
        </uv-form-item>
        <uv-form-item label="平台答复" prop="content" v-if="state.mode==='detail'">
          <uv-textarea readonly height="50" v-model="state.ruleForm.replyContent" placeholder="请等待平台回复">
          </uv-textarea>
        </uv-form-item>

        <uv-form-item label="答复时间" prop="content" v-if="state.mode==='detail'">
          <uv-text>{{ fmtDateTime(state.ruleForm.replyTime) }}</uv-text>
        </uv-form-item>

      </uv-form>

      <view class="w100 text-right">
        <!--        <uv-text type="info" @click="close" :customStyle="{'width':'120px','margin-left':'10px'}"> 取 消</uv-text>-->
        <view class="text-right_btn" @click="handleSubmit" v-if="state.mode==='add'">提交反馈
        </view>
      </view>
    </uv-popup>

    <uv-action-sheet ref="type_select_ref"

                     :actions="state.feedbackTypeList" title="请选择问题类型" description="选择本次上报问题的类型"
                     @select="handleTypeSelect">
    </uv-action-sheet>
  </view>
</template>
<script setup lang="ts">
import {reactive, ref} from "vue";
import {onHide} from "@dcloudio/uni-app";
import {body, formatUrl, upload} from "@/utils/https";
import {fmtDateTime} from "@/utils/common";

const popup_ref = ref()
const feedback_form_ref = ref()
const type_select_ref = ref()

const initState = () => ({
  attachList: [] as any[],
  ruleForm: {
    title: '',
    content: '',
    replay: '',
    type: '',
    typeName: '',
    attachList: ''
  },
  rules: {
    'title': {
      type: 'string',
      required: true,
      message: '请填写概要描述',
      trigger: ['blur', 'change']
    },
  },
  feedbackTypeList: [] as any[],
  mode: 'add'
})

const emit = defineEmits(['refresh'])
const state = reactive(initState())

onHide(() => {
  console.log("hidenee")
  // Object.assign(state, initState());
})

const handleSubmit = () => {
  console.log("submit")
  feedback_form_ref.value?.validate().then((res: any) => {
    uni.showToast({
      icon: 'success',
      title: '校验通过'
    })

    state.ruleForm.attachList = JSON.stringify(state.attachList)
    body(`/feedback/add`, state.ruleForm).then(() => {
      uni.showToast({
        icon: 'success',
        title: '提交成功，感谢您的反馈'
      })
      emit('refresh')
      setTimeout(() => {
        close();
      }, 1000)
    })
  }).catch((errors: any) => {
    uni.showToast({
      icon: 'error',
      title: '校验失败'
    })
  })
}


const handleUpload = (event: any) => {
  let file = event.file[0];
  upload(`/file/upload`, file).then((res: any) => {
    console.log(res)
    state.attachList.push({
      name: res.data.name,
      url: res.data.url
    })
  })
}

const handleDelete = (event: any) => {
  let {file, index, name} = event;
  state.ruleForm.attachList.splice(index, 1);
}

const loadDict = () => {
  body(`/dict/list`, {code: 'Feedback.type'}).then((res: any) => {
    state.feedbackTypeList = res;
    state.ruleForm.typeName = state.feedbackTypeList.find(k => k.value == state.ruleForm?.type)?.name
  })
}

const handleShowAction = () => {
  if (state.mode === 'detail') {
    return;
  }
  type_select_ref.value?.open();
  uni.hideKeyboard();
}

const handleTypeSelect = (e: any) => {
  console.log(e)
  state.ruleForm.type = e.value;
  state.ruleForm.typeName = e.name;
}


const close = () => {
  Object.assign(state, initState());
  popup_ref.value.close()
}

const open = (item: any, mode = 'add') => {
  popup_ref.value.open();
  state.mode = mode;
  if (mode === 'detail') {
    state.ruleForm = {...item}
    if (item.attachList) {
      state.attachList = JSON.parse(item.attachList)
    }
    state.ruleForm.typeName = state.feedbackTypeList.find(k => k.value == item.type)?.name
  }
  loadDict();
}

defineExpose({
  open
})
</script>

<style scoped lang="scss">
.text-right {
  text-align: right;

  .text-right_btn {
    /* margin-right: 10px; */
    background-color: #19A497;
    color: white;
    font-size: 15px;
    padding: 5px 12px;
    border-radius: 3px;
    text-align: center;
  }
}
</style>