| 提交 | 用户 | age | ||
| ec4248 | 1 | <template> |
| S | 2 | <BasicDrawer |
| 3 | v-bind="$attrs" | |
| 7b684b | 4 | title="新建线索" |
| ec4248 | 5 | @register="registerDrawer" |
| S | 6 | :maskClosable="false" |
| 7 | :keyboard="false" | |
| 7b684b | 8 | width="860px" |
| S | 9 | showFooter |
| 10 | @ok="handleSubmit" | |
| ec4248 | 11 | > |
| S | 12 | <template #title> |
| 7b684b | 13 | <div class="flex flex-justify-between"> |
| S | 14 | <div>{{ getTitle }}</div> |
| 15 | <div class="text-right"> | |
| 16 | <span> | |
| b5c161 | 17 | <!-- <Tooltip title="已关注">--> |
| S | 18 | <!-- <Icon--> |
| 19 | <!-- icon="mingcute:heart-fill"--> | |
| 20 | <!-- class="mr-15px cursor-pointer"--> | |
| 21 | <!-- @click=""--> | |
| 22 | <!-- :size="20"--> | |
| 23 | <!-- />--> | |
| 24 | <!-- </Tooltip>--> | |
| 7b684b | 25 | <Tooltip title="未关注"> |
| S | 26 | <Icon |
| 27 | icon="mingcute:heart-line" | |
| 28 | class="mr-15px cursor-pointer" | |
| 29 | @click="" | |
| 30 | :size="20" | |
| 31 | /> | |
| 32 | </Tooltip> | |
| 33 | </span> | |
| 34 | ||
| 35 | </div> | |
| 36 | </div> | |
| ec4248 | 37 | |
| S | 38 | </template> |
| 7b684b | 39 | <!-- <Content :schemas="schemas"></Content>--> |
| S | 40 | <div :class="prefixCls"> |
| 41 | <Alert | |
| 42 | v-if="visible" | |
| 43 | message="线索增强：填写公司网址或邮箱后缀后，如系统能查找到该公司的其他更多信息，则会为您自动补全。" | |
| 44 | type="info" | |
| 45 | show-icon | |
| 46 | closable | |
| 47 | :after-close="handleClose" | |
| 48 | class="mb-10px" | |
| 49 | /> | |
| 50 | <Row :class="`${prefixCls}-top`"> | |
| 51 | <Col :span="11" :class="`${prefixCls}-col`"> | |
| 52 | <div class="mb-10px font-size-16px">常用信息</div> | |
| 53 | <div class="pt-3px pr-3px"> | |
| 54 | <BasicForm @register="registerForm" :model="modelRef" /> | |
| 55 | </div> | |
| 56 | </Col> | |
| 57 | <Col :span="11" :offset="2" :class="`${prefixCls}-col`"> | |
| 7450a2 | 58 | <div class="mb-10px font-size-16px">联系人</div> |
| S | 59 | <div class="p-10px bg-gray-1"> |
| 60 | <BasicForm @register="registerForm2" /> | |
| 61 | </div> | |
| 7b684b | 62 | </Col> |
| S | 63 | </Row> |
| 64 | ||
| 65 | </div> | |
| ec4248 | 66 | </BasicDrawer> |
| S | 67 | </template> |
| 68 | <script lang="ts" setup> | |
| 69 | // import { useForm } from '@/components/Form'; | |
| 70 | // import { formSchema } from './drawerData'; | |
| 71 | import {BasicDrawer, useDrawerInner} from '@/components/Drawer'; | |
| 72 | import Icon from "@/components/Icon/Icon.vue"; | |
| 7b684b | 73 | import {Alert, Col, Row, Tooltip} from "ant-design-vue"; |
| S | 74 | // import Content from "./drawer-form/index.vue"; |
| 75 | import {computed, ref, unref} from "vue"; | |
| 76 | import {getMenuList} from "@/api/demo/system"; | |
| 77 | import {TreeItem} from "@/components/Tree"; | |
| 78 | import {BasicForm, useForm} from "@/components/Form"; | |
| 7450a2 | 79 | import {schemas} from './drawerFormData' |
| S | 80 | import {schemas as schemas2} from './drawerContacterFormData' |
| b5c161 | 81 | import {useFormBaseData} from '@/store/modules/formBaseData'; |
| ec4248 | 82 | |
| S | 83 | const emit = defineEmits(['success', 'register']); |
| 7b684b | 84 | const isUpdate = ref(true); |
| S | 85 | const getTitle = computed(() => (!unref(isUpdate) ? '新建线索' : '编辑线索')); |
| ec4248 | 86 | |
| S | 87 | // const [registerForm, { setFieldsValue, }] = useForm({ |
| 88 | // labelWidth: 90, | |
| 89 | // baseColProps: { span: 24 }, | |
| 90 | // schemas: formSchema, | |
| 91 | // showActionButtonGroup: false, | |
| 92 | // }); | |
| 93 | ||
| 94 | // const [registerDrawer] = useDrawer(); | |
| 95 | ||
| 7b684b | 96 | const modelRef = ref({}); |
| 7450a2 | 97 | // 左侧表单 |
| 7b684b | 98 | const [ |
| S | 99 | registerForm, |
| b5c161 | 100 | { resetFields, setFieldsValue,updateSchema,validate } |
| 7b684b | 101 | // { |
| S | 102 | // // setFieldsValue, |
| 103 | // // setProps | |
| 104 | // }, | |
| 105 | ] = useForm({ | |
| 106 | layout: 'vertical', | |
| 107 | // labelWidth: 100, | |
| 108 | showAdvancedButton: true, //开启折叠 | |
| 109 | autoAdvancedLine: 9, // 超过多少行折叠 | |
| 110 | alwaysShowLines: 8, // 始终显示多少行 | |
| 111 | schemas, | |
| 112 | // showActionButtonGroup: false, // 默认显示操作按钮，开启才会显示折叠按钮 | |
| 113 | showResetButton:false, // 隐藏重置按钮 | |
| 114 | showSubmitButton:false, // 隐藏提交按钮 | |
| 115 | actionColOptions: { | |
| 116 | span: 24, | |
| 117 | }, | |
| 118 | }); | |
| b5c161 | 119 | |
| S | 120 | const userBaseDataStore= useFormBaseData(); |
| 121 | let baseData = userBaseDataStore.getFormBaseData; | |
| 122 | Logger.log('更新 getFormBaseData..', baseData); | |
| 123 | ||
| 7450a2 | 124 | |
| S | 125 | // 右侧表单 |
| 126 | const [ | |
| 127 | registerForm2, | |
| 128 | { resetFields:resetFields2, setFieldsValue:setFieldsValue2, validate:validate2 } | |
| 129 | // { | |
| 130 | // // setFieldsValue, | |
| 131 | // // setProps | |
| 132 | // }, | |
| 133 | ] = useForm({ | |
| 134 | layout: 'vertical', | |
| 135 | // labelWidth: 100, | |
| 136 | showAdvancedButton: true, //开启折叠 | |
| 137 | autoAdvancedLine: 5, // 超过多少行折叠 | |
| 138 | alwaysShowLines: 4, // 始终显示多少行 | |
| 139 | schemas:schemas2, | |
| 140 | // showActionButtonGroup: false, // 默认显示操作按钮，开启才会显示折叠按钮 | |
| 141 | showResetButton:false, // 隐藏重置按钮 | |
| 142 | showSubmitButton:false, // 隐藏提交按钮 | |
| 143 | actionColOptions: { | |
| 144 | span: 24, | |
| 145 | }, | |
| 146 | }); | |
| 147 | ||
| 148 | ||
| 149 | const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { | |
| 150 | Logger.log('打开了DrawerForm', data); | |
| 151 | isUpdate.value = !!data?.isUpdate; | |
| b5c161 | 152 | |
| S | 153 | Logger.log('更新 getFormBaseData.. 年采购额', baseData.annualProcurement); |
| 154 | updateSchema({ | |
| 155 | field: 'annualPurchaseAmount', | |
| 156 | componentProps: { | |
| 157 | // 修改baseData.annualProcurement内数据参数名，name修改为label,id修改为value | |
| 158 | options: baseData.annualProcurement.map((item) => ({ | |
| 159 | label: item.name, | |
| 160 | value: item.id, | |
| 161 | })), | |
| 162 | // resultField: 'list', | |
| 163 | labelField: 'name', | |
| 164 | valueField: 'id', | |
| 165 | }, | |
| 166 | }); | |
| 167 | ||
| 7450a2 | 168 | // // 方式1 |
| S | 169 | // setFieldsValue({ |
| 170 | // field2: data.data, | |
| 171 | // field1: data.info, | |
| 172 | // }); | |
| 173 | ||
| 174 | // setDrawerProps({ confirmLoading: true }); | |
| 175 | // setTimeout(() => { | |
| 176 | // setDrawerProps({ confirmLoading: false }); | |
| 177 | // }, 1000); | |
| 178 | ||
| 179 | resetFields(); | |
| 180 | resetFields2(); | |
| 181 | if (unref(isUpdate)) { | |
| 182 | setFieldsValue({ | |
| 183 | ...data.record, | |
| 184 | }); | |
| 185 | setFieldsValue2({ | |
| 186 | ...data.record, | |
| 187 | }); | |
| 188 | } | |
| 189 | }); | |
| 190 | ||
| 191 | ||
| 192 | async function handleSubmit() { | |
| 193 | try { | |
| 194 | // const values = await validate(); | |
| 195 | const [values, values2] = await Promise.all([validate(), validate2()]); | |
| 196 | ||
| 197 | // const values = getFieldsValue(); | |
| 198 | Logger.log('点击submit 左侧表单values:',values); | |
| 199 | Logger.log('点击submit 右侧表单values2:', values2); | |
| 200 | setDrawerProps({ confirmLoading: true }); | |
| 201 | // TODO custom api | |
| 202 | ||
| 203 | closeDrawer(); | |
| 204 | emit('success'); | |
| 205 | } finally { | |
| 206 | setDrawerProps({ confirmLoading: false }); | |
| 207 | } | |
| 208 | } | |
| 209 | ||
| 210 | ||
| 211 | ||
| 212 | ||
| 7b684b | 213 | const prefixCls = 'clues-drawer'; |
| S | 214 | // 关闭提示信息 |
| 215 | const visible = ref<boolean>(true); | |
| 216 | const handleClose = () => { | |
| 217 | visible.value = false; | |
| 218 | }; | |
| ec4248 | 219 | </script> |
