shuili_manager/jwtech-h5-page/pages/monitoring/edit/index.vue

<template>
  <view class="project-add">
    <!-- 项目新增表单卡片 -->
    <!-- <view class="cc-card cc-form-card">
      <view class="form-title">监督检查</view>
      <view class="form-item">
        <text class="form-label">项目名称</text>
        <view class="form-content">
          <input v-model="form.projectName" class="form-input" placeholder="请选择项目名称" disabled/>
          <picker mode="selector" :range="projectNames" @change="onProjectChange">
            <view class="form-select">
              选择
            </view>
          </picker>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">检查类型</text>
        <view class="form-content">
          <input v-model="showForm.checkType" class="form-input" placeholder="请选择检查类型" disabled/>
          <picker mode="selector" :range="checkNameTypes" @change="onCheckTypeChange">
            <view class="form-select">
              选择
            </view>
          </picker>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">检查时间</text>
        <view class="form-content">
          <input v-model="form.inspectionTime" class="form-input" placeholder="请选择检查时间" disabled/>
          <picker mode="date" @change="onCheckTimeChange">
            <view class="form-select">
              选择
            </view>
          </picker>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">检查单位</text>
        <view class="form-content">
          <input v-model="form.inspectionUnit" class="form-input" placeholder="请输入检查单位" />
        </view>
      </view>


      <view class="form-item">
        <text class="form-label">被检查单位</text>
        <view class="form-content">
          <input v-model="form.inspectionPerson" class="form-input" placeholder="请输入被检查单位" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">组成成员</text>
        <view class="form-content">
          <input v-model="form.constituentMember" class="form-input" placeholder="请输入组成成员" />
        </view>
      </view>
    </view>

    <view class="cc-form-card" style="margin-top: 16px;">
      <view class="form-title">
        <view>检查通知</view>
        <view class="form-tips">支持png、jpg、pdf、word等格式，不大于200M</view>
      </view>

      <view class="form-item" style="margin-bottom: 0;">
        <uni-file-picker
          :autoUpload="false"
          file-mediatype="all"
          file-extname="png,jpg,pdf,,doc,docx,xls,xlsx"
          limit="10"
          @select="handleSelectCheckFile"
          @success="handleCheckFileSuccess"
        ></uni-file-picker>
      </view>
    </view>

    <view class="cc-form-card" style="margin-top: 16px;">
      <view class="form-title">
        <view>整改通知</view>
        <view class="form-tips">支持png、jpg、pdf、word等格式，不大于200M</view>
      </view>

      <view class="form-item" style="margin-bottom: 0;">
        <uni-file-picker limit="10" file-mediatype="all" file-extname="png,jpg,pdf,,doc,docx,xls,xlsx" @success="handleModifyFileSuccess"></uni-file-picker>
      </view>
    </view>

    <view class="cc-form-card" style="margin-top: 16px;">
      <view class="form-title">
        <view>整改回复</view>
        <view class="form-tips">支持png、jpg、pdf、word等格式，不大于200M</view>
      </view>

      <view class="form-item" style="margin-bottom: 0;">
        <uni-file-picker limit="10" file-mediatype="all" file-extname="png,jpg,pdf,,doc,docx,xls,xlsx" @success="handleReplyFileSuccess"></uni-file-picker>
      </view>
    </view> -->

    <monitor-add ref="monitorAdd" :monitorDraftId="draftId" />

    <view class="cc-operation-row operation-row">
      <view class="buttons-group">
        <view class="button primary-button" @click="handleConfirm">确定</view>
        <view class="button default-button" @click="handleConfirmDraft">暂存</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getProjectListApi } from '@/api/system/project'
import { uploadFileData } from '@/api/common/upload'
import { addNewInspections } from '@/api/system/check/inspections'
import { addInspectionsDraft, getInspectionsDraft, updateInspectionsDraft } from '@/api/system/check/inspectionsDraft'
import MonitorAdd from '@/components/monitor-add/monitor-add.vue'
export default {
  components: {
    MonitorAdd
  },
  data() {
    return {
      // form: {
      //   projectName: '',
      //   region: [],
      //   projectCode: '',
      //   projectType: 0,
      //   legalEntity: '',
      //   projectLeader: '',
      //   leaderPhone: '',
      //   legalRep: ''
      // },
      draftId: this.$route.query.draftId,
      form: {
        "menuType": "0",
        "inspectionTypes": null,
        "inspectionTime": "",
        "inspectionPerson": "",
        "constituentMember": "",
        "noticeAttachment": "",
        "checklist": "",
        "rectificationReport": null,
        "createTime": null,
        "updateTime": null,
        "remark": null,
        "createUid": null,
        "updateUid": null,
        "owerDept": null,
        "proCode": "",
        "proNo": "",
        "projectName": "",
        "checkType": "",
        "inspectionUnit": "",
        "rectificationDtoList": []
      },
      showForm: {
        checkType: ''
      },
      checkTypes: [],
      checkNameTypes: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        params: {orderBy: "create_time", sortBy: "desc"},
        data: {
          projectName: ''
        }
      },
      projects: [],
      projectNames: [],
    };
  },
  created() {
    // this.getProjectList()
    // this.getDicts("check_type").then((response) =>{
    //   this.checkTypes = response.data
    //   this.checkNameTypes = this.checkTypes.map(item => item.dictLabel)
    // })
    // if (this.draftId) {
    //   getInspectionsDraft(this.draftId).then(res => {
    //     this.form = res.data
    //     this.showForm.checkType = this.checkTypeFormat(this.form.checkType)
    //   })
    // }
  },
  methods: {
    // 获取项目列表
    getProjectList() {
      uni.showLoading({
        title: '加载中...',
        mask: true
      })
      getProjectListApi(this.queryParams).then(res => {
        this.projects = res.records
        this.projectNames = this.projects.map(item => item.projectName)
        uni.hideLoading()
      })
    },

    // 处理选择行政区划的变化
    onProjectChange(e) {
      const index = e.detail.value
      this.form.projectName = this.projects[index].projectName
      this.form.proNo = this.projects[index].id
      this.form.proCode = this.projects[index].proCode
      this.$forceUpdate()
    },

    onCheckTypeChange(e) {
      this.showForm.checkType = this.checkTypes[e.detail.value].dictLabel
      this.form.checkType = this.checkTypes[e.detail.value].dictValue
    },

    onCheckTimeChange(e) {
      this.form.inspectionTime = e.detail.value
    },

    //行政区划字典
    checkTypeFormat(checkType, column) {
      return this.selectDictLabel(
        this.checkTypes,
        checkType
      );
    },

    handleSelectCheckFile(e) {
      const tempFiles = e.tempFiles
      tempFiles.forEach(item => {
        const reader = new FileReader()
        reader.onload = (e) => {
          const fileRaw = e.target.result
          console.log(e.target.result) // 这里是文件的原始内容
          let formData = new FormData()
          formData.append('file', fileRaw);
          uploadFileData(formData).then(res => {
            uni.showToast({
              title: `添加成功！`,
              icon: 'none'
            })
          })
        }
        reader.readAsText(item.file)
        // uni.readFile({
        //   filePath: item, // 选择的文件路径
        //   encoding: 'utf8', // 文件编码
        //   success: (res) => {
        //     console.log('文件内容:', res.data); // 处理文件内容
        //   },
        //   fail: (err) => {
        //     console.error('读取文件失败:', err);
        //   }
        // });
      })

      // const tempFiles = e.tempFiles
      // tempFiles.forEach(item => {
      //   uploadFileData({ file: item.file }).then(res => {
      //     console.log(res)
      //   })
      // })
      // console.log("1111111111")
      // console.log(e)
    },

    handleCheckFileSuccess(e) {
      console.log("成功了吧")
      console.log(e)
    },

    handleModifyFileSuccess(e) {
      console.log("1111111111")
      console.log(e)
    },

    handleReplyFileSuccess(e) {
      console.log("1111111111")
      console.log(e)
    },

    // 判断必填项是否填写
    judgeAttrWrite() {
      const form = this.form
      if (!form.projectName) {
        uni.showToast({
          title: `项目名称不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.checkType) {
        uni.showToast({
          title: `检查类型不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.inspectionTime) {
        uni.showToast({
          title: `检查时间不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.inspectionUnit) {
        uni.showToast({
          title: `检查单位不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.inspectionPerson) {
        uni.showToast({
          title: `被检查单位不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.constituentMember) {
        uni.showToast({
          title: `组成成员不能为空！`,
          icon: 'none'
        })
        return false
      }
      // if (!form.noticeAttachment) {
      //   uni.showToast({
      //     title: `检查通知不能为空！`,
      //     icon: 'none'
      //   })
      //   return false
      // }
      // if (!form.checklist) {
      //   uni.showToast({
      //     title: `整改通知不能为空！`,
      //     icon: 'none'
      //   })
      //   return false
      // }
      // if (!form.rectificationReport) {
      //   uni.showToast({
      //     title: `整改回复不能为空！`,
      //     icon: 'none'
      //   })
      //   return false
      // }
      return true
    },

    // 保存检查
    handleConfirm() {
      // console.log("提交的表单数据：", this.form)
      // if (!this.judgeAttrWrite()) {
      //   return
      // }
      // uni.showLoading({
      //   title: '加载中...',
      //   mask: true
      // })
      // addNewInspections(this.form).then(res => {
      //   uni.showToast({
      //     title: `操作成功`,
      //     icon: 'none'
      //   })
      //   uni.navigateTo({
      //     url: `/pages/monitoring/list/index`
      //   });
      // })

      // 通过ref调用子组件的方法
      this.$refs.monitorAdd.handleConfirm()
    },

    // 暂存功能
    handleConfirmDraft() {
      // console.log("提交的表单数据：", this.form)
      // if (!this.judgeAttrWrite()) {
      //   return
      // }
      // uni.showLoading({
      //   title: '加载中...',
      //   mask: true
      // })
      // if (this.draftId) {
      //   this.form.id = this.draftId
      //   updateInspectionsDraft(this.form).then(res => {
      //     uni.showToast({
      //       title: `操作成功`,
      //       icon: 'none'
      //     })
      //     uni.navigateTo({
      //       url: `/pages/monitoring/list/index`
      //     });
      //   })
      // } else {
      //   addInspectionsDraft(this.form).then(res => {
      //     uni.showToast({
      //       title: `操作成功`,
      //       icon: 'none'
      //     })
      //     uni.navigateTo({
      //       url: `/pages/monitoring/list/index`
      //     });
      //   })
      // }

      // 通过ref调用子组件的方法
      this.$refs.monitorAdd.handleConfirmDraft()
    }
  }
};
</script>

<style lang="scss" scoped>
.project-add {
  padding: 16px 20px 96px;
}



</style>