9.19

标签：form 9.19 value label data children 采选

今天完成开学考试，本次考试的题目是一个《河北省重大技术需求征集》的基本信息填报功能。本次提供前端页面的代码。涉及到的必填选项以及字数限制都有很好的效果

以下是代码

<el-form-item label="技术需求名称" prop="jsxqmc" required>
<el-input v-model="data.form.jsxqmc" autocomplete="off"/>
</el-form-item>
<el-form-item label="需求时限" required>
<div style="display: flex; align-items: center;">
<el-input v-model="data.year1" autocomplete="off" style="width: 50px; margin-right: 5px;"/>
年至
<el-input v-model="data.year2" autocomplete="off" style="width: 50px; margin-left: 5px;"/>
年
</div>
</el-form-item>

<el-form-item label="技术需求概述" required>
<div>
<label for="zywt" style="display:block; margin: 5px;">1、主要问题（需要解决的重大技术问题，限 500
字以内）</label>
<el-input
id="zywt"
v-model="data.form.zywt"
type="textarea"
autocomplete="off"
:maxlength="500"
show-word-limit
style="height: 40px"
/>
</div>
<div>
<label for="jsgj" style="display:block; margin: 5px;">2、技术关键（所需的关键技术、主要指标，限 500
字以内）</label>
<el-input
id="jsgj"
v-model="data.form.jsgj"
type="textarea"
autocomplete="off"
:maxlength="500"
show-word-limit
style="height: 40px"
/>
</div>
<div>
<label for="yqmb" style="display:block; margin: 5px;">3、预期目标（技术创新性、经济社会效益，限 500
字以内）</label>
<el-input
id="yqmb"
v-model="data.form.yqmb"
type="textarea"
autocomplete="off"
:maxlength="500"
show-word-limit
style="height: 40px"
/>
</div>
</el-form-item>

<el-form-item label="关键字" required>
<el-input v-model="data.form.gjz1" autocomplete="off" style="height: 40px"/>
<el-input v-model="data.form.gjz2" autocomplete="off" style="height: 40px"/>
<el-input v-model="data.form.gjz3" autocomplete="off" style="height: 40px"/>
<el-input v-model="data.form.gjz4" autocomplete="off" style="height: 40px"/>
<el-input v-model="data.form.gjz5" autocomplete="off" style="height: 40px"/>
</el-form-item>

<el-form-item label="拟投资总金额" required>
<el-input v-model="data.form.sum" autocomplete="off" style="width: 100px"/>
万元
</el-form-item>

<el-form-item label="技术需求解决方式" label-width="130px">
<el-radio-group v-model="data.form.fangshi">
<el-radio label="独立研发" value="独立研发">独立研发</el-radio>
<el-radio label="委托研发" value="委托研发">委托研发</el-radio>
<el-radio label="合作研发" value="合作研发">合作研发</el-radio>
<el-radio label="其他" value="其他">其他</el-radio>
</el-radio-group>
<el-form-item label="合作意向单位（选填）" label-width="160px">
<el-input v-model="data.form.hzdanwei" autocomplete="off"/>
</el-form-item>
</el-form-item>

<el-form-item label="科技活动类型" required>
<el-radio-group v-model="data.form.kjhdlx">
<el-radio label="基础研究" value="基础研究">基础研究</el-radio>
<el-radio label="应用研究" value="应用研究">应用研究</el-radio>
<el-radio label="试验发展" value="试验发展">试验发展</el-radio>
<el-radio label="研究与试验发展成果应用" value="研究与试验发展成果应用">研究与试验发展成果应用</el-radio>
<el-radio label="技术推广与科技服务" value="技术推广与科技服务">技术推广与科技服务</el-radio>
<el-radio label="生产性活动" value="生产性活动">生产性活动</el-radio>
</el-radio-group>
</el-form-item>

<el-form-item label="学科分类（限基础研究填写）" label-width="200px">
<el-cascader
v-model="data.xkfl1"
:options="data.disciplineOptions"
:props="{ expandTrigger: 'hover' }"
clearable
style="width: 300px;"
/>
</el-form-item>
<el-form-item label="需求技术所属领域（非基础研究填写）" label-width="200px">
<el-checkbox-group v-model="data.content">
<el-checkbox label="电子信息"/>
<el-checkbox label="光机电一体化"/>
<el-checkbox label="生物技术与制药"/>
<el-checkbox label="新材料及应用"/>
<el-checkbox label="现代农业"/>
<el-checkbox label="新能源与高效节能"/>
<el-checkbox label="资源与环境"/>
<el-checkbox label="高技术服务业"/>
<el-checkbox label="海洋"/>
<el-checkbox label="社会公共事业"/>
<el-checkbox label="医疗卫生"/>
<el-checkbox label="其它">其他
<el-input v-model="data.form.qita" autocomplete="off" style="width: 100px"/>
</el-checkbox>
</el-checkbox-group>
</el-form-item>

<el-form-item label="需求技术应用行业（非基础研究填写）" required label-width="200px">
<el-cascader
v-model="data.xqjsyyhh1"
:options="data.industryOptions"
:props="{ expandTrigger: 'hover' }"
clearable
style="width: 300px;"
/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="unsave">取消</el-button>
<el-button type="primary" @click="save">添加</el-button>
</span>
</template>
</el-dialog>
</div>
</template>

const data = reactive({
name: '',
round: '',
total: 0,
tableData: [],
pageSize: 5,
pageNum: 1,
xkfl1: [],
xqjsyyhh1: [],
form: {
name: '',
department: '',
phonead: '',
address: '',
frdb: '',
email: '',
yzbm: '',
lxr: '',
phone: '',
cz: '',
shuxing: '',
jj: '',
jsxqmc: '',
year: '',
zywt: '',
jsgj: '',
yqmb: '',
gjz1: '',
gjz2: '',
gjz3: '',
gjz4: '',
gjz5: '',
sum: 1,
fangshi: '',
hzdanwei: '',
kjhdlx: '',
xkfl: '',
xqjsssly: '',
qita: '',
xqjsyyhh: '',
},
formVisible: false,
year1: 1,
year2: 2,
content: [],
disciplineOptions: [
{
value: '自然科学',
label: '自然科学',
children: [
{
value: '数学',
label: '数学',
children: [
{value: '代数', label: '代数'},
{value: '几何', label: '几何'},
{value: '概率论', label: '概率论'}
]
},
{
value: '物理学',
label: '物理学',
children: [
{value: '力学', label: '力学'},
{value: '热学', label: '热学'},
{value: '电磁学', label: '电磁学'}
]
}
]
},
{
value: '哲学',
label: '哲学',
children: [
{
value: '哲学类',
label: '哲学类',
children: [
{value: '哲学', label: '哲学'},
{value: '逻辑学', label: '逻辑学'},
{value: '宗教学', label: '宗教学'}
]
}
]
},
{
value: '经济学',
label: '经济学',
children: [
{
value: '经济学类',
label: '经济学类',
children: [
{value: '经济学', label: '经济学'},
{value: '经济统计学', label: '经济统计学'},
{value: '国民经济管理', label: '国民经济管理'},
{value: '资源与环境经济学', label: '资源与环境经济学'},
{value: '商务经济学', label: '商务经济学'},
{value: '能源经济', label: '能源经济'},
{value: '劳动经济学', label: '劳动经济学'},
{value: '经济工程', label: '经济工程'},
{value: '数字经济', label: '数字经济'}
]
},
{
value: '财政学类',
label: '财政学类',
children: [
{value: '财政学', label: '财政学'},
{value: '税收学', label: '税收学'},
{value: '国际税收', label: '国际税收'}
]
},
{
value: '金融学类',
label: '金融学类',
children: [
{value: '金融学', label: '金融学'},
{value: '金融工程', label: '金融工程'},
{value: '保险学', label: '保险学'},
{value: '投资学', label: '投资学'},
{value: '金融教学', label: '金融教学'},
{value: '信用管理', label: '信用管理'},
{value: '经济与金融', label: '经济与金融'},
{value: '精算学', label: '精算学'},
{value: '互联网金融', label: '互联网金融'},
{value: '金融科技', label: '金融科技'}
]
},
{
value: '经济与贸易类',
label: '经济与贸易类',
children: [
{value: '国际经济与贸易', label: '国际经济与贸易'},
{value: '贸易经济', label: '贸易经济'},
{value: '国际经济发展合作', label: '国际经济发展合作'}
]
},
]
},
{
value: '法学',
label: '法学',
children: [
{
value: '法学类',
label: '法学类',
children: [
{value: '法学', label: '法学'},
{value: '知识产权', label: '知识产权'},
{value: '监狱学', label: '监狱学'},
{value: '国际经贸规则', label: '国际经贸规则'},
{value: '司法警察学', label: '司法警察学'},
{value: '社区矫正', label: '社区矫正'},
{value: '纪检监察', label: '纪检监察'},
{value: '信用风险管理与法律防控', label: '信用风险管理与法律防控'}
]
},
{
value: '政治学类',
label: '政治学类',
children: [
{value: '政治学与行政学', label: '政治学与行政学'},
{value: '国际政治', label: '国际政治'},
{value: '外交学', label: '外交学'}
]
},
{
value: '社会学类',
label: '社会学类',
children: [
{value: '社会学', label: '社会学'},
{value: '社会工作', label: '社会工作'},
{value: '人类学', label: '人类学'},
{value: '女性学', label: '女性学'},
{value: '家政学', label: '家政学'},
{value: '老年学', label: '老年学'},
{value: '社会政策', label: '社会政策'}
]
},
{
value: '马克思主义理论类',
label: '马克思主义理论类',
children: [
{value: '科学社会主义', label: '科学社会主义'},
{value: '中国历史', label: '中国历史'},
{value: '思想政治教育', label: '思想政治教育'},
{value: '马克思主义理论', label: '马克思主义理论'},
]
},
]
}
],

industryOptions: [
{
value: '农、林、牧、渔业',
label: '农、林、牧、渔业',
children: [
{
value: '农业',
label: '农业',
children: [
{value: '谷物种植', label: '谷物种植'},
{value: '蔬菜、园艺作物种植', label: '蔬菜、园艺作物种植'},
{value: '水果种植', label: '水果种植'},
{value: '豆类、油料和薯类种植', label: '豆类、油料和薯类种植'},
{value: '棉、麻、糖、烟草种植', label: '棉、麻、糖、烟草种植'},
{value: '中药材种植', label: '中药材种植'}
]
},
{
value: '林业',
label: '林业',
children: [
{value: '林木育种和育苗', label: '林木育种和育苗'},
{value: '造林和更新', label: '造林和更新'},
{value: '森林经营和管护', label: '森林经营和管护'},
{value: '木材和竹材采运', label: '木材和竹材采运'},
{value: '林产品采集', label: '林产品采集'}
]
}
]
},
{
value: '采矿业',
label: '采矿业',
children: [
{
value: '煤炭开采和洗选业',
label: '煤炭开采和洗选业',
children: [
{value: '烟煤和无烟煤开采洗选', label: '烟煤和无烟煤开采洗选'},
{value: '褐煤开采洗选', label: '褐煤开采洗选'}
]
},
{
value: '石油和天然气开采业',
label: '石油和天然气开采业',
children: [
{value: '天然原油开采', label: '天然原油开采'},
{value: '天然气开采', label: '天然气开采'}
]
},
{
value: '黑色金属矿采选业',
label: '黑色金属矿采选业',
children: [
{value: '铁矿采选', label: '铁矿采选'},
{value: '锰矿、铬矿采选', label: '锰矿、铬矿采选'},
{value: '其他黑色金属矿采选', label: '其他黑色金属矿采选'}
]
},
{
value: '非金属矿采选业',
label: '非金属矿采选业',
children: [
{value: '土砂石开采', label: '土砂石开采'},
{value: '化学矿开采', label: '化学矿开采'},
{value: '采盐', label: '采盐'},
{value: '石棉及其他非金属矿采选', label: '石棉及其他非金属矿采选'}
]
}
]
},
{
value: '制造业',
label: '制造业',
children: [
{
value: '农副食品加工业',
label: '农副食品加工业',
children: [
{value: '谷物磨制', label: '谷物磨制'},
{value: '饲料加工', label: '饲料加工'},
{value: '植物油加工', label: '植物油加工'},
{value: '制糖业', label: '制糖业'},
{value: '屠宰及肉类加工', label: '屠宰及肉类加工'},
{value: '水产品加工', label: '水产品加工'},
{value: '蔬菜、水果和坚果加工', label: '蔬菜、水果和坚果加工'},
{value: '其他农副食品加工', label: '其他农副食品加工'},
]
},
{
value: '食品制造业',
label: '食品制造业',
children: [
{value: '焙烤食品制造', label: '焙烤食品制造'},
{value: '糖果、巧克力及蜜饯制造', label: '糖果、巧克力及蜜饯制造'},
{value: '方便食品制造', label: '方便食品制造'},
{value: '乳制品制造', label: '乳制品制造'},
{value: '罐头食品制造', label: '罐头食品制造'},
{value: '调味品、发酵品制造', label: '调味品、发酵品制造'},
{value: '其他食品制造', label: '其他食品制造'},

]
},
{
value: '黑色金属矿采选业',
label: '黑色金属矿采选业',
children: [
{value: '铁矿采选', label: '铁矿采选'},
{value: '锰矿、铬矿采选', label: '锰矿、铬矿采选'},
{value: '其他黑色金属矿采选', label: '其他黑色金属矿采选'}
]
},
{
value: '非金属矿采选业',
label: '非金属矿采选业',
children: [
{value: '土砂石开采', label: '土砂石开采'},
{value: '化学矿开采', label: '化学矿开采'},
{value: '采盐', label: '采盐'},
{value: '石棉及其他非金属矿采选', label: '石棉及其他非金属矿采选'}
]
},
{
value: '酒、饮料和精制茶制造业',
label: '酒、饮料和精制茶制造业',
children: [
{value: '酒的制造', label: '酒的制造'},
{value: '饮料制造', label: '饮料制造'},
{value: '精制茶加工', label: '精制茶加工'}
]
}
]
}
],
})

//新增事件弹窗
const handelAdd = () => {
data.formVisible = true
data.form = {}
data.year1 = 1
data.year2 = 2
data.content = []
data.xkfl1 = []
data.xqjsyyhh1 = []
}

//保存数据到后台
const save = () => {
data.form.year = data.year1 + '年至' + data.year2 + "年"
data.form.xqjsssly = data.content.join(',')
data.form.xkfl = data.xkfl1.join(',')
data.form.xqjsyyhh = data.xqjsyyhh1.join(',')
console.log(data.form.name)
if (data.form.name !== undefined && data.form.phonead !== undefined && data.form.address !== undefined && data.form.email !== undefined && data.form.frdb !== undefined && data.form.lxr !== undefined && data.form.phone !== undefined && data.form.shuxing !== undefined && data.form.jj !== undefined && data.form.jsxqmc !== undefined && data.form.zywt !== undefined && data.form.jsgj !== undefined && data.form.yqmb !== undefined && data.form.gjz1 !== undefined && data.form.gjz2 !== undefined && data.form.gjz3 !== undefined && data.form.gjz4 !== undefined && data.form.gjz5 !== undefined && data.form.fangshi !== undefined && data.form.kjhdlx !== undefined) {
request.post("http://localhost:18891/test/add1", data.form).then(res => {
if (res.code === '200') {
//重新获取数据
ElMessage.success("操作成功！")
unsave()
} else {
ElMessage.error(res.msg);
}
})
} else {
ElMessage.error("请输入完整信息！")
}
};
const unsave = () => {
data.formVisible = false
data.form = {}
data.year1 = 1
data.year2 = 2
data.content = []
data.xkfl1 = []
data.xqjsyyhh1 = []
}
</script>

标签：form,9.19,value,label,data,children,采选
From： https://www.cnblogs.com/lml66/p/18633884

相关文章

赞助商

阅读排行