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

fix: 修复一些TypeScript打包编译报错问题，现版本可成功生产打包

Browse Source
This commit is contained in:
郝先瑞
2022-01-23 00:39:53 +08:00
parent dfcbe3e644
commit 506f5bf006
9 changed files with 149 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
<div class="app-container">
<!-- 搜索表单 -->
<el-form
ref="queryForm"
ref="queryFormRef"
:model="queryParams"
:inline="true"
size="small"
@@ -105,7 +105,7 @@
width="600px"
>
<el-form
ref="dataForm"
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
@@ -121,7 +121,6 @@
<el-form-item label="排序" prop="sort">
<el-input v-model="formData.sort"/>
</el-form-item>
</el-form>
<template #footer>
@@ -138,11 +137,12 @@
import {listBrandsWithPage, getBrandDetail, updateBrand, addBrand, deleteBrands} from '@/api/pms/brand'
import SingleUpload from "@/components/Upload/SingleUpload.vue"
import {onMounted, reactive, ref, toRefs, unref} from "vue";
import {ElForm, ElMessage, ElMessageBox} from "element-plus";
import {ElForm, ElTable, ElMessage, ElMessageBox} from "element-plus";
import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
const dataForm = ref(ElForm) // 属性名必须和元素的ref属性值一致
const dataTable = ref()
const dataTableRef = ref(ElTable)
const queryFormRef = ref(ElForm) // 属性名必须和元素的ref属性值一致
const dataFormRef = ref(ElForm) // 属性名必须和元素的ref属性值一致
const state = reactive({
loading: true,
@@ -189,16 +189,14 @@ function handleQuery() {
}
function resetQuery() {
state.queryParams = {
pageNum: 1,
pageSize: 10,
title: undefined
}
const dataTable = unref(dataTableRef)
dataTable.resetFields()
handleQuery()
}
function handleRowClick(row: any) {
dataTable.value.toggleRowSelection(row);
const dataTable = unref(dataTableRef)
dataTable.toggleRowSelection(row);
}
function handleSelectionChange(selection: any) {
@@ -208,7 +206,6 @@ function handleSelectionChange(selection: any) {
}
function handleAdd() {
resetForm()
state.dialog = {
title: '添加品牌',
visible: true
@@ -216,7 +213,6 @@ function handleAdd() {
}
function handleUpdate(row: any) {
resetForm()
state.dialog = {
title: '修改品牌',
visible: true,
@@ -228,19 +224,21 @@ function handleUpdate(row: any) {
}
function submitForm() {
const form = unref(dataForm)
form.validate((valid: any) => {
const dataForm = unref(dataFormRef)
dataForm.validate((valid: any) => {
if (valid) {
if (state.formData.id) {
updateBrand(state.formData.id as any, state.formData).then(response => {
ElMessage.success('修改成功')
state.dialog.visible = false
resetForm()
handleQuery()
})
} else {
addBrand(state.formData).then(response => {
ElMessage.success('新增成功')
state.dialog.visible = false
resetForm()
handleQuery()
})
}
@@ -248,18 +246,17 @@ function submitForm() {
})
}
/**
* 重置表单
*/
function resetForm() {
state.formData = {
id: undefined,
name: undefined,
logoUrl: undefined,
sort: 1
}
const dataForm = unref(dataFormRef)
dataForm.resetFields()
}
function cancel() {
resetForm()
state.dialog.visible = false
resetForm()
}
function handleDelete(row: any) {
@@ -285,5 +282,4 @@ onMounted(() => {
</script>
<style scoped>
</style>

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

@@ -1,5 +1,5 @@
<template>
<div class="components-container">
<div class="component-container">
<el-card class="box-card" shadow="always">
<el-row>
<el-col :span="12">
@@ -158,7 +158,7 @@ function submitForm() {
</script>
<style scoped>
.components-container{
.component-container{
margin-bottom: 20px;
}

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

@@ -1,6 +1,6 @@
<template>
<div class="components-container">
<div class="components-container__main">
<div class="component-container">
<div class="component-container__main">
<el-card class="box-card">
<template #header>
<span>商品属性</span>
@@ -67,7 +67,7 @@
</el-card>
</div>
<div class="components-container__footer">
<div class="component-container__footer">
<el-button @click="handlePrev">上一步，填写商品信息</el-button>
<el-button type="primary" @click="handleNext">下一步，设置商品库存</el-button>
</div>
@@ -151,7 +151,7 @@ function handleNext() {
<style lang="scss" scoped>
.components-container {
.component-container {
&__main {
margin: 20px auto
}

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

@@ -1,6 +1,6 @@
<template>
<div class="components-container">
<div class="components-container__main">
<div class="component-container">
<div class="component-container__main">
<el-cascader-panel
ref="categoryRef"
:options="categoryOptions"
@@ -19,7 +19,7 @@
</div>
</div>
<div class="components-container__footer">
<div class="component-container__footer">
<el-button type="primary" @click="handleNext">下一步，填写商品信息</el-button>
</div>
</div>
@@ -80,7 +80,7 @@ onMounted(() => {
<style lang="scss" scoped>
.components-container {
.component-container {
&__main {
margin: 20px auto
}

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

@@ -1,24 +1,12 @@
<template>
<div class="components-container">
<div class="components-container__main">
<div class="component-container">
<div class="component-container__main">
<el-form
ref="dataForm"
:rules="rules"
:model="modelValue"
label-width="120px"
>
<el-form-item label="商品名称" prop="name">
<el-input style="width: 400px" v-model="modelValue.name"/>
</el-form-item>
<el-form-item label="原价" prop="originPrice">
<el-input style="width: 400px" v-model="modelValue.originPrice"/>
</el-form-item>
<el-form-item label="现价" prop="price">
<el-input style="width: 400px" v-model="modelValue.price"/>
</el-form-item>
<el-form-item label="商品品牌" prop="brandId">
<el-select
v-model="modelValue.brandId"
@@ -34,16 +22,23 @@
</el-select>
</el-form-item>
<el-form-item label="商品名称" prop="name">
<el-input style="width: 400px" v-model="modelValue.name"/>
</el-form-item>
<el-form-item label="原价" prop="originPrice">
<el-input style="width: 400px" v-model="modelValue.originPrice"/>
</el-form-item>
<el-form-item label="现价" prop="price">
<el-input style="width: 400px" v-model="modelValue.price"/>
</el-form-item>
<el-form-item label="商品简介">
<el-input
type="textarea"
v-model="modelValue.description"
style="width: 400px"
/>
<el-input type="textarea" v-model="modelValue.description"/>
</el-form-item>
<el-form-item label="商品相册">
<el-card v-for="(item,index) in pictures" style="width: 170px;display: inline-block;margin-left: 10px" :body-style="{ padding: '10px' }">
<single-upload v-model="item.url"/>
@@ -62,12 +57,12 @@
</el-form-item>
<el-form-item label="商品详情" prop="detail">
<editor v-model="modelValue.detail" ></editor>
<editor v-model="modelValue.detail" style="height: 600px"/>
</el-form-item>
</el-form>
</div>
<div class="components-container__footer">
<div class="component-container__footer">
<el-button @click="handlePrev">上一步，选择商品分类</el-button>
<el-button type="primary" @click="handleNext">下一步，设置商品属性</el-button>
</div>
@@ -178,7 +173,7 @@ onMounted(() => {
<style lang="scss" scoped>
.components-container {
.component-container {
&__main {
margin: 20px auto;

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

@@ -1,11 +1,10 @@
<template>
<div class="components-container">
<div class="app-container">
<el-steps :active="active" process-status="finish" finish-status="success" simple>
<el-step title="选择商品分类"></el-step>
<el-step title="填写商品信息"></el-step>
<el-step title="设置商品属性"></el-step>
<el-step title="设置商品库存"></el-step>
<el-step title="选择商品分类"/>
<el-step title="填写商品信息"/>
<el-step title="设置商品属性"/>
<el-step title="设置商品库存"/>
</el-steps>
<goods-category
@@ -107,8 +106,9 @@ export default {
</script>
<style lang="scss" scoped>
.form-container {
width: 80%;
margin: 30px auto;
.app-container {
width: 1200px;
margin: 50px auto;
border: 1px solid #eee;
}
</style>