13 changed files with 1144 additions and 27 deletions
@ -0,0 +1,392 @@
|
||||
<template> |
||||
<view class="view"> |
||||
<view class="block"> |
||||
<view style=""> |
||||
<text style="color: #f8285a; margin-right: 4px">*</text> |
||||
企业名称 |
||||
</view> |
||||
<view class="value"> |
||||
<input |
||||
class="input-value" |
||||
type="text" |
||||
placeholder-class="txt" |
||||
placeholder="请输入企业名称" |
||||
v-model="form.enterpriseName" |
||||
@blur="proofName" |
||||
/> |
||||
<u-icon name="arrow-right"></u-icon> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="block"> |
||||
<view style=""> |
||||
<text style="color: #f8285a; margin-right: 4px">*</text> |
||||
企业地址 |
||||
</view> |
||||
<view class="value" @tap="chooseAddress"> |
||||
<input |
||||
class="input-value" |
||||
type="text" |
||||
placeholder-class="txt" |
||||
placeholder="请选择企业地址" |
||||
v-model="form.address" |
||||
disabled |
||||
/> |
||||
<u-icon name="map"></u-icon> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="block"> |
||||
<view style=""> |
||||
<text style="color: #f8285a; margin-right: 4px">*</text> |
||||
企业介绍 |
||||
</view> |
||||
<view class="value" @tap="goIntruduce"> |
||||
<view class="input-textarea" v-if="form.introduce"> |
||||
{{ form.introduce }} |
||||
</view> |
||||
<view class="input-textarea" style="color: #808080" v-else> |
||||
请输入企业介绍 |
||||
</view> |
||||
<u-icon name="arrow-right"></u-icon> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="upload-wrapper"> |
||||
<view |
||||
class="wd-flex" |
||||
style=" |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 100%; |
||||
" |
||||
> |
||||
<view style=""> |
||||
<text style="color: #f8285a; margin-right: 4px">*</text> |
||||
企业照片 |
||||
</view> |
||||
<view style="color: #808080">最多可传3张</view> |
||||
</view> |
||||
<u-upload |
||||
:fileList="form.photo" |
||||
@afterRead="addEnterprisePhoto" |
||||
@delete="delEnterprisePhoto" |
||||
multiple |
||||
:maxCount="3" |
||||
width="101" |
||||
height="101" |
||||
></u-upload> |
||||
</view> |
||||
|
||||
<view class="block"> |
||||
<view style=""> |
||||
<text style="color: #f8285a; margin-right: 4px">*</text> |
||||
企业标签 |
||||
</view> |
||||
<view class="value" @tap="goTags"> |
||||
<view class="input-textarea" v-if="form.introduce"> |
||||
{{ form.tags }} |
||||
</view> |
||||
<view class="input-textarea" style="color: #808080" v-else> |
||||
请选择企业标签 |
||||
</view> |
||||
<u-icon name="arrow-right"></u-icon> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="block"> |
||||
<view style=""> |
||||
<text style="color: #f8285a; margin-right: 4px">*</text> |
||||
企业负责人 |
||||
</view> |
||||
<view class="value"> |
||||
<input |
||||
class="input-value" |
||||
type="text" |
||||
placeholder-class="txt" |
||||
placeholder="请输入企业负责人" |
||||
v-model="form.contactName" |
||||
/> |
||||
<u-icon name="arrow-right"></u-icon> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="block"> |
||||
<view style=""> |
||||
<text style="color: #f8285a; margin-right: 4px">*</text> |
||||
负责人电话 |
||||
</view> |
||||
<view class="value"> |
||||
<input |
||||
class="input-value" |
||||
type="text" |
||||
placeholder-class="txt" |
||||
placeholder="请输入负责人电话" |
||||
v-model="form.environmentalContactPhone" |
||||
@blur="proofName" |
||||
/> |
||||
<u-icon name="arrow-right"></u-icon> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="upload-wrapper"> |
||||
<view |
||||
class="wd-flex" |
||||
style=" |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 100%; |
||||
" |
||||
> |
||||
<view style=""> |
||||
<text style="color: #f8285a; margin-right: 4px">*</text> |
||||
相关资质 |
||||
</view> |
||||
<view |
||||
class="wd-flex" |
||||
style="color: #17c653; gap: 4px; align-items: center" |
||||
@tap="addProve" |
||||
> |
||||
<u-icon name="plus-circle" color="#17C653" size="14"></u-icon> |
||||
<text style="line-height: 1rem">新增资质</text> |
||||
</view> |
||||
<view |
||||
class="wd-flex" |
||||
style="justify-content: space-between" |
||||
v-for="(p, index) in prove" |
||||
:key="index" |
||||
v-if="prove.length > 0" |
||||
> |
||||
<image |
||||
src="@/static/images/enterprise/zz.png" |
||||
style="width: 90px; height: 70px" |
||||
mode="widthFix" |
||||
></image> |
||||
<view |
||||
style="flex: 1; justify-content: space-between" |
||||
class="wd-flex wd-flex-col" |
||||
> |
||||
<view class="wd-flex" style="gap: 8px; align-items: center"> |
||||
<text class="label">资质名称</text> |
||||
<view> |
||||
{{ |
||||
$dict.echoDicValue( |
||||
dictMap.enterprise_qua, |
||||
prove.qualificationName.toString() |
||||
) |
||||
}} |
||||
</view> |
||||
</view> |
||||
<view class="wd-flex" style="gap: 8px; align-items: center"> |
||||
<text class="label">资质编号</text> |
||||
<view> |
||||
{{ prove.enterpriseAuth }} |
||||
</view> |
||||
</view> |
||||
<view class="wd-flex" style="gap: 8px; align-items: center"> |
||||
<text class="label">资质到期</text> |
||||
<view> |
||||
{{ $util.formatDate(prove.expiryDate, 'YYYY/M/D') }} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<cs-bottom-wrapper> |
||||
<view class="operation"> |
||||
<button class="btn green">提交审核</button> |
||||
</view> |
||||
</cs-bottom-wrapper> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { uploadFile } from '@/api/system/file.js' |
||||
import { getDictBatchByType } from '@/api/system/dict.js' |
||||
export default { |
||||
data() { |
||||
return { |
||||
form: { |
||||
enterpiseName: undefined, |
||||
address: undefined, |
||||
gpsLocation: undefined, |
||||
introduce: '', |
||||
photo: [], |
||||
tags: {} |
||||
}, |
||||
dictMap: {}, |
||||
prove: [], |
||||
inviteId: undefined |
||||
} |
||||
}, |
||||
onLoad(res) { |
||||
this.inviteId = res.inviteId |
||||
this.getDict() |
||||
}, |
||||
onShow() { |
||||
uni.$on('enterpriseIntroduce', data => { |
||||
this.form.introduce = data.introduce |
||||
}) |
||||
uni.$on('enterpriseTag', data => { |
||||
this.form.tags = data |
||||
}) |
||||
uni.$on('prove', data => { |
||||
this.prove.push(data) |
||||
}) |
||||
}, |
||||
methods: { |
||||
proofName(v) { |
||||
console.log(v.detail.value) |
||||
}, |
||||
/** |
||||
* 获取字典 |
||||
*/ |
||||
async getDict() { |
||||
const dict = await getDictBatchByType({ |
||||
type: ['enterprise_qua'].join(',') |
||||
}) |
||||
this.dictMap = { |
||||
...dict.data |
||||
} |
||||
}, |
||||
chooseAddress() { |
||||
uni.chooseLocation({ |
||||
success: res => { |
||||
this.form.address = res.address |
||||
this.form.gpsLocation = res.latitude + ',' + res.longitude |
||||
} |
||||
}) |
||||
}, |
||||
goIntruduce() { |
||||
uni.navigateTo({ |
||||
url: `/sub/invite/enterpriseIntroduce?introduce=${this.form.introduce}` |
||||
}) |
||||
}, |
||||
goTags() { |
||||
uni.navigateTo({ |
||||
url: `/sub/invite/enterpriseTags?tags=${this.form.tags}` |
||||
}) |
||||
}, |
||||
/** |
||||
* 选择图片并上传 |
||||
* @param {Object} e |
||||
*/ |
||||
async addEnterprisePhoto(e) { |
||||
e.file.forEach(p => { |
||||
this.form.photo.push({ |
||||
...p, |
||||
status: 'uploading', |
||||
message: '上传中' |
||||
}) |
||||
}) |
||||
// 使用promise.all()方法上传到后端做统一接收 |
||||
await Promise.all( |
||||
this.form.photo.map(async (p, i) => { |
||||
if (p.status == 'uploading') { |
||||
const res = await uploadFile({ name: `file`, filePath: p.url }) |
||||
return { |
||||
...res.data, |
||||
status: 'success', |
||||
message: '' |
||||
} |
||||
} |
||||
return p |
||||
}) |
||||
).then(res => { |
||||
this.form.photo = res |
||||
}) |
||||
}, |
||||
/** |
||||
* 删除图片 |
||||
* @param {Object} e |
||||
*/ |
||||
delEnterprisePhoto(e) { |
||||
this.form.photo.splice(e.index, 1) |
||||
}, |
||||
addProve() { |
||||
uni.navigateTo({ |
||||
url: '/sub/invite/prove' |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.view { |
||||
padding: 12px; |
||||
display: flex; |
||||
flex-flow: column nowrap; |
||||
gap: 12px; |
||||
overflow: hidden; |
||||
overflow-y: scroll; |
||||
max-height: 100vh; |
||||
padding-bottom: 12vh; |
||||
} |
||||
.block { |
||||
display: flex; |
||||
flex-flow: row nowrap; |
||||
background-color: #fff; |
||||
padding: 12px; |
||||
border-radius: 8px; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
gap: 12px; |
||||
.value { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-flow: row nowrap; |
||||
justify-content: space-between; |
||||
gap: 4px; |
||||
.input-value { |
||||
flex: 1; |
||||
text-align: right; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
} |
||||
.input-textarea { |
||||
flex: 1; |
||||
display: -webkit-box; |
||||
overflow: hidden; |
||||
text-align: right; |
||||
max-height: 3rem; |
||||
line-height: 1rem; |
||||
text-overflow: ellipsis; |
||||
-webkit-line-clamp: 3; |
||||
-webkit-box-orient: vertical; |
||||
word-break: break-all; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.upload-wrapper { |
||||
display: flex; |
||||
flex-flow: column nowrap; |
||||
background-color: #fff; |
||||
padding: 12px; |
||||
border-radius: 8px; |
||||
gap: 12px; |
||||
} |
||||
|
||||
.operation { |
||||
padding: 12px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
gap: 12px; |
||||
.btn { |
||||
flex: 1; |
||||
border-radius: 8px; |
||||
display: flex; |
||||
padding: 12px 0; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.green { |
||||
background-color: $cs-color-main; |
||||
color: #fff; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,79 @@
|
||||
<template> |
||||
<view class="view"> |
||||
<u--textarea |
||||
v-model="introduce" |
||||
placeholder="请输入..." |
||||
maxlength="500" |
||||
count |
||||
:autoHeight="true" |
||||
></u--textarea> |
||||
<cs-bottom-wrapper> |
||||
<view class="operation"> |
||||
<button class="btn green" @tap="submit">保存</button> |
||||
</view> |
||||
</cs-bottom-wrapper> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
introduce: '' |
||||
} |
||||
}, |
||||
onLoad(res) { |
||||
this.introduce = res.introduce |
||||
}, |
||||
methods: { |
||||
submit() { |
||||
if (!this.introduce) { |
||||
uni.showToast({ |
||||
icon: 'none', |
||||
title: '请填写介绍' |
||||
}) |
||||
return |
||||
} |
||||
uni.$emit('enterpriseIntroduce', { introduce: this.introduce }) |
||||
uni.navigateBack() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.view { |
||||
background-color: #fff; |
||||
padding: 12px; |
||||
height: 100vh; |
||||
} |
||||
::v-deep .u-textarea { |
||||
min-height: 400rpx; |
||||
background-color: #f9f9f9 !important; |
||||
border: 1px solid #f9f9f9; |
||||
border-radius: 12px; |
||||
.u-textarea__count { |
||||
background-color: #f9f9f9 !important; |
||||
} |
||||
} |
||||
|
||||
.operation { |
||||
padding: 12px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
gap: 12px; |
||||
.btn { |
||||
flex: 1; |
||||
border-radius: 8px; |
||||
display: flex; |
||||
padding: 12px 0; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.green { |
||||
background-color: $cs-color-main; |
||||
color: #fff; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,177 @@
|
||||
<template> |
||||
<view class="view"> |
||||
<view class="block" v-for="(tag, index) in data" :key="index"> |
||||
<view style=""> |
||||
<text style="color: #f8285a; margin-right: 4px">*</text> |
||||
{{ tag.name }} |
||||
</view> |
||||
<view class="value" @click="showPicker(tag)"> |
||||
<view class="input-value" v-if="form[tag.name]"> |
||||
{{ form[tag.name].name }} |
||||
</view> |
||||
<view class="input-value" style="color: #808080" v-else> |
||||
{{ `请选择${tag.name}` }} |
||||
</view> |
||||
<u-icon name="arrow-right"></u-icon> |
||||
</view> |
||||
</view> |
||||
<u-picker |
||||
:show="picker.show" |
||||
:columns="picker.data" |
||||
@cancel="closePicker" |
||||
closeOnClickOverlay |
||||
keyName="name" |
||||
ref="uPicker" |
||||
@close="closePicker" |
||||
@confirm="confirmPicker" |
||||
></u-picker> |
||||
<cs-bottom-wrapper> |
||||
<view class="operation"> |
||||
<button class="btn green" @tap="submit">提交审核</button> |
||||
</view> |
||||
</cs-bottom-wrapper> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
data: [], |
||||
form: {}, |
||||
// 选择器 |
||||
picker: { |
||||
show: false, |
||||
// 做表单中键的缓存用 |
||||
key: null, |
||||
data: [] |
||||
} |
||||
} |
||||
}, |
||||
onLoad(res) { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
this.data = new Array(5).fill(1).map((i, index) => { |
||||
this.form[`Tag${index + 1}`] = '' |
||||
return { |
||||
name: `Tag${index + 1}`, |
||||
label: `标签${index + 1}`, |
||||
value: index, |
||||
children: new Array(10).fill(1).map((c, cIndex) => { |
||||
return { |
||||
name: `subTag${cIndex + 1}`, |
||||
value: cIndex * 10 |
||||
} |
||||
}) |
||||
} |
||||
}) |
||||
console.log(this.data) |
||||
}, |
||||
/** |
||||
* 选择器确认回调 |
||||
* @param {Object} e |
||||
*/ |
||||
confirmPicker(e) { |
||||
const { value } = e |
||||
this.form[this.picker.key] = value[0].value |
||||
this.closePicker() |
||||
}, |
||||
/** |
||||
* 关闭选择器 |
||||
*/ |
||||
closePicker() { |
||||
this.picker = { |
||||
show: false, |
||||
key: '', |
||||
data: [] |
||||
} |
||||
}, |
||||
showPicker(tag) { |
||||
this.picker.data.push(tag.children) |
||||
this.picker.key = tag.name |
||||
this.picker.show = true |
||||
}, |
||||
submit() { |
||||
const msg = Object.keys(this.form).filter(k => { |
||||
if (this.form[k] == '') { |
||||
return this.data.find(d => d.name == k).label |
||||
} |
||||
}) |
||||
if (msg.length > 0) { |
||||
uni.showToast({ |
||||
icon: 'none', |
||||
title: `${msg.join('\n')}不能为空` |
||||
}) |
||||
return |
||||
} |
||||
uni.$emit('enterpriseTag', this.form) |
||||
console.log(this.form) |
||||
uni.navigateBack() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.view { |
||||
padding: 12px; |
||||
display: flex; |
||||
flex-flow: column nowrap; |
||||
gap: 12px; |
||||
overflow: hidden; |
||||
overflow-y: scroll; |
||||
max-height: 100vh; |
||||
padding-bottom: 12vh; |
||||
} |
||||
.input-value { |
||||
flex: 1; |
||||
text-align: right; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
} |
||||
.block { |
||||
display: flex; |
||||
flex-flow: row nowrap; |
||||
background-color: #fff; |
||||
padding: 12px; |
||||
border-radius: 8px; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
gap: 12px; |
||||
.value { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-flow: row nowrap; |
||||
justify-content: space-between; |
||||
gap: 4px; |
||||
.input-value { |
||||
flex: 1; |
||||
text-align: right; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.operation { |
||||
padding: 12px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
gap: 12px; |
||||
.btn { |
||||
flex: 1; |
||||
border-radius: 8px; |
||||
display: flex; |
||||
padding: 12px 0; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.green { |
||||
background-color: $cs-color-main; |
||||
color: #fff; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,55 @@
|
||||
<template> |
||||
<view> |
||||
<scroll-view direction="vertical"></scroll-view> |
||||
<cs-bottom-wrapper> |
||||
<view class="operation"> |
||||
<button class="btn green" @tap="addEnterprise">新增企业</button> |
||||
</view> |
||||
</cs-bottom-wrapper> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
inviteId: '' |
||||
} |
||||
}, |
||||
onLoad(res) { |
||||
console.log(res) |
||||
if (res.inviteId) { |
||||
this.inviteId = res.inviteId |
||||
} |
||||
}, |
||||
methods: { |
||||
addEnterprise() { |
||||
uni.navigateTo({ |
||||
url: `/sub/invite/addEnterprise?inviteId=${this.inviteId}` |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.operation { |
||||
padding: 12px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
gap: 12px; |
||||
.btn { |
||||
flex: 1; |
||||
border-radius: 8px; |
||||
display: flex; |
||||
padding: 12px 0; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.green { |
||||
background-color: $cs-color-main; |
||||
color: #fff; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,369 @@
|
||||
<template> |
||||
<view class="view"> |
||||
<view class="block"> |
||||
<view style=""> |
||||
<text style="color: #f8285a; margin-right: 4px">*</text> |
||||
资质名称 |
||||
</view> |
||||
<view |
||||
class="value" |
||||
@tap="showPicker('enterprise_qua', 'qualificationName')" |
||||
> |
||||
<view class="input-textarea" v-if="prove.qualificationName"> |
||||
{{ |
||||
$dict.echoDicValue( |
||||
dictMap.enterprise_qua, |
||||
prove.qualificationName |
||||
) |
||||
}} |
||||
</view> |
||||
<view class="input-textarea" style="color: #808080" v-else> |
||||
请输入资质名称 |
||||
</view> |
||||
<u-icon name="arrow-right"></u-icon> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="block"> |
||||
<view style=""> |
||||
<text style="color: #f8285a; margin-right: 4px">*</text> |
||||
资质编号 |
||||
</view> |
||||
<view class="value"> |
||||
<input |
||||
class="input-value" |
||||
type="text" |
||||
placeholder-class="txt" |
||||
placeholder="请输入资质编号" |
||||
v-model="prove.enterpriseAuth" |
||||
/> |
||||
<u-icon name="arrow-right"></u-icon> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- <view class="block"> |
||||
<view style=""> |
||||
<text style="color: #f8285a; margin-right: 4px">*</text> |
||||
办理时间 |
||||
</view> |
||||
<view class="value" @tap="showCalendar('handleDate')"> |
||||
<view class="input-textarea" v-if="prove.handleDate"> |
||||
{{ prove.handleDate }} |
||||
</view> |
||||
<view class="input-textarea" style="color: #808080" v-else> |
||||
请选择办理时间 |
||||
</view> |
||||
<u-icon name="arrow-right"></u-icon> |
||||
</view> |
||||
</view> --> |
||||
|
||||
<view class="block"> |
||||
<view style=""> |
||||
<text style="color: #f8285a; margin-right: 4px">*</text> |
||||
到期时间 |
||||
</view> |
||||
<view class="value" @tap="showCalendar('expiryDate')"> |
||||
<view class="input-textarea" v-if="prove.expiryDate"> |
||||
{{ prove.expiryDate }} |
||||
</view> |
||||
<view class="input-textarea" style="color: #808080" v-else> |
||||
请选择到期时间 |
||||
</view> |
||||
<u-icon name="arrow-right"></u-icon> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="upload-wrapper"> |
||||
<view |
||||
class="wd-flex" |
||||
style=" |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 100%; |
||||
" |
||||
> |
||||
<view style=""> |
||||
<text style="color: #f8285a; margin-right: 4px">*</text> |
||||
资质照片 |
||||
</view> |
||||
<view style="color: #808080">要求清晰有效</view> |
||||
</view> |
||||
<u-upload |
||||
:fileList="prove.photo" |
||||
@afterRead="addPhoto" |
||||
@delete="delPhoto" |
||||
:maxCount="1" |
||||
width="101" |
||||
height="101" |
||||
></u-upload> |
||||
</view> |
||||
|
||||
<cs-bottom-wrapper> |
||||
<view class="operation"> |
||||
<button class="btn green" @tap="submit">保存</button> |
||||
</view> |
||||
</cs-bottom-wrapper> |
||||
<u-picker |
||||
:show="picker.show" |
||||
:columns="picker.data" |
||||
@cancel="closePicker" |
||||
closeOnClickOverlay |
||||
keyName="label" |
||||
ref="uPicker" |
||||
@close="closePicker" |
||||
@confirm="confirmPicker" |
||||
></u-picker> |
||||
<uni-calendar |
||||
ref="calendarRef" |
||||
:insert="false" |
||||
@confirm="confirmCalendar" |
||||
/> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { uploadFile } from '@/api/system/file.js' |
||||
import { getDictBatchByType } from '@/api/system/dict.js' |
||||
export default { |
||||
data() { |
||||
return { |
||||
prove: { |
||||
id: '', |
||||
qualificationName: '', |
||||
expiryDate: '', |
||||
enterpriseAuth: '', |
||||
photo: [] |
||||
}, |
||||
dictMap: {}, |
||||
// 选择器 |
||||
picker: { |
||||
show: false, |
||||
// 做表单中键的缓存用 |
||||
key: null, |
||||
data: [] |
||||
}, |
||||
// 日历控件 |
||||
calendar: { |
||||
// 做表单中键的缓存用 |
||||
key: null |
||||
} |
||||
} |
||||
}, |
||||
onLoad(res) { |
||||
uni.setNavigationBarTitle({ |
||||
title: !res ? '编辑资质' : '新增资质' |
||||
}) |
||||
this.getDict() |
||||
}, |
||||
onShow() {}, |
||||
methods: { |
||||
/** |
||||
* 获取字典 |
||||
*/ |
||||
async getDict() { |
||||
const dict = await getDictBatchByType({ |
||||
type: ['enterprise_qua'].join(',') |
||||
}) |
||||
this.dictMap = { |
||||
...dict.data |
||||
} |
||||
}, |
||||
/** |
||||
* 选择图片并上传 |
||||
* @param {Object} e |
||||
*/ |
||||
async addPhoto(e) { |
||||
e.file.forEach(p => { |
||||
this.prove.photo.push({ |
||||
...p, |
||||
status: 'uploading', |
||||
message: '上传中' |
||||
}) |
||||
}) |
||||
// 使用promise.all()方法上传到后端做统一接收 |
||||
await Promise.all( |
||||
this.prove.photo.map(async (p, i) => { |
||||
if (p.status == 'uploading') { |
||||
const res = await uploadFile({ name: `file`, filePath: p.url }) |
||||
return { |
||||
...res.data, |
||||
status: 'success', |
||||
message: '' |
||||
} |
||||
} |
||||
return p |
||||
}) |
||||
).then(res => { |
||||
this.prove.photo = res |
||||
}) |
||||
}, |
||||
/** |
||||
* 删除图片 |
||||
* @param {Object} e |
||||
*/ |
||||
delPhoto(e) { |
||||
this.prove.photo.splice(e.index, 1) |
||||
}, |
||||
/** |
||||
* 选择器确认回调 |
||||
* @param {Object} e |
||||
*/ |
||||
confirmPicker(e) { |
||||
const { value } = e |
||||
this.prove[this.picker.key] = value[0].value |
||||
this.closePicker() |
||||
}, |
||||
/** |
||||
* 关闭选择器 |
||||
*/ |
||||
closePicker() { |
||||
this.picker = { |
||||
show: false, |
||||
key: '', |
||||
data: [] |
||||
} |
||||
}, |
||||
showPicker(dict, key) { |
||||
this.picker.data.push(this.dictMap[dict]) |
||||
this.picker.key = key |
||||
this.picker.show = true |
||||
}, |
||||
/** |
||||
* 显示日历 |
||||
* @param {Object} key 表单中需要赋值的键 |
||||
*/ |
||||
showCalendar(key) { |
||||
this.$refs.calendarRef.open() |
||||
this.calendar = { |
||||
key |
||||
} |
||||
}, |
||||
/** |
||||
* 日历选中之后的回调 |
||||
* @param {Object} e |
||||
*/ |
||||
confirmCalendar(e) { |
||||
this.prove[this.calendar.key] = e.fulldate |
||||
|
||||
this.closeCalendar() |
||||
}, |
||||
/** |
||||
* 关闭日历 |
||||
*/ |
||||
closeCalendar() { |
||||
this.calendar = { |
||||
key: null |
||||
} |
||||
}, |
||||
async submit() { |
||||
const valide = await this.verifyForm() |
||||
if (!valide) return |
||||
uni.$emit('prove', this.prove) |
||||
uni.navigateBack() |
||||
}, |
||||
async verifyForm() { |
||||
const msgMap = { |
||||
qualificationName: '请填写资质名称', |
||||
expiryDate: '请选择到期日期', |
||||
enterpriseAuth: '请填写资质编号', |
||||
photo: '请上传资质照片' |
||||
} |
||||
const keys = Object.keys(this.prove).filter(i => { |
||||
if (!this.prove[i] && i != 'id') return i |
||||
if (typeof this.prove[i] == 'object' && this.prove[i].length == 0) |
||||
return i |
||||
}) |
||||
if (keys.length > 0) { |
||||
const msg = keys |
||||
.map(i => { |
||||
return msgMap[i] |
||||
}) |
||||
.join('\n') |
||||
uni.showToast({ |
||||
icon: 'none', |
||||
title: msg |
||||
}) |
||||
return false |
||||
} |
||||
return true |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.view { |
||||
padding: 12px; |
||||
display: flex; |
||||
flex-flow: column nowrap; |
||||
gap: 12px; |
||||
overflow: hidden; |
||||
overflow-y: scroll; |
||||
max-height: 100vh; |
||||
padding-bottom: 12vh; |
||||
} |
||||
.block { |
||||
display: flex; |
||||
flex-flow: row nowrap; |
||||
background-color: #fff; |
||||
padding: 12px; |
||||
border-radius: 8px; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
gap: 12px; |
||||
.value { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-flow: row nowrap; |
||||
justify-content: space-between; |
||||
gap: 4px; |
||||
.input-value { |
||||
flex: 1; |
||||
text-align: right; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
} |
||||
.input-textarea { |
||||
flex: 1; |
||||
display: -webkit-box; |
||||
overflow: hidden; |
||||
text-align: right; |
||||
max-height: 3rem; |
||||
line-height: 1rem; |
||||
text-overflow: ellipsis; |
||||
-webkit-line-clamp: 3; |
||||
-webkit-box-orient: vertical; |
||||
word-break: break-all; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.upload-wrapper { |
||||
display: flex; |
||||
flex-flow: column nowrap; |
||||
background-color: #fff; |
||||
padding: 12px; |
||||
border-radius: 8px; |
||||
gap: 12px; |
||||
} |
||||
|
||||
.operation { |
||||
padding: 12px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
gap: 12px; |
||||
.btn { |
||||
flex: 1; |
||||
border-radius: 8px; |
||||
display: flex; |
||||
padding: 12px 0; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.green { |
||||
background-color: $cs-color-main; |
||||
color: #fff; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue