InstantRetailAdmin/src/views/user-management/user-reviews/index.vue

<script setup lang="tsx">
import { NButton, NPopconfirm, NTag } from 'naive-ui';
import { commonStatus } from '@/constants/business';
import {
  fetchAddHotSearch,
  fetchDeleteHotSearch,
  fetchGethotSearch,
  fetchUpdateHotSearch
} from '@/service/api/operation/search';
import { useTable } from '@/components/zt/Table/hooks/useTable';
import { useModalFrom } from '@/components/zt/ModalForm/hooks/useModalForm';
import { $t } from '@/locales';

const columns: NaiveUI.TableColumn<Api.operation.HotSearch>[] = [
  {
    key: 'searchName',
    title: '用户昵称',
    align: 'center'
  },
  {
    key: 'type',
    title: '评分',
    align: 'center',
    render: row => {
      const arr = ['关键词', '热门搜索词', '推荐搜索词'];
      return arr[row.type - 1] || '暂无数据';
    }
  },
  {
    key: 'reachName1',
    title: '评价内容',
    align: 'center'
  },
  {
    key: 'jumpUrl',
    title: '图片',
    align: 'center'
  },
  {
    key: 'effectiveTime',
    title: '审核状态',
    align: 'center'
  },
  {
    key: 'endTime',
    title: '截止时间',
    align: 'center'
  },
  {
    key: 'status',
    title: '回复内容',
    align: 'center',
    render: row => {
      const tagMap: Record<Api.Common.commonStatus, NaiveUI.ThemeColor> = {
        1: 'success',
        0: 'warning'
      };
      const status = row.status || 0;
      const label = $t(commonStatus[status]);
      return <NTag type={tagMap[status]}>{label}</NTag>;
    }
  },
  {
    key: 'endTime',
    title: '手机号',
    align: 'center'
  },
  {
    key: 'endTime',
    title: '提交时间',
    align: 'center'
  },
  {
    key: 'endTime',
    title: '回复时间',
    align: 'center'
  },
  {
    key: 'endTime',
    title: '商品信息',
    align: 'center'
  },
  {
    key: 'endTime',
    title: '门店名称',
    align: 'center'
  }
];

const [registerTable, { refresh, setTableLoading }] = useTable({
  searchFormConfig: {
    schemas: [
      {
        field: 'searchName',
        label: '名称',
        component: 'NInput'
      }
    ],
    inline: false,
    size: 'small',
    labelPlacement: 'left',
    isFull: false
  },
  tableConfig: {
    keyField: 'id',
    title: '用户评论列表',
    showAddButton: true
  }
});

async function handleDelete(row: Api.operation.HotSearch) {
  setTableLoading(true);
  await fetchDeleteHotSearch([row.id]);
  refresh();
}
const [registerModalForm, { openModal, closeModal, getFieldsValue, setFieldsValue }] = useModalFrom({
  modalConfig: {
    title: '跳转 ',
    width: 700,
    isShowHeaderText: true,
    height: 500
  },
  formConfig: {
    schemas: [
      {
        label: '',
        field: 'id',
        component: 'NInput',
        show: false
      },
      {
        field: 'searchName',
        label: '名称',
        component: 'NInput',
        required: true
      },
      {
        field: 'type',
        label: '类型',
        component: 'NSelect',
        componentProps: {
          options: [
            {
              label: '关键词',
              value: 1
            },
            {
              label: '热门搜索词',
              value: 2
            },
            {
              label: '推荐搜索词',
              value: 3
            }
          ]
        },
        required: true
      },
      {
        field: 'reachName',
        label: '落地页名称',
        component: 'NInput'
      },
      {
        field: 'jumpUrl',
        label: '跳转参数',
        component: 'NInput'
      },
      {
        field: 'effectiveTime',
        label: '有效时间',
        component: 'NDatePicker',
        required: true,
        componentProps: {
          type: 'date',
          valueFormat: 'yyyy-MM-dd'
        }
      },
      {
        field: 'endTime',
        label: '截止时间',
        component: 'NDatePicker',
        required: true,
        componentProps: {
          type: 'date',
          valueFormat: 'yyyy-MM-dd'
        }
      },
      {
        field: 'status',
        label: '状态',
        component: 'NSwitch',
        required: true,
        defaultValue: 1,
        componentProps: {
          checkedValue: 1,
          uncheckedValue: 0
        }
      }
    ],
    gridProps: {
      cols: '1'
    },
    labelWidth: 120
  }
});
async function handleSubmit() {
  const form = await getFieldsValue();
  if (form.id) {
    await fetchUpdateHotSearch(form);
  } else {
    await fetchAddHotSearch(form);
  }
  closeModal();
  refresh();
}

async function edit(row: Api.operation.HotSearch) {
  openModal(row);
  setFieldsValue(row);
}
</script>

<template>
  <LayoutTable>
    <ZTable :columns="columns" :api="fetchGethotSearch" @register="registerTable" @add="openModal">
      <template #op="{ row }">
        <NButton size="small" ghost type="primary" @click="edit(row)">编辑</NButton>
        <NPopconfirm @positive-click="handleDelete(row)">
          <template #trigger>
            <NButton size="small" type="error" ghost>删除</NButton>
          </template>
          确定删除吗？
        </NPopconfirm>
      </template>
    </ZTable>
    <BasicModelForm @register-modal-form="registerModalForm" @submit-form="handleSubmit"></BasicModelForm>
  </LayoutTable>
</template>

<style scoped></style>