工作271:打开弹出框调用当前页面接口

<template><div><button-dialog@open="open"ref="dialog"width="1000px"title="内容关联"ok-button-text="确认关联":destroy-on-close="true"@ok="confirmAssociation"><!----><custom-table@size-changes="list"  @pagination-change="list"ref="table":data="tableData":columns="columns":pagination="pagination"@selection-change="handleSelect"><template v-slot:action><el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button type="text" @click="handleContentPreview(scope.row)">内容预览</el-button></template></el-table-column></template></custom-table></button-dialog><content-list ref="assot"></content-list></div>
</template><script>
import ContentList from "@/views/task/task/Components/ContentList";
import CustomTable from "@/component/table/CustomTable";
import ButtonDialog from "@/component/dialog/ButtonDialog";
import {TableListMixin} from "@/component/table/TableMixin";
import {getAction, putAction} from "../../../api";
export default {name: "ContentAssociation",mixins: [TableListMixin],components: {ButtonDialog, CustomTable,ContentList},data() {return {columns: [{type: "selection", width: "50"},/*任务名称id*/{prop: "id", label: "ID", width: "100", sortable: true},/*内容名称 name*/{prop: "title", label: "内容名称", sortable: true},/*内容类型 1是图文 2是视屏*/{prop: "content_type_name", label: "内容类型", sortable: true},/*创建人*/{prop: "username", label: "创建人", sortable: true},/*创建时间*/{prop: "created_at", label: "创建时间", sortable: true},/*业务单元*/{prop: "business_module", label: "业务单元", sortable: true},/*  /!*内容状态*!/{prop: "status_name", label: "内容状态", sortable: true}*/],url: {list: "/content/list",put: "/task"},selected: "",tableData: [],task_id: null};},/*created() {this.list1()},*/methods: {/*  list1() {},*/select(id) {this.$refs["dialog"].show();this.task_id = id;/*this.list1();*/},handleSelect(val) {// TODO: 单选好像有点问题，选中一条的情况下，无法直接点击其他条数据更换选择if (val && val.length !== 0) {if (val.length === 1) {this.selected = val[0].id;} else {this.$refs["table"].toggleRowSelection([val[val.length - 2]]);}} else {this.selected = "";}},/*控制按钮打开调用此接口*/open(){getAction(this.url.list).then(res => {this.tableData = res.data})},clearSelection() {this.selected = "";this.$refs["table"].toggleRowSelection();},handleContentPreview(record) {console.log(this)this.$refs["assot"].show(record);},confirmAssociation() {putAction(this.url.put + '/' + this.task_id + '/bound', {content_id: this.selected}).then(res => {this.$message.success("绑定成功");this.$refs["dialog"].close();})}}
};
</script><style scoped></style>

运行结果

工作271:打开弹出框调用当前页面接口相关推荐

前台alert弹出页面，点击确定，关闭弹出框，整个页面进行刷新数据
前台alert弹出页面,点击确定,关闭弹出框,整个页面进行刷新数据location.reload(); $("#saveBatch").on("click", ...
工作221:控制弹出框不全屏
<el-dialog :title="fullTitle" width="80%" :fullscreen="false" :clos ...
layui 子页面写弹出框覆盖父页面，以及给弹框中的表单赋值
咋说呢,因为对 layui 不太熟悉,这个弹出框搞了好久,看了好多解决方案,大致尝试了一下其中几种,在坑中无法自拔...总之终于搞出来了,在这里分享一下我的笔记. 着急的直接戳这里看解决代码. 尝 ...
仿百度弹出框在框架页面中的应用
list页头部引用 <scripttype="text/javascript"src="/js/popup.js"></script>& ...
js实现弹出框时禁止页面滚动，关闭弹出框时恢复页面滚动
$(function () {$('#pingtai').click(function () {if($('#serviceDes').css('display','none')){$('#servi ...
[js]uploadify结合jqueryUI弹出框上传，js中的冒出的bug，又被ie坑了
引言最近在一个项目中,在用户列表中需要对给没有签名样本的个别用户上传签名的样本,就想到博客园中上传图片使用弹出框方式,博客园具体怎么实现的不知道,只是如果自己来弄,想到两个插件的结合使用,在弹出框中 ...
弹出框页面中使用jquery.validate验证控件
弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...
Linux程序实现弹框,jQuery实现弹出框效果绝对美观
使用到JQeury写的几个比较好的Popup DialogBox,觉得不错.和大家分享下.使用它们结合.net可以实现很好的效果. 1.jqpopup: 是个可以拖拽,缩放并可以在它上面显示html页 ...
如何在html上做弹框效果,如何设计优秀的弹出框网页设计？
最近做项目的时候,发现项目上对于弹出框网页设计的使用有点混乱.例如,需要给用户一个操作提示,用弹出框来完成.用户对这个功能不了解,加一个"查看详情"的图标,用户点击后跳出弹出框来 ...

工作271:打开弹出框调用当前页面接口

工作271:打开弹出框调用当前页面接口相关推荐

最新文章

热门文章