| 提交 | 用户 | 时间 | ||
| c62768 | 1 | <template> |
| J | 2 | <Dialog v-model="dialogVisible" :title="dialogTitle" width="47%"> |
| 3 | <div class="card" @click="openForm('ATOM')"> | |
| 4 | <img src="../img/ATOM.png" alt="Card Image" class="card-img"/> | |
| 5 | <div class="card-body"> | |
| 6 | <p class="card-title-text">{{ "原子指标" }}</p> | |
| 7 | <p class="card-text">{{ "从0开始创建一个新指标" }}</p> | |
| 8 | </div> | |
| 9 | </div> | |
| 10 | <div class="card" @click="openForm('DER')"> | |
| 11 | <img src="../img/DER.png" alt="Card Image" class="card-img"/> | |
| 12 | <div class="card-body"> | |
| 13 | <p class="card-title-text">{{ "派生指标" }}</p> | |
| 14 | <p class="card-text">{{ "基于单个原子指标通过条件过滤派生出的新指标" }}</p> | |
| 15 | </div> | |
| 16 | </div> | |
| 17 | <div class="card" @click="openForm('CAL')"> | |
| 18 | <img src="../img/CAL.png" alt="Card Image" class="card-img"/> | |
| 19 | <div class="card-body"> | |
| 20 | <p class="card-title-text">{{ "复合指标" }}</p> | |
| 21 | <p class="card-text">{{ "基于一组原子指标通过条件过滤派生出的新指标" }}</p> | |
| 22 | </div> | |
| 23 | </div> | |
| 24 | </Dialog> | |
| 25 | <AtomIndDefineForm ref="atomFormRef" @success="getList" /> | |
| 26 | <DerIndDefineForm ref="derFormRef" @success="getList" /> | |
| 27 | <CalIndDefineForm ref="calFormRef" @success="getList" /> | |
| 28 | </template> | |
| 29 | <script lang="ts" setup> | |
| 30 | import * as DataSetApi from '@/api/data/ind/data/data.set' | |
| 31 | import AtomIndDefineForm from './AtomIndDefineForm.vue' | |
| 32 | import DerIndDefineForm from './DerIndDefineForm.vue' | |
| 33 | import CalIndDefineForm from './CalIndDefineForm.vue' | |
| 34 | ||
| 35 | defineOptions({ name: 'IndDataSetForm' }) | |
| 36 | ||
| 37 | const { t } = useI18n() // 国际化 | |
| 38 | const message = useMessage() // 消息弹窗 | |
| 39 | ||
| 40 | const dialogVisible = ref(false) // 弹窗的是否展示 | |
| 41 | const dialogTitle = ref('') // 弹窗的标题 | |
| 42 | const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 | |
| 43 | const formType = ref('') // 表单的类型：create - 新增；update - 修改 | |
| 44 | ||
| 45 | /** 打开弹窗 */ | |
| 46 | const open = async (type: string) => { | |
| 47 | dialogVisible.value = true | |
| 48 | dialogTitle.value = t('action.' + type) | |
| 49 | formType.value = type | |
| 50 | } | |
| 51 | defineExpose({ open }) // 提供 open 方法，用于打开弹窗 | |
| 52 | ||
| 53 | const atomFormRef = ref() | |
| 54 | const derFormRef = ref() | |
| 55 | const calFormRef = ref() | |
| 56 | const openForm = (category: string) => { | |
| 57 | if(category === 'ATOM'){ | |
| 58 | atomFormRef.value.open("create",null) | |
| 59 | }else if(category === 'DER'){ | |
| 60 | derFormRef.value.open("create",null) | |
| 61 | }else if(category === 'CAL'){ | |
| 62 | calFormRef.value.open("create",null) | |
| 63 | } | |
| 64 | } | |
| 65 | </script> | |
| 66 | ||
| 67 | <style scoped> | |
| 68 | .card { | |
| 69 | width: 25vh; | |
| 70 | margin: 10px 16px; | |
| 71 | display: inline-block; | |
| 72 | vertical-align: top; | |
| 73 | border: 1px solid #ddd; | |
| 74 | border-radius: 4px; | |
| 75 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| 76 | height: 30vh; | |
| 77 | cursor: pointer; | |
| 78 | } | |
| 79 | .card-img { | |
| 80 | width: 100%; | |
| 81 | height: 150px; | |
| 82 | object-fit: cover; | |
| 83 | } | |
| 84 | ||
| 85 | .card-body { | |
| 86 | padding: 10px; | |
| 87 | text-align: center; | |
| 88 | } | |
| 89 | .card-title-text{ | |
| 90 | font-size: larger; | |
| 91 | } | |
| 92 | .card-text { | |
| 93 | font-size: smaller; | |
| 94 | margin: 0; | |
| 95 | } | |
| 96 | </style> | |
