9.19
今天完成开学考试，本次考试的题目是一个《河北省重大技术需求征集》的基本信息填报功能。本次提供前端页面的代码。涉及到的必填选项以及字数限制都有很好的效果。
<template> <div> <div> <div class="card" style="margin-bottom: 10px"> <el-input v-model="data.name" style="width: 260px;margin-right: 10px" placeholder="请输入项目名称查询" :prefix-icon="Search"/> <el-input v-model="data.round" style="width: 260px;margin-right: 10px" placeholder="请输入查新范围查询" :prefix-icon="Search"/> <el-button type="primary" style="margin-left:10px" @click="load">查询</el-button> <el-button type="info" @click="reset">重置</el-button> </div> <div> <el-button type="primary" @click="handelAdd">新增</el-button> </div> </div> <el-dialog v-model="data.formVisible" title="重大技术征集" width="50%"> <el-form :model="data.form" style="padding-right: 30px" label-width="150px" label-position="right"> <el-form-item label="机构全称" prop="name" required="true"> <el-input v-model="data.form.name" autocomplete="off"/> </el-form-item> <el-form-item label="归口管理部门"> <el-input v-model="data.form.department" autocomplete="off"/> </el-form-item> <el-form-item label="通讯地址" prop="phonead" required="true"> <el-input v-model="data.form.phonead" autocomplete="off"/> </el-form-item> <el-form-item label="所在地域" prop="address" required> <el-input v-model="data.form.address" autocomplete="off"/> </el-form-item> <el-form-item label="法人代表" prop="frdb" required> <el-input v-model="data.form.frdb" autocomplete="off"/> </el-form-item> <el-form-item label="电子信箱" prop="email" required> <el-input v-model="data.form.email" autocomplete="off"/> </el-form-item> <el-form-item label="邮政编码"> <el-input v-model="data.form.yzbm" autocomplete="off"/> </el-form-item> <el-form-item label="联系人" prop="lxr" required> <el-input v-model="data.form.lxr" autocomplete="off"/> </el-form-item> <el-form-item label="电话" prop="phone" required> <el-input v-model="data.form.phone" autocomplete="off"/> </el-form-item> <el-form-item label="传真"> <el-input v-model="data.form.cz" autocomplete="off"/> </el-form-item> <el-form-item label="机构属性" prop="shuxing" required> <el-radio-group v-model="data.form.shuxing"> <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="机构简介" prop="jj" required> <el-input v-model="data.form.jj" type="textarea" autocomplete="off" :maxlength="500" show-word-limit style="height: 40px" /> </el-form-item> <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> <script setup> import {reactive} from "vue"; import {Search} from "@element-plus/icons-vue"; import request from "@/utils/request"; import {ElMessage} from "element-plus"; 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>
