From e5875000e60d4976f159f287ae3773f1d11960b3 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 22 十二月 2023 17:36:56 +0800
Subject: [PATCH] 调整FYForm表单逻辑
---
src/views/baseinfo/fysp/scene/CompSceneBaseInfo.vue | 306 +++++++++++++++++++++-----------------------------
1 files changed, 128 insertions(+), 178 deletions(-)
diff --git a/src/views/baseinfo/fysp/scene/CompSceneBaseInfo.vue b/src/views/baseinfo/fysp/scene/CompSceneBaseInfo.vue
index 1472786..602aaf9 100644
--- a/src/views/baseinfo/fysp/scene/CompSceneBaseInfo.vue
+++ b/src/views/baseinfo/fysp/scene/CompSceneBaseInfo.vue
@@ -1,268 +1,218 @@
<!-- 鍦烘櫙鍩烘湰淇℃伅缂栬緫 -->
<template>
- <el-form
- :inline="false"
- :model="formObj"
- ref="formRef"
- :rules="rules"
- label-position="right"
- label-width="150px"
- >
- <el-form-item label="鍦烘櫙鍚嶇О" prop="name">
- <el-input
- clearable
- show-word-limit
- v-model="formObj.name"
- placeholder="鍦烘櫙鍚嶇О"
- />
- </el-form-item>
- <el-form-item label="鍦烘櫙绫诲瀷" prop="_typeObj">
- <el-select v-model="formObj._typeObj" placeholder="鍦烘櫙绫诲瀷">
- <el-option
- v-for="s in sceneTypes"
- :key="s.value"
- :label="s.label"
- :value="s"
+ <FYForm :form-info="formInfo" :rules="rules" :useReset="true" @submit="submit" @cancel="cancel">
+ <template #form-item="{ formObj }">
+ <el-form-item label="鍦烘櫙鍚嶇О" prop="name">
+ <el-input clearable show-word-limit v-model="formObj.name" placeholder="鍦烘櫙鍚嶇О" />
+ </el-form-item>
+ <el-form-item label="鍦烘櫙绫诲瀷" prop="_typeObj">
+ <el-select v-model="formObj._typeObj" placeholder="鍦烘櫙绫诲瀷">
+ <el-option v-for="s in sceneTypes" :key="s.value" :label="s.label" :value="s" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鐪�/甯�/鍖�/闀�" prop="_locations">
+ <el-cascader
+ v-model="formObj._locations"
+ :options="locations"
+ placeholder="鐪�/甯�/鍖�/闀�"
+ style="width: 300px"
+ :props="cascaderProps"
/>
- </el-select>
- </el-form-item>
- <el-form-item label="鐪�/甯�/鍖�/闀�" prop="_locations">
- <el-cascader
- v-model="formObj._locations"
- :options="locations"
- placeholder="鐪�/甯�/鍖�/闀�"
- style="width: 300px"
- :props="cascaderProps"
- />
- </el-form-item>
- <el-form-item label="鍦板潃" prop="location">
- <el-input
- show-word-limit
- clearable
- v-model="formObj.location"
- placeholder="鍦板潃"
- />
- </el-form-item>
- <el-form-item label="缁忓害" prop="longitude">
- <!-- <el-input type="number" v-model="formObj.longitude" placeholder="缁忓害" /> -->
- <el-input-number
- v-model="formObj.longitude"
- :precision="6"
- :step="0.1"
- controls-position="right"
- />
- </el-form-item>
- <el-form-item label="绾害" prop="latitude">
- <!-- <el-input type="number" v-model="formObj.latitude" placeholder="绾害" /> -->
- <el-input-number
- v-model="formObj.latitude"
- :precision="6"
- :step="0.1"
- controls-position="right"
- />
- </el-form-item>
- <el-form-item label="鑱旂郴浜�" prop="contacts">
- <el-input
- show-word-limit
- clearable
- v-model="formObj.contacts"
- placeholder="鑱旂郴浜�"
- />
- </el-form-item>
- <el-form-item label="鑱旂郴鐢佃瘽" prop="contactst">
- <el-input type="tel" v-model="formObj.contactst" placeholder="鑱旂郴鐢佃瘽">
- <template #prepend>
- <el-icon><Iphone /></el-icon>
- </template>
- </el-input>
- </el-form-item>
- <el-form-item label="鐘舵��" prop="online">
- <el-switch v-model="formObj.online" />
- <span style="margin-left: 16px">{{
- formObj.online ? '鍦ㄧ嚎' : '涓嬬嚎'
- }}</span>
- </el-form-item>
- <el-form-item label="缂栧彿" prop="index">
- <el-input-number
- readonly
- v-model="formObj.index"
- :step="1"
- :min="0"
- />
- </el-form-item>
-
- <el-form-item>
- <el-button
- :disabled="!edit"
- type="primary"
- @click="onSubmit"
- :loading="loading"
- >鎻愪氦</el-button
- >
- <el-button :disabled="!edit" @click="onReset">閲嶇疆</el-button>
- </el-form-item>
- </el-form>
+ </el-form-item>
+ <el-form-item label="鍦板潃" prop="location">
+ <el-input show-word-limit clearable v-model="formObj.location" placeholder="鍦板潃" />
+ </el-form-item>
+ <el-form-item label="缁忓害" prop="longitude">
+ <!-- <el-input type="number" v-model="formObj.longitude" placeholder="缁忓害" /> -->
+ <el-input-number
+ v-model="formObj.longitude"
+ :precision="6"
+ :step="0.1"
+ controls-position="right"
+ />
+ </el-form-item>
+ <el-form-item label="绾害" prop="latitude">
+ <!-- <el-input type="number" v-model="formObj.latitude" placeholder="绾害" /> -->
+ <el-input-number
+ v-model="formObj.latitude"
+ :precision="6"
+ :step="0.1"
+ controls-position="right"
+ />
+ </el-form-item>
+ <el-form-item label="鑱旂郴浜�" prop="contacts">
+ <el-input show-word-limit clearable v-model="formObj.contacts" placeholder="鑱旂郴浜�" />
+ </el-form-item>
+ <el-form-item label="鑱旂郴鐢佃瘽" prop="contactst">
+ <el-input type="tel" v-model="formObj.contactst" placeholder="鑱旂郴鐢佃瘽">
+ <template #prepend>
+ <el-icon>
+ <Iphone />
+ </el-icon>
+ </template>
+ </el-input>
+ </el-form-item>
+ <el-form-item label="鐘舵��" prop="online">
+ <el-switch v-model="formObj.online" />
+ <span style="margin-left: 16px">{{ formObj.online ? '鍦ㄧ嚎' : '涓嬬嚎' }}</span>
+ </el-form-item>
+ <el-form-item label="缂栧彿" prop="index">
+ <el-input-number readonly v-model="formObj.index" :step="1" :min="0" />
+ </el-form-item>
+ </template>
+ </FYForm>
</template>
<script setup>
-import { defineProps, defineEmits, reactive, ref, watch } from 'vue';
-import { enumScene_2NA } from '@/enum/scene';
-import { enumLocationNA } from '@/enum/location';
-import sceneApi from '@/api/sceneApi';
-import { useFormConfirm } from '@/composables/formConfirm';
+import { defineProps, defineEmits, reactive, ref, watch, computed } from 'vue';
+import { enumScene } from '@/enum/scene';
+import { enumLocation } from '@/enum/location';
+import sceneApi from '@/api/fysp/sceneApi';
const props = defineProps({
//鍦烘櫙鍩烘湰淇℃伅
- formInfo: Object,
+ model: {
+ type: Object,
+ default: () => {
+ return {};
+ }
+ },
//鏄垱寤烘垨鑰呮洿鏂板満鏅�
- create: Boolean,
+ create: Boolean
+});
+
+// 鍦烘櫙鍩烘湰淇℃伅锛屽仛鐩稿簲鐨勬暟鎹牸寮忓寲
+const formInfo = computed(() => {
+ return parseSceneBaseInfo(props.model);
});
const emit = defineEmits(['onSubmit', 'onCancel']);
-const { formObj, formRef, edit, onSubmit, onReset } = useFormConfirm({
- submit: {
- do: submit,
- },
- cancel: {
- do: cancel,
- },
-});
-const loading = ref(false);
-const sceneTypes = reactive(enumScene_2NA());
-const locations = reactive(enumLocationNA());
+const sceneTypes = reactive(enumScene(2, false));
+const locations = reactive(enumLocation(false));
const cascaderProps = reactive({
- checkStrictly: true,
+ checkStrictly: true
});
const rules = reactive({
name: [
{
required: true,
message: '鍦烘櫙鍚嶇О涓嶈兘涓虹┖',
- trigger: 'blur',
- },
+ trigger: 'blur'
+ }
],
_typeObj: [
{
required: true,
message: '鍦烘櫙绫诲瀷涓嶈兘涓虹┖',
- trigger: 'change',
- },
+ trigger: 'change'
+ }
],
_locations: [
{
required: true,
message: '琛屾斂鍖哄垝涓嶈兘涓虹┖',
- trigger: 'change',
- },
+ trigger: 'change'
+ }
],
longitude: [
{
required: true,
message: '缁忓害涓嶈兘涓虹┖',
- trigger: 'blur',
- },
+ trigger: 'blur'
+ }
],
latitude: [
{
required: true,
message: '绾害涓嶈兘涓虹┖',
- trigger: 'blur',
- },
- ],
+ trigger: 'blur'
+ }
+ ]
});
-// 鍦烘櫙鍩烘湰淇℃伅鏍煎紡鍖�
+/**
+ * 鍦烘櫙鍩烘湰淇℃伅鏍煎紡鍖�
+ * 瀵瑰満鏅被鍨嬨�佸満鏅鏀垮尯鍒掑拰鍦烘櫙鍙敤鐘舵�佽繘琛屾牸寮忓寲
+ * @param {*} s 鍦烘櫙淇℃伅
+ */
function parseSceneBaseInfo(s) {
s._typeObj = {
label: s.type,
- value: s.typeid + '',
+ value: s.typeid + ''
};
s._locations = [];
if (s.provincecode && s.provincecode.length > 0)
s._locations.push([s.provincecode, s.provincename]);
- if (s.citycode && s.citycode.length > 0)
- s._locations.push([s.citycode, s.cityname]);
+ if (s.citycode && s.citycode.length > 0) s._locations.push([s.citycode, s.cityname]);
if (s.districtcode && s.districtcode.length > 0)
s._locations.push([s.districtcode, s.districtname]);
- if (s.towncode && s.towncode.length > 0)
- s._locations.push([s.towncode, s.townname]);
+ if (s.towncode && s.towncode.length > 0) s._locations.push([s.towncode, s.townname]);
s.online = s.extension1 != '0';
return s;
}
// 鍒涘缓鏂板満鏅�
-function createScene() {
- loading.value = true;
+function createScene(v, success, fail) {
return sceneApi
- .createScene(formObj.value)
- .then((res) => {
- console.log(res);
+ .createScene(v)
+ .then(() => {
+ emit('onSubmit', v);
+ success();
})
- .finally(() => {
- loading.value = false;
+ .catch((err) => {
+ fail(err);
});
}
// 鏇存柊鍦烘櫙
-function updateScene() {
- loading.value = true;
+function updateScene(v, success, fail) {
return sceneApi
- .updateScene(formObj.value)
- .then((res) => {
- console.log(res);
+ .updateScene(v)
+ .then(() => {
+ emit('onSubmit', v);
+ success();
})
- .finally(() => {
- loading.value = false;
+ .catch((err) => {
+ fail(err);
});
}
-function submit() {
+function submit(v, success, fail) {
// 琛屾斂鍖哄垝淇℃伅濉厖
- const a = formObj.value._locations;
+ const a = v.value._locations;
if (a[0]) {
- formObj.value.provincecode = a[0][0];
- formObj.value.provincename = a[0][1];
+ v.value.provincecode = a[0][0];
+ v.value.provincename = a[0][1];
}
if (a[1]) {
- formObj.value.citycode = a[1][0];
- formObj.value.cityname = a[1][1];
+ v.value.citycode = a[1][0];
+ v.value.cityname = a[1][1];
}
if (a[2]) {
- formObj.value.districtcode = a[2][0];
- formObj.value.districtname = a[2][1];
+ v.value.districtcode = a[2][0];
+ v.value.districtname = a[2][1];
}
if (a[3]) {
- formObj.value.towncode = a[3][0];
- formObj.value.townname = a[3][1];
+ v.value.towncode = a[3][0];
+ v.value.townname = a[3][1];
}
// 鍦烘櫙绫诲瀷淇℃伅濉厖
- const b = formObj.value._typeObj;
- formObj.value.typeid = b.value;
- formObj.value.type = b.label;
+ const b = v.value._typeObj;
+ v.value.typeid = b.value;
+ v.value.type = b.label;
// 鏄惁鍦ㄧ嚎淇℃伅濉厖
- formObj.value.online
- ? (formObj.value.extension1 = '1')
- : (formObj.value.extension1 = '0');
+ v.value.online ? (v.value.extension1 = '1') : (v.value.extension1 = '0');
- formObj.value.updatedate = new Date().toISOString();
+ v.value.updatedate = new Date().toISOString();
- emit('onSubmit', formObj);
-
- return props.create ? createScene() : updateScene();
+ return props.create ? createScene(v.value, success, fail) : updateScene(v.value, success, fail);
}
function cancel() {
emit('onCancel');
}
-
-watch(
- () => props.formInfo,
- (nValue) => {
- formObj.value = parseSceneBaseInfo(nValue);
- }
-);
</script>
<style scoped></style>
--
Gitblit v1.9.3