front-end/ghs/src/components/module/item-list-layer.vue

<template>
	<el-dialog
		title="选择花材"
		:visible.sync="selDialog"
		:close-on-click-modal="false"
		:append-to-body="true"
		width="800px"
	>
		<div class="recharge-modal-content">
			<el-checkbox-group v-model="checkList" class="radio-wrap">
				<x-crud class="liu-crud-wrap" @load="onLoad">
					<template #table-column-radio="{scope}">
						<div>
                            <el-checkbox v-if="scope.row.select == 2" disabled :label="scope.row.index">选择</el-checkbox>
                            <el-checkbox v-else :label="scope.row.index">选择</el-checkbox>
                            </div>
					</template>

                    <template #table-column-select="{scope}">
				        <i class="el-icon-success" v-if="scope.row.select == 2" style="color: #67c23a; font-size: 19px"></i>
				        <i class="el-icon-success" v-else style="color: #c0c4cc; font-size: 19px"></i>
					</template>

					<template #table-column-cover="{scope}">
						<div>
							<cl-avatar
								shape="square"
								:size="40"
								:src="scope.row.cover | default_avatar"
								:style="{ margin: 'auto' }"
							></cl-avatar>
						</div>
					</template>
				</x-crud>
			</el-checkbox-group>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="resetForm">取 消</el-button>
			<el-button type="primary" size="small" @click="confirmFn">确定</el-button>
		</div>
	</el-dialog>
</template>

<script>
export default {
	name: 'sj-list-layer',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		multi: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			selDialog: false,
			ruleForm: {},
			checkList: [],
			list: [],
			selData: {}
		};
	},
	computed: {
	},
	watch: {
		show(val) {
			this.selDialog = val;
		}
	},
	created() {},
	methods: {
		confirmFn() {
			this.$emit('confirm', this.list[this.checkList]);
		},
		resetForm() {
			this.$emit('cancel');
		},
		onLoad({ ctx, app }) {
			this.app = app;

			let getItemList = () => {
				return this.$service.ptItem.list();
			};
			ctx.service({
				page: getItemList
			})
				.set('table', {
					columns: [
						{
							prop: 'radio',
							label: '选择',
							align: 'center',
							width: 120
						},
						{
							prop: 'cover',
							label: '图片',
							align: 'center',
                            width: 130
						},
						{
							prop: 'name',
							label: '名称',
							align: 'center'
						},
                        {
							prop: 'select',
							label: '已添加',
							align: 'center'
						}
					],

					on: {
						'row-click': (row, column) => {
                            console.log(666666666666666)
							if (column.property && row.children) {
								app.refs('table').toggleRowExpansion(row);
							}
						}
                    },
					// 操作列
					op: {
						visible: false // 是否显示
					}
				})
				.set('dict', {
					search: {
						keyWord: 'name'
					}
				})
				.set('search', {
					key: {
						placeholder: '花材名称，支持拼音首字母'
					}
				})
				.set('pagination', {
					size: 6
				})
				.set('layout', [
					['slot-tabs'],
					['search-key', 'flex1', 'refresh-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next, render }) => {
					// 继续执行刷新
					let { list } = await next(params);
					list.map((e, index) => {
						e.index = index;
					});
					this.list = list;
					render(list);
				})
				.done();
			app.refresh({ type: this.tabIndex });
		}
	}
};
</script>
<style lang="scss">
// 列表
.radio-wrap {
	display: block;
}
</style>