reportFileTable.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  1. <template>
  2. <div class="reportFileTable height_100">
  3. <el-container>
  4. <el-header style="display:flex;justify-content: space-between;">
  5. <div>
  6. <mySearch :SearchFields="searchFiled" @search="search" :searchValue="searchOption"></mySearch>
  7. </div>
  8. <div>
  9. <el-button type="primary" size="small" @click="handleAdd()">新增</el-button>
  10. </div>
  11. </el-header>
  12. <el-main class="height_100">
  13. <el-table v-loading="loading" :data="tableData" style="width: 100%;" border
  14. header-row-class-name="custom-table-header" @sort-change="sortChange">
  15. <el-table-column label="#" align="center" width="80px">
  16. <template slot-scope="scope">
  17. <div>
  18. {{ (queryParams.current - 1) * queryParams.size + scope.$index + 1 }}
  19. </div>
  20. </template>
  21. </el-table-column>
  22. <el-table-column v-for="item in columnList" :key="item.value" :prop="item.value"
  23. :render-header="$commonJS.renderHeaderMethods" :label="item.name" sortable="custom" align="center">
  24. <template slot-scope="scope">
  25. <div v-if="['name'].includes(item.value)">
  26. <el-tooltip :content="$commonJS.getColumnData(scope.row, item)" placement="top">
  27. <span v-html="$commonJS.getColumnData(scope.row, item)"></span>
  28. </el-tooltip>
  29. </div>
  30. <div v-else v-html="$commonJS.getColumnData(scope.row, item)"></div>
  31. </template>
  32. </el-table-column>
  33. <el-table-column label="操作" align="center" width="150">
  34. <template slot-scope="scope">
  35. <el-dropdown split-button type="primary" size="small" @command="handleCommand($event, scope.row)">
  36. <spa @click="handleCommand('e', scope.row)">编辑</spa>
  37. <el-dropdown-menu slot="dropdown" class="text-align_center">
  38. <el-dropdown-item command="0">下载</el-dropdown-item>
  39. <el-dropdown-item command="1">预览</el-dropdown-item>
  40. <el-dropdown-item command="2" divided style="color: red;">删除</el-dropdown-item>
  41. </el-dropdown-menu>
  42. </el-dropdown>
  43. </template>
  44. </el-table-column>
  45. </el-table>
  46. </el-main>
  47. <el-footer>
  48. <div class="pagination">
  49. <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total"
  50. @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
  51. </div>
  52. </el-footer>
  53. </el-container>
  54. <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" append-to-body destroy-on-close
  55. :close-on-click-modal="false" :before-close="handleClose">
  56. <el-form :model="form" :rules="rules" ref="form" label-width="80px" label-position="left">
  57. <el-form-item label="文件名称" prop="referencesName">
  58. <el-input v-model="form.referencesName" placeholder="请输入文件名称"></el-input>
  59. </el-form-item>
  60. <el-form-item label="文件选择" class="margin-bottom_0">
  61. <myUpload :file-list="form.systemFileList" @on-change="onchangeFile" @on-remove="onRemove" :multiple="false"
  62. style="height: 185px;" :autoUpload="true">
  63. </myUpload>
  64. </el-form-item>
  65. <el-form-item label="备注" prop="remark">
  66. <el-input v-model="form.remark" placeholder="请输入备注" type="textarea"></el-input>
  67. </el-form-item>
  68. </el-form>
  69. <div slot="footer" class="dialog-footer">
  70. <el-button @click="handleClose">取 消</el-button>
  71. <el-button type="primary" @click="submit">确 定</el-button>
  72. </div>
  73. </el-dialog>
  74. </div>
  75. </template>
  76. <script>
  77. // import { downLoad2 } from "@/utils"
  78. import { File } from '@/utils/model/menu/mixins'
  79. export default {
  80. mixins: [File],
  81. props: ['projectId'],
  82. data() {
  83. return {
  84. // table数据
  85. tableData: [],
  86. // 分页及总数信息
  87. queryParams: {
  88. current: 1,
  89. size: 10,
  90. },
  91. total: 0,
  92. // 表格字段
  93. columnList: [
  94. {
  95. name: "名称",
  96. type: "String",
  97. value: "referencesName",
  98. },
  99. {
  100. name: "类型",
  101. type: "String",
  102. value: "type",
  103. },
  104. {
  105. name: "所属项目",
  106. type: "String",
  107. value: "projectName",
  108. },
  109. {
  110. name: "创建人",
  111. type: "String",
  112. value: "createName",
  113. },
  114. {
  115. name: "创建时间",
  116. type: "String",
  117. value: "createTime",
  118. },
  119. {
  120. name: "备注",
  121. type: "String",
  122. value: "remark",
  123. },
  124. ],
  125. // 检索字段
  126. searchFiled: [
  127. {
  128. label: '名称',
  129. value: 'referencesName',
  130. type: 1,
  131. placeholder: '请输入名称'
  132. },
  133. ],
  134. // 检索字符串
  135. searchOption: {},
  136. //排序字段
  137. sort: [{ "orderBy": "createTime", "orderType": 1 }],
  138. // 表格loading
  139. loading: false,
  140. //
  141. title: '',
  142. // 控制上传弹窗显示
  143. dialogVisible: false,
  144. // 表单数据
  145. form: {
  146. systemFileList: [],
  147. },
  148. // 表单校验
  149. rules: {
  150. referencesName: [{ required: true, message: '请输入文件名称', trigger: 'blur' },],
  151. },
  152. }
  153. },
  154. async mounted() {
  155. // 获取table栏位
  156. // this.columnList = await this.$commonJS.getCustomField('projectTask')
  157. // 获取栏位
  158. // await this.getColumn()
  159. // 获取数据
  160. this.getList()
  161. },
  162. methods: {
  163. // 弹窗确定
  164. submit() {
  165. // 判断文件是否都上传完毕
  166. this.$commonJS.allUploadFile(this.form)
  167. this.form.fileGuid=this.form.fileGuids[0]
  168. this.$refs.form.validate((valid) => {
  169. if (valid) {
  170. if (!this.form.id) {
  171. this.$api.addReferences(this.form).then(res => {
  172. if (res.code == 200) {
  173. this.$message.success('新增成功')
  174. this.getList()
  175. this.handleClose()
  176. }
  177. }).catch(error => {
  178. })
  179. } else {
  180. this.$api.updateReferences(this.form).then(res => {
  181. if (res.code == 200) {
  182. this.$message.success('编辑成功')
  183. this.getList()
  184. this.handleClose()
  185. }
  186. }).catch(error => {
  187. })
  188. }
  189. }
  190. })
  191. },
  192. // 关闭弹窗
  193. handleClose() {
  194. this.$refs.form.resetFields()
  195. this.form = {
  196. systemFileList: [],
  197. }
  198. this.dialogVisible = false
  199. },
  200. // 上传的文件监听
  201. onchangeFile(file, fileList) {
  202. if (this.form.systemFileList && this.form.systemFileList.length > 0) {
  203. return false
  204. }
  205. if (file) {
  206. this.$set(this.form, 'referencesName', file.name)
  207. }
  208. if (file.guid && this.form.systemFileList && this.form.systemFileList.length > 0) {
  209. let index = this.form.systemFileList.findIndex(item => {
  210. return item.uid == file.uid
  211. })
  212. if (index != -1) {
  213. this.form.systemFileList.splice(index, 1, file)
  214. } else {
  215. this.form.systemFileList.push(file.raw)
  216. }
  217. } else {
  218. this.form.systemFileList.push(file.raw)
  219. }
  220. },
  221. // 删除上传的文件
  222. onRemove(file, fileList) {
  223. let index = this.form.systemFileList.findIndex(item => {
  224. return item.uid == file.uid
  225. })
  226. if (index != -1) {
  227. this.form.systemFileList.splice(index, 1)
  228. }
  229. },
  230. // 新增
  231. handleAdd() {
  232. this.form.projectId = this.projectId
  233. this.dialogVisible = true
  234. },
  235. getList() {
  236. let params = {
  237. projectId: this.projectId,//放在外面还是searchQuery里面??
  238. ...this.queryParams,//分页信息
  239. fileName:this.searchOption.referencesName,
  240. // searchQuery: this.$commonJS.objectToString(this.searchOption || {}),//检索条件
  241. // orderDTOList: this.sort,//排序信息
  242. }
  243. this.loading = true
  244. this.$api.getReferences(params).then(res => {
  245. if (res.code == 200) {
  246. this.tableData = res.data
  247. this.total = res.data.total
  248. this.loading = false
  249. }
  250. }).catch(error => {
  251. this.tableData = []
  252. this.total = 0
  253. this.loading = false
  254. })
  255. },
  256. // 分页
  257. handleCurrentChange(val) {
  258. this.queryParams.current = val
  259. this.getList()
  260. },
  261. // 排序
  262. sortChange({ column, prop, order }) {
  263. //如需要多个字段排序,则不需要清空
  264. var params = {
  265. sort: this.sort,
  266. column,
  267. prop,
  268. order,
  269. }
  270. this.sort = this.$commonJS.getSortData(params)
  271. this.queryParams.current = 1
  272. this.getList()
  273. },
  274. // 检索
  275. search(val) {
  276. let params = {}
  277. val.forEach(item => {
  278. if (item.type == 3) {
  279. params[item.value] = item.searchValue.map(itemValue => {
  280. return itemValue.value
  281. })
  282. } else {
  283. params[item.value] = item.searchValue.label
  284. }
  285. })
  286. // 返回字符串
  287. this.searchOption = params
  288. // 调用查询接口
  289. this.queryParams.current = 1
  290. this.getList()
  291. },
  292. // 编辑等下拉菜单
  293. handleCommand(ev, row) {
  294. switch (ev) {
  295. case 'e'://编辑
  296. this.handleEdit(row)
  297. break;
  298. case '0'://下载
  299. this.downLoad(row)
  300. break;
  301. case '1'://预览
  302. this.preview(row)
  303. break;
  304. case '2'://删除
  305. this.handleDelete(row)
  306. break;
  307. default:
  308. break;
  309. }
  310. },
  311. // 编辑
  312. handleEdit(row) {
  313. row.systemFileList = [{
  314. name: row.referencesName,
  315. guid:row.guid,
  316. }]
  317. this.form = row
  318. this.dialogVisible = true
  319. },
  320. // 删除
  321. handleDelete(data) {
  322. this.handleDeletes([data.id])
  323. },
  324. handleDeletes(ids) {
  325. this.$confirm(str, '提示', {
  326. confirmButtonText: '确定',
  327. cancelButtonText: '取消',
  328. type: 'warning'
  329. }).then(() => {
  330. this.$api.deleteReferences(ids).then(response => {
  331. if (response.code == 200) {
  332. this.$message.success('删除成功')
  333. this.queryParams.current = 1
  334. this.getList()
  335. }
  336. })
  337. }).catch(() => {
  338. this.$message.info('操作已取消')
  339. });
  340. },
  341. },
  342. }
  343. </script>
  344. <style lang="scss" scoped></style>