|
|
@@ -1,214 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="system-user-edit-container">
|
|
|
- <el-dialog v-model="state.isShowDialog" width="769px" draggable title="修改用户">
|
|
|
- <el-form :model="state.ruleForm" label-width="90px" ref="ruleFormRef">
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <el-divider content-position="left"><b class="formTitle">基本信息</b></el-divider>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
|
|
|
- <el-input v-model="state.ruleForm.name" placeholder="请输入姓名" clearable></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="账号" prop="userName" :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]">
|
|
|
- <el-input v-model="state.ruleForm.userName" disabled placeholder="请输入账号" clearable> </el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="电话号码" prop="phoneNo" :rules="[{ required: false, message: '请输入电话号码', trigger: 'blur' }]">
|
|
|
- <el-input v-model="state.ruleForm.phoneNo" placeholder="请输入电话号码" clearable></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="性别" prop="gender" :rules="[{ required: false, message: '请选择性别', trigger: 'change' }]">
|
|
|
- <el-select v-model="state.ruleForm.gender" placeholder="请选择性别" class="w100">
|
|
|
- <el-option v-for="item in state.genderList" :key="item.key" :label="item.value" :value="item.key" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <el-form-item label="所属部门" prop="orgId" :rules="[{ required: true, message: '请选择所属部门', trigger: 'change' }]">
|
|
|
- <el-cascader
|
|
|
- :options="state.OrgData"
|
|
|
- filterable
|
|
|
- :props="{ checkStrictly: true, value: 'id', label: 'orgName', emitPath: false }"
|
|
|
- placeholder="请选择所属部门"
|
|
|
- clearable
|
|
|
- class="w100"
|
|
|
- v-model="state.ruleForm.orgId"
|
|
|
- ref="cascadeRef"
|
|
|
- @change="getKnowledgeList"
|
|
|
- >
|
|
|
- <template #default="{ node, data }">
|
|
|
- <span>{{ data.orgName }}</span>
|
|
|
- <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
|
|
- </template>
|
|
|
- </el-cascader>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="默认分机" prop="defaultTelNo" :rules="[{ required: false, message: '请选择默认分机', trigger: 'change' }]">
|
|
|
- <el-select v-model="state.ruleForm.defaultTelNo" placeholder="请选择默认分机" class="w100">
|
|
|
- <el-option v-for="item in state.telsList" :key="item.no" :label="item.no" :value="item.no" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="邮箱" prop="email" :rules="[{ required: false, message: '请输入邮箱', trigger: 'blur' }]">
|
|
|
- <el-input v-model="state.ruleForm.email" placeholder="请输入邮箱" clearable></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="工号" prop="staffNo" :rules="[{ required: false, message: '请输入工号', trigger: 'blur' }]">
|
|
|
- <el-input v-model="state.ruleForm.staffNo" placeholder="请输入工号" clearable></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <el-divider content-position="left"><b class="formTitle">角色配置</b></el-divider>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="角色" prop="roleIds" :rules="[{ required: true, message: '请选择角色', trigger: 'change' }]">
|
|
|
- <el-select-v2
|
|
|
- v-model="state.ruleForm.roleIds"
|
|
|
- filterable
|
|
|
- multiple
|
|
|
- :options="state.roleOptions"
|
|
|
- class="w100"
|
|
|
- placeholder="请选择角色"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
- <span class="dialog-footer">
|
|
|
- <el-button @click="onCancel" class="default-button">取 消</el-button>
|
|
|
- <el-button type="primary" @click="onSubmit(ruleFormRef)" :loading="loading">确 定</el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="ts" name="systemUserEdit">
|
|
|
-import { reactive, ref } from 'vue';
|
|
|
-import type { FormInstance } from 'element-plus';
|
|
|
-import { ElMessage } from 'element-plus';
|
|
|
-import { throttle } from '/@/utils/tools';
|
|
|
-import { updateUser, getCanUseOrg, getBaseData, getRoles } from '/@/api/system/user';
|
|
|
-import { getTelsList } from '/@/api/device/phone';
|
|
|
-import other from '/@/utils/other';
|
|
|
-// 定义子组件向父组件传值/事件
|
|
|
-const emit = defineEmits(['updateList']);
|
|
|
-
|
|
|
-// 定义变量内容
|
|
|
-const state = reactive<any>({
|
|
|
- isShowDialog: false,
|
|
|
- ruleForm: {
|
|
|
- phoneNo: '', // 手机号
|
|
|
- gender: 0, //性别
|
|
|
- name: '', // 姓名
|
|
|
- userName: '', // 用户昵称
|
|
|
- orgId: '', // 组织id
|
|
|
- orgCode: '', //组织code
|
|
|
- staffNo: '', //工号
|
|
|
- defaultTelNo: '', //默认分机
|
|
|
- email: '', //邮箱
|
|
|
- roleIds: <EmptyArrayType>[], // 角色
|
|
|
- },
|
|
|
- OrgData: [], //可用组织
|
|
|
- telsList: [], // 所有分机
|
|
|
- genderList: [], // 性别列表
|
|
|
- roleOptions: [], // 角色列表
|
|
|
-});
|
|
|
-const ruleFormRef = ref<FormInstance>();
|
|
|
-let loading = ref<boolean>(false);
|
|
|
-// 打开弹窗
|
|
|
-const openDialog = (row: any) => {
|
|
|
- ruleFormRef.value?.clearValidate();
|
|
|
- ruleFormRef.value?.resetFields();
|
|
|
- state.ruleForm = other.deepClone(row);
|
|
|
- state.ruleForm.roleIds = state.ruleForm.roles.map((v: any) => {
|
|
|
- return v.id;
|
|
|
- });
|
|
|
- getOrgListFn();
|
|
|
- getTelsListFn();
|
|
|
- getBaseDataFn();
|
|
|
- getRolesFn();
|
|
|
- state.isShowDialog = true;
|
|
|
-};
|
|
|
-// 关闭弹窗
|
|
|
-const closeDialog = () => {
|
|
|
- state.isShowDialog = false;
|
|
|
-};
|
|
|
-// 取消
|
|
|
-const onCancel = () => {
|
|
|
- closeDialog();
|
|
|
-};
|
|
|
-// 获取可用组织
|
|
|
-const getOrgListFn = () => {
|
|
|
- getCanUseOrg().then((res: any) => {
|
|
|
- state.OrgData = res?.result ?? [];
|
|
|
- });
|
|
|
-};
|
|
|
-const cascadeRef = ref<RefType>();
|
|
|
-// 获取选择组织name值
|
|
|
-const getKnowledgeList = () => {
|
|
|
- let currentNode = cascadeRef.value.getCheckedNodes();
|
|
|
- state.ruleForm.orgCode = currentNode[0]?.data.orgCode ?? '';
|
|
|
-};
|
|
|
-// 获取分机列表
|
|
|
-const getTelsListFn = () => {
|
|
|
- getTelsList().then((res: any) => {
|
|
|
- state.telsList = res?.result ?? [];
|
|
|
- });
|
|
|
-};
|
|
|
-// 查询页面基础信息
|
|
|
-const getBaseDataFn = () => {
|
|
|
- getBaseData().then((res: any) => {
|
|
|
- state.genderList = res?.result?.genderOptions ?? [];
|
|
|
- });
|
|
|
-};
|
|
|
-// 获取角色
|
|
|
-const getRolesFn = () => {
|
|
|
- getRoles({ PageIndex: 1, PageSize: 999 }).then((res: any) => {
|
|
|
- state.roleOptions = res.result?.items ?? [];
|
|
|
- state.roleOptions = state.roleOptions.map((item: any) => ({
|
|
|
- value: item.id,
|
|
|
- label: item.displayName,
|
|
|
- }));
|
|
|
- });
|
|
|
-};
|
|
|
-// 新增
|
|
|
-const onSubmit = throttle(async (formEl: FormInstance | undefined) => {
|
|
|
- if (!formEl) return;
|
|
|
- await formEl.validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- loading.value = true;
|
|
|
- updateUser(state.ruleForm)
|
|
|
- .then(() => {
|
|
|
- ElMessage({
|
|
|
- message: '修改成功',
|
|
|
- type: 'success',
|
|
|
- });
|
|
|
- loading.value = false;
|
|
|
- closeDialog();
|
|
|
- emit('updateList');
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- // 新增失败
|
|
|
- loading.value = false;
|
|
|
- closeDialog();
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
-}, 1000);
|
|
|
-// 暴露变量
|
|
|
-defineExpose({
|
|
|
- openDialog,
|
|
|
- closeDialog,
|
|
|
-});
|
|
|
-</script>
|
zhangchong