opt_web/src/views/sku-manage/product-attribute/component/manage-enum/index.vue

<script lang="ts" setup>/**
 * @Name: index.vue
 * @Description:管理枚举弹窗
 * @Author: xinyan
 */
import { Delete, View, InfoFilled, Operation, Plus } from '@element-plus/icons-vue';
import PermissionButton from '/src/components/PermissionButton/index.vue';
import { usePagination } from '/src/utils/usePagination';
import { useTableData } from '/src/utils/useTableData';
import * as api from './api';
import { EnumColumns } from '/src/views/sku-manage/Columns';
import { useResponse } from '/@/utils/useResponse';
import { ElMessage } from 'element-plus';
import CreateDialog from '/@/views/sku-manage/product-attribute/component/manage-enum/component/CreateDialog.vue';
import EditDrawer from '/@/views/sku-manage/product-attribute/component/manage-enum/component/EditDrawer.vue';
import EditLabelDialog from '/@/views/product-manage/comment-detail/component/EditLabelDialog.vue';
import ShowEnumDrawer from '/@/views/sku-manage/product-attribute/component/manage-enum/component/ShowEnumDrawer.vue';
import { hasPermission } from '/@/utils/hasPermission';

const manageOpen = defineModel({ default: false });

const props = defineProps({
	rowData: Object,
});

const { rowData } = props;
const { tableOptions, handlePageChange } = usePagination(fetchList);

const createOpen = ref(false);
const editOpen = ref(false);
const viewOpen = ref(false);

const editData = ref<any>();

const formInline = reactive<any>({
	label: '',
	status: '',
});

const gridRef = ref();
const gridOptions: any = reactive({
	// id: 'NegativeLabel-table',
	// keepSource: true,
	height: 720,
	size: 'mini',
	border: false,
	round: true,
	stripe: true,
	showHeader: true,
	showOverflow: true,
	currentRowHighLight: true,
	toolbarConfig: {
		size: 'large',
		slots: {
			buttons: 'toolbar_buttons'
			// tools: 'toolbar_tools',
		}
	},
	rowConfig: {
		isHover: true
	},
	columnConfig: {
		resizable: true
	},
	pagerConfig: {
		total: tableOptions.value.total,
		page: tableOptions.value.page,
		limit: tableOptions.value.limit
	},
	loading: false,
	loadingConfig: {
		icon: 'vxe-icon-indicator roll',
		text: '正在拼命加载中...'
	},
	columns: '',
	data: ''
});

async function fetchList() {
	gridOptions.data = [];
	gridOptions.columns = [];

	const query = {
		attr: rowData.id,
		label: formInline.label,
		status: formInline.status,
	};
	await useTableData(api.getTableData, query, gridOptions);
	await gridRef.value.loadColumn(EnumColumns);
	gridOptions.showHeader = Boolean(gridOptions.data?.length);
}

async function singleDelete(row: any) {
	const res = await useResponse(api.deleteRow, row.id);
	if (res.code === 2000) {
		ElMessage.success({ message: '删除成功', plain: true });
		await fetchList();
	}
}

function handleCreate() {
	createOpen.value = true;
}

function handleView(row: any) {
	editData.value = row;
	viewOpen.value = true;
}

function handleEdit(row: any) {
	editOpen.value = true;
	editData.value = row;
}

function cellStyle() {
	return {
		fontWeight: 500
	};
}

onMounted(() => {
	fetchList();
});
</script>

<template>
	<div class="drawer-container">
		<el-drawer ref="editDrawer"
							 v-model="manageOpen"
							 :close-on-click-modal="false"
							 :close-on-press-escape="false"
							 style="background-color: #f3f4fb"
							 size="50%">
			<template #title>
				<div>
					<span style="font-size: 16px; font-weight: bold">属性枚举:</span>
					<el-check-tag checked style="pointer-events: none;margin-left: 5px">{{ rowData.name }}</el-check-tag>
				</div>
			</template>
			<div class="p-5 w-full whitespace-nowrap">
				<el-card style="height: 850px">
					<el-row >
						<el-col :span="8" >
							<div>
								<span class="mr-2">名称</span>
								<el-input v-model="formInline.label" placeholder="请输入名称" clearable @change="fetchList"></el-input>
							</div>
						</el-col>
						<el-col :span="8" :offset="4">
							<div>
								<span class="mr-2">状态</span>
								<el-select v-model="formInline.status" placeholder="请选择状态" clearable @change="fetchList">
									<el-option label="启用" value="1"></el-option>
									<el-option label="禁用" value="0"></el-option>
								</el-select>
							</div>
						</el-col>
					</el-row>
					<el-divider ref="dividerContainer" style="margin: 20px 0 12px 0" />
					<vxe-grid ref="gridRef" :cell-style="cellStyle" v-bind="gridOptions">
						<template #toolbar_buttons>
							<div class="flex gap-2">
								<PermissionButton :icon="Plus" v-if="hasPermission('AttrCreate')" plain round type="primary" @click="handleCreate"> 新 增</PermissionButton>
							</div>
						</template>
						<template #status="{ row }">
							<el-tag v-if="row.status == true" type="success">启用</el-tag>
							<el-tag v-else type="danger">禁用</el-tag>
						</template>
						<template #operate="{ row }">
							<div class="flex justify-center gap-2">
								<div>
									<el-button size="small" circle plain type="success" :icon="View" @click="handleView(row)"></el-button>
								</div>
								<PermissionButton v-if="hasPermission('AttrUpdate')" circle plain type="warning" size="small" @click="handleEdit(row)">
									<el-icon>
										<Operation />
									</el-icon>
								</PermissionButton>
								<div v-if="hasPermission('AttrDelete')">
								<el-popconfirm
									:icon="InfoFilled"
									icon-color="#626AEF"
									title="你确定要删除此项吗?"
									width="220"
									@confirm="singleDelete(row)"
								>
									<template #reference>
										<PermissionButton circle plain size="small" type="danger">
											<el-icon>
												<Delete />
											</el-icon>
										</PermissionButton>
									</template>
									<template #actions="{ confirm, cancel }">
										<el-button size="small" @click="cancel">No!</el-button>
										<el-button
											size="small"
											type="danger"
											@click="confirm"
										>
											Yes?
										</el-button>
									</template>
								</el-popconfirm>
								</div>
							</div>
						</template>
						<template #pager>
							<vxe-pager
								v-model:currentPage="gridOptions.pagerConfig.page"
								v-model:pageSize="gridOptions.pagerConfig.limit"
								:total="gridOptions.pagerConfig.total"
								class="mt-1.5"
								@page-change="handlePageChange"
							/>
						</template>
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
					</vxe-grid>
				</el-card>
			</div>
		</el-drawer>
		<CreateDialog v-if="createOpen" v-model="createOpen" :rowData="rowData" @refresh="fetchList"></CreateDialog>
		<EditDrawer v-if="editOpen" v-model="editOpen" :editData="editData" :rowData="rowData" @refresh="fetchList"></EditDrawer>
		<ShowEnumDrawer v-if="viewOpen" v-model="viewOpen" :editData="editData" ></ShowEnumDrawer>
	</div>
</template>

<style scoped>
.drawer-container :deep(.el-drawer__header) {
	border-bottom: none;
	font-weight: 500;
}

.drawer-container :deep(.el-drawer__title) {
	font-size: 18px;
}
</style>