web/src/views/win/popularwillParts/formIndex.vue

<template>
  <el-row class="main animate__animated animate__backInLeft">
    <el-col :span="24" class="info">
      <el-col :span="24" class="tab">
        <el-col
          :span="8"
          :class="['list', item.id == tabActive ? 'tabActive' : '']"
          v-for="(item, index) in tabList"
          :key="index"
          @click="tabChange(item)"
        >
          <span>{{ item.title }}</span>
          <span></span>
        </el-col>
      </el-col>
      <el-col :span="24" class="infoForm">
        <el-col :span="24" class="form" v-if="tabActive == '1'">
          <el-col :span="24" class="formMess">
            <el-form
              ref="formRef"
              :model="form"
              :rules="rules"
              label-width="auto"
              label-position="top"
            >
              <el-form-item label="问题类型" prop="type">
                <el-radio-group v-model="form.type" size="large">
                  <el-radio-button label="投诉反馈" value="1" />
                  <el-radio-button label="意见建议" value="2" />
                  <el-radio-button label="咨询反馈" value="3" />
                </el-radio-group>
              </el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name" placeholder="请输入姓名" />
                  </el-form-item>
                  <el-form-item label="电话" prop="phone">
                    <el-input v-model="form.phone" type="number" placeholder="请输入电话" />
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" placeholder="请输入电子邮箱" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="地址" :required="true">
                    <el-row :gutter="20" class="addressStyle">
                      <el-col :span="12">
                        <el-input v-model="form.street" placeholder="街或路" />
                      </el-col>
                      <el-col :span="12">
                        <el-input v-model="form.community" placeholder="小区" />
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="8">
                        <el-input v-model="form.building" placeholder="楼栋" />
                      </el-col>
                      <el-col :span="8">
                        <el-input v-model="form.unit" placeholder="单元" />
                      </el-col>
                      <el-col :span="8">
                        <el-input v-model="form.room" placeholder="室" />
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <el-form-item>
                    <el-input
                      v-model="form.address"
                      type="textarea"
                      rows="4"
                      placeholder="点击粘贴地址"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="反馈详情" prop="description">
                <el-input
                  v-model="form.description"
                  placeholder="请输入反馈详情"
                  type="textarea"
                  :autosize="{ minRows: 6, maxRows: 8 }"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="toSubmit">提交反馈</el-button>
                <el-button type="primary" plain @click="toRest">清空内容</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-col>
        <!-- <el-col :span="24" class="list" v-else-if="tabActive == '2'">
          <suggestion-index />
        </el-col> -->
        <el-col :span="24" class="back" v-else-if="tabActive == '3'">
          <respond-index />
        </el-col>
      </el-col>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

/* 意见记录 */
import suggestionIndex from './suggestionIndex.vue'
/* 热点回应 */
import respondIndex from './respondIndex.vue'
import { myzj } from '@/api/api'
import { ElMessageBox } from 'element-plus'
import { onMounted } from 'vue'

const tabList = ref([
  {
    id: '1',
    title: '投诉与建议',
  },
  // {
  //   id: '2',
  //   title: '投诉与建议记录',
  // },
  {
    id: '3',
    title: '热点回应',
  },
])
const tabActive = ref('1')

const form = ref({
  type: '1',
  name: '',
  phone: '',
  email: '',
  description: '',
  street: '',
  community: '',
  building: '',
  unit: '',
  room: '',
  address: '',
})

const rules = reactive({
  type: [{ required: true, message: '请选择问题类型', trigger: 'changge' }],
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
  email: [{ required: true, message: '请输入电子邮箱 ', trigger: 'blur' }],
  description: [{ required: true, message: '请输入反馈详情 ', trigger: 'blur' }],
})

const formRef = ref()

/* 选择 */
const tabChange = (event: { id: string }) => {
  tabActive.value = event.id
}

/* 提交 */
const toSubmit = async () => {
  await formRef.value.validate((valid: boolean, fields: object) => {
    if (valid) {
      toCreateQuestion()
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
const toCreateQuestion = async () => {
  const result = await myzj.questionCreate(form.value)
  if (result.errcode == 0) {
    ElMessageBox.alert('添加成功', '提示', {
      confirmButtonText: '确定',
      callback: () => {
        resetForm()
      },
    })
  }
}
/* 清空内容 */
const toRest = () => {
  resetForm()
}

/* 重置表单 */
const resetForm = () => {
  form.value = {
    type: '1',
    name: '',
    phone: '',
    email: '',
    description: '',
    street: '',
    community: '',
    building: '',
    unit: '',
    room: '',
    address: '',
  }
}
</script>
<style scoped lang="scss">
.main {
  padding: 0 17%;

  .info {
    .tab {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 15%;
      margin: 0 0 40px 0;

      .list {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;

        span {
          display: inline-block;
        }

        span:first-child {
          color: rgb(102, 102, 102);
          // font-family: '黑体';
          font-size: 18px;
          font-weight: 500;
          line-height: 26px;
          letter-spacing: 0px;
          margin: 0 0 10px 0;
        }

        span:last-child {
          width: 180px;
          border-bottom: 4px solid transparent;
        }
      }

      .list:hover {
        cursor: pointer;

        span:first-child {
          color: rgb(25, 25, 26);
        }

        span:last-child {
          border-bottom: 4px solid rgb(21, 134, 255);
        }
      }

      .tabActive {
        span:first-child {
          color: rgb(25, 25, 26);
        }

        span:last-child {
          border-bottom: 4px solid rgb(21, 134, 255);
        }
      }
    }

    .infoForm {
      .form {
        padding: 0 10%;

        .formMess {
          border-radius: 10px;
          background: rgba(238, 227, 70, 0.5);
          padding: 40px 70px;
        }

        .addressStyle {
          margin: 0 0 10px 0;
        }
      }
    }
  }
}
</style>