REVIEW 商品属性

This commit is contained in:
YunaiV 2023-04-02 01:25:31 +08:00
parent 616243a0ab
commit 5a5202d483
4 changed files with 44 additions and 31 deletions

View File

@ -61,7 +61,7 @@ export const getProperty = (id: number): Promise<PropertyVO> => {
}
// 获得属性项分页
export const getPropertyPage = (params: PageParam & any) => {
export const getPropertyPage = (params: PageParam) => {
return request.get({ url: '/product/property/page', params })
}

View File

@ -14,6 +14,7 @@
placeholder="请输入分类名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item>

View File

@ -24,7 +24,6 @@
</template>
<script setup lang="ts">
import * as PropertyApi from '@/api/mall/product/property'
const { t } = useI18n() //
const message = useMessage() //
@ -32,18 +31,17 @@ const modelVisible = ref(false) // 弹窗的是否展示
const modelTitle = ref('') //
const formLoading = ref(false) // 12
const formType = ref('') // create - update -
const defaultFormData: PropertyApi.PropertyVO = {
const formData = ref({
id: undefined,
name: ''
}
const formData = ref({ ...defaultFormData })
})
const formRules = reactive({
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
})
const formRef = ref() // Ref
/** 打开弹窗 */
const openModal = async (type: string, id?: number) => {
const open = async (type: string, id?: number) => {
modelVisible.value = true
modelTitle.value = t('action.' + type)
formType.value = type
@ -58,7 +56,7 @@ const openModal = async (type: string, id?: number) => {
}
}
}
defineExpose({ openModal }) // openModal
defineExpose({ open }) // open
/** 提交表单 */
const emit = defineEmits(['success']) // success
@ -88,7 +86,10 @@ const submitForm = async () => {
/** 重置表单 */
const resetForm = () => {
formData.value = { ...defaultFormData }
formData.value = {
id: undefined,
name: ''
}
formRef.value?.resetFields()
}
</script>

View File

@ -1,13 +1,20 @@
<template>
<content-wrap>
<!-- 搜索工作栏 -->
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
<ContentWrap>
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
@ -15,31 +22,32 @@
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</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" @click="openModal('create')" v-hasPermi="['infra:config:create']">
<el-button
plain
type="primary"
@click="openForm('create')"
v-hasPermi="['product:property:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<el-table v-loading="loading" :data="list" align="center">
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="id" />
<el-table-column label="名称" align="center" :show-overflow-tooltip="true">
<template #default="scope">
<router-link :to="'/property/value/' + scope.row.id" class="link-type">
<span>{{ scope.row.name }}</span>
</router-link>
</template>
</el-table-column>
<el-table-column label="名称" align="center" />
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
<el-table-column
label="创建时间"
@ -53,16 +61,19 @@
<el-button
link
type="primary"
@click="openModal('update', scope.row.id)"
v-hasPermi="['infra:config:update']"
@click="openForm('update', scope.row.id)"
v-hasPermi="['product:property:update']"
>
编辑
</el-button>
<el-button link type="primary">
<router-link :to="'/property/value/' + scope.row.id">属性值</router-link>
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['infra:config:delete']"
v-hasPermi="['product:property:delete']"
>
删除
</el-button>
@ -76,15 +87,15 @@
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</content-wrap>
</ContentWrap>
<!-- 表单弹窗添加/修改 -->
<property-form ref="modalRef" @success="getList" />
<PropertyForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts" name="Config">
import { dateFormatter } from '@/utils/formatTime'
import * as PropertyApi from '@/api/mall/product/property'
import PropertyForm from './form.vue'
import PropertyForm from './PropertyForm.vue'
const message = useMessage() //
const { t } = useI18n() //
@ -124,9 +135,9 @@ const resetQuery = () => {
}
/** 添加/修改操作 */
const modalRef = ref()
const openModal = (type: string, id?: number) => {
modalRef.value.openModal(type, id)
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */