feat(ui): web移动端初始化

new-ui/projects/admin/src/views/Product/ProductContainer.vue

@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import { getList, save, deleting, setStatus } from "./api";
+import { ref } from "vue";
+import ProductForm from "./ProductForm.vue";
+import useCustomFormPopup from "@/composables/useCustomFormPopup";
+import { Message } from "@arco-design/web-vue";
+import SimpleTable from "@/components/SimpleTable/SimpleTable.vue";
+import { dateFormat } from "@chatgpt-plus/packages/utils";
+// table 配置
+const columns = [
+  {
+    title: "产品名称",
+    dataIndex: "name",
+  },
+  {
+    title: "产品价格",
+    dataIndex: "price",
+  },
+  {
+    title: "优惠金额",
+    dataIndex: "discount",
+  },
+  {
+    title: "有效期（天）",
+    dataIndex: "days",
+  },
+  {
+    title: "对话次数",
+    dataIndex: "calls",
+  },
+  {
+    title: "绘图次数",
+    dataIndex: "img_calls",
+  },
+  {
+    title: "销量",
+    dataIndex: "sales",
+  },
+  {
+    title: "启用状态",
+    dataIndex: "enabled",
+    slotName: "status",
+    align: "center",
+    width: 100,
+  },
+  {
+    title: "更新时间",
+    dataIndex: "updated_at",
+    width: 180,
+    render: ({ record }) => {
+      return dateFormat(record.updated_at);
+    },
+  },
+  {
+    title: "操作",
+    slotName: "action",
+    width: 120,
+    fixed: "right",
+  },
+];
+
+// 数据
+const tableData = ref([]);
+const getData = () => {
+  getList().then(({ code, data }) => {
+    if (code === 0) {
+      tableData.value = data;
+    }
+  });
+};
+getData();
+
+//  新增编辑
+const popup = useCustomFormPopup(ProductForm, save, {
+  popupProps: (arg) => ({ title: arg[0].record ? "编辑产品" : "新增产品" }),
+});
+
+// 删除
+const handleDelete = ({ id }, reload) => {
+  deleting(id).then(({ code }) => {
+    if (code === 0) {
+      Message.success("操作成功");
+      reload();
+    }
+  });
+};
+
+// 状态
+const handleStatusChange = ({ value, record, reload }) => {
+  setStatus({
+    id: record.id,
+    enabled: value,
+  }).then(({ code }) => {
+    if (code === 0) {
+      Message.success("操作成功");
+      reload();
+    }
+  });
+};
+</script>
+<template>
+  <SimpleTable :columns="columns" :request="getList">
+    <template #action="{ record, reload }">
+      <a-link @click="popup({ record, reload })">编辑</a-link>
+      <a-popconfirm content="确定删除？" @ok="handleDelete(record, reload)">
+        <a-link status="danger">删除</a-link>
+      </a-popconfirm>
+    </template>
+    <template #header="{ reload }">
+      <a-button @click="popup({ reload })" size="small" type="primary"
+        ><template #icon> <icon-plus /> </template>新增
+      </a-button>
+    </template>
+    <template #status="{ record, reload }">
+      <a-switch
+        v-model="record.enabled"
+        @change="
+          (value) => {
+            handleStatusChange({ value, record, reload });
+          }
+        "
+      />
+    </template>
+  </SimpleTable>
+</template>