diantou/src_product/iam/law/case/law-case-progress-page.vue

<template>
  <a-layout :class="$style.page">
    <a-layout-header :class="$style.header">
      <div :class="$style.headerTitle" :title="caseName" v-if="ifRouterView">{{ caseName }} </div>
    </a-layout-header>
    <a-layout style="padding: 20px 20px 20px 0">
      <a-layout-sider
        theme="light"
        width="200"
        :class="[
          fold ? $style.leftSiderHidden : null,
          $style.leftSider,
          { [$style.leftOver]: !fold },
        ]"
        style="padding: 0; background: #fff"
      >
        <div :class="$style.siderContent" v-for="(node, index) in nodeinfo" :key="node.id">
          <div
            :class="[
              $style.siderTitleDiv,
              {
                [$style.checked]: projectStage === node.props.stepType && checkedId === node.id,
              },
              { siderTitlechildxm: node.children.length > 0 },
            ]"
          >
            <div
              :class="[$style.siderTitle, { [$style.handstyle]: node.nodeUrl !== '' }]"
              @click="
                node.nodeUrl !== '' && setChecked(index, node.nodeUrl, node.props.stepType, node.id)
              "
            >
              <a-icon
                type="profile"
                :class="[projectStage === node.props.stepType ? 'checkedpro' : 'nocheckedpro']"
              />
              {{ node.nodeName }}
              <a-icon
                :type="'plus-circle'"
                @click="addProgress(null, index, $event)"
                :class="[
                  $style.changeStatus,
                  { checkedpro: projectStage === node.props.stepType },
                  { nocheckedpro: projectStage !== node.props.stepType },
                ]"
                v-if="
                  (node.props.stepType === 'progress' || node.props.stepType === 'execute') &&
                  zt === node.props.stepType &&
                  nodeinfo.length - 1 === index &&
                  !view
                "
              />
            </div>
          </div>
          <a-spin :spinning="spinning" v-if="node.children.length > 0">
            <a-timeline :class="[spinning ? $style.timeline : '']">
              <div
                v-for="(cnode, cindex) in node.children"
                :key="cnode.id"
                :class="[
                  $style.siderUlDiv,
                  {
                    [$style.checked]:
                      projectStage === node.props.stepType &&
                      checkedId === cnode.id &&
                      projectStage !== 'progress',
                  },
                ]"
              >
                <table style="border: none; width: 100%; border-bottom: 2px solid #e8e8e8">
                  <tr
                    @click="
                      cnode.nodeUrl !== '' &&
                        setChecked(index, cnode.nodeUrl, node.props.stepType, cnode.id)
                    "
                    :class="[
                      {
                        checkedtr:
                          projectStage === node.props.stepType &&
                          checkedId === cnode.id &&
                          projectStage === 'progress',
                      },
                    ]"
                  >
                    <td width="60%"
                      ><a-timeline-item :class="$style.siderLi">{{
                        cnode.nodeName
                      }}</a-timeline-item></td
                    >
                    <td width="40%">
                      <a-icon
                        :type="'plus-circle'"
                        @click="addProgress(cnode, index, $event)"
                        :class="[
                          $style.changeStatusp,
                          { checkedpro: projectStage === node.props.stepType },
                          { nocheckedpro: projectStage !== node.props.stepType },
                        ]"
                        v-if="
                          node.props.stepType === 'progress' &&
                          cindex === node.children.length - 1 &&
                          zt === node.props.stepType &&
                          nodeinfo.length - 1 === index &&
                          !view
                        "
                      />
                      <a-icon
                        :type="'up'"
                        @click="fnzkzdnode(cnode, 'up', $event)"
                        :class="[
                          $style.changeStatusp,
                          { checkedpro: projectStage === node.props.stepType },
                          { nocheckedpro: projectStage !== node.props.stepType },
                        ]"
                        v-if="node.props.stepType === 'progress' && cnode.props.zk"
                      />
                      <a-icon
                        :type="'down'"
                        @click="fnzkzdnode(cnode, 'down', $event)"
                        :class="[
                          $style.changeStatusp,
                          { checkedpro: projectStage === node.props.stepType },
                          { nocheckedpro: projectStage !== node.props.stepType },
                        ]"
                        v-if="node.props.stepType === 'progress' && !cnode.props.zk"
                      />
                      <a-icon
                        type="delete"
                        @click="deleteProgress(cnode, node, index, $event)"
                        :class="[$style.deletePro]"
                        v-show="cnode.nodeUrl.indexOf('/draft/') > -1"
                        v-if="node.props.stepType === 'execute' && !view"
                      />
                    </td>
                  </tr>
                  <tr
                    :class="[
                      {
                        checkedtr:
                          projectStage === node.props.stepType &&
                          checkedId === cnode.id &&
                          projectStage === 'progress',
                      },
                    ]"
                  >
                    <td colspan="2">
                      <span :class="$style.siderLi">{{ cnode.creationTime }}</span>
                    </td>
                  </tr>
                  <tr v-if="cnode.props.zk === true"
                    ><td colspan="2" style="padding: 10px"
                      ><div
                        v-for="cznode in cnode.children"
                        :key="cznode.id"
                        @click="setChecked(index, cznode.nodeUrl, node.props.stepType, cznode.id)"
                        :class="[
                          $style.siderUlDiv,
                          $style.casecnodediv,
                          {
                            [$style.checked]:
                              projectStage === node.props.stepType && checkedId === cznode.id,
                          },
                        ]"
                      >
                        <table :class="$style.casecnode">
                          <tr style="height: 10px"><td colspan="2"></td></tr>
                          <tr>
                            <td width="70%"
                              ><a-timeline-item :class="$style.siderLi">{{
                                cznode.nodeName
                              }}</a-timeline-item></td
                            >
                            <td width="30%" style="text-align: right; padding-right: 15px">
                              <a-icon
                                type="delete"
                                @click="deleteProgress(cznode, cnode, index, $event)"
                                :class="[$style.deletePro]"
                                v-show="cznode.nodeUrl.indexOf('/draft/') > -1"
                                v-if="!view"
                            /></td>
                          </tr>
                          <tr>
                            <td colspan="2">
                              <span :class="$style.siderLi">{{ cznode.creationTime }}</span>
                            </td>
                          </tr>
                        </table></div
                      ></td
                    >
                  </tr>
                </table>
              </div>
            </a-timeline>
          </a-spin>
        </div>
        <div :class="$style.siderContent" v-show="casedsjurl !== ''">
          <div :class="[$style.siderTitleDiv, { [$style.checked]: projectStage === '5' }]">
            <div :class="$style.siderTitle" @click="setChecked('', casedsjurl, '5', '')">
              <a-icon type="profile" />
              案件大事记
            </div>
          </div>
        </div>
      </a-layout-sider>
      <a-layout-sider width="20" style="background: #f0f2f5">
        <a-button type="primary" :class="$style.fold" @click="foldClick">
          <a-icon :type="fold ? 'right' : 'left'" />
        </a-button>
      </a-layout-sider>
      <a-layout
        style="padding: 0px; background: #fff"
        :class="['sd-has-table', $style.lawprogress]"
      >
        <iframe
          v-show="ifRouterView"
          :src="frameSrc"
          frameborder="0"
          style="height: 100%"
          name="sdEasyflowIframe"
          :key="key"
        ></iframe>
      </a-layout>
    </a-layout>
    <a-modal
      :title="'案件进展阶段'"
      :mask-closable="false"
      :visible="visible"
      :width="800"
      :confirm-loading="confirmLoading"
      destroy-on-close
      cancel-text="取消"
      ok-text="确定"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <law-case-tree
        ref="casetree"
        :caseType="caseType"
        :caseStage="caseStage"
        :defaultTopNodeText="defaultTopNodeText"
        :defaultTopNodeId="defaultTopNodeId"
        @treeSelect="treeSelect"
      />
    </a-modal>
    <a-modal
      :title="'执行进展阶段'"
      :mask-closable="false"
      :visible="zxvisible"
      :width="800"
      :confirm-loading="confirmLoading"
      destroy-on-close
      cancel-text="取消"
      ok-text="确定"
      @ok="handleOkzx"
      @cancel="handleCancelzx"
    >
      <a-form-model :model="interForm" :label-col="{ span: 7 }" :wrapper-col="{ span: 15 }">
        <a-form-model-item label="阶段名称" required>
          <a-select v-model="interForm.stageField">
            <a-select-option v-for="item in zxstage" :key="item.code" :value="item.code">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-layout>
</template>

<script>
import { message, Modal } from 'ant-design-vue'
import moment from 'moment'
import LawService from '../law-service'
import lawCaseTree from './law-case-tree'
import components from './_import-components/law-case-progress-page-import'
import FlowcenterService from '@/flowcenter/flowcenter-service'
function at(n) {
  n = Math.trunc(n) || 0
  if (n < 0) n += this.length
  if (n < 0 || n >= this.length) return undefined
  return this[n]
}
const TypedArray = Reflect.getPrototypeOf(Int8Array)
for (const C of [Array, String, TypedArray]) {
  Object.defineProperty(C.prototype, 'at', {
    value: at,
    writable: true,
    enumerable: false,
    configurable: true,
  })
}
export default {
  name: 'LawCaseProgressPage',
  metaInfo: {
    title: '案件作业',
  },
  components: {
    ...components,
    lawCaseTree,
  },
  mixins: [],
  provide() {
    return {
      reload: this.reload,
    }
  },
  data() {
    return {
      key: 0,
      selectjd: [],
      visible: false,
      zxvisible: false,
      confirmLoading: false,
      zxstage: [], // 执行进展
      interForm: {
        stageField: '',
      },
      ifRouterView: true,
      fold: false,
      spinning: true, // 左侧节点加载状态
      caseid: '', // 案件Id
      // projectStatus: '',
      checkedId: '', // 默认选中节点id
      // 案件进展
      nodeinfo: [],
      dict: [],
      stage: [], // 案件进展
      parentstage: [], // 案件进展
      // ProgressNodes: [],
      // CasedoingNodes: [], // 案件执行列表
      projectStage: '', // 案件上报1 进展2 结案3 案件执行4 案件大事记5 随机 根据后端返回
      caseName: '', // 案件名称,
      currentUserType: [], // 当前登录人所在分案角色
      type: '',
      todoId: '',
      moduleId: '',
      formListId: '',
      customValues: null,
      Expressions: [],
      // id: '',
      flag: true,
      frameSrc: '',
      casesburl: '', // 案件上报url
      casejaurl: '', // 案件结案url
      casedsjurl: '', // 案件大事记
      refreshflag: true,
      parentid: '',
      caseLx: '', // 案件文档的案件信息案件类型字段
      caseLxtitle: '',
      caseType: '',
      caseStage: '',
      defaultTopNodeId: '0',
      defaultTopNodeText: '案件进展阶段',
      addindex: '', // 点击增加时 是增加哪个大阶段
      zt: '', // 判断打开是 案件进展 还是执行进展 还是结案
      flagxj: '', // 判断是在案件进展层级无添加还是案件进展下的阶段层级添加为1
      deleteflag: '',
      view: false,
    }
  },
  mounted() {
    // this.projectStage = this.$route.query.zt
    this.caseid = this.$route.query.id
    this.view = this.$route.query.view === '1'
    // 获取案件信息
    LawService.getCaseData(this.$route.query.id).then((res) => {
      this.caseLx = res.data.caseType
      LawService.getCaseTree(this.caseType, '').then((r) => {
        this.caseLxtitle = r.data.find((i) => i.id === this.caseLx)?.text
      })
    })
    this.casedsjurl = '#/case-memorabilia-page/' + this.caseid
    this.zt = this.$route.query.zt
    const path = this.$route.fullPath.replace('/case-progress-page', '/sd-webflow')
    this.frameSrc = '#' + path
    LawService.getdict('280447518411472896').then((res) => {
      const dict = []
      res.data.forEach((d) => {
        dict.push({
          name: d.label,
          code: d.value,
        })
      })
      this.dict = [...dict]
      this.caseStage = this.$route.query?.cs
      this.caseType = this.$route.query?.ct
      if (this.caseType === undefined) {
        if (this.zt === 'execute') {
          LawService.getAllcaseproStage().then((res) => {
            const stage = []
            res.data.forEach((d) => {
              stage.push({
                name: d.EXECUTE_NAME,
                code: d.EXECUTE_CODE,
                businessTypeId: d.businessTypeId,
              })
            })
            this.zxstage = stage
            this.initData(this.caseid)
          })
        } else {
          this.initData(this.caseid)
        }
      } else {
        // 获取案件进展树阶段列表
        LawService.getCaseTree(this.caseType, '').then((r) => {
          LawService.getCaseTree(this.caseType, this.caseStage).then((res) => {
            this.parentstage = [...r.data]
            this.stage = [...res.data]
            this.initData(this.caseid)
          })
        })
      }
    })
  },
  destroyed() {
    window.removeEventListener('hasLeaderAuthority', this.hasLeaderAuthority)
  },
  methods: {
    treeSelect(key, item) {
      if (
        item.selectedNodes[0].data.props.props.businessTypeId &&
        item.selectedNodes[0].data.props.props.businessTypeId !== ''
      ) {
        this.selectjd = [
          {
            url: item.selectedNodes[0].data.props.props.pageUrl,
            businessTypeId: item.selectedNodes[0].data.props.props.businessTypeId,
            stage: item.selectedNodes[0].data.props.id,
            stagename: item.selectedNodes[0].data.props.text,
            jdname: item.selectedNodes[0].data.props.props.parentName,
            caseStage: item.selectedNodes[0].data.props.props.parentId,
            caseType: item.selectedNodes[0].data.props.props.caseType,
          },
        ]
      } else {
        this.selectjd = []
      }
    },
    onPageUnload(res) {
      if (res.data.url !== undefined) {
        // let fullPath = res.data.url
        this.projectStage = res.data.type
        // if (this.projectStage.indexOf('close') > -1) {
        this.projectStage = this.projectStage.replace('close', '')
        LawService.getProgressData(this.caseid).then((res1) => {
          this.nodeinfo = this.fndeal(res1.data)
          const objsz = res1.data.filter((i) => i.props.stepType === this.projectStage)
          const obj = objsz.at(-1)
          let url = ''
          if (this.projectStage === 'progress') {
            const cobj = obj.children.at(-1).children.at(-1)
            url = cobj.props.detailUrl + '/' + cobj.props.detailInstid
            this.checkedId = cobj.id
          } else if (this.projectStage === 'execute') {
            const cobj = obj.children.at(-1)
            url = cobj.props.detailUrl + '/' + cobj.props.detailInstid
            this.checkedId = cobj.id
          } else {
            url = obj.props.detailUrl + '/' + obj.props.detailInstid
          }

          if (url.indexOf('id=') === -1) {
            url = url + '?zt=' + this.projectStage + '&id=' + this.caseid
          }
          this.frameSrc = url + '&t=' + Math.random()
          this.key = this.key + 1
          url = url.replace('/sd-webflow', '/case-progress-page')
          if (this.view) {
            url = url + '&view=1'
          }
          window.location.href = url
          this.reload()
        })
        // } else {
        //   let url = fullPath.replace('/sd-webflow', '/case-progress-page')
        //   if (url.indexOf('&id') === -1) {
        //     url = url + '?zt=' + this.projectStage + '&id=' + this.caseid
        //   }
        //   fullPath = url
        //   if (this.view) {
        //     url = url + '&view=1'
        //   }
        //   window.location.href = fullPath // 改为新窗口打开之后，直接本窗口跳转，防止系统内打开多余页签
        //   this.spinning = !this.spinning
        //   this.initData(this.caseid)
        // }
      }
    },
    deleteProgress(node, parentnode, index, event) {
      event.stopPropagation()
      if (node.instId === '0') {
        this.deleteflag = node.props.stepType
        this.fndelete(node, parentnode, index)
        // Modal.warning({
        //   title: '提示',
        //   content: '当前页面还未存在后端，无需删除',
        // })
      } else {
        const instIds = []
        instIds.push(node.instId)
        Modal.confirm({
          title: '你确定删除这项内容吗？',
          content: '删除这条数据后，就无法恢复初始的状态。',
          okText: '删除',
          okType: 'danger',
          onOk: () => {
            // this.loading = true
            const params = {
              flowCallbackBeanName: 'formBeanCleanerCallBack',
              processInstanceIds: instIds.join(','),
            }
            FlowcenterService.fnDarftsDelete(params)
              .then((res) => {
                if (res.status === 200) {
                  message.success('删除成功')
                  this.fndelete(node, parentnode, index)
                } else {
                  message.error('删除失败，请联系管理员')
                }
              })
              .catch((e) => {
                message.error('删除失败，请联系管理员')
              })
          },
        })
      }
    },
    fndelete(node, parentnode, index) {
      let flag = false
      parentnode.children.pop()
      if (parentnode.props.stepType === 'progress') {
        if (parentnode.children.length === 0) {
          this.nodeinfo[index].children.pop()
          if (
            this.nodeinfo[index].children.length === 0 &&
            this.nodeinfo[index].props.stepType === 'progress'
          ) {
            // this.nodeinfo.splice(index, 1)
            flag = true
          }
        }
      } else if (parentnode.props.stepType === 'execute') {
        if (parentnode.children.length === 0) {
          flag = true
        }
      }
      let url = ''
      if (flag) {
        const node = this.nodeinfo[index - 1]
        if (node.nodeUrl !== '' && node.nodeUrl !== null && node.nodeUrl !== undefined) {
          this.frameSrc = node.nodeUrl
        } else {
          const pnode = node.children.at(-1)
          if (pnode.nodeUrl !== '' && pnode.nodeUrl !== null && pnode.nodeUrl !== undefined) {
            this.frameSrc = pnode.nodeUrl
          } else {
            const pcnode = pnode.children.at(-1)
            if (pcnode.children && pcnode.children.length > 0) {
              this.frameSrc = pcnode.children[pcnode.children.length - 1].nodeUrl
            }
          }
        }
        this.projectStage = node.props.stepType
        url = this.frameSrc
      } else if (parentnode.children.length > 0) {
        this.frameSrc = parentnode.children[parentnode.children.length - 1].nodeUrl
        this.projectStage = parentnode.props.stepType
        // this.checkedId = parentnode.children[parentnode.children.length - 1].id
        url = this.frameSrc
      } else {
        this.projectStage = this.nodeinfo[index].props.stepType
        const pnode = this.nodeinfo[index]
        if (pnode.nodeUrl !== '' && pnode.nodeUrl !== null && pnode.nodeUrl !== undefined) {
          this.frameSrc = pnode.nodeUrl
        } else {
          const pcnode = pnode.children.at(-1)
          if (
            pnode &&
            pnode.nodeUrl !== '' &&
            pnode.nodeUrl !== null &&
            pnode.nodeUrl !== undefined
          ) {
            this.frameSrc = pcnode.nodeUrl
          } else {
            if (pcnode.children && pcnode.children.length > 0) {
              this.frameSrc = pcnode.children[pcnode.children.length - 1].nodeUrl
            }
          }
        }
        url = this.frameSrc
      }
      url = url.replace('sd-webflow', 'case-progress-page')
      if (url.indexOf('id=') === -1) {
        url = url + '?id=' + this.caseid + '&zt=' + this.projectStage
      }
      window.location.href = url
      this.spinning = !this.spinning
      this.checkedId = null
      this.initData(this.caseid)
    },
    fnzkzdnode(node, type, event) {
      event.stopPropagation()
      if (type === 'up') {
        node.props.zk = false
      } else {
        node.props.zk = true
      }
    },
    addProgress(node, index, event) {
      // 判断当前纠纷ID下无正在流转的纠纷进展详情
      event.stopPropagation()
      const nodes = this.nodeinfo[index]
      let type = nodes.props.stepType
      let flag = false // 可以直接新建
      if (nodes.children && nodes.children.length > 0) {
        // 判断是案件执行新增还是案件进展新增
        if (nodes.props.stepType === 'progress') {
          if (node) {
            const obj = node.children.find(
              (i) => i.stepStatus === '0' || i.props.stepStatus === '0'
            )
            if (obj) {
              flag = true
            }
          } else {
            // 判断子集的子集
            const zobj = nodes.children[nodes.children.length - 1]
            const obj = zobj.children.find(
              (i) => i.stepStatus === '0' || i.props.stepStatus === '0'
            )
            if (obj) {
              flag = true
            }
          }
        } else if (nodes.props.stepType === 'execute') {
          // 执行进展打开阶段
          type = 'execute'
          this.parentid = nodes?.id
          if (nodes && nodes.children.length > 0) {
            nodes.children.forEach((n) => {
              const obj = nodes.children.find(
                (i) => i.stepStatus === '0' || i.props.stepStatus === '0'
              )
              if (obj) {
                flag = true
              }
            })
          }
        } else {
          const obj = nodes.children.find((i) => i.stepStatus === '0' || i.props.stepStatus === '0')
          if (obj) {
            flag = true
          }
        }
      }
      if (flag) {
        Modal.warning({
          title: '提示',
          content: '当前还存在未流程办结的进展，请流程办结后再新建',
        })
      } else if (type === 'execute') {
        if (nodes.chidlren && nodes.children.length > 0) {
          this.parentid = nodes.children[nodes.children.length - 1].id
        }
        this.addindex = index
        this.zt = nodes.props.stepType
        this.zxvisible = true
      } else {
        let flagxj = true // 创建新类型
        if (nodes.children.legnth > 0) {
          const cobj = nodes.children.find((i) => i.stepStatus === '0')
          if (cobj) {
            flagxj = false
          }
        }
        // flag = true
        if (flagxj) {
          this.selectjd = []
          this.caseType = node ? node.caseType : this.caseLx
          this.caseStage = node?.caseStage
          this.defaultTopNodeId = node ? node.id : this.caseLx
          this.defaultTopNodeText = node ? node.nodeName : this.caseLxtitle
          this.parentid = node?.id
          this.addindex = index
          this.zt = nodes.props.stepType
          // this.flagxj = node ? '' : '1'
          this.flagxj = '1'
          if (nodes.children && nodes.children.length > 0) {
            if (
              nodes.children[nodes.children.length - 1].caseStage === node?.caseStage &&
              nodes.children[nodes.children.length - 1].caseType === node?.caseType
            ) {
              this.flagxj = ''
            }
          }
          if (this.parentid === undefined || this.parentid === null) {
            if (this.flagxj === '1') {
              // 创建两级节点，则父节点是
              this.parentid = nodes.id
            } else {
              this.parentid = nodes.children[nodes.children.length - 1].id
            }
          }
          this.visible = true
        } else {
          Modal.warning({
            title: '提示',
            content: '当前还存在未流程办结的纠纷进展，请流程办结后再新建',
          })
        }
      }
    },
    handleOk() {
      if (this.selectjd.length === 0) {
        Modal.warning({
          title: '提示',
          content: '请选择程序',
        })
      } else {
        this.visible = false
        const obj = this.nodeinfo[this.addindex].children.at(-1)
        let ext = ''
        if (obj) {
          ext = this.flagxj === '' || obj.nodeName === this.selectjd[0].jdname ? '&flag=1' : ''
          if (obj.nodeName === this.selectjd[0].jdname) {
            this.parentid = obj.id
          }
        } else {
          // this.parentid = 'progress'
          this.parentid = this.nodeinfo[this.addindex].id
        }
        this.frameSrc =
          '#/sd-webflow/pages/draft/0?businessTypeId=' +
          this.selectjd[0].businessTypeId +
          '&id=' +
          this.caseid +
          '&cs=' +
          this.selectjd[0].caseStage +
          '&stage=' +
          this.selectjd[0].stage +
          '&ct=' +
          this.selectjd[0].caseType +
          '&parentid=' +
          this.parentid +
          '&zt=' +
          this.zt +
          ext
        const node = this.nodeinfo[this.addindex]
        const path = this.frameSrc
        // 判断是案件进展 还是执行进展
        if (node.props.stepType === 'progress') {
          // 增加进展大节点和一级、二级节点
          // 判断当前新增的是否统一级别
          if (this.flagxj === '1' && (!obj || obj.nodeName !== this.selectjd[0].jdname)) {
            const njd = {
              id: '0',
              nodeUrl: '',
              nodeName: this.selectjd[0].jdname,
              caseStage: this.selectjd[0].caseStage,
              caseType: this.selectjd[0].caseType,
              stepStatus: '0',
              creationTime: moment().format('YYYY-MM-DD'),
              instId: '0',
              children: [
                {
                  id: '0',
                  nodeUrl: path,
                  nodeName: this.selectjd[0].stagename,
                  stepStatus: '0',
                  instId: '0',
                  creationTime: moment().format('YYYY-MM-DD'),
                  children: [],
                  props: {
                    stepType: 'progress',
                  },
                },
              ],
              props: {
                stepType: 'progress',
                zk: true,
              },
            }
            this.nodeinfo[this.addindex].children.push(njd)
          } else {
            const njd = {
              id: '0',
              nodeUrl: path,
              nodeName: this.selectjd[0].stagename,
              stepStatus: '0',
              instId: '0',
              creationTime: moment().format('YYYY-MM-DD'),
              children: [],
              props: {
                stepType: 'progress',
              },
            }
            this.nodeinfo[this.addindex].children[
              this.nodeinfo[this.addindex].children.length - 1
            ].children.push(njd)
          }
        } else if (node.props.stepType === 'execute') {
          // 增加执行大节点和一级节点
          const njd = {
            id: '0',
            nodeUrl: path,
            nodeName: this.selectjd[0].stagename,
            stepStatus: '0',
            creationTime: moment().format('YYYY-MM-DD'),
            instId: '0',
            children: [],
          }
          this.nodeinfo[this.addindex].children.push(njd)
        }
        this.checkedId = '0'
        this.reload()
      }
    },
    handleCancel() {
      this.visible = false
    },
    handleOkzx() {
      if (this.interForm.stageField === '') {
        Modal.warning({
          title: '提示',
          content: '请选择阶段名称',
        })
      } else {
        this.zxvisible = false
        const node = this.nodeinfo[this.addindex]
        this.projectStage = 'execute'
        const obj = this.zxstage.find((o) => o.code === this.interForm.stageField)
        const businessTypeId = obj.businessTypeId.toString()
        // LawService.getTypeBusId(businessTypeId).then((res) => {
        //   businessTypeId = res.data[0].id
        this.frameSrc =
          '#/sd-webflow/pages/draft/0?businessTypeId=' +
          businessTypeId +
          '&extParams=%7B%22moduleId%22%3A%22271792223254282240%22%7D&zt=' +
          this.projectStage +
          '&id=' +
          this.caseid +
          '&stage=' +
          this.interForm.stageField +
          '&parentid=' +
          this.parentid
        // })
        const stage = this.interForm.stageField
        const path = this.frameSrc
        const sn = this.zxstage.find((i) => i.code === stage)?.name
        const njd = {
          id: '0',
          nodeUrl: path,
          nodeName: sn,
          stepStatus: '0',
          creationTime: moment().format('YYYY-MM-DD'),
          instId: '0',
          children: [],
          props: {
            stepType: 'execute',
            zk: false,
          },
        }
        this.nodeinfo[this.addindex].children.push(njd)
        this.checkedId = '0'
        this.reload()
      }
    },
    handleCancelzx() {
      this.zxvisible = false
    },
    fndeal(data) {
      data.forEach((n) => {
        const obj = this.dict.find((dc) => dc.code === n.props.stepType)
        if (obj) {
          n.nodeName = '案件' + obj.name
        } else {
          n.nodeName = n.text
        }
        let timeStamp = n.props.creationTime
        let date = new Date(timeStamp * 1)
        n.creationTime = moment(date).format('YYYY-MM-DD')
        n.nodeUrl = n.props.detailUrl !== null ? n.props.detailUrl + '/' + n.props.detailInstid : ''
        n.instId = n.props.detailInstid
        n.children.forEach((i) => {
          i.nodeUrl =
            i.props.detailUrl !== null ? i.props.detailUrl + '/' + i.props.detailInstid : ''
          i.nodeName = i.text
          timeStamp = i.props.creationTime
          date = new Date(timeStamp * 1)
          i.creationTime = moment(date).format('YYYY-MM-DD')
          i.instId = i.props.detailInstid
          i.caseType = i.props.progressCode
          i.caseStage = i.props.stagecode
          if (n.props.stepType === 'progress') {
            i.props.zk = true
          }
          i.children.forEach((c) => {
            c.nodeUrl =
              c.props.detailUrl !== null ? c.props.detailUrl + '/' + c.props.detailInstid : ''
            c.nodeName = c.text
            timeStamp = c.props.creationTime
            date = new Date(timeStamp * 1)
            c.creationTime = moment(date).format('YYYY-MM-DD')
            c.instId = c.props.detailInstid
          })
        })
      })
      if (this.deleteflag !== '') {
        if (data.at(-1).props.stepType !== this.deleteflag) {
          data.push({
            id: this.deleteflag,
            nodeName: this.deleteflag === 'progress' ? '案件进展' : '案件执行',
            creationTime: moment().format('YYYY-MM-DD'),
            nodeUrl: '',
            children: [],
            props: {
              stepType: this.deleteflag,
            },
          })
        }
        this.deleteflag = ''
      }
      return data
    },
    // 初始化项目信息
    initData(caseid) {
      if (caseid) {
        // 获取项目信息
        LawService.getProgressData(caseid).then((res) => {
          if (res.data.length > 0) {
            this.caseName = res.data[0].text
            this.nodeinfo = this.fndeal(res.data)

            // 判断当前打开页面是案件进展？案件执行？执行进展？
            // 判断是否新建页面
            if (this.$route.params) {
              if (this.$route.params.id && this.$route.params.id === '0') {
                // 新建页面的时候判断 左侧阶段增加
                const parentid = this.$route.query.parentid
                const path = this.frameSrc
                this.projectStage = parentid
                if (parentid === 'finish' || parentid === 'executeFinish') {
                  // 增加结案大节点
                  const njd = {
                    id: parentid,
                    nodeName: parentid === 'finish' ? '案件结案' : '执行结案',
                    creationTime: moment().format('YYYY-MM-DD'),
                    nodeUrl: path,
                    children: [],
                    props: {
                      stepType: parentid,
                    },
                  }
                  this.nodeinfo.push(njd)
                  this.checkedId = parentid
                } else if (parentid === 'progress') {
                  // 增加进展大节点和一级、二级节点
                  const psn = this.parentstage.find((i) => i.id === this.$route.query?.cs).text
                  const sn = this.stage.find((i) => i.id === this.$route.query?.stage).text
                  const njd = {
                    id: parentid,
                    nodeName: '案件进展',
                    creationTime: moment().format('YYYY-MM-DD'),
                    nodeUrl: '',
                    children: [
                      {
                        id: 'progress_' + parentid,
                        nodeUrl: '',
                        nodeName: psn,
                        caseStage: this.caseStage,
                        caseType: this.caseType,
                        stepStatus: '0',
                        creationTime: moment().format('YYYY-MM-DD'),
                        instId: '0',
                        children: [
                          {
                            id: '0',
                            nodeUrl: path,
                            nodeName: sn,
                            stepStatus: '0',
                            creationTime: moment().format('YYYY-MM-DD'),
                            instId: '0',
                            props: {
                              stepType: 'progress',
                            },
                            children: [],
                          },
                        ],
                        props: {
                          stepType: 'progress',
                          zk: true,
                        },
                      },
                    ],
                    props: {
                      stepType: parentid,
                    },
                  }
                  this.nodeinfo.push(njd)
                  this.checkedId = '0'
                } else if (parentid === 'execute') {
                  // 增加执行大节点和一级节点
                  const sn = this.zxstage.find((i) => i.code === this.$route.query?.stage)?.name
                  const njd = {
                    id: parentid,
                    nodeName: '案件执行',
                    creationTime: moment().format('YYYY-MM-DD'),
                    nodeUrl: '',
                    children: [
                      {
                        id: '0',
                        nodeUrl: path,
                        nodeName: sn,
                        stepStatus: '0',
                        creationTime: moment().format('YYYY-MM-DD'),
                        instId: '0',
                        children: [],
                        props: {
                          stepType: parentid,
                        },
                      },
                    ],
                    props: {
                      stepType: parentid,
                    },
                  }
                  this.nodeinfo.push(njd)
                  this.checkedId = '0'
                } else {
                  // 判断属于哪个子节点下的
                  const sobj = this.nodeinfo
                  const objsz = this.nodeinfo.filter(
                    (i) => i.props.stepType === this.$route.query.zt
                  )
                  const obj = objsz.at(-1)
                  this.projectStage = obj.props.stepType
                  if (obj.props.stepType === 'progress') {
                    // 案件进展是加在子集的自己
                    const psn = this.parentstage.find((i) => i.id === this.$route.query?.cs).text
                    const sn = this.stage.find((i) => i.id === this.$route.query?.stage).text
                    const zobj = obj.children[obj.children.length - 1] // 最后一个节点是否是和当前的属于同一个类型
                    // let njd = null
                    // if (this.$route.query.ct === zobj.props.progressCode) {
                    if (this.$route.query.flag && this.$route.query.flag === '1') {
                      // 最后一个节点是否是和当前的属于同一个类型
                      const njd = {
                        id: '0',
                        nodeUrl: path,
                        nodeName: sn,
                        stepStatus: '0',
                        creationTime: moment().format('YYYY-MM-DD'),
                        instId: '0',
                        props: {
                          stepType: 'progress',
                        },
                        children: [],
                      }
                      zobj.children.push(njd)
                    } else {
                      const njd = {
                        id: 'progress_' + parentid,
                        nodeUrl: '',
                        nodeName: psn,
                        caseStage: this.caseStage,
                        caseType: this.caseType,
                        stepStatus: '0',
                        creationTime: moment().format('YYYY-MM-DD'),
                        instId: '0',
                        children: [
                          {
                            id: '0',
                            nodeUrl: path,
                            nodeName: sn,
                            stepStatus: '0',
                            creationTime: moment().format('YYYY-MM-DD'),
                            instId: '0',
                            props: {
                              stepType: 'progress',
                            },
                            children: [],
                          },
                        ],
                        props: {
                          stepType: 'progress',
                          zk: true,
                        },
                      }
                      obj.children.push(njd)
                    }
                    this.checkedId = '0'
                  } else if (obj.props.stepType === 'execute') {
                    // 执行进展是加在子集
                    const sn = this.zxstage.find((i) => i.code === this.$route.query?.stage)?.name
                    const njd = {
                      id: '0',
                      nodeUrl: path,
                      nodeName: sn,
                      stepStatus: '0',
                      creationTime: moment().format('YYYY-MM-DD'),
                      instId: '0',
                      children: [],
                      props: {
                        stepType: 'execute',
                        zk: false,
                      },
                    }
                    obj.children.push(njd)
                    this.checkedId = '0'
                  }
                }
              } else {
                // 打开展示的判断
                this.projectStage = this.zt
                if (
                  this.checkedId === '' ||
                  this.checkedId === undefined ||
                  this.checkedId === null ||
                  this.checkedId === '0'
                ) {
                  if (this.zt === 'progress' || this.zt === 'execute') {
                    const id = this.$route.params.id
                    this.fnsetcheck(id)
                  }
                }
              }
            }
          }
          this.spinning = !this.spinning
          window.addEventListener('message', this.onPageUnload)
        })
      }
    },
    fnsetcheck(id) {
      try {
        this.nodeinfo.forEach((n) => {
          if (n.props.stepType === this.zt) {
            if (this.zt === 'progress') {
              if (n.children && n.children.length > 0) {
                n.children.forEach((o) => {
                  const zco = o.children.find((z) => z.props.detailInstid === id)
                  if (zco) {
                    this.checkedId = zco.id.toString()
                    throw new Error(zco.id.toString())
                  }
                })
              }
            } else {
              if (n.children && n.children.length > 0) {
                const zco = n.children.find((z) => z.props.detailInstid === id)
                if (zco) {
                  this.checkedId = zco.id.toString()
                  throw new Error(zco.id.toString())
                }
              }
            }
          }
        })
      } catch (e) {
        console.log(this.checkedId)
      }
    },
    reload() {
      this.ifRouterView = false
      this.$nextTick(() => {
        this.ifRouterView = true
      })
    },
    foldClick() {
      this.fold = !this.fold
    },
    setChecked(index, url, projectStage, checkedId) {
      this.projectStage = projectStage
      this.checkedId = checkedId
      this.frameSrc = url
      this.reload()
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;

.fold {
  position: absolute;
  top: calc(50% - 30px);
  right: 5px;
  z-index: 2;
  width: 15px;
  height: 75px;
  padding: 0;
  border-radius: 0 10px 10px 0;
}

.audit-table {
  :global(.sd-readonly) {
    margin-bottom: 24px;
  }
}

.close-btn {
  font-size: 15px;
  color: #ffffff;
  position: absolute;
  right: 15px;
  top: 25px;
  cursor: pointer;
}

$link-icon-size: 22px;
$line-height-theme: 66px;
$theme-check: #fff;
$icon-size: 15px;

.page {
  // 表格样式
  :global(div.sd-has-table) {
    :global(.ant-table-wrapper) {
      margin-top: -8px;
    }

    :global(.ant-card-body) {
      padding: 0;

      :global(.ant-table-wrapper) {
        margin-top: -8px;
      }
    }
  }

  :global(.sd-has-table) {
    :global(.ant-table-wrapper) {
      margin-top: -8px;
    }
  }

  height: 100%;

  .left-sider {
    overflow: hidden;
    white-space: nowrap;

    :global(.ant-layout-sider-children) {
      overflow: auto;
    }
  }

  .left-sider-hidden {
    flex: 0 0 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    width: 0 !important;
    padding: 0px;
    background: rgb(255, 255, 255);

    :global(.ant-layout-sider-children) {
      overflow: hidden;
    }
  }
  .left-over {
    margin-left: 20px;
  }

  .trigger {
    display: inline-block;
    padding: 0 15px;
    vertical-align: top;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: $text-color-inverse;
    }
  }

  aside {
    overflow: auto;
  }

  :global(.sd-frame-main) {
    height: 100%;
    padding: $padding-lg;
    overflow: auto;
  }

  :global(sd-readonly) {
    margin-bottom: 24px;
  }
}

.title {
  display: inline-block;
  margin-left: -35px;
  font-weight: 600;
  line-height: inherit;
  text-align: center;
  vertical-align: top;

  > i {
    // 固定大小的logo
    /* stylelint-disable-next-line */
    font-size: 20px;
    transform: scale(10);
  }
}

// 主内容区的Card白色背景要占满
:global .sd-frame-main > .ant-card {
  min-height: 100%;
}

.header {
  background: linear-gradient(to right, #3f9bff, #0e7df6);
  height: 48px;
  line-height: 48px;
  padding: 0 20px 0 20px;

  :global .ant-menu {
    float: right;
  }

  :global(.ant-menu-item-selected) {
    color: #ffffff;
    background: #1366c1;
    border-bottom: 0 !important;
    top: 0;
  }

  :global(.ant-menu-item) {
    border-bottom: 2px solid #ffffff;
    border-bottom: 0 !important;
    top: 0;
  }

  :global(.ant-menu-item-active) {
    color: #ffffff !important;
    background: #1366c1 !important;
    border-bottom: 0 !important;
    top: 0;
  }

  .header-title {
    color: #ffffff;
    font-size: 25px;
    font-weight: 400;
    display: inline-block;
    width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.header > div:last-child {
  width: calc(100% - 200px);
}

.links {
  display: flex;
  align-items: center;
  margin: 0 $link-icon-size / 2;

  li:global(.ant-menu-item) {
    padding: 0;
  }

  i:global(.anticon) {
    padding: 0 $link-icon-size / 2;
    margin: 0;
    font-size: $link-icon-size;
    line-height: $layout-header-height;
    vertical-align: middle;

    &:hover {
      // 悬浮的颜色，与主题无关
      /* stylelint-disable-next-line */
      background-color: rgba(0, 0, 0, 0.2);
    }
  }
}

.tools {
  display: flex;
  float: right;
}

.headerbadge {
  bottom: $line-height-theme / 6;
  left: -$link-icon-size / 2 - 5;
}

.sider-content {
  padding: 0 0;

  .sider-title {
    position: relative;
    margin-left: 23px;

    i {
      color: #1890ff;
      position: absolute;
      font-size: 18px;
      left: -27px;
      top: 3px;
    }

    font-weight: bold;
  }

  .sider-li {
    :global(.ant-timeline-item-content) {
      margin: 0 0 0 15px;
    }

    :global(.ant-timeline-item-head-blue) {
      color: #9f9f9f;
      border-color: #9f9f9f;
      background-color: #9f9f9f;
      top: 4px;
      left: 3px;
      width: 3px;
      height: 3px;
    }

    :global(.ant-timeline-item-tail) {
      height: calc(100% - -18px);
      border-left: 2px solid #f5f5f5;
      display: none;
    }
  }

  .sider-title-div-first {
    padding: 10px 0 10px 20px;
    // margin-bottom: 10px;
    // border-bottom: 2px solid #e8e8e8;
  }

  .sider-title-div {
    padding: 10px 0 10px 20px;
    // margin-bottom: 10px;
    border-top: 2px solid #e8e8e8;
    // border-bottom: 2px solid #e8e8e8;
  }
  :global .siderTitlechildxm {
    border-bottom: 2px solid #e8e8e8;
  }

  ul {
    margin-left: 0;
    padding-bottom: 5px;
  }

  .sider-ul-div {
    padding: 13px 0px 0px 12px;
    width: 100%;
    margin: 3px auto;
    border-radius: 0px;
    cursor: pointer;

    :global(.ant-timeline-item) {
      padding: 0;
      margin-left: 3px;
    }
  }

  .node-readonly {
    cursor: normal;
    color: #b6b6b6;
  }
  :global(.checkedtr) {
    color: #2db7f5;
  }
  .checked {
    background: linear-gradient(to right, #13c2c2, #2db7f5);
    color: #fff;

    :global(.ant-timeline-item-head-blue) {
      background-color: #ffffff;
      border-color: #ffffff !important;
      top: 4px;
      left: 3px;
      width: 3px;
      height: 3px;
    }
  }

  :global(.checkedpro) {
    color: #2db7f5;
  }

  :global(.nocheckdpro) {
    color: #7c7c7c;
  }
  .handstyle {
    cursor: pointer;
  }
  :global(.ant-timeline-item-last .ant-timeline-item-tail) {
    display: none;
  }

  .timeline {
    min-height: 150px;
  }
}

:global(.ant-tabs) {
  overflow-y: auto;
}

.rightfrm {
  height: 100%;
  width: 100%;
}

.change-status {
  margin-left: 140px;
  font-size: 20px !important;
  color: #28baeb !important;
  cursor: pointer;
}
.change-statusp {
  margin-left: 12px;
  font-size: 20px !important;
  color: #28baeb !important;
  cursor: pointer;
}
.lawprogress {
  :global(.skeleton-box_sd-webflow-panel_webflow) {
    width: auto;
    height: auto;
  }
  :global(.panel_sd-webflow-panel_webflow .skeleton-box_sd-webflow-panel_webflow) {
    height: 90%;
    width: 80%;
  }
}

.deletePro {
  color: #1890ff;
  font-size: 20px;
}
.lawprogress {
  position: relative;
  // :global .ant-layout > .ant-layout-header {
  //   :global .titlepoint_sd-header_common {
  //     display: none;
  //   }
  // }
  :global(.webflow_sd-webflow_webflow > .ant-layout-header) {
    :global .titlepoint_sd-header_common {
      display: none;
    }
  }
  :global(.panel_sd-webflow-panel_webflow > .ant-layout-header) {
    position: absolute;
    :global .titlepoint_sd-header_common {
      position: absolute !important;
    }
  }
}
.casecnodediv {
  border-top: 1px solid #e8e8e8;
}
.casecnode {
  width: 150px;
  :global .ant-timeline-item-head-blue {
    background-image: url('./jt.png');
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: 100%;
    width: 20px !important;
    height: 20px !important;
    background-color: initial !important;
    border: none !important;
    top: -5px !important;
    left: -2px !important;
  }
}
</style>