KM-Front-Milestone2/src/views/modules/knowledge/album/checkInfo.vue

<template>
  <rx-layout>
    <div slot="center" style>
      <div class="mainContent">
        <breadcrumb firstLevel="点评管理" lastLevel="审核详情" />
        <div class="body">
          <div class="content">
            <!--  待点评内容  -->
            <div class="wait-check-info">
              <div>{{ showCheck ? '待审核点评内容' : '点评信息' }}</div>
              <a-collapse v-model="collapseCheckKey">
                 <template #expandIcon>
                  <a-icon type="none" />
                </template>
                <a-collapse-panel key="1">
                  <!-- head -->
                  <div v-if="parentInfo" slot="header" class="collapse-check">
                    <div>
                      <img :src="'/api/api-system/system/core/sysFile/previewFile?fileId='+parentInfo.createPhoto" style="width:20px;height:20px;border-radius:50%;" alt="">
                      <span>{{ parentInfo.createName }}</span>
                    </div>
                    <div>
                      {{ parentInfo.content }}
                    </div>
                    <div>
                      <span>{{ parentInfo.createTime }}</span>
                    </div>
                  </div>
                  <!-- body -->
                  <div :slot="!parentInfo ? 'header' : null" style="padding-right: 6px;color: #1890ff;" class="collapse-check">
                    <div>
                      <img :src="'/api/api-system/system/core/sysFile/previewFile?fileId='+childrenInfo.createPhoto" style="width:20px;height:20px;border-radius:50%;" alt="">
                      <span>{{ childrenInfo.createName }}</span>
                    </div>
                    <div>
                      {{ childrenInfo.content }}
                    </div>
                    <div>
                      <span>{{ childrenInfo.createTime }}</span>
                      <span v-if="childrenInfo.state == 0" style="color:orange;">待审核</span>  
                      <span v-else-if="childrenInfo.state == 1" style="color:green;">审核通过</span>  
                      <span v-else style="color:red;">审核未通过</span>  
                    </div>
                  </div>
                </a-collapse-panel>
              </a-collapse>
            </div>
            <a-divider />
            <!--  点评审批   -->
            <template v-if="showCheck">
              <div class="album-check">
                <div>点评审批</div>
                <a-radio-group v-model="auditForm.result" style="margin-bottom: 16px;">
                  <a-radio value="1">通过</a-radio>
                  <a-radio value="0">驳回</a-radio>
                </a-radio-group>
                <a-input v-model="auditForm.remark" type="textarea" :autosize="{minRows: 3, maxRows: 6}" :maxLength="200" placeholder="请输入审批意见" />
                <a-row :gutter="24" type="flex" justify="end" style="margin-top: 20px;padding-right:12px;">
                  <a-button style="margin-right: 20px;" @click="$router.back()">取消</a-button>
                  <a-button type="primary" :loading="saveLoading" @click="handleSaveClick">保存</a-button>
                </a-row>
              </div>
            <a-divider />
            </template>
            <!--  专辑基本信息  -->
            <div class="body-head">
              <div class="body-head-title">
                专辑基本信息
              </div>
              <div class="body-head-details">
                <div>
                  <span>专辑名称: {{ baseInfo.name }}</span>
                  <span>专辑负责人: {{ baseInfo.owner }}</span>
                  <span>创建时间: {{ baseInfo.createTime }}</span>
                </div>
                <div>
                  <span>所属公司: {{ baseInfo.ownerCompany }}</span>
                  <span>所属部门: {{ baseInfo.ownerDepartment }}</span>
                  <span>专辑分类: {{ baseInfo.categoryName }}</span>
                </div>
                <div>
                  <span>阅读数量: {{ baseInfo.views }}</span>
                  <span>点评数量: {{ baseInfo.yelpTotal }}</span>
                  <span>发布状态: {{ baseInfo.versionStateName }}</span>
                </div>
              </div>
            </div>
            <a-divider />
            <!--  专辑审批记录  -->
            <div class="album-check-record">
              <div>专辑审批记录</div>
              <div>
                <a-table :columns="approverColumns" :data-source="approverData" :pagination="false">
                </a-table>
              </div>
            </div>
            <template v-if="!showCheck">
              <a-row :gutter="24" type="flex" justify="end" style="margin-top: 20px;padding-right:12px;">
                <a-button style="margin-right: 20px;" @click="$router.back()">取消</a-button>
              </a-row>
            </template>
          </div>
        </div>
      </div>  
    </div> 
  </rx-layout>
</template>

<script>
import breadcrumb from '../components/breadcrumb'
import api from '@/api/knowledge/album/checkInfo'
import commentAuditApi from '@/api/knowledge/album/commentAudit'
export default {
  name: 'checkInfo',
  components: {
    breadcrumb
  },
  data() {
    return {
      saveLoading: false,
      api,
      // 点评id
      pkId: '',
      showCheck: false,
      baseInfo: {
        name: '',
        owner: '',
        createTime: '',
        ownerCompany: '',
        ownerDepartment: '',
        categoryName: '',
        views: '',
        yelpTotal: '',
        versionStateName: '',
      },
      // 父级点评信息
      parentInfo: {},
      // 子集点评信息
      childrenInfo: {},
      collapseCheckKey: '1',
      approverColumns: [
        {
          title: '流程节点',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '审批人',
          align: 'center',
          dataIndex: 'actualApproverName',
        },
        {
          title: '审批状态',
          align: 'center',
          dataIndex: 'approvalStatus',
        },
        {
          title: '审批备注',
          align: 'center',
          dataIndex: 'comment',
        },
        {
          title: '时间',
          align: 'center',
          dataIndex: 'approvalTime',
        },
      ],
      approverData: [],
      auditForm: {
        pkIds: [],
        result: '1',
        remark: ''
      }
    }
  },
  created() {
    this.auditForm = Object.assign({},this.$options.data().auditForm)
    // pkId   state: 专辑状态  versionState: 版本状态
    this.pkId = this.$route.query.pkId
    this.showCheck = this.$route.query.showCheck
    // this.versionState = this.$route.query.versionState
    this.init()
  },
  methods: {
    async init() {
      let detailData = await api.info({pkId: this.pkId})
      let detailInfo = detailData.data
      this.parentInfo = detailInfo.yelp
      if(!this.parentInfo) {
        let collapseNode = document.querySelector('.ant-collapse-content')
        collapseNode.style.display = 'none'
      }
      this.childrenInfo = {
        createPhoto: detailInfo.createPhoto,
        createName: detailInfo.createName,
        content: detailInfo.content,
        createTime: detailInfo.createTime,
        state: detailInfo.state
      }
      this.baseInfo = { ...detailInfo.ablum }
      this.approverData = detailInfo.flows
    },
    handleSaveClick() {
      this.handleSaveClick = false
      this.auditForm.pkIds = [ this.pkId ]
      commentAuditApi.approve(this.auditForm).then(res => {
        if(res.code == 200) {
          setTimeout(() => 
            {
              this.$router.back()
              this.saveLoading = false
            }
          ,1000)
        }
      })
    } 
  }
}
</script>

<style lang="less" scoped>
@gary:  #f8f8f8;
@white: #fff;
@fontSize: 17px;
.mainContent {
  min-height: 100%;
  width: 100%;
  padding: 40px;
  background: #f8f8f8;
  position: relative;
  .ant-breadcrumb {
    position:absolute;
    top:10px;
  }

  .body {
    height: 100%;
    background: @white;
    
    .content {
      height: 100%;
      background: @white;
      padding: 20px 15px 20px 40px;

      .wait-check-info {
        >div:first-child {
          font-size: @fontSize;
          margin-bottom: 20px;
        }

        .collapse-check {
          padding-right: 20px;

          >div:nth-child(1) {
            display: flex;
            align-items: center;

            img {
              width:20px;
              height:20px;
              border-radius:50%;
            }

            span {
              margin-left: 15px;
            }
          }

          >div:nth-child(2) {
            margin: 10px 0 15px;
          }

          >div:nth-child(3) {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            >span:nth-child(2) {
              cursor: pointer;
            }
          }
        }
      }

      .album-check {
        width: 95%;

        >div:first-child {
          font-size: @fontSize;
          margin-bottom: 20px;
        }
      }

      .body-head {
        height: 100%;
        background: @white;

        .body-head-title {
          font-size: @fontSize;
        }

        .body-head-details {
          margin-top: 10px;

          div {
            height: 40px;
            line-height: 40px;
            display: flex;

            span {
              display: inline-block;
              width: 100%;
              white-space: pre-line;
            }
          }
        }
      }

      .album-check-record {
        >div:first-child {
          font-size: @fontSize;
          margin-bottom: 20px;
        }

        >div:last-child {
          width: 70%;
        }
      }
    }
  }
}
.clearBtn {
  background: none;
  color: #3294F7;
  text-shadow: none;
  padding: 0px 6px;
  border: none;
  box-shadow: none;
}

</style>
<style scoped>
/deep/.ant-btn > .anticon + span {
  margin-left: 0;
}
/deep/ .ant-tabs-bar {
  padding-left: 0;
}
/deep/ .ant-collapse {
  border-radius: 0px;
}
/deep/ .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow {
  top: 24px;
}
/deep/ .ant-collapse-content {
  border: none;
}
/deep/ .ant-collapse-content > .ant-collapse-content-box {
  padding: 20px 30px 20px 50px;
}
/deep/ .ant-input {
  border-radius: 0;
}
/deep/ .ant-pagination {
  margin: 1px;
}
 /deep/.ant-table-thead > tr > th {
  text-align: center; 
  height: 54px;
}
/deep/ .ant-table-tbody > tr > td {
  height: 54px;
}
</style>