整体架构流程
一: 前端效果图
点击姓名输入框,跳到新的组件页面
二:效果图二三的前端代码
这个为实现模块多选的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>