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">
        <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>
      </div>
    </div>
    <div style="margin-top: 50px">
      <el-tab-pane label="基础信息">
        <trade-card title="基础信息">
          <avue-form :option="optionForm" v-model="form" ref="form">
          </avue-form>
        </trade-card>
        <trade-card title="文件中心">
          <upload-file :data="[]" :disabled="editDis"></upload-file>
        </trade-card>
        <trade-card title="反馈表">
          <avue-crud
            :option="option"
            :data="data"
            id="out-table"
            ref="crud"
            :header-cell-class-name="headerClassName"
            :row-style="{ height: '20px', padding: '0px' }"
            :cell-style="{ height: '20px', padding: '0px' }"
            @selection-change="selectionChange"
          >
          </avue-crud>
        </trade-card>
        <trade-card title="操作记录">
          <avue-form :option="optionForm2" v-model="form" ref="form2">
          </avue-form>
        </trade-card>
      </el-tab-pane>
    </div>
  </div>
</template>

<script>
import {
  submit,
  detail,
  submitApprova,
  revokeApproval
} from '@/api/claimSettlement/index';
export default {
  name: 'detailsPage',
  data() {
    return {
      editBtn: false,
      editDis: false,
      form: {},
      oldForm: {},
      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
              }
            ]
          },
          {
            label: '来源方名称',
            prop: 'sourceName'
          },
          {
            label: '消费者姓名',
            prop: 'consumerName'
          },
          {
            label: '消费者电话',
            prop: 'consumerPhone'
          },
          {
            label: '胎号',
            prop: 'tyreNo'
          },
          {
            label: '规格型号',
            prop: 'tyreSpecs'
          },
          {
            label: '购买日期',
            prop: 'purchaseDate',
            type: 'date',
            format: 'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd'
          },
          {
            label: '装车日期',
            prop: 'mountDate',
            type: 'date',
            format: 'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd'
          },
          {
            label: '行驶里程(km)',
            prop: 'runMileage'
          },
          {
            label: '索赔金额',
            prop: 'claimAmount'
          },
          {
            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: 'auditStatus',
            type: 'select',
            dicData: [
              {
                label: '待审核',
                value: 0
              },
              {
                label: '审核中',
                value: 1
              },
              {
                label: '已通过',
                value: 2
              },
              {
                label: '已拒绝',
                value: 3
              }
            ],
            disabled: true
          },
          {
            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,
        menuWidth: 60,
        searchMenuSpan: 18,
        tip: false,
        border: true,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        selection: true,
        align: 'center',
        menu: false,
        column: [
          {
            label: 'index',
            prop: 'index',
            width: '55',
            fixed: true,
            headerslot: true
          },
          {
            label: '原始文件名',
            prop: 'fileName',
            overHidden: true
          },
          {
            label: '文件地址',
            prop: 'fileUrl',
            overHidden: true
          },
          {
            label: '文件类型',
            prop: 'fileType',
            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: {},
  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.status == '录入') {
        this.editDis = false;
        this.optionForm.disabled = 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 => {
          this.form = res.data.data;
        })
        .finally(() => {
          loading.close();
        });
    },
     // 更改表格颜色
    /**
     * @param {{ columnIndex: number; column: { level: number; }; }} tab
     */
    headerClassName(tab) {
      //颜色间隔
      let back = ""
      if (tab.columnIndex >= 0 && tab.column.level === 1) {
        if (tab.columnIndex % 2 === 0) {
          back = "back-one"
        } else if (tab.columnIndex % 2 === 1) {
          back = "back-two"
        }
      }
      return back;
    },
  }
};
</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 #out-table .back-one {
  background: #ecf5ff !important;
  text-align: center;
  padding: 4px 0;
}

::v-deep #out-table .back-two {
  background: #ecf5ff !important;
  text-align: center;
  padding: 4px 0;
}

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