no message

src/App.vue

@@ -74,6 +74,7 @@ export default {
     }
   }
 }
+
 .cartographer {
   .el-dialog__wrapper {
     width: 100% !important;

src/api/recycleCategoryCenter.js

@@ -0,0 +1,105 @@
+import request, { postBlob, getBlob, handleImport } from '@/utils/request'
+
+export function serviceCategoryList(data) {
+  return request({
+    url: `/serviceCategory/list?moduleId=${data.moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+export function serviceCategoryListExport(data, name) {
+  return postBlob({
+    url: '/serviceCategory/list/export',
+    data,
+    name
+  })
+}
+
+export function serviceCategoryAdd(data) {
+  return request({
+    url: '/serviceCategory/add',
+    method: 'post',
+    data
+  })
+}
+
+export function serviceCategoryUpdate(data) {
+  return request({
+    url: '/serviceCategory/update',
+    method: 'post',
+    data
+  })
+}
+
+export function serviceCategoryDel(params) {
+  return request({
+    url: '/serviceCategory/del',
+    method: 'post',
+    params
+  })
+}
+
+export function serviceCategoryDetail(params) {
+  return request({
+    url: '/serviceCategory/detail',
+    method: 'post',
+    params
+  })
+}
+
+export function serviceCategoryItemDel(params) {
+  return request({
+    url: '/serviceCategory/itemDel',
+    method: 'post',
+    params
+  })
+}
+
+export function serviceCategoryListSpec(data) {
+  return request({
+    url: `/serviceCategory/listSpec?moduleId=${data.moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+export function serviceCategoryListSpecExport(data, name) {
+  return postBlob({
+    url: '/serviceCategory/listSpec/export',
+    data,
+    name
+  })
+}
+
+export function serviceCategoryListMinus(data) {
+  return request({
+    url: `/serviceCategory/listMinus?moduleId=${data.moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+export function serviceCategoryListMinusExport(data, name) {
+  return postBlob({
+    url: '/serviceCategory/listMinus/export',
+    data,
+    name
+  })
+}
+
+export function serviceCategoryItemAdd(data) {
+  return request({
+    url: '/serviceCategory/itemAdd',
+    method: 'post',
+    data
+  })
+}
+
+export function serviceCategoryItemUpdate(data) {
+  return request({
+    url: '/serviceCategory/itemUpdate',
+    method: 'post',
+    data
+  })
+}

src/utils/util.js

@@ -4,10 +4,10 @@ import { getToken } from '@/utils/auth'
 
 export function dateFormat2(format, date) {
   if (typeof date === 'string') {
-    date = new Date(date);
+    date = new Date(date)
   }
-  const we = date.getDay(); // 星期
-  const qut = Math.floor((date.getMonth() + 3) / 3).toString(); // 季度
+  const we = date.getDay() // 星期
+  const qut = Math.floor((date.getMonth() + 3) / 3).toString() // 季度
   const opt = {
     'Y+': date.getFullYear().toString(), // 年
     'm+': (date.getMonth() + 1).toString(), // 月(月份从0开始，要+1)
@@ -15,8 +15,8 @@ export function dateFormat2(format, date) {
     'H+': date.getHours().toString(), // 时
     'M+': date.getMinutes().toString(), // 分
     'S+': date.getSeconds().toString(), // 秒
-    'q+': qut, // 季度
-  };
+    'q+': qut // 季度
+  }
   const week = {
     // 中文数字 (星期)
     0: '日',
@@ -25,57 +25,47 @@ export function dateFormat2(format, date) {
     3: '三',
     4: '四',
     5: '五',
-    6: '六',
-  };
+    6: '六'
+  }
   const quarter = {
     // 中文数字（季度）
     1: '一',
     2: '二',
     3: '三',
-    4: '四',
-  };
+    4: '四'
+  }
   if (/(W+)/.test(format)) {
     format = format.replace(
       RegExp.$1,
-      RegExp.$1.length > 1
-        ? RegExp.$1.length > 2
-          ? '星期' + week[we]
-          : '周' + week[we]
-        : week[we]
-    );
+      RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' + week[we] : '周' + week[we]) : week[we]
+    )
   }
   if (/(Q+)/.test(format)) {
     // 输入一个Q，只输出一个中文数字，输入4个Q，则拼接上字符串
-    format = format.replace(
-      RegExp.$1,
-      RegExp.$1.length === 4 ? '第' + quarter[qut] + '季度' : quarter[qut]
-    );
+    format = format.replace(RegExp.$1, RegExp.$1.length === 4 ? '第' + quarter[qut] + '季度' : quarter[qut])
   }
   for (const k in opt) {
-    const r = new RegExp('(' + k + ')').exec(format);
+    const r = new RegExp('(' + k + ')').exec(format)
     if (r) {
       // 若输入的长度不为1，则前面补零
-      format = format.replace(
-        r[1],
-        RegExp.$1.length === 1 ? opt[k] : opt[k].padStart(RegExp.$1.length, '0')
-      );
+      format = format.replace(r[1], RegExp.$1.length === 1 ? opt[k] : opt[k].padStart(RegExp.$1.length, '0'))
     }
   }
-  return format;
+  return format
 }
 
 // 定义一个函数将树形数据转换为列表
-export function treeToList(tree, key = "children", list = []) {
+export function treeToList(tree, key = 'children', list = []) {
   // 将当前节点添加到列表中
-  list.push(...tree);
+  list.push(...tree)
   // 遍历当前节点的子节点
   tree?.forEach(item => {
     if (item?.[key]?.length) {
       // 递归调用，将子节点及其后代节点添加到列表中
-      treeToList(item?.[key], key, list);
+      treeToList(item?.[key], key, list)
     }
-  });
-  return list;
+  })
+  return list
 }
 
 /**
@@ -84,21 +74,21 @@ export function treeToList(tree, key = "children", list = []) {
  * @returns {Object}
  */
 export function deleteEmptyObj(obj) {
-  let newObj = obj;
+  let newObj = obj
   for (var key in newObj) {
     if (newObj[key] === '' || newObj[key] === null || newObj[key] === undefined) {
       delete newObj[key]
     }
   }
-  return newObj;
+  return newObj
 }
 
 /**
- * 
+ *
  * @param {*} array 要查询的数组
  * @param {*} attr 要查询的字段
  * @param {*} val 要查询的字段值
- * @returns 
+ * @returns
  */
 export function findElem(array, attr, val) {
   if (!array || !array.length) {
@@ -106,13 +96,12 @@ export function findElem(array, attr, val) {
   }
   for (var i = 0; i < array.length; i++) {
     if (array[i][attr] == val) {
-      return i; //返回当前索引值
+      return i //返回当前索引值
     }
   }
-  return -1;
+  return -1
 }
 
-
 /**
  * 生成带参数的链接
  * @param {String} url
@@ -483,3 +472,45 @@ export function getUrlParam() {
   }
   return obj
 }
+
+function setShowElement(name, row) {
+  if (typeof name == 'function') {
+    return name(row || {})
+  } else {
+    return !!name
+  }
+}
+
+export function listToTree(list, parentIdAttribute, conditions = true) {
+  const map = {}
+  const roots = []
+
+  list.forEach(item => {
+    map[item.id] = { ...item, children: [] }
+  })
+
+  Object.values(map).forEach(item => {
+    const parentId = item[parentIdAttribute]
+    if (parentId !== null && map[parentId]) {
+      map[parentId].children.push(item)
+    } else if (setShowElement(conditions, item)) {
+      roots.push(item)
+    }
+  })
+
+  // 递归函数，对每个节点的 children 属性进行排序
+  function sortChildren(node) {
+    if (node.children.length > 0) {
+      node.children.sort((a, b) => Number(a.sort) - Number(b.sort)) // 按 sort 字段排序
+      node.children.forEach(child => sortChildren(child)) // 递归调用，对每个子节点进行排序
+    }
+  }
+
+  // 对根节点进行排序
+  roots.sort((a, b) => Number(a.sort) - Number(b.sort))
+
+  // 对每个根节点的子节点进行排序
+  roots.forEach(root => sortChildren(root))
+
+  return roots
+}

src/views/workOrder/basicConfiguration/recycleCategoryServer/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <zj-page-container>
+    <div class="tab">
+      <el-radio-group v-model="tabType" size="small" @change="tabTypeChange">
+        <el-radio-button label="mainClass">回收产品分类</el-radio-button>
+        <el-radio-button label="categoryAllocation">回收品类配置</el-radio-button>
+      </el-radio-group>
+    </div>
+    <zj-page-fill>
+      <mainClass v-if="tabTypeCk == 'mainClass'" key="mainClass" />
+      <categoryAllocation v-if="tabTypeCk == 'categoryAllocation'" key="categoryAllocation" />
+    </zj-page-fill>
+  </zj-page-container>
+</template>
+
+<script>
+import { EventBus } from '@/utils/eventBus'
+import mainClass from './pages/mainClass.vue'
+import categoryAllocation from './pages/categoryAllocation.vue'
+export default {
+  components: { mainClass, categoryAllocation },
+  data() {
+    return {
+      tabType: 'mainClass',
+      tabTypeCk: 'mainClass'
+    }
+  },
+  methods: {
+    tabTypeChange() {
+      this.$nextTick(() => {
+        this.tabTypeCk = this.tabType
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tab {
+  padding: 20px 20px 0 20px;
+}
+</style>

src/views/workOrder/basicConfiguration/recycleCategoryServer/mixins/formItems.js

@@ -0,0 +1,211 @@
+import {
+  serviceCategoryAdd,
+  serviceCategoryUpdate,
+  serviceCategoryDel,
+  serviceCategoryDetail
+} from '@/api/recycleCategoryCenter.js'
+import ImageUpload from '@/components/file-upload'
+import { required } from '@/components/template/rules_verify.js'
+export default {
+  components: { ImageUpload },
+  data() {
+    return {
+      formDialog: false,
+      formData: {
+        leven: 0,
+        name: '',
+        pid: 0,
+        pidName: '',
+        sort: 0,
+        indexSort: 0,
+        status: 'ON',
+        type: '',
+        typeAttribute: '',
+        typeOption: '',
+        url: '',
+        url: []
+      }
+    }
+  },
+  computed: {
+    formItems() {
+      return [
+        {
+          isShow: !!~[2, 3].indexOf(this.formData.leven),
+          name: 'el-select',
+          md: 24,
+          formItemAttributes: {
+            label: '上级名称',
+            prop: 'pid',
+            propName: 'pidName',
+            rules: [...required]
+          },
+          options: this.list.map(item => ({ label: item.name, value: item.id })),
+          attributes: { disabled: true, clearable: true, filterable: true, placeholder: '请选择' }
+        },
+        {
+          name: 'el-input',
+          md: 24,
+          attributes: { disabled: false, placeholder: '请输入', maxlength: 11 },
+          formItemAttributes: {
+            label: ['', '回收类目', '产品大类', '类型名称'][this.formData.leven],
+            prop: 'name',
+            rules: [...required]
+          }
+        },
+        {
+          md: 24,
+          isShow: !!~[2].indexOf(this.formData.leven),
+          name: 'slot-component',
+          formItemAttributes: {
+            prop: 'url',
+            label: '分类图片',
+            rules: [...required]
+          },
+          render: (h, { props, onInput }) => {
+            var { value } = props
+            return <ImageUpload fileList={this.formData.url} limit={1} isEdit={true} />
+          }
+        },
+        {
+          isShow: !!~[3].indexOf(this.formData.leven),
+          md: 24,
+          name: 'el-radio',
+          options: [
+            { label: '单选', value: 'SIGIN' },
+            { label: '多选', value: 'MANY' }
+          ],
+          attributes: { disabled: this.formData.id ? true : false },
+          formItemAttributes: {
+            label: '选项属性',
+            prop: 'typeOption',
+            rules: [...required]
+          }
+        },
+        {
+          isShow: !!~[3].indexOf(this.formData.leven),
+          md: 24,
+          name: 'el-radio',
+          options: [
+            { label: '规格', value: 'SPEC' },
+            { label: '增减参考金额', value: 'DED' }
+            // { label: '其他', value: 'OTHER' }
+          ],
+          attributes: { disabled: this.formData.id ? true : false },
+          formItemAttributes: {
+            label: '属性类型',
+            prop: 'typeAttribute',
+            rules: [...required]
+          }
+        },
+        {
+          md: 24,
+          name: 'el-radio',
+          options: [
+            { label: '有效', value: 'ON' },
+            { label: '无效', value: 'OFF' }
+          ],
+          attributes: {},
+          formItemAttributes: {
+            label: '状态',
+            prop: 'status',
+            rules: [...required]
+          }
+        },
+        {
+          name: 'el-input',
+          md: 12,
+          attributes: { disabled: false, placeholder: '请输入', maxlength: 11 },
+          formItemAttributes: {
+            label: '排序',
+            prop: 'sort',
+            rules: []
+          }
+        },
+        {
+          isShow: !!~[2].indexOf(this.formData.leven),
+          name: 'el-input',
+          md: 12,
+          attributes: { disabled: false, placeholder: '请输入', maxlength: 11 },
+          formItemAttributes: {
+            label: '首页顺序',
+            prop: 'indexSort',
+            rules: []
+          }
+        }
+      ]
+    }
+  },
+  methods: {
+    // 添加一级
+    addL1Class() {
+      this.formData.leven = 1
+      this.formDialog = true
+    },
+    // 添加二三级
+    addChClass(row) {
+      this.formData.leven = row.leven + 1
+      this.formData.pid = row.id
+      this.formDialog = true
+    },
+    // 编辑
+    editClass(row) {
+      serviceCategoryDetail({ id: row.id }).then(res => {
+        Object.assign(
+          this.formData,
+          { ...res.data },
+          {
+            url: res.data.url ? res.data.url.split(',').map(u => ({ url: u })) : [],
+            children: undefined
+          }
+        )
+        this.formDialog = true
+      })
+    },
+    // 删除
+    handleDelete(row) {
+      serviceCategoryDel({ id: row.id }).then(res => {
+        this.$message({
+          type: 'success',
+          message: `删除成功!`
+        })
+        this.getList()
+      })
+    },
+    // 关闭窗口
+    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) {
+          ;[serviceCategoryAdd, serviceCategoryUpdate]
+            [this.formData.id ? 1 : 0]({
+              ...this.formData,
+              url: this.formData.url.map(item => item.url).join(','),
+              ...(() => {
+                if (this.formData.leven == 3) {
+                  return {
+                    categoryType: 'A'
+                  }
+                } else {
+                  return {}
+                }
+              })()
+            })
+            .then(res => {
+              this.$message({
+                type: 'success',
+                message: `保存成功!`
+              })
+              this.formCancel()
+              this.getList()
+            })
+        }
+      })
+    }
+  }
+}

src/views/workOrder/basicConfiguration/recycleCategoryServer/pages/categoryAllocation.vue

@@ -0,0 +1,508 @@
+<template>
+  <div style="width: 100%; height: 100%; box-sizing: border-box; padding: 20px">
+    <zj-page-container direction="row">
+      <div class="catalogue" style="padding-right: 0px">
+        <zj-page-container>
+          <div style="padding: 0 10px 10px; display: flex">
+            <el-button
+              icon="el-icon-refresh-right"
+              size="small"
+              @click="refreshDepartment"
+              style="padding: 9px 10px; margin-right: 6px"
+            ></el-button>
+            <el-input placeholder="输入关键字进行过滤" size="small" clearable v-model="filterText"> </el-input>
+          </div>
+          <zj-page-fill>
+            <el-tree
+              :data="listTree"
+              :props="defaultProps"
+              default-expand-all
+              highlight-current
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              @node-click="handleNodeClick"
+              node-key="id"
+              ref="listTree"
+            >
+              <div class="custom-tree-node" slot-scope="{ node, data }">
+                <span>
+                  <i
+                    :class="
+                      data.children && data.children.length > 0 ? 'el-icon-folder-opened' : 'el-icon-document-remove'
+                    "
+                  ></i>
+                  <span>{{ node.label }}</span>
+                </span>
+                <span v-if="data.leven == 2 || data.leven == 3">
+                  <el-button v-if="data.leven == 2" type="text" size="mini" @click="addChClass(data)"> 添加 </el-button>
+                  <el-button v-if="data.leven == 3" type="text" size="mini" @click="editClass(data)"> 编辑 </el-button>
+                  <el-popconfirm
+                    v-if="data.leven == 3"
+                    style="margin-left: 10px"
+                    title="确定删除吗？"
+                    @confirm="handleDelete(data)"
+                  >
+                    <el-button v-if="data.leven == 3" slot="reference" size="mini" type="text"> 删除 </el-button>
+                  </el-popconfirm>
+                </span>
+              </div>
+            </el-tree>
+          </zj-page-fill>
+        </zj-page-container>
+      </div>
+      <zj-page-fill v-loading="!showList">
+        <template-page
+          v-if="showList && item && item.typeAttribute"
+          ref="pageRef"
+          :getList="getListRight"
+          :exportList="exportList"
+          :columnParsing="columnParsing"
+          :optionsEvensGroup="optionsEvensGroup"
+          :tableAttributes="tableAttributes"
+          :tableEvents="tableEvents"
+          :operationColumnWidth="200"
+          :operation="operation()"
+          :recordsHook="recordsHook"
+          :replaceOrNotMap="true"
+          :customModuleName="`${$route.meta.title}_${
+            item ? ['规格', '增减参考金额'][typeAttribute[item.typeAttribute]] : ''
+          }`"
+          :setModuleId="`${$route.meta.moduleId}_${item ? item.typeAttribute : ''}`"
+          :sortMethod="sortMethod"
+        >
+        </template-page>
+      </zj-page-fill>
+    </zj-page-container>
+    <el-dialog
+      :title="formData.id ? '编辑' : '新建'"
+      :modal="true"
+      width="600px"
+      :visible.sync="formDialog"
+      :before-close="formCancel"
+      :close-on-click-modal="false"
+    >
+      <zj-form-container v-if="formDialog" ref="formRef" :form-data="formData" :styleSwitch="false">
+        <zj-form-module
+          :title="formData.id ? '编辑' : '新建'"
+          label-width="120px"
+          :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>
+  </div>
+</template>
+
+<script>
+import import_mixin from '@/components/template/import_mixin.js'
+import TemplatePage from '@/components/template/template-page-1.vue'
+import { listToTree } from '@/utils/util'
+import {
+  serviceCategoryList,
+  serviceCategoryListSpec,
+  serviceCategoryListSpecExport,
+  serviceCategoryListMinus,
+  serviceCategoryListMinusExport,
+  serviceCategoryDetail,
+  serviceCategoryItemAdd,
+  serviceCategoryItemUpdate,
+  serviceCategoryItemDel
+} from '@/api/recycleCategoryCenter.js'
+import formItems from '../mixins/formItems.js'
+export default {
+  mixins: [import_mixin, formItems],
+  components: {
+    TemplatePage
+  },
+  data() {
+    return {
+      // 事件组合
+      optionsEvensGroup: [],
+      // 表格属性
+      tableAttributes: {},
+      // 表格事件
+      tableEvents: {},
+      // 重新加载列表
+      showList: true,
+      //**部门树 */
+      filterText: '',
+      list: [],
+      listTree: [],
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      item: null,
+      typeAttribute: {
+        SPEC: 0,
+        DED: 1
+      }
+    }
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.listTree.filter(val)
+    },
+    item(val) {
+      this.showList = false
+      if (val) {
+        this.$nextTick(() => {
+          this.showList = true
+        })
+      }
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    sortMethod(obj1, obj2, jname, type) {
+      if (type == 'descending' && (!obj1.serviceCategoryItemId || !obj2.serviceCategoryItemId)) {
+        return !obj1.serviceCategoryItemId ? 1 : -1
+      } else if (type == 'ascending' && (!obj1.serviceCategoryItemId || !obj2.serviceCategoryItemId)) {
+        return !obj1.serviceCategoryItemId ? -1 : 1
+      } else {
+        var char1 = obj1[jname].toUpperCase()
+        var char2 = obj2[jname].toUpperCase()
+        return char1.charCodeAt(0) - char2.charCodeAt(0)
+      }
+    },
+    getList() {
+      serviceCategoryList({ pageNum: 1, pageSize: -1, params: [] }).then(res => {
+        this.list = res.data.records
+        this.listTree = listToTree(res.data.records, 'pid')
+        this.listTree.map(item => {
+          ;(item.children || []).map(item2 => {
+            ;(item2.children || []).map(item3 => {
+              if (!this.item) {
+                this.item = item3
+                serviceCategoryDetail({ id: item3.id }).then(res => {
+                  this.item = res.data
+                  this.$nextTick(() => {
+                    this.$refs.listTree.setCurrentKey(this.item?.id || '')
+                  })
+                })
+              }
+            })
+          })
+        })
+      })
+    },
+    refreshDepartment() {
+      this.getList()
+    },
+    filterNode(value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    // 选择部门
+    handleNodeClick(data) {
+      if (data.leven === 3) {
+        serviceCategoryDetail({ id: data.id }).then(res => {
+          this.item = res.data
+        })
+      } else {
+        this.$refs.listTree.setCurrentKey(this.item?.id || '')
+      }
+    },
+    recordsHook(list) {
+      return [
+        {
+          categoryName: this.item.name,
+          dictName: '',
+          price: '',
+          servicePrice: '',
+          priceMax: '',
+          priceMin: '',
+          priceMinus: '',
+          remark: '',
+          serviceCategoryId: this.item?.id || '',
+          serviceCategoryItemId: '',
+          status: 'ON',
+          type: '',
+          websitId: '',
+          websitName: '',
+          isRowEdit: true
+        },
+        ...list.map(item => ({ ...item, isRowEdit: false }))
+      ]
+    },
+    exportList(...p) {
+      return [serviceCategoryListSpecExport, serviceCategoryListMinusExport][
+        this.typeAttribute[this.item.typeAttribute]
+      ](...p)
+    },
+    // 列表请求函数
+    getListRight(p, cb) {
+      p.params.push({ param: 'service_category_id', compare: '=', value: this.item.id })
+      cb && cb(p)
+      return [serviceCategoryListSpec, serviceCategoryListMinus][this.typeAttribute[this.item.typeAttribute]](p)
+    },
+    // 表格列解析渲染数据更改
+    columnParsing(item, defaultData) {
+      if (item.jname === 'dictName') {
+        defaultData.render = (h, { row, index, column }) => {
+          if (row.isRowEdit) {
+            return (
+              <div class="redbordererr">
+                <el-input
+                  value={row[column.columnAttributes.prop]}
+                  onInput={val => {
+                    row[column.columnAttributes.prop] = val
+                  }}
+                  placeholder="请输入内容"
+                ></el-input>
+              </div>
+            )
+          } else {
+            return <div style="padding:0 6px;">{row[column.columnAttributes.prop]}</div>
+          }
+        }
+      }
+      if (item.jname === 'remark') {
+        defaultData.render = (h, { row, index, column }) => {
+          if (row.isRowEdit) {
+            return (
+              <div class="redbordererr">
+                <el-input
+                  value={row[column.columnAttributes.prop]}
+                  onInput={val => {
+                    row[column.columnAttributes.prop] = val
+                  }}
+                  placeholder="请输入内容"
+                ></el-input>
+              </div>
+            )
+          } else {
+            return <div style="padding:0 6px;">{row[column.columnAttributes.prop]}</div>
+          }
+        }
+      }
+      if (item.jname === 'status') {
+        defaultData.render = (h, { row, index, column }) => {
+          if (row.isRowEdit) {
+            return (
+              <div class="redbordererr">
+                <el-select
+                  value={row[column.columnAttributes.prop]}
+                  onInput={val => {
+                    row[column.columnAttributes.prop] = val
+                  }}
+                  placeholder="请选择"
+                >
+                  {[
+                    { label: '有效', value: 'ON' },
+                    { label: '无效', value: 'OFF' }
+                  ].map((item, index_) => (
+                    <el-option key={index_} label={item.label} value={item.value}></el-option>
+                  ))}
+                </el-select>
+              </div>
+            )
+          } else {
+            return <div style="padding:0 6px;">{row[column.columnAttributes.prop]}</div>
+          }
+        }
+      }
+      if (this.typeAttribute[this.item.typeAttribute] === 0) {
+        if (item.jname === 'servicePrice') {
+          defaultData.render = (h, { row, index, column }) => {
+            if (row.isRowEdit) {
+              return (
+                <div class="redbordererr">
+                  <el-input
+                    value={row[column.columnAttributes.prop]}
+                    onInput={val => {
+                      row[column.columnAttributes.prop] = val
+                    }}
+                    placeholder="请输入内容"
+                    type="number"
+                  ></el-input>
+                </div>
+              )
+            } else {
+              return <div style="padding:0 6px;">{row[column.columnAttributes.prop]}</div>
+            }
+          }
+        }
+        if (item.jname === 'price') {
+          defaultData.render = (h, { row, index, column }) => {
+            if (row.isRowEdit) {
+              return (
+                <div class="redbordererr">
+                  <el-input
+                    value={row[column.columnAttributes.prop]}
+                    onInput={val => {
+                      row[column.columnAttributes.prop] = val
+                    }}
+                    placeholder="请输入内容"
+                    type="number"
+                  ></el-input>
+                </div>
+              )
+            } else {
+              return <div style="padding:0 6px;">{row[column.columnAttributes.prop]}</div>
+            }
+          }
+        }
+      } else if (this.typeAttribute[this.item.typeAttribute] === 1) {
+        if (item.jname === 'priceMinus') {
+          defaultData.render = (h, { row, index, column }) => {
+            if (row.isRowEdit) {
+              return (
+                <div class="redbordererr">
+                  <el-input
+                    value={row[column.columnAttributes.prop]}
+                    onInput={val => {
+                      row[column.columnAttributes.prop] = val
+                    }}
+                    placeholder="请输入内容"
+                    type="number"
+                  ></el-input>
+                </div>
+              )
+            } else {
+              return <div style="padding:0 6px;">{row[column.columnAttributes.prop]}</div>
+            }
+          }
+        }
+      }
+      return defaultData
+    },
+    operation() {
+      return (h, { row, index, column }) => {
+        return (
+          <div class="operation-btns">
+            {index === 0 || row.isRowEdit ? (
+              <zj-button
+                useLoading={false}
+                parameter={[row]}
+                buttonAttributes={{
+                  size: 'mini',
+                  type: 'primary'
+                }}
+                buttonEvents={{
+                  click: row => {
+                    if (this.jiaoyan(row)) {
+                      ;[serviceCategoryItemAdd, serviceCategoryItemUpdate]
+                        [row.serviceCategoryItemId ? 1 : 0]({
+                          ...row,
+                          status: row.status == '有效' ? 'ON' : row.status == '无效' ? 'OFF' : row.status
+                        })
+                        .then(res => {
+                          this.$message({
+                            type: 'success',
+                            message: `保存成功!`
+                          })
+                          this.$refs.pageRef.refreshList()
+                        })
+                    }
+                  }
+                }}
+              >
+                保存
+              </zj-button>
+            ) : null}
+            {!row.isRowEdit ? (
+              <zj-button
+                useLoading={false}
+                parameter={[row]}
+                buttonAttributes={{
+                  size: 'mini',
+                  type: 'primary'
+                }}
+                buttonEvents={{
+                  click: row => {
+                    row.isRowEdit = true
+                  }
+                }}
+              >
+                编辑
+              </zj-button>
+            ) : null}
+            {index !== 0 ? (
+              <el-popconfirm
+                icon="el-icon-info"
+                icon-color="red"
+                title="这是一段内容确定删除吗？"
+                onConfirm={() => {
+                  serviceCategoryItemDel({
+                    id: row.serviceCategoryItemId
+                  }).then(res => {
+                    this.$message({
+                      type: 'success',
+                      message: `删除成功!`
+                    })
+                    this.$refs.pageRef.refreshList()
+                  })
+                }}
+              >
+                <zj-button
+                  slot="reference"
+                  buttonAttributes={{
+                    size: 'mini',
+                    type: 'danger'
+                  }}
+                >
+                  删除
+                </zj-button>
+              </el-popconfirm>
+            ) : null}
+          </div>
+        )
+      }
+    },
+    jiaoyan(row) {
+      try {
+        ;[
+          ['dictName', 'price', 'servicePrice'],
+          ['dictName', 'priceMinus']
+        ][this.typeAttribute[this.item.typeAttribute]].map(key => {
+          if (row[key] === undefined || row[key] === null || row[key] === '') {
+            throw new Error(
+              {
+                dictName: '字典值',
+                price: '整机参考价格（元/台）',
+                servicePrice: '导购分佣',
+                priceMinus: '增减参考金额（元/台）'
+              }[key]
+            )
+          }
+        })
+        return true
+      } catch (err) {
+        this.$message({
+          type: 'error',
+          message: `缺少参数【${err.message}】!`
+        })
+        return false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.catalogue {
+  width: 260px;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+</style>

src/views/workOrder/basicConfiguration/recycleCategoryServer/pages/mainClass.vue

@@ -0,0 +1,140 @@
+<template>
+  <div style="width: 100%; height: 100%; box-sizing: border-box; padding: 20px">
+    <zj-page-container>
+      <div
+        style="
+          box-sizing: border-box;
+          padding-bottom: 10px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        "
+      >
+        <el-button size="mini" type="primary" @click="addL1Class">添加回收类目</el-button>
+        <div>
+          <span style="display: inline-block; width: 300px"
+            ><el-input size="mini" v-model="keyWork" placeholder="模糊搜索"></el-input
+          ></span>
+        </div>
+      </div>
+      <zj-page-fill>
+        <el-table
+          size="mini"
+          :data="showList"
+          row-key="id"
+          border
+          default-expand-all
+          :tree-props="{ children: 'children' }"
+        >
+          <el-table-column prop="name" label="回收类目名称" min-width="150" />
+          <el-table-column prop="url" label="图片">
+            <template slot-scope="scope">
+              <el-image
+                v-if="scope.row.url"
+                fit="contain"
+                style="width: 100px; height: 100px"
+                :src="$showImgUrl(scope.row.url)"
+                :preview-src-list="[$showImgUrl(scope.row.url)]"
+              >
+              </el-image>
+            </template>
+          </el-table-column>
+          <el-table-column prop="status" label="状态" width="120">
+            <template slot-scope="scope">
+              {{ { ON: '有效', OFF: '无效' }[scope.row.status] }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="sort" label="排序" width="120" />
+          <el-table-column prop="indexSort" label="首页顺序" width="120" />
+          <el-table-column prop="createBy" label="创建人" width="140" />
+          <el-table-column prop="createTime" label="创建时间" width="140" />
+          <el-table-column prop="updateBy" label="修改人" width="140" />
+          <el-table-column align="right" label="操作" width="180" fixed="right">
+            <template slot-scope="scope">
+              <el-button
+                v-if="scope.row.leven < 2"
+                type="primary"
+                size="mini"
+                icon="el-icon-plus"
+                @click="addChClass(scope.row)"
+              />
+              <el-button type="primary" size="mini" icon="el-icon-edit" @click="editClass(scope.row)" />
+              <el-popconfirm style="margin-left: 10px" title="确定删除吗？" @confirm="handleDelete(scope.row)">
+                <el-button slot="reference" size="mini" icon="el-icon-delete" />
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+      </zj-page-fill>
+    </zj-page-container>
+    <el-dialog
+      :title="formData.id ? '编辑' : '新建'"
+      :modal="true"
+      width="600px"
+      :visible.sync="formDialog"
+      :before-close="formCancel"
+      :close-on-click-modal="false"
+    >
+      <zj-form-container v-if="formDialog" ref="formRef" :form-data="formData" :styleSwitch="false">
+        <zj-form-module
+          :title="formData.id ? '编辑' : '新建'"
+          label-width="120px"
+          :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>
+  </div>
+</template>
+
+<script>
+import { EventBus } from '@/utils/eventBus'
+import { listToTree } from '@/utils/util'
+import {
+  serviceCategoryList,
+  serviceCategoryListExport,
+  serviceCategoryAdd,
+  serviceCategoryUpdate,
+  serviceCategoryDel
+} from '@/api/recycleCategoryCenter.js'
+import ImageUpload from '@/components/file-upload'
+import { required } from '@/components/template/rules_verify.js'
+import formItems from '../mixins/formItems.js'
+export default {
+  components: { ImageUpload },
+  mixins: [formItems],
+  data() {
+    return {
+      list: [],
+      keyWork: ''
+    }
+  },
+  computed: {
+    showList() {
+      return listToTree(
+        this.list.filter(item => !!~item.name.indexOf(this.keyWork)),
+        'pid'
+      )
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    // 获取列表
+    getList() {
+      serviceCategoryList({ pageNum: 1, pageSize: -1, params: [] }).then(res => {
+        this.list = res.data.records.filter(item => item.leven < 3)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>