submit

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

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

src/router/page/index.js

@@ -162,6 +162,19 @@ export default [
     ],
   },
   {
+    path: '/product-material/product',
+    component: Layout,
+    redirect: '/product-material/product/index',
+    children: [
+      {
+        path: 'index',
+        name: '产品维护',
+        component: () => import(/* webpackChunkName: "page" */ '@/views/product-material/product/index'),
+        props: true,
+      },
+    ],
+  },
+  {
     path: '*',
     redirect: '/404',
   },

src/views/management/video-setting/index.vue

@@ -1,364 +1,423 @@
   <template>
-    <div class="video-setting">
-      <el-row :gutter="8">
-        <el-col :span="6">
-          
-          <tree @treeClick="reload"></tree>
-        </el-col>
-        <el-col :span="18">
-          <el-card class="box-card">
-            
-            <test ref="req" v-model="req" :form-config="queryForm"></test>
-            <el-table :data="tableList" v-loading="loading">
-              <!-- <el-table-column :label="$t('management.video_setting.videoUrl')" align="center" prop="videoUrl" /> -->
-              <el-table-column :label="$t('management.video_setting.title')" align="center" prop="title" />
-              <el-table-column :label="$t('management.video_setting.status')" align="center" prop="status" />
-              <el-table-column :label="$t('management.video_setting.duration')" align="center" prop="duration" width="120" />
-              <el-table-column :label="$t('management.video_setting.size')" align="center" prop="size" width="120" />
-              <el-table-column :label="$t('create_time')" align="center" prop="createTime" />
-              <el-table-column :label="$t('update_time')" align="center" prop="updateTime" width="120" />
-              <el-table-column :label="$t('operation')" align="center" width="200">
-                <template slot-scope="scope">
-                  <!-- <el-button type="text" @click="toView(scope.row)">{{ $t('toView') }} </el-button> -->
-                  <el-button type="text" @click="handleUpdate(scope.row)">{{ $t('edit') }} </el-button>
-                  <el-button type="text" @click="handleDelete(scope.row)">{{ $t('delete') }} </el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-            <by-table 
-              :data="tableList" 
-              :columns="columns"
-              :pageNum.sync="req.pageNum"
-              :pageSize.sync="req.pageSize"
-              :selectConfig="selectConfig"
-              :req="req"
-              :total="total">
-            </by-table>
-            <el-dialog title="添加设备" :visible.sync="open" width="30%">
-              <test ref="form" v-model="dialogParams" :form-config="dialogForm" :insideRules="dialogRules"></test>
-            </el-dialog>
-            <el-dialog title="预览" :visible.sync="viewModal" width="500px">
-              
-            </el-dialog>
-          </el-card>
-        </el-col>
-      </el-row>
-    </div>
-  </template>
+  <div class="video-setting">
+    <el-row :gutter="8">
+      <el-col :span="6">
+        <tree @treeClick="reload"></tree>
+      </el-col>
+      <el-col :span="18">
+        <el-card class="box-card">
+          <test ref="req" v-model="req" :form-config="queryForm"></test>
+          <el-table :data="tableList" v-loading="loading">
+            <!-- <el-table-column :label="$t('management.video_setting.videoUrl')" align="center" prop="videoUrl" /> -->
+            <el-table-column
+              :label="$t('management.video_setting.title')"
+              align="center"
+              prop="title"
+            />
+            <el-table-column
+              :label="$t('management.video_setting.status')"
+              align="center"
+              prop="status"
+            />
+            <el-table-column
+              :label="$t('management.video_setting.duration')"
+              align="center"
+              prop="duration"
+              width="120"
+            />
+            <el-table-column
+              :label="$t('management.video_setting.size')"
+              align="center"
+              prop="size"
+              width="120"
+            />
+            <el-table-column
+              :label="$t('create_time')"
+              align="center"
+              prop="createTime"
+            />
+            <el-table-column
+              :label="$t('update_time')"
+              align="center"
+              prop="updateTime"
+              width="120"
+            />
+            <el-table-column
+              :label="$t('operation')"
+              align="center"
+              width="200"
+            >
+              <template slot-scope="scope">
+                <!-- <el-button type="text" @click="toView(scope.row)">{{ $t('toView') }} </el-button> -->
+                <el-button type="text" @click="handleUpdate(scope.row)"
+                  >{{ $t("edit") }}
+                </el-button>
+                <el-button type="text" @click="handleDelete(scope.row)"
+                  >{{ $t("delete") }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <by-table
+            :data="tableList"
+            :columns="columns"
+            :pageNum.sync="req.pageNum"
+            :pageSize.sync="req.pageSize"
+            :selectConfig="selectConfig"
+            :req="req"
+            :total="total"
+          >
+          </by-table>
+          <el-dialog title="添加设备" :visible.sync="open" width="30%">
+            <test
+              ref="form"
+              v-model="dialogParams"
+              :form-config="dialogForm"
+              :insideRules="dialogRules"
+            ></test>
+          </el-dialog>
+          <el-dialog title="预览" :visible.sync="viewModal" width="500px">
+          </el-dialog>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
   <script>
-  import * as API from '@/api/management/video-setting.js'
-  import * as APISelect from '@/api/Internet-of-things/select.js'
-  import test from '@/components/form-test/index.vue'
-  import byTable from '@/components/by-table/index.js'
-  import tree from './tree.vue'
-  export default {
-    name: 'equipment-management',
-    components: { test,tree,byTable },
-    data() {
-      return {
-        viewModal:false,
-        req: {
-          pageNum: 1,
-          pageSize: 10,
-          keyword: '1231',
-          tdaApplicationId: '',
-          tdaProductId: '',
+import * as API from "@/api/management/video-setting.js";
+import * as APISelect from "@/api/Internet-of-things/select.js";
+import test from "@/components/form-test/index.vue";
+import byTable from "@/components/by-table/index.js";
+import tree from "./tree.vue";
+export default {
+  name: "equipment-management",
+  components: { test, tree, byTable },
+  data() {
+    return {
+      viewModal: false,
+      req: {
+        pageNum: 1,
+        pageSize: 10,
+        keyword: "1231",
+        tdaApplicationId: "",
+        tdaProductId: "",
+      },
+      selectConfig: [
+        {
+          label: "合同状态",
+          prop: "tdaProductId",
+          data: [
+            {
+              label: "已关闭",
+              value: "123",
+            },
+          ],
         },
-        selectConfig:[
-          {
-            label:"合同状态",
-            prop:"tdaProductId",
-            data:[
-              {
-                label:"已关闭",
-                value:"123"
-              }
-            ],
-          },
-          {
-            label:"合同状态",
-            prop:"tdaApplicationId",
-            data:[
-              {
-                label:"已关闭",
-                value:"123"
-              }
-            ],
-          }
-        ],
-        columns:[
-          {
-            label: '姓名',
-            prop: 'title',
-            
-          },
-          {
-            label: '蓝字123',
-            prop: 'title',
-            textType:"blue",
-          },
-          {
-            label: '蓝字加下划线',
-            prop: 'title',
-            textType:"blueOrLine",
-          },
-          {
-            label: 'renderDemo',
-            prop: 'title',
-            width: 180,
-            render: (h, params) => {
-              return <div>131231223131231</div>
+        {
+          label: "合同状态",
+          prop: "tdaApplicationId",
+          data: [
+            {
+              label: "已关闭",
+              value: "123",
             },
+          ],
+        },
+      ],
+      columns: [
+        {
+          label: "姓名",
+          prop: "title",
+        },
+        {
+          label: "蓝字123",
+          prop: "title",
+          textType: "blue",
+        },
+        {
+          label: "蓝字加下划线",
+          prop: "title",
+          textType: "blueOrLine",
+        },
+        {
+          label: "renderDemo",
+          prop: "title",
+          width: 180,
+          render: (h, params) => {
+            return <div>131231223131231</div>;
           },
-          {
-            label: '姓名',
-            prop: 'title',
-            actions:[
-              {
-                text:"保存",
-                type:"text",
-                disabled:true,
-                style:{
-                  color:"red",
-                },
-                fn:(row)=>{
-                  console.log(row)
-                }
+        },
+        {
+          label: "姓名",
+          prop: "title",
+          actions: [
+            {
+              text: "保存",
+              type: "text",
+              disabled: true,
+              style: {
+                color: "red",
+              },
+              fn: (row) => {
+                console.log(row);
               },
-              {
-                text:"保存",
-                type:"text",
-                style:{
-                  color:"red",
-                },
-              }
-            ],
-          }
-        ],
-        
-        queryForm: {
-          keyword: {
-            label: this.$t('management.video_setting.keyword'),
-            span: 4,
-          },
-          operation: {
-            // 搜索按钮操作
-            query: () => {
-              this.req.pageNum = 1
-              this.getList()
             },
-            // 重置按钮操作
-            reset: () => {
-              this.$refs.req.reset()
-              this.getList()
+            {
+              text: "保存",
+              type: "text",
+              style: {
+                color: "red",
+              },
             },
+          ],
+        },
+      ],
+
+      queryForm: {
+        keyword: {
+          label: this.$t("management.video_setting.keyword"),
+          span: 4,
+        },
+        operation: {
+          // 搜索按钮操作
+          query: () => {
+            this.req.pageNum = 1;
+            this.getList();
           },
-          otherButton: {
-            list: [
-              {
-                name: this.$t('management.video_setting.addModal'),
-                methodsText: 'add',
-                type: 'primary',
-                add: () => {
-                  this.open = true
-                },
-              },
-            ],
+          // 重置按钮操作
+          reset: () => {
+            this.$refs.req.reset();
+            this.getList();
           },
         },
-        tableList: [],
-        total: 0,
-        loading: false,
-        open: false,
-        title: '',
-        dialogParams: {
-          fileInfoList: '',
-          videoClassifyId: '',
-          title: '',
-          richText: '',
+        otherButton: {
+          list: [
+            {
+              name: this.$t("management.video_setting.addModal"),
+              methodsText: "add",
+              type: "primary",
+              add: () => {
+                this.open = true;
+              },
+            },
+          ],
         },
-        dialogForm: {
-          loadingStatus: false,
-          title: {
-            label: '标题',
-            span: 1
+      },
+      tableList: [],
+      total: 0,
+      loading: false,
+      open: false,
+      title: "",
+      dialogParams: {
+        fileInfoList: "",
+        videoClassifyId: "",
+        title: "",
+        richText: "",
+      },
+      dialogForm: {
+        loadingStatus: false,
+        title: {
+          label: "标题",
+          span: 1,
+        },
+        fileInfoList: {
+          label: this.$t("分组名称"),
+          type: "uploads",
+          data: [],
+          tip: "最多选择6个视频文件",
+          accept: ".avi,.wmv,.mkv,.mp4,.mov",
+          fileList: [],
+        },
+        videoClassifyId: {
+          label: this.$t("分组名称"),
+          type: "cascader",
+          props: {
+            label: "name",
+            value: "id",
           },
-          fileInfoList: {
-            label: this.$t('分组名称'),
-            type: 'uploads',
-            data: [],
-            tip:"最多选择6个视频文件",
-            accept:".avi,.wmv,.mkv,.mp4,.mov",
-            fileList:[],
-          }, 
-          videoClassifyId: {
-            label: this.$t('分组名称'),
-            type: 'cascader',
-            props:{
-              label:"name",
-              value: 'id',
+          data: [],
+        },
+        richText: {
+          label: this.$t("图文说明书"),
+          type: "editor",
+        },
+
+        otherButton: {
+          align: "center",
+          list: [
+            {
+              name: this.$t("cancelText"),
+              methodsText: "cancel",
+              cancel: () => {
+                this.$refs.form.reset();
+                this.open = false;
+              },
+            },
+            {
+              name: this.$t("submitText"),
+              methodsText: "submit",
+              type: "primary",
+              submit: () => {
+                console.log(this.dialogParams);
+                this.handleSubmit();
+              },
             },
-            data: [],
+          ],
+        },
+      },
+      dialogRules: {
+        title: [
+          {
+            required: true,
+            message: this.$t("management.video_setting.deviceNameRules"),
+            trigger: "blur",
           },
-          richText:{
-            label: this.$t('图文说明书'),
-            type: 'editor',
+        ],
+        fileInfoList: [
+          {
+            required: true,
+            message: this.$t("management.video_setting.tdaApplicationIdRules"),
+            trigger: "change",
           },
-          
-          otherButton: {
-            align: 'center',
-            list: [
-              {
-                name: this.$t('cancelText'),
-                methodsText: 'cancel',
-                cancel: () => {
-                  this.$refs.form.reset()
-                  this.open = false
-                },
-              },
-              {
-                name: this.$t('submitText'),
-                methodsText: 'submit',
-                type: 'primary',
-                submit: () => {
-                  console.log(this.dialogParams)
-                  this.handleSubmit()
-                },
-              },
-            ],
+        ],
+        videoClassifyId: [
+          {
+            required: true,
+            message: this.$t("management.video_setting.tdaProductIdRules"),
+            trigger: "change",
           },
+        ],
+        richText: [
+          {
+            required: true,
+            message: this.$t("management.video_setting.deviceNameRules"),
+            trigger: "blur",
+          },
+        ],
+      },
+      modalType: "Add",
+    };
+  },
+  created() {
+    //this.getSelectList()
+  },
+  mounted() {
+    this.getList();
+    this.getTree();
+  },
+  watch: {},
+  methods: {
+    toView(e) {
+      console.log(e);
+      const v = this;
+    },
+    handleUpdate(row) {
+      const v = this;
+      API.videoInfoDetails({ id: row.id }).then(
+        (res) => {
+          for (let i = 0; i < res.data.data.fileInfoList.length; i++) {
+            const element = res.data.data.fileInfoList[i];
+            element.name = element.fileName;
+          }
+          this.dialogParams = res.data.data;
+          v.modalType = "Edit";
+          this.open = true;
         },
-        dialogRules: {
-          title: [{ required: true, message: this.$t('management.video_setting.deviceNameRules'), trigger: 'blur' }],
-          fileInfoList: [{ required: true, message: this.$t('management.video_setting.tdaApplicationIdRules'), trigger: 'change' }],
-          videoClassifyId: [{ required: true, message: this.$t('management.video_setting.tdaProductIdRules'), trigger: 'change' }],
-          richText: [{ required: true, message: this.$t('management.video_setting.deviceNameRules'), trigger: 'blur' }],
+        (err) => {
+          console.log("tdaDevicePage: " + err);
+        }
+      );
+    },
+    getTree() {
+      this.loading = true;
+      API.videoClassifyTree(this.treeQuery).then(
+        (res) => {
+          //this.dataInit(res.data.data)
+          this.dialogForm.videoClassifyId.data = res.data.data;
         },
-        modalType:'Add',
-        
-      }
+        (err) => {
+          console.log("tdaDevicePage: " + err);
+        }
+      );
     },
-    created() {
-      //this.getSelectList()
+    dataInit(_data) {
+      for (let i = 0; i < _data.length; i++) {
+        const element = _data[i];
+        element.label = element.name;
+        element.value = element.id;
+        if (element.children && element.children.length != 0) {
+          this.dataInit(element.children);
+        }
+      }
     },
-    mounted() {
-      this.getList()
-      this.getTree()
+    reload(row) {
+      console.log(row);
+      this.req.pageNum = 1;
+      this.req.classifyId = row.id;
+      this.getList();
     },
-    watch: {
-      
+    getList() {
+      this.loading = true;
+      API.videoInfoPage(this.req).then(
+        (res) => {
+          this.total = res.data.data.total;
+          this.tableList = res.data.data.records;
+          this.loading = false;
+        },
+        (err) => {
+          console.log("tdaDevicePage: " + err);
+          this.loading = false;
+        }
+      );
     },
-    methods: {
-      toView(e){
-        console.log(e)
-        const v = this
-      },
-      handleUpdate(row){
-        const v = this
-        API.videoInfoDetails({id:row.id}).then(
-          (res) => {
-            for (let i = 0; i < res.data.data.fileInfoList.length; i++) {
-              const element = res.data.data.fileInfoList[i];
-              element.name = element.fileName
+    handleSubmit() {
+      const v = this;
+      this.$refs.form.$refs["form"].validate((valid) => {
+        if (valid) {
+          this.dialogForm.loadingStatus = true;
+          API["videoInfo" + v.modalType](this.dialogParams).then(
+            () => {
+              this.msgSuccess(
+                this.$t(v.modalType == "Add" ? "addSuccess" : "editSuccess")
+              );
+              this.$refs.form.reset();
+              this.open = false;
+              this.dialogForm.loadingStatus = false;
+              this.getList();
+            },
+            (err) => {
+              console.log("tdaDeviceAdd: " + err);
+              this.dialogForm.loadingStatus = false;
             }
-           this.dialogParams = res.data.data
-           v.modalType = 'Edit'
-           this.open = true
-          },
-          (err) => {
-            console.log('tdaDevicePage: ' + err)
-          }
-        )
-      },
-      getTree() {
-			  this.loading = true
-        API.videoClassifyTree(this.treeQuery).then(
-          (res) => {
-            //this.dataInit(res.data.data)
-            this.dialogForm.videoClassifyId.data = res.data.data
-          },
-          (err) => {
-            console.log('tdaDevicePage: ' + err)
-          }
-        )
-      },
-      dataInit(_data){
-        for (let i = 0; i < _data.length; i++) {
-          const element = _data[i];
-          element.label = element.name
-          element.value = element.id
-          if(element.children && element.children.length != 0){
-            this.dataInit(element.children)
-          }
+          );
+          // } else {
+          //   setTimeout(() => {
+          //     const errorDiv = document.getElementsByClassName('is-error')
+          //     errorDiv[0].scrollIntoView()
+          //   }, 0)
         }
-      },
-      reload(row){
-        console.log(row)
-        this.req.pageNum = 1
-        this.req.classifyId = row.id
-        this.getList()
-      },
-      getList() {
-        this.loading = true
-        API.videoInfoPage(this.req).then(
-          (res) => {
-            this.total = res.data.data.total
-            this.tableList = res.data.data.records
-            this.loading = false
-          },
-          (err) => {
-            console.log('tdaDevicePage: ' + err)
-            this.loading = false
-          },
-        )
-      },
-      handleSubmit() {
-        const v = this
-        this.$refs.form.$refs['form'].validate((valid) => {
-          if (valid) {
-            this.dialogForm.loadingStatus = true
-            API['videoInfo' + v.modalType](this.dialogParams).then(
-              () => {
-                this.msgSuccess(this.$t(v.modalType == 'Add' ? 'addSuccess' : 'editSuccess'))
-                this.$refs.form.reset()
-                this.open = false
-                this.dialogForm.loadingStatus = false
-                this.getList()
-              },
-              (err) => {
-                console.log('tdaDeviceAdd: ' + err)
-                this.dialogForm.loadingStatus = false
-              },
-            )
-            // } else {
-            //   setTimeout(() => {
-            //     const errorDiv = document.getElementsByClassName('is-error')
-            //     errorDiv[0].scrollIntoView()
-            //   }, 0)
-          }
-        })
-      },
-      handleDelete(row) {
-        this.$confirm(this.$t('askDeleteData'), {
-          confirmButtonText: this.$t('submitText'),
-          cancelButtonText: this.$t('cancelText'),
-          type: 'warning',
-        }).then(() => {
-          API.videoInfoDelete({ id: row.id }).then(() => {
-            this.msgSuccess(this.$t('deleteSuccess'))
-            this.getList()
-          })
-        })
-      },
+      });
     },
-  }
-  </script>
+    handleDelete(row) {
+      this.$confirm(this.$t("askDeleteData"), {
+        confirmButtonText: this.$t("submitText"),
+        cancelButtonText: this.$t("cancelText"),
+        type: "warning",
+      }).then(() => {
+        API.videoInfoDelete({ id: row.id }).then(() => {
+          this.msgSuccess(this.$t("deleteSuccess"));
+          this.getList();
+        });
+      });
+    },
+  },
+};
+</script>
   
   <style lang="scss" scoped>
-
-  .box-card {
-    height: calc(100vh - 110px);
-    overflow-y: auto;
-  }
-  </style>
+.box-card {
+  height: calc(100vh - 110px);
+  overflow-y: auto;
+}
+</style>
   

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

@@ -0,0 +1,182 @@
+<template>
+  <div class="video-setting">
+    <el-row :gutter="8">
+      <el-col :span="6">
+        <tree @treeClick="reload"></tree>
+      </el-col>
+      <el-col :span="18" class="right">
+        <el-card class="top">
+          <el-button type="primary" size="small">添加产品</el-button>
+        </el-card>
+        <el-card class="bottom">
+          <el-table :data="tableList" v-loading="loading">
+            <!-- <el-table-column :label="$t('management.video_setting.videoUrl')" align="center" prop="videoUrl" /> -->
+            <el-table-column
+              :label="$t('management.video_setting.title')"
+              align="center"
+              prop="title"
+            />
+            <el-table-column
+              :label="$t('management.video_setting.status')"
+              align="center"
+              prop="status"
+            />
+            <el-table-column
+              :label="$t('management.video_setting.duration')"
+              align="center"
+              prop="duration"
+              width="120"
+            />
+            <el-table-column
+              :label="$t('management.video_setting.size')"
+              align="center"
+              prop="size"
+              width="120"
+            />
+            <el-table-column
+              :label="$t('create_time')"
+              align="center"
+              prop="createTime"
+            />
+            <el-table-column
+              :label="$t('update_time')"
+              align="center"
+              prop="updateTime"
+              width="120"
+            />
+            <el-table-column
+              :label="$t('operation')"
+              align="center"
+              width="200"
+            >
+              <template slot-scope="scope">
+                <!-- <el-button type="text" @click="toView(scope.row)">{{ $t('toView') }} </el-button> -->
+                <el-button type="text" @click="handleUpdate(scope.row)"
+                  >{{ $t("edit") }}
+                </el-button>
+                <el-button type="text" @click="handleDelete(scope.row)"
+                  >{{ $t("delete") }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <by-table
+            :data="tableList"
+            :columns="columns"
+            :pageNum.sync="req.pageNum"
+            :pageSize.sync="req.pageSize"
+            :selectConfig="selectConfig"
+            :req="req"
+            :total="total"
+          >
+          </by-table>
+          <el-dialog title="添加设备" :visible.sync="open" width="30%">
+            <test
+              ref="form"
+              v-model="dialogParams"
+              :form-config="dialogForm"
+              :insideRules="dialogRules"
+            ></test>
+          </el-dialog>
+          <el-dialog title="预览" :visible.sync="viewModal" width="500px">
+          </el-dialog>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import tree from "./tree.vue";
+import byTable from "@/components/by-table/index.js";
+import test from "@/components/form-test/index.vue";
+
+import * as API from "@/api/product-material/product/index.js";
+
+export default {
+  name: "product",
+  components: {
+    tree,
+    byTable,
+    test,
+  },
+  data() {
+    return {
+      req: {
+        pageNum: 1,
+        pageSize: 10,
+        keyword: "1231",
+        tdaApplicationId: "",
+        tdaProductId: "",
+      },
+      tableList: [],
+      total: 0,
+      loading: false,
+      selectConfig: [
+        {
+          label: "合同状态",
+          prop: "tdaProductId",
+          data: [
+            {
+              label: "已关闭",
+              value: "123",
+            },
+          ],
+        },
+        {
+          label: "合同状态",
+          prop: "tdaApplicationId",
+          data: [
+            {
+              label: "已关闭",
+              value: "123",
+            },
+          ],
+        },
+      ],
+      columns: [
+        {
+          label: "产品类型",
+          prop: "title",
+        },
+        {
+          label: "产品编码",
+          prop: "title",
+          textType: "blue",
+        },
+        {
+          label: "产品名称",
+          prop: "title",
+          textType: "blueOrLine",
+        },
+        {
+          label: "单位",
+          prop: "title",
+          textType: "blueOrLine",
+        },
+        {
+          label: "说明",
+          prop: "title",
+          textType: "blueOrLine",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.right {
+  height: calc(100vh - 110px);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  .top {
+    // padding: 10px;
+    margin-bottom: 8px;
+  }
+  .bottom {
+    flex: 1;
+  }
+}
+</style>

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

@@ -0,0 +1,212 @@
+<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>
+</template>
+
+<script>
+import * as API from '@/api/management/video-setting.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()
+				})
+			})
+		},
+	},
+}
+</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;
+}
+</style>