print-web/src/views/manage/components/store.vue

<!--
 * @Descripttion: 用户选择器
 * @version: 1.0
 * @Author: Zory
 * @Date: 2024年1月10日21:46:29
-->
<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
        <div class="main">
            <div class="main-left">
                <div class="main-top">
                    <el-form class="lv-form-inline" ref="searchForm" :model="searchKey" label-position="right">
                        <el-row :gutter="10">
                            <el-col :span="18" :xs="12">
                                <el-form-item label=" " prop="name">
                                    <el-input v-model="searchKey.name" placeholder="请输入门店名称" clearable
                                        :style="{width: '100%'}"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :xs="12">
                                <el-form-item>
                                    <div class="search-btn">
                                        <el-button type="primary" @click="searchForm">搜索</el-button>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="main-body-wrap" v-if="!multiple">
                    <scTable ref="table" :apiObj="list.apiObj" :hideSetting="true" paginationLayout="total, prev, pager, next" :params="searchKey" @current-change="handleCurrentChange" highlight-current-row :row-key="getRowKeys" @sortChange="sortChange">
                        <el-table-column width="50" fixed="left">
                            <div class="checkbox"></div>
                        </el-table-column>
                        <el-table-column label="店铺名称" width="200" fixed="left" prop="shop_name"></el-table-column>
                        <el-table-column label="店铺编码" prop="shop_id" width="200"></el-table-column>
                        <el-table-column label="营业时间" prop="agent" width="150">
                            <template #default="scope">
                                <span v-if="scope.row.start_at">{{ scope.row.start_at }}-{{ scope.row.end_at }}</span>
                                <span class="status-danger" v-else>未设置</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="到期时间" prop="vip_end" width="180">
                            <template #default="scope">
                                <span v-if="scope.row.vip_end">{{ scope.row.vip_end }}</span>
                                <span class="status-danger" v-else>未设置</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="收费规则" prop="rate_type" width="150">
                            <template #default="scope">
                                <div class="status-success" v-if="scope.row.rate_type==1"><sc-status-indicator type="success"></sc-status-indicator> 收取年费</div>
                                <div class="status-danger" v-if="scope.row.rate_type==2"><sc-status-indicator type="danger"></sc-status-indicator> 订单金额抽佣</div>
                                <div class="status-danger" v-if="scope.row.rate_type==0"><sc-status-indicator type="danger"></sc-status-indicator> 未设置</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="联系人" prop="shop_contact" width="150">
                            <template #default="scope">
                                <span v-if="scope.row.shop_contact">{{ scope.row.shop_contact }}</span>
                                <span class="status-danger" v-else>未设置</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="联系电话" prop="shop_mobile" width="150">
                            <template #default="scope">
                                <span v-if="scope.row.shop_mobile">{{ scope.row.shop_mobile }}</span>
                                <span class="status-danger" v-else>未设置</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="店铺地址" prop="shop_address" width="300">
                            <template #default="scope">
                                <span v-if="scope.row.shop_address">{{ scope.row.shop_address }}</span>
                                <span class="status-danger" v-else>未设置</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop="status" width="120" align="center">
                            <template #default="scope">
                                <div class="status-success" v-if="scope.row.status==0"><sc-status-indicator type="success"></sc-status-indicator> 正常</div>
                                <div class="status-danger" v-if="scope.row.status==1"><sc-status-indicator type="danger"></sc-status-indicator> 已到期</div>
                                <div class="status-danger" v-if="scope.row.status==2"><sc-status-indicator type="danger"></sc-status-indicator> 关店</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" prop="create_at" width="180"></el-table-column>
                    </scTable>
                </div>
                <div class="main-body-wrap" v-else>
                    <scTable ref="table" :apiObj="list.apiObj" :hideSetting="true" paginationLayout="total, prev, pager, next" :params="searchKey" @selectionChange="selectionChange" row-key="id" @sortChange="sortChange">
                        <el-table-column type="selection" width="50" fixed="left"></el-table-column>
                        <el-table-column label="店铺编码" prop="shop_id" width="200"></el-table-column>
                        <el-table-column label="营业时间" prop="agent" width="150">
                            <template #default="scope">
                                <span v-if="scope.row.start_at">{{ scope.row.start_at }}-{{ scope.row.end_at }}</span>
                                <span class="status-danger" v-else>未设置</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="到期时间" prop="vip_end" width="180">
                            <template #default="scope">
                                <span v-if="scope.row.vip_end">{{ scope.row.vip_end }}</span>
                                <span class="status-danger" v-else>未设置</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="收费规则" prop="rate_type" width="150">
                            <template #default="scope">
                                <div class="status-success" v-if="scope.row.rate_type==1"><sc-status-indicator type="success"></sc-status-indicator> 收取年费</div>
                                <div class="status-danger" v-if="scope.row.rate_type==2"><sc-status-indicator type="danger"></sc-status-indicator> 订单金额抽佣</div>
                                <div class="status-danger" v-if="scope.row.rate_type==0"><sc-status-indicator type="danger"></sc-status-indicator> 未设置</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="联系人" prop="shop_contact" width="150">
                            <template #default="scope">
                                <span v-if="scope.row.shop_contact">{{ scope.row.shop_contact }}</span>
                                <span class="status-danger" v-else>未设置</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="联系电话" prop="shop_mobile" width="150">
                            <template #default="scope">
                                <span v-if="scope.row.shop_mobile">{{ scope.row.shop_mobile }}</span>
                                <span class="status-danger" v-else>未设置</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="店铺地址" prop="shop_address" width="300">
                            <template #default="scope">
                                <span v-if="scope.row.shop_address">{{ scope.row.shop_address }}</span>
                                <span class="status-danger" v-else>未设置</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop="status" width="120" align="center">
                            <template #default="scope">
                                <div class="status-success" v-if="scope.row.status==0"><sc-status-indicator type="success"></sc-status-indicator> 正常</div>
                                <div class="status-danger" v-if="scope.row.status==1"><sc-status-indicator type="danger"></sc-status-indicator> 已到期</div>
                                <div class="status-danger" v-if="scope.row.status==2"><sc-status-indicator type="danger"></sc-status-indicator> 关店</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" prop="create_at" width="180"></el-table-column>
                    </scTable>
                </div>
            </div>
        </div>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">确 定</el-button>
		</template>
    </el-dialog>
</template>

<script>
export default{
    emits: ['success', 'closed'],
    props: {
        multiple: { type: Boolean, default: false },
    },
    data(){
        return {
            loading: false,
            mode:"add",
            titleMap:{
                add:"选择店铺",
                edit:"选择店铺"
            },
            list: {
                apiObj: this.$API.shop.list
            },
            visible: false,
            isSaveing: false,
            formData:{},
            searchKey:{},
            selectData:[]
        }
    },
    methods:{
        sortChange(event){
            if (event.order) {
                var data = {
                    "field":event.prop,
                    "order":event.order
                }
                this.$refs.table.upData(data)
            } else {
                this.$refs.table.reload(this.searchKey)
            }
            return ;
        },
        submit(){
            if (this.selectData.length == 0)
            {
                return this.$message.error("请选择数据");
            }
            this.isSaveing = false;
            this.visible = false;
            if (this.multiple){
                this.$emit('success', this.selectData);
            } else {
                this.$emit('success', this.selectData[0]);
            }
        },
        getRowKeys(data){
            return data.id;
        },
        clearAll(){
            this.selectData = [];
        },
        removeUser(index,name){
            this.selectData.splice(index, 1);
            console.log(name)
        },
        handleCurrentChange(data){
            this.selectData = [data];
        },
        selectionChange(data){
            this.selectData = data;
        },
        searchForm(){
            this.$refs.table.upData(this.searchKey)
        },
        fristName(name){
            return name.substring(0,1);
        },
        open(mode = 'add'){
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单注入数据
        setData(data){
            this.formData = data;
        },
    }
}
</script>

<style lang="scss" scoped>
.main{
    display: flex;
    border: 1px solid #dfe1e6;
}
.main-left{
    overflow: hidden;
    flex: 1;
    .main-body-wrap{
        position: relative;
        height: 380px;
    }
}
.main-top{
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid #dfe1e6;
    &.is-right{
        height:53px;
        display:flex;
        align-items:center;
        padding:0 10px;
        justify-content:space-between;
    }
}
.main-body.is-right{
    padding: 8px 16px;
    overflow-y: auto;
    position: relative;
    height: calc(100% - 53px);
    max-height: 380px;
}
.mx-1{
    margin: 0 0.5rem 0.5rem 0;
}
.main-right{
    flex: 0.4;
}
.el-form-item--default{
    margin-bottom: 0;
}
.checkbox{
    border:1px solid #dfe1e6;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background-color: #fff;
    cursor: pointer;
    position:relative
}
.current-row .checkbox{
    background-color: var(--el-color-primary);
    border-color: var(--el-color-primary);
}
.current-row .checkbox:after{
    transform: rotate(45deg) scaleY(1);
    box-sizing: content-box;
    content: "";
    border: 1px solid #fff;
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    width: 3px;
    transition: transform .15s ease-in 50ms;
    transform-origin: center;
}
</style>