njzscloud-dispose-web/src/pages/gds/goods/Goods.vue

<template>
  <FormPage
    ref="formPage"
    :action-column="actionColumn"
    :left-tools="leftTools"
    :default-search-form="{createTimes:[undefined,undefined]}"
    :paging="paging">
    <template #searchFormItem="{ searchForm }">
      <ElFormItem label="产品分类">
        <ADropTable v-model="searchForm.goodsCategoryId as string" :columns="dropTableColumns" :loader="dropTableLoader" display-field="categoryName"/>
      </ElFormItem>
      <ElFormItem label="产品编码">
        <ElInput v-model="searchForm.sn" placeholder="产品编码"/>
      </ElFormItem>
      <ElFormItem label="产品名称">
        <ElInput v-model="searchForm.goodsName" placeholder="产品名称"/>
      </ElFormItem>
      <ElFormItem label="创建时间">
        <ADtPicker v-model="searchForm.createTimes" :change-handler="research"/>
      </ElFormItem>
    </template>
    <template #simpleSearchFormItem="{ searchForm }">
      <ElFormItem label="产品编码">
        <ElInput v-model="searchForm.sn" placeholder="产品编码"/>
      </ElFormItem>
      <ElFormItem label="产品名称">
        <ElInput v-model="searchForm.goodsName" placeholder="产品名称"/>
      </ElFormItem>
    </template>
    <template #columns>
      <ElTableColumn label="产品编码" prop="sn"/>
      <ElTableColumn label="图片" width="100">
        <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="goodsName"/>
      <ElTableColumn label="规格" prop="specParams"/>

      <ElTableColumn label="是否可用" prop="canuse">
        <template #default="{row}">
          <ElSwitch v-model="row.canuse" @change="enableGoodsHandler($event as boolean,row.id)"/>
        </template>
      </ElTableColumn>
      <ElTableColumn label="备注" prop="memo"/>
      <ElTableColumn label="创建时间" prop="createTime" width="160"/>
    </template>
    <GoodsForm ref="goodsForm" @edit-succ="editSuccHandler"/>
  </FormPage>
</template>

<script lang="ts" setup>
import GoodsApi from '@/pages/gds/goods/goods-api.ts'
import GoodsForm from '@/pages/gds/goods/GoodsForm.vue'
import AppApi from '@/common/app/app-api.ts'
import FormPage, {
  type ActionColumnType,
  type ToolType,
} from '@/components/page/FormPage.vue'
import type { ComponentExposed } from 'vue-component-type-helpers'
import ADropTable from '@/components/a-drop-table/ADropTable.vue'
import GoodsCategoryApi from '@/pages/gds/goods-category/goods-category-api.ts'
import ADtPicker from '@/components/a-dt-picker/ADtPicker.vue'

const goodsFormIns = useTemplateRef<InstanceType<typeof GoodsForm>>('goodsForm')
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')

function editSuccHandler() {
  formPageIns.value?.doSearch()
}

const dropTableColumns = [
  {
    label: '业务类型',
    prop: 'bizTypeTxt',
  },
  {
    label: '分类名称',
    prop: 'categoryName',
  },
]
const dropTableLoader = (param: GoodsCategoryTypes.SearchGoodsCategoryParam) => {
  return GoodsCategoryApi.paging(param).then(res => res.data)
}

const actionColumn = reactive<ActionColumnType<GoodsTypes.SearchGoodsResult>>({
  tableActions: [
    {
      tooltip: '编辑',
      icon: 'Edit',
      action({row}) {
        goodsFormIns.value?.open(row)
      },
    },
    {
      icon: 'Delete',
      loading: false,
      type: 'danger',
      tooltip: '删除',
      confirm: {
        title: '是否删除当前数据',
      },
      action({row}) {
        return GoodsApi.del([ row.id! ])
          .then(() => {
            ElMessage.success('删除成功')
            return true
          })
      },
    },
  ],
})
const leftTools: ToolType[] = [
  {
    icon: 'Plus',
    label: '新建',
    action() {
      goodsFormIns.value?.open()
    },
  },
]

function research() {
  formPageIns.value?.doSearch()
}

function paging(param: GoodsTypes.SearchGoodsParam) {
  return GoodsApi.paging({
    ...param,
    createTimeStart: param.createTimes[0],
    createTimeEnd: param.createTimes[1],
  })
}

function enableGoodsHandler(enable: boolean, id: string) {
  GoodsApi.enable({enable, id})
    .then(() => {
      ElMessage.success(enable ? '启用成功' : '禁用成功')
      editSuccHandler()
    })
}
</script>