gxjh-ywtb/src/views/matters_guidance/mian_body/MainBody.vue

<template>
  <div  v-loading="loading"  element-loading-text="数据加载中"  class="right_content_info"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(3, 30, 57, 0.8)">
  <div id="mainBody">
    <div class="left">
        <span class="singleButton top_button">
          <span class="little_span role_button" :role_button_code="unitList[0].role_button_code" :class="[unitList[0].chosen?'little_active':'']" @click="unitChange(unitList[0])">{{unitList[0].name}}</span>
        </span>
      <span class="singleButton middle_button">
          <span class="little_span role_button" :role_button_code="unitList[1].role_button_code" :class="[unitList[1].chosen?'little_active':'']" @click="unitChange(unitList[1])">{{unitList[1].name}}</span>
        </span>
    </div>
    <div class="right">
      <div class="right_header">
        <div class="role_button" :role_button_code="item.role_button_code" :class="[item.chosen?'botton_top_chosen':'botton_top']" v-for="(item,index) in typeList" :key="index" @click="typeChange(item)">{{item.name}}</div>
      </div>
      <div class="right_content">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-row :gutter="20">
            <el-col :span="20">
              <div class="grid-content bg-purple">
              <el-form-item label="事项名称">
                <el-input v-model="form.name" placeholder="" clearable></el-input>
              </el-form-item>
              <el-form-item label="责任部门">
                <el-input v-model="form.operationUnit" placeholder="" clearable></el-input>
              </el-form-item>
                <el-form-item label="类型">
                  <el-select v-model="form.commitType" placeholder="请选择">
                    <el-option
                        v-for="item in commitTypeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
            </div>
            </el-col>

            <el-col :span="4"><div class="grid-content bg-purple">
              <el-form-item>
                <el-button type="primary" class="role_button" role_button_code="8f55b710-6f34-4722-9666-582f8f04ad01" @click="onSubmitSearch">查询</el-button>
                <el-button class="role_button" role_button_code="4a2fbabd-45db-4408-8268-b3dbd5617b2a" type="primary" @click="downloadModel()">导入模板</el-button>
                <el-upload  style="display: inline-block;margin-left:8px"
                           class="upload-demo role_button" role_button_code="df9dcabf-872c-486c-a7a7-a82b8d3d5f55"
                            action="http://10.81.66.9:9250/ywtb/ywtbMatter_upload"
                           :show-file-list="showList"
                           :onError="uploadError"
                           :onSuccess="uploadSuccess"
                           :beforeUpload="beforeAvatarUpload"
                           :file-list="fileList">
                  <el-button class="role_button" role_button_code="df9dcabf-872c-486c-a7a7-a82b8d3d5f55"   type="primary">点击上传</el-button>
                </el-upload>

              </el-form-item>
            </div></el-col>
          </el-row>
        </el-form>
        <div class="table_num_div">
          <span>{{matterGuidanceObject['matterGuidanceFirstLevel']|unitType}}{{matterGuidanceObject['matterGuidanceSecondLevel']}}总计{{totalItem}}个事项,{{totalSituation}}个情形</span>
        </div>
        <div class="table_header_div">
          <el-button class="table_icon role_button"  role_button_code="52ada3ed-4b16-4421-8aaa-4219c4a0e7f0" @click="showDetail('view')" icon="el-icon-tickets"></el-button>
          <el-button class="table_icon role_button"  role_button_code="35710e02-5598-4f48-b8ef-e66a25d3210b" @click="showDetail('add')" icon="el-icon-plus"></el-button>
          <el-button class="table_icon role_button"  role_button_code="c1a11ea8-5be8-4798-915b-122822e1218e" @click="showDetail('edit')" icon="el-icon-edit"></el-button>
          <el-button class="table_icon role_button"  role_button_code="49310ab8-b01c-4b4a-bd2f-a4060a8a4e81" @click="showDetail('delete')" icon="el-icon-delete"></el-button>
        </div>
        <el-table ref="Table"  @selection-change="change" :fit='true'
                  :data="DataMain" :height="tableHeight"     row-key="RN"
                  lazy
                  :load="load"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column
              type="selection"
              :selectable ='checkboxInit'
              width="55">
          </el-table-column>
          <el-table-column prop="NAME" label="事项名称">
            <template slot-scope="scope">
              <span>{{scope.row.NAME.length>30?scope.row.NAME.substr(0,30)+"...":scope.row.NAME}}</span>
              <span class="wb_button" v-if="(scope.row.WB=='1')">网办</span>
              <span class="qcwb_button" v-if="(scope.row.QCWB=='1')">全程网办</span>
              <span class="hb_button" v-if="(scope.row.HB=='1')">好办</span>
              <span class="kb_button" v-if="(scope.row.KB=='1')">快办</span>
            </template>
          </el-table-column>
          <el-table-column prop="TYPE" label="事项类型" width="150">
          </el-table-column>
          <el-table-column prop="UNIT_NAME" label="责任部门" width="200">
          </el-table-column>
          <el-table-column prop="COOPERATION_DEPARTMENT" label="配合部门"  width="350">
            <template slot-scope="scope">
              <span v-if="scope.row.hasChildren">{{scope.row.COOPERATION_DEPARTMENT}}</span>
              <span class="guide_button" v-if="!scope.row.hasChildren" :class="[scope.row.COOPERATION_DEPARTMENT == '0'?'show_disable':'']"
                         type="primary"
                         size="mini"
                         @click="showDialog(scope.row.COOPERATION_DEPARTMENT,scope.row.NAME,scope.row.TITLE)">指南
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="paginations.currentPage"
            :page-sizes="paginations.pageSizes"
            :page-size="paginations.pageSize"
            layout="prev, pager, next,sizes,jumper"
            :total="paginations.totalCount"
        />
      </div>
    </div>

    <el-dialog title="办件指南" :visible.sync="dialogFormVisible" :width="dialogFormWidth"  :top="dialogFormTop">
      <div class="guide_body">
        <h1 class="item_title">{{ dialog_item_title }}</h1>
        <h3 class="situation_title">{{dialog_situation_title}}</h3>
        <div class="step_menu">
          <div class="step_top">
            <div class="single_step">
              <div class="single_button" :class="[stepList[0].chosen?'single_button_active':'']" @click="chooseStep(stepList[0].id)">
                <span class="single_num">{{stepList[0].id}}</span>
              </div>
            </div>
            <div class="line">
              <el-divider></el-divider>
            </div>
            <div class="single_step">
              <div class="single_button" :class="[stepList[1].chosen?'single_button_active':'']" @click="chooseStep(stepList[1].id)">
                <span class="single_num">{{stepList[1].id}}</span>
              </div>
            </div>
            <div class="line">
              <el-divider></el-divider>
            </div>
            <div class="single_step">
              <div class="single_button" :class="[stepList[2].chosen?'single_button_active':'']" @click="chooseStep(stepList[2].id)">
                <span class="single_num">{{stepList[2].id}}</span>
              </div>
            </div>
            <div class="line">
              <el-divider></el-divider>
            </div>
            <div class="single_step">
              <div class="single_button" :class="[stepList[3].chosen?'single_button_active':'']" @click="chooseStep(stepList[3].id)">
                <span class="single_num">{{stepList[3].id}}</span>
              </div>
            </div>
            <div class="line">
              <el-divider></el-divider>
            </div>
            <div class="single_step">
              <div class="single_button" :class="[stepList[4].chosen?'single_button_active':'']" @click="chooseStep(stepList[4].id)">
                <span class="single_num">{{stepList[4].id}}</span>
              </div>
            </div>
            <div class="line">
              <el-divider></el-divider>
            </div>
            <div class="single_step">
              <div class="single_button" :class="[stepList[5].chosen?'single_button_active':'']" @click="chooseStep(stepList[5].id)">
                <span class="single_num">{{stepList[5].id}}</span>
              </div>
            </div>
            <div class="line">
              <el-divider></el-divider>
            </div>
            <div class="single_step">
              <div class="single_button" :class="[stepList[6].chosen?'single_button_active':'']" @click="chooseStep(stepList[6].id)">
                <span class="single_num">{{stepList[6].id}}</span>
              </div>
            </div>
            <div class="line">
              <el-divider></el-divider>
            </div>
            <div class="single_step">
              <div class="single_button" :class="[stepList[7].chosen?'single_button_active':'']" @click="chooseStep(stepList[7].id)">
                <span class="single_num">{{stepList[7].id}}</span>
              </div>
            </div>
          </div>
          <div class="step_bottom">
            <div class="single_title_left">
              <span class="single_remarks">{{stepList[0].name}}</span>
            </div>
            <div class="single_title">
              <span class="single_remarks">{{stepList[1].name}}</span>
            </div>
            <div class="single_title">
              <span class="single_remarks">{{stepList[2].name}}</span>
            </div>
            <div class="single_title">
              <span class="single_remarks">{{stepList[3].name}}</span>
            </div>
            <div class="single_title">
              <span class="single_remarks">{{stepList[4].name}}</span>
            </div>
            <div class="single_title">
              <span class="single_remarks">{{stepList[5].name}}</span>
            </div>
            <div class="single_title">
              <span class="single_remarks">{{stepList[6].name}}</span>
            </div>
            <div class="single_title_right">
              <span class="single_remarks">{{stepList[7].name}}</span>
            </div>
          </div>
        </div>

        <div class="basic_info">
          <table v-if="chosenStep=='1'" border="1" :key="1" class="basic_table">
            <tr class="basic_tr" v-for="(item,index) in dialogLeftList" :key="index">
              <td class="td_title">{{item.title}}</td>
              <td class="td_content">
                <span  v-if="showEdit">{{item.content}}</span>
                <span v-else><el-input type="textarea" v-model="item.content"/></span>
              </td>
              <td class="td_title">{{dialogRightList[index].title}}</td>
              <td class="td_content">
                <span  v-if="showEdit">{{dialogRightList[index].content}}</span>
                <span v-else><el-input type="textarea" v-model="dialogRightList[index].content"/></span>
              </td>
            </tr>
            <tr class="basic_tr" v-for="(item,index) in dialogBottomList" :key="index">
              <td colspan="1" class="td_bottom_title">{{item.title}}</td>
              <td colspan="3" class="td_bottom_content">
                <span  v-if="showEdit">{{item.content}}</span>
                <span v-else><el-input type="textarea" v-model="item.content"/></span>
              </td>
            </tr>
          </table>
          <div v-else-if="chosenStep=='2'" :key="2" class="step_info">
            <div class="single_sqlc"  v-for="(item,index) in dialog_sqlc_List" :key="index">
              <div class="sqlc_title">
                <span>{{item.title}}:</span>
              </div>
              <div class="sqlc_content">
                <span v-if="showEdit">{{item.content}}</span>
                <span v-else><el-input type="textarea" rows="4" v-model="item.content"/></span>
              </div>
            </div>
          </div>
          <div v-else-if="chosenStep=='3'" :key="3" class="step_info">
            <div class="single_sqlc"  v-for="(item,index) in dialog_bllc_List" :key="index">
              <div class="sqlc_title">
                <span>{{item.title}}:</span>
              </div>
              <div class="sqlc_content">
                <span v-if="showEdit">{{item.content}}</span>
                <span v-else><el-input type="textarea" rows="4" v-model="item.content"/></span>
              </div>
            </div>
          </div>
          <div v-else-if="chosenStep=='4'" :key="4" class="step_info">
            <div class="single_sqlc"  v-for="(item,index) in dialog_cjcwsl_List" :key="index">
              <div class="sqlc_title">
                <span>{{item.title}}:</span>
              </div>
              <div class="sqlc_content">
                <span v-if="showEdit">{{item.content}}</span>
                <span v-else><el-input type="textarea" rows="4" v-model="item.content"/></span>
              </div>
            </div>
          </div>
          <div v-else-if="chosenStep=='5'" :key="5" class="step_info">
            <div class="single_sqlc"  v-for="(item,index) in dialog_slyj_List" :key="index">
              <div class="sqlc_title">
                <span>{{item.title}}:</span>
              </div>
              <div class="sqlc_content">
                <span v-if="showEdit">{{item.content}}</span>
                <span v-else><el-input type="textarea" rows="4" v-model="item.content"/></span>
              </div>
            </div>
          </div>
          <div v-else-if="chosenStep=='6'" :key="6" class="step_info">
            <div class="single_sqlc"  v-for="(item,index) in dialog_flnr_List" :key="index">
              <div class="sqlc_title">
                <span>{{item.title}}:</span>
              </div>
              <div class="sqlc_content">
                <span v-if="showEdit">{{item.content}}</span>
                <span v-else><el-input type="textarea" rows="4" v-model="item.content"/></span>
              </div>
            </div>
          </div>
          <div v-else-if="chosenStep=='7'" :key="7" class="step_info">
            <div class="single_sqlc"  v-for="(item,index) in dialog_spsf_List" :key="index">
              <div class="sqlc_title">
                <span>{{item.title}}:</span>
              </div>
              <div class="sqlc_content">
                <span v-if="showEdit">{{item.content}}</span>
                <span v-else><el-input type="textarea" rows="4" v-model="item.content"/></span>
              </div>
            </div>
          </div>
          <div v-else :key="8" class="step_info">
            <div class="single_sqlc"  v-for="(item,index) in dialog_qlyw_List" :key="index">
              <div class="sqlc_title">
                <span>{{item.title}}:</span>
              </div>
              <div class="sqlc_content">
                <span v-if="showEdit">{{item.content}}</span>
                <span v-else><el-input type="textarea" rows="4" :autosize="{minRows:4,maxRows:8}" v-model="item.content"/></span>
              </div>
            </div>
          </div>
        </div>


      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  </div>
</template>

<script>
//import {autoRoll,autoChange} from '../../../scroll'
import {MessageBox} from "element-ui";
import {mapMutations, mapState} from "vuex";
import selectConfigModuleByRole from "@/role_button";
let rolltimer = ""; // 自动滚动的定时任务
let changetimer = ""; // 自动切换的定时任务
export default {
  name: "MainBody",
  data(){
    return{
      fileList:[],
      showList:false,
      showEdit:true,
      total_unit:'住建委',
      totalItem:0,
      totalSituation:0,
      commitTypeList:[
        {
          label:'全部',
          value:'',
        },
        {
          label:'网办',
          value:'1',
        },
        {
          label:'好办',
          value:'2',
        },
        {
          label:'快办',
          value:'3',
        },
        {
          label:'全程网办',
          value:'4',
        },
      ],
      typeList:[
        {
          id:'1',
          code:'01',
          name:'行政许可',
          chosen:false,
          role_button_code:'d2087ef5-a893-4256-a660-5fda9b44bd28'
        },
        {
          id:'2',
          code:'07',
          name:'行政确认',
          chosen:false,
          role_button_code:'c859f1bd-4512-4f76-8314-7e1254705b88'
        },
        {
          id:'3',
          code:'06',
          name:'行政奖励',
          chosen:false,
          role_button_code:'921747d5-36cf-448e-a26e-4e59990a4519'
        },
        {
          id:'4',
          code:'08',
          name:'行政征收',
          chosen:false,
          role_button_code:'4ecf4b5c-ad89-480a-8ff0-c02d5b228fb3'
        },
        {
          id:'5',
          code:'49',
          name:'其他权利',
          chosen:false,
          role_button_code:'72bb9c6b-09e9-42bd-8999-d50ca85a1507'
        },
        {
          id:'6',
          code:'58',
          name:'公共服务',
          chosen:false,
          role_button_code:'1dc72435-7014-4693-8017-7dace08852c8'
        },
      ],
      unitList:[
        {
          id:'1',
          code:'1',
          name:'住建委',
          chosen:true,
          role_button_code:'595a5095-6cbc-4974-a32f-6fb27ee60a2f'
        },
        {
          id:'2',
          code:'2',
          name:'房管局',
          chosen:false,
          role_button_code:'7b7b0c44-2a2b-4e16-82d4-f5defaf08a6b'
        },
      ],
      unit_name_type:'1',
      type:'',
      form: {
        name: '',
        operationUnit: '',
        commitType:''
      },
      paginations:{
        currentPage:1, //当前页
        totalCount:0, //总数
        pageSize:10, //一页显示多少
        pageSizes:[10,20,50], //一页显示多少
      },
      multipleSelection: [],
      DataMain:[],
      tableHeight: 0,
      stepList:[
        {
          id:'1',
          name:'基础信息',
          chosen:true
        },
        {
          id:'2',
          name:'申请流程',
          chosen:false
        },
        {
          id:'3',
          name:'办理流程',
          chosen:false
        },
        {
          id:'4',
          name:'常见错误示例',
          chosen:false
        },
        {
          id:'5',
          name:'设立依据',
          chosen:false
        },
        {
          id:'6',
          name:'法律内容',
          chosen:false
        },
        {
          id:'7',
          name:'审批收费',
          chosen:false
        },
        {
          id:'8',
          name:'权利义务',
          chosen:false
        },
      ],
      //模态框参数
      dialogFormWidth:'60%',
      dialogFormTop:'10vh',
      dialogFormVisible: false,
      dialogLeftList:[
        {
          id:'1',
          code:'matter_type',
          title:'事项类型',
          content:''
        },
        {
          id:'2',
          code:'pt_code',
          title:'平台编码',
          content:''
        },
        {
          id:'3',
          code:'sszt',
          title:'实施主体',
          content:''
        },
        {
          id:'4',
          code:'ssztbm',
          title:'实施主体编码',
          content:''
        },
        {
          id:'5',
          code:'ywblxbm',
          title:'业务办理项编码',
          content:''
        },
        {
          id:'6',
          code:'tbfw',
          title:'通办范围',
          content:''
        },
        {
          id:'7',
          code:'matter_state',
          title:'事项状态',
          content:''
        },
        {
          id:'8',
          code:'ql_ly',
          title:'权力来源',
          content:''
        },
        {
          id:'9',
          code:'sfzc_yybl',
          title:'是否支持预约办理',
          content:''
        },
        {
          id:'10',
          code:'sfzc_wlkd',
          title:'是否支持物流快递',
          content:''
        },
        {
          id:'11',
          code:'zjfw',
          title:'中介服务',
          content:''
        },
        {
          id:'12',
          code:'yxxt',
          title:'运行系统',
          content:''
        },
        {
          id:'13',
          code:'fdbjsx',
          title:'法定办结时限',
          content:''
        },
        {
          id:'14',
          code:'cnbjsx',
          title:'承诺办结时限',
          content:''
        },
        {
          id:'15',
          code:'ckjs',
          title:'窗口接收',
          content:''
        },
        {
          id:'16',
          code:'wsjs',
          title:'网上接收',
          content:''
        },
        {
          id:'17',
          code:'xhjs',
          title:'信函接收',
          content:''
        },
        {
          id:'18',
          code:'ckjs_sj',
          title:'窗口接收时间',
          content:''
        },
      ],
      dialogRightList:[
        {
          id:'1',
          code:'bj_type',
          title:'办件类型',
          content:''
        },
        {
          id:'2',
          code:'BASIC_CODE',
          title:'基本编码',
          content:''
        },
        {
          id:'3',
          code:'ssztxz',
          title:'实施主体性质',
          content:''
        },
        {
          id:'4',
          code:'lbjg',
          title:'联办机构',
          content:''
        },
        {
          id:'5',
          code:'fwdx',
          title:'服务对象',
          content:''
        },
        {
          id:'6',
          code:'xscj',
          title:'行使层级',
          content:''
        },
        {
          id:'7',
          code:'zgbm_name',
          title:'主管部门名称',
          content:''
        },
        {
          id:'8',
          code:'sfjz_zwdt',
          title:'是否进驻政务大厅',
          content:''
        },
        {
          id:'9',
          code:'sfzc_wszf',
          title:'是否支持网上支付',
          content:''
        },
        {
          id:'10',
          code:'sfzc_zdbl',
          title:'是否支持自助终端办理',
          content:''
        },
        {
          id:'11',
          code:'slxz',
          title:'数量限制',
          content:''
        },
        {
          id:'12',
          code:'dbsdd_cs',
          title:'到场次数',
          content:''
        },
        {
          id:'13',
          code:'fdbjsxsm',
          title:'法定办结时限说明',
          content:''
        },
        {
          id:'14',
          code:'cnbjsxsm',
          title:'承诺办结时限说明',
          content:''
        },
        {
          id:'15',
          code:'ckzx',
          title:'窗口咨询',
          content:''
        },
        {
          id:'16',
          code:'dhzx',
          title:'电话咨询',
          content:''
        },
        {
          id:'17',
          code:'wszx',
          title:'网上咨询',
          content:''
        },
        {
          id:'18',
          code:'dzyjzx',
          title:'电子邮件咨询',
          content:''
        },
      ],
      dialogBottomList:[
        {
          id:'1',
          code:'ckst',
          title:'窗口投诉',
          content:''
        },
        {
          id:'2',
          code:'dhst',
          title:'电话投诉',
          content:''
        },
        {
          id:'3',
          code:'wsts',
          title:'网上投诉',
          content:''
        },
        {
          id:'4',
          code:'dzyjts',
          title:'电子邮件投诉',
          content:''
        },
        {
          id:'5',
          code:'xhts',
          title:'信函投诉',
          content:''
        },
        {
          id:'6',
          code:'rcyy',
          title:'日常用语',
          content:''
        },
        {
          id:'7',
          code:'mxzrr_sxztfl',
          title:'面向自然人事项主题分类',
          content:''
        },
        {
          id:'8',
          code:'mxfr_sxztfl',
          title:'面向法人事项主题分类',
          content:''
        },
        {
          id:'9',
          code:'cjdx',
          title:'许可/确认/给付/征收/奖励/服务/裁决对象',
          content:''
        },
        {
          id:'10',
          code:'ws_blsd',
          title:'网上办理深度',
          content:''
        },
        {
          id:'11',
          code:'syfw',
          title:'适用范围',
          content:''
        },
        {
          id:'12',
          code:'zjfwyj',
          title:'中介服务依据',
          content:''
        },
        {
          id:'13',
          code:'cjtj',
          title:'许可/确认/给付/征收/奖励/服务/裁决条件',
          content:''
        },
        {
          id:'14',
          code:'cjnr',
          title:'许可/确认/给付/征收/奖励/服务/裁决内容',
          content:''
        },
        {
          id:'15',
          code:'qxhf',
          title:'权限划分',
          content:''
        },
      ],
      dialog_sqlc_List:[
        {
          id:'1',
          code:'sltj',
          title:'受理条件',
          content:''
        },
        {
          id:'2',
          code:'sqqx',
          title:'申请期限',
          content:''
        },
        {
          id:'3',
          code:'tbxz',
          title:'填报须知',
          content:''
        },
        {
          id:'4',
          code:'sqcl_xsbz',
          title:'申请材料形式标准',
          content:''
        },
        {
          id:'5',
          code:'sqwsmc',
          title:'申请文书名称',
          content:''
        },
      ],
      dialog_bllc_List:[
        {
          id:'1',
          code:'slqx',
          title:'受理期限',
          content:''
        },
        {
          id:'2',
          code:'sfsqbl',
          title:'是否社区办理',
          content:''
        },
        {
          id:'3',
          code:'bxxcbl_yysm',
          title:'必须现场办理原因说明',
          content:''
        },
        {
          id:'4',
          code:'blfs',
          title:'办理方式',
          content:''
        },
        {
          id:'5',
          code:'tbcx',
          title:'特别程序',
          content:''
        },
      ],
      dialog_cjcwsl_List:[
        {
          id:'1',
          code:'cjcwsl',
          title:'常见错误示例',
          content:''
        },
      ],
      dialog_slyj_List:[
        {
          id:'1',
          code:'slyj',
          title:'设立依据',
          content:''
        },
      ],
      dialog_flnr_List:[
        {
          id:'1',
          code:'flnr',
          title:'法律内容',
          content:''
        },
        {
          id:'2',
          code:'flzr',
          title:'法律责任',
          content:''
        },
      ],
      dialog_spsf_List:[
        {
          id:'1',
          code:'sfsf',
          title:'是否收费',
          content:''
        },
      ],
      dialog_qlyw_List:[
        {
          id:'1',
          code:'sqrql',
          title:'申请人权力',
          content:''
        },
        {
          id:'2',
          code:'sqryw',
          title:'申请人义务',
          content:''
        },
      ],
      chosenStep:'1',
      rollPx:1,
      refreshTime:5,
      rollTime:5,
      autoPlay:true,
      globalList:[
        {
          id:'1',
          name:'dialogLeftList'
        },
        {
          id:'2',
          name:'dialogRightList'
        },
        {
          id:'3',
          name:'dialogBottomList'
        },
        {
          id:'4',
          name:'dialog_sqlc_List'
        },
        {
          id:'5',
          name:'dialog_bllc_List'
        },
        {
          id:'6',
          name:'dialog_cjcwsl_List'
        },
        {
          id:'7',
          name:'dialog_slyj_List'
        },
        {
          id:'8',
          name:'dialog_flnr_List'
        },
        {
          id:'9',
          name:'dialog_spsf_List'
        },
        {
          id:'10',
          name:'dialog_qlyw_List'
        },
      ],
      open: true,
      close:false,
      dialog_item_title:'',
      dialog_situation_title:'',
      loading:false,
    }
  },
  computed:{
    ...mapState({
      matterGuidanceObject:'matterGuidance',
      reFresh:'matterGuidanceRefresh'
    })
  },
  filters:{
    unitType(state){
      let obj = {
        '1':'住建委',
        '2':'房管局',
      }
      return obj[state]
    }
  },
  mounted() {
    selectConfigModuleByRole(this);
    if(this.reFresh){
      this.matterGuidanceSingleChange([
        {
          name:'matterGuidanceFirstLevel',
          value:'1'
        },
        {
          name:'matterGuidanceSecondLevel',
          value:''
        },
        {
          name:'matterGuidanceThirdLevel',
          value:''
        },
      ])
    }
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight - this.$refs.Table.$el.offsetTop - 150;
      // 监听窗口大小变化
      let ZJWself = this;
      window.onresize = function() {
        ZJWself.tableHeight = window.innerHeight - self.$refs.Table.$el.offsetTop - 150;
      }
    });
    // this.autoRoll();
    // this.autoChange();
  },
  methods:{
    uploadError (response, file, fileList) {
      this.loading=false;
      console.log('上传失败，请重试！',response, file, fileList)
    },
    uploadSuccess (response, file, fileList) {
      console.log('上传文件', response,file, fileList)
      if(response.msg[0].success =='true'){
        this.loading=false;
        MessageBox.alert('上传文件成功', '提示', {
          confirmButtonText: '确定'
        });
      }else{
        this.loading=false;
        MessageBox.alert(response.msg[0].error, '提示', {
          confirmButtonText: '确定'
        });
      }
    },
    // 上传前对文件的大小的判断
    beforeAvatarUpload (file) {
      this.loading=true;
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension && !extension2) {
        this.loading=false;
        MessageBox.alert('上传模板只能是 xls、xlsx 格式!', '提示', {
          confirmButtonText: '确定'
        });
      }
      if (!isLt2M) {
        this.loading=false;
        MessageBox.alert('上传模板大小不能超过 10MB!', '提示', {
          confirmButtonText: '确定'
        });
      }
      return extension || extension2  && isLt2M
    },
    downloadModel(){
      let url ='http://10.81.69.64/files/ywtb/事项与指南导入模板.xlsx';
      const a = document.createElement('a')
      a.href = url;
      a.style.display="none";
      //测试链接console.log(a.href)
      a.download = '证照模板'  // 下载文件的名字
      document.body.appendChild(a)
      a.click();
      document.body.removeChild(a);
    },
    onSubmitSearch(){
      this.paginations.currentPage = 1;
      this.onSubmit();
    },
    unitChange(item){
      this.matterGuidanceSingleChange([
        {
          name:'matterGuidanceFirstLevel',
          value:item.code
        },
        {
          name:'matterGuidanceSecondLevel',
          value:''
        },
        {
          name:'matterGuidanceThirdLevel',
          value:''
        },
      ])
    },
    typeChange(item){
      this.matterGuidanceSingleChange([
        {
          name:'matterGuidanceSecondLevel',
          value:item.name
        },
        {
          name:'matterGuidanceThirdLevel',
          value:''
        },
      ])
    },
    selectChange:function (){
      this.form.commitType = this.matterGuidanceObject['matterGuidanceThirdLevel'];
    },
    unitChangeOrigion:function(code){
      for(let i=0;i<this.unitList.length;i++){
        if(code==this.unitList[i].code){
          this.unitList[i].chosen=true;
        }else{
          this.unitList[i].chosen=false;
        }
      }

    },
    typeChangeOrigion:function(val){
      for(let i=0;i<this.typeList.length;i++){
        if(val==this.typeList[i].name){
          this.typeList[i].chosen=true;
        }else{
          this.typeList[i].chosen=false;
        }
      }
    },
    onSubmit(){
      //this.toClose();
      this.$request({
        url:'/YWTBApi/getMatterCount',
        method:'post',
        data:{
          "TYPE":this.matterGuidanceObject['matterGuidanceSecondLevel'],
          "ORGANIZATION":this.matterGuidanceObject['matterGuidanceFirstLevel'],
          "DATA_TYPE":this.form.commitType,
          "MATTER_NAME":this.form.name,
          "RESPONSIBLE_DEPARTMENT":this.form.operationUnit,
          "appkey":localStorage.getItem("ywtb_userkeycode")
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows[0];
        this.totalItem =dataArr.MATTER_COUNT;
        this.totalSituation =dataArr.ATTRIBUTE_COUNT;
      })
      this.$request({
        url:'/ywtb/queryMatterPageList',
        method:'post',
        data:{
          "NAME":this.form.name,
          "TYPE":this.matterGuidanceObject['matterGuidanceSecondLevel'],
          "BJ_TYPE":this.form.commitType,
          "UNIT_NAME_TYPE":this.matterGuidanceObject['matterGuidanceFirstLevel'],
          "RESPONSIBLE_DEPARTMENT":this.form.operationUnit,
          "pageSize":this.paginations.pageSize,
          "pageIndex":this.paginations.currentPage,
          "appkey":localStorage.getItem("ywtb_userkeycode")
        }
      }).then(response => {
        let useData= []
        let dataArr = response.data.msg[0].Rows;
        for(let i=0;i<dataArr.length;i++){
          let tempdata = {
            UNIT_CODE: dataArr[i].UNIT_CODE,
            BASE_CODE: dataArr[i].BASE_CODE,
            UUID_MAIN: dataArr[i].UUID_MAIN,
            SITUATION: dataArr[i].SITUATION,
            QCWB: dataArr[i].QCWB,
            HB:  dataArr[i].HB,
            KB:  dataArr[i].KB,
            WB: dataArr[i].WB,
            UUID_DETAIL: dataArr[i].UUID_DETAIL,
            COOPERATION_DEPARTMENT: dataArr[i].COOPERATION_DEPARTMENT,
            TYPE: dataArr[i].TYPE,
            UNIT_NAME: dataArr[i].UNIT_NAME,
            NAME: dataArr[i].NAME,
            RN: dataArr[i].RN + dataArr[i].UUID_MAIN,
            hasChildren: true
          }
          useData.push(tempdata);
        }
        this.DataMain = useData;
        this.paginations.totalCount =response.data.msg[0].TotalRowCount;
      })
    },
    checkboxInit(row){
      if(row.hasChildren){
        return 1;
      }else{
        return 0;
      }
    },
    load(tree, treeNode, resolve) {
      //this.dialog_item_title = tree.NAME;
      this.$request({
        url:'/ywtb/queryMatterAttributeByBaseCode',
        method:'post',
        data:{
          "BASE_CODE":tree.BASE_CODE,
          "appkey":localStorage.getItem("ywtb_userkeycode")
        }
      }).then(response => {
        if(response == undefined){
          resolve([]);
          return
        }else{
          for(let i=0;i<response.data.msg[0].Rows.length;i++){
            response.data.msg[0].Rows[i].RN =response.data.msg[0].Rows[i].MARK_UUID + i;
            response.data.msg[0].Rows[i].TITLE = tree.NAME;
          }
          resolve(response.data.msg[0].Rows);
        }
      })

    },
    goDetail:function(){
      this.$router.push({
        name:'detailInfo',
      })
    },
    change(val) {
      this.multipleSelection = val;
    },
    // 鼠标进入
    mouseEnter() {
      // if(this.dialogFormVisible){
      //   return
      // }else{
      //   // 鼠标进入停止滚动和切换的定时任务
      //   // console.log("jinlailai");
      //   this.autoRoll(true);
      //   this.autoChange(true);
      // }
    },
    // 鼠标离开
    mouseLeave() {
      // if(this.dialogFormVisible){
      //   return
      // }else {
      //   // 开启
      //   this.autoRoll();
      //   this.autoChange();
      // }
    },
    handleSizeChange(size) {
     // console.log(size);
      this.paginations.pageSize = size
      this.paginations.currentPage = 1;
      this.onSubmit();
    },
    handleCurrentChange(page) {
      this.paginations.currentPage = page
      this.onSubmit();
    },
    showDetail(detailType){
     // console.log(detailType);
      if (detailType === 'view'||detailType === 'edit') {
        let selection = this.$refs.Table.selection;
        if (selection.length != 1) {
          MessageBox.alert('请选择一条数据进行操作', '提示', {
            confirmButtonText: '确定'
          });
        }else{
          this.$router.push({
            name: 'detailInfo',
            query: {
              base_code:selection[0].BASE_CODE,
              name: selection[0].NAME,
              detailType: detailType,
              detailData: JSON.stringify(selection[0])
            }
          });
        }
      }else if(detailType === 'add'){
            this.$router.push({
              name: 'detailInfo',
              query:{
                base_code:'',
                name:'新增',
                detailType:detailType,
                detailData:''
              }
            });
        }else if (detailType === 'delete') {
        let selection = this.$refs.Table.selection;
        if (selection.length != 1) {
          MessageBox.alert('请选择一条数据进行操作', '提示', {
            confirmButtonText: '确定'
          });
        } else {
          this.$request({
            url:'/ywtb/removeYwtbMatter',
            method:'post',
            data:{
              "BASE_CODE":selection[0].BASE_CODE,
              "appkey":localStorage.getItem("ywtb_userkeycode")
            }
          }).then(response => {
            if(response.data.msg[0].success =='true'){
              MessageBox.alert('删除成功', '提示', {
                confirmButtonText: '确定'
              });
              this.onSubmit();
            }else{
              MessageBox.alert('删除失败', '提示', {
                confirmButtonText: '确定'
              });
            }
          })
        }
      }
    },
    chooseStep(id){
      for(let i=0;i<this.stepList.length;i++){
        this.chosenStep= id;
        if(id==this.stepList[i].id){
          this.stepList[i].chosen = true;
        }else{
          this.stepList[i].chosen = false;
        }
      }
    },
    showDialog(item_code,situation_name,title){
      if(item_code == '0'){
        return;
      }else{
        console.log(situation_name,title);
        this.dialog_item_title = title;
        this.dialog_situation_title = situation_name;
        this.dialogFormVisible = true;
        this.$request({
          url:'http://10.81.66.9:9250/ywtb/selectYwtbMatterGuide',
          method:'post',
          data:{
            "YWBLXBM":item_code,
            "appkey":localStorage.getItem("ywtb_userkeycode")
          }
        }).then(response => {
          let dataArr = response.data.msg[0].Rows[0];
         // console.log(dataArr);
          this.fillDialogDetail(dataArr);
          this.dialogFormVisible = true;
          this.chooseStep('1');
        })

      }
    },
    fillDialogDetail(dataArr){
      for(let index in dataArr){
        for(let j =0;j<this.globalList.length;j++){
          for(let i =0;i<this[this.globalList[j].name].length;i++){
            if(index==this[this.globalList[j].name][i].code.toUpperCase()){
              this[this.globalList[j].name][i].content = dataArr[index];
            }
          }
        }
      }
    },
    // 设置自动滚动
    // autoRoll(stop) {
    //   if (stop) {
    //     clearInterval(rolltimer);
    //     return;
    //   }
    //   // 拿到表格挂载后的真实DOM
    //   const table = this.$refs.Table;
    //   // 拿到表格中承载数据的div元素
    //   const divData = table.bodyWrapper;
    //   // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果
    //   rolltimer = setInterval(() => {
    //     // 元素自增距离顶部像素
    //     divData.scrollTop += this.rollPx;
    //     // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
    //     if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
    //       // 重置table距离顶部距离
    //       divData.scrollTop = 0;
    //     }
    //   }, this.rollTime * 10);
    // },
// 设置自动切换
//     autoChange(stop) {
//       if (stop) {
//         clearInterval(changetimer);
//         return;
//       }
//       changetimer = setInterval(() => {
//         this.autoPlay = !this.autoPlay;
//         this.autoRoll(true); // 先清除定时器
//         this.autoRoll(); // 再开启定时器
//       }, this.refreshTime * 1000);
//     },
    // 全部收起
    toClose() {
      if(this.DataMain.length !=0){
        this.open = true
        this.close = false
        const elsopen = this.$el.getElementsByClassName('el-table__expand-icon--expanded')
        if(this.$el.getElementsByClassName('el-table__expand-icon--expanded')){
          for(let i=0;i<elsopen.length;i++){
            elsopen[i].click()
          }
        }
      }
    },
    ...mapMutations(['matterGuidanceRefresh','matterGuidance','matterGuidanceSingleChange'])
  },
  beforeDestroy(){  // 组件销毁前调用
    clearInterval(rolltimer);
    clearInterval(changetimer);
  },
  watch: {
    dialogFormVisible: function (val) {
      if(!val){
        this.mouseLeave();//继续滚动
      }
    },
    matterGuidanceObject(val){
      this.unitChangeOrigion(val['matterGuidanceFirstLevel']);
      this.typeChangeOrigion(val['matterGuidanceSecondLevel'])
      this.selectChange();
      this.onSubmitSearch();
    },
  }
}
</script>

<style scoped lang="scss">
#mainBody{
  width: 100%;
  height:100%;
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  @media screen and (max-height: 980px) {
    background: url("../../../assets/imgs/带手指低.png") no-repeat;
  }

  @media screen and (min-height: 980px) {
    background: url("../../../assets/imgs/带手指高.png") no-repeat;
  }
  background-size: 100% !important;

  .left{
    width:2%;
    padding-left: 0.55%;
    padding-top: 70px;
    height:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .singleButton{
      cursor: pointer;
      width:34px;
      height:144px;
      border-radius: 4px;
      border: none;
      padding-top: 10px;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #25a9ee;
      .little_span{
        width:18px;
      }
      .little_active{
        color: #fff;
      }
    }
    .top_button{
      background:url("../../../assets/imgs/住建委.png") no-repeat;
      background-size: 100%;
    }
    .middle_button{
      background:url("../../../assets/imgs/房管局.png") no-repeat;
      background-size: 100%;
    }
    .singleButton:focus,
    .singleButton:hover {
      color: #fff;
    }
  }
  .right{
    width:100%;
    height:100%;
    .right_header{
      width: 97%;
      height: 12%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      .botton_top_chosen{
        width: 177px;
        height: 44px;
        color: #fdbf00;
        font-size: 24px;
        font-weight: bold;
        font-family: 微软雅黑;
        background:url("../../../assets/imgs/下载1.png") no-repeat;
        background-size: 100%;
        border-color: transparent;
        text-align: center;
        line-height: 44px;
        cursor: pointer;
      }
      .botton_top:focus,
      .botton_top:hover {
        background:url("../../../assets/imgs/下载1.png") no-repeat;
        background-size: 100%;
      }

      .botton_top {
        width: 177px;
        height: 44px;
        color: #FFF;
        font-size: 24px;
        font-weight: bold;
        font-family: 微软雅黑;
        background:url("../../../assets/imgs/下载2.png") no-repeat;
        background-size: 100%;
        border-color: transparent;
        text-align: center;
        line-height: 44px;
        cursor: pointer;
      }
    }
    .right_content{
      width: 96%;
      padding-left: 2%;
      height: 90%;
      .table_num_div{
        float: left;
        padding:0px 10px 10px 0px;

        span{
          font-size: 18px;
          color: #fff;
        }
      }
      .table_header_div{
        float: right;
        padding:0px 10px 10px 0px;
        .table_icon{
          font-size: 20px;
          padding:8px 10px
        }
      }
    }
  }
  .guide_body{
    color: #FFF;
    .item_title{
      font-size: 28px;
      font-weight: normal;
    }
    .situation_title{
      font-size: 18px;
      font-weight: normal;
    }
    .step_menu{
      width: 100%;
      height: 80px;
      display: flex;
      flex-direction: column;
      .step_top{
        width: 100%;
        height:40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        .single_step{
          width: 4.15%;
          height:100%;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          .single_button{
            border:1px solid #2c91cc;
            width: 32px;
            height: 32px;
            border-radius: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .single_button_active,.single_button:focus,.single_button:hover{
            background-color: #02ade4;
          }
        }
        .line{
          width: 9%;
          height:100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .step_bottom{
        width: 100%;
        height:40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .single_title{
          width: 13.15%;
          display: flex;
          justify-content: center;
          align-items: center;
          .single_remarks{
            font-size: 18px;
          }
        }
        .single_title_left{
          width: 9%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .single_remarks{
            font-size: 18px;
          }
        }
        .single_title_right{
          width: 9%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          .single_remarks{
            font-size: 18px;
          }
        }
      }
    }
    .basic_info{
      width: 100%;
      height: 500px;
      overflow-y:auto;
      font-size: 14px;


      .basic_table{
        width: 100%;
        border-color: #2c91cc;
        margin: 10px 0 10px 0;
        .basic_tr{
          width: 100%;
          height: 50px;
          .td_title{
            width: 15%;
            background-color: rgb(5,30,94,0.85);

            padding-left: 10px;
          }
          .td_content{
            width: 35%;
          }
          .td_bottom_title{
            background-color: rgb(5,30,94,0.85);
            padding-left: 10px;
          }
          .td_bottom_content{
          }
        }
      }
      .step_info{
        width: 100%;
        height: 100%;
        .single_sqlc{
          display: flex;
          flex-direction: column;
          .sqlc_title{

            height: 50px;
            display: flex;
            align-items: center;
          }
          .sqlc_content{
            padding: 10px 20px 10px 20px;
          }
        }
      }
    }
  }
  ::v-deep .el-pagination {
    padding-top: 20px;
    float: right;
  }
  .wb_button{
    color: rgb(0,128,255);
    margin-left: 4px;
    padding: 0px 8px 1px 8px;
    background: rgb(0,128,255,0.2);
    border: 1px solid #0080ff;
  }
  .qcwb_button{
    color: rgb(255,255,0);
    margin-left: 4px;
    padding: 0px 8px 1px 8px;
    background: rgb(255,255,0,0.2);
    border: 1px solid #ffff00;
  }
  .hb_button{
    color: rgb(255,105,0);
    margin-left: 4px;
    padding: 0px 8px 1px 8px;
    background: rgb(255,105,0,0.2);
    border: 1px solid #ff6900;
  }
  .kb_button{
    color: rgb(0,255,0);
    margin-left: 4px;
    padding: 0px 8px 1px 8px;
    background: rgb(0,255,0,0.2);
    border: 1px solid #00ff00;
  }
}
.guide_button{
  cursor: pointer;
  border: 1px solid #00d8ff;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 3px;
}
.show_disable{
  color: #87898a;
}
.right_content_info{
  width: 100%;
  height: 100%;
}
</style>