webapp / GreenwayWeb

<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
<div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>品牌策划</span>   <span style="padding:0 5px;">></span>  <span style="color:#000000e6">活动方案审批</span></div>
      </div>
      <div>
        <!-- 搜索 -->
        <div class="formSearch">
          <div class="demo-input-suffix">
            <div style="width: 68px;height:36px;line-height:32px;">方案名称</div>
            <el-input placeholder="请输入" v-model="planName" style="width:168px;">
            </el-input>
          </div>
          <div>
            <el-button @click="onSubmit"  style="background-color: #3F9B6A;color: #fff">查询
            </el-button>
            <el-button @click="resetting"
            class="buttonHover"
              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置
            </el-button>
          </div>
        </div>
        <!-- 分栏 -->
        <div class="fenlan">
          <!-- 搜索分类 -->
          <div class="souLei">
            <div style="line-height:42px;height:42px;background-color:#f2f3f5;border-bottom:1px solid #d7d7d7;padding-left:12px;color:#0009">
              标签分类
            </div>
            <div calss="souList">
              <div class="souTabs">
                <div style="padding: 5px 0 0 10px;color:#000000e6;line-height:40px">全部分类</div>
                <el-tree :data="fenlei" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
              </div>
            </div>
          </div>
          <div class="tableList">

            <!-- 表格 -->
            <div>
              <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                @selection-change="handleSelectionChange"  tooltip-effect="dark" align="left"
                 :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                ref="mulTable">
          <!--      <el-table-column type="selection" min-width="5%">
                </el-table-column> -->
               <el-table-column label="方案名称" min-width="300" prop="planName">
               </el-table-column>
               <el-table-column label="类型" prop="planType" min-width="80">
               </el-table-column>
               <el-table-column label="发布状态"  min-width="80" >

               </el-table-column>
               <el-table-column label="审批状态"  min-width="150">
                 <template slot-scope="scope">
                   {{scope.row.state == ''?'待提交':scope.row.state == '1'?'待审批':scope.row.state == '2'?'部门领导审批':scope.row.state == '3'?'公司领导审批':scope.row.state == '4'?'其他审批':scope.row.state == '5'?'审核通过':'已驳回'}}
                   </template>
               </el-table-column>
               <el-table-column label="创建时间" prop="createDate" min-width="250" >
               </el-table-column>
               <!-- <el-table-column prop="auditReminderTime" label="审核提醒时间" width="200">

               </el-table-column> -->
                <el-table-column label="操作" min-width="200">
                  <template slot-scope="scope">
                    <div class="tableBtn greens" @click="handleEditForm(scope.row,1)">查看</div>
                    <div @click="actSp(scope.row)" class="tableBtn greens" v-if="scope.row.state == '1'">审核</div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="fenye">
                <el-pagination class="pagination" :hide-on-single-page="flag" background small
                  :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
                  layout="prev,pager,next,sizes" :total="total" @size-change="handleSizeChange"
                  @current-change="handleCurrentChange" />
              </div>

            </div>
          </div>
        </div>
        <el-dialog  :visible.sync="actSpye" custom-class='actSpye_dialog' style="padding: 0;" width="70%"
          center :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
              <div style="padding:10px 20px;">
                      <div style="display: flex;justify-content: space-between;border-bottom: 1px solid #E5E5E5;padding: 0 0 10px 0;">
                        <div style="display: flex;align-items: center;">
                          <div style="margin-right: 10px;">代办任务</div>
                          <div style="background-color: #E8F6F3;padding: 5px;margin-right: 10px;font-size:12px;color:#56AC83;border-radius: 3px;">发起人：</div>
                          <div style="background-color: #E8F6F3;padding: 5px;margin-right: 10px;font-size:12px;color:#56AC83;border-radius: 3px;">任务节点：部门领导审批</div>
                        </div>
                        <div style="margin-right:20px ">
                          <el-button  style="background-color: #3F9B6A;color: #fff;" @click="actSpye=false">关闭</el-button>
                        </div>
                      </div>
                      <div style="padding:20px 15px 15px 15px;">
                           <el-tabs v-model="actCard"  @tab-click="handleClick">
                              <el-tab-pane label="表单信息" name='1'>
                                <div style="margin:0 0 10px 30%">方案名称 {{secondData.planName}}</div>
                                <div style="margin:15px 0;padding:0 20%; padding-bottom:20px;border-bottom: 1px solid #E1EEEF;">
                                  <el-button @click="MsgShen(1)"  style="background-color: #3F9B6A;color: #fff;">基本信息查看</el-button>
                                  <el-button  @click="MsgShen(2)"  style="background-color: #3F9B6A;color: #fff;">活动明细信息查看</el-button>
                                  <el-button  @click="MsgShen(3)" style="background-color: #3F9B6A;color: #fff;">活动成本信息查看</el-button>
                                  <el-button  @click="MsgShen(4)" style="background-color: #3F9B6A;color: #fff;">预估效果信息查看</el-button>
                                </div>
                                <div style="padding:20px 0;display:flex;justify-content:flex-end;" v-if="secondData.state != '5'">
                                  <el-button icon="el-icon-edit"  @click="LiuYes(1)"
                                    style="background-color: #3F9B6A;color: #fff;">同意</el-button>
                                      <el-button icon="el-icon-circle-close"  @click="LiuYes(2)"
                                        style="background-color: #3F9B6A;color: #fff;">驳回</el-button>
                                </div>
                                <el-dialog
                                     width="60%"
                                     title="审批信息"
                                     custom-class='liucheng_css'
                                     :visible.sync="MsgSp"
                                     append-to-body>
                                     <div style="padding:30px 20px 0 20px">
                                           <div style="border: 1px solid #E5E5E5;padding: 1px" v-if="index == 1">
                                             <div style="padding: 10px 13px;font-size: 12px;border-bottom: 1px solid #E5E5E5;">
                                              基本信息
                                             </div>
                                             <div style="padding: 15px;">
                                               <el-form  label-position="top"  :model="secondData"  label-width="120px"
                                                 style="position: relative">
                                                 <el-row :gutter="20">
                                                   <el-col :span="8">
                                                     <el-form-item label="方案名称" class="grid-content bg-purple device-from" prop="planName">
                                                       <el-input v-model="secondData.planName" placeholder="请输入"  disabled/>
                                                     </el-form-item>
                                                   </el-col>
                                                   <el-col :span="8">
                                                     <el-form-item label="类型" class="grid-content bg-purple" prop="planType">
                                                       <el-select v-model="secondData.planType" placeholder="请选择" disabled style="width: 100%">
                                                         <el-option label="活动策划" value="活动策划"></el-option>
                                                       </el-select>
                                                     </el-form-item>
                                                   </el-col>

                                                   <el-col :span="8">
                                                     <el-form-item label="活动地点" class="grid-content bg-purple" prop="eventAddrs">
                                                       <el-input v-model="secondData.eventAddrs" placeholder="请输入" disabled/>
                                                     </el-form-item>
                                                   </el-col>
                                                 </el-row>

                                                 <el-row :gutter="20">
                                                   <el-col :span="8">
                                                     <el-form-item label="活动时间" class="grid-content bg-purple" prop="plan_Time"
                                                       style="position: relative">
                                                       <el-date-picker style="width: 100%;" v-model="secondData.planTime" value-format="yyyy-MM-dd HH:mm:ss"
                                                         type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" disabled
                                                         align="right">
                                                       </el-date-picker>
                                                     </el-form-item>
                                                   </el-col>
                                                   <el-col :span="8">
                                                     <el-form-item label="活动主题" class="grid-content bg-purple" prop="eventTheme">
                                                       <el-input v-model="secondData.eventTheme" placeholder="请输入" disabled/>
                                                     </el-form-item>
                                                   </el-col>
                                                   <el-col :span="8">
                                                     <el-form-item label="活动主办方" class="grid-content bg-purple" prop="sponsor">
                                                       <el-input v-model="secondData.sponsor" placeholder="请输入" disabled/>
                                                     </el-form-item>
                                                   </el-col>
                                                 </el-row>

                                                 <el-row :gutter="20">
                                                   <el-col :span="8">
                                                     <el-form-item label="活动参与方" prop="participants" class="grid-content bg-purple">
                                                       <el-input v-model="secondData.participants" placeholder="请输入" disabled/>
                                                     </el-form-item>
                                                   </el-col>
                                                   <el-col :span="16">
                                                     <el-form-item label="活动主要目的" prop="mainPurpose" class="grid-content bg-purple">
                                                       <el-input v-model="secondData.mainPurpose" placeholder="请输入" disabled/>
                                                     </el-form-item>
                                                   </el-col>
                                                 </el-row>
                                                 <div style="padding: 10px">
                                                   <el-row :gutter="20">
                                                     <el-form-item label="活动封面海报" prop="cover_poster" class="grid-content bg-purple">
                                                        <img :src="secondData.coverPoster" alt="" style="width: 80px;height:80px;">
                                                     </el-form-item>
                                                   </el-row>
                                                 </div>
                                               </el-form>
                                             </div>
                                           </div>
                                           <div style="border: 1px solid #E5E5E5;padding: 1px" v-if="index == 2">
                                             <div style="padding: 10px 13px;font-size: 12px;border-bottom: 1px solid #E5E5E5;display: flex;">
                                             <div>活动明细</div>
                                             </div>
                                             <div style="padding: 15px;">
                                               <div style="padding: 0px 20px 0px 0px">
                                                 <el-table :data="mingSp"
                                                   :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
                                                   style="width: 100%">
                                                   <el-table-column label="序号" width="auto" min-width="5%" align="center">
                                                       <template slot-scope="scope">
                                                         {{scope.$index + 1}}
                                                         </template>
                                                   </el-table-column>
                                                   <el-table-column label="明细项名称" prop="detailLtemName" width="auto" min-width="22%">

                                                   </el-table-column>
                                                   <el-table-column label="预估数量" prop="estimatedQuantity" width="auto" min-width="15%">

                                                   </el-table-column>
                                                   <el-table-column label="预估费用" prop="estimatedCost" width="auto" min-width="15%">
                                                   </el-table-column>
                                                   <el-table-column prop="notes" label="备注" width="auto" min-width="15%">
                                                   </el-table-column>
                                                 </el-table>
                                               </div>
                                             </div>
                                           </div>
                                           <div style="border: 1px solid #E5E5E5;padding: 1px" v-if="index == 3">
                                             <div style="padding: 10px 13px;font-size: 12px;border-bottom: 1px solid #E5E5E5;display: flex;">
                                             <div>活动成本</div>
                                             </div>
                                             <div style="padding: 15px;">
                                               <div style="">
                                                 <el-form  label-position="top"  :model="secondData" label-width="120px"
                                                   style="position: relative">
                                                   <el-row :gutter="20">
                                                     <el-col :span="8">
                                                       <el-form-item label="内部人力成本预估" class="grid-content bg-purple device-from"
                                                         prop="internalLaborCostEstimation">
                                                         <el-input v-model="secondData.internalLaborCostEstimation" placeholder="请输入" disabled/>
                                                       </el-form-item>
                                                     </el-col>
                                                     <el-col :span="8">
                                                       <el-form-item label="外部人力成本预估" class="grid-content bg-purple" prop="externalLaborCostEstimation">
                                                         <el-input v-model="secondData.externalLaborCostEstimation" placeholder="请输入" disabled/>
                                                       </el-form-item>
                                                     </el-col>

                                                     <el-col :span="8">
                                                       <el-form-item label="商品成本预估" class="grid-content bg-purple" prop="costEstimationGoods">
                                                         <el-input v-model="secondData.costEstimationGoods" placeholder="请输入" disabled/>
                                                       </el-form-item>
                                                     </el-col>
                                                   </el-row>

                                                   <el-row :gutter="20">
                                                     <el-col :span="8">
                                                       <el-form-item label="设备成本预估" class="grid-content bg-purple" prop="setCostEstimate">
                                                         <el-input v-model="secondData.setCostEstimate" placeholder="请输入" disabled/>
                                                       </el-form-item>
                                                     </el-col>
                                                     <el-col :span="8">
                                                       <el-form-item label="宣传费用预估" class="grid-content bg-purple" prop="estimatedPromotionalExpenses">
                                                         <el-input v-model="secondData.estimatedPromotionalExpenses" placeholder="请输入" disabled/>
                                                       </el-form-item>
                                                     </el-col>
                                                     <el-col :span="8">
                                                       <el-form-item label="其他必要成本预估" class="grid-content bg-purple" prop="otherNecessaryEstimates">
                                                         <el-input v-model="secondData.otherNecessaryEstimates" placeholder="请输入" disabled/>
                                                       </el-form-item>
                                                     </el-col>
                                                   </el-row>

                                                   <el-row :gutter="20">
                                                     <el-col :span="8">
                                                       <el-form-item label="总成本预估" prop="totalCostEstimation" class="grid-content bg-purple">
                                                         <el-input v-model="secondData.totalCostEstimation" placeholder="请输入" disabled/>
                                                       </el-form-item>
                                                     </el-col>
                                                     <el-col :span="16">
                                                       <el-form-item label="备注" prop="notes" class="grid-content bg-purple">
                                                         <el-input v-model="secondData.notes" placeholder="请输入" disabled/>
                                                       </el-form-item>
                                                     </el-col>
                                                   </el-row>
                                                 </el-form>
                                               </div>
                                             </div>
                                           </div>
                                           <div style="border: 1px solid #E5E5E5;padding: 1px" v-if="index == 4">
                                             <div style="padding: 10px 13px;font-size: 12px;border-bottom: 1px solid #E5E5E5;display: flex;">
                                             <div>预估效果信息</div>
                                             </div>
                                             <div style="padding: 15px;">
                                               <div>
                                                 <el-form  label-position="top"  :model="secondData" label-width="120px"
                                                   style="position: relative">
                                                   <el-row :gutter="20">
                                                     <el-col :span="8">
                                                       <el-form-item label="预计吸引流量" class="grid-content bg-purple device-from" prop="expectedAttractTraffic">
                                                         <el-input v-model="secondData.expectedAttractTraffic" placeholder="请输入" disabled/>
                                                       </el-form-item>
                                                     </el-col>
                                                     <el-col :span="8">
                                                       <el-form-item label="预计参与人数" class="grid-content bg-purple" prop="expectedParticipation">
                                                         <el-input v-model="secondData.expectedParticipation" placeholder="请输入" disabled/>
                                                       </el-form-item>
                                                     </el-col>

                                                     <el-col :span="8">
                                                       <el-form-item label="预计直接收益" class="grid-content bg-purple" prop="expectedDirectBenefits">
                                                         <el-input v-model="secondData.expectedDirectBenefits" placeholder="请输入" disabled/>
                                                       </el-form-item>
                                                     </el-col>
                                                   </el-row>
                                                   <el-row :gutter="20">
                                                     <el-col :span="8">
                                                       <el-form-item label="预计间接收益" class="grid-content bg-purple" prop="expectedIndirectBenefits">
                                                         <el-input v-model="secondData.expectedIndirectBenefits" placeholder="请输入" disabled/>
                                                       </el-form-item>
                                                     </el-col>

                                                   </el-row>
                                                 </el-form>
                                               </div>
                                             </div>
                                           </div>
                                     </div>
                                     <div style="display:flex;justify-content: flex-end;padding:20px;">
                                       <el-button   @click="MsgSp=false"
                                       class="buttonHover"
                                         style="background-color: #3F9B6A;color: #fff;">返回</el-button>
                                     </div>
                                   </el-dialog>
                                 <el-dialog
                                      width="40%"
                                      title="流程审批"
                                      custom-class='liucheng_css'
                                      :visible.sync="Liunie"
                                      :close-on-click-modal="false" :close-on-press-escape="false" :show-close='false'
                                      append-to-body>
                                      <div style="padding:30px 20px 0 20px">
                                        <el-form  ref="ruleFormInfo" :model="secondData" label-width="63px"
                                          style="position: relative">
                                          <el-form-item label="处理意见" class="grid-content bg-purple" prop="name">
                                            <el-input type="textarea"  v-model="secondData.yijian"
                                             placeholder="请输入处理意见" />
                                          </el-form-item>

                                        </el-form>
                                      </div>
                                      <div style="display:flex;justify-content: flex-end;padding:20px;">
                                        <el-button   @click="Liunie=false"
                                          style="background-color: #3F9B6A;color: #fff;">取消</el-button>
                                          <el-button   @click="OAshen"
                                            style="background-color: #3F9B6A;color: #fff;">确定</el-button>
                                      </div>
                                    </el-dialog>
                              </el-tab-pane>
                              <el-tab-pane label="流转记录" name="2">
                                <div style="">
                                  <el-steps direction="vertical" :active="secondData.state!=5? secondData.state - 1: 1" class="shen_steps1">
                                    <el-step>
                                      <template slot="title">
                                        <div style="font-size: 12px;font-weight: 600;">部门领导审批</div>
                                           </template>
                                       <template slot="description">
                                         <div style="margin-bottom:10px;padding:10px;border:1px solid #EBEEF5;width:50%">
                                                <div>
                                                  <el-descriptions class="margin-top" :column="1"  border>
                                                      <el-descriptions-item>
                                                        <template slot="label">
                                                          <i class="el-icon-user"></i>
                                                          办理人
                                                        </template>

                                                      </el-descriptions-item>
                                                      <el-descriptions-item>
                                                        <template slot="label">
                                                          <i class="el-icon-mobile-phone"></i>
                                                          接收时间
                                                        </template>

                                                      </el-descriptions-item>
                                                      <el-descriptions-item>
                                                        <template slot="label">
                                                          <i class="el-icon-mobile-phone"></i>
                                                          处理时间
                                                        </template>

                                                      </el-descriptions-item>
                                                      <el-descriptions-item>
                                                        <template slot="label">
                                                          <i class="el-icon-mobile-phone"></i>
                                                          处理意见
                                                        </template>

                                                      </el-descriptions-item>
                                                    </el-descriptions>
                                                </div>
                                         </div>
                                         </template>
                                    </el-step>
                                    <el-step>
                                      <template slot="title">
                                        <div style="font-size: 12px;font-weight: 600;">公司领导审批</div>
                                           </template>
                                      <template slot="description">
                                        <div style="margin-bottom:10px;padding:10px;border:1px solid #EBEEF5;width:50%">
                                               <div>
                                                 <el-descriptions class="margin-top" :column="1"  border>
                                                     <el-descriptions-item>
                                                       <template slot="label">
                                                         <i class="el-icon-user"></i>
                                                         办理人
                                                       </template>

                                                     </el-descriptions-item>
                                                     <el-descriptions-item>
                                                       <template slot="label">
                                                         <i class="el-icon-mobile-phone"></i>
                                                         接收时间
                                                       </template>

                                                     </el-descriptions-item>
                                                     <el-descriptions-item>
                                                       <template slot="label">
                                                         <i class="el-icon-mobile-phone"></i>
                                                         处理时间
                                                       </template>

                                                     </el-descriptions-item>
                                                     <el-descriptions-item>
                                                       <template slot="label">
                                                         <i class="el-icon-mobile-phone"></i>
                                                         处理意见
                                                       </template>

                                                     </el-descriptions-item>
                                                   </el-descriptions>
                                               </div>
                                        </div>
                                        </template>
                                    </el-step>
                                    <el-step>
                                      <template slot="title">
                                        <div style="font-size: 12px;font-weight: 600;">其他审批</div>
                                           </template>
                                           <template slot="description">
                                             <div style="margin-bottom:10px;padding:10px;border:1px solid #EBEEF5;width:50%">
                                               <div>
                                                 <el-descriptions class="margin-top" :column="1"  border>
                                                     <el-descriptions-item>
                                                       <template slot="label">
                                                         <i class="el-icon-user"></i>
                                                         办理人
                                                       </template>

                                                     </el-descriptions-item>
                                                     <el-descriptions-item>
                                                       <template slot="label">
                                                         <i class="el-icon-mobile-phone"></i>
                                                         接收时间
                                                       </template>

                                                     </el-descriptions-item>
                                                   </el-descriptions>
                                               </div>

                                             </div>
                                             </template>
                                    </el-step>
                                  </el-steps>
                                </div>
                              </el-tab-pane>
                              <el-tab-pane label="流程图" name="3">
                                <div style="height:120px;width:70%;margin-left:18%;margin-top: 78px;">
                                   <el-steps :active="secondData.state!=5? secondData.state: 1" class="liu_steps">
                                     <el-step  class="step_start">
                                       <template slot="icon">
                                       <!--  <div style="background:green;width:150px;height:100px;">
                                         </div> -->
                                           </template>
                                     </el-step>
                                     <el-step  class="step_buen">
                                       <template slot="icon">
                                         <div >
                                            <div>部门领导审批</div>
                                         </div>
                                           </template>
                                     </el-step>
                                     <el-step  class="step_buen">
                                       <template slot="icon">
                                         <div>
                                            <div>公司领导审批</div>
                                         </div>
                                           </template>
                                     </el-step>
                                     <el-step  class="step_buen">
                                       <template slot="icon">
                                         <div>
                                            <div>其他审批</div>
                                         </div>
                                           </template>
                                     </el-step>
                                     <el-step class="step_start">
                                      <template slot="icon">

                                           </template>
                                     </el-step>
                                   </el-steps>
                                </div>
                              </el-tab-pane>
                            </el-tabs>
                      </div>
              </div>
          </el-dialog>
      </div>
    <el-dialog title="活动方案详情" :visible.sync="ggXin" custom-class='xiang_css' style="padding: 0;" width="80%" center
      :close-on-click-modal="false" :close-on-press-escape="false" @close="refreshData">
      <div ref="actXiang">
        <div style="width: 100%;">
          <div style="display: flex;padding:0px 20px 20px 20px; ">
            <div style="width: 150px;height: 80px;" v-if="secondData.coverPoster">
              <img :src="secondData.coverPoster" alt="" style="width: 100%;height: 80px;" />
            </div>
            <div
              style="display: flex;flex-direction: column;justify-content: space-around;padding: 0 10px;font-size: 12px;">
              <span style="margin-bottom: 10px;">{{text}}</span>
              <span>活动时间：{{tableData1[1].eventTheme}}至{{tableData1[1].planName}}</span>
              <span>活动地点:{{tableData1[0].planName}}</span>
            </div>
          </div>
        </div>
        <div style="width: 100%;background-color: #fff;">
          <el-tabs v-model="activeName" @tab-click="handleClick" style="padding-left:20px;">
            <el-tab-pane label="方案概况" name="first"></el-tab-pane>
            <el-tab-pane label="执行效果" name="second"></el-tab-pane>
          </el-tabs>
        </div>
        <div v-if="activeName=='first'" style="display: flex;">
          <div style="width: 100%;">
            <div style="width: 100%;">
              <div style="font-size: 14px;padding: 10px 20px 0px 20px;">基本信息</div>
              <div style="padding: 10px 20px;">
                <el-table :data="tableData1"
                  :header-cell-style="{fontSize: '14px', backgroundColor: '#fff',color:'#000',fontWeight: 'normal'}"
                   style="width: 100%;margin: auto;">
                  <el-table-column class-name="first-column-bg" label="方案编号" prop="name" min-width="15%">
                  </el-table-column>
                  <el-table-column :label="id" prop="eventTheme" min-width="35%">

                  </el-table-column>
                  <el-table-column class-name="first-column-bg" label="方案名称" prop="text" min-width="15%">

                  </el-table-column>
                  <el-table-column :label="text" prop="planName" min-width="35%">

                  </el-table-column>
                </el-table>


              </div>
            </div>
            <div style="width: 100%;">
              <div style="font-size: 14px;padding: 10px 20px 0px 20px;">活动明细信息</div>
              <div style="padding: 10px 20px;">
                <el-table :data="tableData2"
                  :header-cell-style="{fontSize: '14px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
                  style="width: 100%;margin: auto;">
                  <el-table-column label="序号" min-width="5%" align='center'>
                    <template slot-scope="scope">
                      <span style="">{{ scope.$index +1}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="明细项名称" prop="detailLtemName" min-width="28%">
                  </el-table-column>
                  <el-table-column label="预估数量" prop="estimatedQuantity" min-width="20%">

                  </el-table-column>
                  <el-table-column label="预估费用" prop="estimatedCost" min-width="20%">

                  </el-table-column>
                  <el-table-column label="备注" prop="notes" min-width="20%">
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div style="width: 100%;">
              <div style="font-size: 14px;padding: 10px 20px 0px 20px;">活动成本信息</div>
              <div style="padding:10px 20px;">
                <el-table :data="tableData3"
                  :header-cell-style="{fontSize: '14px', backgroundColor: '#fff',color:'#000',fontWeight: 'normal'}"
                   style="width: 100%;margin: auto;">
                  <el-table-column class-name="first-column-bg" label="内部人力成本预估" prop="name" min-width="15%">
                  </el-table-column>
                  <el-table-column :label="internalLaborCostEstimation" prop="eventTheme" min-width="35%">

                  </el-table-column>
                  <el-table-column class-name="first-column-bg" label="外部人力成本预估" prop="text" min-width="15%">

                  </el-table-column>
                  <el-table-column :label="externalLaborCostEstimation" prop="planName" min-width="35%">

                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div style="width: 100%;">
              <div style="font-size: 14px;padding:10px 20px 0px 20px;">预估效果</div>
              <div style="padding:10px 20px;">
                <el-table :data="tableData4"
                  :header-cell-style="{fontSize: '14px', backgroundColor: '#fff',color:'#000',fontWeight: 'normal'}"
                   style="width: 100%;margin: auto;">
                  <el-table-column class-name="first-column-bg" label="预计吸引流量" prop="name" min-width="15%">
                  </el-table-column>
                  <el-table-column :label="expectedAttractTraffic" prop="eventTheme" min-width="35%">

                  </el-table-column>
                  <el-table-column class-name="first-column-bg" label="预计参与人数" prop="text" min-width="15%">

                  </el-table-column>
                  <el-table-column :label="expectedParticipation" prop="planName" min-width="35%">

                  </el-table-column>
                </el-table>
                </el-table-column>
              </div>
            </div>
            <div style="width: 100%;">
              <div style="font-size: 14px;padding: 10px 20px 0px 20px;">相关附件信息</div>
              <div style="padding:10px 20px;">
                <el-table :data="tableData6"
                  :header-cell-style="{fontSize: '14px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
                   style="width: 100%;margin: auto;">
                  <el-table-column label="序号" min-width="5%" align='center'>
                    <template slot-scope="scope">
                      <span style="">{{ scope.$index + 1 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="附件名称" prop="attachmentName" min-width="75%">
                  </el-table-column>
                  <el-table-column label="操作" min-width="20%">
                    <template slot-scope="scope">
                      <!-- <div class="tableBtn greens" @click="Down(scope.row)">下载</div> -->
                      <a class="tableBtn greens" :href="scope.row.attachmentUrl" target="_blank" download>下载</a>
                    </template>
                  </el-table-column>

                </el-table>
              </div>
            </div>
            <div style="width: 100%;">
              <div style="font-size: 14px;padding: 10px 20px 0px 20px;">系统信息</div>
              <div style="padding:10px 20px;">
                <el-table :data="tableData5"
                  :header-cell-style="{fontSize: '14px', backgroundColor: '#fff',color:'#000',fontWeight: 'normal'}"
                   style="width: 100%;margin: auto;">
                  <el-table-column class-name="first-column-bg" label="创建人" prop="name" min-width="15%">
                  </el-table-column>
                  <el-table-column :label="createUser" prop="eventTheme" min-width="35%">

                  </el-table-column>
                  <el-table-column class-name="first-column-bg" label="创建时间" prop="text" min-width="15%">

                  </el-table-column>
                  <el-table-column :label="createDate" prop="planName" min-width="35%">

                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
        <div v-if="activeName=='second'">
          <div style="padding: 20px">
            <div style="border: solid 1px #E5E5E5;border-radius: 5px">
              <div style="border-bottom: 1px solid #E5E5E5;padding: 1px">
                <div style="padding: 10px 20px;background-color: #FAFAFA;font-size: 14px;">
                  基本信息
                </div>
              </div>
              <div style="padding: 20px 40px 20px 20px">
                <el-form  label-position="top" ref="ruleFormInfo" :model="zhixingList" label-width="120px"
                  style="position: relative">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="活动名称" class="grid-content bg-purple device-from" prop="name">
                        <el-input v-model="zhixingList.planName" placeholder="请输入" :disabled="!zhixingBian" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="实际举办地点" class="grid-content bg-purple" prop="name">
                        <el-input v-model="zhixingList.eventAddrs" placeholder="请输入" :disabled="!zhixingBian" />
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="实际举办时间" class="grid-content bg-purple" prop="event_start_time"
                        style="position: relative">
                        <el-date-picker style="width: 100%;" v-model="zhixingList.planTime"
                        @input="formTime"
                          value-format="yyyy-MM-dd HH:mm:ss" :disabled="!zhixingBian" type="datetimerange"
                          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
                         >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="活动主办方" class="grid-content bg-purple" prop="name">
                        <el-input v-model="zhixingList.sponsor" placeholder="请输入" :disabled="!zhixingBian" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="活动实际参与方" class="grid-content bg-purple" prop="name">
                        <el-input v-model="zhixingList.participants" placeholder="请输入" :disabled="!zhixingBian" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </div>
          </div>
          <div style="padding: 0px 20px 20px 20px">
            <div style="border: solid 1px #E5E5E5;border-radius: 5px">
              <div style="border-bottom: 1px solid #E5E5E5;padding: 1px;display: flex">
                <div style="padding: 10px 20px;background-color: #FAFAFA;font-size: 14px;">
                  活动明细信息
                </div>

              </div>
              <!--          表格-->
              <div style="padding: 20px 20px 20px 20px">
                <el-table :data="tableDa"
                  :header-cell-style="{fontSize: '14px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
                   style="width: 100%">
                  <el-table-column label="序号" width="auto" min-width="5%" prop="date" align="center">
                    <template slot-scope="scope">
                      {{scope.$index +1}}
                    </template>
                  </el-table-column>
                  <el-table-column label="明细项名称" prop="detailLtemName" width="auto" min-width="22%">

                  </el-table-column>
                  <el-table-column label="预估数量" prop="estimatedQuantity" width="auto" min-width="15%">

                  </el-table-column>
                  <el-table-column label="预估费用" prop="estimatedCost" width="auto" min-width="15%">
                  </el-table-column>
                  <el-table-column prop="notes" label="备注" width="auto" min-width="15%">
                  </el-table-column>
                  <el-table-column label="操作" width="auto" min-width="18%" v-if="zhixingBian">
                    <template slot-scope="scope">
                      <!-- <div class="tableBtn greens">详情</div> -->
                      <div class="tableBtn greens" @click="MingDelete(scope.$index,scope.row)">删除</div>
                    </template>
                  </el-table-column>
                </el-table>

              </div>
            </div>
          </div>
          <div style="padding: 20px">
            <div style="border: solid 1px #E5E5E5;border-radius: 5px;padding-bottom: 20px;">
              <div style="border-bottom: 1px solid #E5E5E5;padding: 1px">
                <div style="padding: 10px 20px;background-color: #FAFAFA;font-size: 14px;">
                  实际花费成本
                </div>
              </div>
              <div style="padding: 20px 40px 0px 20px">
                <el-form  label-position="top" ref="ruleFormInfo" :model="zhixingList" label-width="120px"
                  style="position: relative">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="内部人力成本预估" class="grid-content bg-purple device-from" prop="name">
                        <el-input v-model="zhixingList.internalLaborCostEstimation" placeholder="请输入"
                          :disabled="!zhixingBian" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="外部人力成本预估" class="grid-content bg-purple" prop="name">
                        <el-input v-model="zhixingList.externalLaborCostEstimation" placeholder="请输入"
                          :disabled="!zhixingBian" />
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="商品成本预估" class="grid-content bg-purple" prop="name">
                        <el-input v-model="zhixingList.costEstimationGoods" placeholder="请输入" :disabled="!zhixingBian" />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="设备成本" class="grid-content bg-purple" prop="name">
                        <el-input v-model="zhixingList.setCostEstimate" placeholder="请输入" :disabled="!zhixingBian" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="宣传费用" class="grid-content bg-purple" prop="name">
                        <el-input v-model="zhixingList.estimatedPromotionalExpenses" placeholder="请输入"
                          :disabled="!zhixingBian" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="其他成本" class="grid-content bg-purple" prop="name">
                        <el-input v-model="zhixingList.otherNecessaryEstimates" placeholder="请输入"
                          :disabled="!zhixingBian" />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="总成本" prop="name" class="grid-content bg-purple">
                        <el-input v-model="zhixingList.totalCostEstimation" placeholder="请输入" :disabled="!zhixingBian" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="16">
                      <el-form-item label="备注" prop="name" class="grid-content bg-purple">
                        <el-input v-model="zhixingList.notes" placeholder="请输入" :disabled="!zhixingBian" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </div>
          </div>

          <div style="padding: 20px">
            <div style="border: solid 1px #E5E5E5;border-radius: 5px;padding-bottom: 20px;">
              <div style="border-bottom: 1px solid #E5E5E5;padding: 1px">
                <div style="padding: 10px 20px;background-color: #FAFAFA;font-size: 14px;">
                  活动执行效果
                </div>
              </div>
              <div style="padding: 20px 40px 0px 20px">
                <el-form  label-position="top" ref="ruleFormInfo" :model="zhixingList" label-width="120px"
                  style="position: relative">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="吸引流量" class="grid-content bg-purple device-from" prop="name">
                        <el-input v-model="zhixingList.expectedAttractTraffic" placeholder="请输入" :disabled="!zhixingBian" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="参与人数" class="grid-content bg-purple" prop="name">
                        <el-input v-model="zhixingList.expectedParticipation" placeholder="请输入" :disabled="!zhixingBian" />
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="直接收益" class="grid-content bg-purple" prop="name">
                        <el-input v-model="zhixingList.expectedDirectBenefits" placeholder="请输入" :disabled="!zhixingBian" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="间接收益" class="grid-content bg-purple" prop="name">
                        <el-input v-model="zhixingList.expectedIndirectBenefits" placeholder="请输入"
                          :disabled="!zhixingBian" />
                      </el-form-item>
                    </el-col>

                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="反馈内容" class="grid-content bg-purple" prop="name">
                       <el-upload class="upload-demo" ref="upload"  :on-remove="handleRemove"
                         :action="uploadFileUrl" :on-success="handleUploadSuccess" :file-list="fileData"
                         :show-file-list="true" v-if="zhixingBian">
                                  <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;"  class="buttonHover" v-if="fileData.length==0">+点击上传</el-button>
                       </el-upload>
                       <div v-else>{{zhixingList.feedbackContent}}</div>
                      </el-form-item>
                    </el-col>

                  </el-row>
                </el-form>
              </div>
            </div>
          </div>

        </div>

      </div>
    </el-dialog>
    </div>
  </div>
</template>

<script>
  import {
    deleteById,
    queryByPage,
    xiangByPage,
    fujiaTable,
    mingTable,
    danqueryById,
    xiangedit,
    actEdit,
    actAdd,
    actPage,
    cereGet
  } from '../../api/activityBz'
  import * as echarts from 'echarts'
  export default {
    data() {
      return {
        actSpye:false,//审批页
        Liunie:false,//流程审批内页
        secondData: {},
        planName: '',
        planFen:'',
        planTime: '',
        eventTheme: '',
        currentPage: 1,
        total: 100,
        flag: false,
        pageSize: 10,
        ggXin: false,
        radio: '1',
        shan: '',
        actCard:'1',
        activeName: 'first',
        rules: {
          coDe: [{
              required: true,
              message: '请输入活动名称',
              trigger: 'blur'
            },

          ],
        },
        formInline: {
          merchantName: '', // 商家名称
          storeId: '', // 编码
          contacts: '', // 联系人
          businessEntity: '', //经营主体
          page: 1, // 当前页
          pageSize: 10 // 每页记录数
        },
        tableData: [],
        mingSp:[],//审批明细
        MsgSp:false,//审批信息
        index:1,
        id: '',
        text: 123,
        tableData1: [{
          id: 0,
          name: '类型',
          planName: '',
          text: '活动地点',
          eventTheme: ''
        }, {
          id: 0,
          name: '活动开始时间',
          planName: '',
          text: '活动结束时间',
          eventTheme: ''
        }, {
          id: 0,
          name: '活动主题',
          planName: '',
          text: '活动主办方',
          eventTheme: ''
        }, {
          id: 0,
          name: '活动参与方',
          planName: '',
          text: '活动主要目的',
          eventTheme: ''
        }, {
          id: 0,
          name: '范围设置',
          planName: '',
          text: '状态',
          eventTheme: ''
        }],
        internalLaborCostEstimation: '',
        externalLaborCostEstimation: '',
        tableData3: [{
          id: 0,
          name: '商品成本预估',
          planName: '',
          text: '设备成本预估',
          eventTheme: ''
        }, {
          id: 0,
          name: '宣传费用预估',
          planName: '',
          text: '其他必要成本预估',
          eventTheme: ''
        }, {
          id: 0,
          name: '总成本预估',
          planName: '',
          text: '备注',
          eventTheme: ''
        }],
        expectedAttractTraffic: '',
        expectedParticipation: '',
        tableData4: [{
          id: 0,
          name: '预计直接收益',
          planName: '',
          text: '预计间接收益',
          eventTheme: '-'
        }],
        createUser: '',
        createDate: '',
        tableData5: [{
          id: 0,
          name: '更新人',
          planName: '',
          text: '更新时间',
          eventTheme: '-'
        }],
        fenlei: [],
        tableData2: [],//基本信息明细列表
        tableData6: [],//基本信息附件列表
        tableDa:[],//执行效果明细列表
        zhixingList:{
            plan_Time: '',
            planName: '', //活动名称
            eventAddrs: '', //实际举办地点
            eventStartTime: 0, //实际开始时间
            eventEndTime: 0, //实际结束时间
            sponsor: '', //实际主办方
            participants: '', //实际参与方
            internalLaborCostEstimation: '', //内部人工成本
            externalLaborCostEstimation: '', //外部人工成本
            costEstimationGoods: '', //商品成本
            setCostEstimate: '', //设备成本
            estimatedPromotionalExpenses: '', //宣传费用预估
            otherNecessaryEstimates: '', //其他成本预估
            totalCostEstimation: '', //总成本预估
            notes: '', //备注
            expectedAttractTraffic: '', //吸引流量
            expectedParticipation: '', //参与人数
            expectedDirectBenefits: '', //直接收益
            expectedIndirectBenefits: '', //间接收益
            createDate:'',//创建时间
        },//执行效果列表
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
          dataOwnership: '1',
          isDraft:0,
          state:'待提交'
        },
        multipleSelection: [],
        options: [{
                  value: 1,
                  label: '类型1'
                }],
                liuYe:1,//通过or驳回
                value: '',
                submenuId:'',
                defaultProps:{
                   children: 'children',
                   label: 'classificationName'
                },
            zhixingBian: false, //判断是否编辑执行效果
            tableDa: [], //执行效果明细列表
      }
    },
    created() {
      this.getAll()

    },
    computed: {

    },
    mounted() {

    },
    methods: {
      getStatus(state) {
      switch (state) {
        case '':
          return '待提交';
        case '1':
          return '待审核';
        case '2':
          return '业务部审核';
        case '3':
          return '品牌审核';
        case '4':
          return '审核通过';
          case '5':
          return '审核不通过'
      }
      },
      //查询全数据
      async getAll() {
        const res = await queryByPage(this.pageindex)
        this.tableData = res.data.content
        this.total = res.data.content.length
        let page = {
          pageNumber: 1,
          pageSize: 10,
          classificationType:'0'
        }
      const fenleis =  await cereGet(page)
      this.fenlei = this.transformData(fenleis.data)
       // this.$nextTick(()=>{
       //   if(this.fenlei[0].childClassifications.length == 0){
       //     this.submenuId = this.fenlei[0].cereClassification.id
       //   }else{
       //     this.submenuId = this.fenlei[0].childClassifications[0].id
       //   }
       //   this.submenuId = this.submenuId.toString()

       // })
      },
      transformData(data) {
          return data.map(item => ({
            ...item.cereClassification,
               children: item.childClassifications || []
              }));
      },
      handleNodeClick(data){
         console.log('Node clicked:', data);
      },
      //删除记录按钮
      async handleDelete(val) {
        const res = await deleteById({
          id: val.id
        })
        this.getAll()
      },
      //查询
      async onSubmit() {
        if (this.planName != '' && this.eventTheme == '') {
          const res = await danqueryById({
            planName: this.planName,
            dataOwnership: '1',
            pageNumber: 1,
            pageSize: 10,
            isDraft:0,
            state:'待提交'
          })
          this.tableData = res.data.content
        } else if (this.planName == '' && this.eventTheme != '') {
          const res = await danqueryById({
            eventTheme: this.eventTheme,
            dataOwnership: '1',
            pageNumber: 1,
            pageSize: 10,
            isDraft:0,
            state:'待提交'
          })
          this.tableData = res.data.content
        } else {
          const res = await danqueryById({
            planName: this.planName,
            eventTheme: this.eventTheme,
            dataOwnership: '1',
            pageNumber: 1,
            pageSize: 10,
            isDraft:0,
            state:'待提交'
          })
          this.tableData = res.data.content
        }

      },

      removeEmptyValues(obj) {
        if (typeof obj !== 'object' || obj === null) {
          return obj;
        }

        const newObj = Array.isArray(obj) ? [] : {};

        for (const key in obj) {
          if (Object.prototype.hasOwnProperty.call(obj, key)) {
            const value = obj[key];
            if (value !== null && value !== undefined && value !== '' && !this.isEmptyObject(value)) {
              if (Array.isArray(newObj)) {
                newObj.push(this.removeEmptyValues(value));
              } else {
                newObj[key] = this.removeEmptyValues(value);
              }
            }
          }
        }

        return newObj;
      },
      isEmptyObject(obj) {
        return Object.keys(obj).length === 0 && obj.constructor === Object;
      },

      handleCurrentChange(val) {
        this.currentPage = val
      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      closeFn() {
        this.ggXin = false
      },
      handleClick() {

      },

      //编辑页
      BianchildClose(msg){
        this.actbianMsg.bianshow = msg
        this.getAll()
      },
      //重置按钮
      resetting() {
        this.planName = ''
        this.eventTheme = ''
        this.getAll()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(val)
      },
      actBian(item){
       console.log(item)
       if(item === undefined){
          if( this.multipleSelection.length == 1){
            this.actbianMsg.acBian=  this.multipleSelection[0]
            this.actbianMsg.bianshow = true
          }else{
             this.$message('请选择一个文件修改');
          }
       }else{
         this.actbianMsg.acBian=  item
         this.actbianMsg.bianshow = true
       }

      },
      actSp(item){
            this.actSpye =true
            this.secondData = item
            this.secondData.planTime = [item.eventStartTime, item.eventEndTime]
            mingTable({
              detailsId:item.id,
              pageNumber: 1,
              pageSize: 10,
            }).then(res=>{
               this.mingSp = res.data.content
            })
      },
      MsgShen(val){
         this.index = val
         this.MsgSp =true
      },
      LiuYes(val){
        this.liuYe = val
        this.Liunie = true
      },
      OAshen(){
     if(this.liuYe == 1){
       xiangedit({id:this.secondData.id,state:'5'}).then(res=>{
         this.getAll()
       })
     }else{
       xiangedit({id:this.secondData.id,state:'6'}).then(res=>{
         this.getAll()
       })
     }
 this.Liunie = false
 this.MsgSp =false
 this.actSpye = false
      },
      TabClick(tab, event){
        console.log(tab, event)
      },
      fenTab(tab, event){
        if(tab.index == '0'){
          this.getAll()
        }else{
          this.tableData = []
        }
      },
      fenleiMenu(item){
            if(item.cereClassification){
               this.pageindex.fnelie = item.cereClassification.classificationName
            }else{
               this.pageindex.fnelie = item.classificationName
            }
            this.getAll()

      },
      //详情点击
      handleEditForm(item,val,flag) {
        if(val ==2){
          this.activeName  =  'five'
        }
        this.fileData = []
        this.zhixingList = {
          planTime:[],
          planName: '', //活动名称
          eventAddrs: '', //实际举办地点
          eventStartTime: 0, //实际开始时间
          eventEndTime: 0, //实际结束时间
          sponsor: '', //实际主办方
          participants: '', //实际参与方
          internalLaborCostEstimation: '', //内部人工成本
          externalLaborCostEstimation: '', //外部人工成本
          costEstimationGoods: '', //商品成本
          setCostEstimate: '', //设备成本
          estimatedPromotionalExpenses: '', //宣传费用预估
          otherNecessaryEstimates: '', //其他成本预估
          totalCostEstimation: '', //总成本预估
          notes: '', //备注
          expectedAttractTraffic: '', //吸引流量
          expectedParticipation: '', //参与人数
          expectedDirectBenefits: '', //直接收益
          expectedIndirectBenefits: '', //间接收益
          createDate: '', //创建时间
          feedbackContent:''
        } //执行效果列表
        actPage({
          detailsId: item.id,
          pageNumber: 1,
          pageSize: 10,
        }).then(res => {
          console.log(res.data.content)
          if (res.data.content.length == 0) {
            this.zhiXing = true
          } else {
            mingTable({
              detailsId: res.data.content[0].id,
              pageNumber: 1,
              pageSize: 10,
            }).then(res => {
              this.tableDa = res.data.content
            })
            this.zhiXing = false
            this.zhixingList = res.data.content[0]
            if((typeof this.zhixingList.eventStartTime) == 'object' || (typeof  this.zhixingList.eventEndTime)  == 'object' ){
              this.zhixingList.planTime = []
            }else{
              console.log(typeof  this.zhixingList.eventStartTime)
              this.zhixingList.planTime = [ this.zhixingList.eventStartTime,  this.zhixingList.eventEndTime]
            }

          }
        })
        let that = this
        this.planTime = [item.eventStartTime, item.eventEndTime]
        fujiaTable({
          detailsId: item.id,
          pageNumber: 1,
          pageSize: 10,
        }).then(res => {
          this.tableData6 = res.data.content
        })
        mingTable({
          detailsId: item.id,
          pageNumber: 1,
          pageSize: 10,
        }).then(res => {
          this.tableData2 = res.data.content
        })


        danqueryById({
          id: item.id,
          dataOwnership: '1',
          pageNumber: 1,
          pageSize: 10,
        }).then(res => {
          this.secondData = res.data.content[0]
          //基本信息
          // that.id=res.data.content[0].id
          that.text = res.data.content[0].planName
          that.tableData1[0].eventTheme = res.data.content[0].planType
          that.tableData1[0].planName = res.data.content[0].eventAddrs
          that.tableData1[1].eventTheme = res.data.content[0].eventStartTime
          that.tableData1[1].planName = res.data.content[0].eventEndTime
          that.tableData1[2].eventTheme = res.data.content[0].eventTheme
          that.tableData1[2].planName = res.data.content[0].sponsor
          that.tableData1[3].eventTheme = res.data.content[0].participants
          that.tableData1[3].planName = res.data.content[0].mainPurpose
          that.tableData1[4].planName = this.getStatus(res.data.content[0].state)
          that.tableData1[4].eventTheme =  res.data.content[0].rangeSetting
          //活动成本信息
          that.internalLaborCostEstimation = res.data.content[0].internalLaborCostEstimation
          that.externalLaborCostEstimation = res.data.content[0].externalLaborCostEstimation
          that.tableData3[0].eventTheme = res.data.content[0].costEstimationGoods
          that.tableData3[0].planName = res.data.content[0].setCostEstimate
          that.tableData3[1].eventTheme = res.data.content[0].estimatedPromotionalExpenses
          that.tableData3[1].planName = res.data.content[0].otherNecessaryEstimates
          that.tableData3[2].eventTheme = res.data.content[0].totalCostEstimation
          that.tableData3[2].planName = res.data.content[0].notes
          //预估效果
          that.expectedAttractTraffic = res.data.content[0].expectedAttractTraffic
          that.expectedParticipation = res.data.content[0].expectedParticipation
          that.tableData4[0].eventTheme = res.data.content[0].expectedDirectBenefits
          that.tableData4[0].planName = res.data.content[0].expectedIndirectBenefits
          //系统信息
          that.createUser = res.data.content[0].createUser
          that.createDate = res.data.content[0].createDate

          that.tableData5[0].planName = '-'
          that.tableData5[0].eventTheme = res.data.content[0].updateUser

        }).catch(err => {
          console.log(err)

        })
        if (!item) {
          this.formItem = {}
        } else {
          this.formItem = item
        }
        this.ggXin = true
      },
      refreshData() {
        // console.log('12123')
        this.tableDa = []
        this.activeName = 'first'
        this.zhixingBian = false
      },
    }
  }
</script>

<style scoped>
  /deep/ .first-column-bg {
    background-color: #f4f4f5 !important;
  }

  .zhuti {
 padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;

  }

  /deep/ .el-form-item__content {
    line-height: 0;
  }

  .tableBtn {
    display: inline-block;
    margin-right: 10px;
  }

  .formSearch {
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
    padding-bottom: 10px;
    align-items: center;
  }

  .greens {
    color: #3F9B6A;
  }

  /deep/ .el-table__row {
    font-size: 14px;
    color:#000000e6;
  }

  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    position: relative;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3F9B6A;
  }

  .el-row {
    margin-bottom: 20px;
  }

  :last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    /* background: #d3dce6; */
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  /deep/ .bg-purple[data-v-0e3fe4ec] {
    background: #fff;
    height: 50px;
  }

  /deep/ .el-form--label-top .el-form-item__label {
    padding: 0;
  }

  .pagination {
    text-align: right;
    line-height: 20px;
  }

  /deep/ .el-pagination__total {
    margin-top: 4px;
  }

  /deep/ .dialog_css {
    padding: 0px;
    .el-dialog__header{
      padding:0;
    }
  .el-dialog__title{
    font-size: 14px;
  }
  .el-dialog__body {
    padding: 0px 0px;
  }
  }

  /deep/.el-dialog__body {
    padding: 0px;
  }

  /deep/ .el-dialog__header {
    background-color: #fff;
  }

  /deep/.el-dialog__title {
    color: #000;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 108px;
    height: 108px;
    line-height: 108px;
    /*text-align: center;*/
  }

  .avatar {
    width: 108px;
    height: 108px;
    display: block;
  }

  ::v-deep .el-tabs__item.is-active {
    color: #3F9B6A;
    opacity: 1;
  }

  /deep/ .el-tabs__nav-wrap::after {
    background-color: #fff;
  }

  ::v-deep .el-tabs__item:hover {
    color: #3F9B6A;
    cursor: pointer;
    opacity: 1;
  }

  /deep/ .el-tabs__active-bar {
    background-color: #389865;
  }

  /deep/ .el-table_2_column_13 {
    font-weight: 100;
  }

  ::v-deep .el-input__inner:focus {
    border: #3F9B6A 1px solid;
  }
::v-deep .el-input__inner{
  height:32px;
  line-height:32px;
}
  ::v-deep .el-input__inner:hover {
    border: #3F9B6A 1px solid;
  }

  ::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: #3F9B6A
  }

  ::v-deep .el-form-item__label {
    font-weight: normal;
    font-size: 12px;
  }



  .fenlan {
    display: flex;
  }

  .souLei {
    border: 1px solid #d7d7d7;
    background-color: #fff;
    width:300px;
     margin-right:20px;

  }

::v-deep .el-menu{
  border-right:0px;
}
::v-deep .el-menu-item{
  height:36px;
  line-height: 36px;
}

::v-deep .el-submenu__title{
  height:36px;
  line-height: 36px;
  font-weight:600;
  border-radius:4px;
  margin:4px 0;
}
::v-deep .el-menu-item-group__title{
  padding:0px
}
 ::v-deep .fudan{
      font-weight:600;
     border-radius:4px;
     margin:4px 0;
  }
  ::v-deep .chinddan{
    margin:5px 0;
  }
</style>
<style lang="scss" scoped>
  ::v-deep .souTabs {
    padding:0 15px 0 12px;
    .el-submenu{
      padding:0px;
    }
    .el-menu-item:focus, .el-menu-item:hover{
      background-color: #3F9B6A !important;
    }
    .el-menu-item:hover{
      background-color:#3f9b6a1a !important;
      color:#000 !important;
    }
    .el-tabs--left .el-tabs__header.is-left {
      width: 100%;
      margin-right: 0px;
    }

    .el-tabs--left .el-tabs__item.is-left {
      text-align: center;
    }

    .el-tabs__item.is-active {
      background-color: #DEEBE2;
    }
  }
  ::v-deep .shen_steps1 {
   .is-process { /* 待执行步骤颜色 */
     color: #3F9B6A;
     border:none;
      .el-step__icon{
         background-color: #3F9B6A;
      }
      .el-step__icon-inner{
        color:#fff;
      }
      .el-step__line{
        background-color: #3F9B6A;
      }

  }
 .is-finish{
    color: #3F9B6A;
    border:none;
    .el-step__icon{
       background-color: #3F9B6A;
    }
    .el-step__icon-inner{
      color:#fff;
    }
    .el-step__line{
      background-color: #3F9B6A;
    }
  }

}

::v-deep .liu_steps{
  .step_start{
    flex-basis:15% !important;
    .is-finish{
      border: none;
       color: #3F9B6A;
       .el-step__icon{
          background-color: #D3E6CC;
       }
       .el-step__icon .is-text{
         border: 2px solid #3F9B6A;
       }
       .el-step__icon-inner{
         display: none;
       }
       .el-step__line{
         border-color: #3F9B6A;
       }
     }
     .is-wait{

            border: none;
             color: #000;
             .el-step__icon{
                background-color: #fff;
             }
             .el-step__icon .is-text{
               border: 2px solid #000;
             }
             .el-step__icon-inner{
               display: none;
             }
             .el-step__line{
               background-color: #000;
             }

     }
 .is-process{
      border: none;
       color: #000;
       .el-step__icon{
          background-color: #fff;
       }
       .el-step__icon .is-text{
         border: 2px solid #000;
       }
       .el-step__icon-inner{
         display: none;
       }
       .el-step__line{
         background-color: #000;
       }
     }
  }
  .step_buen{
    flex-basis:25% !important;
      .is-process{
        .el-step__icon{
          padding: 10px;
            border-radius:10px;
            width:120px;
            height:70px;
            margin-top:-24px;
            position: relative;
          border: 2px solid #FABB41;
          font-size: 12px;
        }
        .el-step__icon .is-text{
            padding: 10px;
            border-radius:10px;
          border: 2px solid #FABB41;
          font-size: 12px;
        }
      }
      .is-wait{
        .el-step__icon{
          padding: 10px;
            border-radius:10px;
            width:120px;
            height:70px;
            margin-top:-24px;
            position: relative;
          border: 2px solid #C0C4CC;
          font-size: 12px;
        }
        .el-step__icon .is-text{
            padding: 10px;
            border-radius:10px;
          border: 2px solid #C0C4CC;
          font-size: 12px;
        }
      }
       .is-finish{
         .el-step__icon{
           padding: 10px;
             border-radius:10px;
             width:120px;
             height:70px;
             margin-top:-24px;
             position: relative;
           border: 2px solid #3F9B6A;
           background-color: #D3E6CC;
           font-size: 12px;
           color: #3F9B6A;
         }
         .el-step__icon .is-text{
             padding: 10px;
             border-radius:10px;
           border: 2px solid #3F9B6A;
           font-size: 12px;
         }
         .el-step__line{
           background-color: #3F9B6A;
         }
       }
  }
  ::v-deep .xiang_steps{
   .is-process{ /* 待执行步骤颜色 */
     color: #3F9B6A;
     border:none;
      .el-step__icon{
         background-color: #3F9B6A;
      }
      .el-step__icon-inner{
        color:#fff;
      }
      .el-step__line{
        background-color: #3F9B6A;
      }

  }
 .is-finish{
    color: #3F9B6A;
    border:none;
    .el-step__icon{
       background-color: #3F9B6A;
    }
    .el-step__icon-inner{
      color:#fff;
    }
    .el-step__line{
      border-color: #3F9B6A;
    }
  }


  }
}

 ::v-deep .souTabs {
    .el-submenu{
      padding:0px;
    }
    .el-menu-item:focus, .el-menu-item:hover{
      background-color: #3F9B6A !important;
    }
    .el-menu-item:hover{
      background-color:#3f9b6a1a !important;
      color:#000 !important;
    }
    .el-tabs--left .el-tabs__header.is-left {
      width: 100%;
      margin-right: 0px;
    }

    .el-tabs--left .el-tabs__item.is-left {
      text-align: center;
    }

    .el-tabs__item.is-active {
      background-color: #DEEBE2;
    }
  }

  ::v-deep .tableList {
    width: 74%;

    .el-button:hover {
      border: none
    }
  }
  ::v-deep .actSpye_dialog{
    .dialog__header{
      padding: 0px;
    }
  }
  ::v-deep .el-tabs--border-card {
        border: none;
        -webkit-box-shadow:none;
        box-shadow:none;
    .el-tabs__content{
      border:  1px solid #E4E7ED;
      padding:0;
    }
    .el-tabs__header{
      background-color: #fff;
        border-bottom:none;
    }
    .el-tabs__content{
        border: none;
     }
    .el-tabs__header .el-tabs__item{
      border: none;
      margin-right: 10px;
      background-color: #F2F2F2;
      font-size:12px;
       border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      padding:0 15px;
    }
    .el-tabs__header .el-tabs__item.is-active{
      color:#fff;
      background-color: #3F9B6A;
    }
    .el-tabs__header .el-tabs__item:not(.is-disabled):hover{
       color:#3F9B6A;
    }
  }
  ::v-deep .demo-input-suffix {
    display: flex;
    margin-right: 20px;
    width: 83%;
    .el-input__inner{
       height:32px;
    }
  }
  ::v-deep .buttonHover:hover{
    color:#3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }
  ::v-deep .DelBtnHover:hover{
    color:#fff !important;
    border-color: rgb(226, 78, 90) !important;
    background-color: rgb(226, 78, 90) !important;
    outline: none;
  }
  ::v-deep .el-input__icon{
      line-height:25px;
    }
  ::v-deep .el-input--mini .el-input__icon{
      line-height:33px;
    }
::v-deep .el-menu-item.is-active {
    background-color: #3F9B6A !important;
}
</style>