front-end/hd/src/views/item-class/list.vue

<template>
	<div class="app-list-content">
		<x-crud class="liu-crud-wrap" @load="onLoad">
			<template #slot-tabs>
				<el-tabs
					class="liu-tabs"
					type="border-card"
					v-model="tabIndex"
					@tab-click="handleClick"
				>
					<el-tab-pane
						v-for="(item, index) in tabsData"
						:key="index"
						:label="item.text"
						:name="item.key"
					>
					</el-tab-pane>
				</el-tabs>
			</template>

			<template #table-column-num="{scope}">
				<el-link
					@click="getItemList(scope.row)"
				>{{ scope.row.num }}</el-link>
			</template>

			<template #table-column-name="{scope}">
				<el-link
					@click="getItemList(scope.row)"
				>{{ scope.row.name }}</el-link>
			</template>

			<template #table-column-inTurn="{scope}">
				<span v-if="!sort.status">{{ scope.row.inTurn }}</span>
				<el-input
					ref="sort-input"
					focus
					size="mini"
					v-else
					v-model="scope.row.inTurn"
					@blur="changeSort(scope.row)"
				></el-input>
			</template>

			<!-- 排序 -->
			<template #table-header-inTurn>
				<div class="set-sort">
					<span>排序</span>
					<el-button
						v-if="!sort.status"
						icon="el-icon-edit-outline"
						size="small"
						type="text"
						@click="showSort"
						class="show"
					></el-button>

					<el-button class="hide" v-else size="mini" @click="hideSort" type="primary"
						>完成</el-button
					>
				</div>
			</template>

			<!-- 添加分类 -->
			<template #slot-add-goods-btn>
				<el-button type="primary" size="mini" @click="replaceBtnFn(0)">添加</el-button>
			</template>

			<template #slot-item-list="{scope}">
				<el-button type="text" @click.native.stop="getItemList(scope.row)">花材列表</el-button>
			</template>

			<template #slot-modify="{scope}">
				<el-button type="text" @click.native.stop="replaceBtnFn(scope.row.id,scope.row.name)">修改</el-button>
			</template>

		</x-crud>


		<!-- 新增弹窗 -->
		<el-dialog
			:title="`${id == 0 ? '添加' : '修改'}花材`"
			:visible.sync="replaceDialog"
			:close-on-click-modal="false"
			width="600px"
		>
			<div class="ad-modal-content">
				<el-form :model="replaceForm" :rules="ruleForm" ref="replaceForm" label-width="100px" class="demo-form">
					<el-form-item label="分类名称" prop="name">
						<el-input v-model="replaceForm.name" placeholder="请输入名称" size="small"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="resetForm">取 消</el-button>
				<el-button type="primary" size="small" @click="submitForm('replaceForm')">确认</el-button>
			</div>
		</el-dialog>


	</div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
	data() {
		return {
			app: null,
			sortLink: '',
			operateData: {},
			tabIndex: '0',
			tabsData: [
				{
					text: '花材分类',
					key: '0'
				}
			],
			selects: {},
			sort: {
				status: false
			},
			replaceDialog:false,
			id:0,
			replaceForm: {
				name: ''
			},
			ruleForm: {
				name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
			},
		};
	},
	computed: {
	},
	methods: {
		deleteFn(id){
			let self = this
			this.$confirm('确认删除？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$service.itemClass.deleteClass({id:id}).then(res => {
					self.replaceDialog = false
					self.app.refresh();
				});
			});
		},
		resetForm(){
			this.$refs['replaceForm'].resetFields();
			this.replaceDialog = false
		},
		replaceFn() {
			let replaceForm = JSON.parse(JSON.stringify(this.replaceForm));
			let self = this
			if (self.id == 0) {
				this.$service.itemClass.addClass(replaceForm).then(res => {
					self.replaceDialog = false
					self.resetForm();
					self.app.refresh();
				});
			} else {
				this.$service.itemClass.updateClass({id:self.id,...replaceForm}).then(res => {
					self.replaceDialog = false
					self.resetForm();
					self.app.refresh();
				});
			}
		},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.replaceFn();
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		replaceBtnFn(id,name) {
			this.id = id
			this.replaceForm.name = name
			this.replaceDialog = true
		},
		handleClick(tab, e) {
			this.app.refresh({ type: this.tabIndex });
		},
		//添加花材
		getItemList(data) {
			let query = {};
			query.classId = data.id
			query.className = data.name
			this.$router.push({ path: '/item/list', query });
		},
		// x-crud 组件
		onLoad({ ctx, app }) {
			this.app = app;
			ctx.service(this.$service.itemClass)
				.set('table', {
					columns: [
						{
							prop: 'id',
							label: 'ID',
							align: 'center'
						},
						{
							prop: 'name',
							label: '标题',
							align: 'center',
							'min-width': 180
						},
						// {
						// 	prop: 'num',
						// 	label: '花材数量',
						// 	align: 'center',
						// 	'min-width': 100
						// },
						{
							prop: 'inTurn',
							label: '排序',
							align: 'center',
							minWidth: 100
						},
						{
							prop: 'addTime',
							label: '创建时间',
							align: 'center',
							minWidth: 180
						}
					],

					on: {
						'row-click': (row, column) => {
							this.getItemList(row)
						}
					},

					op: {
						visible: true,
						props: {
							width: 300,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						layout: ['slot-item-list','slot-modify']
					}



				})
				.set('dict', {
					search: {
						keyWord: 'goodsName'
					}
				})
				.set('search', {
					key: {
						placeholder: '分类名称'
					}
				})
				.set('layout', [
					['slot-tabs'],
					['flex1', 'slot-add-goods-btn', 'refresh-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('delete', (selection, { next }) => {
					next({
						id: selection.map(e => e.id).join(',')
					});
				})
				.done();
			app.refresh({ status: this.tabIndex });
		},

		refresh(params) {
			this.app.refresh(params);
		},

		showSort(e) {
			this.sort.status = true;
		},

		hideSort(e) {
			this.sort.status = false;
		},

		changeSort(d) {
			this.$service.goods
				.sort({
					inTurn: d.inTurn,
					id: d.id
				})
				.then(() => {
					this.$message.success('修改成功');
					this.refresh();
				})
				.catch(err => {
					this.$message.error(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.short-link {
	color: $mainColor;
	margin-left: 10px;
	cursor: pointer;
}
.set-sort {
	display: flex;
	align-items: center;
	justify-content: center;
	.el-button {
		margin-left: 10px;
	}
	.show {
		font-size: 16px;
	}
	.hide {
		padding: 2px 5px;
	}
}
</style>