index.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <template>
  2. <div class="default-main ba-table-box">
  3. <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info"
  4. show-icon/>
  5. <!-- 表格顶部菜单 -->
  6. <TableHeader
  7. :buttons="['refresh', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
  8. :quick-search-placeholder="t('Quick search placeholder', { fields: t('borrow.borrowuseing.username') + '/' + t('borrow.borrowuseing.mobile') })"
  9. />
  10. <!-- 表格 -->
  11. <!-- 要使用`el-table`组件原有的属性,直接加在Table标签上即可 -->
  12. <Table>
  13. <template #status>
  14. <!-- 在插槽内,您可以随意发挥,通常使用 el-table-column 组件 -->
  15. <el-table-column prop="status" :label="t('borrow.borrowuseing.status')" render="tag" width="180">
  16. <template #default="scope">
  17. <div v-if="scope.row.status == '0'"><el-tag type="danger">实验室审批</el-tag></div>
  18. <div v-else-if="scope.row.status == '1'"><el-tag type="info">管理员驳回</el-tag></div>
  19. <div v-else-if="scope.row.status == '2'"><el-tag type="warning">待使用</el-tag></div>
  20. <div v-else-if="scope.row.status == '3'"><el-tag type="success">使用中</el-tag></div>
  21. <div v-else-if="scope.row.status == '4'"><el-tag type="success">已归还</el-tag></div>
  22. <div v-else-if="scope.row.status == '5'"><el-tag type="danger">已逾期</el-tag></div>
  23. <div v-else-if="scope.row.status == '6'"><el-tag type="danger">学院审批</el-tag></div>
  24. <div v-else-if="scope.row.status == '7'"><el-tag type="info">学院驳回</el-tag></div>
  25. <div v-else><el-tag type="danger">未知状态</el-tag></div>
  26. </template>
  27. </el-table-column>
  28. </template>
  29. </Table>
  30. <!-- 表单 -->
  31. <PopupForm/>
  32. </div>
  33. </template>
  34. <script setup lang="ts">
  35. import {onMounted,onUpdated, onBeforeUnmount ,provide} from 'vue'
  36. import {useI18n} from 'vue-i18n'
  37. import TableHeader from "/@/components/table/header/index.vue";
  38. import Table from "/@/components/table/index.vue";
  39. import PopupForm from "./popupForm.vue";
  40. import {useAdminInfo} from "/@/stores/adminInfo";
  41. import {defaultOptButtons} from "/@/components/table/index";
  42. import baTableClass from "/@/utils/baTable";
  43. import {baTableApi} from "/@/api/common";
  44. defineOptions({
  45. name: 'borrow/borrowUseing',
  46. })
  47. const {t} = useI18n()
  48. const adminInfo = useAdminInfo()
  49. const optButtons = defaultOptButtons(['delete'])
  50. const baTable = new baTableClass(
  51. new baTableApi('/admin/borrow.BorrowUseing/'), {
  52. filter:
  53. {
  54. limit: 20,
  55. order: "id,desc",
  56. },
  57. column: [
  58. {type: 'selection', align: 'center', operator: false},
  59. {label: t('Id'), prop: 'id', align: 'center', operator: '=', operatorPlaceholder: t('Id'), width: 70},
  60. {
  61. label: t('borrow.borrowuseing.username'),
  62. prop: 'username',
  63. align: 'center',
  64. operator: 'LIKE',sortable: 'custom',
  65. operatorPlaceholder: t('Fuzzy query')
  66. },
  67. {
  68. label: t('borrow.borrowuseing.mobile'),
  69. prop: 'mobile',
  70. align: 'center',
  71. operator: 'LIKE',
  72. operatorPlaceholder: t('Fuzzy query')
  73. },
  74. {
  75. label: t('borrow.borrowuseing.expected end time'),
  76. prop: 'expected_end_time',
  77. align: 'center',
  78. operator: 'LIKE',sortable: 'custom',
  79. operatorPlaceholder: t('Fuzzy query')
  80. },
  81. {
  82. label: t('borrow.borrowuseing.remarks'),
  83. prop: 'remarks',
  84. align: 'center',
  85. operator: "LIKE",
  86. operatorPlaceholder: t('Fuzzy query')
  87. },
  88. {
  89. label: t('borrow.borrowuseing.status'),
  90. prop: 'status',
  91. align: 'center',
  92. render: 'slot',
  93. slotName: 'status',
  94. operator: 'eq',sortable: 'custom',
  95. },
  96. {
  97. label: t('borrow.borrowuseing.approval person'),
  98. prop: 'approval_person',
  99. align: 'center',
  100. operator: "LIKE",
  101. sortable: 'custom',
  102. operatorPlaceholder: t('Fuzzy query')
  103. },
  104. {
  105. label: t('Create time'),
  106. prop: 'create_time',
  107. align: 'center',
  108. render: 'datetime',
  109. sortable: 'custom',
  110. operator: 'RANGE',
  111. width: 160
  112. },
  113. {
  114. label: t('Operate'),
  115. align: 'center',
  116. width: '100',
  117. render: 'buttons',
  118. buttons: optButtons,
  119. operator: false,
  120. },
  121. ],
  122. dblClickNotEditColumn: [undefined, 'status'],
  123. },
  124. {
  125. defaultItems: {
  126. status: '1',
  127. }
  128. },
  129. {},{
  130. requestEdit : ()=>{
  131. // console.log(123)
  132. for(let i = 0; i < baTable.form.items!.fileList.length ; i++){
  133. baTable.form.items!.fileList[i]['url'] = 'https://yxy.glut.cc/' + baTable.form.items!.fileList[i]['sign']
  134. }
  135. }
  136. }
  137. )
  138. // const processFileList = () => {
  139. // console.log(baTable.form)
  140. // for(let i = 0; i < baTable.form.items!.fileList.length ; i++){
  141. // baTable.form.items!.fileList[i]['url'] = 'http://localhost:8000/' + baTable.form.items!.fileList[i]['sign']
  142. // }
  143. // }
  144. provide('baTable', baTable)
  145. baTable.mount()
  146. baTable.getIndex()
  147. </script>
  148. <style scoped lang="scss">
  149. </style>