vue弹框修改

 

 根据表ID 修改索引：弹框效果实现的代码：

 

 

<el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <div>
                
                <el-button
                  size="mini"
                  type="text"
                  @click="open(scope.row.id, 'index')"
                  >编辑索引</el-button
                >
              </div>
            </template>
          </el-table-column>

 

 JS methods 中的代码：

open(id, type) {
      this.id = id;
      switch (type) {
        case "edit":
          break;
        case "answer":
          this.dialogAnswer = true;
          break;
        case "video":
          this.dialogAnalysis = true;
          break;
         case "index":
          this.updateQuestionIndexDialog = true;
          break;
      }
      this.add.id = id;
    },

 

<el-dialog title="修改索引" :visible.sync="updateQuestionIndexDialog" width="250px">
      <el-form :model="addOrEdit" :rules="rules" ref="addOrEdit">
        <span>
          <el-form-item >
            <el-input  v-model="add.questionIndex" width="20px"></el-input>
          </el-form-item>
        </span>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateQuestionIndexDialog = false">取 消</el-button>
        <el-button type="primary" @click="editQuestionIndex">确 定</el-button>
      </span>
    </el-dialog>

 

 

data 函数的相关代码：

add: {

        id: "",

      

        questionIndex: "",

      },

 

updateQuestionIndexDialog: false,

 

methods 中的代码：

editQuestionIndex() {
      let param = {
        id: this.add.id,
        questionIndex: "",
      };
      if (this.add.questionIndex) {
        param.questionIndex = this.add.questionIndex;
      }
      this.updateQuestionIndex(param);

      this.updateQuestionIndexDialog = false;
      this.add.id = "";
      this.add.questionIndex = "";
      
      this.add.videoExplain = "";
    },

 

 

    updateQuestionIndex(param) {
      editQuestionIndex(param).then(() => {
        this.$message.success("修改索引成功");
           this.reload();
      });
    },

editQuestionIndex  在

import {

  editQuestionIndex,

} from "@/api/resource"; 中引入

 

export function editQuestionIndex(params) {
  return request({
    url: `/document/question/index/{id}`.format(params),
    method: 'patch',
    data: params

  })
}

 

 发送的请求如下：

 

Request URL:
http://IP/document/question/index/213262533656737
Request Method:
PATCH

BODY：
{id: "213262533656737", questionIndex: "120"}

 

VUE 读取 Map：

后端返回List 数组 ，数组中的每一个map元素，有一个字段 snapshotTargets （也是map）

snapshotTargets: {20: {classCode: "20", gradeName: "九年级",…},…}
20: {classCode: "20", gradeName: "九年级",…}
classCode: "20"
className: "4班"
classStudents: [{memberCode: "P600202006190000009", submit: false, overTimeSubmit: false, memberName: "李世明",…},…]
gradeName: "九年级"
students: ["李世明", "张凌", "陌陌", "梁俊鹏", "张碧晨", "赵匡胤", "XXXX", "阿特兹", "林动", "大暗黑天", "快乐风男", "李佳玉", "无极剑圣", "秋衣",…]

900-8316894-150983: {classCode: "900-8316894-150983", gradeName: "七年级",…}
classCode: "900-8316894-150983"
className: "19班"
classStudents: [{memberCode: "P600202007210000001", submit: false, overTimeSubmit: false, memberName: "乐乐",…},…]
gradeName: "七年级"
students: ["乐乐", "陌陌", "陌晴之", "水晶葡萄", "谢丽丽", "张三", "王明阳", "文文"]

 

页面表格中 读取 snapshotTargets ， i 分别为 snapshotTargets map 的key 20 和 900-8316894-150983  ，取得的值是： 九年级4班  七年级19班， 展示在页面

<el-table-column label="发布对象" prop="classNames" align="center" width="160" >
       <template slot-scope="scope">
          <span v-if="scope.row.snapshotTargets">

            <span v-for="(item,i) in scope.row.snapshotTargets" :key="i">
                {{
                  scope.row.snapshotTargets[i].gradeName+scope.row.snapshotTargets[i].className
               }}
            </span>
          </span>
          <span v-else> - </span>
        </template>
    </el-table-column>

 

 

二：根据 某一行的数据，展示 重置 按钮，改变行的记录：

比如 当状态是 完成 status=8 时， 展示 重置按钮，并 修改 status 是 4 。

 

 

vue代码：

<el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <div>
            <el-button
              size="mini"
              v-if="scope.row.status == '8'"
              @click="resetTask(scope.row)"
              >重置</el-button
            >
            <el-button
              size="mini"
              v-if="scope.row.status == '1'"
              type="success"
              @click="sendTask(scope.row)"
              >发起识别</el-button
            >
            <el-button size="mini" @click="lookTask(scope.row)"
              >任务明细</el-button
            >
          </div>
        </template>
      </el-table-column>

方法：

resetTask(row) {
      editStatus(row.id, { status: "4" }).then(() => {
        this.$message({
          type: "success",
          message: "发起成功，请等待处理"
        });
        this.fetchList();
      });
    },

import {

  editStatus

} from "@/api/templateTask";

 

在 templateTask.js 中：

export function editStatus(id,data) {
  return request({
    url: `/template/task/${id}`,
    method: 'post',
    data: data
  })
}

 

发送的请求: 

Request URL:   http://IP/template/task/900-8316558-607112

BODY:  {status: "4"}

 

 

 

二：  弹框提示：

 

 代码如下：

<el-button type="text" size="mini" @click="open(scope.row.id)" v-if="scope.row.status == '0' || scope.row.status == '-1' " >重置</el-button>

JS 的 method 方法：

   open(id){
      this.$confirm('是否需要 重置 ' + id + ' 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(() => {
            this.resetTask(id);
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
        });
        });
    },

 

调用方法：

resetTask(id){
       resetOcrTask({'id':id}).then(()=>{
          this.$message.success("重置成功");
          this.findList();
       })

    },