qimall/addons/SalesCompany/backend/views/components/link-select.php

<?php
/**
 * @link:http://www.goodmall.com/
 * @copyright: Copyright (c) 2020 
 * Created by PhpStorm
 * Author: ganxiaohao
 * Date: 2020-04-24
 * Time: 19:33
 */
?>
<style>
    .com-dialog-dialog {
        min-width: 700px;
    }
</style>
<template id="link-select">
    <div class="com-dialog-select">
        <el-dialog append-to-body :title="title" :visible.sync="visible" :close-on-click-modal="false"
                   custom-class="com-dialog-dialog" :before-close="close" @close="close" center>
           <div style="display: flex;justify-content: center;">
           	<el-input placeholder="请输入标题" v-model="keyword" size="small" style="width: 350px;margin: 0 auto;" @keyup.enter.native="getDetail(1)">
           	    <el-button slot="append" @click="getDetail(1)">搜索</el-button>
           	</el-input>
           </div>
          
           <el-table
                 :data="list"
				 v-loading="listLoading"
           	     border
                 style="width: 100%;margin-top: 10px;">
           	 <el-table-column width="100px" label="ID" align="center">
           	     <template slot-scope="props">
           	         <el-radio-group v-model="selectId" @change="handleSelectionChange(props.row)">
           	             <el-radio :label="props.row.id"></el-radio>
           	         </el-radio-group>
           	     </template>
           	 </el-table-column>
             <el-table-column
                   prop="title"
                   label="标题"
                   >
             </el-table-column>
             <el-table-column prop="created_at" label="时间">
                <template slot-scope="scope">
                    <div>{{ scope.row.created_at|dateTimeFormat('Y-m-d H:i:s') }}</div>
                </template>
             </el-table-column>
             </el-table>
           	
           	<div style="text-align: right;margin: 20px 0;">
				<el-pagination
				    background
				    @current-change="getDetail"
				    layout="prev, pager, next"
				    :page-count="pageCount">
				</el-pagination>
           	</div>
           	<div style="display: flex;justify-content: center;">
           		<el-button type="primary" @click="confirm">确定</el-button>
           	</div>
        </el-dialog>
        <div @click="click" style="display: inline-block">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    Vue.component('link-select', {
        template: '#link-select',
        props: {
			visible : {
				type: String,
			},
            url: {
                type: String,
                default: 'eight-out-two/setting/get-diy-list'//'mall/goods/index'
            },
            multiple: Boolean,
            title: {
                type: String,
                default: '页面选择'
            },
            listKey: {
                type: String,
                default: 'name'
            },
            params: Object,
            display: Boolean,
            extraSearch: Object,
        },
        data() {
            return {
                visible: false,
                listLoading: false,
                list: [],
                pagination: null,
                radioSelection: 0,
                search: {
                    keyword: ''
                },
                multipleSelection: [],
				
				selectId:0,
				tableData:[],
				pageCount:0,
				
				keyword:''
            }
        },

        methods: {
            close(){
                this.visible=false;
                this.$emit('close');
            },
            click() {
                this.getDetail(1);
                this.visible = !this.visible;
            },
            getDetail(page) {
                this.list = [];
                this.listLoading = true;
                request({
					params: {
					    r: this.url,
					    page: page,
						limit:10,
						keyword:this.keyword
					},
					method: 'get',
                }).then(e => {
					console.log('列表结果='+JSON.stringify(e))
                    this.listLoading = false;
                    if (e.data.code === 0) {
                       this.list = e.data.data.list;
					   this.pageCount = e.data.data.page_count;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.listLoading = false;
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            confirm() {
                this.visible = false;
                this.$emit('selected', this.multipleSelection);
                this.$emit('input', this.multipleSelection);
            },
			currentChange(){
				
			}
        }
    });
</script>