我们发布啦

admin/src/components/Category/edit.vue

@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <el-form ref="editPram" :model="editPram" label-width="130px">
+      {{biztype}}
+      <el-form-item
+        label="分类名称"
+        prop="name"
+        :rules="[{ required:true,message:'请输入分类名称',trigger:['blur','change'] }]"
+      >
+        <el-input v-model="editPram.name"  maxlength="20" placeholder="分类名称" />
+      </el-form-item>
+      <el-form-item label="URL">
+        <el-input v-model="editPram.url" placeholder="URL" />
+      </el-form-item>
+      <el-form-item label="父级" v-if="biztype.value!==3">
+        <el-cascader v-model="editPram.pid" :options="parentOptions" :props="categoryProps" style="width:100%" />
+      </el-form-item>
+      <el-form-item label="菜单图标" v-if="biztype.value===5">
+        <el-input placeholder="请选择菜单图标" v-model="editPram.extra">
+          <el-button slot="append" icon="el-icon-circle-plus-outline" @click="addIcon"></el-button>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="分类图标(180*180)" v-if="biztype.value === 1 || biztype.value === 3">
+        <div class="upLoadPicBox" @click="modalPicTap('1')">
+          <div v-if="editPram.extra" class="pictrue"><img :src="editPram.extra"></div>
+          <div v-else class="upLoad">
+            <i class="el-icon-camera cameraIconfont" />
+          </div>
+        </div>
+      </el-form-item>
+      <el-form-item label="排序">
+        <el-input-number v-model="editPram.sort"/>
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-switch v-model="editPram.status" :active-value="true" :inactive-value="false" />
+      </el-form-item>
+      <el-form-item label="类型" prop="type" :rules="[{required:true,message:'请选择类型',trigger:['blur']}]">
+        <el-select v-model="editPram.type" disabled>
+          <el-option
+            v-for="item in constants.categoryType"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="扩展字段" v-if="biztype.value !== 1 && biztype.value !== 3 && biztype.value !== 5">
+        <el-input v-model="editPram.extra" type="textarea" placeholder="扩展字段" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" :loading="loadingBtn" @click="handlerSubmit('editPram')">确定</el-button>
+        <el-button @click="close">取消</el-button>
+      </el-form-item>
+    </el-form>
+    <!--      {{// editPram}}-->
+    <!--      {{prent}}-->
+  </div>
+</template>
+<!--创建和编辑公用一个组件-->
+<script>
+import * as constants from '@/utils/constants.js'
+import * as categoryApi from '@/api/categoryApi.js'
+import * as selfUtil from '@/utils/ZBKJIutil.js'
+export default {
+  // name: "edit"
+  props: {
+    prent: {
+      type: Object,
+      required: true
+    },
+    isCreate: {
+      type: Number,
+      default: 0
+    },
+    editData: {
+      type: Object
+    },
+    biztype: {
+      type: Object,
+      required: true
+    },
+    allTreeList: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      loadingBtn: false,
+      constants,
+      editPram: {
+        extra: null,
+        name: null,
+        pid: null,
+        sort: 0,
+        status: true,
+        type: this.biztype.value,
+        url: null,
+        id: 0
+      },
+      categoryProps: {
+        value: 'id',
+        label: 'name',
+        children: 'child',
+        expandTrigger: 'hover',
+        checkStrictly: true,
+        emitPath: false
+      },
+      parentOptions: []
+    }
+  },
+  mounted() {
+    this.initEditData()
+  },
+  methods: {
+    // 点击图标
+    addIcon() {
+      const _this = this
+      _this.$modalIcon(function(icon) {
+        _this.editPram.extra = icon
+      })
+    },
+    // 点击商品图
+    modalPicTap (tit, num, i) {
+      const _this = this
+      const attr = []
+      this.$modalUpload(function(img) {
+        if(tit==='1'&& !num){
+          _this.editPram.extra = img[0].sattDir
+        }
+        if(tit==='2'&& !num){
+          img.map((item) => {
+            attr.push(item.attachment_src)
+            _this.formValidate.slider_image.push(item)
+          });
+        }
+      },tit, 'store')
+    },
+    close() {
+      this.$emit('hideEditDialog')
+    },
+    initEditData() {
+      console.log(this.editData)
+      this.addTreeListLabelForCasCard(this.allTreeList, 'child')
+      this.parentOptions = this.allTreeList
+        console.log(this.parentOptions)
+      if (this.isCreate !== 1) {
+        const { id } = this.prent
+        this.editPram.pid = id
+      } else {
+        const { extra, name, pid, sort, status, type, id, url } = this.editData
+        this.editPram.extra = extra
+        this.editPram.name = name
+        this.editPram.pid = pid
+        this.editPram.sort = sort
+        this.editPram.status = status
+        this.editPram.type = type
+        this.editPram.url = url
+        this.editPram.id = id
+        console.log(this.editPram.id)
+      }
+    },
+    addTreeListLabelForCasCard(arr, child) {
+      arr.forEach((o,i) => {
+        if (o.child && o.child.length) {
+          o.disabled = true
+          o.child.forEach((j) => {
+            j.disabled = true
+          })
+        }
+      })
+    },
+    handlerSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (!valid) return
+        this.handlerSaveOrUpdate(this.isCreate === 0)
+      })
+    },
+    handlerSaveOrUpdate(isSave) {
+      if (isSave) {
+        this.editPram.pid = this.prent.id
+        this.loadingBtn = true
+        categoryApi.addCategroy(this.editPram).then(data => {
+          this.$emit('hideEditDialog')
+          this.$message.success('创建目录成功')
+          this.loadingBtn = false
+        })
+      } else {
+        this.editPram.pid = Array.isArray(this.editPram.pid) ? this.editPram.pid[0] : this.editPram.pid
+        this.loadingBtn = true
+        categoryApi.updateCategroy(this.editPram).then(data => {
+          this.$emit('hideEditDialog')
+          this.$message.success('更新目录成功')
+          this.loadingBtn = false
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

admin/src/components/Category/info.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <el-tree :data="ddd" :props="defaultProps" @node-click="handleNodeClick" />
+  </div>
+</template>
+
+<script>
+import * as categoryApi from '@/api/categoryApi.js'
+export default {
+  // name: "info"
+  props: {
+    id: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      ddd: [{
+        label: '一级 1',
+        children: [{
+          label: '二级 1-1',
+          children: [{
+            label: '三级 1-1-1'
+          }]
+        }]
+      }, {
+        label: '一级 2',
+        children: [{
+          label: '二级 2-1',
+          children: [{
+            label: '三级 2-1-1'
+          }]
+        }, {
+          label: '二级 2-2',
+          children: [{
+            label: '三级 2-2-1'
+          }]
+        }]
+      }, {
+        label: '一级 3',
+        children: [{
+          label: '二级 3-1',
+          children: [{
+            label: '三级 3-1-1'
+          }]
+        }, {
+          label: '二级 3-2',
+          children: [{
+            label: '三级 3-2-1'
+          }]
+        }]
+      }],
+      dataList: {// 数据结果
+        page: 0,
+        limit: 0,
+        totalPage: 0,
+        total: 0,
+        list: []
+      }
+    }
+  },
+  mounted() {
+    this.handlerGetTreeList(this.id)
+  },
+  methods: {
+    handlerGetTreeList(id) {
+      if (!id) {
+        this.$message.error('当前数据id不正确')
+        return
+      }
+      categoryApi.treeCategroy({ pid: id }).then(data => {
+        this.dataList = data
+      })
+    },
+    handleNodeClick(data) {
+      console.log('data:', data)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

admin/src/components/Category/list.vue

@@ -0,0 +1,276 @@
+<template>
+  <div>
+    <template v-if="selectModel">
+      <el-tree
+        node-key="id"
+        :props="treeProps"
+        :data="treeList"
+        show-checkbox
+        :default-checked-keys="selectModelKeys"
+        @check="handleSelectionChange"
+      />
+      <!--        {{biztype}}-->
+    </template>
+    <template v-else>
+      <div class="divBox">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <div class="container">
+              {{biztype}}
+              <el-form inline size="small">
+                <el-form-item>
+                  <el-select v-model="listPram.status" placeholder="状态" clearable class="selWidth">
+                    <el-option
+                      v-for="item in constants.roleListStatus"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item>
+                  <el-input v-model="listPram.name" placeholder="名称" clearable class="selWidth"/>
+                </el-form-item>
+                <el-form-item>
+                  <el-button size="mini" @click="handlerGetList">查询</el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+            <el-button size="mini" type="primary" @click="handleAddMenu({id:0,name:'顶层目录'})">新增{{ biztype.name }}</el-button>
+          </div>
+          <el-table
+            ref="treeList"
+            :data="treeList"
+            size="mini"
+            class="table"
+            highlight-current-row
+            row-key="id"
+            :tree-props="{children: 'child', hasChildren: 'hasChildren'}"
+          >
+            <!--          <el-table-column type="selection"-->
+            <!--                           width="55">-->
+            <!--          </el-table-column>-->
+            <el-table-column prop="name" label="名称" min-width="200">
+              <template slot-scope="scope">
+                {{ scope.row.name }}|{{ scope.row.id }}
+              </template>
+            </el-table-column>
+            <template v-if="!selectModel">
+              <el-table-column label="类型" min-width="150">
+                <template slot-scope="scope">
+                  <span>{{ scope.row.type | filterCategroyType | filterEmpty }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="分类图标" min-width="80">
+                <template slot-scope="scope">
+                  <div class="listPic" v-if=" biztype.value === 5 ">
+                    <i :class="'el-icon-' + scope.row.extra" style="font-size: 20px;" />
+                  </div>
+                  <div class="demo-image__preview" v-else>
+                    <el-image
+                      style="width: 36px; height: 36px"
+                      :src="scope.row.extra"
+                      :preview-src-list="[scope.row.extra]"
+                    />
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column label="Url" min-width="250">
+                <template slot-scope="scope">
+                  <span>{{ scope.row.url }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="排序" prop="sort" min-width="150" />
+              <el-table-column label="启用状态" width="150">
+                <template slot-scope="scope">
+                  <span>{{ scope.row.status | filterYesOrNo }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" min-width="200" fixed="right">
+                {{biztype}}
+                <template slot-scope="scope">
+                  <el-button
+                    v-if="biztype.value!==3"
+                    type="text"
+                    size="small"
+                    @click="handleAddMenu(scope.row)"
+                  >添加子目录</el-button>
+                  <el-button type="text"  size="small" @click="handleEditMenu(scope.row)">编辑</el-button>
+                  <el-button type="text"  size="small" @click="handleDelMenu(scope.row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </template>
+          </el-table>
+        </el-card>
+      </div>
+    </template>
+    <el-dialog
+      :title="(editDialogConfig.isCreate===0?`创建${biztype.name}`:`编辑${biztype.name}`)"
+      :visible.sync="editDialogConfig.visible"
+      destroy-on-close
+      :close-on-click-modal="false"
+    >
+      <edit
+        v-if="editDialogConfig.visible"
+        :prent="editDialogConfig.prent"
+        :is-create="editDialogConfig.isCreate"
+        :edit-data="editDialogConfig.data"
+        :biztype="editDialogConfig.biztype"
+        :all-tree-list="treeList"
+        @hideEditDialog="hideEditDialog"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as categoryApi from '@/api/categoryApi.js'
+import info from './info'
+import edit from './edit'
+import * as constants from '@/utils/constants.js'
+import * as selfUtil from '@/utils/ZBKJIutil.js'
+export default {
+  // name: "list"
+  components: { info, edit },
+  props: {
+    biztype: { // 类型，1 产品分类，2 附件分类，3 文章分类， 4 设置分类， 5 菜单分类
+      type: Object,
+      default: { value: -1 },
+      validator: (obj) => {
+        return obj.value > 0
+      }
+    },
+    pid: {
+      type: Number,
+      default: 0,
+      validator: (value) => {
+        return value >= 0
+      }
+    },
+    selectModel: { // 是否选择模式
+      type: Boolean,
+      default: false
+    },
+    selectModelKeys: {
+      type: Array
+    },
+    rowSelect: {}
+  },
+  data() {
+    return {
+      constants,
+      treeProps: {
+        label: 'name',
+        children: 'child',
+        expandTrigger: 'hover',
+        checkStrictly: true,
+        emitPath: false
+      },
+      // treeCheckedKeys:[],// 选择模式下的属性结构默认选中
+      multipleSelection: [],
+      editDialogConfig: {
+        visible: false,
+        isCreate: 0, // 0=创建，1=编辑
+        prent: {}, // 父级对象
+        data: {},
+        biztype: this.biztype // 统一主业务中的目录类型
+      },
+      dataList: [],
+      treeList: [],
+      listPram: {
+        pid: this.pid,
+        type: this.biztype.value,
+        status: null,
+        name: null,
+        page: constants.page.page,
+        limit: constants.page.limit[1]
+      },
+      viewInfoConfig: {
+        data: null,
+        visible: false
+      }
+    }
+  },
+  mounted() {
+    // if(this.biztype.value === 3){
+    //   this.listPram.pageSize = constants.page.pageSize[4]
+    //   this.handlerGetList()
+    // }else{
+    this.handlerGetTreeList()
+    // }
+  },
+  methods: {
+    handleEditMenu(rowData) {
+      this.editDialogConfig.isCreate = 1
+      this.editDialogConfig.data = rowData
+      console.log(this.editDialogConfig.data)
+      this.editDialogConfig.prent = rowData
+      this.editDialogConfig.visible = true
+    },
+    handleAddMenu(rowData) {
+      this.editDialogConfig.isCreate = 0
+      this.editDialogConfig.prent = rowData
+      this.editDialogConfig.data = {}
+      this.editDialogConfig.biztype = this.biztype
+      this.editDialogConfig.visible = true
+    },
+    handleDelMenu(rowData) {
+      this.$confirm('确定删除当前数据?').then(() => {
+        categoryApi.deleteCategroy(rowData).then(data => {
+          this.handlerGetTreeList()
+          this.$message.success('删除成功')
+        })
+      })
+    },
+    handlerGetList() {
+      categoryApi.listCategroy(this.listPram).then(data => {
+        this.treeList = data.list
+      })
+    },
+    handlerGetTreeList() {
+      const _pram = { type: this.biztype.value, status: this.selectModel ? 1 : -1 }
+      this.biztype.value!==3 ? categoryApi.treeCategroy(_pram).then(data => {
+        this.treeList = this.handleAddArrt(data)
+      }) : categoryApi.listCategroy({ type: 3, status: '' }).then(data => {
+        this.treeList = data.list
+      })
+    },
+    handlerGetInfo(id) {
+      this.viewInfoConfig.data = id
+      this.viewInfoConfig.visible = true
+    },
+    handleNodeClick(data) {
+      console.log('data:', data)
+    },
+    handleAddArrt(treeData) {
+      // let _result = this.addTreeListLabel(treeData)
+      const _result = selfUtil.addTreeListLabel(treeData)
+      return _result
+    },
+    hideEditDialog() {
+      setTimeout(() => {
+        this.editDialogConfig.prent = {}
+        this.editDialogConfig.type = 0
+        this.editDialogConfig.visible = false
+        this.handlerGetTreeList()
+      }, 200)
+    },
+    handleSelectionChange(d1, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {
+      // this.multipleSelection =  checkedKeys.concat(halfCheckedKeys)
+      this.multipleSelection = checkedKeys
+      this.$emit('rulesSelect', this.multipleSelection)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+</style>