yxk-storeroom-system/src/views/archivesManage/lendManage/lendConfirm/index.vue

<template>
  <div class="lend-confirm">
    <headSlot>
      <el-button
        icon="el-icon-plus"
        size="mini"
        @click="lendFormVisible = true"
      >借出</el-button>
      <el-button icon="el-icon-edit" size="mini" disabled>重新登记</el-button>
      <el-button icon="el-icon-minus" size="mini" disabled>移出</el-button>
      <el-button icon="el-icon-download" size="mini" disabled>导出</el-button>
    </headSlot>
    <!--表格渲染-->
    <el-table
      ref="fieldTable"
      style="min-width: 100%"
      height="calc(100vh - 302px)"
      @selection-change="selectionChangeHandler"
      @row-click="clickRowHandler"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="55" />
      <el-table-column prop="fieldCnName" label="所属门类" min-width="140" />
      <el-table-column prop="fieldName" label="档号" min-width="140" />
      <el-table-column label="题名" min-width="85" />
      <el-table-column prop="isColumnLength" label="盒名称" min-width="85" />
      <el-table-column prop="isColumnLength" label="存放位置" min-width="85" />
      <el-table-column prop="isColumnLength" label="借阅人" min-width="85" />
      <el-table-column prop="isColumnLength" label="借阅天数" min-width="85" />
      <el-table-column prop="isColumnLength" label="借阅目的" min-width="85" />
      <el-table-column prop="isColumnLength" label="借阅状态" min-width="85" />
      <el-table-column prop="isColumnLength" label="操作时间" min-width="85" />
    </el-table>
    <!--借出弹框-->
    <el-dialog title="借出" :visible.sync="lendFormVisible">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <el-table :data="gridData">
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column prop="fieldCnName" label="所属门类" />
        <el-table-column prop="fieldName" label="档号" min-width="140" />
        <el-table-column label="题名" min-width="85" />
        <el-table-column label="状态" min-width="85" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button disabled>解除警报</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <!-- <el-pagination
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    /> -->
    <!-- <pagination /> -->
  </div>
</template>

<script>
import headSlot from '../components/headSlot.vue'
export default {
  components: { headSlot },
  data() {
    return {
      tableData: [],
      gridData: [],
      lendFormVisible: false,
      lendForm: {}
    }
  },
  methods: {
    selectionChangeHandler() {
      console.log('selectionChangeHandler')
    },
    clickRowHandler() {
      console.log('clickRowHandler')
    }
  }
}
</script>

<style lang="scss" scoped>
.lend-confirm {

  // .footer-btn{
  //   text-align: center;
  //   background-color: #031435;
  // }
}
::v-deep .el-dialog__footer{
    background-color: #031435;

}

.el-dialog .dialog-footer{
  padding: 0;
  margin: 0;
}
</style>