10.31修改
This commit is contained in:
parent
6cd9fed39b
commit
40fb1c11ae
|
|
@ -39,10 +39,5 @@ export const routes = [
|
|||
component: ()=> import("../views/Commodity/TypeManagement.vue")
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/Test',
|
||||
name:'test',
|
||||
component: () => import("../views/test.vue")
|
||||
},
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,292 +0,0 @@
|
|||
<template>
|
||||
<el-form :model="formData" ref="formRef" label-width="auto" :rules="rules">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入姓名" style="width: 800px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-select
|
||||
v-model="formData.sex"
|
||||
placeholder="请选择性别"
|
||||
filterable
|
||||
size="large"
|
||||
style="width: 800px"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in sexOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="年龄" prop="age">
|
||||
<el-input-number
|
||||
v-model="formData.age"
|
||||
placeholder="请输入年龄"
|
||||
style="width: 800px"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址" prop="address">
|
||||
<el-input
|
||||
v-model="formData.address"
|
||||
placeholder="请输入地址"
|
||||
style="width: 800px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="mb-3">
|
||||
<div class="font-bold text-16px">新增家庭信息</div>
|
||||
</div>
|
||||
<!-- 添加家庭信息 -->
|
||||
<el-form ref="familyInfoRef">
|
||||
<el-table :data="familyInfo" border>
|
||||
<template #empty>
|
||||
<div class="flex flex-row justify-center items-center space-x-2">
|
||||
<span>点击 + 按钮新增家庭成员</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-table-column prop="relation" label="关系" align="center">
|
||||
<template #default="{ row, $index }">
|
||||
<el-input
|
||||
v-if="$index === editingIndex"
|
||||
v-model="row.relation"
|
||||
placeholder="请输入关系"
|
||||
size="small"
|
||||
>
|
||||
</el-input>
|
||||
<span v-else>{{ row.relation }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" min-width="60px" align="center">
|
||||
<template #default="{ row, $index }">
|
||||
<el-input
|
||||
v-if="$index === editingIndex"
|
||||
v-model="row.name"
|
||||
placeholder="请输入姓名"
|
||||
size="small"
|
||||
>
|
||||
</el-input>
|
||||
<span v-else>{{ row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sex" label="性别" min-width="100px" align="center">
|
||||
<template #default="{ row, $index }">
|
||||
<el-select
|
||||
v-if="$index === editingIndex"
|
||||
v-model="row.sex"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择性别"
|
||||
size="small"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in sexOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<span v-else>{{ getSexLabel(row.sex) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="age" label="年龄" min-width="80px" align="center">
|
||||
<template #default="{ row, $index }">
|
||||
<el-input
|
||||
v-if="$index === editingIndex"
|
||||
v-model="row.age"
|
||||
placeholder="请输入年龄"
|
||||
size="small"
|
||||
>
|
||||
</el-input>
|
||||
<span v-else>{{ row.age }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址" min-width="100px" align="center">
|
||||
<template #default="{ row, $index }">
|
||||
<el-input
|
||||
v-if="$index === editingIndex"
|
||||
v-model="row.address"
|
||||
placeholder="请输入地址"
|
||||
size="small"
|
||||
>
|
||||
</el-input>
|
||||
<span v-else>{{ row.address }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="{ row, $index }">
|
||||
<div class="flex flex-row justify-center items-center">
|
||||
<template v-if="$index === editingIndex">
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
plain
|
||||
@click="handleSave(row, $index)"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button
|
||||
type="info"
|
||||
size="small"
|
||||
plain
|
||||
@click="handleCancel(row, $index)"
|
||||
>取消</el-button
|
||||
>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
plain
|
||||
@click="handleEdit(row, $index)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
title="是否确认删除？"
|
||||
@confirm="handleDelete(row, $index)"
|
||||
style="margin-left: 10px"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button type="danger" size="small" plain>删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
|
||||
<!-- 添加新行 -->
|
||||
<div class="flex justify-center mt-[4px]">
|
||||
<el-icon @click="handleAdd()" class="icon" size="24" color="#fb7a14"
|
||||
><CirclePlusFilled />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
|
||||
import { CirclePlusFilled } from '@element-plus/icons-vue'
|
||||
|
||||
/* --------------------------------- 用户数据类型 --------------------------------- */
|
||||
interface User {
|
||||
name: string
|
||||
age: number
|
||||
sex: string
|
||||
address: string
|
||||
email: string
|
||||
}
|
||||
|
||||
interface FamilyInfo {
|
||||
relation: string
|
||||
name: string
|
||||
age: number
|
||||
sex: string
|
||||
address: string
|
||||
}
|
||||
|
||||
const sexOptions = [
|
||||
{ value: 1, label: '男' },
|
||||
{ value: 2, label: '女' }
|
||||
]
|
||||
|
||||
/* ---------------------------------- 表格数据 ---------------------------------- */
|
||||
const formData = reactive<User>({
|
||||
name: '',
|
||||
age: 0,
|
||||
sex: '',
|
||||
address: '',
|
||||
email: ''
|
||||
})
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
|
||||
const familyInfo = ref<FamilyInfo[]>([])
|
||||
|
||||
const familyInfoRef = ref<FormInstance>()
|
||||
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
||||
age: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
|
||||
sex: [{ required: true, message: '请选择性别', trigger: 'change' }]
|
||||
}
|
||||
|
||||
/* ------------------------------ 当前编辑行下标 ------------------------------ */
|
||||
const editingIndex = ref<number>(-1)
|
||||
|
||||
/* ------------------------------- 编辑行修改前的数据 ------------------------------- */
|
||||
const beforeEditRow = ref<FamilyInfo>({
|
||||
relation: '',
|
||||
name: '',
|
||||
age: 0,
|
||||
sex: '',
|
||||
address: ''
|
||||
})
|
||||
|
||||
/* --------------------------------- 新增行的空数据 -------------------------------- */
|
||||
const addContractRow: FamilyInfo = {
|
||||
relation: '',
|
||||
name: '',
|
||||
age: 0,
|
||||
sex: '',
|
||||
address: ''
|
||||
}
|
||||
|
||||
/* ---------------------------------- 重置编辑行 --------------------------------- */
|
||||
const resetTable = () => {
|
||||
editingIndex.value = -1
|
||||
beforeEditRow.value = { ...addContractRow }
|
||||
}
|
||||
|
||||
/* ---------------------------------- 表格操作 ---------------------------------- */
|
||||
const handleAdd = () => {
|
||||
if (editingIndex.value > -1) {
|
||||
ElMessage.warning('请先完成修改中的行')
|
||||
return
|
||||
}
|
||||
editingIndex.value = familyInfo.value.length
|
||||
familyInfo.value.push({ ...addContractRow })
|
||||
}
|
||||
|
||||
const handleEdit = (row: FamilyInfo, index: number) => {
|
||||
if (editingIndex.value > -1) {
|
||||
ElMessage.warning('请先完成修改中的行')
|
||||
return
|
||||
}
|
||||
beforeEditRow.value = { ...row }
|
||||
editingIndex.value = index
|
||||
}
|
||||
|
||||
const handleSave = (row: FamilyInfo, index: number) => {
|
||||
if (!row.relation || !row.name || !row.age || !row.sex) {
|
||||
ElMessage.warning('请填写所有必填字段再保存')
|
||||
return
|
||||
}
|
||||
familyInfo.value[index] = { ...row }
|
||||
resetTable()
|
||||
}
|
||||
|
||||
const handleDelete = (row: FamilyInfo, index: number) => {
|
||||
familyInfo.value.splice(index, 1)
|
||||
}
|
||||
|
||||
const handleCancel = (row: FamilyInfo, index: number) => {
|
||||
if (Object.values(beforeEditRow.value).some((value) => value !== '')) {
|
||||
familyInfo.value[index] = { ...beforeEditRow.value }
|
||||
} else {
|
||||
familyInfo.value.splice(index, 1)
|
||||
}
|
||||
resetTable()
|
||||
}
|
||||
|
||||
const getSexLabel = (value: number) => {
|
||||
return sexOptions.find((option) => option.value === value)?.label || ''
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user