auditRecord.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <template>
  2. <div class="saga-audit-record">
  3. <div class="header">
  4. <span>时间段:
  5. <el-date-picker
  6. v-model="dataValue"
  7. type="daterange"
  8. range-separator="至"
  9. start-placeholder="开始日期"
  10. end-placeholder="结束日期"
  11. />
  12. </span>
  13. <span style="margin-left: 20px">
  14. 项目/集团:
  15. <el-select v-model="value" placeholder="请选择">
  16. <el-option
  17. v-for="item in options"
  18. :key="item.value"
  19. :label="item.label"
  20. :value="item.value">
  21. </el-option>
  22. </el-select>
  23. </span>
  24. <span style="margin-left: 20px">
  25. 对象类型:
  26. <el-select v-model="value" placeholder="请选择">
  27. <el-option
  28. v-for="item in options"
  29. :key="item.value"
  30. :label="item.label"
  31. :value="item.value">
  32. </el-option>
  33. </el-select>
  34. </span>
  35. <span style="margin-left: 20px">
  36. 审核状态:
  37. <el-select v-model="value" placeholder="请选择">
  38. <el-option
  39. v-for="item in options"
  40. :key="item.value"
  41. :label="item.label"
  42. :value="item.value">
  43. </el-option>
  44. </el-select>
  45. </span>
  46. </div>
  47. <div class="content">
  48. <el-table :data="tableData" height="700" border style="width: 100%;" :header-cell-style="{background:'#eef1f6'}">
  49. <el-table-column prop="date" label="审核完成时间" align="center"/>
  50. <el-table-column prop="name" label="集团" align="center"/>
  51. <el-table-column prop="name" label="项目" align="center"/>
  52. <el-table-column prop="name" label="对象类型" align="center"/>
  53. <el-table-column prop="name" label="变更类型" align="center"/>
  54. <el-table-column prop="name" label="内容" align="center"/>
  55. <el-table-column prop="name" label="申请人" align="center"/>
  56. <el-table-column prop="name" label="审核状态" align="center"/>
  57. <el-table-column prop="name" label="不通过原因" align="center"/>
  58. <el-table-column prop="name" label="审核人" align="center"/>
  59. </el-table>
  60. </div>
  61. <div class="footer">
  62. <el-pagination
  63. @size-change="handleSizeChange"
  64. @current-change="handleCurrentChange"
  65. :current-page="currentPage"
  66. :page-sizes="[100, 200, 300, 400]"
  67. :page-size="100"
  68. layout="total, sizes, prev, pager, next, jumper"
  69. :total="400"
  70. />
  71. </div>
  72. </div>
  73. </template>
  74. <script>
  75. export default {
  76. name: "auditRecord",
  77. components: {},
  78. data() {
  79. return {
  80. currentPage: 0,
  81. dataValue: '',
  82. value: '',
  83. options: [],
  84. tableData: [{
  85. date: '2016-05-02',
  86. name: '王小虎',
  87. }, {
  88. date: '2016-05-04',
  89. name: '王小虎',
  90. }, {
  91. date: '2016-05-01',
  92. name: '王小虎',
  93. }, {
  94. date: '2016-05-03',
  95. name: '王小虎',
  96. }]
  97. }
  98. },
  99. methods: {
  100. handleSizeChange(val) {
  101. console.log(`每页 ${val} 条`);
  102. },
  103. handleCurrentChange(val) {
  104. console.log(`当前页: ${val}`);
  105. }
  106. }
  107. }
  108. </script>
  109. <style scoped lang="scss">
  110. .saga-audit-record {
  111. background: #ffffff;
  112. border: 1px solid #eee;
  113. .header {
  114. margin: 20px;
  115. overflow: hidden;
  116. .search {
  117. float: left;
  118. width: 20%;
  119. }
  120. .button {
  121. float: right;
  122. }
  123. }
  124. .content {
  125. margin-top: 20px;
  126. .cursor {
  127. cursor: pointer;
  128. }
  129. }
  130. .footer{
  131. position: absolute;
  132. bottom: 30px;
  133. left: 40%;
  134. }
  135. }
  136. </style>