feat: 拉取代码

2025-02-18 18:47:15 +08:00
parent c9a88abade
commit dea89010e9
26 changed files with 1429 additions and 162 deletions
--- a/src/views/product/categoryconfig/content.ts
+++ b/src/views/product/categoryconfig/content.ts
@@ -25,7 +25,10 @@ const contentConfig: IContentConfig<UserPageQuery> = {
  //   return UserAPI.import(1, file);
  // },
  // exportAction: UserAPI.export,
-  modifyAction: UserAPI.update,
+  modifyAction: function (params) {
+    let obj = { sort: "1", ...params }
+    return UserAPI.update(obj);
+  },

  // importTemplate: UserAPI.downloadTemplate,
  // importsAction(data) {
--- a/src/views/product/index.vue
+++ b/src/views/product/index.vue
@@ -1 +1,163 @@
-<template>123</template>
+<template>
+  <div class="app-container">
+    <!-- 列表 -->
+    <template v-if="isA">
+      <!-- 搜索 -->
+      <page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
+        @reset-click="handleResetClick" />
+      <!-- 顶部数据 -->
+      <Statistics></Statistics>
+      <!-- 列表 -->
+      <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 #status="scope">
+          <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+          </el-tag>
+        </template>
+        <template #gender="scope">
+          <DictLabel v-model="scope.row[scope.prop]" code="gender" />
+        </template>
+        <template #mobile="scope">
+          <el-text>{{ scope.row[scope.prop] }}</el-text>
+          <copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
+        </template>
+      </page-content>
+
+      <!-- 新增 -->
+      <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
+        <template #gender="scope">
+          <Dict v-model="scope.formData[scope.prop]" code="gender" />
+        </template>
+      </page-modal>
+
+      <!-- 编辑 -->
+      <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
+        <template #gender="scope">
+          <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
+        </template>
+      </page-modal>
+
+      <!-- 库存预警设置 -->
+      <MyDialog ref="myDialogRef" @confirm="confirm" title="修改库存预警">
+        <el-form :model="form">
+          <el-form-item label="库存预警" label-width="">
+            <el-input-number v-model="form.num" label="描述文字"></el-input-number>
+          </el-form-item>
+        </el-form>
+      </MyDialog>
+    </template>
+    <template v-else>
+      <page-content ref="contentRef" :content-config="contentConfig2" @operat-click="handleOperatClick">
+        <template #status="scope">
+          <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+          </el-tag>
+        </template>
+      </page-content>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UserAPI from "@/api/product/index";
+import type { IObject, IOperatData } from "@/components/CURD/types";
+import usePage from "@/components/CURD/usePage";
+import addModalConfig from "./indexconfig/add";
+import contentConfig from "./indexconfig/content";
+import contentConfig2 from "./indexconfig/content2";
+import editModalConfig from "./indexconfig/edit";
+import searchConfig from "./indexconfig/search";
+import MyDialog from "@/components/mycomponents/myDialog.vue";
+import Statistics from "./indexconfig/statistics.vue";
+
+const {
+  searchRef,
+  contentRef,
+  addModalRef,
+  editModalRef,
+  handleQueryClick,
+  handleResetClick,
+  // handleEditClick,
+  handleSubmitClick,
+  handleExportClick,
+  handleSearchClick,
+  handleFilterChange,
+} = usePage();
+
+const form = reactive({
+  num: '',
+})
+// 新增
+async function handleAddClick() {
+  addModalRef.value?.setModalVisible();
+  // 加载上级规格下拉数据源 
+  addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
+  // 加载角色下拉数据源
+  // addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
+}
+// 编辑
+async function handleEditClick(row: IObject) {
+  editModalRef.value?.handleDisabled(false);
+  // 加载部门下拉数据源
+  editModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
+  // editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
+  // 加载角色下拉数据源
+  // editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
+  // 根据id获取数据进行填充
+  const data = await UserAPI.getunitinfo(row.id);
+  editModalRef.value?.setFormData(data);
+  editModalRef.value?.setModalVisible();
+
+}
+const myDialogRef = ref(null)
+// 其他工具栏
+function handleToolbarClick(name: string) {
+  console.log(name);
+  if (name === "custom1") {
+    // ElMessage.success("点击了自定义1按钮");
+    myDialogRef.value.open()
+  }
+}
+function confirm() {
+  console.log(form, 'debug')
+}
+// 其他操作列
+async function handleOperatClick(data: IOperatData) {
+  console.log(data);
+  // 重置密码
+  if (data.name === "reset_pwd") {
+    ElMessageBox.prompt("请输入用户「" + data.row.username + "」的新密码", "重置密码", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+    }).then(({ value }) => {
+      if (!value || value.length < 6) {
+        ElMessage.warning("密码至少需要6位字符，请重新输入");
+        return false;
+      }
+      // UserAPI.resetPassword(data.row.id, value).then(() => {
+      //   ElMessage.success("密码重置成功，新密码是：" + value);
+      // });
+    });
+  } else if (data.name === "detail") {
+    // 禁用表单编辑
+    editModalRef.value?.handleDisabled(true);
+    // 打开抽屉
+    editModalRef.value?.setModalVisible();
+    // 修改抽屉标题
+    editModalConfig.drawer = { ...editModalConfig.drawer, title: "用户详情" };
+    // 加载部门下拉数据源
+    // editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
+    // 加载角色下拉数据源
+    // editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
+    // 根据id获取数据进行填充
+    // const formData = await UserAPI.getFormData(data.row.id);
+    // 设置表单数据
+    // editModalRef.value?.setFormData(formData);
+  }
+}
+
+// 切换示例
+const isA = ref(true);
+</script>
--- a/src/views/product/indexconfig/add.ts
+++ b/src/views/product/indexconfig/add.ts
@@ -1,4 +1,4 @@
-import UserAPI from "@/api/product/commonUnits";
+import UserAPI from "@/api/product/index";

 import type { IModalConfig } from "@/components/CURD/types";

--- a/src/views/product/indexconfig/content.ts
+++ b/src/views/product/indexconfig/content.ts
@@ -1,4 +1,4 @@
-import UserAPI from "@/api/product/commonUnits";
+import UserAPI from "@/api/product/index";
 import RoleAPI from "@/api/system/role";
 import type { UserPageQuery } from "@/api/system/user";
 import type { IContentConfig } from "@/components/CURD/types";
@@ -15,9 +15,12 @@ const contentConfig: IContentConfig<UserPageQuery> = {
    pageSize: 20,
    pageSizes: [10, 20, 30, 50],
  },
-  indexActionData: { name: "", orderBy: "name asc" },
+  indexActionData: {},
  indexAction: function (params) {
-    return UserAPI.getPage(params);
+    let obj = { ...params, ...params.times }
+    obj.createBeginTime = obj['0']
+    obj.createEndTime = obj['1']
+    return UserAPI.getPage(obj);
  },
  deleteAction: UserAPI.deleteByIds,
  // importAction(file) {
@@ -39,11 +42,35 @@ const contentConfig: IContentConfig<UserPageQuery> = {
  pk: "id",
  toolbar: [
    "add",
+    //  {
+    //   icon: "edit",
+    //   text: "库存预警",
+    //   type: "info",
+    //   name: "custom1",
+    //   auth: "import",
+    // },
  ],
  cols: [
    // { type: "selection", width: 50, align: "center" },
-    { label: "单位名称", align: "center", prop: "name" },
-    { label: "排序", align: "center", prop: "id" },
+    { label: "封面图", align: "center", prop: "coverImg", templet: "image" },
+    { label: "分类名称", align: "center", prop: "categoryName", },
+    { label: "售价", align: "center", prop: "id" },
+    { label: "规格名称", align: "center", prop: "specName" },
+    { label: "库存", align: "center", prop: "stockNumber" },
+    { label: "耗材信息", align: "center", prop: "id" },
+    {
+      label: "上架",
+      align: "center",
+      prop: "isSale",
+      templet: "switch",
+      slotName: "status",
+    }, {
+      label: "是否启用库存",
+      align: "center",
+      prop: "isStock",
+      templet: "switch",
+      slotName: "status",
+    },
    {
      label: "操作",
      align: "center",
--- a/src/views/product/indexconfig/edit.ts
+++ b/src/views/product/indexconfig/edit.ts
@@ -1,4 +1,4 @@
-import UserAPI from "@/api/product/commonUnits";
+import UserAPI from "@/api/product/index";

 import type { IModalConfig } from "@/components/CURD/types";
 import { DeviceEnum } from "@/enums/DeviceEnum";
--- a/src/views/product/indexconfig/search.ts
+++ b/src/views/product/indexconfig/search.ts
@@ -1,4 +1,6 @@
-import DeptAPI from "@/api/system/dept";
+import UserAPI from "@/api/product/productclassification";
+import DeptAPI from "@/api/product/specificationsconfig";
+
 import type { ISearchConfig } from "@/components/CURD/types";

 const searchConfig: ISearchConfig = {
@@ -6,38 +8,92 @@ const searchConfig: ISearchConfig = {
  formItems: [
    {
      type: "input",
-      label: "单位名称",
+      label: "商品名称",
      prop: "name",
      attrs: {
-        placeholder: "请输入单位名称",
+        placeholder: "请输入商品名称",
        clearable: true,
        style: {
          width: "200px",
        },
      },
    },
-    // {
-    //   type: "tree-select",
-    //   label: "设备类型",
-    //   prop: "deptId",
-    //   attrs: {
-    //     placeholder: "请选择设备类型",
-    //     data: [],
-    //     filterable: true,
-    //     "check-strictly": true,
-    //     "render-after-expand": false,
-    //     clearable: true,
-    //     style: {
-    //       width: "150px",
-    //     },
-    //   },
-    //   async initFn(formItem) {
-    //     formItem.attrs.data = await DeptAPI.getOptions();
-    //     // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem
-    //     // this.attrs!.data = await DeptAPI.getOptions();
-    //   },
-    // },
+    {
+      type: "select",
+      label: "商品分类",
+      prop: "categoryId",
+      attrs: {
+        placeholder: "请选择商品分类",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+      options: [],
+      async initFn(formItem) {
+        formItem.options = await UserAPI.getList();
+      },
+    },

+    {
+      type: "tree-select",
+      label: "商品规格",
+      prop: "specId",
+      attrs: {
+        placeholder: "请选择商品规格",
+        data: [],
+        filterable: true,
+        "check-strictly": true,
+        "render-after-expand": false,
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+        props: {
+          label: 'name', // 指定节点显示的文本字段为 name
+          value: 'id'    // 指定节点的值字段为 id
+        }
+      },
+      async initFn(formItem) {
+        formItem.attrs.data = await DeptAPI.getPage();
+        // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem
+        // this.attrs!.data = await DeptAPI.getOptions();
+      },
+    },
+    {
+      type: "date-picker",
+      label: "日期",
+      prop: "times",
+      attrs: {
+        type: "daterange",
+        "range-separator": "~",
+        "start-placeholder": "开始时间",
+        "end-placeholder": "截止时间",
+        "value-format": "YYYY-MM-DD",
+        style: {
+          width: "240px",
+        },
+      }
+    },
+    {
+      type: "select",
+      label: "排序",
+      prop: "orderBy",
+      attrs: {
+        placeholder: "请选择商品分类",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+      options: [{
+        label: "创建时间",
+        value: "create_time asc"
+      }, {
+        label: "数量由低到高",
+        value: "stock_number asc"
+      }],
+    },
  ],
 };

--- a/src/views/product/indexconfig/statistics.vue
+++ b/src/views/product/indexconfig/statistics.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="statistics">
+    <div style="width:  200px;">
+      <el-icon class="iconStyle">
+        <PieChart />
+      </el-icon>
+      <span>商品种树</span>
+      <span>{{ datas.totalRow }}</span>
+    </div>
+    <div style="width:  300px;">
+      <el-icon class="iconStyle">
+        <SortUp />
+      </el-icon>
+      <div>
+        <div><span>增加数量：</span><span>0</span></div>
+        <div style="display: flex;">
+          <div>
+            <span>手动增加：</span><span>0</span>
+          </div>
+          <span style="margin: 0 20px;color: #ccc;">|</span>
+          <div>
+            <span>退货：</span><span>0</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="width:  400px;">
+      <el-icon class="iconStyle">
+        <SortDown />
+      </el-icon>
+      <div>
+        <div><span>减少数量：</span><span>0</span></div>
+        <div style="display: flex;">
+          <div>
+            <span>手动减少：</span><span>0</span>
+          </div>
+          <span style="margin: 0 20px;color: #ccc;">|</span>
+          <div>
+            <span>销售量：</span><span>0</span>
+          </div>
+          <span style="margin: 0 20px;color: #ccc;">|</span>
+          <div>
+            <span>报损：</span><span>0</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import UserAPI from "@/api/product/index";
+import { onMounted, reactive } from "vue";
+onMounted(() => {
+  getPage();
+})
+let datas = reactive({
+  totalRow: 0
+})
+async function getPage() {
+  let res = await UserAPI.getPage();
+  datas.totalRow = res.totalRow
+}
+</script>
+
+
+<style scoped lang="scss">
+.statistics {
+  border: 1px solid #e4e7ed;
+  background-color: #fff;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  >div {
+    height: 80px;
+    background-color: #f4f9ff;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    padding: 20px;
+
+    .iconStyle {
+      background-color: #d4e9fe;
+      border-radius: 50%;
+      padding: 6px;
+      font-size: 36px;
+      color: #3f9eff;
+    }
+
+    span {
+      color: #666;
+      font-size: 14px;
+    }
+  }
+}
+</style>