|
@@ -0,0 +1,466 @@
|
|
|
+<template>
|
|
|
+ <div class="product-management">
|
|
|
+ <!-- 左侧产品分类 -->
|
|
|
+ <div class="category-sidebar">
|
|
|
+ <div class="category-header">
|
|
|
+ <span>请选择产品分类</span>
|
|
|
+ <el-button type="primary" size="small" @click="handleAddCategory"
|
|
|
+ >新建分类</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-tree :data="categoryData" node-key="id" default-expand-all>
|
|
|
+ <span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
+ <span>{{ node.label }}</span>
|
|
|
+ <span class="operations">
|
|
|
+ <i class="el-icon-plus" @click="handleAdd(data)"></i>
|
|
|
+ <i class="el-icon-minus" @click="handleDelete(node, data)"></i>
|
|
|
+ <i class="el-icon-edit" @click="handleEdit(data)"></i>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧产品列表 -->
|
|
|
+ <div class="product-content">
|
|
|
+ <div class="content-header">
|
|
|
+ <!-- <div class="breadcrumb">首页—产品库—产品管理</div> -->
|
|
|
+ <div class="search-area">
|
|
|
+ <el-input
|
|
|
+ v-model="searchKeyword"
|
|
|
+ placeholder="请输入关键字搜索"
|
|
|
+ class="search-input"
|
|
|
+ >
|
|
|
+ <el-button slot="append" icon="el-icon-search"></el-button>
|
|
|
+ </el-input>
|
|
|
+ <el-button type="primary" @click="handleAddProduct"
|
|
|
+ >新建产品</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-table :data="productList">
|
|
|
+ <el-table-column prop="oaNumber" label="OA编号" />
|
|
|
+ <el-table-column prop="productCode" label="产品编号" />
|
|
|
+ <el-table-column prop="productName" label="产品名称" />
|
|
|
+ <el-table-column prop="description" label="产品描述" />
|
|
|
+ <el-table-column prop="productType" label="产品型号" />
|
|
|
+ <el-table-column prop="length" label="长宽比" />
|
|
|
+ <el-table-column prop="resolution" label="刷新率" />
|
|
|
+ <el-table-column prop="screenMaterial" label="屏幕材质" />
|
|
|
+ <el-table-column label="操作" width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="mini" @click="handleEditProduct(scope.row)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="danger"
|
|
|
+ @click="handleDeleteProduct(scope.row)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 添加分页组件 -->
|
|
|
+ <div class="pagination-container">
|
|
|
+ <el-pagination
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="pagination.currentPage"
|
|
|
+ :page-size="pagination.pageSize"
|
|
|
+ :total="pagination.total"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 添加分类对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="dialogType === 'add' ? '新增分类' : '编辑分类'"
|
|
|
+ :visible.sync="categoryDialogVisible"
|
|
|
+ width="500px"
|
|
|
+ >
|
|
|
+ <el-form :model="categoryForm" label-width="80px">
|
|
|
+ <el-form-item label="分类名称">
|
|
|
+ <el-input
|
|
|
+ v-model="categoryForm.label"
|
|
|
+ placeholder="请输入分类名称"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer">
|
|
|
+ <el-button @click="categoryDialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="handleCategorySubmit"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 添加产品对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="dialogType === 'add' ? '新增产品' : '编辑产品'"
|
|
|
+ :visible.sync="productDialogVisible"
|
|
|
+ width="650px"
|
|
|
+ >
|
|
|
+ <el-form :model="productForm" label-width="100px">
|
|
|
+ <el-form-item label="OA编号">
|
|
|
+ <el-input v-model="productForm.oaNumber"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="产品编号">
|
|
|
+ <el-input v-model="productForm.productCode"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="产品名称">
|
|
|
+ <el-input v-model="productForm.productName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="产品描述">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ v-model="productForm.description"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="产品型号">
|
|
|
+ <el-input v-model="productForm.productType"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="长宽比">
|
|
|
+ <el-input v-model="productForm.length"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="刷新率">
|
|
|
+ <el-input v-model="productForm.resolution"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="屏幕材质">
|
|
|
+ <el-input v-model="productForm.screenMaterial"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer">
|
|
|
+ <el-button @click="productDialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="handleProductSubmit">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+export default {
|
|
|
+ name: "ProductManagement",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ searchKeyword: "",
|
|
|
+ categoryData: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ label: "LED产品",
|
|
|
+ children: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ label: "LCD产品",
|
|
|
+ children: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ label: "集成产品",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 31,
|
|
|
+ label: "集成产品A",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 32,
|
|
|
+ label: "集成产品B",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 33,
|
|
|
+ label: "集成产品C",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ productList: [
|
|
|
+ {
|
|
|
+ oaNumber: "12345668",
|
|
|
+ productCode: "DLP11443",
|
|
|
+ productName: "DLP高级拼接屏",
|
|
|
+ description: "",
|
|
|
+ productType: "",
|
|
|
+ length: "",
|
|
|
+ resolution: "",
|
|
|
+ screenMaterial: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // 添加对话框控制变量
|
|
|
+ categoryDialogVisible: false,
|
|
|
+ productDialogVisible: false,
|
|
|
+ dialogType: "add", // 'add' 或 'edit'
|
|
|
+
|
|
|
+ // 表单数据
|
|
|
+ categoryForm: {
|
|
|
+ label: "",
|
|
|
+ parentId: null,
|
|
|
+ },
|
|
|
+
|
|
|
+ productForm: {
|
|
|
+ oaNumber: "",
|
|
|
+ productCode: "",
|
|
|
+ productName: "",
|
|
|
+ description: "",
|
|
|
+ productType: "",
|
|
|
+ length: "",
|
|
|
+ resolution: "",
|
|
|
+ screenMaterial: "",
|
|
|
+ categoryId: null,
|
|
|
+ },
|
|
|
+
|
|
|
+ // 当前选中的分类
|
|
|
+ currentCategory: null,
|
|
|
+
|
|
|
+ // 分页参数
|
|
|
+ pagination: {
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.fetchCategoryList();
|
|
|
+ this.fetchProductList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取分类列表
|
|
|
+ async fetchCategoryList() {
|
|
|
+ try {
|
|
|
+ // const { data } = await this.$api.category.getList()
|
|
|
+ // this.categoryData = data
|
|
|
+ // 模拟API调用
|
|
|
+ console.log("获取分类列表");
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error("获取分类列表失败");
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取产品列表
|
|
|
+ async fetchProductList() {
|
|
|
+ try {
|
|
|
+ // const params = {
|
|
|
+ // categoryId: this.currentCategory?.id,
|
|
|
+ // keyword: this.searchKeyword,
|
|
|
+ // page: this.pagination.currentPage,
|
|
|
+ // pageSize: this.pagination.pageSize
|
|
|
+ // }
|
|
|
+ // const { data, total } = await this.$api.product.getList(params)
|
|
|
+ // this.productList = data
|
|
|
+ // this.pagination.total = total
|
|
|
+ // 模拟API调用
|
|
|
+ console.log("获取产品列表");
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error("获取产品列表失败");
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 分类相关方法
|
|
|
+ handleAddCategory() {
|
|
|
+ this.dialogType = "add";
|
|
|
+ this.categoryForm = { label: "", parentId: null };
|
|
|
+ this.categoryDialogVisible = true;
|
|
|
+ },
|
|
|
+ /* 新增产品分类 */
|
|
|
+ handleAdd(data) {
|
|
|
+ this.dialogType = "add";
|
|
|
+ this.categoryForm = { label: "", parentId: data.id };
|
|
|
+ this.categoryDialogVisible = true;
|
|
|
+ },
|
|
|
+ /* 编辑产品分类 */
|
|
|
+ handleEdit(data) {
|
|
|
+ this.dialogType = "edit";
|
|
|
+ this.categoryForm = { ...data };
|
|
|
+ this.categoryDialogVisible = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ async handleCategorySubmit() {
|
|
|
+ try {
|
|
|
+ if (!this.categoryForm.label.trim()) {
|
|
|
+ return this.$message.warning("请输入分类名称");
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.dialogType === "add") {
|
|
|
+ // await this.$api.category.create(this.categoryForm)
|
|
|
+ this.$message.success("添加分类成功");
|
|
|
+ } else {
|
|
|
+ // await this.$api.category.update(this.categoryForm)
|
|
|
+ this.$message.success("编辑分类成功");
|
|
|
+ }
|
|
|
+
|
|
|
+ this.categoryDialogVisible = false;
|
|
|
+ this.fetchCategoryList();
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error("操作失败");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /* 删除产品分类 */
|
|
|
+ async handleDelete(node, data) {
|
|
|
+ try {
|
|
|
+ await this.$confirm("确认删除该分类吗?删除后无法恢复", "提示", {
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+
|
|
|
+ // await this.$api.category.delete(data.id)
|
|
|
+ this.$message.success("删除成功");
|
|
|
+ this.fetchCategoryList();
|
|
|
+ } catch (error) {
|
|
|
+ if (error !== "cancel") {
|
|
|
+ this.$message.error("删除失败");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 产品相关方法
|
|
|
+ handleAddProduct() {
|
|
|
+ this.$router.push("ProductMent/newProduct/index")
|
|
|
+ /* this.dialogType = "add";
|
|
|
+ this.productForm = {
|
|
|
+ oaNumber: "",
|
|
|
+ productCode: "",
|
|
|
+ productName: "",
|
|
|
+ description: "",
|
|
|
+ productType: "",
|
|
|
+ length: "",
|
|
|
+ resolution: "",
|
|
|
+ screenMaterial: "",
|
|
|
+ categoryId: this.currentCategory?.id,
|
|
|
+ };
|
|
|
+ this.productDialogVisible = true; */
|
|
|
+ },
|
|
|
+ /* 编辑产品 */
|
|
|
+ handleEditProduct(row) {
|
|
|
+ this.dialogType = "edit";
|
|
|
+ this.productForm = { ...row };
|
|
|
+ this.productDialogVisible = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ async handleProductSubmit() {
|
|
|
+ try {
|
|
|
+ if (!this.productForm.productName.trim()) {
|
|
|
+ return this.$message.warning("请输入产品名称");
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.dialogType === "add") {
|
|
|
+ // await this.$api.product.create(this.productForm)
|
|
|
+ this.$message.success("添加产品成功");
|
|
|
+ } else {
|
|
|
+ // await this.$api.product.update(this.productForm)
|
|
|
+ this.$message.success("编辑产品成功");
|
|
|
+ }
|
|
|
+
|
|
|
+ this.productDialogVisible = false;
|
|
|
+ this.fetchProductList();
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error("操作失败");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /* 删除产品列表 */
|
|
|
+ async handleDeleteProduct(row) {
|
|
|
+ try {
|
|
|
+ await this.$confirm("确认删除该产品吗?删除后无法恢复", "提示", {
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+
|
|
|
+ // await this.$api.product.delete(row.id)
|
|
|
+ this.$message.success("删除成功");
|
|
|
+ this.fetchProductList();
|
|
|
+ } catch (error) {
|
|
|
+ if (error !== "cancel") {
|
|
|
+ this.$message.error("删除失败");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 搜索和分页
|
|
|
+ handleSearch() {
|
|
|
+ this.pagination.currentPage = 1;
|
|
|
+ this.fetchProductList();
|
|
|
+ },
|
|
|
+
|
|
|
+ handleCurrentChange(page) {
|
|
|
+ this.pagination.currentPage = page;
|
|
|
+ this.fetchProductList();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 分类选择
|
|
|
+ handleNodeClick(data) {
|
|
|
+ this.currentCategory = data;
|
|
|
+ this.pagination.currentPage = 1;
|
|
|
+ this.fetchProductList();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+ <style scoped>
|
|
|
+.product-management {
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.category-sidebar {
|
|
|
+ width: 250px;
|
|
|
+ border-right: 1px solid #ebeef5;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.category-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.product-content {
|
|
|
+ flex: 1;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.content-header {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.search-area {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.search-input {
|
|
|
+ width: 300px;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-tree-node {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-right: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.operations {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-tree-node:hover .operations {
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+
|
|
|
+.operations i {
|
|
|
+ margin-left: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.breadcrumb {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+/* .pagination-container {
|
|
|
+ margin-top: 20px;
|
|
|
+ text-align: right;
|
|
|
+} */
|
|
|
+</style>
|