用html2canvas和jspdf分别生成图片和pdf文件

<template>
  <div class="home">
    <el-container>
      <!-- <el-header>Header</el-header> -->
      <el-main>
        <!-- <el-button @click="startHacking">Start</el-button> -->
        <!-- 搜索框 -->
        <el-card class="box-card" shadow="never">
          <el-form :inline="true" :model="formInline" ref="formInline" label-width="100px" size="mini">
            <el-form-item label="用人单位名称" prop="customername">
              <el-input v-model="formInline.customername" clearable placeholder="用人单位名称" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="签核状态" prop="status">
              <!-- <el-input v-model="formInline.customername" clearable placeholder="用人单位名称" autocomplete="off"></el-input> -->
              <el-select v-model="formInline.status"  @change="onHttpPage(tablePag.index)" clearable placeholder="请选择签核状态">
                <el-option label="未签核" value="1"></el-option>
                <el-option label="已签核" value="6"></el-option>
                <el-option label="未通过" value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="resetForm('formInline')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <!-- 表格展示 -->
        <el-card class="box-card2" shadow="never">
          <!-- 添加数据 -->
          <el-row :gutter="10">
            <el-col :span="12">
              <el-row>
                <el-button type="primary" size="small" @click="dialogFormVisible = true">新增数据</el-button>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row justify="end" type="flex">
                <!-- <el-button type="primary" size="small">新增数据2</el-button> -->
              </el-row>
            </el-col>
          </el-row>
          <!-- 表格 -->
          <el-table border
            size="mini"
            ref="filterTable"
            :data="tableData"
            v-loading="tablePag.loading"
            header-cell-class-name="my-header-cell"
            >
            <!-- style="width: 100%" -->
            <el-table-column
              prop="rowNum" width="80"
              label="#" align="center"
            ></el-table-column>
            <el-table-column
              prop="customername" width="160"
              label="用人单位名称" align="center"
            ></el-table-column>
            <el-table-column
              prop="status"
              label="签核状态" align="center"
              width="105">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status==1" size="medium"> 等待签核1 </el-tag>
                <el-tag v-else-if="scope.row.status==2" size="medium"> 等待签核2 </el-tag>
                <el-tag v-else-if="scope.row.status==3" size="medium"> 等待签核3 </el-tag>
                <el-tag v-else-if="scope.row.status==4" type="danger" size="medium"> 签核未通过 </el-tag>
                <el-tag v-else-if="scope.row.status==5" size="medium"> 等待签核5 </el-tag>
                <el-tag v-else-if="scope.row.status==6" size="medium"> 等待签核6 </el-tag>
                <el-tag v-else-if="scope.row.status==7" type="success" size="medium"> 已签核 </el-tag>
                <el-tag v-else-if="scope.row.status==0" type="danger" size="medium"> 已删除 </el-tag>
                <!-- <div v-if="scope.row.status==4 && scope.row.msg" style="color:red;">备注: {{scope.row.msg}}</div> -->
              </template>
            </el-table-column>
            <!-- <el-table-column
              prop="msg" width="120"
              label="签核备注" align="center"
            ></el-table-column> -->
            <el-table-column
              prop="costSettleRule" width="120"
              label="费用结算规则" align="center"
            ></el-table-column>
            <el-table-column
              prop="jobDesc" width="120"
              label="岗位描述" align="center"
            ></el-table-column>
            <el-table-column
              prop="jobTime" width="120"
              label="工作时间" align="center"
            ></el-table-column>
            <el-table-column
              prop="peopleNum" width="120"
              label="需求人数" align="center"
            ></el-table-column>
            <!-- <el-table-column
              prop="miniwage" width="120"
              label="保底工资" align="center"
            ></el-table-column> -->
            <el-table-column
              prop="wageday" width="120"
              label="发薪日" align="center"
            ></el-table-column>
            <el-table-column
              prop="probation" min-width="120"
              label="实习期限" align="center"
            ></el-table-column>
            <el-table-column
              prop="username"
              label="创建人" align="center"
              width="120">
            </el-table-column>
            <el-table-column
              prop="created_at"
              label="创建时间" align="center"
              width="120">
            </el-table-column>
            <el-table-column
              prop="updated_at"
              label="更新时间" align="center"
              width="120">
            </el-table-column>
            <el-table-column
              fixed="right" align="center"
              label="操作" width="120">
              <template slot-scope="scope">
                <el-button @click="ontabhandleClick(scope.row)" type="text" size="small">查看详情</el-button>
                &nbsp;&nbsp;
                <el-dropdown @command="onCommand(scope.row, $event)">
                  <el-button type="text" size="small">更多</el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="edit">编辑</el-dropdown-item>
                    <el-dropdown-item command="del">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination class="box-card2"
            :hide-on-single-page="tableData.length<1"
            background
            @current-change="onPagCurrentChange"
            @size-change="onPagSizeChange"
            :page-sizes="[50,100, 200, 300, 500]"
            :page-size="tablePag.size"
            :current-page="tablePag.index"
            layout="total, sizes, prev, pager, next"
            :total="tablePag.total">
          </el-pagination>
        </el-card>
      </el-main>
    </el-container>

    <!-- 弹窗 -->
    <el-dialog title="新增数据: 学生工需求单" top="10px" destroy-on-close
    :lock-scroll="false" :close-on-click-modal="false" width="910px"
    :visible.sync="dialogFormVisible">
    <!-- :inline="true" -->
      <el-form ref="form" :model="form" >
        <el-descriptions :column="3" border>
          <!-- 第一行 -->
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" span="2" label="用人单位名称">
              <!-- <el-input v-model="form.customername" clearable placeholder="请输入单位名称" autocomplete="off"></el-input> -->
            <el-select v-model="addform.customername" clearable
              @change="onChangeCustomer" @focus="onFocusCustomer"
              :loading="customerItem.loading" loading-text="加载数据中,请稍后..."
              filterable placeholder="请选择用人单位">
              <el-option
                v-for="item in customerItem.options"
                :key="item.key"
                :label="item.label"
                :value="item.value">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.area }}</span>
              </el-option>
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="费用结算规则">
              <el-input v-model="form.costsettlerule" clearable placeholder="请输入费用结算规则" autocomplete="off"></el-input>
          </el-descriptions-item>
          <!-- 第二行 -->
          <el-descriptions-item span="1" label="岗位描述">
              <el-input v-model="form.jobdesc" clearable placeholder="请输入岗位描述" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="2" label="工作时间">
              <el-input v-model="form.jobtime" clearable placeholder="请输入工作时间" autocomplete="off"></el-input>
          </el-descriptions-item>
          <!-- 第三行 -->
          <el-descriptions-item span="1" label="需求人数">
              <el-input v-model="form.peoplenum" clearable placeholder="请输入需求人数" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="2" label="倒班规则">
              <el-input v-model="form.workshiftrule" clearable placeholder="请输入倒班规则" autocomplete="off"></el-input>
          </el-descriptions-item>
          <!-- 第四行 -->
          <el-descriptions-item span="3" label="岗位薪资结构">
              <el-input v-model="form.jobwagestru" placeholder="请输入岗位薪资结构" autocomplete="off"
                type="textarea" :autosize="{ minRows: 2 }" clearable
              ></el-input>
          </el-descriptions-item>
          <!-- 第五行 -->
          <el-descriptions-item span="1" label="保底工资">
            <el-input v-model="form.miniwage" clearable placeholder="请输入保底工资" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="发薪日">
            <el-input v-model="form.wageday" clearable placeholder="请输入发薪日" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="实习期限">
            <el-input v-model="form.probation" clearable placeholder="请输入实习期限" autocomplete="off"></el-input>
          </el-descriptions-item>
          <!-- 第六行 -->
          <el-descriptions-item span="1" label="男女比例">
              <el-input v-model="form.sexratio" clearable placeholder="请输入男女比例" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="年龄要求">
              <el-input v-model="form.ageimpl" clearable placeholder="请输入年龄要求" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="专业要求">
              <el-input v-model="form.majorimpl" clearable placeholder="请输入专业要求" autocomplete="off"></el-input>
          </el-descriptions-item>
          <!-- 第七行 -->
          <el-descriptions-item span="1" label="体验费用">
              <el-input v-model="form.exp_fee" clearable placeholder="请输入体验费用" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="加班补助(夜班)">
              <el-input v-model="form.overtime_night" clearable placeholder="请输入加班补助(夜班)" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="加班补助(假期)">
              <el-input v-model="form.overtime_holiday" clearable placeholder="请输入加班补助(假期)" autocomplete="off"></el-input>
          </el-descriptions-item>
          <!-- 第八行 -->
          <el-descriptions-item span="1" label="体检费用承担方">
              <el-input v-model="form.bear_fee" clearable placeholder="请输入体检费用承担方" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="2" label="车补">
              <el-input v-model="form.car_repair" clearable placeholder="请输入车补" autocomplete="off"></el-input>
          </el-descriptions-item>
          <!-- 第九行 -->
          <el-descriptions-item span="1" label="住宿条件">
              <el-input v-model="form.live_condition" clearable placeholder="请输入住宿条件" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="宿舍人数">
              <el-input v-model="form.live_num" clearable placeholder="请输入宿舍人数" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="独立卫浴">
              <el-input v-model="form.live_bathroom" clearable placeholder="请输入独立卫浴" autocomplete="off"></el-input>
          </el-descriptions-item>
          <!-- 第十行 -->
          <el-descriptions-item span="3" label="餐饮条件">
            <el-input v-model="form.food_condition" placeholder="请输入餐饮条件" autocomplete="off"
              type="textarea" :autosize="{ minRows: 2 }" clearable
            ></el-input>
          </el-descriptions-item>
          <!-- 第十一行 -->
          <el-descriptions-item span="1" label="是否穿无尘服">
            <el-radio-group v-model="form.is_cloth">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
              <!-- <el-input v-model="form.is_cloth" placeholder="请输入是否穿无尘服" autocomplete="off"></el-input> -->
          </el-descriptions-item>
          <el-descriptions-item span="1" label="穿无尘服补助">
              <el-input v-model="form.is_cloth_fee" placeholder="请输入穿无尘服补助" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="厂车">
              <el-input v-model="form.car_factory" placeholder="请输入厂车" autocomplete="off"></el-input>
          </el-descriptions-item>
          <!-- 第十二行 -->
          <el-descriptions-item span="1" label="保险规则">
            <el-radio-group v-model="form.radioinsu">
              <el-radio :label="1">本人承担({{form.insurance?form.insurance:'___'}}元)</el-radio>
              <el-radio :label="2">企业承担</el-radio>
            </el-radio-group>
            <el-input v-if="form.radioinsu==1" type="number" v-model="form.insurance" placeholder="请输入本人承担多少元" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="保险类别">
            <el-input v-model="form.insurance_type" clearable placeholder="请输入保险类别" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="保额">
            <el-input v-model="form.insurance_fee" clearable placeholder="请输入保额" autocomplete="off"></el-input>
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDialog">提 交</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑: 学生工需求单" top="10px"
    :lock-scroll="false" :close-on-click-modal="false" width="910px"
    :visible.sync="dialogEdit">
    <!-- :inline="true" -->
      <el-form ref="editform" :model="editform">
        <el-descriptions :column="3" border>
          <!-- 第一行 -->
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" span="2" label="用人单位名称">
              <el-input v-model="editform.customername" disabled clearable placeholder="请输入单位名称" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="费用结算规则">
              <el-input v-model="editform.costsettlerule" clearable placeholder="请输入费用结算规则" autocomplete="off"></el-input>
          </el-descriptions-item>
          <!-- 第二行 -->
          <el-descriptions-item span="1" label="岗位描述">
              <el-input v-model="editform.jobdesc" clearable placeholder="请输入岗位描述" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="2" label="工作时间">
              <el-input v-model="editform.jobtime" clearable placeholder="请输入工作时间" autocomplete="off"></el-input>
          </el-descriptions-item>
          <!-- 第三行 -->
          <el-descriptions-item span="1" label="需求人数">
              <el-input v-model="editform.peoplenum" clearable placeholder="请输入需求人数" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="2" label="倒班规则">
              <el-input v-model="editform.workshiftrule" clearable placeholder="请输入倒班规则" autocomplete="off"></el-input>
          </el-descriptions-item>
          <!-- 第四行 -->
          <el-descriptions-item span="3" label="岗位薪资结构">
              <el-input v-model="editform.jobwagestru" placeholder="请输入岗位薪资结构" autocomplete="off"
                type="textarea" :autosize="{ minRows: 2 }" clearable
              ></el-input>
          </el-descriptions-item>
          <!-- 第五行 -->
          <el-descriptions-item span="1" label="保底工资">
            <el-input v-model="editform.miniwage" clearable placeholder="请输入保底工资" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="发薪日">
            <el-input v-model="editform.wageday" clearable placeholder="请输入发薪日" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="实习期限">
            <el-input v-model="editform.probation" clearable placeholder="请输入实习期限" autocomplete="off"></el-input>
          </el-descriptions-item>
          <!-- 第六行 -->
          <el-descriptions-item span="1" label="男女比例">
              <el-input v-model="editform.sexratio" clearable placeholder="请输入男女比例" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="年龄要求">
              <el-input v-model="editform.ageimpl" clearable placeholder="请输入年龄要求" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="专业要求">
              <el-input v-model="editform.majorimpl" clearable placeholder="请输入专业要求" autocomplete="off"></el-input>
          </el-descriptions-item>
          <!-- 第七行 -->
          <el-descriptions-item span="1" label="体验费用">
              <el-input v-model="editform.exp_fee" clearable placeholder="请输入体验费用" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="加班补助(夜班)">
              <el-input v-model="editform.overtime_night" clearable placeholder="请输入加班补助(夜班)" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="加班补助(假期)">
              <el-input v-model="editform.overtime_holiday" clearable placeholder="请输入加班补助(假期)" autocomplete="off"></el-input>
          </el-descriptions-item>
          <!-- 第八行 -->
          <el-descriptions-item span="1" label="体检费用承担方">
              <el-input v-model="editform.bear_fee" clearable placeholder="请输入体检费用承担方" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="2" label="车补">
              <el-input v-model="editform.car_repair" clearable placeholder="请输入车补" autocomplete="off"></el-input>
          </el-descriptions-item>
          <!-- 第九行 -->
          <el-descriptions-item span="1" label="住宿条件">
              <el-input v-model="editform.live_condition" clearable placeholder="请输入住宿条件" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="宿舍人数">
              <el-input v-model="editform.live_num" clearable placeholder="请输入宿舍人数" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="独立卫浴">
              <el-input v-model="editform.live_bathroom" clearable placeholder="请输入独立卫浴" autocomplete="off"></el-input>
          </el-descriptions-item>
          <!-- 第十行 -->
          <el-descriptions-item span="3" label="餐饮条件">
            <el-input v-model="editform.food_condition" placeholder="请输入餐饮条件" autocomplete="off"
              type="textarea" :autosize="{ minRows: 2 }" clearable
            ></el-input>
          </el-descriptions-item>
          <!-- 第十一行 -->
          <el-descriptions-item span="1" label="是否穿无尘服">
            <el-radio-group v-model="editform.is_cloth">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
              <!-- <el-input v-model="form.is_cloth" placeholder="请输入是否穿无尘服" autocomplete="off"></el-input> -->
          </el-descriptions-item>
          <el-descriptions-item span="1" label="穿无尘服补助">
              <el-input v-model="editform.is_cloth_fee" placeholder="请输入穿无尘服补助" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="厂车">
              <el-input v-model="editform.car_factory" placeholder="请输入厂车" autocomplete="off"></el-input>
          </el-descriptions-item>
          <!-- 第十二行 -->
          <el-descriptions-item span="1" label="保险规则">
            <el-radio-group v-model="editform.radioinsu">
              <el-radio :label="1">本人承担({{editform.insurance?editform.insurance:'___'}}元)</el-radio>
              <el-radio :label="2">企业承担</el-radio>
            </el-radio-group>
            <el-input v-if="editform.radioinsu==1" type="number" v-model="editform.insurance" placeholder="请输入本人承担多少元" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="保险类别">
            <el-input v-model="editform.insurance_type" clearable placeholder="请输入保险类别" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item span="1" label="保额">
            <el-input v-model="editform.insurance_fee" clearable placeholder="请输入保额" autocomplete="off"></el-input>
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEdit = false">取 消</el-button>
        <el-button type="primary" @click="editDialog">更 新</el-button>
      </div>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog :title="`详情:${this.dialogItem.customername}`" top="10px"
    :lock-scroll="false" :close-on-click-modal="false" width="910px"
    :visible.sync="dialogShow">
    <!-- :inline="true" -->
      <div id="desc-capture-pdf" style="padding:10px;">
        <h3 style="text-align: center;font-weight: bold;font-size: 21px;height: 24px;line-height: 20px;padding: 12px;">学生工需求单</h3>
        <el-descriptions :column="3" border>
          <!-- 第一行 -->
          <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" span="2" label="用人单位名称">
            {{this.dialogItem.customername}}
          </el-descriptions-item>
          <el-descriptions-item span="1" label="费用结算规则">
            {{this.dialogItem.costSettleRule}}
          </el-descriptions-item>
          <!-- 第二行 -->
          <el-descriptions-item span="1" label="岗位描述">
            {{this.dialogItem.jobDesc}}
          </el-descriptions-item>
          <el-descriptions-item span="2" label="工作时间">
            {{this.dialogItem.jobTime}}
          </el-descriptions-item>
          <!-- 第三行 -->
          <el-descriptions-item span="1" label="需求人数">
            {{this.dialogItem.peopleNum}}
          </el-descriptions-item>
          <el-descriptions-item span="2" label="倒班规则">
            {{this.dialogItem.workShiftRule}}
          </el-descriptions-item>
          <!-- 第四行 -->
          <el-descriptions-item span="3" label="岗位薪资结构">
              <el-input v-model="this.dialogItem.jobwageStru" placeholder="请输入岗位薪资结构" autocomplete="off"
                type="textarea" :autosize="{ minRows: 2 }" clearable
              ></el-input>
          </el-descriptions-item>
          <!-- 第五行 -->
          <el-descriptions-item span="1" label="保底工资">
            {{this.dialogItem.miniwage}}
          </el-descriptions-item>
          <el-descriptions-item span="1" label="发薪日">
            {{this.dialogItem.wageday}}
          </el-descriptions-item>
          <el-descriptions-item span="1" label="实习期限">
            {{this.dialogItem.probation}}
          </el-descriptions-item>
          <!-- 第六行 -->
          <el-descriptions-item span="1" label="男女比例">
            {{this.dialogItem.sexRatio}}
          </el-descriptions-item>
          <el-descriptions-item span="1" label="年龄要求">
            {{this.dialogItem.ageimpl}}
          </el-descriptions-item>
          <el-descriptions-item span="1" label="专业要求">
            {{this.dialogItem.majorimpl}}
          </el-descriptions-item>
          <!-- 第七行 -->
          <el-descriptions-item span="1" label="体验费用">
            {{this.dialogItem.exp_fee}}
          </el-descriptions-item>
          <el-descriptions-item span="1" label="加班补助(夜班)">
            {{this.dialogItem.overtime_night}}
          </el-descriptions-item>
          <el-descriptions-item span="1" label="加班补助(假期)">
            {{this.dialogItem.overtime_holiday}}
          </el-descriptions-item>
          <!-- 第八行 -->
          <el-descriptions-item span="1" label="体检费用承担方">
            {{this.dialogItem.bear_fee}}
          </el-descriptions-item>
          <el-descriptions-item span="2" label="车补">
            {{this.dialogItem.car_repair}}
          </el-descriptions-item>
          <!-- 第九行 -->
          <el-descriptions-item span="1" label="住宿条件">
            {{this.dialogItem.live_condition}}
          </el-descriptions-item>
          <el-descriptions-item span="1" label="宿舍人数">
            {{this.dialogItem.live_num}}
          </el-descriptions-item>
          <el-descriptions-item span="1" label="独立卫浴">
             {{this.dialogItem.live_bathroom}}
          </el-descriptions-item>
          <!-- 第十行 -->
          <el-descriptions-item span="3" label="餐饮条件">
            <el-input v-model="this.dialogItem.food_condition" placeholder="请输入餐饮条件" autocomplete="off"
              type="textarea" :autosize="{ minRows: 2 }" clearable
            ></el-input>
          </el-descriptions-item>
          <!-- 第十一行 -->
          <el-descriptions-item span="1" label="是否穿无尘服">
            {{this.dialogItem.is_cloth}}
              <!-- <el-input v-model="form.is_cloth" placeholder="请输入是否穿无尘服" autocomplete="off"></el-input> -->
          </el-descriptions-item>
          <el-descriptions-item span="1" label="穿无尘服补助">
            {{this.dialogItem.is_cloth_fee}}
          </el-descriptions-item>
          <el-descriptions-item span="1" label="厂车">
            {{this.dialogItem.car_factory}}
          </el-descriptions-item>
          <!-- 第十二行 -->
          <el-descriptions-item span="1" label="保险规则">
            {{this.dialogItem.insurance}}
          </el-descriptions-item>
          <el-descriptions-item span="1" label="保险类别">
            {{this.dialogItem.insurance_type}}
          </el-descriptions-item>
          <el-descriptions-item span="1" label="保额">
            {{this.dialogItem.insurance_fee}}
          </el-descriptions-item>
        </el-descriptions>
        <div class="box-card2">
          <h3 style="padding:5px;font-weight: bold;">签核状态</h3>
          <el-steps  class="box-card2" align-center :active="active" :space="150" :finish-status="finishstatus">
            <el-step :description="item.desc" v-for="item in this.activeItem" :key="item.index">
              <div slot="title">
                {{item.title}}
                <el-button v-if="item.admint==1 && item.admindex!='4' && item.admindex!='0'" type="text">等待签核</el-button>
              </div>
            </el-step>
          </el-steps>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onPrintPng(dialogItem.customername)">导出图片</el-button>
        <el-button type="primary" @click="onPrintPdf(dialogItem.customername)">导出PDF</el-button>
        <el-button @click="dialogShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { $postTo, $postToDialog } from '../../plugins/http'
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'

// @ is an alias to /srcv
export default {
  name: 'sxscustomerinfo',
  data () {
    return {
      active: 0,
      finishstatus: 'success',
      activeItem: [],
      dialogFormVisible: false,
      dialogShow: false,
      dialogEdit: false,
      dialogItem: {},
      customerItem: {
        loading: false,
        options: []
      },
      form: {
        area: '',
        customername: '',
        costsettlerule: '',
        jobdesc: '',
        jobtime: '',
        peoplenum: '',
        workshiftrule: '',
        jobwagestru: '',
        miniwage: '',
        wageday: '',
        probation: '',
        sexratio: '',
        ageimpl: '',
        majorimpl: '',
        exp_fee: '',
        overtime_night: '',
        overtime_holiday: '',
        bear_fee: '',
        car_repair: '',
        live_condition: '',
        live_num: '',
        live_bathroom: '',
        food_condition: '',
        is_cloth: '',
        is_cloth_fee: '',
        car_factory: '',
        insurance: '',
        insurance_type: '',
        insurance_fee: '',
        radioinsu: ''
      },
      addform: {
        customername: '',
      },
      editform: {
        id: '',
        // area: '',
        customername: '',
        costsettlerule: '',
        jobdesc: '',
        jobtime: '',
        peoplenum: '',
        workshiftrule: '',
        jobwagestru: '',
        miniwage: '',
        wageday: '',
        probation: '',
        sexratio: '',
        ageimpl: '',
        majorimpl: '',
        exp_fee: '',
        overtime_night: '',
        overtime_holiday: '',
        bear_fee: '',
        car_repair: '',
        live_condition: '',
        live_num: '',
        live_bathroom: '',
        food_condition: '',
        is_cloth: '',
        is_cloth_fee: '',
        car_factory: '',
        insurance: '',
        insurance_type: '',
        insurance_fee: '',
        radioinsu: ''
      },
      formInline: {
        customername: '',
        status: '',
      },
      tableData: [
      ],
      tablePag: {
        loading: false,
        size: 50,
        total: 0,
        index: 1,
      }
    }
  },
  mounted () {
    this.onHttpPage()
  },
  methods: {
    onPrintPdf (pdfName) {
      html2canvas(document.querySelector("#desc-capture-pdf")).then(function (canvas) {
        // const imgData = canvas.toDataURL('image/png', 1.0)
        const contentWidth = canvas.width
        const contentHeight = canvas.height
        // 一页pdf显示html页面生成的canvas高度;
        const pageHeight = (contentWidth / 595.28) * 841.89
        // 未生成pdf的html页面高度
        let htmlHeight = contentHeight
        // pdf页面偏移
        let position = 0
        // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        const imgWidth = 595.28
        const imgHeight = (595.28 / contentWidth) * contentHeight
        const pageData = canvas.toDataURL("image/jpeg", 1.0)
        const pdf = new JsPDF("", "pt", "a4")
        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        // 当内容未超过pdf一页显示的范围，无需分页
        if (htmlHeight < pageHeight) {
          pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight)
        } else {
          while (htmlHeight > 0) {
            pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight)
            htmlHeight -= pageHeight
            position -= 841.89
            // 避免添加空白页
            if (htmlHeight > 0) {
              pdf.addPage()
            }
          }
        }
        // 将内容图片添加到pdf中
        pdf.save(pdfName + ".pdf")
      })
    },
    onPrintPng (name) {
      // 把打印的内容截取出来
      // let header = `<html><head><title></title></head><body>`
      // let footer = `</boby></html>`
      // let content = document.querySelector('.desc-pdf').innerHTML
      // console.log(content)
      // 打印结构
      // document.boby.innerHTML = header + content + footer
      // window.print()
      html2canvas(document.querySelector("#desc-capture-pdf")).then(function (canvas) {
        // document.body.appendChild()
        // window.print()
        const imgData = canvas.toDataURL('image/png', 1.0)
        // console.log(imgData)
        // canvas.
        // 生成一个a元素
        const a = document.createElement('a')
        // 创建一个单击事件
        const event = new MouseEvent('click')

        // console.log(name)
        // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
        a.download = name
        // 将生成的URL设置为a.href属性
        a.href = imgData

        // 触发a的单击事件
        a.dispatchEvent(event)
      })
      // window.location.reload()
    },
    // onstatus (item) {
    //   // this.formInline.status = item
    //   console.log(item)
    // },
    onFocusCustomer () {
      // console.log('获取焦点')
      if (this.customerItem.options.length < 1) {
        this.customerItem.loading = true
        $postTo({
          action: 'customerinfo-info'
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.customerItem.options = res.data.map((x, index) => {
              return {
                label: x.customername,
                value: index,
                area: x.area,
                key: index
              }
            })
            console.log(this.customerItem.options)
          }
          this.customerItem.loading = false
        })
      }
    },
    onChangeCustomer (item) {
      console.log(item)
      if (item) {
        var obj = this.customerItem.options[item]
        this.form.area = obj.area
        this.form.customername = obj.label
      } else if (item === 0) {
        var obj1 = this.customerItem.options[item]
        this.form.area = obj1.area
        this.form.customername = obj1.label
      } else {
        this.form.area = ""
        this.form.customername = ""
      }
      // this.editform.area = obj.area
      console.log('获取焦点', obj)
    },
    startHacking () {
      this.$notify({
        title: 'It works!',
        type: 'success',
        message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
        duration: 5000
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    onSubmit () {
      console.log('submit!', this.formInline)
      this.onHttpPage()
      // $postToDialog({
      //   action: 'ok'
      // }, () => {
      // // 测试
      // })
      // $postTo({
      //   action: 'ok'
      // }).then(res => {
      //   console.log(res)
      // })
    },
    onPagCurrentChange (val) {
      this.onHttpPage(val)
    },
    onPagSizeChange (val) {
      this.tablePag.size = val
      this.onHttpPage()
    },
    delDialog () {
      this.addform.customername = ''
      this.form.customername = ''
      this.form.costsettlerule = ''
      this.form.jobdesc = ''
      this.form.jobtime = ''
      this.form.peoplenum = ''
      this.form.workshiftrule = ''
      this.form.jobwagestru = ''
      this.form.miniwage = ''
      this.form.wageday = ''
      this.form.probation = ''
      this.form.sexratio = ''
      this.form.ageimpl = ''
      this.form.majorimpl = ''
      this.form.exp_fee = ''
      this.form.overtime_night = ''
      this.form.overtime_holiday = ''
      this.form.bear_fee = ''
      this.form.car_repair = ''
      this.form.live_condition = ''
      this.form.live_num = ''
      this.form.live_bathroom = ''
      this.form.food_condition = ''
      this.form.is_cloth = ''
      this.form.is_cloth_fee = ''
      this.form.car_factory = ''
      this.form.insurance = ''
      this.form.insurance_type = ''
      this.form.insurance_fee = ''
      this.form.radioinsu = ''
    },
    editDialog () {
      console.log(this.editform)
      let {
        id,
        costsettlerule,
        jobdesc, jobtime, peoplenum,
        workshiftrule, jobwagestru,
        miniwage, wageday,
        probation, sexratio,
        ageimpl, majorimpl,
        exp_fee, overtime_night,
        overtime_holiday, bear_fee,
        car_repair, live_condition,
        live_num, live_bathroom,
        food_condition, is_cloth, is_cloth_fee,
        car_factory, insurance,
        insurance_type, insurance_fee,
        radioinsu
      } = this.editform
      if (radioinsu === 1) {
        if (!insurance) {
          this.$notify({
            title: '警告',
            message: '保险规则,本人承担金额不能为空',
            type: 'warning'
          })
          return false
        } else {
          insurance = `本人承担(${insurance}元)`
        }
      } else if (radioinsu === 2) {
        insurance = '企业承担'
      }
      // 编辑
      $postToDialog({
        action: 'customerinfo-update',
        id,
        costsettlerule,
        jobdesc, jobtime, peoplenum,
        workshiftrule, jobwagestru,
        miniwage, wageday,
        probation, sexratio,
        ageimpl, majorimpl,
        exp_fee, overtime_night,
        overtime_holiday, bear_fee,
        car_repair, live_condition,
        live_num, live_bathroom,
        food_condition, is_cloth, is_cloth_fee,
        car_factory, insurance,
        insurance_type, insurance_fee,
      }, (data, msg) => {
        // 测试
        // this.dialogEdit = false
        this.onHttpPage(this.tablePag.index)
        return '更新成功'
      }, {
        btn: '确认更新',
      })
    },
    // 提交表单
    addDialog () {
      // this.resetForm("form")
      // return false
      console.log(this.form)
      let {
        area, customername, costsettlerule,
        jobdesc, jobtime, peoplenum,
        workshiftrule, jobwagestru,
        miniwage, wageday,
        probation, sexratio,
        ageimpl, majorimpl,
        exp_fee, overtime_night,
        overtime_holiday, bear_fee,
        car_repair, live_condition,
        live_num, live_bathroom,
        food_condition, is_cloth, is_cloth_fee,
        car_factory, insurance,
        insurance_type, insurance_fee,
        radioinsu
      } = this.form
      if (!customername) {
        this.$notify({
          title: '警告',
          message: '用人单位不能为空',
          type: 'warning'
        })
        return false
      }
      if (radioinsu === 1) {
        if (!insurance) {
          this.$notify({
            title: '警告',
            message: '保险规则,本人承担金额不能为空',
            type: 'warning'
          })
          return false
        } else {
          insurance = `本人承担(${insurance}元)`
        }
      } else if (radioinsu === 2) {
        insurance = '企业承担'
      }
      $postToDialog({
        action: 'customerinfo-apply', area,
        customername, costsettlerule,
        jobdesc, jobtime, peoplenum,
        workshiftrule, jobwagestru,
        miniwage, wageday,
        probation, sexratio,
        ageimpl, majorimpl,
        exp_fee, overtime_night,
        overtime_holiday, bear_fee,
        car_repair, live_condition,
        live_num, live_bathroom,
        food_condition, is_cloth, is_cloth_fee,
        car_factory, insurance,
        // eslint-disable-next-line comma-dangle
        insurance_type, insurance_fee,
      }, (data, msg) => {
      // 测试
        this.dialogFormVisible = false
        this.delDialog()
        this.onHttpPage()
        return '提交成功'
      })
    },
    onHttpPage (index = 1) {
      this.tablePag.loading = true
      this.tablePag.index = index
      $postTo({
        // action: 'test-pages',
        action: 'customerinfo-pages',
        page: this.tablePag.index,
        limit: this.tablePag.size, // 20
        customername: this.formInline.customername,
        status: this.formInline.status,
      }).then(res => {
        if (res.code === 200) {
          // 测试
          this.tableData = [...res.data.resData]
          this.tablePag.total = res.data.total
        }
        this.tablePag.loading = false
      })
    },
    ontabhandleClick (item) {
      console.log(item)
      this.dialogItem = item
      this.dialogShow = true
      $postTo({
        action: 'customerinfo-other',
        id: item.id
      }).then(res => {
        if (res.code == 200) {
          this.active = 0
          let admint = 0
          let userid = ''
          this.activeItem = res.data.list.map((x, index) => {
            let desc = ''
            if (x.term) {
              if (x.remark) desc = "签核备注: " + x.remark + ","
              desc += '签核时间: ' + x.term
            }
            if (x.admit == '0' && res.data.index != '4') {
              admint += 1
              if (admint == 1) {
                userid = x.admitname
              }
            } else if (x.admit == '1') {
              this.finishstatus = "success"
              this.active = index + 1
            } else if (x.admit == '2') {
              this.finishstatus = "error"
              this.active = index + 1
              desc += ",未通过签核"
            }
            return {
              index: index,
              title: x.realname,
              desc,
              admint,
              admindex: res.data.index
            }
          })
        }
      })
    },
    onCommand (row, type) {
      console.log(type, row)
      if (type === 'del') {
        $postToDialog({
          action: 'customerinfo-del',
          id: row.id
        }, (res, msg) => {
          this.onHttpPage(this.tablePag.index)
          return '删除成功'
        }, {
          btn: '确认删除',
          message: `删除 ${row.customername},确认后将执行你的操作`
        })
      } else if (type == 'edit') {
        this.editform.id = row.id
        this.editform.customername = row.customername
        this.editform.costsettlerule = row.costSettleRule
        this.editform.jobdesc = row.jobDesc
        this.editform.jobtime = row.jobTime
        this.editform.peoplenum = row.peopleNum
        this.editform.workshiftrule = row.workShiftRule
        this.editform.jobwagestru = row.jobwageStru
        this.editform.miniwage = row.miniwage
        this.editform.wageday = row.wageday
        this.editform.probation = row.probation
        this.editform.sexratio = row.sexRatio
        this.editform.ageimpl = row.ageimpl
        this.editform.majorimpl = row.majorimpl
        this.editform.exp_fee = row.exp_fee
        this.editform.overtime_night = row.overtime_night
        this.editform.overtime_holiday = row.overtime_holiday
        this.editform.bear_fee = row.bear_fee
        this.editform.car_repair = row.car_repair
        this.editform.live_condition = row.live_condition
        this.editform.live_num = row.live_num
        this.editform.live_bathroom = row.live_bathroom
        this.editform.food_condition = row.food_condition
        this.editform.is_cloth = row.is_cloth
        this.editform.is_cloth_fee = row.is_cloth_fee
        this.editform.car_factory = row.car_factory
        this.editform.insurance_type = row.insurance_type
        this.editform.insurance_fee = row.insurance_fee
        if (row.insurance == '企业承担') {
          this.editform.insurance = ""
          this.editform.radioinsu = 2
        } else if (row.insurance) {
          this.editform.radioinsu = 1
          this.editform.insurance = row.insurance.split('(')[1].split('元')[0]
        } else {
          this.editform.radioinsu = ""
          this.editform.insurance = ""
        }
        // 编辑
        this.dialogEdit = true
      }
    }
  }
}
</script>

<style scoped>
.box-card{
  padding: 0;
  margin: 0;
}
.box-card2{
  margin-top: 10px;
}

.el-row {
  margin-bottom: 5px;
}
/* 说明一下desc */
.desc-label{
}
.desc-content{

}
/* 表头 */
</style>