xiaoshi_system/src/views/report/components/index.vue

<template>
  <div class="height_100">
    <el-container>
      <el-header>
        <div>
          <mySearch style="width:500px" :SearchFields="searchFiled" @search="search" :searchValue="searchOption">
          </mySearch>
        </div>
        <div style="display:flex;">
          <el-button-group style="display:flex;justify-content:flex-start" v-if="[2].indexOf(isOperate) == -1">
            <el-button v-for="item in viewTypes" :key="item.component" size="small"
              :type="viewType == item.component ? 'primary' : ''" @click="onChange2(item.component)">{{ item.name
              }}</el-button>
          </el-button-group>
          <el-dropdown size="small" style="margin-right:20px" v-if="$permission('/pcs/report/add')">
            <el-button type="primary" size="small">
              创建报告<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" style="margin-top:0px" v-if="dictMessage.REPORT_TYPE">
              <!-- 遍历按钮 -->
              <el-dropdown-item
                v-for="item in dictMessage.REPORT_TYPE.filter(item => !['6'].includes(item.dictChildValue))"
                :key="item.dictChildLabel" @click.native="handleAnalyse(item.dictChildValue)"
                v-if="$permission('/pcs/report/add/' + item.permission)">{{ item.dictChildLabel }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main id="patent-list-container" class="main" v-loading="loading">
        <component :is="viewType" v-bind="$attrs" v-on="$listeners" :isOperate="isOperate" :tableData="dataList"
          :state="state" :group="group" :queryParams="queryParams" @option="handleOption" @sort="handleSort"
          @getRow="checkDetails" @params="getParams"></component>
      </el-main>
      <el-footer class="pagination" v-if="viewType != 'visual'">
        <el-pagination background layout="total,sizes, prev, pager, next, jumper" :current-page.sync="queryParams.current"
          :page-sizes="pageSize" :page-size.sync="queryParams.size" @current-change="handleCurrentChange"
          @size-change="handleSizeChange" :total="total">
        </el-pagination>
      </el-footer>
    </el-container>
    <CreateReport ref="ReportForm" @getList="isGetList"></CreateReport>
  </div>
</template>

<script>
import Table from './view/table.vue'
import Card from './view/card.vue'
import visual from './view/visual.vue'
import CreateReport from './dialog/addAndEditReport.vue'
export default {
  components: {
    Table,
    Card,
    visual,
    CreateReport
  },
  props: {
    isOperate: ''
  },
  data() {
    return {
      //视图类型
      viewTypes: [
        {
          name: '可视化',
          component: 'visual'
        },
        {
          name: '列表',
          component: 'Table'
        },
        {
          name: '卡片',
          component: 'Card'
        },
      ],
      //当前视图类型
      viewType: 'Table',
      //检索字段
      searchFiled: [
        {
          label: '报告名称',
          value: 'name',
          type: 1,
          placeholder: '请输入报告名称'
        },
        {
          label: '报告类型',
          value: 'types',
          type: 3,
          placeholder: '请选择报告类型',
          // options:this.dictMessage.REPORT_TYPE||[]
        },
        {
          label: '报告状态',
          value: 'statuses',
          type: 3,
          placeholder: '请选择报告状态',
          // options:this.dictMessage.REPORT_STATE||[]
        },
        {
          label: '核心结论',
          value: 'cronIds',
          type: 3,
          placeholder: '请选择核心结论',
          options: []
        },
      ],
      //检索条件
      searchOption: {
        name: localStorage.searchContent
      },
      //分页信息
      queryParams: {
        current: 1,
        size: 10,
      },
      //总数
      total: 0,
      //分页数量
      pageSize: [10, "全部"],
      //排序字段
      sort: [
        {
          "orderBy": "createTime",
          "orderType": 1
        }
      ],
      //分组
      group: '',
      //加载
      loading: false,
      //报告数据集合
      dataList: [],
      //获取报告类型、报告状态、核心结论
      reportSearch: {},
    };
  },
  watch: {},
  computed: {
    dictMessage() {
      var a = this.$store.state.dictMessage.dictMessage
      if (a.REPORT_TYPE) {
        a.REPORT_TYPE.forEach(item => {
          if (['0', '1', '2'].includes(item.dictChildValue)) {
            item.permission = 'invalid'
          } else if (item.dictChildValue == 3) {
            item.permission = 'FTO'
          } else if (item.dictChildValue == 4) {
            item.permission = 'tort'
          } else if (item.dictChildValue == 5) {
            item.permission = 'avoidDesign'
          } else if (item.dictChildValue == 7) {
            item.permission = 'reInvalid'
          }
        })
      }
      if (a.REPORT_TYPE) {
        this.searchFiled[1].options = a.REPORT_TYPE.map(item => {
          return {
            value: item.dictChildValue,
            label: item.dictChildLabel
          }
        })
        this.searchFiled[2].options = a.REPORT_STATE.map(item => {
          return {
            value: item.dictChildValue,
            label: item.dictChildLabel
          }
        })
      }

      return a
    },
    state() {
      var a = this.$store.state.dictMessage.dictMessage.REPORT_STATE
      var b = {}
      if (a) {
        a.forEach(item => {
          b[item.dictChildValue] = item.dictChildLabel
        });
        return b
      }
      return []

    }
  },
  created() { },
  mounted() {
    //获取报告清单
    this.getList()
    // 获取报告类型、获取报告状态、 获取核心结论
    // this.getReportSearch()
  },
  methods: {
    // 获取报告类型、获取报告状态、 获取核心结论
    getReportSearch() {
      this.$api.search(params).then(res => {
        if (res.code == 200) {
          this.reportSearch.types = res.data.types
          this.reportSearch.statuses = res.data.statuses
          this.reportSearch.cronIds = res.data.cronIds
          this.searchFiled.forEach(item => {
            if (item.type == 3) {
              item.options = this.reportSearch[item.value]
            }
          })
        }
      }).catch(error => {
        this.reportSearch.type = []
        this.reportSearch.state = []
        this.reportSearch.conclusion = []
        this.$message.error(error.message)
      })
    },
    //接收检索条件
    search(val) {
      let params = {}
      val.forEach(item => {
        if (item.type == 3) {
          params[item.value] = item.searchValue.map(itemValue => {
            return itemValue.value
          })
        } else {
          params[item.value] = item.searchValue.label
        }
      })
      // 返回字符串
      this.searchOption.searchQuery = this.$commonJS.objectToString(params)
      // 调用查询接口
      this.queryParams.current = 1
      this.getList()
    },
    //获取报告列表
    getList() {
      this.dataList = [{}]
      return
      let params = {
        ...this.queryParams,//分页信息
        ...this.searchOption,//检索条件
        orderDTOList: this.sort,//排序信息
      }
      this.$api.query(params).then(res => {
        if (res.code == 200) {
          this.dataList = res.data
          this.total = res.total
        }
      }).catch(error => {
        this.dataList = []
        this.total = 0
        this.$message.error(error.message)
      })
    },
    //排序
    handleSort({ column, prop, order }) {
      this.sort = []//如需要多个字段排序，则不需要清空
      if (order == 'null') {
        return;
      }
      var orderType = {
        ascending: 0,
        descending: 1
      }
      var params = this.sort.find(item => {
        return item.orderBy == prop
      })
      if (params) {
        params.orderType = orderType[order]
      } else {
        params = {}
        params.orderBy = prop
        params.orderType = orderType[order]
        this.sort.push(params)
      }
      this.queryParams.current = 1
      this.getList()
    },
    //分页
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    //切换页大小
    handleSizeChange(val) {
      this.getList()
    },
    //切换视图
    onChange2(type) {
      this.viewType = type
      if (type == 'visual') {
        this.$nextTick(() => {
          this.reportVisual()
        })
        return false
      }
      this.queryParams.size = this.viewType === 'Table' ? 10 : 12
      this.onChange()
    },
    //展示报告可视化
    reportVisual() {
      this.$api.reportVisual(this.queryParams).then(response => {
        if (response.code == 200) {
          this.$refs.reportVisual.open(response.data)
        }
      })
    },
    //切换视图后查询报告数据
    onChange() {
      this.queryParams.current = 1
      this.getList()
    },
    //打开创建报告弹窗
    handleAnalyse(id) {
      var form = {
        type: id,
        scenarioList: []
      }
      this.$refs.ReportForm.open(form)
    },
    //操作列
    handleOption({ option, row }) {
      this.$s.setSession('params', row)
      switch (option) {
        case '0'://分享
          this.share(row)
          break
        case '1'://导出报告
          this.exportReport(row)
          break
        case '2'://报告文档
          this.handleFile(row)
          break
        case '5'://拆分特征
          this.handleDetails(row)
          break
        case '3'://自定义字段
          this.handleFields(row)
          break
        case '4'://任务分配
          this.handleTask(row)
          break
        case '6'://导入专利
          this.handleImportPatent(row)
          break
        case '7'://删除
          this.handleDelete(row)
          break;
        case '8'://侵权分析技术特征对比
          this.$s.setSession('reportMessage1', row)
          var routerReport3 = this.$router.resolve({
            path: "/tortIndex",
            query: {
              id: row.id,
              patentNo: row.signPatentNo,
              personId: row.personId,
              type: 8
            }
          })
          window.open(routerReport3.href, '_blank');
          break
        case '9'://回避设计
          this.handleDetails(row)
          break;
        case '10'://添加对比文件
          this.addPatentList(row)
          break
        case '11'://完成报告
          this.completeReport(row)
          break
        case '12'://追踪报告
          this.trackReport(row)
          break
        case '13'://添加无效理由和证据
          this.toInvalidIndex(row)
          break;
        case '14'://导入无效证据
          this.toInvalidResponset(row)
          break;
        case 'e'://编辑
          this.handleEdit(row)
          break
      }
    },
    // 删除报告
    handleDelete(row) {
      this.$confirm('此操作将永久删除该报告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.dele(params).then(res => {
          if (res.code == 200) {
            this.$message.success('删除报告成功')
            this.getList()
          }
        }).catch(err => {
          this.$message.error(err.message)
        })

      }).catch(() => {
        this.$message.info("已取消删除")
      });
    },
    //编辑报告
    handleEdit(row) {
      this.$refs.ReportForm.open(row)
    },

    //查看详情（修改）
    checkDetails(row) {
      row.dictMessage = this.dictMessage
      row.showMenu = true
      this.$s.setSession('row', row)
      this.$s.setSession('params', row)
      switch (row.type) {
        case 0://无效分析
        case 1://稳定性分析
        case 2://第三方意见
          var router = this.$router.resolve({
            name: 'rDetails',
          })
          window.open(router.href, '_blank');
          break;
        case 3://FTO

        case 4://侵权
          var router = this.$router.resolve({
            name: 'FTOrDetails',
          })
          window.open(router.href, '_blank');
          break;
        case 5://回避
          var router = this.$router.resolve({
            name: 'avoidAside',
          })
          window.open(router.href, '_blank');
          break;
        case 6://图表
          break;
        case 7://无效应对
          var router = this.$router.resolve({
            name: 'InvalidResponse',
          })
          window.open(router.href, '_blank');
          break;
      }
    },
    //接收可视化的参数
    getParams(params) {
      if (params.conclusionType == '-1') {
        this.searchOption.statuses = ['0', '1', '2', '4', '5']
        this.searchOption.types = [params.type]
      } else {
        this.searchOption.cronIds = [params.conclusionType]
      }
      var a = JSON.parse(JSON.stringify(this.searchOption))
      this.searchOption = a
      this.viewType = 'Table'
      this.onChange()
    },
    //创建报告子组件返回值
    isGetList(val) {
      if (val) {
        this.getList()
      }
    }
  },
};
</script>
<style lang="scss" scoped></style>