modified: src/api/urlEnum/satisfactionSurveys.js modified: src/views/...

Fixiaobai

2023-08-11 8e1e40f0694029dcd468428217ca09376246b9e4

	modified:   src/api/urlEnum/satisfactionSurveys.js
	modified:   src/views/CNAS/satisfactionSurveys/index.vue

 src/api/urlEnum/satisfactionSurveys.js

@@ -2,6 +2,8 @@

const url={
    "getCnasSatisfactionSurvey": baseurl+"/getCnasSatisfactionSurvey",//获取不合格品反馈
    "getFillNameAndId": baseurl+"/getFillNameAndId",//当前录入人
    "uploadFile": baseurl+"/uploadFile"//文件上传
}
export default{
    url

 src/views/CNAS/satisfactionSurveys/index.vue

@@ -1,181 +1,425 @@
<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="请直接输入样式编号/样品名称/型号规格/进行搜索或下拉选择进行组合查询"
  <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>
        <el-form-item style="width: 800px;">
          <el-col style="display: flex; justify-content: space-around;" :span="12">
            <el-row>调查日期:</el-row>
            <el-row style="width: 300px;"><el-input type="date" prefix-icon="el-icon-date" v-model="surveyDate"
                placeholder="请选择调查日期"></el-input></el-row>
          </el-col>
          <el-col style="display: flex; justify-content: space-around;" :span="12">
            <el-row>录入日期:</el-row>
            <el-row style="width: 300px;"><el-input type="date" prefix-icon="el-icon-date" 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" @click="getFillName()" 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 slot-scope="scope">
              <a style="color: #3894d1;" @click="look(scope.row.id)">查看附件</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>
  </template>
    <el-dialog title="满意度调查" :visible.sync="dialogVisible" width="50%">
      <table class="table" style="width: 100%;">
        <tr>
          <td> </td>
          <td>满意</td>
          <td>一般</td>
          <td>不满意</td>
          <td>建议</td>
        </tr>
        <tr>
          <td>服务态度</td>
          <td><el-radio v-model="serviceAttitude" label="0"><span hidden>满意</span></el-radio></td>
          <td><el-radio v-model="serviceAttitude" label="1"><span hidden>一般</span> </el-radio></td>
          <td><el-radio v-model="serviceAttitude" label="2"><span hidden>不满意</span></el-radio></td>
          <td><el-input v-model="serviceAttitudeInput" placeholder="请输入内容"></el-input></td>
        </tr>
        <tr>
          <td>技术能力</td>
          <td><el-radio v-model="technicalPower" label="0"><span hidden>满意</span></el-radio></td>
          <td><el-radio v-model="technicalPower" label="1"><span hidden>一般</span> </el-radio></td>
          <td><el-radio v-model="technicalPower" label="2"><span hidden>不满意</span></el-radio></td>
          <td><el-input v-model="technicalPowerInput" placeholder="请输入内容"></el-input></td>
        </tr>
        <tr>
          <td>检测工作</td>
          <td><el-radio v-model="testJob" label="0"><span hidden>满意</span></el-radio></td>
          <td><el-radio v-model="testJob" label="1"><span hidden>一般</span> </el-radio></td>
          <td><el-radio v-model="testJob" label="2"><span hidden>不满意</span></el-radio></td>
          <td><el-input v-model="testJobInput" placeholder="请输入内容"></el-input></td>
        </tr>
        <tr>
          <td>收费合理性</td>
          <td><el-radio v-model="reasonableCharge" label="0"><span hidden>满意</span></el-radio></td>
          <td><el-radio v-model="reasonableCharge" label="1"><span hidden>一般</span> </el-radio></td>
          <td><el-radio v-model="reasonableCharge" label="2"><span hidden>不满意</span></el-radio></td>
          <td><el-input v-model="reasonableChargeInput" placeholder="请输入内容"></el-input></td>
        </tr>
        <tr>
          <td>改进要求</td>
          <td colspan="4">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容"
              v-model="improvementRequirements">
            </el-input>
          </td>
        </tr>
        <tr>
          <td>其他补充</td>
          <td colspan="4">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容"
              v-model="otherSupplements">
            </el-input>
          </td>
        </tr>
      </table>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span> -->
    </el-dialog>
    <el-dialog title="新增满意度调查记录" :visible.sync="dialogVisible2" width="50%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="调查日期：" prop="surveyDate">
              <el-input style="width: 200px;" type="date" v-model="ruleForm.surveyDate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户单位：" prop="unitName">
              <el-input style="width: 200px;" type="text" placeholder="请输入客户单位名称" v-model="ruleForm.unitName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称：" prop="projectName">
              <el-input style="width: 200px;" type="text" placeholder="请输入项目名称" v-model="ruleForm.projectName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日期：" prop="dateInfo">
              <el-input style="width: 200px;" type="date" v-model="ruleForm.dateInfo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 填表人姓名 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="填表人姓名：" prop="fillName">
              <el-input style="width: 200px;" type="text" placeholder="请输入填表人姓名" v-model="ruleForm.fillName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职位：" prop="post">
              <el-input style="width: 200px;" type="text" placeholder="请输入职位" v-model="ruleForm.post"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 联系电话/录入日期 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话：" prop="telephone">
              <el-input style="width: 200px;" type="text" placeholder="请输入职位" v-model="ruleForm.telephone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="录入日期：" prop="entryDate">
              <el-input style="width: 200px;" type="date" v-model="ruleForm.entryDate"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 录入人 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="录入人：" prop="userName">
              <el-input style="width: 200px;" type="text" placeholder="请输入录入人姓名" v-model="ruleForm.userName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="附件上传：">
              <el-upload class="upload-demo" :action="path"
                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1"
                :on-exceed="handleExceed" :file-list="fileList" :on-success="fileUploadSuccess()">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 提交 -->
        <el-row>
          <el-col :span="8">
            <el-form-item>
              <el-button @click="resetForm('ruleForm')">取消</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </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,
      }
<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,
      dialogVisible: false,
      serviceAttitude: 3,
      serviceAttitudeInput: "无",
      technicalPower: 3,
      technicalPowerInput: "无",
      testJob: 3,
      testJobInput: "无",
      reasonableCharge: 3,
      reasonableChargeInput: "无",
      otherSupplements: "无",
      improvementRequirements: "无",
      dialogVisible2: false,
      path: 'http://192.168.110.254:1234/cnasSatisfactionSurvey/uploadFile',
      ruleForm: {
        surveyDate: '',
        unitName: '',
        projectName: '',
        dateInfo: '',
        fillName: '',
        post: '',
        telephone: '',
        entryDate: '',
        userName: ''
      },
      rules: {
        surveyDate: [
          { type: 'date', required: true, message: '请选择调查日期', trigger: 'change' }
        ],
        unitName: [
          { required: true, message: '请输入客户单位名称', trigger: 'blur' },
        ],
        projectName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ],
        entryDate: [
          { type: 'date', required: true, message: '请选择录入日期', trigger: 'change' }
        ],
        telephone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ]
      },
      fileList: [],
    }
  },
  created() {
      
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleCurrentChange() {
      this.getData();
    },
    created() {
  
    look(id) {
      let str = "/$";
      this.dialogVisible = true
      let data = this.tableData.filter(res => {
        return res.id == id
      })[0]
      let serviceAttitudeInfo = data.serviceAttitude.split(str);
      this.serviceAttitude = serviceAttitudeInfo[0]
      this.serviceAttitudeInput = serviceAttitudeInfo[1]
      let technicalPowerInfo = data.technicalPower.split(str)
      this.technicalPower = technicalPowerInfo[0]
      this.technicalPowerInput = technicalPowerInfo[1]
      let testJobInfo = data.testJob.split(str)
      this.testJob = testJobInfo[0]
      this.testJobInput = testJobInfo[1]
      let reasonableChargeInfo = data.reasonableCharge.split(str)
      this.reasonableCharge = reasonableChargeInfo[0]
      this.reasonableChargeInput = reasonableChargeInfo[1]
      this.otherSupplements = data.otherSupplements
      this.improvementRequirements = data.improvementRequirements
    },
    mounted() {
    handleSizeChange() {

    },
    exportData() {

    },
    // 重置按钮
    resetData() {
      this.page = 1
      this.pageSize = 10
      this.surveyDate = null
      this.entryDate = null
      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
    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
    },
    getFillName() {
      this.dialogVisible2 = true
      // get(urlInfo.url.getFillNameAndId)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    fileUploadSuccess(res){
      console.log(res);
    }
  }
  </script>
}
</script>
  
  <style lang="scss" scoped>
  .top-bar {
    margin: -25px -15px;
    background: #fff;
<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;
    padding: 5px 24px 0px 24px;
  
    .input-form {
      width: 800px;

    .el-form-item {
      margin-bottom: 30px !important;
    }
  
    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF !important;
    }
  
    .el-icon-arrow-down {
      font-size: 12px !important;
    }
  
  
  }
  
  .library-table {
    background-color: #fff;

  .table-box {
    padding: 0px 20px;
    margin-top: 20px;
    flex: 1;
    margin: 0px -15px;
    margin-top: 40px;
    background: #fff;
    display: flex;
    flex-direction: column;
  
    .table-header {
      padding: 20px;

    >div:nth-child(2) {
      display: flex;
      justify-content: space-between;
  
      .el-form-item {
        margin-bottom: 30px !important;
      }
      justify-content: end;
      margin: 10px 0;
    }
  
    .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;
    }
}

.table,
tr,
td {
  padding: 10px;
}
</style>
<style >
.content-main {
  .el-form .el-form-item .el-form-item__content {
    width: 100% !important;
  }
  </style>
}
</style>