| | |
| | | <template> |
| | | <div class="content-main survey"> |
| | | <div class="top-bar"> |
| | | <el-form ref="form" style="width: 1000px;" :inline="true"> |
| | | <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-input type="date" prefix-icon="el-icon-date" v-model="surveyDate" |
| | | placeholder="请选择调查日期"></el-input></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-input type="date" prefix-icon="el-icon-date" v-model="entryDate" |
| | | placeholder="请选择录入日期"></el-input></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" 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 style="margin-top: 10px;"> |
| | | <el-button size="small" @click="getFillName()" icon="el-icon-plus" 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' }" |
| | | <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 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="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="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-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-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="unitName"> |
| | | <el-input style="width: 200px;" type="text" placeholder="请输入客户单位名称" v-model="ruleForm.unitName"></el-input> |
| | | <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-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 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="telephone"> |
| | | <el-input style="width: 200px;" type="text" placeholder="请输入职位" v-model="ruleForm.telephone"></el-input> |
| | | <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-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-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" :before-remove="beforeRemove" multiple :limit="1" |
| | | :on-exceed="handleExceed" :file-list="fileList" :on-success="fileUploadSuccess()"> |
| | | <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-row> |
| | | <!-- 提交 --> |
| | | <el-row> |
| | | <el-col :span="8"> |
| | | <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> |
| | |
| | | otherSupplements: "无", |
| | | improvementRequirements: "无", |
| | | dialogVisible2: false, |
| | | path: 'http://192.168.110.254:1234/cnasSatisfactionSurvey/uploadFile', |
| | | path: 'http://localhost:1234/cnasSatisfactionSurvey/uploadFile', |
| | | ruleForm: { |
| | | surveyDate: '', |
| | | unitName: '', |
| | | userUnit: '', |
| | | projectName: '', |
| | | dateInfo: '', |
| | | fillName: '', |
| | | post: '', |
| | | userId: '', |
| | | telephone: '', |
| | | entryDate: '', |
| | | userName: '' |
| | | userName: '', |
| | | serviceAttitude: '', |
| | | technicalPower: '', |
| | | testJob: '', |
| | | reasonableCharge: '', |
| | | improvementRequirements: '', |
| | | otherSupplements: '' |
| | | }, |
| | | rules: { |
| | | surveyDate: [ |
| | | { type: 'date', required: true, message: '请选择调查日期', trigger: 'change' } |
| | | ], |
| | | unitName: [ |
| | | userUnit: [ |
| | | { required: true, message: '请输入客户单位名称', trigger: 'blur' }, |
| | | ], |
| | | projectName: [ |
| | |
| | | } |
| | | }, |
| | | created() { |
| | | |
| | | // this.path=process.env.VUE_APP_BASE_API+"cnasSatisfactionSurvey/uploadFile" |
| | | }, |
| | | mounted() { |
| | | this.getData() |
| | |
| | | this.getData(); |
| | | }, |
| | | look(id) { |
| | | console.log(id); |
| | | let str = "/$"; |
| | | this.dialogVisible = true |
| | | let data = this.tableData.filter(res => { |
| | |
| | | "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 |
| | | }, |
| | | getFillName() { |
| | | async getFillName() { |
| | | this.dialogVisible2 = true |
| | | // get(urlInfo.url.getFillNameAndId) |
| | | 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 |
| | | }, |
| | | submitForm(formName) { |
| | | async submitForm(formName) { |
| | | this.$refs[formName].validate((valid) => { |
| | | if (valid) { |
| | | alert('submit!'); |
| | | 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) { |
| | |
| | | handleExceed(files, fileList) { |
| | | this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`); |
| | | }, |
| | | beforeRemove(file, fileList) { |
| | | return this.$confirm(`确定移除 ${file.name}?`); |
| | | // 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 |
| | | }, |
| | | fileUploadSuccess(res){ |
| | | console.log(res); |
| | | 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> |
| | | .top-bar { |
| | | margin: -25px -15px; |
| | | background: #fff; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | padding: 5px 24px 0px 24px; |
| | | .content-main { |
| | | .el-form .el-form-item .el-form-item__content { |
| | | width: 100% !important; |
| | | } |
| | | |
| | | .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; |
| | | .top-bar { |
| | | margin: -25px -15px; |
| | | background: #fff; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | padding: 5px 24px 0px 24px; |
| | | |
| | | .el-form-item { |
| | | margin-bottom: 30px !important; |
| | | .input-form { |
| | | width: 800px; |
| | | } |
| | | |
| | | .el-dropdown-link { |
| | | cursor: pointer; |
| | | color: #409EFF !important; |
| | | } |
| | | |
| | | .el-icon-arrow-down { |
| | | font-size: 12px !important; |
| | | } |
| | | |
| | | |
| | | } |
| | | |
| | | .table-box { |
| | | padding: 0px 20px; |
| | | margin-top: 20px; |
| | | .library-table { |
| | | background-color: #fff; |
| | | flex: 1; |
| | | background: #fff; |
| | | margin: 0px -15px; |
| | | margin-top: 40px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | >div:nth-child(2) { |
| | | .table-header { |
| | | padding: 20px; |
| | | display: flex; |
| | | justify-content: end; |
| | | margin: 10px 0; |
| | | 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; |
| | | |
| | | .table, |
| | | tr, |
| | | td { |
| | | padding: 10px; |
| | | } |
| | | </style> |
| | | <style > |
| | | .content-main { |
| | | .el-form .el-form-item .el-form-item__content { |
| | | width: 100% !important; |
| | | >div:nth-child(2) { |
| | | display: flex; |
| | | justify-content: end; |
| | | margin: 10px 0; |
| | | } |
| | | |
| | | } |
| | | } |
| | | |
| | | .table, |
| | | tr, |
| | | td { |
| | | padding: 10px; |
| | | } |
| | | } |
| | | </style> |