修改作业等级名称

马宇豪

2025-03-04 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c

 src/views/system/role/component/roleDialog.vue

@@ -1,151 +1,162 @@
<template>
   <div class="system-add-role-container">
      <el-dialog :title="title" v-model="isShowRoleDialog" width="769px">
         <el-form :model="roleForm" size="default" label-width="90px">
            <el-row :gutter="35">
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                  <el-form-item label="角色名称">
                     <el-input v-model="roleForm.name" placeholder="请输入角色名称" clearable></el-input>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                  <el-form-item label="角色标识">
                     <el-input v-model="roleForm.code" placeholder="请输入角色标识" clearable></el-input>
                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                  <el-form-item label="角色描述">
                     <el-input v-model="roleForm.info" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <template #footer>
            <span class="dialog-footer">
               <el-button @click="isShowRoleDialog = !isShowRoleDialog" size="default">取 消</el-button>
               <el-button type="primary"  @click="onSubmit" size="default">{{ buttonName }}</el-button>
            </span>
         </template>
      </el-dialog>
   </div>
    <div class="system-add-role-container">
        <el-dialog :title="title" v-model="isShowRoleDialog" width="769px">
            <el-form :model="roleForm" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="角色名称">
                            <el-input v-model="roleForm.roleName" placeholder="请输入角色名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="角色标识">
                            <el-input v-model="roleForm.roleCode" placeholder="请输入角色标识" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="角色描述">
                            <el-input v-model="roleForm.roleInfo" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowRoleDialog = !isShowRoleDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="onSubmit" v-throttle size="default">{{ buttonName }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { ElMessage } from 'element-plus';
import { reactive, toRefs, defineComponent } from 'vue';
import {departmentApi} from "/@/api/department";
import {useRoleApi} from "/@/api/role";
import { useRoleApi } from '/@/api/systemManage/role';

// 定义接口来定义对象的类型
interface MenuDataTree {
   id: number;
   label: string;
   children?: MenuDataTree[];
    id: number;
    label: string;
    children?: MenuDataTree[];
}
interface RoleState {
   title:string,
   buttonName:string,
   isShowRoleDialog: boolean;
   roleForm: {
      name: string;
      code: string;
      info: string;
   };
   menuData: Array<MenuDataTree>;
   menuProps: {
      children: string;
      label: string;
   };
    title: string;
    buttonName: string;
    isShowRoleDialog: boolean;
    roleForm: {
      defaultFlag: number | null
        roleName: string;
        roleCode: string;
        roleInfo: string;
      specialWorkFlag: number | null
    };
    menuData: Array<MenuDataTree>;
    menuProps: {
        children: string;
        label: string;
    };
}

export default defineComponent({
   name: 'systemAddRole',
   setup(prop,context) {
      const state = reactive<RoleState>({
         isShowRoleDialog: false,
         title:'',
         buttonName:'',
         roleForm: {
            name: '', // 角色名称
            code: '', // 角色标识
            info: '', // 排序
         },
         menuData: [],
         menuProps: {
            children: 'children',
            label: 'label',
         },
      });
      // 打开弹窗
      const openDialog = (type: string, value: any) => {
         state.isShowRoleDialog = true;
         if(type === '新增'){
            state.title = '新增角色'
            state.buttonName = '新增'
            state.roleForm = {
               name:'',
               code:'',
               info:'',
            }
         }else{
            state.title = '修改角色'
            state.buttonName = '修改'
            state.roleForm = JSON.parse(JSON.stringify(value))
         }
      };
      // 新增
      const onSubmit = async () => {
         if(state.title === '新增角色'){
            let res = await useRoleApi().addRole(state.roleForm)
            if(res.data.code === '200'){
               ElMessage({
                  type:'success',
                  message:'角色新增成功',
                  duration:2000
               })
               state.isShowRoleDialog = false
               context.emit('refreshRoleList')
            }else{
               ElMessage({
                  type:'warning',
                  message:res.data.msg
               })
            }
         }else{
            let res = await useRoleApi().modRole(state.roleForm)
            if(res.data.code === '200'){
               ElMessage({
                  type:'success',
                  message:'角色修改成功',
                  duration:2000
               })
               state.isShowRoleDialog = false
               context.emit('refreshRoleList')
            }else{
               ElMessage({
                  type:'warning',
                  message:res.data.msg
               })
            }
         }
      };
      // 获取菜单结构数据
      return {
         onSubmit,
         openDialog,
         ...toRefs(state),
      };
   },
    name: 'systemAddRole',
    setup(prop, context) {
        const state = reactive<RoleState>({
            isShowRoleDialog: false,
            title: '',
            buttonName: '',
            roleForm: {
                defaultFlag: 0,
                roleName: '', // 角色名称
                roleCode: '', // 角色标识
                roleInfo: '', // 排序
              specialWorkFlag: 0
            },
            menuData: [],
            menuProps: {
                children: 'children',
                label: 'label'
            }
        });
        // 打开弹窗
        const openDialog = (type: string, value: any) => {
            state.isShowRoleDialog = true;
            if (type === '新增') {
                state.title = '新增角色';
                state.buttonName = '新增';
                state.roleForm = {
                  defaultFlag: 0,
                    roleName: '',
                    roleCode: '',
                    roleInfo: '',
                  specialWorkFlag: 0
                };
            } else {
                state.title = '修改角色';
                state.buttonName = '修改';
                state.roleForm = JSON.parse(JSON.stringify(value));
                if(!state.roleForm.defaultFlag){
                  state.roleForm.defaultFlag = 0
                }
              if(!state.roleForm.specialWorkFlag){
                state.roleForm.specialWorkFlag = 0
              }
            }
        };
        // 新增
        const onSubmit = async () => {
            if (state.title === '新增角色') {
                let res = await useRoleApi().addRole(state.roleForm);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: '角色新增成功',
                        duration: 2000
                    });
                    state.isShowRoleDialog = false;
                    context.emit('refreshRoleList');
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            } else {
                let res = await useRoleApi().modRole(state.roleForm);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: '角色修改成功',
                        duration: 2000
                    });
                    state.isShowRoleDialog = false;
                    context.emit('refreshRoleList');
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            }
        };
        // 获取菜单结构数据
        return {
            onSubmit,
            openDialog,
            ...toRefs(state)
        };
    }
});
</script>

<style scoped lang="scss">
.system-add-role-container {
   .menu-data-tree {
      width: 100%;
      border: 1px solid var(--el-border-color);
      border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
      padding: 5px;
   }
    .menu-data-tree {
        width: 100%;
        border: 1px solid var(--el-border-color);
        border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
        padding: 5px;
    }
}
</style>