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

refactor: 系统管理页面重构和ts类型声明优化

Browse Source 
Former-commit-id: 40263bbb072596ada41ef33d9170841e7e66cd01
This commit is contained in:
郝先瑞
2022-06-15 00:48:17 +08:00
parent 928ba2dbd8
commit 321b584f9f
116 changed files with 1692 additions and 1485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,6 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'brand'
name: 'brand',
};
</script>
@@ -9,13 +8,18 @@ export default {
import { onMounted, reactive, ref, toRefs } from 'vue';
import { ElForm, ElTable, ElMessage, ElMessageBox } from 'element-plus';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { BrandFormData, BrandItem, BrandQueryParam, Dialog } from '@/types';
import {
BrandFormData,
BrandItem,
BrandQueryParam,
} from '@/types/api/pms/brand';
import { Dialog } from '@/types/common';
import {
listBrandPages,
getBrandFormDetail,
updateBrand,
addBrand,
deleteBrands
deleteBrands,
} from '@/api/pms/brand';
import SingleUpload from '@/components/Upload/SingleUpload.vue';
@@ -32,7 +36,7 @@ const state = reactive({
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10
pageSize: 10,
} as BrandQueryParam,
brandList: [] as BrandItem[],
total: 0,
@@ -43,10 +47,10 @@ const state = reactive({
{
required: true,
message: '请输入品牌名称',
trigger: 'blur'
}
]
}
trigger: 'blur',
},
],
},
});
const {
@@ -57,7 +61,7 @@ const {
total,
dialog,
formData,
rules
rules,
} = toRefs(state);
function handleQuery() {
@@ -83,14 +87,14 @@ function handleSelectionChange(selection: any) {
function handleAdd() {
state.dialog = {
title: '添加品牌',
visible: true
visible: true,
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改品牌',
visible: true
visible: true,
};
const brandId = row.id || state.ids;
getBrandFormDetail(brandId).then(({ data }) => {
@@ -137,7 +141,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
})
.then(() => {
deleteBrands(ids).then(() => {

40
src/views/pms/category/components/Attribute.vue
View File

@@ -67,7 +67,7 @@ import { ElMessage } from 'element-plus';
const props = defineProps({
attributeType: {
type: Number,
default: 1
default: 1,
},
category: {
type: Object,
@@ -75,10 +75,10 @@ const props = defineProps({
return {
id: undefined,
name: '',
childrenLen: 0
childrenLen: 0,
};
}
}
},
},
});
const attributeTypeName = computed(() =>
@@ -100,17 +100,17 @@ const state = reactive({
attributes: [
{
id: undefined,
name: ''
}
]
name: '',
},
],
},
rules: {
attribute: {
name: [
{ required: true, validator: attributeNameValidator, trigger: 'blur' }
]
}
}
{ required: true, validator: attributeNameValidator, trigger: 'blur' },
],
},
},
});
const { formData, rules } = toRefs(state);
@@ -122,8 +122,8 @@ watch(
if (categoryId) {
listAttributes({
categoryId: categoryId,
type: props.attributeType
}).then(response => {
type: props.attributeType,
}).then((response) => {
const { data } = response;
if (data && data.length > 0) {
state.formData.attributes = response.data;
@@ -131,8 +131,8 @@ watch(
state.formData.attributes = [
{
id: undefined,
name: ''
}
name: '',
},
];
}
});
@@ -140,8 +140,8 @@ watch(
state.formData.attributes = [
{
id: undefined,
name: ''
}
name: '',
},
];
}
}
@@ -150,7 +150,7 @@ watch(
function handleAdd() {
state.formData.attributes.push({
id: undefined,
name: ''
name: '',
});
}
@@ -159,8 +159,8 @@ function handleDelete(index: number) {
state.formData.attributes = [
{
id: undefined,
name: ''
}
name: '',
},
];
return;
}

35
src/views/pms/category/components/Category.vue
View File

@@ -111,7 +111,7 @@ import {
listCategories,
addCategory,
updateCategory,
deleteCategories
deleteCategories,
} from '@/api/pms/category';
import { Plus, Edit, Delete, Picture } from '@element-plus/icons-vue';
import SingleUpload from '@/components/Upload/SingleUpload.vue';
@@ -136,30 +136,30 @@ const state = reactive({
level: undefined,
iconUrl: undefined,
visible: 1,
sort: 100
sort: 100,
},
rules: {
parentId: [
{
required: true,
message: '请选择上级分类',
trigger: 'blur'
}
trigger: 'blur',
},
],
name: [
{
required: true,
message: '请输入分类名称',
trigger: 'blur'
}
]
trigger: 'blur',
},
],
},
dialog: {
title: '',
visible: false
visible: false,
},
parent: {} as any,
current: {} as any
current: {} as any,
});
const { loading, categoryOptions, formData, rules, dialog, parent } =
@@ -167,15 +167,15 @@ const { loading, categoryOptions, formData, rules, dialog, parent } =
function handleQuery() {
state.loading = true;
listCategories(state.queryParam).then(response => {
listCategories(state.queryParam).then((response) => {
state.categoryOptions = [
{
id: 0,
name: '全部分类',
parentId: 0,
level: 0,
children: response.data
}
children: response.data,
},
];
state.loading = false;
});
@@ -188,7 +188,7 @@ function handleNodeClick(row: any) {
state.parent = {
id: parentNode.key,
name: parentNode.label,
level: row.level
level: row.level,
};
state.current = JSON.parse(JSON.stringify(row));
emit('categoryClick', row);
@@ -197,14 +197,14 @@ function handleNodeClick(row: any) {
function handleAdd(row: any) {
state.dialog = {
title: '新增商品分类',
visible: true
visible: true,
};
if (row.id != null) {
// 行点击新增
state.parent = {
id: row.id,
name: row.name,
level: row.level
level: row.level,
};
}
}
@@ -213,7 +213,7 @@ function handleUpdate(row: any) {
handleNodeClick(row);
state.dialog = {
title: '修改商品分类',
visible: true
visible: true,
};
Object.assign(state.formData, state.current);
}
@@ -229,6 +229,7 @@ function submitForm() {
});
} else {
const parentCategory = state.parent as any;
console.log('parent', parentCategory);
state.formData.parentId = parentCategory.id;
state.formData.level = parentCategory.level + 1;
@@ -247,7 +248,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
}).then(() => {
deleteCategories(ids).then(() => {
ElMessage.success('删除成功');

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

@@ -1,7 +1,7 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'category'
name: 'category',
};
</script>
@@ -16,8 +16,8 @@ const state = reactive({
category: {
id: undefined,
name: '',
childrenLen: 0
}
childrenLen: 0,
},
});
const { category } = toRefs(state);
@@ -27,13 +27,13 @@ function handleCategoryClick(categoryRow: any) {
state.category = {
id: categoryRow.id,
name: categoryRow.name,
childrenLen: categoryRow.children.length
childrenLen: categoryRow.children.length,
};
} else {
state.category = {
id: undefined,
name: '',
childrenLen: 0
childrenLen: 0,
};
}
}

18
src/views/pms/goods/components/GoodsAttribute.vue
View File

@@ -89,20 +89,20 @@ const dataFormRef = ref(ElForm);
const props = defineProps({
modelValue: {
type: Object,
default: () => {}
}
default: () => {},
},
});
const goodsInfo: any = computed({
get: () => props.modelValue,
set: value => {
set: (value) => {
emit('update:modelValue', value);
}
},
});
watch(
() => goodsInfo.value.categoryId,
newVal => {
(newVal) => {
// 商品编辑不加载分类下的属性
const goodsId = goodsInfo.value.id;
if (goodsId) {
@@ -111,7 +111,7 @@ watch(
// 商品新增加载默认分类下的属性
if (newVal) {
// type=2 商品分类下的属性
listAttributes({ categoryId: newVal, type: 2 }).then(response => {
listAttributes({ categoryId: newVal, type: 2 }).then((response) => {
const attrList = response.data;
if (attrList && attrList.length > 0) {
goodsInfo.value.attrList = attrList;
@@ -125,15 +125,15 @@ watch(
},
{
immediate: true,
deep: true
deep: true,
}
);
const state = reactive({
rules: {
name: [{ required: true, message: '请填写属性名称', trigger: 'blur' }],
value: [{ required: true, message: '请填写属性值', trigger: 'blur' }]
}
value: [{ required: true, message: '请填写属性值', trigger: 'blur' }],
},
});
const { rules } = toRefs(state);

12
src/views/pms/goods/components/GoodsCategory.vue
View File

@@ -48,26 +48,26 @@ const emit = defineEmits(['next', 'update:modelValue']);
const props = defineProps({
modelValue: {
type: Object,
default: () => {}
}
default: () => {},
},
});
const goodsInfo: any = computed({
get: () => props.modelValue,
set: value => {
set: (value) => {
emit('update:modelValue', value);
}
},
});
const state = reactive({
categoryOptions: [],
pathLabels: []
pathLabels: [],
});
const { categoryOptions, pathLabels } = toRefs(state);
function loadData() {
listCascadeCategories().then(response => {
listCascadeCategories().then((response) => {
state.categoryOptions = response.data;
if (goodsInfo.value.id) {
nextTick(() => {

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

@@ -53,7 +53,10 @@
<single-upload v-model="item.url" :show-close="true" />
<div v-if="item.url">
<el-link type="danger" class="button" v-if="item.main == true"
<el-link
type="danger"
class="button"
v-if="item.main == true"
>商品主图</el-link
>
<el-link
@@ -61,8 +64,7 @@
class="button"
v-else
@click="changeMainPicture(index)"
>设为主图</el-link
>
>设为主图</el-link>
</div>
<div v-else>
@@ -103,15 +105,15 @@ const dataFormRef = ref(ElForm);
const props = defineProps({
modelValue: {
type: Object,
default: () => {}
}
default: () => {},
},
});
const goodsInfo: any = computed({
get: () => props.modelValue,
set: value => {
set: (value) => {
emit('update:modelValue', value);
}
},
});
const state = reactive({
@@ -122,14 +124,14 @@ const state = reactive({
{ url: undefined, main: false },
{ url: undefined, main: false },
{ url: undefined, main: false },
{ url: undefined, main: false }
{ url: undefined, main: false },
] as Array<any>,
rules: {
name: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
originPrice: [{ required: true, message: '请填写原价', trigger: 'blur' }],
price: [{ required: true, message: '请填写现价', trigger: 'blur' }],
brandId: [{ required: true, message: '请选择商品品牌', trigger: 'blur' }]
}
brandId: [{ required: true, message: '请选择商品品牌', trigger: 'blur' }],
},
});
const { brandOptions, pictures, rules } = toRefs(state);
@@ -142,7 +144,7 @@ function loadData() {
if (goodsId) {
const mainPicUrl = goodsInfo.value.picUrl;
if (mainPicUrl) {
state.pictures.filter(item => item.main)[0].url = mainPicUrl;
state.pictures.filter((item) => item.main)[0].url = mainPicUrl;
}
const subPicUrls = goodsInfo.value.subPicUrls;
if (subPicUrls && subPicUrls.length > 0) {
@@ -175,14 +177,14 @@ function handleNext() {
if (valid) {
// 商品图片
const mainPicUrl = state.pictures
.filter(item => item.main == true && item.url)
.map(item => item.url);
.filter((item) => item.main == true && item.url)
.map((item) => item.url);
if (mainPicUrl && mainPicUrl.length > 0) {
goodsInfo.value.picUrl = mainPicUrl[0];
}
const subPicUrl = state.pictures
.filter(item => item.main == false && item.url)
.map(item => item.url);
.filter((item) => item.main == false && item.url)
.map((item) => item.url);
if (subPicUrl && subPicUrl.length > 0) {
goodsInfo.value.subPicUrls = subPicUrl;
}

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

@@ -187,7 +187,7 @@ import {
reactive,
ref,
toRefs,
watch
watch,
} from 'vue';
import { useRouter } from 'vue-router';
import { Plus, Minus } from '@element-plus/icons-vue';
@@ -216,39 +216,41 @@ const props = defineProps({
type: Object,
default: () => {
return {};
}
}
},
},
});
const goodsInfo: any = computed({
get: () => props.modelValue,
set: value => {
set: (value) => {
emit('update:modelValue', value);
}
},
});
const state = reactive({
specForm: {
specList: [] as any[]
specList: [] as any[],
},
skuForm: {
skuList: [] as any[]
skuList: [] as any[],
},
// 规格项表格标题
specTitles: [] as any[],
rules: {
spec: {
name: [{ required: true, message: '请输入规格名称', trigger: 'blur' }],
value: [{ required: true, message: '请输入规格值', trigger: 'blur' }]
value: [{ required: true, message: '请输入规格值', trigger: 'blur' }],
},
sku: {
skuSn: [{ required: true, message: '请输入商品编号', trigger: 'blur' }],
price: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
stockNum: [{ required: true, message: '请输入商品库存', trigger: 'blur' }]
}
stockNum: [
{ required: true, message: '请输入商品库存', trigger: 'blur' },
],
},
},
colors: ['', 'success', 'warning', 'danger'],
tagInputs: [{ value: undefined, visible: false }] // 规格值标签临时值和显隐控制
tagInputs: [{ value: undefined, visible: false }], // 规格值标签临时值和显隐控制
});
const { specForm, skuForm, specTitles, rules, colors, tagInputs } =
@@ -256,7 +258,7 @@ const { specForm, skuForm, specTitles, rules, colors, tagInputs } =
watch(
() => goodsInfo.value.categoryId,
newVal => {
(newVal) => {
// 商品编辑不加载分类下的规格
const goodsId = goodsInfo.value.id;
if (goodsId) {
@@ -264,13 +266,13 @@ watch(
}
if (newVal) {
// type=1 商品分类下的规格
listAttributes({ categoryId: newVal, type: 1 }).then(response => {
listAttributes({ categoryId: newVal, type: 1 }).then((response) => {
const specList = response.data;
if (specList && specList.length > 0) {
specList.forEach((item: any) => {
state.specForm.specList.push({
name: item.name,
values: []
values: [],
});
});
loadData();
@@ -280,7 +282,7 @@ watch(
},
{
immediate: true,
deep: true
deep: true,
}
);
@@ -297,14 +299,14 @@ function loadData() {
(state.specForm.specList[specIndex] as any).values.push({
id: specItem.id,
value: specItem.value,
picUrl: specItem.picUrl
picUrl: specItem.picUrl,
});
} else {
state.specForm.specList.push({
name: specItem.name,
values: [
{ id: specItem.id, value: specItem.value, picUrl: specItem.picUrl }
]
{ id: specItem.id, value: specItem.value, picUrl: specItem.picUrl },
],
});
}
});
@@ -388,7 +390,7 @@ function generateSkuList() {
const specList = JSON.parse(
JSON.stringify(
state.specForm.specList.filter(
item => item.values && item.values.length > 0
(item) => item.values && item.values.length > 0
)
)
); // 深拷贝，取有属性的规格项，否则笛卡尔积运算得到的SKU列表值为空
@@ -527,11 +529,11 @@ function handleSpecValueInput(rowIndex: any) {
}, 0);
state.specForm.specList[rowIndex].values[specValues.length] = {
value: currSpecValue,
id: 'tid_' + (rowIndex + 1) + '_' + ++maxSpecValueIndex
id: 'tid_' + (rowIndex + 1) + '_' + ++maxSpecValueIndex,
};
} else {
state.specForm.specList[rowIndex].values = [
{ value: currSpecValue, id: 'tid_' + (rowIndex + 1) + '_1' }
{ value: currSpecValue, id: 'tid_' + (rowIndex + 1) + '_1' },
];
}
}
@@ -549,7 +551,7 @@ function handleSpecValueInput(rowIndex: any) {
const objectSpanMethod = ({ rowIndex, columnIndex }: any) => {
let mergeRows = [1, 1, 1]; // 分别对应规格1、规格2、规格3列合并的行数
const specLen = state.specForm.specList.filter(
item => item.values && item.values.length > 0
(item) => item.values && item.values.length > 0
).length;
if (specLen == 2) {
const values_len_2 = state.specForm.specList[1].values
@@ -600,7 +602,7 @@ function submitForm() {
delete submitsData.skuList;
let specList = [] as any[];
state.specForm.specList.forEach(item => {
state.specForm.specList.forEach((item) => {
item.values.forEach((value: any) => {
value.name = item.name;
});
@@ -626,7 +628,7 @@ function submitForm() {
ElNotification({
title: '提示',
message: '编辑商品成功',
type: 'success'
type: 'success',
});
});
} else {
@@ -636,7 +638,7 @@ function submitForm() {
ElNotification({
title: '提示',
message: '新增商品成功',
type: 'success'
type: 'success',
});
});
}

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

@@ -53,7 +53,7 @@ import GoodsStock from './components/GoodsStock.vue';
import { getGoodsDetail } from '@/api/pms/goods';
import { useRoute } from 'vue-router';
import { GoodsDetail } from '@/types';
import { GoodsDetail } from '@/types/api/pms/goods';
const route = useRoute();
@@ -64,8 +64,8 @@ const state = reactive({
album: [],
attrList: [],
specList: [],
skuList: []
} as GoodsDetail
skuList: [],
} as GoodsDetail,
});
const { loaded, active, goodsInfo } = toRefs(state);
@@ -74,7 +74,7 @@ function loadData() {
const goodsId = route.query.goodsId as string;
if (goodsId) {
getGoodsDetail(goodsId).then(response => {
getGoodsDetail(goodsId).then((response) => {
state.goodsInfo = response.data;
state.goodsInfo.originPrice = (state.goodsInfo.originPrice as any) / 100;
state.goodsInfo.price = (state.goodsInfo.price as any) / 100;

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

@@ -1,7 +1,7 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'goods'
name: 'goods',
};
</script>
@@ -16,11 +16,11 @@ import {
Edit,
Refresh,
Delete,
View
View,
} from '@element-plus/icons-vue';
import { listGoodsPages, deleteGoods } from '@/api/pms/goods';
import { listPageGoods, deleteGoods } from '@/api/pms/goods';
import { listCascadeCategories } from '@/api/pms/category';
import { GoodsItem, GoodsQueryParam } from '@/types';
import { GoodsItem, GoodsQueryParam } from '@/types/api/pms/goods';
import { moneyFormatter } from '@/utils/filter';
const dataTableRef = ref(ElTable);
@@ -38,12 +38,12 @@ const state = reactive({
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10
pageSize: 10,
} as GoodsQueryParam,
goodsList: [] as GoodsItem[],
categoryOptions: [],
goodDetail: undefined,
dialogVisible: false
dialogVisible: false,
});
const {
@@ -54,12 +54,12 @@ const {
categoryOptions,
goodDetail,
total,
dialogVisible
dialogVisible,
} = toRefs(state);
function handleQuery() {
state.loading = true;
listGoodsPages(state.queryParams).then(({ data }) => {
listPageGoods(state.queryParams).then(({ data }) => {
state.goodsList = data.list;
state.total = data.total;
state.loading = false;
@@ -71,7 +71,7 @@ function resetQuery() {
pageNum: 1,
pageSize: 10,
name: undefined,
categoryId: undefined
categoryId: undefined,
};
handleQuery();
}
@@ -88,7 +88,7 @@ function handleAdd() {
function handleUpdate(row: any) {
router.push({
path: 'goods-detail',
query: { goodsId: row.id, categoryId: row.categoryId }
query: { goodsId: row.id, categoryId: row.categoryId },
});
}
@@ -97,7 +97,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('是否确认删除选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
})
.then(function () {
return deleteGoods(ids);
@@ -119,7 +119,7 @@ function handleSelectionChange(selection: any) {
}
onMounted(() => {
listCascadeCategories({}).then(response => {
listCascadeCategories({}).then((response) => {
state.categoryOptions = ref(response.data);
});
handleQuery();