ark-shop-tools/ui/src/page/back/KitsView.vue

<template>
  <div class="body-kit">
    <el-row>
      <el-col :span="4"></el-col>
      <el-col :span="16">
        <el-table :data="Kits" border>
          <el-table-column prop="Name" label="名称" width="75"></el-table-column>
          <el-table-column prop="data.Price" label="价格" width="100"></el-table-column>
          <el-table-column prop="data.Permissions" label="权限" width="150"></el-table-column>
          <el-table-column prop="data.Description" label="描述"></el-table-column>
          <el-table-column prop="data.DefaultAmount" label="默认数量" width="100"></el-table-column>
          <el-table-column prop="data.Dinos" label="恐龙" width="60">
            <template #default="scope">
              <el-button type="danger" v-if="scope.row.data.Dinos"
                         link @click="OpenDinoInfo(scope.row.data.Dinos)">恐龙
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="data.Items" label="物品" width="60">
            <template #default="scope">
              <el-button type="success" link v-if="scope.row.data.Items"
                         @click="OpenItemInfo(scope.row.data.Items)">物品
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog title="恐龙" v-model="openDino" width="800">
      <el-row>
        <el-col :span="24">
          <el-table :data="DinoList" border>
            <el-table-column prop="Level" label="等级" width="75"></el-table-column>
            <el-table-column prop="Neutered" label="绝育" width="100"></el-table-column>
            <el-table-column prop="Blueprint" label="蓝图" ></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog title="恐龙" v-model="openItem" width="1000">
      <el-row>
        <el-col :span="24">
          <el-table :data="ItemList" border>
            <el-table-column prop="Amount" label="数量" width="75"></el-table-column>
            <el-table-column prop="Fixed" label="固定" width="100"></el-table-column>
            <el-table-column prop="ForceBlueprint" label="是否为蓝图" ></el-table-column>
            <el-table-column prop="Blueprint" label="蓝图" ></el-table-column>
            <el-table-column prop="Quality" label="品质" width="60"></el-table-column>
          </el-table>
        </el-col>
      </el-row>

    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import {BaseData, Dino, GetKits, Item, Kit} from "../../api/ConfigFile.ts";
import {ref} from "vue";

let Kits = ref<BaseData<Kit>[]>([])
let openDino = ref(false)
let DinoList = ref<Dino[]>([])

function OpenDinoInfo(dino: Dino[]) {
  DinoList.value = []
  DinoList.value = dino
  openDino.value = true
}

let openItem = ref(false)
let ItemList = ref<Item[]>([])

function OpenItemInfo(item: Item[]) {
  ItemList.value = []
  ItemList.value = item
  openItem.value = true
}

function replay() {
  Kits.value = []
  GetKits().then(res => {
    if (res.code == 200) {
      for (let item in res.data) {
        Kits.value.push(new BaseData(item, res.data[item]))
      }
    }
  })
}

replay()
</script>

<style scoped lang="scss">
.body-kit {
  padding: 10px;
}

</style>