模型管理页面开发

liudong

2024-07-26 f46584b97726459b9299cbc04b9a8b99f11261de

 src/views/dmx/model/index.vue

@@ -10,75 +10,61 @@
                :active-key="activeKey"
                type="line"
                :editable="true"
                show-add-button
                @tab-click="changeTabs"
                @add="handleAdd"
                @delete="handleDelete"
              >
                <!--                <a-tab-pane key="1" :title="$t('cardList.tab.title.all')">-->
                <!--                  <QualityInspection />-->
                <!--                  <TheService />-->
                <!--                  <RulesPreset />-->
                <!--                </a-tab-pane>-->
                <!--                <a-tab-pane key="2" :title="$t('cardList.tab.title.content')">-->
                <!--                  <QualityInspection />-->
                <!--                </a-tab-pane>-->
                <!--                <a-tab-pane key="3" :title="$t('cardList.tab.title.service')">-->
                <!--                  <TheService />-->
                <!--                </a-tab-pane>-->
                <!--                <a-tab-pane key="4" :title="$t('cardList.tab.title.preset')">-->
                <!--                  <RulesPreset />-->
                <!--                </a-tab-pane>-->

                <a-tab-pane
                  v-for="(item, index) of data"
                  :key="item.key"
                  :title="item.title"
                  :closable="index >= 4"
                >
                  <QualityInspection v-if="activeKey === 1" />
                  <TheService v-if="activeKey === 1" />
                  <RulesPreset v-if="activeKey === 1" />

                  <QualityInspection v-if="activeKey === 2" />

                  <TheService v-if="activeKey === 3" />
                  <RulesPreset v-if="activeKey === 4" />
                  <CustomSettings v-if="activeKey > 4" />
                  <div style="display: flex; flex-wrap: wrap;justify-content: space-between;">
                    <div class="card-wrap"    v-for="(item, index) of data" :key="index">
                      <a-card :bordered="false" hoverable >
                        <template #cover>
                          <div
                          >
                            <img
                              :style="{ width: '100%', transform: 'translateY(-20px)' }"
                              alt="dessert"
                              src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
                            />
                          </div>
                        </template>
                        <div class="arco-card-body-content">
                          <div class="arco-card-body-content-title">
                            {{ item.title }}
                          </div>
                        </div>
                        <div style="position: absolute; bottom: 1rem; right: 1rem;">
                          <a-space>
                            <a-button>
                              删除
                            </a-button>
                            <editModel></editModel>
                          </a-space>
                        </div>
                      </a-card>
                    </div>
                  </div>
                </a-tab-pane>
              </a-tabs>
            </a-col>
            <div> </div>
            <a-input-search
              :placeholder="$t('cardList.searchInput.placeholder')"
              style="width: 240px; position: absolute; top: 60px; right: 20px"
              style="width: 240px; position: absolute; top: 60px; right: 60px"
            />
            <div style="position: absolute; top: 60px; right: 20px">
              <addModel></addModel>
            </div>

          </a-row>
        </a-card>
      </a-col>
    </a-row>

    <a-modal v-model:visible="visible" @Ok="handleOk" @cancel="handleCancel">
      <template #title> 添加框架 </template>
      <a-form
        ref="formRef"
        :size="form.size"
        :model="form"
        @submit="handleSubmit"
      >
        <a-form-item
          field="name"
          label="标签名"
          :rules="[
            { required: true, message: '不能为空' },
            { minLength: 1, message: '至少一个字符' },
          ]"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model="form.name" placeholder="请输入标签名" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

@@ -89,6 +75,8 @@
  import TheService from './components/the-service.vue';
  import RulesPreset from './components/rules-preset.vue';
  import CustomSettings from './components/custom-settings.vue';
  import addModel from "@/views/dmx/model/components/addModel.vue";
  import editModel from "@/views/dmx/model/components/editModel.vue";

  let count = 5;
  const activeKey = ref(1);
@@ -211,4 +199,65 @@
      }
    }
  }
  .card-wrap {
    width: 320px;
    height: 350px;
    margin: 30px;
    transition: all 0.3s;
    border: 1px solid var(--color-neutral-3);
    border-radius: 4px;
    position: relative;
    &:hover {
      transform: translateY(-4px);
      // box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
    }
    :deep(.arco-card) {
      height: 100%;
      border-radius: 4px;
      .arco-card-body {
        height: 100%;
        .arco-space {
          width: 100%;
          height: 100%;
          .arco-space-item {
            height: 100%;
            &:last-child {
              flex: 1;
            }
            .arco-card-meta {
              height: 100%;
              display: flex;
              flex-flow: column;
              .arco-card-meta-content {
                flex: 1;
                .arco-card-meta-description {
                  margin-top: 8px;
                  color: rgb(var(--gray-6));
                  line-height: 20px;
                  font-size: 12px;
                }
              }
              .arco-card-meta-footer {
                margin-top: 0;
              }
            }
          }
        }
      }
    }
    :deep(.arco-card-meta-title) {
      display: flex;
      align-items: center;

      // To prevent the shaking
      line-height: 28px;
    }
    :deep(.arco-skeleton-line) {
      &:last-child {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
      }
    }
  }
</style>