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">
      <div class="flex flex-center">
        <span class="full-width text-left bold mr-20">{{
          info.dictValue
        }}</span>
        <el-tag
          >{{ detail.tags === 1 ? '政府投资项目' : '企业投资项目' }}
        </el-tag>
      </div>
      <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="140px"
        :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" v-if="!disabled">
              <avue-input-tree
                v-model="form.county"
                class="full-width"
                placeholder="请选择县（区）"
                :dic="areaDic"
              ></avue-input-tree>
            </div>
            <el-input v-model="form.county_name" v-else></el-input>
          </el-form-item>
          <el-form-item label="责任单位" style="flex: 1" class="ml-20">
            <div class="full-width">
              <avue-input-tree
                default-expand-all
                v-model="form.responsible_unit"
                placeholder="责任单位"
                :dic="detail.tags === 1 ? deptDic : compDic"
                class="full-width"
                v-if="!disabled"
                @change="handlerReponsible"
              ></avue-input-tree>
              <el-input v-model="form.unit_name" v-else />
            </div>
          </el-form-item>
        </div>

        <div class="full-width flex">
          <el-form-item label="主管单位" style="flex: 1">
            <div class="full-width">
              <avue-input-tree
                default-expand-all
                v-model="form.competent_unit"
                placeholder="主管单位"
                :dic="deptDic"
                class="full-width"
                v-if="!disabled"
                @change="handlerCompetent"
              ></avue-input-tree>
              <el-input v-model="form.competent_unit_name" v-else />
            </div>
          </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-select
              v-model="form.dict_value"
              placeholder="行业分类"
              class="full-width"
              @change="changeIndustry"
            >
              <el-option
                v-for="item in industryList"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              />
            </el-select>
          </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="项目代码"
            class="flex-child-average"
            style="flex: 1"
          >
            <el-input v-model="form.project_code" />
          </el-form-item>
          <el-form-item label="监管平台代码" class="flex-child-average ml-20">
            <el-input v-model="form.regulatory_platform_code" />
          </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>
import { useStore } from '@/store/user.js'

export default {
  name: 'params1',
  props: {
    info: {
      type: Object,
      default: null
    },
    detail: {
      type: Object,
      default: null
    }
  },
  setup() {
    const user = useStore()
    return { user }
  },
  watch: {
    detail: {
      handler(val) {
        this.form = val
        this.form.construction_start_and_end_new = ''
        this.form.competent_unit = val.competent_unit ? val.competent_unit : ''
        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 }
      ],
      deptDic: [],
      compDic: [],
      industryList: [],
      dev: false
    }
  },
  mounted() {
    this.dev = sessionStorage.getItem('dev') === 'true'
    this.getDic()
    this.areaList()
    this.getDepList()
    this.getCompList()
  },
  methods: {
    getDic() {
      this.$api.common
        .dicList({ code: 'industry-classification' })
        .then(res => {
          if (res.code === 200) {
            this.industryList = res.data
            console.log(typeof this.form.dict_key)
            const tmp = this.industryList.find(
              ele => ele.dictKey === this.form.dict_key.toString()
            )
            if (tmp) {
              this.form.dict_value = tmp.dictValue
            }
            console.log(tmp)
          }
        })
    },
    getDepList() {
      const local = {
        label: this.user.info.deptName,
        value: this.user.info.deptId
      }
      this.deptDic.push(local)
      this.$api.system
        .getDeptLazy({ parentId: this.user.info.deptId, deptCategory: 3 })
        .then(res => {
          if (res.code === 200) {
            const tmp = res.data.map(ele => {
              const item = { label: ele.deptName, value: ele.id }
              return item
            })
            this.deptDic = this.deptDic.concat(tmp)
          }
        })
    },
    getCompList() {
      this.$api.system.getNewDeptLazy({ deptCategory: 4 }).then(res => {
        if (res.code === 200) {
          const tmp = res.data.map(ele => {
            const item = { label: ele.deptName, value: ele.id }
            return item
          })
          this.compDic = this.compDic.concat(tmp)
        }
      })
    },
    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 = ''
      }
    },
    handlerReponsible(res) {
      if (res.item !== undefined) {
        this.form.unit_name = res.item.label
      }
    },
    handlerCompetent(res) {
      if (res.item !== undefined) {
        this.form.competent_unit_name = res.item.label
      }
    },
    changeIndustry(res) {
      const tmp = this.industryList.find(ele => ele.dictKey === res)
      this.form.dict_key = Number.parseInt(tmp.dictKey)
      delete this.form.dict_value
    }
  }
}
</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>