tyj_admin_ui/src/views/gameMail/send/component/editConfig.vue

<template>
  <div>
    <el-dialog title="发送邮件" v-model="isShowDialog">
      <el-form label-width="100px" label-position="right">
        <el-form-item label="服务器:">
          <el-select v-model="tableData.param.serverId" multiple class="m-2" disabled size="large">
            <el-option v-for="item in servers" :key="item.id+''" :label="item.name" :value="item.id+''"/>
          </el-select>
        </el-form-item>
        <el-form-item label="标题:">
          {{ tableData.param.title }}
        </el-form-item>
        <el-form-item label="发件人署名:">
          {{ tableData.param.from }}
        </el-form-item>
        <el-form-item label="内容:">
          {{ tableData.param.content }}
        </el-form-item>
        <el-form-item label="收件人:">
          <div v-if="tableData.param.toAll===1">全服</div>
          <div v-else>{{ tableData.param.ownerId }}</div>
        </el-form-item>
        <el-form-item label="附件:">
          <div v-if="tableData.param.type===1">
            <div v-for="item in tableData.param.drops" :key="item.id+''">
              <div>{{ ItemConfig.find(i => i.Id == item.id).Name }}，数量：{{ item.num }}</div>
            </div>
          </div>
          <div v-else>无附件</div>
        </el-form-item>
        <el-form-item label="新号可领:">
          <div v-if="tableData.param.newGet===1">不可领取</div>
          <div v-else>可以领取</div>
        </el-form-item>
        <el-form-item label="有效期限:">
          <div v-if="tableData.param.expired===1">{{ tableData.param.validDay }}天后删除</div>
          <div v-else>无限制</div>
        </el-form-item>
        <el-form-item label="发送设置:">
          <div v-if="tableData.param.send===1">立即发送</div>
          <div v-else>{{ new Date(tableData.param.sendTime).toLocaleString() }}</div>
        </el-form-item>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
          <el-button size="default" type="primary" class="ml10" @click="addVersion">
            <el-icon>
              <ele-Promotion/>
            </el-icon>
            发送
          </el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {reactive, toRefs, defineComponent} from 'vue';
import AllItemConfigCategory from "/src/api/config/AllItemConfigCategory.json";
import {serverList} from "/src/utils/game";

interface MailData {
  serverId: string[]
  type: number
  validDay: number
  expired: number
  newGet: number
  title: string
  from: string
  // greetings: string
  contentModel: number
  content: string
  toAll: number
  ownerId: string
  dropModel: number
  drops: object[]
  send: number
  sendTime: number
}

interface TableDataState {
  ItemConfig: object;
  channel: Array<{ label: string, value: string }>
  isShowDialog: boolean,
  tableData: {
    param: MailData;
  };
  servers: object[];
  serverSwitch: number;
}

export default defineComponent({
  name: 'apiV1GameMailSendEdit',
  setup(prop, {emit}) {
    const state = reactive<TableDataState>({
      serverSwitch: 0,
      ItemConfig: AllItemConfigCategory,
      channel: [{label: "全渠道", value: ""}, {label: "母包渠道-0", value: "000000000000"}],
      isShowDialog: false,
      tableData: {
        param: {
          serverId: ["1"],
          type: 1,
          validDay: 30,
          expired: 1,
          newGet: 1,
          title: "",
          from: "",
          // greetings: "",
          contentModel: "",
          dropModel: "",
          content: "",
          ownerId: "",
          toAll: 1,
          drops: [],
          send: 1,
          sendTime: new Date().getTime(),
        }
      },
      servers: []
    });

    // 打开弹窗
    const openDialog = (row: MailData) => {
      console.log(row);
      serverList().then(value => {
        state.servers = value;
        // console.log(" server : ", state.servers);
        state.tableData.param = row;
        state.isShowDialog = true;
      });
    };
    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    // 新增
    const addVersion = () => {
      closeDialog();
      emit('countList');
    };
    return {
      openDialog,
      closeDialog,
      onCancel,
      addVersion,
      ...toRefs(state),
    };
  },
});
</script>