产品维护静态页

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

@@ -0,0 +1,82 @@
+import request from '@/router/axios'
+
+// 产品树形
+export function materialTree(data = {}) {
+  return request({
+    url: '/api/basics/classify/tree',
+    method: 'post',
+    data: data,
+  })
+}
+// 添加分类
+export function materialClassifyAdd(data = {}) {
+  return request({
+    url: '/api/basics/classify/add',
+    method: 'post',
+    data: data,
+  })
+}
+// 修改分类
+export function materialClassifyEdit(data = {}) {
+  return request({
+    url: '/api/basics/classify/edit',
+    method: 'post',
+    data: data,
+  })
+}
+// 删除分类
+export function materialClassifyDel(data = {}) {
+  return request({
+    url: '/api/basics/classify/delete',
+    method: 'post',
+    data: data,
+  })
+}
+
+
+// 产品列表 
+export function materialList(data = {}) {
+  return request({
+    url: '/api/basics/material/list',
+    method: 'post',
+    data: data,
+  })
+}
+
+// 产品条数 
+export function materialCount(data = {}) {
+  return request({
+    url: '/api/basics/material/page',
+    method: 'post',
+    data: data,
+  })
+}
+
+
+// 添加产品 
+export function materialAdd(data = {}) {
+  return request({
+    url: '/api/basics/material/add',
+    method: 'post',
+    data: data,
+  })
+}
+
+// 编辑产品 
+export function materialEdit(data = {}) {
+  return request({
+    url: '/api/basics/material/edit',
+    method: 'post',
+    data: data,
+  })
+}
+
+// 删除产品 
+export function materialDel(data = {}) {
+  return request({
+    url: '/api/basics/material/delete',
+    method: 'post',
+    data: data,
+  })
+}
+

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

@@ -1,6 +1,6 @@
 import request from '@/router/axios'
 
-// 视频说明书-分页
+// 产品树形
 export function productTree(data = {}) {
   return request({
     url: '/api/basics/classify/tree',
@@ -8,4 +8,75 @@ export function productTree(data = {}) {
     data: data,
   })
 }
+// 添加分类
+export function productClassifyAdd(data = {}) {
+  return request({
+    url: '/api/basics/classify/add',
+    method: 'post',
+    data: data,
+  })
+}
+// 修改分类
+export function productClassifyEdit(data = {}) {
+  return request({
+    url: '/api/basics/classify/edit',
+    method: 'post',
+    data: data,
+  })
+}
+// 删除分类
+export function productClassifyDel(data = {}) {
+  return request({
+    url: '/api/basics/classify/delete',
+    method: 'post',
+    data: data,
+  })
+}
+
+
+// 产品列表 
+export function productList(data = {}) {
+  return request({
+    url: '/api/basics/product/list',
+    method: 'post',
+    data: data,
+  })
+}
+
+// 产品条数 
+export function productCount(data = {}) {
+  return request({
+    url: '/api/basics/product/page',
+    method: 'post',
+    data: data,
+  })
+}
+
+
+// 添加产品 
+export function productAdd(data = {}) {
+  return request({
+    url: '/api/basics/product/add',
+    method: 'post',
+    data: data,
+  })
+}
+
+// 编辑产品 
+export function productEdit(data = {}) {
+  return request({
+    url: '/api/basics/product/edit',
+    method: 'post',
+    data: data,
+  })
+}
+
+// 删除产品 
+export function productDel(data = {}) {
+  return request({
+    url: '/api/basics/product/delete',
+    method: 'post',
+    data: data,
+  })
+}
 

src/components/by-table/index.js

@@ -43,9 +43,9 @@ export default {
                 return {
                     pageNum: 1,
                     pageSize: 10,
-                    total:0,
+                    total: 0,
                 }
-                
+
             }
         }
 
@@ -94,7 +94,7 @@ export default {
                                     {...{
                                         scopedSlots: {
                                             default: ({ row }) => {
-                                                return item.render(h,row)
+                                                return item.render(h, row)
                                             }
                                         },
 
@@ -110,8 +110,8 @@ export default {
                                     {...{
                                         scopedSlots: {
                                             default: ({ row }) => {
-                                                return <div class={item.textType == 'blue' ||  item.textType == 'blueOrLine' ? 'cl-blue' : ''}>
-                                                    <span 
+                                                return <div class={item.textType == 'blue' || item.textType == 'blueOrLine' ? 'cl-blue' : ''}>
+                                                    <span
                                                         style={item.textType == 'blueOrLine' ? 'border-bottom:1px solid #0084FF;cursor: pointer;' : ''}
                                                         onClick={
                                                             () => item.fn ? item.fn(row) : console.log('请配置fn方法')
@@ -134,9 +134,9 @@ export default {
         },
         //render分页
         renderPage(h) {
-            return <pagination v-show={this.total > 0} total={this.total} page={this.pageNum} limit={this.pageSize}  />
+            return <pagination v-show={this.total > 0} total={this.total} page={this.pageNum} limit={this.pageSize} />
         },
-        renderDropDown(h,item) {
+        renderDropDown(h, item) {
             const v = this
             return <div class='by-dropdown'>
                 <div class='by-dropdown-title'>{item.label} <i class="el-icon-caret-bottom el-icon--right"></i></div>
@@ -148,13 +148,13 @@ export default {
                     }}>全部</li>
                     {
                         item.data.map(i => {
-                            return <li key={i.value} 
-                            onClick={
-                                () => {
-                                    v.req[item.prop] = i.value
-                                    item.label = i.label
-                                }
-                            }>{i.label}</li>
+                            return <li key={i.value}
+                                onClick={
+                                    () => {
+                                        v.req[item.prop] = i.value
+                                        item.label = i.label
+                                    }
+                                }>{i.label}</li>
                         })
                     }
                 </ul>
@@ -162,18 +162,18 @@ export default {
         },
         //render搜索
         renderSearch(h) {
-            if(!this.selectConfig) return <div></div>
-            
+            if (!this.selectConfig) return <div></div>
+
             return <div class='by-search'>
                 <div style='display: flex;'>
                     {
-                        this.selectConfig.map( item => {
-                            return this.renderDropDown(h,item)
+                        this.selectConfig.map(item => {
+                            return this.renderDropDown(h, item)
                         })
                     }
                     <div class='more-text'>更多 <i class="el-icon-arrow-right el-icon--right"></i></div>
                 </div>
-                <div  style='display: flex;'>
+                <div style='display: flex;'>
                     <el-input
                         placeholder="请选择日期"
                         suffix-icon="el-icon-search"
@@ -184,19 +184,19 @@ export default {
                 </div>
             </div>
         },
-        renderSearchInit(){
+        renderSearchInit() {
             this.selectConfig.map(item => {
                 item.labelCopy = JSON.parse(JSON.stringify(item))
                 console.log(item.labelCopy)
             })
         },
     },
-    created(){
+    created() {
         this.renderSearchInit()
     },
     name: 'by-table',
     render(h) {
-        
+
         const search = this.renderSearch(h)
         const table = this.renderTable(h)
         const page = this.renderPage(h)

src/components/form-test/index.vue

@@ -11,7 +11,11 @@
     label-width="auto"
   >
     <el-row>
-      <el-col v-for="(value, key, index) in insideConfig" :key="index" :span="24 / value.span">
+      <el-col
+        v-for="(value, key, index) in insideConfig"
+        :key="index"
+        :span="24 / value.span"
+      >
         <el-form-item v-if="value.if" :label="value.label" :prop="key">
           <!-- 解决单选多选框高度太矮导致格式错乱问题 -->
           <div style="min-height: 40px">
@@ -60,7 +64,12 @@
               size="small"
               @change="fn($event, value.change)"
             >
-              <el-option v-for="item in value.data" :key="item[value.keyName]" :label="item[value.labelName]" :value="item[value.keyName]" />
+              <el-option
+                v-for="item in value.data"
+                :key="item[value.keyName]"
+                :label="item[value.labelName]"
+                :value="item[value.keyName]"
+              />
             </el-select>
 
             <!--
@@ -73,8 +82,17 @@
                setData()     获取数据方法
                binding:      执行setData()返回参数的绑定路径
             -->
-            <el-radio-group v-else-if="value.type === 'radio'" size="small" v-model="insideData[key]" :disabled="value.disabled">
-              <el-radio v-for="item in value.data" :key="item[value.keyName]" :label="item[value.keyName]">
+            <el-radio-group
+              v-else-if="value.type === 'radio'"
+              size="small"
+              v-model="insideData[key]"
+              :disabled="value.disabled"
+            >
+              <el-radio
+                v-for="item in value.data"
+                :key="item[value.keyName]"
+                :label="item[value.keyName]"
+              >
                 {{ item[value.labelName] }}
               </el-radio>
             </el-radio-group>
@@ -88,8 +106,17 @@
              setData()    获取数据方法
              binding:     执行setData()返回参数的绑定路径
            -->
-            <el-checkbox-group v-else-if="value.type === 'checkbox'" size="small" v-model="insideData[key]" :disabled="value.disabled">
-              <el-checkbox v-for="item in value.data" :key="item[value.keyName]" :label="item[value.keyName]">
+            <el-checkbox-group
+              v-else-if="value.type === 'checkbox'"
+              size="small"
+              v-model="insideData[key]"
+              :disabled="value.disabled"
+            >
+              <el-checkbox
+                v-for="item in value.data"
+                :key="item[value.keyName]"
+                :label="item[value.keyName]"
+              >
                 {{ item[value.labelName] }}
               </el-checkbox>
             </el-checkbox-group>
@@ -139,27 +166,35 @@
               class="upload-demo"
               action="/api/service-file/uploadFile"
               :on-preview="handlePreview"
-              :on-remove="(file, fileList)=>handleRemove(file, fileList,key)"
+              :on-remove="(file, fileList) => handleRemove(file, fileList, key)"
               :before-remove="beforeRemove"
               :limit="6"
               :on-exceed="handleExceed"
               :headers="uploadHeader"
-              :on-success="(response, file, fileList)=>uploadSuccess(response, file, fileList,key)"
-              :before-upload="(file)=>beforeAvatarUpload(file,value.accept)"
+              :on-success="
+                (response, file, fileList) =>
+                  uploadSuccess(response, file, fileList, key)
+              "
+              :before-upload="(file) => beforeAvatarUpload(file, value.accept)"
               v-model="insideData[key]"
               :accept="value.accept"
-              :file-list="insideData[key]">
+              :file-list="insideData[key]"
+            >
               <el-button size="small" type="primary">点击上传</el-button>
-              <div slot="tip" v-if="value.tip" class="el-upload__tip">{{value.tip}}</div>
+              <div slot="tip" v-if="value.tip" class="el-upload__tip">
+                {{ value.tip }}
+              </div>
             </el-upload>
-            
+
             <el-cascader
               v-model="insideData[key]"
               v-else-if="value.type === 'cascader'"
               :options="value.data"
               :emitPath="false"
               :props="value.props || {}"
-              ></el-cascader>
+              :style="{ width: value.width || '100%' }"
+              size="small"
+            ></el-cascader>
             <!--
              插槽:
                 slot:       插槽命名
@@ -175,7 +210,6 @@
               v-else-if="value.type === 'editor'"
             />
             <slot v-else :name="key" />
-            
           </div>
         </el-form-item>
       </el-col>
@@ -186,14 +220,18 @@
        -->
       <el-col v-if="this.formConfig['operation'] !== undefined" :span="6">
         <div style="margin-left: 15px; line-height: 38px">
-          <el-button type="primary" size="small" @click="formConfig['operation'].query()">
+          <el-button
+            type="primary"
+            size="small"
+            @click="formConfig['operation'].query()"
+          >
             搜索
           </el-button>
           <el-button
             size="small"
             @click="
-              dateRangeData = []
-              formConfig['operation'].reset()
+              dateRangeData = [];
+              formConfig['operation'].reset();
             "
           >
             重置
@@ -202,8 +240,18 @@
       </el-col>
     </el-row>
 
-    <el-row style="margin-bottom: 10px" v-if="formConfig.otherButton && formConfig.otherButton.list && formConfig.otherButton.list.length > 0">
-      <el-col :span="24" :style="'text-align: ' + formConfig.otherButton.align || 'left'">
+    <el-row
+      style="margin-bottom: 10px"
+      v-if="
+        formConfig.otherButton &&
+        formConfig.otherButton.list &&
+        formConfig.otherButton.list.length > 0
+      "
+    >
+      <el-col
+        :span="24"
+        :style="'text-align: ' + formConfig.otherButton.align || 'left'"
+      >
         <el-button
           v-for="(item, index) in formConfig.otherButton.list"
           :key="index"
@@ -219,15 +267,15 @@
 
 <script>
 import { getToken } from "@/util/auth";
-import 'quill/dist/quill.core.css'
-import 'quill/dist/quill.snow.css'
-import 'quill/dist/quill.bubble.css'
-import { quillEditor } from 'vue-quill-editor'
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+import { quillEditor } from "vue-quill-editor";
 export default {
-  components:{
-    quillEditor
+  components: {
+    quillEditor,
   },
-  name: 'test',
+  name: "test",
   props: {
     // 表单值
     value: {
@@ -242,7 +290,7 @@ export default {
     insideRules: {
       type: Object,
       default: () => {
-        return {}
+        return {};
       },
     },
     // 全局label宽度
@@ -269,7 +317,7 @@ export default {
     change: {
       type: Function,
       default: () => {
-        return {}
+        return {};
       },
     },
   },
@@ -279,61 +327,61 @@ export default {
       insideData: {}, // 内部数据
       dateRangeData: [], // 时间段
       fileData: [], // 文件路径数组
-      fileList:[],
-      uploadHeader:{
-        Authorization: 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
-        'Blade-Auth':'bearer ' + getToken()
-      }
-    }
+      fileList: [],
+      uploadHeader: {
+        Authorization: "Basic c2FiZXI6c2FiZXJfc2VjcmV0",
+        "Blade-Auth": "bearer " + getToken(),
+      },
+    };
   },
   watch: {
     value: {
       handler() {
-        this.insideData = this.value
+        this.insideData = this.value;
       },
       deep: true,
       immediate: true,
     },
     formConfig: {
       handler() {
-        this.init()
+        this.init();
       },
       deep: true,
       immediate: true,
     },
   },
   methods: {
-    beforeAvatarUpload(file,accept) {
-      console.log(file,accept)
-      const videoType = file.type.substring(file.type.length - 3)
-      if(accept.indexOf(videoType) == -1){
-        this.$message.error('上传头像图片只能是 '+ accept +' 格式!');
-        return false
+    beforeAvatarUpload(file, accept) {
+      console.log(file, accept);
+      const videoType = file.type.substring(file.type.length - 3);
+      if (accept.indexOf(videoType) == -1) {
+        this.$message.error("上传头像图片只能是 " + accept + " 格式!");
+        return false;
       }
     },
-    uploadSuccess(response, file, fileList,key){
-      this.insideData[key] = []
+    uploadSuccess(response, file, fileList, key) {
+      this.insideData[key] = [];
       for (let i = 0; i < fileList.length; i++) {
         const element = fileList[i];
-        
-        console.log(element)
-        if(element.response){
-          element.response.data.name = element.response.data.fileName
-          this.insideData[key].push(element.response.data)
-        }else{
-          this.insideData[key].push(element)
+
+        console.log(element);
+        if (element.response) {
+          element.response.data.name = element.response.data.fileName;
+          this.insideData[key].push(element.response.data);
+        } else {
+          this.insideData[key].push(element);
         }
       }
     },
-    handleRemove(file, fileList,key) {
-      this.insideData[key] = []
+    handleRemove(file, fileList, key) {
+      this.insideData[key] = [];
       for (let i = 0; i < fileList.length; i++) {
         const element = fileList[i];
-        if(element.response){
-          element.response.data.name = element.response.data.fileName
-          this.insideData[key].push(element.response.data)
-        }else{
-          this.insideData[key].push(element)
+        if (element.response) {
+          element.response.data.name = element.response.data.fileName;
+          this.insideData[key].push(element.response.data);
+        } else {
+          this.insideData[key].push(element);
         }
       }
     },
@@ -341,186 +389,215 @@ export default {
       console.log(file);
     },
     handleExceed(files, fileList) {
-      this.$message.warning(`当前限制选择 6 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+      this.$message.warning(
+        `当前限制选择 6 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`
+      );
     },
     beforeRemove(file, fileList) {
-      return this.$confirm(`确定移除 ${ file.name }？`);
+      return this.$confirm(`确定移除 ${file.name}？`);
     },
     fn(val, _fn) {
-      _fn(val)
+      _fn(val);
     },
     // 初始化
     init() {
-      this.insideConfig = {}
+      this.insideConfig = {};
       for (const key in this.formConfig) {
         // 跳过特殊方法( operation: 搜索、重置, otherButton: 新增等自定义按钮)
-        if (key === 'operation' || key === 'otherButton' || key === 'loadingStatus') {
-          continue
+        if (
+          key === "operation" ||
+          key === "otherButton" ||
+          key === "loadingStatus"
+        ) {
+          continue;
         }
-        const value = this.formConfig[key]
+        const value = this.formConfig[key];
         this.insideConfig[key] = {
           label: value.label,
-          type: value.type ? value.type : 'input',
+          type: value.type ? value.type : "input",
           if: value.if === undefined ? true : value.if,
           span: value.span || this.span,
-          clearable: value.clearable === undefined ? this.clearable : value.clearable,
-          disabled: value.disabled === undefined ? this.disabled : value.disabled,
+          clearable:
+            value.clearable === undefined ? this.clearable : value.clearable,
+          disabled:
+            value.disabled === undefined ? this.disabled : value.disabled,
           change: value.change === undefined ? this.change : value.change,
-        }
+        };
         switch (this.insideConfig[key].type) {
-          case 'input':
-            this.inputHandle(key, value)
-            break
-          case 'select':
-            this.selectHandle(key, value)
-            break
-          case 'radio':
-            this.radioHandel(key, value)
-            break
-          case 'checkbox':
-            this.checkboxHandel(key, value)
-            break
-          case 'datePicker':
-            this.datePickerHandel(key, value)
-            break
-          case 'upload':
-            this.uploadHandel(key, value)
-            break
-          case 'uploads':
-            this.uploadsHandel(key, value)
-            break
-            case 'cascader':
-            this.cascaderHandel(key, value)
-            break
+          case "input":
+            this.inputHandle(key, value);
+            break;
+          case "select":
+            this.selectHandle(key, value);
+            break;
+          case "radio":
+            this.radioHandel(key, value);
+            break;
+          case "checkbox":
+            this.checkboxHandel(key, value);
+            break;
+          case "datePicker":
+            this.datePickerHandel(key, value);
+            break;
+          case "upload":
+            this.uploadHandel(key, value);
+            break;
+          case "uploads":
+            this.uploadsHandel(key, value);
+            break;
+          case "cascader":
+            this.cascaderHandel(key, value);
+            break;
         }
       }
     },
     //初始化
     reset() {
-      this.$refs.form.resetFields()
+      this.$refs.form.resetFields();
     },
     // el-input标签处理
     inputHandle(key, value) {
-      this.insideConfig[key].placeholder = value.placeholder || '请输入' + value.label
-      this.insideConfig[key].itemType = value.itemType || 'text'
+      this.insideConfig[key].placeholder =
+        value.placeholder || "请输入" + value.label;
+      this.insideConfig[key].itemType = value.itemType || "text";
     },
 
     // el-select标签处理
     selectHandle(key, value) {
-      this.insideConfig[key].placeholder = value.placeholder || '请选择' + value.label
-      this.insideConfig[key].multiple = value.multiple === undefined ? false : value.multiple
-      this.insideConfig[key].filterable = value.filterable === undefined ? true : value.filterable
-      this.insideConfig[key].keyName = value.keyName || 'key'
-      this.insideConfig[key].labelName = value.labelName || 'label'
-      this.setData(key, value)
+      this.insideConfig[key].placeholder =
+        value.placeholder || "请选择" + value.label;
+      this.insideConfig[key].multiple =
+        value.multiple === undefined ? false : value.multiple;
+      this.insideConfig[key].filterable =
+        value.filterable === undefined ? true : value.filterable;
+      this.insideConfig[key].keyName = value.keyName || "key";
+      this.insideConfig[key].labelName = value.labelName || "label";
+      this.setData(key, value);
     },
 
     // el-radio标签处理
     radioHandel(key, value) {
-      this.insideConfig[key].keyName = value.keyName || 'key'
-      this.insideConfig[key].labelName = value.labelName || 'label'
-      this.setData(key, value)
+      this.insideConfig[key].keyName = value.keyName || "key";
+      this.insideConfig[key].labelName = value.labelName || "label";
+      this.setData(key, value);
     },
 
     // el-checkbox标签处理
     checkboxHandel(key, value) {
       // 默认值
       if (!this.insideData[key]) {
-        this.$set(this.insideData, key, [])
+        this.$set(this.insideData, key, []);
       }
-      this.insideConfig[key].keyName = value.keyName || 'key'
-      this.insideConfig[key].labelName = value.labelName || 'label'
-      this.setData(key, value)
+      this.insideConfig[key].keyName = value.keyName || "key";
+      this.insideConfig[key].labelName = value.labelName || "label";
+      this.setData(key, value);
     },
 
     // el-checkbox标签处理
     cascaderHandel(key, value) {
       // 默认值
       if (!this.insideData[key]) {
-        this.$set(this.insideData, key, [])
+        this.$set(this.insideData, key, []);
       }
-      
-      this.insideConfig[key].props = value.props || {}    
-      if(this.insideConfig[key].props && !this.insideConfig[key].props.emitPath)
-      this.insideConfig[key].props.emitPath = false
-      this.setData(key, value)
-    },
 
-    
+      this.insideConfig[key].props = value.props || {};
+      if (
+        this.insideConfig[key].props &&
+        !this.insideConfig[key].props.emitPath
+      )
+        this.insideConfig[key].props.emitPath = false;
+      this.setData(key, value);
+    },
 
     // el-datePicker标签处理
     datePickerHandel(key, value) {
-      this.insideConfig[key].placeholder = value.placeholder || '请选择日期'
-      this.insideConfig[key].itemType = value.itemType || 'date'
-      this.insideConfig[key].format = value.format || 'yyyy-MM-dd'
+      this.insideConfig[key].placeholder = value.placeholder || "请选择日期";
+      this.insideConfig[key].itemType = value.itemType || "date";
+      this.insideConfig[key].format = value.format || "yyyy-MM-dd";
     },
 
     // 单文件上传处理
     uploadHandel(key) {
       if (this.insideData[key]) {
-        this.$set(this.fileData, key, [this.insideData[key]])
+        this.$set(this.fileData, key, [this.insideData[key]]);
       } else if (!this.fileData[key]) {
-        this.$set(this.fileData, key, [])
+        this.$set(this.fileData, key, []);
       }
     },
 
     // 多文件上传处理
     uploadsHandel(key, value) {
-      this.insideConfig[key].maxSelectNum = value.maxSelectNum || 6
-      this.insideConfig[key].accept = value.accept || null
-      
+      this.insideConfig[key].maxSelectNum = value.maxSelectNum || 6;
+      this.insideConfig[key].accept = value.accept || null;
+
       if (!this.insideData[key]) {
-        this.$set(this.insideData, key, [])
+        this.$set(this.insideData, key, []);
       }
     },
 
     // 获取数据方法
     async setData(key, value) {
       if (value.data) {
-        this.insideConfig[key].data = value.data
+        this.insideConfig[key].data = value.data;
       } else if (value.dict) {
-        this.insideConfig[key].keyName = 'dictValue'
-        this.insideConfig[key].labelName = 'dictLabel'
-        this.insideConfig[key].data = await this.getDicts(value.dict)
-        this.$forceUpdate()
+        this.insideConfig[key].keyName = "dictValue";
+        this.insideConfig[key].labelName = "dictLabel";
+        this.insideConfig[key].data = await this.getDicts(value.dict);
+        this.$forceUpdate();
       } else {
-        const itemData = await value.setData()
+        const itemData = await value.setData();
         if (value.binding) {
-          this.insideConfig[key].data = value.binding.split('.').reduce((total, cur) => total[cur], itemData)
+          this.insideConfig[key].data = value.binding
+            .split(".")
+            .reduce((total, cur) => total[cur], itemData);
         } else {
-          this.insideConfig[key].data = itemData
+          this.insideConfig[key].data = itemData;
         }
-        this.$forceUpdate()
+        this.$forceUpdate();
       }
     },
 
     // 赋值开始时间结束时间
     dateRangeChange(value, key) {
       if (this.dateRangeData[key] !== null) {
-        this.$set(this.insideData, value['beginName'] || 'beginTime', this.dateRangeData[key][0])
-        this.$set(this.insideData, value['endName'] || 'endTime', this.dateRangeData[key][1])
+        this.$set(
+          this.insideData,
+          value["beginName"] || "beginTime",
+          this.dateRangeData[key][0]
+        );
+        this.$set(
+          this.insideData,
+          value["endName"] || "endTime",
+          this.dateRangeData[key][1]
+        );
       } else {
-        this.$set(this.insideData, value['beginName'] || 'beginTime', undefined)
-        this.$set(this.insideData, value['endName'] || 'endTime', undefined)
+        this.$set(
+          this.insideData,
+          value["beginName"] || "beginTime",
+          undefined
+        );
+        this.$set(this.insideData, value["endName"] || "endTime", undefined);
       }
     },
 
     // 选择图片
     selectFile(key) {
       if (this.fileData[key].length > 0) {
-        this.$set(this.insideData, key, this.fileData[key][0])
+        this.$set(this.insideData, key, this.fileData[key][0]);
       } else {
-        this.$set(this.insideData, key, undefined)
+        this.$set(this.insideData, key, undefined);
       }
     },
 
     // 删除图片
     removeFile(key) {
-      this.$set(this.fileData, key, [])
-      this.$set(this.insideData, key, undefined)
+      this.$set(this.fileData, key, []);
+      this.$set(this.insideData, key, undefined);
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>

src/lang/zh.js

@@ -12,13 +12,13 @@ export default {
   loadingText: '删除',
   addSuccess: '添加成功',
   deleteSuccess: '删除成功',
-  editSuccess:'修改成功',
+  editSuccess: '修改成功',
   askDeleteData: '请问是否删除该条数据',
-  add:"添加",
-  edit:'编辑',
-  create_time:"创建时间",
-  update_time:"更新时间",
-  keyword:"关键词",
+  add: "添加",
+  edit: '编辑',
+  create_time: "创建时间",
+  update_time: "更新时间",
+  keyword: "关键词",
   wel: {
     info: '早安，Smallwei，Avuex一款超乎你想象的框架！',
     dept: '我是avue团队下的一个部门-哈皮部门-哈皮职位',
@@ -171,40 +171,80 @@ export default {
       secretRules: '请输入密钥',
     },
   },
-  management:{
-    video_setting:{
-      keyword:"关键词",
-      videoUrl:"缩略图",
-      title:'标题',
-      status:'状态',
-      duration:'时长',
-      size:"大小",
-      treeModalAdd:'添加分类',
-      treeModalEdit:'编辑分类',
-      addModal:"添加视频说明书",
-      edit:'编辑视频说明书',
-      type:"类型",
-      name:"分类名称",
-      treeAddType1:'产品分类',
-      treeAddType2:'物料分类',
-      treeName:'标题',
-      typeRules:"请选择类型",
-      nameRules:"请输入标题"
+  management: {
+    video_setting: {
+      keyword: "关键词",
+      videoUrl: "缩略图",
+      title: '标题',
+      status: '状态',
+      duration: '时长',
+      size: "大小",
+      treeModalAdd: '添加分类',
+      treeModalEdit: '编辑分类',
+      addModal: "添加视频说明书",
+      edit: '编辑视频说明书',
+      type: "类型",
+      name: "分类名称",
+      treeAddType1: '产品分类',
+      treeAddType2: '物料分类',
+      treeName: '标题',
+      typeRules: "请选择类型",
+      nameRules: "请输入标题"
     },
   },
-  process:{
-    processList:"流程列表",
-    generalProcess:{
-      serviceName:"业务服务",
-      moduleName:"功能名称",
-      codeName:"流程名称",
-      add:"添加流程",
-      flowName:"流程名称",
-      code:"流程标识",
-      serviceNameRules:"业务服务不能为空",
-      codeRules:'流程标识不能为空',
-      moduleNameRules:'功能名称不能为空',
-      flowNameRules:'流程名称不能为空',
+  process: {
+    processList: "流程列表",
+    generalProcess: {
+      serviceName: "业务服务",
+      moduleName: "功能名称",
+      codeName: "流程名称",
+      add: "添加流程",
+      flowName: "流程名称",
+      code: "流程标识",
+      serviceNameRules: "业务服务不能为空",
+      codeRules: '流程标识不能为空',
+      moduleNameRules: '功能名称不能为空',
+      flowNameRules: '流程名称不能为空',
+    },
+  },
+  product_material: {
+    product: {
+      treeModalAdd: '添加分类',
+      treeModalEdit: '编辑分类',
+      treeName: "产品名称",
+      nameRules: "请输入产品名称",
+      productAdd: '添加产品',
+      productEdit: '编辑产品',
+      productClassify: "产品分类",
+      productType: '产品类型',
+      productCode: "产品编码",
+      productName: '产品名称',
+      productUnit: "单位",
+      productDescription: "产品说明",
+      productClassifyRules: "请选择产品分类",
+      productTypeRules: '请选择产品类型',
+      productCodeRules: "请输入产品编码",
+      productNameRules: '请输入产品名称',
+      productUnitRules: "请选择单位",
+    },
+    material: {
+      treeModalAdd: '添加分类',
+      treeModalEdit: '编辑分类',
+      treeName: "物料名称",
+      nameRules: "请输入物料名称",
+      materialAdd: '添加物料',
+      materialEdit: '编辑物料',
+      materialClassify: "物料分类",
+      materialType: '物料类型',
+      materialCode: "物料编码",
+      materialName: '物料名称',
+      materialUnit: "单位",
+      materialDescription: "物料说明",
+      materialClassifyRules: "请选择物料分类",
+      materialTypeRules: '请选择物料类型',
+      materialCodeRules: "请输入物料编码",
+      materialNameRules: '请输入物料名称',
+      materialUnitRules: "请选择单位",
     },
   },
 }

src/router/page/index.js

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

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

@@ -0,0 +1,307 @@
+<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" @click="productAdd">{{
+            $t("product_material.material.materialAdd")
+          }}</el-button>
+        </el-card>
+        <el-card class="bottom">
+          <by-table
+            v-loading="loading"
+            :data="tableList"
+            :columns="columns"
+            :pageNum.sync="req.pageNum"
+            :pageSize.sync="req.pageSize"
+            :selectConfig="selectConfig"
+            :req="req"
+            :total="total"
+          >
+          </by-table>
+          <el-dialog
+            :title="
+              titleText === 'add'
+                ? $t('product_material.material.materialAdd')
+                : $t('product_material.material.materialEdit')
+            "
+            :visible.sync="open"
+            v-if="open"
+            width="50%"
+          >
+            <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/material/index.js";
+
+export default {
+  name: "product",
+  components: {
+    tree,
+    byTable,
+    test,
+  },
+  data() {
+    return {
+      req: {
+        pageNum: 1,
+        pageSize: 10,
+        keyword: "1231",
+        classifyId: "",
+      },
+      tableList: [],
+      total: 0,
+      loading: false,
+      open: false,
+      selectConfig: [
+        {
+          label: this.$t("product_material.material.materialType"),
+          prop: "type",
+          data: [
+            { label: "原料", value: 1 },
+            { label: "辅料", value: 2 },
+            { label: "配件", value: 3 },
+            { label: "包材", value: 4 },
+            { label: "其他", value: 5 },
+          ],
+        },
+      ],
+      columns: [
+        {
+          label: "物料类型",
+          prop: "title",
+        },
+        {
+          label: "物料编码",
+          prop: "title",
+        },
+        {
+          label: "物料名称",
+          prop: "title",
+        },
+        {
+          label: "单位",
+          prop: "title",
+        },
+        {
+          label: "说明",
+          prop: "title",
+        },
+      ],
+      dialogParams: {
+        classifyId: "",
+        type: "",
+        code: "",
+        name: "",
+        unit: "",
+        introduce: "",
+      },
+      dialogForm: {
+        loadingStatus: false,
+        classifyId: {
+          label: this.$t("product_material.material.materialClassify"),
+          type: "cascader",
+          props: {
+            label: "name",
+            value: "id",
+          },
+          width: "100%",
+          data: [],
+        },
+        type: {
+          label: this.$t("product_material.material.materialType"),
+          type: "select",
+          span: 3,
+          labelName: "labelName",
+          keyName: "keyName",
+          data: [
+            { labelName: "原料", keyName: 1 },
+            { labelName: "辅料", keyName: 2 },
+            { labelName: "配件", keyName: 3 },
+            { labelName: "包材", keyName: 4 },
+            { labelName: "其他", keyName: 5 },
+          ],
+        },
+        code: {
+          span: 3,
+          label: this.$t("product_material.material.materialCode"),
+          type: "input",
+        },
+        name: {
+          label: this.$t("product_material.material.materialName"),
+          type: "input",
+        },
+        unit: {
+          label: this.$t("product_material.material.materialUnit"),
+          type: "select",
+          span: 3,
+          labelName: "labelName",
+          keyName: "keyName",
+          data: [
+            { labelName: "半成品", keyName: 0 },
+            { labelName: "成品", keyName: 1 },
+          ],
+        },
+        introduce: {
+          label: this.$t("product_material.material.materialDescription"),
+          type: "input",
+          itemType: "textarea",
+        },
+        // 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();
+              },
+            },
+          ],
+        },
+      },
+      dialogRules: {
+        classifyId: [
+          {
+            required: true,
+            message: this.$t("product_material.material.materialClassifyRules"),
+            trigger: "change",
+          },
+        ],
+        type: [
+          {
+            required: true,
+            message: this.$t("product_material.material.materialTypeRules"),
+            trigger: "change",
+          },
+        ],
+        code: [
+          {
+            required: true,
+            message: this.$t("product_material.material.materialCodeRules"),
+            trigger: "blur",
+          },
+        ],
+        name: [
+          {
+            required: true,
+            message: this.$t("product_material.material.materialNameRules"),
+            trigger: "blur",
+          },
+        ],
+        unit: [
+          {
+            required: true,
+            message: this.$t("product_material.material.materialUnitRules"),
+            trigger: "change",
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    // this.getList();
+  },
+  methods: {
+    getList() {
+      this.loading = true;
+      API.materialList(this.req).then(
+        (res) => {
+          this.tableList = res.data.data.list;
+          this.loading = false;
+        },
+        (err) => {
+          console.log("productList: " + err);
+          this.loading = false;
+        }
+      );
+      API.materialCount(this.req).then(
+        (res) => {
+          this.total = res.data.data.count;
+        },
+        (err) => {
+          console.log("productCount: " + err);
+        }
+      );
+    },
+    productAdd() {
+      this.titleText = "add";
+      this.open = true;
+    },
+    reload(row) {
+      console.log(row);
+      this.req.pageNum = 1;
+      this.req.classifyId = row.id;
+      this.getList();
+    },
+  },
+};
+</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/material/tree.vue

@@ -0,0 +1,243 @@
+<template>
+  <el-card shadow="always" :body-style="{ padding: '20px' }">
+    <div class="tree-title">
+      <div class="bk"></div>
+      <div>{{ $t("product_material.material.materialClassify") }}</div>
+    </div>
+    <div class="search">
+      <el-input :placeholder="$t('search')" 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" @click="() => edit(data)"></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"
+            @click="() => del(data)"
+          ></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('material_material.material.treeModalAdd')
+          : $t('material_material.material.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/product-material/material/index.js";
+import test from "@/components/form-test/index.vue";
+export default {
+  components: { test },
+  name: "tree",
+  data() {
+    return {
+      filterText: "",
+      treeQuery: {
+        type: "1",
+        name: "",
+      },
+      treeData: [],
+      treeParams: {
+        type: null,
+        parentId: null,
+        name: null,
+      },
+      treeForm: {
+        loadingStatus: false,
+        name: {
+          label: this.$t("material_material.material.treeName"),
+          type: "input",
+        },
+        otherButton: {
+          align: "center",
+          list: [
+            {
+              name: this.$t("cancelText"),
+              methodsText: "cancel",
+              cancel: () => {
+                this.treeModal = false;
+              },
+            },
+            {
+              name: this.$t("submitText"),
+              methodsText: "submit",
+              type: "primary",
+              submit: () => {
+                this.treehandleSubmit();
+              },
+            },
+          ],
+        },
+      },
+      treeRules: {
+        name: [
+          {
+            required: true,
+            message: this.$t("material_material.material.nameRules"),
+            trigger: "blur",
+          },
+        ],
+      },
+      treeModalType: "add",
+      treeModal: false,
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+    };
+  },
+  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.materialClassifyAdd(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.materialTree(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;
+    },
+    edit(row) {
+      console.log(row, "edit");
+      // materialClassifyEdit
+    },
+    del(row) {
+      console.log(row, "del");
+      this.$confirm(this.$t("askDeleteData"), {
+        confirmButtonText: this.$t("submitText"),
+        cancelButtonText: this.$t("cancelText"),
+        type: "warning",
+      }).then(() => {
+        API.materialClassifyDel({ id: row.id }).then(() => {
+          this.msgSuccess(this.$t("deleteSuccess"));
+          this.getTree();
+        });
+      });
+    },
+    // 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;
+}
+.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>

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

@@ -6,61 +6,13 @@
       </el-col>
       <el-col :span="18" class="right">
         <el-card class="top">
-          <el-button type="primary" size="small">添加产品</el-button>
+          <el-button type="primary" size="small" @click="productAdd">{{
+            $t("product_material.product.productAdd")
+          }}</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
+            v-loading="loading"
             :data="tableList"
             :columns="columns"
             :pageNum.sync="req.pageNum"
@@ -70,7 +22,16 @@
             :total="total"
           >
           </by-table>
-          <el-dialog title="添加设备" :visible.sync="open" width="30%">
+          <el-dialog
+            :title="
+              titleText === 'add'
+                ? $t('product_material.product.productAdd')
+                : $t('product_material.product.productEdit')
+            "
+            :visible.sync="open"
+            v-if="open"
+            width="50%"
+          >
             <test
               ref="form"
               v-model="dialogParams"
@@ -106,31 +67,19 @@ export default {
         pageNum: 1,
         pageSize: 10,
         keyword: "1231",
-        tdaApplicationId: "",
-        tdaProductId: "",
+        classifyId: "",
       },
       tableList: [],
       total: 0,
       loading: false,
+      open: false,
       selectConfig: [
         {
-          label: "合同状态",
-          prop: "tdaProductId",
+          label: this.$t("product_material.product.productType"),
+          prop: "type",
           data: [
-            {
-              label: "已关闭",
-              value: "123",
-            },
-          ],
-        },
-        {
-          label: "合同状态",
-          prop: "tdaApplicationId",
-          data: [
-            {
-              label: "已关闭",
-              value: "123",
-            },
+            { label: "半成品", value: 0 },
+            { label: "成品", value: 1 },
           ],
         },
       ],
@@ -160,8 +109,182 @@ export default {
           textType: "blueOrLine",
         },
       ],
+      dialogParams: {
+        classifyId: "",
+        type: "",
+        code: "",
+        name: "",
+        unit: "",
+        introduce: "",
+      },
+      dialogForm: {
+        loadingStatus: false,
+        classifyId: {
+          label: this.$t("product_material.product.productClassify"),
+          type: "cascader",
+          props: {
+            label: "name",
+            value: "id",
+          },
+          width: "100%",
+          data: [],
+        },
+        type: {
+          label: this.$t("product_material.product.productType"),
+          type: "select",
+          span: 3,
+          labelName: "labelName",
+          keyName: "keyName",
+          data: [
+            { labelName: "半成品", keyName: 0 },
+            { labelName: "成品", keyName: 1 },
+          ],
+        },
+        code: {
+          span: 3,
+          label: this.$t("product_material.product.productCode"),
+          type: "input",
+        },
+        name: {
+          label: this.$t("product_material.product.productName"),
+          type: "input",
+        },
+        unit: {
+          label: this.$t("product_material.product.productUnit"),
+          type: "select",
+          span: 3,
+          labelName: "labelName",
+          keyName: "keyName",
+          data: [
+            { labelName: "半成品", keyName: 0 },
+            { labelName: "成品", keyName: 1 },
+          ],
+        },
+        introduce: {
+          label: this.$t("product_material.product.productDescription"),
+          type: "input",
+          itemType: "textarea",
+        },
+        // 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();
+              },
+            },
+          ],
+        },
+      },
+      dialogRules: {
+        classifyId: [
+          {
+            required: true,
+            message: this.$t("product_material.product.productClassifyRules"),
+            trigger: "change",
+          },
+        ],
+        type: [
+          {
+            required: true,
+            message: this.$t("product_material.product.productTypeRules"),
+            trigger: "change",
+          },
+        ],
+        code: [
+          {
+            required: true,
+            message: this.$t("product_material.product.productCodeRules"),
+            trigger: "blur",
+          },
+        ],
+        name: [
+          {
+            required: true,
+            message: this.$t("product_material.product.productNameRules"),
+            trigger: "blur",
+          },
+        ],
+        unit: [
+          {
+            required: true,
+            message: this.$t("product_material.product.productUnitRules"),
+            trigger: "change",
+          },
+        ],
+      },
     };
   },
+  created() {
+    // this.getList();
+  },
+  methods: {
+    getList() {
+      this.loading = true;
+      API.productList(this.req).then(
+        (res) => {
+          this.tableList = res.data.data.list;
+          this.loading = false;
+        },
+        (err) => {
+          console.log("productList: " + err);
+          this.loading = false;
+        }
+      );
+      API.productCount(this.req).then(
+        (res) => {
+          this.total = res.data.data.count;
+        },
+        (err) => {
+          console.log("productCount: " + err);
+        }
+      );
+    },
+    productAdd() {
+      this.titleText = "add";
+      this.open = true;
+    },
+    reload(row) {
+      console.log(row);
+      this.req.pageNum = 1;
+      this.req.classifyId = row.id;
+      this.getList();
+    },
+  },
 };
 </script>
 

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

@@ -2,14 +2,10 @@
   <el-card shadow="always" :body-style="{ padding: '20px' }">
     <div class="tree-title">
       <div class="bk"></div>
-      <div>产品分类</div>
+      <div>{{ $t("product_material.product.productClassify") }}</div>
     </div>
     <div class="search">
-      <el-input
-        placeholder="输入关键字进行过滤"
-        v-model="filterText"
-        size="small"
-      >
+      <el-input :placeholder="$t('search')" v-model="filterText" size="small">
       </el-input>
     </div>
     <el-tree
@@ -22,13 +18,17 @@
       <span class="custom-tree-node" slot-scope="{ node, data }">
         <span>{{ node.label }}</span>
         <span>
-          <i class="el-icon-edit"></i>
+          <i class="el-icon-edit" @click="() => edit(data)"></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>
+          <i
+            class="el-icon-delete"
+            style="margin-left: 10px"
+            @click="() => del(data)"
+          ></i>
           <!-- <el-button type="text" size="mini" @click="() => add(data)">
             {{ $t("add") }}
           </el-button>
@@ -41,8 +41,8 @@
     <el-dialog
       :title="
         treeModalType == 'add'
-          ? $t('product-material.product.treeModalAdd')
-          : $t('product-material.product.treeModalEdit')
+          ? $t('product_material.product.treeModalAdd')
+          : $t('product_material.product.treeModalEdit')
       "
       v-if="treeModal"
       :visible.sync="treeModal"
@@ -59,7 +59,6 @@
 </template>
 
 <script>
-// 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 {
@@ -68,6 +67,11 @@ export default {
   data() {
     return {
       filterText: "",
+      treeQuery: {
+        type: "1",
+        name: "",
+      },
+      treeData: [],
       treeParams: {
         type: null,
         parentId: null,
@@ -75,45 +79,37 @@ export default {
       },
       treeForm: {
         loadingStatus: false,
-
         name: {
-          label: this.$t("product-material.product.treeName"),
+          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();
-        //       },
-        //     },
-        //   ],
-        // },
+        otherButton: {
+          align: "center",
+          list: [
+            {
+              name: this.$t("cancelText"),
+              methodsText: "cancel",
+              cancel: () => {
+                this.treeModal = 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",
+            message: this.$t("product_material.product.nameRules"),
+            trigger: "blur",
           },
         ],
       },
@@ -123,11 +119,6 @@ export default {
         children: "children",
         label: "label",
       },
-      treeData: [],
-      treeQuery: {
-        type: "1",
-        name: "",
-      },
     };
   },
   watch: {
@@ -136,7 +127,7 @@ export default {
     },
   },
   created() {
-    this.getTree();
+    // this.getTree();
   },
   methods: {
     filterNode(value, data) {
@@ -148,7 +139,7 @@ export default {
       this.$refs.form.$refs["form"].validate((valid) => {
         if (valid) {
           this.treeForm.loadingStatus = true;
-          API.videoClassifyAdd(this.treeParams).then(
+          API.productClassifyAdd(this.treeParams).then(
             () => {
               this.msgSuccess(this.$t("addSuccess"));
               this.treeModal = false;
@@ -190,6 +181,23 @@ export default {
       this.treeParams.parentId = row.id;
       this.treeModal = true;
     },
+    edit(row) {
+      console.log(row, "edit");
+      // productClassifyEdit
+    },
+    del(row) {
+      console.log(row, "del");
+      this.$confirm(this.$t("askDeleteData"), {
+        confirmButtonText: this.$t("submitText"),
+        cancelButtonText: this.$t("cancelText"),
+        type: "warning",
+      }).then(() => {
+        API.productClassifyDel({ id: row.id }).then(() => {
+          this.msgSuccess(this.$t("deleteSuccess"));
+          this.getTree();
+        });
+      });
+    },
     // treeDelete(row) {
     //   console.log(row);
     //   this.$confirm(this.$t("askDeleteData"), {