zhgdyun/src/views/projectFront/dailyCheck/addCheck.vue

  <!-- 新增巡检 -->
<template >
  <div class="addCheck whiteBlock">
    <div class="form_wrap">
      <el-form
        :model="ruleForm"
        size="medium"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
      <!-- 检查内容 -->
        <el-form-item :label="$t('message.projectManage.checkedContent')" prop="inspectContent">
          <el-input
            type="textarea"
            :rows="6"
            :placeholder="$t('message.projectManage.placeholder')+$t('message.projectManage.checkedContent')"
            v-model="ruleForm.inspectContent"
          >
          </el-input>
        </el-form-item>
        <!-- 检查位置 -->
        <el-form-item :label="$t('message.projectManage.checkedLocation')" prop="inspectPlace">
          <el-input v-model="ruleForm.inspectPlace"></el-input>
        </el-form-item>
        <!-- 附件 -->
        <el-form-item :label="$t('message.projectManage.accessory')" prop="imgUrl">
          <el-upload
            :action="uploadUrl"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            name="files"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :limit="5"
            ref="upload"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <!-- 是否需要整改 -->
        <el-form-item :label="$t('message.projectManage.isNeedChange')" prop="isRectify">
          <el-switch
            v-model="ruleForm.isRectify"
            active-color="#13ce66"
            inactive-color="#EAECF0"
          >
          </el-switch>
        </el-form-item>
        <!-- 整改人 -->
        <el-form-item
          :label="$t('message.projectManage.changePeople')"
          v-if="ruleForm.isRectify"
          prop="rectifyPeople"
        >
        <!-- 请选择 -->
          <el-select
            v-model="ruleForm.rectifyPeople"
            filterable
            :placeholder="$t('message.projectManage.pleaseChoose')"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.userId"
              :label="item.workerName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100px" @click="saveBtn">
            <!-- 保存 -->
            {{$t('message.projectManage.save')}}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 大图 -->
    <el-dialog :modal-append-to-body="false" :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import { getCrewListDataApi,addCheckListDataApi } from "@/assets/js/api/dailyCheck";
export default {
  data() {
    return {
      projectSn: "",
      userInfo: "",
      uploadUrl: "",
      fileUrl: "",
      ruleForm: {
        isRectify: true,
        inspectContent: "",
        imgUrl: "",
        inspectPlace: "",
        inspector: "",
        rectifyPeople: "",
      },
      rules: {
        inspectContent: [
          {
            required: true,
            message: this.$t("message.companyDiagram.required"),
            trigger: "blur",
          },
        ],
        inspectPlace: [
          {
            required: true,
            message: this.$t("message.companyDiagram.required"),
            trigger: "blur",
          },
        ],
      },
      options: [],
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [],
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.userInfo = this.$store.state.userInfo;
    this.uploadUrl = this.$store.state.UPLOADURL;
    this.fileUrl = this.$store.state.FILEURL;
    this.getCrewListData();
  },

  methods: {
    //获取所有人员下拉
    getCrewListData() {
      let data = {
        projectSn: this.projectSn,
      };
      getCrewListDataApi(data).then((res) => {
        if (res.code == 200) {
          this.options = res.result;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //上传成功
    handleSuccess(file) {
      let data = { name: file.data[0].filename, url: file.data[0].imageUrl };
      this.fileList.push(data);
    },
    //删除附件
    handleRemove(file) {
      let imageUrl = file.response.data[0].imageUrl;
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].url == imageUrl) {
          this.fileList.splice(i, 1);
        }
      }
    },
    //保存按钮
    saveBtn(){
      this.$refs.ruleForm.validate((valid)=>{
        if(valid){
          //深拷贝
          let data = JSON.parse(JSON.stringify(this.ruleForm));
          data.inspector = this.userInfo.userId;
          data.imgUrl = this.fileList.length>0?JSON.stringify(this.fileList):'';
          data.isRectify = data.isRectify?0:1;
          data.projectSn = this.projectSn;
          addCheckListDataApi(data).then(res=>{
            if(res.code==200){
              this.$message.success(this.$t('message.projectManage.addSuccess'));//新增成功
              this.ruleForm= {
                isRectify: true,
                inspectContent: "",
                imgUrl: "",
                inspectPlace: "",
                inspector: "",
                rectifyPeople: "",
              };
              this.fileList = [];
              this.$refs.upload.clearFiles();
            }else{
              this.$message.error(res.message)
            }
          })

        }else{
          return false;
        }
      })
    },


    //查看附件
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}
.addCheck {
  width: 100%;
  height: 100%;
  padding: 50px 0 0;
  box-sizing: border-box;
  .form_wrap {
    width: 40%;
    margin: 0 auto;
  }
}
</style>