cashier-web/src/views/notifications/index.vue

<template>
  <div class="app-container">
    <!-- 搜索 -->
    <page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
      @reset-click="handleResetClick" />
    <!-- 列表 -->
    <page-content ref="contentRef" :content-config="contentConfig" @add-click="handleAddClick"
      @edit-click="handleEditClick" @export-click="handleExportClick" @search-click="handleSearchClick"
      @toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange">
      <!-- <template #type="scope">
        <span v-if="scope.row.type == 0">商品新增</span>
        <span v-if="scope.row.type == 1">商品编辑</span>
        <span v-if="scope.row.type == 2">耗材新增</span>
        <span v-if="scope.row.type == 3">耗材编辑</span>
      </template> -->
      <template #content="scope">
        <span>{{ scope.row.title }}</span>
        <!-- <span v-if="scope.row.type == 1">商品编辑</span>
        <span v-if="scope.row.type == 2">耗材新增</span>
        <span v-if="scope.row.type == 3">耗材编辑</span> -->
        <div v-for="(item, index) in matchedProducts(scope.row.content)" :key="index">
          <span v-for="i in item.map" :key="i.id" style="color: #6161f7" @click="handleContentClick(item, i)">
            {{ i.name }},
          </span>
        </div>

        请及时确认
      </template>
      <template #isRead="scope">
        <el-tag :type="scope.row.isRead == 1 ? 'success' : 'info'">
          {{ scope.row.isRead == 1 ? "已读" : "未读" }}
        </el-tag>
      </template>
      <template #operate="scope">
        <div style="
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          ">
          <div v-if="scope.row.isRead != 1">
            <el-button link type="primary" @click="refAddHaocaiTakinShow(scope.row, '')">
              设为已读
            </el-button>
          </div>
          <el-button link type="primary" @click="refAddHaocaiTakinShow(scope.row, 'delete')">
            删除
          </el-button>
        </div>
      </template>
    </page-content>

    <!-- 新增 -->
    <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick" />

    <!-- 编辑 -->
    <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick" />
  </div>
</template>

<script setup lang="ts">
import VersionApi from "@/api/system/version";
import type { IObject, IOperatData } from "@/components/CURD/types";
import usePage from "@/components/CURD/usePage";
import addModalConfig from "./config/add";
import contentConfig from "./config/content";
import editModalConfig from "./config/edit";
import searchConfig from "./config/search";
import Api from "@/api/notifications";
import router from "@/router";
import { log } from "console";

const {
  searchRef,
  contentRef,
  addModalRef,
  editModalRef,
  handleQueryClick,
  handleResetClick,
  // handleAddClick,
  // handleEditClick,
  handleSubmitClick,
  handleExportClick,
  handleSearchClick,
  handleFilterChange,
} = usePage();

// 新增
async function handleAddClick() {
  addModalRef.value?.setModalVisible();
  // addModalConfig.formItems[2]!.attrs!.data =
}
// 编辑
async function handleEditClick(row: IObject) {
  editModalRef.value?.handleDisabled(false);
  editModalRef.value?.setModalVisible();
  // 根据id获取数据进行填充
  editModalRef.value?.setFormData({ ...row });
}
// 其他工具栏
async function handleToolbarClick(name: string) {
  if (name === "mark_all_read") {
    await Api.edit({
      noticeIdList: [],
    });
  }
  if (name == "Clear_Read") {
    await Api.syncNoticeclear();
  }
  contentRef.value?.fetchPageData();
}

const matchedProducts = (data: string) => {
  return JSON.parse(data);
};

//删除
async function refAddHaocaiTakinShow(item: any, type: string) {
  if (type === "delete") {
    await Api.delete(item.id);
  } else {
    await Api.edit({
      noticeIdList: [item.id],
    });
  }
  contentRef.value?.fetchPageData();
}

// 其他操作列
async function handleOperatClick(data: IOperatData) {
  console.log(data);
}
// Handle content click
function handleContentClick(scope: any, item: any) {
  if (scope.type == "product") {
    router.push({
      path: "/product/addgoods",
      query: { goods_id: item.id },
    });
  }
  if (scope.type == "consInfo") {
    router.push({
      path: "/inventory/consumables",
      query: { conName: item.name },
    });
  }
}
</script>