zhuangxiuAdmin/src/views/Goods/list/components/BatchSet.vue

<script setup lang="tsx">
import { PropType, ref } from 'vue'
import {
  ElTabs,
  ElTabPane,
  ElSelect,
  ElOption,
  ElDivider,
  ElRadioGroup,
  ElRadio,
  ElMessage
} from 'element-plus'
import { Dialog } from '@/components/Dialog'
import { setGroup } from '@/api/user'

const modelValue = defineModel({ type: Boolean, default: false })
const props = defineProps({
  selectList: {
    type: Array as PropType<any[]>,
    default: () => []
  },
  where: {
    type: Object,
    default: () => {
      return {}
    }
  },
  groupList: {
    type: Array as PropType<any[]>,
    default: () => undefined
  }
})
const setType = ref('action')
const saveLoading = ref(false)
const group_id = ref()
const save = async () => {
  saveLoading.value = true
  const re = await setGroup({
    group_id: group_id.value,
    uids: props.selectList
      .map((e) => {
        return e.uid
      })
      .join(','),
    all: setType.value == 'all' ? 1 : 0,
    where: props.where
  })
  saveLoading.value = false
  if (re && re.status == 200) {
    modelValue.value = false
    ElMessage.success('设置成功')
    emit('confirm')
  }
}
const emit = defineEmits(['confirm'])
</script>

<template>
  <Dialog v-model="modelValue" max-height="200px" title="批量设置" width="700px">
    <el-tabs tab-position="left" class="h-[200px]">
      <el-tab-pane label="设置用户分组">
        <ElDivider content-position="left">用户分组</ElDivider>
        <ElSelect v-model="group_id" placeholder="请选择分组" style="width: 100%">
          <ElOption
            v-for="item in groupList"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </ElSelect>
        <ElDivider content-position="left">设置方式</ElDivider>
        <ElRadioGroup v-model="setType" style="width: 100%">
          <ElRadio value="action">当前页面</ElRadio>
          <ElRadio value="all">全部页面</ElRadio>
        </ElRadioGroup>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <BaseButton type="primary" :loading="saveLoading" @click="save"> 保存 </BaseButton>
      <BaseButton @click="modelValue = false">关闭</BaseButton>
    </template>
  </Dialog>
</template>