|
|
@ -0,0 +1,390 @@
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
|
|
|
import { nextTick, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
|
|
|
|
|
|
|
|
import { EditOutlined, FolderAddOutlined, LoadingOutlined, PlusOutlined, SmileOutlined, UserOutlined } from '@ant-design/icons-vue'
|
|
|
|
|
|
|
|
import { message } from 'ant-design-vue'
|
|
|
|
|
|
|
|
import type { SelectProps, UploadChangeParam, UploadProps } from 'ant-design-vue'
|
|
|
|
|
|
|
|
import type { Rule } from 'ant-design-vue/es/form'
|
|
|
|
|
|
|
|
import type { Dayjs } from 'dayjs'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//结算信息切换 //保留
|
|
|
|
|
|
|
|
const wayvalues = ref<number>(1)
|
|
|
|
|
|
|
|
const payvalues = ref<number>(1)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
type RangeValue = [Dayjs, Dayjs]
|
|
|
|
|
|
|
|
const dayvalue1 = ref<RangeValue>()
|
|
|
|
|
|
|
|
//合作范围的业务线标签
|
|
|
|
|
|
|
|
const inputRef = ref()
|
|
|
|
|
|
|
|
const state = reactive({
|
|
|
|
|
|
|
|
tags: ['业务线名称', '业务线名称', '业务线名称'],
|
|
|
|
|
|
|
|
inputVisible: false,
|
|
|
|
|
|
|
|
inputValue: '',
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function handleClose(removedTag: string) {
|
|
|
|
|
|
|
|
const tags = state.tags.filter(tag => tag !== removedTag)
|
|
|
|
|
|
|
|
console.log(tags)
|
|
|
|
|
|
|
|
state.tags = tags
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function showInput() {
|
|
|
|
|
|
|
|
state.inputVisible = true
|
|
|
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
|
|
|
inputRef.value.focus()
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function handleInputConfirm() {
|
|
|
|
|
|
|
|
const inputValue = state.inputValue
|
|
|
|
|
|
|
|
let tags = state.tags
|
|
|
|
|
|
|
|
if (inputValue && !tags.includes(inputValue))
|
|
|
|
|
|
|
|
tags = [...tags, inputValue]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log(tags)
|
|
|
|
|
|
|
|
Object.assign(state, {
|
|
|
|
|
|
|
|
tags,
|
|
|
|
|
|
|
|
inputVisible: false,
|
|
|
|
|
|
|
|
inputValue: '',
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//代表人信息表格
|
|
|
|
|
|
|
|
const mationtablecolumns = [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
name: '',
|
|
|
|
|
|
|
|
dataIndex: 'type',
|
|
|
|
|
|
|
|
key: 'type',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: '姓名',
|
|
|
|
|
|
|
|
dataIndex: 'name',
|
|
|
|
|
|
|
|
key: 'name',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: '身份证照',
|
|
|
|
|
|
|
|
dataIndex: 'identificationphoto',
|
|
|
|
|
|
|
|
key: 'identificationphoto',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: '身份证号',
|
|
|
|
|
|
|
|
key: 'Idnumber',
|
|
|
|
|
|
|
|
dataIndex: 'Idnumber',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: '证件有效期',
|
|
|
|
|
|
|
|
key: 'validity',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: '授权/证明文件',
|
|
|
|
|
|
|
|
key: 'impower',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: '更新时间',
|
|
|
|
|
|
|
|
key: 'turnover',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: '操作',
|
|
|
|
|
|
|
|
key: 'operate',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const mationtabledata = [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
key: '1',
|
|
|
|
|
|
|
|
type:'法定代表人',
|
|
|
|
|
|
|
|
name: '业务线',
|
|
|
|
|
|
|
|
identificationphoto:'',
|
|
|
|
|
|
|
|
Idnumber:'147289*********',
|
|
|
|
|
|
|
|
validity: '2022/11/02至2023/01/12',
|
|
|
|
|
|
|
|
impower: '',
|
|
|
|
|
|
|
|
turnover:'2022-10-07 15:21:36',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
key: '2',
|
|
|
|
|
|
|
|
type:'法定代表人',
|
|
|
|
|
|
|
|
name: '业务线',
|
|
|
|
|
|
|
|
identificationphoto:'',
|
|
|
|
|
|
|
|
Idnumber:'147289*********',
|
|
|
|
|
|
|
|
validity: '2022/11/02至2023/01/12',
|
|
|
|
|
|
|
|
impower: '',
|
|
|
|
|
|
|
|
turnover:'2022-10-07 15:21:36',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
key: '3',
|
|
|
|
|
|
|
|
type:'法定代表人',
|
|
|
|
|
|
|
|
name: '业务线',
|
|
|
|
|
|
|
|
identificationphoto:'',
|
|
|
|
|
|
|
|
Idnumber:'147289*********',
|
|
|
|
|
|
|
|
validity: '2022/11/02至2023/01/12',
|
|
|
|
|
|
|
|
impower: '',
|
|
|
|
|
|
|
|
turnover:'2022-10-07 15:21:36',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
key: '4',
|
|
|
|
|
|
|
|
type:'法定代表人',
|
|
|
|
|
|
|
|
name: '业务线',
|
|
|
|
|
|
|
|
identificationphoto:'',
|
|
|
|
|
|
|
|
Idnumber:'147289*********',
|
|
|
|
|
|
|
|
validity: '2022/11/02至2023/01/12',
|
|
|
|
|
|
|
|
impower: '',
|
|
|
|
|
|
|
|
turnover:'2022-10-07 15:21:36',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
key: '5',
|
|
|
|
|
|
|
|
type:'法定代表人',
|
|
|
|
|
|
|
|
name: '业务线',
|
|
|
|
|
|
|
|
identificationphoto:'',
|
|
|
|
|
|
|
|
Idnumber:'147289*********',
|
|
|
|
|
|
|
|
validity: '2022/11/02至2023/01/12',
|
|
|
|
|
|
|
|
impower: '',
|
|
|
|
|
|
|
|
turnover:'2022-10-07 15:21:36',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//日期
|
|
|
|
|
|
|
|
const day = ref<Dayjs>()
|
|
|
|
|
|
|
|
//表单和下拉选择校验
|
|
|
|
|
|
|
|
interface FormState {
|
|
|
|
|
|
|
|
username: string
|
|
|
|
|
|
|
|
region: string | undefined
|
|
|
|
|
|
|
|
select: boolean
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const formState = reactive<FormState>({
|
|
|
|
|
|
|
|
username: '',
|
|
|
|
|
|
|
|
region: undefined,
|
|
|
|
|
|
|
|
select: false,
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const rules: Record<string, Rule[]> = {
|
|
|
|
|
|
|
|
username: [
|
|
|
|
|
|
|
|
{ required: true, message: 'Please input Activity name', trigger: 'change' },
|
|
|
|
|
|
|
|
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
|
|
|
|
|
|
|
|
select: [{ required: true, message: '请选择人员', trigger: 'change' }],
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function onFinish(values: any) {
|
|
|
|
|
|
|
|
console.log('Success:', values)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function onFinishFailed(errorInfo: any) {
|
|
|
|
|
|
|
|
console.log('Failed:', errorInfo)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//归属人员
|
|
|
|
|
|
|
|
function affiliationChange(value: string) {
|
|
|
|
|
|
|
|
console.log(`selected ${value}`)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const options = ref<SelectProps['options']>([
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
label: '总裁办',
|
|
|
|
|
|
|
|
options: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
value: 'jack',
|
|
|
|
|
|
|
|
label: 'Jack',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
value: 'lucy',
|
|
|
|
|
|
|
|
label: 'Lucy',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
label: '人事部',
|
|
|
|
|
|
|
|
options: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
value: 'yiminghe',
|
|
|
|
|
|
|
|
label: 'Yiminghe',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//城市
|
|
|
|
|
|
|
|
const shouldFixToBottom = ref(false) // 控制是否应该固定到底部
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 监听滚动事件或其他条件,根据条件来决定是否固定到底部
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
|
|
window.addEventListener('scroll', handleScroll)
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 在组件销毁前移除滚动事件监听
|
|
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
|
|
|
|
|
window.removeEventListener('scroll', handleScroll)
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function handleScroll() {
|
|
|
|
|
|
|
|
// 根据滚动位置或其他条件来判断是否应该固定到底部
|
|
|
|
|
|
|
|
if (window.scrollY > 100)
|
|
|
|
|
|
|
|
shouldFixToBottom.value = true
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
else
|
|
|
|
|
|
|
|
shouldFixToBottom.value = false
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
//单选
|
|
|
|
|
|
|
|
const value1 = ref<string>('a')
|
|
|
|
|
|
|
|
//上传图片
|
|
|
|
|
|
|
|
function getBase64(img: Blob, callback: (base64Url: string) => void) {
|
|
|
|
|
|
|
|
const reader = new FileReader()
|
|
|
|
|
|
|
|
reader.addEventListener('load', () => callback(reader.result as string))
|
|
|
|
|
|
|
|
reader.readAsDataURL(img)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const fileList = ref([])
|
|
|
|
|
|
|
|
const loading = ref<boolean>(false)
|
|
|
|
|
|
|
|
const imageUrl = ref<string>('')
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function handleChange(info: UploadChangeParam) {
|
|
|
|
|
|
|
|
if (info.file.status === 'uploading') {
|
|
|
|
|
|
|
|
loading.value = true
|
|
|
|
|
|
|
|
return
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (info.file.status === 'done') {
|
|
|
|
|
|
|
|
// Get this url from response in real world.
|
|
|
|
|
|
|
|
getBase64(info.file.originFileObj, (base64Url: string) => {
|
|
|
|
|
|
|
|
imageUrl.value = base64Url
|
|
|
|
|
|
|
|
loading.value = false
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (info.file.status === 'error') {
|
|
|
|
|
|
|
|
loading.value = false
|
|
|
|
|
|
|
|
message.error('upload error')
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function beforeUpload(file: UploadProps['fileList'][number]) {
|
|
|
|
|
|
|
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
|
|
|
|
|
|
|
|
if (!isJpgOrPng)
|
|
|
|
|
|
|
|
message.error('You can only upload JPG file!')
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const isLt2M = file.size / 1024 / 1024 < 2
|
|
|
|
|
|
|
|
if (!isLt2M)
|
|
|
|
|
|
|
|
message.error('Image must smaller than 2MB!')
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return isJpgOrPng && isLt2M
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//覆盖antd样式
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const RabbitStyle = [{
|
|
|
|
|
|
|
|
height:'60px',
|
|
|
|
|
|
|
|
}]
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
|
|
<a-card
|
|
|
|
|
|
|
|
style="width: 1688px;
|
|
|
|
|
|
|
|
height: 4062px;
|
|
|
|
|
|
|
|
margin: 20px auto;
|
|
|
|
|
|
|
|
overflow:auto; "
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<div class="title">
|
|
|
|
|
|
|
|
新增客户
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="itembox">
|
|
|
|
|
|
|
|
<a-form
|
|
|
|
|
|
|
|
:model="formState"
|
|
|
|
|
|
|
|
name="basic"
|
|
|
|
|
|
|
|
:label-col="{ span: 2 }"
|
|
|
|
|
|
|
|
:wrapper-col="{ span: 5 }"
|
|
|
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
|
|
|
@finish="onFinish"
|
|
|
|
|
|
|
|
@finishFailed="onFinishFailed"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<!-- 客户分类 -->
|
|
|
|
|
|
|
|
<a-row>
|
|
|
|
|
|
|
|
<a-col :span="24">
|
|
|
|
|
|
|
|
<div class="moduletop">
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<span>▋</span>
|
|
|
|
|
|
|
|
客户分类
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a-col>
|
|
|
|
|
|
|
|
<a-col :span="24">
|
|
|
|
|
|
|
|
<p class="hint">
|
|
|
|
|
|
|
|
不同的客户分类可实现不同的业务流程,商品类型一旦保存不可修改,请选择更匹配你需求的一个。
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</a-col>
|
|
|
|
|
|
|
|
<a-col :span="24">
|
|
|
|
|
|
|
|
<div class="selection">
|
|
|
|
|
|
|
|
<a-radio-group v-model:value="value1" :style="RabbitStyle" button-style="solid">
|
|
|
|
|
|
|
|
<a-radio-button :style="RabbitStyle" value="a">
|
|
|
|
|
|
|
|
<div class="ification">
|
|
|
|
|
|
|
|
<p>一级客户</p>
|
|
|
|
|
|
|
|
<span>钢厂/回收机构</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a-radio-button>
|
|
|
|
|
|
|
|
<a-radio-button :style="RabbitStyle" value="d">
|
|
|
|
|
|
|
|
<div class="ification">
|
|
|
|
|
|
|
|
<p>二级客户</p>
|
|
|
|
|
|
|
|
<span>其他客户</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a-radio-button>
|
|
|
|
|
|
|
|
</a-radio-group>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a-col>
|
|
|
|
|
|
|
|
</a-row>
|
|
|
|
|
|
|
|
</a-form>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a-card>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
|
|
|
.title{
|
|
|
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
|
|
line-height: 34px;
|
|
|
|
|
|
|
|
color: #262626;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.module{
|
|
|
|
|
|
|
|
width: 95%;
|
|
|
|
|
|
|
|
margin:0 auto;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.moduletop{
|
|
|
|
|
|
|
|
padding-bottom: 16px;
|
|
|
|
|
|
|
|
margin: 40px 15px ;
|
|
|
|
|
|
|
|
border-bottom: 1px solid #E5E5E5;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
p{
|
|
|
|
|
|
|
|
width: 110px;
|
|
|
|
|
|
|
|
height: 34px;
|
|
|
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
|
|
|
font-family: "AlibabaPuHuiTi_3_55_Regular-55 Regular";
|
|
|
|
|
|
|
|
font-size:16px;
|
|
|
|
|
|
|
|
line-height: 34px;
|
|
|
|
|
|
|
|
background: linear-gradient(90deg, #9EF9FF 0%, #FFF 100%);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
span{
|
|
|
|
|
|
|
|
font-size:14px;
|
|
|
|
|
|
|
|
color:#409EFF;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.hint{
|
|
|
|
|
|
|
|
font-family: "AlibabaPuHuiTi_3_55_Regular-55 Regular";
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
|
|
|
color: #8C8C8C;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.selection{
|
|
|
|
|
|
|
|
.ification{
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
|
|
line-height: 10px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|