<template>
  <div class="max-big-box">
    <div v-if="newModifyPageType&&detailsType!=1&&detailsType!=2&&detailsType!=3" class="big-max-box">
      <!--操作按钮-->
      <div class="top-box">
        <div class="input-box">
          <input class="search-input" type="text" v-model="inputData" placeholder="请输入调拨通知单名称/创建人/调拨通知单号关键字进行查询">
          <div class="dropdown-box" v-for="(item,index) in downList" :key="index">
            <p class="dropdown-left-title">{{item.name}}：</p>
            <div class="dropdown-right-box cursor_pointer"
                 @mouseenter="dropdownClickOpen(index,'1')" @mouseleave="dropdownClickOpen(index,'2')">
              <p class="dropdown-text">{{downList[index].downText}}</p>
              <div class="dropdown-for-max" v-if="downList[index].downType">
                <p v-for="(item,indexTwo) in downList[index].list" :key="indexTwo"
                   :class="{'color-A':downList[index].mouseColor == item}"
                   @mouseenter="colorTypeEnter(index,item)" @mouseleave="colorTypeLeave(index)"
                   @click="dropdownClick(index,item)">{{item}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="top-right-box">
          <div class="time-box">
            <p>申请时间：</p>
            <p class="cursor_pointer" @click="openTimeBox('1')">{{playTime}}</p>
            <p>-</p>
            <p class="cursor_pointer" @click="openTimeBox('2')">{{endTime}}</p>
          </div>
          <div class="button-box cursor_pointer">
            <img src="~@/assets/images/icon_27.png" @click="clickQuery">
            <p class="cursor_pointer">查询</p>
          </div>
          <p class="null-p"></p>
          <p class="out-button cursor_pointer" @click="transferNoticeExport" v-if="userPermsData.indexOf('business:transferNotice:export')!=-1">导出EXCEL</p>
          <p class="del-button cursor_pointer" @click="allDel" v-if="userPermsData.indexOf('business:transferNotice:remove')!=-1">批量删除</p>
          <p class="text-p">已选择{{tableNum}}条</p>
        </div>
        <!--步骤条-->
        <div class="steps-box">
          <div class="steps-for-box" v-for="(item,index) in stepsData" :key="index">
            <div v-if="stepsType!='off'">
              <p :class="{'p-color-C':index==0,'p-color-A':index<stepsType||index==stepsType,'p-color-B':index>stepsType}"></p>
              <img v-if="index<stepsType" src="~@/assets/images/icon_44.png">
              <img v-if="index==stepsType" src="~@/assets/images/icon_45.png">
              <img v-if="index>stepsType" src="~@/assets/images/icon_46.png">
              <p :class="{'p-color-C':index==2,'p-color-A':index<stepsType,'p-color-B':index>stepsType||index==stepsType}"></p>
            </div>
            <p class="steps-title" v-if="stepsType!='off'"
               :class="{'steps-color-A':index<stepsType,'steps-color-B':index>stepsType}">{{item}}</p>
          </div>
        </div>
      </div>
      <!--表格-->
      <div class="table-box">
        <el-table
          ref="multipleTable"
          :row-key="getRowKey"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @cell-mouse-enter="mouseenter" @cell-mouse-leave="mouseleave"
          @select-all="handleSelectionChange"
          @select="handleSelectionChange">
          <el-table-column
            :reserve-selection="true"
            type="selection"
            width="50">
          </el-table-column>
          <el-table-column
            type="index"
            :index="indexMethod"
            label="序号"
            width="65">
          </el-table-column>
          <el-table-column
            prop="noticeName"
            label="调拨通知单名称"
            width="170">
          </el-table-column>
          <el-table-column
            prop="noticeNum"
            label="调拨单号"
            width="190">
          </el-table-column>
          <el-table-column
            prop="noticeType"
            label="类型"
            width="102">
            <template slot-scope="scope">
              {{scope.row.noticeType==1?"分拨下发":(scope.row.noticeType==2?"申请计划":(scope.row.noticeType==3?"物资调拨":(scope.row.noticeType==4?"物资调配":"")))}}
            </template>
          </el-table-column>
          <el-table-column
            prop="receptName"
            label="接收单位"
            width="115">
          </el-table-column>
          <el-table-column
            prop="materialDetail"
            label="物资详情"
            width="300">
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            width="230">
          </el-table-column>
          <el-table-column
            label="生成调拨通知单"
            width="190">
            <template slot-scope="scope">
              <p class="button-p cursor_pointer" @click="clickPageType(scope.$index, scope.row)">生成调拨通知单</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="190">
          </el-table-column>
          <el-table-column
            prop="createUser"
            label="创建人"
            width="100">
          </el-table-column>
          <el-table-column
            prop="isApprove"
            label="是否完成审批"
            width="140">
            <template slot-scope="scope">
              <p :class="{'colorA':scope.row.isApprove==0}">{{scope.row.isApprove==1?"是":(scope.row.isApprove==0?"否":"")}}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="tranferApproveResult"
            label="审批结果"
            width="140">
            <template slot-scope="scope">
              <p :class="{'colorA':scope.row.tranferApproveResult==2}">{{scope.row.tranferApproveResult==0?"未审核":(scope.row.tranferApproveResult==1?"通过":(scope.row.tranferApproveResult==2?"退回修改":(scope.row.tranferApproveResult==3?"重新提交":"")))}}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="approveUser"
            label="审批人"
            width="100">
          </el-table-column>
          <el-table-column
            prop="isSendTranfer"
            label="是否完成物资发出"
            width="140">
            <template slot-scope="scope">
              <p v-if="scope.row.isSendTranfer==1&&scope.row.tranferApproveResult==1">是</p>
              <p v-if="scope.row.isSendTranfer==0&&scope.row.tranferApproveResult==1&&userPermsData.indexOf('business:transferNotice:sendConfirmEdit')==-1">否</p>
              <div class="type-box" v-if="scope.row.isSendTranfer==0&&scope.row.tranferApproveResult==1&&userPermsData.indexOf('business:transferNotice:sendConfirmEdit')!=-1">
                <p class="colorA">否</p>
                <p class="cursor_pointer" @click="oneGenerate(scope.$index, scope.row)">确认完成</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="sendTime"
            label="完成时间"
            width="190">
          </el-table-column>
          <el-table-column
            prop="sendUser"
            label="完成人"
            width="100">
          </el-table-column>
          <el-table-column
            prop="isAcceptTranfer"
            label="是否已完成物资接收入库"
            width="140">
            <template slot-scope="scope">
              <p v-if="scope.row.isSendTranfer==1" :class="{'colorA':scope.row.isAcceptTranfer==0}">{{scope.row.isAcceptTranfer==1?"是":(scope.row.isAcceptTranfer==0?"否":"")}}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="acceptTime"
            label="完成时间"
            width="190">
          </el-table-column>
          <el-table-column
            prop="acceptUser"
            label="完成人"
            width="100">
          </el-table-column>
          <el-table-column
            label="操作"
            width="220">
            <template slot-scope="scope">
              <div class="table-min-button" :class="{'table-min-button-one':scope.row.isApprove==0,'table-min-button-two':scope.row.isApprove==1,}">
                <div class="info-box cursor_pointer" @click="handleInfo(scope.$index, scope.row)">
                  <img src="~@/assets/images/icon_36.png">
                  <p>详情</p>
                </div>
                <div v-if="scope.row.isApprove==0&&userPermsData.indexOf('business:transferNotice:remove')!=-1" class="del-box cursor_pointer" @click="handleDelete(scope.$index, scope.row)">
                  <img src="~@/assets/images/icon_38.png">
                  <p>删除</p>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pagesize"
        :total="total">
      </el-pagination>
      <!--时间日历-->
      <div class="time-max-big-box" v-if="timeType!=0">
        <div class="time-big-box">
          <el-calendar class="time-min-box" v-model="timeValue">
          </el-calendar>
          <div class="button-box">
            <p class="cursor_pointer" @click="openTimeBox('0')">返回</p>
            <p class="cursor_pointer" @click="clearTimeData">清除</p>
            <p class="cursor_pointer" @click="setTimeData">确定</p>
          </div>
        </div>
      </div>
    </div>
    <new-modify
      v-if="!newModifyPageType&&detailsType!=1"
      :newModifyData="newModifyData"
      @newModifyLeftClick="newModifyLeftClick"
      @newModifyRightClick="newModifyRightClick"
    ></new-modify>
    <interactive-window
      v-if="windowType"
      :windowData="windowData"
      @windowLeftClick="windowLeftClick"
      @windowRightClick="windowRightClick"
    ></interactive-window>
    <details-page :dataInfo="dataInfo" v-if="detailsType==1"></details-page>
    <generate-transfer-notification :generateNotifications="generateNotifications" v-if="detailsType==2"></generate-transfer-notification>
  </div>
</template>

<script>
  import { transferNoticeList,transferNoticeDel,deptListOrg,sendConfirm,download,transferNoticeExport } from '@/api/userApi'
  export default {
    name: "transferNoticeTwo",//调拨通知单(发出单位)
    components:{
      detailsPage: resolve => {require(['@/components/detailsPage'], resolve)},//详情组件
      newModify: resolve => {require(['@/components/newModify'], resolve)},//新建-修改组件
      interactiveWindow: resolve => {require(['@/components/interactiveWindow'], resolve)},//提示弹窗
      generateTransferNotification: resolve => {require(['@/components/managementOfMaterialAllocation/transferNoticeFather/generateTransferNotification'], resolve)},//生成调拨通知单

    },
    data () {
      return {
        userPermsData:localStorage.getItem('userPerms'),
        //搜索数据
        inputData:"",
        //生成通知单数据
        generateNotifications:{},
        //用户身份标识
        userType:1,//1-调拨中心领导,2-调拨中心工作人员
        //步骤条数据
        stepsData:[
          "完成审批","完成物资发出","完成物资接收入库"
        ],
        stepsType:"off",
        //传输用数据
        transmissionData:{},
        //下拉框
        downList:[
          {
            name:"请选择类型",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:["全部","分拨下发","申请计划","物资调拨","物资调配"],
            idType:["","1","2","3","4",],
          },
          {
            name:"接收单位",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:[],
            idType:[],
          },
          {
            name:"审批状态",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:["全部","已审批","未审批",],
            idType:["","1","0"],
          },
          {
            name:"物资发出状态",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:["全部","已发出","未发出",],
            idType:["","1","0"],
          },
          {
            name:"物资接收入库状态",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:["全部","已入库","未入库",],
            idType:["","1","0"],
          },
        ],
        //表格限制
        pagesize: 8,
        currentPage:1,
        //列表总数
        total:0,
        /*数据*/
        tableData:[],
        //选中数据
        multipleSelection:[],
        // 弹窗状态
        windowType:false,
        //弹窗组件数据
        windowData:{},
        //勾选数量
        tableNum:0,
        // 新增-修改页面状态
        newModifyPageType:true,
        //新增-修改页面数据
        newModifyData:{},
        //搜索时间
        playTime:"请选择时间",
        endTime:"请选择时间",
        //日历时间
        timeValue: new Date(),
        timeType:0,
        // 详情页状态
        detailsType:0,
        //给组件传参数据
        dataInfo:[],
      }
    },

    created(){

    },
    mounted() {
      this.deptListOrg();

    },
    methods: {
      // 导出excel
      async transferNoticeExport(){
        let self = this;
        const { data } = await transferNoticeExport();
        if(data.code == 200){
          self.download(data.msg);
        }
      },
      // 下载
      async download(url){
        let self = this;
        let obj ={
          fileName:url,
          delete:true,
        };
        const { data } = await download(obj);
        const link = document.createElement('a')
        let blob = new Blob([data], {type: 'application/vnd.ms-excel'});
        link.style.display = 'none';
        link.href = URL.createObjectURL(blob);
        link.download = "调拨通知单"; //下载的文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      },
      //点击查询
      clickQuery(){
        this.currentPage = 1;
        this.getListData();
      },
      // 单独删除
      async clickDel(id){
        let ids = [];
        ids.push(id)
        const { data } = await transferNoticeDel(ids);
        if(data.code==200){
          this.windowData = {
            type:"2",
            title:"提示",
            text:"操作成功",
          };
          this.windowType = !this.windowType;
          this.$refs.multipleTable.clearSelection();
          this.getListData();
        }
      },
      //批量删除
      async clickAllDel () {
        let self = this;
        let ids = [];
        for(let i=0;i<self.multipleSelection.length;i++){
          ids.push(self.multipleSelection[i].id)
        }
        const { data } = await transferNoticeDel(ids);
        if(data.code==200){
          this.windowData = {
            type:"2",
            title:"提示",
            text:"操作成功",
          };
          this.windowType = !this.windowType;
          this.$refs.multipleTable.clearSelection();
          this.getListData();
        }
      },
      //接收单位-下拉列表
      async deptListOrg () {
        let self = this;
        const { data } = await deptListOrg();
        if(data.code==200){
          let list = [];
          let idType = [];
          list.push("全部");
          idType.push("");
          for(let i=0;i<data.data.length;i++){
            list.push(data.data[i].deptName);
            idType.push(data.data[i].deptId);
          }
          self.downList[1].list = list;
          self.downList[1].idType = idType;
          this.getListData();
        }
      },
      //数据列表
      async getListData () {
        let self = this;
        let obj={
          searchType:"1",
          searchValue:self.inputData,
          noticeType:"",
          receptId:"",
          isApprove:"",
          isSendTranfer:"",
          isAcceptTranfer:"",
          pageSize:self.pagesize,
          pageNum:self.currentPage,
          "params[beginTime]":self.playTime=="请选择时间"?"":self.playTime,
          "params[endTime]":self.endTime=="请选择时间"?"":self.endTime,
        };
        for(let i=0;i<self.downList[0].list.length;i++){
          if(self.downList[0].downText==self.downList[0].list[i]){
            obj.noticeType = self.downList[0].idType[i];
          }
        }
        for(let i=0;i<self.downList[1].list.length;i++){
          if(self.downList[1].downText==self.downList[1].list[i]){
            obj.receptId = self.downList[1].idType[i];
          }
        }
        for(let i=0;i<self.downList[2].list.length;i++){
          if(self.downList[2].downText==self.downList[2].list[i]){
            obj.isApprove = self.downList[2].idType[i];
          }
        }
        for(let i=0;i<self.downList[3].list.length;i++){
          if(self.downList[3].downText==self.downList[3].list[i]){
            obj.isSendTranfer = self.downList[3].idType[i];
          }
        }
        for(let i=0;i<self.downList[4].list.length;i++){
          if(self.downList[4].downText==self.downList[4].list[i]){
            obj.isAcceptTranfer = self.downList[4].idType[i];
          }
        }
        const { data } = await transferNoticeList(obj);
        if(data.code==200){
          this.tableData = data.rows;
          this.total = data.total;
          this.tableNum = 0;
          this.$forceUpdate();
        }
      },
      mouseenter(row){
        if(row.isApprove == 0 && row.isSendTranfer == 0 && row.isAcceptTranfer == 0){
          this.stepsType = 0;
        }else if(row.isApprove == 1 && row.isSendTranfer == 0 && row.isAcceptTranfer == 0){
          this.stepsType = 1;
        }else if(row.isApprove == 1 && row.isSendTranfer == 1 && row.isAcceptTranfer == 0){
          this.stepsType = 2;
        }else if(row.isApprove == 1 && row.isSendTranfer == 1 && row.isAcceptTranfer == 1){
          this.stepsType = 3;
        }
      },
      mouseleave(row){
        this.stepsType = 'off';
      },
      //时间选择事件
      openTimeBox(type){
        this.timeType=type
      },
      setTimeData(){
        let year = this.timeValue.getFullYear();
        let month = this.timeValue.getMonth()+1;
        let day = this.timeValue.getDate();
        if(this.timeType==1){
          this.playTime = year+'-'+month+'-'+day;
        }else if(this.timeType==2){
          this.endTime = year+'-'+month+'-'+day;
        }
        this.timeType = 0;
      },
      clearTimeData(){
        if(this.timeType==1){
          this.playTime = "请选择时间";
        }else if(this.timeType==2){
          this.endTime = "请选择时间";
        }
        this.timeType = 0;
      },
      //下拉菜单进入悬浮状态
      colorTypeEnter(type,item){
        this.downList[type].mouseColor=item;
      },
      //下拉菜单离开悬浮状态
      colorTypeLeave(type){
        this.downList[type].mouseColor = "";
      },
      // 下拉菜单选项悬浮事件
      dropdownClickOpen(type,state){
        if(state==1){
          this.downList[type].downType = true
        }else if(state==2){
          this.downList[type].downType = false
        }
      },
      // 下拉菜单点击事件
      dropdownClick(type,item){
        this.downList[type].downText = item;
        this.downList[type].downType = false;
      },
      // 确认发出
      oneGenerate(index,row){
        this.windowData = {
          type:"1",
          title:"提示",
          text:"要确认完成吗?",
          leftButton:"取消",
          rightButton:"确定",
          cType:"3",
          newId:row.id
        };
        this.windowType = !this.windowType;
      },
      //新建组件状态切换
      clickPageType(index,row){
        this.generateNotifications = row.id
        this.detailsType = 2;
      },
      // 批量删除
      allDel(){
        if(this.multipleSelection[0]){
          this.windowData = {
            type:"1",
            title:"提示",
            text:"确定要批量删除这些信息吗?",
            leftButton:"取消",
            rightButton:"确定",
            cType:"1",
          };
          this.windowType = !this.windowType;
        }else{
          this.windowData = {
            type:"3",
            title:"提示",
            text:"您没有勾选任何数据!",
          };
          this.windowType = !this.windowType;
        }
      },
      //表格绑定ID
      getRowKey (row) {
        return row.id
      },
      indexMethod(index) {
        return (this.currentPage-1)*this.pagesize+index+1;
      },
      //翻页
      handleCurrentChange(val) {
        console.log(`当前页: `,val);
        this.currentPage = val;
        this.getListData();
      },
      handleInfo(index, row){
        this.dataInfo =[
          {
            name:"调拨通知单名称",
            value:row.noticeName,
          },
          {
            name:"调拨单号",
            value:row.noticeNum
          },
          {
            name:"类型",
            value:row.noticeType==1?"分拨下发":(row.noticeType==2?"申请计划":(row.noticeType==3?"物资调拨":(row.noticeType==4?"物资调配":""))),
          },
          {
            name:"发出单位",
            value:row.sendOrganizationName,
          },
          {
            name:"接收单位",
            value:row.receptName,
          },
          {
            name:"物资详情",
            value:row.materialDetail,
          },
          {
            name:"备注",
            value:row.remark,
          },
          {
            name:"创建时间",
            value:row.createTime,
          },
          {
            name:"创建人",
            value:row.createUser,
          },
        ]
        if(row.isApprove==1){
          this.dataInfo.push({
            name:"是否完成审批",
            value:row.isApprove==1?"是":"否",
          })
          this.dataInfo.push({
            name:"审批结果",
            value:row.tranferApproveResult==0?"未审批":(row.tranferApproveResult==1?"通过":(row.tranferApproveResult==2?"退回修改":(row.tranferApproveResult==3?"重新提交":""))),
          })
          this.dataInfo.push({
            name:"审批人",
            value:row.approveUser,
          })
        }else{
          this.dataInfo.push({
            name:"是否完成审批",
            value:row.isApprove==1?"是":"否",
          })
        }
        if(row.isSendTranfer==1){
          this.dataInfo.push({
            name:"是否已完成物资发出",
            value:row.isSendTranfer==1?"是":"否",
          })
          this.dataInfo.push({
            name:"完成时间",
            value:row.sendTime,
          })
          this.dataInfo.push({
            name:"完成人",
            value:row.sendUser,
          })
        }else{
          this.dataInfo.push({
            name:"是否已完成物资发出",
            value:row.isSendTranfer==1?"是":"否",
          })
        }
        if(row.isAcceptTranfer==1){
          this.dataInfo.push({
            name:"是否已完成物资接收入库",
            value:row.isAcceptTranfer==1?"是":"否",
          })
          this.dataInfo.push({
            name:"完成时间",
            value:row.acceptTime,
          })
          this.dataInfo.push({
            name:"完成人",
            value:row.acceptUser,
          })
        }else{
          this.dataInfo.push({
            name:"是否已完成物资接收入库",
            value:row.isAcceptTranfer==1?"是":"否",
          })
        }
        this.detailsType = 1;
      },
      // 删除
      handleDelete(index, row) {
        this.windowData = {
          type:"1",
          title:"提示",
          text:"确定要删除这条信息吗?",
          leftButton:"取消",
          rightButton:"确定",
          cType:"2",
          newId:row.id
        };
        this.windowType = !this.windowType;
      },
      //勾选
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.tableNum = this.multipleSelection.length
      },
      //弹窗组件左侧按钮方法-对应取消方法
      windowLeftClick(){
        this.windowType = !this.windowType;
      },
      //弹窗组件右侧按钮方法
      windowRightClick(data){
        this.windowType = false;
        if(data.cType==1){
          this.clickAllDel();
        }else if(data.cType==2){
          this.clickDel(data.newId);
        }else if(data.cType==3){
          this.sendConfirm(data.newId);
        }
      },
      // 确认发出
      async sendConfirm(id){
        let param = new FormData();
        param.append('id ',id);
        const { data } = await sendConfirm(param);
        if(data.code==200){
          this.windowData = {
            type:"2",
            title:"提示",
            text:"确认成功",
          };
          this.windowType = !this.windowType;
          this.getListData();
        }
      },
      //新增-修改组件内左侧按钮事件
      newModifyLeftClick(){
        this.newModifyPageType = !this.newModifyPageType;
      },
      //新增-修改组件内左侧按钮事件
      newModifyRightClick(data){
        this.newModifyPageType = !this.newModifyPageType;
        console.log("右键传值",data);
        this.windowData = {
          type:"2",
          title:"提示",
          text:"操作成功",
          leftButton:"取消",
          rightButton:"确定",
        };
        this.windowType = !this.windowType;
      },
      //供子组件调用方法
      outPage(){
        this.detailsType = 0;
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    display flex
    flex-direction column
    flex:1;
    .big-max-box
      display flex
      flex-direction column
      flex:1;
      //搜索与操作按钮
      .top-box
        height:150px;
        .input-box
          width:1720px;
          height:30px;
          display flex
          margin-left:105px;
          .search-input
            height:28px;
            width:370px;
            border:1px solid $theme;
            padding-left:10px;
          .dropdown-box
            display flex
            color:$color_ff;
            z-index:1;
            margin-left:15px;
            .dropdown-left-title
              line-height:30px;
              font-size:$font_14;
            .dropdown-right-box
              font-size:$font_12;
              .dropdown-text
                width:160px;
                height:30px;
                line-height:30px;
                background:url("~@/assets/images/button_15.png");
                background-size:100% 100%;
              .dropdown-for-max
                background:$backColor1;
                border-bottom-right-radius 4px
                border-bottom-left-radius 4px
                p
                  width:160px;
                  height:30px;
                  line-height:30px;
                .color-A
                  /*
                  background:$backColor2 !important;
                  color:$color_ff !important;
                  */
                  color:$theme !important;
                  border-bottom-right-radius 4px
                  border-bottom-left-radius 4px
        .top-right-box
          display flex
          margin-top: 20px;
          .time-box
            width:380px;
            display flex
            margin-left:486px;
            p
              color:$color_ff;
            p:nth-child(1)
              width:100px;
              line-height:30px;
              font-size:$font_14;
            p:nth-child(2)
              width:120px;
              height:30px;
              background url("~@/assets/images/button_08.png")
              background-size 100% 100%
              font-size:$font_12;
              line-height:30px;
            p:nth-child(3)
              width:27px;
              line-height:30px;
            p:nth-child(4)
              width:120px;
              height:30px;
              background url("~@/assets/images/button_08.png")
              background-size 100% 100%
              line-height:30px;
              font-size:$font_12;
          .button-box
            margin-left:15px;
            display flex
            height:30px;
            width:80px;
            background:url("~@/assets/images/button_03.png");
            background-size:100% 100%;
            img
              display block
              height:20px;
              width:20px;
              margin:5px 6px 0 13px;
            p
              line-height:30px;
              font-size:$font_12;
              color:$color_ff;
          .null-p
            flex:1;
          .add-button
            width:136px;
            height:30px;
            background:url("~@/assets/images/button_07_1.png");
            background-size:100% 100%;
            line-height:30px
            color:$color_ff;
            font-size:$font_12;
            padding-left:34px;
            text-align left
          .out-button
            margin-left:30px;
            width:110px;
            height:30px;
            background:url("~@/assets/images/button_07_2.png");
            background-size:100% 100%;
            line-height:30px
            color:$color_ff;
            font-size:$font_12;
            padding-left:35px;
            text-align left
          .del-button
            margin-left:30px;
            width:110px;
            height:30px;
            background:url("~@/assets/images/button_05_1.png");
            background-size:100% 100%;
            line-height:30px
            color:$color_ff;
            font-size:$font_12;
            padding-left:41px;
            text-align left
          .text-p
            width:90px;
            color:$color_ff;
            line-height:30px
            font-size:$font_12;
            margin-right:105px;
        /*步骤条*/
        .steps-box
          width:590px;
          height:60px;
          margin:10px auto 0;
          display: flex
          .steps-for-box
            div
              display: flex
              img
                height:30px;
                width:30px;
              p
                width:100px;
              .p-color-A
                height:8px;
                background:$theme;
                margin-top:11px;
              .p-color-B
                height:6px;
                background:$color_a1;
                margin-top:13px;
              .p-color-C
                height:6px;
                background:rgba(255,255,255,0);
                margin-top:13px;
            .steps-title
              line-height:30px;
              font-size:$font_16;
              text-align center
              color:$color_ff;
            .steps-color-A
              color:$theme;
            .steps-color-B
              color:$color_ff;
      //表格
      .table-box
        width:1710px !important;
        margin:10px 105px;
        text-align center !important
        .button-p
          background $theme2
          color:$color_ff;
          border-radius:4px;
          width:120px;
          margin:0 auto;
        .type-box
          display flex
          width:110px;
          margin:0 auto;
          p:nth-child(1)
            width:40px;
          p:nth-child(2)
            width:60px;
            color:#333;
            font-size:$font_12;
            background url("~@/assets/images/button_14.png")
            background-size 100% 100%
            border-radius:4px;
        .colorA
          color:$theme3;
        .colorB
          color:$theme;
        .table-min-button-one
          width:145px;
        .table-min-button-two
          width:65px;
        .table-min-button
          margin:0 auto;
          display flex
          .info-box
            height:20px;
            width:60px;
            font-size:$font_14;
            color:$theme;
            display flex
            margin-right:11px;
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
          .add-box
            height:20px;
            width:60px;
            font-size:$font_14;
            color:$theme;
            display flex
            margin-right:11px;
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
          .del-box
            height:20px;
            width:70px;
            font-size:$font_14;
            color:$theme3;
            display flex
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
      //时间日历
      .time-max-big-box
        z-index 6
        height:100%;
        width:100%;
        position: absolute
        top:0;
        left:0;
        background:rgba(0,0,0,0.3);
        .time-big-box
          z-index 6
          height:750px;
          width:660px;
          position: absolute
          top:50%;
          left:50%;
          transform :translate3d(-50%,-50%,0)
          margin:auto;
          background $color_ff
          border-radius:8px;
          border:4px solid $theme;
          .button-box
            display flex
            color:$color_ff;
            width:390px;
            margin:20px auto;
            p:nth-child(1)
              height:30px;
              line-height:30px;
              width:120px;
              background:url("~@/assets/images/button_10.png");
              background-size 100% 100%
            p:nth-child(2)
              margin-left:20px;
              height:30px;
              line-height:30px;
              width:120px;
              background:url("~@/assets/images/button_05.png");
              background-size 100% 100%
            p:nth-child(3)
              margin-left:20px;
              height:30px;
              line-height:30px;
              width:120px;
              background:url("~@/assets/images/button_02.png");
              background-size 100% 100%
    //修改日期选择样式
    /*
    .el-calendar
      background $color_ff
    */
    //修改table表格样式
    .el-table
      background rgba(6,177,240,0.2)
    .el-table /deep/ .el-table__empty-text
      width: 100%;
      text-align left
      margin-left:825px;
    .el-table /deep/ .el-table__body-wrapper::-webkit-scrollbar
      width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    .el-table /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px $theme;
      background: $theme;
    .el-table /deep/ .el-table__body-wrapper::-webkit-scrollbar-track
      -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
      border-radius: 0;
      background: rgba(255,255,255,0);
    .el-table /deep/ tr
    .el-table /deep/ th
      background rgba(6,177,240,0)
    .el-table::before
      height:0;
    .el-table /deep/ .cell
      max-height:46px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    .el-table /deep/ td
    .el-table /deep/ th.is-leaf
      border-bottom:0!important;
    .el-table /deep/ .el-checkbox__inner
      //background rgba(6,177,240,0.2)
      border 1px solid #216f93 !important
    .el-table /deep/ thead
      color:$color_ff;
    .el-table
      color:$color_a1
    .el-table /deep/ th
      text-align-last: center;
    .el-table /deep/ td
      text-align-last: center;
    .el-table /deep/ tbody tr:hover > td
      background rgba(6,177,240,0.2)
      color:$theme;
    .el-table /deep/ .el-checkbox
      width:14px;
      margin:0 auto;
      display block
    //修改动作条样式
    .el-pagination.is-background /deep/ .btn-next
    .el-pagination.is-background /deep/ .btn-prev
    .el-pagination.is-background /deep/ .el-pager li
      background:url("~@/assets/images/button_13.png");
      color:$color_ff;
    .el-pagination.is-background /deep/ .el-pager li:not(.disabled).active
      background:url("~@/assets/images/button_14.png");
      color:$color_ff;
    .colorA
      color :$theme;
    ::-webkit-input-placeholder
      color: $border_1;
    ::-moz-placeholder
      color: $border_1;
    ::-ms-input-placeholder
      color: $border_1;

</style>
