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 }) return request.get({ url: '/product/property/page', params })
} }

View File

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

View File

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

View File

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