From c38abc365c779528d5ea5d2926a895aa1211eaf9 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 26 Apr 2023 17:17:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E7=AE=A1=E7=90=86:=20?=
=?UTF-8?q?=E5=AE=8C=E5=96=84=E8=A1=A8=E5=8D=95=E6=A0=A1=E9=AA=8C=EF=BC=8C?=
=?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BF=A1=E6=81=AF=E6=8F=90=E7=A4=BA=EF=BC=8C?=
=?UTF-8?q?=E5=AE=8C=E6=88=90=E6=96=B0=E5=BB=BA=E3=80=81=E7=BC=96=E8=BE=91?=
=?UTF-8?q?=E3=80=81=E6=8F=90=E4=BA=A4=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/mall/product/management/type/index.ts | 22 ++++
src/utils/object.ts | 17 +++
src/views/mall/product/management/addForm.vue | 90 +++++++++++--
.../management/components/BasicInfoForm.vue | 118 +++++++++---------
.../management/components/DescriptionForm.vue | 82 ++++++++++--
.../components/OtherSettingsForm.vue | 87 ++++++++++---
src/views/system/dict/index.vue | 91 ++++++++------
7 files changed, 374 insertions(+), 133 deletions(-)
create mode 100644 src/api/mall/product/management/type/index.ts
create mode 100644 src/utils/object.ts
diff --git a/src/api/mall/product/management/type/index.ts b/src/api/mall/product/management/type/index.ts
new file mode 100644
index 00000000..3d372c45
--- /dev/null
+++ b/src/api/mall/product/management/type/index.ts
@@ -0,0 +1,22 @@
+export interface SpuType {
+ name?: string // 商品名称
+ categoryId?: number // 商品分类
+ keyword?: string // 关键字
+ unit?: string // 单位
+ picUrl?: string // 商品封面图
+ sliderPicUrls?: string[] // 商品轮播图
+ introduction?: string // 商品简介
+ deliveryTemplateId?: number // 运费模版
+ selectRule?: string // 选择规格 TODO 暂时定义
+ specType?: boolean // 商品规格
+ subCommissionType?: boolean // 分销类型
+ description?: string // 商品详情
+ sort?: string // 商品排序
+ giveIntegral?: number // 赠送积分
+ virtualSalesCount?: number // 虚拟销量
+ recommendHot?: boolean // 是否热卖
+ recommendBenefit?: boolean // 是否优惠
+ recommendBest?: boolean // 是否精品
+ recommendNew?: boolean // 是否新品
+ recommendGood?: boolean // 是否优品
+}
diff --git a/src/utils/object.ts b/src/utils/object.ts
new file mode 100644
index 00000000..8edd1888
--- /dev/null
+++ b/src/utils/object.ts
@@ -0,0 +1,17 @@
+/**
+ * 将值复制到目标对象，且以目标对象属性为准，例：target: {a:1} source:{a:2,b:3} 结果为：{a:2}
+ * @param target 目标对象
+ * @param source 源对象
+ */
+export const copyValueToTarget = (target, source) => {
+ const newObj = Object.assign({}, target, source)
+ // 删除多余属性
+ Object.keys(newObj).forEach((key) => {
+ // 如果不是target中的属性则删除
+ if (Object.keys(target).indexOf(key) === -1) {
+ delete newObj[key]
+ }
+ })
+ // 更新目标对象值
+ Object.assign(target, newObj)
+}
diff --git a/src/views/mall/product/management/addForm.vue b/src/views/mall/product/management/addForm.vue
index d077df5b..f915b204 100644
--- a/src/views/mall/product/management/addForm.vue
+++ b/src/views/mall/product/management/addForm.vue
@@ -2,13 +2,25 @@
<ContentWrap v-loading="formLoading">
<el-tabs v-model="activeName">
<el-tab-pane label="商品信息" name="basicInfo">
- <BasicInfoForm ref="basicInfoRef" />
+ <BasicInfoForm
+ ref="BasicInfoRef"
+ v-model:activeName="activeName"
+ :propFormData="formData"
+ />
</el-tab-pane>
<el-tab-pane label="商品详情" name="description">
- <DescriptionForm ref="DescriptionRef" />
+ <DescriptionForm
+ ref="DescriptionRef"
+ v-model:activeName="activeName"
+ :propFormData="formData"
+ />
</el-tab-pane>
<el-tab-pane label="其他设置" name="otherSettings">
- <OtherSettingsForm ref="otherSettingsRef" />
+ <OtherSettingsForm
+ ref="OtherSettingsRef"
+ v-model:activeName="activeName"
+ :propFormData="formData"
+ />
</el-tab-pane>
</el-tabs>
<el-form>
@@ -22,6 +34,7 @@
<script lang="ts" name="ProductManagementForm" setup>
import { useTagsViewStore } from '@/store/modules/tagsView'
import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components'
+import { SpuType } from '@/api/mall/product/management/type' // const { t } = useI18n() // 国际化
// const { t } = useI18n() // 国际化
// const message = useMessage() // 消息弹窗
@@ -30,18 +43,77 @@ const { push, currentRoute } = useRouter() // 路由
const { delView } = useTagsViewStore() // 视图操作
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const activeName = ref('otherSettings') // Tag 激活的窗口
-const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>()
-const DescriptionRef = ref<ComponentRef<typeof DescriptionForm>>()
-
+const activeName = ref('basicInfo') // Tag 激活的窗口
+const BasicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>() // 商品信息Ref
+const DescriptionRef = ref<ComponentRef<typeof DescriptionForm>>() // 商品详情Ref
+const OtherSettingsRef = ref<ComponentRef<typeof OtherSettingsForm>>() // 其他设置Ref
+const formData = ref<SpuType>({
+ name: '', // 商品名称
+ categoryId: 0, // 商品分类
+ keyword: '', // 关键字
+ unit: '', // 单位
+ picUrl: '', // 商品封面图
+ sliderPicUrls: [], // 商品轮播图
+ introduction: '', // 商品简介
+ deliveryTemplateId: 0, // 运费模版
+ selectRule: '',
+ specType: false, // 商品规格
+ subCommissionType: false, // 分销类型
+ description: '', // 商品详情
+ sort: 1, // 商品排序
+ giveIntegral: 1, // 赠送积分
+ virtualSalesCount: 1, // 虚拟销量
+ recommendHot: false, // 是否热卖
+ recommendBenefit: false, // 是否优惠
+ recommendBest: false, // 是否精品
+ recommendNew: false, // 是否新品
+ recommendGood: false // 是否优品
+})
/** 获得详情 */
const getDetail = async () => {}
/** 提交按钮 */
-const submitForm = async () => {}
-
+const submitForm = async () => {
+ // TODO 三个表单逐一校验，如果有一个表单校验不通过则切换到对应表单，如果有两个及以上的情况则切换到最前面的一个并弹出提示消息
+ // 校验各表单
+ try {
+ await unref(BasicInfoRef)?.validate()
+ await unref(DescriptionRef)?.validate()
+ await unref(OtherSettingsRef)?.validate()
+ // 校验都通过后提交表单
+ console.log(formData.value)
+ } catch {}
+}
+/**
+ * 重置表单
+ */
+const resetForm = async () => {
+ formData.value = {
+ name: '', // 商品名称
+ categoryId: 0, // 商品分类
+ keyword: '', // 关键字
+ unit: '', // 单位
+ picUrl: '', // 商品封面图
+ sliderPicUrls: [], // 商品轮播图
+ introduction: '', // 商品简介
+ deliveryTemplateId: 0, // 运费模版
+ selectRule: '',
+ specType: false, // 商品规格
+ subCommissionType: false, // 分销类型
+ description: '', // 商品详情
+ sort: 1, // 商品排序
+ giveIntegral: 1, // 赠送积分
+ virtualSalesCount: 1, // 虚拟销量
+ recommendHot: false, // 是否热卖
+ recommendBenefit: false, // 是否优惠
+ recommendBest: false, // 是否精品
+ recommendNew: false, // 是否新品
+ recommendGood: false // 是否优品
+ }
+}
/** 关闭按钮 */
const close = () => {
+ resetForm()
delView(unref(currentRoute))
push('/product/product-management')
}
diff --git a/src/views/mall/product/management/components/BasicInfoForm.vue b/src/views/mall/product/management/components/BasicInfoForm.vue
index 1b33e9eb..8074e67b 100644
--- a/src/views/mall/product/management/components/BasicInfoForm.vue
+++ b/src/views/mall/product/management/components/BasicInfoForm.vue
@@ -1,5 +1,5 @@
<template>
- <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
+ <el-form ref="ProductManagementBasicInfoRef" :model="formData" :rules="rules" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="商品名称" prop="name">
@@ -40,26 +40,12 @@
</el-col>
<el-col :span="12">
<el-form-item label="商品封面图" prop="picUrl">
- <div class="demo-image__preview pt-5px pb-5px pl-11x pr-11px">
- <el-image
- :initial-index="0"
- :preview-src-list="srcList"
- :src="url"
- :zoom-rate="1.2"
- fit="cover"
- style="width: 100%; height: 90px"
- />
- </div>
+ <UploadImg v-model="formData.picUrl" height="80px" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="商品轮播图" prop="sliderPicUrls">
- <el-button>添加轮播图</el-button>
- <el-carousel :interval="3000" height="200px" style="width: 100%" type="card">
- <el-carousel-item v-for="item in 6" :key="item">
- <h3 justify="center" text="2xl">{{ item }}</h3>
- </el-carousel-item>
- </el-carousel>
+ <UploadImgs v-model="formData.sliderPicUrls" />
</el-form-item>
</el-col>
<el-col :span="12">
@@ -72,6 +58,7 @@
<el-col :span="12">
<el-button class="ml-20px">运费模板</el-button>
</el-col>
+ <!-- TODO 商品规格和分销类型切换待定 -->
<el-col :span="12">
<el-form-item label="商品规格" props="specType">
<el-radio-group v-model="formData.specType" @change="changeSpecType(formData.specType)">
@@ -113,23 +100,31 @@
</el-form>
</template>
<script lang="ts" name="ProductManagementBasicInfoForm" setup>
-// TODO 商品封面测试数据
+import { PropType } from 'vue'
import { defaultProps } from '@/utils/tree'
+import type { SpuType } from '@/api/mall/product/management/type'
+import { UploadImg, UploadImgs } from '@/components/UploadFile'
+import { copyValueToTarget } from '@/utils/object'
-const url = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
-const srcList = ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']
+const message = useMessage() // 消息弹窗
+const props = defineProps({
+ propFormData: {
+ type: Object as PropType<SpuType>,
+ default: () => {}
+ }
+})
-const formRef = ref()
-const formData = ref({
+const ProductManagementBasicInfoRef = ref() // 表单Ref
+const formData = ref<SpuType>({
name: '', // 商品名称
- categoryId: '', // 商品分类
+ categoryId: 155415, // 商品分类
keyword: '', // 关键字
unit: '', // 单位
picUrl: '', // 商品封面图
sliderPicUrls: [], // 商品轮播图
introduction: '', // 商品简介
deliveryTemplateId: '', // 运费模版
- selectRule: '',
+ selectRule: '', // 选择规则 TODO 暂定
specType: false, // 商品规格
subCommissionType: false // 分销类型
})
@@ -138,12 +133,47 @@ const rules = reactive({
categoryId: [required],
keyword: [required],
unit: [required],
+ introduction: [required],
picUrl: [required],
- sliderPicUrls: [required],
- deliveryTemplateId: [required],
- specType: [required],
- subCommissionType: [required]
+ sliderPicUrls: [required]
+ // deliveryTemplateId: [required],
+ // specType: [required],
+ // subCommissionType: [required],
})
+/**
+ * 将传进来的值赋值给formData
+ */
+watch(
+ () => props.propFormData,
+ (data) => {
+ if (!data) return
+ copyValueToTarget(formData.value, data)
+ },
+ {
+ deep: true,
+ immediate: true
+ }
+)
+const emit = defineEmits(['update:activeName'])
+/**
+ * 表单校验
+ */
+const validate = async () => {
+ // 校验表单
+ if (!ProductManagementBasicInfoRef) return
+ return await unref(ProductManagementBasicInfoRef).validate((valid) => {
+ if (!valid) {
+ message.warning('商品信息未完善！！')
+ emit('update:activeName', 'basicInfo')
+ // 目的截断之后的校验
+ throw new Error('商品信息未完善！！')
+ } else {
+ // 校验通过更新数据
+ Object.assign(props.propFormData, formData.value)
+ }
+ })
+}
+defineExpose({ validate })
// 选择规格
const changeSpecType = (specType) => {
console.log(specType)
@@ -157,35 +187,3 @@ const confirm = () => {}
// 添加规格
const addRule = () => {}
</script>
-<style scoped>
-/*TODO 商品轮播图测试样式*/
-.el-carousel__item h3 {
- color: #475669;
- opacity: 0.75;
- line-height: 200px;
- margin: 0;
- text-align: center;
-}
-
-.el-carousel__item:nth-child(2n) {
- background-color: #99a9bf;
-}
-
-.el-carousel__item:nth-child(2n + 1) {
- background-color: #d3dce6;
-}
-
-/*TODO 商品封面测试样式*/
-.demo-image__error .image-slot {
- font-size: 30px;
-}
-
-.demo-image__error .image-slot .el-icon {
- font-size: 30px;
-}
-
-.demo-image__error .el-image {
- width: 100%;
- height: 200px;
-}
-</style>
diff --git a/src/views/mall/product/management/components/DescriptionForm.vue b/src/views/mall/product/management/components/DescriptionForm.vue
index 53609705..f29f29b4 100644
--- a/src/views/mall/product/management/components/DescriptionForm.vue
+++ b/src/views/mall/product/management/components/DescriptionForm.vue
@@ -1,13 +1,79 @@
<template>
- <!--富文本编辑器组件-->
- <el-row>
- <Editor v-model="content" :editor-config="editorConfig" />
- </el-row>
+ <el-form ref="DescriptionFormRef" :model="formData" :rules="rules" label-width="120px">
+ <!--富文本编辑器组件-->
+ <el-form-item label="商品详情" prop="description">
+ <Editor v-model:modelValue="formData.description" />
+ </el-form-item>
+ </el-form>
</template>
<script lang="ts" name="DescriptionForm" setup>
+import type { SpuType } from '@/api/mall/product/management/type'
import { Editor } from '@/components/Editor'
-import { createEditorConfig } from '@/views/mp/draft/editor-config'
-// TODO 模拟参数
-const content = ref('')
-const editorConfig = createEditorConfig('', 1)
+import { PropType } from 'vue'
+import { copyValueToTarget } from '@/utils/object'
+
+const message = useMessage() // 消息弹窗
+const props = defineProps({
+ propFormData: {
+ type: Object as PropType<SpuType>,
+ default: () => {}
+ }
+})
+const DescriptionFormRef = ref() // 表单Ref
+const formData = ref<SpuType>({
+ description: '' // 商品详情
+})
+/**
+ * 富文本编辑器如果输入过再清空会有残留，需再重置一次
+ */
+watch(
+ () => formData.value.description,
+ (newValue) => {
+ if ('<p><br></p>' === newValue) {
+ formData.value.description = ''
+ }
+ },
+ {
+ deep: true,
+ immediate: true
+ }
+)
+// 表单规则
+const rules = reactive({
+ description: [required]
+})
+/**
+ * 将传进来的值赋值给formData
+ */
+watch(
+ () => props.propFormData,
+ (data) => {
+ if (!data) return
+ copyValueToTarget(formData.value, data)
+ },
+ {
+ deep: true,
+ immediate: true
+ }
+)
+const emit = defineEmits(['update:activeName'])
+/**
+ * 表单校验
+ */
+const validate = async () => {
+ // 校验表单
+ if (!DescriptionFormRef) return
+ return unref(DescriptionFormRef).validate((valid) => {
+ if (!valid) {
+ message.warning('商品详情为完善!!')
+ emit('update:activeName', 'description')
+ // 目的截断之后的校验
+ throw new Error('商品详情为完善!!')
+ } else {
+ // 校验通过更新数据
+ Object.assign(props.propFormData, formData.value)
+ }
+ })
+}
+defineExpose({ validate })
</script>
diff --git a/src/views/mall/product/management/components/OtherSettingsForm.vue b/src/views/mall/product/management/components/OtherSettingsForm.vue
index e8152883..155a0aba 100644
--- a/src/views/mall/product/management/components/OtherSettingsForm.vue
+++ b/src/views/mall/product/management/components/OtherSettingsForm.vue
@@ -1,19 +1,19 @@
<template>
- <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
+ <el-form ref="OtherSettingsFormRef" :model="formData" :rules="rules" label-width="120px">
<el-row>
<el-col :span="24">
<el-col :span="8">
- <el-form-item label="商品排序">
+ <el-form-item label="商品排序" prop="sort">
<el-input-number v-model="formData.sort" :min="0" />
</el-form-item>
</el-col>
<el-col :span="8">
- <el-form-item label="赠送积分">
+ <el-form-item label="赠送积分" prop="giveIntegral">
<el-input-number v-model="formData.giveIntegral" :min="0" />
</el-form-item>
</el-col>
<el-col :span="8">
- <el-form-item label="虚拟销量">
+ <el-form-item label="虚拟销量" prop="virtualSalesCount">
<el-input-number
v-model="formData.virtualSalesCount"
:min="0"
@@ -50,6 +50,18 @@
</template>
<script lang="ts" name="OtherSettingsForm" setup>
// 商品推荐
+import type { SpuType } from '@/api/mall/product/management/type'
+import { PropType } from 'vue'
+import { copyValueToTarget } from '@/utils/object'
+
+const message = useMessage() // 消息弹窗
+const props = defineProps({
+ propFormData: {
+ type: Object as PropType<SpuType>,
+ default: () => {}
+ }
+})
+// 商品推荐选项
const recommend = [
{ name: '是否热卖', value: 'recommendHot' },
{ name: '是否优惠', value: 'recommendBenefit' },
@@ -57,7 +69,9 @@ const recommend = [
{ name: '是否新品', value: 'recommendNew' },
{ name: '是否优品', value: 'recommendGood' }
]
-const checkboxGroup = ref<string[]>([])
+// 选中推荐选项
+const checkboxGroup = ref<string[]>(['recommendHot'])
+// 选择商品后赋值
const onChangeGroup = () => {
checkboxGroup.value.includes('recommendHot')
? (formData.value.recommendHot = true)
@@ -75,20 +89,63 @@ const onChangeGroup = () => {
? (formData.value.recommendGood = true)
: (formData.value.recommendGood = false)
}
-const formRef = ref()
-const formData = ref({
- sort: '',
- giveIntegral: 666,
- virtualSalesCount: 565656,
- recommendHot: false,
- recommendBenefit: false,
- recommendBest: false,
- recommendNew: false,
- recommendGood: false
+const OtherSettingsFormRef = ref() // 表单Ref
+// 表单数据
+const formData = ref<SpuType>({
+ sort: 12, // 商品排序
+ giveIntegral: 666, // 赠送积分
+ virtualSalesCount: 565656, // 虚拟销量
+ recommendHot: false, // 是否热卖
+ recommendBenefit: false, // 是否优惠
+ recommendBest: false, // 是否精品
+ recommendNew: false, // 是否新品
+ recommendGood: false // 是否优品
})
+// 表单规则
const rules = reactive({
sort: [required],
giveIntegral: [required],
virtualSalesCount: [required]
})
+/**
+ * 将传进来的值赋值给formData
+ */
+watch(
+ () => props.propFormData,
+ (data) => {
+ if (!data) return
+ copyValueToTarget(formData.value, data)
+ checkboxGroup.value = []
+ formData.value.recommendHot ? checkboxGroup.value.push('recommendHot') : ''
+ formData.value.recommendBenefit ? checkboxGroup.value.push('recommendBenefit') : ''
+ formData.value.recommendBest ? checkboxGroup.value.push('recommendBest') : ''
+ formData.value.recommendNew ? checkboxGroup.value.push('recommendNew') : ''
+ formData.value.recommendGood ? checkboxGroup.value.push('recommendGood') : ''
+ },
+ {
+ deep: true,
+ immediate: true
+ }
+)
+const emit = defineEmits(['update:activeName'])
+/**
+ * 表单校验
+ */
+const validate = async () => {
+ // 校验表单
+ if (!OtherSettingsFormRef) return
+ return await unref(OtherSettingsFormRef).validate((valid) => {
+ if (!valid) {
+ message.warning('商品其他设置未完善！！')
+ emit('update:activeName', 'otherSettings')
+ // 目的截断之后的校验
+ throw new Error('商品其他设置未完善！！')
+ } else {
+ // 校验通过更新数据
+ Object.assign(props.propFormData, formData.value)
+ }
+ })
+}
+
+defineExpose({ validate })
</script>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index bbcd8a2c..755b9415 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -2,36 +2,36 @@
<!-- 搜索工作栏 -->
<ContentWrap>
<el-form
- class="-mb-15px"
- :model="queryParams"
ref="queryFormRef"
:inline="true"
+ :model="queryParams"
+ class="-mb-15px"
label-width="68px"
>
<el-form-item label="字典名称" prop="name">
<el-input
v-model="queryParams.name"
- placeholder="请输入字典名称"
- clearable
- @keyup.enter="handleQuery"
class="!w-240px"
+ clearable
+ placeholder="请输入字典名称"
+ @keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="字典类型" prop="type">
<el-input
v-model="queryParams.type"
- placeholder="请输入字典类型"
- clearable
- @keyup.enter="handleQuery"
class="!w-240px"
+ clearable
+ placeholder="请输入字典类型"
+ @keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
- placeholder="请选择字典状态"
- clearable
class="!w-240px"
+ clearable
+ placeholder="请选择字典状态"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
@@ -44,33 +44,41 @@
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
- value-format="yyyy-MM-dd HH:mm:ss"
- type="daterange"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
+ end-placeholder="结束日期"
+ start-placeholder="开始日期"
+ type="daterange"
+ value-format="yyyy-MM-dd HH:mm:ss"
/>
</el-form-item>
<el-form-item>
- <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
- <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
- <el-button
- type="primary"
- plain
- @click="openForm('create')"
- v-hasPermi="['system:dict:create']"
- >
- <Icon icon="ep:plus" class="mr-5px" /> 新增
+ <el-button @click="handleQuery">
+ <Icon class="mr-5px" icon="ep:search" />
+ 搜索
+ </el-button>
+ <el-button @click="resetQuery">
+ <Icon class="mr-5px" icon="ep:refresh" />
+ 重置
</el-button>
<el-button
- type="success"
+ v-hasPermi="['system:dict:create']"
plain
- @click="handleExport"
- :loading="exportLoading"
- v-hasPermi="['system:dict:export']"
+ type="primary"
+ @click="openForm('create')"
>
- <Icon icon="ep:download" class="mr-5px" /> 导出
+ <Icon class="mr-5px" icon="ep:plus" />
+ 新增
+ </el-button>
+ <el-button
+ v-hasPermi="['system:dict:export']"
+ :loading="exportLoading"
+ plain
+ type="success"
+ @click="handleExport"
+ >
+ <Icon class="mr-5px" icon="ep:download" />
+ 导出
</el-button>
</el-form-item>
</el-form>
@@ -79,29 +87,29 @@
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
- <el-table-column label="字典编号" align="center" prop="id" />
- <el-table-column label="字典名称" align="center" prop="name" show-overflow-tooltip />
- <el-table-column label="字典类型" align="center" prop="type" width="300" />
- <el-table-column label="状态" align="center" prop="status">
+ <el-table-column align="center" label="字典编号" prop="id" />
+ <el-table-column align="center" label="字典名称" prop="name" show-overflow-tooltip />
+ <el-table-column align="center" label="字典类型" prop="type" width="300" />
+ <el-table-column align="center" label="状态" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
- <el-table-column label="备注" align="center" prop="remark" />
+ <el-table-column align="center" label="备注" prop="remark" />
<el-table-column
- label="创建时间"
:formatter="dateFormatter"
align="center"
+ label="创建时间"
prop="createTime"
width="180"
/>
- <el-table-column label="操作" align="center">
+ <el-table-column align="center" label="操作">
<template #default="scope">
<el-button
+ v-hasPermi="['system:dict:update']"
link
type="primary"
@click="openForm('update', scope.row.id)"
- v-hasPermi="['system:dict:update']"
>
修改
</el-button>
@@ -109,10 +117,10 @@
<el-button link type="primary">数据</el-button>
</router-link>
<el-button
+ v-hasPermi="['system:dict:delete']"
link
type="danger"
@click="handleDelete(scope.row.id)"
- v-hasPermi="['system:dict:delete']"
>
删除
</el-button>
@@ -121,9 +129,9 @@
</el-table>
<!-- 分页 -->
<Pagination
- :total="total"
- v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
+ v-model:page="queryParams.pageNo"
+ :total="total"
@pagination="getList"
/>
</ContentWrap>
@@ -132,12 +140,13 @@
<DictTypeForm ref="formRef" @success="getList" />
</template>
-<script setup lang="ts" name="SystemDictType">
-import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+<script lang="ts" name="SystemDictType" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as DictTypeApi from '@/api/system/dict/dict.type'
import DictTypeForm from './DictTypeForm.vue'
import download from '@/utils/download'
+
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化