zfire-newmall-admin/src/views/setting/departmentManage/index.vue

<template>
  <tabPage ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
    <template slot-scope="{activeKey}">
      <div class="app-container">
        <div v-if="activeKey == 'list'" class="mymain-container">
          <div>
            <el-select v-model="value1" multiple placeholder="显示层级">
              <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <span style="display: inline-block; width: 220px; margin-left: 10px"><el-input v-model="input"
                placeholder="模糊搜索"></el-input></span>
          </div>

          <div class="table">
            <el-table :data="showList" border>
              <el-table-column prop="type" label="级别" width="70">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.type == 'A'" type="success">平台</el-tag>
                  <el-tag v-if="scope.row.type == 'B'">商户</el-tag>
                  <el-tag v-if="scope.row.type == 'C'" type="warning">网点</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="网点名称"> </el-table-column>
              <el-table-column prop="" label="结构">
                <template slot-scope="scope">
                  {{ scope.row.pname.join(' -> ') }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="状态" class-name="status-col" width="80">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.status ? 'success' : 'danger'">{{
                    scope.row.status ? '启用' : '禁用'
                  }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="268" fixed="right">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" icon="el-icon-edit"
                    @click="openMainForm('edit', scope.row.websitId)">编辑</el-button>
                  <el-button type="primary" size="mini" icon="el-icon-edit"
                    @click="handleDelete(scope.row.websitId)">删除</el-button>
                  <el-button v-if="!!~['A', 'B'].indexOf(scope.row.type)"
                    :type="({ A: 'primary', B: 'warning' })[scope.row.type]" plain size="mini" icon="el-icon-plus"
                    @click="openMainForm('add', scope.row.websitId)">
                    添加{{ scope.row.type
                      == 'A' ? '商户' :
                      scope.row.type == 'B' ? '网点' : '网点' }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination clearfix">
            <div class="fr">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[15, 20, 30, 50]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="listTotal">
              </el-pagination>
            </div>
          </div>
        </div>
        <div v-if="~['add', 'edit'].indexOf(activeKey)">
          <el-form ref="mainForm" :model="mainForm" :rules="mainFormRules" label-position="top" label-width="80px">
            <el-form-item label="上级" prop="parentId">
              <el-cascader style="width: 100%" :options="dataList2"
                :props="{ checkStrictly: true, value: 'websitId', label: 'name' }" v-model="mainForm.parentId" filterable
                clearable>
              </el-cascader>
            </el-form-item>
            <el-form-item label="名称" prop="name">
              <el-input placeholder="请输入网点名称" v-model="mainForm.name"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="linkName">
              <el-input placeholder="请输入联系人名称" v-model="mainForm.linkName"></el-input>
            </el-form-item>
            <el-form-item label="联系人电话" prop="websitPhone">
              <el-input placeholder="请输入联系人电话" maxlength="11" type="number" v-model="mainForm.websitPhone"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <div style="display:flex;">
                <el-input placeholder="请选择地址" readonly style="margin-right: 20px;" v-model="mainForm.address"></el-input>
                <geographicalPosi :formData="mainForm" @selectPosi="selectAddress"></geographicalPosi>
              </div>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="mainForm.status">
                <el-radio :label="true">启用</el-radio>
                <el-radio :label="false">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="增值服务" prop="isIncre">
              <el-radio-group v-model="mainForm.isIncre">
                <el-radio :label="true">启用</el-radio>
                <el-radio :label="false">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancelMainForm">取 消</el-button>
            <el-button type="primary" @click="submitMainForm">确 定</el-button>
          </div>
        </div>
      </div>
    </template>
  </tabPage>
</template>

<script>
import { getDepartmentList, addDepartment, editDepartment, getDepartmentDetail, deleteDepartment } from '@/api/setting'
import geographicalPosi from '@/components/geographicalPosi/index.vue'
export default {
  components: { geographicalPosi },
  data() {
    return {
      dataList: [], // 列表数据
      dataList2: [], // 列表数据
      listLoading: true, // 列表加载loading
      currentPage: 1, // 当前页码
      pageSize: 15, // 每页数量
      editId: null,
      mainFormType: 'add',
      mainFormVisible: false,
      addressVisible: false,
      input: '',
      value1: [],
      levels: [],
      types: [{ label: '平台', value: 'A' }, { label: '商户', value: 'B' }, { label: '网点', value: 'C' }],
      mainForm: {
        parentId: '',
        name: '',
        linkName: '',
        websitPhone: '',
        lat: '',
        lng: '',
        address: '',
        status: true,
        isIncre: true,
      },
      mainFormRules: {
        name: [{ required: true, message: '请填写网点名称', trigger: 'blur' }],
        linkName: [{ required: true, message: '请填写联系人名称', trigger: 'blur' }],
        websitPhone: [{ required: true, message: '请填写联系人电话', trigger: 'blur' }],
        address: [{ required: true, message: '请选择GPS地址', trigger: 'blur' }],
      }
    }
  },

  created() {
    this.getList()
  },

  computed: {
    showList() {
      return [...this.dataList]
        .filter(item => {
          return (
            (this.value1.length ? !!~this.value1.indexOf(item.type) : true) &&
            (this.input ? !!~item.name.indexOf(this.input) || !!~item.pname.indexOf(this.input) : true)
          )
        })
        .splice((this.currentPage - 1) * this.pageSize, this.pageSize)
    },
    listTotal() {
      return [...this.dataList].filter(item => {
        return (
          (this.value1.length ? !!~this.value1.indexOf(item.type) : true) &&
          (this.input ? !!~item.name.indexOf(this.input) || !!~item.pname.indexOf(this.input) : true)
        )
      }).length
    }
  },
  watch: {
    value1() {
      this.$nextTick(() => {
        this.currentPage = 1
      })
    },
    input() {
      this.$nextTick(() => {
        this.currentPage = 1
      })
    }
  },
  methods: {
    // 获取网点列表
    getList() {
      var list_ = []
      var levels = []
      function dg(list, level = 1, pname = []) {
        for (let { children, name, ...item } of list) {
          console.log(item)
          var n_ = ''
          for (var i = 1; i < level; i++) n_ += ` -> `
          list_.push({ ...item, name: n_ + name, level, pname: [...pname] })
          if (!~levels.indexOf(level)) levels.push(level)
          if (children && children.length) dg(children, level + 1, [...pname, name])
        }
      }
      getDepartmentList().then(res => {
        this.dataList2 = res.data
        dg(res.data)
        this.dataList = list_
        this.levels = levels
      })
    },

    selectAddress(res) {
      this.mainForm.lng = res.center[0]
      this.mainForm.lat = res.center[1]
      this.mainForm.address = res.name
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      // this.getList()
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      // this.getList()
    },

    // 操作 - 删除
    handleDelete(id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose: false,
        type: 'warning'
      }).then(() => {
        deleteDepartment({ id: id }).then(res => {
          this.getList()
          this.$successMsg()
        })
      }).catch(() => {

      });

    },

    // 打开 新增编辑 网点表单
    openMainForm(type, id) {
      this.$refs.tabPage.addTab({
        // 对应显示的模块
        activeKey: type,
        // 唯一标识
        key: type,
        // 页签名称
        label: ({ edit: "编辑", add: "新增" })[type],
        // 打开时事件
        triggerEvent: () => {
          this.cancelMainForm()
          this.$nextTick(()=>{
            this.mainFormType = type
            this.mainFormVisible = true
            if (type == 'add') {
              this.mainForm.parentId = id
            } else {
              this.editId = id
              getDepartmentDetail({ id }).then(res => {
                this.mainForm = {
                  parentId: res.data.parentId,
                  name: res.data.name,
                  linkName: res.data.linkName,
                  websitPhone: res.data.websitPhone,
                  lat: res.data.lat,
                  lng: res.data.lng,
                  address: res.data.address,
                  status: res.data.status,
                  isIncre: res.data.isIncre
                }
              })
            }
          })
        },
        // 关闭时事件
        closeEvent: () => {
          
        }
      })
    },

    // 取消 新增编辑 网点表单
    cancelMainForm() {
      this.mainFormVisible = false
      this.$refs?.mainForm?.resetFields()
      this.$data.mainForm = this.$options.data().mainForm
    },

    // 提交 网点表单
    submitMainForm() {
      this.$refs.mainForm.validate(valid => {
        if (valid) {
          let parentId = null
          if (this.mainForm.parentId instanceof Array) {
            parentId = this.mainForm.parentId[this.mainForm.parentId.length - 1]
          } else {
            parentId = this.mainForm.parentId
          }
          let params = {
            parentId,
            name: this.mainForm.name,
            linkName: this.mainForm.linkName,
            websitPhone: this.mainForm.websitPhone,
            lat: this.mainForm.lat,
            lng: this.mainForm.lng,
            address: this.mainForm.address,
            status: this.mainForm.status,
            isIncre: this.mainForm.isIncre
          }
          if (this.mainFormType == 'edit') {
            params.websitId = this.editId
            editDepartment(params).then(res => {
              this.cancelMainForm()
              this.getList()
              this.$successMsg('编辑成功')
            })
          } else {
            addDepartment(params).then(res => {
              this.cancelMainForm()
              this.getList()
              this.$successMsg('添加成功')
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>