wt_project_web_bak/src/views/home/component/proinfo.vue

<template>
  <div class="flex flex-col">
    <div class="flex flex-center flex-justify-between margin">
      <span class="grey font-18 bold">项目详情</span>
      <div class="flex flex-center">
        <base-button v-if="option.detail === false" :width="60" icon="Close" title="取消编辑" @click="cancel"/>
        <base-button :title="btnTips" :width="60" icon="EditPen" @click="edit"/>
      </div>
    </div>
    <basic-form :data="data" :option="option" class="mt-10" />
    <div class="flex flex-col mt-20">
      <div class="flex flex-center flex-justify-between margin">
        <span class="grey font-18 bold">发行明细</span>
        <base-button :width="60" icon="Plus" title="新增" @click="showAdd = true"/>
      </div>
      <!-------发行明细------>
      <el-empty v-if="issue.length === 0" description="暂无数据"/>
      <div v-else class="flex flex-col flex-center padding mb-20">
        <div class="flex flex-center grey  bold full-width mr-10 border"
             style="background-color: #FAFAFA;height: 50px;">
          <span class="flex-child-average">发行时间</span>
          <span class="flex-child-average">发行金额（万元）</span>
          <span class="flex-child-average">发行期限</span>
          <span class="flex-child-average">发行利率</span>
        </div>
        <div v-for="item in issue" :key='item.id'
             class="flex flex-center grey full-width border-bottom border-right border-left mr-10"
             style="height: 50px">
          <span class="flex-child-average">{{ item.issueDate }}</span>
          <span class="flex-child-average">{{ item.issueAmount }}</span>
          <span class="flex-child-average">{{ item.issueRate }}</span>
          <span class="flex-child-average">{{ item.issueTerm }}</span>
        </div>
      </div>
    </div>
    <el-dialog v-model='showAdd' append-to-body width='40%'>
      <div class="flex flex-col">
        <el-form ref="ruleFormRef"
                 :model="issueInfo"
                 class="demo-ruleForm"
                 label-width="120px"
                 status-icon>
          <el-form-item label="发行时间">
            <el-date-picker
                v-model="issueInfo.issueDate"
                format="YYYY-MM-DD"
                placeholder="选择发行时间"
                style="width: 100%"
                value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="发行金额">
            <el-input v-model="issueInfo.issueAmount"/>
          </el-form-item>
          <el-form-item label="发行期限">
            <el-input v-model="issueInfo.issueRate"/>
          </el-form-item>
          <el-form-item label="发行利率">
            <el-input v-model="issueInfo.issueTerm"/>
          </el-form-item>
        </el-form>
        <div class="full-width flex flex-center mt-10">
          <base-button icon="Lock" title="保存" type="1" @click="issueAdd"/>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import baseButton from '../../../components/base-button.vue'
import basicForm from '../../../components/basic-form/index.vue'

export default {
  components: { baseButton, basicForm },
  props: {
    data: Object,
    issue: Array
  },
  watch: {
    data: {
      handler (val) {
        if (val && val.hasOwnProperty('property')) {
          const config = JSON.parse(val.property)
          // this.option.column = config
        }
      },
      immediate: true
    }
  },
  data () {
    return {
      showAdd: false,
      keyWords: '',
      loading: false,
      btnTips: '编辑',
      page: {
        pageSize: 15,
        currentPage: 1,
        total: 0
      },
      option: {
        detail: true,
        labelWidth: '200px',
        column: [
          {
            prop: 'name',
            id: 1,
            label: '名称',
            type: 'input',
            span: '24'
          },
          {
            children: [
              {
                prop: 'totalAmount',
                id: 21,
                label: '总投资（万元）',
                type: 'number',
                parentId: 2,
                span: '24'
              },
              {
                label: '地区',
                type: 'area',
                prop: 'province',
                expand: {
                  dict: '/blade-system/region/lazy-list',
                  prop: {
                    label: 'name',
                    value: 'id'
                  }
                },
                id: 22,
                parentId: 2,
                span: '24'
              }
            ],
            id: 2,
            type: 'row'
          },
          {
            children: [
              {
                prop: 'capital',
                id: 41,
                label: '不含专项债的资本金',
                type: 'number',
                parentId: 4,
                span: '24'
              },
              {
                prop: 'debt',
                id: 42,
                label: '项目领域',
                type: 'select',
                parentId: 4,
                span: '24',
                expand: {
                  dict: '/blade-system/dict-biz/dictionary?code=pc-debt-type',
                  prop: {
                    label: 'dictValue',
                    value: 'dictKey'
                  }
                }
              }
            ],
            id: 4,
            type: 'row'
          },
          {
            children: [
              {
                label: '其他债务融资（万元）',
                type: 'number',
                prop: 'portfolioFinancing',
                expand: '',
                id: 61,
                parentId: 6,
                span: '24'
              },
              {
                prop: 'startDate',
                id: 62,
                label: '建设期',
                type: 'daterange',
                parentId: 6,
                span: '24'
              }
            ],
            id: 6,
            type: 'row'
          },
          {
            children: [
              {
                label: '专项债做资本金（万元）',
                type: 'number',
                prop: 'debtsAsCapital',
                expand: '',
                id: 71,
                parentId: 7,
                span: '24'
              },
              {
                prop: 'operationStartDate',
                id: 72,
                label: '运营期',
                type: 'daterange',
                parentId: 7,
                span: '24'
              }
            ],
            id: 7,
            type: 'row'
          },
          {
            children: [
              {
                label: '预期收益（万元）',
                type: 'number',
                prop: 'expectedReturn',
                expand: '',
                id: 81,
                parentId: 8

              },
              {
                prop: 'cost',
                id: 82,
                label: '成本',
                type: 'number',
                parentId: 8

              }
            ],
            id: 8,
            type: 'row'
          },
          {
            children: [
              {
                prop: 'costIncomePercent',
                id: 121,
                label: '成本/收入',
                type: 'number',
                parentId: 12
              },
              {
                prop: 'coverageMultiple',
                id: 131,
                label: '覆盖倍数',
                type: 'number',
                parentId: 13
              }
            ],
            id: 11,
            type: 'row'
          },
          {
            children: [
              {
                prop: 'projectSubject',
                id: 112,
                label: '主管部门',
                type: 'number',
                parentId: 11

              },
              {
                prop: 'implementingAgency',
                id: 52,
                label: '项目业主',
                type: 'input',
                parentId: 5

              }
            ],
            id: 5,
            type: 'row'
          },
          {
            children: [
              {
                prop: 'accountingFirm',
                id: 122,
                label: '会计所',
                type: 'number',
                parentId: 12

              },
              {
                prop: 'lawFirm',
                id: 132,
                label: '律所',
                type: 'number',
                parentId: 13

              }
            ],
            id: 12,
            type: 'row'
          },
          {
            children: [
              {
                prop: 'issueCumulative',
                id: 51,
                label: '申请专项债总额(累计发行)',
                type: 'number',
                parentId: 5

              }
            ],
            id: 11,
            type: 'row'
          },
          {
            prop: 'sourceIncome',
            id: 9,
            label: '收入来源',
            type: 'textarea',
            rows: 3,
            span: '24'
          },
          {
            prop: 'introduction',
            id: 10,
            label: '建设内容',
            type: 'textarea',
            rows: 4,
            span: '24'
          },
          {
            prop: 'portfolioFinancing',
            id: 111,
            label: '其他债务融资来源',
            type: 'textarea',
            parentId: 11,
            rows: 4,
            span: '24'
          }
        ]
      },
      issueInfo: {
        issueDate: '',
        issueAmount: '',
        issueRate: '',
        issueTerm: '',
        projectId: ''
      }
    }
  },
  methods: {
    edit () {
      if (this.btnTips === '编辑') {
        this.option.detail = false
        this.btnTips = '保存'
      } else {
        this.option.detail = true
        this.$api.project.proUpdate(this.data).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.$emit('refInfo')
          } else {
            this.$message.error(res.msg)
          }
        })
        this.btnTips = '编辑'
      }
    },
    cancel () {
      this.option.detail = true
      this.btnTips = '编辑'
    },
    issueAdd () {
      this.issueInfo.projectId = this.data.id
      this.$api.project.issueAdd(this.issueInfo).then(res => {
        if (res.code === 200) {
          this.showAdd = false
          this.$message.success(res.msg)
          this.$emit('refresh')
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>