settle_down_web/src/views/biz/detail.vue

<template>
  <div>
    <el-form ref="form" :model="form" style="width: 100%;" :rules="rules">
      <span class="card_title">基本信息</span>
      <el-card shadow="always">
        <el-row class="col-self">
          <el-col :span="3" class="col-txt"><span>企业名称</span></el-col>
          <el-col :span="9" class="col-input col-bg">
            <span>{{ form.businessName }}</span>
          </el-col>
          <el-col :span="4" class="col-txt"><span>状态</span></el-col>
          <el-col :span="7" class="col-input col-bg">
            <span>{{ form.status }}</span>
          </el-col>
        </el-row>
        <el-row class="col-self">
          <el-col :span="3" class="col-txt"><span>企业类型</span></el-col>
          <el-col :span="9" class="col-input col-bg">
            <span>{{ form.type }}</span>
          </el-col>
          <el-col :span="4" class="col-txt"><span>是否总部</span></el-col>
          <el-col :span="7" class="col-input col-bg">
            <span>{{ form.isHeadquarters }}</span>
          </el-col>
        </el-row>
        <el-row class="col-self">
          <el-col :span="3" class="col-txt"><span>是否进出口</span></el-col>
          <el-col :span="9" class="col-input col-bg">
            <span>{{ form.isImportExport }}</span>
          </el-col>
          <el-col :span="4" class="col-txt"><span>是否外资</span></el-col>
          <el-col :span="7" class="col-input col-bg">
            <span>{{ form.isForeignOwned }}</span>
          </el-col>
        </el-row>
        <el-row class="col-self">
          <el-col :span="3" class="col-txt"><span>行业分类</span></el-col>
          <el-col :span="9" class="col-input col-bg">
            <span>{{ form.registeredCategory }}</span>
          </el-col>
          <el-col :span="4" class="col-txt"><span>注册标识</span></el-col>
          <el-col :span="7" class="col-input col-bg">
            <span>{{ form.registeredTag }}</span>
          </el-col>
        </el-row>
      </el-card>
      <span class="card_title">注册信息</span>
      <el-card shadow="always">
        <el-row class="col-self">
          <el-col :span="3" class="col-txt"><span>注册资金</span></el-col>
          <el-col :span="9" class="col-input col-bg">
            <span>{{ form.registeredCapital }}</span>
          </el-col>
          <el-col :span="4" class="col-txt"><span>统一社会信用代码</span></el-col>
          <el-col :span="7" class="col-input col-bg">
            <span>{{ form.taxNumber }}</span>
          </el-col>
        </el-row>
        <el-row class="col-self">
          <el-col :span="3" class="col-txt"><span>注册时间</span></el-col>
          <el-col :span="9" class="col-input col-bg">
            <span>{{ form.registeredAt }}</span>
          </el-col>
          <el-col :span="4" class="col-txt"><span>经营范围</span></el-col>
          <el-col :span="7" class="col-input col-bg">
            <span>{{ form.businessScope }}</span>
          </el-col>
        </el-row>
      </el-card>
      <span class="card_title">联系人信息</span>
      <el-card shadow="always">
        <el-row class="col-self">
          <el-col :span="3" class="col-txt"><span>联系人</span></el-col>
          <el-col :span="9" class="col-input col-bg">
            <span>{{ form.contactUser }}</span>
          </el-col>
          <el-col :span="4" class="col-txt"><span>联系电话</span></el-col>
          <el-col :span="7" class="col-input col-bg">
            <span>{{ form.contactPhone }}</span>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import Base from '../base/base'
export default {
    name: 'Main',
    mixins: [Base],
    props: {
        bizId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            dc_key: ['BIZ_TYPE', 'BIZ_STATUS', 'BIZ_CATEGORY', 'TRUE_OR_FALSE', 'BIZ_TAG'],

            form: this.initForm()
        }
    },
    watch: {
        bizId: {
            deep: true,
            handler(val) {
                this.initData(val)
            }
        }
    },
    mounted() {
        this.initDict(this.dc_key).then(res => {
            this.initData(this.bizId)
        })
    },
    methods: {
        initData: function(_bizId) {
            const _this = this
            _this.loading = true

            this.baseRequest('getById', {
                id: _bizId
            }).then(res => {
                if (res.data) {
                    _this.form = Object.assign({}, _this.form, res.data)
                    _this.form.registeredAt = res.data.registeredAt ? _this.$common.transServDate(res.data.registeredAt) : ''

                    _this.form.type = _this.dc_map.BIZ_TYPE[res.data.type]
                    _this.form.status = _this.dc_map.BIZ_STATUS[res.data.status]
                    _this.form.isHeadquarters = _this.dc_map.TRUE_OR_FALSE[res.data.isHeadquarters]
                    _this.form.isImportExport = _this.dc_map.TRUE_OR_FALSE[res.data.isImportExport]
                    _this.form.isForeignOwned = _this.dc_map.TRUE_OR_FALSE[res.data.isForeignOwned]
                    _this.form.registeredCategory = _this.dc_map.BIZ_CATEGORY[res.data.registeredCategory]
                    _this.form.registeredTag = _this.dc_map.BIZ_TAG[res.data.registeredTag]
                }

                _this.loading = false
            })
        },
        initForm: function() {
            return {
                id: '',
                businessName: '',
                type: '',
                addressCode: '',
                addressOther: '',
                contactUser: '',
                contactPhone: '',

                taxNumber: '',
                isHeadquarters: '',
                isImportExport: '',
                isForeignOwned: '',
                registeredCategory: '',
                registeredTag: '',
                registeredCapital: '',
                registeredAt: '',
                businessScope: '',
                addressDisplay: ''
            }
        },
        // 请求封装，继承类中调用，必须存在
        baseRequest: function(opUrl, postData) {
            return this.$channel.baseRequest('BizMainController', opUrl, postData, 'Biz Main')
        }
    }
}
</script>

<style scoped>
    .g_table_row{
        font-size: 13px;
    }
    .g_table_cell{
        font-size: 13px;
    }
    .ch-input{
        border-radius: 0px;
        border-color: #32323A;
    }
    .ch-input-size {
        width: 150px;
    }
    .ch-select-size {
        width: 200px;
    }
    .ch-button {
        border-color: #32323A;
        background-color: #32323A;
        color: #fff;
    }
    .ch-button-warning {
        margin-left: 10px;
        border-radius: 0px;
        border-color: #E6A23C;
        background-color: #E6A23C;
        color: #fff;
    }
    .ch-button-export {
        margin-left: 10px;
        border-color: #98CC1F;
        background-color: #98CC1F;
        color: #fff;
    }

    /deep/.el-dialog__header {
        padding: 10px 20px;
    }
    /deep/.el-dialog__body {
        padding: 10px 20px;
    }
</style>