gubersail-platform-ui/src/views/complain/detailsPage.vue

<template>
  <div>
    <div class="customer-head">
      <div class="customer-back">
        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left" @click="goBack()">返回列表 </el-button>
      </div>
      <div class="add-customer-btn">
        <el-button class="el-button--small-yh" style="margin-left: 6px;" type="primary" size="small" v-if="editBtn" @click="inEdit">编 辑 </el-button>
        <el-button class="el-button--small-yh" v-else style="margin-left: 6px;" type="primary" size="small" :disabled="editDis" @click="submit"
          >保 存
        </el-button>
        <el-button
          v-if="form.id && (form.status == 0 || form.status == 4)"
          class="el-button--small-yh"
          style="margin-left: 6px;"
          type="success"
          size="small"
          :disabled="editDis"
          @click="allClick('提交投诉')"
          >提交投诉
        </el-button>
        <el-button
          v-if="form.id && form.status == 1"
          class="el-button--small-yh"
          style="margin-left: 6px;"
          type="danger"
          size="small"
          :disabled="editBtn"
          @click="allClick('撤销投诉')"
          >撤销投诉
        </el-button>
      </div>
    </div>
    <div style="margin-top: 50px">
      <trade-card title="基础信息">
        <avue-form :option="optionForm" v-model="form" ref="form"> </avue-form>
      </trade-card>
      <trade-card title="文件中心">
        <upload-file
          :data="form.complaintAttachmentList"
          :disabled="editDis"
          @upDate="upDate"
          delUrl="/gubersail-admin/bladecomplaintattachment/remove"
        ></upload-file>
      </trade-card>
      <trade-card title="记录表">
        <avue-crud :option="option" :data="form.complaintReplyList" id="out-table" ref="crud">
          <template slot="replyAttachUrl" slot-scope="{ row, index }">
            <span v-if="row.replyAttachUrl">
              <el-button type="text" @click="viewReply(row)">
                查看附件
              </el-button>
            </span>
          </template>
        </avue-crud>
      </trade-card>
      <trade-card title="操作记录">
        <avue-form :option="optionForm2" v-model="form" ref="form2"> </avue-form>
      </trade-card>
    </div>
  </div>
</template>

<script>
import { submit, detail, submitComplaint, revokeComplaint } from "@/api/complain/index";
import dicSelect from "@/components/dicSelect/main.vue";
import { getToken } from "@/util/auth";
export default {
  name: "detailsPage",
  data() {
    return {
      editBtn: false,
      editDis: false,
      form: {
        complaintAttachmentList: [],
        complaintReplyList: []
      },
      optionForm: {
        menuBtn: false,
        span: 6,
        disabled: false,
        labelWidth: 100,
        column: [
          {
            label: "投诉单号",
            prop: "complaintNo",
            disabled: true
          },
          {
            label: "投诉人类型",
            prop: "complainantType",
            type: "select",
            dicData: [
              {
                label: "终端消费者",
                value: 1
              },
              {
                label: "门店",
                value: 2
              },
              {
                label: "经销商",
                value: 3
              }
            ],
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "投诉人客户",
            prop: "customerName"
          },
          {
            label: "联系人姓名",
            prop: "contactName",
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "联系人电话",
            prop: "contactPhone",
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "投诉标题",
            prop: "title",
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "投诉类型",
            prop: "complaintType",
            type: "select",
            dicData: [
              {
                label: "质量",
                value: "质量"
              },
              {
                label: "物流",
                value: "物流"
              },
              {
                label: "服务",
                value: "服务"
              },
              {
                label: "其他",
                value: "其他"
              }
            ],
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "可见范围位运算",
            prop: "visibleScope",
            disabled: true
          },
          {
            label: "投诉状态",
            prop: "status",
            type: "select",
            dicData: [
              {
                label: "待处理",
                value: 0
              },
              {
                label: "处理中",
                value: 1
              },
              {
                label: "已回复",
                value: 2
              },
              {
                label: "已关闭",
                value: 3
              },
              {
                label: "已撤销",
                value: 4
              }
            ],
            disabled: true
          },
          {
            label: "回复状态",
            prop: "replyStatus",
            type: "select",
            dicData: [
              {
                label: "未回复",
                value: 0
              },
              {
                label: "已回复",
                value: 1
              }
            ],
            disabled: true
          },
          {
            label: "提交时间",
            prop: "submitTime",
            disabled: true
          },
          {
            label: "问题描述",
            prop: "content",
            type: "textarea",
            span: 12,
            minRows: 2
          },
          {
            label: "关闭原因",
            prop: "closeReason",
            type: "textarea",
            span: 12,
            minRows: 2
          },
          {
            label: "备注",
            prop: "remark",
            type: "textarea",
            span: 12,
            minRows: 2
          }
        ]
      },
      optionForm2: {
        menuBtn: false,
        span: 6,
        disabled: false,
        labelWidth: 100,
        column: [
          {
            label: "制单人",
            prop: "createUserName",
            disabled: true
          },
          {
            label: "制单日期",
            prop: "createTime",
            disabled: true
          },
          {
            label: "修改人",
            prop: "updateUserName",
            disabled: true
          },
          {
            label: "修改日期",
            prop: "updateTime",
            disabled: true
          }
        ]
      },
      option: {
        maxHeight: 340,
        calcHeight: 30,
        index: true,
        menu: false,
        header: false,
        column: [
          {
            label: "投诉单号",
            prop: "complaintNo",
            overHidden: true
          },
          {
            label: "回复类型",
            prop: "replyType",
            overHidden: true,
            type: "select",
            dicData: [
              {
                label: "系统回复",
                value: 1
              },
              {
                label: "客户反馈",
                value: 2
              },
              {
                label: "申诉",
                value: 3
              }
            ],
          },
          {
            label: "回复内容",
            prop: "replyContent",
            overHidden: true
          },
          {
            label: "回复附件",
            prop: "replyAttachUrl",
            overHidden: true
          },
          {
            label: "回复人姓名",
            prop: "replierName",
            overHidden: true
          },
          {
            label: "回复时间",
            prop: "replyTime",
            overHidden: true
          },
          {
            label: "制单人",
            prop: "createUserName",
            overHidden: true
          },
          {
            label: "制单日期",
            prop: "createTime",
            type: "date",
            overHidden: true,
            width: 120,
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd HH:mm:ss"
          },
          {
            label: "修改人",
            prop: "updateUserName",
            overHidden: true
          },
          {
            label: "修改日期",
            prop: "updateTime",
            type: "date",
            overHidden: true,
            width: 120,
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd HH:mm:ss"
          },
          {
            label: "备注",
            prop: "remarks",
            cell: true,
            width: 150,
            overHidden: true
          }
        ]
      }
    };
  },
  components: { dicSelect },
  props: {
    detailData: Object
  },
  created() {
    if (this.detailData && this.detailData.id) {
      this.editBtn = true;
      this.editDis = true;
      this.optionForm.disabled = true;
      this.getDetail(this.detailData.id);
    }
  },
  methods: {
    viewReply(row) {
      window.open(`${row.replyAttachUrl}?${this.website.tokenHeader}=${getToken()}`);
    },
    inEdit() {
      this.editBtn = false;
      if (this.form.status == 0 || this.form.status == 4) {
        this.editDis = false;
        this.optionForm.disabled = false;
      }
    },
    allClick(name) {
      if (name == "提交投诉") {
        this.$confirm("是否提交投诉?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let obj = {
            id: this.form.id
          };
          submitComplaint(obj).then(res => {
            this.$message.success("操作成功");
            this.getDetail(this.form.id);
          });
        });
      }
      if (name == "撤销投诉") {
        this.$confirm("是否撤销投诉?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let obj = {
            id: this.form.id
          };
          revokeComplaint(obj).then(res => {
            this.$message.success("操作成功");
            this.getDetail(this.form.id);
          });
        });
      }
    },
    upDate(data) {
      this.form.complaintAttachmentList = data;
    },
    submit() {
      // @ts-ignore
      this.$refs.form.validate((valid, done) => {
        done();
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "加载中",
            spinner: "el-icon-loading",
            background: "rgba(255,255,255,0.7)"
          });
          submit(this.form)
            .then(res => {
              this.$message.success("保存成功");
              this.getDetail(res.data.data.id);
            })
            .finally(() => {
              loading.close();
            });
        } else {
          return false;
        }
      });
    },
    /**
     * @param {any} id
     */
    getDetail(id) {
      const loading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(255,255,255,0.7)"
      });
      detail({ id: id })
        .then(res => {
          if (!(res.data.data.status == 0 || res.data.data.status == 4)) {
            this.editBtn = true;
            this.editDis = true;
            this.optionForm.disabled = true;
          }
          if (!this.editBtn && (res.data.data.status == 0 || res.data.data.status == 4)) {
            this.editDis = false;
            this.optionForm.disabled = false;
          }
          this.form = res.data.data;
        })
        .finally(() => {
          loading.close();
        });
    },
    /**
     * @param {any} type
     */
    goBack(type) {
      this.$emit("goBack");
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__error {
  display: none !important;
}

::v-deep .el-form-item {
  margin-bottom: 8px !important;
}

::v-deep .el-table .cell {
  padding: 0 2px !important;

  .el-form-item {
    margin-bottom: 0px !important;
  }
}
::v-deep .el-table--small td,
.el-table--small th {
  padding: 2px !important;
}
</style>