verce-vue-test 0.0.6 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/888/1 +121 -0
- package/package.json +1 -1
package/888/1
ADDED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<el-dialog
|
|
3
|
+
v-model="dialogVisible"
|
|
4
|
+
:title="isEdit ? '编辑用户' : '新增用户'"
|
|
5
|
+
width="520px"
|
|
6
|
+
destroy-on-close
|
|
7
|
+
@closed="resetForm"
|
|
8
|
+
>
|
|
9
|
+
<el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
|
|
10
|
+
<el-form-item label="用户名" prop="username">
|
|
11
|
+
<el-input v-model="form.username" />
|
|
12
|
+
</el-form-item>
|
|
13
|
+
|
|
14
|
+
<el-form-item label="手机号" prop="phone">
|
|
15
|
+
<el-input v-model="form.phone" />
|
|
16
|
+
</el-form-item>
|
|
17
|
+
|
|
18
|
+
<el-form-item label="状态" prop="status">
|
|
19
|
+
<el-radio-group v-model="form.status">
|
|
20
|
+
<el-radio :value="1">启用</el-radio>
|
|
21
|
+
<el-radio :value="0">禁用</el-radio>
|
|
22
|
+
</el-radio-group>
|
|
23
|
+
</el-form-item>
|
|
24
|
+
</el-form>
|
|
25
|
+
|
|
26
|
+
<template #footer>
|
|
27
|
+
<el-button @click="dialogVisible = false">取消</el-button>
|
|
28
|
+
<el-button type="primary" :loading="loading" @click="handleSubmit">
|
|
29
|
+
保存
|
|
30
|
+
</el-button>
|
|
31
|
+
</template>
|
|
32
|
+
</el-dialog>
|
|
33
|
+
</template>
|
|
34
|
+
|
|
35
|
+
<script setup>
|
|
36
|
+
import { computed, reactive, ref, watch } from 'vue'
|
|
37
|
+
import { ElMessage } from 'element-plus'
|
|
38
|
+
|
|
39
|
+
const props = defineProps({
|
|
40
|
+
modelValue: {
|
|
41
|
+
type: Boolean,
|
|
42
|
+
default: false
|
|
43
|
+
},
|
|
44
|
+
mode: {
|
|
45
|
+
type: String,
|
|
46
|
+
default: 'create'
|
|
47
|
+
},
|
|
48
|
+
rowData: {
|
|
49
|
+
type: Object,
|
|
50
|
+
default: () => null
|
|
51
|
+
}
|
|
52
|
+
})
|
|
53
|
+
|
|
54
|
+
const emit = defineEmits(['update:modelValue', 'success'])
|
|
55
|
+
|
|
56
|
+
const dialogVisible = computed({
|
|
57
|
+
get: () => props.modelValue,
|
|
58
|
+
set: value => emit('update:modelValue', value)
|
|
59
|
+
})
|
|
60
|
+
|
|
61
|
+
const isEdit = computed(() => props.mode === 'edit')
|
|
62
|
+
|
|
63
|
+
const formRef = ref()
|
|
64
|
+
const loading = ref(false)
|
|
65
|
+
|
|
66
|
+
const defaultForm = {
|
|
67
|
+
id: null,
|
|
68
|
+
username: '',
|
|
69
|
+
phone: '',
|
|
70
|
+
status: 1
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
const form = reactive({ ...defaultForm })
|
|
74
|
+
|
|
75
|
+
const rules = {
|
|
76
|
+
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
|
77
|
+
phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
watch(
|
|
81
|
+
() => props.modelValue,
|
|
82
|
+
visible => {
|
|
83
|
+
if (!visible) return
|
|
84
|
+
|
|
85
|
+
Object.assign(form, defaultForm)
|
|
86
|
+
|
|
87
|
+
if (props.mode === 'edit' && props.rowData) {
|
|
88
|
+
Object.assign(form, props.rowData)
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
formRef.value?.clearValidate()
|
|
92
|
+
}
|
|
93
|
+
)
|
|
94
|
+
|
|
95
|
+
const resetForm = () => {
|
|
96
|
+
Object.assign(form, defaultForm)
|
|
97
|
+
formRef.value?.clearValidate()
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
const handleSubmit = async () => {
|
|
101
|
+
await formRef.value.validate()
|
|
102
|
+
|
|
103
|
+
loading.value = true
|
|
104
|
+
try {
|
|
105
|
+
if (isEdit.value) {
|
|
106
|
+
// await updateUserApi(form.id, form)
|
|
107
|
+
console.log('编辑：', form)
|
|
108
|
+
ElMessage.success('修改成功')
|
|
109
|
+
} else {
|
|
110
|
+
// await createUserApi(form)
|
|
111
|
+
console.log('新增：', form)
|
|
112
|
+
ElMessage.success('新增成功')
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
dialogVisible.value = false
|
|
116
|
+
emit('success')
|
|
117
|
+
} finally {
|
|
118
|
+
loading.value = false
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
</script>
|