You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
524 lines
15 KiB
524 lines
15 KiB
<template> |
|
<cs-page isCustom> |
|
<template #header> |
|
<view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px"> |
|
<view class="icon-box" v-if="!invateId"> |
|
<u-icon name="arrow-left" size="12"></u-icon> |
|
</view> |
|
<text class="wd-font-800 wd-text-16">编辑企业信息</text> |
|
</view> |
|
</template> |
|
<view class="container"> |
|
<uni-steps :options="step.options" :active="step.active"></uni-steps> |
|
<scroll-view scroll-y="true" class="info-container" v-if="step.active == 0"> |
|
<u--form :model="info.form" ref="infoFormRef"> |
|
<!-- 企业名称 --> |
|
<u-form-item label="名称" prop="enterprisesName" borderBottom> |
|
<u-input v-model="info.form.enterprisesName" border="none" placeholder="请输入名称" /> |
|
</u-form-item> |
|
<!-- 企业类型 --> |
|
<u-form-item label="类型" prop="type" borderBottom @tap="showPicker('enterprises_type', 'type')"> |
|
<text v-if="info.form.type"> |
|
{{ $dict.echoDicValue(dictMap.enterprises_type, info.form.type.toString()) }} |
|
</text> |
|
<text class="placeholder" v-else>请选择类型</text> |
|
<u-icon slot="right" name="arrow-right"></u-icon> |
|
</u-form-item> |
|
<!-- 企业地址 --> |
|
<u-form-item label="地址" prop="address" borderBottom> |
|
<u-input v-model="info.form.address" border="none" placeholder="请输入地址" /> |
|
</u-form-item> |
|
|
|
<!-- 环保负责人 --> |
|
<u-form-item label="环保负责人" prop="contactName" borderBottom labelWidth="80"> |
|
<u-input v-model="info.form.contactName" border="none" placeholder="请输入环保负责人姓名" /> |
|
</u-form-item> |
|
<!-- 联系方式 --> |
|
<u-form-item label="联系方式" prop="environmentalContactPhone" borderBottom labelWidth="80"> |
|
<u-input v-model="info.form.environmentalContactPhone" border="none" placeholder="请输入联系方式" /> |
|
</u-form-item> |
|
<!-- 成立时间 --> |
|
<u-form-item |
|
label="成立时间" |
|
prop="establishmentDate" |
|
borderBottom |
|
labelWidth="80" |
|
@tap="showCalendar('establishmentDate')" |
|
> |
|
<text v-if="info.form.establishmentDate">{{ info.form.establishmentDate }}</text> |
|
<text class="placeholder" v-else>请选择时间</text> |
|
<u-icon slot="right" name="arrow-right"></u-icon> |
|
</u-form-item> |
|
<!-- 企业照片 --> |
|
<u-form-item label="企业照片" borderBottom labelPosition="top" labelWidth="80"> |
|
<u-upload |
|
:fileList="info.form.photo" |
|
@afterRead="addEnterprisePhoto" |
|
@delete="delEnterprisePhoto" |
|
multiple |
|
:maxCount="3" |
|
></u-upload> |
|
</u-form-item> |
|
<!-- 企业简介 --> |
|
<u-form-item label="简介" prop="introduction" borderBottom labelPosition="top"> |
|
<u--textarea |
|
v-model="info.form.introduction" |
|
placeholder="请输入简介" |
|
border="none" |
|
count="true" |
|
></u--textarea> |
|
</u-form-item> |
|
<u-form-item> |
|
<u-button shape="circle" type="primary" @click="submitInfo">提交</u-button> |
|
</u-form-item> |
|
</u--form> |
|
</scroll-view> |
|
<view class="prove-container" v-else> |
|
<u--form :model="prove.form" ref="proveFormRef" v-if="prove.isEdit"> |
|
<u-form-item |
|
label="资质名称" |
|
prop="qualificationName" |
|
borderBottom |
|
labelWidth="80" |
|
@tap="showPicker('enterprise_qua', 'qualificationName')" |
|
> |
|
<text v-if="prove.form.qualificationName"> |
|
{{ $dict.echoDicValue(dictMap.enterprise_qua, prove.form.qualificationName.toString()) }} |
|
</text> |
|
<text class="placeholder" v-else>请选择资质名称</text> |
|
<u-icon slot="right" name="arrow-right"></u-icon> |
|
</u-form-item> |
|
<u-form-item label="资质编号" prop="enterpriseAuth" borderBottom labelWidth="80"> |
|
<u-input v-model="prove.form.enterpriseAuth" border="none" placeholder="请输入编号" /> |
|
</u-form-item> |
|
<u-form-item |
|
label="办理日期" |
|
prop="handleDate" |
|
borderBottom |
|
labelWidth="80" |
|
@tap="showCalendar('handleDate')" |
|
> |
|
<text v-if="prove.form.handleDate">{{ prove.form.handleDate }}</text> |
|
<text class="placeholder" v-else>请选择办理日期</text> |
|
<u-icon slot="right" name="arrow-right"></u-icon> |
|
</u-form-item> |
|
<u-form-item |
|
label="到期日期" |
|
prop="expiryDate" |
|
borderBottom |
|
labelWidth="80" |
|
@tap="showCalendar('expiryDate')" |
|
> |
|
<text v-if="prove.form.expiryDate">{{ prove.form.expiryDate }}</text> |
|
<text class="placeholder" v-else>请选择到期日期</text> |
|
<u-icon slot="right" name="arrow-right"></u-icon> |
|
</u-form-item> |
|
<u-form-item label="描述" prop="qualificationDescription" borderBottom labelPosition="top"> |
|
<u--textarea |
|
v-model="prove.form.qualificationDescription" |
|
placeholder="请输入描述" |
|
border="none" |
|
count="true" |
|
></u--textarea> |
|
</u-form-item> |
|
</u--form> |
|
<view class="prove-list" v-else> |
|
<view class="prove" v-for="prove in prove.list" :key="prove.id" @click="editProve(prove)"> |
|
<view class="wd-font-800" style="margin-bottom: 5px"> |
|
{{ $dict.echoDicValue(dictMap.enterprise_qua, prove.qualificationName.toString()) }} |
|
</view> |
|
<view class=""> |
|
{{ $util.formatDate(prove.handleDate, 'YYYY年M月D日') }} |
|
{{ $util.formatDate(prove.expiryDate, 'YYYY年M月D日') }} |
|
</view> |
|
</view> |
|
</view> |
|
<view class="operation" v-if="prove.isEdit"> |
|
<u-button shape="circle" type="primary" @click="submitProve">提交</u-button> |
|
</view> |
|
<view class="operation" v-else> |
|
<u-button shape="circle" type="info" @click="addProve">添加资质</u-button> |
|
<u-button shape="circle" type="success" v-if="invateId" @click="handlerDone">完成</u-button> |
|
</view> |
|
</view> |
|
</view> |
|
<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" /> |
|
</cs-page> |
|
</template> |
|
|
|
<script> |
|
import { uploadFile } from '@/api/system/file.js' |
|
import { getDictBatchByType } from '@/api/system/dict.js' |
|
import { showConfirm } from '@/utils/common' |
|
import { createEnterPrise } from '@/api/enterprise/index.js' |
|
import { createProve, getProveList, updateProve } from '@/api/enterprise/prove.js' |
|
export default { |
|
data() { |
|
return { |
|
// 邀请人id |
|
invateId: undefined, |
|
// 企业基本信息 |
|
info: { |
|
form: { |
|
id: '', |
|
enterprisesName: '', |
|
type: '', // 企业类型 |
|
introduction: '', // 企业地址 |
|
address: '', // 企业简介 |
|
photo: [], // 企业照片 |
|
contactName: '', // 环保负责人 |
|
environmentalContactPhone: '', // 联系方式 |
|
establishmentDate: '' // 成立时间 |
|
}, |
|
rules: { |
|
enterprisesName: { |
|
required: true, |
|
message: '请输入企业名称', |
|
trigger: ['blur'] |
|
}, |
|
type: { |
|
type: 'string', |
|
required: true, |
|
message: '请选择企业类型', |
|
trigger: ['blur'] |
|
}, |
|
address: { |
|
required: true, |
|
message: '请输入企业地址', |
|
trigger: ['blur'] |
|
}, |
|
contactName: { |
|
required: true, |
|
message: '请输入环保负责人', |
|
trigger: ['blur'] |
|
}, |
|
environmentalContactPhone: { |
|
required: true, |
|
message: '请输入联系方式', |
|
trigger: ['blur'] |
|
} |
|
} |
|
}, |
|
// 字典 |
|
dictMap: {}, |
|
// 选择器 |
|
picker: { |
|
show: false, |
|
// 做表单中键的缓存用 |
|
key: null, |
|
data: [] |
|
}, |
|
// 日历控件 |
|
calendar: { |
|
// 做表单中键的缓存用 |
|
key: null |
|
}, |
|
// 进度条 |
|
step: { |
|
options: [ |
|
{ |
|
title: '基本信息' |
|
}, |
|
{ |
|
title: '资质信息' |
|
} |
|
], |
|
active: 0 |
|
}, |
|
// 资质相关 |
|
prove: { |
|
list: [], |
|
// 切换资质表单与列表的开关 |
|
isEdit: true, |
|
loading: false, |
|
form: { |
|
enterpriseId: '', |
|
id: '', |
|
qualificationName: '', |
|
expiryDate: '', |
|
qualificationDescription: '', |
|
handleDate: '', |
|
enterpriseAuth: '' |
|
} |
|
} |
|
} |
|
}, |
|
onLoad(res) { |
|
if (res.invateId) { |
|
this.invateId = res.invateId |
|
} |
|
this.getDict() |
|
}, |
|
onReady() { |
|
this.step.active == 0 && this.$refs.infoFormRef.setRules(this.info.rules) |
|
this.initProveList() |
|
}, |
|
methods: { |
|
/** |
|
* 选择图片并上传 |
|
* @param {Object} e |
|
*/ |
|
async addEnterprisePhoto(e) { |
|
this.info.form.photo = e.file.map(p => { |
|
return { |
|
...p, |
|
status: 'uploading', |
|
message: '上传中' |
|
} |
|
}) |
|
// 使用promise.all()方法上传到后端做统一接收 |
|
await Promise.all( |
|
this.info.form.photo.map(async (p, i) => { |
|
const res = await uploadFile({ name: `file`, filePath: p.url }) |
|
return { |
|
...res.data, |
|
status: 'success', |
|
message: '' |
|
} |
|
}) |
|
).then(res => { |
|
this.info.form.photo = res |
|
}) |
|
}, |
|
/** |
|
* 删除图片 |
|
* @param {Object} e |
|
*/ |
|
delEnterprisePhoto(e) { |
|
this.info.form.photo.splice(e.index, 1) |
|
}, |
|
/** |
|
* 弹出选择器 |
|
* @param {String} type 字典类型 |
|
* @param {String} key 表单中需要赋值的健 |
|
*/ |
|
showPicker(type, key) { |
|
// 取出字典中type对应的列表并赋值给选择器的列表 |
|
this.picker.data.push(this.dictMap[type]) |
|
this.picker.key = key |
|
this.picker.show = true |
|
}, |
|
/** |
|
* 获取字典 |
|
*/ |
|
async getDict() { |
|
const dict = await getDictBatchByType({ type: ['enterprises_type', 'enterprise_qua'].join(',') }) |
|
this.dictMap = { |
|
...dict.data |
|
} |
|
}, |
|
/** |
|
* 选择器确认回调 |
|
* @param {Object} e |
|
*/ |
|
confirmPicker(e) { |
|
const { value } = e |
|
if (this.step.active == 1) { |
|
// 若是步骤索引为1 则向资质表单赋值 |
|
this.prove.form[this.picker.key] = value[0].value |
|
} else { |
|
// 若是步骤索引为0 则向企业基本信息表单赋值 |
|
this.info.form[this.picker.key] = value[0].value |
|
} |
|
this.closePicker() |
|
}, |
|
/** |
|
* 关闭选择器 |
|
*/ |
|
closePicker() { |
|
this.picker = { |
|
show: false, |
|
key: '', |
|
data: [] |
|
} |
|
}, |
|
/** |
|
* 显示日历 |
|
* @param {Object} key 表单中需要赋值的键 |
|
*/ |
|
showCalendar(key) { |
|
this.$refs.calendarRef.open() |
|
this.calendar = { |
|
key |
|
} |
|
}, |
|
/** |
|
* 日历选中之后的回调 |
|
* @param {Object} e |
|
*/ |
|
confirmCalendar(e) { |
|
if (this.step.active == 1) { |
|
// 若是步骤索引为1 则向资质表单赋值 |
|
this.prove.form[this.calendar.key] = e.fulldate |
|
} else { |
|
// 若是步骤索引为0 则向企业基本信息表单赋值 |
|
this.info.form[this.calendar.key] = e.fulldate |
|
} |
|
this.closeCalendar() |
|
}, |
|
/** |
|
* 关闭日历 |
|
*/ |
|
closeCalendar() { |
|
this.calendar = { |
|
key: null |
|
} |
|
}, |
|
/** |
|
* 企业基本信息表单提交事件 |
|
*/ |
|
submitInfo() { |
|
this.$refs.infoFormRef.validate().then(async res => { |
|
this.handlerInfoApi() |
|
}) |
|
}, |
|
/** |
|
* 触发创建企业接口 |
|
*/ |
|
async handlerInfoApi() { |
|
const data = this.info.form |
|
data.fileIds = this.info.form.photo.map(p => p.file_id) |
|
data.userId = this.invateId |
|
let enterprise |
|
if (this.info.form.id) { |
|
// 修改企业 |
|
} else { |
|
enterprise = await createEnterPrise(data) |
|
//新增企业时需要将返回的id存到表单中，作为资质上传、修改的关联id |
|
this.info.form.id = enterprise.data |
|
uni.showToast({ |
|
icon: 'success', |
|
title: '操作成功' |
|
}) |
|
// 将步骤显示到下一个 |
|
this.step.active = 1 |
|
} |
|
this.initProveList() |
|
}, |
|
/** |
|
* 添加资质 |
|
*/ |
|
addProve() { |
|
this.prove.isEdit = true |
|
}, |
|
/** |
|
* 提交资质 |
|
*/ |
|
submitProve() { |
|
this.handlerProveApi() |
|
}, |
|
/** |
|
* 初始化资质列表 |
|
*/ |
|
async initProveList() { |
|
this.prove.loading = true |
|
const res = await getProveList({ pageSize: -1, enterpriseId: this.info.form.id }) |
|
this.prove.list = res.data.list |
|
this.prove.loading = false |
|
}, |
|
/** |
|
* 触发资质新增、修改的接口 |
|
*/ |
|
async handlerProveApi() { |
|
let prove |
|
const data = this.prove.form |
|
data.enterpriseId = this.info.form.id |
|
if (data.id) { |
|
prove = await updateProve(data) |
|
} else { |
|
prove = await createProve(data) |
|
} |
|
this.prove.isEdit = false |
|
uni.showToast({ |
|
icon: 'success', |
|
title: '操作成功' |
|
}) |
|
this.prove.form = { |
|
enterpriseId: '', |
|
id: '', |
|
qualificationName: '', |
|
expiryDate: '', |
|
qualificationDescription: '', |
|
handleDate: '', |
|
enterpriseAuth: '' |
|
} |
|
this.initProveList() |
|
}, |
|
/** |
|
* 编辑资质 |
|
* @param {Object} prove 列表中的资质实例对象 |
|
*/ |
|
editProve(prove) { |
|
this.prove.form = prove |
|
this.prove.form.handleDate = this.$util.formatDate(prove.handleDate, 'YYYY-MM-DD') |
|
this.prove.form.expiryDate = this.$util.formatDate(prove.expiryDate, 'YYYY-MM-DD') |
|
this.prove.isEdit = true |
|
}, |
|
/** |
|
* 完成事件 |
|
*/ |
|
handlerDone() { |
|
uni.navigateTo({ |
|
url: '/sub/common/waiting' |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.container { |
|
background-color: #fff; |
|
padding: 10px; |
|
overflow: hidden; |
|
display: flex; |
|
flex-flow: column nowrap; |
|
height: 100%; |
|
.info-container { |
|
max-height: 75vh; |
|
padding: 0 10px; |
|
margin-top: 10px; |
|
} |
|
.prove-container { |
|
flex: 1; |
|
position: relative; |
|
padding: 0 10px; |
|
margin-top: 10px; |
|
.prove-list { |
|
.prove { |
|
margin-bottom: 10px; |
|
padding: 10px 0; |
|
border-bottom: 1px dashed #c0c4cc; |
|
} |
|
} |
|
.operation { |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
width: 100%; |
|
padding: 10px; |
|
display: flex; |
|
flex-flow: row nowrap; |
|
gap: 10px; |
|
} |
|
} |
|
} |
|
.placeholder { |
|
color: #c0c4cc; |
|
} |
|
::v-deep .u-form-item__body { |
|
gap: 5px; |
|
} |
|
.address { |
|
} |
|
</style>
|
|
|