<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="任务名称" prop="taskName">
        <el-input
          v-model="queryParams.taskName"
          placeholder="请输入任务名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用工日期" prop="taskDate">
        <el-date-picker clearable
                        v-model="queryParams.taskDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择用工日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="任务状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable>
          <el-option
            v-for="dict in dict.type.task_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['task:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['task:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['task:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['task:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="taskList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <!--      <el-table-column label="id" align="center" prop="id" />-->
      <el-table-column label="任务名称" align="center" prop="taskName" />
      <el-table-column label="用工日期" align="center" prop="taskDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.taskDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日结单价" align="center" prop="dayPrice" />
      <el-table-column label="用工数量" align="center" prop="useNum" />

      <el-table-column label="实际报名人数" align="center" prop="baomingNum" />
      <el-table-column label="签到人数" align="center" prop="signNum" />

      <el-table-column label="签到详情">
        <template slot-scope="scope">
          <a href="#" @click="openSignDialog(scope.row)" style="color: #0e66fd">查看详情</a>
        </template>
      </el-table-column>


      <el-table-column label="二维码" align="center" prop="codePic" width="100">
        <template slot-scope="scope">
          <!--          <image-preview :src="scope.row.codePic" :width="50" :height="50"/>-->
          <!--          <div>-->
          <!--            <h2></h2>-->
          <!--            <img :src="scope.row.codePic" :width="50" :height="50">-->
          <!--          </div>-->
          <img :src="scope.row.codePic" :width="50" :height="50" @click="picDialog(scope.row)">

        </template>
      </el-table-column>
      <el-table-column label="任务状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.task_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['task:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['task:remove']"
          >删除</el-button>

          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="shangjia(1, scope.row)"
            v-hasPermi="['task:edit']"
          >上架</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="shangjia(0, scope.row)"
            v-hasPermi="['task:edit']"
          >下架</el-button>


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

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改任务对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" :inline="true">


        <el-form-item label="任务名称" prop="taskName" label-width="100px">
          <el-input v-model="form.taskName" placeholder="请输入任务名称"  style="width: 300px;" />
        </el-form-item>
        <el-form-item label="用工日期" prop="taskDate" label-width="100px">
          <el-date-picker clearable  style="width: 300px;"
                          v-model="form.taskDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          :picker-options="pickerOptions"
                          placeholder="请选择用工日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="日结单价" prop="dayPrice" label-width="100px">
          <el-input v-model="form.dayPrice" placeholder="请输入日结单价"  style="width: 282px;" /> 元
        </el-form-item>
        <el-form-item label="用工数量" prop="useNum" label-width="100px">
          <el-input v-model="form.useNum" placeholder="请输入用工数量"  style="width: 300px;" />
        </el-form-item>



        <el-form-item label="用工人员" label-width="100px">

          <!--          <el-button slot="reference" type="primary" @click="addEmployee">+添加用工人员</el-button>-->

          <el-popover
            ref="popover"
            style="width: 300px;"
            placement="left"
            width="8000"
            trigger="click">

            <div class="d-title">
              添加人员
            </div>
            <el-form :model="emQueryParams" ref="emQueryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
              <el-form-item label="名字" prop="realName" label-width="40px">
                <el-input
                  v-model="emQueryParams.realName"
                  placeholder="请输入名字"
                  clearable
                  @keyup.enter.native="handleQuery" style="width: 150px;"
                />
              </el-form-item>
              <el-form-item label="手机" prop="phone" label-width="40px">
                <el-input
                  v-model="emQueryParams.phone"
                  placeholder="请输入手机"
                  clearable
                  @keyup.enter.native="handleQuery" style="width: 150px;"
                />
              </el-form-item>
              <el-form-item label="身份证" prop="idCard" label-width="70px">
                <el-input
                  v-model="emQueryParams.idCard"
                  placeholder="请输入身份证"
                  clearable
                  @keyup.enter.native="handleQuery" style="width: 150px;"
                />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="emHandleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="emResetQuery">重置</el-button>
              </el-form-item>
            </el-form>
            <div class="tb-container">
              <el-table :data="employeeList" @selection-change="emSelectionChange">
                <el-table-column type="selection" width="55" align="center" />

                <el-table-column width="200" property="realName" label="姓名"></el-table-column>
                <el-table-column width="200" property="phone" label="手机号"></el-table-column>
                <el-table-column width="200" property="idCard" label="身份证号"></el-table-column>
                <el-table-column  width="150" label="操作" align="center" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="addEmployee(scope.row)"
                      v-hasPermi="['task:remove']"
                    >添加</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <pagination
              v-show="emTotal>0"
              :total="emTotal"
              :page.sync="emQueryParams.pageNum"
              :limit.sync="emQueryParams.pageSize"
              @pagination="getEmployeeList"
            />
            <div class="e-dialog-footer">
              <el-button type="primary" @click="addBatch">确 定</el-button>
              <el-button @click="cancelEm">取 消</el-button>
            </div>

            <el-button slot="reference" @click="getEmployeeList" type="primary" >+添加用工人员</el-button>
          </el-popover>

        </el-form-item>

        <el-table v-loading="loading" :data="addEmList" @selection-change="handleSelectionChange">
          <!--          <el-table-column label="序号" align="center" prop="useNum" />-->
          <el-table-column label="序号">
            <template slot-scope="scope">
              <!-- 假设 pageSize 是每页显示的条目数，‌currentPage 是当前页码 -->
              <!--              <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>-->
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
<!--          <el-table-column width="200" prop="employeeId" label="emId"/>-->
          <el-table-column label="名字" align="center" prop="realName" />
          <el-table-column label="手机" align="center" prop="phone" />
          <el-table-column label="身份证" align="center" prop="idCard" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="delEmployee(scope.row)"
                v-hasPermi="['task:remove']"
              >移除</el-button>
            </template>
          </el-table-column>
        </el-table>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <div v-if="signDialogOpen" class="signDialog">

      <div class="head">
        <div class="title">
          签到详情
        </div>
        <div class="close" @click="closeSignDialog()">
          X
        </div>
      </div>

      <div class="table">
        <el-row :gutter="10" class="mb8 elrow">
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="signExport"
              v-hasPermi="['task:export']"
            >导出</el-button>
          </el-col>
        </el-row>


        <el-table :data="listSign">
          <!--          <el-table-column  type="selection" width="55" align="center" />-->
          <!--          <el-table-column width="100" property="id" label="id"></el-table-column>-->

          <el-table-column label="序号">
            <template slot-scope="scope">
              <!-- 假设 pageSize 是每页显示的条目数，‌currentPage 是当前页码 -->
              <!--              <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>-->
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>


          <el-table-column width="100" property="taskName" label="任务名称"></el-table-column>
          <el-table-column width="100" property="dayPrice" label="日结单价"></el-table-column>

          <el-table-column label="签到时间" align="center" prop="signTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.signTime) }}</span>
            </template>
          </el-table-column>


          <el-table-column width="100" property="employeeName" label="姓名"></el-table-column>
          <el-table-column width="150" property="phone" label="手机号"></el-table-column>
          <el-table-column width="150" property="idCard" label="身份证号"></el-table-column>
          <!--          <el-table-column width="100" property="employeeName" label="签到状态"></el-table-column>-->
          <el-table-column width="100" label="签到状态" align="center" prop="status">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sign_status" :value="scope.row.status"/>
            </template>
          </el-table-column>

          <el-table-column label="发放状态" align="center" prop="stEmployeeFundRecord.payStatus">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.pay_status" :value="scope.row.stEmployeeFundRecord == null ? 0 : scope.row.stEmployeeFundRecord.payStatus"/>
            </template>
          </el-table-column>

          <el-table-column width="200" property="remark" label="二次核验备注说明"></el-table-column>
        </el-table>


      </div>


    </div>

    <el-dialog class="codeDialog" title="下载二维码" :visible.sync="picDialogOpen" width="450px" append-to-body>
      <div ref="exportContent" class="export-content" id="box">
        <div class="box" >
          <h2 class="card-h2">{{nowTask == null ? "" : nowTask.taskName}}</h2>
          <h4 class="card-h2">用工日期：{{nowTask == null ? "" : nowTask.taskDate}}</h4>
          <img style="width: 400px; height: 400px" :src="nowTask == null ? '' : nowTask.codePic">

          <!--          <img style="width: 400px; height: 400px" src="http://img.jbzj.com/file_images/article/202311/2023112410293914.png">-->
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="downloadImg">下 载</el-button>
        <!--        <el-button @click="cancel">取 消</el-button>-->
      </div>
    </el-dialog>

  </div>
</template>

<style lang='scss'>
  .signDialog{
    background-color: #ffffff;
    border: 2px solid #000000;
    border-radius: 5px;
    width: 75%;
    height: 65%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    padding: 20px;
    overflow: hidden;
    overflow-y: auto; /* 允许垂直方向滚动 */
    .head{
      width: 100%;
      /*height: 50px;*/
      display: flex;
      align-items: center;
      justify-content: center;
      .title{
        font-family: PingFangSC-Regular;
        font-weight: bold;
        font-size: 20px;
        width: 95%;
        /*text-align: center;*/
      }
      .close{
        width: 5%;
        display: block;
        /*margin-right: 0px;*/
        cursor: pointer;
        display: flex;
        justify-content: right;
      }
    }
    .table{
      margin-top: 30px;
      margin-left: auto;
      margin-right: auto;
      /*width: 90%; !* 或者其他你想要的宽度 *!*/

      .elrow{
        display: flex;
        justify-content: right;
      }
    }
  }

</style>

<script>
  import { listTask, getTask, delTask, addTask, updateTask, shangjia, getListSign } from "@/api/task/task";
  import { listEmployee, getEmployee } from "@/api/employee/employee";
  import html2canvas from "html2canvas";
  export default {
    name: "Task",
    dicts: ['task_status', 'sign_status', 'pay_status'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        emIds: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        emTotal: 0,
        // 任务表格数据
        taskList: [],
        employeeList: [],
        addEmployeeMap: {},
        addEmList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          taskName: null,
          taskDate: null,
          status: null,
        },
        emQueryParams: {
          pageNum: 1,
          pageSize: 10,
          realName: null,
          phone: null,
          idCard: null,
          employeeType: null,
        },
        signQueryParams: {
          taskId: 0,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          taskName: [
            { required: true, message: "任务名称不能为空", trigger: "blur" }
          ],
          taskDate: [
            { required: true, message: "用工日期不能为空", trigger: "blur" }
          ],
          dayPrice: [
            { required: true, message: "日结单价不能为空", trigger: "blur" }
          ],
          useNum: [
            { required: true, message: "用工数量不能为空", trigger: "blur" }
          ],
        },
        signDialogOpen: false,
        listSign: {},
        picDialogOpen: false,
        nowTask: null,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7; // 禁用今天之前的日期
          }
        },
      };
    },
    created() {
      this.getList();
      this.addEmployeeMap = new Map();
    },
    methods: {
      /** 查询任务列表 */
      getList() {
        this.loading = true;
        listTask(this.queryParams).then(response => {
          this.taskList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      getEmployeeList() {
        // this.loading = true;
        listEmployee(this.emQueryParams).then(response => {
          this.employeeList = response.rows;
          this.emTotal = response.total;
          // this.loading = false;
        });
      },
      addEmployee(row){
        row["employeeName"] = row["realName"]
        row["employeeId"] = row["id"]
        this.addEmployeeMap.set(row.phone, row);
        this.addEmList = Array.from(this.addEmployeeMap).map(entry => (entry[1]));
      },
      addBatch(){
        for (let i = 0; i < this.emIds.length; i++) {
          this.emIds[i]["employeeName"] = this.emIds[i]["realName"]
          this.emIds[i]["employeeId"] = this.emIds[i]["id"]

          this.addEmployeeMap.set(this.emIds[i].phone, this.emIds[i]);
        }
        this.addEmList = Array.from(this.addEmployeeMap).map(entry => (entry[1]));
        this.$refs.popover.doClose();
      },
      delEmployee(row){
        this.addEmployeeMap.delete(row.phone);
        this.addEmList = Array.from(this.addEmployeeMap).map(entry => (entry[1]));
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      cancelEm(){
        this.$refs.popover.doClose();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          taskName: null,
          taskDate: null,
          dayPrice: null,
          useNum: null,
          codePic: null,
          status: null,
          updateTime: null
        };
        this.resetForm("form");
        this.addEmList = null;
        this.addEmployeeMap = new Map();

      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      emHandleQuery(){
        this.emQueryParams.pageNum = 1;
        this.getEmployeeList();
      },
      emResetQuery(){
        this.resetForm("emQueryForm");
        this.emHandleQuery();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      emSelectionChange(selection) {
        this.emIds = selection.map(item => item)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加任务";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        //如果已经发薪，则不能修改
        if (row.listSign == null){
          row.listSign = [];
        }
        for (let i = 0; i < row.listSign.length; i++) {
          if (row.listSign[i].stEmployeeFundRecord != null && row.listSign[i].stEmployeeFundRecord.payStatus == 1){
            this.$modal.msgError("已有发薪记录，无法修改");
            return;
          }
        }

        this.reset();
        const id = row.id || this.ids
        getTask(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改任务";
          for (let i = 0; i < row.listSign.length; i++) {
            row.listSign[i].realName = row.listSign[i].employeeName;
            this.addEmployeeMap.set(row.listSign[i].phone, row.listSign[i]);
          }
          this.addEmList = Array.from(this.addEmployeeMap).map(entry => (entry[1]));
        });
      },
      /** 提交按钮 */
      shangjia(status, row) {
        const ids = row.id || this.ids;
        this.reset();
        this.form.id = row.id;
        this.form.status = status;
        shangjia(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      },

      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.addEmList == null){
              this.addEmList = [];
            }
            if (this.form.id != null) {
              // for (let i = 0; i < this.addEmList.length; i++) {
              //   this.addEmList[i]["employeeName"] =  this.addEmList[i]["realName"];
              //   this.addEmList[i]["employeeId"] =  this.addEmList[i]["id"];
              // }
              this.form.listSign = this.addEmList;
              if (this.form.listSign.length > this.form.useNum){
                this.$modal.msgError("超出用工数量");
                return;
              }

              updateTask(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              // for (let i = 0; i < this.addEmList.length; i++) {
              //   this.addEmList[i]["employeeName"] =  this.addEmList[i]["realName"];
              //   this.addEmList[i]["employeeId"] =  this.addEmList[i]["id"];
              // }
              this.form.listSign = this.addEmList;
              if (this.form.listSign.length > this.form.useNum){
                this.$modal.msgError("超出用工数量");
                return;
              }
              addTask(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('删除后签到记录也会同步进行删除，确认要删除该任务吗?').then(function() {
          return delTask(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('task/task/export', {
          ...this.queryParams
        }, `task_${new Date().getTime()}.xlsx`)
      },
      signExport(){
        this.download('taskSign/sign/export', {
          ...this.signQueryParams
        }, `签到情况_${new Date().getTime()}.xlsx`)
      },
      openSignDialog(row){
        if (this.signDialogOpen){
          this.signDialogOpen = false;
        }else{
          this.signDialogOpen = true;
          this.signQueryParams.taskId = row.id;
          console.log(row);
          getListSign(row.id).then(response => {
            this.listSign =  response.rows;
          });
        }
      },

      closeSignDialog(){
        this.signDialogOpen = false;
      },
      picDialog(nowTask){
        this.picDialogOpen = true;
        this.nowTask = nowTask;
      },
      downloadImg(){
        let self = this

        // 获取要生成图片的 DOM 元素
        let canvasDom = this.$refs.exportContent
        // 获取指定的宽高  +10px的边框
        const width = canvasDom.clientWidth+10
        const height = canvasDom.clientHeight+10
        console.log(width,'宽');
        console.log(height,'高');


        const options = {
          logging:true,
          scale: 2.3,
          width: width,
          height:height,
          // 下面这两个配置项就可以解决网络图片截屏失败的问题
          useCORS: true, // Whether to attempt to load images from a server using CORS
          allowTaint: false, // 是否允许跨源图像污染画布
        }

        html2canvas(document.querySelector("#box"), options).then(canvas => {
          // 创建一个图片元素
          var img = canvas.toDataURL("image/png");
          // 可以选择将图片添加到页面中预览
          // var image = document.createElement("img");
          // image.src = img;
          // document.body.appendChild(image);

          // 或者可以下载图片
          var downloadLink = document.createElement("a");
          downloadLink.href = img;
          downloadLink.download = this.nowTask.taskName + ".png";
          downloadLink.click();
        });

      }
    }
  };
</script>
<style type="scss">
  /*.el-popover__reference-wrapper{*/
  /*  .el-button{*/
  /*    width: 300px;*/
  /*  }*/
  /*}*/
  .el-popover{
    width: auto !important;
  }
  .d-title{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 20px;
    margin-bottom: 10px;
  }
  .tb-container{
    width: 100%;
    height: 400px;
    display: flex;
    justify-items: center;
    .el-table{
      width: 80%;
      overflow: hidden;
      overflow-y: auto;
    }
  }
  .e-dialog-footer{
    margin-top: 20px;
    width: 100%;
    float: right;
    display: flex;

    button{
      margin-left: auto;
    }
  }
  .card-h2{
    width: 100%;
    text-align: center;
  }
  .codeDialog{
    .el-dialog__body{
      padding: 0px 20px;

      .export-content{
        padding: 30px 0px;
      }
    }

  }
  .el-table:before {
     width: 0 !important;
  }
</style>
