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();
})
},
以上是 vue弹框修改 的全部内容， 来源链接： utcz.com/z/379958.html
