|
|
@@ -0,0 +1,240 @@
|
|
|
+<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="mobile">
|
|
|
+ <el-input v-model="form.mobile" 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="地址" prop="address">
|
|
|
+ <el-row :gutter="20" class="addressStyle">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-input v-model="form.address"
|
|
|
+ placeholder="街或路" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-input v-model="form.address2"
|
|
|
+ placeholder="小区" />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-input v-model="form.address3"
|
|
|
+ placeholder="楼栋" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-input v-model="form.address4"
|
|
|
+ placeholder="单元" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-input v-model="form.address5"
|
|
|
+ placeholder="室" />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-input v-model="textarea" type="textarea" rows="4"
|
|
|
+ placeholder="点击粘贴地址" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="反馈详情" prop="content">
|
|
|
+ <el-input v-model="form.content" 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'
|
|
|
+
|
|
|
+
|
|
|
+const tabList = ref([
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ title: '投诉与建议'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '2',
|
|
|
+ title: '投诉与建议记录'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '3',
|
|
|
+ title: '热点回应'
|
|
|
+ }
|
|
|
+])
|
|
|
+const tabActive = ref('1')
|
|
|
+
|
|
|
+const form = ref({ type: '1', name: '', mobile: '', email: '', address: '', content: '', address2: '', address3: '', address4: '', address5: '' })
|
|
|
+
|
|
|
+const rules = reactive({
|
|
|
+ type: [{ required: true, message: '请选择问题类型', trigger: 'changge' },],
|
|
|
+ name: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
|
|
|
+ mobile: [{ required: true, message: '请输入电话', trigger: 'blur' },],
|
|
|
+ email: [{ required: true, message: '请输入电子邮箱 ', trigger: 'blur' },],
|
|
|
+ address: [{ required: true, message: '请输入地址 ', trigger: 'blur' },],
|
|
|
+ content: [{ required: true, message: '请输入反馈详情 ', trigger: 'blur' },],
|
|
|
+})
|
|
|
+
|
|
|
+const textarea = ref('')
|
|
|
+
|
|
|
+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) {
|
|
|
+ console.log('submit!')
|
|
|
+ } else {
|
|
|
+ console.log('error submit!', fields)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+/* 清空内容 */
|
|
|
+const toRest = () => {
|
|
|
+ resetForm()
|
|
|
+}
|
|
|
+
|
|
|
+/* 重置表单 */
|
|
|
+const resetForm = () => {
|
|
|
+ form.value = {
|
|
|
+ type: '1', name: '', mobile: '', email: '', address: '', content: '', address2: '', address3: '', address4: '', address5: ''
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</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, 250, 255, 0.5);
|
|
|
+ padding: 40px 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addressStyle {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
