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

<template>
  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title + '-列表', essential: true }]">
    <template slot-scope="{ activeKey, data }">
      <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-width="100px">
            <el-row :gutter="20" justify="start">
              <el-col :span="6">
                <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-col>
              <el-col :span="6">
                <el-form-item label="名称" prop="name">
                  <el-input placeholder="请输入网点名称" v-model="mainForm.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系人" prop="linkName">
                  <el-input placeholder="请输入联系人名称" v-model="mainForm.linkName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系人电话" prop="websitPhone">
                  <el-input
                    placeholder="请输入联系人电话"
                    maxlength="11"
                    type="number"
                    v-model="mainForm.websitPhone"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="地址" prop="address">
                  <div style="display: flex">
                    <el-input placeholder="请选择地址" style="margin-right: 20px" v-model="mainForm.address"></el-input>
                    <geographicalPosi :formData="mainForm" @selectPosi="selectAddress"></geographicalPosi>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="电子支付商户" prop="payWorkerCodeId">
                  <el-select v-model="mainForm.payWorkerCodeId" placeholder="请选择">
                    <el-option v-for="item in PayConfigList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <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-col>
              <el-col :span="24">
                <el-form-item label="通联支付" prop="isUseAllinpay">
                  <el-switch v-model="mainForm.isUseAllinpay" active-color="#13ce66" inactive-color="#ff4949">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="mainForm.isUseAllinpay">
                <el-button
                  v-if="!editId"
                  type="text"
                  @click="
                    () => {
                      mainForm.payConfigList.push({})
                    }
                  "
                  >添加</el-button
                >
                <el-table
                  :data="editId ? [{}, ...(mainForm.payConfigList || [])] : mainForm.payConfigList || []"
                  style="width: 100%"
                >
                  <el-table-column prop="name" label="商户名称">
                    <template slot-scope="scope">
                      <el-input
                        v-if="!!~indexs.indexOf(scope.$index) || !editId"
                        v-model="scope.row.name"
                        placeholder="请输入内容"
                      ></el-input>
                      <span v-else>{{ scope.row.type }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="orgId" label="通联集团号">
                    <template slot-scope="scope">
                      <el-input
                        v-if="!!~indexs.indexOf(scope.$index) || !editId"
                        v-model="scope.row.orgId"
                        placeholder="请输入内容"
                      ></el-input>
                      <span v-else>{{ scope.row.type }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="type" label="类别">
                    <template slot-scope="scope">
                      <el-select
                        v-if="!!~indexs.indexOf(scope.$index) || !editId"
                        v-model="scope.row.type"
                        placeholder="请选择"
                      >
                        <el-option label="辅材" value="M" />
                        <el-option label="配件" value="P" />
                      </el-select>
                      <span v-else>{{ { M: '辅材', P: '配件' }[scope.row.type] }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="mchNo" label="通联商户号">
                    <template slot-scope="scope">
                      <el-input
                        v-if="!!~indexs.indexOf(scope.$index) || !editId"
                        v-model="scope.row.mchNo"
                        placeholder="请输入内容"
                      ></el-input>
                      <span v-else>{{ scope.row.type }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="appid" label="通联商户appid">
                    <template slot-scope="scope">
                      <el-input
                        v-if="!!~indexs.indexOf(scope.$index) || !editId"
                        v-model="scope.row.appid"
                        placeholder="请输入内容"
                      ></el-input>
                      <span v-else>{{ scope.row.type }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                      <el-select
                        v-if="!!~indexs.indexOf(scope.$index) || !editId"
                        v-model="scope.row.status"
                        placeholder="请选择"
                      >
                        <el-option label="开启" :value="true" />
                        <el-option label="关闭" :value="false" />
                      </el-select>
                      <span v-else>{{ scope.row.type ? '开启' : '关闭' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column v-if="editId" prop="createBy" label="创建人"> </el-table-column>
                  <el-table-column v-if="editId" prop="createTime" label="创建时间"> </el-table-column>
                  <el-table-column v-if="editId" prop="updateBy" label="修改人"> </el-table-column>
                  <el-table-column v-if="editId" prop="" label="操作">
                    <template slot-scope="scope">
                      <el-button v-if="!!~indexs.indexOf(scope.$index)" type="text" @click="caozuoanniuSave(scope)"
                        >保存</el-button
                      >
                      <el-button
                        v-if="!~indexs.indexOf(scope.$index) && scope.$index > 0"
                        type="text"
                        @click="caozuoanniuEid(scope)"
                        >编辑</el-button
                      >
                      <el-button
                        v-if="!~indexs.indexOf(scope.$index) && scope.$index > 0"
                        type="text"
                        @click="caozuoanniuDel(scope)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <!-- <el-col :span="6">
                <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-col> -->
            </el-row>
            <!-- <el-form-item v-if="mainForm.type == 'B'" label="商品出入库" prop="joinCode">
              <el-radio-group v-model="mainForm.joinCode">
                <el-radio :label="true">关联条码</el-radio>
                <el-radio :label="false">不关联条码</el-radio>
              </el-radio-group>
            </el-form-item> -->
          </el-form>
          <div class="footer">
            <el-button @click="data.removeTab()">取 消</el-button>
            <el-button type="primary" @click="submitMainForm(data.removeTab)">确 定</el-button>
          </div>
        </div>
      </div>
    </template>
  </zj-tab-page>
</template>

<script>
import {
  getDepartmentList,
  addDepartment,
  editDepartment,
  getDepartmentDetail,
  deleteDepartment,
  adminWebsitSavePayConfig,
  adminWebsitDeletePayConfig
} from '@/api/setting'
import geographicalPosi from '@/components/geographicalPosi/index.vue'
import { adminCompanyPayConfigList } from '@/api/paymentMerchantManagement'
export default {
  components: { geographicalPosi },
  data() {
    return {
      PayConfigList: [],
      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,
        isUseAllinpay: true,
        payWorkerCodeId: '',
        payConfigList: [],
        isIncre: true,
        joinCode: '',
        type: ''
      },
      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' }]
      },
      indexs: [0]
    }
  },

  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: () => {
          adminCompanyPayConfigList({ pageNum: 1, pageSize: -1, params: [] }).then(res => {
            this.PayConfigList = res.data.records.map(item => ({
              label: item.payMerchantName,
              value: item.id
            }))
          })

          this.cancelMainForm()
          this.$nextTick(() => {
            this.mainFormType = type
            this.mainFormVisible = true
            if (type == 'add') {
              this.editId = null
              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,
                  isUseAllinpay: res.data.isUseAllinpay,
                  payWorkerCodeId: res.data.payWorkerCodeId,
                  payConfigList: res.data.payConfigList || [],
                  isIncre: res.data.isIncre,
                  joinCode: res.data.joinCode,
                  type: res.data.type
                }
              })
            }
          })
        },
        // 关闭时事件
        closeEvent: () => {}
      })
    },

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

    // 提交 网点表单
    submitMainForm(removeTab) {
      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,
            isUseAllinpay: this.mainForm.isUseAllinpay,
            payWorkerCodeId: this.mainForm.payWorkerCodeId,
            payConfigList: this.mainForm.payConfigList.filter(item => item.websitId),
            joinCode: this.mainForm.joinCode
          }
          if (this.mainFormType == 'edit') {
            params.websitId = this.editId
            editDepartment(params).then(res => {
              this.getList()
              this.$successMsg('编辑成功')
              removeTab('list')
            })
          } else {
            addDepartment(params).then(res => {
              this.getList()
              this.$successMsg('添加成功')
              removeTab('list')
            })
          }
        }
      })
    },
    caozuoanniuSave(data) {
      adminWebsitSavePayConfig({
        ...{
          companyWechatName: JSON.parse(localStorage.getItem('greemall_user'))?.companyName || '',
          companyWechatId: JSON.parse(localStorage.getItem('greemall_user'))?.companyWechatId || ''
        },
        ...data.row
      }).then(res => {
        getDepartmentDetail({ id: data.row.websitId }).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,
            isUseAllinpay: res.data.isUseAllinpay,
            payWorkerCodeId: res.data.payWorkerCodeId,
            payConfigList: res.data.payConfigList || [],
            isIncre: res.data.isIncre,
            joinCode: res.data.joinCode,
            type: res.data.type
          }
          this.$successMsg('保存成功')
          if (data.$index > 0) {
            if (~indexs.indexOf(data.$index)) {
              this.indexs.splice(indexs.indexOf(data.$index), 1)
            }
          }
        })
      })
    },
    caozuoanniuDel(data) {
      adminWebsitDeletePayConfig({
        id: data.row.id
      }).then(res => {
        getDepartmentDetail({ id: data.row.websitId }).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,
            isUseAllinpay: res.data.isUseAllinpay,
            payWorkerCodeId: res.data.payWorkerCodeId,
            payConfigList: res.data.payConfigList || [],
            isIncre: res.data.isIncre,
            joinCode: res.data.joinCode,
            type: res.data.type
          }
          this.$successMsg('删除成功')
          if (data.$index > 0) {
            if (~indexs.indexOf(data.$index)) {
              this.indexs.splice(indexs.indexOf(data.$index), 1)
            }
          }
        })
      })
    },
    caozuoanniuEid(data) {
      if (!~this.indexs.indexOf(data.$index)) {
        this.indexs.push(data.$index)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  background: #fff;
  padding: 15px 40px;
  box-sizing: border-box;
  transition: all 0.28s;
  text-align: right;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%), 0 2px 5px 0 rgb(0 0 0 / 10%);

  &.hideSidebar {
    margin-left: 54px;
    width: calc(100vw - 54px);
  }

  &.openSidebar {
    margin-left: 210px;
    width: calc(100vw - 210px);
  }

  .tips {
    font-size: 12px;
    color: red;
    margin-top: 10px;
  }
}
</style>