辅材类别 产品建议用树形结构，按层级创建（原型图显示）

src/views/auxiliaryFittings/auxiliaryDataManagement/auxiliaryMaterialClass/index.vue

@@ -1,7 +1,31 @@
 <template>
-  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
-    :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
-    :operation="operation">
+  <div class="app-container">
+    <div class="mymain-container">
+      <div class="btn-group clearfix">
+        <div class="fl">
+          <el-button size="small" type="primary" icon="el-icon-plus" @click="addData">添加</el-button>
+        </div>
+      </div>
+      <div class="table">
+        <el-table :data="dataList" row-key="categoryId" border default-expand-all :tree-props="{ children: 'child' }">
+          <el-table-column prop="categoryName" label="分类名称" min-width="150"></el-table-column>
+          <el-table-column align="center" label="状态" class-name="status-col">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ ({ ON: '启用', OFF: '禁用' })[scope.row.status]
+              }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="sortNum" label="排序"></el-table-column>
+          <el-table-column align="right" label="操作" width="120" fixed="right">
+            <template slot-scope="scope">
+              <el-button v-if="scope.row.parentCategoryId == 0" type="primary" size="mini" icon="el-icon-plus"
+                @click="addDatapat(scope.row)"></el-button>
+              <el-button type="primary" size="mini" icon="el-icon-edit" @click="setDataup(scope.row)"></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
     <el-dialog title="" width="500px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
       :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
       <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
@@ -14,43 +38,22 @@
         <el-button size="mini" @click="formConfirm" type="primary">确 定</el-button>
       </div>
     </el-dialog>
-  </template-page>
+  </div>
 </template>
 
 <script>
-import TemplatePage from '@/components/template/template-page-1.vue'
-import import_mixin from '@/components/template/import_mixin.js'
+import { getToken } from '@/utils/auth'
+import { getClassifyList, addClassify, editClassify, deleteClassify, getClassifyDetail, getSmallType } from '@/api/goods'
+import { ORDER_MAIN_TYPE } from "@/utils/select_data";
+import { materialCategoryList, materialCategoryAdd, materialCategoryUpdate, materialCategoryTree } from "@/api/auxiliaryMaterialClass";
 import { required, mobileRequired, mobile } from '@/components/template/rules_verify.js'
-import { materialCategoryList, materialCategoryAdd, materialCategoryUpdate } from "@/api/auxiliaryMaterialClass";
 export default {
-  components: { TemplatePage },
-  mixins: [import_mixin],
   data() {
     return {
-      // 事件组合
-      optionsEvensGroup: [
-        [
-          [
-            {
-              name: '新建',
-              isRole: true,
-              click: this.addData
-            }
-          ],
-        ],
-      ],
-      // 表格属性
-      tableAttributes: {
-        // 启用勾选列
-        selectColumn: false
+      dataList: [], // 列表数据
+      screenForm: { // 筛选表单数据
+        keyword: '', // 关键词
       },
-      // 表格事件
-      tableEvents: {
-        'selection-change': this.selectionChange
-      },
-      // 勾选选中行
-      recordSelected: [],
-      /** 表单变量 */
       formDialogType: 0,
       formDialogTitles: ["新增", "编辑"],
       formDialog: false,
@@ -147,36 +150,36 @@ export default {
       ]
     }
   },
+  created() {
+    this.getList();
+  },
   methods: {
-    // 列表请求函数
-    getList: materialCategoryList,
-    // 表格列解析渲染数据更改
-    columnParsing(item, defaultData) {
-      return defaultData
-    },
-    // 监听勾选变化
-    selectionChange(data) {
-      this.recordSelected = data
+
+    getList() {
+      materialCategoryTree().then(res => {
+        console.log(res.data, "000")
+        this.dataList = res.data
+      })
     },
-    // 表格操作列
-    operation(h, { row, index, column }) {
-      return (
-        <div class='operation-btns'>
-          <el-button type="text" onClick={() => {
-            Object.assign(this.formData, row)
-            this.formDialogType = 1
-            this.openForm()
-          }}>编辑</el-button>
-        </div>
-      )
+    setDataup(row) {
+      Object.assign(this.formData, row)
+      this.formDialogType = 1
+      this.openForm()
     },
     addData() {
       this.formDialogType = 0
       this.openForm()
     },
+    addDatapat(row) {
+      Object.assign(this.formData, {
+        parentCategoryId: row.categoryId
+      })
+      this.formDialogType = 0
+      this.openForm()
+    },
     openForm() {
       Promise.all([
-        materialCategoryList({ "pageNum": 1, "pageSize": -1, "params": [{"param":"a.status","compare":"=","value":"ON"},{ "param": "a.category_level", "compare": "=", "value": "1" }] })
+        materialCategoryList({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "a.status", "compare": "=", "value": "ON" }, { "param": "a.category_level", "compare": "=", "value": "1" }] })
       ]).then(([res1]) => {
         this.materialCategoryList = res1.data.records
         this.formDialog = true;
@@ -196,13 +199,32 @@ export default {
           }).then(res => {
             this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
             this.formCancel()
-            this.$refs.pageRef.refreshList()
+            this.getList();
           })
         }
       })
     }
+
   }
+
 }
+
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped lang="scss"></style>
+
+<style lang="scss">
+.el-image-viewer__wrapper .el-icon-circle-close {
+  color: #ffffff !important;
+  font-size: 60px;
+}
+
+.el-table__row.expanded {
+  background: #f5f5f5;
+}
+
+th:first-child,
+th:last-child {
+  text-align: center !important;
+}
+</style>

src/views/auxiliaryFittings/auxiliaryDataManagement/auxiliaryMaterialClass/index_cp.vue

@@ -0,0 +1,208 @@
+<template>
+  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
+    :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
+    :operation="operation">
+    <el-dialog title="" width="500px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
+      :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
+      <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+        <zj-form-module :title="formDialogTitles[formDialogType]" label-width="100px" :showPackUp="false"
+          :form-data="formData" :form-items="formItems">
+        </zj-form-module>
+      </zj-form-container>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="formCancel">取 消</el-button>
+        <el-button size="mini" @click="formConfirm" type="primary">确 定</el-button>
+      </div>
+    </el-dialog>
+  </template-page>
+</template>
+
+<script>
+import TemplatePage from '@/components/template/template-page-1.vue'
+import import_mixin from '@/components/template/import_mixin.js'
+import { required, mobileRequired, mobile } from '@/components/template/rules_verify.js'
+import { materialCategoryList, materialCategoryAdd, materialCategoryUpdate } from "@/api/auxiliaryMaterialClass";
+export default {
+  components: { TemplatePage },
+  mixins: [import_mixin],
+  data() {
+    return {
+      // 事件组合
+      optionsEvensGroup: [
+        [
+          [
+            {
+              name: '新建',
+              isRole: true,
+              click: this.addData
+            }
+          ],
+        ],
+      ],
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: false
+      },
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
+      },
+      // 勾选选中行
+      recordSelected: [],
+      /** 表单变量 */
+      formDialogType: 0,
+      formDialogTitles: ["新增", "编辑"],
+      formDialog: false,
+      formData: {
+        companyWechatName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
+        status: "ON",
+        parentCategoryId: "",
+        categoryName: "",
+        sort: "",
+        categoryLevel: 2
+      },
+      materialCategoryList: []
+    }
+  },
+  computed: {
+    // 更多参数
+    moreParameters() {
+      return []
+    },
+    formItems() {
+      return [
+        {
+          md: 24,
+          isShow: true,
+          name: 'el-input',
+          attributes: { placeholder: '请输入', disabled: true },
+          formItemAttributes: {
+            label: '所属商户',
+            prop: 'companyWechatName',
+            rules: []
+          }
+        },
+        ...(() => {
+          if (this.formData.categoryLevel == 2) {
+            return [{
+              md: 24,
+              isShow: true,
+              name: 'el-select',
+              options: [...this.materialCategoryList, { categoryName: "无", categoryId: "0" }],
+              labelKey: "categoryName",
+              valueKey: "categoryId",
+              attributes: { placeholder: '请输入', disabled: this.formDialogType != 0 },
+              formItemAttributes: {
+                label: '父级分类',
+                prop: 'parentCategoryId',
+                rules: []
+              },
+              events: {
+                change: (val) => {
+                  if (val && val != 0) {
+                    this.formData.parentCategoryName = this.materialCategoryList.find(item => item.categoryId == val).categoryName
+                  } else {
+                    this.formData.parentCategoryName = ""
+                  }
+                  console.log(val)
+                }
+              }
+            }]
+          }
+          return []
+        })(),
+        {
+          md: 24,
+          isShow: true,
+          name: 'el-input',
+          attributes: { placeholder: '请输入' },
+          formItemAttributes: {
+            label: '分类名称',
+            prop: 'categoryName',
+            rules: [...required]
+          }
+        }, {
+          md: 24,
+          isShow: true,
+          name: 'el-radio',
+          options: [{ label: "启用", value: "ON" }, { label: "禁用", value: "OFF" }],
+          attributes: {},
+          formItemAttributes: {
+            label: '状态',
+            prop: 'status',
+            rules: [...required]
+          },
+        }, {
+          md: 24,
+          isShow: true,
+          name: 'el-input',
+          attributes: { placeholder: '请输入' },
+          formItemAttributes: {
+            label: '排序',
+            prop: 'sort',
+            rules: []
+          }
+        },
+      ]
+    }
+  },
+  methods: {
+    // 列表请求函数
+    getList: materialCategoryList,
+    // 表格列解析渲染数据更改
+    columnParsing(item, defaultData) {
+      return defaultData
+    },
+    // 监听勾选变化
+    selectionChange(data) {
+      this.recordSelected = data
+    },
+    // 表格操作列
+    operation(h, { row, index, column }) {
+      return (
+        <div class='operation-btns'>
+          <el-button type="text" onClick={() => {
+            Object.assign(this.formData, row)
+            this.formDialogType = 1
+            this.openForm()
+          }}>编辑</el-button>
+        </div>
+      )
+    },
+    addData() {
+      this.formDialogType = 0
+      this.openForm()
+    },
+    openForm() {
+      Promise.all([
+        materialCategoryList({ "pageNum": 1, "pageSize": -1, "params": [{"param":"a.status","compare":"=","value":"ON"},{ "param": "a.category_level", "compare": "=", "value": "1" }] })
+      ]).then(([res1]) => {
+        this.materialCategoryList = res1.data.records
+        this.formDialog = true;
+      })
+    },
+    formCancel() {
+      this.$refs.formRef.$refs.inlineForm.clearValidate()
+      this.$data.formData = this.$options.data().formData
+      this.formDialog = false
+    },
+    formConfirm() {
+      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
+        if (valid) {
+          ([materialCategoryAdd, materialCategoryUpdate][this.formDialogType])({
+            ...this.formData,
+            categoryLevel: !this.formData.parentCategoryId || this.formData.parentCategoryId == 0 ? 1 : 2
+          }).then(res => {
+            this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
+            this.formCancel()
+            this.$refs.pageRef.refreshList()
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>