wt_project_web_bak/src/views/project/componens/info7.vue

<template>
  <wt-card
    title="其他信息"
    class="mt-10"
    :edit-btn="true"
    @change="change"
    @save="save"
  >
    <el-form class="mt-20" :disabled="disabled">
      <div class="body_title">入库信息</div>
      <!--    入库信息    -->
      <div class="flex flex-justify-center">
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">是否入库:</span>
            <div class="full-width">
              <el-select
                v-model="form.is_storage"
                placeholder="是否入库"
                class="full-width"
              >
                <el-option
                  v-for="item in yesOrNo"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
        </el-form-item>
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">计划入库时间:</span>
            <el-date-picker
              v-model="form.plan_storage_time"
              type="date"
              style="width: 100%"
              placeholder="计划入库时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </div>
        </el-form-item>
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">实际入库时间:</span>
            <el-date-picker
              v-model="form.storage_time"
              type="date"
              style="width: 100%"
              placeholder="实际入库时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="changeStorageTime"
            />
          </div>
        </el-form-item>
      </div>

      <div class="flex flex-justify-center">
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">项目代码:</span>
            <el-input v-model="form.project_code"></el-input>
          </div>
        </el-form-item>
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">监管平台代码:</span>
            <el-input v-model="form.regulatory_platform_code"></el-input>
          </div>
        </el-form-item>
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">是否纳入省重点项目:</span>
            <div class="full-width">
              <el-select
                v-model="form.is_provincial_key"
                placeholder="是否纳入省重点项目"
                class="full-width"
              >
                <el-option
                  v-for="item in yesOrNo"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
        </el-form-item>
      </div>

      <div class="flex flex-justify-center">
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">可研批复号:</span>
            <el-input v-model="form.available_approval_id"></el-input>
          </div>
        </el-form-item>
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">可研批复时间:</span>
            <el-date-picker
              v-model="form.available_approval_date"
              type="date"
              style="width: 100%"
              placeholder="可研批复时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </div>
        </el-form-item>
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">是否纳入省集中开工:</span>
            <div class="full-width">
              <el-select
                v-model="form.is_provincial_level_construction"
                placeholder="是否纳入省集中开工"
                class="full-width"
              >
                <el-option
                  v-for="item in yesOrNo"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
        </el-form-item>
      </div>

      <!--    开工信息    -->
      <div class="body_title start">开工信息</div>
      <div class="flex flex-justify-center">
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">是否开工:</span>
            <div class="full-width">
              <el-select
                v-model="form.is_start"
                placeholder="是否开工"
                class="full-width"
              >
                <el-option
                  v-for="item in yesOrNo"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
        </el-form-item>
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">计划开工时间:</span>
            <el-date-picker
              v-model="form.plan_commencement_time"
              type="date"
              style="width: 100%"
              placeholder="计划开工时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </div>
        </el-form-item>
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">实际开工时间:</span>
            <el-date-picker
              v-model="form.start_time"
              type="date"
              style="width: 100%"
              placeholder="实际开工时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="changeStartTime"
            />
          </div>
        </el-form-item>
      </div>
      <div class="flex flex-justify-center">
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">计划竣工时间:</span>
            <el-date-picker
              v-model="form.plan_completion_time"
              type="date"
              style="width: 100%"
              placeholder="计划竣工时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </div>
        </el-form-item>
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">实际竣工时间:</span>
            <el-date-picker
              v-model="form.completion_time"
              type="date"
              style="width: 100%"
              placeholder="实际竣工时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="changeCompletionTime"
            />
          </div>
        </el-form-item>
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item"></div>
        </el-form-item>
      </div>
    </el-form>
  </wt-card>
</template>

<script>
import wtCard from '@/components/wt-card/index.vue'

export default {
  components: {
    wtCard
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    info: {
      handler(val) {
        this.form = val
      },
      immediate: true
    }
  },
  data() {
    return {
      yesOrNo: [
        {
          label: '否',
          value: 0
        },
        {
          label: '是',
          value: 1
        }
      ],
      disabled: true,
      form: {}
    }
  },
  methods: {
    changeStorageTime(res) {
      if (new Date().getTime() < new Date(res).getTime()) {
        this.$message.warning('实际入库时间不能大于当前时间！')
      }
    },
    changeStartTime(res) {
      if (new Date().getTime() < new Date(res).getTime()) {
        this.$message.warning('实际开工时间不能大于当前时间！')
      }
    },
    changeCompletionTime(res) {
      if (new Date().getTime() < new Date(res).getTime()) {
        this.$message.warning('实际竣工时间不能大于当前时间！')
      }
    },
    save() {
      if (this.check()) {
        return
      }
      this.$api.project.proUpdate(this.form).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    check() {
      if (new Date().getTime() < new Date(this.form.storage_time).getTime()) {
        this.$message.error('实际入库时间不能大于当前时间！')
        return true
      }
      if (new Date().getTime() < new Date(this.form.start_time).getTime()) {
        this.$message.error('实际开工时间不能大于当前时间！')
        return true
      }
      if (
        new Date().getTime() < new Date(this.form.completion_time).getTime()
      ) {
        this.$message.error('实际竣工时间不能大于当前时间！')
        return true
      }
      if (this.form.is_storage == 1) {
        if (this.form.storage_time == null || this.form.storage_time == '') {
          this.$message.error('请填写入库时间！')
          return true
        }
      }
      if (this.form.is_start == 1) {
        if (this.form.start_time == null || this.form.start_time == '') {
          this.$message.error('请填写开工时间！')
          return true
        }
      }
      if (this.form.tags == 1) {
        //政府投资项目 必须要有可研批复号
        if (
          this.form.available_approval_id == '' ||
          this.form.available_approval_id == null
        ) {
          this.$message.error('请填写可研批复号！')
          return true
        }
      }
      //企业投资项目 必须要有项目代码
      if (this.form.tags == 2) {
        if (this.form.project_code == '' || this.form.project_code == null) {
          this.$message.error('请填写项目代码！')
          return true
        }
      }
    },
    change(res) {
      this.disabled = res
    }
  }
}
</script>

<style lang="scss" scoped>
.body_title {
  margin-left: 5%;
  margin-bottom: 10px;
  width: 90%;
  text-align: left;
}

.start {
  margin-top: 20px;
}

.title {
  width: 240px;
  padding-right: 10px;
  text-align: right;
}

.title-textarea {
  width: 85px;
  text-align: left;
}

.item {
  width: 90%;
}
</style>