ww
4 months ago
parent
3fad5889db
commit
57057fb78d
7 changed files with 559 additions and 167 deletions
@ -0,0 +1,287 @@ |
|||||||
|
<script setup> |
||||||
|
import conheader from '@/views/home/components/ConHeader.vue' |
||||||
|
import { onMounted, ref, computed } from 'vue' |
||||||
|
import { userIdenChangeService } from '@/api/user/user.js' |
||||||
|
import { Edit } from '@element-plus/icons-vue' |
||||||
|
import { ElMessage } from 'element-plus' |
||||||
|
const props = defineProps({ |
||||||
|
data: { |
||||||
|
type: Object, |
||||||
|
}, |
||||||
|
}) |
||||||
|
const formModel = ref() |
||||||
|
const newFormModel = ref() |
||||||
|
const loading = ref() |
||||||
|
//抽屉true |
||||||
|
const editDialogVisible = ref(false) |
||||||
|
const editForm = ref({ |
||||||
|
name: '', |
||||||
|
content: '', |
||||||
|
}) |
||||||
|
const readonlyField = computed(() => editForm.value.name) |
||||||
|
const editRowIndex = ref() |
||||||
|
const openEditDialog = (row) => { |
||||||
|
editForm.value = { ...row } |
||||||
|
editRowIndex.value = formModel.value.indexOf(row) |
||||||
|
editDialogVisible.value = true |
||||||
|
} |
||||||
|
//确认时将表单数据回显 |
||||||
|
const saveEdit = () => { |
||||||
|
const index = editRowIndex.value |
||||||
|
if (index !== -1) { |
||||||
|
formModel.value[index] = { ...editForm.value } |
||||||
|
} |
||||||
|
// console.log(editRowIndex.value, 'edit') |
||||||
|
editDialogVisible.value = false |
||||||
|
} |
||||||
|
//取消 |
||||||
|
const cancelEdit = () => { |
||||||
|
editDialogVisible.value = false |
||||||
|
//重置表单 |
||||||
|
editForm.value = { |
||||||
|
name: '', |
||||||
|
content: '', |
||||||
|
} |
||||||
|
} |
||||||
|
const formValue = [] |
||||||
|
onMounted(() => { |
||||||
|
if (props.data.roleId[0] === '1') { |
||||||
|
formModel.value = [ |
||||||
|
{ par: 'name', name: '姓名', content: props.data.name }, |
||||||
|
{ par: 'sex', name: '性别', content: props.data.sex }, |
||||||
|
{ par: 'nationality', name: '民族', content: props.data.nationality }, |
||||||
|
{ par: 'profession', name: '专业', content: props.data.profession }, |
||||||
|
{ par: 'education', name: '学历', content: props.data.education }, |
||||||
|
{ |
||||||
|
par: 'academicDegree', |
||||||
|
name: '学位', |
||||||
|
content: props.data.academicDegree, |
||||||
|
}, |
||||||
|
{ |
||||||
|
par: 'professionalTitle', |
||||||
|
name: '职称', |
||||||
|
content: props.data.professionalTitle, |
||||||
|
}, |
||||||
|
{ |
||||||
|
par: 'emergencyContact', |
||||||
|
name: '手机号', |
||||||
|
content: props.data.emergencyContact, |
||||||
|
}, |
||||||
|
{ |
||||||
|
par: 'joinWorkTime', |
||||||
|
name: '参加工作时间', |
||||||
|
content: props.data.joinWorkTime, |
||||||
|
}, |
||||||
|
{ |
||||||
|
par: 'politicalStatus', |
||||||
|
name: '政治面貌', |
||||||
|
content: props.data.politicalStatus, |
||||||
|
}, |
||||||
|
] |
||||||
|
newFormModel.value = { ...formModel.value } |
||||||
|
formValue.value = formModel.value |
||||||
|
} else if (props.data.roleId[0] === '2') { |
||||||
|
formModel.value = [ |
||||||
|
{ par: 'name', name: '姓名', content: props.data.name }, |
||||||
|
{ par: 'sex', name: '性别', content: props.data.sex }, |
||||||
|
{ par: 'nationality', name: '民族', content: props.data.nationality }, |
||||||
|
{ par: 'number', name: '学号', content: props.data.number }, |
||||||
|
{ par: 'birthday', name: '生日', content: props.data.birthday }, |
||||||
|
{ par: 'phone', name: '手机号', content: props.data.phone }, |
||||||
|
{ par: 'faculty', name: '院系', content: props.data.faculty }, |
||||||
|
{ par: 'major', name: '专业', content: props.data.major }, |
||||||
|
{ par: 'yearAge', name: '入学年份', content: props.data.yearAge }, |
||||||
|
{ par: 'className', name: '班级', content: props.data.className }, |
||||||
|
] |
||||||
|
newFormModel.value = { ...formModel.value } |
||||||
|
formValue.value = formModel.value |
||||||
|
} |
||||||
|
// else { |
||||||
|
// formModel.value = [ |
||||||
|
// { name: '姓名', content: res.data.name }, |
||||||
|
// { name: '性别', content: res.data.id }, |
||||||
|
// { name: '学号', content: 9.9 }, |
||||||
|
// { name: '小米电脑', content: 9.9 }, |
||||||
|
// { name: '小米电脑', content: 9.9 }, |
||||||
|
// { name: '小米电脑', content: 9.9 }, |
||||||
|
// { name: '小米电脑', content: 9.9 }, |
||||||
|
// { name: '小米电脑', content: 9.9 }, |
||||||
|
// { name: '小米电脑', content: 9.9 }, |
||||||
|
// ] |
||||||
|
// } |
||||||
|
}) |
||||||
|
// 编辑1 |
||||||
|
const drawer2 = ref(false) |
||||||
|
const direction = ref('rtl') |
||||||
|
const data1 = ref([]) |
||||||
|
|
||||||
|
const confirmClick = () => { |
||||||
|
drawer2.value = false |
||||||
|
data1.value = formModel.value |
||||||
|
const values = {} |
||||||
|
data1.value.map((item) => (values[item.par] = item.content)) |
||||||
|
const dataToSend = { |
||||||
|
...values, |
||||||
|
roleId: props.data.roleId, |
||||||
|
id: props.data.id, |
||||||
|
userId: props.data.userId, |
||||||
|
} |
||||||
|
userIdenChangeService(dataToSend) |
||||||
|
.then(() => { |
||||||
|
ElMessage.success('修改成功') |
||||||
|
}) |
||||||
|
.catch((error) => { |
||||||
|
console.log(error) |
||||||
|
}) |
||||||
|
} |
||||||
|
function cancelClick() { |
||||||
|
drawer2.value = false |
||||||
|
} |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<div class="info_container" style="width: 95%; height: 306px"> |
||||||
|
<conheader title="个人信息" v-model="drawer2"> |
||||||
|
<template #drawer> |
||||||
|
<el-drawer v-model="drawer2" :direction="direction" class="table"> |
||||||
|
<template #header> |
||||||
|
<h4>个人信息</h4> |
||||||
|
</template> |
||||||
|
<template #default> |
||||||
|
<div> |
||||||
|
<el-table :data="formModel" style="width: 100%"> |
||||||
|
<el-table-column prop="name" label="标题"></el-table-column> |
||||||
|
<el-table-column prop="content" label="内容"></el-table-column> |
||||||
|
<el-table-column label="操作"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
class="el-icon-edit" |
||||||
|
:icon="Edit" |
||||||
|
plain |
||||||
|
circle |
||||||
|
@click="openEditDialog(row)" |
||||||
|
></el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<template #footer> |
||||||
|
<div style="flex: auto"> |
||||||
|
<el-button @click="cancelClick" size="medium">取消</el-button> |
||||||
|
<el-button type="primary" @click="confirmClick">确认</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-drawer> |
||||||
|
<el-dialog |
||||||
|
v-model="editDialogVisible" |
||||||
|
title="详细信息" |
||||||
|
style="width: 800px; text-align: center" |
||||||
|
:readonly-field="readonlyField" |
||||||
|
> |
||||||
|
<el-form :model="editForm" label-width="80px"> |
||||||
|
<el-form-item label="名称" prop="name"> |
||||||
|
<el-input v-model="editForm.name"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="内容" prop="content"> |
||||||
|
<template v-if="editForm.name !== '性别'"> |
||||||
|
<el-input v-model="editForm.content"></el-input> |
||||||
|
</template> |
||||||
|
<template v-else> |
||||||
|
<el-select |
||||||
|
v-model="editForm.content" |
||||||
|
filterable |
||||||
|
placeholder="Select" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in [ |
||||||
|
{ |
||||||
|
value: '男', |
||||||
|
label: '男', |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: '女', |
||||||
|
label: '女', |
||||||
|
}, |
||||||
|
]" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</template> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<template #footer> |
||||||
|
<div> |
||||||
|
<el-button @click="cancelEdit">取消</el-button> |
||||||
|
<el-button type="primary" @click="saveEdit">保存</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
</conheader> |
||||||
|
<div |
||||||
|
class="info_content" |
||||||
|
style="width: 60%; height: 244px" |
||||||
|
v-loading="loading" |
||||||
|
> |
||||||
|
<div class="item" :key="item.name" v-for="item in newFormModel"> |
||||||
|
<div class="name">{{ item.name }}</div> |
||||||
|
<div class="content">{{ item.content }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<style scoped> |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.info_content { |
||||||
|
display: grid; |
||||||
|
display: wrap; |
||||||
|
grid-template-columns: repeat(4, 1fr); |
||||||
|
gap: 10px; /* 设置元素之间的间隔 */ |
||||||
|
} |
||||||
|
.item { |
||||||
|
width: 100%; |
||||||
|
height: 60px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.name { |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.4); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
.content { |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
.table { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.custom-input { |
||||||
|
margin-bottom: 20px; |
||||||
|
height: 40px; /* 自定义输入框高度 */ |
||||||
|
padding: 0 10px; /* 自定义输入框内边距 */ |
||||||
|
font-size: 16px; /* 自定义输入框字体大小 */ |
||||||
|
/* 其他样式自定义 */ |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
<template> |
||||||
|
<div class="info_content" style="width: 60%; height: 244px"> |
||||||
|
<div class="item" :key="item.name" v-for="item in data"> |
||||||
|
<div class="name">{{ item.name }}</div> |
||||||
|
<div class="content">{{ item.content }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script setup lang="ts"> |
||||||
|
defineProps(['data']) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.info_content { |
||||||
|
display: grid; |
||||||
|
display: wrap; |
||||||
|
grid-template-columns: repeat(4, 1fr); |
||||||
|
gap: 10px; /* 设置元素之间的间隔 */ |
||||||
|
} |
||||||
|
.item { |
||||||
|
width: 100%; |
||||||
|
height: 60px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.name { |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.4); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
.content { |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,120 @@ |
|||||||
|
<template> |
||||||
|
<el-drawer v-model="drawer2" class="table"> |
||||||
|
<template #header> |
||||||
|
<h4>个人信息</h4> |
||||||
|
</template> |
||||||
|
<template #default> |
||||||
|
<div> |
||||||
|
<el-table :data="parData" style="width: 100%"> |
||||||
|
<el-table-column prop="name" label="标题"></el-table-column> |
||||||
|
<el-table-column prop="content" label="内容"></el-table-column> |
||||||
|
<el-table-column label="操作"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
class="el-icon-edit" |
||||||
|
:icon="Edit" |
||||||
|
plain |
||||||
|
circle |
||||||
|
@click="hanEdit(row)" |
||||||
|
></el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<template #footer> |
||||||
|
<div style="flex: auto"> |
||||||
|
<el-button @click="() => {}" size="medium">取消</el-button> |
||||||
|
<el-button type="primary" @click="() => {}">确认</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-drawer> |
||||||
|
<el-dialog |
||||||
|
v-model="isDialog" |
||||||
|
title="详细信息" |
||||||
|
style="width: 800px; text-align: center" |
||||||
|
> |
||||||
|
<el-form :model="activeItem" label-width="80px"> |
||||||
|
<el-form-item label="名称" prop="name"> |
||||||
|
<el-input v-model="activeItem.name"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="内容" prop="content"> |
||||||
|
<template v-if="activeItem.name !== '性别'"> |
||||||
|
<el-input v-model="activeItem.content"></el-input> |
||||||
|
</template> |
||||||
|
<template v-else> |
||||||
|
<el-select |
||||||
|
v-model="activeItem.content" |
||||||
|
filterable |
||||||
|
placeholder="Select" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in arr" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
</template> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<template #footer> |
||||||
|
<div> |
||||||
|
<el-button @click="isDialog = false">取消</el-button> |
||||||
|
<el-button type="primary" @click="saveEdit">保存</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
<script setup lang="ts"> |
||||||
|
import { Edit } from '@element-plus/icons-vue' |
||||||
|
import { ref, reactive, watch } from 'vue' |
||||||
|
const props = defineProps(['drawer', 'data']) |
||||||
|
const emits = defineEmits(['update:drawer']) |
||||||
|
const arr = ref([ |
||||||
|
{ |
||||||
|
value: '男', |
||||||
|
label: '男', |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: '女', |
||||||
|
label: '女', |
||||||
|
}, |
||||||
|
]) |
||||||
|
// ================同步 |
||||||
|
const drawer2 = ref(props.drawer) |
||||||
|
watch( |
||||||
|
() => drawer2.value, |
||||||
|
(newVal) => emits('update:drawer', newVal), |
||||||
|
) |
||||||
|
watch( |
||||||
|
() => props.drawer, |
||||||
|
(newVal) => (drawer2.value = newVal), |
||||||
|
) |
||||||
|
const parData = ref(props.data.map((item: any) => ({ ...item }))) |
||||||
|
// ========== |
||||||
|
|
||||||
|
const isDialog = ref(false) |
||||||
|
const activeItem = reactive({}) |
||||||
|
const activeRow = ref() |
||||||
|
// 打开弹窗开始编辑 |
||||||
|
function hanEdit(row: any) { |
||||||
|
Object.assign(activeItem, row) |
||||||
|
activeRow.value = row |
||||||
|
isDialog.value = true |
||||||
|
} |
||||||
|
// 保存编辑 |
||||||
|
function saveEdit() { |
||||||
|
Object.assign(activeRow.value, activeItem) |
||||||
|
console.log(parData.value, 'value') |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.table { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue