Fixiaobai
2023-09-07 efcf450e8e7e375ef4ffe9f421ec0d34c5378180
src/views/CNAS/satisfactionSurveys/index.vue
@@ -1,19 +1,25 @@
<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>
@@ -21,25 +27,20 @@
          <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%" />
@@ -121,12 +122,14 @@
        <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>
@@ -137,8 +140,8 @@
            </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>
@@ -158,30 +161,24 @@
        <!-- 联系电话/录入日期 -->
        <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>
@@ -189,7 +186,7 @@
        </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>
@@ -227,23 +224,29 @@
      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: [
@@ -260,7 +263,7 @@
    }
  },
  created() {
      // this.path=process.env.VUE_APP_BASE_API+"cnasSatisfactionSurvey/uploadFile"
  },
  mounted() {
    this.getData()
@@ -270,6 +273,7 @@
      this.getData();
    },
    look(id) {
      console.log(id);
      let str = "/$";
      this.dialogVisible = true
      let data = this.tableData.filter(res => {
@@ -311,25 +315,62 @@
        "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) {
@@ -341,85 +382,173 @@
    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>