初始代码
This commit is contained in:
wangmingwei
457
src/views/crm/crmlead/Form.vue
Normal file
457
src/views/crm/crmlead/Form.vue
Normal file
@@ -0,0 +1,457 @@
|
||||
<template>
|
||||
<BasicDrawer v-bind="$attrs" @register="registerDrawer" width="800px" showFooter
|
||||
:cancelText="t('common.cancelText','取消')"
|
||||
:okText="t('common.okText','确定')"
|
||||
@ok="handleSubmit" :closeFunc="onClose">
|
||||
<template #title>
|
||||
<a-space :size="10">
|
||||
<div class="text-16px font-medium">{{ title }}</div>
|
||||
<a-space-compact size="small" block v-if="dataForm.id">
|
||||
<a-tooltip :title="t('common.prevRecord')">
|
||||
<a-button size="small" :disabled="getPrevDisabled" @click="handlePrev">
|
||||
<i class="icon-ym icon-ym-caret-left text-10px"></i>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip :title="t('common.nextRecord')">
|
||||
<a-button size="small" :disabled="getNextDisabled" @click="handleNext">
|
||||
<i class="icon-ym icon-ym-caret-right text-10px"></i>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space-compact>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #insertFooter>
|
||||
<div class="float-left mt-5px">
|
||||
<yunzhupaasCheckboxSingle v-model:value="submitType" :label="continueText" />
|
||||
</div>
|
||||
</template>
|
||||
<a-row class="p-10px dynamic-form ">
|
||||
<!-- 表单 -->
|
||||
<a-form :colon="false" size="middle" layout= "horizontal"
|
||||
labelAlign= "right"
|
||||
:labelCol="{ style: { width: '100px' } }" :model="dataForm" :rules="dataRule" ref="formRef" >
|
||||
<a-row :gutter="15">
|
||||
<!-- 具体表单 -->
|
||||
<a-col :span="24" class="ant-col-item" v-if="hasFormP('lead_name')"
|
||||
>
|
||||
<a-form-item
|
||||
name="lead_name" >
|
||||
<template #label>线索名称
|
||||
</template> <YunzhupaasInput v-model:value="dataForm.lead_name" @change="changeData('lead_name',-1)"
|
||||
placeholder="请输入线索名称" :maxlength="50" :allowClear='true' :style='{"width":"100%"}' :maskConfig = "maskConfig.lead_name" :showCount = "false" >
|
||||
</YunzhupaasInput>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" class="ant-col-item" v-if="hasFormP('mobile')"
|
||||
>
|
||||
<a-form-item
|
||||
name="mobile" >
|
||||
<template #label>手机号
|
||||
</template> <YunzhupaasInput v-model:value="dataForm.mobile" @change="changeData('mobile',-1)"
|
||||
placeholder="请输入手机号" :maxlength="11" :allowClear='true' :style='{"width":"100%"}' :maskConfig = "maskConfig.mobile" :showCount = "false" >
|
||||
</YunzhupaasInput>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" class="ant-col-item" v-if="hasFormP('email')"
|
||||
>
|
||||
<a-form-item
|
||||
name="email" >
|
||||
<template #label>邮箱
|
||||
</template> <YunzhupaasInput v-model:value="dataForm.email" @change="changeData('email',-1)"
|
||||
placeholder="请输入邮箱" :maxlength="50" :allowClear='true' :style='{"width":"100%"}' :maskConfig = "maskConfig.email" :showCount = "false" >
|
||||
</YunzhupaasInput>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" class="ant-col-item" v-if="hasFormP('lead_status')"
|
||||
>
|
||||
<a-form-item
|
||||
name="lead_status" >
|
||||
<template #label>状态
|
||||
</template> <YunzhupaasSelect v-model:value="dataForm.lead_status" @change="changeData('lead_status',-1)"
|
||||
placeholder="请选择状态" :templateJson="state.interfaceRes.lead_status" :allowClear='true' :style='{"width":"100%"}' :showSearch='false' :options="optionsObj.lead_statusOptions" :fieldNames="optionsObj.lead_statusProps"
|
||||
>
|
||||
</YunzhupaasSelect>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" class="ant-col-item" v-if="hasFormP('sales_id')"
|
||||
>
|
||||
<a-form-item
|
||||
name="sales_id" >
|
||||
<template #label>销售人员
|
||||
</template> <YunzhupaasUsersSelect v-model:value="dataForm.sales_id" @change="changeData('sales_id',-1)"
|
||||
placeholder="请选择销售人员" :allowClear='true' :style='{"width":"100%"}' selectType="all" >
|
||||
</YunzhupaasUsersSelect>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" class="ant-col-item" v-if="hasFormP('customer_source')"
|
||||
>
|
||||
<a-form-item
|
||||
name="customer_source" >
|
||||
<template #label>来源
|
||||
</template> <YunzhupaasSelect v-model:value="dataForm.customer_source" @change="changeData('customer_source',-1)"
|
||||
placeholder="请选择来源" :templateJson="state.interfaceRes.customer_source" :allowClear='true' :style='{"width":"100%"}' :showSearch='false' :options="optionsObj.customer_sourceOptions" :fieldNames="optionsObj.customer_sourceProps"
|
||||
>
|
||||
</YunzhupaasSelect>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24" class="ant-col-item" v-if="hasFormP('remark')"
|
||||
>
|
||||
<a-form-item
|
||||
name="remark" >
|
||||
<template #label>备注
|
||||
</template> <YunzhupaasTextarea v-model:value="dataForm.remark" @change="changeData('remark',-1)"
|
||||
placeholder="请输入备注" :maxlength="200" :allowClear='true' :style='{"width":"100%"}' :autoSize='{"minRows":4,"maxRows":4}' :showCount = "false" >
|
||||
</YunzhupaasTextarea>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!-- 表单结束 -->
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-row>
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { create, update, getInfo } from './helper/api';
|
||||
import { reactive, toRefs, nextTick, ref, unref, computed,toRaw, inject } from 'vue';
|
||||
import { BasicDrawer, useDrawer } from '@/components/Drawer';
|
||||
import { yunzhupaasRelationForm } from '@/components/yunzhupaas';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { useI18n } from '@/hooks/web/useI18n';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
import { thousandsFormat , getDateTimeUnit, getTimeUnit} from '@/utils/yunzhupaas';
|
||||
import { getDictionaryDataSelector } from '@/api/systemData/dictionary';
|
||||
import { getDataInterfaceRes } from '@/api/systemData/dataInterface';
|
||||
import dayjs from 'dayjs';
|
||||
// 表单权限
|
||||
import { usePermission } from '@/hooks/web/usePermission';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { buildUUID } from '@/utils/uuid';
|
||||
import { CaretRightOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
|
||||
interface State {
|
||||
dataForm: any;
|
||||
tableRows: any;
|
||||
dataRule: any;
|
||||
optionsObj: any;
|
||||
childIndex: any;
|
||||
isEdit: any;
|
||||
interfaceRes: any;
|
||||
//可选范围默认值
|
||||
ableAll: any;
|
||||
//掩码配置
|
||||
maskConfig:any;
|
||||
//定位属性
|
||||
locationScope:any;
|
||||
extraOptions: any;
|
||||
title: string;
|
||||
continueText: string; allList: any[];
|
||||
currIndex: number;
|
||||
isContinue: boolean;
|
||||
submitType: number;
|
||||
showContinueBtn: boolean;
|
||||
}
|
||||
|
||||
const emit = defineEmits(['reload']);
|
||||
const getLeftTreeActiveInfo: (() => any) | null = inject('getLeftTreeActiveInfo', null);
|
||||
const userStore = useUserStore();
|
||||
const userInfo = userStore.getUserInfo;
|
||||
const { createMessage, createConfirm } = useMessage();
|
||||
const { t } = useI18n();
|
||||
const [registerDrawer, { openDrawer, setDrawerProps }] = useDrawer();
|
||||
const formRef = ref<FormInstance>();
|
||||
const state = reactive<State>({
|
||||
dataForm: {
|
||||
lead_name:undefined,
|
||||
mobile:undefined,
|
||||
email:undefined,
|
||||
lead_status:'Unassigned',
|
||||
sales_id:undefined,
|
||||
customer_source:'',
|
||||
remark:undefined,
|
||||
version: 0,
|
||||
},
|
||||
|
||||
tableRows:{
|
||||
},
|
||||
|
||||
dataRule: {
|
||||
lead_name: [
|
||||
{
|
||||
required: true,
|
||||
message: t('sys.validate.textRequiredSuffix','不能为空'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
],
|
||||
mobile: [
|
||||
{
|
||||
required: true,
|
||||
message: t('sys.validate.textRequiredSuffix','不能为空'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
pattern: /^1[3456789]\d{9}$/,
|
||||
message: t('sys.validate.mobilePhone','请输入正确的手机号码'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
],
|
||||
email: [
|
||||
{
|
||||
pattern: /^[a-z0-9]+([._\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,
|
||||
message: t('sys.validate.email','请输入正确的邮箱'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
],
|
||||
lead_status: [
|
||||
{
|
||||
required: true,
|
||||
message: t('sys.validate.arrayRequiredPrefix ','请至少选择一个'),
|
||||
trigger: 'change'
|
||||
},
|
||||
],
|
||||
sales_id: [
|
||||
{
|
||||
required: true,
|
||||
message: t('sys.validate.arrayRequiredPrefix ','请至少选择一个'),
|
||||
trigger: 'change'
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
optionsObj:{
|
||||
lead_statusOptions:[{"fullName":"待分配","id":"Unassigned"},{"fullName":"跟进中","id":"InProgress"},{"fullName":"已转换","id":"Converted"},{"fullName":"无效","id":"Invalid"}],
|
||||
lead_statusProps:{"label":"fullName","value":"id" },
|
||||
customer_sourceOptions:[],
|
||||
customer_sourceProps:{"label":"fullName","value":"enCode" },
|
||||
},
|
||||
|
||||
childIndex: -1,
|
||||
isEdit: false,
|
||||
interfaceRes: {"lead_status":[],"mobile":[],"lead_name":[],"customer_source":[],"remark":[],"sales_id":[],"email":[]},
|
||||
//可选范围默认值
|
||||
ableAll:{
|
||||
},
|
||||
|
||||
//掩码配置
|
||||
maskConfig:{
|
||||
lead_name: {"prefixType":1,"useUnrealMask":false,"maskType":1,"unrealMaskLength":1,"prefixLimit":0,"suffixLimit":0,"filler":"*","prefixSpecifyChar":"","suffixType":1,"ignoreChar":"","suffixSpecifyChar":""} ,
|
||||
mobile: {"prefixType":1,"useUnrealMask":false,"maskType":1,"unrealMaskLength":1,"prefixLimit":0,"suffixLimit":0,"filler":"*","prefixSpecifyChar":"","suffixType":1,"ignoreChar":"","suffixSpecifyChar":""} ,
|
||||
email: {"prefixType":1,"useUnrealMask":false,"maskType":1,"unrealMaskLength":1,"prefixLimit":0,"suffixLimit":0,"filler":"*","prefixSpecifyChar":"","suffixType":1,"ignoreChar":"","suffixSpecifyChar":""} ,
|
||||
},
|
||||
|
||||
//定位属性
|
||||
locationScope:{
|
||||
},
|
||||
|
||||
extraOptions:{
|
||||
},
|
||||
|
||||
title: "",
|
||||
continueText: "", allList: [],
|
||||
currIndex: 0,
|
||||
isContinue: false,
|
||||
submitType: 0,
|
||||
showContinueBtn: true ,
|
||||
});
|
||||
const { title, continueText, showContinueBtn, dataRule, dataForm, optionsObj, ableAll, maskConfig,submitType } = toRefs(state);
|
||||
|
||||
const getPrevDisabled = computed(() => state.currIndex === 0);
|
||||
const getNextDisabled = computed(() => state.currIndex === state.allList.length - 1);
|
||||
// 表单权限
|
||||
const { hasFormP } = usePermission();
|
||||
|
||||
defineExpose({ init });
|
||||
|
||||
function init(data) {
|
||||
state.submitType = 0;
|
||||
state.isContinue = false;
|
||||
state.title = !data.id ? t('common.add2Text','新增') : t('common.editText','编辑');
|
||||
state.continueText = !data.id ? t('common.continueAndAddText','确定并新增') : t('common.continueText','确定并继续'); setFormProps({ continueLoading: false });
|
||||
state.dataForm.id = data.id;
|
||||
openDrawer();
|
||||
state.allList = data.allList;
|
||||
state.currIndex = state.allList.length && data.id ? state.allList.findIndex((item) => item.id === data.id) : 0;
|
||||
nextTick(() => {
|
||||
getForm().resetFields();
|
||||
setTimeout(initData, 0);
|
||||
});
|
||||
}
|
||||
function initData() {
|
||||
changeLoading(true);
|
||||
if (state.dataForm.id) {
|
||||
getData(state.dataForm.id);
|
||||
} else {
|
||||
//初始化options
|
||||
getcustomer_sourceOptions();
|
||||
|
||||
// 设置默认值
|
||||
state.dataForm={
|
||||
lead_name:undefined,
|
||||
mobile:undefined,
|
||||
email:undefined,
|
||||
lead_status:'Unassigned',
|
||||
sales_id:undefined,
|
||||
customer_source:'',
|
||||
remark:undefined,
|
||||
version: 0,
|
||||
};
|
||||
if (getLeftTreeActiveInfo) state.dataForm = {...state.dataForm, ...(getLeftTreeActiveInfo() || {}) };
|
||||
state.childIndex = -1;
|
||||
changeLoading(false);
|
||||
}
|
||||
}
|
||||
function getForm() {
|
||||
const form = unref(formRef);
|
||||
if (!form) {
|
||||
throw new Error('form is null!');
|
||||
}
|
||||
return form;
|
||||
}
|
||||
function getData(id) {
|
||||
getInfo(id).then((res) => {
|
||||
state.dataForm = res.data || {};
|
||||
getcustomer_sourceOptions();
|
||||
|
||||
state.childIndex = -1;
|
||||
changeLoading(false);
|
||||
});
|
||||
}
|
||||
async function handleSubmit(type) {
|
||||
try {
|
||||
const values = await getForm()?.validate();
|
||||
if (!values) return;
|
||||
|
||||
|
||||
setFormProps({ confirmLoading: true });
|
||||
const formMethod = state.dataForm.id ? update : create;
|
||||
formMethod(state.dataForm)
|
||||
.then((res) => {
|
||||
createMessage.success(res.msg);
|
||||
setFormProps({ confirmLoading: false });
|
||||
if (state.submitType == 1) {
|
||||
initData();
|
||||
state.isContinue = true;
|
||||
} else {
|
||||
setFormProps({ open: false });
|
||||
emit('reload');
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
setFormProps({ confirmLoading: false });
|
||||
});
|
||||
} catch (_) {}
|
||||
}
|
||||
function handlePrev() {
|
||||
state.currIndex--;
|
||||
handleGetNewInfo();
|
||||
}
|
||||
function handleNext() {
|
||||
state.currIndex++;
|
||||
handleGetNewInfo();
|
||||
}
|
||||
function handleGetNewInfo() {
|
||||
changeLoading(true);
|
||||
getForm().resetFields();
|
||||
const id = state.allList[state.currIndex].id;
|
||||
getData(id);
|
||||
}
|
||||
function setFormProps(data) {
|
||||
setDrawerProps(data);
|
||||
}
|
||||
function changeLoading(loading) {
|
||||
setDrawerProps({ loading });
|
||||
}
|
||||
async function onClose() {
|
||||
if (state.isContinue) emit('reload');
|
||||
return true;
|
||||
}
|
||||
|
||||
function changeData(model, index) {
|
||||
state.isEdit = false
|
||||
state.childIndex = index
|
||||
for (let key in state.interfaceRes) {
|
||||
if (key != model) {
|
||||
let faceReList = state.interfaceRes[key]
|
||||
for (let i = 0; i < faceReList.length; i++) {
|
||||
let relationField = faceReList[i].relationField;
|
||||
if(relationField){
|
||||
let modelAll = relationField.split('-');
|
||||
let faceMode = '';
|
||||
let faceMode2 = modelAll.length == 2?modelAll[0].substring(0, modelAll[0].length-4) +modelAll[1]:""
|
||||
for (let i = 0; i < modelAll.length; i++) {
|
||||
faceMode += modelAll[i];
|
||||
}
|
||||
if (faceMode == model || faceMode2 == model ) {
|
||||
let options = 'get' + key + 'Options';
|
||||
eval(options)(true);
|
||||
changeData(key, index)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function changeDataFormData(type, data, model,index,defaultValue) {
|
||||
if(!state.isEdit) {
|
||||
if (type == 2) {
|
||||
for (let i = 0; i < state.dataForm[data].length; i++) {
|
||||
if (index == -1) {
|
||||
state.dataForm[data][i][model] = defaultValue
|
||||
} else if (index == i) {
|
||||
state.dataForm[data][i][model] = defaultValue
|
||||
}
|
||||
}
|
||||
} else {
|
||||
state.dataForm[data] = defaultValue
|
||||
}
|
||||
}
|
||||
}
|
||||
//数据选项--数据字典初始化方法
|
||||
function getcustomer_sourceOptions() {
|
||||
getDictionaryDataSelector('797256993944371205').then(res => {
|
||||
state.optionsObj.customer_sourceOptions = res.data.list
|
||||
})
|
||||
}
|
||||
function getRelationDate(timeRule, timeType, timeTarget, timeValueData, dataValue) {
|
||||
let timeDataValue: any = null;
|
||||
let timeValue = Number(timeValueData);
|
||||
if (timeRule) {
|
||||
if (timeType == 1) {
|
||||
timeDataValue = timeValue;
|
||||
} else if (timeType == 2) {
|
||||
timeDataValue = dataValue;
|
||||
} else if (timeType == 3) {
|
||||
timeDataValue = new Date().getTime();
|
||||
} else if (timeType == 4 || timeType == 5) {
|
||||
const type = getTimeUnit(timeTarget);
|
||||
const method = timeType == 4 ? 'subtract' : 'add';
|
||||
timeDataValue = dayjs()[method](timeValue, type).valueOf();
|
||||
}
|
||||
}
|
||||
return timeDataValue;
|
||||
}
|
||||
function getRelationTime(timeRule, timeType, timeTarget, timeValue, formatType, dataValue) {
|
||||
let format = formatType == 'HH:mm' ? 'HH:mm:00' : formatType;
|
||||
let timeDataValue: any = null;
|
||||
if (timeRule) {
|
||||
if (timeType == 1) {
|
||||
timeDataValue = timeValue || '00:00:00';
|
||||
if (timeDataValue.split(':').length == 3) {
|
||||
timeDataValue = timeDataValue;
|
||||
} else {
|
||||
timeDataValue = timeDataValue + ':00';
|
||||
}
|
||||
} else if (timeType == 2) {
|
||||
timeDataValue = dataValue;
|
||||
} else if (timeType == 3) {
|
||||
timeDataValue = dayjs().format(format);
|
||||
} else if (timeType == 4 || timeType == 5) {
|
||||
const type = getTimeUnit(timeTarget + 3);
|
||||
const method = timeType == 4 ? 'subtract' : 'add';
|
||||
timeDataValue = dayjs()[method](timeValue, type).format(format);
|
||||
}
|
||||
}
|
||||
return timeDataValue;
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user