[vue] Cuadro de diálogo anidado y editable o multiseleccionable

1. Forma anidada de diálogo, hay múltiples selecciones disponibles y los datos seleccionados múltiples se transmiten al backend

Requisito: haga clic en el botón, aparecerá una ventana emergente para mostrar los datos.Después de que el usuario verifique algunos datos, haga clic en el botón Aceptar para transmitir los datos al backend

<el-button type="primary" @click="jk()">选择结课名单</el-button>
return {
    
    
    tableData: [],
    multipleSelectionJkAndDf: [],
    dialog3: {
    
    
        Status: "A",
        FormVisibleJkAndDf: false
    },
    dialog4: {
    
    
        Status: "U",
        FormVisibleDf: false
    },
    textJkAndDf: {
    
    
        A: "结课名单",
        U: "学员打分"
    }
}

El método llamado después de hacer clic en el botón: abrir la ventana emergente de diálogo y mostrar los datos

jk() {
    
    
      this.dialog3.FormVisibleJkAndDf = true;
      this.dialog3.Status = "A";
      //查询数据
      let pxbid = this.$route.query.pxbid;
      let page = 1;
      let rows = 30;
      let jk = "1";
      staffJkandDfList({
    
     pxbid: pxbid, page: page, rows: rows, jk: jk }).then((res) => {
    
    
        this.tableData = res.data.map.data.list;
      });
    },

Contenido que se muestra en la ventana emergente:

<el-dialog :title="textJkAndDf[dialog3.Status]" :visible.sync="dialog3.FormVisibleJkAndDf">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChangeJkAndDf"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column> <!--type必须是selection类型-->
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column prop="ryxm" label="姓名" width="100" align="center"></el-table-column>
        <el-table-column prop="rysfz" label="身份证号码" width="180" align="center"></el-table-column>
        <el-table-column prop="rysh" label="手机号码" align="center"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="dialog3.FormVisibleJkAndDf = false">返 回</el-button>
        <el-button type="primary" @click="updateJk()">确 定</el-button>
      </div>
    </el-dialog>

Interfaz en métodos:

handleSelectionChangeJkAndDf(val) {
    
    
      this.multipleSelectionJkAndDf = val; //handleSelectionChangeJkAndDf这个事件的作用是保存勾选的数据,将数据放进multipleSelectionJkAndDf数组中
    },
updateJk() {
    
    
      console.log("选中的参数:" + JSON.stringify(this.multipleSelectionJkAndDf));//将对象转换为json字符串后,传给后端
      if (this.handleSelectionChangeJkAndDf.length <= 0) {
    
    
        this.$alert("未选择结课人员!");
        return;
      }
      updateStaffList({
    
     flag: "jk", updateRyList: JSON.stringify(this.multipleSelectionJkAndDf) }).then((res) => {
    
    
        if (res.data.appcode == "0") {
    
    
          this.$message({
    
    
            message: res.data.map.data.returnMsg,
            type: "success",
            customClass: "zZindex"
          });
          this.getListJkAndDf();
        } else {
    
    
          this.$message({
    
    
            message: res.data.map.data.returnMsg,
            type: "warning",
            customClass: "zZindex"
          });
          this.getListJkAndDf();
        }
        this.dialog3.FormVisibleJkAndDf = false;//操作结束后关闭弹窗
      });
}

Después de que el backend recibe los parámetros, debe convertirse en una matriz jsonArray

@PostMapping("updateStaffList")
public ResultVO updateStaffList(@RequestBody Map map) {
    
    
    String flag = (String) map.get("flag");
    String list = (String) map.get("updateRyList");
    JSONArray picArray = JSONArray.parseArray(list);//将json格式的字符串转化为JsonArray数组
    //随后进行业务操作
}

2. El formulario anidado del diálogo se puede editar y todos los datos se transmitirán al backend después de la edición.

Requisito: haga clic en el botón, aparecerá una ventana emergente para mostrar los datos.Después de que el usuario complete los datos, haga clic en el botón Aceptar para transmitir los datos al backend

<el-button type="primary" @click="df()">打分</el-button>
return {
    
    
    tableData: [],
    multipleSelectionJkAndDf: [],
    dialog3: {
    
    
        Status: "A",
        FormVisibleJkAndDf: false
    },
    dialog4: {
    
    
        Status: "U",
        FormVisibleDf: false
    },
    textJkAndDf: {
    
    
        A: "结课名单",
        U: "学员打分"
    }
}

El método llamado después de hacer clic en el botón: abre la ventana emergente del cuadro de diálogo, muestra los datos y se puede editar la columna de puntuación

df() {
    
    
   this.dialog4.FormVisibleDf = true;
   this.dialog4.Status = "U";
    //查询人员信息数据
   let pxbid = this.$route.query.pxbid;
   let page = 1;
   let rows = 30;
   let df = "1";
   staffJkandDfList({
    
     pxbid: pxbid, page: page, rows: rows, df: df }).then((res) => {
    
    
     this.tableData = res.data.map.data.list;
   });
}
<el-dialog :title="textJkAndDf[dialog4.Status]" :visible.sync="dialog4.FormVisibleDf">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChangeDf"
      >
        <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column prop="ryxm" label="姓名" width="100" align="center"></el-table-column>
        <el-table-column prop="rysfz" label="身份证号码" width="180" align="center"></el-table-column>
        <el-table-column prop="rysh" label="手机号码" width="160" align="center"></el-table-column>
        <el-table-column prop="df" label="分数" align="center">
          <div class="itm" slot-scope="scope">
            <el-input class="itm__input" v-model="scope.row.df" placeholder="请输入分数,不可超过100分"></el-input>
          </div>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="dialog4.FormVisibleDf = false">返 回</el-button>
        <el-button type="primary" @click="updateDf()">确 定</el-button>
      </div>
</el-dialog>

Interfaz en métodos:

updateDf() {
    
    
      console.log("打分数据:" + JSON.stringify(this.tableData));
      updateStaffList({
    
     flag: "df", updateRyList: JSON.stringify(this.tableData) }).then((res) => {
    
    
        if (res.data.appcode == "0") {
    
    
          this.$message({
    
    
            message: res.data.map.data.returnMsg,
            type: "success",
            customClass: "zZindex"
          });
          this.getListJkAndDf();
        } else {
    
    
          this.$message({
    
    
            message: res.data.msg,
            type: "warning",
            customClass: "zZindex"
          });
          this.getListJkAndDf();
        }
        this.dialog4.FormVisibleDf = false;
      });
 }

Después de que el backend recibe los parámetros, debe convertirse en una matriz jsonArray

@PostMapping("updateStaffList")
public ResultVO updateStaffList(@RequestBody Map map) {
    
    
    String flag = (String) map.get("flag");
    String list = (String) map.get("updateRyList");
    JSONArray picArray = JSONArray.parseArray(list);//将json格式的字符串转化为JsonArray数组
    //随后进行业务操作
}

Supongo que te gusta

Origin blog.csdn.net/m0_46459413/article/details/129922564
Recomendado
Clasificación