refactor(user): 优化用户相关页面的API请求和表单逻辑

- 将`/position` API路径更新为`/position/pcindex`
- 在用户信息页面中,将社会职务信息包裹在`div`标签中
- 在注册页面中,将推荐人姓名的绑定字段从`recommendation_name`改为`recommendation_id`
- 添加导出PDF文件的提示对话框
- 在用户添加和编辑页面中,增加协会职位的选择功能,并优化表单验证逻辑
- 统一处理PDF文件的显示方式,使用统一图片代替原有图标
This commit is contained in:
王创世 2025-05-21 14:08:07 +08:00
parent 380d576b39
commit 861f231515
5 changed files with 127 additions and 49 deletions

View File

@ -43,7 +43,7 @@
</template> </template>
<template v-if="formData.reporting_method == 2"> <template v-if="formData.reporting_method == 2">
<t-form-item name="name" label="推荐人姓名" :requiredMark="true"> <t-form-item name="name" label="推荐人姓名" :requiredMark="true">
<t-select v-model="formData.recommendation_name" filterable placeholder="推荐人姓名" <t-select v-model="formData.recommendation_id" filterable placeholder="推荐人姓名"
:options="member_list" :keys="{ value: 'id', label: 'nikename', key: 'id' }" size="large" :options="member_list" :keys="{ value: 'id', label: 'nikename', key: 'id' }" size="large"
@change="getMemberInfo"></t-select> @change="getMemberInfo"></t-select>
</t-form-item> </t-form-item>
@ -228,7 +228,12 @@
<t-cascader size="large" v-model="formData.region_id" :options="region_list" <t-cascader size="large" v-model="formData.region_id" :options="region_list"
class="input_box"></t-cascader> class="input_box"></t-cascader>
</t-form-item> </t-form-item>
<t-form-item label="所在区域详细地址" :requiredMark="true"> <t-form-item >
<div slot="label">
<span style="color:#d54941">*</span>
<span>所在区域详细地址</span>
<span style="color:#d54941">请填写所在区域对应的的详细地址</span>
</div>
<t-input size="large" v-model="formData.mail_address" placeholder="请输入所在区域详细地址" <t-input size="large" v-model="formData.mail_address" placeholder="请输入所在区域详细地址"
class="input_box_end" /> class="input_box_end" />
</t-form-item> </t-form-item>
@ -992,7 +997,7 @@
<div style="font-size: 28px;font-weight: 600;margin-left: 15px;">信息提交</div> <div style="font-size: 28px;font-weight: 600;margin-left: 15px;">信息提交</div>
</div> </div>
<div style="margin-right: 20px;"> <div style="margin-right: 20px;">
<t-button @click="download" size="large"> <t-button @click="onshowTis" size="large">
<img slot="icon" src="@/assets/dc.png" style="width: 20px;height: 20px;margin-right: 10px;"> <img slot="icon" src="@/assets/dc.png" style="width: 20px;height: 20px;margin-right: 10px;">
申请表导出有水印 申请表导出有水印
</t-button> </t-button>
@ -1060,6 +1065,20 @@
</t-collapse-panel> </t-collapse-panel>
</t-collapse> </t-collapse>
</div> </div>
<t-dialog
header="文件导出提示"
:visible="visibleModal"
confirmBtn="导出"
:closeBtn="false"
:footer="true"
:onClose="() => (visibleModal = false)"
:onConfirm="download"
>
<div>
<div style="font-size: 16px;">请导出并打印PDF申请表签字盖章后邮寄至青企协以完成正式入会流程</div>
<div style="margin-top: 10px;">感谢您的配合</div>
</div>
</t-dialog>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -1081,6 +1100,7 @@ export default {
}, },
data() { data() {
return { return {
visibleModal:false,
isSubmit: false, isSubmit: false,
editorJJ: null, editorJJ: null,
editorCJ: null, editorCJ: null,
@ -1125,6 +1145,7 @@ export default {
source_channel: '',// source_channel: '',//
recommended_cities: '',// recommended_cities: '',//
recommendation_name: '',// recommendation_name: '',//
recommendation_id:'',
recommendation_content: '',// recommendation_content: '',//
intentional_association_position: '',// intentional_association_position: '',//
cardz_image: '',// cardz_image: '',//
@ -1392,7 +1413,7 @@ export default {
} }
} else if (newVal.reporting_method == 2) { } else if (newVal.reporting_method == 2) {
this.right_card_list[0].content[0].ok = false; this.right_card_list[0].content[0].ok = false;
if (newVal.recommendation_name != '' && newVal.recommendation_content != '' && newVal.intentional_association_position != '') { if (newVal.recommendation_id != '' && newVal.recommendation_content != '' && newVal.intentional_association_position != '') {
this.right_card_list[0].content[0].ok = true; this.right_card_list[0].content[0].ok = true;
} }
} else { } else {
@ -1610,7 +1631,7 @@ export default {
} }
var recommendation_id = this.$route.query.recommendation_id; var recommendation_id = this.$route.query.recommendation_id;
this.$request this.$request
.post('/move/member/getrecommendationSelect', { openid: this.$route.query.openid }) .post('/move/get_recommennd/getrecommendationSelect')
.then((res) => { .then((res) => {
console.log(res); console.log(res);
this.member_list = res.data; this.member_list = res.data;
@ -1699,6 +1720,9 @@ export default {
delContacts(index) { delContacts(index) {
this.formData.other.splice(index, 1); this.formData.other.splice(index, 1);
}, },
onshowTis(){
this.visibleModal=true;
},
download() { download() {
if (this.isSubmit) { if (this.isSubmit) {
this.$message.error('请先提交信息!', 1500); this.$message.error('请先提交信息!', 1500);
@ -1809,6 +1833,7 @@ export default {
this.formData.recommended_cities = res.data.recommended_cities; this.formData.recommended_cities = res.data.recommended_cities;
// //
this.formData.recommendation_name = res.data.recommendation_name; this.formData.recommendation_name = res.data.recommendation_name;
this.formData.recommendation_id = parseInt(res.data.recommendation_id);
// //
this.formData.recommendation_content = res.data.recommendation_content; this.formData.recommendation_content = res.data.recommendation_content;
// //

View File

@ -59,6 +59,12 @@
<t-option key="常务理事" label="常务理事" value="常务理事"></t-option> <t-option key="常务理事" label="常务理事" value="常务理事"></t-option>
</t-select> </t-select>
</t-form-item> </t-form-item>
<t-form-item label="协会职位" :requiredMark="true">
<t-select size="large" v-model="formData.position_id"
:style="{ width: '200px' }">
<t-option v-for="item in pl_list" :key="item.id" :label="item.position_name" :value="item.id"></t-option>
</t-select>
</t-form-item>
</t-form> </t-form>
</div> </div>
</div> </div>
@ -222,7 +228,12 @@
<t-cascader size="large" v-model="formData.region_id" :options="region_list" <t-cascader size="large" v-model="formData.region_id" :options="region_list"
class="input_box"></t-cascader> class="input_box"></t-cascader>
</t-form-item> </t-form-item>
<t-form-item label="所在区域详细地址" :requiredMark="true"> <t-form-item >
<div slot="label">
<span style="color:#d54941">*</span>
<span>所在区域详细地址</span>
<span style="color:#d54941">请填写所在区域对应的的详细地址</span>
</div>
<t-input size="large" v-model="formData.mail_address" placeholder="请输入所在区域详细地址" <t-input size="large" v-model="formData.mail_address" placeholder="请输入所在区域详细地址"
class="input_box_end" /> class="input_box_end" />
</t-form-item> </t-form-item>
@ -310,7 +321,7 @@
<div style="display: flex; margin-top: 20px"> <div style="display: flex; margin-top: 20px">
<div style="width: 35%"> <div style="width: 35%">
<div> <div>
<span style="color: #d54941;">*</span> <!-- <span style="color: #d54941;">*</span> -->
<span>主要社会职务(可多选)</span> <span>主要社会职务(可多选)</span>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
@ -540,7 +551,7 @@
style="width:220px; height: 124px;object-fit: cover;border-radius: 5px" /> style="width:220px; height: 124px;object-fit: cover;border-radius: 5px" />
<div v-if="getExt(formData.certificate_of_business_tax_payment_for_the_previous_year) == 'pdf'" <div v-if="getExt(formData.certificate_of_business_tax_payment_for_the_previous_year) == 'pdf'"
style="width: 220px; height: 124px;"> style="width: 220px; height: 124px;">
<FilePowerpointIcon style="width: 100%; height: 100%;object-fit: cover;" /> <img src="@/assets/Pdf.png" style="width:100px;height: 100px;"/>
</div> </div>
</div> </div>
</t-upload> </t-upload>
@ -1059,6 +1070,7 @@ export default {
tuan_list: [], tuan_list: [],
inputProps: {}, inputProps: {},
formData: { formData: {
position_id:'',//
reporting_method: null,// reporting_method: null,//
source_channel: '',// source_channel: '',//
recommended_cities: '',// recommended_cities: '',//
@ -1178,6 +1190,7 @@ export default {
region_list: [], region_list: [],
collapse: [1], collapse: [1],
internationa_list: [],// internationa_list: [],//
pl_list:[],//
right_card_list: [ right_card_list: [
{ {
key: 1, key: 1,
@ -1315,10 +1328,14 @@ export default {
], ],
phoneStatus: '', phoneStatus: '',
phoneTips: '', phoneTips: '',
}; };
}, },
mounted() { mounted() {
console.log(this.$route.query.id); console.log(this.$route.query.id);
//
this.getPlan();
//
this.getIndustry(); this.getIndustry();
// //
this.getRegion(); this.getRegion();
@ -1328,28 +1345,28 @@ export default {
//this.getInfo(); //this.getInfo();
}, },
methods: { methods: {
getPlan() {
this.$request
.post("/position/pcindex")
.then((res) => {
console.log(res);
this.pl_list = res.data;
})
.catch((e) => {
console.log(e);
});
},
getMemberInfo(d) { getMemberInfo(d) {
console.log(d); console.log(d);
var index = this.member_list.findIndex(item => item.id == d); var index = this.member_list.findIndex(item => item.id == d);
this.formData.recommendation_content = this.member_list[index].work_unit + this.member_list[index].unit_position; this.formData.recommendation_content = this.member_list[index].work_unit + this.member_list[index].unit_position;
}, },
getUserList() { getUserList() {
if (typeof (this.$route.query.recommendation_id) != 'undefined') {
this.formData.reporting_method = 2;
} else {
this.member_list = [];
return false;
}
var recommendation_id = this.$route.query.recommendation_id;
this.$request this.$request
.post('/move/member/getrecommendationSelect', { openid: this.$route.query.openid }) .post('/move/get_recommennd/getrecommendationSelect')
.then((res) => { .then((res) => {
console.log(res); console.log(res);
this.member_list = res.data; this.member_list = res.data;
var index = res.data.findIndex(item => item.id == recommendation_id);
this.formData.recommendation_content = this.member_list[index].work_unit + this.member_list[index].unit_position;
this.formData.recommendation_id = this.member_list[index].id;
this.formData.recommendation_name = this.member_list[index].nikename;
}) })
.catch((e) => { .catch((e) => {
console.log(e); console.log(e);
@ -1518,6 +1535,10 @@ export default {
}, },
submit() { submit() {
console.log(this.formData); console.log(this.formData);
if(this.formData.position_id==null||this.formData.position_id==''){
this.$message.error('请选择协会职位');
return;
}
if (this.formData.reporting_method == null || this.formData.reporting_method == '') { if (this.formData.reporting_method == null || this.formData.reporting_method == '') {
this.$message.error('请选择推荐方式!'); this.$message.error('请选择推荐方式!');
return; return;

View File

@ -42,8 +42,8 @@
</template> </template>
<template v-if="formData.reporting_method == 2"> <template v-if="formData.reporting_method == 2">
<t-form-item name="name" label="推荐人姓名" :requiredMark="true"> <t-form-item name="name" label="推荐人姓名" :requiredMark="true">
<t-select v-model="formData.recommendation_name" filterable placeholder="推荐人姓名" <t-select v-model="formData.recommendation_id" filterable placeholder="推荐人姓名" :options="member_list"
:options="member_list" :keys="{ value: 'id', label: 'nikename', key: 'id' }" size="large" :keys="{ value: 'id', label: 'nikename', key: 'id' }" size="large"
@change="getMemberInfo"></t-select> @change="getMemberInfo"></t-select>
</t-form-item> </t-form-item>
<t-form-item label="推荐人单位名称及职务" :requiredMark="true"> <t-form-item label="推荐人单位名称及职务" :requiredMark="true">
@ -58,6 +58,12 @@
<t-option key="常务理事" label="常务理事" value="常务理事"></t-option> <t-option key="常务理事" label="常务理事" value="常务理事"></t-option>
</t-select> </t-select>
</t-form-item> </t-form-item>
<t-form-item label="协会职位" :requiredMark="true">
<t-select size="large" v-model="formData.position_id"
:style="{ width: '200px' }">
<t-option v-for="item in pl_list" :key="item.id" :label="item.position_name" :value="item.id"></t-option>
</t-select>
</t-form-item>
</t-form> </t-form>
</div> </div>
</div> </div>
@ -221,7 +227,12 @@
<t-cascader size="large" v-model="formData.region_id" :options="region_list" <t-cascader size="large" v-model="formData.region_id" :options="region_list"
class="input_box"></t-cascader> class="input_box"></t-cascader>
</t-form-item> </t-form-item>
<t-form-item label="所在区域详细地址" :requiredMark="true"> <t-form-item >
<div slot="label">
<span style="color:#d54941">*</span>
<span>所在区域详细地址</span>
<span style="color:#d54941">请填写所在区域对应的的详细地址</span>
</div>
<t-input size="large" v-model="formData.mail_address" placeholder="请输入所在区域详细地址" <t-input size="large" v-model="formData.mail_address" placeholder="请输入所在区域详细地址"
class="input_box_end" /> class="input_box_end" />
</t-form-item> </t-form-item>
@ -309,7 +320,7 @@
<div style="display: flex; margin-top: 20px"> <div style="display: flex; margin-top: 20px">
<div style="width: 35%"> <div style="width: 35%">
<div> <div>
<span style="color: #d54941;">*</span> <!-- <span style="color: #d54941;">*</span> -->
<span>主要社会职务(可多选)</span> <span>主要社会职务(可多选)</span>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
@ -458,7 +469,7 @@
:src="$store.state.user.apiUrl + formData.business_license_image" :src="$store.state.user.apiUrl + formData.business_license_image"
style="width:220px; height: 124px;object-fit: cover;" /> style="width:220px; height: 124px;object-fit: cover;" />
<div v-if="getExt(formData.business_license_image) == 'pdf'" style="width: 220px; height: 124px;"> <div v-if="getExt(formData.business_license_image) == 'pdf'" style="width: 220px; height: 124px;">
<FilePowerpointIcon style="width: 100%; height: 100%;object-fit: cover;" /> <img src="@/assets/Pdf.png" style="width:100px;height: 100px;" />
</div> </div>
</div> </div>
</t-upload> </t-upload>
@ -494,7 +505,7 @@
:src="$store.state.user.apiUrl + formData.enterprise_credit_report" :src="$store.state.user.apiUrl + formData.enterprise_credit_report"
style="width:220px; height: 124px;object-fit: cover;" /> style="width:220px; height: 124px;object-fit: cover;" />
<div v-if="getExt(formData.enterprise_credit_report) == 'pdf'" style="width: 220px; height: 124px;"> <div v-if="getExt(formData.enterprise_credit_report) == 'pdf'" style="width: 220px; height: 124px;">
<FilePowerpointIcon style="width: 100%; height: 100%;object-fit: cover;" /> <img src="@/assets/Pdf.png" style="width:100px;height: 100px;" />
</div> </div>
</div> </div>
@ -517,7 +528,7 @@
style="width:220px; height: 124px;object-fit: cover;" /> style="width:220px; height: 124px;object-fit: cover;" />
<div v-if="getExt(formData.certificate_of_no_criminal_record) == 'pdf'" <div v-if="getExt(formData.certificate_of_no_criminal_record) == 'pdf'"
style="width: 220px; height: 124px;"> style="width: 220px; height: 124px;">
<FilePowerpointIcon style="width: 100%; height: 100%;object-fit: cover;" /> <img src="@/assets/Pdf.png" style="width:100px;height: 100px;" />
</div> </div>
</div> </div>
</t-upload> </t-upload>
@ -539,7 +550,7 @@
style="width:220px; height: 124px;object-fit: cover;" /> style="width:220px; height: 124px;object-fit: cover;" />
<div v-if="getExt(formData.certificate_of_business_tax_payment_for_the_previous_year) == 'pdf'" <div v-if="getExt(formData.certificate_of_business_tax_payment_for_the_previous_year) == 'pdf'"
style="width: 220px; height: 124px;"> style="width: 220px; height: 124px;">
<FilePowerpointIcon style="width: 100%; height: 100%;object-fit: cover;" /> <img src="@/assets/Pdf.png" style="width:100px;height: 100px;" />
</div> </div>
</div> </div>
</t-upload> </t-upload>
@ -561,7 +572,7 @@
style="width:220px; height: 124px;object-fit: cover;" /> style="width:220px; height: 124px;object-fit: cover;" />
<div v-if="getExt(formData.enterprise_credit_information_report) == 'pdf'" <div v-if="getExt(formData.enterprise_credit_information_report) == 'pdf'"
style="width: 220px; height: 124px;"> style="width: 220px; height: 124px;">
<FilePowerpointIcon style="width: 100%; height: 100%;object-fit: cover;" /> <img src="@/assets/Pdf.png" style="width:100px;height: 100px;" />
</div> </div>
</div> </div>
</t-upload> </t-upload>
@ -656,8 +667,8 @@
<div style="color: #ffffff;font-size: 14px;">删除文件</div> <div style="color: #ffffff;font-size: 14px;">删除文件</div>
</div> </div>
</div> </div>
<FilePowerpointIcon v-if="getExt(item) == 'pdf'" <img v-if="getExt(item) == 'pdf'" src="@/assets/Pdf.png" style="width:100px;height: 100px;" />
style="width: 100%; height: 100%;object-fit: cover;" />
<img v-if="getExt(item) != 'pdf'" :src="$store.state.user.apiUrl + item" <img v-if="getExt(item) != 'pdf'" :src="$store.state.user.apiUrl + item"
style="width: 100%; height: 100%;object-fit: cover;" /> style="width: 100%; height: 100%;object-fit: cover;" />
</div> </div>
@ -1019,6 +1030,7 @@ export default {
}, },
data() { data() {
return { return {
xiangxi:`<span>所在区域详细地址</span><span style="color:red">所在区域详细地址</span>`,
isSubmit: false, isSubmit: false,
editorJJ: null, editorJJ: null,
editorCJ: null, editorCJ: null,
@ -1059,10 +1071,12 @@ export default {
tuan_list: [], tuan_list: [],
inputProps: {}, inputProps: {},
formData: { formData: {
position_id:'',//
reporting_method: null,// reporting_method: null,//
source_channel: '',// source_channel: '',//
recommended_cities: '',// recommended_cities: '',//
recommendation_name: '',// recommendation_name: '',//
recommendation_id: 0,
recommendation_content: '',// recommendation_content: '',//
intentional_association_position: '',// intentional_association_position: '',//
cardz_image: '',// cardz_image: '',//
@ -1316,10 +1330,13 @@ export default {
phoneStatus: '', phoneStatus: '',
phoneTips: '', phoneTips: '',
id: 0, id: 0,
pl_list:[],//
}; };
}, },
mounted() { mounted() {
this.id = this.$route.query.id; this.id = this.$route.query.id;
//
this.getPlan();
// //
this.getIndustry(); this.getIndustry();
// //
@ -1328,31 +1345,37 @@ export default {
this.getInternationa(''); this.getInternationa('');
this.getUserList(); this.getUserList();
setTimeout(() => {
this.getInfo(); this.getInfo();
}, 500)
}, },
methods: { methods: {
getPlan() {
this.$request
.post("/position/pcindex")
.then((res) => {
console.log(res);
this.pl_list = res.data;
})
.catch((e) => {
console.log(e);
});
},
getMemberInfo(d) { getMemberInfo(d) {
console.log(d); console.log(d);
var index = this.member_list.findIndex(item => item.id == d); var index = this.member_list.findIndex(item => item.id == d);
this.formData.recommendation_content = this.member_list[index].work_unit + this.member_list[index].unit_position; this.formData.recommendation_content = this.member_list[index].work_unit + this.member_list[index].unit_position;
}, },
getUserList() { getUserList() {
if (typeof (this.$route.query.recommendation_id) != 'undefined') {
this.formData.reporting_method = 2;
} else {
this.member_list = [];
return false;
}
var recommendation_id = this.$route.query.recommendation_id;
this.$request this.$request
.post('/move/member/getrecommendationSelect', { openid: this.$route.query.openid }) .post('/move/get_recommennd/getrecommendationSelect')
.then((res) => { .then((res) => {
console.log(res); console.log(res);
this.member_list = res.data; this.member_list = res.data;
var index = res.data.findIndex(item => item.id == recommendation_id); // this.formData.recommendation_content = this.member_list[index].work_unit + this.member_list[index].unit_position;
this.formData.recommendation_content = this.member_list[index].work_unit + this.member_list[index].unit_position; // this.formData.recommendation_id = this.member_list[index].id;
this.formData.recommendation_id = this.member_list[index].id; // this.formData.recommendation_name = this.member_list[index].nikename;
this.formData.recommendation_name = this.member_list[index].nikename;
}) })
.catch((e) => { .catch((e) => {
console.log(e); console.log(e);
@ -1538,12 +1561,14 @@ export default {
} else { } else {
this.formData.reporting_method = null; this.formData.reporting_method = null;
} }
this.formData.position_id=res.data.position_id;
// //
this.formData.source_channel = res.data.source_channel; this.formData.source_channel = res.data.source_channel;
// //
this.formData.recommended_cities = res.data.recommended_cities; this.formData.recommended_cities = res.data.recommended_cities;
// //
this.formData.recommendation_name = res.data.recommendation_name; this.formData.recommendation_name = res.data.recommendation_name;
this.formData.recommendation_id = parseInt(res.data.recommendation_id);
// //
this.formData.recommendation_content = res.data.recommendation_content; this.formData.recommendation_content = res.data.recommendation_content;
// //
@ -1591,7 +1616,12 @@ export default {
// //
this.formData.fixed_telephone = res.data.fixed_telephone; this.formData.fixed_telephone = res.data.fixed_telephone;
// //
if(res.data.region_id==0){
this.formData.region_id = null;
}else{
this.formData.region_id = res.data.region_id; this.formData.region_id = res.data.region_id;
}
// //
this.formData.mail_address = res.data.mail_address; this.formData.mail_address = res.data.mail_address;
// //

View File

@ -199,7 +199,9 @@
</table> </table>
</td> </td>
<td colspan="6"> <td colspan="6">
{{ info.main_social_positions }},{{ info.other_social_positions }} <div>
{{ info.main_social_positions }} {{ info.other_social_positions }}
</div>
</td> </td>
</tr> </tr>
@ -278,8 +280,8 @@
<!-- <div style="text-align: left" v-html="info.enterprise_honor"></div> --> <!-- <div style="text-align: left" v-html="info.enterprise_honor"></div> -->
<div style="display: flex;gap: 10px;"> <div style="display: flex;gap: 10px;">
<div v-for="item in info.enterprise_honor"> <div v-for="item in info.enterprise_honor">
<a v-if="getImage(item) == 'pdf'" :href="$store.state.user.apiUrl + item" target="_blank">查看</a> <a v-if="getImage(item) == 'pdf'" :href="$store.state.user.apiUrl + item" target="_blank" style="margin-right: 20px;">查看</a>
<div> <div v-else>
<a :href="$store.state.user.apiUrl + item" target="_blank"> <a :href="$store.state.user.apiUrl + item" target="_blank">
<img :src="$store.state.user.apiUrl + item" <img :src="$store.state.user.apiUrl + item"
style="width: 100px;max-height: 200px;object-fit: cover;"> style="width: 100px;max-height: 200px;object-fit: cover;">

View File

@ -103,7 +103,7 @@ export default {
}, },
getList() { getList() {
this.$request this.$request
.post("/position") .post("/position/pcindex")
.then((res) => { .then((res) => {
console.log(res); console.log(res);
this.list = res.data; this.list = res.data;