<template>
|
<div class="content-main survey">
|
<div class="top-bar">
|
<el-form ref="form" style="width: 1000px;margin-top: 10px;" :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="12">
|
<el-row>调查日期:</el-row>
|
<el-row style="width: 300px;">
|
<el-date-picker size="small" style="width: 270px;" class="newly-form" v-model="surveyDate" type="date"
|
placeholder="请选择调查日期" autocomplete="off">
|
</el-date-picker>
|
</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-date-picker size="small" style="width: 270px;" class="newly-form" v-model="entryDate" type="date"
|
placeholder="请选择录入日期" autocomplete="off">
|
</el-date-picker>
|
</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 style="margin-top: 10px;">
|
<el-button size="small" @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: 'left' }"
|
:header-cell-style="{ border: '0px', background: '#f5f7fa', color: '#606266', boxShadow: 'inset 0 1px 0 #ebeef5', textAlign: 'left' }"
|
:data="tableData" style="width: 100%">
|
<el-table-column prop="id" type="index" label="序号" min-width="20%"/>
|
<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="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>
|
<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-date-picker style="width: 200px;" class="newly-form" v-model="ruleForm.surveyDate" type="date"
|
placeholder="请选择调查日期" autocomplete="off">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="客户单位：" prop="userUnit">
|
<el-input style="width: 200px;" type="text" placeholder="请输入客户单位名称" v-model="ruleForm.userUnit"></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="telephone">
|
<el-input style="width: 200px;" type="text" placeholder="请输入联系电话" v-model="ruleForm.telephone"></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="userName">
|
<el-input style="width: 200px;" type="text" placeholder="请输入录入人姓名" v-model="ruleForm.userName"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="录入日期：" prop="entryDate">
|
<el-date-picker style="width: 200px;" class="newly-form" v-model="ruleForm.entryDate" type="date"
|
placeholder="请选择录入日期" autocomplete="off">
|
</el-date-picker>
|
</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" multiple
|
:limit="1" :on-exceed="handleExceed" :file-list="fileList" :on-success="handleSuccess"
|
:before-upload="beforeAvatarUpload">
|
<el-button size="small" type="primary">点击上传</el-button>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<!-- 提交 -->
|
<el-row>
|
<el-col :span="24" style="display: flex;justify-content: center;">
|
<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,
|
dialogVisible: false,
|
serviceAttitude: 3,
|
serviceAttitudeInput: "无",
|
technicalPower: 3,
|
technicalPowerInput: "无",
|
testJob: 3,
|
testJobInput: "无",
|
reasonableCharge: 3,
|
reasonableChargeInput: "无",
|
otherSupplements: "无",
|
improvementRequirements: "无",
|
dialogVisible2: false,
|
path: 'http://localhost:1234/cnasSatisfactionSurvey/uploadFile',
|
ruleForm: {
|
surveyDate: '',
|
userUnit: '',
|
projectName: '',
|
fillName: '',
|
post: '',
|
userId: '',
|
telephone: '',
|
entryDate: '',
|
userName: '',
|
serviceAttitude: '',
|
technicalPower: '',
|
testJob: '',
|
reasonableCharge: '',
|
improvementRequirements: '',
|
otherSupplements: ''
|
},
|
rules: {
|
surveyDate: [
|
{ type: 'date', required: true, message: '请选择调查日期', trigger: 'change' }
|
],
|
userUnit: [
|
{ 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() {
|
// this.path=process.env.VUE_APP_BASE_API+"cnasSatisfactionSurvey/uploadFile"
|
},
|
mounted() {
|
this.getData()
|
},
|
methods: {
|
handleCurrentChange() {
|
this.getData();
|
},
|
look(id) {
|
console.log(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
|
},
|
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
|
}
|
if (this.surveyDate != null) {
|
param.surveyDate = this.dateFormat(this.surveyDate);
|
}
|
if (this.entryDate !== null) {
|
param.entryDate = this.dateFormat(this.entryDate);
|
}
|
let res = await get(urlInfo.url.getCnasSatisfactionSurvey, param)
|
this.tableData = res.data.cnasSatisfactionSurveyList
|
this.total = res.data.total
|
},
|
async getFillName() {
|
this.dialogVisible2 = true
|
let res = await get(urlInfo.url.getFillNameAndId)
|
this.ruleForm.userName = res.data.name
|
this.ruleForm.userId = res.data.id
|
var now = new Date();
|
this.ruleForm.entryDate = now
|
},
|
async submitForm(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
this.add();
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
async add() {
|
let data = JSON.parse(JSON.stringify(this.ruleForm))
|
let entryDate = this.format(this.ruleForm.entryDate);
|
let surveyDate = this.format(this.ruleForm.surveyDate);
|
data.entryDate = entryDate
|
data.surveyDate = surveyDate
|
// data.dateInfo = dateInfo
|
let add = await post(urlInfo.url.addSurvey, data);
|
if (add) {
|
this.$message({
|
message: '添加成功',
|
type: 'success'
|
});
|
this.fileList = []
|
this.$refs["ruleForm"].resetFields();
|
let res = await get(urlInfo.url.getFillNameAndId)
|
this.ruleForm.userName = res.data.name
|
this.ruleForm.id = res.data.id
|
var now = new Date();
|
this.ruleForm.entryDate = now
|
this.getData()
|
} else {
|
this.$message.error('添加失败！请检查内容');
|
}
|
},
|
resetForm(formName) {
|
this.dialogVisible2 = false
|
this.fileList = []
|
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}？`);
|
// },
|
handleSuccess(response, file, fileList) {
|
let data = response.data;
|
if (this.ruleForm.userUnit == '') {
|
this.ruleForm.userUnit = data.unitName
|
}
|
if (this.ruleForm.projectName == '') {
|
this.ruleForm.projectName = data.projectName
|
}
|
if (this.ruleForm.post === '') {
|
this.ruleForm.post = data.post
|
}
|
if (this.ruleForm.fillName == '') {
|
this.ruleForm.fillName = data.fillName.split("/")[0]
|
}
|
if (this.ruleForm.telephone == '') {
|
this.ruleForm.telephone = data.telephone
|
}
|
if(this.ruleForm.surveyDate==null||this.ruleForm.surveyDate==''){
|
let dates = new Date(data.fillName.split("/")[1]);
|
console.log(dates);
|
if(dates!=''&&dates!=''){
|
this.ruleForm.surveyDate=dates
|
}
|
}
|
this.ruleForm.serviceAttitude = data.serviceAttitude
|
this.ruleForm.technicalPower = data.technicalPower
|
this.ruleForm.testJob = data.testJob
|
this.ruleForm.improvementRequirements = data.improvementRequirements
|
this.ruleForm.otherSupplements = data.otherSupplements
|
this.ruleForm.reasonableCharge=data.reasonableCharge
|
},
|
beforeAvatarUpload(file) {
|
let split = file.name.split(".");
|
let fileName = split[split.length - 1];
|
const isWord = fileName == 'doc' || fileName == 'docx';
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
if (!isWord) {
|
this.$message.error('上传word文件只能是 doc/docx 格式!');
|
}
|
if (!isLt2M) {
|
this.$message.error('上传word文件大小不能超过 2MB!');
|
}
|
return isWord && isLt2M;
|
},
|
dateFormat(longTypeDate) {
|
var dateTypeDate = "";
|
var date = new Date();
|
date.setTime(longTypeDate);
|
dateTypeDate += date.getFullYear(); //年
|
dateTypeDate += "-" + this.getMonth(date); //月
|
dateTypeDate += "-" + this.getDay(date); //日
|
return dateTypeDate;
|
},
|
//返回 01-12 的月份值
|
getMonth(date) {
|
var month = "";
|
month = date.getMonth() + 1; //getMonth()得到的月份是0-11
|
if (month < 10) {
|
month = "0" + month;
|
}
|
return month;
|
},
|
//返回01-30的日期
|
getDay(date) {
|
var day = "";
|
day = date.getDate();
|
if (day < 10) {
|
day = "0" + day;
|
}
|
return day;
|
},
|
datetimeFormat(longTypeDate) {
|
var dateTypeDate = "";
|
var date = new Date();
|
date.setTime(longTypeDate);
|
dateTypeDate += date.getFullYear(); //年
|
dateTypeDate += "-" + this.getMonth(date); //月
|
dateTypeDate += "-" + this.getDay(date); //日
|
return dateTypeDate;
|
},
|
format(d) {
|
var y = d.getFullYear();
|
var m = d.getMonth() + 1;
|
if (m < 10) {
|
m = "0" + m;
|
}
|
var day = d.getDate();
|
if (day < 10) {
|
day = "0" + day;
|
}
|
return y + "-" + m + "-" + day;
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.content-main {
|
.el-form .el-form-item .el-form-item__content {
|
width: 100% !important;
|
}
|
|
.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;
|
}
|
|
}
|
}
|
|
.table,
|
tr,
|
td {
|
padding: 10px;
|
}
|
}
|
</style>
|
