482 lines
22 KiB
HTML
482 lines
22 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 shadow="never">
|
|
<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="xmmcId">
|
|
<el-select v-model="formData.xmmcId" placeholder="请选择项目名称" clearable @change="showGroup(formData.xmmcId)">
|
|
<el-option v-for="o in projectList" :label="o.projectName" :value="o.id"></el-option>
|
|
</el-select>
|
|
</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 v-model="formData.username"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :sm="24">
|
|
<el-form-item label="性别">
|
|
<el-input placeholder="性别" readonly v-model="formData.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="dwname">
|
|
<el-input readonly v-model="formData.dwname"></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-form-item label="院级工会" prop="ghname">
|
|
<el-input readonly v-model="formData.ghname"></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="loginname">
|
|
<template slot-scope="scope">
|
|
<el-select clearable
|
|
size="mini"
|
|
v-model="scope.row.userId" filterable remote
|
|
placeholder="输入工号或者姓名查找" :remote-method="queryUser"
|
|
@change="userChange(scope)" style="width: 100%">
|
|
<el-option v-for="o in userList"
|
|
:label="o.username+'('+o.loginname+')'"
|
|
:value="o.id"
|
|
:key="o.id"></el-option>
|
|
</el-select>
|
|
</template>
|
|
</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" ref="xmssljffdivider">
|
|
项目实施路径及方法(最多填写400字，当前字数
|
|
<span :style="{color:(xmssljffLength>400?'red':'')}"> {{xmssljffLength}})</span>
|
|
</el-divider>
|
|
<el-form-item label-width="0" prop="xmssljff" style="margin-bottom: 40px;">
|
|
<div ref="xmssljff" style="width: 100%;"></div>
|
|
</el-form-item>
|
|
|
|
|
|
<el-divider content-position="left">
|
|
项目预期成果及应用推广价值(最多填写300字，当前字数
|
|
<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 v-bind:disabled="isSubmitting" @click="doSave" style="width: 300px" type="primary">保存</el-button>
|
|
<el-button v-bind:disabled="isSubmitting" @click="doSubmit" style="width: 300px" type="primary">提交</el-button>
|
|
</el-row>
|
|
</el-card>
|
|
</guava>
|
|
</div>
|
|
|
|
<script>
|
|
let yjjctjEditor = null
|
|
let yqcgtgjzEditor = null
|
|
let xmssljffEditor = 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 > 300) {
|
|
callback(new Error('字数太多'))
|
|
} else {
|
|
callback()
|
|
}
|
|
}
|
|
|
|
const validatorXmssljff = (rule, value, callback) => {
|
|
if (value === '') {
|
|
callback(new Error('请填写'))
|
|
} else if (removeHTMLTag(value).length > 400) {
|
|
callback(new Error('字数太多'))
|
|
} else {
|
|
callback()
|
|
}
|
|
}
|
|
|
|
|
|
return {
|
|
isSubmitting:false,
|
|
projectList: [],
|
|
id: null,
|
|
o: {'username': '', 'zc': '', 'xl': '', 'gzdw': ''},
|
|
formData: {yjjctj: '', yqcgtgjz: '', xmssljff: ''},
|
|
rules: {
|
|
xmmcId: [{required: true, message: '请选择项目名称', trigger: ['blur', 'change']}],
|
|
birthday: [{required: false, message: '请选择出生日期', trigger: ['blur', 'change']}],
|
|
zwzc: [{required: false, message: '请填写职务职称', trigger: ['blur', 'change']}],
|
|
xlxw: [{required: false, message: '请填写学历学位', trigger: ['blur', 'change']}],
|
|
// bgphone: [{required: false, message: '请填写办公电话', trigger: ['blur', 'change']}],
|
|
mobile: [{required: false, message: '请填写手机号码', trigger: ['blur', 'change']}],
|
|
/*email: [{required: false, message: '请填写电子信箱', trigger: ['blur', 'change']}, {
|
|
type: 'email',
|
|
message: '请填写正确的电子信箱',
|
|
trigger: ['blur', 'change']
|
|
}],*/
|
|
yjjctj: [{validator: validatorYjjctj, trigger: ['blur', 'change']}],
|
|
xmssljff: [{validator: validatorXmssljff, trigger: ['blur', 'change']}],
|
|
yqcgtgjz: [{validator: validatorYqcgtgjz, trigger: ['blur', 'change']}]
|
|
},
|
|
xmcyTable: [o],
|
|
userList: [],
|
|
}
|
|
},
|
|
computed: {
|
|
yanjiujichuLength() {
|
|
return removeHTMLTag(this.formData.yjjctj).length
|
|
},
|
|
yqcgtgjzLength() {
|
|
return removeHTMLTag(this.formData.yqcgtgjz).length
|
|
},
|
|
xmssljffLength() {
|
|
return removeHTMLTag(this.formData.xmssljff).length
|
|
}
|
|
},
|
|
methods: {
|
|
//检查项目成员填写是否完成
|
|
checkXmcy() {
|
|
let flag = true
|
|
for (let o of this.xmcyTable) {
|
|
if (o['username'] === '' || o['zc'] === '' || o['gzdw'] === '') {
|
|
flag = false
|
|
break
|
|
}
|
|
}
|
|
return flag
|
|
},
|
|
async doSave() {
|
|
let isValid = true
|
|
this.$refs.AddForm.validateField('xmmcId', (err) => {
|
|
if (err.length) {
|
|
isValid = false
|
|
}
|
|
})
|
|
if (!isValid) 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/doSave'
|
|
}
|
|
const o = this.projectList.find(o => o.id === this.formData.xmmcId)
|
|
this.formData.xmmc = o.projectName
|
|
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)
|
|
}
|
|
},
|
|
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'
|
|
this.formData.tjxx='0';
|
|
} else {
|
|
postUrl = '/platfotm/syr/info/xtsb/doAdd'
|
|
}
|
|
const o = this.projectList.find(o => o.id === this.formData.xmmcId)
|
|
this.formData.xmmc = o.projectName
|
|
|
|
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
|
|
this.xmcyTable = JSON.parse(resp.data.xmzcy)
|
|
yjjctjEditor.txt.html(this.formData.yjjctj)
|
|
xmssljffEditor.txt.html(this.formData.xmssljff)
|
|
yqcgtgjzEditor.txt.html(this.formData.yqcgtgjz)
|
|
this.xmcyTable.forEach(v=>{
|
|
v.userId=v.username
|
|
})
|
|
}
|
|
},
|
|
async initEditor() {
|
|
return await 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.$refs.AddForm.validateField('yjjctj', (errMsg) => {
|
|
})
|
|
this.formData.yjjctj = html
|
|
}
|
|
yjjctjEditor.config.uploadImgShowBase64 = true
|
|
yjjctjEditor.create()
|
|
|
|
xmssljffEditor = new wangEditor(this.$refs.xmssljff)
|
|
xmssljffEditor.config.onchange = (html) => {
|
|
if (removeHTMLTag(html).length > 400) {
|
|
this.$message.info('项目实施路径及方法最多填写400字')
|
|
}
|
|
this.$refs.AddForm.validateField('xmssljff', (errMsg) => {
|
|
})
|
|
this.formData.xmssljff = html
|
|
}
|
|
xmssljffEditor.config.uploadImgShowBase64 = true
|
|
xmssljffEditor.create()
|
|
|
|
yqcgtgjzEditor = new wangEditor(this.$refs.yqcgtgjz)
|
|
yqcgtgjzEditor.config.onchange = (html) => {
|
|
if (removeHTMLTag(html).length > 300) {
|
|
this.$message.info('项目预期成果及应用推广价值最多填写300字')
|
|
}
|
|
this.$refs.AddForm.validateField('yqcgtgjz', (errMsg) => {
|
|
})
|
|
this.formData.yqcgtgjz = html
|
|
}
|
|
yqcgtgjzEditor.config.uploadImgShowBase64 = true
|
|
yqcgtgjzEditor.create()
|
|
resolve()
|
|
}, 800)
|
|
})
|
|
})
|
|
},
|
|
async getProjectList() {
|
|
const resp = await $.get('/platfotm/syr/info/xtsb/getProjectList', {
|
|
year: moment().format('YYYY')
|
|
})
|
|
return resp.data
|
|
},
|
|
async showGroup(id){
|
|
const resp = await $.get('/platfotm/syr/info/xtsb/showGroup',{id:id})
|
|
if (resp.code===1){
|
|
this.$notify.warning(resp.msg)
|
|
this.isSubmitting=true;
|
|
}else {
|
|
this.isSubmitting=false;
|
|
}
|
|
},
|
|
userChange(scope) {
|
|
const userList = clone(this.userList)
|
|
const user = userList.find(v => v.id === scope.row.userId)
|
|
if (user) {
|
|
scope.row.username = user.username
|
|
scope.row.zc = user.zc
|
|
scope.row.gzdw = user.dwname
|
|
}
|
|
},
|
|
async queryUser(val) {
|
|
const data = await searchUser(val)
|
|
this.userList = data
|
|
},
|
|
initFormData(){
|
|
if (this.id==null){
|
|
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')}")
|
|
this.$set(this.formData, 'username', "${@shiro.getPrincipalProperty('username')}")
|
|
this.$set(this.formData, 'sex', "${@shiro.getPrincipalProperty('sex')}")
|
|
this.$set(this.formData, 'dwname', "${@shiro.getPrincipalProperty('unit').getName()}")
|
|
this.$set(this.formData, 'ghname', "${@shiro.getPrincipalProperty('union').getUnionname()}")
|
|
}
|
|
}
|
|
},
|
|
async mounted() {
|
|
await this.initEditor()
|
|
await this.isEdit()
|
|
},
|
|
async created() {
|
|
this.initFormData();
|
|
this.projectList = await this.getProjectList()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|