“zhuo”
2023-08-10 78d117860baff2bc0acbe11480a66fc9dc8703a2
src/views/CNAS/satisfactionSurveys/index.vue
@@ -1,5 +1,181 @@
<template>
    <div class="content-main survey">
      <div class="top-bar">
        <el-form ref="form" style="width: 1000px;" :inline="true">
          <!-- <el-input v-model="input" class="input-form" placeholder="请直接输入样式编号/样品名称/型号规格/进行搜索或下拉选择进行组合查询"
              @keyup.enter.native="getData" /> -->
          <el-form-item style="width: 800px;">
            <el-col style="display: flex; justify-content: space-around;" :span="8">
              <el-row>调查日期:</el-row>
              <el-row><el-input type="date" style="width: 130px;" v-model="surveyDate" placeholder="请选择调查日期"></el-input></el-row>
            </el-col>
            <el-col style="display: flex; justify-content: space-around;" :span="8">
              <el-row>录入日期:</el-row>
              <el-row><el-input style="width: 130px;" v-model="entryDate" placeholder="请选择录入日期"></el-input></el-row>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="getData()">查询</el-button>
            <el-button type="primary" size="small" plain @click="resetData()">清空</el-button>
          </el-form-item>
        </el-form>
        <el-form>
          <el-button size="40" icon="el-icon-document-add" type="primary">新增记录</el-button>
        </el-form>
      </div>
      <div class="library-table">
        <div class="table-box">
          <el-table ref="tableData" :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="tableData" style="width: 100%">
            <el-table-column  type="index"  label="序号" min-width="5%">
                <template slot-scope="scope">
                    <el-checkbox v-model="id" value="scope.row.id" ></el-checkbox>
                </template>
            </el-table-column>
            <el-table-column prop="surveyDate" label="调查日期" min-width="10%"/>
            <el-table-column prop="userUnit" label="客户单位名称" min-width="10%" />
            <el-table-column prop="projectName" label="项目名称" min-width="10%" />
            <el-table-column prop="fillName" label="填表人姓名" min-width="10%" />
            <el-table-column prop="dateInfo" label="日期" min-width="10%" />
            <el-table-column prop="post" label="职位" min-width="10%" />
            <el-table-column prop="telephone" label="联系电话" min-width="10%" />
            <el-table-column prop="userName" label="录入人" min-width="10%" />
            <el-table-column label="附件" min-width="10%" >
                <template>
                    <a style="color: #3894d1;">查看附件</a>
                </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
    <div>
        满意度调查
            <el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </div>
      </div>
    </div>
</template>
  <script>
  import { get, post } from '@/api/util/requestUtil';
  import urlInfo from '../../../api/urlEnum/satisfactionSurveys.js'
  export default {
    data() {
      return {
        input: '',
        tableData: [],
        page: 1,
        total: 0,
        pageSize: 10,
        entryDate: null,
        surveyDate: null,
        id: 0,
      }
    },
    created() {
    },
    mounted() {
      this.getData()
    },
    methods: {
      handleCurrentChange() {
        this.getData();
      },
      handleSizeChange() {
      },
      exportData() {
      },
      // 重置按钮
      resetData() {
        this.page = 1
        this.pageSize = 10
        this.surveyDate=null
        this.entryDate=null
        this.getData()
      },
      async getData() {
        let param = {
          "currentPage": this.page,
          'pageNum': this.pageSize,
          "surveyDate": this.surveyDate,
          "entryDate": this.entryDate
        }
        let res = await get(urlInfo.url.getCnasSatisfactionSurvey, param)
        this.tableData = res.data.cnasSatisfactionSurveyList
        this.total = res.data.total
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  .top-bar {
    margin: -25px -15px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 5px 24px 0px 24px;
    .input-form {
      width: 800px;
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF !important;
    }
    .el-icon-arrow-down {
      font-size: 12px !important;
    }
  }
  .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: 20px;
      flex: 1;
      background: #fff;
      display: flex;
      flex-direction: column;
      >div:nth-child(2) {
        display: flex;
        justify-content: end;
        margin: 10px 0;
      }
    }
  }
  </style>
  <style >
  .content-main {
    .el-form .el-form-item .el-form-item__content {
      width: 100% !important;
    }
  }
  </style>