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>