UReportFileList.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <template>
  2. <a-card :bordered="false">
  3. <!-- 查询区域 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline">
  6. <a-row :gutter="24">
  7. <a-col :md="6" :sm="8">
  8. <a-form-item label="报表名称">
  9. <a-input placeholder="请输入报表名称" v-model="queryParam.name"></a-input>
  10. </a-form-item>
  11. </a-col>
  12. <a-col :md="6" :sm="8">
  13. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  14. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  15. <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
  16. </span>
  17. </a-col>
  18. </a-row>
  19. </a-form>
  20. </div>
  21. <!-- table区域-begin -->
  22. <div>
  23. <a-table
  24. ref="table"
  25. size="middle"
  26. bordered
  27. rowKey="id"
  28. :columns="columns"
  29. :dataSource="dataSource"
  30. :pagination="ipagination"
  31. :loading="loading"
  32. @change="handleTableChange"
  33. >
  34. <span slot="action" slot-scope="text, record">
  35. <a @click="addParams(record)">绑定</a>
  36. <a-divider type="vertical" />
  37. <a @click="deleteParams(record)">解绑</a>
  38. </span>
  39. </a-table>
  40. </div>
  41. <!-- table区域-end -->
  42. <!-- 表单区域 -->
  43. <uReportFile-modal ref="modalForm" @ok="modalFormOk"></uReportFile-modal>
  44. <!-- 查看成员,接触绑定 -->
  45. <a-modal title="解除绑定" v-model="visible" @ok="handleOk" width="800px" class="close-account-my-project">
  46. <div style="display:flex;line-height:50px;flex-wrap: wrap;">
  47. <div style="width:25%;text-align:center;" v-for="(item, index) of memberList" :key="index">
  48. <a-tag color="#2db7f5" @close="log(item.userId)" closable>{{ item.userName }}</a-tag>
  49. </div>
  50. </div>
  51. </a-modal>
  52. <!-- 添加项目成员 -->
  53. <a-modal title="绑定用户" v-model="visibleAdd" @ok="handleOkAdd" :confirmLoading="confirmLoading">
  54. <!-- /sys/user/getAllUserList -->
  55. <a-select
  56. v-model="appId"
  57. showSearch
  58. allowClear
  59. mode="multiple"
  60. placeholder="请选择成员"
  61. optionFilterProp="children"
  62. style="width: 100%"
  63. :filterOption="filterOption"
  64. :maxTagCount="1"
  65. >
  66. <a-select-option
  67. v-for="appModel in options"
  68. :key="appModel.userId + new Date().getTime()"
  69. :value="appModel.userId"
  70. >
  71. {{ appModel.realName }}
  72. &#12288;&#12288;{{ appModel.roleName }}</a-select-option
  73. >
  74. </a-select>
  75. </a-modal>
  76. </a-card>
  77. </template>
  78. <script>
  79. import UReportFileModal from './modules/UReportFileModal'
  80. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  81. import { httpAction, getAction, deleteAction } from '@/api/manage'
  82. export default {
  83. name: 'UReportFileList',
  84. mixins: [JeecgListMixin],
  85. components: {
  86. UReportFileModal
  87. },
  88. data() {
  89. return {
  90. description: '报表文件存储管理页面',
  91. // 表头
  92. columns: [
  93. {
  94. title: '报表模板名称',
  95. align: 'center',
  96. dataIndex: 'name'
  97. },
  98. {
  99. title: '操作',
  100. dataIndex: 'action',
  101. align: 'center',
  102. scopedSlots: { customRender: 'action' }
  103. }
  104. ],
  105. url: {
  106. list: '/ctop/uReportFile/list',
  107. delete: '/ctop/uReportFile/delete',
  108. deleteBatch: '/ctop/uReportFile/deleteBatch',
  109. exportXlsUrl: 'ctop/uReportFile/exportXls',
  110. importExcelUrl: 'ctop/uReportFile/importExcel'
  111. },
  112. visibleAdd: false,
  113. itemJson: null,
  114. list: [],
  115. options: [],
  116. confirmLoading: false,
  117. appId: [],
  118. memberList: [],
  119. visible: false,
  120. fileId: ''
  121. }
  122. },
  123. computed: {
  124. importExcelUrl: function() {
  125. return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
  126. }
  127. },
  128. methods: {
  129. filterOption(input, option) {
  130. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  131. },
  132. addParams(item) {
  133. this.visibleAdd = true
  134. this.itemJson = item
  135. getAction('/sys/user/getAllUserList', '').then(res => {
  136. if (res.success) {
  137. this.list = res.result
  138. this.options = res.result
  139. }
  140. })
  141. },
  142. log(id) {
  143. httpAction('/ctop/uReportFile/unbindUser', { fileId: this.fileId, userId: id }, 'post').then(res => {
  144. if (res.success) {
  145. this.getMemberList(this.fileId)
  146. this.$message.success('删除成功')
  147. } else {
  148. this.$message.error(res.message)
  149. }
  150. })
  151. },
  152. handleOk(e) {
  153. this.visible = false
  154. },
  155. handleOkAdd(e) {
  156. var params = {}
  157. params.fileId = this.itemJson.id
  158. params.userIds = this.appId.join()
  159. this.confirmLoading = true
  160. httpAction('/ctop/uReportFile/bindUser', params, 'post').then(res => {
  161. this.confirmLoading = false
  162. if (res.success) {
  163. this.visibleAdd = false
  164. this.appId = []
  165. this.$message.success('添加成功')
  166. } else {
  167. this.$message.error('添加失败')
  168. }
  169. })
  170. },
  171. deleteParams(item) {
  172. this.fileId = item.id
  173. this.getMemberList(item.id)
  174. },
  175. getMemberList(id) {
  176. this.memberList = []
  177. httpAction('/ctop/uReportFileBindUser/userList', { fileId: id }, 'post').then(res => {
  178. if (res.success) {
  179. this.visible = true
  180. this.memberList = res.data
  181. }
  182. })
  183. }
  184. }
  185. }
  186. </script>
  187. <style scoped>
  188. @import '~@assets/less/common.less';
  189. </style>