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="文档类型" prop="type">
        <el-select
          class="input"
         
          size="middle" 
          ref="screen"
          @change="changeScreen(queryParams.type)"
          v-model="queryParams.type"
          :placeholder="$t(`personal.screen`)"
        >
          <el-option
            v-for="item in TypeList"
            :key="item.value"
            :label="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">
                {{ item.label }}</span
              >
            </div>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="搜索"  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="创建时间"  width="160" show-overflow-tooltip >
            <template slot-scope="scope">
                {{handelTime(scope.row.createTime)}}
            </template>
        </el-table-column>

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

        <el-table-column prop="updateTime" label="修改时间"  width="160" show-overflow-tooltip >
            <template slot-scope="scope">
                {{handelTime(scope.row.updateTime)}}
            </template>
        </el-table-column>
        <el-table-column prop="updateUser" label="修改人"  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;margin-top: 10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="pageSizes"
        :page-size="userListParams.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>