8.22

yuyu

2023-08-22 bb48226b975e90fed00b255369194c39d6159b1f

8.22

 src/views/CNAS/nonConformanceManage/index.vue

@@ -1,5 +1,214 @@
<template>
    <div>
        不符合项管理
    <div class="content-main">
        <div class="top-bar">
            <el-form ref="form" :inline="true" :model="searchData">
              <el-form-item label="录入日期:" style="margin-right: 20px;">
                <el-date-picker
                    v-model="searchData.entry_date"
                    type="date"
                    placeholder="请选择录入日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="审核日期:" style="margin-right: 20px;">
                <el-date-picker
                    v-model="searchData.check_date"
                    type="date"
                    placeholder="请选择审核日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="状态:" style="margin-right: 20px;">
                <el-select v-model="searchData.state" placeholder="全部" style="width: 100px;">
                  <el-option
                    v-for="item in stateoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="部门:" style="margin-right: 20px;">
                <el-input v-model="searchData.department" placeholder="请输入部门">
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchInspections">查询</el-button>
                <el-button type="primary" plain @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
            <el-form class="rightBtn">
              <el-form-item class="createBtn">
                <el-button type="primary" icon="el-icon-document-add" style="margin-right: 10px;">新增记录</el-button>
              </el-form-item>
              <el-form-item class="getDataBtn">
                <el-button type="primary" icon="el-icon-download">导出</el-button>
              </el-form-item>
            </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="recordTable"
                :max-height="800"
                :cell-style="{textAlign: 'center'}"
                :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
                :data="recordTable"
                style="width: 100%"
              >
                <el-table-column
                  label="序号"
                  min-width="10%">
                  <template slot-scope="scope">
                    <el-checkbox v-model="checked"></el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="title"
                  label="标题"
                  min-width="12%"
                />
                <el-table-column
                  prop="content"
                  label="内容"
                  min-width="12%"
                />
                <el-table-column
                  prop="level"
                  label="等级"
                  min-width="12%"
                />
                <el-table-column
                  prop="type"
                  label="类型"
                  min-width="8%"
                />
                <el-table-column
                  prop="state"
                  label="状态"
                  min-width="12%">
                  <template slot-scope="scope">
                    <span v-if="scope.row.state === 1" style="color: red;">未读</span>
                    <span v-if="scope.row.state === 2" style="color: green;">已读</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="sender"
                  label="发件人"
                  min-width="8%"
                />
                <el-table-column
                  prop="create_time"
                  label="创建时间"
                  min-width="12%"
                />
                <el-table-column
                  label="操作"
                  min-width="10%"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="deleteRow(scope.row)">删除</el-button>
                    <el-button type="text" size="small" @click="readRow(scope.row)">标为已读</el-button>
                  </template>
                </el-table-column>
              </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:{
                entry_date: '',
                check_date: '',
                state: 0,
                department: ''
            },
            stateoptions:[{
                value: 0,
                label: '已关闭'
            },{
                value: 1,
                label: '待关闭'
            }],
            recordTable:[],
            currentPage: 0,
            pageSize:5,
            total: 20
        }
    }
}
</script>

<style lang="scss" scoped>
.content-main{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    .top-bar{
      margin: -25px -15px;
      background: #fff;
      display: flex;
      justify-content: space-between;
      padding: 5px 24px 0px 24px;
      .rightBtn{
        display: flex;
        justify-content: space-between;
      }
    }
    .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>

 src/views/message/message/index.vue

@@ -1,13 +1,253 @@
<template>
  <div>消息</div>
  <div class="content-main">
    <div class="top-bar">
      <el-form ref="form" :inline="true" :model="searchData">
              <el-form-item label="标题:" class="sermargin">
                <el-input
                  v-model="searchData.title"
                  class="input-form"
                  placeholder="请输入标题"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="内容:" style="margin-right: 30px;">
                <el-input
                  v-model="searchData.content"
                  class="input-form"
                  placeholder="请输入内容"
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="primary" plain @click="reset">重置</el-button>
              </el-form-item>
              </el-form>
              <el-form>
                <el-button class="deleteBtn" plain type="primary" @click="deleteMessage" >删除</el-button>
                <el-button 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="messageTable"
                :max-height="800"
                :cell-style="{textAlign: 'center'}"
                :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
                :data="messageTable"
                @selection-change="handleSelectionChange"
                style="width: 100%"
              >
                <el-table-column
                  type="selection"
                  min-width="10%"
                />
                <el-table-column
                  prop="title"
                  label="标题"
                  min-width="12%"
                />
                <el-table-column
                  prop="content"
                  label="内容"
                  min-width="12%"
                />
                <el-table-column
                  prop="level"
                  label="等级"
                  min-width="12%"
                />
                <el-table-column
                  prop="type"
                  label="类型"
                  min-width="8%"
                />
                <el-table-column
                  prop="state"
                  label="状态"
                  min-width="12%">
                  <template slot-scope="scope">
                    <span v-if="scope.row.state === 1" style="color: red;">未读</span>
                    <span v-if="scope.row.state === 2" style="color: green;">已读</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="sender"
                  label="发件人"
                  min-width="8%"
                />
                <el-table-column
                  prop="create_time"
                  label="创建时间"
                  min-width="12%"
                />
                <el-table-column
                  label="操作"
                  min-width="10%"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="deleteRow(scope.row)">删除</el-button>
                    <el-button type="text" size="small" @click="readRow(scope.row)">标为已读</el-button>
                  </template>
                </el-table-column>
              </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
        }
      ],
      selectionRows:[],
      messageTable:[],
      currentPage:1,
      pageSize: 5,
      total:10,

    }
  },
  created(){

  },
  methods: {
    deleteMessage(){
      console.log(this.selectionRows)
    },
    readMessage(){
      console.log(this.selectionRows)
    },
    // 捕获表格选择的数据
    handleSelectionChange(selection){
      this.selectionRows = selection
    },
    // 标记已读
    readRow(row){
      console.log(row)
    },
    // 删除
    deleteRow(row){
      console.log(row)
    },
    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>

 src/views/message/toDo/index.vue

@@ -1,13 +1,235 @@
<template>
  <div>待办</div>
  <div class="content-main">
    <div class="top-bar">
      <el-form ref="form" :inline="true" :model="searchData">
              <el-form-item label="标题:" class="sermargin">
                <el-input
                  v-model="searchData.title"
                  class="input-form"
                  placeholder="请输入标题"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="内容:" style="margin-right: 30px;">
                <el-input
                  v-model="searchData.content"
                  class="input-form"
                  placeholder="请输入内容"
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="primary" plain @click="reset">重置</el-button>
              </el-form-item>
              </el-form>
              <el-form>
                <el-button class="deleteBtn" plain type="primary" @click="deleteMessage" >删除</el-button>
                <el-button 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: 'center'}"
                :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
                :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>