1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
| <template>
| <el-form
| :inline="false"
| :model="formObj"
| ref="formRef"
| :rules="rules"
| label-position="right"
| label-width="150px"
| >
| <el-form-item label="店铺名称" prop="shopName">
| <el-input clearable v-model="formObj.shopName" placeholder="店铺名称" />
| </el-form-item>
| <el-form-item label="所属公司" prop="company">
| <el-input clearable v-model="formObj.company" placeholder="所属公司" />
| </el-form-item>
| <el-form-item label="集中区" prop="centralArea">
| <el-input clearable v-model="formObj.centralArea" placeholder="集中区" />
| </el-form-item>
| <el-form-item label="物业公司" prop="propertyCompany">
| <el-input clearable v-model="formObj.propertyCompany" placeholder="物业公司" />
| </el-form-item>
| <el-form-item label="联系人" prop="contactName">
| <el-input clearable v-model="formObj.contactName" placeholder="联系人" />
| </el-form-item>
| <el-form-item label="联系电话" prop="telephone">
| <el-input clearable type="tel" v-model="formObj.telephone" placeholder="联系电话">
| <template #prepend>
| <el-icon><Iphone /></el-icon>
| </template>
| </el-input>
| </el-form-item>
| <el-form-item label="地址" prop="address">
| <el-input clearable v-model="formObj.address" placeholder="地址" type="textarea" rows="2" />
| </el-form-item>
|
| <el-form-item>
| <el-button :disabled="!edit" type="primary" @click="onSubmit" :loading="updateLoading"
| >提交</el-button
| >
| <el-button :disabled="!edit" @click="onReset">重置</el-button>
| </el-form-item>
| </el-form>
| </template>
|
| <script setup>
| import { defineProps, defineEmits, reactive, ref, watch } from 'vue'
| import { Iphone } from '@element-plus/icons-vue'
| import { useFormConfirm } from '@/composables/formConfirm'
|
| const props = defineProps({
| //基本信息
| formInfo: Object,
| //是创建或者更新
| create: Boolean,
| })
| const emit = defineEmits(['onSubmit', 'onCancel'])
|
| const { formObj, formRef, edit, onSubmit, onReset } = useFormConfirm({
| submit: {
| do: submit,
| },
| cancel: {
| do: cancel,
| },
| })
| const updateLoading = ref(false)
| const rules = reactive({
| shopName: [
| {
| required: true,
| message: '店铺名称不能为空',
| trigger: 'blur',
| },
| ],
| company: [
| {
| required: true,
| message: '所属公司不能为空',
| trigger: 'blur',
| },
| ],
| contactName: [
| {
| required: true,
| message: '联系人不能为空',
| trigger: 'blur',
| },
| ],
| telephone: [
| {
| required: true,
| message: '联系电话不能为空',
| trigger: 'blur',
| },
| ],
| address: [
| {
| required: true,
| message: '地址不能为空',
| trigger: 'blur',
| },
| ],
| })
|
| // 场景基本信息格式化
| function parseSceneBaseInfo(s) {
| return s
| }
|
| function updateScene() {
| updateLoading.value = true
| // 这里可以添加实际的API调用
| setTimeout(() => {
| updateLoading.value = false
| }, 1000)
| }
|
| watch(
| () => props.formInfo,
| (nValue) => {
| formObj.value = parseSceneBaseInfo(nValue)
| },
| )
|
| function submit() {
| emit('onSubmit', formObj)
| return updateScene()
| }
| function cancel() {
| emit('onCancel')
| }
| </script>
|
|
