ss-crm-manage-web/src/views/Basic/Role/Comp/ReportDaily.vue

<template>
  <div class="pl-20px pr-20px">
    <el-form :model="form" ref="formRef" :rules="rules" label-width="auto" v-loading="formLoading">
      <el-form-item label="开启通知">
        <el-radio-group v-model="form.status">
          <el-radio :label="1"> 开启 </el-radio>
          <el-radio :label="0"> 关闭 </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="发送途径">
        <el-checkbox-group v-model="form.sendType">
          <el-checkbox v-for="(item, index) in sendTypeOptions" :key="index" :label="item.value">
            {{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="发送时间">
        <el-time-picker
          v-model="form.sendTime"
          placeholder="任意时间点"
          format="HH:mm"
          value-format="HH:mm"
        />
      </el-form-item>
      <el-form-item label="发送内容">
        <el-tree
          ref="treeRef"
          :data="contentOptions"
          :props="defaultProps"
          empty-text="加载中，请稍候"
          node-key="id"
          show-checkbox
          default-expand-all
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item>
        <el-button :disabled="formLoading" type="primary" @click="submitForm"> 保 存 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup name="ReportDaily">
import * as DaliyReportApi from '@/api/system/role/daliyReport'
import { defaultProps, handleTree } from '@/utils/tree'
import { getGeneralSysDictData } from '@/api/system/dict/dict.data'

const message = useMessage() // 消息弹窗
const props = defineProps({
  roleId: {
    type: Number
  }
})

const formLoading = ref(false)
const form = ref({
  sendItem: []
})

watch(
  () => props.roleId,
  () => {
    getReportInfo()
  }
)

onMounted(() => {
  init()
})

const formRef = ref()

const rules = {}

const contentOptions = ref([])

async function init() {
  getOptions()
  getReportInfo()
}

const sendTypeOptions = ref([])
const treeRef = ref()
function getOptions() {
  getGeneralSysDictData('message_send_type').then((data) => {
    sendTypeOptions.value = data
  })
  DaliyReportApi.getDaliyReportContent().then((data) => {
    contentOptions.value = handleTree(data)
  })
}

async function getReportInfo() {
  try {
    formLoading.value = true
    const data = await DaliyReportApi.getRoleDaliyReport(props.roleId)
    form.value = { ...data }

    if (!form.value.sendType) {
      form.value.sendType = []
    }

    if (!form.value.sendTime) {
      form.value.sendTime = '22:00'
    }

    if (!form.value.sendItem) {
      form.value.sendItem = []
    }
    treeRef.value.setCheckedKeys([], false)
    // 设置选中
    form.value.sendItem.forEach((menuId) => {
      treeRef.value.setChecked(menuId, true, false)
    })
    formLoading.value = false
  } catch (error) {
    console.log(error)
    formLoading.value = false
  }
}

/** 提交表单 */
const submitForm = async () => {
  // 提交请求
  formLoading.value = true
  try {
    const data = {
      id: form.value.id,
      roleId: props.roleId,
      sendType: form.value.sendType,
      sendTime: form.value.sendTime,
      status: form.value.status,
      sendItem: [
        ...treeRef.value.getCheckedKeys(false), // 获得当前选中节点
        ...treeRef.value.getHalfCheckedKeys() // 获得半选中的父节点
      ]
    }
    await DaliyReportApi.updateRoleDaliyReport(data)
    message.success('保存成功')
    getReportInfo()
  } finally {
    formLoading.value = false
  }
}
</script>

<style lang="scss" scoped></style>