reportFileTable.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509
  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. <el-form :inline="true" class="margin-left_20">
  8. <el-form-item label="名称">
  9. <el-input v-model="searchOption.referencesName" size="small" placeholder="请输入当前名称"></el-input>
  10. </el-form-item>
  11. <el-form-item>
  12. <el-button type="primary" size="small" @click="init">查询</el-button>
  13. </el-form-item>
  14. </el-form>
  15. </div>
  16. <div class="margin-right_10">
  17. <el-button type="primary" size="small" @click="handleAdd()">新增</el-button>
  18. </div>
  19. </el-header>
  20. <el-main class="height_100">
  21. <el-table v-loading="loading" :data="tableData" style="width: 100%;" border
  22. header-row-class-name="custom-table-header" @sort-change="sortChange">
  23. <el-table-column label="#" align="center" width="80px">
  24. <template slot-scope="scope">
  25. <div>
  26. {{ (queryParams.current - 1) * queryParams.size + scope.$index + 1 }}
  27. </div>
  28. </template>
  29. </el-table-column>
  30. <el-table-column v-for="item in columnList" :key="item.value" :prop="item.value"
  31. :render-header="$commonJS.renderHeaderMethods" :label="item.name" :sortable="item.noSort?false:'custom'" align="center">
  32. <template slot-scope="scope">
  33. <div v-if="['name'].includes(item.value)">
  34. <el-tooltip :content="$commonJS.getColumnData(scope.row, item)" placement="top">
  35. <span v-html="$commonJS.getColumnData(scope.row, item)"></span>
  36. </el-tooltip>
  37. </div>
  38. <div v-else-if="['statusOrResult'].includes(item.value)">
  39. <observerDom v-if="!loading" url="getExamineHistory" :params="{fileGuid:scope.row.fileGuid,ifGetLast:true}" :fun="getData"></observerDom>
  40. </div>
  41. <div v-else v-html="$commonJS.getColumnData(scope.row, item)"></div>
  42. </template>
  43. </el-table-column>
  44. <el-table-column label="操作" align="center" width="160">
  45. <template slot-scope="scope">
  46. <el-dropdown split-button type="primary" size="small" @command="handleCommand($event, scope.row)">
  47. <span @click="handleCommand('e', scope.row)">{{scope.row.ifHaveFinalFile !== false?'编辑':'编辑报告内容'}}</span>
  48. <el-dropdown-menu slot="dropdown" class="text-align_center">
  49. <template v-if="scope.row.ifHaveFinalFile !== false">
  50. <el-dropdown-item command="onlineEdit">编辑文档内容</el-dropdown-item>
  51. <el-dropdown-item command="0">下载</el-dropdown-item>
  52. <el-dropdown-item command="1">预览</el-dropdown-item>
  53. <el-dropdown-item command="examineSubmit">提交审核</el-dropdown-item>
  54. <el-dropdown-item command="examineHistory">审核历史</el-dropdown-item>
  55. </template>
  56. <template v-else>
  57. <el-dropdown-item command="generateReport">生成报告</el-dropdown-item>
  58. </template>
  59. <el-dropdown-item command="2" divided style="color: red;">删除</el-dropdown-item>
  60. </el-dropdown-menu>
  61. </el-dropdown>
  62. </template>
  63. </el-table-column>
  64. </el-table>
  65. </el-main>
  66. <el-footer>
  67. <div class="pagination">
  68. <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total"
  69. @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
  70. </div>
  71. </el-footer>
  72. </el-container>
  73. <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" append-to-body destroy-on-close
  74. :close-on-click-modal="false" :before-close="handleClose">
  75. <el-form :model="form" :rules="rules" ref="form" label-width="80px" label-position="left">
  76. <el-form-item label="文件名称" prop="referencesName">
  77. <el-input v-model="form.referencesName" placeholder="请输入文件名称"></el-input>
  78. </el-form-item>
  79. <el-form-item label="文件选择" class="margin-bottom_0">
  80. <myUpload :file-list="form.systemFileList" @on-change="onchangeFile" @on-remove="onRemove" :multiple="false" :limit="1"
  81. style="height: 185px;" :autoUpload="true">
  82. </myUpload>
  83. </el-form-item>
  84. <el-form-item label="备注" prop="remark">
  85. <el-input v-model="form.remark" placeholder="请输入备注" type="textarea"></el-input>
  86. </el-form-item>
  87. </el-form>
  88. <div slot="footer" class="dialog-footer">
  89. <el-button @click="handleClose">取 消</el-button>
  90. <el-button type="primary" @click="submit">确 定</el-button>
  91. </div>
  92. </el-dialog>
  93. <!-- 审核历史 -->
  94. <examineHistoryDialog ref="examineHistoryDialog"></examineHistoryDialog>
  95. <!-- 提交审核 -->
  96. <examineSubmitDialog ref="examineSubmitDialog"></examineSubmitDialog>
  97. </div>
  98. </template>
  99. <script>
  100. import { downLoad2 } from "@/utils"
  101. import examineHistoryDialog from './examineHistoryDialog.vue'
  102. import examineSubmitDialog from '@/views/components/onlyOffice/addNewFile.vue'
  103. export default {
  104. components:{
  105. examineHistoryDialog,
  106. examineSubmitDialog
  107. },
  108. props: ['projectId','queryApi','deleteApi'],
  109. data() {
  110. return {
  111. // table数据
  112. tableData: [],
  113. // 分页及总数信息
  114. queryParams: {
  115. current: 1,
  116. size: 10,
  117. },
  118. total: 0,
  119. // 表格字段
  120. columnList: [
  121. {
  122. name: "名称",
  123. type: "String",
  124. value: "referencesName",
  125. },
  126. {
  127. name: "类型",
  128. type: "String",
  129. value: "type",
  130. noSort:true
  131. },
  132. {
  133. name: "状态/结果",
  134. type: "String",
  135. value: "statusOrResult",
  136. noSort:true
  137. },
  138. // {
  139. // name: "所属项目",
  140. // type: "String",
  141. // value: "projectName",
  142. // },
  143. {
  144. name: "创建人",
  145. type: "String",
  146. value: "createName",
  147. },
  148. {
  149. name: "创建时间",
  150. type: "String",
  151. value: "createTime",
  152. },
  153. {
  154. name: "备注",
  155. type: "String",
  156. value: "remark",
  157. },
  158. ],
  159. // 检索字段
  160. searchFiled: [
  161. {
  162. label: '名称',
  163. value: 'referencesName',
  164. type: 1,
  165. placeholder: '请输入名称'
  166. },
  167. ],
  168. // 检索字符串
  169. searchOption: {},
  170. //排序字段
  171. sort: [{ "orderBy": "createTime", "orderType": 1 }],
  172. // 表格loading
  173. loading: false,
  174. //
  175. title: '',
  176. // 控制上传弹窗显示
  177. dialogVisible: false,
  178. // 表单数据
  179. form: {
  180. systemFileList: [],
  181. },
  182. // 表单校验
  183. rules: {
  184. referencesName: [{ required: true, message: '请输入文件名称', trigger: 'blur' },],
  185. },
  186. }
  187. },
  188. async mounted() {
  189. // 获取table栏位
  190. // this.columnList = await this.$commonJS.getCustomField('projectTask')
  191. // 获取栏位
  192. // await this.getColumn()
  193. // 获取数据
  194. this.getList()
  195. },
  196. methods: {
  197. getData(data){
  198. if(!data || data.length == 0){
  199. return ''
  200. }
  201. var message = data[0]
  202. if(message['status'] == 3){
  203. return message.handleResult
  204. }
  205. if(message['status'] == 2){
  206. return '审核中'
  207. }
  208. if(message['status'] == 5){
  209. return '取消审核'
  210. }
  211. },
  212. init(){
  213. this.queryParams.current = 1
  214. this.getList()
  215. },
  216. // 弹窗确定
  217. submit() {
  218. // 判断文件是否都上传完毕
  219. // this.$commonJS.allUploadFile(this.form)
  220. // this.form.fileGuid=this.form.fileGuids[0]
  221. var guids = this.$commonJS.checkUploadFile(this.form.systemFileList)
  222. if(!guids){
  223. return false
  224. }
  225. if(guids.length>0){
  226. this.form.fileGuid = guids[0]
  227. }else{
  228. this.form.fileGuid = ''
  229. this.$message.warning('文件不能为空')
  230. return false
  231. }
  232. this.$refs.form.validate((valid) => {
  233. if (valid) {
  234. if (!this.form.id) {
  235. this.$api.addReferences(this.form).then(res => {
  236. if (res.code == 200) {
  237. this.$message.success('新增成功')
  238. this.getList()
  239. this.handleClose()
  240. }
  241. }).catch(error => {
  242. })
  243. } else {
  244. this.$api.updateReferences(this.form).then(res => {
  245. if (res.code == 200) {
  246. this.$message.success('编辑成功')
  247. this.getList()
  248. this.handleClose()
  249. }
  250. }).catch(error => {
  251. })
  252. }
  253. }
  254. })
  255. },
  256. // 关闭弹窗
  257. handleClose() {
  258. this.$refs.form.resetFields()
  259. this.form = {
  260. systemFileList: [],
  261. }
  262. this.dialogVisible = false
  263. },
  264. // 上传的文件监听
  265. onchangeFile(file, fileList) {
  266. if (file) {
  267. this.$set(this.form, 'referencesName', file.name)
  268. }
  269. if(!this.form.systemFileList){
  270. this.$set(this.form,'systemFileList',[])
  271. }
  272. if (file.guid) {
  273. let index = this.form.systemFileList.findIndex(item => {
  274. return item.uid == file.uid
  275. })
  276. if (index != -1) {
  277. this.form.systemFileList.splice(index, 1, file)
  278. }
  279. // else {
  280. // this.form.systemFileList.push(file.raw)
  281. // }
  282. } else {
  283. this.form.systemFileList.push(file.raw)
  284. }
  285. },
  286. // 删除上传的文件
  287. onRemove(file, fileList) {
  288. let index = this.form.systemFileList.findIndex(item => {
  289. return item.uid == file.uid
  290. })
  291. if (index != -1) {
  292. this.form.systemFileList.splice(index, 1)
  293. fileList.splice(index, 1)
  294. }
  295. },
  296. // 新增
  297. handleAdd() {
  298. this.title='新增报告文档'
  299. this.form.projectId = this.projectId
  300. this.dialogVisible = true
  301. },
  302. getList() {
  303. let params = {
  304. projectId: this.projectId,//放在外面还是searchQuery里面??
  305. ...this.queryParams,//分页信息
  306. fileName:this.searchOption.referencesName,
  307. // searchQuery: this.$commonJS.objectToString(this.searchOption || {}),//检索条件
  308. orderDTOList: this.sort,//排序信息
  309. }
  310. var api = this.queryApi?this.queryApi : 'getReferences'
  311. this.loading = true
  312. this.$api[api](params).then(res => {
  313. if (res.code == 200) {
  314. this.tableData = res.data.data
  315. this.total = res.data.total
  316. this.loading = false
  317. }
  318. }).catch(error => {
  319. this.tableData = []
  320. this.total = 0
  321. this.loading = false
  322. })
  323. },
  324. // 分页
  325. handleCurrentChange(val) {
  326. this.queryParams.current = val
  327. this.getList()
  328. },
  329. // 排序
  330. sortChange({ column, prop, order }) {
  331. //如需要多个字段排序,则不需要清空
  332. var params = {
  333. sort: this.sort,
  334. column,
  335. prop,
  336. order,
  337. }
  338. this.sort = this.$commonJS.getSortData(params)
  339. this.queryParams.current = 1
  340. this.getList()
  341. },
  342. // 检索
  343. search(val) {
  344. let params = {}
  345. val.forEach(item => {
  346. if (item.type == 3) {
  347. params[item.value] = item.searchValue.map(itemValue => {
  348. return itemValue.value
  349. })
  350. } else {
  351. params[item.value] = item.searchValue.label
  352. }
  353. })
  354. // 返回字符串
  355. this.searchOption = params
  356. // 调用查询接口
  357. this.queryParams.current = 1
  358. this.getList()
  359. },
  360. // 编辑等下拉菜单
  361. handleCommand(ev, row) {
  362. switch (ev) {
  363. case 'e'://编辑
  364. this.handleEdit(row)
  365. break;
  366. case '0'://下载
  367. downLoad2(row.fileGuid)
  368. break;
  369. case '1'://预览
  370. row.fileName = row.referencesName
  371. this.$commonJS.previewFile(row,row.fileGuid,row.type)
  372. break;
  373. case '2'://删除
  374. this.handleDelete(row)
  375. break;
  376. case 'generateReport'://生成报告
  377. this.generateReport(row)
  378. break;
  379. case 'onlineEdit'://在线编辑文档
  380. this.onlineEdit(row)
  381. break;
  382. case 'examineHistory'://审核历史
  383. this.$refs.examineHistoryDialog.open(row.fileGuid)
  384. break;
  385. case 'examineSubmit'://提交审核
  386. this.examineSubmit(row)
  387. break;
  388. default:
  389. break;
  390. }
  391. },
  392. examineSubmit(row){
  393. var title = row.referencesName
  394. var taskName = ''
  395. if(title.endsWith('.'+row.type)){
  396. title = title.slice(0, -(row.type.length+1))
  397. }
  398. taskName = title + '-' + row.createName + '-' + '文件审核'
  399. title = title + '-' + row.createName + '.' + row.type
  400. var form = {
  401. referencesName:title,
  402. guid:row.fileGuid,
  403. projectId:this.projectId,
  404. fileType:row.type
  405. }
  406. var taskForm = {
  407. name:taskName
  408. }
  409. this.$refs.examineSubmitDialog.open(form,taskForm)
  410. },
  411. //在线编辑文档
  412. onlineEdit(row){
  413. let router = this.$router.resolve({
  414. path: '/onlyOffice',
  415. query: {
  416. projectId:this.projectId,
  417. guid:row.fileGuid,
  418. fileType:row.type,
  419. title:row.referencesName,
  420. createTime:row.createTime
  421. }
  422. })
  423. window.open(router.href, '_blank')
  424. },
  425. //生成报告
  426. generateReport(row){
  427. var message = this.$message({
  428. message: '报告生成中...',
  429. type: 'warning',
  430. duration:0
  431. });
  432. var params = {
  433. id:row.id
  434. }
  435. this.$api.exportNoveltyReport(params).then(response=>{
  436. if(response.code == 200){
  437. message.close()
  438. this.$message.success('报告生成成功')
  439. this.getList()
  440. }
  441. }).catch(error=>{
  442. message.close()
  443. this.$message.error('报告生成失败')
  444. })
  445. },
  446. // 编辑
  447. handleEdit(data) {
  448. if(data.ifHaveFinalFile === false){
  449. let router = this.$router.resolve({
  450. path: '/exportReport',
  451. query: {
  452. reportTemplateId: data.templateId,
  453. projectId: this.projectId,
  454. reportFileId:data.id,
  455. editModel:true
  456. }
  457. })
  458. window.open(router.href, '_blank')
  459. return
  460. }
  461. var row = JSON.parse(JSON.stringify(data))
  462. row.systemFileList = [{
  463. name: row.referencesName,
  464. guid:row.fileGuid,
  465. }]
  466. this.title='编辑报告文档'
  467. this.form = row
  468. this.dialogVisible = true
  469. },
  470. // 删除
  471. handleDelete(data) {
  472. this.handleDeletes([data.id])
  473. },
  474. handleDeletes(ids) {
  475. this.$confirm('删除后不可恢复', '提示', {
  476. confirmButtonText: '确定',
  477. cancelButtonText: '取消',
  478. type: 'warning'
  479. }).then(() => {
  480. var api = this.deleteApi?this.deleteApi:'deleteReferences'
  481. this.$api[api](ids).then(response => {
  482. if (response.code == 200) {
  483. this.$message.success('删除成功')
  484. this.queryParams.current = 1
  485. this.getList()
  486. }
  487. })
  488. }).catch(() => {
  489. this.$message.info('操作已取消')
  490. });
  491. },
  492. },
  493. }
  494. </script>
  495. <style lang="scss" scoped></style>