ahdevicemgt-ui/src/views/purchase/binding/index.vue

<template>
    <!-- 新购绑定页面 -->
    <div class="app-container">
        <PageHeader
          v-if="isShowComponent !== 'Index'"
          :pageContent="pageContent"
          @goBack="goBack"
        />
        <!-- 列表 -->
        <TableModel
          :formLabel="formLabel"
          :columnsList="columnsList"
          :request-api="queryPurchaseBindListApi"
          ref="tableRef"
          v-if="isShowComponent === 'Index'"
        >
            <template slot="btn" slot-scope="{ queryParams }">
                <el-button @click="handleExportData(queryParams, 'base/customer/export', '新购绑定清单')"
                    >导出</el-button
                >
            </template>

            <template slot="handle" slot-scope="{ data }">

                <el-button
                    type="primary"
                    size="mini"
                    @click="handleEditData(data)"
                    >查看</el-button
                >
                <el-button
                    type="danger"
                    size="mini"
                    @click="toggleBinding(data)"
                    >绑定</el-button
                >
            </template>

        </TableModel>

        <list-binding
          v-if="isShowComponent === 'list-binding'"
          :sendParams='sendParams'
        >

        </list-binding>

    </div>
</template>

<script>
import PageHeader from '@/components/pageHeader'
import { columnsList, dialogConfig, formLabel } from './config'
import { commonMixin } from '../mixins/common'
import ListBinding from './components/list-binding.vue'
import {
  queryPurchaseBindListApi
} from '@/api/purchase/binding'

export default {
    name: 'arrivalBindingManage',
    mixins: [commonMixin], // 混入公共方法和数据
    components: { ListBinding, PageHeader },
    methods: {
      queryPurchaseBindListApi,
      goBack() {
        this.isShowComponent = 'Index'
      },
      toggleBinding(data) {
        this.sendParams = {taskId:data.id}
        console.log(data)
        this.isShowComponent = 'list-binding'
      }
    },
    data() {
        return {
            formLabel,
            columnsList,
            dialogConfig,
            isShowComponent: 'Index',
            pageContent: '新购绑定任务列表',
            sendParams: {}
        }
    },
}
</script>