<script setup>
|
import { Search, Lock } from "@element-plus/icons-vue"; // 新增Lock图标导入
|
import { reactive, ref, onMounted } from "vue";
|
import { useRouter } from "vue-router";
|
const router = useRouter();
|
import request from "@/utils/request";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
import { useI18n } from "vue-i18n";
|
const { t } = useI18n();
|
const selectedProjectNoa = ref(null);
|
const userName = ref("");
|
const password = ref("");
|
const confirmPassword = ref("");
|
const editPassword = ref("");
|
const editConfirmPassword = ref("");
|
const tableData = ref([]);
|
const slot = ref("");
|
const add = ref(false);
|
const adda = ref(false);
|
let language = ref(localStorage.getItem("lang") || "zh");
|
// 获取用户列表
|
const listByUserName = async () => {
|
try {
|
const response = await request.post("/loadGlass/sys/user/listByUserName", {
|
key: "",
|
});
|
if (response.code === 200) {
|
tableData.value = response.data;
|
} else {
|
ElMessage.warning(response.msg);
|
}
|
} catch (error) {
|
ElMessage.error( );
|
}
|
};
|
// 重置密码
|
const open = async (row) => {
|
try {
|
const confirmResult = await ElMessageBox.confirm(
|
t("productStock.repassword"),
|
t("productStock.prompt"),
|
{
|
confirmButtonText: t("productStock.yes"),
|
cancelButtonText: t("productStock.cancel"),
|
type: "warning",
|
}
|
);
|
if (confirmResult === "confirm") {
|
const url = "/loadGlass/sys/user/resetPassword?userId=" + row.id;
|
const response = await request.post(url, {
|
esdId: row.esdId,
|
});
|
if (response.code === 200) {
|
ElMessage.success(response.message);
|
} else {
|
ElMessage.error(response.msg);
|
}
|
}
|
} catch (error) {
|
if (error !== "cancel") { // 排除取消操作的错误
|
ElMessage.error( );
|
console.error("重置密码失败：", error);
|
}
|
}
|
};
|
const titleSelectJsona = ref({
|
processTypea: [],
|
});
|
// 获取角色列表
|
const fetchOptionsa = async () => {
|
try {
|
const response = await request.post("/loadGlass/sys/role/queryRole", {
|
key: "",
|
});
|
if (response.code === 200) {
|
titleSelectJsona.value.processTypea = response.data;
|
} else {
|
ElMessage.warning(response.msg);
|
}
|
} catch (error) {
|
ElMessage.error( );
|
}
|
};
|
// 处理编辑按钮点击
|
function handleEdit(row) {
|
userName.value = row.userName;
|
editPassword.value = "";
|
editConfirmPassword.value = "";
|
if (row.roleList && row.roleList.length > 0) {
|
const firstRole = row.roleList[0];
|
selectedProjectNoa.value = firstRole.id;
|
}
|
adda.value = true;
|
window.localStorage.setItem("id", row.id);
|
}
|
// 关闭添加弹窗
|
function closeDialog() {
|
add.value = false;
|
userName.value = "";
|
password.value = "";
|
confirmPassword.value = "";
|
selectedProjectNoa.value = "";
|
}
|
// 关闭编辑弹窗
|
function closeDialoga() {
|
adda.value = false;
|
userName.value = "";
|
editPassword.value = "";
|
editConfirmPassword.value = "";
|
selectedProjectNoa.value = "";
|
}
|
// 添加用户
|
const getTableRow = async () => {
|
// 验证用户名
|
if (!userName.value) {
|
ElMessage.error(t("productStock.inusername"));
|
return;
|
}
|
// 验证角色
|
if (!selectedProjectNoa.value) {
|
ElMessage.error(t("productStock.inrole"));
|
return;
|
}
|
// 验证密码
|
if (!password.value) {
|
ElMessage.error(t("productStock.inpassword"));
|
return;
|
}
|
// 验证确认密码
|
if (!confirmPassword.value) {
|
ElMessage.error(t("productStock.inconfirmpassword"));
|
return;
|
}
|
// 验证密码一致性
|
if (password.value !== confirmPassword.value) {
|
ElMessage.error(t("productStock.passwordNotMatch"));
|
return;
|
}
|
try {
|
const response = await request.post("/loadGlass/sys/user/saveUser", {
|
userName: userName.value,
|
nickName: userName.value,
|
password: password.value,
|
roleList: [
|
{
|
id: selectedProjectNoa.value,
|
},
|
],
|
});
|
if (response.code === 200) {
|
ElMessage.success(response.message);
|
closeDialog(); // 关闭弹窗并清空表单
|
listByUserName(); // 刷新列表
|
} else {
|
ElMessage.error(response.message);
|
}
|
} catch (error) {
|
ElMessage.error( );
|
}
|
};
|
// 编辑用户
|
const getTableRowa = async () => {
|
// 验证用户名
|
if (!userName.value) {
|
ElMessage.error(t("productStock.inusername"));
|
return;
|
}
|
// 验证角色
|
if (!selectedProjectNoa.value) {
|
ElMessage.error(t("productStock.inrole"));
|
return;
|
}
|
if (editPassword.value || editConfirmPassword.value) {
|
if (!editPassword.value) {
|
ElMessage.error(t("productStock.inpassword"));
|
return;
|
}
|
if (!editConfirmPassword.value) {
|
ElMessage.error(t("productStock.inconfirmpassword"));
|
return;
|
}
|
if (editPassword.value !== editConfirmPassword.value) {
|
ElMessage.error(t("productStock.passwordNotMatch"));
|
return;
|
}
|
}
|
let id = window.localStorage.getItem("id");
|
if (!id) {
|
ElMessage.error(t("productStock.userIdError"));
|
return;
|
}
|
try {
|
const requestData = {
|
id: id,
|
userName: userName.value,
|
roleList: [
|
{
|
id: selectedProjectNoa.value,
|
},
|
],
|
};
|
if (editPassword.value) {
|
requestData.password = editPassword.value;
|
}
|
const response = await request.post("/loadGlass/sys/user/updateUser", requestData);
|
if (response.code === 200) {
|
ElMessage.success(response.message);
|
closeDialoga();
|
listByUserName();
|
} else {
|
ElMessage.error(response.message);
|
}
|
} catch (error) {
|
ElMessage.error( );
|
}
|
};
|
// 删除用户
|
const opena = async (row) => {
|
try {
|
const confirmResult = await ElMessageBox.confirm(
|
t("productStock.deusername"),
|
t("productStock.prompt"),
|
{
|
confirmButtonText: t("productStock.yes"),
|
cancelButtonText: t("productStock.cancel"),
|
type: "warning",
|
}
|
);
|
if (confirmResult === "confirm") {
|
const response = await request.post("/loadGlass/sys/user/deleteUser", [row.id]);
|
if (response.code === 200) {
|
ElMessage.success(response.message);
|
listByUserName(); // 刷新列表
|
} else {
|
ElMessage.error(response.msg);
|
}
|
}
|
} catch (error) {
|
if (error !== "cancel") {
|
ElMessage.error( );
|
}
|
}
|
};
|
onMounted(() => {
|
fetchOptionsa();
|
listByUserName();
|
});
|
</script>
|
<template>
|
<div>
|
<el-button
|
type="primary"
|
style="margin-top: 10px; margin-left: 10px"
|
id="searchButton"
|
@click="add = true"
|
>
|
{{ $t("productStock.addusers") }}
|
</el-button>
|
<el-card style="flex: 1; margin-left: 10px; margin-top: 20px">
|
<div style="width: 98%; height: calc(100% - 35px); overflow-y: auto">
|
<el-table
|
height="750"
|
ref="table"
|
:data="tableData"
|
:header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129' }"
|
>
|
<el-table-column
|
prop="userName"
|
align="center"
|
:label="$t('productStock.username')"
|
min-width="180"
|
/>
|
<el-table-column
|
align="center"
|
:label="$t('productStock.role')"
|
min-width="80"
|
>
|
<template #default="scope">
|
<el-tag v-for="role in scope.row.roleList" :key="role.id">
|
{{ role.name }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
fixed="right"
|
:label="$t('productStock.operate')"
|
align="center"
|
width="270"
|
>
|
<template #default="scope">
|
<el-button
|
type="text"
|
plain
|
@click="open(scope.row)"
|
>
|
{{ $t('productStock.resetpassword') }}
|
</el-button>
|
<el-button
|
type="text"
|
plain
|
@click="handleEdit(scope.row)"
|
>
|
{{ $t('productStock.exit') }}
|
</el-button>
|
<el-button
|
type="text"
|
plain
|
@click="opena(scope.row)"
|
>
|
{{ $t('productStock.delete') }}
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-card>
|
</div>
|
<!-- 添加用户弹窗 -->
|
<el-dialog
|
v-model="add"
|
top="23vh"
|
width="37%"
|
:title="$t('productStock.addusers')"
|
@close="closeDialog"
|
>
|
<div style="margin-left: -50px; margin-top: 10px; margin-bottom: 10px">
|
<el-form label-width="150px">
|
<el-form label-width="105px" label-position="right">
|
<el-row style="margin-top: -15px; margin-bottom: -2px">
|
<el-col :span="6">
|
<div id="dt" style="font-size: 15px">
|
<el-form-item
|
:label="$t('productStock.usernamea')"
|
:required="true"
|
style="width: 25vw"
|
>
|
<el-input
|
v-model="userName"
|
autocomplete="off"
|
style="width: 350px"
|
:placeholder="$t('productStock.inusername')"
|
/>
|
</el-form-item>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row style="margin-top: 10px">
|
<el-col :span="6">
|
<div id="dt" style="font-size: 15px">
|
<el-form-item
|
:label="$t('productStock.rolea')"
|
:required="true"
|
style="width: 25vw"
|
>
|
<el-select
|
v-model="selectedProjectNoa"
|
filterable
|
clearable
|
:placeholder="$t('productStock.inrole')"
|
style="width: 350px"
|
>
|
<el-option
|
v-for="item in titleSelectJsona.processTypea"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row style="margin-top: 10px">
|
<el-col :span="6">
|
<div id="dt" style="font-size: 15px">
|
<el-form-item
|
:label="$t('productStock.password')"
|
:required="true"
|
style="width: 25vw"
|
>
|
<el-input
|
v-model="password"
|
:placeholder="$t('productStock.inpassword')"
|
autocomplete="off"
|
:prefix-icon="Lock"
|
show-password
|
style="width: 350px"
|
/>
|
</el-form-item>
|
</div>
|
</el-col>
|
</el-row>
|
<!-- 新增确认密码 -->
|
<el-row style="margin-top: 10px">
|
<el-col :span="6">
|
<div id="dt" style="font-size: 15px">
|
<el-form-item
|
:label="$t('productStock.confirmpassword')"
|
:required="true"
|
style="width: 25vw"
|
>
|
<el-input
|
v-model="confirmPassword"
|
:placeholder="$t('productStock.inconfirmpassword')"
|
autocomplete="off"
|
:prefix-icon="Lock"
|
show-password
|
style="width: 350px"
|
/>
|
</el-form-item>
|
</div>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-form>
|
</div>
|
<template #footer>
|
<div id="dialog-footer">
|
<el-button type="primary" @click="getTableRow">
|
{{ $t('productStock.sure') }}
|
</el-button>
|
<el-button @click="closeDialog">
|
{{ $t('productStock.cancel') }}
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
<!-- 编辑用户弹窗 -->
|
<el-dialog
|
v-model="adda"
|
top="23vh"
|
width="37%"
|
:title="$t('productStock.reusername')"
|
@close="closeDialoga"
|
>
|
<div style="margin-left: -50px; margin-top: 10px; margin-bottom: 10px">
|
<el-form ref="formRef" label-width="150px">
|
<el-form label-width="105px" label-position="right">
|
<el-row style="margin-top: -15px; margin-bottom: -2px">
|
<el-col :span="6">
|
<div id="dt" style="font-size: 15px">
|
<el-form-item
|
:label="$t('productStock.usernamea')"
|
:required="true"
|
style="width: 25vw"
|
>
|
<el-input
|
v-model="userName"
|
:placeholder="$t('productStock.inusername')"
|
autocomplete="off"
|
style="width: 350px"
|
/>
|
</el-form-item>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row style="margin-top: 10px">
|
<el-col :span="6">
|
<div id="dt" style="font-size: 15px">
|
<el-form-item
|
:label="$t('productStock.rolea')"
|
:required="true"
|
style="width: 25vw"
|
>
|
<el-select
|
v-model="selectedProjectNoa"
|
filterable
|
clearable
|
:placeholder="$t('productStock.inrole')"
|
style="width: 350px"
|
>
|
<el-option
|
v-for="item in titleSelectJsona.processTypea"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
</div>
|
</el-col>
|
</el-row>
|
<!-- 新增编辑密码 -->
|
<el-row style="margin-top: 10px">
|
<el-col :span="6">
|
<div id="dt" style="font-size: 15px">
|
<el-form-item
|
:label="$t('productStock.password')"
|
:required="false"
|
style="width: 25vw"
|
>
|
<el-input
|
v-model="editPassword"
|
:placeholder="$t('productStock.inputNewPassword')"
|
autocomplete="off"
|
:prefix-icon="Lock"
|
show-password
|
style="width: 350px"
|
/>
|
</el-form-item>
|
</div>
|
</el-col>
|
</el-row>
|
<!-- 新增编辑确认密码 -->
|
<el-row style="margin-top: 10px">
|
<el-col :span="6">
|
<div id="dt" style="font-size: 15px">
|
<el-form-item
|
:label="$t('productStock.confirmpassword')"
|
:required="false"
|
style="width: 25vw"
|
>
|
<el-input
|
v-model="editConfirmPassword"
|
:placeholder="$t('productStock.inconfirmpassword')"
|
autocomplete="off"
|
:prefix-icon="Lock"
|
show-password
|
style="width: 350px"
|
/>
|
</el-form-item>
|
</div>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-form>
|
</div>
|
<template #footer>
|
<div id="dialog-footer">
|
<el-button type="primary" @click="getTableRowa">
|
{{ $t('productStock.sure') }}
|
</el-button>
|
<el-button @click="closeDialoga">
|
{{ $t('productStock.cancel') }}
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
<style scoped>
|
#dt {
|
display: block;
|
float: left;
|
line-height: 20px;
|
margin-left: 100px;
|
}
|
#dta {
|
display: block;
|
float: left;
|
line-height: 20px;
|
margin-left: 80%;
|
}
|
#dialog-footer {
|
text-align: center;
|
margin-top: -15px;
|
}
|
#message {
|
text-align: center;
|
align-items: center;
|
color: black;
|
width: 200px;
|
height: 100px;
|
background-color: #337ecc;
|
margin-left: 28%;
|
}
|
#awatch {
|
height: 460px;
|
}
|
</style>
|
