feat: 拉取代码

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>