jcyjdt_studio/src/components/common/support/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 #fieldsList="{ item }">
            <span v-for="(i, index) in form[item.model]" :key="index" class="direction">
              <span>{{ index + 1 }}.</span>{{ i.name }}
            </span>
          </template>
          <template #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 #content="{ item }">
            <p v-html="form[item.model]"></p>
          </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 type { Ref } from 'vue';
import _ from 'lodash';
import { DictDataStore } from '@common/src/stores/users/sysdictdata'; // 字典表
import type { IQueryResult } from '@/util/types.util';
const sysdictdata = DictDataStore();
const props = defineProps({
  info: { type: Object, default: () => {} },
  type: { type: String },
});
const { info } = toRefs(props);
let field: Ref<any[]> = ref([
  { label: '标题', model: 'title', options: { readonly: true } },
  { label: '发布时间', model: 'date', options: { readonly: true } },
  { label: '科学家姓名', model: 'scientist_name', options: { readonly: true } },
  { label: '单位名称', model: 'company_name', options: { readonly: true } },
  { label: '行业领域', model: 'fieldsList', custom: true },
  { label: '文件信息', model: 'file', custom: true },
  { label: '信息内容', model: 'content', custom: true },
]);
let form: Ref<{}> = ref({});
let fieldsList: Ref<any[]> = ref([]);

// 查询
const search = async (info) => {
  let e = _.cloneDeep(info);
  e.fieldsList = getFields(e.fields);
  form.value = e;
};
// 获得领域
const getFields = (e) => {
  let field = [];
  for (const val of e) {
    let data = fieldsList.value.find((i) => i.dict_value == val);
    if (data) field.push({ name: data.dict_label });
  }
  return field;
};
const searchOther = async () => {
  const p1: IQueryResult = await sysdictdata.query({ dict_type: 'studio_field' });
  fieldsList.value = p1.data as [];
};
watch(info, async (newVal) => {
  if (newVal && newVal._id) {
    await searchOther();
    await 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>