ads_web/src/views/system/dept/components/DeptUserCom/component/deptDialog.vue

<script lang="ts" setup>/**
 * @Name: deptDialog.vue
 * @Description: 部门权限管理-弹窗
 * @Author: xinyan
 */
import { ref } from 'vue';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { Close, Finished } from '@element-plus/icons-vue';
import { createRole, getDeptUser, getRoleList } from '../api';


const props = defineProps({
  deptId: Object,
  // deptInfo: Object
});

const { deptId } = props;
const createOpen = defineModel({ default: false });
const deptInfo = ref({});
const usersOptions = ref([]);

interface RuleForm {
  dept_role: string[]; // 确保这里的类型匹配
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  // name: '',
  dept_role: [],
});

const rules = reactive<FormRules<RuleForm>>({
  dept_role: [
    { required: true, message: '请选择部门角色', trigger: 'change' }
  ]
});

async function getList() {
  const res = await getDeptUser({ id: deptId });
  deptInfo.value = res.data;
  if (deptInfo.value.length > 0) {
    ruleForm.dept_role = deptInfo.value[0].dept_role || []; // 赋值
  }
}

async function fetchRoleList() {
  try {
    const resp = await getRoleList({ id: deptId });
    usersOptions.value = resp.data.map((item: any) => {
      return { value: item.id, label: item.name };
    });
  } catch (error) {
    console.log(error);
  }
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const body = {
        deptId: deptId,
        roleIdList: ruleForm.dept_role,
      };
      const res = await createRole(body);
      if (res.code === 2000) {
        ElMessage.success('更新成功');
        createOpen.value = false;
      }
    } else {
      // createOpen.value = false;
      ElMessage.error('创建失败，请检查表单');
    }
  });
};

function cancelDialog() {
  createOpen.value = false;
}

onMounted(() => {
  getList();
  fetchRoleList();
});

</script>

<template>
  <el-dialog ref="createDialog" v-model="createOpen" :close-on-click-modal="false" :close-on-press-escape="false"
             :title="`部门权限`" style="width: 30%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="mx-2.5 mt-5" label-width="auto" status-icon>
      <el-form-item class="font-medium" label="部门名称:" prop="name">
        <span>{{ deptInfo[0]?.name || '' }}</span>
      </el-form-item>
      <el-form-item class="font-medium" label="部门角色:" prop="dept_role">
        <el-select v-model="ruleForm.dept_role" clearable multiple>
          <el-option
              v-for="item in usersOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button :icon="Close" @click="cancelDialog">取 消</el-button>
      <el-button :icon="Finished" :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>