sl-sfy-safety/src/views/feedback/handleFeedback.vue

<template>
  <div class="feedback-page">
    <el-button :icon="Back" @click="backList">返回</el-button>
    <div
      ><singleProblem
        :problem-data="singleFeedback"
        :is-handle="false"
        style="margin-top: 24px; margin-bottom: 40px"
    /></div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="left"
      label-width="90px"
      class="demo-ruleForm"
      size="default"
      status-icon
    >
      <el-form-item label="处理人：" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入" style="width: 160px" />
      </el-form-item>
      <el-form-item label="处理措施：" prop="solution">
        <el-input
          v-model="ruleForm.solution"
          placeholder="请输入多行文字"
          :autosize="{ minRows: 7, maxRows: 7 }"
          type="textarea"
          style="height: 160px"
        />
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="subHandle" class="sub-btn" :disabled="!isFormValid"> 提交 </el-button>

    <el-dialog
      v-model="dialogVisible"
      title="提交成功"
      width="500"
      align-center
      @close="closeDialog"
    >
      <span>提交成功，可以在【已处理】中查看</span>
      <template #footer>
        <div class="dialog-footer">
          <!-- <el-button @click="dialogVisible = false">Cancel</el-button> -->
          <el-button type="primary" @click="closeDialog"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, watch,computed } from 'vue';
  import { Back } from '@element-plus/icons-vue';
  import { useRouter } from 'vue-router';
  import singleProblem from './component/singleProblem.vue';
  import type { FormInstance, FormRules } from 'element-plus';
  import useHandleStore from './useHandleStore';
  import { storeToRefs } from 'pinia';
  import { STATUS, updateFeedback } from '@/api/feedback/feedback';

  const useSingleStore = useHandleStore();
  const { singleFeedback } = storeToRefs(useSingleStore);

  const router = useRouter();

  const ruleFormRef = ref<FormInstance>();
  interface RuleForm {
    name: string;
    solution: string;
  }
  const ruleForm = reactive<RuleForm>({
    name: '',
    solution: '',
  });

  const rules = reactive<FormRules>({
    name: [{ required: true, message: '处理人不能为空', trigger: 'blur' }],
  });
  const isFormValid = computed(()=>{
    return Object.keys(rules).every(item => ruleForm[item].length>0)
  })

  const backList = () => {
    router.push('/feedback/list');
  };

  const dialogVisible = ref<boolean>(false);

  const subHandle = () => {
    if (!ruleFormRef.value) return;
    ruleFormRef.value.validate((valid) => {
      if (!valid) {
        return;
      }

      const subData = {
        id: singleFeedback.value.id,
        problemStatus: STATUS.handled,
        processorName: ruleForm.name,
        dealMethod: ruleForm.solution,
      };
      updateFeedback(subData).then(() => {
        dialogVisible.value = true;
      });
    });
  };

  const closeDialog = () => {
    dialogVisible.value = false;
    backList();
  };
</script>

<style scoped>
  .feedback-page {
    position: relative;
    height: calc(100vh - 64px - 12px);
    background-color: #ffffff;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .sub-btn {
    margin-top: 6px;
    margin-left: 88px;
  }
</style>