<template>
  <div class="app-container">
    <factorylist @getFactory="getFactory" ref="factory"></factorylist>
    <div class="filter-container">
      <el-input size="mini" v-model.trim="search.orderCode" placeholder="订单编号" style="width: 150px;" class="filter-item"/>
      <el-input size="mini" v-model.trim="search.orderName" placeholder="印品名称" style="width: 150px;" class="filter-item"/>
      <el-input size="mini" v-model.trim="search.clientName" placeholder="客户名称" style="width: 150px;" class="filter-item"/>
      <el-input size="mini" v-model.trim="search.allProcessStr" placeholder="工序名称" style="width: 150px;" class="filter-item"/>
      <el-select size="mini" filterable v-model="search.idProduct" style="width: 180px" clearable placeholder="产品类型">
        <el-option
          v-for="item in productList"
          :key="item.id"
          :label="item.productName"
          :value="item.id">
        </el-option>
      </el-select>
      <span style="font-size: 13px;color: #7c7c7c">外协状态:</span>
      <el-select style="width: 95px;" size="mini" v-model="search.orderOutSourceStateTmp" placeholder="外协状态">
        <el-option
          v-for="item in optionsList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span style="font-size: 13px;color: #7c7c7c">发货状态:</span>
      <el-select style="width: 95px;" size="mini" v-model="search.orderSendStateTmp" placeholder="发货状态">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
      <el-button type="primary" size="mini" icon="el-icon-refresh" @click="getTableInfo">刷新</el-button>
      <!--      <div class="top-right-btn">-->
      <!--        <el-tooltip class="item" effect="dark" content="刷新" placement="top">-->

      <!--        </el-tooltip>-->
      <!--      </div>-->
    </div>
    <div class="hline-table">
      <el-table
        :row-class-name="tableRowClassName"
        size="mini"
        :data="tableData"
        v-loading="listLoading"
        max-height="700"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        :default-sort = "{prop: 'printBillCode', order: 'descending'}"
        default-expand-all>
        <el-table-column
          label="#"
          align="center"
          type="index"
          :index="indexMethod">
        </el-table-column>
        <el-table-column label="操作" align="center" width="100px" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button type="green" size="mini" @click="handleCreateAdd(row.id,row.businessKind)" icon="el-icon-plus"
                       class="iconfont"
                       title="开制外协单"></el-button>
            <!--          <el-button-->
            <!--            @click=""-->
            <!--            type="primary" title="查看订单进度" icon="el-icon-tickets" size="mini">-->
            <!--          </el-button>-->
            <!--          <el-button title="打印外协单" icon="el-icon-document-copy" @click="handleDetail(row.id)" type="success"-->
            <!--                     size="mini">-->
            <!--          </el-button>-->
          </template>
        </el-table-column>
        <el-table-column
          label="订单消息"
          width="200px"
          show-overflow-tooltip
        >
          <template slot-scope="{row}">
            <template v-if="row.orderMessage">
              <el-button size="mini" circle icon="el-icon-plus" @click="openMessage(row)"></el-button>
              <a href="javascript:;" style="color: #20a0ff" @click="openMessage(row)">{{ row.orderMessage }}</a>
            </template>
            <template v-else>
              <el-button size="mini" circle icon="el-icon-plus" @click="openMessage(row)"></el-button>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="下机标记"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.printStatus==1">已下机</span>
          </template>
        </el-table-column>
        <el-table-column
          label="产品类型"
          width="120px"
        >
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.productName" placement="top-start" effect="light">
              <span class="ellipsis">{{ scope.row.productName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="印品名称"
          width="100px"
        >
          <template slot-scope="scope">

            <el-tooltip :content="scope.row.orderName" placement="top-start" effect="light">
              <a class="ellipsis" href="javascript:;" style="color: #20a0ff"
                 @click="openDetail(scope.row)">{{ scope.row.orderName }}</a>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          width="140px"
          label="订单编号"
        >
          <template slot-scope="scope">
            <a href="javascript:;" style="color: #20a0ff" @click="getOrderStep(scope.row)">{{ scope.row.orderCode }}</a>
            <el-image v-if="scope.row.firstOrderFlag == 1" :src="new_badge"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="订单状态"
        >
          <template slot-scope="{row}">
            <el-tag size="mini" v-if="row.stateMemo == '待组版'">{{ row.stateMemo }}</el-tag>
            <el-tag size="mini" v-else-if="row.stateMemo == '待审核'" type="success">{{ row.stateMemo }}</el-tag>
            <el-tag size="mini" v-else-if="row.stateMemo == '生产中'" type="danger">{{ row.stateMemo }}</el-tag>
            <el-tag size="mini" v-else-if="row.stateMemo == '待入库'" type="danger">{{ row.stateMemo }}</el-tag>
            <el-tag size="mini" v-else-if="row.stateMemo == '已入库'" type="warning">{{ row.stateMemo }}</el-tag>
            <el-tag size="mini" v-else-if="row.stateMemo == '已发货'" type="info">{{ row.stateMemo }}</el-tag>
            <el-tag size="mini" v-else-if="row.stateMemo == '部分发货'" type="info">{{ row.stateMemo }}</el-tag>
            <el-button size="mini" class="button-new-tag" v-else>{{ row.stateMemo }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="施工单号"
          sortable
          prop="printBillCode"
          width="100px"
        >
          <template slot-scope="scope">

            <el-tooltip :content="scope.row.printBillCode" placement="top-start" effect="light">
              <span class="ellipsis">{{ scope.row.printBillCode }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="客户名称"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.clientName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单后工"
          show-overflow-tooltip
          width="130px"
        >
          <template slot-scope="scope">
            <span> {{ scope.row.allProcessStr }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="已外协后工"
          width="130px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.outSourceProcessStr }}</span>
          </template>
        </el-table-column>

        <!--      <el-table-column-->
        <!--        label="后工金额"-->
        <!--      >-->
        <!--        <template slot-scope="scope">-->
        <!--          {{ scope.row.orderMoneyProcess }}-->
        <!--        </template>-->
        <!--      </el-table-column>-->
        <!--      <el-table-column-->
        <!--        label="印刷金额"-->
        <!--      >-->
        <!--        <template slot-scope="scope">-->
        <!--          {{ scope.row.orderMoneyPrint }}-->
        <!--        </template>-->
        <!--      </el-table-column>-->
        <!--      <el-table-column-->
        <!--        label="总金额"-->
        <!--      >-->
        <!--        <template slot-scope="scope">-->
        <!--          {{ scope.row.orderMoneyTotal }}-->
        <!--        </template>-->
        <!--      </el-table-column>-->
        <!--      <el-table-column-->
        <!--        label="外协单位"-->
        <!--      >-->
        <!--        <template slot-scope="scope">-->
        <!--        </template>-->
        <!--      </el-table-column>-->
        <el-table-column
          width="130px"
          label="交货日期"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.deliverDate">{{ scope.row.deliverDate | getTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="120px"
          label="下单日期"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.updateTime | getTime }}</span>
          </template>
        </el-table-column>


        <el-table-column
          label="制单人"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createMan }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单备注"
        >
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.orderMemo" placement="top-start" effect="light">
              <span class="ellipsis">{{ scope.row.orderMemo }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page"
                :limit.sync="listData.pageSize" @pagination="getTableInfo"/>
    <el-dialog title="外协单详情" :visible.sync="printVisible" width="800px">
      <el-row :gutter="20">
        <el-col :span="24">
          <div
            style="margin-bottom: 15px;font-size: 16px;color: #3c3c3c;border-bottom: 1px solid #ddd;padding-bottom: 5px;"
            class="clearfix"><span>单据详情</span></div>
        </el-col>
        <el-col :span="6">
          <div class="item-print">
            <span class="print-tit">单据号:</span>
            <span class="print-con">{{ printBillDetail.billCode }}</span>
          </div>

        </el-col>
        <el-col :span="6">
          <div class="item-print">
            <span class="print-tit">单据名称:</span>
            <span class="print-con">{{ printBillDetail.billName }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-print">
            <span class="print-tit">产品类型:</span>
            <span class="print-con">{{ printBillDetail.productName }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-print">
            <span class="print-tit">客户名称:</span>
            <span class="print-con">{{ printBillDetail.clientName }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-print">
            <span class="print-tit">工序:</span>
            <span class="print-con">{{ printBillDetail.processText }}</span>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="item-print">
            <el-tabs type="border-card">
              <el-tab-pane label="生产信息">
                <div style="border: 1px solid #ddd; margin-top: 15px;width: 1070px;">
                  <div class="card-tit">用料</div>
                  <div style="float: left;overflow-x: auto;overflow-y: auto;">
                    <el-table
                      class="tb-edit"
                      row-key="id"
                      highlight-current-row
                      border
                      size="mini"
                      :data="printBillBreedList"
                      style="width: 1000px;">
                      <el-table-column
                        prop="breedName"
                        label="版名称"
                      ></el-table-column>

                      <el-table-column
                        prop="printCount"
                        label="版正印量"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="cutCount"
                        label="纸张开数"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="cutSize"
                        label="开纸尺寸"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="wholePaperCount"
                        label="大纸张数"
                      >
                      </el-table-column>

                      <el-table-column
                        prop="paperPrice"
                        label="纸张价格"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="breedPaperPrice"
                        label="版纸张价格"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="idActualPaperInfo"
                        label="实际发纸"
                      >
                      </el-table-column>
                    </el-table>
                  </div>
                  <div style="clear: both"></div>
                </div>
                <div style="border: 1px solid #ddd;margin-top: 15px;width: 1070px;">
                  <div class="card-tit">印刷</div>
                  <div style="float: left;">
                    <el-table
                      class="tb-edit"
                      row-key="id"
                      highlight-current-row
                      border
                      size="mini"
                      :data="printBillBreedList"
                      style="width: 100%">
                      <el-table-column
                        prop="breedName"
                        label="版名称"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="colorCount"
                        label="印刷色数"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="PSGroupCount"
                        label="PS版套数"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="PSCount"
                        label="纸张开数"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="PSSize"
                        label="ps版规格"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="completeCount"
                        label="下机数量"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="printCosts"
                        label="印刷费"
                      >
                      </el-table-column>
                    </el-table>
                  </div>
                  <div style="clear: both"></div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="订单列表">
                <el-table
                  border
                  size="mini"
                  :data="printOrderList"
                  style="width: 100%">
                  <el-table-column
                    prop="id"
                    label="id"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="orderName"
                    label="印品名称"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="clientName"
                    label="客户名称"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="orderPrice"
                    label="订单价格"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="orderCode"
                    label="订单编号"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="orderMemo"
                    label="生产备注"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="orderPrice"
                    label="订单价格"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="orderPrice"
                    label="订单价格"
                  >
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="工序信息">
                <el-table
                  border
                  size="mini"
                  :data="processList"
                  style="width: 100%">
                  <el-table-column
                    prop="id"
                    label="id"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="processName"
                    label="工序名称"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="partHeight"
                    label="部件长"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="partWidth"
                    label="部件宽"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="rotationAngle"
                    label="旋转角度"
                  >
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="版式示意">
              </el-tab-pane>
              <el-tab-pane label="外协单">
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-row>
      <el-row>

      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="printVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="dialogTitle" :close-on-click-modal="false" :visible.sync="dialogVisible" width="1200px">
      <el-row>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>外协单</span>
            <span v-if="printOrder.billCode">({{ printOrder.billCode }})</span>

            <el-button v-if="dialogStatus==1" size="mini" type="warning" @click="addBtn('ruleForm',1)">保存并打印</el-button>
            <el-button size="mini" type="primary" @click="dialogStatus==='1'?addBtn('ruleForm',0):editBtn('ruleForm')">保 存
            </el-button>
            <el-button size="mini" @click="dialogVisible = false">关 闭</el-button>
          </div>
          <div>
            <el-form size="mini" label-width="130px" ref="ruleForm"
                     label-position="right">
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="订单编号">
                    <span>{{ printOrder.orderCode }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="下单时间">
                    <span v-if="printOrder.createTime">{{ printOrder.createTime | getTime }}</span>
                  </el-form-item>
                </el-col>
                <!--                <el-col :span="8">-->
                <!--                  <el-form-item label="联系人">-->
                <!--                    <el-input v-model="printOrder.financeCode"></el-input>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
                <!--                <el-col :span="8">-->
                <!--                  <el-form-item label="联系电话">-->
                <!--                    <el-input v-model="printOrder.financeCode"></el-input>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
                <el-col :span="8">
                  <el-form-item label="印品名称">
                    <el-input v-model="printOrder.orderName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="外协单位">
                    <el-button @click="checkFactory" size="mini">{{ outAssistName }}</el-button>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="交货时间">
                    <span>{{ printOrder.deliverDate | getTime }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="订单印量">
                    <el-input :disabled="true" v-model="printOrder.orderQty"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="物流方式">
                    <el-select v-model="printOrder.deliverMethod" placeholder="请选择">
                      <el-option label="自提自送" value="自提自送"></el-option>
                      <el-option label="管接不送" value="管接不送"></el-option>
                      <el-option label="不接管送" value="不接管送"></el-option>
                      <el-option label="不接不送" value="不接不送"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col v-if="businessKind==1" :span="8">
                  <el-form-item label="外协单金额">
                    <el-input type="number" v-model="printOrder.outAssistFee"></el-input>
                  </el-form-item>
                </el-col>

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

          </div>

        </el-card>
      </el-row>
      <el-row v-show="businessKind==0" style="margin-top: 20px">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="外协工序" name="first">
            <div>
              <el-table
                ref="multipleTable"
                size="mini"
                class="tb-edit"
                row-key="id"
                highlight-current-row
                :data="uniqueProcessList"
                tooltip-effect="dark"
                style="width: 100%"
                @row-click="handleClickTableRow"
                :row-class-name="tableRowClassNameCurrent"
                @selection-change="handleSelectionChange">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  width="120px"
                  label="外协工序"
                >
                  <template slot-scope="scope"><span style="display: inline-block;width: 120px" @click="handleSelecTemplate(scope.row)">{{ scope.row.processName }}</span></template>
                </el-table-column>
                <el-table-column
                  label="尺寸"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model="scope.row.orderSize"
                      placeholder="请输入尺寸"
                      @change="handleProcessMoney(scope.$index, scope.row.orderSize)"></el-input>
                    <span>{{ scope.row.orderSize }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="工序数量"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.trim="scope.row.processQty"
                      placeholder="请输入工序数量"
                      @input="handleProcessMoneyQty(scope.$index, scope.row.processQty)"></el-input>
                    <span>{{ scope.row.processQty }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="金额"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      :ref="`input-${scope.$index}`"
                      v-model.trim="scope.row.processMoney"
                      placeholder="请输入金额"
                      @input="handleProcessMoneyTotal(scope.$index, scope.row.processMoney)"></el-input>
                    <span>{{ scope.row.processMoney }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="备注"
                  width="600px"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model="scope.row.processMemo"
                      placeholder="请输入备注"
                      @change="handleProcessMoney(scope.$index, scope.row.processMemo)"></el-input>
                    <span>{{ scope.row.processMemo }}</span>
                  </template>
                </el-table-column>
              </el-table>

            </div>
          </el-tab-pane>
          <el-tab-pane label="施工单列表" name="second">
            <div>
              <el-table
                size="mini"
                :data="tableDataPrint"
                style="width: 100%;"
                row-key="id"
                border
                default-expand-all>
                <el-table-column
                  label="#"
                  width="50px"
                  align="center"
                  type="index"
                  :index="indexMethod">
                </el-table-column>
                <el-table-column
                  label="施工单号"
                  width="110px"
                >
                  <template slot-scope="{row}">
                    <span>{{ row.billCode }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="施工单名称"
                  width="140px"
                  show-overflow-tooltip
                >
                  <template slot-scope="{row}">
          <span @click="handleDetailPrint(row.id)" style="color: #409EFF;cursor: pointer"
                class="ellipsis"> {{ row.billName }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  width="160px"
                  prop="createManName"
                  label="建单人">
                </el-table-column>
                <el-table-column
                  width="220px"
                  label="订单详细信息">
                  <template slot-scope="scope">
                    <el-tooltip v-if="scope.row.orderProduceInfos" placement="top-start" effect="light">
                      <div v-html="getOrderProduceInfos(scope.row.orderProduceInfos)" slot="content"></div>
                      <span class="ellipsis">{{ scope.row.orderProduceInfos }}</span>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="billNote"
                  label="备注">
                </el-table-column>
                <el-table-column
                  width="130px"
                  label="建单时间"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.createTime">{{ scope.row.createTime | getTime }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>外协单备注</span>
          </div>
          <el-form size="mini" label-width="0px"
                   label-position="right">
            <el-col :span="24">
              <el-form-item>
                <el-input
                  type="textarea"
                  :rows="6"
                  placeholder="请输入备注"
                  v-model="billMemo">
                </el-input>
                <!--                    <div-->
                <!--                      class="ProduceInfo-con"-->
                <!--                      style="width: 600px;height: 192px;border: 1px solid #dddd;padding: 5px;line-height: 18px;font-size: 12px">-->
                <!--                      <p-->
                <!--                        v-for="(item,indexItem) in orderProduceInfosArray"-->
                <!--                        :key="item.indexItem"-->
                <!--                      >{{ item }}</p>-->
                <!--                      <p v-if="printOrder.orderMemo">{{printOrder.orderMemo}}</p>-->
                <!--                    </div>-->
              </el-form-item>
            </el-col>
          </el-form>

        </el-card>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <p>金额合计：<span style="font-size: 15px;color: #409EFF">{{ totalMoney }}</span>&nbsp;元</p>
      </div>
    </el-dialog>
    <el-drawer
      title="订单脚印"
      :reverse="true"
      :visible.sync="drawer"
      :with-header="false">
      <el-timeline style="width: 90%;margin-top: 20px">
        <el-timeline-item v-for="step in stepList"
                          :timestamp="timeString ? (step.workTime).substring(0,19):step.workMan+'  '+(step.workTime).substring(0,19)"
                          placement="top">
          <el-card class="stepList">
            <h4 style="margin: 5px 0">{{ step.workMemo }}</h4>
            <p>{{ step.workExplain }}</p>
          </el-card>
        </el-timeline-item>

      </el-timeline>
    </el-drawer>
    <!--    <servicedialog @tableRefresh="tableRefresh" ref="menuDialog" :dialogStatus="dialogStatus" :menuId="menuId" :titleDialog="titleDialog" :dialogVisible="dialogVisible"/>-->
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
    <el-dialog title="订单详情" :close-on-click-modal="false" class="orderDetailDialog" :visible.sync="detailVisible" top="10px" width="1200px">
      <order-detail ref="orderDetail"></order-detail>
    </el-dialog>
    <el-drawer
      title="订单消息"
      :reverse="true"
      :visible.sync="memoDrawer"
      size="600px">
      <order-message ref="orderMessage"></order-message>
    </el-drawer>
    <printbill-detail ref="printbillDetail"></printbill-detail>
  </div>
</template>

<script>
import {
  addInfo,
  getInfoById,
  getInfoOutAssist,
  getOrderPrintBillList,
  getOutAssistOrderDetail,
  outAssistDoPrint,
  updatePrintBill,
  calcOutAssistCapacity
} from '@/api/outsidebill/outsidebill.js'
import Cancledialog from '@/components/Dialog/Cancledialog.vue'
import Pagination from '@/components/Pagination'
import Factorylist from './components/factoryList.vue';
import {getOrderStepList, getSimpleProductInfoList} from "@/api/order/orderList";
import OrderDetail from '@/components/orderDetail/orderDetail'
import OrderMessage from '@/components/orderMessage/orderMessage'
import {doLocalPrint} from "@/utils";
import PrintbillDetail from "@/components/printbillDetail/printbillDetail";
import new_badge from '@/assets/new_badge.gif'
export default {
  name: "outSourceList",
  components: {
    Cancledialog, Pagination, Factorylist, OrderDetail, OrderMessage, PrintbillDetail
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      new_badge: new_badge,
      productList: [],
      capacity:"",
      scopeIndex: 99,
      dataindex: 0, // 当前选择行的index
      processMoneyHave: false,
      tableDataPrint: [],
      activeName: 'first',
      businessKind: "",
      totalMoney: 0,
      billMemo: "",
      orderProduceInfosArray: [],
      printOrder: {},
      memoDrawer: false,
      detailVisible: false,
      stepList: [],
      idProcessArray: [],
      idCheck: "",
      ids: "",
      outAssistName: "",
      factoryId: "",
      uniqueProcessList: [],
      multipleSelection: [],
      drawer: false,
      timeString: '',
      avtiveStep: true,
      activitiesArray: [],
      printBillBreedList: [],//生产信息
      printOrderList: [],//订单列表
      processList: [],//工序列表
      activities: [],
      printBillDetail: {},
      printVisible: false,
      cityshow: false,
      byId: "",
      dialogStatus: 1,//1增加，2修改
      dialogTitle: '',
      dialogVisible: false,
      search: {
        orderCode: '',
        orderName: '',
        clientName: '',
        allProcessStr: '',
        orderOutSourceStateTmp:0,
        orderSendStateTmp:0,
        idProduct:"",
        businessKind:"",
      },
      options: [{
        value: 0,
        label: '未发货'
      }, {
        value: 1,
        label: '已发货'
      }, {
        value: -1,
        label: '全部'
      }],
      optionsList: [{
        value: 0,
        label: '未外协'
      },{
        value: 1,
        label: '已外协'
      },{
        value: -1,
        label: '全部'
      }],
      ruleForm: {
        outAssistName: ""
      },
      rules: {
        industryName: [
          {required: true, message: '请选择行业信息', trigger: 'change'}
        ],
        levelName: [
          {required: true, message: '请选择外协单等级', trigger: 'change'}
        ],
        payMode: [
          {required: true, message: '请选择付款方式', trigger: 'change'}
        ],
        clientName: [
          {required: true, message: '请填写外协单名称', trigger: 'blur'}
        ],
        contactMan: [
          {required: true, message: '请填写联系人', trigger: 'blur'}
        ],
        contactPhone: [
          {required: true, message: '请填写联系电话', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请填写详细地址', trigger: 'blur'}
        ]
      },
      listData: {
        total: 0,
        page: 1,
        pageSize: 100
      },
      confirmdialog: false,
      listLoading: false,
      tableData: [],
      menuId: ''
    }
  },
  mounted() {
    this.getTableInfo();
    this.getProductInfo();
    this.$nextTick(() => {
      addEventListener('keyup', this.keyUp)//创建监听键盘事件
    })
  },
  methods: {
    // 获取产品// 获取产品；类型
    getProductInfo() {
      const _that = this
      var data = {}
      // console.log(data);
      getSimpleProductInfoList(data).then(response => {
        // console.log(response)
        const data = response.data
        _that.productList = data
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    keyUp(e) {
      const _that = this;
      if (this.uniqueProcessList.length <= 0) {
        return
      }
      if (e.keyCode == 40  || e.keyCode == 13) { // 下键

        if(_that.dataindex==_that.uniqueProcessList.length-1){
          _that.dataindex=0  //当选中的index与数据的相等时，在按下键就要返回第一个
          _that.$nextTick(() => {
            _that.$refs['input-' + _that.dataindex].focus();
          })
        }else {
          _that.dataindex+=1;
          // console.log(_that.dataindex);

          _that.$nextTick(() => {
            _that.$refs['input-' + _that.dataindex].focus();
          })
        }
      }else if(e.keyCode == 38){
        if(_that.dataindex==_that.uniqueProcessList.length-1){
          _that.dataindex=0  //当选中的index与数据的相等时，在按下键就要返回第一个
          _that.$nextTick(() => {
            _that.$refs['input-' + _that.dataindex].focus();
          })
        }else {
          if(_that.dataindex==0){

          }else {
            _that.dataindex=_that.dataindex-1;
            // console.log(_that.dataindex);

            _that.$nextTick(() => {
              _that.$refs['input-' + _that.dataindex].focus();
            })
          }

        }
      }
    },
    tableRowClassNameCurrent({row, rowIndex}) {
      var _that = this;
      if (rowIndex == _that.dataindex) {
        return 'current-row';
      }else {
        return '';
      }

    },
    handleClickTableRow(row, event, column) {
      this.dataindex = row.index;
    },
    handleDetailPrint(id) {
      const _that = this;
      _that.$refs.printbillDetail.idOrder = id;
      _that.$refs.printbillDetail.printVisible = true;
      _that.$refs.printbillDetail.getDetail()


    },
    getOrderProduceInfos(str) {
      // console.log(str);
      //郑州鑫源制衣_6000`[封面]尺寸：210*285_样式：横板_P数：双面印4_数量：6000_克重纸张类型：128克鹿鸣铜版C_`[内文]P数：24_克重纸张类型：105克通用铜版C_`
      var newStr = str.replace(/`/g, "<br/>")
      // console.log(newStr);
      return newStr
    },
    getName(row) {
      return row.productName + "-" + row.orderName
    },
    getDeliverDate(time) {
      if (time) {
        var str = time.substring(0, 19)
        return str
      }
    },
    // 订单消息
    openMessage(row) {
      var _that = this
      _that.memoDrawer = true
      _that.$nextTick(function () {
        // console.log(_that.$refs.orderMemo);
        _that.$refs.orderMessage.idOrder = row.id
        _that.$refs.orderMessage.getList()
      })
    },
    openDetail(row) {
      //查看详情
      var _that = this
      _that.detailVisible = true
      _that.$nextTick(() => {
        _that.$refs.orderDetail.idOrder = row.id
        _that.$refs.orderDetail.getInfo()
      })
    },
    handleProcessMoneyQty(index, value){
      var _that = this;
      if (!value || isNaN(value)) {
        _that.uniqueProcessList[index].processQty = "";
      }
      // for (let i = 0; i < _that.uniqueProcessList.length; i++) {
      //   var item = _that.uniqueProcessList[i];
      //   // console.log(isNaN(item.processMoney));
      //   if (!item.processQty || isNaN(item.processQty)) {
      //     item.processMoney = ""
      //   }
      //
      // }
    },
    handleProcessMoney(index, value) {

    },
    handleProcessMoneyTotal(index, value) {
      var _that = this;
      _that.totalMoney = 0;
      for (let i = 0; i < _that.uniqueProcessList.length; i++) {
        var item = _that.uniqueProcessList[i];
        // console.log(isNaN(item.processMoney));
        if (!item.processMoney || isNaN(item.processMoney)) {
          item.processMoney = ""
        } else {
          _that.totalMoney += parseFloat(item.processMoney);
        }

      }
    },
    checkFactory() {
      const _that = this;
      _that.factoryId = "";
      _that.$refs.factory.outerVisible = true;
      _that.$refs.factory.searchVal = "";
      _that.$refs.factory.getInfo()
    },
    handleSelectionChange(val) {
      const _that = this;
      _that.multipleSelection = val;
      // console.log(val);

      // console.log(this.idProcessArray);
    },
    handleSelecTemplate(row){
      const _that = this;
      _that.$nextTick(() => {
        _that.$refs.multipleTable.toggleRowSelection(row);
      })
    },
    //增加
    addBtn(formName, type) {

      const _that = this;
      _that.processMoneyHave = false;
      // console.log("_that.ruleForm", _that.ruleForm);
      // console.log(_that.multipleSelection);
      // return;this.outAssistName
      // console.log(_that.outAssistName);
      // console.log(_that.factoryId);
      if (!_that.outAssistName || !_that.factoryId) {
        _that.$message("请选择外协单位");
        return
      }
      //businessKind == 1 直接外协的
      if (_that.businessKind == 1) {
        if (!_that.printOrder.outAssistFee) {
          _that.$message("外协单金额不能为空");
          return
        }
        // if (_that.printOrder.outAssistFee <= 0) {
        //   _that.$message("外协单金额不能小于0");
        //   return
        // }
      }
      if (_that.multipleSelection.length <= 0 && _that.businessKind == 0) {
        _that.$message("请勾选外协工序");
        return
      }
      if(_that.billMemo.length>=500){
        _that.$message("外协单备注文字不能超过500字,请删减");
        return
      }


      _that.idProcessArray = [];
      for (let i = 0; i < _that.multipleSelection.length; i++) {
        var datas = _that.multipleSelection[i];
        if (!datas.processMoney || datas.processMoney <= 0) {
          _that.processMoneyHave = true;

        }
        if (datas.processMoney == "" || datas.processMoney == null || datas.processMoney == undefined) {
          datas.processMoney = 0;
        }
        // console.log(datas);
        var outAssistBillItem = {
          idProcess: "",
          outProcessName: "",
          outProcessSize: "",
          outProcessQty: "",
          outProcessMoney: "",
          outProcessMemo: "",
          idOrderPartProcesses: ""
        }
        outAssistBillItem.idProcess = datas.idProcess;
        outAssistBillItem.outProcessName = datas.processName;
        outAssistBillItem.outProcessSize = datas.orderSize;
        outAssistBillItem.outProcessQty = datas.processQty;
        outAssistBillItem.outProcessMoney = datas.processMoney;
        outAssistBillItem.outProcessMemo = datas.processMemo;
        outAssistBillItem.idOrderPartProcesses = datas.combineOrderProcessIds;
        _that.idProcessArray.push(outAssistBillItem)
      }
      // console.log(_that.idProcessArray);
      //printOrder.deliverDate
      if (_that.processMoneyHave) {
        _that.$confirm('外协单金额为0  是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _that.addInfoPost(type)
        }).catch(() => {
        });
      } else {
        _that.addInfoPost(type)
      }
    },
    addInfoPost(type) {
      const _that = this
      if (_that.businessKind == 1) {
        var newOutAssistReq = {
          idPrintBill: "",
          idOrder: _that.idCheck,
          idOutAssistFactory: _that.factoryId,
          billType: "2",
          outSourceTime: _that.printOrder.deliverDate,
          billMemo: _that.billMemo,
          returnQty: "",
          deliverMethod: _that.printOrder.deliverMethod,
          outAssistFee: _that.printOrder.outAssistFee,
          initState: 0,
          doPrint:""
        };
        if (type == 1) {
          newOutAssistReq.doPrint = 1
        }else{
          newOutAssistReq.doPrint = 0
        }
      } else {
        var newOutAssistReq = {
          idPrintBill: "",
          idOrder: _that.idCheck,
          idOutAssistFactory: _that.factoryId,
          billType: "1",
          outSourceTime: _that.printOrder.deliverDate,
          billMemo: _that.billMemo,
          returnQty: "",
          deliverMethod: _that.printOrder.deliverMethod,
          reqItemList: _that.idProcessArray,
          initState: 0,
          doPrint:""
        };
        if (type == 1) {
          newOutAssistReq.doPrint = 1
        }else{
          newOutAssistReq.doPrint = 0
        }
      }

      // console.log(newOutAssistReq);
      var info = JSON.stringify(newOutAssistReq)
      // var data = {
      //   "newOutAssistReq": info,
      // }
      //console.log("clientLevel",data)

      addInfo(info).then(res => {
        if (res.httpCode == 200) {
          _that.dialogVisible = false
          _that.$message({
            message: '增加成功',
            type: 'success'
          });
          _that.tableRefresh()
          // if (type == 1) {
          //   return
          //   var datasIds = {
          //     "ids": res.data.id
          //   }
          //   outAssistDoPrint(datasIds).then(response => {
          //     // console.log("printBillDoPrint", response);
          //     var PrintData = {
          //       '_rootData': response.data
          //     }
          //     // console.log(PrintData);
          //     var data = {
          //       PrintTemplate: 'OutSourceBill_XQD.fr3',
          //       NeedPreview: 1,
          //       PrintData: JSON.stringify(PrintData)
          //     }
          //     // 以后打印调这个通用接口
          //     // doLocalPrint(data)
          //   }).catch(err => {
          //     _that.$message.error(err)
          //   })
          // }
          // _that.tableRefresh();
        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
        _that.dialogVisible = false
      })
    },
    getMessage() {
      return this.$websocket.state.eventlist
    },
    // 获取脚印
    getOrderStep(row) {
      const _that = this
      _that.drawer = true
      var data = {
        idOrder: row.id
      }
      // console.log(data);
      getOrderStepList(data).then(response => {
        // console.log(response)
        const data = response.data
        _that.stepList = data
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    handleClose() {
      const _that = this;
      _that.avtiveStep = !_that.avtiveStep;
      _that.activitiesArray = _that.activities.slice(0, 9);
    },
    handleOpen() {
      const _that = this;
      _that.avtiveStep = !_that.avtiveStep;
      _that.activitiesArray = _that.activities;
    },
    handleDetail(id) {
      const _that = this;
      var data = {
        idPrintBill: id
      }
      getInfoById(data).then(res => {
        // console.log(res);
        var datas = res.data;
        _that.printBillDetail = res.data;
        _that.printVisible = true;
        _that.printOrderList = datas.printOrderList;
        _that.printBillBreedList = datas.printBillBreedList;
        _that.processList = datas.printBillBreedList[0].processList;

      }).catch(err => {
        _that.$message.error(err)
      })

    },
    //获取列表
    getTableInfo() {
      const _that = this
      _that.listLoading = true
      var params = _that.search;
      _that.search.businessKind = 1;
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize,
      }
      var data = {
        "params": JSON.stringify(params),
        "page": JSON.stringify(page),
      }

      // console.log(data);
      getInfoOutAssist(data).then(response => {
        // console.log("getInfoOutAssist", response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        _that.listData.total = response.total
        // console.log(_that.tableData)
        _that.listLoading = false
      }).catch(err => {
        _that.listLoading = false
      })
    },
    //增加外协单信息
    handleCreateAdd(id, businessKind) {
      const _that = this;
      _that.businessKind = businessKind;
      _that.ruleForm = {}
      _that.billMemo = "";
      _that.dialogTitle = '开制外协单';
      _that.outAssistName = "选择外协单位";
      _that.factoryId = "";
      _that.dialogStatus = '1';
      _that.dialogVisible = true;
      _that.idCheck = id;
      var data = {
        "id": id,
      }
      getOutAssistOrderDetail(data).then(res => {
        // console.log("getOutAssistOrderDetail11", res);
        if (res.httpCode == 200) {
          _that.scopeIndex=0
          _that.uniqueProcessList = [];
          _that.printOrder = res.data.printOrder;
          _that.totalMoney = 0;
          if(res.data.uniqueProcessList.length>0){
            for (let i = 0; i < res.data.uniqueProcessList.length; i++) {
              var item = res.data.uniqueProcessList[i];
              item.processMemo = "";
              item["index"]=i;

              if (item.isOutAssisted == 0) {
                if (!item.processMoney) {
                  _that.totalMoney = 0
                } else {
                  _that.totalMoney += parseInt(item.processMoney);
                }
                //
                _that.uniqueProcessList.push(item);
              }
            }
            _that.$nextTick(() => {
              _that.$refs['input-' + _that.scopeIndex].focus();
              // console.log(_that.uniqueProcessList);
            })
          }


          _that.orderProduceInfosArray = res.data.printOrder.orderProduceInfos.split('`');
          // console.log(_that.orderProduceInfosArray);
          _that.billMemo = "订单产品信息:";
          for (let i = 0; i < _that.orderProduceInfosArray.length; i++) {
            var datas = _that.orderProduceInfosArray[i];
            _that.billMemo += datas;
          }
          _that.billMemo += '\n'
          _that.billMemo += "订单生产备注:"
          if (res.data.printOrder.orderMemo != null && res.data.printOrder.orderMemo != "" && res.data.printOrder.orderMemo != undefined) {
            _that.billMemo += res.data.printOrder.orderMemo
          }


        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
      })

      var dataOrders = {
        "idOrders": id,
      }
      getOrderPrintBillList(dataOrders).then(res => {
        // console.log("getOrderPrintBillList11", res);
        if (res.httpCode == 200) {
          _that.tableDataPrint = res.data;
          // console.log(_that.tableDataPrint);
        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },

    //唤起修改
    handleUpdate(id) {
      const _that = this;
      _that.dialogTitle = '修改外协单信息'
      _that.dialogVisible = true
      _that.dialogStatus = '2';
      _that.byId = id;
      _that.iscityShow();
      var data = {
        idClient: id
      }

      getInfoById(data).then(res => {
        // console.log(res);
        var datas = res.data;
        // console.log("getInfoById",datas);
        var addArray = [];
        addArray.push(datas.province);
        addArray.push(datas.city)
        addArray.push(datas.area)
        _that.selected = addArray;

        _that.ruleForm = {
          idPrintBill: datas.idPrintBill,
          idOrder: datas.idOrder,
          idOutAssistFactory: datas.idOutAssistFactory,
          billType: datas.billType,
          outSourceTime: datas.outSourceTime,
          billMemo: datas.billMemo,
          returnQty: datas.returnQty,
          deliverMethod: datas.deliverMethod,
          reqItemList: datas.reqItemList,
        }

      }).catch(err => {
        _that.$message.error(err)
      })
    },
    //修改档案
    editBtn(formName) {
      const _that = this
      _that.$refs[formName].validate((valid) => {
        if (_that.ruleForm.industryName.split(",").length > 1) {
          var industryName = _that.ruleForm.industryName.split(",")[0];
          var idIndustry = _that.ruleForm.industryName.split(",")[1];
        } else {
          var industryName = _that.ruleForm.industryName;
          var idIndustry = _that.ruleForm.idIndustry;
        }
        if (_that.ruleForm.levelName.split(",").length > 1) {
          var levelName = _that.ruleForm.levelName.split(",")[0];
          var idLevel = _that.ruleForm.levelName.split(",")[1];
        } else {
          var levelName = _that.ruleForm.levelName;
          var idLevel = _that.ruleForm.idLevel;
        }
        if (_that.ruleForm.payMode.split(",").length > 1) {
          var payMode = _that.ruleForm.payMode.split(",")[0];
          var idPayMode = _that.ruleForm.payMode.split(",")[1];
        } else {
          var payMode = _that.ruleForm.payMode;
          var idPayMode = _that.ruleForm.idPayMode;
        }
        var dataForm = {
          id: _that.byId,
          idIndustry: idIndustry,
          industryName: industryName,
          clientName: _that.ruleForm.clientName,
          contactMan: _that.ruleForm.contactMan,
          contactPhone: _that.ruleForm.contactPhone,
          province: _that.ruleForm.province,
          city: _that.ruleForm.city,
          area: _that.ruleForm.area,
          address: _that.ruleForm.address,
          overdraftQuota: _that.ruleForm.overdraftQuota,
          idLevel: idLevel,
          levelName: levelName,
          idPayMode: idPayMode,
          payMode: payMode,
          initState: 0
        }
        // console.log("dataFormred",dataForm);
        var info = JSON.stringify(dataForm)
        var data = {
          "newOutAssistReq": info,
        }
        // console.log(data);

        updatePrintBill(data).then(res => {
          // console.log(res);
          if (res.httpCode == 200) {
            _that.dialogVisible = false
            _that.$message({
              message: '修改成功',
              type: 'success'
            });
            // _that.tableRefresh();
          } else {
            _that.$message.error(res.msg)
          }
        }).catch(err => {
          _that.$message.error(err)
          _that.dialogVisible = true
        })
      })
    },
    //刷新表格
    tableRefresh() {
      //刷新变革
      this.listData.page = 1;
      this.getTableInfo();
    },
    //搜索
    searchData() {
      this.listData.page = 1;
      this.getTableInfo()
    },
    carEditOrderAddr(id, name) {
      this.$refs.address.outerVisible = true;
      this.$refs.address.idClient = id;
      this.$refs.address.clientName = name;
      var pageNum = 1;
      this.$refs.address.getInfo(pageNum, '');
      this.$refs.address.searchVal = '';
    },
    getFactory(id, outAssistName) {
      // console.log(id, outAssistName);
      const _that = this;
      _that.factoryId = id;
      _that.outAssistName = outAssistName;
      // var data = {
      //   "idOutAssistInfo": id
      // }
      // calcOutAssistCapacity(data).then(res => {
      //   // console.log(res);
      //   if (res.httpCode == 200) {
      //     _that.capacity = res.data.capacity;
      //     if(Number(res.data.capacity)<Number(res.data.unFeedbackedCount)){
      //       _that.$confirm('该厂产能已满,确定将外协单分配至该厂?', '提示', {
      //         confirmButtonText: '确定',
      //         cancelButtonText: '取消',
      //         type: 'warning'
      //       }).then(() => {
      //         _that.factoryId = id;
      //         _that.outAssistName = outAssistName;
      //       }).catch(() => {
      //       });
      //
      //     }else {
      //       _that.factoryId = id;
      //       _that.outAssistName = outAssistName;
      //     }
      //   }
      // }).catch(err => {
      // })

    },
    //序号
    indexMethod(index) {
      return index + 1;
    },
    tableRowClassName({row, rowIndex}) {
      var _that = this;
      // console.log(row.lockFlag == 1 && row.idLockMan == _that.$store.state.user.userId);
      if (row.printStatus == 1) {
        return 'success-row';
      } else {
        return '';
      }

    },
  }
}
</script>
<style>
/*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
.el-drawer__body {
  overflow: auto;
}

.stepList .el-card__body {
  padding: 10px;
}

:focus {
  outline: 0;
}
</style>
<style>
.hline-table .el-table .success-row {
  background: #f0f9eb;
}

.area-select .area-selected-trigger {
  padding: 0px 20px 7px 12px !important;
}

.area-select {
  height: 40px !important;
}
</style>

<style lang="scss" scoped>
.tb-edit .el-input {
  display: none
}

.tb-edit .current-row .el-input {
  display: block
}

.tb-edit .current-row .el-input + span {
  display: none
}

.card-tit {
  float: left;
  height: 100%;
  min-height: 200px;
  max-height: 200px;
  font-size: 14px;
  color: #7c7c7c;
  width: 20px;
  margin: 0 auto;
  line-height: 20px;
  padding: 20px;
  padding-left: 10px;
  border-right: 1px solid #ddd;
}

.area-select {
  height: 40px;
}

.filter-container {
  margin-bottom: 15px;
}

.print-tit {
  color: #7c7c7c;
}

.print-con {
  color: #333;
}

.item-print {
  margin-bottom: 10px;
}

.el-timeline {
  padding: 0px;
  padding-top: 15px;
}

::v-deep .el-dialog__header {
  padding: 10px 10px 10px;
}

::v-deep .el-dialog__body {
  padding: 5px 20px;
}

::v-deep .el-card__header {
  padding: 5px 20px;
}
</style>
