010GMClient/src/views/player/index.vue

<template>
  <div class="app-container">
    <div class="header">
      <el-form :inline="true" :model="formInline1">
        <el-form-item label="玩家Id">
          <el-input v-model="formInline1.playerId" placeholder="请输入玩家ID" @keyup.enter="onSubmit" />
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="cpPlayer">复制账号</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="footer">
      <el-collapse v-model="collapse" accordion>
        <el-collapse-item name="0" title="基本信息" :class="{ 'active-item': collapse === '0' }">
          <playerInfo :ruleForm="ruleForm"></playerInfo>
        </el-collapse-item>
        <el-collapse-item name="1" title="道具信息">
          <itemInfo :its="its" :ruleForm="ruleForm" :callback="addItem"></itemInfo>
        </el-collapse-item>
        <el-collapse-item name="2" title="关卡信息">
          <msaInfo :msa="msa" :ruleForm="ruleForm" :callback="handleCustomEvent" :callback1="resetMsa"></msaInfo>
        </el-collapse-item>
        <el-collapse-item name="3" title="英雄信息">
          <heroInfo :hrs="hrs" :ruleForm="ruleForm" :callback="hrsEvent" :callback1="hrsEditEvent"></heroInfo>
        </el-collapse-item>
        <el-collapse-item name="4" title="图纸信息">
          <bpInfo :bps="bps" :ruleForm="ruleForm" :callback="bpsEvent" :callback1="bpsEditEvent"></bpInfo>
        </el-collapse-item>
        <el-collapse-item name="5" title="遗物信息">
          <relicInfo :rls="rls" :ruleForm="ruleForm" :callback="rdmEvent" :callback1="relicEvent"></relicInfo>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>

  <!-- 模态框 -->
  <el-dialog title="复制账号" v-model="showModal" @close="closeModal" width="350px">
    <el-form-item label="复制玩家">
      <el-input v-model="fromPlayerID" placeholder="输入复制玩家ID" :maxlength="8"
        style="width: 200px;position: relative; left: 20px;" />
    </el-form-item>
    <el-form-item label="目标玩家">
      <el-input v-model="toPlayerID" placeholder="输入目标玩家ID" :maxlength="8"
        style="width: 200px;position: relative; left: 20px;" />
    </el-form-item>


    <span slot="footer" class="dialog-footer" style="position: absolute; right: 20px; bottom: 10px;">
      <el-button type="primary" @click="savePlayer">复制</el-button>
      <el-button @click="closeModal">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts" setup name="inline-table">
import playerInfo from "@/components/player/playerInfo/index.vue"
import itemInfo from "@/components/player/itemInfo/index.vue"
import msaInfo from "@/components/player/msaInfo/index.vue"
import heroInfo from "@/components/player/heroInfo/index.vue"
import bpInfo from "@/components/player/BPInfo/index.vue"
import relicInfo from "@/components/player/relicInfo/index.vue"
import { reactive, ref, toRefs, defineEmits } from 'vue'
import { FormInstance, ElMessage } from 'element-plus'
import playerApi from '@/api/player'
import { formatDate } from '../../common/date'

const formInline1 = reactive({
  playerId: ''
})

const fromPlayerID = ref("");
const toPlayerID = ref("");
const collapse = ref('0');
const showModal = ref<Boolean>(false);


const ruleForm = reactive({
  id: '',
  aId: '',
  nm: '',
  gId: '',
  lv: '',
  vLv: '',
  tmp: '',
  atu: '',
  gld: '',
  btm: '',
  btn: '',
  stm: '',
  stn: '',
  aby: '',
  ctm: '',
  llTm: '',
  luTm: ''
});

const its = reactive([]);

const msa = reactive([]);

const hrs = reactive([]);

const bps = reactive([]);

const rls = reactive([]);

const onSubmit = async () => {
  let resp = playerApi.queryPlayerInfo(formInline1);

  let data = (await resp).data.result;

  let jsonData = JSON.parse(data);
  if (data != '未找到此角色') {
    ruleForm.id = jsonData.id;
    ruleForm.aId = jsonData.aId;
    ruleForm.nm = jsonData.nm;
    ruleForm.gId = jsonData.gId;
    ruleForm.lv = jsonData.lv;
    ruleForm.vLv = jsonData.vLv;
    ruleForm.tmp = jsonData.tmp == null ? 0 : jsonData.tmp;
    ruleForm.atu = jsonData.atu;
    ruleForm.gld = jsonData.gld == null ? '无' : jsonData.gld;
    ruleForm.btm = jsonData.btm == null ? '无' : formatDate(new Date(jsonData.btm * 1000), 'yyyy-MM-dd hh:mm:ss');
    ruleForm.btn = jsonData.btn == null ? '无' : jsonData.btn;
    ruleForm.stm = jsonData.stm == null ? '无' : formatDate(new Date(jsonData.stm * 1000), 'yyyy-MM-dd hh:mm:ss');
    ruleForm.stn = jsonData.stn == null ? '无' : jsonData.stn;
    ruleForm.aby = jsonData.aby == null ? 0 : jsonData.aby;
    ruleForm.ctm = jsonData.ctm == null ? '无' : formatDate(new Date(jsonData.ctm * 1000), 'yyyy-MM-dd hh:mm:ss');
    ruleForm.llTm = jsonData.llTm == null ? '无' : formatDate(new Date(jsonData.llTm * 1000), 'yyyy-MM-dd hh:mm:ss');
    if (jsonData.luTm == 0) {
      ruleForm.luTm = '在线'
    } else {
      ruleForm.luTm = jsonData.luTm == null ? '无' : formatDate(new Date(jsonData.luTm * 1000), 'yyyy-MM-dd hh:mm:ss');
    }


    const itemKeys = Object.keys(jsonData.its);
    for (let i = 0; i < itemKeys.length; i++) {
      const json = jsonData.its[itemKeys[i]];
      json['editing'] = false;
      json['tempCount'] = json['count'];
      json['id'] = itemKeys[i];
    }
    console.log(jsonData);

    its.splice(0, its.length);
    its.push(...Object.values(jsonData.its));

    msa.splice(0, msa.length);
    msa.push(...Object.values(jsonData.msa));

    hrs.splice(0, hrs.length);
    hrs.push(...Object.values(jsonData.hrs));

    const bluePrintKeys = Object.keys(jsonData.bps);
    for (let i = 0; i < bluePrintKeys.length; i++) {
      const json = jsonData.bps[bluePrintKeys[i]];
      json['id'] = bluePrintKeys[i];
    }

    bps.splice(0, bps.length);
    bps.push(...Object.values(jsonData.bps));

    const relicKeys = Object.keys(jsonData.rls);
    for (let i = 0; i < relicKeys.length; i++) {
      const json = jsonData.rls[relicKeys[i]];
      const rat = json['rat'];
      const ratValue = rat[Object.keys(rat) + '']
      json['rat'] = Object.keys(rat)[0];
      json['ratValue'] = ratValue;
      json['id'] = relicKeys[i];
    }

    rls.splice(0, rls.length);
    rls.push(...Object.values(jsonData.rls));
    console.log(rls);

  }
}

const cpPlayer = () => {
  showModal.value = true;
}

const savePlayer = () => {
  let data = {
    fromPlayerID: fromPlayerID.value,
    toPlayerID: toPlayerID.value,
    srvI:ruleForm.gId
  }

  playerApi.copeRole(data).then((resp) => {
    let msg = resp.data.result;
    if (msg === '角色拷贝成功') {
      ElMessage({
        message: "角色拷贝成功",
        type: 'success',
        duration: 3000
      });
      showModal.value = false;
    } else {
      ElMessage({
        message: "角色拷贝失败",
        type: 'error',
        duration: 3000
      });
    }
  });
}

const closeModal = () => {
  fromPlayerID.value = "";
  toPlayerID.value = "";
  showModal.value = false;
}

const handleCustomEvent = (data: string) => {
  msa.push(JSON.parse(data));
}

const addItem = (data: any) => {
  let jsonData = JSON.parse(data);
  const count = jsonData['count'];
  jsonData['count'] = count['$numberLong']
  jsonData['tempCount'] = count['$numberLong']
  its.push(jsonData);
}

const bpsEvent = (data: string) => {
  bps.push(JSON.parse(data));
}

const bpsEditEvent = (data: any) => {
  let regex = new RegExp(data.heroID, "i");
  let index = hrs.map((hero: { id: string }, index) => {
    if (regex.test(hero.id)) {
      return index;
    }
  }).filter(index => index !== undefined);

  hrs[index[0]].lv = data.heroLv;
  hrs[index[0]].alv = data.heroAlv;
}

const rdmEvent = (data: any) => {
  let regex = new RegExp(data.rlsId, "i");
  let index = rls.map((relic: { id: string }, index) => {
    if (regex.test(relic.id)) {
      return index;
    }
  }).filter(index => index !== undefined);

  rls[index[0]].rdm[data.rdmIndex].typ = data.rdmType;
  rls[index[0]].rdm[data.rdmIndex].val = data.rdmVal;
  rls[index[0]].rdm[data.rdmIndex].sTs = data.rdmsTs;
}

const relicEvent = (data: any) => {
  for (let index = 0; index < data.length; index++) {
    const element = JSON.parse(data[index]);

    let regex = new RegExp(element.id, "i");
    let index2 = rls.map((relic: { id: string }, index2) => {
      if (regex.test(relic.id)) {
        return index2;
      }
    }).filter(index2 => index2 !== undefined);

    const rat = element['rat'];
    const ratValue = rat[Object.keys(rat) + '']
    element['rat'] = Object.keys(rat)[0];
    element['ratValue'] = ratValue;
    const exp = element['exp'];
    element['exp'] = exp['$numberLong']


    if (index2.length > 0) {
      rls[index2[0]] = element;
    } else {
      rls.push(element);
    }
  }
}


const hrsEvent = (data: string) => {
  hrs.push(JSON.parse(data));
}

const hrsEditEvent = (data: any) => {
  let regex = new RegExp(data.heroID, "i");
  let index = hrs.map((hero: { id: string }, index) => {
    if (regex.test(hero.id)) {
      return index;
    }
  }).filter(index => index !== undefined);

  hrs[index[0]].lv = data.heroLv;
  hrs[index[0]].alv = data.heroAlv;
}

const resetMsa = (data: any) => {
  let regex = new RegExp(data.id, "i");
  let index = msa.map((stage: { id: string }, index) => {
    if (regex.test(stage.id)) {
      return index;
    }
  }).filter(index => index !== undefined);

  msa[index[0]].msIc = !data.msIc;
  msa[index[0]].msLc = data.msLc;
  msa[index[0]].msi = data.msi;
}


const submitForm = async (formEl: FormInstance | undefined) => {
  console.log('--FORM---', ruleForm)
  if (!formEl) return

}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<style scoped lang="scss">
.header {
  display: flex;
  padding: 16px 16px 0px 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  background: white;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
}

.footer {
  flex: 1;
  display: flex;
  padding: 16px;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  background: white;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
}
</style>