jcyjdt_studio/src/components/common/scientist/info.vue

<template>
  <div id="info">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <component :is="CForm" :fields="field" :rules="{}" :form="form" labelWidth="auto" :isSave="false">
          <template #phone>
            <el-input v-model="form.phone.phone" readonly></el-input>
          </template>
          <template #email>
            <el-input v-model="form.email.email" readonly></el-input>
          </template>
          <template #education>
            <el-option v-for="i in educationList" :key="i.dict_value" :label="i.dict_label" :value="i.dict_value"></el-option>
          </template>
          <template #degree>
            <el-option v-for="i in degreeList" :key="i.dict_value" :label="i.dict_label" :value="i.dict_value"></el-option>
          </template>
          <template #card="{ item }">
            <el-link class="link" :href="i.url" :underline="false" v-for="(i, index) in form[item.model]" :key="index" target="_blank">
              <i class="el-icon-view el-icon--right"></i><span>{{ index + 1 }}.{{ i.name }}</span>
            </el-link>
          </template>
          <template #team_phone>
            <el-input v-model="form.team_phone.phone" readonly></el-input>
          </template>
          <template #zc_file="{ item }">
            <el-link class="link" :href="i.url" :underline="false" v-for="(i, index) in form[item.model]" :key="index" target="_blank">
              <i class="el-icon-view el-icon--right"></i><span>{{ index + 1 }}.{{ i.name }}</span>
            </el-link>
          </template>
          <template #direction="{ item }">
            <span v-for="(i, index) in form[item.model]" :key="index" class="direction">
              <span>{{ index + 1 }}.</span>{{ i.name }}
            </span>
          </template>
          <template #case="{ item }">
            <el-link class="link" :href="i.url" :underline="false" v-for="(i, index) in form[item.model]" :key="index" target="_blank">
              <i class="el-icon-view el-icon--right"></i><span>{{ index + 1 }}.{{ i.name }}</span>
            </el-link>
          </template>
          <template #case_file="{ item }">
            <el-link class="link" :href="i.url" :underline="false" v-for="(i, index) in form[item.model]" :key="index" target="_blank">
              <i class="el-icon-view el-icon--right"></i><span>{{ index + 1 }}.{{ i.name }}</span>
            </el-link>
          </template>
          <template #settle_file="{ item }">
            <el-link class="link" :href="i.url" :underline="false" v-for="(i, index) in form[item.model]" :key="index" target="_blank">
              <i class="el-icon-view el-icon--right"></i><span>{{ index + 1 }}.{{ i.name }}</span>
            </el-link>
          </template>
          <template #job_zc_file="{ item }">
            <el-link class="link" :href="i.url" :underline="false" v-for="(i, index) in form[item.model]" :key="index" target="_blank">
              <i class="el-icon-view el-icon--right"></i><span>{{ index + 1 }}.{{ i.name }}</span>
            </el-link>
          </template>
        </component>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import CForm from '@common/src/components/frame/c-form.vue';
import { ref, toRefs, watch } from 'vue';
import store from '@/stores/counter';
import type { Ref } from 'vue';
interface opItem {
  dict_value: string;
  dict_label: string;
}
const props = defineProps({
  info: { type: Object, default: () => {} },
  type: { type: String },
  educationList: { type: Array<opItem> },
  degreeList: { type: Array<opItem> },
});
const { info } = toRefs(props);
const { type } = toRefs(props);
const { educationList } = toRefs(props);
const { degreeList } = toRefs(props);
let field: Ref<any[]> = ref([]);
let form: Ref<{ phone: { phone: string }; email: { email: string }; team_phone: { phone: string } }> = ref({
  phone: { phone: '' },
  email: { email: '' },
  team_phone: { phone: '' },
});
let user = store.state.user as { _id: string; role_type: string };
// 查询
const search = async (e) => {
  if (user && user.role_type != '1') {
    if (e.phone && e.phone.is_show == false) e.phone.phone = '暂未公开';
    if (e.email && e.email.is_show == false) e.email.email = '暂未公开';
    if (e.team_phone && e.team_phone.is_show == false) e.team_phone.phone = '暂未公开';
  }
  form.value = e;
  // 整理依托单位显示内容
  let fields: Ref<any[]> = ref([
    { label: '姓名', model: 'name', options: { readonly: true } },
    { label: '出生年月', model: 'brith', options: { readonly: true } },
    { label: '居住地', model: 'live_place', options: { readonly: true } },
    { label: '手机号', model: 'phone', custom: true },
    { label: '电子邮箱', model: 'email', custom: true },
    { label: '学历', model: 'education', type: 'select' },
    { label: '学位', model: 'degree', type: 'select' },
    { label: '身份证', model: 'card', custom: true },
    { label: '团队联系人', model: 'team_name', options: { readonly: true } },
    { label: '团队联系电话', model: 'team_phone', custom: true },
    { label: '所在单位全称', model: 'company', options: { readonly: true } },
    { label: '所在单位地址', model: 'address', options: { readonly: true } },
    { label: '专业技术职称', model: 'zc', options: { readonly: true } },
    { label: '职称证明', model: 'zc_file', custom: true },
    { label: '社会兼职', model: 'part_job', options: { readonly: true } },
    { label: '研究领域', model: 'fields', options: { readonly: true } },
    { label: '研究方向', model: 'direction', custom: true },
    { label: '服务企业代表性案例', model: 'case', custom: true },
    { label: '案例证明材料', model: 'case_file', custom: true },
    { label: '是否为在职人员', model: 'is_job' },
  ]);
  if (type.value == 'web') {
    fields.value = fields.value.filter((i) => i.model != 'card' && i.model != 'zc_file' && i.model != 'settle_file' && i.model != 'job_zc_file');
  }
  field.value = fields.value;
};
watch(info, (newVal) => {
  if (newVal && newVal._id) {
    search(newVal);
  }
});
</script>

<style lang="scss" scoped>
.direction {
  display: inline-block;
  background-color: #409eff;
  border-radius: 5px;
  padding: 0 5px;
  margin: 0 5px 5px 0;
  color: #ffffff;
  line-height: 2.5;
  span {
    padding: 0 5px 0 0;
  }
}
</style>