267 lines
7.4 KiB
Vue
267 lines
7.4 KiB
Vue
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
|
||
<script lang="ts">
|
||
export default {
|
||
name: "goods"
|
||
};
|
||
</script>
|
||
|
||
<script setup lang="ts">
|
||
import { reactive, ref, onMounted, toRefs } from "vue";
|
||
import { ElTable, ElMessage, ElMessageBox } from "element-plus";
|
||
import { useRouter } from "vue-router";
|
||
|
||
import { Search, Position, Edit, Refresh, Delete,View } from "@element-plus/icons-vue";
|
||
import { listGoodsPages, deleteGoods } from "@/api/pms/goods";
|
||
import { listCascadeCategories } from "@/api/pms/category";
|
||
import { GoodsItem, GoodsQueryParam } from "@/types";
|
||
import {moneyFormatter} from '@/utils/filter'
|
||
|
||
const dataTableRef = ref(ElTable);
|
||
const router = useRouter();
|
||
|
||
const state = reactive({
|
||
// 遮罩层
|
||
loading: true,
|
||
// 选中数组
|
||
ids: [],
|
||
// 非单个禁用
|
||
single: true,
|
||
// 非多个禁用
|
||
multiple: true,
|
||
total: 0,
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
} as GoodsQueryParam,
|
||
goodsList: [] as GoodsItem[],
|
||
categoryOptions: [],
|
||
goodDetail: undefined,
|
||
dialogVisible: false,
|
||
});
|
||
|
||
const {
|
||
loading,
|
||
multiple,
|
||
queryParams,
|
||
goodsList,
|
||
categoryOptions,
|
||
goodDetail,
|
||
total,
|
||
dialogVisible,
|
||
} = toRefs(state);
|
||
|
||
function handleQuery() {
|
||
state.loading = true;
|
||
listGoodsPages(state.queryParams).then(({ data }) => {
|
||
state.goodsList = data.list;
|
||
state.total = data.total;
|
||
state.loading = false;
|
||
});
|
||
}
|
||
|
||
function resetQuery() {
|
||
state.queryParams = {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
name: undefined,
|
||
categoryId: undefined,
|
||
};
|
||
handleQuery();
|
||
}
|
||
|
||
function handleGoodsView(detail: any) {
|
||
state.goodDetail = detail;
|
||
state.dialogVisible = true;
|
||
}
|
||
|
||
function handleAdd() {
|
||
router.push({ path: "goods-detail" });
|
||
}
|
||
|
||
function handleUpdate(row: any) {
|
||
router.push({
|
||
path: "goods-detail",
|
||
query: { goodsId: row.id, categoryId: row.categoryId },
|
||
});
|
||
}
|
||
|
||
function handleDelete(row: any) {
|
||
const ids = row.id || state.ids.join(",");
|
||
ElMessageBox.confirm("是否确认删除选中的数据项?", "警告", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(function () {
|
||
return deleteGoods(ids);
|
||
})
|
||
.then(() => {
|
||
ElMessage.success("删除成功");
|
||
handleQuery();
|
||
});
|
||
}
|
||
|
||
function handleRowClick(row: any) {
|
||
dataTableRef.value.toggleRowSelection(row);
|
||
}
|
||
|
||
function handleSelectionChange(selection: any) {
|
||
state.ids = selection.map((item: { id: any }) => item.id);
|
||
state.single = selection.length != 1;
|
||
state.multiple = !selection.length;
|
||
}
|
||
|
||
onMounted(() => {
|
||
listCascadeCategories({}).then((response) => {
|
||
state.categoryOptions = ref(response.data);
|
||
});
|
||
handleQuery();
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="app-container">
|
||
<el-form ref="queryForm" :inline="true">
|
||
<el-form-item>
|
||
<el-button type="success" :icon="Position" @click="handleAdd"
|
||
>发布商品</el-button
|
||
>
|
||
<el-button
|
||
type="danger"
|
||
:icon="Delete"
|
||
@click="handleDelete"
|
||
:disabled="multiple"
|
||
>删除</el-button
|
||
>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-input
|
||
v-model="queryParams.name"
|
||
placeholder="商品名称"
|
||
clearable
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-cascader
|
||
v-model="queryParams.categoryId"
|
||
placeholder="商品分类"
|
||
:props="{ emitPath: false }"
|
||
:options="categoryOptions"
|
||
clearable
|
||
style="width: 300px"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" :icon="Search" @click="handleQuery"
|
||
>查询</el-button
|
||
>
|
||
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<el-table
|
||
ref="dataTableRef"
|
||
v-loading="loading"
|
||
:data="goodsList"
|
||
@selection-change="handleSelectionChange"
|
||
@row-click="handleRowClick"
|
||
border
|
||
>
|
||
<el-table-column type="selection" min-width="5%" center />
|
||
<el-table-column type="expand" width="120" label="库存信息">
|
||
<template #default="props">
|
||
<el-table :data="props.row.skuList" border>
|
||
<el-table-column align="center" label="商品编码" prop="skuSn" />
|
||
<el-table-column align="center" label="商品规格" prop="name" />
|
||
<el-table-column label="图片" prop="picUrl">
|
||
<template #default="scope">
|
||
<img :src="scope.row.picUrl" width="40" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="现价" prop="price">
|
||
<template #default="scope">{{
|
||
moneyFormatter(scope.row.price)
|
||
}}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="库存" prop="stockNum" />
|
||
</el-table>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="商品名称" prop="name" min-width="140" />
|
||
<el-table-column label="商品图片">
|
||
<template #default="scope">
|
||
<el-popover placement="right" :width="400" trigger="hover">
|
||
<img :src="scope.row.picUrl" width="400" height="400" />
|
||
<template #reference>
|
||
<img
|
||
:src="scope.row.picUrl"
|
||
style="max-height: 60px; max-width: 60px"
|
||
/>
|
||
</template>
|
||
</el-popover>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="商品类目" prop="categoryName" min-width="100" />
|
||
<el-table-column label="商品品牌" prop="brandName" min-width="100" />
|
||
<el-table-column align="center" label="零售价" prop="originalPrice">
|
||
<template #default="scope">{{
|
||
moneyFormatter(scope.row.originPrice)
|
||
}}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="促销价" prop="price">
|
||
<template #default="scope">{{
|
||
moneyFormatter(scope.row.price)
|
||
}}</template>
|
||
</el-table-column>
|
||
<el-table-column label="销量" prop="sales" min-width="100" />
|
||
<el-table-column label="单位" prop="unit" min-width="100" />
|
||
<el-table-column label="描述" prop="description" width="300" :show-overflow-tooltip="true" />
|
||
<el-table-column label="详情" prop="detail">
|
||
<template #default="scope">
|
||
|
||
<el-button
|
||
type="primary"
|
||
:icon="View"
|
||
circle
|
||
plain
|
||
@click.stop="handleGoodsView(scope.row.detail)"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="120">
|
||
<template #default="scope">
|
||
<el-button
|
||
type="primary"
|
||
:icon="Edit"
|
||
circle
|
||
plain
|
||
@click.stop="handleUpdate(scope.row)"
|
||
/>
|
||
<el-button
|
||
type="danger"
|
||
:icon="Delete"
|
||
circle
|
||
plain
|
||
@click.stop="handleDelete(scope.row)"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 分页工具条 -->
|
||
<pagination
|
||
v-if="total > 0"
|
||
:total="total"
|
||
v-model:page="queryParams.pageNum"
|
||
v-model:limit="queryParams.pageSize"
|
||
@pagination="handleQuery"
|
||
/>
|
||
<el-dialog v-model="dialogVisible" title="商品详情">
|
||
<div class="goods-detail-box" v-html="goodDetail" />
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
</style>
|