m2pool_web_frontend/mining-pool/src/views/documentManagement/index.vue

<template>
  <div v-loading="documentLoading">
    <div class="main-title-box">
      <div class="main-title">{{ $t("backendSystem.documentManagement") }}</div>
      <el-button class="add-btn" @click="handelAddDocument"
        >{{ $t("backendSystem.addDocument") }}
        <i class="iconfont icon-youjiantou1 arrow"></i
      ></el-button>
    </div>
    <el-form
      :inline="true"
      :model="queryParams"
      class="demo-form-inline"
      ref="formRef"
    >
      <el-form-item :label="$t('backendSystem.documentType')|| '文档类型'" prop="type">
        <el-select
          class="input"
          clearable
          size="middle"
          ref="screen"
          @change="changeScreen(queryParams.type)"
          v-model="queryParams.type"
          :placeholder="$t(`backendSystem.pleaseSelect`)"
        >
          <el-option
            v-for="item in TypeList"
            :key="item.value"
            :label="$t(item.label)"
            :value="item.value"
          >
            <div style="display: flex; align-items: center">
              <img :src="item.imgUrl" style="float: left; width: 20px" />
              <span style="float: left; margin-left: 5px">
                {{ $t(item.label) }}</span
              >
            </div>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('backendSystem.search')|| '搜索'" style="margin-left: 5vw" prop="minerUser">
        <el-input
          v-model="queryParams.keyword"
          :placeholder="$t('backendSystem.pleaseInput')"
          clearable
          @clear="handleInputClear"
        ></el-input>
      </el-form-item>

      <el-form-item style="margin-left: 1vw">
        <el-button type="primary" @click="handelQuery">{{
          $t("backendSystem.query")
        }}</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      border
      style="width: 100%; margin-bottom: 18px"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      height="60vh"
    >
      <el-table-column prop="id" label="ID" width="60" />
      <el-table-column
        prop="createTime"
        :label="$t('backendSystem.createTime')|| '创建时间'"
        width="160"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ handelTime(scope.row.createTime) }}
        </template>
      </el-table-column>

      <el-table-column
        prop="createUser"
        :label="$t('backendSystem.createUser')|| '创建人'"
        width="160"
        show-overflow-tooltip
      />
      <el-table-column prop="content" :label="$t('backendSystem.content')|| '文档内容'" show-overflow-tooltip />
      <el-table-column
        prop="title"
        :label="$t('backendSystem.documentTitle')|| '文档标题'"
        width="200"
        show-overflow-tooltip
      />
      <el-table-column
        prop="type"
        :label="$t('backendSystem.documentType')|| '文档类型'"
        width="100"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ handelType(scope.row.type) }}
        </template>
      </el-table-column>

      <el-table-column
        prop="updateTime"
        :label="$t('backendSystem.updateTime')|| '修改时间'"
        width="160"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ handelTime(scope.row.updateTime) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="updateUser"
        :label="$t('backendSystem.updateUser')|| '修改人'"
        width="160"
        show-overflow-tooltip
      />

      <el-table-column :label="$t('backendSystem.operation')" width="160">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">{{
            $t("backendSystem.edit")
          }}</el-button>

          <el-popconfirm
            :confirm-button-text="$t(`work.confirm`)"
            :cancel-button-text="$t(`work.cancel`)"
            icon="el-icon-info"
            icon-color="red"
            :title="$t(`alerts.deleteRemind`)"
            @confirm="handelDelete(scope.row)"
          >
            <el-button class="elBtn" size="mini" slot="reference">{{
              $t(`personal.delete`)
            }}</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" style="display: flex; justify-content: center">
        <el-pagination
          style="margin: 0 auto;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="pageSizes"
          :page-size="listParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
  
  <script>
import Index from "./index";
export default {
  mixins: [Index],
};
</script>
  
  <style lang="scss" scoped>
.main-title-box {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .add-btn {
    background: #661ffb;
    color: #fff;
    border: none;
    margin-left: 28px;
    border-radius: 20px;
    padding: 10px 20px;
    transition: all 0.3s ease;
    .arrow {
      margin-left: 10px;
    }
  }
  .add-btn:hover {
    transform: scale(1.05);
  }
}
.main-title {
  font-size: 24px;
  font-weight: bold;

  color: #333;
  margin-bottom: 18px;
}

.elBtn {
  background: #e60751;
  color: #fff;
  border: none;
  margin-left: 18px;
}
</style>