ark-info-list/ui/src/page/back/ARKDinoListView.vue

<template>
  <div style="margin: 10px;padding: 10px">
    <!--    <ArkItemSelect v-model="demo"/>-->
    <el-form :model="searchForm" label-width="80px">
      <el-row>
        <el-col :span="4">
          <el-form-item label="名称">
            <el-input v-model="searchForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="标签">
            <el-input v-model="searchForm.label"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="全部">
            <el-input v-model="searchForm.allLike"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="分类">
            <el-select>
              <el-option :key="'Ammunition'" :value="'Ammunition'" :label="'弹药(Ammunition)'"></el-option>
              <el-option :key="'Armor'" :value="'Armor'" :label="'护甲(Armor)'"></el-option>
              <el-option :key="'Artifacts'" :value="'Artifacts'" :label="'遗物(Artifacts)'"></el-option>
              <el-option :key="'Attachments'" :value="'Attachments'" :label="'附件(Attachments)'"></el-option>
              <el-option :key="'Chibi-pets'" :value="'Chibi-pets'" :label="'小宠物(Chibi-pets)'"></el-option>
              <el-option :key="'Consumables'" :value="'Consumables'" :label="'消耗品(Consumables)'"></el-option>
              <el-option :key="'Dye'" :value="'Dye'" :label="'染料(Dye)'"></el-option>
              <el-option :key="'Eggs'" :value="'Eggs'" :label="'蛋(Eggs)'"></el-option>
              <el-option :key="'Farming'" :value="'Farming'" :label="'农业(Farming)'"></el-option>
              <el-option :key="'Recipes'" :value="'Recipes'" :label="'配方(Recipes)'"></el-option>
              <el-option :key="'Resources'" :value="'Resources'" :label="'资源(Resources)'"></el-option>
              <el-option :key="'Saddles'" :value="'Saddles'" :label="'鞍(Saddles)'"></el-option>
              <el-option :key="'Seeds'" :value="'Seeds'" :label="'种子(Seeds)'"></el-option>
              <el-option :key="'Skins'" :value="'Skins'" :label="'皮肤(Skins)'"></el-option>
              <el-option :key="'Structures'" :value="'Structures'" :label="'结构(Structures)'"></el-option>
              <el-option :key="'Tools'" :value="'Tools'" :label="'工具(Tools)'"></el-option>
              <el-option :key="'Trophies'" :value="'Trophies'" :label="'奖杯(Trophies)'"></el-option>
              <el-option :key="'Weapons'" :value="'Weapons'" :label="'武器(Weapons)'"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="1.5">
          <el-button class="el-btn-margin" type="primary" @click="replay()">查询</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button class="el-btn-margin" type="primary" @click="replay()">重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="items" style="width: 100%">
      <el-table-column prop="id" label="ID" width="100"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="label" label="标签"></el-table-column>
      <el-table-column prop="imgUrl" label="图片">
        <template #default="scope">
          <el-image :src="GetImg(scope.row.imgUrl)" loading="lazy" style="max-width: 45px;max-height: 45px"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="nameTag" label="类名"></el-table-column>
      <el-table-column prop="category" label="分类"></el-table-column>
      <el-table-column prop="blueprint" label="功能" fixed="right">
        <template #default="scope">
          <el-link type="info">复制蓝图</el-link>&nbsp;
          <el-link type="primary">复制代码</el-link>&nbsp;
          <el-link type="primary">详情</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="blueprint" label="操作" fixed="right">
        <template #default="scope">
          <el-button link type="info" @click="open=true">修改</el-button>
          <el-button linktype="primary">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>

    <el-dialog v-model="open">
      <el-form :model="arkDinoForm" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="arkDinoForm.name"></el-input>
        </el-form-item>
        <el-form-item label="标签">
          <el-input v-model="arkDinoForm.label"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="arkDinoForm.category">
            <el-option :key="'Ammunition'" :value="'Ammunition'" :label="'弹药(Ammunition)'"></el-option>
            <el-option :key="'Armor'" :value="'Armor'" :label="'护甲(Armor)'"></el-option>
            <el-option :key="'Artifacts'" :value="'Artifacts'" :label="'遗物(Artifacts)'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片">
          <el-input v-model="arkDinoForm.imgUrl"></el-input>
        </el-form-item>
        <el-form-item label="实体ID">
          <el-input v-model="arkDinoForm.entityId"></el-input>
        </el-form-item>
        <el-form-item label="蓝图">
          <el-input v-model="arkDinoForm.blueprint"></el-input>
        </el-form-item>
        <el-form-item label="蓝图">
          <el-input v-model="arkDinoForm.nameTag"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {ArkDinoInfo, PostDinoList, ReqArkItem} from "../../api/ARKItemsApi";
import {ref} from "vue";

let items = ref<ArkDinoInfo[]>([])
let total = ref<number>(0)
let pageNum = ref<number>(1)
let pageSize = ref<number>(10)

let arkDinoForm = ref<ArkDinoInfo>(new ArkDinoInfo(0, "", "", "", "", "", "", ""))
let open = ref<boolean>(false)

let searchForm = ref<ReqArkItem>(new ReqArkItem(pageNum.value, pageSize.value, "", "", "", ""))

function replay() {
  items.value = []
  PostDinoList(searchForm.value, pageNum.value, pageSize.value).then((res) => {
    if (res.code == 200) {
      items.value = res.data.list
      total.value = res.data.total
    }
  })
}

const handleSizeChange = (val: number) => {
  pageSize.value = val
}
const handleCurrentChange = (val: number) => {
  pageNum.value = val
  replay()
}

function GetImg(url: string): string {
  return url
}


replay()
</script>
<style scoped lang="scss">

</style>