【前端】智能库房综合管理系统前端项目
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

115 lines
3.7 KiB

  1. <template>
  2. <div>
  3. <div class="head-container">
  4. <!-- <crudOperation /> -->
  5. <!-- <el-button v-permission="permission.download" :loading="crud.downloadLoading" :disabled="!selections.length" size="mini" icon="el-icon-download" @click="handleDownload">导出</el-button> -->
  6. <el-button :loading="crud.downloadLoading" size="mini" icon="el-icon-download" @click="handleDownload">导出</el-button>
  7. <el-select v-model="oprType" class="filter-item" style="width: 100px; height: 30px;margin:0 0 0 10px" @change="crud.toQuery">
  8. <el-option v-for="item in oprTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
  9. </el-select>
  10. <el-input
  11. v-model="keyWord"
  12. size="small"
  13. clearable
  14. placeholder="请输入关键词"
  15. style="width: 300px;margin-right:10px;padding-left:10px"
  16. class="input-prepend filter-item"
  17. >
  18. <!-- <el-select slot="prepend" v-model="optionVal" style="width: 100px" @keyup.enter.native="crud.toQuery"> -->
  19. <el-select slot="prepend" v-model="optionVal" style="width: 100px">
  20. <el-option
  21. v-for="item in options"
  22. :key="item.value"
  23. :label="item.label"
  24. :value="item.value"
  25. />
  26. </el-select>
  27. </el-input>
  28. <date-range-picker v-model="queryTime" class="date-item" />
  29. <rrOperation />
  30. </div>
  31. <el-table
  32. ref="table"
  33. :data="crud.data"
  34. style="width: 100%;"
  35. height="calc(100vh - 356px)"
  36. @row-click="clickRowHandler"
  37. @selection-change="selectionChangeHandler"
  38. >
  39. <el-table-column type="selection" width="55" align="center" />
  40. <el-table-column type="index" label="序号" width="100" align="center" />
  41. <el-table-column prop="" label="登录账号" min-width="150" align="center" />
  42. <el-table-column prop="" label="用户名" align="center" min-width="150" />
  43. <el-table-column prop="" label="用户角色" align="center" min-width="150" />
  44. <el-table-column prop="" label="所属部门" align="center" min-width="180" />
  45. <el-table-column prop="" label="IP地址" align="center" min-width="180" />
  46. <el-table-column prop="" label="登录时间" align="center" min-width="180" />
  47. </el-table>
  48. <pagination />
  49. </div>
  50. </template>
  51. <script>
  52. import rrOperation from '@crud/RR.operation'
  53. import CRUD, { presenter, crud } from '@crud/crud'
  54. import DateRangePicker from '@/components/DateRangePicker'
  55. import pagination from '@crud/Pagination'
  56. export default {
  57. name: 'LoginLog',
  58. components: { rrOperation, DateRangePicker, pagination },
  59. mixins: [presenter(), crud()],
  60. cruds() {
  61. return CRUD({
  62. url: 'api/storage/initStorageLogList',
  63. sort: ['update_time,desc'],
  64. // crudMethod: caseCrudMethod,
  65. optShow: {
  66. add: false,
  67. edit: false,
  68. del: false,
  69. download: true
  70. }
  71. })
  72. },
  73. data() {
  74. return {
  75. selections: [],
  76. keyWord: '',
  77. oprType: 0,
  78. oprTypeOptions: [
  79. { value: 0, label: '全部' },
  80. { value: 1, label: '成功' },
  81. { value: 2, label: '失败' }
  82. ],
  83. optionVal: 1,
  84. options: [
  85. { value: 1, label: '操作人' },
  86. { value: 2, label: '所属部门' }
  87. ],
  88. queryTime: null
  89. }
  90. },
  91. methods: {
  92. // 导出
  93. handleDownload() {
  94. },
  95. test() {
  96. console.log(this.crud, 'crud')
  97. },
  98. clickRowHandler(row) {
  99. this.$refs.table.toggleRowSelection(row) // 单击选中
  100. },
  101. selectionChangeHandler(val) {
  102. this.selections = val
  103. }
  104. }
  105. }
  106. </script>
  107. <style lang="scss" scoped>
  108. @import "~@/assets/styles/archives-manage.scss";
  109. </style>