gubersail-platform-ui/src/views/claimSettlement/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" v-if="form.claimSourceType == 1">
        <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.auditStatus == 0"
          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.auditStatus == 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.claimAttachmentList"
          :disabled="editDis"
          @upDate="upDate"
          :isImage="true"
        ></upload-file>
      </trade-card>
      <trade-card title="反馈表">
        <avue-crud :option="option" :data="form.bladeClaimAuditList" id="out-table" ref="crud"> </avue-crud>
      </trade-card>
      <trade-card title="操作记录">
        <avue-form :option="optionForm2" v-model="form" ref="form2"> </avue-form>
      </trade-card>
    </div>
  </div>
</template>

<script>
// @ts-nocheck
import { submit, detail, submitApprova, revokeApproval } from "@/api/claimSettlement/index";
import dicSelect from "@/components/dicSelect/main.vue";
export default {
  name: "detailsPage",
  data() {
    return {
      editBtn: false,
      editDis: false,
      form: {
        tireQuantity: 1,
        claimSourceType: 1,
        claimAttachmentList: [],
        bladeClaimAuditList: [],
      },
      optionForm: {
        menuBtn: false,
        span: 6,
        disabled: false,
        labelWidth: 100,
        column: [
          {
            label: "理赔单号",
            prop: "claimNo",
            disabled: true,
          },
          {
            label: "来源类型",
            prop: "claimSourceType",
            type: "select",
            dicData: [
              {
                label: "经销商",
                value: 1,
              },
              {
                label: "门店",
                value: 2,
              },
              // {
              //   label: "终端消费者",
              //   value: 3,
              // },
            ],
            disabled: true,
          },
          {
            label: "来源方名称",
            prop: "sourceName",
            disabled: true,
          },
          {
            label: "联系人",
            prop: "consumerName",
          },
          {
            label: "电话",
            prop: "consumerPhone",
            type:'number',
            controls:false,
            precision:0,
            maxRows:19999999999,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur",
              },
            ],
          },
          {
            label: "胎号",
            prop: "tyreNo",
          },
          {
            label: "车牌号",
            prop: "vehicleNumber",
          },
          {
            label: "规格型号",
            prop: "tyreSpecs",
          },
          {
            label: "轮胎数量",
            prop: "tireQuantity",
            type: "number",
            controls: false,
            precision: 0,
            disabled: true,
          },
          {
            label: "购买日期",
            prop: "purchaseDate",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd 00:00:00",
          },
          {
            label: "装车日期",
            prop: "mountDate",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd 00:00:00",
          },
          {
            label: "行驶里程(km)",
            prop: "runMileage",
            type: "number",
            controls: false,
            precision: 0,
          },
          {
            label: "索赔金额",
            prop: "claimAmount",
            type: "number",
            controls: false,
            precision: 2,
            disabled: true,
            placeholder: " ",
          },
          {
            label: "审核状态",
            prop: "auditStatus",
            type: "select",
            dicData: [
              {
                label: "待审核",
                value: 0,
              },
              {
                label: "审核中",
                value: 1,
              },
              {
                label: "已通过",
                value: 2,
              },
              {
                label: "已拒绝",
                value: 3,
              },
            ],
            disabled: true,
          },
          {
            label: "理赔原因",
            prop: "claimReason",
            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: "claimNo",
            overHidden: true,
          },
          {
            label: "审核结论",
            prop: "auditResult",
            overHidden: true,
            type: "select",
            dicData: [
              {
                label: "通过",
                value: 2,
              },
              {
                label: "拒绝",
                value: 3,
              },
            ],
          },
          {
            label: "核定赔付金额",
            prop: "auditAmount",
            overHidden: true,
          },
          {
            label: "详细审核说明",
            prop: "reasonDetail",
            overHidden: true,
          },
          {
            label: "审核人姓名",
            prop: "auditorName",
            overHidden: true,
          },
          {
            label: "审核时间",
            prop: "auditTime",
            overHidden: true,
          },
          {
            label: "反馈渠道",
            prop: "feedbackChannel",
            overHidden: true,
          },
          {
            label: "客户反馈内容",
            prop: "feedbackDesc",
            overHidden: true,
          },
          {
            label: "客户反馈时间",
            prop: "feedbackTime",
            overHidden: true,
          },
          {
            label: "申诉状态",
            prop: "appealStatus",
            overHidden: true,
            type: "select",
            dicData: [
              {
                label: "无申诉",
                value: 0,
              },
              {
                label: "申诉中",
                value: 1,
              },
              {
                label: "已处理",
                value: 2,
              },
            ],
          },
          {
            label: "申诉处理结果",
            prop: "appealResult",
            overHidden: true,
          },
          {
            label: "申诉处理时间",
            prop: "appealTime",
            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: {
    inEdit() {
      this.editBtn = false;
      if (this.form.auditStatus == 0) {
        this.editDis = false;
        this.optionForm.disabled = false;
      }
    },
    allClick(name) {
      if (name == "提交审核") {
        this.$refs.form.validate((valid, done) => {
          done();
          if (valid) {
            if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.form.consumerPhone)) {
              return this.$message.error("请输入正确电话");
            }
            if (this.form.claimAttachmentList.length == 0) return this.$message.error("请上传鼓包并向照片");
            if (this.form.claimAttachmentList.length == 1) return this.$message.error("请上传轮胎DOT");
            if (this.form.claimAttachmentList.length == 2) return this.$message.error("请上传车头照片");
            if (this.form.claimAttachmentList.length == 3) return this.$message.error("请上传鼓包处照片");
            this.form.claimAttachmentList.forEach((item, index) => {
              item.fileProperties = index + 1;
            });
            submit(this.form);
            this.$confirm("是否提交审核?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
              let obj = {
                id: this.form.id,
              };
              submitApprova(obj).then((res) => {
                this.$message.success("操作成功");
                this.getDetail(this.form.id);
              });
            });
          } else {
            return false;
          }
        });
      }
      if (name == "撤销审核") {
        this.$confirm("是否撤销审核?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          let obj = {
            id: this.form.id,
          };
          revokeApproval(obj).then((res) => {
            this.$message.success("操作成功");
            this.getDetail(this.form.id);
          });
        });
      }
    },
    upDate(data) {
      this.form.claimAttachmentList = data;
    },
    submit() {
      // @ts-ignore
      this.$refs.form.validate((valid, done) => {
        done();
        if (valid) {
          if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.form.consumerPhone)) {
            return this.$message.error("请输入正确电话");
          }
          if (this.form.claimAttachmentList.length == 0) return this.$message.error("请上传鼓包并向照片");
          if (this.form.claimAttachmentList.length == 1) return this.$message.error("请上传轮胎DOT");
          if (this.form.claimAttachmentList.length == 2) return this.$message.error("请上传车头照片");
          if (this.form.claimAttachmentList.length == 3) return this.$message.error("请上传鼓包处照片");
          this.form.claimAttachmentList.forEach((item, index) => {
            item.fileProperties = index + 1;
          });
          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.auditStatus > 0) {
            this.editBtn = true;
            this.editDis = true;
            this.optionForm.disabled = true;
          }
          if (!this.editBtn && res.data.data.auditStatus == 0) {
            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>