010GMClient/src/views/activity/rule/index.vue

<template>
  <div class="app-container" ref="appContainer">
    <PropTable :loading="loading" @selection-change="selectionChange" :columns="column" :data="list" @reset="reset"
      @onSubmit="onSubmit">
      <template v-slot:btn>
        <div style="display: flex; justify-content: flex-end">
          <el-button type="primary" @click="importByExcel"><el-icon>
            <Upload />
          </el-icon>导入</el-button>
          <el-button type="primary" @click="add"><el-icon>
              <plus />
            </el-icon>添加</el-button>
          <el-button type="danger" @click="batchDelete"><el-icon>
              <delete />
            </el-icon>删除</el-button>
        </div>
      </template>
      <template v-slot:type="scope">{{ getTypeLabel(scope.row.type) }}</template>
      <template v-slot:actTemId="scope">{{ getActTemIdLabel(scope.row.actTemId) }}</template>
      <template v-slot:isOpen="scope">{{ getIsOpenLabel(scope.row.isOpen) }}</template>
      <template v-slot:tipsTime="scope">{{ dateUtils.getDate(scope.row.tipsTime) }}</template>
      <template v-slot:startTime="scope">{{ dateUtils.getDate(scope.row.startTime) }}</template>
      <template v-slot:endTime="scope">{{ dateUtils.getDate(scope.row.endTime) }}</template>
      <template v-slot:stayTime="scope">{{ dateUtils.getDate(scope.row.stayTime) }}</template>
      <template v-slot:state="scope">{{ getStateLabel(scope.row) }}</template>
      <template v-slot:operation="scope">
        <el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
          编辑
        </el-button>
        <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
          删除
        </el-button>
      </template>
    </PropTable>

    <el-dialog v-model="dialogVisible" :title='title' width="50%">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
        :size="formSize">
        <el-form-item label="ID" prop="id" v-show="isIdShow">
          <el-input readonly v-model="ruleForm.id" />
        </el-form-item>
        <el-form-item label="活动类型" prop="type">
          <el-radio-group v-model="ruleForm.type" :change="onTypeChange(ruleForm.type)">
            <el-radio :label="0">限时活动</el-radio>
            <el-radio :label="1">循环活动</el-radio>
            <el-radio :label="2">开服活动</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动模版" prop="actTemId">
        <el-select v-model="ruleForm.actTemId" placeholder="请选择活动模版" style="width: 300px">
          <el-option
            v-for="item in templateData"
            :key="item.id"
            :label="item.id + '-' + item.name"
            :value="item.id"
          />
        </el-select>
       </el-form-item>
        <!--<el-form-item label="活动模版" prop="actTem">
          <el-radio-group v-model="ruleForm.actTem">
            <el-radio :label="0">1-模版一</el-radio>
            <el-radio :label="1">2-模版二</el-radio>
            <el-radio :label="2">3-模版三</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="生效服务器" prop="gameIds">
          <el-input v-model="ruleForm.gameIds" placeholder="0代表全服，支持数组，格式：1,2,3..."/>
        </el-form-item>
        <el-form-item label="排除服务器" prop="noGameIds">
          <el-input v-model="ruleForm.noGameIds" placeholder="支持数组，格式：1,2,3..."/>
        </el-form-item>
        <el-form-item label="是否开启" prop="isOpen">
          <el-radio-group v-model="ruleForm.isOpen">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动展示时间">
          <el-col :span="11">
            <el-form-item prop="tipsTime">
              <el-date-picker v-model="ruleForm.tipsTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="选择预告时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col class="text-center" :span="2" style="text-align: center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="stayTime">
              <el-date-picker v-model="ruleForm.stayTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="选择停留时间" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="活动生效时间" required>
          <el-col :span="11">
            <el-form-item prop="startTime">
              <el-date-picker v-model="ruleForm.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="选择开启时间" style="width: 100%" :change="onStartTimeChange(ruleForm.startTime)"/>
            </el-form-item>
          </el-col>
          <el-col class="text-center" :span="2" style="text-align: center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="endTime">
              <el-date-picker v-model="ruleForm.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="选择结束时间" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="循环模版列表" prop="lpActTemList" v-show="isLoopShow">
          <el-input v-model="ruleForm.lpActTemList" placeholder="循环活动列表，和循环间隔天数长度一致，格式：1,2..." />
        </el-form-item>
        <el-form-item label="循环间隔天数" prop="lpActInterval" v-show="isLoopShow">
          <el-input v-model="ruleForm.lpActInterval" placeholder="循环间隔天数，和循环模版列表长度一致，格式：7,7..." />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="importVisible" :title='title' width="70%" @close="importClose">
      <PageWrapLayout class="m-upload-excel">
        <el-upload style="width: 100%" ref="upload" class="upload-demo" drag action="/" :before-upload="beforeUploadAction" type="file"
          accept=".xlsx, .xls" :limit="1" :on-remove="handleRemove">
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text"> 拖拽上传 <em>或者点击上传 Excel</em> </div>
        </el-upload>
        <div>
          <el-table :data="tableData" border highlight-current-row style="width: 100%; margin-top: 20px">
            <el-table-column v-for="item of tableHeader" :prop="item.value" :label="item.label" :key="item">
            </el-table-column>
          </el-table>
        </div>
      </PageWrapLayout>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="importClose">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>
<script lang="ts" setup name="comprehensive">
import { ref, reactive, onMounted, nextTick, onBeforeMount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import activityRuleApi from '@/api/activityRule'
import activityTemplateApi from '@/api/activityTemplate'
import dateUtils from '@/common/dateUtils'

const loading = ref(true)
const appContainer = ref(null)
import PropTable from '@/components/Table/PropTable/index.vue'

// import { ref } from 'vue'

import ExcelJS from 'exceljs'
import { UploadFilled } from '@element-plus/icons-vue'
import type { UploadProps, UploadInstance } from 'element-plus'
import { el } from 'element-plus/es/locale'
// import { ElMessage } from 'element-plus'
const tableData = ref([])
const tableHeader = ref([])
const upload = ref<UploadInstance>()

const tableColumn = ["type","actTemId","gameIds","noGameIds","isOpen",
  "tipsTime","startTime","endTime","stayTime","lpActTemList","lpActInterval"]
const beforeUploadAction = (file, fileLi) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = async (e) => {
      const data = e.target.result
      const workbook = new ExcelJS.Workbook()
      try {
        let res = await workbook.xlsx.load(data)
        const sheets =
          res._worksheets && res._worksheets.filter((item) => typeof item !== 'undefined')
        const table = []
        let headers = []
        sheets.forEach((sheet) => {
          sheet._rows.forEach((row, index) => {
            if (index === 0) {
              row.values.forEach((it, i) => {
                // console.log("string" + it + " " + i + "" + tableColumn[i])
                headers.push({label: it, value: tableColumn[i - 1]})
              })
            } else {
              let obj = {}
              let arr = []
              row.values.forEach((it) => {
                arr.push(it)
              })
              tableColumn.forEach((ite, i) => {
                if (arr[i] == undefined)  {
                  obj[ite] = null
                } else {
                  obj[ite] = String(arr[i])
                }
              })
              table.push(obj)
            }
            // const tableRow = {
            //   position: "",
            //   val: "",
            // };
            // row._cells.forEach((cell) => {
            //   tableRow.position = cell._address;
            //   tableRow.val = cell._value.model.value || "";
            // });
          })
        })
        tableData.value = table
        tableHeader.value = headers
        console.log("table", table)
        console.log("headers", headers)
      } catch (e) {
        ElMessage.error('解析失败')
      }
    }
    reader.readAsArrayBuffer(file)
  })
}

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  tableData.value = null
  tableHeader.value = null
}

const data = ref([])
const templateData = ref([])
const templateOptionData = ref([{
  "value":"number",
  "label":"string"
}])
let currPageNum = 1;
const pageSize = 1000;
onBeforeMount(() => {
  loadActivityTemplateInfo()
  loadActivityRuleInfo()
}) 

const loadActivityTemplateInfo = () => {
  activityTemplateApi.all().then(res => {
    templateData.value = res.data.result;
    for (var i=0; i < templateData.value.length; i++) {
      templateOptionData.value[i].value = templateData.value[i].id
      templateOptionData.value[i].label = templateData.value[i].id +"-"+templateData.value[i].name
    }
    console.log(templateData)
    console.log(templateOptionData)
  })
}

const loadActivityRuleInfo = () => {
  let queryParams = reactive({
    pageNum: currPageNum,
    pageSize: pageSize
  })
  activityRuleApi.query(queryParams).then(res => {
    data.value = res.data.result;
    console.log(data)
  })
}

const column = [
  { type: 'selection', width: 60, fixed: 'left' },
  { name: 'id', label: 'ID', width: 80 },
  { name: 'type', label: '活动类型', slot: true, inSearch: true,   
    options: [
      {
        value: 0,
        label: '限时活动',
      },
      {
        value: 1,
        label: '循环活动',
      },
      {
        value: 2,
        label: '开服活动',
      }
    ],
    valueType: 'select', },
  { name: 'actTemId', label: '活动模版',slot: true, inSearch: true, options:templateOptionData, valueType: 'select' },
  { name: 'gameIds', label: '生效服务器', inSearch: true, valueType: 'input' },
  { name: 'noGameIds', label: '排除服务器'},
  { name: 'isOpen', label: '是否开启', slot: true},
  { name: 'tipsTime', label: '预告时间', slot: true, valueType: 'datetime' },
  { name: 'startTime', label: '开始时间', slot: true, valueType: 'datetime' },
  { name: 'endTime', label: '结束时间', slot: true, valueType: 'datetime' },
  { name: 'stayTime', label: '停留时间', slot: true, valueType: 'datetime' },
  { name: 'lpActTemList', label: '循环模版列表' },
  { name: 'lpActInterval', label: '循环间隔天数' },
  { name: 'state', label: '活动状态', slot: true },
  { name: 'operation', slot: true, fixed: 'right', width: 200, label: '操作' },
]

const getTypeLabel = (val) => {
  if (val == 0) {
    return '限时活动'
  } else if (val == 1) {
    return '循环活动'
  } else if (val == 2) {
    return '开服活动'
  }
}

const getActTemIdLabel = (val) => {
  for (var i=0; i < templateData.value.length; i++) {
    if (templateData.value[i].id == val) {
      return templateData.value[i].id + "-" + templateData.value[i].name
    }
  }
  return val
}

const getIsOpenLabel = (val) => {
  if (val == 0) {
    return '否'
  } else if (val == 1) {
    return '是'
  }
}

const getStateLabel = (val) => {
  // 取得当前时间，单位：秒
  const timestamp: number = Date.parse(new Date().toString());
  if (timestamp < val.tipsTime) {
    return '未激活'
  } else if (timestamp >= val.tipsTime && timestamp <= val.startTime) {
    return '预告中'
  } else if (timestamp >= val.startTime && timestamp <= val.endTime) {
    return '进行中'
  } else if (timestamp >= val.endTime && timestamp <= val.stayTime) {
    return '停留中'
  } else {
    return '已结束'
  }
}

const onTypeChange = (val) => {
  if (val == 1) {
    isLoopShow.value = true
  } else {
    isLoopShow.value = false
  }
}

const onStartTimeChange = (val) => {
  if (val != null && val != "") {
    let startDate = new Date(val)
    for (var i=0; i < templateData.value.length; i++) {
      if (templateData.value[i].id == ruleForm.actTemId) {
        const dayOfMs = 24 * 60 * 60 * 1000;
        let endTimeMs = startDate.getTime() + templateData.value[i].keepDay * dayOfMs
        ruleForm.endTime = dateUtils.getDate(endTimeMs)
        ruleForm.tipsTime = templateData.value[i].tipsDay == null ? val : dateUtils.getDate(startDate.getTime() - templateData.value[i].tipsDay * dayOfMs)
        ruleForm.stayTime = templateData.value[i].stayDay == null ? ruleForm.endTime : dateUtils.getDate(endTimeMs + templateData.value[i].stayDay * dayOfMs)
      }
    }
  }
}

const list = ref(data)

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
  id: null,
  type: 0,
  actTemId: null,
  gameIds: null,
  noGameIds: null,
  isOpen: 0,
  tipsTime: null,
  startTime: null,
  endTime: null,
  stayTime: null,
  lpActTemList: null,                                                       
  lpActInterval: null,
})

const rules = reactive({
  actTemId: [
    {
      required: true,
      message: '请选择活动类型',
      trigger: 'change',
    },
  ],
  gameIds: [
    {
      required: true,
      message: '请填写生效服务器',
      trigger: 'change',
    },
  ],
  startTime: [
    {
      required: true,
      type: 'date',
      message: '请选择活动开始时间',
      trigger: 'change',
    },
  ],
  endTime: [
    {
      required: true,
      type: 'date',
      message: '请选择活动结束时间',
      trigger: 'change',
    },
  ]
})


const dialogVisible = ref(false)
const importVisible = ref(false)

const rowObj = ref({})
const selectObj = ref([])
const title = ref('详情')
const isIdShow = ref(true)
const isLoopShow = ref(true)

const importClose = () => {
  importVisible.value = false
  upload.value!.clearFiles()
  tableData.value = null
  tableHeader.value = null
}

const importByExcel = () => {
  title.value = '导入'
  importVisible.value = true
  tableData.value = null
  tableHeader.value = null
}

const add = () => {
  title.value = '新增'
  isIdShow.value = false
  dialogVisible.value = true
  ruleForm.id = null
  ruleForm.type = 0
  ruleForm.actTemId = null
  ruleForm.gameIds = null
  ruleForm.noGameIds = null
  ruleForm.isOpen = 0
  ruleForm.tipsTime = null
  ruleForm.startTime = null
  ruleForm.endTime = null
  ruleForm.stayTime = null
  ruleForm.lpActTemList = null
  ruleForm.lpActInterval = null
}

const handleConfirm = () => {
  // 验证table数据
  let isValid = true
  tableData.value.forEach((ite) => {
    if (ite["title"].length > 7) {
      isValid = false
      return ElMessage.error("邮件标题长度不能超过7字")
    }
    if (ite["sendName"].length > 10) {
      isValid = false
      return ElMessage.error("发送者名称长度不能超过10字")
    }
    if (ite["content"].length > 3000) {
      isValid = false
      return ElMessage.error("邮件内容长度不能超过3000字")
    }      
  })
  if (isValid) {
    let importParams = reactive({
      importValue: tableData.value
    })
    activityRuleApi.importBatch(importParams).then(res => {
      console.log('result', res)
      if (res.data.code = 200) {
        loadActivityRuleInfo()
        importVisible.value = false
        return ElMessage.success(res.data.msg)
      } else {
        return ElMessage.error(res.data.msg)
      }
    })
    console.log('import submit!')
  }
}

const handleClose = async (done: () => void) => {
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      if (title.value == '新增') {
        activityRuleApi.add(ruleForm).then(res => {
          console.log('result', res)
          if (res.data.code = 200) {
            loadActivityRuleInfo()
            dialogVisible.value = false
            return ElMessage.success(res.data.msg)
          } else {
            return ElMessage.error(res.data.msg)
          }
        })
        console.log('add submit!')
      } else {
        // let updateParams = reactive({
        //   id: rowObj.value.id,
        //   updateValue: ruleForm
        // })
        activityRuleApi.update(ruleForm).then(res => {
          if (res.data.code = 200) {
            // item.state = ruleForm.state
            loadActivityRuleInfo()
            dialogVisible.value = false
            return ElMessage.success('修改成功')
          } else {
            return ElMessage.error('修改失败')
          }
        })
        console.log('update submit!')
      }
      console.log('submit!', ruleForm)
    } else {
      console.log('error submit!', fields)
    }
  })
}

const batchDelete = () => {
  if (!selectObj.value.length) {
    return ElMessage.error('未选中任何行')
  }
  ElMessageBox.confirm('你确定要删除选中项吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  })
    .then(() => {
      let selectActRuleIds = reactive([])
      for (let value of selectObj.value) {
        selectActRuleIds.push(value.id)
      }
      let deleteParams = reactive({
        actRuleIds: selectActRuleIds
      })
      activityRuleApi.deleteBatch(deleteParams).then(res => {
        loadActivityRuleInfo()
        ElMessage.success('批量删除成功')
      })

      list.value = list.value.concat([])
    })
    .catch(() => { })
}


const selectionChange = (val) => {
  selectObj.value = val
}

const edit = (row) => {
  title.value = '详情'
  isIdShow.value = true
  rowObj.value = row
  dialogVisible.value = true
  ruleForm.id = row.id
  ruleForm.type = row.type
  ruleForm.actTemId = row.actTemId
  ruleForm.gameIds = row.gameIds.toString()
  ruleForm.noGameIds = row.noGameIds == null ? row.noGameIds : row.noGameIds.toString()
  ruleForm.isOpen = row.isOpen
  ruleForm.tipsTime = dateUtils.getDate(row.tipsTime)
  ruleForm.startTime = dateUtils.getDate(row.startTime)
  ruleForm.endTime = dateUtils.getDate(row.endTime)
  ruleForm.stayTime = dateUtils.getDate(row.stayTime)
  ruleForm.lpActTemList = row.lpActTemList == null ? row.lpActTemList : row.lpActTemList.toString()
  ruleForm.lpActInterval = row.lpActInterval == null ? row.lpActInterval : row.lpActInterval.toString()
  console.log(ruleForm)
}

const del = (row) => {
  console.log('row==', row)
  ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  })
    .then(() => {
      let deleteParams = reactive({
        id: row.id
      })
      activityRuleApi.delete(deleteParams).then(res => {
        loadActivityRuleInfo()
        ElMessage.success('删除成功')
      })
      loading.value = true
      setTimeout(() => {
        loading.value = false
      }, 500)
    })
    .catch(() => { })
}

const reset = () => {
  loadActivityRuleInfo()
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
  ElMessage.success('重置成功')
}

const onSubmit = (val) => {
  if (val.type == null && val.actTemId == null && (val.gameIds == null || val.gameIds == "")) {
    ElMessage.warning('请输入查询条件')
    return
  }
  let queryParams = reactive({
    pageNum: 1,
    pageSize: pageSize,
    condition: val
  })
  activityRuleApi.query(queryParams).then(res => {
    data.value = res.data.result;
    console.log(data.value)
  })
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
}

const getHeight = () => {

}

onMounted(() => {
  nextTick(() => {
    // let data = appContainer.value.
  })
  setTimeout(() => {
    loading.value = false
  }, 500)
})
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}

.app-container {
  flex: 1;
  display: flex;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}

.m-upload-excel {
  .el-upload {
    width: 100%;
  }

  .el-upload-dragger {
    width: 100%;
  }
}
</style>