institution.vue 11.2 KB
<template>
  <div>
    <el-dialog
      v-if="showDialog"
      v-model="showDialog"
      title="机构资料"
      width="1000px"
      :before-close="handleClose"
      @close="showClose"
    >
      <el-form ref="formData" class="rightForm" :model="userForm" label-width="110px" :rules="rules">
        <el-form-item label="所属协会" prop="deptId" class="cas">
          <el-cascader
            v-model="userForm.deptId"
            :options="list"
            :props="props2"
            placeholder=""
            clearable
            style="width: 100%"
            disabled
          />
        </el-form-item> 
        <el-form-item v-if="userForm.menCode" label="会员编号" prop="menCode">
          <el-input v-model="userForm.menCode" disabled style="width: 100%" />
        </el-form-item>
        <el-form-item label="机构名称" prop="name">
          <el-input v-model="userForm.name" :disabled="true" style="width: 100%" />
        </el-form-item>
        <el-form-item label="所属省份" prop="">
          <el-select
            v-model="userForm.belongProvinceId"
            placeholder="请选择"
            style="width: 100%"
            :disabled="true"
          >
            <el-option label="全国" :value="0" />
            <el-option v-for=" item in options " :key="item.value" :label="item.text" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="社会信用代码" prop="creditCode">
          <el-input v-model="userForm.creditCode" disabled style="width: 100%" />
        </el-form-item>
        <el-form-item label="联系人" prop="siteContact">
          <el-input disabled :value="userForm.siteContact" style="width: 100%" />
        </el-form-item>
        <el-form-item label="联系方式" prop="siteTel">
          <el-input disabled :value="userForm.siteTel" style="width: 100%" />
        </el-form-item>
        <el-form-item v-if="userForm.validityDate" label="有效期" prop="date1">
          <el-input :value="userForm.validityDate" disabled />
        </el-form-item>

        <el-form-item label="认证地址" prop="coordinates">
          <el-cascader
            ref="cascaderA"
            v-model="userForm.coordinates"
            :disabled="true"
            placeholder="请选择"
            :options="options"
            :props="defaultProps"
            filterable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="认证详细地址" prop="adress">
          <el-input v-model="userForm.adress" :disabled="true" style="width: 100%" />
        </el-form-item>

        <el-form-item label="法人姓名" prop="legal">
          <el-input disabled :value="userForm.legal" style="width: 100%" />
        </el-form-item>

        <el-form-item v-if="userForm.deptType==6" label="是否为考点" prop="applyPoints">
          <el-radio-group v-model="userForm.applyPoints" disabled>
            <el-radio label="1"></el-radio>
            <el-radio label="0"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="法人身份证" prop="legalPhoto">
          <el-image
            v-for="item in userForm.legalIdcPhoto"
            :key="item" class="right " style="width: 360px; height: 225px" :src="fillImgUrl(item)"
            :fit="fit"
            @click="imageFN(item)"
          />
        </el-form-item>
        <el-form-item label="上传营业执照" prop="businessLicense">
          <!--          <el-image style="width: 230px; height: 130px" :src="fillImgUrl(userForm.businessLicense)" @click="imageFN(userForm.businessLicense)" />-->
          <a :href="`${businessLicense.url}`" :underline="false" target="_blank">
            <el-button type="primary" link>{{ businessLicense.name }}</el-button>
          </a>
        </el-form-item>
        <el-form-item label="上传机构照片" prop="pictures">
          <el-image
            v-for="item in userForm.pictures" :key="item" class="image" style="width: 230px; height: 130px" :src="fillImgUrl(item)"
            @click="imageFN(item)"
          />
        </el-form-item>
        <!--        <el-form-item label="是否申请" prop="examPointFlag">-->
        <!--          <el-radio-group v-model="userForm.examPointFlag" disabled class="left">-->
        <!--            <el-radio label="1"></el-radio>-->
        <!--            <el-radio label="0"></el-radio>-->
        <!--          </el-radio-group>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item v-if="userForm.materials" label="入会材料" class="FileUpload" prop="materials1">-->
        <!--          <el-link class="size" :href="`${ download +userForm.materials?.[0].url}`" :underline="false" target="_blank"> <span class="down">{{ userForm.materials?.[0].name }}</span>  </el-link>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item v-if="userForm.applicationForMembership" label="入会申请书" class="FileUpload" prop="">-->
        <!--          <el-link class="size" :href="`${ download +userForm.applicationForMembership?.[0].url}`" :underline="false" target="_blank"> <span class="down">{{ userForm.applicationForMembership?.[0].name }}</span>  </el-link>-->
        <!--        </el-form-item>-->
        <!--        &lt;!&ndash;        <el-form-item label="是否为自有场所" prop="ownFlag">&ndash;&gt;-->
        <!--        &lt;!&ndash;          <el-radio-group v-model="userForm.ownFlag" disabled class="left">&ndash;&gt;-->
        <!--        &lt;!&ndash;            <el-radio label="1"></el-radio>&ndash;&gt;-->
        <!--        &lt;!&ndash;            <el-radio label="0"></el-radio>&ndash;&gt;-->
        <!--        &lt;!&ndash;          </el-radio-group>&ndash;&gt;-->
        <!--        &lt;!&ndash;        </el-form-item>&ndash;&gt;-->
        <!--        <el-form-item v-if="userForm.leaseContract&&userForm.ownFlag==1" label="合同" class="FileUpload" prop="">-->
        <!--          <el-link class="size" :href="`${ download +userForm.leaseContract?.[0].url}`" :underline="false" target="_blank"> <span class="down">{{ userForm.leaseContract?.[0].name }}</span>  </el-link>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item v-if="userForm.leaseContract&&userForm.ownFlag==0" label="租赁合同" class="FileUpload" prop="">-->
        <!--          <el-link class="size" :href="`${ download +userForm.leaseContract?.[0].url}`" :underline="false" target="_blank"> <span class="down">{{ userForm.leaseContract?.[0].name }}</span>  </el-link>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item v-if="userForm.ownFlag==0" label="租赁合同有效期" class="FileUpload" prop="applicationForMembership1" :disabled="!result">-->
        <!--          <div class="left">{{ userForm.leaseTime?.replaceAll(',','&#45;&#45;') }}</div>-->
        <!--        </el-form-item>-->
        <div v-if="type==1||type==2||type==3" style="text-align: center">
          <el-button type="primary" @click="compile">编辑</el-button>
        </div>
      </el-form>
      <compileInstitution
        ref="compileInstitutionRef"
        @backFN="showClose"
      />
    </el-dialog>

    <!--预览-->
    <el-dialog
      v-model="showImage"
      title="预览"
      width="80%"
      append-to-body
      style="border-radius: 20px; padding: 20px;"
    >
      <img
        :src="fillImgUrl(imageUrl)"
        style="display: block; width: 100%; margin: 0 auto"
      >
    </el-dialog>


  </div>
</template>

<script setup >
import { getCurrentInstance, ref } from 'vue'
import { deptTreeSelect } from '@/api/system/user'
import { regionsList } from '@/api/system/userInfo.js'
const baseUrl = import.meta.env.VITE_APP_BASE_API
const download = ref(baseUrl + '/upload/getFile?fileUrl=')
import compileInstitution from '@/views/groupMember/components/compileInstitution.vue'
import { fillImgUrl } from '@/utils/ruoyi'
const { proxy } = getCurrentInstance()
const userForm = ref()
const showDialog = ref(false)
const showImage = ref(false)
const imageUrl = ref()
const businessLicense = ref({
  name: '',
  url: ''
})
const props2 = {
  checkStrictly: true,
  children: 'children',
  value: 'id',
  emitPath: false
}

const defaultProps = {
  children: 'children',
  label: 'text',
  checkStrictly: true
}
const options = ref([])
const list = ref([])
const type = ref()
const rowVal = ref()

function open(row, val) {
  showDialog.value = true
  rowVal.value = row
  type.value = val
  userForm.value = row || {}
  if (!Array.isArray(userForm.value.pictures)) {
    userForm.value.pictures = userForm.value?.pictures?.split(',') || []
  }
  if (!Array.isArray(userForm.value.legalIdcPhoto)) {
    userForm.value.legalIdcPhoto = userForm.value?.legalIdcPhoto?.split(',') || []
  }
  if (!Array.isArray(userForm.value.leaseContract) && userForm.value.leaseContract?.length > 0) {
    userForm.value.leaseContract = JSON.parse(userForm.value.leaseContract) 
  }
  if (!Array.isArray(userForm.value.materials) && userForm.value.materials?.length > 0) {
    userForm.value.materials = JSON.parse(userForm.value.materials) 
  }
  if (!Array.isArray(userForm.value.applicationForMembership) && userForm.value.applicationForMembership?.length > 0) {
    userForm.value.applicationForMembership = JSON.parse(userForm.value.applicationForMembership) 
  }

  try {
    if (userForm.value.businessLicense) {
      businessLicense.value.url = download.value + JSON.parse(userForm.value.businessLicense)?.[0]?.url
      businessLicense.value.name = JSON.parse(userForm.value.businessLicense)?.[0]?.name
    }
  } catch (e) {
    if (userForm.value.businessLicense) {
      businessLicense.value.url = fillImgUrl(userForm.value.businessLicense)
      businessLicense.value.name = '营业执照'
    }
  }
  userForm.value.coordinates = []
  userForm.value.provinceId ? userForm.value.coordinates.push(userForm.value.provinceId) : ''
  userForm.value.cityId ? userForm.value.coordinates.push(userForm.value.cityId) : ''
  userForm.value.regionId ? userForm.value.coordinates.push(userForm.value.regionId) : ''
  userForm.value.deptId = userForm.value.deptId + ''
  userForm.value.leaseTime = userForm.value.leaseTime || ''
  // userForm.value.leaseTime ? userForm.value.leaseTime : userForm.value.leaseTime = ''
  console.log(userForm.value)
  addressFn()
  getDeptTree()
}

async function getDeptTree() {
  // const res1 = await deptTreeSelect({ showDirect: '-1', fromTree: 1, showAll: 1 })
  const res1 = await deptTreeSelect({ selfDeptId: '-1', showDirect: 1, showAll: 1 })
  list.value = res1.data
  if (typeof list.value?.[0]?.id == 'number') {
    userForm.value.deptId = userForm.value.deptId * 1
  } else {
    userForm.value.deptId = userForm.value.deptId.toString()
  }
}

function imageFN(row) {
  imageUrl.value = row
  showImage.value = true
}

async function addressFn() {
  const res = await regionsList()
  options.value = res.data
}

// 编辑
function compile() {
  // rowVal
  proxy.$refs['compileInstitutionRef'].open(rowVal.value)
}
const emit = defineEmits(['backFn'])

function showClose() {
  showDialog.value = false
  emit('backFn')
}

defineExpose({
  open
})

</script>

<style scope lang="scss">
.down{
  color:  #1561cb;
  font-size: 16px;
  margin-left: 10px;
}
.image{
  width: 230px;
  height: 130px;
  margin-right: 10px;
}
.right{
  margin-right: 10px;
}
</style>