工作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>

運行結果