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.kaiqitongzhi">
          <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.fasongtujing">
          <el-checkbox :label="1">系统通知</el-checkbox>
          <el-checkbox :label="2">微信公众号</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="发送时间">
        <el-time-picker
          v-model="form.sendTime"
          placeholder="任意时间点"
          format="HH:mm:ss"
          value-format="HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="发送内容">
        <el-tree
          ref="treeRef"
          :data="contentOptions"
          empty-text="加载中，请稍候"
          node-key="value"
          show-checkbox
          default-expand-all
          :default-checked-keys="form.sendContent"
          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 { handleTree } from '@/utils/tree'

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

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

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

const formRef = ref()

const rules = {}

const contentOptions = ref([])

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

const treeRef = ref()
function getOptions() {
  const arr = [
    {
      value: 1,
      label: '销售快报',
      children: [
        { value: 11, label: '今日跟进线索数', pId: 1 },
        { value: 12, label: '今日待跟进数', pId: 1 },
        { value: 13, label: '今日接受线索数', pId: 1 }
      ]
    },

    {
      value: 2,
      label: '管理快报',
      children: [
        { value: 21, label: '当日业绩（成交数，成交额）', pId: 2 },
        { value: 22, label: '当月业绩（成交数，成交额）', pId: 2 },
        { value: 23, label: '本月业绩完成情况（数值，比例）', pId: 2 }
      ]
    }
  ]

  contentOptions.value = arr
  handleTree(arr)
}

async function getReportInfo() {
  try {
    formLoading.value = true
    form.value = {
      kaiqitongzhi: 1,
      fasongtujing: [1, 2],
      sendTime: '21:00:00',
      sendContent: [21, 22, 23]
    }
    formLoading.value = false
  } catch (error) {
    console.log(error)
    formLoading.value = false
  }
}

/** 提交表单 */
const submitForm = async () => {
  // 提交请求
  formLoading.value = true
  try {
    const data = {
      roleId: props.roleId,
      menuIds: [
        ...treeRef.value.getCheckedKeys(false), // 获得当前选中节点
        ...treeRef.value.getHalfCheckedKeys() // 获得半选中的父节点
      ]
    }
    // await PermissionApi.assignRoleMenu(data)
    console.log(data)

    message.success('保存成功')
  } finally {
    formLoading.value = false
  }
}
</script>

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