任务分配问题前后端集成

151 篇文章 13 订阅

一 前端

1 路由

  {
    path: '/task',
    component: Layout,
    redirect: '/task/distribute',
    name: '任务管理',
    alwaysShow: true,
    meta: { title: '任务管理', icon: 'example' },
    children: [
      {
        path: 'distribute',
        name: '任务管理',
        component: () => import('@/views/task/distribute'),
        meta: { title: '任务分配', icon: 'table' }
      },
      {
        path: 'list',
        name: '拜访列表',
        component: () => import('@/views/task/list'),
        meta: { title: '拜访列表', icon: 'table' }
      },
      {
        path: 'hospitalVisitList',
        name: '医院拜访列表',
        component: () => import('@/views/task/hospitalVisitList'),
        meta: { title: '医院拜访列表', icon: 'table' }
      },
      {
        path: 'companyVisitList',
        name: '公司拜访列表',
        component: () => import('@/views/task/companyVisitList'),
        meta: { title: '公司拜访列表', icon: 'table' }
      },
      {
        path: 'pharmacyVisitList',
        name: '药房拜访列表',
        component: () => import('@/views/task/pharmacyVisitList'),
        meta: { title: '药房拜访列表', icon: 'table' }
      },
    ]
  },

2 任务列表页面

<template>
  <div class="app-container">
    <!-- 条件查询 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.name" placeholder="名称" />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList()">搜索</el-button>
    </el-form>
    <!-- 列表 -->
    <el-table :data="list" stripe style="width: 100%">
      <el-table-column type="index" width="50" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="startTime" label="开始时间" />
      <el-table-column prop="endTime" label="结束时间" />
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />
  </div>
</template>
</div>
</template>

<script>
// 引入接口定义的 js 文件
import taskDistribution from "@/api/taskDistribution";
export default {
  // 定义变量和初始值
  data() {
    return {
      current: 1, // 当前页
      limit: 20, // 每页显示记录数
      searchObj: {}, // 条件封装对象
      list: [], // 每页数据集合
      total: 0 // 总记录数
    };
  },
  // 在页面渲染之前执行,一般调用 methods 中定义的方法,得到数据
  created() {
    this.getList();
  },
  methods: {
    // 定义方法,进行请求接口调用
    // 拜访列表
    getList(page = 1) {
      // 添加当前页参数
      this.current = page;
      taskDistribution
        .getVisitList(this.current, this.limit, this.searchObj)
        .then(response => {
          // response 是接口返回数据
          this.list = response.data.content;
          this.total = response.data.totalElements;
        }) // 请求成功
        .catch(error => {});
    } // 请求失败
  }
};
</script>

3 医院拜访列表页面

<template>
  <div class="app-container">
    <!-- 条件查询 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.name" placeholder="名称" />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList()">搜索</el-button>
    </el-form>
    <!-- 列表 -->
    <el-table :data="list" stripe style="width: 100%">
      <el-table-column type="index" width="50" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="startTime" label="开始时间" />
      <el-table-column prop="endTime" label="结束时间" />
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />
  </div>
</template>
</div>
</template>

<script>
// 引入接口定义的 js 文件
import taskDistribution from "@/api/taskDistribution";
export default {
  // 定义变量和初始值
  data() {
    return {
      current: 1, // 当前页
      limit: 20, // 每页显示记录数
      searchObj: {}, // 条件封装对象
      list: [], // 每页数据集合
      total: 0 // 总记录数
    };
  },
  // 在页面渲染之前执行,一般调用 methods 中定义的方法,得到数据
  created() {
    this.getList();
  },
  methods: {
    // 定义方法,进行请求接口调用
    // 拜访列表
    getList(page = 1) {
      // 添加当前页参数
      this.current = page;
      taskDistribution
        .getHospitalVisitList(this.current, this.limit, this.searchObj)
        .then(response => {
          // response 是接口返回数据
          this.list = response.data.records;
          this.total = response.data.total;
        }) // 请求成功
        .catch(error => {});
    } // 请求失败
  }
};
</script>

4 公司拜访列表页面

<template>
  <div class="app-container">
    <!-- 条件查询 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.name" placeholder="名称" />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList()">搜索</el-button>
    </el-form>
    <!-- 列表 -->
    <el-table :data="list" stripe style="width: 100%">
      <el-table-column type="index" width="50" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="startTime" label="开始时间" />
      <el-table-column prop="endTime" label="结束时间" />
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />
  </div>
</template>
</div>
</template>

<script>
// 引入接口定义的 js 文件
import taskDistribution from "@/api/taskDistribution";
export default {
  // 定义变量和初始值
  data() {
    return {
      current: 1, // 当前页
      limit: 20, // 每页显示记录数
      searchObj: {}, // 条件封装对象
      list: [], // 每页数据集合
      total: 0, // 总记录数
    };
  },
  // 在页面渲染之前执行,一般调用 methods 中定义的方法,得到数据
  created() {
    this.getList();
  },
  methods: {
    // 定义方法,进行请求接口调用
    // 拜访列表
    getList(page = 1) {
      // 添加当前页参数
      this.current = page;
      taskDistribution
        .getCompanyVisitList(this.current, this.limit, this.searchObj)
        .then(response => {
          // response 是接口返回数据
          this.list = response.data.records;
          this.total = response.data.total;
        }) // 请求成功
        .catch(error => {});
    } // 请求失败
  }
};
</script>  

5 药房拜访列表页面

<template>
  <div class="app-container">
    <!-- 条件查询 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.name" placeholder="名称" />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList()">搜索</el-button>
    </el-form>
    <!-- 列表 -->
    <el-table :data="list" stripe style="width: 100%">
      <el-table-column type="index" width="50" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="startTime" label="开始时间" />
      <el-table-column prop="endTime" label="结束时间" />
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />
  </div>
</template>
</div>
</template>

<script>
// 引入接口定义的 js 文件
import taskDistribution from "@/api/taskDistribution";
export default {
  // 定义变量和初始值
  data() {
    return {
      current: 1, // 当前页
      limit: 20, // 每页显示记录数
      searchObj: {}, // 条件封装对象
      list: [], // 每页数据集合
      total: 0, // 总记录数
    };
  },
  // 在页面渲染之前执行,一般调用 methods 中定义的方法,得到数据
  created() {
    this.getList();
  },
  methods: {
    // 定义方法,进行请求接口调用
    // 拜访列表
    getList(page = 1) {
      // 添加当前页参数
      this.current = page;
      taskDistribution
        .getPharmacyVisitList(this.current, this.limit, this.searchObj)
        .then(response => {
          // response 是接口返回数据
          this.list = response.data.records;
          this.total = response.data.total;
        }) // 请求成功
        .catch(error => {});
    } // 请求失败
  }
};
</script>

二 后端

1 任务管理控制器

@Api(tags = "任务管理")
@RestController
@RequestMapping("/admin/task")
@CrossOrigin
public class TaskController {
    // 注入service
    @Autowired
    private TaskService taskService;

    @Autowired
    private VisitService visitService;

    // 1 分配任务
    @PostMapping("distributeTask")
    public Result distributeTask(@RequestBody TaskDistributionVo taskDistributionVo) {
        taskService.distributeTask(taskDistributionVo);
        return Result.ok();
    }

    // 2 条件查询带分页
    @PostMapping("visit/list/{current}/{limit}")
    public Result findPageVist(@PathVariable int current,
                               @PathVariable int limit,
                               @RequestBody(required = false) VisitVo visitVo) {
        Page<Visit> pageModel = visitService.selectPage(current, limit, visitVo);
        return Result.ok(pageModel);
    }
}

2 医院拜访控制器

// 条件查询带分页
@PostMapping("findPageHospital/{current}/{limit}")
public Result findPageHospital(@PathVariable long current,
                               @PathVariable long limit,
                               @RequestBody(required = false) VisitVo visitVo) {
    //创建page对象,传递当前页,每页记录数
    Page<HospitalVisit> page = new Page<>(current, limit);
    //构建条件
    QueryWrapper<HospitalVisit> wrapper = new QueryWrapper<>();
    String name = visitVo.getName(); // 医院拜访名称

    if (!StringUtils.isEmpty(name)) {
        wrapper.like("NAME", name);
    }

    // 调用方法实现分页查询
    IPage<HospitalVisit> pageHospitalVisit = hospitalVisitService.page(page, wrapper);

    // 返回结果
    return Result.ok(pageHospitalVisit);
}

3 公司拜访控制器

// 条件查询带分页
@PostMapping("findPageCompany/{current}/{limit}")
public Result findPageCompany(@PathVariable long current,
                              @PathVariable long limit,
                              @RequestBody(required = false) VisitVo visitVo) {
    //创建page对象,传递当前页,每页记录数
    Page<CompanyVisit> page = new Page<>(current, limit);
    //构建条件
    QueryWrapper<CompanyVisit> wrapper = new QueryWrapper<>();
    String name = visitVo.getName(); // 公司拜访名称


    if (!StringUtils.isEmpty(name)) {
        wrapper.like("NAME", name);
    }

    // 调用方法实现分页查询
    IPage<CompanyVisit> pageCompanyVisit = companyVisitService.page(page, wrapper);

    // 返回结果
    return Result.ok(pageCompanyVisit);
}

4 药房拜访控制器

// 条件查询带分页
@PostMapping("findPagePharmacy/{current}/{limit}")
public Result findPagePharmacy(@PathVariable long current,
                              @PathVariable long limit,
                              @RequestBody(required = false) VisitVo visitVo) {
    //创建page对象,传递当前页,每页记录数
    Page<PharmacyVisit> page = new Page<>(current, limit);
    //构建条件
    QueryWrapper<PharmacyVisit> wrapper = new QueryWrapper<>();
    String name = visitVo.getName(); // 药房拜访名称


    if (!StringUtils.isEmpty(name)) {
        wrapper.like("NAME", name);
    }

    // 调用方法实现分页查询
    IPage<PharmacyVisit> pagePharmacyVisit = pharmacyVisitService.page(page, wrapper);

    // 返回结果
    return Result.ok(pagePharmacyVisit);
}

5 拜访接口

/**
* @className: VisitService
* @description: 拜访接口
* @date: 2021/10/21
* @author: cakin
*/
public interface VisitService {
    /**
     * 分页查询
     *
     * @param page    当前页码
     * @param limit   每页记录数
     * @param visitVo 查询条件
     * @return
     */
    Page<Visit> selectPage(Integer page, Integer limit, VisitVo visitVo);
}

6 拜访实现

@Service
public class VisitServiceImpl implements VisitService {
    @Autowired
    private VisitRepository visitRepository;

    @Override
    public Page<Visit> selectPage(Integer page, Integer limit, VisitVo visitVo) {
        Sort sort = Sort.by(Sort.Direction.DESC, "createTime");
        // 0为第一页
        Pageable pageable = PageRequest.of(page-1, limit, sort);
        Visit visit = new Visit();
        BeanUtils.copyProperties(visitVo, visit);
        // 创建匹配器,即如何使用查询条件
        ExampleMatcher matcher = ExampleMatcher.matching() // 构建对象
                .withStringMatcher(ExampleMatcher.StringMatcher.CONTAINING) // 改变默认字符串匹配方式:模糊查询
                .withIgnoreCase(true); //改变默认大小写忽略方式:忽略大小写
        // 创建实例
        Example<Visit> example = Example.of(visit, matcher);
        Page<Visit> pages = visitRepository.findAll(example, pageable);
        return pages;
    }
}

7 拜访的mongodb接口

@Repository
public interface VisitRepository extends MongoRepository<Visit, String> {
}

8 其他拜访使用的是mysql存储,比较简单

三 测试

1 前端页面分配任务

2 拜访列表

3 医院拜访列表

4 公司拜访列表

5 药房拜访列表

  • 1
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:书香水墨 设计师:CSDN官方博客 返回首页
评论

打赏作者

chengqiuming

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值