jsm-mall-front/src/views/setting/departmentManagement/index.vue

<template>
  <zj-page-container direction="row">
    <div style="min-width: 220px; height: 100%">
      <zj-page-container>
        <div class="title">
          <el-button style="margin-right: 5px" size="mini" icon="el-icon-search" @click="getTreeListData"></el-button>
          <el-input size="mini" v-model="filterText" placeholder="请输入内容"></el-input>
        </div>
        <zj-page-fill>
          <el-tree
            :data="treeList"
            :props="defaultProps"
            default-expand-all
            :highlight-current="true"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            :filter-node-method="filterNode"
            ref="listTree"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <el-button size="mini" type="text" @click="addbumen(data)">
                  <i class="el-icon-plus"></i>
                </el-button>
                <el-button size="mini" type="text" @click="eidbumen(data)">
                  <i class="el-icon-edit"></i>
                </el-button>
                <el-button size="mini" type="text" @click="delbumen(data)">
                  <i class="el-icon-delete"></i>
                </el-button>
              </span>
            </span>
          </el-tree>
        </zj-page-fill>
      </zj-page-container>
    </div>
    <template-page
      ref="pageRef"
      :getList="getList"
      :columnParsing="columnParsing"
      :optionsEvensGroup="optionsEvensGroup"
      :tableAttributes="tableAttributes"
      :tableEvents="tableEvents"
      :operationColumnWidth="160"
      :operation="operation()"
      :exportList="exportList"
    >
      <el-dialog title="设置部门" :visible.sync="dialogVisible" width="500px" :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="100px" size="mini">
          <el-form-item label="上级部门名称">
            <el-input disabled v-model="form.pname"></el-input>
          </el-form-item>
          <el-form-item label="部门名称">
            <el-input v-model="form.deptName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queding">确定</el-button>
            <el-button @click="handleClose">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog title="添加网点" :visible.sync="dialogVisible2" width="500px" :before-close="handleClose2">
        <el-form ref="form" :model="form2" label-width="120px" size="mini">
          <el-form-item label="部门名称">
            <el-input disabled v-model="form2.deptName"></el-input>
          </el-form-item>
          <el-form-item label="管理网点名称">
            <el-select style="width: 100%" v-model="form2.websitId" placeholder="请选择" @change="gengxin">
              <el-option v-for="(item, index) in keyixuan" :key="index" :label="item.websitName" :value="item.websitId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queding2">确定</el-button>
            <el-button @click="handleClose2">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </template-page>
  </zj-page-container>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import {
  adminDeptList,
  adminDeptListExport,
  adminDeptTree,
  adminDeptAdd,
  adminDeptUpdate,
  adminDeptDel,
  adminDeptAddWebsit,
  adminDeptUpdateWebsit,
  adminDeptDelWebsit
} from '@/api/departmentManagement.js'
import operation_mixin from '@/components/template/operation_mixin.js'
export default {
  components: {
    TemplatePage
  },
  mixins: [operation_mixin],
  data() {
    return {
      // 表格属性
      tableAttributes: {},
      // 表格事件
      tableEvents: {},
      visible: false,
      item: null,
      treeList: [],
      defaultProps: {
        children: 'children',
        label: 'deptName'
      },
      filterText: '',
      dialogVisible: false,
      form: {
        pid: '',
        pname: '',
        deptName: ''
      },
      dialogVisible2: false,
      form2: {
        adminDeptId: '',
        deptName: '',
        adminDeptWebsitId: '',
        websitId: '',
        websitName: ''
      },
      adminDept: null,
      keyixuan: []
    }
  },
  mounted() {
    this.getTreeListData()
  },
  computed: {
    // 事件组合
    optionsEvensGroup() {
      return [
        [
          this?.keyixuan?.length
            ? [
                this.optionsEvensAuth('add', {
                  click: () => {
                    if (this.adminDept) {
                      this.form2 = {
                        deptName: this.adminDept.deptName,
                        adminDeptId: this.adminDept.adminDeptId,
                        adminDeptWebsitId: '',
                        websitId: '',
                        websitName: ''
                      }
                      this.dialogVisible2 = true
                    } else {
                      this.$message.warning('请先选择部门')
                    }
                  }
                })
              ]
            : []
        ]
      ]
    }
  },
  watch: {
    filterText(val) {
      this?.$refs?.listTree?.filter?.(val)
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.deptName.indexOf(value) !== -1
    },
    // 请求属性数据
    getTreeListData() {
      adminDeptTree().then(res => {
        this.treeList = res.data
        this.$refs.pageRef.refreshList()
      })
    },
    // 树形选中
    handleNodeClick(e) {
      this.adminDept = { ...e }
      adminDeptList({
        pageNum: 1,
        pageSize: -1,
        params: [{ param: 'admin_dept_id', compare: '=', value: this?.adminDept?.pid }]
      }).then(res => {
        this.keyixuan = res.data.records
      })
      this.$refs.pageRef.refreshList()
    },
    gengxin(val) {
      this.form2.websitName = this.keyixuan?.find(item => item.websitId == val)?.websitName
    },
    // 列表请求函数
    getList(pam, cb) {
      try {
        if (this?.adminDept?.adminDeptId) {
          pam.params.push({ param: 'admin_dept_id', compare: '=', value: this?.adminDept?.adminDeptId })
        }
        cb && cb(pam)
        return adminDeptList(pam)
      } catch (err) {
      } finally {
      }
    },
    // 列表导出函数
    exportList: adminDeptListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    operation() {
      return this.operationBtn({
        del: {
          click: ({ row, index, column }) => {
            adminDeptDelWebsit({
              adminDeptWebsitId: row.adminDeptWebsitId
            }).then(res => {
              this.$refs.pageRef.refreshList()
              this.$message({
                type: 'success',
                message: '删除成功'
              })
            })
          }
        }
      })
    },
    addbumen(data) {
      this.form.pid = data.adminDeptId
      this.form.pname = data.deptName
      this.dialogVisible = true
    },
    eidbumen(data) {
      this.form = { ...data }
      this.dialogVisible = true
    },
    delbumen(data) {
      adminDeptDel({ adminDeptId: data.adminDeptId }).then(res => {
        this.getTreeListData()
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      })
    },
    queding() {
      if (!this.form.deptName) {
        this.$message.warning('名字不能为空')
      }
      ;(this.form.adminDeptId ? adminDeptUpdate : adminDeptAdd)(this.form).then(res => {
        this.getTreeListData()
        this.handleClose()
        this.$message({
          type: 'success',
          message: '设置成功'
        })
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.form = {
        pid: '',
        pname: '',
        deptName: ''
      }
    },
    queding2() {
      if (!this.form2.websitId) {
        this.$message.warning('请选择网点')
      }
      ;(this.form2.id ? adminDeptUpdateWebsit : adminDeptAddWebsit)({
        ...this.form2,
        adminDeptId: this.adminDept.adminDeptId,
        adminDeptWebsitId: this?.form2?.adminDeptWebsitId
      }).then(res => {
        this.$refs.pageRef.refreshList()
        this.handleClose2()
        this.$message({
          type: 'success',
          message: '设置成功'
        })
      })
    },
    handleClose2() {
      this.dialogVisible2 = false
      this.form2 = {
        deptName: '',
        adminDeptId: '',
        adminDeptWebsitId: '',
        websitId: '',
        websitName: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  padding: 20px 0 10px 20px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  border-bottom: 1px solid #cccccc;
  font-weight: bold;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>