推荐页面总结

做一个这样的页面

在这里插入图片描述

用到的表

基金和推荐基金的关系是一对一(大概)
推荐的外键是基金的主键
基金表里的审核状态和是否推荐状态不属于基金表的外键(?存疑)
在这里插入图片描述
在这里插入图片描述

servlet

package com.javasm.contoller;

import com.alibaba.fastjson.JSON;
import com.javasm.entity.*;
import com.javasm.service.RecService;
import com.javasm.service.impl.RecServiceImpl;
import com.javasm.util.Write;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @author: pb
 * @clasName: JAVASM
 * @description:
 * @date: 2022/8/23 14:43
 * @version: 0.1
 * @since: jdk11
 */
@WebServlet("/recommend/*")
public class RecServlet extends BaseServlet {
    RecService rs = new RecServiceImpl();
    ReturnEntity re = new ReturnEntity();
    public void query(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //返回审核通过且已推荐状态的数据
        String pageStr = req.getParameter("page");
        String pageSizeStr = req.getParameter("pageSize");
        String pidStr = req.getParameter("pid");//获得下拉列表中父级id
        Integer page = 1,pageSize = 5,pid=null;
        if(pageStr!=null && !"".equals(pageStr)){
            page = Integer.parseInt(pageStr);
        }
        if(pageSizeStr!=null && !"".equals(pageSizeStr)){
            pageSize = Integer.parseInt(pageSizeStr);
        }
        if(pidStr!=null && !"".equals(pidStr)){
            pid = Integer.parseInt(pidStr);
        }
        PageInfo pif = new PageInfo(page,pageSize,null);
        List<Recommend> query = rs.query(pif,pid);
        if(query!=null){
            Long aLong = rs.pageNum(pid);
            PageInfo pif1 = new PageInfo(page,pageSize,aLong.intValue());
            re.setRetCode(ReturnCode.QUERY_SUCCESS.getCode());
            re.setRetMsg(ReturnCode.QUERY_SUCCESS.getMsg());
            re.setRetData(query);
            re.setPif(pif1);
        }else{
            re.setRetCode(ReturnCode.NO_DATA.getCode());
            re.setRetMsg(ReturnCode.NO_DATA.getMsg());
        }
        Write.getResp(resp,re);
    }
    //下拉查询菜单
    public void downList(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<BasicProduct> menuForSelect = rs.getMenuForSelect();
        if(menuForSelect!=null){
            re.setRetCode(ReturnCode.QUERY_SUCCESS.getCode());
            re.setRetMsg(ReturnCode.QUERY_SUCCESS.getMsg());
            re.setRetData(menuForSelect);
        }else{
            re.setRetCode(ReturnCode.NO_DATA.getCode());
            re.setRetMsg(ReturnCode.NO_DATA.getMsg());
        }
        Write.getResp(resp,re);
    }
    //新增表单的下拉菜单
    public void dataForAdd(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //审核通过但未被推荐过的基金数据
        List<BasicProduct> basicProducts = rs.dataForAdd();
        if(basicProducts!=null){
            re.setRetCode(ReturnCode.QUERY_SUCCESS.getCode());
            re.setRetMsg(ReturnCode.QUERY_SUCCESS.getMsg());
            re.setRetData(basicProducts);
        }else{
            re.setRetCode(ReturnCode.NO_DATA.getCode());
            re.setRetMsg(ReturnCode.NO_DATA.getMsg());
        }
        Write.getResp(resp,re);
    }

    public void add(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //新增basic表中已审核至rec
        //更改basic中推荐状态为1
        String prodIdStr = req.getParameter("prodId"); //获取选中的基金id
        String hotStr = req.getParameter("hot");
        String isvisibleStr = req.getParameter("isvisible");
        String isfpStr = req.getParameter("isfp");
        String onlineSubStr = req.getParameter("onlineSub");
        String reason = req.getParameter("reason");
        Integer prodId = null,hot = null,isvisible=null,isfp=null,onlineSub=null;
        if(prodIdStr!=null && !"".equals(prodIdStr)){
            prodId = Integer.parseInt(prodIdStr);
        }
        if(hotStr!=null && !"".equals(hotStr)){
            hot = Integer.parseInt(hotStr);
        }
        if(isvisibleStr!=null && !"".equals(isvisibleStr)){
            isvisible = Integer.parseInt(isvisibleStr);
        }
        if(isfpStr!=null && !"".equals(isfpStr)){
            isfp = Integer.parseInt(isfpStr);
        }
        if(onlineSubStr!=null && !"".equals(onlineSubStr)){
            onlineSub = Integer.parseInt(onlineSubStr);
        }
        Recommend r = new Recommend(prodId,isvisible,isfp,onlineSub,hot,reason);
        Integer integer = rs.addRecProd(r);

        if(integer>0){
            Integer integer1 = rs.updateBasicStatus(1,prodId);
            re.setRetCode(ReturnCode.REQ_SUCCESS.getCode());
            re.setRetMsg(ReturnCode.REQ_SUCCESS.getMsg());
        }else{
            re.setRetCode(ReturnCode.REQ_FAILED.getCode());
            re.setRetMsg(ReturnCode.REQ_FAILED.getMsg());
        }
        Write.getResp(resp,re);
    }

    public void dataForRel(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String prodIdStr = req.getParameter("prodId");

        //给关联申购准备已勾选基金,需获取用户id
        String idStr = req.getParameter("id");
        Integer id = null,prodId=null;
        if(idStr!=null && !"".equals(idStr)){
            id = Integer.parseInt(idStr);
        }
        if(prodIdStr!=null && !"".equals(prodIdStr)){
            prodId = Integer.parseInt(prodIdStr);
        }
        //给关联申购准备选项,关联项不能与选中项相同,所以要在service层处理数据
        List<BasicProduct> basicProducts = rs.dataForRel(prodId);
        String s = rs.relOption(id);
        Map<String,Object> m = new HashMap<>(16);
        if(basicProducts!=null){
            m.put("dataList",basicProducts);
            m.put("selected",s);
            re.setRetCode(ReturnCode.QUERY_SUCCESS.getCode());
            re.setRetMsg(ReturnCode.QUERY_SUCCESS.getMsg());
            re.setRetData(m);
        }else{
            re.setRetCode(ReturnCode.NO_DATA.getCode());
            re.setRetMsg(ReturnCode.NO_DATA.getMsg());
        }
        Write.getResp(resp,re);
    }
    public void relevance(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String prodList = req.getParameter("prodList");
        String idStr = req.getParameter("id");
        Integer id = null;
        if(idStr!=null && !"".equals(idStr)){
            id = Integer.parseInt(idStr);
        }
        Integer integer = rs.relevance(prodList, id);
        if(integer>0){
            re.setRetCode(ReturnCode.REQ_SUCCESS.getCode());
            re.setRetMsg(ReturnCode.REQ_SUCCESS.getMsg());
        }else{
            re.setRetCode(ReturnCode.REQ_FAILED.getCode());
            re.setRetMsg(ReturnCode.REQ_FAILED.getMsg());
        }
        Write.getResp(resp,re);
    }
    public void dataForEdit(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String idStr = req.getParameter("id");
        Integer id = null;
        if(idStr!=null && !"".equals(idStr)){
            id = Integer.parseInt(idStr);
        }
        Recommend recommend = rs.queryById(id);
        if(recommend!=null){
            re.setRetCode(ReturnCode.QUERY_SUCCESS.getCode());
            re.setRetMsg(ReturnCode.QUERY_SUCCESS.getMsg());
            re.setRetData(recommend);
        }else{
            re.setRetCode(ReturnCode.NO_DATA.getCode());
            re.setRetMsg(ReturnCode.NO_DATA.getMsg());
        }
        Write.getResp(resp,re);
    }
    public void edit(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //修改就是换一只基金推荐
        //记录一下当前选的基金,修改成功后展示状态要改为0,新修改的基金展示状态改为1
        String idStr = req.getParameter("id"); // 选中行推荐基金id
        String editidStr = req.getParameter("editid"); //修改前选的基金id
        String prodIdStr = req.getParameter("prodId"); //修改后的基金id
        String hotStr = req.getParameter("hot");
        String isvisibleStr = req.getParameter("isvisible");
        String isfpStr = req.getParameter("isfp");
        String onlineSubStr = req.getParameter("onlineSub");
        String reason = req.getParameter("reason");
        Integer id=null,editid=null,prodId=null,hot=null,isvisible=null,isfp=null,onlineSub=null;
        if(idStr!=null && !"".equals(idStr)){
            id = Integer.parseInt(idStr);
        }
        if(editidStr!=null && !"".equals(editidStr)){
            editid = Integer.parseInt(editidStr);
        }
        if(prodIdStr!=null && !"".equals(prodIdStr)){
            prodId = Integer.parseInt(prodIdStr);
        }
        if(hotStr!=null && !"".equals(hotStr)){
            hot = Integer.parseInt(hotStr);
        }
        if(isvisibleStr!=null && !"".equals(isvisibleStr)){
            isvisible = Integer.parseInt(isvisibleStr);
        }
        if(isfpStr!=null && !"".equals(isfpStr)){
            isfp = Integer.parseInt(isfpStr);
        }
        if(onlineSubStr!=null && !"".equals(onlineSubStr)){
            onlineSub = Integer.parseInt(onlineSubStr);
        }
        Recommend r = new Recommend(prodId,isvisible,isfp,onlineSub,hot,reason,id);
        Integer integer = rs.editData(r);
        if(!editid.equals(prodId)){
            rs.updateBasicStatus(0,editid);
            rs.updateBasicStatus(1,prodId);
        }
        if(integer>0){
            re.setRetCode(ReturnCode.REQ_SUCCESS.getCode());
            re.setRetMsg(ReturnCode.REQ_SUCCESS.getMsg());
        }else{
            re.setRetCode(ReturnCode.REQ_FAILED.getCode());
            re.setRetMsg(ReturnCode.REQ_FAILED.getMsg());
        }
        Write.getResp(resp,re);
    }
    public void cancelRel(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //取消关联项
        //获得已选项
        //获得取消选项
        //从以选项中找到取消选项并删除
        //传回数据库
        String prodList = req.getParameter("prodList");
        String idStr = req.getParameter("id");
        Integer id=null;
        if(idStr!=null && !"".equals(idStr)){
            id = Integer.parseInt(idStr);
        }
        Integer integer = rs.cancelRel(prodList, id);
        if(integer>0){
            re.setRetCode(ReturnCode.REQ_SUCCESS.getCode());
            re.setRetMsg(ReturnCode.REQ_SUCCESS.getMsg());
        }else{
            re.setRetCode(ReturnCode.REQ_FAILED.getCode());
            re.setRetMsg(ReturnCode.REQ_FAILED.getMsg());
        }
        Write.getResp(resp,re);
    }
}

DaoImpl

package com.javasm.dao.impl;

public class RecDaoImpl implements RecDao {
    QueryRunner q = new QueryRunner(DruidUtil.getDatasource());

    @Override
    public List<Recommend> query(PageInfo pif,Integer pid) {
        List<Object> l = new ArrayList<>(10);
        String sql = "SELECT r.id,r.prod_id,b.chinese_name,r.isfp,r.online_sub,r.hot FROM basic_product AS b,recommend AS r " +
                " WHERE r.prod_id = b.id AND b.status=1 ";
        if(pid!=null){
            sql+=" AND b.pid=? ";
            l.add(pid);
        }
        sql+="ORDER BY r.hot DESC LIMIT "+(pif.getPage()-1)* pif.getPageSize()+","+pif.getPageSize();
        System.out.println(sql);
        try {
            return q.query(sql,
                    new BeanListHandler<>(Recommend.class,new BasicRowProcessor(new GenerousBeanProcessor())),l.toArray());
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return null;
    }

    @Override
    public List<BasicProduct> getMenuForSelect() {
        try {
            return q.query(SQL.DOWN_LIST,new BeanListHandler<>(BasicProduct.class
            ,new BasicRowProcessor(new GenerousBeanProcessor())));
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return null;
    }

    @Override
    public List<BasicProduct> dataForAdd() {
        try {
            return q.query(SQL.ADD_LIST,new BeanListHandler<>(BasicProduct.class,
                    new BasicRowProcessor(new GenerousBeanProcessor())));
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return null;
    }

    @Override
    public Integer addRecProd(Recommend r) {
        try {
            return q.update(SQL.ADD,
                    r.getProdId(),
                    r.getHot(),
                    r.getIsvisible(),
                    r.getIsfp(),
                    r.getOnlineSub(),
                    r.getReason());
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        System.out.println(1);
        return null;
    }

    @Override
    public List<BasicProduct> dataForRel() {
        try {
            return q.query(SQL.RELEVANCE_OPTION,
                    new BeanListHandler<>(BasicProduct.class,new BasicRowProcessor(new GenerousBeanProcessor())));
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return null;
    }

    @Override
    public String relOption(Integer id) {
        try {
            return q.query(SQL.SELECTED,new ScalarHandler<String>(),id);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return null;
    }

    @Override
    public Integer relevance(String choice, Integer id) {
        try {
            return q.update(SQL.RELEVANCE,choice,id);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return null;
    }

    @Override
    public Integer updateBasicStatus(Integer status,Integer id) {
        try {
            return q.update(SQL.UPDATE_STATUS,status,id);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return null;
    }

    @Override
    public Long pageNum(Integer pid) {
        List<Integer> l = new ArrayList<>(10);
        String sql = "SELECT count(1) FROM recommend AS r,basic_product AS b WHERE r.prod_id=b.id ";
        if(pid!=null){
            sql+=" AND b.pid=? ";
            l.add(pid);
        }
        try {
            return q.query(sql,new ScalarHandler<>(),l.toArray());
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return null;
    }

    @Override
    public Recommend queryById(Integer id) {
        try {
            return q.query(SQL.DATA_FOR_EDIT,new BeanHandler<>(Recommend.class,new BasicRowProcessor(new GenerousBeanProcessor())),id);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return null;
    }

    @Override
    public Integer editData(Recommend r) {

        try {
            return q.update(SQL.EDIT,r.getProdId(),
                    r.getIsvisible(),
                    r.getIsfp(),
                    r.getOnlineSub(),
                    r.getHot(),
                    r.getReason(),
                    r.getId());
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return null;
    }

    @Override
    public String getSelectedOption(Integer id) {
        try {
            return q.query(SQL.CANCEL_REL,new ScalarHandler<String>(),id);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return null;
    }
}

Dao

package com.javasm.dao;

public interface RecDao {
    /**
     * 模糊分页查询
     * @param pif 页码 页数 父级id
     * @return 返回审核通过且已推荐状态的数据
     */
    List<Recommend> query(PageInfo pif,Integer pid);

    /**
     * 准备查询下拉菜单
     * @return 返回父级id和名称
     */
    List<BasicProduct> getMenuForSelect();

    /**
     * 准备新增下拉菜单
     * @return 返回产品id和产品名称
     */
    List<BasicProduct> dataForAdd();

    /**
     * 新增推荐产品,默认选中产品状态设置为已推荐
     * @param r
     * @return
     */
    Integer addRecProd(Recommend r);

    /**
     * 为关联申购准备基金选项
     * @return 基金的id和名字
     */
    List<BasicProduct> dataForRel();

    /**
     * 根据用户id查询出该基金已选关联申购选项
     * @param id
     * @return
     */
    String relOption(Integer id);

    /**
     * 根据id修改关联申购的编号
     * @param choice
     * @param id
     * @return
     */
    Integer relevance(String choice,Integer id);

    /**
     * 根据选中的id更改推荐状态
     * @param id
     * @return
     */
    Integer updateBasicStatus(Integer status,Integer id);

    /**
     * 统计条数
     * @param pid
     * @return
     */
    Long pageNum(Integer pid);

    /**
     * 根据返回的id为修改准备数据
     * @param id
     * @return
     */
    Recommend queryById(Integer id);

    /**
     * 根据返回数据修改基金信息
     * @param r
     * @return
     */
    Integer editData(Recommend r);

    /**
     * 获得该基金的已关联项
     * @param id
     * @return
     */
    String getSelectedOption(Integer id);
}

ServiImpl

package com.javasm.service.impl;

public class RecServiceImpl implements RecService {
    RecDao rd = new RecDaoImpl();
    @Override
    public List<Recommend> query(PageInfo pif,Integer pid) {
        return rd.query(pif,pid);
    }

    @Override
    public List<BasicProduct> getMenuForSelect() {
        return rd.getMenuForSelect();
    }

    @Override
    public List<BasicProduct> dataForAdd() {
        return rd.dataForAdd();
    }

    @Override
    public Integer addRecProd(Recommend r) {
        return rd.addRecProd(r);
    }

    @Override
    public List<BasicProduct> dataForRel(Integer prodId) {
        List<BasicProduct> basicProducts = rd.dataForRel();
        List<BasicProduct> collect = basicProducts.stream().filter(prod -> !prod.getId().equals(prodId)).collect(Collectors.toList());
        return collect;
    }

    @Override
    public Integer relevance(String choice, Integer id) {
        return rd.relevance(choice,id);
    }

    @Override
    public String relOption(Integer id) {
        return rd.relOption(id);
    }

    @Override
    public Integer updateBasicStatus(Integer status,Integer id) {
        return rd.updateBasicStatus(status,id);
    }

    @Override
    public Long pageNum(Integer pid) {
        return rd.pageNum(pid);
    }

    @Override
    public Recommend queryById(Integer id) {
        return rd.queryById(id);
    }

    @Override
    public Integer editData(Recommend r) {
        return rd.editData(r);
    }

    @Override
    public Integer cancelRel(String option, Integer id) {
        Integer relevance=null;
        String selectedOption = rd.getSelectedOption(id); //已选项
        if(selectedOption!=null){
            String s1 = selectedOption.replaceAll(",", "");
            String s2 = option.replaceAll(",", "");
            String s3 = s1.replaceAll(s2, "");
            String[] split = s3.split("");
            StringBuilder sb = new StringBuilder();
            for (int i = 0; i < split.length; i++) {
                if(i>0){
                    sb.append(",");
                }
                sb.append(split[i]);
            }

            relevance = rd.relevance(sb.toString(), id); //写入数据库
        }

        return relevance;
    }


}

service

package com.javasm.service;

public interface RecService {
    List<Recommend> query(PageInfo pif,Integer pid);

    List<BasicProduct> getMenuForSelect();

    List<BasicProduct> dataForAdd();

    Integer addRecProd(Recommend r);

    List<BasicProduct> dataForRel(Integer prodId);

    Integer relevance(String choice,Integer id);

    String relOption(Integer id);

    Integer updateBasicStatus(Integer status,Integer id);

    Long pageNum(Integer pid);

    Recommend queryById(Integer id);

    Integer editData(Recommend r);

    Integer cancelRel(String option,Integer id);
}

前端

	<div>
		<el-form ref="queryForm" :inline="true" :model="queryForm" class="demo-form-inline">

		  <el-form-item label="系列名称" prop="pid">
			<el-select v-model="queryForm.pid" placeholder="pChinese">
			      <el-option v-for="(c,index) in selectList" :label="c.pChinese" :value="c.pid"></el-option>
			</el-select>
			
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="onQuerySubmit">查询</el-button>
			<el-button type="primary" @click="reset()">重置</el-button>
			<el-button type="primary" @click="openAddDialog()">添加</el-button>
			<el-button type="primary" :disabled="btnStatus" @click="editDialogOpen()" >修改</el-button>
			<el-button type="primary" :disabled="btnStatus" @click="openDialog()">关联申购</el-button>
		  </el-form-item>
		</el-form>
		
		<el-dialog title="修改" :visible.sync="editFormVisible">
				  <el-form ref="editform" :model="editform">
				    <el-form-item label="推荐产品" :label-width="'120px'" prop="prodId">
				      <el-select v-model="editform.prodId" placeholder="产品列表">
						  <el-option :label="editform.chineseName" :value="editform.prodId" ></el-option>
				            <el-option v-for="a in editList" :label="a.chineseName" :value="a.id" ></el-option>
				      </el-select>
				    </el-form-item>
				    <el-form-item label="推荐度" :label-width="'120px'" prop="hot">
				      <el-input v-model="editform.hot" autocomplete="off"></el-input>
					
				    </el-form-item>
					<el-form-item label="是否顾投端可见" :label-width="'120px'" prop="isvisible">
					 <template>
					   <el-radio v-model="editform.isvisible" :label="1">是</el-radio>
					   <el-radio v-model="editform.isvisible" :label="0">否</el-radio>
					 </template>
					</el-form-item>
					<el-form-item label="是否首发" :label-width="'120px'" prop="isfp">
					  <template>
					    <el-radio v-model="editform.isfp" :label="1">是</el-radio>
					    <el-radio v-model="editform.isfp" :label="0">否</el-radio>
					  </template>
					</el-form-item>
					<el-form-item label="线上申购开启" :label-width="'120px'" prop="onlineSub">
					  <el-radio v-model="editform.onlineSub" :label="1">是</el-radio>
					  <el-radio v-model="editform.onlineSub" :label="0">否</el-radio>
					</el-form-item>
					<el-form-item label="推荐理由" :label-width="'120px'" prop="reason">
					  <el-input v-model="editform.reason" autocomplete="off"></el-input>
					</el-form-item>
				  </el-form>
				  
				  <div slot="footer" class="dialog-footer">
				    <el-button @click="editFormVisible = false">取 消</el-button>
				    <el-button type="primary" @click="editSubmit()">确 定</el-button>
				  </div>
				</el-dialog>
		
		<el-dialog title="关联模板" :visible.sync="relFormVisible">
			<template>
			  <div style="text-align: center">
			      <el-transfer
			        style="text-align: left; display: inline-block"
			        v-model="yesdata"
					:props="{key:'id',label:'chineseName'}"
			        :titles="['未关联', '已关联']"
			        :button-texts="['取消关联', '关联']"
			        @change="handleChange"
			        :data="nodata">
			        <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
			        <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
			      </el-transfer>
			    </div>
			</template>
			<div slot="footer" class="dialog-footer">
			  <el-button @click="relFormVisible = false">取 消</el-button>
			  <el-button type="primary" @click="relSubmit()">确 定</el-button>
			</div>
		</el-dialog>
		
		<el-dialog title="添加" :visible.sync="addFormVisible">
		  <el-form ref="addform" :model="addform">
		    <el-form-item label="推荐产品" :label-width="'120px'" prop="prodId">
		      <el-select v-model="addform.prodId" placeholder="产品列表">
		            <el-option v-for="a in addList" :label="a.chineseName" :value="a.id" ></el-option>
		      </el-select>
		    </el-form-item>
		    <el-form-item label="推荐度" :label-width="'120px'" prop="hot" required>
		      <el-input v-model="addform.hot" autocomplete="off"></el-input>
			
		    </el-form-item>
			<el-form-item label="是否顾投端可见" :label-width="'120px'" prop="isvisible">
			 <template>
			   <el-radio v-model="addform.isvisible" :label="1">是</el-radio>
			   <el-radio v-model="addform.isvisible" :label="0">否</el-radio>
			 </template>
			</el-form-item>
			<el-form-item label="是否首发" :label-width="'120px'" prop="isfp">
			  <template>
			    <el-radio v-model="addform.isfp" :label="1">是</el-radio>
			    <el-radio v-model="addform.isfp" :label="0">否</el-radio>
			  </template>
			</el-form-item>
			<el-form-item label="线上申购开启" :label-width="'120px'" prop="onlineSub">
			  <el-radio v-model="addform.onlineSub" :label="1">是</el-radio>
			  <el-radio v-model="addform.onlineSub" :label="0">否</el-radio>
			</el-form-item>
			<el-form-item label="推荐理由" :label-width="'120px'" prop="reason">
			  <el-input v-model="addform.reason" autocomplete="off"></el-input>
			</el-form-item>
		  </el-form>
		  
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="addFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addSubmit()">确 定</el-button>
		  </div>
		</el-dialog>
		
	<el-table
		  :data="tableData"
		  style="width: 100%"
		  highlight-current-row
		  @current-change="handleCurrentRowChange"
		  >
		  <el-table-column
		        type="index"
		        width="50">
		      </el-table-column>
		  <el-table-column
			prop="chineseName"
			label="产品名称"
			width="180">
		  </el-table-column>
		  <el-table-column
			prop="hot"
			label="推荐度">
			<template v-slot="scope">
				<div v-if="scope.row.hot > 50">热门推荐</div>
				<div v-else>普通推荐</div>		
			</template>
		  </el-table-column>
		  
		  <!-- 
		  glyphicon: (...)
		  menuname: (...)
		  mid: (...)
		  pid: (...)
		  pname: (...)
		  url: (...)
		  
		  
		  -->
		  
		<el-table-column
				prop="isfp"
				label="是否首发">
				<template v-slot="scope">			
					<div v-if="scope.row.isfp == 0">否</div>
					<div v-else>是</div>		
				</template>			
		  </el-table-column>
		  
		  <el-table-column
			prop="onlineSub"
			label="线上申购">
			<template v-slot="scope">
				<div v-if="scope.row.onlineSub == 0">否</div>
				<div v-else>是</div>		
			</template>	
		  </el-table-column>
		 <!-- <el-table-column
			prop="url"
			label="排序">
		  </el-table-column> -->
	</el-table>
	<el-pagination
		  @size-change="handleSizeChange"
		  @current-change="handleCurrentChange"
		  :current-page="pageInfo.page"
		  :page-sizes="[3, 5, 10]"
		  :page-size="pageInfo.pageSize"
		  layout="total, sizes, prev, pager, next, jumper"
		  :total="pageInfo.totalNum">
		</el-pagination>
	  </div>
</template>

<script>
	export default {
		data(){
			return{
				btnStatus:true,
				nodata:[{id:1,chineseName:'测试1'},{id:2,chineseName:'测试3'}],
				yesdata:[],
				tableData:[],
				queryForm:{
					pChinese:'',
					pid:''
				},
				selectList:[],
				addform:{
					prodId:'',
					hot:'',
					isvisible:1,
					isfp:1,
					onlineSub:1,
					reason:''
				},
				addList:[],
				addFormVisible:false,
				currentRow:null,
				relFormVisible:false,
				pageInfo:{
					page:1,
					pageSize:5,
					totalNum:88
				},
				relvalue:null,
				mydirection:null,
				mymovedkeys:null,
				editList:[],
				editFormVisible:false,
				editform:{
					chineseName:'',
					prodId:'',
					hot:'',
					isvisible:1,
					isfp:1,
					onlineSub:1,
					reason:''
				},
				editid:''
			}
		},
		methods:{
			reset(){
				console.log(1);
				this.$refs.queryForm.resetFields();
				console.log(this.$refs.queryForm.resetFields());
				this.myQuery("");
			},
			editSubmit(){
				this.editFormVisible=false;
				let id = this.currentRow.id;
				let a = this.$qs.stringify(this.editform);
				this.$axios.get("http://localhost:8083/day17/recommend/edit?editid="+this.editid+"&"+"id="+id+"&"+a)
				.then(respInfo=>{
					  console.log(respInfo);					  
					  //展示操作结果
					  if(respInfo.data.retCode==20000){
					  	this.$message.success(respInfo.data.retMsg);
					  }else if(respInfo.data.retCode==20005){
					  	this.$message.error(respInfo.data.retMsg);
					  }					  
					  this.myQuery("");
				})
			},
			editDialogOpen(){
				this.editFormVisible=true;
				this.$axios.get("http://localhost:8083/day17/recommend/dataForAdd")
				.then(resp=>{
					console.log(resp);
					if(resp.data.retCode==50000){
						this.editList = resp.data.retData;
					}else if(resp.data.retCode==50001){
						this.editList = [];
					}
				});
				
				this.$axios.get("http://localhost:8083/day17/recommend/dataForEdit?id="+this.currentRow.id)
				.then(resp=>{
					console.log(resp);
					if(resp.data.retCode==50000){
						this.editform = resp.data.retData;
						this.editid=this.editform.prodId;
					}else if(resp.data.retCode==50001){
						this.editform = [];
					}
				});
				console.log(this.editform);
				this.$nextTick(function(){
					this.$refs.editform.resetFields();
				})
			},
			relSubmit(){
				this.relFormVisible=false;
				if(this.mydirection=="right"){
					console.log(this.relvalue);
					this.$axios.get("http://localhost:8083/day17/recommend/relevance?prodList="+this.relvalue+"&"+"id="+this.currentRow.id)
					.then(respInfo=>{
						  console.log(respInfo);
						  
						  //展示操作结果
						  if(respInfo.data.retCode==20000){
						  	this.$message.success(respInfo.data.retMsg);
						  }else if(respInfo.data.retCode==20005){
						  	this.$message.error(respInfo.data.retMsg);
						  }
						  
						  this.myQuery("");
					})
				}
				if(this.mydirection=="left"){
					this.$axios.get("http://localhost:8083/day17/recommend/cancelRel?prodList="+this.mymovedkeys+"&id="+this.currentRow.id)
					.then(respInfo=>{
						  console.log(respInfo);
						  
						  //展示操作结果
						  if(respInfo.data.retCode==20000){
						  	this.$message.success(respInfo.data.retMsg);
						  }else if(respInfo.data.retCode==20005){
						  	this.$message.error(respInfo.data.retMsg);
						  }
						  
						  this.myQuery("");
					})
				}
			},
			handleCurrentChange(val) {
				this.btnStatus=false;
			  console.log(`当前页: ${val}`);
						 this.pageInfo.page = val;
						 let queryParams = this.$qs.stringify(this.pageInfo)+"&"+this.$qs.stringify(this.queryForm)
						 
			  this.myQuery(queryParams);
			  
			},
			handleSizeChange(val) {
				this.btnStatus=false;
			  console.log(`每页 ${val} 条`);
			  
			  //改pageInfo对象中的值
			  this.pageInfo.page = 1;
			  this.pageInfo.pageSize = val;
			  
			  let queryParams = this.$qs.stringify(this.pageInfo)+"&"+this.$qs.stringify(this.queryForm)
			  
			   this.myQuery(queryParams);			  
			},
			handleChange(value, direction, movedKeys) {
			        console.log(value, direction, movedKeys);
					this.relvalue=value;
					this.mydirection=direction;
					this.mymovedkeys = movedKeys;
			      },
			handleCurrentRowChange(val){
				this.btnStatus=false;
				console.log(val);
				 this.currentRow = val;
			},
			openDialog(){
				this.yesdata=[];
				console.log(this.currentRow.id);
				this.relFormVisible=true;
				this.$axios.get("http://localhost:8083/day17/recommend/dataForRel?id="+this.currentRow.id+"&prodId="+this.currentRow.prodId)
				.then(resp=>{
					let a = resp.data.retData.selected;
					if(resp.data.retCode==50000){
						this.nodata = resp.data.retData.dataList;
						this.pageInfo = resp.data.pif;
						if(a!=undefined){
							let num = a.split(",");
							num.forEach((item,index)=>{
								num[index] = parseInt(num[index])
							})
							this.yesdata = num;
						}
						console.log(this.yesdata);
					}else if(resp.data.retCode==50001){
						this.nodata = [];
					}
				});
			},
			addSubmit(){
				this.addFormVisible=false;
				console.log(this.addform);
				let params = this.$qs.stringify(this.addform);
				this.$axios.post("http://localhost:8083/day17/recommend/add",params)
				.then(respInfo=>{
					  console.log(respInfo);
					  
					  //展示操作结果
					  if(respInfo.data.retCode==20000){
					  	this.$message.success(respInfo.data.retMsg);
					  }else if(respInfo.data.retCode==20005){
					  	this.$message.error(respInfo.data.retMsg);
					  }
				});
				this.myQuery("");
			},
			openAddDialog(){
				// this.$refs.addform.resetFields();
				this.addFormVisible=true;
				this.$axios.get("http://localhost:8083/day17/recommend/dataForAdd")
				.then(resp=>{
					console.log(resp);
					if(resp.data.retCode==50000){
						this.addList = resp.data.retData;
					}else if(resp.data.retCode==50001){
						this.addList = [];
					}
				});
				this.$nextTick(function(){
					this.$refs.addform.resetFields();
				})
			},
			onQuerySubmit(){
				let b = this.$qs.stringify(this.queryForm);
				console.log(this.queryForm);
				this.myQuery(b);
			},
			myQuery(param){
				this.$axios.get("http://localhost:8083/day17/recommend/query?"+param)
				.then(resp=>{
					console.log(resp);
					if(resp.data.retCode==50000){
						this.tableData = resp.data.retData;
						this.pageInfo = resp.data.pif;
					}else if(resp.data.retCode==50001){
						this.tableData = [];
						this.pageInfo.totalNum = 1;
						this.pageInfo.page = 1;
					}
					this.$nextTick(function(){
						this.btnStatus=true;
					})	
				})
			}
		},
		mounted() {
			this.myQuery("");
			this.$axios.get("http://localhost:8083/day17/recommend/downList")
			.then(resp=>{
				console.log(resp);
				if(resp.data.retCode==50000){
					this.selectList = resp.data.retData;
				}else if(resp.data.retCode==50001){
					this.selectList = [];
				}
			})
		}
	}
</script>

<style>
	.transfer-footer {
	    margin-left: 20px;
	    padding: 6px 5px;
	  }
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值