pull/781/head
zy 2025-05-11 20:39:01 +08:00
parent f6c7154f1f
commit 5614e06f43
11 changed files with 339 additions and 242 deletions

View File

@ -108,7 +108,7 @@
<ContracExtension ref="contractExtensionFormRef" v-if="formData.changeItem == 3" :data="formData" />
<ContractStop ref="contractStopFormRef" :formData="formData" v-if="formData.changeItem == 4" />
<ContractAAuthorizedCompanyForm ref="contractAAuthorizedCompanyFormRef1" v-if="formData.changeItem == 5" :data="formData.contractAAuthorizedCompanys" />
<ContractForm ref="contractFormRef" :type="1" :formData="formData" v-if="formData.changeItem == 6" />
<ContractForm ref="contractFormRef" :type="1" :changeType="true" v-if="formData.changeItem == 6" />
</ContentWrap>
</el-form>
<div style="text-align: right">

View File

@ -16,17 +16,13 @@
<el-input v-model="formData.name" placeholder="请输入合同名称" />
</el-form-item>
</el-col>
<el-col :span="8" v-if="formType">
<el-form-item label="合同编号" prop="no">
<el-input disabled v-model="formData.no" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="客户名称" prop="customerId">
<el-select
v-model="formData.customerId"
placeholder="请选择客户名称"
:disabled="formType"
:disabled="!!formType"
@change="onCustomerChange"
class="w-1/1"
>
@ -39,6 +35,11 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="8" v-if="formType">
<el-form-item label="合同编号" prop="no">
<el-input disabled v-model="formData.no" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="报价单编号" prop="quotationId">
<el-select
@ -510,6 +511,7 @@ const { proxy }: any = getCurrentInstance();
const props = defineProps({
id: propTypes.number.def(undefined),
type: propTypes.number.def(undefined),
changeType: propTypes.number.def(undefined),//
})
const templateOptions = ref([])
const dialogVisible = ref(false) //
@ -609,6 +611,7 @@ const open = async (type: string) => {
// formLoading.value = true
try {
formData.value = await ContractApi.getContract(type)
console.log('%csrc/views/crm/contract/ContractForm.vue:614 object', 'color: #007acc;', formData.value);
} finally {
formLoading.value = false
}
@ -789,7 +792,7 @@ const onCustomerChange = async (customerId: string) => {
formData.value.partAddress = customerRes.partAddress;
formData.value.listingStatus = customerRes.listingStatus;
formData.value.legalPersonName = customerRes.legalPersonName;
formData.value.creditCode = customerRes.creditCode;
formData.value.creditNo = customerRes.creditNo;
formData.value.regType = customerRes.regType;
formData.value.financingInfo = customerRes.financingInfo;
formData.value.socialEmployeeNum = customerRes.socialEmployeeNum;
@ -829,10 +832,12 @@ const getContactOptions = computed(() =>
const route = useRoute();
onMounted(async () => {
formType.value = props.id || route.query.id
if (formType.value) await open(formType.value)
if(!props.changeType) {
console.log('%csrc/views/crm/contract/ContractForm.vue:835 props.id', 'color: #007acc;', props.id);
formType.value = props.id || route.query.id
if (formType.value) await open(formType.value)
}
//
customerList.value = await CustomerApi.getCustomerSimpleList()
//

View File

@ -13,13 +13,13 @@
v-model="formData.terminationDate"
type="date"
:disabled="!!type"
value-format="YYYY-MM-DD"
value-format="x"
placeholder="请选择终止日期"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="16">
<el-form-item label="终止原因" prop="terminationReason">
<el-radio-group v-model="formData.terminationReason" :disabled="!!type">
<el-radio :label="1">合同到期</el-radio>
@ -74,7 +74,7 @@ const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 12
const formType = ref('') // create - update -
const formData = ref({
terminationDate: undefined,
terminationDate: new Date(),
terminationReason: undefined,
note: undefined,
})

View File

@ -140,7 +140,7 @@
</el-col>
<el-col :span="8">
<el-form-item label="调整金额(元)" prop="changeAmount">
<el-input v-model="formData.changeAmount" oninput="value=value.match(/^\d+(?:\.\d{0,2})?/)" :disabled="!!type" placeholder="请输入调整金额(元)" @input="onChangeAmount" />
<el-input v-model="formData.changeAmount" :disabled="type" oninput="value=value.match(/^\d+(?:\.\d{0,2})?/)" placeholder="请输入调整金额(元)" @input="onChangeAmount" />
</el-form-item>
</el-col>
<el-col :span="8">
@ -154,7 +154,7 @@
v-model="formData.changeAmountDeadline"
value-format="YYYY-MM-DD"
type="date"
:disabled="!!type"
:disabled="type"
placeholder="请选择调整金额截止日期"
style="width: 100%"
/>
@ -262,7 +262,8 @@ const subTabsName = ref('quotationProduct')
const quotationProductFormRef = ref()
const props = defineProps<{
data: undefined
data: undefined,
type: undefined
}>()
watch(

View File

@ -27,7 +27,7 @@
</el-row>
<el-row>
<el-col :span="8">
<!-- <el-col :span="8">
<el-form-item label="上市情况" prop="customerId">
<el-select v-model="formData.customerId" :disabled="!!type" placeholder="请选择上市情况" @change="onCustomerChange">
<el-option
@ -38,13 +38,13 @@
/>
</el-select>
</el-form-item>
</el-col>
</el-col> -->
<!-- <el-col :span="8">
<el-form-item label="合作类型" prop="cooperationType">
<el-input v-model="formData.cooperationType" disabled />
</el-form-item>
</el-col> -->
<el-col :span="8">
<!-- <el-col :span="8">
<el-form-item label="融资信息" prop="companyType">
<el-select v-model="formData.customerId" :disabled="!!type" placeholder="请选择融资信息" @change="onCustomerChange">
<el-option
@ -55,63 +55,63 @@
/>
</el-select>
</el-form-item>
</el-col>
</el-col> -->
<el-col :span="8">
<el-form-item label="实缴资金" prop="paidInCapital">
<el-input v-model="formData.paidInCapital" disabled />
<el-input v-model="formData.actualCapital" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="参保人数" prop="insuredCount">
<el-input v-model="formData.insuredCount" disabled />
<el-input v-model="formData.socialEmployeeNum" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="被告记录" prop="defendantRecord">
<el-radio-group v-model="formData.defendantRecord" :disabled="true">
<el-radio :label="true"></el-radio>
<el-radio :label="false"></el-radio>
<el-radio :label="1"></el-radio>
<el-radio :label="0"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="经营异常" prop="businessAbnormal">
<el-radio-group v-model="formData.businessAbnormal" :disabled="true">
<el-radio :label="true"></el-radio>
<el-radio :label="false"></el-radio>
<el-form-item label="经营异常" prop="abnormalService">
<el-radio-group v-model="formData.abnormalService" :disabled="true">
<el-radio :label="1"></el-radio>
<el-radio :label="0"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="股权出质" prop="equityPledge">
<el-radio-group v-model="formData.equityPledge" :disabled="true">
<el-radio :label="true"></el-radio>
<el-radio :label="false"></el-radio>
<el-radio :label="1"></el-radio>
<el-radio :label="0"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="失信记录" prop="dishonestRecord">
<el-radio-group v-model="formData.dishonestRecord" :disabled="true">
<el-radio :label="true"></el-radio>
<el-radio :label="false"></el-radio>
<el-form-item label="失信记录" prop="dishonestyRecord">
<el-radio-group v-model="formData.dishonestyRecord" :disabled="true">
<el-radio :label="1"></el-radio>
<el-radio :label="0"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="融资记录" prop="financingRecord">
<el-radio-group v-model="formData.financingRecord" :disabled="true">
<el-radio :label="true"></el-radio>
<el-radio :label="false"></el-radio>
<el-form-item label="融资记录" prop="financeRecord">
<el-radio-group v-model="formData.financeRecord" :disabled="true">
<el-radio :label="1"></el-radio>
<el-radio :label="0"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="被执行记录" prop="enforcementRecord">
<el-radio-group v-model="formData.enforcementRecord" :disabled="true">
<el-radio :label="true"></el-radio>
<el-radio :label="false"></el-radio>
<el-form-item label="被执行记录" prop="judgmentRecord">
<el-radio-group v-model="formData.judgmentRecord" :disabled="true">
<el-radio :label="1"></el-radio>
<el-radio :label="0"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
@ -120,12 +120,12 @@
<el-row>
<el-col :span="8">
<el-form-item label="协议截止日" prop="agreementDeadline">
<el-form-item label="协议截止日" prop="endTime">
<el-date-picker
:disabled="!!type"
v-model="formData.agreementDeadline"
v-model="formData.endTime"
type="date"
value-format="YYYY-MM-DD"
value-format="x"
placeholder="请选择协议截止日"
style="width: 100%"
/>

View File

@ -28,8 +28,8 @@
<el-form-item label="客户名称" prop="customerId">
<el-select
v-model="formData.customerId"
disabled=""
placeholder="请选择客户"
disabled
class="w-1/1"
>
<el-option
@ -50,7 +50,7 @@
<el-form-item label="合同状态" prop="quotationId">
<el-select v-model="formData.auditStatus" disabled clearable placeholder="请选择合同状态">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
v-for="dict in getIntDictOptions(DICT_TYPE.CRM_AUDIT_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
@ -72,47 +72,45 @@
</el-col>
<el-col :span="24">
<el-form-item label="变更项目" prop="endTime">
<el-radio-group v-model="formData.radio" disabled>
<el-radio-group v-model="formData.changeItem" disabled >
<el-radio :value="1">额度</el-radio>
<el-radio :value="2">授权人</el-radio>
<el-radio :value="3">延期</el-radio>
<el-radio :value="4">终止</el-radio>
<el-radio :value="5">甲方关联单位</el-radio>
<el-radio :value="5">关联</el-radio>
<el-radio :value="6">重签</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<!-- 子表的表单 -->
<ContentWrap>
<ContractChangeLimit
v-if="formData.radio == 1"
:type="1"
v-if="formData.changeItem == 1"
ref="limitFormRef"
:formData="formData"
:disabled="disabled"
:data="formData"
:disabled="true"
/>
<div v-if="formData.radio == 2">
<div v-if="formData.changeItem == 2">
<ContentWrap style="border: none">
甲方现授权人信息
</ContentWrap>
<ContractAuthPersonInfo
:disabled="true"
ref="personDataRef"
:products="formData.contractAAuthorizedPersons"
/>
<!-- <ContentWrap style="border: none">
甲方授权人
</ContentWrap>
<ContractAAuthorizedCompanyForm ref="contractAAuthorizedCompanyFormRef" :contract-id="formData.id" /> -->
</div>
<ContracExtension ref="contractExtensionFormRef" :type="1" :formData="formData" v-if="formData.radio == 3" />
<ContractStop ref="contractStopFormRef" :type="1" :formData="formData" v-if="formData.radio == 4" />
<ContractAAuthorizedCompanyForm :type="1" ref="contractAAuthorizedCompanyFormRef1" v-if="formData.radio == 5" :contract-id="formData.id" />
<ContractForm ref="contractFormRef" :type="1" :id="formType" :formData="formData" v-if="formData.radio == 6" />
<ContracExtension ref="contractExtensionFormRef" v-if="formData.changeItem == 3" :disabled="true" :data="formData" />
<ContractStop ref="contractStopFormRef" :formData="formData" :disabled="true" v-if="formData.changeItem == 4" />
<ContractAAuthorizedCompanyForm ref="contractAAuthorizedCompanyFormRef1" :type="true" v-if="formData.changeItem == 5" :data="formData.contractAAuthorizedCompanys" />
<ContractForm ref="contractFormRef" :type="1" :id="formData.id" v-if="formData.changeItem == 6" />
</ContentWrap>
</el-form>
</ContentWrap>
</template>
<script lang="ts" setup>
@ -130,6 +128,7 @@ import ContracExtension from '@/views/crm/contract/components/ContractExtension.
import ContractStop from '@/views/crm/contract/components/ContracStop.vue'
import ContractProductForm from '@/views/crm/contract/components/ContractProductForm.vue'
import ContractAAuthorizedCompanyForm from '../components/ContractAAuthorizedCompanyForm.vue'
import ContractBAuthorizedPersonForm from '../components/ContractAAuthorizedPersonForm.vue'
import ContractForm from './ContractDetail.vue'
import { propTypes } from '@/utils/propTypes'
@ -137,7 +136,7 @@ const { t } = useI18n() // 国际化
const message = useMessage() //
const { proxy }: any = getCurrentInstance();
const props = defineProps({
id: propTypes.number.def(undefined)
id: propTypes.number.def(undefined),
})
const dialogVisible = ref(false) //
const dialogTitle = ref('') //
@ -180,6 +179,7 @@ const formData = ref({
partnerCompanyId: undefined,
deptId: undefined,
quotationTimes: undefined,
changeItem: 1,
products: []
})
const formRules = reactive({
@ -196,7 +196,7 @@ const contactList = ref<ContactApi.ContactVO[]>([])
/** 子表的表单 */
const subTabsName = ref('limit')
const contractAAuthorizedCompanyFormRef = ref()
const ContractBAuthorizedPersonFormRef = ref()
const contractAAuthorizedCompanyFormRef1 = ref()
const limitFormRef = ref()
const contractExtensionFormRef = ref()
@ -222,7 +222,14 @@ const open = async (type: string) => {
if (type) {
formLoading.value = true
try {
formData.value = await ContractApi.getChangeContract(type)
// formData.value = Object.assign(formData.value, data)
let data = await ContractApi.getChangeContract(type)
formData.value = data.contractDetail
formData.value.changeItem = data.changeItem
formData.value.changeAmount = data.changeAmount
formData.value.afterAmount = data.afterAmount
formData.value.changeAmountDeadline = data.changeAmountDeadline
formData.value.note = data.note
} finally {
formLoading.value = false
}
@ -245,10 +252,39 @@ const submitForm = async () => {
// const Authalid1 = await contractAAuthorizedCompanyFormRef1.value.validate()
// if (!Authalid1) return
// const limitValid = await limitFormRef.value.validate()
// if (!limitValid) return
// const extensionValid = await contractExtensionFormRef.value.validate()
// if (!extensionValid) return
if(ContractBAuthorizedPersonFormRef.value) {
const Authalid = await ContractBAuthorizedPersonFormRef.value.validate()
if (!Authalid) return
}
if(contractAAuthorizedCompanyFormRef1.value) {
const Authalid1 = await contractAAuthorizedCompanyFormRef1.value.validate()
if (!Authalid1) return
}
if(limitFormRef.value) {
const limitValid = await limitFormRef.value.validate()
if (!limitValid) return
}
if(contractExtensionFormRef.value) {
const extensionValid = await contractExtensionFormRef.value.validate()
if (!extensionValid) return
}
if(contractStopFormRef.value) {
const stopValid = await contractStopFormRef.value.validate()
if (!stopValid) return
}
if(contractFormRef.value) {
const contractValid = await contractFormRef.value.validate()
if (!contractValid) return
}
// const stopValid = await contractStopFormRef.value.validate()
// if (!stopValid) return
@ -257,19 +293,49 @@ const submitForm = async () => {
// if (!contractValid) return
// console.log('%csrc/views/crm/contract/ContractChange.vue:247 123', 'color: #007acc;', extensionValid,123);
// return
//
formLoading.value = true
try {
const data = unref(JSON.parse(JSON.stringify(formData.value))) as unknown as ContractApi.ContractVO
//
data.contractAAuthorizedCompanys = limitFormRef.value.getData()
data.contractAAuthorizedCompanys = contractExtensionFormRef.value.getData()
data.contractAAuthorizedCompanys = contractStopFormRef.value.getData()
data.contractAAuthorizedCompanys = contractFormRef.value.getData()
data.contractAAuthorizedCompanys = contractAAuthorizedCompanyFormRef.value.getData()
let proChangeObj = {
1: limitFormRef,
2: ContractBAuthorizedPersonFormRef,
3: contractExtensionFormRef,
4: contractStopFormRef,
5: contractAAuthorizedCompanyFormRef1,
6: contractFormRef
}
let dataFormList = proChangeObj[formData.value.changeItem].value.getData()
data[proChangeObj[formData.value.changeItem]] = dataFormList
if(formData.value.changeItem == 1) {
data.changeAmount = dataFormList.changeAmount
data.changeAmountDeadline = dataFormList.changeAmountDeadline
} else if(formData.value.changeItem == 2) {
let ids = []
dataFormList.map(item => {
ids.push(item.id)
})
data.afterAuthorizerId = ids.join(',')
} else if(formData.value.changeItem == 3) {
data.agreementDeadline = dataFormList.agreementDeadline
data.extensionYears = dataFormList.extensionYears
data.extensionDate = dataFormList.extensionDate
data.note = dataFormList.note
} else if(formData.value.changeItem == 4) {
data.terminationDate = dataFormList.terminationDate
data.terminationReason = dataFormList.terminationReason
data.note = dataFormList.note
} else if(formData.value.changeItem == 5) {
let ids = []
dataFormList.map(item => {
ids.push(item.id)
})
data.afterAffiliateCompanyId = ids.join(',')
} else if(formData.value.changeItem == 6) {
data.newContract = data
}
data.contractId = data.id
delete data.id
await ContractApi.changeContract(data)
@ -326,6 +392,7 @@ const resetForm = () => {
partnerCompanyId: undefined,
deptId: undefined,
quotationTimes: undefined,
changeItem: 1,
products: []
}
formRef.value?.resetFields()
@ -405,8 +472,7 @@ const getContactOptions = computed(() =>
)
const route = useRoute();
onBeforeMount(async () => {
console.log('%csrc/views/crm/contract/detail/ContractChangeDetail.vue:409 props.id,route.query.id', 'color: #007acc;', props.id,route.query.id);
onMounted(async () => {
formType.value = props.id || route.query.id;
if (formType.value) open(formType.value)
@ -423,6 +489,6 @@ onBeforeMount(async () => {
// formData.value.ownerUserId = useUserStore().getUser.id
// }
//
contactList.value = await ContactApi.getSimpleContactList()
contactList.value = await CustomerApi.getCustomerSimpleList()
});
</script>

View File

@ -16,6 +16,23 @@
<el-input v-model="formData.name" disabled placeholder="" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="客户名称" prop="customerId">
<el-select
v-model="formData.customerId"
disabled=""
placeholder=""
class="w-1/1"
>
<el-option
v-for="item in customerList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8" v-if="formType">
<el-form-item label="合同编号" prop="no">
<el-input v-model="formData.no" disabled placeholder="" />
@ -39,23 +56,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="客户名称" prop="customerId">
<el-select
v-model="formData.customerId"
disabled=""
placeholder=""
class="w-1/1"
>
<el-option
v-for="item in contactList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="方案签约人" prop="pricingUserId">
<el-select
@ -202,11 +203,11 @@
<el-input v-model="formData.regType" placeholder="" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<!-- <el-col :span="8"> -->
<!-- <el-form-item label="融资信息" prop="financingInfo">
<el-input v-model="formData.financingInfo" placeholder="融资信息" disabled />
</el-form-item> -->
</el-col>
<!-- </el-col> -->
<el-col :span="8">
<el-form-item label="实缴资金" prop="actualCapital">
<el-input v-model="formData.actualCapital" placeholder="" disabled />
@ -217,11 +218,11 @@
<el-input v-model="formData.socialEmployeeNum" placeholder="" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<!-- <el-col :span="8"> -->
<!-- <el-form-item label="上市情况" prop="listingStatus">
<el-input v-model="formData.listingStatus" placeholder="上市情况" disabled />
</el-form-item> -->
</el-col>
<!-- </el-col> -->
<el-col :span="8">
<el-form-item label="注册地址" prop="registeredAddress">
<el-input v-model="formData.registeredAddress" placeholder="" disabled />
@ -275,7 +276,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<!-- <el-col :span="8">
<el-form-item label="手机号" prop="mobile">
<el-input
v-model="formData.ownerUserMobile"
@ -301,7 +302,7 @@
disabled
/>
</el-form-item>
</el-col>
</el-col> -->
<el-col :span="8">
<el-form-item label="归属部门" prop="deptId">
<el-tree-select
@ -860,7 +861,7 @@ onMounted(async () => {
// formData.value.ownerUserId = useUserStore().getUser.id
// }
//
contactList.value = await ContactApi.getSimpleContactList()
contactList.value = await CustomerApi.getSelfCustomerSimpleList()
const data = await ContractApi.getOrg({
pageNo: 1,
pageSize: 1000

View File

@ -54,7 +54,7 @@
<span v-else></span>
</template>
</el-table-column>
<el-table-column label="关联的联系人编号数组" align="center" prop="contactIds" />
<!-- <el-table-column label="关联的联系人编号数组" align="center" prop="contactIds" /> -->
<el-table-column label="创建者" align="center" prop="creator" >
<template #default="scope">
{{getName(userOptions, scope.row.creator)}}
@ -79,7 +79,7 @@
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center" min-width="120px">
<el-table-column label="操作" align="center" fixed="right" min-width="120px">
<template #default="scope">
<el-button
link

View File

@ -173,6 +173,11 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="统一信用代码" prop="creditNo">
<el-input v-model="formData.creditCode" placeholder="" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="开户行" prop="bankName">
<el-input v-model="formData.bankName" disabled />
@ -193,11 +198,11 @@
<el-input v-model="formData.bBusinessLicenseNumber" disabled />
</el-form-item>
</el-col> -->
<el-col :span="8">
<!-- <el-col :span="8">
<el-form-item label="营业执照" prop="businessLicense">
<el-input v-model="formData.businessLicense" disabled />
</el-form-item>
</el-col>
</el-col> -->
</el-row>

View File

@ -172,6 +172,11 @@
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="统一信用代码" prop="creditCode">
<el-input v-model="formData.creditCode" placeholder="" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="开户行" prop="bankName">
@ -594,6 +599,7 @@ const onPartnerChange = async (id: string) => {
formLoading.value = true;
const res = await ContractApi.getOrgInfo(id);
formData.value.bankName = res.bankName;
formData.value.creditCode = res.creditCode;
formData.value.bankAccount = res.bankAccount;
formData.value.legalRepresentative = res.legalRepresentative;
formData.value.businessLicenseNumber = res.businessLicenseNumber;

View File

@ -15,171 +15,184 @@
:destroy-on-close="true"
class="signNameModel"
>
<slot>
<div class="signWrap">
<VueSignaturePad
width="100%"
height="100%"
ref="signaturePad"
:options="options"
/>
<footer>
<div class="gtnGroup">
<el-button type="primary" size="mini" @click="undo"></el-button>
<el-button type="primary" size="mini" style="margin-left:20px" @click="clear"></el-button>
<el-button type="primary" size="mini" style="margin-left:20px" @click="save"></el-button>
<div class="signWrap">
<VueSignaturePad
width="100%"
height="100%"
ref="signaturePad"
:options="options"
/>
<footer>
<div class="gtnGroup">
<el-button type="primary" size="mini" @click="undo"></el-button>
<el-button type="primary" size="mini" style="margin-left:20px" @click="clear"></el-button>
<el-button type="primary" size="mini" style="margin-left:20px" @click="save"></el-button>
</div>
<div class="otherSet">
<div class="penTxt">笔刷大小</div>
<div class="circleWrap" :class="{ active: isActive1 }" @click="selSize(1)">
<b class="b1"></b>
</div>
<div class="otherSet">
<div class="penTxt">笔刷大小</div>
<div class="circleWrap" :class="{ active: isActive1 }" @click="selSize(1)"><b class="b1"></b></div>
<div class="circleWrap" :class="{ active: isActive2 }" @click="selSize(2)"><b class="b2"></b></div>
<div class="circleWrap" :class="{ active: isActive3 }" @click="selSize(3)"><b class="b3"></b></div>
<div class="circleWrap" :class="{ active: isActive2 }" @click="selSize(2)">
<b class="b2"></b>
</div>
</footer>
</div>
</slot>
<div class="circleWrap" :class="{ active: isActive3 }" @click="selSize(3)">
<b class="b3"></b>
</div>
</div>
</footer>
</div>
</vxe-modal>
</div>
</template>
<script>
export default {
data(){
return {
panelVisible:false,
panelTitle:"",
options: {
penColor: "#000",
minWidth: 1, //
maxWidth: 1, //
},
isActive1:true,
isActive2:false,
isActive3:false,
imgSrc:"",
}
},
methods: {
//
handleClick(){
this.panelVisible=true;
this.isActive1=true;
this.isActive2=false;
this.isActive3=false;
this.options = {
penColor: "#000",
minWidth: 1,
maxWidth: 1,
}
},
//
undo(){
this.$refs.signaturePad.undoSignature();
},
//
clear(){
this.$refs.signaturePad.clearSignature();
},
//
save(){
console.log( this.$refs.signaturePad.saveSignature() );
const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
this.imgSrc = data;
this.panelVisible = false;
},
//
selSize(val){
this.options = {
penColor: "#000",
minWidth: val,
maxWidth: val,
};
if(val==1){
this.isActive1=true;
this.isActive2=false;
this.isActive3=false;
}else if(val==2){
this.isActive1=false;
this.isActive2=true;
this.isActive3=false;
}else if(val==3){
this.isActive1=false;
this.isActive2=false;
this.isActive3=true;
}
}
},
<script setup lang="ts">
import { ref } from 'vue';
// import VueSignaturePad from 'vue-signature-pad';
// import 'vue-signature-pad/dist/vue-signature-pad.css';
const panelVisible = ref(false);
const imgSrc = ref('');
const signaturePad = ref(null);
const isActive1 = ref(true);
const isActive2 = ref(false);
const isActive3 = ref(false);
const options = ref({
penColor: '#000',
minWidth: 1,
maxWidth: 1,
});
const handleClick = () => {
panelVisible.value = true;
isActive1.value = true;
isActive2.value = false;
isActive3.value = false;
options.value = {
penColor: '#000',
minWidth: 1,
maxWidth: 1,
};
};
const undo = () => {
signaturePad.value.undoSignature();
};
const clear = () => {
signaturePad.value.clearSignature();
};
const save = () => {
const { isEmpty, data } = signaturePad.value.saveSignature();
imgSrc.value = data;
panelVisible.value = false;
};
const selSize = (val: number) => {
options.value = {
penColor: '#000',
minWidth: val,
maxWidth: val,
};
if (val === 1) {
isActive1.value = true;
isActive2.value = false;
isActive3.value = false;
} else if (val === 2) {
isActive1.value = false;
isActive2.value = true;
isActive3.value = false;
} else if (val === 3) {
isActive1.value = false;
isActive2.value = false;
isActive3.value = true;
}
};
</script>
<style lang="scss">
.handwritten-name-wrap{
.img-wrap{
width:100%;
height:164px;
margin-top:2px;
border:1px solid #ccc;
img{
width:70%;
height:100%;
.handwritten-name-wrap {
.img-wrap {
width: 100%;
height: 164px;
margin-top: 2px;
border: 1px solid #ccc;
img {
width: 70%;
height: 100%;
}
}
.signWrap{
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
.signName{
flex:1;
border-top:1px solid #ccc;
.signWrap {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
.signName {
flex: 1;
border-top: 1px solid #ccc;
}
footer{
height:40px;
border-top:1px solid #ccc;
display:flex;
footer {
height: 40px;
border-top: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
.gtnGroup{
width:50%;
.gtnGroup {
width: 50%;
margin-left: 20px;
}
.otherSet{
width:50%;
display:flex;
.otherSet {
width: 50%;
display: flex;
align-items: center;
.penTxt{
width:70px;
.penTxt {
width: 70px;
}
.selSize{
width:70px;
.selSize {
width: 70px;
}
.el-select__caret{
.el-select__caret {
position: absolute;
right: -3px;
}
.b1,.b2,.b3{
.b1, .b2, .b3 {
display: inline-block;
background: #000;
border-radius: 50%;
}
.circleWrap{
.circleWrap {
display: flex;
justify-content: center;
align-items: center;
width:18px;
height:18px;
cursor:pointer;
margin-right:20px;
width: 18px;
height: 18px;
cursor: pointer;
margin-right: 20px;
}
.active {
border: 1px dashed #0074d9;
}
.b1 {
width: 4px;
height: 4px;
}
.b2 {
width: 6px;
height: 6px;
}
.b3 {
width: 8px;
height: 8px;
}
.active{ border:1px dashed #0074d9; }
.b1{width:4px;height:4px}
.b2{width:6px;height:6px}
.b3{width:8px;height:8px}
}
}
}
}
.signNameModel{
.vxe-modal--content{
padding:0 !important;
.signNameModel {
.vxe-modal--content {
padding: 0 !important;
}
}
</style>