wt_project_web_bak/src/views/home/component/params/params1.vue

<template>
  <div class="flex flex-justify-start flex-align-center flex-col">
    <div class="flex flex-center full-width flex-justify-between mt-10 mb-10">
      <span class="full-width text-left bold">{{ info.dictValue }}</span>
      <el-button
        v-if="detail.can_update"
        type="primary"
        @click="disabled = !disabled"
        >{{ disabled ? '编 辑' : '保 存' }}
      </el-button>
    </div>
    <div class="mt-10" style="width: 90%">
      <el-form
        v-if="form"
        :model="form"
        label-width="240px"
        :disabled="disabled"
        label-position="left"
        class="form-content flex flex-col"
      >
        <div class="flex flex-justify-start">
          <el-form-item label="项目名称" style="flex: 1">
            <el-input v-model="form.name" placeholder="项目名称" />
          </el-form-item>
          <el-form-item
            label="总投资金额（万元）"
            style="flex: 1"
            class="ml-20 full-width"
          >
            <div class="full-width">
              <el-input
                v-model="form.total_amount"
                placeholder="总投资金额（万元）"
                class="full-width"
              />
            </div>
          </el-form-item>
        </div>
        <div class="full-width flex">
          <el-form-item label="县（区）" style="flex: 1">
            <div class="full-width">
              <avue-input-tree
                v-model="form.county"
                class="full-width"
                placeholder="请选择县（区）"
                :dic="areaDic"
              ></avue-input-tree>
            </div>
          </el-form-item>
          <el-form-item label="责任单位" style="flex: 1" class="ml-20">
            <el-input v-model="form.responsible_unit" placeholder="责任单位" />
          </el-form-item>
        </div>

        <div class="full-width flex">
          <el-form-item label="主管单位" style="flex: 1">
            <el-input v-model="form.competent_unit" placeholder="主管单位" />
          </el-form-item>
          <el-form-item label="责任领导" style="flex: 1" class="ml-20">
            <el-input
              v-model="form.responsible_leader"
              placeholder="责任领导"
            />
          </el-form-item>
        </div>
        <div class="full-width flex">
          <el-form-item label="项目负责人及联系电话" style="flex: 1">
            <el-input
              v-model="form.construction_unit"
              placeholder="项目负责人及联系电话"
            />
          </el-form-item>
        </div>

        <div class="full-width flex">
          <el-form-item
            label="行业分类"
            class="flex-child-average"
            style="flex: 1"
          >
            <el-input v-model="form.industry" />
          </el-form-item>
          <el-form-item label="建设起止时间" class="flex-child-average ml-20">
            <el-input
              v-if="disabled"
              v-model="form.construction_start_and_end"
            />
            <el-date-picker
              v-else
              v-model="form.construction_start_and_end_new"
              @change="changeDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="截止日期"
              style="width: 100%"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </div>

        <div class="full-width flex" v-if="detail.tags === 2">
          <el-form-item
            label="备案号"
            class="flex-child-average"
            style="flex: 1"
          >
            <el-input v-model="form.record_id" />
          </el-form-item>
          <el-form-item label="备案时间" class="flex-child-average ml-20">
            <el-input v-if="disabled" v-model="form.record_date" />
            <el-date-picker
              v-else
              v-model="form.record_date"
              @change="changeDate"
              placeholder="备案时间"
              style="width: 100%"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </div>

        <div class="full-width flex" v-if="detail.tags === 1">
          <el-form-item
            label="可研批复号"
            class="flex-child-average"
            style="flex: 1"
          >
            <el-input v-model="form.available_approval_id" />
          </el-form-item>
          <el-form-item label="可研批复时间" class="flex-child-average ml-20">
            <el-input v-if="disabled" v-model="form.available_approval_date" />
            <el-date-picker
              v-else
              v-model="form.available_approval_date"
              @change="changeDate"
              placeholder="可研批复时间"
              style="width: 100%"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </div>

        <div class="full-width flex">
          <el-form-item label="计划开工时间" style="flex: 1" class="full-width">
            <el-date-picker
              v-model="form.plan_commencement_time"
              type="date"
              style="width: 100%"
              placeholder="计划开工时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="实际开工时间" style="flex: 1" class="ml-20">
            <el-date-picker
              v-model="form.start_time"
              type="date"
              style="width: 100%"
              placeholder="实际开工时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </div>
        <div class="full-width flex">
          <el-form-item label="计划入库时间" style="flex: 1">
            <el-date-picker
              v-model="form.plan_storage_time"
              type="date"
              style="width: 100%"
              placeholder="计划入库时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="实际入库时间" style="flex: 1" class="ml-20">
            <el-date-picker
              v-model="form.storage_time"
              type="date"
              style="width: 100%"
              placeholder="实际入库时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </div>
        <div class="full-width flex">
          <el-form-item label="计划竣工时间" style="flex: 1">
            <el-date-picker
              v-model="form.plan_completion_time"
              type="date"
              style="width: 100%"
              placeholder="计划竣工时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="实际竣工时间" style="flex: 1" class="ml-20">
            <el-date-picker
              v-model="form.completion_time"
              type="date"
              style="width: 100%"
              placeholder="实际竣工时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </div>
        <div class="full-width flex">
          <el-form-item label="是否入库" style="flex: 1">
            <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>
          </el-form-item>
          <el-form-item label="是否开工" style="flex: 1" class="ml-20">
            <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>
          </el-form-item>
        </div>
        <div class="full-width flex">
          <el-form-item label="是否纳入省重点项目" style="flex: 1">
            <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>
          </el-form-item>
          <el-form-item
            label="是否纳入省集中开工项目"
            style="flex: 1"
            class="ml-20"
          >
            <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>
          </el-form-item>
        </div>
        <div class="full-width">
          <el-form-item label="项目建设详细地址">
            <el-input v-model="form.address" placeholder="项目建设详细地址" />
          </el-form-item>
        </div>
        <div class="full-width">
          <el-form-item label="主要建设内容及规模">
            <el-input
              v-model="form.construction_content"
              type="textarea"
              placeholder="主要建设内容及规模"
              :rows="4"
            />
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'params1',
  props: {
    info: {
      type: Object,
      default: null
    },
    detail: {
      type: Object,
      default: null
    }
  },
  watch: {
    detail: {
      handler(val) {
        this.form = val
        this.form.construction_start_and_end_new = ''
        if (this.form.name) {
          const xian = this.form.name.indexOf('县')
          this.form.name = this.dev
            ? this.form.name.substring(xian + 1)
            : this.form.name
        }
      },
      immediate: true
    },
    disabled: {
      handler(val) {
        if (val) {
          this.updata()
        }
      },
      immediate: false
    }
  },
  data() {
    return {
      disabled: true,
      form: {},
      areaDic: [],
      yesOrNo: [
        { label: '否', value: 0 },
        { label: '是', value: 1 }
      ],
      dev: false
    }
  },
  mounted() {
    this.dev = sessionStorage.getItem('dev') === 'true'
    this.areaList()
  },
  methods: {
    areaList() {
      this.$api.common.region({ code: '' }).then(res => {
        if (res.code === 200) {
          this.areaDic = res.data.map(item => this.mapTree(item))
        }
      })
    },
    mapTree(item) {
      const haveChildren =
        Array.isArray(item.children) && item.children.length > 0
      return {
        key: item.id,
        value: item.id,
        label: item.title,
        children: haveChildren ? item.children.map(i => this.mapTree(i)) : []
      }
    },
    updata() {
      this.form.projectId = this.detail.id
      this.form.total_amount = Number.parseFloat(this.detail.total_amount)
      delete this.detail._id
      this.$api.project.proUpdate(this.form).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
        } else {
          this.disabled = false
          this.$message.error(res.msg)
        }
      })
    },
    changeDate(res) {
      if (res) {
        this.form.construction_start_and_end = res.join(',')
      } else {
        this.form.construction_start_and_end = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form-content {
  border: 1px solid #eeeeee;
  padding: 20px;

  :deep(.el-input.is-disabled .el-input__inner) {
    color: #343434;
  }

  :deep(.el-textarea.is-disabled .el-textarea__inner) {
    color: #343434;
  }
}
</style>