Vue + elementui component new, modified and this.$route.push two ways to pass parameters

The project requirement is to have a new button on the list page to open the routing component. There is a modification button in the action button of the form that also uses the same routing component.

There is a service tab page in the customer list details, click to add, you can also add. The new addition here needs to bring the customer id and echo it on the page.

1. Add

1. Add a new route in the menu management

2. Open the routing component on the click page

<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>

/** 新增 */
handleAdd() {
    this.$router.push("/serviceManagement/incrementCreate");
},

3. Write the corresponding code on the opened page, and click OK, the creation is successful

 Two , modify

1. Add a new route in the menu management

 2. Open the routing component on the click page

<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>

/** 修改 */
handleUpdate(row) {
  this.$router.push("/serviceManagement/incrementUpdate/" + row.incrementId);
},

3. Write the corresponding code on the opened page (echo the newly added data), and click OK, the modification is successful

  3. Enter from the service entrance of customer management details

After entering, the customer name should be echoed. If the customer name is selected, the project to which it belongs is echoed. Set to not editable.

There are two methods, one is to use params to pass parameters ; the other is to use query to pass parameters .

(1), params parameter passing

1. Add a new route in the menu management

  2. Open the routing component on the click page

<el-button size="small" style="float: left; margin: 10px" type="primary" icon="el-icon-plus" plain
                       @click="handleApplicationIncrement">申请
            </el-button>

/** 申请服务 */
handleApplicationIncrement() {
  this.$router.push("/serviceManagement/incrementCreate/" + this.customerId);
},

3. Write the corresponding code on the opened page (pass in the customerId and echo it on the page), and click OK to add successfully

Address bar echo customerId

 (2), query parameters

1. The route is the same as the new route, and the query parameter is added.

<el-button size="small" style="float: left; margin: 10px" type="primary" icon="el-icon-plus" plain
                       @click="handleApplicationIncrement">申请
            </el-button>

/** 申请服务 */
this.$router.push(
          {
            path: '/serviceManagement/incrementCreate',
            query: {
              'customerId': this.customerId,
              'customerFlag': true
            }
          }
        );

2. The page is the same as above, and the address bar echoes the query parameters and values

Finally, all the codes of this routing component are attached: adding, modifying, and adding customer details entry can be judged in both ways

<template>
  <div class="app-container">
    <el-page-header @back="goBack" :title="title" class="goBack"></el-page-header>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <div>
        <el-form :model="form" :rules="rules" ref="form" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="服务企业" prop="customerId">
                <el-select v-model="form.customerId" placeholder="请选择服务企业"
                           @change="customerNameVal(form.customerId)"
                           style="width: 50%" v-if="addFlag">
                  <el-option
                    v-for="item in customerList"
                    :key="item.customerId"
                    :label="item.customerName"
                    :value="item.customerId">
                  </el-option>
                </el-select>
                <el-select v-model="form.customerId" placeholder="请选择服务企业"
                           @change="customerNameVal(form.customerId)"
                           style="width: 50%" v-else disabled>
                  <el-option
                    v-for="item in customerList"
                    :key="item.customerId"
                    :label="item.customerName"
                    :value="item.customerId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业归属" prop="projectId">
                <el-select v-model="form.projectId" placeholder="请选择企业归属"
                           @change="projectIdVal(form.customerName)"
                           style="width: 50%" disabled>
                  <el-option v-for="item in projectData"
                             :key="item.projectId" :label="item.projectName" :value="item.projectId"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务类别" prop="type">
                <el-select v-model="form.type" placeholder="请选择服务类别" style="width: 50%">
                  <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SERVICE_TYPE_INCREMENT)" :key="dict.value"
                             :label="dict.label" :value="parseInt(dict.value)"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务名称" prop="name" class="items">
                <el-input v-model.trim="form.name" placeholder="请输入服务名称"
                          style="width: 50%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="归属年度" prop="year" class="items">
                <el-select v-model="form.year" placeholder="请选择归属年度">
                  <el-option v-for="item in yearsList" :key="item.label" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务时间" prop="serviceTime">
                <el-date-picker type="date" placeholder="请选择服务时间" v-model="form.serviceTime"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="content" class="items">
          <span slot="label">
              服务内容
            <el-tooltip
              content="为企业提供人才申报服务（XXX为服务类别），申报项目：2022年高新区领军人才第二批（XXX为服务名称）"
              placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
                <el-input type="textarea" :rows="4"
                          maxlength="500" v-model.trim="form.content" placeholder="请输入服务内容"
                          style="width: 78%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card" style="border: 1px solid transparent;text-align: center;" shadow="never">
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="goBack">取 消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {projectList} from '@/api/system/project';
  import {getCustomer} from "@/api/contract/contractList";
  import {customerList} from "@/api/service/serviceList";
  import {incrementCreate, updateIncrement, incrementDetail} from "@/api/service/serviceIncrement";

  export default {
    name: "AddIncrement",
    props: {},
    components: {},
    data() {
      return {
        //增值服务id
        incrementId: '',
        title: '',
        //项目数据
        projectData: [],
        //从客户管理入口申请
        customerFlag: false,
        //增值服务管理新增
        addFlag: false,
        // 增值服务管理修改
        updateFlag: false,
        // 表单参数
        form: {
          serviceTime: new Date(),
          content: '为企业提供XXX，申报项目：XXX'
        },
        // 表单校验
        rules: {
          customerId: [{required: true, message: "请选择服务企业", trigger: "change"}],
          projectId: [{required: true, message: "请选择企业归属", trigger: "blur"}],
          type: [{required: true, message: "请选择服务类别", trigger: "change"}],
          name: [{required: true, message: "请输入服务名称", trigger: "blur"}],
          year: [{required: true, message: "请选择归属年度", trigger: "change"}],
          serviceTime: [{required: true, message: "请选择服务时间", trigger: "change"}],
          content: [{required: true, message: "请输入服务内容", trigger: "blur"}],
        },
        //归属年度选择
        yearsList: [],
        //客户列表
        customerList: [],
      }
    },
    created() {
      this.getCustomerList();
      this.getProjectList();
      this.initYears();

      //法一：判断三种路由
      // if (this.$route.name == 'Incrementcreate') {
      //   this.addFlag = true
      //   this.title = '新增增值服务'
      // } else if (this.$route.name == 'Incrementcreate/:customerid') {
      //   this.customerFlag = true
      //   this.title = '发起增值服务申请'
      //   this.$set(this.form, 'customerId', Number(this.$route.params.customerId))
      //   this.getCustomer();
      // } else {
      //   this.title = '修改增值服务'
      //   this.updateFlag = true
      //   this.incrementId = this.$route.params.id;
      //   this.getDetail()
      // }

      //法二：通过query判断
      if (this.$route.name == 'Incrementcreate' && this.$route.query.customerFlag == undefined) {
        this.addFlag = true
        this.title = '新增增值服务'
        //  如果路由中有query.customerFlag，说明从客户详情过来的，并将customerId赋值给form
      } else if (this.$route.name == 'Incrementcreate' && this.$route.query.customerFlag == 'true') {
        this.customerFlag = true
        this.title = '发起增值服务申请'
        this.$set(this.form, 'customerId', Number(this.$route.query.customerId))
        this.getCustomer();
      } else {
        this.title = '修改增值服务'
        this.updateFlag = true
        this.incrementId = this.$route.params.id;
        this.getDetail()
      }
    },
    methods: {
      /** 获取增值服务详情 */
      getDetail() {
        incrementDetail(this.incrementId).then(response => {
          this.form = response.data;
        })
      },

      /** 获取客户列表 */
      getCustomerList() {
        customerList().then(res => {
          if (res.data !== null) {
            this.customerList = res.data;
          }
        })
      },

      /** 获得项目下拉列表 */
      getProjectList() {
        projectList().then(res => {
          if (res.data !== null) {
            this.projectData = res.data;
          }
        })
      },

      //选择企业
      customerNameVal(val) {
        this.$forceUpdate()
        this.getCustomer();
      },

      //选择企业归属
      projectIdVal(val) {
        this.$forceUpdate()
      },

      /** 获得获得客户的合同所要信息 */
      getCustomer() {
        getCustomer(this.form.customerId).then(res => {
          if (res.data !== null) {
            this.$nextTick(() => {
              this.$set(this.form, 'projectId', res.data.projectId)
            })
          }
        })
      },

      //设置日期列表
      initYears() {
        var myDate = new Date;
        var year = myDate.getFullYear();//获取当前年
        this.initSelectYear(year)
      },

      initSelectYear(year) {
        this.yearsList = [];
        for (let i = 0; i < 3; i++) {
          this.yearsList.push({value: (year + i), label: (year + i)});
        }
      },

      /** 表单重置 */
      reset() {
        this.form = {
          customerId: undefined,
          projectId: undefined,
          type: undefined,
          name: undefined,
          year: undefined,
          serviceTime: undefined,
          content: undefined
        };
        this.resetForm("form");
      },

      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate((valid) => {
          if (!valid) {
            return;
          }
          console.log(this.form, 'this.form')
          // 添加的提交
          if (this.addFlag || this.customerFlag) {
            incrementCreate(this.form).then(res => {
              if (res.data !== null) {
                this.$modal.msgSuccess('增值服务添加成功');
                this.reset();
                this.goBack();
              }
            })
          }

          // 修改的提交
          if (this.updateFlag) {
            updateIncrement(this.form).then(res => {
              if (res.data !== null) {
                this.$modal.msgSuccess('增值服务修改成功');
                this.reset();
                this.goBack();
              }
            })
          }
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
  .el-row {
    padding-top: 10px;
  }

  .el-card__header {
    span {
      font-size: 16px;
      font-weight: bold;
      color: #97a8be;
    }
  }

  .dialog-footer {
    text-align: center;
    margin-top: 15px;
    padding-left: 70px;
  }
</style>