|
|
@@ -17,10 +17,11 @@ import EditLabelDialog from '/@/views/product-manage/comment-detail/component/Ed
|
|
|
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,
|
|
|
+ rowData: Object
|
|
|
});
|
|
|
|
|
|
const { rowData } = props;
|
|
|
@@ -33,205 +34,209 @@ const viewOpen = ref(false);
|
|
|
const editData = ref<any>();
|
|
|
|
|
|
const formInline = reactive<any>({
|
|
|
- label: '',
|
|
|
- status: '',
|
|
|
+ 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: ''
|
|
|
+ // id: 'NegativeLabel-table',
|
|
|
+ // keepSource: true,
|
|
|
+ height: 720,
|
|
|
+ size: 'small',
|
|
|
+ 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);
|
|
|
+ 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();
|
|
|
- }
|
|
|
+ const res = await useResponse(api.deleteRow, row.id);
|
|
|
+ if (res.code === 2000) {
|
|
|
+ ElMessage.success({ message: '删除成功', plain: true });
|
|
|
+ await fetchList();
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
function handleCreate() {
|
|
|
- createOpen.value = true;
|
|
|
+ createOpen.value = true;
|
|
|
}
|
|
|
|
|
|
function handleView(row: any) {
|
|
|
- editData.value = row;
|
|
|
- viewOpen.value = true;
|
|
|
+ editData.value = row;
|
|
|
+ viewOpen.value = true;
|
|
|
}
|
|
|
|
|
|
function handleEdit(row: any) {
|
|
|
- editOpen.value = true;
|
|
|
- editData.value = row;
|
|
|
+ editOpen.value = true;
|
|
|
+ editData.value = row;
|
|
|
}
|
|
|
|
|
|
function cellStyle() {
|
|
|
- return {
|
|
|
- fontWeight: 500
|
|
|
- };
|
|
|
+ return {
|
|
|
+ fontWeight: 500
|
|
|
+ };
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
- fetchList();
|
|
|
+ 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>
|
|
|
- </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>
|
|
|
+ <div class="drawer-container">
|
|
|
+ <el-drawer ref="editDrawer"
|
|
|
+ v-model="manageOpen"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ size="50%"
|
|
|
+ style="background-color: #f3f4fb">
|
|
|
+ <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" clearable placeholder="请输入名称" @change="fetchList"></el-input>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :offset="4" :span="8">
|
|
|
+ <div>
|
|
|
+ <span class="mr-2">状 态</span>
|
|
|
+ <el-select v-model="formInline.status" clearable placeholder="请选择状态" @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 v-if="hasPermission('AttrCreate')" :icon="Plus" 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 :icon="View" circle plain type="success" @click="handleView(row)"></el-button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <PermissionButton v-if="hasPermission('AttrUpdate')" circle plain type="warning"
|
|
|
+ @click="handleEdit(row)">
|
|
|
+ <el-icon>
|
|
|
+ <Operation />
|
|
|
+ </el-icon>
|
|
|
+ </PermissionButton>
|
|
|
+ </div>
|
|
|
+ <div v-if="hasPermission('AttrDelete')">
|
|
|
+ <el-popconfirm
|
|
|
+ :icon="InfoFilled"
|
|
|
+ icon-color="#626AEF"
|
|
|
+ title="你确定要删除此项吗?"
|
|
|
+ width="220"
|
|
|
+ @confirm="singleDelete(row)"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <PermissionButton circle plain type="danger">
|
|
|
+ <el-icon>
|
|
|
+ <Delete />
|
|
|
+ </el-icon>
|
|
|
+ </PermissionButton>
|
|
|
+ </template>
|
|
|
+ <template #actions="{ confirm, cancel }">
|
|
|
+ <el-button @click="cancel">No!</el-button>
|
|
|
+ <el-button
|
|
|
+ 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>
|
|
|
+ </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;
|
|
|
+ border-bottom: none;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.drawer-container :deep(.el-drawer__title) {
|
|
|
- font-size: 18px;
|
|
|
+ font-size: 18px;
|
|
|
}
|
|
|
</style>
|
