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"
                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'>
          <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.planStorageTime"
                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
      },
      immediate: true
    },
    disabled: {
      handler (val) {
        if (val) {
          this.updata()
        }
      },
      immediate: false
    }
  },
  data () {
    return {
      disabled: true,
      form: {},
      areaDic: [],
      yesOrNo: [
        { label: '否', value: 0 },
        { label: '是', value: 1 }
      ]
    }
  },
  created () {
    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.$message.error(res.msg)
        }
      })
    }
  }
}
</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>