分类管理

epmet-oper-web/src/views/modules/customer/customize/CategoryEdit.vue

@@ -0,0 +1,203 @@
+<template>
+  <el-dialog :visible.sync="visible"
+             :title="title"
+             :width="diaWidth+'%'"
+             :close-on-click-modal="false"
+             :before-close="handleClose"
+             :close-on-press-escape="false">
+    <el-form :inline="false"
+             :model="dataForm"
+             :rules="dataRule"
+             ref="dataForm"
+             :label-width="'120px'">
+      <div style="margin-top:20px">
+
+        <el-form-item label="分类名称"
+                      prop="categoryName">
+          <el-tooltip class="item"
+                      effect="dark"
+                      content="请输入2-20个字"
+                      placement="bottom-start">
+            <el-input class="item_width_1"
+                      :maxlength="20"
+                      :minlength="2"
+                      v-model="dataForm.categoryName"
+                      placeholder="分类名称"></el-input>
+          </el-tooltip>
+        </el-form-item>
+        <el-form-item label="排序"
+                      prop="sort">
+          <el-input-number v-model="dataForm.sort"
+                           :min="1"
+                           :max="10"
+                           label="描述文字"></el-input-number>
+        </el-form-item>
+      </div>
+
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false;resetData()">{{ $t('cancel') }}</el-button>
+      <el-button type="primary"
+                 @click="saveForm()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { requestPost } from "@/js/dai/request";
+export default {
+  data () {
+    return {
+      visible: false,
+      title: "新增分类",
+
+      customerId: "",
+      parentCategoryId: "",//父级分类Id
+      categoryId: "",//当前操作分类Id
+      type: "",//操作类型(add:新增  edit:编辑)
+
+      dataForm: {
+        categoryName: '', //分类名称
+        sort: 0,
+        type: "",//操作类型(add:新增  edit:编辑)
+        level: ""
+      },
+
+      url: "",
+
+
+    }
+  },
+  created () {
+    // this.queryFunctionList()
+  },
+  computed: {
+
+    dataRule () {
+      return {
+        categoryName: [
+          { required: true, message: '分类名称不能为空', trigger: 'blur' },
+          { min: 2, max: 20, message: '分类名称长度在 2 到 20 个字符', trigger: 'blur' }
+        ]
+      }
+    },
+    diaWidth () {
+      console.log(this.resolution)
+      return this.resolution === 'small' ? 70 : 50
+    },
+
+    ...mapGetters(['clientHeight', 'resolution']),
+  },
+  methods: {
+    //初始化  customerId,parentCategoryId ,level,排序
+    initAdd (customerId, parentCategoryId, level, sort) {
+
+      this.visible = true
+      this.customerId = customerId
+      this.parentCategoryId = parentCategoryId
+      this.type = "add"
+      this.dataForm.level = level
+      this.dataForm.sort = sort
+
+      if (this.dataForm.level === 'l1') {
+        // this.url="/gov/issue/issueprojectcategorydict/savefirstcategory"
+        this.url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/issueprojectcategorydict/savefirstcategory"
+      } else {
+        // this.url="/gov/issue/issueprojectcategorydict/savesecondcategory"
+        this.url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/issueprojectcategorydict/savesecondcategory"
+      }
+
+    },
+
+    //初始化  customerId,parentCategoryId,dateform,level
+    initEdit (customerId, parentCategoryId, dataForm) {
+
+      this.visible = true
+      this.customerId = customerId
+      this.parentCategoryId = parentCategoryId
+      this.type = "edit"
+      this.dataForm = dataForm
+
+      if (this.dataForm.level === 'l1') {
+        // this.url="/gov/issue/issueprojectcategorydict/savefirstcategory"
+        this.url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/issueprojectcategorydict/savefirstcategory"
+      } else {
+        // this.url="/gov/issue/issueprojectcategorydict/savesecondcategory"
+        this.url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/issueprojectcategorydict/savesecondcategory"
+      }
+
+    },
+
+    async saveForm () {
+      await this.$refs['dataForm'].validate((valid, messageObj) => {
+        if (!valid) {
+          app.util.validateRule(messageObj)
+          return false
+        }
+      })
+
+      let params = {}
+      if (this.dataForm.level === 'l1') {
+        params = {
+          customerId: this.customerId,
+          categoryId: this.dataForm.categoryId,
+          categoryName: this.dataForm.categoryName,
+          sort: this.dataForm.sort,
+          type: this.type
+        }
+      } else {
+        params = {
+          customerId: this.customerId,
+          parentCategoryId: this.parentCategoryId,
+          categoryId: this.dataForm.categoryId,
+          categoryName: this.dataForm.categoryName,
+          sort: this.dataForm.sort,
+          type: this.type
+        }
+      }
+
+      const { data, code, msg, internalMsg } = await requestPost(this.url, params)
+      if (code === 0) {
+        this.$message({
+          type: 'success',
+          message: '保存成功'
+        })
+        this.resetData()
+        this.visible = false
+        this.$emit('editDiaOK')
+
+      } else {
+        this.$message.error(msg + "：" + internalMsg)
+      }
+    },
+    handleClose () {
+      this.visible = false
+    },
+    resetData () {
+      this.dataForm = {
+        categoryName: '', //分类名称
+        sort: 0,
+        type: ""//操作类型(add:新增  edit:编辑)
+      }
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+.item_width_1 {
+  width: 400px;
+}
+.item_width_2 {
+  width: 700px;
+}
+.block {
+  display: block;
+}
+.btn_reset {
+  vertical-align: bottom;
+  margin-left: 10px;
+}
+</style>

epmet-oper-web/src/views/modules/customer/customize/CategoryList.vue

@@ -1,332 +1,232 @@
 <template>
   <div>
 
+    <div class="mod-sys__menu">
       <div class="div_btn">
-      <span style="margin-right:20px">{{customerName}}</span>
+        <span style="margin-right:10px">{{customerName}}</span>
         <el-button type="default"
-                 size="mini"
                    @click="diaCancel">取消返回</el-button>
-      <el-button type="primary"
+        <el-button class=""
-                 size="mini"
+                   type="primary"
-                 @click="addShow">自定义初始化</el-button>
+                   @click="addShow()">{{"新增" }}</el-button>
+        <!-- <el-input v-model="search"
+                  placeholder="请输入内容"></el-input> -->
+      </div>
+      <el-table v-loading="dataListLoading"
+                :data="dataList"
+                :default-expand-all="true"
+                row-key="categoryId"
+                border
+                style="width: 100%;">
+        <el-table-column prop="categoryName"
+                         label="分类名称"
+                         header-align="center"
+                         min-width="150"></el-table-column>
+
+        <!-- <el-table-column prop="sort"
+                           :label="$t('menu.sort')"
+                           header-align="center"
+                           align="center"></el-table-column> -->
+
+        <el-table-column label="操作"
+                         fixed="right"
+                         header-align="center"
+                         align="left"
+                         width="250">
+          <template slot-scope="scope">
+
+            <el-button type="text"
+                       size="small"
+                       @click="disableCategory(scope.row)">{{ scope.row.stateShow}}</el-button>
+            <el-button type="text"
+                       size="small"
+                       @click="editShow(scope.row)">修改</el-button>
+            <el-button type="text"
+                       size="small"
+                       @click="deleteCategory(scope.row)">删除</el-button>
+            <el-button v-if="(scope.row.children && scope.row.children.length>0)"
+                       type="text"
+                       size="small"
+                       @click="showAddLevel2(scope.row)">{{ "新增二级分类"}}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
     </div>
-    <el-tabs v-model="activeName"
+
-             @tab-click="tabClick"
+    <category-edit ref="ref_edit"
-             class="el-tabs">
-      <el-tab-pane label="居民端"
-                   name="resi">
-
-        <c-table column-type="index"
-                 ref="table_resi"
-                 :url="tableUrl"
-                 :params="tableParamsResi"
-                 :operationWidth="80"
-                 keyword="FootBarCustomize"
-                 :operations="operations"
-                 :orderOperations="orderOperations"
-                 :tableHeight="tableHeight"
-                 @editShow="editShow"
-                 @changeState="changeState"
-                 @moveUp="moveUp">
-        </c-table>
-      </el-tab-pane>
-      <el-tab-pane label="工作端"
-                   name="gov">
-        <c-table column-type="index"
-                 ref="table_work"
-                 :url="tableUrl"
-                 :params="tableParamsWork"
-                 :operationWidth="80"
-                 keyword="FootBar"
-                 :operations="operations"
-                 :orderOperations="orderOperations"
-                 :tableHeight="tableHeight"
-                 @editShow="editShow"
-                 @changeState="changeState"
-                 @moveUp="moveUp">
-        </c-table>
-      </el-tab-pane>
-    </el-tabs>
-
-    <edit ref="ref_edit"
                    @editDiaOK="editDiaOK">
 
-    </edit>
+    </category-edit>
 
   </div>
 </template>
 
 <script>
-import CDialog from '@c/CDialog'
-import CTable from '@c/CTableNoPage'
-import Edit from './FootbarEdit'
-
-import { mapGetters } from 'vuex'
-import { Loading } from 'element-ui' // 引入Loading服务
-
-let loading// 加载动画
 
+import { requestPost } from "@/js/dai/request";
+import CategoryEdit from './CategoryEdit'
 export default {
+
   data () {
     return {
-      activeName: 'resi',
       customerId: '', // 客户id，父组件传
       customerName: '', // 客户名称，父组件传
 
-      // 查询相关
+      tableParams: {
-      tableParamsWork: {
+        customerId: ""
-        appType: 'gov',
-      },
-      tableParamsResi: {
-        appType: 'resi',
-      },
-      tableData: [],
-      // 列表相关
-      tableUrl: 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/customerfootbars',
-      // tableUrl: '/oper/customize/customerfootbar/customerfootbars',
-
-      operations: [
-        {
-          lable: (display) => {
-            if (display === 0) {
-              return '隐藏'
-            } else {
-              return '显示'
-            }
-          }, // 按钮显示名称
-
-          size: 'mini',
-          style: 'margin: 0 6px;',
-          type: 'text',
-          slot: '',
-          plain: false,
-          methodName: 'changeState', // 回调方法名称
-          isShow: (row) => {
-            return true
-          }
       },
-        {
+      search: '',
-          lable: '修改', // 按钮显示名称
+      dataList: [],
-          size: 'mini',
+
-          style: 'margin: 0 6px;',
+      dataListLoading: false,
-          type: 'text',
+
-          slot: '',
-          plain: false,
-          methodName: 'editShow', // 回调方法名称
-          isShow: (row) => {
-            return true
-          }
-        }
-      ],
-      orderOperations: [
-
-        {
-          style: 'width=100px;height=100px',
-          type: 'text',
-          icon: "el-icon-top",
-          methodName: 'moveUp', // 回调方法名称
-          isShow: (row) => {
-            return true
     }
   },
-      ],
-
-      // 查询栏下拉框数据
-      form: {
-        dataUrl: [], // 下拉框/单选框/复选框等获取数据的url
-        data: { // 全部下拉框数据
-          fromApp: [
-            {
-              value: 'resi',
-              label: '居民端'
-            },
-            {
-              value: 'gov',
-              label: '工作端'
-            }
-          ]
 
+  computed: {
+    tables () {
+      const search = this.search
+      if (search) {
+        console.log('this.dataList', this.dataList)
+        return this.dataList.filter(dataNews => {
+          return Object.keys(dataNews).some(key => {
+            return String(dataNews[key]).toLowerCase().indexOf(search) > -1
+          })
+        })
       }
-      }
+      console.log('this.dataList', this.dataList)
+      return this.dataList
     }
   },
   components: {
-    CDialog, CTable, Edit
+    CategoryEdit
-  },
-
-  mounted () {
-
-  },
-  computed: {
-    tableHeight () {
-      return this.clientHeight - 60 - 80 - 80
-    },
-    ...mapGetters(['clientHeight', 'env'])
-  },
-  activated () {
-    debugger
-    this.$nextTick(() => {
-      if (this.activeName === 'gov') {
-        this.$refs['table_work'].doLayout() // 解决表格错位
-      } else if (this.activeName === 'resi') {
-        this.$refs['table_resi'].doLayout() // 解决表格错位
-      }
-
-
-    })
   },
   methods: {
     initData (customerId, customerName) {
       this.customerId = customerId
       this.customerName = customerName
-      this.tableParamsWork.customerId = customerId
-      this.tableParamsResi.customerId = customerId
-      this.loadResiTableData()
-    },
-    // 刷新
-    refresh () {
 
-      if (this.activeName === 'gov') {
+      this.loadData()
-        this.loadWorkTableData() // 获取表格数据
-      } else if (this.activeName === 'resi') {
-        this.loadResiTableData() // 获取表格数据
-      }
     },
-    tabClick (tab) {
+
-      if (tab.name === 'gov') {
+    //加载列表数据
-        this.loadWorkTableData() // 获取表格数据
+    async loadData () {
+      this.dataListLoading = true
+      const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/issueprojectcategorydict/customercategorylist'
+      // const url = '/gov/issue/issueprojectcategorydict/customercategorylist'
+
+      this.tableParams.customerId = this.customerId
+
+      const { data, code, msg, internalMsg } = await requestPost(url, this.tableParams)
+      this.dataListLoading = false
+      if (code === 0) {
+
+        this.dataList = data
+        this.dataList.forEach(element => {
+          element.state = element.isDisable === 'enable' ? 'disable' : 'enable'
+          element.stateShow = element.isDisable === 'enable' ? '禁用' : '启用'
+          element.level = "l1"
+
+          if (element.children.length > 0) {
+            element.children.forEach(child => {
+              child.state = child.isDisable === 'enable' ? 'disable' : 'enable'
+              child.stateShow = child.isDisable === 'enable' ? '禁用' : '启用'
+              child.level = "l2"
+              child.parentCategoryId = element.categoryId
+            });
           }
-      if (tab.name === 'resi') {
+        });
-        this.loadResiTableData() // 获取表格数据
+
+      } else {
+        // this.$message.error(msg + "：" + internalMsg)
       }
+
     },
-    // 加载列表数据
+
-    loadWorkTableData () {
+    //开启/启用
-      this.$nextTick(() => {
+    disableCategory (row) {
-        this.$refs['table_work'].loadData() // 获取表格数据
+      this.$confirm('确认' + row.stateShow + '当前分类?', '提示', {
-      })
+        confirmButtonText: '确定',
-    },
+        cancelButtonText: '取消',
-    // 加载列表数据
+        type: 'warning'
-    loadResiTableData () {
+      }).then(() => {
-      this.$nextTick(() => {
+        // const url = '/gov/issue/issueprojectcategorydict/isdisablecategory'
-        this.$refs['table_resi'].loadData() // 获取表格数据
+        const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/issueprojectcategorydict/isdisablecategory'
-      })
-    },
-    // 新增
-    addShow () {
-      this.$refs['ref_edit'].init('', 'A', this.activeName)
-    },
-    // 编辑
-    editShow (row) {
-      this.$refs['ref_edit'].init(row.id, 'U')
-    },
-    // 改变状态
-    changeState (row, index) {
-      let display = row.display === 0 ? 1 : 0
-      const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/updatedisplaystatus'
-      // const url = '/oper/customize/customerfootbar/updatedisplaystatus'
         const param = {
-        id: row.id,
+          customerId: this.customerId,
-        display: display
+          categoryId: row.categoryId,
+          type: row.state
         }
         window.app.ajax.post(url, param,
           (data, rspMsg) => {
-          this.$message.success('操作成功' + rspMsg)
+            this.$message.success('操作成功')
-          this.refresh()
+            this.loadData()
           },
           (rspMsg, data) => {
             this.$message.error(rspMsg)
           })
+      }).catch(() => {
+
+      })
+
     },
-    // 上移
+    //删除
-    moveUp (row, index) {
+    deleteCategory (row) {
-
+      this.$confirm('确认删除当前分类?', '提示', {
-      if (index > 0) {
+        confirmButtonText: '确定',
-        this.tableData = this.$refs.table.getTableData() // 获取表格数据
+        cancelButtonText: '取消',
-        //console.log(this.tableData)
+        type: 'warning'
-        this.startLoading()
+      }).then(() => {
-        let resultList = []
+        // const url = '/gov/issue/issueprojectcategorydict/delcategory'
-        let one = {}
+        const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/issueprojectcategorydict/delcategory'
-        for (let i = 0; i < this.tableData.length; i++) {
+        const param = {
-          let obj = {}
+          customerId: this.customerId,
-          // eslint-disable-next-line
+          categoryId: row.categoryId,
-          // debugger
-          if (i === index - 1) {
-            one.id = this.tableData[i].id
-            one.orderIndex = index
-          } else if (i === index) {
-            obj.id = this.tableData[i].id
-            obj.orderIndex = index - 1
-            resultList.push(obj)
-            resultList.push(one)
-          } else {
-            obj.id = this.tableData[i].id
-            obj.orderIndex = i
-            resultList.push(obj)
-          }
         }
-        //console.log(resultList)
+        window.app.ajax.post(url, param,
-
-        // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfunctiondetail/updatedisplayorder'
-        const url = '/oper/customize/customerfunctiondetail/updatedisplayorder'
-        window.app.ajax.post(url, resultList,
           (data, rspMsg) => {
-            this.endLoading()
+            this.$message.success('操作成功')
-            this.loadTableData()
+            this.loadData()
           },
           (rspMsg, data) => {
-            this.endLoading()
             this.$message.error(rspMsg)
           })
+      }).catch(() => {
 
-      } else {
+      })
-        this.$message.warning('无法上移')
-
-        return false
-      }
     },
 
-    // 取消
+    // 新增  customerId,parentCategoryId,categoryId,type,level,num
-    diaCancel () {
+    addShow () {
-      this.$emit('cancleBack')
+      const sort = this.dataList.length + 1
+      this.$refs['ref_edit'].initAdd(this.customerId, "", "l1", sort)
     },
-
+    //新增二级分类  customerId,parentCategoryId,categoryId,type,level，num
-    editDiaOK () {
+    showAddLevel2 (row) {
-      this.refresh()
+      const sort = row.children.length + 1
+      this.$refs['ref_edit'].initAdd(this.customerId, row.categoryId, "l2", sort)
     },
-    editDiaCancel () {
+    // 编辑 customerId,parentCategoryId,dateform
+    editShow (row) {
 
+      this.$refs['ref_edit'].initEdit(this.customerId, row.categoryId, row)
     },
 
-    async renderSelData () { // 渲染下拉框/单选框/复选框等数据
+    // 取消
-
+    diaCancel () {
+      this.$emit('cancleBack')
     },
 
-    // 开启加载动画
+    editDiaOK () {
-    startLoading () {
+      this.loadData()
-      loading = Loading.service({
-        lock: true, // 是否锁定
-        text: '正在加载……', // 加载中需要显示的文字
-        background: 'rgba(0,0,0,.7)' // 背景颜色
-      })
     },
-    // 结束加载动画
-    endLoading () {
-      // clearTimeout(timer);
-      if (loading) {
-        loading.close()
-      }
-    }
   }
 }
 </script>
+
 <style>
 .div_btn {
-  z-index: 10;
+  margin: 0 0 20px 0;
-  position: absolute;
-  right: 40px;
-  top: 35px;
-  /* margin: 0 0 20px 0; */
 }
 </style>

epmet-oper-web/src/views/modules/customer/customize/CustomerList.vue

@@ -230,7 +230,7 @@ export default {
     // 显示分类配置
     showCategory (customerId, customerName) {
       this.showType = 'category'
-      console.log('ref_category', this.$refs['ref_category'])
+
       this.$nextTick(() => {
         this.$refs['ref_category'].initData(customerId, customerName)
       })

epmet-oper-web/src/views/modules/customer/customize/FootbarList.vue

@@ -165,7 +165,7 @@ export default {
     ...mapGetters(['clientHeight', 'env'])
   },
   activated () {
-    debugger
+
     this.$nextTick(() => {
       if (this.activeName === 'gov') {
         this.$refs['table_work'].doLayout() // 解决表格错位