tenant-Platform/src/views/marketingManagement/configurate.vue

<template>
  <div class="configurate">
    <div class="steps">
      <el-steps style="width: 800px" :active="active" finish-status="success" simple>
        <el-step title="配置基本信息" />
        <el-step title="配置奖品" />
        <el-step title="配置完成" />
      </el-steps>
    </div>
    <div class="content" v-if="active===0">
      <el-row :gutter="20" style="height: 100%">
        <el-col :span="4" class="image">
          <img v-if="basicForm.actMethod=='2'" src="@/assets/images/zhuanpan.png" />
          <img v-else src="@/assets/images/jiugongge.png" />
        </el-col>
        <el-col :span="20">
          <el-descriptions title="基本信息">
            <el-descriptions-item>
              <el-form ref="BasicFormRef" :model="basicForm" :rules="basicRules">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="活动名称" prop="actName">
                      <el-input v-model="basicForm.actName" placeholder="输入活动名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="抽奖方式" prop="actMethod">
                      <el-radio-group v-model="basicForm.actMethod">
                        <el-radio-button label="大转盘" value="2"></el-radio-button>
                        <el-radio-button label="九宫格" value="1"></el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="开始时间" prop="actStartTime">
                      <el-date-picker
                        v-model="basicForm.actStartTime"
                        type="date"
                        placeholder="请选择"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        :disabled-date="disabledDateStart"
                        style="width: 100%"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="结束时间" prop="actEndTime">
                      <el-date-picker
                        v-model="basicForm.actEndTime"
                        type="date"
                        placeholder="请选择"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        :disabled-date="disabledDateEnd"
                        style="width: 100%"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="所属机构" prop="actDept">
                      <el-cascader
                        clearable
                        v-model="basicForm.actDept"
                        :options="option"
                        :props="cascaderProps"
                        style="width: 100%"
                        placeholder="选择机构"
                        filterable
                      ></el-cascader>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-descriptions-item>
          </el-descriptions>
          <el-divider />
          <el-descriptions title="参与限制">
            <el-descriptions-item>
              <div>
                <a>参与机构</a>&nbsp;&nbsp;&nbsp;
                <el-button link type="primary" @click="selectDeptData">
                  选择
                </el-button>
              </div>
              <el-table
                :data="deptData"
                height="330"
              >
                <el-table-column label="机构" prop="name"></el-table-column>
                <el-table-column label="操作" width="150">
                  <template #default="scope">
                    <el-button link type="primary" @click="deleteDeptData(scope)">
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-descriptions-item>
          </el-descriptions>
          <div class="btns">
            <el-button plain @click="cancelFirst(BasicFormRef)">取消</el-button>
            <el-button type="primary" @click="confirmFirst(BasicFormRef)">下一步</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content" v-if="active===1">
      <el-row :gutter="20" style="height: 100%">
        <el-col :span="4" class="image">
          <img v-if="basicForm.actMethod=='2'" src="@/assets/images/zhuanpan.png" />
          <img v-else src="@/assets/images/jiugongge.png" />
        </el-col>
        <el-col :span="20">
          <el-descriptions title="奖品配置" style="height: 650px;">
            <el-descriptions-item>
              <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane v-for="(item, index) in gifts" :label="item.tab.label" :name="item.tab.name" :key="index">
                  <el-form :model="item.form" label-width="70">
                    <el-form-item label="奖品分类" prop="type">
                      <el-radio-group v-model="item.form.awardType">
                        <el-radio value="1">现金</el-radio>
                        <el-radio value="2">增值</el-radio>
                      </el-radio-group>
                      <div v-if="item.form.awardType=='1'" style="display: flex; align-items: center; margin-left: 20px;">
                        <span>面值类型：</span>
                        <el-select v-model="item.form.awardCashType" style="width: 150px;">
                          <el-option label="固定面值" value="1"></el-option>
                          <el-option label="区间面值" value="2"></el-option>
                        </el-select>
                      </div>
                    </el-form-item>
                    <el-form-item label="奖品名称" prop="name">
                      <el-input v-model="item.form.awardName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="现金面值" prop="money" v-if="item.form.awardType=='1'">
                      <el-input v-if="item.form.awardCashType == '1'" v-model="item.form.awardFixedAmount" placeholder="请输入"></el-input>
                      <div v-else style="display: flex; align-items: center">
                        <el-input v-model="item.form.awardMinAmount" placeholder="请输入"></el-input>
                        &nbsp;至&nbsp;
                        <el-input v-model="item.form.awardMaxAmount" placeholder="请输入"></el-input>
                      </div>
                    </el-form-item>
                    <el-form-item label="奖品图" prop="image">
                      <el-upload v-if="item.form.imageUrl" style="display: inline" :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, item)">
                        <img class="imageUrl" :src="item.form.imageUrl" />
                      </el-upload>
                      <el-upload v-else style="display: inline" :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, item)">
                        <el-icon class="btn-icon"><Plus /></el-icon>
                      </el-upload>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
              </el-tabs>
            </el-descriptions-item>
          </el-descriptions>
          <div class="btns">
            <el-button plain @click="cancelSecond">取消</el-button>
            <el-button type="primary" @click="confirmSecond(BasicFormRef)">下一步</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content" v-if="active===2 || active===3">
      <div class="result">
        <el-result
          icon="success"
          title="奖品配置完成！"
        >
          <template #extra>
            <el-button type="primary" @click="back">返回</el-button>
          </template>
        </el-result>
      </div>
    </div>
    <el-dialog
      v-model="selectDeptShow"
      title="参与机构选择"
      width="600"
    >
      <el-input
        v-model="filterText"
        style="width: 240px"
        placeholder="输入名称"
        :prefix-icon="Search"
      />
      <el-tree
        ref="treeRef"
        class="filter-tree"
        show-checkbox
        node-key="id"
        :data="option"
        :props="defaultProps"
        :check-strictly="true"
        :default-expand-all="true"
        :filter-node-method="filterNode"
        @check="getCheckedNodes"
      />
      <template #footer>
        <el-button plain @click="cancelCheckDept">取消</el-button>
        <el-button type="primary" @click="confirmCheckDept">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { FormRules, FormInstance, ElTree } from "element-plus";
import { Search } from '@element-plus/icons-vue'
import api from '@/api'
import {ElMessage, ElMessageBox} from "element-plus";
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

let active = ref(0)

const BasicFormRef = ref<FormInstance>()

let basicForm = ref({
  deptIds: [],
  actMethod: '2'
})
const basicRules = ref<FormRules>({
  actName: [
    { required: true, trigger: "blur", message: "请填写活动名称" }
  ],
  actMethod: [
    { required: true, trigger: "change", message: "请选择抽奖方式" }
  ],
  actStartTime: [
    { required: true, trigger: "blur", message: "请选择开始时间" }
  ],
  actEndTime: [
    { required: true, trigger: "blur", message: "请选择结束时间" }
  ],
  actDept: [
    { required: true, trigger: "change", message: "请选择所属机构" }
  ]
})

const disabledDateStart = (time: Date) => {
  return time.getTime() < Date.now() - 8.64e7
}
const disabledDateEnd = (time: Date) => {
  return time.getTime() < new Date(basicForm.value.actStartTime) - 8.64e7
}

let deptData = ref([])

let activeName = ref('1')
let gifts = ref([
  {
    tab: {
      label: '奖品1',
      name: '1'
    },
    form: {
      awardType: '1',
      awardCashType: '1'
    }
  },{
    tab: {
      label: '奖品2',
      name: '2'
    },
    form: {
      awardType: '1',
      awardCashType: '1'
    }
  }
])

const handleClick = (tab, event) => {

}
// 机构
let option = ref([])
const cascaderProps = {
  value: 'id',
  label: 'name',
  children: 'children',
  checkStrictly: true,
}
const institutionList = () => {
  api.institutionApi.institutionList({ name: '', system: '' }).then(res => {
    if(res?.code == 200) {
      option.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 第一步取消
const cancelFirst = (BasicFormRef: FormInstance) => {
  router.push({
    path: '/marketingManagement/lottery'
  })
}
const confirmFirst = async (BasicFormRef: FormInstance) => {
  if(!BasicFormRef) {
    BasicFormRef.resetFields()
    return
  }
  await BasicFormRef.validate((valid) => {
    if(valid) {
      if(basicForm.value.deptIds.length>0) {
        api.lotteryApi.checkActivityDept({
          deptIds: basicForm.value.deptIds
        }).then(res => {
          if(res.code == 200) {
            if(res.data == '1') {
              ElMessageBox({
                title: '提示',
                message: '选择的参与机构存在有效的抽奖活动，发布后新的抽奖活动将覆盖机构的抽奖活动，请确认是否继续发布',
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: '继续发布',
                cancelButtonText: '取消',
              }).then((  action ) => {
                if(action === 'confirm') {
                  active.value = 1
                } else {
                  active.value = 0
                }
              })
            } else {
              active.value = 1
            }
          } else {
            ElMessage({
              message: res.msg,
              type: 'warning'
            })
          }
        })
      } else {
        ElMessage({
          message: '请勾选参与机构！',
          type: 'warning'
        })
      }
    } else {
      ElMessage({
        message: '请正确填写相关信息！',
        type: 'warning'
      })
    }
  })
}

const uploadImage = async (file, item) => {
  let files = file.raw
  const params = new FormData(); // 声明formData数据类型
  params.append("file", files);
  params.append("type", "image");
  const { code, data, msg } = await api.commonApi.fileUpload(params)
  if(code == 200) {
    item.form.awardImg = data.id
    item.form.imageUrl = data.downloadUrl
  }
}

const cancelSecond = () => {
  active.value = 0
}
const confirmSecond = (BasicFormRef: FormInstance) => {
    console.log(123123213, basicForm.value)
  let awardList = gifts.value.map((item) => {
    if(item.form.awardCashType == '1') {
      return {
        awardId: item.form.id?item.form.id:null,
        awardType: item.form.awardType,
        awardCashType: item.form.awardCashType,
        awardName: item.form.awardName,
        awardFixedAmount: item.form.awardFixedAmount,
        awardImg: item.form.awardImg,
      }
    } else {
      return {
        awardId: item.form.id?item.form.id:null,
        awardType: item.form.awardType,
        awardCashType: item.form.awardCashType,
        awardName: item.form.awardName,
        awardMinAmount: item.form.awardMinAmount,
        awardMaxAmount: item.form.awardMaxAmount,
        awardImg: item.form.awardImg,
      }
    }
  })
  let formData = {...basicForm.value}
  if(typeof basicForm.value.actDept != 'string') {
    formData.actDept = basicForm.value.actDept[basicForm.value.actDept.length-1]
  }
  formData.awardList = awardList
  if(route.query.id) {
    api.lotteryApi.updateActivity(formData).then(res => {
      if(res.code == 200) {
        ElMessage({
          message: res.msg,
          type: 'success'
        })
        active.value = 3
      } else {
        ElMessage({
          message: res.msg,
          type: 'warning'
        })
      }
    })
  } else {
    api.lotteryApi.addActivity(formData).then(res => {
      if(res.code == 200) {
        ElMessage({
          message: res.msg,
          type: 'success'
        })
        active.value = 3
      } else {
        ElMessage({
          message: res.msg,
          type: 'warning'
        })
      }
      BasicFormRef.resetFields()
    })
  }
  // api.lotteryApi.addActivityAward({
  //   awardList: awardList,
  //   activityId: activityId.value
  // }).then(res => {
  //   if(res.code == 200) {
  //     ElMessage({
  //       message: res.msg,
  //       type: 'success'
  //     })
  //     active.value = 3
  //   } else {
  //     ElMessage({
  //       message: res.msg,
  //       type: 'warning'
  //     })
  //   }
  // })
}

// 回显相关数据
let editData = ref(null)
let checkedDeptIds = ref([])
let checkedDeptData = ref([])

const initEdit = (id) => {
  api.lotteryApi.getActivity({ id: id }).then(res => {
    if(res.code == 200) {
      editData.value = {...res.data}
      basicForm.value = {...editData.value}
      checkedDeptIds.value = res.data.deptIds
      checkedDeptData.value = res.data.deptData
      deptData.value = checkedDeptData.value
      if(res.data.awardList&&res.data.awardList.length>0) {
        gifts.value.forEach((item, index) => {
          item.form = res.data.awardList[index]
        })
      }
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 参与机构数选择弹框
let selectDeptShow = ref(false)
let filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
const defaultProps = {
  children: 'children',
  label: 'name',
}
watch(filterText, (val) => {
  treeRef.value!.filter(val)
})
const selectDeptData = () => {
  selectDeptShow.value = true
  nextTick(() => {
    treeRef.value!.setCheckedKeys([...basicForm.value.deptIds], true)
  })
}
const deleteDeptData = (scope) => {
  ElMessageBox({
    title: '删除机构',
    message: '确定要删除该机构吗？',
    type: 'warning',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(( action ) => {
    if(action === 'confirm') {
      let arr = deptData.value.filter(item => item.id != scope.row.id)
      let brr = basicForm.value.deptIds.filter(item => item != scope.row.id)
      checkedDeptData.value = [...arr]
      checkedDeptIds.value = [...brr]
      basicForm.value.deptIds = [...checkedDeptIds.value]
      deptData.value = [...checkedDeptData.value]
    }
  }).catch(( action ) => {

  })
}
const filterNode = (value: string, data: any) => {
  if (!value) return true
  return data.name.includes(value)
}
const getCheckedNodes = (a, b) => {
  checkedDeptIds.value = [...b.checkedKeys]
  checkedDeptData.value = [...b.checkedNodes]
}

const cancelCheckDept = () => {
  selectDeptShow.value = false
  checkedDeptIds.value = [...basicForm.value.deptIds]
  checkedDeptData.value = [...deptData.value]
  // if(route.query.id) {
  //   selectDeptShow.value = false
  //   checkedDeptIds.value = [...basicForm.value.deptIds]
  //   checkedDeptData.value = [...deptData.value]
  // } else {
  //   checkedDeptIds.value = []
  //   checkedDeptData.value = []
  //   basicForm.value.deptIds = []
  //   deptData.value = []
  // }
}
const confirmCheckDept = () => {
  selectDeptShow.value = false
  basicForm.value.deptIds = [...checkedDeptIds.value]
  deptData.value = [...checkedDeptData.value]
}

const back = () => {
  router.push({
    path: '/marketingManagement/lottery'
  })
}

onMounted(() => {
  institutionList()
  if(route.query.id) {
    initEdit(route.query.id)
  }
})

</script>

<style scoped lang="scss">
.configurate{
  width: calc(100% - 40px);
  margin: 20px;
  background: white;
  .steps{
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
  }
  .content{
    height: 688px;
    .image{
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        width: calc(100% - 20px);
        height: 70%;
      }
    }
    .btns{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .imageUrl{
      width: 100px;
      height: 100px;
      border-radius: 5px;
    }
    .btn-icon{
      border: 1px solid #ccc;
      width: 100px;
      height: 100px;
      font-size: 30px;
      color: #ccc;
      border-radius: 5px;
    }
    .result{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  :deep(.el-steps--simple) {
    background: none;
  }
  :deep(.el-step__head.is-success) {
    color: #00a0f4;
    border-color: #00a0f4;
  }
  :deep(.el-step__title.is-success) {
    color: #00a0f4;
  }
}
</style>