xiaoshi_system/src/views/report/InvalidResponse/components/flowPath/flowPath.vue

<template>
  <div >
    <!-- 无效流程 -->
    <div style="display: flex;justify-content: end;margin-bottom: 10px;" v-if="!taskId">
      <!-- <el-button type="primary" size="small" @click="addOption">添加陈述意见</el-button> -->
      <!-- <el-dropdown @command="handleCommand">
        <el-button type="primary" size="small">
          上传案件子阶段文件<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown" >
          <el-dropdown-item command="1">添加无效请求书</el-dropdown-item>
          <el-dropdown-item command="6">添加权要修改记录</el-dropdown-item>
          <el-dropdown-item command="7">补充证据及理由记录</el-dropdown-item>
          <el-dropdown-item command="2">添加陈述意见书</el-dropdown-item>
          <el-dropdown-item command="0">添加口审记录</el-dropdown-item>
          <el-dropdown-item command="3">添加无效决定书</el-dropdown-item>
          <el-dropdown-item command="4">添加行政诉讼书</el-dropdown-item>
          <el-dropdown-item command="5">添加行政诉讼判决书</el-dropdown-item>
          <el-dropdown-item command="8">添加其他文档</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->
      <el-dropdown trigger="click">
        <el-button type="primary" size="small">
          上传案件子阶段文件<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown" >
          <template v-for="(menu,index) in menuList">
            <el-dropdown-item :key="'menu1'+index" v-if="menu.children && menu.children.length">
              <el-dropdown placement="left-start" >
                  <span>{{ menu.casePhase }}<i class="el-icon-arrow-right"></i></span>
                <el-dropdown-menu slot="dropdown" >
                  <el-dropdown-item v-for="menuItem in menu.children" :key="menuItem.id" :command="menuItem.id" @click.native="handleCommand(menuItem)">添加{{menuItem.flowName}}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-dropdown-item>
            <el-dropdown-item v-else :key="'menu2'+index" :command="menu.id" @click.native="handleCommand(menu)">添加{{menu.casePhase}}</el-dropdown-item>
          </template>
        </el-dropdown-menu>
        
      </el-dropdown>
      
    </div>
    <div >
      <el-timeline class="flowPath_timeline">
        <el-timeline-item v-for="item in timelineList" :timestamp="item.occurredTime" :key="item.id" placement="top">
          <div v-if="item.showCasePhase" class="timelinePosition">{{ item.casePhase }}</div>
          <el-card>
            <div>
              <span>{{ timeType[item.flowType] || '发文日' }}：</span><span>{{ item.occurredTime}}</span>
              <div style="float: right;">
                  <span style="margin-right: 10px;"  @click="edit(item)"><el-link>编辑</el-link></span>
                  <span  @click="dele(item)"><el-link>删除</el-link></span>
              </div>
            </div>
            
            <div v-if="item.flowType==6">
              <p><span>地点：</span><span>{{ item.oralTrailVO.position }}</span></p>
              <p><span>参与人：</span><span>{{ item.oralTrailVO.participator }}</span></p>
              <p><span>口审笔录描述：</span><span>{{ item.oralTrailVO.recordDescription }}</span></p>
            </div>
            <div v-if="item.flowType==1">
              <p><span>发文日：</span><span>{{ item.invalidRequestFileVO.invalidFileSendDate }}</span></p>
            </div>
            <div v-if="item.flowType==7">
              <p><span>决定书号码：</span><span>{{ item.invalidDecisionFileVO.fileNo }}</span></p>
              <p><span>法律依据：</span><span>{{ item.invalidDecisionFileVO.legalBase }}</span></p>
              <p><span>决定要点：</span><span>{{ item.invalidDecisionFileVO.decisionKey }}</span></p>
              <p><span>无效结果：</span><span>{{ item.invalidDecisionFileVO.cronNames?item.invalidDecisionFileVO.cronNames.join('、'):'' }}</span></p>
            </div>
            <div v-if="item.flowType==16||item.flowType==26">
              <p><span>行诉结果：</span><span>{{ litigationResult[item.judgementVO.conclusion] }}</span></p>
            </div>
            <div v-if="item.flowType==17||item.flowType==27||item.flowType==28">
              <p><span>文档名称：</span><span>{{ item.otherDocumentsVO.documentName }}</span></p>
            </div>
            <div>
              <p>备注：{{ item.description }}</p> 
            </div>
            <div style="margin-top: 10px;">
              <div v-if="item.systemFileList" class="upload-file">
                <div v-for="(file, index) in item.systemFileList" :key="index" style="margin:0;display:flex;justify-content:space-around;">
                  <p style="margin:0;width:calc(100% - 40px);overflow: hidden;white-space: nowrap;text-overflow:ellipsis;cursor: pointer;">{{file.originalName}}</p> 
                  <myMenu :data="file" @delFile="delFile(file,item)" :deleted="false" ></myMenu>
                </div>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>

    <responseDialog ref="responseDialog" :projectId="projectId" @save="saveFlowPath"></responseDialog>
  </div>
</template>

<script>
import responseDialog from '../dialog/editFlowPath.vue'

export default {
  props:['projectId','signPatentNo','taskId'],
  components: {
    responseDialog,
  },
  data() {
    return {
      timelineList:[],
      isOpen: false,
      isOpenNum: null,
      form: {},
      queryParams: {},
      timeType: {
        '1': '提出无效时间',
        '5': '陈述答复时间',
        '6': '口审时间',
        '7': '无效决定时间',
        '8': '发起诉讼时间',
        '18': '发起诉讼时间',
        '16': '法院判决时间',
        '26': '法院判决时间',
        '2':  '权要修改时间',
        '3':  '补充证据和理由时间',
        '17':' 文档时间',
        '27':' 文档时间',
        '28':' 文档时间',
      },
      menuList:[],
      currentMenuList:[],
      litigationResult:this.$constants.litigationResult
    }
  },
  computed: {},
  watch: {},
  async created() {
    await this.getMenuList()
  },
  mounted() {
    this.getList()
  },
  methods: {
    saveFlowPath(form){
      this.getList()
      this.$emit('changeFlowPath',form)
    },
    async getMenuList(){
      await this.$api.queryAssoCasePhaseList().then(response=>{
        if(response.code == 200){
          var data = response.data.data
          this.currentMenuList = data
          let arr = []
          for(let i = 0;i<data.length;i++){
            let item = data[i]
            let obj = arr.find(a=>{
              return a.casePhase == item.casePhase
            })
            if(!obj){
              obj = {
                casePhase : item.casePhase,
                children:[]
              }
              arr.push(obj)
            }
            obj.children.push(item)
          }
          this.menuList = arr
        }
      })
    },
    getList() {
      this.queryParams.projectId = this.projectId
      // 1正序
      this.queryParams.orderBy = 1
      this.$api.queryReportAffair(this.queryParams).then((res) => {
        if (res.code==200) {
          let data = res.data.data
          let arr = this.menuList.map(item=>{
            return item.casePhase
          })
          for(let i = 0;i<arr.length;i++){
            let item = arr[i]
            let index = data.findIndex(l=>{
              return l.casePhase == item
            })
            if(index!=-1){
              data[index].showCasePhase = true
            }
          }
          this.timelineList = res.data.data
        }
      }).catch((error) => {
        
      })
    },

    // 删除文件
    delFile(file,item) {
      var index = item.systemFileList.findIndex(i=>{
        return item.guid == file.guid
      })
      if(index !=-1){
        item.systemFileList.splice(index,1)
      }
      var form = {
        description:item.description,
        systemFileList:item.systemFileList,
        ...item[field[item.affairType]]
      }
    },
    // 编辑
    edit(item) {
      var field= {
        6:'oralTrailVO',
        1:'invalidRequestFileVO',
        5:'stateOpinionVO',
        7:'invalidDecisionFileVO',
        8:'adminProceedVO',
        18:'adminProceedVO',
        16:'judgementVO',
        26:'judgementVO',
        2:'claimHistoryVO',
        3:'supplyEvidenceVO',
        17:'otherDocumentsVO',
        27:'otherDocumentsVO',
        28:'otherDocumentsVO',
      }
      var form = {
        ...item,
        ...item[field[item.flowType]]
      }
      let type = {
        id:item.assoCasePhaseId,
        flowName:item.flowName,
        casePhase:item.casePhase,
        caseChildPhase:item.caseChildPhase,
        flowType:item.flowType
      }
      this.$refs.responseDialog.open(type,form)
    },
    // 删除
    dele(item) {
      var ids = [item.id]
      this.$confirm('确认删除本条数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.deleteReportAffair(ids).then((res) => {
            if (res.code==200) {
              this.$message.success('删除成功')
              this.$emit('changeFlowPath',item)
              this.getList()
            }
          })
        }).catch(err => {
          this.$message.error('删除失败')
      })
      
    },
    // 添加
    async handleCommand(option) {
      if(!(await this.$permission.projectPermission(this.projectId))){
        this.$showPermissionDialog()
        return false
      }
      if(!option){
        return
      }
      var form = {
        systemFileList:[]
      }
      this.$refs.responseDialog.open(option,form)
    },
  },
}
</script>

<style lang="scss" scoped>
.edit{
  float: right;
  margin-right: 10px;
}
</style>
<style lang="scss">
.flowPath_timeline{
  .timelinePosition{
    width: 56px;
    text-align: center;
    position: absolute;
    left: -28px;
    top:-18px;
    color: red;
    font-weight: bold;
  }
}
  
</style>