index.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686
  1. <template>
  2. <div class="height_100">
  3. <el-container v-if="showView">
  4. <el-header>
  5. <div id="step1">
  6. <mySearch style="width:500px" :SearchFields="searchFiled" @search="search" :searchValue="searchOption">
  7. </mySearch>
  8. </div>
  9. <div style="display:flex;">
  10. <div id="step2" v-if="[2].indexOf(isOperate) == -1" class="margin-right_10">
  11. <span>分组查询:</span>
  12. <el-select v-model="groupingValue" size="small" @change="changeGrouping" clearable style="width: 120px">
  13. <el-option v-for="item in groupingOption" :key="item.value" :label="item.name" :value="item.value">
  14. </el-option>
  15. </el-select>
  16. </div>
  17. <el-button-group id="step3" style="display:flex;justify-content:flex-start" v-if="[2].indexOf(isOperate) == -1">
  18. <el-button v-for="item in viewTypes" :key="item.component" size="small"
  19. :type="viewType == item.component ? 'primary' : ''" @click="onChange(item.component)">{{ item.name
  20. }}</el-button>
  21. </el-button-group>
  22. <div id="step4" class="margin-left_10">
  23. <el-dropdown size="small" v-if="$permission('/pcs/report/add')">
  24. <el-button type="primary" size="small">
  25. 创建报告<i class="el-icon-arrow-down el-icon--right"></i>
  26. </el-button>
  27. <el-dropdown-menu slot="dropdown" style="margin-top:0px"
  28. v-if="dictMessage.REPORT_TYPE && dictMessage.REPORT_TYPE.length > 0">
  29. <!-- 遍历按钮 -->
  30. <el-dropdown-item v-for="item in dictMessage.REPORT_TYPE.filter(item => !['6'].includes(item.value))"
  31. :key="item.label" @click.native="handleAnalyse(item.value)"
  32. v-if="$permission('/pcs/report/add/' + item.permission)">{{ item.label }}</el-dropdown-item>
  33. </el-dropdown-menu>
  34. </el-dropdown>
  35. <el-button type="primary" class="margin-left_10" size="small" @click="showField">显示栏位管理</el-button>
  36. </div>
  37. </div>
  38. </el-header>
  39. <el-main id="patent-list-container" class="main" v-loading="loading">
  40. <component :is="viewType" v-bind="$attrs" v-on="$listeners" :isOperate="isOperate" :tableData="dataList"
  41. :state="state" :queryParams="queryParams" @option="handleOption" @on-sort="handleSort" :groupBy="groupingValue"
  42. :groupingOption="groupingOption" :commonData="commonData" :searchOption="searchOption" :column="columnList"
  43. @getRow="checkDetails" @params="getParams"></component>
  44. </el-main>
  45. <el-footer class="pagination" v-if="viewType != 'visual'">
  46. <el-pagination background layout="total,sizes, prev, pager, next, jumper" :current-page.sync="queryParams.current"
  47. :page-sizes="pageSize" :page-size.sync="queryParams.size" @current-change="handleCurrentChange"
  48. :handleMessage="handleMessage" @size-change="handleSizeChange" :total="total">
  49. </el-pagination>
  50. </el-footer>
  51. </el-container>
  52. <CreateReport ref="ReportForm" @getList="isGetList"></CreateReport>
  53. <fields ref="field" type="reportProject" @getFieldList="getFieldList"></fields>
  54. </div>
  55. </template>
  56. <script>
  57. import Table from './view/table.vue'
  58. import Card from './view/card.vue'
  59. import visual from './view/visual.vue'
  60. import mergeTable from './view/mergeTable.vue'
  61. import CreateReport from './dialog/addAndEditReport.vue'
  62. import fields from '@/views/components/dialog/fields.vue';
  63. export default {
  64. components: {
  65. Table,
  66. Card,
  67. visual,
  68. CreateReport,
  69. mergeTable,
  70. fields,
  71. },
  72. props: {
  73. isOperate: '',
  74. matterId: {},
  75. scenarioId: {},
  76. eventName: '',
  77. eventId: '',
  78. },
  79. data() {
  80. return {
  81. //视图类型
  82. viewTypes: [
  83. {
  84. name: '可视化',
  85. component: 'visual'
  86. },
  87. {
  88. name: '列表',
  89. component: 'Table'
  90. },
  91. {
  92. name: '卡片',
  93. component: 'Card'
  94. },
  95. ],
  96. //当前视图类型
  97. viewType: 'Table',
  98. //检索字段
  99. searchFiled: [],
  100. //检索条件
  101. searchOption: {
  102. name: localStorage.searchContent,
  103. reportType: localStorage.reportType ? [localStorage.reportType] : '',
  104. scenarioNames: this.scenarioId,
  105. matterNames: this.matterId,
  106. eventNames: this.eventName
  107. },
  108. //分组的值
  109. groupingValue: '',
  110. //分组
  111. groupingOption: [],
  112. //分页信息
  113. queryParams: {
  114. current: 1,
  115. size: 10,
  116. },
  117. //总数
  118. total: 0,
  119. //分页数量
  120. pageSize: [10, "全部"],
  121. //排序字段
  122. sort: [
  123. {
  124. "orderBy": "createTime",
  125. "orderType": 1
  126. }
  127. ],
  128. //加载
  129. loading: false,
  130. //报告数据集合
  131. dataList: [],
  132. // 报告分组数据集合
  133. commonData: [],
  134. // 栏位信息数组
  135. columnList: [],
  136. // 子组件新增、编辑报告成功发送的字符串
  137. handleMessage: '',
  138. showView: false,
  139. };
  140. },
  141. watch: {},
  142. computed: {
  143. dictMessage() {
  144. var a = this.$store.state.dictMessage.dictMessage
  145. if (a.REPORT_TYPE) {
  146. a.REPORT_TYPE.forEach(item => {
  147. if (['0', '1', '2'].includes(item.value)) {
  148. item.permission = 'invalid'
  149. } else if (item.value == 3) {
  150. item.permission = 'FTO'
  151. } else if (item.value == 4) {
  152. item.permission = 'tort'
  153. } else if (item.value == 5) {
  154. item.permission = 'avoidDesign'
  155. } else if (item.value == 7) {
  156. item.permission = 'reInvalid'
  157. }
  158. })
  159. }
  160. if (a.REPORT_TYPE) {
  161. // 报告类型
  162. this.searchFiled[1].options = a.REPORT_TYPE.map(item => {
  163. return {
  164. value: item.value,
  165. label: item.label
  166. }
  167. })
  168. // 报告状态
  169. this.searchFiled[2].options = a.REPORT_STATE.map(item => {
  170. return {
  171. value: item.value,
  172. label: item.label
  173. }
  174. })
  175. }
  176. return a
  177. },
  178. state() {
  179. var a = this.$store.state.dictMessage.dictMessage.REPORT_STATE
  180. var b = {}
  181. if (a) {
  182. a.forEach(item => {
  183. b[item.value] = item.label
  184. });
  185. return b
  186. }
  187. return []
  188. },
  189. scene() {
  190. var a = this.$store.state.dictMessage.scenario.map(item => {
  191. return {
  192. label: item.name,
  193. value: item.id
  194. }
  195. })
  196. var obj = this.searchFiled.find(item => { return item.label == '应用场景' })
  197. if (obj) {
  198. obj.options = a
  199. }
  200. return this.$store.state.dictMessage.scenario
  201. },
  202. matter() {
  203. var a = this.$store.state.dictMessage.matter.map(item => {
  204. return {
  205. label: item.name,
  206. value: item.id
  207. }
  208. })
  209. var obj = this.searchFiled.find(item => { return item.label == '调查类型' })
  210. if (obj) {
  211. obj.options = a
  212. }
  213. return this.$store.state.dictMessage.matter || []
  214. }
  215. },
  216. created() { },
  217. async mounted() {
  218. // 获取table栏位
  219. this.columnList = await this.$commonJS.getCustomField('reportProject')
  220. // 获取搜索/分组
  221. await this.getColumn()
  222. //获取报告清单
  223. this.getList()
  224. this.showViews()
  225. },
  226. methods: {
  227. //显示视图?
  228. showViews() {
  229. this.showView = false
  230. this.$nextTick(() => {
  231. this.showView = true
  232. })
  233. },
  234. // 显示栏位管理组件返回数据
  235. getFieldList(val) {
  236. this.columnList = val
  237. },
  238. // 显示栏位管理
  239. showField() {
  240. this.$refs.field.open(this.columnList)
  241. },
  242. //获取table栏位及分组字段、检索字段
  243. async getColumn() {
  244. let params = ['reportProject']
  245. await this.$api.getParamsCommon(params).then(res => {
  246. if (res.code == 200) {
  247. let conditionDTOList = JSON.parse(JSON.stringify(res.data[0].conditionDTOList))
  248. // 分组字段
  249. this.groupingOption = this.$commonJS.getField(conditionDTOList, (u) => u.ifGroup == true, {
  250. name: 'name',
  251. value: 'value',
  252. })
  253. // 搜索字段
  254. this.searchFiled = this.$commonJS.getField(conditionDTOList, (u) => u.ifSearch == true, {
  255. label: 'name',
  256. value: 'value',
  257. type: 'type',
  258. })
  259. //先获取报告类型,报告状态,相关事件,再为报告类型,报告状态,相关事件添加选项
  260. let arr = ['报告类型', '报告状态', '核心结论']
  261. arr.forEach(item => {
  262. let obj = this.searchFiled.find(item2 => {
  263. return item2.label == item
  264. })
  265. if (obj) {
  266. this.handleSearchArray(obj)
  267. }
  268. })
  269. //为应用场景添加选项
  270. var obj = this.searchFiled.find(item => { return item.label == '应用场景' })
  271. if (obj) {
  272. obj.options = this.scene.map(item => {
  273. return {
  274. label: item.name,
  275. value: item.id
  276. }
  277. })
  278. }
  279. var obj = this.searchFiled.find(item => { return item.label == '调查类型' })
  280. if (obj) {
  281. obj.options = this.matter.map(item => {
  282. return {
  283. label: item.name,
  284. value: item.id
  285. }
  286. })
  287. }
  288. }
  289. })
  290. this.showViews()
  291. },
  292. // 处理检索字段为array类型的问题
  293. handleSearchArray(obj) {
  294. switch (obj.label) {
  295. case '报告类型':
  296. if (this.dictMessage.REPORT_TYPE && this.dictMessage.REPORT_TYPE.length > 0) {
  297. let dict = this.dictMessage.REPORT_TYPE.filter(item => !['6'].includes(item.value))
  298. obj.options = dict.map(item => {
  299. return {
  300. label: item.label,
  301. value: item.value,
  302. }
  303. })
  304. }
  305. break;
  306. case '报告状态':
  307. obj.options = [
  308. { value: 0, label: '开卷审核' },
  309. { value: 1, label: '创建中' },
  310. { value: 2, label: '处理中' },
  311. { value: 3, label: '完成' },
  312. { value: 4, label: '取消开卷' },
  313. { value: 5, label: '补资料中' },
  314. ]
  315. break;
  316. case '核心结论':
  317. this.$api.queryCrons().then(res => {
  318. if (res.code == 200) {
  319. obj.options = res.data.data
  320. }
  321. })
  322. break;
  323. default:
  324. break;
  325. }
  326. },
  327. //接收检索条件
  328. search(val) {
  329. let params = {}
  330. val.forEach(item => {
  331. if (item.type == 3) {
  332. params[item.value] = item.searchValue.map(itemValue => {
  333. return itemValue.value
  334. })
  335. } else {
  336. params[item.value] = item.searchValue.label
  337. }
  338. })
  339. // 返回字符串
  340. this.searchOption = params
  341. // 调用查询接口
  342. this.queryParams.current = 1
  343. this.getList()
  344. },
  345. //获取报告列表
  346. getList() {
  347. let params = {
  348. ...this.queryParams,//分页信息
  349. searchQuery: this.$commonJS.objectToString(this.searchOption),//检索条件
  350. orderDTOList: this.sort,//排序信息
  351. }
  352. this.loading = true
  353. this.$api.queryReportProject(params).then(res => {
  354. if (res.code == 200) {
  355. this.dataList = res.data.data
  356. this.total = res.data.total
  357. this.loading = false
  358. }
  359. }).catch(error => {
  360. this.dataList = []
  361. this.total = 0
  362. this.loading = false
  363. this.$message.error(error.message)
  364. })
  365. },
  366. // 获取分组数据
  367. getGrouping() {
  368. let params = {
  369. ...this.queryParams,//分页信息
  370. searchQuery: this.$commonJS.objectToString(this.searchOption),//检索条件
  371. orderDTOList: [
  372. {
  373. orderBy: this.groupingValue,
  374. orderType: this.sort.orderType
  375. }
  376. ],//排序
  377. groupBy: this.groupingValue,//分组信息
  378. }
  379. this.$api.groupReportProject(params).then(res => {
  380. if (res.code == 200) {
  381. this.commonData = res.data.data.values
  382. this.total = res.total
  383. }
  384. }).catch(error => {
  385. this.commonData = []
  386. this.total = 0
  387. this.$message.error(error.message)
  388. })
  389. },
  390. //排序
  391. handleSort({ column, prop, order }) {
  392. //如需要多个字段排序,则不需要清空
  393. var params = {
  394. sort: this.sort,
  395. column,
  396. prop,
  397. order,
  398. }
  399. this.sort = this.$commonJS.getSortData(params)
  400. this.queryParams.current = 1
  401. this.isGrouping()
  402. },
  403. //分页
  404. handleCurrentChange(val) {
  405. this.queryParams.current = val;
  406. this.isGrouping()
  407. },
  408. //切换页大小
  409. handleSizeChange(val) {
  410. this.queryParams.size = val
  411. this.isGrouping()
  412. // this.getList()
  413. },
  414. //切换视图
  415. onChange(type) {
  416. this.viewType = type
  417. if (type == 'visual') {
  418. this.$nextTick(() => {
  419. this.reportVisual()
  420. })
  421. return false
  422. }
  423. this.queryParams.size = this.viewType === 'Table' ? 10 : 12
  424. this.groupingValue = ''
  425. this.queryParams.current = 1
  426. this.getList()
  427. },
  428. //展示报告可视化
  429. reportVisual() {
  430. this.$api.reportVisual(this.queryParams).then(response => {
  431. if (response.code == 200) {
  432. // this.$refs.reportVisual.open(response.data)
  433. }
  434. })
  435. },
  436. //切换分组值
  437. changeGrouping(val) {
  438. if (val != '') {
  439. this.viewType = 'mergeTable'
  440. } else {
  441. this.viewType = 'Table'
  442. }
  443. this.queryParams.current = 1
  444. this.groupingValue = val
  445. this.isGrouping()
  446. },
  447. // 区分是否为分组
  448. isGrouping() {
  449. if (this.groupingValue != '') {//分组
  450. this.getGrouping()
  451. } else {//不分组
  452. this.getList()
  453. }
  454. },
  455. //打开创建报告弹窗
  456. handleAnalyse(id) {
  457. var form = {
  458. reportType: id,
  459. eventId: this.eventId,
  460. eventName: this.eventName,
  461. matterId: this.matterId || [],
  462. scenarioId: this.scenarioId || [],
  463. }
  464. this.$refs.ReportForm.open(form)
  465. },
  466. //操作列
  467. handleOption({ option, row, isLast }) {
  468. this.$s.setSession('params', row)
  469. switch (option) {
  470. case '0'://分享
  471. this.share(row)
  472. break
  473. case '1'://导出报告
  474. this.exportReport(row)
  475. break
  476. case '2'://报告文档
  477. this.handleFile(row)
  478. break
  479. case '5'://拆分特征
  480. this.handleDetails(row)
  481. break
  482. case '3'://自定义字段
  483. this.handleFields(row)
  484. break
  485. case '4'://任务分配
  486. this.handleTask(row)
  487. break
  488. case '6'://导入专利
  489. this.handleImportPatent(row)
  490. break
  491. case '7'://删除
  492. this.handleDelete(row, isLast)
  493. break;
  494. case '8'://侵权分析技术特征对比
  495. // this.$s.setSession('reportMessage1', row)
  496. this.toTortIndex(row)
  497. break
  498. case '9'://回避设计
  499. this.handleDetails(row, '回避设计')
  500. break;
  501. case '10'://对比文件
  502. this.patentList(row)
  503. break
  504. case '11'://完成报告
  505. this.completeReport(row)
  506. break
  507. case '12'://追踪报告
  508. this.trackReport(row)
  509. break
  510. case '13'://添加无效理由和证据
  511. this.toInvalidIndex(row)
  512. break;
  513. case '14'://导入无效证据
  514. this.toInvalidResponset(row)
  515. break;
  516. case '15'://录入产品信息
  517. this.toInformationEntry(row)
  518. break;
  519. case 'e'://编辑
  520. this.handleEdit(row)
  521. break
  522. }
  523. },
  524. //跳转到专利列表页面
  525. patentList(row){
  526. this.$router.push(
  527. {
  528. path:'/reportPatentList',
  529. query:{
  530. projectId:row.id
  531. }
  532. }
  533. )
  534. },
  535. // 跳转录入产品信息页面
  536. toInformationEntry(row) {
  537. var routerReport = this.$router.resolve({
  538. path: "/informationEntry",
  539. query: {
  540. patentNo: row.signPatentNo,
  541. reportId: row.id,
  542. reportType: row.reportType
  543. }
  544. })
  545. window.open(routerReport.href, '_blank');
  546. },
  547. // 跳转专利与产品关联比对
  548. toTortIndex(row) {
  549. var routerReport = this.$router.resolve({
  550. path: "/tortIndex",
  551. query: {
  552. patentNo: row.signPatentNo,
  553. reportId: row.id,
  554. reportType: row.reportType
  555. }
  556. })
  557. window.open(routerReport.href, '_blank');
  558. },
  559. // 跳转回避设计或拆分特征
  560. handleDetails(row, type) {
  561. if (type == '回避设计') {
  562. var router = this.$router.resolve({
  563. path: "/avoid",
  564. query: {
  565. patentNo: row.signPatentNo,
  566. reportId: row.id,
  567. }
  568. })
  569. window.open(router.href, '_blank');
  570. }
  571. },
  572. // 删除
  573. handleDelete(row, isLast) {
  574. this.handleDeletes([row.id], isLast)
  575. },
  576. // 批量删除报告
  577. handleDeletes(ids, isLast) {
  578. this.$confirm('此操作将永久删除该报告, 是否继续?', '提示', {
  579. confirmButtonText: '确定',
  580. cancelButtonText: '取消',
  581. type: 'warning'
  582. }).then(() => {
  583. this.$api.deleteReportProject(ids).then(res => {
  584. if (res.code == 200) {
  585. if (isLast) {
  586. this.isGrouping()
  587. } else {
  588. this.getList()
  589. }
  590. this.handleMessage = '删除成功'
  591. this.clearMessage()
  592. this.$message.success('删除报告成功')
  593. }
  594. }).catch(err => {
  595. this.$message.error(err.message)
  596. })
  597. }).catch(() => {
  598. this.$message.info("已取消删除")
  599. });
  600. },
  601. //编辑报告
  602. handleEdit(row) {
  603. this.$refs.ReportForm.open(row)
  604. },
  605. //查看详情(修改)
  606. checkDetails(row) {
  607. row.dictMessage = this.dictMessage
  608. row.showMenu = true
  609. this.$s.setSession('row', row)
  610. this.$s.setSession('params', row)
  611. switch (row.type) {
  612. case 0://无效分析
  613. case 1://稳定性分析
  614. case 2://第三方意见
  615. var router = this.$router.resolve({
  616. name: 'rDetails',
  617. })
  618. window.open(router.href, '_blank');
  619. break;
  620. case 3://FTO
  621. case 4://侵权
  622. var router = this.$router.resolve({
  623. name: 'FTOrDetails',
  624. })
  625. window.open(router.href, '_blank');
  626. break;
  627. case 5://回避
  628. var router = this.$router.resolve({
  629. name: 'avoidAside',
  630. })
  631. window.open(router.href, '_blank');
  632. break;
  633. case 6://图表
  634. break;
  635. case 7://无效应对
  636. var router = this.$router.resolve({
  637. name: 'InvalidResponse',
  638. })
  639. window.open(router.href, '_blank');
  640. break;
  641. }
  642. },
  643. //接收可视化的参数
  644. getParams(params) {
  645. if (params.conclusionType == '-1') {
  646. this.searchOption.statuses = ['0', '1', '2', '4', '5']
  647. this.searchOption.types = [params.type]
  648. } else {
  649. this.searchOption.cronIds = [params.conclusionType]
  650. }
  651. var a = JSON.parse(JSON.stringify(this.searchOption))
  652. this.searchOption = a
  653. this.viewType = 'Table'
  654. this.queryParams.current = 1
  655. this.getList()
  656. },
  657. //创建报告子组件返回值
  658. isGetList(val) {
  659. this.handleMessage = val
  660. this.queryParams.current = 1
  661. this.isGrouping()
  662. this.clearMessage()
  663. },
  664. //清空信息
  665. clearMessage() {
  666. this.$emit('submit', true)
  667. this.$nextTick(() => {
  668. this.handleMessage = ''
  669. })
  670. },
  671. },
  672. };
  673. </script>
  674. <style lang="scss" scoped></style>