产品分类树形

src/api/product-material/product/index.js

@@ -1,9 +1,9 @@
 import request from '@/router/axios'
 
 // 视频说明书-分页
-export function videoInfoPage(data = {}) {
+export function productTree(data = {}) {
   return request({
-    url: '/api/service-video/videoInfo/page',
+    url: '/api/basics/classify/tree',
     method: 'post',
     data: data,
   })

src/views/product-material/product/tree.vue

@@ -1,212 +1,235 @@
 <template>
-	<el-card shadow="always" :body-style="{ padding: '20px' }">
-		<el-tree
-			:data="treeData"
-			:props="defaultProps"
-			@node-click="handleNodeClick"
-		>
-			<span class="custom-tree-node" slot-scope="{ node, data }">
-				<span>{{ node.label }}</span>
-				<span>
-					<el-button type="text" size="mini" @click="() => add(data)">
-						{{ $t('add') }}
-					</el-button>
-					<el-button
-						type="text"
-						size="mini"
-						@click="() => treeDelete(data)"
-					>
-						{{ $t('delete') }}
-					</el-button>
-				</span>
-			</span>
-		</el-tree>
-		<el-dialog
-			:title="
-				treeModalType == 'add'
-					? $t('management.video_setting.treeModalAdd')
-					: $t('management.video_setting.treeModalEdit')
-			"
-			v-if="treeModal"
-			:visible.sync="treeModal"
-			width="30%"
-		>
-			<test
-				ref="form"
-				v-model="treeParams"
-				:form-config="treeForm"
-				:insideRules="treeRules"
-			></test>
-		</el-dialog>
-	</el-card>
+  <el-card shadow="always" :body-style="{ padding: '20px' }">
+    <div class="tree-title">
+      <div class="bk"></div>
+      <div>产品分类</div>
+    </div>
+    <div class="search">
+      <el-input
+        placeholder="输入关键字进行过滤"
+        v-model="filterText"
+        size="small"
+      >
+      </el-input>
+    </div>
+    <el-tree
+      :data="treeData"
+      :props="defaultProps"
+      default-expand-all
+      @node-click="handleNodeClick"
+      :filter-node-method="filterNode"
+    >
+      <span class="custom-tree-node" slot-scope="{ node, data }">
+        <span>{{ node.label }}</span>
+        <span>
+          <i class="el-icon-edit"></i>
+          <i
+            class="el-icon-circle-plus-outline"
+            style="margin-left: 10px"
+            @click="() => add(data)"
+          ></i>
+          <i class="el-icon-delete" style="margin-left: 10px"></i>
+          <!-- <el-button type="text" size="mini" @click="() => add(data)">
+            {{ $t("add") }}
+          </el-button>
+          <el-button type="text" size="mini" @click="() => treeDelete(data)">
+            {{ $t("delete") }}
+          </el-button> -->
+        </span>
+      </span>
+    </el-tree>
+    <el-dialog
+      :title="
+        treeModalType == 'add'
+          ? $t('product-material.product.treeModalAdd')
+          : $t('product-material.product.treeModalEdit')
+      "
+      v-if="treeModal"
+      :visible.sync="treeModal"
+      width="40%"
+    >
+      <test
+        ref="form"
+        v-model="treeParams"
+        :form-config="treeForm"
+        :insideRules="treeRules"
+      ></test>
+    </el-dialog>
+  </el-card>
 </template>
 
 <script>
-import * as API from '@/api/management/video-setting.js'
-import test from '@/components/form-test/index.vue'
+// import * as API from "@/api/management/video-setting.js";
+import * as API from "@/api/product-material/product/index.js";
+import test from "@/components/form-test/index.vue";
 export default {
-	components: { test },
-	name: 'tree',
-	data() {
-		return {
-			treeParams: {
-				type: null,
-				parentId: null,
-				name: null,
-			},
-			treeForm: {
-				loadingStatus: false,
-				type: {
-					label: this.$t('management.video_setting.type'),
-					type: 'select',
-					data: [
-						{
-							label: this.$t(
-								'management.video_setting.treeAddType1'
-							),
-							type: 1,
-						},
-						{
-							label: this.$t(
-								'management.video_setting.treeAddType2'
-							),
-							type: 2,
-						},
-					],
-					keyName: 'type',
-					labelName: 'label',
-				},
-				name: {
-					label: this.$t('management.video_setting.treeName'),
-					type: 'input',
-				},
-				otherButton: {
-					align: 'center',
-					list: [
-						{
-							name: this.$t('cancelText'),
-							methodsText: 'cancel',
-							cancel: () => {
-								this.open = false
-							},
-						},
-						{
-							name: this.$t('submitText'),
-							methodsText: 'submit',
-							type: 'primary',
-							submit: () => {
-								this.treehandleSubmit()
-							},
-						},
-					],
-				},
-			},
-			treeRules: {
-				type: [
-					{
-						required: true,
-						message: this.$t('management.video_setting.typeRules'),
-						trigger: 'change',
-					},
-				],
-				name: [
-					{
-						required: true,
-						message: this.$t('management.video_setting.nameRules'),
-						trigger: 'change',
-					},
-				],
-			},
-			treeModalType: 'add',
-			treeModal: false,
-			defaultProps: {
-				children: 'children',
-				label: 'name',
-			},
-			treeData: [],
-			treeQuery: {
-				type: null,
-				name: null,
-			},
-		}
-	},
-	created() {
-		this.getTree()
-	},
-	methods: {
-		resetForm(formName) {
-			
-		},
-		treehandleSubmit() {
-			this.$refs.form.$refs['form'].validate((valid) => {
-				if (valid) {
-					this.treeForm.loadingStatus = true
-					API.videoClassifyAdd(this.treeParams).then(
-						() => {
-							this.msgSuccess(this.$t('addSuccess'))
-							this.treeModal = false
-							this.treeForm.loadingStatus = false
-							this.getTree()
-						},
-						(err) => {
-							console.log('tdaDeviceAdd: ' + err)
-							this.treeForm.loadingStatus = false
-						}
-					)
-				}
-			})
-		},
-		handleNodeClick(row) {
-			this.$emit('treeClick',row);
-		},
-		getTree() {
-			this.loading = true
-			API.videoClassifyTree(this.treeQuery).then(
-				(res) => {
-					console.log(res)
-					this.treeData = res.data.data
-					this.loading = false
-				},
-				(err) => {
-					console.log('tdaDevicePage: ' + err)
-					this.loading = false
-				}
-			)
-		},
-		add(row) {
-			console.log(this.$refs.form)
-			this.treeParams = {
-				type: null,
-				parentId: null,
-				name: null,
-			}
-			this.treeParams.parentId = row.id
-			this.treeModal = true
-		},
-		treeDelete(row) {
-			console.log(row)
-			this.$confirm(this.$t('askDeleteData'), {
-				confirmButtonText: this.$t('submitText'),
-				cancelButtonText: this.$t('cancelText'),
-				type: 'warning',
-			}).then(() => {
-				API.videoClassifyDetele({ id: row.id }).then(() => {
-					this.msgSuccess(this.$t('deleteSuccess'))
-					this.getTree()
-				})
-			})
-		},
-	},
-}
+  components: { test },
+  name: "tree",
+  data() {
+    return {
+      filterText: "",
+      treeParams: {
+        type: null,
+        parentId: null,
+        name: null,
+      },
+      treeForm: {
+        loadingStatus: false,
+
+        name: {
+          label: this.$t("product-material.product.treeName"),
+          type: "input",
+        },
+        // otherButton: {
+        //   align: "center",
+        //   list: [
+        //     {
+        //       name: this.$t("cancelText"),
+        //       methodsText: "cancel",
+        //       cancel: () => {
+        //         this.open = false;
+        //       },
+        //     },
+        //     {
+        //       name: this.$t("submitText"),
+        //       methodsText: "submit",
+        //       type: "primary",
+        //       submit: () => {
+        //         this.treehandleSubmit();
+        //       },
+        //     },
+        //   ],
+        // },
+      },
+      treeRules: {
+        type: [
+          {
+            required: true,
+            message: this.$t("management.video_setting.typeRules"),
+            trigger: "change",
+          },
+        ],
+        name: [
+          {
+            required: true,
+            message: this.$t("management.video_setting.nameRules"),
+            trigger: "change",
+          },
+        ],
+      },
+      treeModalType: "add",
+      treeModal: false,
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      treeData: [],
+      treeQuery: {
+        type: "1",
+        name: "",
+      },
+    };
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+  created() {
+    this.getTree();
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    resetForm(formName) {},
+    treehandleSubmit() {
+      this.$refs.form.$refs["form"].validate((valid) => {
+        if (valid) {
+          this.treeForm.loadingStatus = true;
+          API.videoClassifyAdd(this.treeParams).then(
+            () => {
+              this.msgSuccess(this.$t("addSuccess"));
+              this.treeModal = false;
+              this.treeForm.loadingStatus = false;
+              this.getTree();
+            },
+            (err) => {
+              console.log("tdaDeviceAdd: " + err);
+              this.treeForm.loadingStatus = false;
+            }
+          );
+        }
+      });
+    },
+    handleNodeClick(row) {
+      this.$emit("treeClick", row);
+    },
+    getTree() {
+      this.loading = true;
+      API.productTree(this.treeQuery).then(
+        (res) => {
+          console.log(res, "ss");
+          this.treeData = res.data.data;
+          this.loading = false;
+        },
+        (err) => {
+          console.log("tdaDevicePage: " + err);
+          this.loading = false;
+        }
+      );
+    },
+    add(row) {
+      console.log(this.$refs.form);
+      this.treeParams = {
+        type: "1",
+        parentId: null,
+        name: null,
+      };
+      this.treeParams.parentId = row.id;
+      this.treeModal = true;
+    },
+    // treeDelete(row) {
+    //   console.log(row);
+    //   this.$confirm(this.$t("askDeleteData"), {
+    //     confirmButtonText: this.$t("submitText"),
+    //     cancelButtonText: this.$t("cancelText"),
+    //     type: "warning",
+    //   }).then(() => {
+    //     API.videoClassifyDetele({ id: row.id }).then(() => {
+    //       this.msgSuccess(this.$t("deleteSuccess"));
+    //       this.getTree();
+    //     });
+    //   });
+    // },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .custom-tree-node {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	font-size: 14px;
-	padding-right: 8px;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+.tree-title {
+  display: flex;
+  font-size: 14px;
+  margin-bottom: 15px;
+  height: 20px;
+  line-height: 20px;
+  .bk {
+    width: 4px;
+    height: 100%;
+    background: rgba(0, 132, 255, 1);
+    margin-right: 8px;
+  }
+}
+.search {
+  margin-bottom: 10px;
 }
 </style>