drawershow.vue

<template>
  <!-- 弹出框表单 -->
  <el-drawer
    :title="title"
    :visible.sync="open"
    :direction="direction"
    :destroy-on-close="true"
    size="80%"
  >
    <div class="drawer">
      <div class="card drleft">
        <div class="lefttitle">建议内容</div>
        <div class="diyhang">
          <div class="jyitem">
            <div class="leftlabel">真实姓名</div>
            <div class="leftanser">
              {{ form.feedbackName ? form.feedbackName : "--" }}
            </div>
          </div>
          <div class="jyitem">
            <div class="leftlabel">联系电话</div>
            <div class="leftanser">
              {{ form.contactInfo ? form.contactInfo : "--" }}
            </div>
          </div>
          <div class="jyitem">
            <div class="leftlabel">邮箱地址</div>
            <div class="leftanser">{{ form.email ? form.email : "--" }}</div>
          </div>
          <div class="jyitem">
            <div class="leftlabel">单位名称</div>
            <div class="leftanser">
              {{ form.companyName ? form.companyName : "--" }}
            </div>
          </div>
        </div>

        <div class="jyitem">
          <div class="leftlabel">用户备注</div>
          <div class="leftanser">{{ form.remark ? form.remark : "--" }}</div>
        </div>
        <div class="jyitem">
          <div class="leftlabel">具体内容</div>
          <div class="leftanser">{{ form.content ? form.content : "--" }}</div>
        </div>
        <div class="jyitem">
          <div class="leftlabel">附件</div>
          <!-- <Field label="附件名称，多个逗号分割" prop="fileName" v-model="form.fileName" placeholder="请输入附件名称，多个逗号分割"/>
                <Field label="附件地址，多个逗号分割"><fileUpload v-model="form.filePath"  prePath="/file/fileupload"/></Field> -->
        </div>
        <div class="jyitem">
          <div class="leftlabel">提交日期</div>
          <div class="leftanser">{{ createTime ? createTime : "--" }}</div>
        </div>
      </div>
      <div class="card drright">
        <div class="righttitle">建议答复</div>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-row>
            <Field
              :span="23"
              label="所属部门"
              type="select"
              prop="deptId"
              v-model="form.deptId"
              placeholder="请输入所属部门"
              :enum-data="dict.deptId"
            />
          </el-row>
          <!-- <el-row>
              <Field :span="23" label="所属部门名称" prop="deptName" v-model="form.deptName" placeholder="请输入所属部门名称"/>
            </el-row> -->
          <el-row>
            <Field
              :span="23"
              label="回复内容"
              type="textarea"
              prop="replyContent"
              v-model="form.replyContent"
              placeholder="请输入回复内容"
            />
          </el-row>
          <!-- <el-row>
              <Field :span="23" label="回复附件名称，多个逗号分割" prop="replyFileName" v-model="form.replyFileName" placeholder="请输入回复附件名称，多个逗号分割"/>
            </el-row> -->
          <el-row>
            <Field :span="23" label="选择附件"
              ><fileUpload
                v-model="form.replyFilePath"
                :fileType="['png', 'jpg', 'jpeg', 'pdf', 'gif']"
                prePath="/file/fileupload"
            /></Field>
          </el-row>
          <el-row>
            <Field
              :span="23"
              label="是否公开 "
              prop="isShow"
              v-model="form.isShow"
              type="select"
              :enumData="dict.isShow"
              placeholder="请选择是否公开 "
            />

            <!-- <Field label="标题" prop="title" v-model="form.title" type="textarea" placeholder="请输入标题"/> -->
            <!-- <Field label="身份证号" prop="idCard" v-model="form.idCard" placeholder="请输入身份证号"/> -->
            <!-- <Field label="地址" prop="address" v-model="form.address" placeholder="请输入地址"/>
              <Field label="是否回复 " prop="reply" v-model="form.reply" type="select" :enumData="dict.reply" placeholder="请选择是否回复 "/>
              <Field label="回复人" prop="replyPerson" v-model="form.replyPerson" placeholder="请输入回复人"/>
              <Field label="回复"><editor v-model="form.replyContent" :min-height="256"/></Field>
              <Field label="反馈类型 " prop="feedbackType" v-model="form.feedbackType" type="select" :enumData="dict.feedbackType" placeholder="请选择反馈类型 "/>

              <Field label="回复时间" prop="replyTime" v-model="form.replyTime" type="date" />
              <Field label="处理人id" prop="processId" v-model="form.processId" placeholder="请输入处理人id"/>
              <Field label="处理人名称" prop="processName" v-model="form.processName" placeholder="请输入处理人名称"/>
              <Field label="处理状态" prop="processStatus" v-model="form.processStatus" type="select" :enumData="dict.processStatus" placeholder="请选择处理状态"/>
              <Field label="处理意见" prop="processComments" v-model="form.processComments" placeholder="请输入处理意见"/>
              <Field label="处理时间" prop="processTime" v-model="form.processTime" type="date" /> -->
          </el-row>

          <!-- <form-buttons @submit='submitForm' v-if="pageInfo.type!='view'" noCancelBtn /> -->
        </el-form>
      </div>
    </div>
    <div class="footbtn">
      <el-button
        type="primary"
        @click="submitForm"
        icon="el-icon-circle-check-outline"
        >确认</el-button
      >
      <el-button
        @click="
          () => {
            open = false;
          }
        "
        icon="el-icon-circle-close-outline"
        >取消</el-button
      >
    </div>
  </el-drawer>
</template>

<script>
import moment from "moment";
import form from "@/assets/mixins/formdialog";
export default {
  name: "FeedbackDetail",
  mixins: [form],
  components: {},
  watch: {
    form(newval) {
      if (newval.createTime) {
        this.createTime = moment(newval.createTime).format("yyyy-MM-DD");
      } else {
        this.createTime = "--";
      }
    },
  },
  created() {
    this.changePath("feedback");
  },
  data() {
    return {
      createTime: "",
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "反馈信息",
      // 是否显示弹出层
      open: false,
      direction: "rtl",
      toString: ["isShow", "reply", "feedbackType", "processStatus"],
      toDate: ["replyTime", "processTime"],
      // 表单校验
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { max: 512, message: "最多只能录入512个字符", trigger: "blur" },
        ],
        isShow: [
          { required: true, message: "请输入是否公开 ", trigger: "blur" },
        ],
        feedbackName: [
          { required: true, message: "请输入反馈人姓名", trigger: "blur" },
          { max: 64, message: "最多只能录入64个字符", trigger: "blur" },
        ],
        companyName: [
          { required: true, message: "请输入单位名称", trigger: "blur" },
          { max: 64, message: "最多只能录入64个字符", trigger: "blur" },
        ],
        contactInfo: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          { max: 64, message: "最多只能录入64个字符", trigger: "blur" },
        ],
        idCard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { max: 64, message: "最多只能录入64个字符", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入地址", trigger: "blur" },
          { max: 64, message: "最多只能录入64个字符", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          { max: 64, message: "最多只能录入64个字符", trigger: "blur" },
        ],
        reply: [
          { required: true, message: "请输入是否回复 ", trigger: "blur" },
        ],
        replyPerson: [
          { required: true, message: "请输入回复人", trigger: "blur" },
          { max: 64, message: "最多只能录入64个字符", trigger: "blur" },
        ],
        replyContent: [
          { required: true, message: "请输入回复", trigger: "blur" },
          { max: 64, message: "最多只能录入64个字符", trigger: "blur" },
        ],
        feedbackType: [
          { required: true, message: "请输入反馈类型 ", trigger: "blur" },
        ],
        fileName: [
          {
            required: true,
            message: "请输入附件名称，多个逗号分割",
            trigger: "blur",
          },
          { max: 64, message: "最多只能录入64个字符", trigger: "blur" },
        ],
        replyFileName: [
          {
            required: true,
            message: "请输入回复附件名称，多个逗号分割",
            trigger: "blur",
          },
          { max: 64, message: "最多只能录入64个字符", trigger: "blur" },
        ],
        createTime: [{ required: true, message: "请选择创建时间" }],
      },
    };
  },

  methods: {
    /** 编辑 */
    edit(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "feedback/edit";
      this.getData();
      this.pageInfo.type = "edit";
      this.title = "修改反馈信息";
    },
    /** 新增 */
    add(row) {
      this.reset();
      this.urls.currUrl = "feedback/add";
      this.getData();
      this.pageInfo.type = "add";
      this.title = "新增反馈信息";
    },
    /** 查看*/
    view(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "feedback/view";
      this.getData();
      this.pageInfo.type = "view";
      this.title = "反馈信息详细";
    },
    /**取消按钮 */
    cancel() {
      this.open = false;
    },
    /**获取数据前弹框 */
    beforeRender(data) {
      data.entity.deptId = String(data.entity.deptId);
      return data;
    },
    /**获取数据后弹框 */
    afterRender(data) {
      this.open = true;
    },

    afterSubmit(data) {
      this.open = false;
      this.$emit("ok");
    },

    // 表单重置
    reset() {
      this.form = {
        title: "",
        content: "",
        isShow: 0,
        feedbackName: "",
        companyName: "",
        contactInfo: "",
        idCard: "",
        address: "",
        email: "",
        reply: 0,
        replyPerson: "",
        replyContent: "",
        deptId: null,
        deptName: "",
        feedbackType: 1,
        fileName: "",
        filePath: "",
        replyFileName: "",
        replyFilePath: "",
        replyTime: null,
        processId: null,
        processName: "",
        processStatus: 1,
        processComments: "",
        processTime: null,
        remark: "",
      };
      this.resetForm("form");
    },
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.footbtn {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.drawer {
  min-height: calc(100% - 100px);
  width: 100%;
  background: rgba(220, 220, 220, 0.466);
  display: flex;
  justify-content: space-between;
  padding: 20px;
  .drright {
    .righttitle {
      font-weight: 600;
      margin: 8px 0 20px;
      color: red;
    }
  }
  .drleft {
    .jyitem {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .leftlabel {
        color: #0377ff;
        font-weight: 600;
        margin: 8px 0;
      }
    }
    .diyhang {
      display: flex;
      justify-content: space-between;
    }
    .lefttitle {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
    }
  }
  .card {
    width: calc(50% - 10px);
    background: #ffffff;
    border-radius: 25px;
    padding: 20px;
  }
}
</style>