327 lines
14 KiB
HTML
327 lines
14 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<style>
|
|
.el-form .el-select, .el-form .el-date-editor {
|
|
width: 100%;
|
|
}
|
|
|
|
.el-divider {
|
|
background-color: #1867b0;
|
|
}
|
|
|
|
.el-divider__text {
|
|
color: #1867b0;
|
|
}
|
|
|
|
.w-e-text-container {
|
|
height: 250px !important;
|
|
}
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
<guava ref="guava">
|
|
<el-card>
|
|
<template #header>
|
|
<el-row justify="space-between" type="flex">
|
|
<h3 style="color: rgb(24, 103, 176);">
|
|
{{id?'项目编辑':'项目上报'}}
|
|
</h3>
|
|
</el-row>
|
|
</template>
|
|
<el-form :model="formData" :rules="rules" label-width="100px" ref="AddForm">
|
|
<div style="margin-bottom: 30px">
|
|
<el-form-item label="项目名称" prop="xmmc">
|
|
<el-input maxlength="50" placeholder="项目名称" v-model="formData.xmmc"></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
|
|
<el-divider content-position="left">申报人信息</el-divider>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :lg="8" :sm="24">
|
|
<el-form-item label="申请人">
|
|
<el-input placeholder="姓名" readonly
|
|
value="${@shiro.getPrincipalProperty('username')}"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :sm="24">
|
|
<el-form-item label="性别">
|
|
<el-input placeholder="性别" readonly
|
|
value="${@shiro.getPrincipalProperty('sex')}"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :sm="24">
|
|
<el-form-item label="出生年月" prop="birthday">
|
|
<el-date-picker
|
|
placeholder="出生年月"
|
|
type="date"
|
|
v-model="formData.birthday"
|
|
value-format="yyyy-MM-dd">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :lg="8" :sm="24">
|
|
<el-form-item label="职务/职称" prop="zwzc">
|
|
<el-input v-model="formData.zwzc"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :sm="24">
|
|
<el-form-item label="学历/学位" prop="xlxw">
|
|
<el-input v-model="formData.xlxw"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :lg="8" :sm="24">
|
|
<el-form-item label="办公电话" prop="bgphone">
|
|
<el-input v-model="formData.bgphone"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :sm="24">
|
|
<el-form-item label="手机" prop="mobile">
|
|
<el-input v-model="formData.mobile"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :sm="24">
|
|
<el-form-item label="电子信箱" prop="email">
|
|
<el-input v-model="formData.email"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-divider content-position="left">项目组成员</el-divider>
|
|
<div>
|
|
<div class="text-right">
|
|
<el-button @click="xmcyTable.push(JSON.parse(JSON.stringify(o)))" round size="mini"
|
|
type="primary">添加成员
|
|
</el-button>
|
|
</div>
|
|
|
|
<el-table :data="xmcyTable" max-height="300">
|
|
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
|
<el-table-column label="姓名" prop="username">
|
|
<template slot-scope="scope">
|
|
<el-input size="mini" v-model="scope.row.username"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="职称" prop="zc">
|
|
<template slot-scope="scope">
|
|
<el-input size="mini" v-model="scope.row.zc"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="学历" prop="xl">
|
|
<template slot-scope="scope">
|
|
<el-input size="mini" v-model="scope.row.xl"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="工作单位" prop="gzdw">
|
|
<template slot-scope="scope">
|
|
<el-input size="mini" v-model="scope.row.gzdw"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="150">
|
|
<template slot-scope="scope">
|
|
<el-button @click="xmcyTable.splice(scope.row.$index, 1)" icon="el-icon-delete" round
|
|
size="mini"
|
|
type="danger"></el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
<el-divider content-position="left" ref="yjjctjdivider">
|
|
项目研究基础及条件(最多填写400字，当前字数
|
|
<span :style="{color:(yanjiujichuLength>400?'red':'')}"> {{yanjiujichuLength}})</span>
|
|
</el-divider>
|
|
<el-form-item label-width="0" prop="yjjctj" style="margin-bottom: 40px;">
|
|
<div ref="yjjctj" style="width: 100%;"></div>
|
|
</el-form-item>
|
|
|
|
<el-divider content-position="left">
|
|
项目预期成果及应用推广价值(最多填写100字，当前字数
|
|
<span :style="{color:(yqcgtgjzLength>400?'red':'')}">{{yqcgtgjzLength}})</span>
|
|
</el-divider>
|
|
<el-form-item label-width="0" prop="yqcgtgjz">
|
|
<div ref="yqcgtgjz" style="width: 100%;"></div>
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
<el-row class="mt10" justify="center" type="flex">
|
|
<el-button @click="doSubmit" style="width: 300px" type="primary">提交</el-button>
|
|
</el-row>
|
|
</el-card>
|
|
</guava>
|
|
</div>
|
|
|
|
<script>
|
|
let yjjctjEditor = null
|
|
let yqcgtgjzEditor = null
|
|
|
|
const o = {'username': '', 'zc': '', 'xl': '', 'gzdw': ''}
|
|
|
|
let vue = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
const validatorYjjctj = (rule, value, callback) => {
|
|
if (value === '') {
|
|
callback(new Error('请填写'))
|
|
} else if (removeHTMLTag(value).length > 400) {
|
|
callback(new Error('字数太多'))
|
|
} else {
|
|
callback()
|
|
}
|
|
}
|
|
const validatorYqcgtgjz = (rule, value, callback) => {
|
|
if (value === '') {
|
|
callback(new Error('请填写'))
|
|
} else if (removeHTMLTag(value).length > 100) {
|
|
callback(new Error('字数太多'))
|
|
} else {
|
|
callback()
|
|
}
|
|
}
|
|
|
|
return {
|
|
id: null,
|
|
o: {'username': '', 'zc': '', 'xl': '', 'gzdw': ''},
|
|
formData: {yjjctj: '', yqcgtgjz: ''},
|
|
rules: {
|
|
xmmc: [{required: true, message: '请填写项目名称', trigger: ['blur', 'change']}],
|
|
birthday: [{required: true, message: '请选择出生日期', trigger: ['blur', 'change']}],
|
|
zwzc: [{required: true, message: '请填写职务职称', trigger: ['blur', 'change']}],
|
|
xlxw: [{required: true, message: '请填写学历学位', trigger: ['blur', 'change']}],
|
|
bgphone: [{required: true, message: '请填写办公电话', trigger: ['blur', 'change']}],
|
|
mobile: [{required: true, message: '请填写手机号码', trigger: ['blur', 'change']}],
|
|
email: [{required: true, message: '请填写电子信箱', trigger: ['blur', 'change']}, {
|
|
type: 'email',
|
|
message: '请填写正确的电子信箱',
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
yjjctj: [{validator: validatorYjjctj, trigger: 'blur'}],
|
|
yqcgtgjz: [{validator: validatorYqcgtgjz, trigger: 'blur'}]
|
|
},
|
|
xmcyTable: [o]
|
|
}
|
|
},
|
|
computed: {
|
|
yanjiujichuLength() {
|
|
return removeHTMLTag(this.formData.yjjctj).length
|
|
},
|
|
yqcgtgjzLength() {
|
|
return removeHTMLTag(this.formData.yqcgtgjz).length
|
|
}
|
|
},
|
|
methods: {
|
|
//检查项目成员填写是否完成
|
|
checkXmcy() {
|
|
let flag = true
|
|
for (let o of this.xmcyTable) {
|
|
if (o['username'] === '' || o['zc'] === '' || o['xl'] === '' || o['gzdw'] === '') {
|
|
flag = false
|
|
break
|
|
}
|
|
}
|
|
return flag
|
|
},
|
|
async doSubmit() {
|
|
try {
|
|
const valid = await this.$refs['AddForm'].validate()
|
|
if (valid) {
|
|
if (!this.checkXmcy()) {
|
|
this.$message.info('项目成员信息填写不完整')
|
|
return
|
|
}
|
|
this.formData.xmzcy = JSON.stringify(this.xmcyTable)
|
|
let loading = this.$loading({
|
|
lock: true,
|
|
text: '提交中',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
})
|
|
|
|
let postUrl = ''
|
|
if (this.formData.id) {
|
|
postUrl = '/platfotm/syr/info/mykt/doEdit'
|
|
} else {
|
|
postUrl = '/platfotm/syr/info/xtsb/doAdd'
|
|
}
|
|
const resp = await $.post(base + postUrl, this.formData)
|
|
if (resp.code === 0) {
|
|
setTimeout(() => {
|
|
loading.text = '提交成功'
|
|
loading.spinner = 'el-icon-check'
|
|
setTimeout(() => {
|
|
loading.close()
|
|
sublime.jumpPagePjax('/platfotm/syr/info/mykt')
|
|
}, 1000)
|
|
}, 1500)
|
|
} else {
|
|
loading.close()
|
|
this.notifyError(resp.msg)
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
},
|
|
async isEdit() {
|
|
const id = GetQueryString("id")
|
|
this.id = id
|
|
if (id) {
|
|
const resp = await $.get(loc() + '/findWriteInfo/' + id)
|
|
this.formData = resp.data
|
|
console.log(resp)
|
|
this.xmcyTable = JSON.parse(resp.data.xmzcy)
|
|
yjjctjEditor.txt.html(this.formData.yjjctj)
|
|
yqcgtgjzEditor.txt.html(this.formData.yqcgtgjz)
|
|
}
|
|
},
|
|
initEditor() {
|
|
return new Promise((resolve, reject) => {
|
|
this.$nextTick(() => {
|
|
setTimeout(() => {
|
|
yjjctjEditor = new wangEditor(this.$refs.yjjctj)
|
|
yjjctjEditor.config.onchange = (html) => {
|
|
if (removeHTMLTag(html).length > 400) {
|
|
this.$message.info('项目研究基础及条件最多填写400字')
|
|
}
|
|
this.formData.yjjctj = html
|
|
}
|
|
yjjctjEditor.create()
|
|
yqcgtgjzEditor = new wangEditor(this.$refs.yqcgtgjz)
|
|
yqcgtgjzEditor.config.onchange = (html) => {
|
|
if (removeHTMLTag(html).length > 100) {
|
|
this.$message.info('项目预期成果及应用推广价值最多填写100字')
|
|
}
|
|
this.formData.yqcgtgjz = html
|
|
}
|
|
yqcgtgjzEditor.create()
|
|
resolve()
|
|
}, 1000)
|
|
})
|
|
})
|
|
|
|
}
|
|
},
|
|
async mounted() {
|
|
await this.initEditor()
|
|
await this.isEdit()
|
|
},
|
|
created() {
|
|
this.$set(this.formData, 'birthday', "${@shiro.getPrincipalProperty('birthday')}")
|
|
this.$set(this.formData, 'bgphone', "${@shiro.getPrincipalProperty('bgphone')}")
|
|
this.$set(this.formData, 'mobile', "${@shiro.getPrincipalProperty('mobile')}")
|
|
this.$set(this.formData, 'email', "${@shiro.getPrincipalProperty('email')}")
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|