34 changed files with 2283 additions and 455 deletions
@ -0,0 +1,586 @@ |
|||
<template> |
|||
<div> |
|||
<a-button @click="showModal" type="primary">统计信息填报</a-button> |
|||
<a-modal |
|||
:confirm-loading="confirmLoading" |
|||
:okText="okText" |
|||
:title="title" |
|||
:visible="visible" |
|||
@cancel="handleCancel" |
|||
@ok="handleSubmit" |
|||
width="50%" |
|||
> |
|||
<!-- 公司信息 --> |
|||
<a-form :form="form" v-if="current === 0"> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="公司名称" |
|||
required |
|||
> |
|||
<a-auto-complete |
|||
@search="handleSearchTasks" |
|||
@select="onSelect" |
|||
placeholder="公司名称" |
|||
v-model="company" |
|||
> |
|||
<template slot="dataSource"> |
|||
<a-select-option |
|||
:key="task.id" |
|||
:value="`${task.id}`" |
|||
v-for="task in dataSource" |
|||
>{{ task.company }}</a-select-option> |
|||
</template> |
|||
</a-auto-complete> |
|||
</a-form-item> |
|||
|
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="联系人" |
|||
> |
|||
<span>{{ companyInfo.name || '暂无' }}</span> |
|||
</a-form-item> |
|||
|
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="联系方式" |
|||
> |
|||
<span>{{ companyInfo.phone || '暂无' }}</span> |
|||
</a-form-item> |
|||
|
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="时间" |
|||
required |
|||
> |
|||
<a-date-picker |
|||
:open="yearShowOne" |
|||
@openChange="openChangeOne" |
|||
@panelChange="panelChangeOne" |
|||
format="YYYY" |
|||
mode="year" |
|||
placeholder="请选择年份" |
|||
v-model="platform.time" |
|||
/> |
|||
</a-form-item> |
|||
|
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="季度" |
|||
required |
|||
> |
|||
<a-select @select="onSelectQuarter" placeholder="请选择季度"> |
|||
<a-select-option |
|||
:key="quarter.id" |
|||
:value="quarter.id" |
|||
v-for="quarter in quarters" |
|||
>{{ quarter.value }}</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
</a-form> |
|||
<!-- 知识产权综合情况（项） --> |
|||
<a-form :form="form" v-if="current === 1"> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="实用本年期初数" |
|||
> |
|||
<a-input-number |
|||
placeholder="请输入实用本年期初数..." |
|||
style="width:100%" |
|||
v-model.trim="platform.practicalNumber" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="实用当年新增" |
|||
> |
|||
<a-input-number |
|||
placeholder="请输入实用当年新增..." |
|||
style="width:100%" |
|||
v-model.trim="platform.practicalIncrease" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="发明本年期初数" |
|||
> |
|||
<a-input-number |
|||
placeholder="请输入发明本年期初数..." |
|||
style="width:100%" |
|||
v-model.trim="platform.inventionNumber" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="发明当年新增" |
|||
> |
|||
<a-input-number |
|||
placeholder="请输入发明当年新增..." |
|||
style="width:100%" |
|||
v-model.trim="platform.inventionIncrease" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="软著本年期初数" |
|||
> |
|||
<a-input-number |
|||
placeholder="请输入软著本年期初数..." |
|||
style="width:100%" |
|||
v-model.trim="platform.softNumber" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="软著当年新增" |
|||
> |
|||
<a-input-number |
|||
placeholder="请输入软著当年新增..." |
|||
style="width:100%" |
|||
v-model.trim="platform.softIncrease" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="商标本年期初数" |
|||
> |
|||
<a-input-number |
|||
placeholder="请输入商标本年期初数..." |
|||
style="width:100%" |
|||
v-model.trim="platform.brandNumber" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="商标当年新增" |
|||
> |
|||
<a-input-number |
|||
placeholder="请输入商标当年新增..." |
|||
style="width:100%" |
|||
v-model.trim="platform.brandIncrease" |
|||
/> |
|||
</a-form-item> |
|||
</a-form> |
|||
<!-- 综合职工情况（个） --> |
|||
<a-form :form="form" v-if="current === 2"> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="人员总数" |
|||
> |
|||
<a-input-number |
|||
placeholder="请输入人员总数..." |
|||
style="width:100%" |
|||
v-model.trim="platform.totalNumber" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="科技人员" |
|||
> |
|||
<a-input-number |
|||
placeholder="请输入科技人员..." |
|||
style="width:100%" |
|||
v-model.trim="platform.sciencePersonnel" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="大专以上人数" |
|||
> |
|||
<a-input-number |
|||
placeholder="请输入大专以上人数..." |
|||
style="width:100%" |
|||
v-model.trim="platform.collegeaboveNumber" |
|||
/> |
|||
</a-form-item> |
|||
</a-form> |
|||
<!-- 综合经济指标 --> |
|||
<a-form :form="form" v-if="current === 3"> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="资产总额" |
|||
> |
|||
<a-input-number |
|||
:precision="precision" |
|||
placeholder="请输入资产总额..." |
|||
step="0.01" |
|||
style="width:100%" |
|||
v-model.trim="platform.totalAssets" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="营业收入" |
|||
> |
|||
<a-input-number |
|||
:precision="precision" |
|||
placeholder="请输入营业收入..." |
|||
step="0.01" |
|||
style="width:100%" |
|||
v-model.trim="platform.operatingIncome" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="利润总额" |
|||
> |
|||
<a-input-number |
|||
:precision="precision" |
|||
placeholder="请输入利润总额..." |
|||
step="0.01" |
|||
style="width:100%" |
|||
v-model.trim="platform.profitTotal" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="上缴税金" |
|||
> |
|||
<a-input-number |
|||
:precision="precision" |
|||
placeholder="请输入上缴税金..." |
|||
step="0.01" |
|||
style="width:100%" |
|||
v-model.trim="platform.taxes" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="研发费用" |
|||
> |
|||
<a-input-number |
|||
:precision="precision" |
|||
placeholder="请输入研发费用..." |
|||
step="0.01" |
|||
style="width:100%" |
|||
v-model.trim="platform.researchCosts" |
|||
/> |
|||
</a-form-item> |
|||
</a-form> |
|||
<!-- 服务情况（次） --> |
|||
<a-form :form="form" v-if="current === 4"> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="代理代办" |
|||
> |
|||
<a-input-number |
|||
placeholder="请输入代理代办..." |
|||
style="width:100%" |
|||
v-model.trim="platform.agentService" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="政策推送" |
|||
> |
|||
<a-input-number |
|||
placeholder="请输入政策推送..." |
|||
style="width:100%" |
|||
v-model.trim="platform.policyPush" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="双创活动" |
|||
> |
|||
<a-input-number |
|||
placeholder="请输入双创活动..." |
|||
style="width:100%" |
|||
v-model.trim="platform.doubleActivities" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="政策辅导" |
|||
> |
|||
<a-input-number |
|||
placeholder="请输入政策辅导..." |
|||
style="width:100%" |
|||
v-model.trim="platform.policyGuidance" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
label="项目申报" |
|||
> |
|||
<a-input-number |
|||
placeholder="请输入项目申报..." |
|||
style="width:100%" |
|||
v-model.trim="platform.projectDeclaration" |
|||
/> |
|||
</a-form-item> |
|||
</a-form> |
|||
|
|||
<a-steps :current="current"> |
|||
<a-step @click="current = 0" style="cursor: pointer"> |
|||
<template slot="title"> |
|||
<span v-if="current === 0">Waiting...</span> |
|||
<span v-else>完成</span> |
|||
</template> |
|||
<span slot="description">公司信息</span> |
|||
</a-step> |
|||
<a-step |
|||
:title="current > 1 ? '完成' : 'Waiting...'" |
|||
@click="current = 1" |
|||
description="知识产权综合情况（项）" |
|||
style="cursor: pointer" |
|||
/> |
|||
<a-step |
|||
:title="current > 2 ? '完成' : 'Waiting...'" |
|||
@click="current = 2" |
|||
description="综合职工情况（个）" |
|||
style="cursor: pointer" |
|||
/> |
|||
<a-step |
|||
:title="current > 3 ? '完成' : 'Waiting...'" |
|||
@click="current = 3" |
|||
description="综合经济指标" |
|||
style="cursor: pointer" |
|||
/> |
|||
<a-step |
|||
:title="current > 4 ? '完成' : 'Waiting...'" |
|||
@click="current = 4" |
|||
description="服务情况（次）" |
|||
style="cursor: pointer" |
|||
/> |
|||
</a-steps> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce'; |
|||
import { mapState, mapMutations } from 'vuex'; |
|||
import { addEnterprise, queryInfo } from 'config/api'; |
|||
|
|||
const formItemLayout = { |
|||
labelCol: { span: 5 }, |
|||
wrapperCol: { span: 18 }, |
|||
}; |
|||
const formTailLayout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 18, offset: 6 }, |
|||
}; |
|||
export default { |
|||
name: 'SettledModel', |
|||
data() { |
|||
this.handleSearchTasks = debounce(this.handleSearchTasks, 800); |
|||
return { |
|||
form: this.$form.createForm(this, { name: 'submit' }), |
|||
visible: false, |
|||
current: 0, |
|||
fileList: [], |
|||
title: '统计信息填报', |
|||
formItemLayout, |
|||
formTailLayout, |
|||
confirmLoading: false, |
|||
okText: '下一步', |
|||
platform: { |
|||
// 公司信息 |
|||
placeId: '', // 公司id |
|||
time: null, // 时间 |
|||
quarter: '', // 季度 |
|||
// 知识产权综合情况（项） |
|||
practicalNumber: '', // 实用本年期初数 |
|||
practicalIncrease: '', // 实用当年新增 |
|||
inventionNumber: '', // 发明本年期初数 |
|||
inventionIncrease: '', // 发明当年新增 |
|||
softNumber: '', // 软著本年期初数 |
|||
softIncrease: '', // 软著当年新增 |
|||
brandNumber: '', // 商标本年期初数 |
|||
brandIncrease: '', // 商标当年新增 |
|||
// 综合职工情况（个） |
|||
totalNumber: '', // 人员总数 |
|||
sciencePersonnel: '', // 科技人员 |
|||
collegeaboveNumber: '', // 大专以上人数 |
|||
// 服务情况（次） |
|||
agentService: '', // 代理代办 |
|||
policyPush: '', // 政策推送 |
|||
doubleActivities: '', // 双创活动 |
|||
policyGuidance: '', // 政策辅导 |
|||
projectDeclaration: '', // 项目申报 |
|||
}, |
|||
company: '', |
|||
dataSource: [], |
|||
companyInfo: { |
|||
company: '', // 公司名称 |
|||
name: '', // 联系人 |
|||
phone: '', // 联系方式 |
|||
}, // 公司信息 |
|||
yearShowOne: false, |
|||
quarters: [ |
|||
{ id: 1, value: '第一季度' }, |
|||
{ id: 2, value: '第二季度' }, |
|||
{ id: 3, value: '第三季度' }, |
|||
{ id: 4, value: '第四季度' }, |
|||
], |
|||
precision: 2, |
|||
}; |
|||
}, |
|||
computed: mapState('user', ['picCode']), |
|||
|
|||
watch: { |
|||
current(val) { |
|||
if (val === 4) { |
|||
this.okText = '完成'; |
|||
} else { |
|||
this.okText = '下一步'; |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
methods: { |
|||
...mapMutations('home', ['setPagePath']), |
|||
// 显示表单输入框 |
|||
showModal() { |
|||
const anyringToken = sessionStorage.getItem('anyringToken'); |
|||
if (!anyringToken) { |
|||
this.setPagePath(this.$route.path); |
|||
this.$router.push('/login'); |
|||
this.$message.warning('请先登录'); |
|||
} else { |
|||
this.visible = true; |
|||
} |
|||
}, |
|||
// 取消显示 |
|||
handleCancel(e) { |
|||
this.visible = false; |
|||
}, |
|||
|
|||
// 模糊搜索 选择公司信息 |
|||
async handleSearchTasks() { |
|||
try { |
|||
const params = { param: { company: this.company } }; |
|||
const res = await queryInfo(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.dataSource = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
onSelect(value) { |
|||
const item = this.dataSource.find(item => item.id === +value); |
|||
this.platform.placeId = item.id; |
|||
this.companyInfo.company = item.company; |
|||
this.companyInfo.name = item.name; |
|||
this.companyInfo.phone = item.phone; |
|||
}, |
|||
|
|||
// 弹出日历和关闭日历的回调 |
|||
openChangeOne(status) { |
|||
//status是打开或关闭的状态 |
|||
if (status) { |
|||
this.yearShowOne = true; |
|||
} |
|||
}, |
|||
// 时间选择 |
|||
panelChangeOne(value) { |
|||
this.platform.time = this.$moment(value).format('YYYY'); |
|||
this.yearShowOne = false; |
|||
}, |
|||
|
|||
// 季度选择 |
|||
onSelectQuarter(value) { |
|||
this.platform.quarter = value; |
|||
}, |
|||
|
|||
// 点击确定 |
|||
handleSubmit() { |
|||
const { placeId, time, quarter } = this.platform; |
|||
if (!placeId) { |
|||
this.$message.error('请输入公司名称'); |
|||
this.current = 0; |
|||
return; |
|||
} |
|||
if (!time) { |
|||
this.$message.error('请选择时间'); |
|||
this.current = 0; |
|||
return; |
|||
} |
|||
if (!quarter) { |
|||
this.$message.error('请选择季度'); |
|||
this.current = 0; |
|||
return; |
|||
} |
|||
|
|||
if (this.okText === '下一步') { |
|||
this.current += 1; |
|||
} else { |
|||
this.addSettled(); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 添加企业统计信息填报表 |
|||
* @param {object} params 提交的数据 |
|||
*/ |
|||
async addSettled() { |
|||
this.confirmLoading = true; |
|||
try { |
|||
const params = { param: {} }; |
|||
params.param = { ...this.platform }; |
|||
const res = await addEnterprise(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('添加成功'); |
|||
this.visible = false; |
|||
for (let key in this.platform) { |
|||
this.platform[key] = ''; |
|||
} |
|||
for (let key in this.companyInfo) { |
|||
this.companyInfo[key] = ''; |
|||
} |
|||
this.company = ''; |
|||
this.current = 0; |
|||
} else { |
|||
this.$message.error(msg || '添加失败'); |
|||
} |
|||
this.confirmLoading = false; |
|||
} catch (error) { |
|||
console.log('error: ', error); |
|||
this.confirmLoading = false; |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.must-color { |
|||
color: red; |
|||
} |
|||
|
|||
.code_img { |
|||
height: 32px; |
|||
width: 120px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,206 @@ |
|||
<template> |
|||
<div> |
|||
<a-button @click="showModal" style="width: 80px" type="primary">揭榜</a-button> |
|||
<a-modal |
|||
:confirm-loading="confirmLoading" |
|||
:visible="visible" |
|||
@cancel="handleCancel" |
|||
@ok="handleOk" |
|||
title="揭榜" |
|||
width="50%" |
|||
> |
|||
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }"> |
|||
<a-form-item label="揭榜人姓名" required> |
|||
<a-input placeholder="请输入揭榜人姓名" v-model="setData.accepterName" /> |
|||
</a-form-item> |
|||
<a-form-item label="手机号" required> |
|||
<a-input |
|||
@change="changePhone" |
|||
placeholder="请输入手机号" |
|||
type="tel" |
|||
v-decorator="['setData.phone', { rules: phoneRules }]" |
|||
/> |
|||
</a-form-item> |
|||
<a-form-item label="图片验证码" required> |
|||
<div class="d-flex flex-nowrap"> |
|||
<a-input placeholder="图片验证码" type="number" v-model="codeNum" /> |
|||
<img |
|||
:src="picCode.imageBase64" |
|||
@click="changePicCode" |
|||
class="code_img ml-2" |
|||
v-if="picCode && picCode.imageBase64" |
|||
/> |
|||
<a-button @click="changePicCode" class="code_img ml-2" size="small" v-else>获取验证码</a-button> |
|||
</div> |
|||
</a-form-item> |
|||
|
|||
<a-form-item label="短信验证码"> |
|||
<div class="d-flex flex-nowrap"> |
|||
<a-input |
|||
@change="changeCode" |
|||
placeholder="请输入验证码" |
|||
type="number" |
|||
v-decorator="['credential', { rules: codeRules }]" |
|||
/> |
|||
<a-button class="ml-2" disabled type="primary" v-if="showInterval">重新发送 {{ interval }}</a-button> |
|||
<a-button |
|||
:disabled="setData.phone && setData.phone.length !== 11" |
|||
@click="getCode" |
|||
class="ml-2" |
|||
type="primary" |
|||
v-else |
|||
>获取验证码</a-button> |
|||
</div> |
|||
</a-form-item> |
|||
<a-form-item label="揭榜单位" required> |
|||
<a-input placeholder="请输入揭榜单位" v-model="setData.unit" /> |
|||
</a-form-item> |
|||
<a-form-item label="介绍人"> |
|||
<a-input placeholder="揭榜介绍人" v-model="setData.introducer" /> |
|||
</a-form-item> |
|||
<a-form-item label="方案简述" required> |
|||
<a-textarea placeholder="请输入方案简述" v-model="setData.planIntro" /> |
|||
</a-form-item> |
|||
<!-- <a-form-item label="揭榜时间"> |
|||
<a-date-picker format="YYYY-MM-DD HH:mm:ss" show-time @ok="changeTime" /> |
|||
</a-form-item>--> |
|||
</a-form> |
|||
</a-modal> |
|||
<a-modal |
|||
:confirm-loading="confirmLoading1" |
|||
:visible="visible1" |
|||
@cancel="handleCancel1" |
|||
@ok="handleOk1" |
|||
title="需要登录" |
|||
width="30%" |
|||
> |
|||
还没有登录，请您先去登录 |
|||
<span style="color: rgba(0, 0, 0, 0.45)">（点击确定前往登录）</span> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapActions, mapState } from 'vuex'; |
|||
import { addUnveiling } from 'config/api'; |
|||
import mixin from 'views/User/mixin'; |
|||
|
|||
export default { |
|||
name: 'Unveiling', |
|||
mixins: [mixin], |
|||
props: { |
|||
proId: { |
|||
type: Number, |
|||
default: null, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
formLayout: 'horizontal', |
|||
form: this.$form.createForm(this, { name: '揭榜' }), |
|||
visible: false, |
|||
visible1: false, |
|||
confirmLoading: false, |
|||
confirmLoading1: false, |
|||
codeNum: '', // 验证码 |
|||
setData: { |
|||
accepterName: '', // 揭榜人姓名 |
|||
phone: '', // 手机号 |
|||
unit: '', // 接棒人单位 |
|||
introducer: '', // 接棒人 |
|||
planIntro: '', // 方案描述 |
|||
time: '', // 时间 |
|||
}, |
|||
}; |
|||
}, |
|||
computed: mapState('user', ['picCode', 'anyringToken']), |
|||
methods: { |
|||
...mapActions('user', ['sendCode', 'sendPicCode']), |
|||
showModal() { |
|||
const storageAnyringToken = sessionStorage.getItem('anyringToken') || this.anyringToken; |
|||
if (storageAnyringToken) { |
|||
this.visible = true; |
|||
} else { |
|||
this.visible1 = true; |
|||
} |
|||
}, |
|||
handleCancel(e) { |
|||
this.visible = false; |
|||
}, |
|||
handleCancel1() { |
|||
this.visible1 = false; |
|||
}, |
|||
// 点击确定 |
|||
handleOk1() { |
|||
this.$router.push('/login'); |
|||
}, |
|||
changePhone(e) { |
|||
this.setData.phone = e.target.value; |
|||
}, |
|||
// 获取验证码 |
|||
async getCode() { |
|||
try { |
|||
const params = { |
|||
phone: this.setData.phone, |
|||
verificationCodeId: this.picCode.verificationCodeId, |
|||
verificationCodeValue: this.codeNum, |
|||
}; |
|||
await this.sendCode(params); |
|||
this.getCodeInterval(); |
|||
} catch (error) { |
|||
throw new Error(`SignIn.vue method getCode: ${error}`); |
|||
} |
|||
}, |
|||
changeCode(e) { |
|||
this.setData.codeNum = e.target.value; |
|||
}, |
|||
// 刷新验证码 |
|||
changePicCode() { |
|||
this.sendPicCode(); |
|||
}, |
|||
// 揭榜 |
|||
async handleOk(e) { |
|||
try { |
|||
this.confirmLoading = true; |
|||
const params = { |
|||
param: { |
|||
accepterName: this.setData.accepterName, |
|||
billboardId: this.proId, |
|||
code: this.setData.codeNum, |
|||
introducer: this.setData.introducer, |
|||
phone: this.setData.phone, |
|||
planIntro: this.setData.planIntro, |
|||
times: this.setData.time, |
|||
unit: this.setData.unit, |
|||
}, |
|||
}; |
|||
const res = await addUnveiling(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('揭榜信息提交成功'); |
|||
for (let key in this.setData) { |
|||
this.setData[key] = ''; |
|||
} |
|||
} else { |
|||
this.$message.error('提交失败'); |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
} |
|||
this.visible = false; |
|||
this.confirmLoading = false; |
|||
}, |
|||
changeTime(e) { |
|||
this.setData.time = this.$moment(e._d).format('YYYY-MM-DD HH:mm:ss'); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
|
|||
<style lang="stylus" scoped> |
|||
.code_img { |
|||
height: 32px; |
|||
width: 120px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,396 @@ |
|||
<template> |
|||
<div> |
|||
<a-button @click="showModal" class="ml-3" type="primary">添加</a-button> |
|||
|
|||
<a-modal |
|||
:confirm-loading="confirmLoading" |
|||
:title="title" |
|||
:visible="visible" |
|||
@cancel="handleCancel" |
|||
@ok="handleOk" |
|||
width="50%" |
|||
> |
|||
<a-form :form="form"> |
|||
<!-- 公司名称 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
class="mb-3" |
|||
label="公司名称" |
|||
> |
|||
<a-input placeholder="请输入公司名称..." v-model.trim="platform.companyname" /> |
|||
</a-form-item> |
|||
<!-- 产品名称 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
class="mb-3" |
|||
label="产品名称" |
|||
> |
|||
<a-input placeholder="请输入需求名称..." v-model.trim="platform.name" /> |
|||
</a-form-item> |
|||
<!-- 产品编号 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
class="mb-3" |
|||
label="产品编号" |
|||
> |
|||
<a-input placeholder="请输入产品编号..." v-model.trim="platform.identifier" /> |
|||
</a-form-item> |
|||
<!-- 产品图片 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
class="mb-3" |
|||
label="产品图片" |
|||
> |
|||
<a-upload |
|||
:action="action" |
|||
:before-upload="beforeUpload" |
|||
:show-upload-list="false" |
|||
@change="handleChange" |
|||
class="avatar-uploader" |
|||
list-type="picture-card" |
|||
name="files" |
|||
> |
|||
<img :src="imageUrl" alt="avatar" v-if="imageUrl" /> |
|||
<div v-else> |
|||
<a-icon :type="loading ? 'loading' : 'plus'" /> |
|||
<div class="ant-upload-text">Upload</div> |
|||
</div> |
|||
</a-upload> |
|||
</a-form-item> |
|||
<!-- 产品分类 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
class="mb-3" |
|||
label="产品分类" |
|||
> |
|||
<a-checkbox-group @change="onChange" class="line-height-30"> |
|||
<a-checkbox |
|||
:key="index" |
|||
:value="item.id" |
|||
v-for="(item, index) in productLists" |
|||
>{{ item.name }}</a-checkbox> |
|||
</a-checkbox-group> |
|||
</a-form-item> |
|||
<!-- 产品简介 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
class="mb-3" |
|||
label="产品简介" |
|||
> |
|||
<a-textarea |
|||
placeholder="请输入产品简介..." |
|||
style="min-height: 100px" |
|||
v-model.trim="platform.synopsis" |
|||
/> |
|||
</a-form-item> |
|||
<!-- 产品详情 --> |
|||
<a-form-item |
|||
:label-col="formItemLayout.labelCol" |
|||
:wrapper-col="formItemLayout.wrapperCol" |
|||
class="mb-3" |
|||
label="产品详情" |
|||
> |
|||
<quill-editor |
|||
:options="editorOption" |
|||
@blur="onEditorBlur($event)" |
|||
@change="onEditorChange($event)" |
|||
@focus="onEditorFocus($event)" |
|||
class="editor-box" |
|||
ref="myQuillEditor" |
|||
v-model="needContent" |
|||
></quill-editor> |
|||
<a-upload |
|||
:action="action" |
|||
:multiple="false" |
|||
@change="fileChange" |
|||
accept="image/png, image/jpeg" |
|||
name="files" |
|||
style="display: none" |
|||
> |
|||
<a-button id="upload-img"> |
|||
<a-icon type="upload" /> |
|||
</a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
</a-form> |
|||
</a-modal> |
|||
<a-modal |
|||
:confirm-loading="confirmLoading1" |
|||
:visible="visible1" |
|||
@cancel="handleCancel1" |
|||
@ok="handleOk1" |
|||
title="需要登录" |
|||
width="30%" |
|||
> |
|||
还没有登录，请您先去登录 |
|||
<span style="color: rgba(0, 0, 0, 0.45)">（点击确定前往登录）</span> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapState } from 'vuex'; |
|||
import { quillEditor } from 'vue-quill-editor'; //调用编辑器 |
|||
import 'quill/dist/quill.core.css'; |
|||
import 'quill/dist/quill.snow.css'; |
|||
import 'quill/dist/quill.bubble.css'; |
|||
import { upload, addProduct, selModel } from 'config/api'; |
|||
|
|||
const formItemLayout = { |
|||
labelCol: { span: 5 }, |
|||
wrapperCol: { span: 18 }, |
|||
}; |
|||
const formTailLayout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 18, offset: 6 }, |
|||
}; |
|||
const toolbarOptions = [ |
|||
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线 |
|||
['blockquote', 'code-block'], //引用，代码块 |
|||
[{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小 |
|||
[{ list: 'ordered' }, { list: 'bullet' }], //列表 |
|||
[{ script: 'sub' }, { script: 'super' }], // 上下标 |
|||
[{ indent: '-1' }, { indent: '+1' }], // 缩进 |
|||
[{ direction: 'rtl' }], // 文本方向 |
|||
// [{ size: ['small', false, 'large', 'huge'] }], // 字体大小 |
|||
// [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题 |
|||
[{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色 |
|||
// [{ font: [] }], //字体 |
|||
[{ align: [] }], //对齐方式 |
|||
['clean'], //清除字体样式 |
|||
['image', 'video'], //上传图片、上传视频 |
|||
]; |
|||
|
|||
function getBase64(img, callback) { |
|||
const reader = new FileReader(); |
|||
reader.addEventListener('load', () => callback(reader.result)); |
|||
reader.readAsDataURL(img); |
|||
} |
|||
|
|||
export default { |
|||
name: 'Enroll', |
|||
components: { quillEditor }, |
|||
data() { |
|||
return { |
|||
form: this.$form.createForm(this, { name: 'submit' }), |
|||
visible: false, |
|||
visible1: false, |
|||
title: '需求征集', |
|||
action: upload, |
|||
loading: false, |
|||
imageUrl: '', |
|||
formItemLayout, |
|||
formTailLayout, |
|||
confirmLoading: false, |
|||
confirmLoading1: false, |
|||
needContent: ``, |
|||
editorOption: { |
|||
placeholder: '在这里输入...', |
|||
modules: { |
|||
toolbar: { |
|||
container: toolbarOptions, // 工具栏 |
|||
handlers: { |
|||
image: function(value) { |
|||
if (value) { |
|||
// alert('自定义图片'); |
|||
document.getElementById('upload-img').click(); |
|||
} else { |
|||
this.quill.format('image', false); |
|||
} |
|||
}, |
|||
video: function(value) { |
|||
if (value) { |
|||
alert('自定义视频'); |
|||
} else { |
|||
this.quill.format('image', false); |
|||
} |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
platform: { |
|||
companyname: '', |
|||
name: '', |
|||
identifier: '', |
|||
pic: '', |
|||
modelIds: [], |
|||
synopsis: '', |
|||
}, |
|||
hideMessage: null, |
|||
productLists: [], // 产品类目 |
|||
}; |
|||
}, |
|||
|
|||
computed: mapState('user', ['anyringToken']), |
|||
|
|||
created() { |
|||
this.getType(3); |
|||
}, |
|||
|
|||
methods: { |
|||
onEditorReady(editor) { |
|||
// 准备编辑器 |
|||
}, |
|||
onEditorBlur() {}, // 失去焦点事件 |
|||
onEditorFocus() {}, // 获得焦点事件 |
|||
onEditorChange() { |
|||
// 内容改变事件 |
|||
// console.log(this.content); |
|||
}, |
|||
onChange(e) { |
|||
console.log(e); |
|||
this.platform.modelIds = e; |
|||
}, |
|||
// 产品图片 |
|||
handleChange(info) { |
|||
if (info.file.status === 'uploading') { |
|||
this.loading = true; |
|||
return; |
|||
} |
|||
if (info.file.status === 'done') { |
|||
// Get this url from response in real world. |
|||
getBase64(info.file.originFileObj, imageUrl => { |
|||
this.imageUrl = imageUrl; |
|||
this.loading = false; |
|||
}); |
|||
if (info.fileList && info.fileList.length && info.fileList[0].response.data && info.fileList[0].response.data.length) { |
|||
this.platform.pic = info.fileList[0].response.data[0].id; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
beforeUpload(file) { |
|||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; |
|||
if (!isJpgOrPng) { |
|||
this.$message.error('You can only upload JPG file!'); |
|||
} |
|||
const isLt2M = file.size / 1024 / 1024 < 2; |
|||
if (!isLt2M) { |
|||
this.$message.error('Image must smaller than 2MB!'); |
|||
} |
|||
return isJpgOrPng && isLt2M; |
|||
}, |
|||
|
|||
// 上传图片事件 |
|||
fileChange(info) { |
|||
console.log(info); |
|||
if (info.file.status === 'uploading') { |
|||
if (!this.hideMessage) { |
|||
this.hideMessage = this.$message.loading('上传中...'); |
|||
} |
|||
} |
|||
// this.fileList = info.fileList; |
|||
if (info.file.status === 'done') { |
|||
this.files = []; |
|||
const img = `<img src=${info.file.response.data[0].visitUrl} >`; |
|||
this.needContent += img; |
|||
setTimeout(this.hideMessage, 0); |
|||
this.$message.success('上传成功'); |
|||
} |
|||
}, |
|||
|
|||
// 显示表单输入框 |
|||
showModal() { |
|||
const storageAnyringToken = sessionStorage.getItem('anyringToken') || this.anyringToken; |
|||
if (storageAnyringToken) { |
|||
this.visible = true; |
|||
} else { |
|||
this.visible1 = true; |
|||
} |
|||
}, |
|||
// 取消显示 |
|||
handleCancel(e) { |
|||
this.visible = false; |
|||
}, |
|||
// 点击确定 |
|||
handleOk() { |
|||
this.subMitAdd(); |
|||
// this.$message.success('发榜成功,等待审核'); |
|||
}, |
|||
handleCancel1() { |
|||
this.visible1 = false; |
|||
}, |
|||
// 点击确定 |
|||
handleOk1() { |
|||
this.$router.push('/login'); |
|||
}, |
|||
// 加入接口 |
|||
async subMitAdd() { |
|||
this.confirmLoading = true; |
|||
try { |
|||
const params = { |
|||
param: { |
|||
companyname: this.platform.companyname, |
|||
name: this.platform.name, |
|||
identifier: this.platform.identifier, |
|||
pic: this.platform.pic, |
|||
modelIds: this.platform.modelIds, |
|||
synopsis: this.platform.synopsis, |
|||
details: this.needContent, |
|||
}, |
|||
}; |
|||
const res = await addProduct(params); |
|||
const { code, msg, data } = res.data; |
|||
this.confirmLoading = false; |
|||
if (code === 200) { |
|||
for (let key in this.platform) { |
|||
this.platform[key] = ''; |
|||
} |
|||
this.imageUrl = ''; |
|||
this.needContent = ``; |
|||
this.visible = false; |
|||
this.$message.success('添加成功'); |
|||
this.$emit('update'); |
|||
} else { |
|||
throw msg; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
this.confirmLoading = false; |
|||
} |
|||
}, |
|||
|
|||
// 获取产品分类 |
|||
async getType(num) { |
|||
try { |
|||
const params = { param: { model: num } }; |
|||
const res = await selModel(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.productLists = data.list; |
|||
} else { |
|||
this.$message.error(msg || '分类获取失败'); |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.must-color { |
|||
color: red; |
|||
} |
|||
|
|||
.code_img { |
|||
height: 32px; |
|||
width: 120px; |
|||
} |
|||
|
|||
.ql-editor { |
|||
min-height: 600px; |
|||
max-height: 800px; |
|||
} |
|||
|
|||
.editor-box >>> .ql-editor { |
|||
min-height: 150px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,127 @@ |
|||
<template> |
|||
<div class="search-list"> |
|||
<span |
|||
style="height: 28px; line-height: 28px; font-size: 20px; font-weight: bold; color: rgba(0, 0, 0, 0.85)" |
|||
>栏目：</span> |
|||
<a-checkbox-group @change="handleChange"> |
|||
<a-checkbox |
|||
:key="index" |
|||
:value="item.moldId" |
|||
v-for="(item, index) in bannerList" |
|||
>{{ item.moldName }}</a-checkbox> |
|||
</a-checkbox-group> |
|||
<br /> |
|||
<span style="font-size: 20px; font-weight: bold; color: rgba(0, 0, 0, 0.85)">类型：</span> |
|||
<a-radio-group @change="handleChange1"> |
|||
<a-radio :key="index" :value="index + 1" v-for="(item, index) in typeList">{{ item }}</a-radio> |
|||
</a-radio-group> |
|||
<br /> |
|||
<a-input-search |
|||
@search="handleData" |
|||
class="search-ipt" |
|||
enter-button="搜索" |
|||
placeholder="搜索标题..." |
|||
style="width: 381px" |
|||
v-model="titleText" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getQueryMold } from 'config/api'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
typeList: ['视频', '音频', '文档', '全部'], |
|||
typeNum: '', |
|||
bannerList: [], |
|||
bannerNum: [], |
|||
titleText: '', |
|||
timeList: ['近七天', '近一个月', '近一年', '全部'], |
|||
timeNum: '', |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getMold(); |
|||
}, |
|||
methods: { |
|||
async handleChange(e) { |
|||
this.bannerNum = e; |
|||
console.log(this.bannerNum); |
|||
await this.handleData(); |
|||
}, |
|||
|
|||
async handleChange1(e) { |
|||
console.log(e.target.value); |
|||
if (e.target.value < 4) { |
|||
this.typeNum = e.target.value; |
|||
} else { |
|||
this.typeNum = ''; |
|||
} |
|||
await this.handleData(); |
|||
}, |
|||
|
|||
// 查询创业学院栏目类型 |
|||
async getMold() { |
|||
try { |
|||
const res = await getQueryMold(); |
|||
const { code, data, msg } = res.data; |
|||
if (code === 200) { |
|||
this.bannerList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
} |
|||
}, |
|||
|
|||
// 获取数据 |
|||
handleData() { |
|||
const getParam = { |
|||
typeNum: this.typeNum, |
|||
bannerNum: this.bannerNum, |
|||
titleText: this.titleText, |
|||
}; |
|||
console.log('getParam: ', getParam); |
|||
this.$emit('getData', getParam); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.search-list { |
|||
position: relative; |
|||
width: 100%; |
|||
line-height: 36px; |
|||
background: #fff; |
|||
padding: 24px; |
|||
position: relative; |
|||
} |
|||
|
|||
.search-btn { |
|||
position: absolute; |
|||
right: 19px; |
|||
height: 34px; |
|||
top: 38px; |
|||
width: 80px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.ban-style { |
|||
margin-left: 10px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.ban-act { |
|||
color: #E77816; |
|||
} |
|||
|
|||
.search-ipt { |
|||
position: absolute; |
|||
right: 24px; |
|||
top: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,102 @@ |
|||
<template> |
|||
<div> |
|||
<div class="d-flex flex-wrap" style="margin-top: 24px;"> |
|||
<div |
|||
:class="(index + 2) % 3 === 0 ? 'mg' : ''" |
|||
:key="index" |
|||
style="width: 30%" |
|||
v-for="(item, index) in list" |
|||
> |
|||
<div style="height: 420px"> |
|||
<img |
|||
:src="item.picUrl" |
|||
@click="openPage(item.contentUrl)" |
|||
alt |
|||
style="width: 100%; height: 300px; cursor: pointer" |
|||
/> |
|||
<p class="item-title">{{ item.title }}</p> |
|||
<p class="item-content">{{ item.intro }}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'knowContent', |
|||
props: { |
|||
list: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
typeNum: '', |
|||
bannerNum: [], |
|||
titleText: '', |
|||
display: -1, |
|||
}; |
|||
}, |
|||
|
|||
methods: { |
|||
openPage(url) { |
|||
window.open(url); |
|||
}, |
|||
|
|||
fade(index) { |
|||
console.log(index); |
|||
// var obj = document.getElementById(index) |
|||
this.display = index; |
|||
// this.list[index].contentUrl = this.list[index].contentUrl + '?autoplay=1' |
|||
// console.log(this.list[index].contentUrl) |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.mg { |
|||
margin: 0 5%; |
|||
} |
|||
|
|||
video { |
|||
width: 100%; |
|||
// object-fit: fill; |
|||
} |
|||
|
|||
.item-title { |
|||
margin: 10px 0; |
|||
font-size: 24px; |
|||
color: rgba(0, 0, 0, 0.65); |
|||
font-family: Microsoft YaHei; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.item-content { |
|||
font-size: 16px; |
|||
line-height: 36px; |
|||
font-family: Microsoft YaHei; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.cover { |
|||
width: 473px; |
|||
height: 300px; |
|||
position: absolute; |
|||
// top: -310px; |
|||
left: 0px; |
|||
} |
|||
|
|||
.relative { |
|||
position: relative; |
|||
} |
|||
|
|||
.none { |
|||
display: none; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue