xpz2018
10 months ago
12 changed files with 1166 additions and 499 deletions
Unified View
Diff Options
-
2package.json
-
6src/api/clue/index.ts
-
2src/api/sys/user.ts
-
28src/enums/customerEnum.ts
-
4src/layouts/default/header/index.vue
-
400src/views/clue/clueList/data.ts
-
70src/views/clue/clueList/index.vue
-
76src/views/clue/clueList/modal.vue
-
659src/views/clue/cluePool/data.ts
-
187src/views/clue/cluePool/index.vue
-
196src/views/clue/cluePool/modal.vue
-
35src/views/clue/customer/index.vue
@ -1,76 +0,0 @@ |
|||||
<template> |
|
||||
<BasicModal v-bind="$attrs" :width="960" @ok="handleOk" @register="registerModal"> |
|
||||
<BasicForm @register="registerForm" style="padding: 16px 48px 0px 0px;"> |
|
||||
<template #profilePhoto="{ model, field }"> |
|
||||
<CropperAvatar :value="model[field]" @change="uploadAvatarAfter"/> |
|
||||
</template> |
|
||||
</BasicForm> |
|
||||
</BasicModal> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import { ref, unref } from 'vue' |
|
||||
import { modalFormSchema, basicInfoData } from './data' |
|
||||
import { useMessage } from '/@/hooks/web/useMessage' |
|
||||
import { BasicForm, useForm } from '/@/components/Form' |
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal' |
|
||||
import { CropperAvatar } from '/@/components/Cropper'; |
|
||||
import { createClueRecord, editClueRecord } from '/@/api/clue' |
|
||||
|
|
||||
const [registerForm, { setFieldsValue, resetFields, validate, getFieldsValue, updateSchema }] = |
|
||||
useForm({ |
|
||||
labelWidth: 120, |
|
||||
schemas: modalFormSchema, |
|
||||
baseColProps: { span: 22 }, |
|
||||
showActionButtonGroup: false, |
|
||||
}) |
|
||||
|
|
||||
const ifUpdate = ref<boolean>(false) |
|
||||
const [registerModal, { setModalProps }] = useModalInner(async (data) => { |
|
||||
await resetFields() |
|
||||
ifUpdate.value = !!data.ifUpdate |
|
||||
setModalProps({ |
|
||||
minHeight: 50, |
|
||||
confirmLoading: false, |
|
||||
title: ifUpdate.value ? '编辑' : '新增线索', |
|
||||
}) |
|
||||
await updateSchema({ |
|
||||
field: 'franchiseFee', |
|
||||
componentProps: { |
|
||||
disabled: ifUpdate.value, |
|
||||
}, |
|
||||
}) |
|
||||
if (unref(ifUpdate)) { |
|
||||
await setFieldsValue({ |
|
||||
...data.record, |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
function uploadAvatarAfter(value) { |
|
||||
//修改表单的值 |
|
||||
setFieldsValue({ |
|
||||
profilePhoto: value, |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
const { createMessage } = useMessage() |
|
||||
const emits = defineEmits(['success']) |
|
||||
async function handleOk() { |
|
||||
try { |
|
||||
await validate() |
|
||||
const values: any = getFieldsValue() |
|
||||
console.log({...values, ...basicInfoData.value}) |
|
||||
|
|
||||
setModalProps({ confirmLoading: true }) |
|
||||
const fun = unref(ifUpdate) ? editClueRecord : createClueRecord |
|
||||
await fun({...values, ...basicInfoData.value}) |
|
||||
createMessage.success(`${unref(ifUpdate) ? '编辑' : '新增'}成功！`) |
|
||||
emits('success') |
|
||||
} finally { |
|
||||
setModalProps({ confirmLoading: false }) |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang="less"></style> |
|
||||
@ -0,0 +1,196 @@ |
|||||
|
<template> |
||||
|
<BasicModal v-bind="$attrs" :width="960" @ok="handleOk" @register="registerModal"> |
||||
|
|
||||
|
<template v-if="!ifUpdate" #title> |
||||
|
<span style="margin: 0 5px">-</span> |
||||
|
</template> |
||||
|
|
||||
|
<div v-if="ifUpdate"> |
||||
|
<Result title="请将模板Excel文件导入" v-if="tableListRef.length == 0"> |
||||
|
<template #icon> |
||||
|
<Icon icon="ant-design:cloud-upload-outlined" size="150px" color="#d6d6d6"/> |
||||
|
</template> |
||||
|
<template #extra> |
||||
|
<ImpExcel @success="loadDataSuccess" dateFormat="YYYY-MM-DD"> |
||||
|
<Button>导入Excel</Button> |
||||
|
</ImpExcel> |
||||
|
</template> |
||||
|
</Result> |
||||
|
<BasicTable v-for="(table, index) in tableListRef" |
||||
|
:key="index" |
||||
|
:columns="table.columns" |
||||
|
:canResize="false" |
||||
|
:dataSource="table.dataSource" |
||||
|
:pagination="{ pageSize: 10 }" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flex-col" v-else> |
||||
|
<Tabs v-model:activeKey="activeKey2" :animated="false"> |
||||
|
<TabPane key="1" tab="个人资料"> |
||||
|
<BasicForm @register="registerForm" style="padding: 16px 48px 0px 0px;" > |
||||
|
<template #profilePhoto="{ model, field }"> |
||||
|
<CropperAvatar :value="model[field]" @change="uploadAvatarAfter"/> |
||||
|
</template> |
||||
|
</BasicForm> |
||||
|
</TabPane> |
||||
|
<TabPane key="2" tab="择偶要求"> |
||||
|
<BasicForm @register="registerForm3" style="padding: 16px 48px 0px 0px;"> |
||||
|
<template #age="{ model }"> |
||||
|
<div class="flex-row-center-start"> |
||||
|
<InputNumber placeholder="请输入" :min="0" v-model:value="model['minAge']" /> |
||||
|
<span style="margin: 0 5px">-</span> |
||||
|
<InputNumber placeholder="请输入" :min="0" v-model:value="model['maxAge']" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #height="{ model }"> |
||||
|
<div class="flex-row-center-start"> |
||||
|
<InputNumber placeholder="请输入" :min="0" v-model:value="model['minHeight']" /> |
||||
|
<span style="margin: 0 5px">-</span> |
||||
|
<InputNumber placeholder="请输入" :min="0" v-model:value="model['maxHeight']" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #income="{ model }"> |
||||
|
<div class="flex-row-center-start"> |
||||
|
<InputNumber placeholder="请输入" :min="0" v-model:value="model['minIncome']" /> |
||||
|
<span style="margin: 0 5px">-</span> |
||||
|
<InputNumber placeholder="请输入" :min="0" v-model:value="model['maxIncome']" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
</BasicForm> |
||||
|
</TabPane> |
||||
|
</Tabs> |
||||
|
</div> |
||||
|
|
||||
|
<template v-if="ifUpdate" #footer> |
||||
|
<div class="flex-row-center-space"> |
||||
|
<ImpExcel @success="loadDataSuccess" dateFormat="YYYY-MM-DD"> |
||||
|
<Button type="primary">导入Excel</Button> |
||||
|
</ImpExcel> |
||||
|
<div class="flex-row-center-start"> |
||||
|
<Button @click="close">取消</Button> |
||||
|
<Button type="primary" @click="handleOk">确定</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</BasicModal> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, unref } from 'vue' |
||||
|
import { Tabs, TabPane, Button, Result, InputNumber } from 'ant-design-vue' |
||||
|
import Icon from '/@/components/Icon' |
||||
|
import { modalFormSchema, basicInfoData, demandMarriageSchema, demandMarriageMoreData } from './data' |
||||
|
import { ImpExcel, ExcelData } from '/@/components/Excel'; |
||||
|
import { BasicTable, BasicColumn } from '/@/components/Table' |
||||
|
import { useMessage } from '/@/hooks/web/useMessage' |
||||
|
import { BasicForm, useForm } from '/@/components/Form' |
||||
|
import { BasicModal, useModalInner } from '/@/components/Modal' |
||||
|
import { CropperAvatar } from '/@/components/Cropper'; |
||||
|
import { createClueRecord, editClueRecord } from '/@/api/clue' |
||||
|
|
||||
|
const activeKey2 = ref<string>('1') |
||||
|
|
||||
|
const [registerForm, { setFieldsValue, resetFields, validate, getFieldsValue, updateSchema }] = |
||||
|
useForm({ |
||||
|
labelWidth: 120, |
||||
|
schemas: modalFormSchema, |
||||
|
baseColProps: { span: 22 }, |
||||
|
showActionButtonGroup: false, |
||||
|
}) |
||||
|
|
||||
|
const ifUpdate = ref<boolean>(false) |
||||
|
const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => { |
||||
|
ifUpdate.value = !!data.ifUpdate |
||||
|
if(ifUpdate.value){ |
||||
|
tableListRef.value = []; |
||||
|
} else { |
||||
|
demandMarriageMoreData.value = {} |
||||
|
basicInfoData.value = {} |
||||
|
activeKey2.value = '1' |
||||
|
await resetFields() |
||||
|
// await setFieldsValue3() |
||||
|
} |
||||
|
setModalProps({ |
||||
|
minHeight: 50, |
||||
|
confirmLoading: false, |
||||
|
title: ifUpdate.value ? '导入线索' : '新增线索', |
||||
|
}) |
||||
|
await updateSchema({ |
||||
|
field: 'franchiseFee', |
||||
|
componentProps: { |
||||
|
disabled: ifUpdate.value, |
||||
|
}, |
||||
|
}) |
||||
|
if (unref(ifUpdate)) { |
||||
|
await setFieldsValue({ |
||||
|
...data.record, |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// 择偶标准表单配置 |
||||
|
const [registerForm3, { getFieldsValue: getFieldsValue3, setFieldsValue: setFieldsValue3 }] = |
||||
|
useForm({ |
||||
|
labelWidth: 100, |
||||
|
schemas: demandMarriageSchema, |
||||
|
baseColProps: { span: 22 }, |
||||
|
showActionButtonGroup: false, |
||||
|
}) |
||||
|
|
||||
|
function close(){ |
||||
|
closeModal() |
||||
|
} |
||||
|
|
||||
|
function uploadAvatarAfter(value) { |
||||
|
//修改表单的值 |
||||
|
setFieldsValue({ |
||||
|
profilePhoto: value, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
const { createMessage } = useMessage() |
||||
|
const emits = defineEmits(['success']) |
||||
|
async function handleOk() { |
||||
|
try { |
||||
|
await validate() |
||||
|
const values: any = getFieldsValue() |
||||
|
console.log({...values, ...basicInfoData.value}) |
||||
|
|
||||
|
setModalProps({ confirmLoading: true }) |
||||
|
const fun = unref(ifUpdate) ? editClueRecord : createClueRecord |
||||
|
await fun({...values, ...basicInfoData.value, channelType: 1}) |
||||
|
createMessage.success(`${unref(ifUpdate) ? '编辑' : '新增'}成功！`) |
||||
|
emits('success') |
||||
|
} finally { |
||||
|
setModalProps({ confirmLoading: false }) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const tableListRef = ref<{ title: string; columns?: any[]; dataSource?: any[];}[]>([]); |
||||
|
|
||||
|
function loadDataSuccess(excelDataList: ExcelData[]) { |
||||
|
tableListRef.value = []; |
||||
|
console.log(excelDataList); |
||||
|
for (const excelData of excelDataList) { |
||||
|
const { |
||||
|
header, |
||||
|
results, |
||||
|
meta: { sheetName }, |
||||
|
} = excelData; |
||||
|
const columns: BasicColumn[] = []; |
||||
|
for (const title of header) { |
||||
|
columns.push({ title, dataIndex: title }); |
||||
|
} |
||||
|
tableListRef.value.push({ title: sheetName, dataSource: results, columns }); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="less"> |
||||
|
::v-deep .ant-input-number { |
||||
|
min-width: 80px; |
||||
|
width: 100% !important; |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save