<el-main>
  <!--面包屑-->
  <breadcrumb-component></breadcrumb-component>

  <el-form label-position="right" class="simple-search-form-outline" inline :model="searchForm" ref="searchForm">

    <el-form-item label="源库">
      <el-select v-model="sourceDatabase" placeholder="请选择" clearable filterable>
        <el-option
          v-for="item in databaseOptions"
          :key="item.id"
          :label="item.resourceName"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="源表">
      <el-select v-model="sourceTable" placeholder="请选择" :disabled="sourceDatabase==''?true:false" clearable filterable>
        <el-option
          v-for="item in sourceTableOptions"
          :key="item.id"
          :label="item.tableName"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>

  </el-form>

  <div class="mt20">
    <el-input placeholder="请输入" v-model="searchForm.primarySql" :disabled="true"
              class="input-with-select" maxlength="30"></el-input>+
    <el-input class="normal-width " type="textarea" :rows="3" v-model="searchForm.qureySql" placeholder="请输入"   :disabled="sourceTable===''" ></el-input>
  </div>


  <div class="button-container">
    <div>
      <div class="button-outline">
      <el-button  :disabled="sourceTable===''" type="primary" @click="getList">查询</el-button>
      </div>
      <div class="button-outline">
        <el-upload
          :disabled="sourceTable===''"
          class="upload-demo"
          action=""
          :show-file-list="false"
          :http-request="uploadFile">
          <el-button type="primary"   :disabled="sourceTable===''" >导入</el-button>
        </el-upload>
      </div>
      <el-button type="primary" @click="downloadTemplate()"   :disabled="sourceTable===''" >导出</el-button>
    </div>
    <div>
    </div>
  </div>

  <!--动态表格-->
  <div class="table-container">
    <div class="table-bg">
      <el-table
        header-row-class-name="table-head"
        :data="tableData.data"
        :empty-text="'暂无数据'"
        style="width: 100%">
        <el-table-column
          :class-name="primaryColumns.indexOf(col)>=0?'primaryColumns':''"
          show-overflow-tooltip
          v-for="col in tableLabel"
          align="center"
          min-width="150"
          :key="col"
          :prop="col"
          :label="col">
          <template slot-scope="scope">
            <div  @click="editTable(scope.row,col,scope.$index)">
              <el-input
                @click.stop size="small"
                v-model="scope.row[col]"
                placeholder="请输入"
                v-if="scope.row.edit && currentEditCol===col"
                autofocus
                ref="editTableData"
                @blur="saveTableData(scope.row,col,scope.$index)"
              ></el-input>
              <span  v-show="!scope.row.edit || currentEditCol!==col">
                {{(scope.row[col]===null|| scope.row[col] ==="")?"—":scope.row[col]}}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="tableLabel.length>0"
          fixed="right"
          align="center"
          header-align="center"
          :label="'操作'"
          :width="50">
          <template slot-scope="scope">
          <span  class="table-link-text" @click="delDialog(scope.row)" >删除</span>
          </template>
        </el-table-column>
      </el-table>

      <Page
        @sizeChange="handleSizeChange"
        @currentChange="handleCurrentChange"
        :current-page="pageParam.page"
        :page-sizes="pageParam.pageSizes"
        :page-size="pageParam.pageSize"
        :total="tableData.total"
        :style="pageStyle">
      </Page>
    </div>
  </div>

</el-main>








