完成任务安排的业务( 前后端部分)(我负责的部分)

本文详细描述了一个前端界面,涉及姓名输入和模块多选功能,以及后端的接口调用和数据库操作,展示了如何在前端与后端之间处理数据和组件之间的交互,包括爬虫任务的新增和模块列表查询。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

整体架构流程

一: 前端效果图

任务安排页面展示

完成新增的模块多选部分

点击姓名输入框,跳到新的组件页面

完成新增姓名

二:效果图二三的前端代码
这个为实现模块多选的html


```html
<el-form-item label="所属模块" prop="modules">
	<el-select v-model="form.modules" multiple placeholder="请选择所属模块">
	<!-- 使用 v-for 渲染多选下拉列表的选项 -->
	<el-option v-for="module in moduleOptions" :key="module.value" :label="module.label"
		 :value="module.label"></el-option>
	</el-select>		
</el-form-item>

<el-form-item label="员工姓名" prop="employeeName">
	  <el-input v-model="form.employeeName" placeholder="请输入员工姓名" @focus="openSelectUser" />
</el-form-item>
	
	
	
	<select-user ref="select" @ok="selectUser"></select-user>

<el-table @row-click="handleCurrentChange" ref="table" :data="userList" 
	highlight-current-row height="260px">
<el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />

这个为data


	moduleOptions: [
	        { value: 'module1', label: '模块1' },
	        { value: 'module2', label: '模块2' },
	        { value: 'module3', label: '模块3' },
	        // 添加更多选项
	      ],
 //得到模块集合
	listModule().then(response => {
	   const temp = [];
	
	   for (var i = 0; i <= response.data.length - 1; i++) {
	   const t = {
	      			value: "",
	       			label: ""
	          };
	         t.value = response.data[i].module_id;
	         t.label = response.data[i].module_name;
	         temp.push(t);
	        }
	        this.moduleOptions = temp;
	        // this.tableObject = response.tableObject;
	      })
	
	// 查询爬虫任务安排的模块列表
	export function listModule() {
	  return request({
	    url: '/system/spider/taskModule/listModule',
	    method: 'get'
	  })
	}
	
	
	
	
	import selectUser from '@/views/jskj/task/selectUser'
	
	components: { selectUser },

	openSelectUser() {
	      this.$refs.select.show();
	    },
		// 多选框选中数据
	    handleCurrentChange(user) {
	      this.visible = false;
	      this.$emit("ok",user);
	    },
	 selectUser(user) {
	      this.form.userId = user.userId
	      this.form.employeeName = user.nickName
	    },
	
	
	/** 提交按钮 */
	    submitForm() {
	      this.$refs["form"].validate(valid => {
	        if (valid) {
	          if (this.form.id != null) {
	            updateTaskArrange(this.form).then(response => {
	              this.$modal.msgSuccess("修改成功");
	              this.open = false;
	              this.getList();
	            });
	          } else {
	            console.log(this.form);
	            addTaskArrange(this.form).then(response => {
	              this.$modal.msgSuccess("新增成功");
	              this.open = false;
	              this.getList();
	            });
	          }
	        }
	      });
	
	
	// 新增爬虫任务安排
	export function addTaskArrange(data) {
	  return request({
	    url: '/system/spider/taskArrange/addTaskArrange',
	    method: 'post',
	    data: data
	  })
	}

三: 后端代码

	/**
	 * 新增爬虫任务安排
	 */
	@Log(title = "爬虫任务安排", businessType = BusinessType.INSERT)
	@PostMapping("/addTaskArrange")
	public AjaxResult add(@RequestBody SpiderTaskArrange spiderTaskArrange)
	{
	    spiderTaskArrangeService.insertSpiderTaskArrange(spiderTaskArrange);
	    return AjaxResult.success();
	}


	/**
     * 新增爬虫任务安排
     * 
     * @param spiderTaskArrange 爬虫任务安排
     * @return 结果
     */
    @Override
    public AjaxResult insertSpiderTaskArrange(SpiderTaskArrange spiderTaskArrange)
    {
        //因为可能有多模块,所有进行批量新增
        String[] modules = spiderTaskArrange.getModules();
        for (String module : modules) {
            spiderTaskArrange.setModule(module);
            spiderTaskArrangeMapper.insertSpiderTaskArrange(spiderTaskArrange);
        }
        return AjaxResult.success();
    }
<insert id="insertSpiderTaskArrange" parameterType="SpiderTaskArrange" useGeneratedKeys="true" keyProperty="id">
			insert into spider_task_industry
			<trim prefix="(" suffix=")" suffixOverrides=",">
				<if test="employeeId != null">employee_id,</if>
				<if test="employeeName != null">employee_name,</if>
				<if test="category != null">category,</if>
				<if test="subCategory != null">sub_category,</if>
				<if test="module != null">module,</if>
				<if test="status != null">status,</if>
				<if test="arrangeTime != null">arrange_time,</if>
				<if test="remark != null">remark,</if>
				<if test="total != null">total,</if>
			</trim>
			<trim prefix="values (" suffix=")" suffixOverrides=",">
				<if test="employeeId != null">#{employeeId},</if>
				<if test="employeeName != null">#{employeeName},</if>
				<if test="category != null">#{category},</if>
				<if test="subCategory != null">#{subCategory},</if>
				<if test="module != null">#{module},</if>
				<if test="status != null">#{status},</if>
				<if test="arrangeTime != null">#{arrangeTime},</if>
				<if test="remark != null">#{remark},</if>
				<if test="total != null">#{total},</if>
			</trim>
		</insert>
	/**
	  * 查询爬虫安排的模块列表
	*/
	@GetMapping("/listModule")
	public AjaxResult listModule()
	{
	  List<Map<String,Object>> list = spiderTaskModuleService.selectSpiderTaskModuleListOnAdd();
	     return success(list);
	}

	@Override
    public List<Map<String, Object>> selectSpiderTaskModuleListOnAdd() {
        return spiderTaskModuleMapper.selectSpiderTaskModuleListOnAdd();
    }
<select id="selectSpiderTaskModuleListOnAdd" resultType="java.util.Map">
			select module_id , module_name  from spider_task_module
		</select>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值