DetailDialog.vue

<template>
  <normal-dialog
    :visible="visible"
    :before-close="resetDialog"
    @update:visible="updateVisibleHandle"
    class="SystemUserDetail"
  >
    <template slot="title">详情</template>
    <form-area title="详情">
      <form-line>
        <form-item label="登录账号">{{selected.loginAccount}}</form-item>
        <form-item label="姓名">{{selected.name}}</form-item>
      </form-line>
    </form-area>
    <form-area title="操作记录">
      <div
        class="record-List"
        v-for="(item, index) in selected.adminRecordVoList"
        :key="index"
      >
        <span class="record-Item">{{getOperClassifyName(item.operClassify)}}</span>
        <span class="record-Item">{{item.handler}}</span>
        <span class="record-Item">{{$formatDate(item.createAt)}}</span>
      </div>
    </form-area>
  </normal-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js';

export default {
  mixins: [dialogMixin],
};
</script>

<style lang="scss">
.SystemUserDetail {
  .record-List {
    .record-Item {
      display: inline-block;
      width: 30%;
    }
  }
  .login-List {
    display: flex;
    justify-content: space-between;
    padding-right: 40px;
  }
}
</style>