上传文件简要列表

预览

工具

• vue
• vue-cli3

代码

// table.js

import './table.less'
export default {
  data() {
    return {
      data: [
        {
          category_type: '被告主体证明材料',
          fileTypeNameList: [
            {
              title: '被申请人经常居住地证明',
              caseAttachmentFileList: [
                {
                  filename: '出生证明.doc',
                  fileId: 'sjdflkjwioeuroi23j4kj',
                  iobsid: 'sdfjjewiiewuurjujjf'
                },
                {
                  filename: '小学证明.doc',
                  fileId: 'euroi sdfewf23j4kj',
                  iobsid: 'sdfwiieurjujjf'
                }
              ]
            },
            {
              title: '被申请人财产证明',
              caseAttachmentFileList: [
                {
                  filename: '产权证明.doc',
                  fileId: 'sjdflkjwiouroi23j4kj',
                  iobsid: 'sdfjjurjujjf'
                }
              ]
            }
          ]
        },
        {
          category_type: '原告主体证明材料',
          fileTypeNameList: [
            {
              title: '姓名证明',
              caseAttachmentFileList: [
                {
                  filename: '出明.doc',
                  fileId: 'sjdflkjweefioeuroi23j4kj',
                  iobsid: 'sdfjjewiiewuurhghjujjf'
                },
                {
                  filename: '小证明.doc',
                  fileId: 'euroi7#$sdfewfe23j4kj',
                  iobsid: 'sdfwiieurj&^%%ujjf'
                },
                {
                  filename: '小明.doc',
                  fileId: 'euroi7#$sdfewfe23j4kj',
                  iobsid: 'sdfwiieurj&^%%ujjf'
                }
              ]
            },
            {
              title: '被申请人财产证明',
              caseAttachmentFileList: [
                {
                  filename: '产权证明.doc',
                  fileId: 'sjdflkjwiouroi23j4kj',
                  iobsid: 'sdfjjurjujjf'
                }
              ]
            },
            {
              title: '财产证明',
              caseAttachmentFileList: []
            }
          ]
        }
      ]
    }
  },

  render(h) {
    return (
      <div class="caseTrace-case-__material-container">
        <div class="material-row title">
          <div class="material-cell">材料类别</div>
          <div class="material-cell">材料名称</div>
          <div class="material-cell">文档名称</div>
          <div class="material-cell">操作</div>
        </div>
        {this._l(this.data, (list, index) => {
          return (
            <div class="material-row">
              <div class="material-cell">
                <p>{list.category_type}</p>
              </div>
              <div class="material-cell">
                {this._l(list.fileTypeNameList, (fileList, fIdx) => {
                  let fileListDom = this._l(
                    fileList.caseAttachmentFileList,
                    (attach, idx) => {
                      return <p>{idx === 0 ? fileList.title : ''}</p>
                    }
                  )
                  return (
                    <div>
                      {fileListDom.length ? (
                        fileListDom
                      ) : (
                        <p>{fileList.title}</p>
                      )}
                    </div>
                  )
                })}
              </div>
              <div class="material-cell">
                {this._l(list.fileTypeNameList, (fileList, fIdx) => {
                  return (
                    <div>
                      {this._l(
                        fileList.caseAttachmentFileList,
                        (attach, idx) => {
                          return <p class="doc">{attach.filename}</p>
                        }
                      )}
                    </div>
                  )
                })}
              </div>
              <div class="material-cell">
                {this._l(list.fileTypeNameList, (fileList, fIdx) => {
                  let ctrlBtsGroup = this._l(
                    fileList.caseAttachmentFileList,
                    (attach, idx) => {
                      return (
                        <p>
                          <button on-click={() => this.preview(attach)}>
                            预览
                          </button>
                          <button on-click={() => this.download(attach)}>
                            下载
                          </button>
                          <button on-click={() => this.uploadAttach(attach)}>
                            上传
                          </button>
                          <button on-click={() => this.deleteAttach(attach)}>
                            删除
                          </button>
                        </p>
                      )
                    }
                  )
                  return (
                    <div>
                      {fileList.caseAttachmentFileList.length ? (
                        ctrlBtsGroup
                      ) : (
                        <p>
                          <button on-click={() => this.uploadAttach()}>
                            上传
                          </button>
                        </p>
                      )}
                    </div>
                  )
                })}
              </div>
            </div>
          )
        })}
      </div>
    )
  },
  methods: {
    preview(attach) {
      console.log(attach)
    },
    download(attach) {},
    uploadAttach(attach) {},
    deleteAttach(attach) {}
  },
  mounted() {
    console.log('data: ', this.data)
  }
}

// table.less

.caseTrace-case-__material-container {
  text-align: left;
  p {
    height: 24px;
    margin: 0;
    padding: 6px 0;
    &.doc {color:blue;}
  }
  .material-row {
    display: flex;
    flex: 1;
    padding: 8px 0;
    border-bottom: 1px solid #efefef;
    &.title {
      color: #ccc;
      font-size: 18px;
    }
  }
  .material-cell {
    flex: 1;
  }
}