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

refactor: keepalive无效问题修复和代码vue社区代码规范调整

Browse Source 
Former-commit-id: f661982d54f1738ff9739f1afc993181a466f052
This commit is contained in:
郝先瑞
2022-04-24 00:08:25 +08:00
parent c0b96bfab8
commit 47ed525fcd
71 changed files with 2814 additions and 1912 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/views/pms/brand/index.vue
View File

@@ -1,76 +1,10 @@
<template>
<div class="app-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
<el-button type="danger" :icon="Delete" click="handleDelete" :disabled="multiple">删除</el-button>
</el-form-item>
<el-form-item prop="name">
<el-input v-model="queryParams.name" placeholder="品牌名称" />
</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 v-loading="loading" :data="brandList" @selection-change="handleSelectionChange" border>
<el-table-column type="selection" min-width="5%" />
<el-table-column prop="name" label="品牌名称" min-width="10" />
<el-table-column prop="logoUrl" label="LOGO" min-width="10">
<template #default="scope">
<el-popover placement="right" :width="400" trigger="hover">
<img :src="scope.row.logoUrl" width="400" height="400" />
<template #reference>
<img :src="scope.row.logoUrl" style="max-height: 60px; max-width: 60px" />
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="sort" label="排序" min-width="10" />
<el-table-column label="操作" width="150">
<template #default="scope">
<el-button @click="handleUpdate(scope.row)" type="primary" :icon="Edit" circle plain />
<el-button type="danger" :icon="Delete" circle plain @click="handleDelete(scope.row)" />
</template>
</el-table-column>
</el-table>
<!-- 分页工具条 -->
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@pagination="handleQuery" />
<!-- 表单弹窗 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" top="5vh" width="600px">
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="品牌名称" prop="name">
<el-input v-model="formData.name" auto-complete="off" />
</el-form-item>
<el-form-item label="LOGO" prop="logoUrl">
<single-upload v-model="formData.logoUrl" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input v-model="formData.sort" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: "brand"
};
</script>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from "vue";
@@ -220,5 +154,79 @@ onMounted(() => {
});
</script>
<template>
<div class="app-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
<el-button type="danger" :icon="Delete" click="handleDelete" :disabled="multiple">删除</el-button>
</el-form-item>
<el-form-item prop="name">
<el-input v-model="queryParams.name" placeholder="品牌名称" />
</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 v-loading="loading" :data="brandList" @selection-change="handleSelectionChange" border>
<el-table-column type="selection" min-width="5%" />
<el-table-column prop="name" label="品牌名称" min-width="10" />
<el-table-column prop="logoUrl" label="LOGO" min-width="10">
<template #default="scope">
<el-popover placement="right" :width="400" trigger="hover">
<img :src="scope.row.logoUrl" width="400" height="400" />
<template #reference>
<img :src="scope.row.logoUrl" style="max-height: 60px; max-width: 60px" />
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="sort" label="排序" min-width="10" />
<el-table-column label="操作" width="150">
<template #default="scope">
<el-button @click="handleUpdate(scope.row)" type="primary" :icon="Edit" circle plain />
<el-button type="danger" :icon="Delete" circle plain @click="handleDelete(scope.row)" />
</template>
</el-table-column>
</el-table>
<!-- 分页工具条 -->
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@pagination="handleQuery" />
<!-- 表单弹窗 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" top="5vh" width="600px">
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="品牌名称" prop="name">
<el-input v-model="formData.name" auto-complete="off" />
</el-form-item>
<el-form-item label="LOGO" prop="logoUrl">
<single-upload v-model="formData.logoUrl" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input v-model="formData.sort" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<style scoped>
</style>

64
src/views/pms/category/index.vue
View File

@@ -1,34 +1,11 @@
<template>
<div class="app-container">
<el-row :gutter="10">
<el-col :span="14" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon icon-class="menu"/>
商品分类
</template>
<Category ref="categoryRef" @categoryClick="handleCategoryClick"/>
</el-card>
</el-col>
<el-col :span="10" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon icon-class="menu"/>
{{category.name}} 规格属性
</template>
<!-- 商品规格 -->
<Attribute ref="specificationRef" :attributeType="1" :category="category"/>
<!-- 商品属性 -->
<Attribute ref="attributeRef" :attributeType="2" :category="category"/>
</el-card>
</el-col>
</el-row>
</div>
</template>
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: "category"
};
</script>
<script setup lang="ts">
import Category from './components/Category.vue'
import Attribute from './components/Attribute.vue'
import SvgIcon from '@/components/SvgIcon/index.vue';
@@ -62,6 +39,35 @@ function handleCategoryClick(categoryRow: any) {
}
</script>
<template>
<div class="app-container">
<el-row :gutter="10">
<el-col :span="14" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon icon-class="menu"/>
商品分类
</template>
<Category ref="categoryRef" @categoryClick="handleCategoryClick"/>
</el-card>
</el-col>
<el-col :span="10" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon icon-class="menu"/>
{{category.name}} 规格属性
</template>
<!-- 商品规格 -->
<Attribute ref="specificationRef" :attributeType="1" :category="category"/>
<!-- 商品属性 -->
<Attribute ref="attributeRef" :attributeType="2" :category="category"/>
</el-card>
</el-col>
</el-row>
</div>
</template>
<style scoped>
</style>

4
src/views/pms/goods/components/GoodsInfo.vue
View File

@@ -146,13 +146,13 @@ function handleNext() {
.filter((item) => item.main == true && item.url)
.map((item) => item.url);
if (mainPicUrl && mainPicUrl.length > 0) {
goodsInfo.picUrl = mainPicUrl[0];
goodsInfo.value.picUrl = mainPicUrl[0];
}
const subPicUrl = state.pictures
.filter((item) => item.main == false && item.url)
.map((item) => item.url);
if (subPicUrl && subPicUrl.length > 0) {
goodsInfo.subPicUrls = subPicUrl;
goodsInfo.value.subPicUrls = subPicUrl;
}
emit("next");
}

1
src/views/pms/goods/components/GoodsStock.vue
View File

@@ -203,7 +203,6 @@ watch(() => goodsInfo.value.categoryId, (newVal) => {
});
}
},
{
immediate: true,

12
src/views/pms/goods/detail.vue
View File

@@ -33,10 +33,10 @@ const state = reactive({
loaded: false,
active: 0,
goodsInfo: {
album: [] as string[],
attrList: [] as any[],
specList: [] as any[],
skuList: [] as any[]
album: [],
attrList: [],
specList: [],
skuList: []
} as GoodsDetail
});
@@ -48,8 +48,8 @@ function loadData() {
if (goodsId) {
getGoodsDetail(goodsId).then((response) => {
state.goodsInfo = response.data
state.goodsInfo.originPrice = state.goodsInfo.originPrice / 100
state.goodsInfo.price = state.goodsInfo.price / 100
state.goodsInfo.originPrice = (state.goodsInfo.originPrice as any) / 100
state.goodsInfo.price = (state.goodsInfo.price as any) / 100
state.loaded = true
})
} else {

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

@@ -1,8 +1,129 @@
<!-- 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="Plus" @click="handleAdd"
<el-button type="success" :icon="Position" @click="handleAdd"
>发布商品</el-button
>
<el-button
@@ -141,119 +262,5 @@
</div>
</template>
<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, Plus, 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>
<style scoped>
</style>