198 lines
		
	
	
		
			7.1 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			198 lines
		
	
	
		
			7.1 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
<template>
 | 
						|
  <section class="pumDetail">
 | 
						|
    <ai-detail>
 | 
						|
      <ai-title slot="title" title="经营主体详情" isShowBottomBorder isShowBack @onBackClick="$router.push({query:{}})"/>
 | 
						|
      <template #content>
 | 
						|
        <ai-sidebar :tabTitle="menuList" v-model="index" @change="change"></ai-sidebar>
 | 
						|
        <template v-if="index==0">
 | 
						|
          <el-form size="small" label-width="160px">
 | 
						|
          <ai-card title="营业执照">
 | 
						|
            <template #content>
 | 
						|
              <el-form-item label="企业名称">{{ detail.enterpriseName }}</el-form-item>
 | 
						|
              <el-form-item label="统一社会信用代码">{{ detail.unifiedCode }}</el-form-item>
 | 
						|
              <el-form-item label="企业类型">{{ dict.getLabel('enterpriseType', detail.enterpriseType) }}</el-form-item>
 | 
						|
              <el-form-item label="所在地区">{{ detail.areaName }}</el-form-item>
 | 
						|
              <el-form-item label="详细地址">{{ detail.address }}</el-form-item>
 | 
						|
              <el-form-item label="经营范围">{{ detail.businessScope }}</el-form-item>
 | 
						|
              <el-form-item label="营业期限">{{ detail.operationPeriod }}</el-form-item>
 | 
						|
              <el-form-item label="营业执照">
 | 
						|
                <el-image class="thumb" :src="detail.businessLicense" :preview-src-list="[detail.businessLicense]"/>
 | 
						|
              </el-form-item>
 | 
						|
            </template>
 | 
						|
          </ai-card>
 | 
						|
          <ai-card title="法人信息">
 | 
						|
            <template #content>
 | 
						|
              <el-form-item label="法人姓名">{{ detail.legalPersonName }}</el-form-item>
 | 
						|
              <el-form-item label="身份证号">{{ detail.idNumber }}</el-form-item>
 | 
						|
              <el-form-item label="联系方式">{{ detail.phone }}</el-form-item>
 | 
						|
              <el-form-item label="身份证照片">
 | 
						|
                <el-row type="flex" align="middle">
 | 
						|
                  <el-image class="thumb" :src="detail.idNumberTopside" :preview-src-list="[detail.idNumberTopside]"/>
 | 
						|
                  <el-image class="thumb" :src="detail.idNumberBackside" :preview-src-list="[detail.idNumberBackside]"/>
 | 
						|
                </el-row>
 | 
						|
              </el-form-item>
 | 
						|
            </template>
 | 
						|
          </ai-card>
 | 
						|
          <ai-card title="审核结果" v-if="!isAuthing">
 | 
						|
            <template #content>
 | 
						|
              <el-form-item label="审核人">{{ detail.auditUserName }}</el-form-item>
 | 
						|
              <el-form-item label="联系方式">{{ detail.auditPhone }}</el-form-item>
 | 
						|
              <el-form-item label="备注说明">{{ detail.auditDescription }}</el-form-item>
 | 
						|
            </template>
 | 
						|
          </ai-card>
 | 
						|
          </el-form>
 | 
						|
        </template>
 | 
						|
        <template v-if="index==1">
 | 
						|
          <ai-card title="股权结构">
 | 
						|
            <template #right>
 | 
						|
              <el-button type="text" size="small" @click="handleAdd">+添加股东</el-button>
 | 
						|
            </template>
 | 
						|
            <template #content>
 | 
						|
              <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
 | 
						|
                        @getList="getTableData" :col-configs="colConfigs">
 | 
						|
              </ai-table>
 | 
						|
            </template>
 | 
						|
          </ai-card>
 | 
						|
        </template>
 | 
						|
      </template>
 | 
						|
    </ai-detail>
 | 
						|
    <ai-dialog title="股权结构" :visible.sync="dialog" width="600px"  @onConfirm="confirm">
 | 
						|
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
 | 
						|
        <el-form-item label="股东名称" prop="name">
 | 
						|
          <el-input v-model="form.name" placeholder="请输入股东名称"></el-input>
 | 
						|
        </el-form-item>
 | 
						|
        <el-form-item label="股东类型" prop="resource">
 | 
						|
          <el-radio-group v-model="form.resource">
 | 
						|
            <el-radio label="个人"></el-radio>
 | 
						|
            <el-radio label="企业"></el-radio>
 | 
						|
          </el-radio-group>
 | 
						|
        </el-form-item>
 | 
						|
        <el-form-item label="身份证号" prop="idNumber">
 | 
						|
          <el-input v-model="form.idNumber" placeholder="请输入身份证号"></el-input>
 | 
						|
        </el-form-item>
 | 
						|
        <el-form-item label="持股数量" prop="num">
 | 
						|
          <el-input v-model="form.num" placeholder="请输入持股数量"></el-input>
 | 
						|
        </el-form-item>
 | 
						|
        <el-form-item label="持股占比%" prop="percentage">
 | 
						|
          <el-input v-model="form.percentage" placeholder="请输入持股占比"></el-input>
 | 
						|
        </el-form-item>
 | 
						|
      </el-form>
 | 
						|
    </ai-dialog>
 | 
						|
  </section>
 | 
						|
</template>
 | 
						|
 | 
						|
<script>
 | 
						|
export default {
 | 
						|
  name: "pumDetail",
 | 
						|
  props: {
 | 
						|
    instance: Function,
 | 
						|
    dict: Object,
 | 
						|
    permissions: Function
 | 
						|
  },
 | 
						|
  computed: {
 | 
						|
    isAuthing() {
 | 
						|
      return this.detail.status == "0"
 | 
						|
    },
 | 
						|
    colConfigs() {
 | 
						|
      return [
 | 
						|
        {prop: "", label: "股东名称", width: 150},
 | 
						|
        {prop: "", label: "股东类型", width: 150},
 | 
						|
        {prop: "idNumber", label: "身份证/信用代码", width: 240},
 | 
						|
        {prop: "", label: "持股数量", width: 150},
 | 
						|
        {prop: "", label: "持股占比", width: 150},
 | 
						|
        {prop: "", label: "股权证", width: 200},
 | 
						|
      ]
 | 
						|
    },
 | 
						|
    rules() {
 | 
						|
      return {
 | 
						|
        name: [{required: true, message: "请填写姓名",trigger: 'blur'}],
 | 
						|
        resource: [{ required: true, message: '请选择股东类型', trigger: 'change' }],
 | 
						|
        idNumber: [{ required: true, message: '请输入身份证号',trigger: 'blur'}],
 | 
						|
        num: [{ required: true, message: '请输入持股数量',trigger: 'blur'}],
 | 
						|
        percentage: [{ required: true, message: '请输入持股占比',trigger: 'blur'}]
 | 
						|
      }
 | 
						|
    }
 | 
						|
  },
 | 
						|
  data() {
 | 
						|
    return {
 | 
						|
      detail: {},
 | 
						|
      menuList: ['基本信息'],
 | 
						|
      // menuList: ['基本信息','股权结构'],
 | 
						|
      index: 0,
 | 
						|
      tableData: [],
 | 
						|
      page: {current: 1, size: 10, total: 0},
 | 
						|
      dialog: false,
 | 
						|
      form: {
 | 
						|
        name: "",
 | 
						|
        resource: "",
 | 
						|
        idNumber: "",
 | 
						|
        num: '',
 | 
						|
        percentage: '',
 | 
						|
      },
 | 
						|
    }
 | 
						|
  },
 | 
						|
  methods: {
 | 
						|
    getDetail() {
 | 
						|
      let {id} = this.$route.query
 | 
						|
      this.instance.post("/appportaluserenterprise/queryDetailById", null, {
 | 
						|
        params: {id}
 | 
						|
      }).then(res => {
 | 
						|
        if (res?.data) {
 | 
						|
          this.detail = res.data
 | 
						|
        }
 | 
						|
      })
 | 
						|
    },
 | 
						|
    change(index) {
 | 
						|
      this.currentMenu = index
 | 
						|
      this.getDetail()
 | 
						|
    },
 | 
						|
    getTableData() {
 | 
						|
      // this.instance.post("/app/appdvcpconfig/list", null, {
 | 
						|
      //   params: {...this.page, ...this.search}
 | 
						|
      // }).then(res => {
 | 
						|
      //   if (res?.data) {
 | 
						|
      //     this.tableData = res.data?.records
 | 
						|
      //     this.page.total = res.data.total
 | 
						|
      //   }
 | 
						|
      // })
 | 
						|
    },
 | 
						|
    handleAdd() {
 | 
						|
      this.dialog = true
 | 
						|
    },
 | 
						|
    confirm() {
 | 
						|
      // this.$refs["form"].validate(valid => {
 | 
						|
      //   if (valid) {
 | 
						|
      //     this.instance.post("/app/appdvcpconfig/addOrUpdate", {
 | 
						|
      //       ...this.dialogForm,
 | 
						|
      //     }).then(res => {
 | 
						|
      //       if (res.code == 0) {
 | 
						|
      //         this.$message.success(this.dialogForm.id ? "修改成功" : "新增成功");
 | 
						|
      //         this.dialog = false;
 | 
						|
      //         this.getTableData();
 | 
						|
      //       }
 | 
						|
      //     })
 | 
						|
      //   }
 | 
						|
      // })
 | 
						|
    },
 | 
						|
  },
 | 
						|
  created() {
 | 
						|
    this.getDetail()
 | 
						|
  }
 | 
						|
}
 | 
						|
</script>
 | 
						|
 | 
						|
<style lang="scss" scoped>
 | 
						|
.pumDetail {
 | 
						|
  height: 100%;
 | 
						|
 | 
						|
  .thumb {
 | 
						|
    width: 120px;
 | 
						|
    height: 120px;
 | 
						|
 | 
						|
    & + .thumb {
 | 
						|
      margin-left: 8px;
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 | 
						|
</style>
 |