njzscloud-dispose-web/src/pages/gds/goods-category/GoodsCategory.vue

119 lines
4.1 KiB
Vue

<template>
<FormPage
ref="formPage"
:action-column="actionColumn"
:left-tools="leftTools"
:default-search-form="{createTimes:[undefined,undefined]}"
:paging="paging">
<template #searchFormItem="{ searchForm }">
<ElFormItem label="业务类型">
<ElSelect v-model="searchForm.bizType" clearable placeholder="业务类型" @change="research">
<ElOption v-for="item in bizType" :key="item.val" :label="item.txt" :value="item.val"/>
</ElSelect>
</ElFormItem>
<ElFormItem label="编码">
<ElInput v-model="searchForm.sn" clearable placeholder="编码" @clear="research"/>
</ElFormItem>
<ElFormItem label="分类名称">
<ElInput v-model="searchForm.categoryName" clearable placeholder="分类名称" @clear="research"/>
</ElFormItem>
<ElFormItem label="创建时间">
<ADtPicker v-model="searchForm.createTimes" :change-handler="research"/>
</ElFormItem>
</template>
<template #simpleSearchFormItem="{ searchForm }">
<ElFormItem style="min-width: 200px">
<ElSelect v-model="searchForm.bizType" clearable placeholder="业务类型" @change="research">
<ElOption v-for="item in bizType" :key="item.val" :label="item.txt" :value="item.val"/>
</ElSelect>
</ElFormItem>
<ElFormItem>
<ElInput v-model="searchForm.sn" clearable placeholder="编码" @clear="research"/>
</ElFormItem>
<ElFormItem>
<ElInput v-model="searchForm.categoryName" clearable placeholder="分类名称" @clear="research"/>
</ElFormItem>
</template>
<template #columns>
<ElTableColumn label="图片" prop="picture">
<template #default="{ row }">
<el-image :preview-src-list="[AppApi.fileUrl(row.picture)]" :src="AppApi.fileUrl(row.picture)" preview-teleported show-progress style="width: 32px; height: 32px"/>
</template>
</ElTableColumn>
<ElTableColumn label="业务类型" prop="bizTypeTxt"/>
<ElTableColumn label="编码" prop="sn"/>
<ElTableColumn label="分类名称" prop="categoryName"/>
<ElTableColumn label="备注" prop="memo"/>
<ElTableColumn label="创建时间" prop="createTime"/>
</template>
<GoodsCategoryForm ref="goodsCategoryForm" :research="research"/>
</FormPage>
</template>
<script lang="ts" setup>
import type { ComponentExposed } from 'vue-component-type-helpers'
import GoodsCategoryApi from '@/pages/gds/goods-category/goods-category-api.ts'
import GoodsCategoryForm from '@/pages/gds/goods-category/GoodsCategoryForm.vue'
import AppApi from '@/common/app/app-api.ts'
import FormPage from '@/components/page/FormPage.vue'
import type {
ActionColumnType,
ToolType,
} from '@/components/page/a-page-type.ts'
import ADtPicker from '@/components/a-dt-picker/ADtPicker.vue'
import { bizType } from '@/pages/gds/goods-category/constants.ts'
const goodsCategoryFormIns = useTemplateRef<InstanceType<typeof GoodsCategoryForm>>('goodsCategoryForm')
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
const leftTools: ToolType[] = [
{
icon: 'Plus',
label: '新建',
action() {
goodsCategoryFormIns.value?.open()
},
},
]
const actionColumn = reactive<ActionColumnType<GoodsCategoryTypes.SearchGoodsCategoryResult>>({
tableActions: [
{
tooltip: '编辑',
icon: 'Edit',
action({row}) {
goodsCategoryFormIns.value?.open(row)
},
},
{
icon: 'Delete',
loading: false,
type: 'danger',
tooltip: '删除',
confirm: {
title: '是否删除当前数据',
},
action({row}) {
return GoodsCategoryApi.del([ row.id! ])
.then(() => {
ElMessage.success('删除成功')
return true
})
},
},
],
})
function research() {
formPageIns.value?.doSearch()
}
function paging(param: GoodsCategoryTypes.SearchGoodsCategoryParam) {
return GoodsCategoryApi.paging({
bizType: param.bizType,
categoryName: param.categoryName,
createTimeStart: param.createTimes?.[0],
createTimeEnd: param.createTimes?.[1],
})
}
</script>