Lydc_frontend/src/components/TaskManagement/manage/DataManage.vue

<template>
  <div class="task-manage-page">
    <div class="toolbar-container">
      <div class="search-box">
        <el-input
          v-model="searchKeyword"
          placeholder="请输入关键词进行搜索"
          prefix-icon="el-icon-search"
          clearable
          size="small"
          @keyup.enter.native="handleSearch"
        ></el-input>
        <el-button 
          class="forest-btn search-btn" 
          size="small" 
          icon="el-icon-search" 
          @click="handleSearch"
        >搜索</el-button>
      </div>
      <div class="toolbar-actions">
        <el-button class="forest-btn" size="medium" icon="el-icon-download" @click="openBatchDownloadDialog">
            批量数据下载
        </el-button>
        <el-button class="forest-btn ghost" size="medium" icon="el-icon-copy-document" @click="ExchangeData()">
          任务数据复制
        </el-button>
      </div>
    </div>
    <el-table
      id="tableStyle"
      :data="filteredData"
      :height="720"
      stripe
      border
      highlight-current-row
      header-cell-class-name="sinCl"
      :default-sort = "{prop: 'date', order: 'descending'}"
    >
      <el-table-column
        label="序号"
        sortable
        type="index"
        min-width="80"
      ></el-table-column>
      <el-table-column
        prop="taskName"
        label="任务名称"
        sortable
        min-width="80"
      ></el-table-column>
      <el-table-column
        prop="databaseName"
        label="数据库名称"
        sortable
        min-width="95"
      ></el-table-column>
      <el-table-column
        prop="introduction"
        label="任务备注"
        sortable
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        sortable
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="modifyTime"
        label="修改时间"
        sortable
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="operator"
        label="操作人员"
        min-width="80"
      ></el-table-column>
      <el-table-column width="305" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native.prevent="UploadShpData(scope.row.id)"
            >上传shp数据</el-button
          >
          <el-button
            type="text"
            size="small"
            @click.native.prevent="UploadXlsxData(scope.row.id)"
            >上传xlsx文件</el-button
          >

          <el-button
            @click.native.prevent="download(scope.row.id)"
            type="text"
            size="small"
            >下载数据</el-button
          >
          <el-button type="text" size="small" @click="getTaskTpk(scope.row.id)"
            >TPK管理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-card class="box-card" v-show="tpkCardV">
      <div slot="header" class="clearfix">
        <span style="float: left; padding: 3px 0; font-size: 16px"
          >{{ tpkTask }} TPK管理</span
        >
        <el-button
          style="float: right; padding: 10px 0; color: #9dbbe7"
          type="text"
          @click="tpkCardV = false"
          >关闭</el-button
        >
      </div>

      <el-upload
        accept=".tpk"
        class="upload-demo"
        action="tpk"
        ref="uploadtpkfile"
        :auto-upload="false"
        :limit="1"
        :before-upload="beforeTpkUpload"
        :on-change="uploadTPK"
      >
        <el-button size="small" id="buttonStyle" plain>上传TPK文件</el-button>
      </el-upload>
      <div v-for="item in tpkDatas" :key="item.id" class="text">
        {{ item.filename }}
        <el-button
          style="color: #9dbbe7"
          type="text"
          @click="deleteTpk(item.id)"
          >删除</el-button
        >
      </div>
      <el-pagination
        :page-size="1"
        :pager-count="5"
        layout="prev, pager, next"
        :total="tpkTotalP"
        @current-change="getTaskTpkP"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      v-dialogDrag
      class="taskDialog"
      title="上传shp数据"
      :visible.sync="UploadDialogVisible1"
      :close-on-click-modal="false"
    >
      <div style="text-align: left; margin-top: 20px">
        <el-form ref="shpform" :model="shpform" label-width="80px">
          <el-form-item label="shp文件" style="margin-bottom: 10px !important">
            <el-upload
              accept=".shp"
              class="upload-demo"
              action="shp"
              ref="uploadshpfile"
              :auto-upload="false"
              :limit="1"
              :before-upload="beforeShpUpload"
              :on-change="getFile"
              :on-remove="removeFile"
            >
              <el-button size="small" id="buttonStyle" plain
                >选择文件</el-button
              >
            </el-upload>
          </el-form-item>
          <el-form-item label="shx文件" style="margin-bottom: 10px !important">
            <el-upload
              accept=".shx"
              class="upload-demo"
              action="shx"
              ref="uploadshxfile"
              :auto-upload="false"
              :limit="1"
              :before-upload="beforeShxUpload"
              :on-change="getShxFile"
              :on-remove="removeShxFile"
            >
              <el-button size="small" id="buttonStyle" plain
                >选择文件</el-button
              >
            </el-upload>
          </el-form-item>
          <el-form-item label="dbf文件" style="margin-bottom: 10px !important">
            <el-upload
              accept=".dbf"
              class="upload-demo"
              action="dbf"
              ref="uploaddbffile"
              :auto-upload="false"
              :limit="1"
              :before-upload="beforeDbfUpload"
              :on-change="getDbfFile"
              :on-remove="removeDbfFile"
            >
              <el-button size="small" id="buttonStyle" plain
                >选择文件</el-button
              >
            </el-upload>
          </el-form-item>
          <el-form-item label="表">
            <el-select
              v-model="shpform.tableName"
              style="width: 80%"
              placeholder="请选择表"
              clearable
            >
              <el-option
                v-for="item in tableOptions"
                :key="item.tableName"
                :label="item.tableChineseName"
                :value="item.tableName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-button size="small" id="buttonStyle" @click="UploadShp1()"
        >下一步</el-button
      >
    </el-dialog>
    <el-dialog
      v-dialogDrag
      class="taskDialog"
      title="上传shp数据"
      :visible.sync="UploadDialogVisible2"
      :close-on-click-modal="false"
    >
      <el-table
        :data="shpData"
        :height="340"
        stripe
        highlight-current-row
        class="tb-edit"
        style="width: 100%"
      >
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column
          prop="srcTableField"
          label="源字段"
          min-width="80"
        ></el-table-column>
        <el-table-column prop="destTableField" label="目标字段" min-width="80">
          <template slot-scope="scope">
            <el-select
              size="small"
              v-model="scope.row.destTableField"
              placeholder="请选择"
            >
              <el-option
                v-for="item in destFieldsOptions"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteField(scope.$index)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button size="small" @click="backShp1()">上一步</el-button>
      <el-button id="buttonS" size="small" @click="UploadShp2()"
        >完成</el-button
      >
    </el-dialog>
    <el-dialog
      v-dialogDrag
      class="taskDialog"
      title="下载数据"
      :visible.sync="DownloadDialogVisible"
      :close-on-click-modal="false"
    >
      <div style="text-align: left; margin-top: 20px">
        <el-form ref="shpform" :model="shpform" label-width="120px">
          <el-form-item label="表">
            <el-select
              v-model="shpform.tableName"
              style="width: 90%"
              placeholder="请选择表"
              clearable
            >
              <el-option
                v-for="item in tableOptions"
                :key="item.tableName"
                :label="item.tableChineseName"
                :value="item.tableName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="dbf属性表编码">
            <el-select
              v-model="shpform.codeType"
              style="width: 90%"
              placeholder="请选择编码方式"
              clearable
            >
              <el-option
                v-for="item in codeOptions"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div style="text-align: center; margin-bottom: 10px">
          ArcGIS:10-10.2版本默认dbf编码为gbk；10.2.1+的版本默认dbf编码为utf-8。
        </div>
      </div>
      <el-button size="small" @click="DownloadData()">确定</el-button>
    </el-dialog>
    <el-dialog
      v-dialogDrag
      class="taskDialog"
      title="上传xlsx文件"
      :visible.sync="UploadDialogVisible3"
      :close-on-click-modal="false"
    >
      <div style="text-align: left; margin-top: 20px">
        <el-form ref="xlsxform" :model="xlsxform" label-width="80px">
          <el-form-item label="xlsx文件">
            <el-upload
              accept=".xlsx, .xls"
              class="upload-demo"
              action="xlsx"
              ref="uploadxlsxfile"
              :auto-upload="false"
              :limit="1"
              :before-upload="beforeXlsxUpload"
              :on-change="getFile"
              :on-remove="removeFile"
            >
              <el-button size="small" type="primary" plain>选择文件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="表">
            <el-select
              v-model="shpform.tableName"
              style="width: 60%; margin-bottom: 10px"
              placeholder="请选择表"
              clearable
            >
              <el-option
                v-for="item in tableOptions"
                :key="item.tableName"
                :label="item.tableChineseName"
                :value="item.tableName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-button size="small" @click="UploadShp3()">下一步</el-button>
    </el-dialog>
    <el-dialog
      v-dialogDrag
      class="taskDialog"
      title="上传xlsx文件"
      :visible.sync="UploadDialogVisible4"
      :close-on-click-modal="false"
    >
      <el-table
        :data="shpData"
        :height="340"
        stripe
        highlight-current-row
        class="tb-edit"
        style="width: 100%"
      >
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column
          prop="srcTableField"
          label="源字段"
          min-width="80"
        ></el-table-column>
        <el-table-column prop="destTableField" label="目标字段" min-width="80">
          <template slot-scope="scope">
            <el-select
              size="small"
              v-model="scope.row.destTableField"
              placeholder="请选择"
            >
              <el-option
                v-for="item in destFieldsOptions"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteField(scope.$index)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button size="small" @click="backShp2()">上一步</el-button>
      <el-button type="primary" size="small" @click="UploadShp4()"
        >完成</el-button
      >
    </el-dialog>
    <!--复制任务数据-->
    <el-dialog
      v-dialogDrag
      class="taskDialog"
      title="任务数据复制"
      :visible.sync="ExchangeDialogVisible1"
      :close-on-click-modal="false"
    >
      <div style="text-align: left">
        <el-form ref="exchangeform" :model="exchangeform" label-width="80px">
          <el-form-item label="源任务" style="margin-top: 20px">
            <el-select
              v-model="exchangeform.srcTask"
              style="width: 90%"
              placeholder="请选择任务"
              clearable
            >
              <el-option
                v-for="item in srcTaskOptions"
                :key="item.id"
                :label="item.taskName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目标任务">
            <el-select
              v-model="exchangeform.destTask"
              style="width: 90%"
              placeholder="请选择任务"
              clearable
            >
              <el-option
                v-for="item in destTaskOptions"
                :key="item.id"
                :label="item.taskName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否抽查">
            <el-checkbox v-model="exchangeform.isSelective"></el-checkbox>
          </el-form-item>
          <el-form-item
            label="抽查方式"
            v-show="exchangeform.isSelective == true"
          >
            <el-select
              v-model="exchangeType"
              style="width: 90%"
              placeholder="请选择抽查方式"
              clearable
            >
              <el-option
                v-for="item in exTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- todo:添加where语句抽查输入框 -->
          <el-form-item
            label="抽查数量"
            v-show="exchangeform.isSelective == true && exchangeType === 2"
          >
            <el-input
              style="width: 90%"
              v-model="exchangeform.selectDataNum"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="抽查比例"
            v-show="exchangeform.isSelective == true && exchangeType === 1"
          >
            <el-input
              style="width: 87%"
              v-model="exchangeform.selectDataNum"
            ></el-input>
            %
          </el-form-item>
          <el-form-item
            label="抽查语句"
            v-show="exchangeform.isSelective == true"
          >
            <el-input
              style="width: 90%"
              v-model="exchangeform.selectWhereClause"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-button size="small" id="buttonStyle" @click="exchangeData1()"
        >下一步</el-button
      >
    </el-dialog>
    <el-dialog
      v-dialogDrag
      class="taskDialog"
      title="任务数据复制"
      :visible.sync="ExchangeDialogVisible2"
      :close-on-click-modal="false"
    >
      <div style="text-align: left">
        <el-form
          ref="exchangeform"
          :model="exchangeformTable"
          label-width="80px"
        >
          <el-form-item label="源表">
            <el-select
              v-model="exchangeformTable.srcTable"
              style="width: 90%; margin-bottom: 10px"
              placeholder="请选择表"
              @change="changeTable()"
              clearable
            >
              <el-option
                v-for="item in tableOptions1"
                :key="item.tableName"
                :label="item.tableChineseName"
                :value="item.tableName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目标表">
            <el-select
              v-model="exchangeformTable.destTable"
              style="width: 90%; margin-bottom: 10px"
              placeholder="请选择表"
              clearable
            >
              <el-option
                v-for="item in tableOptions2"
                :key="item.tableName"
                :label="item.tableChineseName"
                :value="item.tableName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-button
        size="small"
        id="buttonStyle"
        @click="
          ExchangeDialogVisible1 = true;
          ExchangeDialogVisible2 = false;
        "
        >上一步</el-button
      >
      <el-button id="buttonStyle" size="small" @click="exchangeData2()"
        >下一步</el-button
      >
    </el-dialog>
    <!-- 批量数据下载 -->
<el-dialog
  v-dialogDrag
  title="批量数据下载"
  :visible.sync="batchDownloadDialogVisible"
  :close-on-click-modal="false"
  width="500px"
>
  <!-- 全选 / 全不选 按钮 -->
  <div style="margin-bottom: 10px; text-align: right;">
    <el-button type="text" @click="selectAll">全选</el-button>
    <el-button type="text" @click="clearAll">全不选</el-button>
  </div>

  <!-- 可滚动内容区域 -->
  <div style="max-height: 600px; overflow-y: auto; padding-right: 10px;">
    <el-checkbox-group v-model="batchDownloadSelectedTasks" style="width: 100%">
      <el-checkbox
        v-for="task in tasksData"
        :key="task.id"
        :label="task.id"
      >
        {{ task.taskName }}
      </el-checkbox>
    </el-checkbox-group>
  </div>

  <!-- 固定底部按钮 -->
  <span slot="footer" class="dialog-footer">
    <el-button size="small" @click="batchDownloadDialogVisible = false">取消</el-button>
    <el-button type="primary" size="small" @click="batchDownload">下载</el-button>
  </span>
</el-dialog>

<!--  -->
    <el-dialog
      v-dialogDrag
      class="taskDialog"
      title="任务数据复制"
      :visible.sync="ExchangeDialogVisible3"
      :close-on-click-modal="false"
    >
      <el-table
        :data="shpData"
        :height="340"
        stripe
        highlight-current-row
        class="tb-edit"
        style="width: 100%"
      >
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column
          prop="srcTableField"
          label="源字段"
          min-width="80"
        ></el-table-column>
        <el-table-column prop="destTableField" label="目标字段" min-width="80">
          <template slot-scope="scope">
            <el-select
              size="small"
              v-model="scope.row.destTableField"
              placeholder="请选择"
            >
              <el-option
                v-for="item in destFieldsOptions"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteField(scope.$index)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button
        size="small"
        @click="
          ExchangeDialogVisible2 = true;
          ExchangeDialogVisible3 = false;
        "
        >上一步</el-button
      >
      <el-button type="primary" size="small" @click="exchangeData3()"
        >完成</el-button
      >
    </el-dialog>
  </div>
</template>
<script>
import { ajax as request } from "@/request.js";
import axios from "axios";
export default {
  data() {
    return {
      tasksData: [],
      srcTaskOptions: [],
      destTaskOptions: [],
      UploadDialogVisible1: false,
      UploadDialogVisible2: false,
      tableOptions: [],
      tableOptions1: [],
      tableOptions2: [],
      codeOptions: [
        { value: false, label: "gbk" },
        { value: true, label: "utf-8" },
      ],
      shpform: {
        tableName: "",
        codeType: "",
      },
      xlsxform: {
        tableName: "",
      },
      taskIndex: "",
      fileList: [],
      dbfList: [],
      shxList: [],
      shpData: [],
      srcFieldsOptions: [],
      destFieldsOptions: [],
      DownloadDialogVisible: false,
      UploadDialogVisible3: false,
      UploadDialogVisible4: false,
      ExchangeDialogVisible1: false,
      ExchangeDialogVisible2: false,
      ExchangeDialogVisible3: false,
      exchangeform: {
        srcTask: "",
        destTask: "",
        isSelective: false,
        selectDataNum: "",
        selectWhereClause: "",
      },
      exchangeformTable: {
        srcTable: "",
        destTable: "",
      },
      tablemapping: [],
      exTypeOptions: [
        { label: "按比例抽查", value: 1 },
        { label: "按数量抽查", value: 2 },
      ],
      exchangeType: "",
      tpkTotalP: 100,
      tpkTask: "",
      tpkTaskId: "",
      tpkCardV: false,
      currentPage: "",
      tpkDatas: [],
      searchKeyword: "", // 搜索关键词
      filteredData: [], // 过滤后的数据
      batchDownloadDialogVisible: false, // 批量下载对话框显示
      batchDownloadSelectedTasks: [], // 勾选的任务ID
      // 分页相关属性
      pageNum: 1,
      pageSize: 10,
      total: 0,
      totalPages: 0

    };
  },
  methods: {
   selectAll() {
    // 将所有任务 id 填入选中数组
    this.batchDownloadSelectedTasks = this.tasksData.map(task => task.id);
  },
  clearAll() {
    // 清空选中数组
    this.batchDownloadSelectedTasks = [];
  },
  // 打开批量下载对话框
  openBatchDownloadDialog() {
    this.batchDownloadSelectedTasks = [];
    this.batchDownloadDialogVisible = true;
  },

  // 批量下载
  batchDownload() {
    if (this.batchDownloadSelectedTasks.length === 0) {
      this.$message.info("请先选择任务");
      return;
    }

    // 关闭弹窗
    this.batchDownloadDialogVisible = false;

    // 构建下载链接
    const taskIds = this.batchDownloadSelectedTasks.join(',');
    const url = `/export/batchGdbExport?taskIds=${taskIds}`;

    // 打开新窗口触发下载
    window.open(url, "_blank");

    this.$message.success("批量下载请求已发起");
  },
    // 搜索处理方法 - 搜索时重置到第一页并重新加载数据
    handleSearch() {
      this.pageNum = 1;
      this.init();
    },
    // 分页大小改变处理
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.init();
    },
    // 当前页改变处理
    handleCurrentChange(val) {
      this.pageNum = val;
      this.init();
    },

    //读取数据库 初始化数据 - 使用分页接口获取数据
    init() {
      let that = this;
      // 构建请求参数
      const params = {
        pageNum: that.pageNum,
        pageSize: that.pageSize,
        keyword: that.searchKeyword && that.searchKeyword.trim() ? that.searchKeyword.trim() : ''
      };
      
      request({
        url: "/task/selectTaskHasCreatedPaginated",
        method: "get",
        params: params
      }).then(function (response) {
        if (response.data.success === true) {
          const result = response.data.data;
          
          // 从返回的数据结构中提取数据数组和分页信息
          that.tasksData = result.data || [];
          
          // 分页信息在 pageInfo 对象中
          if (result.pageInfo) {
            that.total = result.pageInfo.total || 0;
            that.totalPages = result.pageInfo.totalPages || 0;
            that.pageNum = result.pageInfo.pageNum || 1;
            that.pageSize = result.pageInfo.pageSize || 10;
          } else {
            // 兼容旧格式（如果 pageInfo 不存在）
            that.total = result.total || 0;
            that.totalPages = result.totalPages || 0;
            that.pageNum = result.pageNum || 1;
            that.pageSize = result.pageSize || 10;
          }
          
          that.filteredData = [...that.tasksData];
          that.srcTaskOptions = that.tasksData;
          that.destTaskOptions = that.tasksData;
        } else if (response.data.status === "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        } else {
          that.$message.error(response.data.message || "获取数据失败");
        }
      }).catch(function (error) {
        console.error("获取数据失败:", error);
        that.$message.error("获取数据失败，请稍后重试");
      });
    },
    beforeTpkUpload(file) {
      if (file.type != "tpk") {
        this.$message.error("请上传shp格式数据!");
        return false;
      }
      return true;
    },
    beforeShpUpload(file) {
      if (file.type != "shp") {
        this.$message.error("请上传shp格式数据!");
        return false;
      }
      return true;
    },
    beforeShxUpload(file) {
      if (file.type != "shx") {
        this.$message.error("请上传shx格式数据!");
        return false;
      }
      return true;
    },
    beforeDbfUpload(file) {
      if (file.type != "dbf") {
        this.$message.error("请上传dbf格式数据!");
        return false;
      }
      return true;
    },
    beforeXlsxUpload(file) {
      if (file.type != "xlsx" && file.type != "xls") {
        this.$message.error("请上传xlsx/xls格式文件!");
        return false;
      }
      return true;
    },
    getFile(file) {
      this.fileList = [];
      this.fileList.push(file.raw);
    },
    removeFile() {
      this.fileList = [];
    },
    getShxFile(file) {
      this.shxList = [];
      this.shxList.push(file.raw);
    },
    removeShxFile() {
      this.shxList = [];
    },
    getDbfFile(file) {
      this.dbfList = [];
      this.dbfList.push(file.raw);
    },
    removeDbfFile() {
      this.dbfList = [];
    },
    ExchangeData() {
      this.ExchangeDialogVisible1 = true;
      this.exchangeform.srcTask = "";
      this.exchangeform.destTask = "";
      this.exchangeform.isSelective = false;
      this.exchangeform.selectDataNum = "";
    },
    exchangeData1() {
      if (this.exchangeform.srcTask == "" || this.exchangeform.destTask == "") {
        this.$message.info("请先选择任务");
        return;
      }
      if (this.exchangeform.srcTask == this.exchangeform.destTask) {
        this.$message.error("源任务和目标任务重复");
        return;
      }
      if (
        this.exchangeform.selectDataNum == "" &&
        this.exchangeform.isSelective &&
        this.exchangeType === 2
      ) {
        this.$message.info("请输入抽查数量，为1-9999之间的整数");
        return;
      }
      if (
        (this.exchangeform.selectDataNum < 1 ||
          this.exchangeform.selectDataNum > 9999) &&
        this.exchangeform.isSelective &&
        this.exchangeType === 2
      ) {
        this.$message.info("抽查数量为1-9999之间的整数");
        return;
      }
      if (
        (this.exchangeform.selectDataNum > 100 ||
          this.exchangeform.selectDataNum < 1) &&
        this.exchangeform.isSelective &&
        this.exchangeType === 1
      ) {
        this.$message.info("抽查比例不可小于1%或大于100%");
        return;
      }
      this.ExchangeDialogVisible1 = false;
      this.ExchangeDialogVisible2 = true;
      this.exchangeformTable.srcTable = "";
      this.exchangeformTable.destTable = "";
      let that = this;
      this.tablemapping = [];
      that.tableOptions1 = [];
      that.tableOptions2 = [];
      // 请求任务列表
      request({
        url: "/import/getRootTablesName",
        method: "post",
        params: {
          taskId: that.exchangeform.destTask,
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.tableOptions2 = response.data.data;
        } else if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        }
      });
      request({
        url: "/import/getRootTablesName",
        method: "post",
        params: {
          taskId: that.exchangeform.srcTask,
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.tableOptions1 = response.data.data;
        } else if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        }
      });

      request({
        url: "/import/getTaskTableMapping",
        method: "post",
        params: {
          srcTaskId: that.exchangeform.srcTask,
          destTaskId: that.exchangeform.destTask,
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.tablemapping = response.data.data;
          if (that.tablemapping.length > 0) {
            that.exchangeformTable.srcTable = that.tablemapping[0].srcTable;
            that.exchangeformTable.destTable = that.tablemapping[0].destTable;
          }
        } else if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        }
      });
    },
    changeTable() {
      this.exchangeformTable.destTable = "";
      if (this.tablemapping.length > 0) {
        for (var i = 0; i < this.tablemapping.length; i++) {
          if (
            this.exchangeformTable.srcTable == this.tablemapping[0].srcTable
          ) {
            this.exchangeformTable.destTable == this.tablemapping[0].destTable;
            break;
          }
        }
      }
    },
    uploadTPK(file) {
      let fd = new FormData();
      fd.append("image", file.raw);
      fd.append("taskId", this.tpkTaskId);
      let that = this;
      axios({
        url: "/api/image/new",
        method: "post",
        data: fd,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.$message.success("tpk文件上传成功");
          that.$refs.uploadtpkfile.clearFiles();
          that.getTaskTpkP(that.currentPage);
        } else {
          that.$notify.error({
            title: "提示",
            message: response.data.message,
          });
          that.$refs.uploadtpkfile.clearFiles();
        }
      });
    },
    getTaskTpk(taskId) {
      let row = this.tasksData.find(item => item.id === taskId);
      if (!row) return;

      this.tpkCardV = true;
      this.tpkTask = row.taskName;
      this.tpkTaskId = taskId;
      let that = this;
      request({
        url: "/images",
        method: "get",
        params: {
          taskId: taskId,
          page: "1",
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.tpkDatas = response.data.data.data;
          that.tpkTotalP = response.data.data.total;
        } else {
          that.tpkDatas = [];
          that.tpkTotalP = 0;
        }
      });
    },
    //获取具体页tpk
    getTaskTpkP(page1) {
      this.currentPage = page1;
      let that = this;
      request({
        url: "/images",
        method: "get",
        params: {
          taskId: this.tpkTaskId,
          page: page1,
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.tpkDatas = response.data.data.data;
          that.tpkTotalP = response.data.data.total;
        } else {
          that.tpkDatas = [];
          that.tpkTotalP = 0;
        }
      });
    },
    deleteTpk(id) {
      let that = this;
      request({
        url: "/image/delete",
        method: "get",
        params: {
          ids: id,
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.$message.success("成功删除tpk文件");
          that.getTaskTpkP(that.currentPage);
        } else if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        }
      });
    },
    exchangeData2() {
      if (
        this.exchangeformTable.srcTable == "" ||
        this.exchangeformTable.destTable == ""
      ) {
        this.$message.info("请先选择表");
        return;
      }
      this.ExchangeDialogVisible2 = false;
      this.ExchangeDialogVisible3 = true;
      this.shpData = [];
      this.destFieldsOptions = [];

      let that = this;
      request({
        url: "/import/getTableFieldsName",
        method: "post",
        params: {
          taskId: this.exchangeform.destTask,
          tableName: this.exchangeformTable.destTable,
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.destFieldsOptions = response.data.data;
        } else if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        }
      });
      request({
        url: "/import/getTaskTableFieldMapping",
        method: "post",
        params: {
          srcTaskId: this.exchangeform.srcTask,
          destTaskId: this.exchangeform.destTask,
          srcTableName: this.exchangeformTable.srcTable,
          destTableName: this.exchangeformTable.destTable,
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.shpData = response.data.data;
        } else if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        }
      });
    },
    exchangeData3() {
      for (var i = 0; i < this.shpData.length; i++) {
        if (this.shpData[i].destTableField == "") {
          this.$message.error("目标字段不可为空");
          return;
        }
      }
      for (var i = 0; i < this.shpData.length; i++) {
        for (var j = 0; j < this.shpData.length; j++) {
          if (
            this.shpData[i].destTableField == this.shpData[j].destTableField &&
            i !== j
          ) {
            this.$message.error("目标字段不可重复");
            return;
          }
        }
      }
      let that = this;
      if (!that.exchangeform.isSelective) {
        that.exchangeform.selectDataNum = "0";
      }
      let mynumber = that.exchangeform.selectDataNum;
      if (that.exchangeform.isSelective) {
        if (that.exchangeType === 1) {
          mynumber = mynumber + "%";
        }
      }
      //todo:where语句抽查 添加接口
      request({
        url: "/import/taskTableDataMigration",
        method: "post",
        params: {
          srcTaskId: this.exchangeform.srcTask,
          destTaskId: this.exchangeform.destTask,
          srcTableName: this.exchangeformTable.srcTable,
          destTableName: this.exchangeformTable.destTable,
          isSelective: that.exchangeform.isSelective,
          selectDataNum: mynumber,
          whereClause: that.exchangeformTable.selectWhereClause,
          fieldMapping: JSON.stringify(that.shpData),
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.$message.success("数据上传成功");
          that.ExchangeDialogVisible3 = false;
        } else if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        } else if (response.data.status == "400") {
          that.$message.error(response.data.message);
        }
      });
    },
    UploadShpData(taskId) {
      this.shpform.tableName = "";
      this.fileList = [];
      if (this.$refs.uploadshpfile) {
        this.$refs.uploadshpfile.clearFiles();
      }
      if (this.$refs.uploadshxfile) {
        this.$refs.uploadshxfile.clearFiles();
      }
      if (this.$refs.uploaddbffile) {
        this.$refs.uploaddbffile.clearFiles();
      }
      this.UploadDialogVisible1 = true;
      this.taskIndex = taskId; // 存储任务ID而不是索引
      let that = this;
      that.tableOptions = [];
      // 请求任务列表
      request({
        url: "/import/getRootTablesName",
        method: "post",
        params: {
          taskId: taskId,
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.tableOptions = response.data.data;
        } else if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        }
      });
    },
    UploadXlsxData(taskId) {
      this.shpform.tableName = "";
      this.fileList = [];
      if (this.$refs.uploadxlsxfile) {
        this.$refs.uploadxlsxfile.clearFiles();
      }
      this.UploadDialogVisible3 = true;
      this.taskIndex = taskId; // 存储任务ID而不是索引
      let that = this;
      that.tableOptions = [];
      // 请求任务列表
      request({
        url: "/import/getTablesName",
        method: "post",
        params: {
          taskId: taskId,
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.tableOptions = response.data.data;
        } else if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        }
      });
    },
    UploadShp1() {
      let fd = new FormData();
      this.destFieldsOptions = [];
      this.shpData = [];
      if (!this.fileList[0]) {
        this.$message.info("请先选择shp文件");
        return;
      } else {
        fd.append("shp", this.fileList[0]);
      }
      if (!this.shxList[0]) {
        this.$message.info("请先选择shx文件");
        return;
      } else {
        fd.append("shx", this.shxList[0]);
      }
      if (!this.dbfList[0]) {
        this.$message.info("请先选择dbf文件");
        return;
      } else {
        fd.append("dbf", this.dbfList[0]);
      }
      if (!this.shpform.tableName) {
        this.$message.info("请先选择表");
        return;
      }
      fd.append("destTaskId", this.taskIndex); // 直接使用存储的任务ID
      fd.append("destTableName", this.shpform.tableName);
      let that = this;
      request({
        url: "/import/getTableFieldsName",
        method: "post",
        params: {
          taskId: this.taskIndex, // 直接使用存储的任务ID
          tableName: that.shpform.tableName,
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.destFieldsOptions = response.data.data;
        } else if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        }
      });
      axios({
        url: "/api/import/getShpAndFieldMapping",
        method: "post",
        data: fd,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.shpData = response.data.data;
          that.UploadDialogVisible1 = false;
          that.UploadDialogVisible2 = true;
        } else {
          if (response.data.status == 400) {
            that.$notify.error({
              title: "提示",
              message: response.data.message,
            });
          } else {
            that.$notify.error({
              title: "提示",
              message: "上传出错",
            });
          }
        }
      });
    },
    UploadShp2() {
      for (var i = 0; i < this.shpData.length; i++) {
        if (this.shpData[i].destTableField == "") {
          this.$message.error("目标字段不可为空");
          return;
        }
      }
      for (var i = 0; i < this.shpData.length; i++) {
        for (var j = 0; j < this.shpData.length; j++) {
          if (
            this.shpData[i].destTableField == this.shpData[j].destTableField &&
            i !== j
          ) {
            this.$message.error("目标字段不可重复");
            return;
          }
        }
      }
      let fd = new FormData();
      fd.append("destTaskId", this.taskIndex); // 直接使用存储的任务ID
      fd.append("destTableName", this.shpform.tableName);
      fd.append("fieldMapping", JSON.stringify(this.shpData));

      fd.append("shp", this.fileList[0]);

      fd.append("shx", this.shxList[0]);

      fd.append("dbf", this.dbfList[0]);

      let that = this;
      axios({
        url: "/api/import/shpDataMigration",
        method: "post",
        data: fd,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.$message.success("数据上传成功");
          that.UploadDialogVisible2 = false;
        } else {
          if (response.data.status == 400) {
            that.$notify.error({
              title: "提示",
              message: response.data.message,
            });
          } else {
            that.$notify.error({
              title: "提示",
              message: "上传出错",
            });
          }
        }
      });
    },
    backShp1() {
      this.UploadDialogVisible1 = true;
      this.UploadDialogVisible2 = false;
    },
    backShp2() {
      this.UploadDialogVisible3 = true;
      this.UploadDialogVisible4 = false;
    },
    deleteField(index) {
      this.shpData.splice(index, 1);
    },
    UploadShp3() {
      this.destFieldsOptions = [];
      this.shpData = [];
      let fd = new FormData();
      if (!this.fileList[0]) {
        this.$message.info("请先选择文件");
        return;
      } else {
        fd.append("file", this.fileList[0]);
      }
      if (!this.shpform.tableName) {
        this.$message.info("请先选择表");
        return;
      }
      fd.append("destTaskId", this.taskIndex); // 直接使用存储的任务ID
      fd.append("destTableName", this.shpform.tableName);
      let that = this;
      request({
        url: "/import/getTableFieldsName",
        method: "post",
        params: {
          taskId: this.taskIndex, // 直接使用存储的任务ID
          tableName: that.shpform.tableName,
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.destFieldsOptions = response.data.data;
        } else if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        }
      });
      axios({
        url: "/api/import/getFileAndFieldMapping",
        method: "post",
        data: fd,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.shpData = response.data.data;
          that.UploadDialogVisible3 = false;
          that.UploadDialogVisible4 = true;
        } else {
          if (response.data.status == 400) {
            that.$notify.error({
              title: "提示",
              message: response.data.message,
            });
          } else {
            that.$notify.error({
              title: "提示",
              message: "上传出错",
            });
          }
        }
      });
    },
    UploadShp4() {
      for (var i = 0; i < this.shpData.length; i++) {
        if (this.shpData[i].destTableField == "") {
          this.$message.error("目标字段不可为空");
          return;
        }
      }
      for (var i = 0; i < this.shpData.length; i++) {
        for (var j = 0; j < this.shpData.length; j++) {
          if (
            this.shpData[i].destTableField == this.shpData[j].destTableField &&
            i !== j
          ) {
            this.$message.error("目标字段不可重复");
            return;
          }
        }
      }
      let fd = new FormData();
      fd.append("destTaskId", this.taskIndex); // 直接使用存储的任务ID
      fd.append("destTableName", this.shpform.tableName);
      fd.append("fieldMapping", JSON.stringify(this.shpData));
      fd.append("file", this.fileList[0]);
      let that = this;
      axios({
        url: "/api/import/fileDataMigration",
        method: "post",
        data: fd,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.$message.success("任务数据复制成功");
          that.UploadDialogVisible4 = false;
        } else {
          if (response.data.status == 400) {
            that.$notify.error({
              title: "提示",
              message: response.data.message,
            });
          } else {
            that.$notify.error({
              title: "提示",
              message: "上传出错",
            });
          }
        }
      });
    },
    Download(taskId) {
      this.DownloadDialogVisible = false;
      this.shpform.tableName = "";
      this.taskIndex = taskId; // 存储任务ID而不是索引
      let that = this;
      that.tableOptions = [];
      // 请求任务列表
      request({
        url: "/import/getTablesName",
        method: "post",
        params: {
          taskId: taskId,
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.tableOptions = response.data.data;
        } else if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        }
      });
    },
    // DownloadData() {
    //   let that = this;
    //   if (this.shpform.tableName == "") {
    //     this.$message.info("请先选择表");
    //     return;
    //   }
    //   this.download(
    //     this.taskIndex, // 直接使用存储的任务ID
    //     this.shpform.tableName,
    //     this.shpform.codeType
    //   );
    // },
    download(taskId, tableName, codeType) {
      let that = this;
      request({
        url: "/export/taskGdbExport",
        method: "post",
        params: {
          taskId: this.taskIndex, // 直接使用存储的任务ID
          tableName: that.shpform.tableName,
          isHighVersion: that.shpform.codeType,
        },
      }).then(function (response) {
        if (response.data.message != "数据为空") {
          var exportURL =
            "/export/taskGdbExport?taskId=" +
            taskId;
          window.open(exportURL, "_blank");
          that.DownloadDialogVisible = false;
        } else {
          that.$message.info("数据为空！");
        }
      });
    },
  },
  mounted() {
    this.init();
  },
  watch: {
    exchangeform: {
      handler() {
        if (this.exchangeform.isSelective) {
          let reg = /\D/;
          if (reg.test(this.exchangeform.selectDataNum)) {
            if (this.exchangeform.selectDataNum != "")
              this.$message.info("只可输入整数");
          }
          this.exchangeform.selectDataNum = this.exchangeform.selectDataNum
            .toString()
            .replace(/\D/, "");
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.task-manage-page {
  padding: 24px 28px 40px;
  background: linear-gradient(135deg, #edf7ef 0%, #fdfefe 100%);
  min-height: calc(100vh - 120px);
  box-sizing: border-box;
  border-radius: 20px;
  box-shadow: 0 14px 32px rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(129, 199, 132, 0.25);
}

.toolbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-box {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 450px;
}

:deep(.search-box .el-input) {
  flex: 1;
}

.search-btn {
  flex-shrink: 0;
  padding: 0 20px;
  min-width: 80px;
}

.toolbar-actions {
  display: flex;
  gap: 16px;
  flex: 0 0 auto;
}

.forest-btn {
  background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
  border: none;
  color: #fff;
  border-radius: 12px;
  padding: 0 26px;
  min-height: 38px;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 15px;
  box-shadow: 0 8px 18px rgba(76, 175, 80, 0.35);
}

.forest-btn.ghost {
  background: rgba(255, 255, 255, 0.95);
  color: #2e7d32;
  border: 1px solid #66bb6a;
  box-shadow: 0 5px 14px rgba(76, 175, 80, 0.2);
}

.forest-btn:hover {
  filter: brightness(1.05);
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding: 16px 0;
}

#tableStyle {
  margin-bottom: 30px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(129, 199, 132, 0.3);
  box-shadow: 0 14px 28px rgba(76, 175, 80, 0.12);
}

:deep(#tableStyle .el-table__header-wrapper th) {
  background: linear-gradient(90deg, #e0f0e2, #f2fbf3) !important;
  color: #1b5e20 !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(129, 199, 132, 0.35) !important;
  font-size: 14px !important;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
}

:deep(#tableStyle .el-table__body-wrapper td) {
  color: #2e4b31;
  border-bottom: 1px solid rgba(76, 175, 80, 0.08);
}

:deep(#tableStyle .el-table__body tr:hover > td) {
  background: rgba(129, 199, 132, 0.15) !important;
  color: #1b5e20;
}

:deep(#tableStyle .el-table__row--striped td) {
  background: rgba(233, 247, 235, 0.65);
}

:deep(#tableStyle .el-table__row.current-row > td) {
  background: rgba(76, 175, 80, 0.18) !important;
  color: #1b5e20;
}

:deep(#tableStyle .el-table__body tr) {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

:deep(#tableStyle .el-table__body tr:hover) {
  transform: translateY(-1px);
  box-shadow: inset 0 2px 0 rgba(76, 175, 80, 0.15);
}

:deep(#tableStyle .el-button--text) {
  color: #2e7d32;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(#tableStyle .el-button--text:hover) {
  color: #1b5e20;
  background: rgba(129, 199, 132, 0.2);
  transform: translateY(-1px);
}

>>> .el-pagination button {
  background-color: #E8F5E9 !important;
  color: #2E7D32 !important;
}

>>> .el-pager li {
  background: #E8F5E9 !important;
  color: #2E7D32 !important;
}

.text {
  font-size: 17px;
  text-align: left;
  color: #2e7d32;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
  position: absolute;
  margin: auto;
  top: 80px;
  right: 0;
  left: 0;
  z-index: 999;
  border-radius: 16px;
  border: 1px solid rgba(129, 199, 132, 0.3);
  box-shadow: 0 12px 28px rgba(76, 175, 80, 0.15);
}

:deep(.box-card .el-card__header) {
  background: linear-gradient(90deg, #e0f0e2, #f2fbf3);
  color: #1b5e20;
  border-bottom: 1px solid rgba(129, 199, 132, 0.25);
  border-radius: 16px 16px 0 0;
}

.taskDialog :deep(.el-dialog) {
  border-radius: 18px;
  border: 1px solid rgba(129, 199, 132, 0.35);
  box-shadow: 0 12px 30px rgba(76, 175, 80, 0.18);
}

.taskDialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: #fff;
  border-radius: 18px 18px 0 0;
}

.taskDialog :deep(.el-form-item__label) {
  color: #1b5e20;
  font-weight: 600;
}

.taskDialog :deep(.el-button--primary) {
  background-color: #4caf50 !important;
  border-color: #4caf50 !important;
}

.taskDialog :deep(.el-button--primary:hover) {
  background-color: #66bb6a !important;
  border-color: #66bb6a !important;
}
</style>

<style>
/* 全局表格样式覆盖 - 确保主题样式生效 */
#tableStyle.el-table {
  border: 1px solid rgba(129, 199, 132, 0.3) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

#tableStyle.el-table.el-table--border {
  border: 1px solid rgba(129, 199, 132, 0.3) !important;
}

#tableStyle.el-table.el-table--border::after,
#tableStyle.el-table.el-table--border::before {
  background-color: rgba(129, 199, 132, 0.3) !important;
}

#tableStyle.el-table.el-table--border th {
  border-right: 1px solid rgba(129, 199, 132, 0.25) !important;
}

#tableStyle.el-table.el-table--border th:last-child {
  border-right: none !important;
}

#tableStyle.el-table.el-table--border td {
  border-right: 1px solid rgba(76, 175, 80, 0.08) !important;
}

#tableStyle.el-table.el-table--border td:last-child {
  border-right: none !important;
}

#tableStyle.el-table.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(233, 247, 235, 0.65) !important;
}

#tableStyle.el-table.el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background: rgba(200, 230, 201, 0.5) !important;
}

/* 表头样式全局覆盖 */
#tableStyle.el-table .el-table__header-wrapper th {
  background: linear-gradient(90deg, #e0f0e2, #f2fbf3) !important;
  color: #1b5e20 !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(129, 199, 132, 0.35) !important;
  font-size: 14px !important;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
  padding: 12px 0 !important;
  text-align: center !important;
}

#tableStyle.el-table .el-table__header-wrapper thead th {
  background: linear-gradient(90deg, #e0f0e2, #f2fbf3) !important;
  color: #1b5e20 !important;
}

#tableStyle.el-table .el-table__header th {
  background: linear-gradient(90deg, #e0f0e2, #f2fbf3) !important;
  color: #1b5e20 !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(129, 199, 132, 0.35) !important;
}

#tableStyle.el-table .el-table__header th .cell {
  color: #1b5e20 !important;
  font-weight: 600 !important;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
}

/* 覆盖自定义表头类名 sinCl */
#tableStyle.el-table .el-table__header th.sinCl {
  background: linear-gradient(90deg, #e0f0e2, #f2fbf3) !important;
  color: #1b5e20 !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(129, 199, 132, 0.35) !important;
  font-size: 14px !important;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
}

#tableStyle.el-table .el-table__header th.sinCl .cell {
  color: #1b5e20 !important;
  font-weight: 600 !important;
}

/* 滚动条全局样式 */
#tableStyle.el-table.el-table--scrollable-x .el-table__body-wrapper {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(76, 175, 80, 0.4) rgba(232, 245, 233, 0.5) !important;
}

#tableStyle.el-table.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
  height: 8px !important;
}

#tableStyle.el-table.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track {
  background: rgba(232, 245, 233, 0.5) !important;
  border-radius: 4px !important;
}

#tableStyle.el-table.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #81c784, #66bb6a) !important;
  border-radius: 4px !important;
}

#tableStyle.el-table.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #66bb6a, #4caf50) !important;
}

#tableStyle.el-table.el-table--scrollable-y .el-table__body-wrapper {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(76, 175, 80, 0.4) rgba(232, 245, 233, 0.5) !important;
}

#tableStyle.el-table.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px !important;
}

#tableStyle.el-table.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {
  background: rgba(232, 245, 233, 0.5) !important;
  border-radius: 4px !important;
}

#tableStyle.el-table.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #81c784, #66bb6a) !important;
  border-radius: 4px !important;
}

#tableStyle.el-table.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #66bb6a, #4caf50) !important;
}
</style>