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>

48
src/views/system/menu/components/Menu.vue
View File

@@ -2,7 +2,7 @@
<div class="component-container">
<!-- 搜索表单 -->
<el-form
ref="queryForm"
ref="queryFormRef"
size="mini"
:model="queryParams"
:inline="true"
@@ -11,7 +11,7 @@
<el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
</el-form-item>
<el-form-item>
<el-form-item prop="name">
<el-input
v-model="queryParams.name"
placeholder="菜单名称"
@@ -79,7 +79,7 @@
width="750px"
>
<el-form
ref="dataForm"
ref="dataFormRef"
:model="formData"
:rules="rules"
>
@@ -177,7 +177,9 @@ import IconSelect from '@/components/IconSelect/index.vue';
const emit = defineEmits(['menuClick'])
const showChooseIcon = ref(false);
const iconSelectRef = ref(null);
const dataForm = ref(ElForm)
const queryFormRef = ref(ElForm)
const dataFormRef = ref(ElForm)
const state = reactive({
loading: true,
@@ -207,7 +209,7 @@ const state = reactive({
sort: 1,
component: 'Layout',
path: undefined,
redirect:''
redirect: ''
},
rules: {
parentId: [
@@ -224,7 +226,7 @@ const state = reactive({
currentRow: undefined
})
const {loading,single,multiple,queryParams,menuList,total,dialog,formData,rules,menuOptions} =toRefs(state)
const {loading, single, multiple, queryParams, menuList, total, dialog, formData, rules, menuOptions} = toRefs(state)
function handleQuery() {
// 重置父组件
@@ -250,12 +252,12 @@ async function loadTreeSelectMenuOptions() {
})
}
/**
* 重置查询
*/
function resetQuery() {
state.queryParams = {
pageNum: 1,
pageSize: 10,
name: undefined
}
const queryForm = unref(queryFormRef)
queryForm.resetFields()
handleQuery()
}
@@ -271,7 +273,6 @@ function handleRowClick(row: any) {
}
async function handleAdd(row: any) {
resetForm()
await loadTreeSelectMenuOptions()
state.dialog = {
title: '添加菜单',
@@ -299,7 +300,6 @@ async function handleAdd(row: any) {
}
async function handleUpdate(row: any) {
resetForm()
await loadTreeSelectMenuOptions()
state.dialog = {
title: '修改菜单',
@@ -312,8 +312,8 @@ async 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) {
updateMenu(state.formData.id, state.formData).then(response => {
@@ -348,23 +348,17 @@ function handleDelete(row: any) {
)
}
/**
* 重置表单
*/
function resetForm() {
state.formData = {
id: undefined,
parentId: 0,
name: undefined,
visible: 1,
icon: '',
sort: 1,
component: 'Layout',
path: undefined,
redirect:''
}
const dataForm = unref(dataFormRef)
dataForm.resetFields
}
function cancel() {
resetForm()
state.dialog.visible = false
resetForm()
}
function showSelectIcon() {

133
src/views/system/menu/components/Perm.vue
View File

@@ -1,22 +1,23 @@
<template>
<div>
<div claas="component-container">
<!-- 搜索表单 -->
<el-form
ref="queryForm"
ref="queryFormRef"
size="mini"
:model="state.queryParams"
:model="queryParams"
:inline="true"
>
<el-form-item>
<el-button type="success" :icon="Plus" :disabled="state.single" @click="handleAdd">新增</el-button>
<el-button type="danger" :icon="Delete" :disabled="state.multiple" @click="handleDelete">删除</el-button>
<el-button type="success" :icon="Plus" :disabled="!menuId" @click="handleAdd">新增</el-button>
<el-button type="danger" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
</el-form-item>
<el-form-item>
<el-form-item prop="name">
<el-input
v-model="state.queryParams.name"
v-model="queryParams.name"
placeholder="权限名称"
clearable
@keyup.enter.native="handleQuery"/>
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
@@ -26,9 +27,8 @@
<!-- 数据表格 -->
<el-table
ref="dataTable"
:data="state.pageList"
v-loading="state.loading"
:data="pageList"
v-loading="loading"
@selection-change="handleSelectionChange"
border
size="mini"
@@ -63,64 +63,65 @@
</el-table-column>
</el-table>
<!-- 分页工具条 -->
<pagination
v-show="state.total>0"
:total="state.total"
:page="state.queryParams.pageNum"
:limit="state.queryParams.pageSize"
v-show="total>0"
:total="total"
:page="queryParams.pageNum"
:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<!-- 表单弹窗 -->
<el-dialog
:title="state.dialog.title"
v-model="state.dialog.visible"
:title="dialog.title"
v-model="dialog.visible"
width="700px">
<el-form
ref="dataForm"
:model="state.formData"
:rules="state.rules"
label-width="120px">
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="120px"
>
<el-form-item label="权限名称" prop="name">
<el-input v-model="state.formData.name" placeholder="请输入权限名称"/>
<el-input v-model="formData.name" placeholder="请输入权限名称"/>
</el-form-item>
<el-form-item label="URL权限标识" prop="urlPerm">
<el-input placeholder="/api/v1/users" v-model="state.urlPerm.requestPath" class="input-with-select">
<el-input placeholder="/api/v1/users" v-model="urlPerm.requestPath" class="input-with-select">
<template #prepend>
<el-select
v-model="state.urlPerm.serviceName"
v-model="urlPerm.serviceName"
style="width: 130px;"
placeholder="所属服务"
clearable
>
<el-option v-for="item in state.microServiceOptions" :value="item.value" :label="item.name"/>
<el-option v-for="item in microServiceOptions" :value="item.value" :label="item.name"/>
</el-select>
<el-select
v-model="state.urlPerm.requestMethod"
v-model="urlPerm.requestMethod"
style="width: 120px;margin-left: 20px"
slot="prepend"
placeholder="请求方式"
clearable
>
<el-option
v-for="item in state.requestMethodOptions"
v-for="item in requestMethodOptions"
:value="item.value"
:label="item.name"
/>
</el-select>
</template>
</el-input>
<el-link v-show="state.urlPerm.requestMethod">
{{ state.urlPerm.requestMethod }}:/{{ state.urlPerm.serviceName }}{{ state.urlPerm.requestPath }}
<el-link v-show="urlPerm.requestMethod">
{{ urlPerm.requestMethod }}:/{{ urlPerm.serviceName }}{{ urlPerm.requestPath }}
</el-link>
</el-form-item>
<el-form-item label="按钮权限标识" prop="btnPerm">
<el-input v-model="state.formData.btnPerm" placeholder="sys:user:add"/>
<el-input v-model="formData.btnPerm" placeholder="sys:user:add"/>
</el-form-item>
</el-form>
@@ -142,14 +143,13 @@ import {ElForm, ElMessage, ElMessageBox} from "element-plus"
const {proxy}: any = getCurrentInstance();
const queryFormRef = ref(ElForm)
const dataFormRef = ref(ElForm)
const props = defineProps({
menuId: {
type: String,
default: ''
},
menuName: {
type: String,
default: ''
}
})
@@ -196,9 +196,8 @@ const state = reactive({
{required: true, message: '请选择请求方式', trigger: 'blur'}
]
},
microServiceOptions: [],
microServiceOptions: [] as Array<any>,
requestMethodOptions: [] as Array<any>,
menuName: undefined,
urlPerm: {
requestMethod: undefined,
serviceName: undefined,
@@ -206,8 +205,21 @@ const state = reactive({
},
})
toRefs(state)
const {
loading,
ids,
single,
multiple,
pageList,
total,
dialog,
formData,
rules,
microServiceOptions,
requestMethodOptions,
urlPerm,
queryParams
} = toRefs(state)
function handleQuery() {
if (state.queryParams.menuId) {
@@ -227,12 +239,8 @@ function handleQuery() {
}
function resetQuery() {
state.queryParams = {
pageNum: 1,
pageSize: 10,
menuId: undefined,
name: undefined
}
const queryForm = unref(queryFormRef)
queryForm.resetFields()
handleQuery()
}
@@ -242,11 +250,10 @@ function handleSelectionChange(selection: any) {
state.multiple = !selection.length
}
/**
* 字典数据准备
* 加载字典数据
*/
function loadDictData() {
function loadDictOptions() {
proxy.$listDictsByCode('micro_service').then((response: any) => {
state.microServiceOptions = response.data
})
@@ -257,8 +264,7 @@ function loadDictData() {
}
function handleAdd() {
resetForm()
loadDictData()
loadDictOptions()
state.dialog = {
title: '添加权限',
visible: true
@@ -266,8 +272,7 @@ function handleAdd() {
}
function handleUpdate(row: any) {
resetForm()
loadDictData()
loadDictOptions()
state.dialog = {
title: '修改权限',
visible: true
@@ -286,11 +291,9 @@ function handleUpdate(row: any) {
})
}
const dataForm = ref(ElForm)
function submitForm() {
const form = unref(dataForm)
form.validate((valid: any) => {
const dataForm = unref(dataFormRef)
dataForm.validate((valid: any) => {
if (valid) {
// 接口权限和按钮权限必填其一
console.log(state.urlPerm.requestPath, state.formData.btnPerm)
@@ -298,7 +301,6 @@ function submitForm() {
ElMessage.warning('请至少填写一种权限')
return false
}
// 如果填写了URL权限，完整性校验
if (!state.urlPerm.requestPath) {
if (!state.urlPerm.requestMethod) {
@@ -317,12 +319,14 @@ function submitForm() {
updatePerm(state.formData.id, state.formData).then(response => {
ElMessage.success('修改成功')
state.dialog.visible = false
resetForm()
handleQuery()
})
} else {
addPerm(state.formData).then(response => {
ElMessage.success('新增成功')
state.dialog.visible = false
resetForm()
handleQuery()
})
}
@@ -330,14 +334,13 @@ function submitForm() {
})
}
/**
* 重置表单
*/
function resetForm() {
state.formData = {
id: undefined,
name: undefined,
urlPerm: '',
btnPerm: '',
menuId: ''
}
const dataForm = unref(dataFormRef)
dataForm.resetFields()
}
function cancel() {
@@ -366,7 +369,7 @@ onMounted(() => {
</script>
<style scoped>
.perm-container {
.component-container {
margin-bottom: 20px;
}
</style>

6
src/views/system/user/index.vue
View File

@@ -442,9 +442,9 @@ const state = reactive({
],
email: [
{
type: 'email',
message: '\'请输入正确的邮箱地址',
trigger: ['blur', 'change']
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
message: '请输入正确的邮箱地址',
trigger: 'blur'
}
],
mobile: [