Merge remote-tracking branch 'origin/master'

value

2023-09-07 523d7a54fb07fdf756fbc4faa5eb7fef7263a556

 src/views/message/toDo/index.vue

@@ -1,13 +1,237 @@
<template>
  <div>待办</div>
  <div class="content-main">
    <div class="top-bar">
      <el-form ref="form" :inline="true" :model="searchData" style="margin-top: 10px;">
              <el-form-item label="标题:" class="sermargin">
                <el-input
                  size="small"
                  v-model="searchData.title"
                  class="input-form"
                  placeholder="请输入标题"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="内容:" style="margin-right: 30px;">
                <el-input
                  size="small"
                  v-model="searchData.content"
                  class="input-form"
                  placeholder="请输入内容"
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="small" type="primary" @click="search">查询</el-button>
                <el-button size="small" type="primary" plain @click="reset">重置</el-button>
              </el-form-item>
              </el-form>
              <el-form style="margin-top: 10px;">
                <el-button size="small" class="deleteBtn" plain type="primary" @click="deleteMessage" >删除</el-button>
                <el-button size="small" type="primary" @click="readMessage" style="width: 110px;" >标为已读</el-button>
              </el-form>
    </div>
    <div class="library-table">
      <div class="table-header">
        <el-radio-group v-model="radioValue" @change="radioclick">
          <el-radio-button v-for="item in conditionsOptions" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="table-box">
        <el-table
                ref="toDoTable"
                :max-height="800"
                :cell-style="{textAlign: 'left'}"
                :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'left'}"
                :data="toDoTable"
                @selection-change="handleSelectionChange"
                style="width: 100%"
              >
                <el-table-column
                  prop="sender"
                  label="发件人"
                  min-width="8%"
                />
                <el-table-column
                  prop="title"
                  label="标题"
                  min-width="13%"
                />
                <el-table-column
                  prop="todo"
                  label="代办内容"
                  min-width="20%"
                />
                <el-table-column
                  prop="group"
                  label="分组"
                  min-width="15%"
                />
                <el-table-column
                  prop="level"
                  label="等级"
                  min-width="8%"
                />
                <el-table-column
                  prop="create_time"
                  label="创建时间"
                  min-width="12%"
                />
                <el-table-column
                  prop="deadline"
                  label="要求完成时间"
                  min-width="12%"
                />
                <el-table-column
                  prop="state"
                  label="状态"
                  min-width="12%"
                />
              </el-table>
              <!-- 分页器 -->
              <div>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>

      </div>

    </div>

  </div>
</template>

<script>
export default {
  data(){
    return {
      searchData: {
        title: '',
        content: ''
      },
      radioValue: 0,
      conditionsOptions: [
        {
          label: '全部',
          value: 0
        },
        {
          label: '未处理',
          value: 1
        },
        {
          label: '已处理',
          value: 2
        },
        {
          label: '已超期',
          value: 3
        }
      ],
      toDoTable:[],
      selectionRows:[],
      currentPage:1,
      pageSize: 5,
      total:100,

    }
  },
  methods: {
    deleteMessage(){
      console.log(this.selectionRows)
    },
    readMessage(){
      console.log(this.selectionRows)
    },
    // 捕获表格选择的数据
    handleSelectionChange(selection){
      this.selectionRows = selection
    },
    radioclick(){
      console.log(this.radioValue)
    },
    handleSizeChange(val){
      console.log(`当前每页${val}条数据`)
    },
    handleCurrentChange(val){
      console.log(`当前是第${val}页`)
    }
  }

}
</script>

<style lang="scss" scoped>
.content-main{
  width: 100%;
  .top-bar{
    margin: -25px -15px;
    padding: 5px 24px 0px 24px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    .sermargin{
      margin-right: 60px;
    }
    .deleteBtn{
      background-color: #fff;
      border: 1px solid rgb(225, 222, 222);
      color: rgb(184, 182, 182);
    }
    .deleteBtn:active {
      outline: none;  /* 去除按钮的默认点击时的外边框 */
      box-shadow: 0 0 4px rgb(142, 141, 141);  /* 添加点击时的阴影效果，颜色设为灰色 */
    }
    .deleteBtn:hover {
      outline: none;  /* 去除按钮的默认点击时的外边框 */
      background-color: rgb(233, 233, 233);  /* 添加点击时的阴影效果，颜色设为灰色 */
    }
    .deleteBtn:focus {
      outline: none;  /* 去除按钮的默认点击时的外边框 */
      background-color: rgb(233, 233, 233);  /* 添加点击时的阴影效果，颜色设为灰色 */
    }
  }
  .library-table{
      background-color: #fff;
      flex: 1;
      margin: 0px -15px;
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      .table-header{
        padding: 20px;
        display: flex;
        justify-content: space-between;
        .el-form-item{
          margin-bottom: 30px !important;
        }
      }
      .table-box{
          padding: 0px 20px;
          margin-top: 0px;
          flex: 1;
          background: #fff;
          /* padding: 20px 20px 10px 20px; */
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
          }
          >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }
}

</style>