tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 全局代码格式化

Browse Source 
Former-commit-id: bb50c8419b8fcdeb48c93fce9f399d901e8f5a52
This commit is contained in:
郝先瑞
2022-05-04 15:02:33 +08:00
parent e563bc340c
commit 11f02c0254
136 changed files with 11147 additions and 9780 deletions
Download Patch File Download Diff File Expand all files Collapse all files

440
src/views/pms/goods/index.vue
View File

@@ -1,266 +1,276 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: "goods"
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 { 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'
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,
// 遮罩层
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,
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;
});
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();
state.queryParams = {
pageNum: 1,
pageSize: 10,
name: undefined,
categoryId: undefined
};
handleQuery();
}
function handleGoodsView(detail: any) {
state.goodDetail = detail;
state.dialogVisible = true;
state.goodDetail = detail;
state.dialogVisible = true;
}
function handleAdd() {
router.push({ path: "goods-detail" });
router.push({ path: 'goods-detail' });
}
function handleUpdate(row: any) {
router.push({
path: "goods-detail",
query: { goodsId: row.id, categoryId: row.categoryId },
});
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();
});
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);
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;
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();
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>
<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-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>
<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>
<!-- 分页工具条 -->
<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>
<style scoped></style>