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: 0 10px"
              ><el-input v-model="input" placeholder="模糊搜索"></el-input
            ></span>
            <el-button type="primary" @click="handleDownload">下载模板</el-button>
            <span style="display: inline-block; margin: 0 10px">
              <el-upload action="_" :show-file-list="false" :http-request="adminWebsitImportFun">
                <el-button type="primary">导入</el-button>
              </el-upload>
            </span>
            <el-button type="primary" @click="daochuqu">导出</el-button>
          </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)" style="box-sizing: border-box; padding-bottom: 50px">
          <el-form ref="mainForm" :model="mainForm" :rules="mainFormRules" label-width="130px">
            <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"
                    :disabled="true"
                    filterable
                    clearable
                  >
                  </el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="所属公司" prop="belongCompanyCode">
                  <el-select
                    v-model="mainForm.belongCompanyCode"
                    placeholder="请选择"
                    @change="
                      V => {
                        if (v) {
                          belongCompany = BELONG_COMPANY.find(v).label
                        } else {
                          belongCompany = ''
                        }
                      }
                    "
                  >
                    <el-option v-for="item in BELONG_COMPANY" :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="name">
                  <el-input placeholder="请输入网点名称" v-model="mainForm.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="网点编号" prop="websitId">
                  <el-input
                    :disabled="!!~['edit'].indexOf(activeKey)"
                    placeholder="请输入网点编号"
                    v-model="mainForm.websitId"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="网点属性" prop="attr">
                  <el-radio-group v-model="mainForm.attr">
                    <el-radio label="SELF">自建网点</el-radio>
                    <el-radio label="MAJOR">第三方专业网点</el-radio>
                    <el-radio label="MERCHANT">第三方经销商家网点</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="网点级别" prop="level">
                  <el-radio-group v-model="mainForm.level">
                    <el-radio :label="1">一级网点</el-radio>
                    <el-radio :label="2">二级网点</el-radio>
                  </el-radio-group>
                </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="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>
                  <div style="margin-left: 5px; color: #fd8005; width: calc(100% + 120px); margin-left: -90px">
                    配置师傅销售辅材配件给用户的电子支付收款商户
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="保险类型" prop="insureType">
                  <el-checkbox-group v-model="mainForm.insureType">
                    <el-checkbox label="意外险">意外险</el-checkbox>
                    <el-checkbox label="雇主险">雇主险</el-checkbox>
                    <el-checkbox label="工伤险">工伤险</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="保险支付商户" prop="payInsureCodeId">
                  <el-select v-model="mainForm.payInsureCodeId" 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="legalName">
                  <el-input placeholder="请输入" v-model="mainForm.legalName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="法人手机" prop="legalMobile">
                  <el-input placeholder="请输入" v-model="mainForm.legalMobile"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="法人身份证" prop="legalIdCard">
                  <el-input placeholder="请输入" v-model="mainForm.legalIdCard"></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="websitPhone">
                  <el-input placeholder="请输入" v-model="mainForm.websitPhone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="开户银行" prop="openBank">
                  <el-input placeholder="请输入" v-model="mainForm.openBank"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="银行账号" prop="bankAccount">
                  <el-input placeholder="请输入" v-model="mainForm.bankAccount"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="邮箱" prop="email">
                  <el-input placeholder="请输入" v-model="mainForm.email"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="传真" prop="fax">
                  <el-input placeholder="请输入" v-model="mainForm.fax"></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="linkMobile">
                  <el-input
                    placeholder="请输入联系人电话"
                    maxlength="11"
                    type="number"
                    v-model="mainForm.linkMobile"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="邮编" prop="zipCode">
                  <el-input placeholder="请输入" v-model="mainForm.zipCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="配件网点编号" prop="partsWebsitId">
                  <el-input placeholder="请填写" v-model="mainForm.partsWebsitId"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="配件网点属性" prop="partsWebsitAttr">
                  <el-radio-group v-model="mainForm.partsWebsitAttr">
                    <el-radio :label="true">市区</el-radio>
                    <el-radio :label="false">外区</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="配件是否支持现金" prop="partsIsCash">
                  <el-radio-group v-model="mainForm.partsIsCash">
                    <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>
                  <span style="margin-left: 5px; color: #fd8005">网点销售辅材配件通联支付配置开关</span>
                </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.name }}</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.orgId }}</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.mchNo }}</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.appid }}</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-row>
          </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,
  adminWebsitImport,
  adminWebsitExport
} from '@/api/setting'
import geographicalPosi from '@/components/geographicalPosi/index.vue'
import { adminCompanyPayConfigList } from '@/api/paymentMerchantManagement'
import { commonTemplateDownload } from '@/api/common.js'
import { dictListDict } from '@/api/dataDictionary.js'
import { getDataDictionary } from '@/api/dataDictionary.js'
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: '',
        websitId: '',
        websitPhone: '',
        lat: '',
        lng: '',
        address: '',
        status: true,
        isUseAllinpay: true,
        payWorkerCodeId: '',
        payConfigList: [],
        isIncre: true,
        joinCode: '',
        type: '',
        partsWebsitId: '',
        partsWebsitAttr: '',
        partsIsCash: '',
        legalName: '',
        legalMobile: '',
        legalIdCard: '',
        openBank: '',
        bankAccount: '',
        email: '',
        fax: '',
        zipCode: '',
        linkMobile: '',
        attr: '',
        level: '',
        insureType: [],
        belongCompanyCode: '',
        belongCompany: '',
        payInsureCodeId: ''
      },
      mainFormRules: {
        name: [{ required: true, message: '请填写网点名称', trigger: 'blur' }],
        linkName: [{ required: true, message: '请填写联系人名称', trigger: 'blur' }],
        websitId: [{ required: true, message: '请填写网点编号', trigger: 'blur' }],
        websitPhone: [{ required: true, message: '请填写联系人电话', trigger: 'blur' }],
        address: [{ required: true, message: '请选择GPS地址', trigger: 'blur' }],
        payWorkerCodeId: [{ required: true, message: '请选择电子支付商户', trigger: 'blur' }],
        legalName: [{ required: true, message: '请输入', trigger: 'blur' }],
        legalMobile: [{ required: true, message: '请输入', trigger: 'blur' }],
        legalIdCard: [{ required: true, message: '请输入', trigger: 'blur' }],
        openBank: [{ required: true, message: '请输入', trigger: 'blur' }],
        bankAccount: [{ required: true, message: '请输入', trigger: 'blur' }],
        email: [{ required: true, message: '请输入', trigger: 'blur' }],
        zipCode: [{ required: true, message: '请输入', trigger: 'blur' }],

        attr: [{ required: true, message: '请输入', trigger: 'blur' }],
        level: [{ required: true, message: '请输入', trigger: 'blur' }],
        insureType: [{ required: true, message: '请输入', trigger: 'blur' }],
        belongCompanyCode: [{ required: true, message: '请输入', trigger: 'blur' }],
        payInsureCodeId: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      indexs: [0],
      BELONG_COMPANY: []
    }
  },

  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) ||
                !!~item.websitNumber.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) ||
              !!~item.websitNumber.indexOf(this.input)
            : true)
        )
      }).length
    }
  },
  watch: {
    value1() {
      this.$nextTick(() => {
        this.currentPage = 1
      })
    },
    input() {
      this.$nextTick(() => {
        this.currentPage = 1
      })
    }
  },
  methods: {
    daochuqu() {
      adminWebsitExport({}, `网点管理`)
        .then(res => {
          this.$message({
            message: '导出成功',
            type: 'success'
          })
        })
        .catch(err => {
          this.$message.error('导出失败')
        })
    },
    adminWebsitImportFun(data) {
      const loading = this.$loading({
        lock: true,
        text: '正在导入',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      var formdata = new FormData()
      formdata.append('file', data.file)
      adminWebsitImport({ formdata })
        .then(res => {
          this.getList()
          loading.close()
          this.$message({
            type: 'success',
            message: '导入成功!'
          })
        })
        .catch(err => {
          loading.close()
          this.$message({
            type: 'error',
            message: err.message || '导入失败'
          })
        })
    },
    // 下载导入模版
    handleDownload() {
      commonTemplateDownload({ name: '网点管理导入模板.xlsx' }, '网点管理导入模板')
        .then(res => {
          this.$message({
            message: '下载成功',
            type: 'success'
          })
        })
        .catch(err => {
          this.$message.error('下载失败')
        })
    },
    // 获取网点列表
    getList() {
      var list_ = []
      var levels = []
      function dg(list, level = 1, pname = []) {
        for (let { children, name, ...item } of list) {
          var n_ = ''
          for (var i = 1; i < level; i++) n_ += ` -> `
          list_.push({
            ...item,
            name: item.type == 'C' ? `${n_}(${item.websitNumber})${name}` : `${n_}${name}`,
            level,
            pname: [...pname]
          })
          if (!~levels.indexOf(level)) levels.push(level)
          if (children && children.length)
            dg(children, level + 1, [
              ...pname,
              item.type == 'C' ? `${n_}(${item.websitNumber})${name}` : `${n_}${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: () => {
          getDataDictionary({
            pageNum: 1,
            pageSize: -1,
            params: [
              { param: 'a.status', compare: '=', value: 'ON' },
              { param: 'a.dict_type', compare: '=', value: 'BELONG_COMPANY' }
            ]
          }).then(res => {
            this.BELONG_COMPANY = res.data.records.map(item => ({
              value: item.dictCode,
              label: item.dictValue
            }))
          })

          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,
                  websitId: res.data.websitId,
                  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,
                  partsWebsitId: res.data.partsWebsitId,
                  partsWebsitAttr: res.data.partsWebsitAttr,
                  partsIsCash: res.data.partsIsCash,
                  payConfigList: res.data.payConfigList || [],
                  isIncre: res.data.isIncre,
                  joinCode: res.data.joinCode,
                  type: res.data.type,
                  legalName: res.data.legalName,
                  legalMobile: res.data.legalMobile,
                  legalIdCard: res.data.legalIdCard,
                  openBank: res.data.openBank,
                  bankAccount: res.data.bankAccount,
                  email: res.data.email,
                  fax: res.data.fax,
                  zipCode: res.data.zipCode,
                  linkMobile: res.data.linkMobile,
                  attr: res.data.attr,
                  level: res.data.level,
                  insureType: res.data.insureType ? res.data.insureType.split(',') : [],
                  belongCompanyCode: res.data.belongCompanyCode,
                  belongCompany: res.data.belongCompany,
                  payInsureCodeId: res.data.payInsureCodeId
                }
              })
            }
          })
        },
        // 关闭时事件
        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,
            websitId: this.mainForm.websitId,
            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,
            partsWebsitId: this.mainForm.partsWebsitId,
            partsWebsitAttr: this.mainForm.partsWebsitAttr,
            partsIsCash: this.mainForm.partsIsCash,
            payConfigList: this.mainForm.payConfigList,
            joinCode: this.mainForm.joinCode,
            legalName: this.mainForm.legalName,
            legalMobile: this.mainForm.legalMobile,
            legalIdCard: this.mainForm.legalIdCard,
            openBank: this.mainForm.openBank,
            bankAccount: this.mainForm.bankAccount,
            email: this.mainForm.email,
            fax: this.mainForm.fax,
            zipCode: this.mainForm.zipCode,
            linkMobile: this.mainForm.linkMobile,
            attr: this.mainForm.attr,
            level: this.mainForm.level,
            insureType: (this.mainForm.insureType || []).join(','),
            belongCompanyCode: this.mainForm.belongCompanyCode,
            belongCompany: this.mainForm.belongCompany,
            payInsureCodeId: this.mainForm.payInsureCodeId
          }
          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 || '',
          websitId: this.editId
        },
        ...data.row
      }).then(res => {
        getDepartmentDetail({ id: this.editId }).then(res => {
          this.mainForm = {
            parentId: res.data.parentId,
            name: res.data.name,
            linkName: res.data.linkName,
            websitId: res.data.websitId,
            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,
            partsWebsitId: res.data.partsWebsitId,
            partsWebsitAttr: res.data.partsWebsitAttr,
            partsIsCash: res.data.partsIsCash,
            payConfigList: res.data.payConfigList || [],
            isIncre: res.data.isIncre,
            joinCode: res.data.joinCode,
            type: res.data.type,
            legalName: res.data.legalName,
            legalMobile: res.data.legalMobile,
            legalIdCard: res.data.legalIdCard,
            openBank: res.data.openBank,
            bankAccount: res.data.bankAccount,
            email: res.data.email,
            fax: res.data.fax,
            zipCode: res.data.zipCode,
            linkMobile: res.data.linkMobile,
            attr: res.data.attr,
            level: res.data.level,
            insureType: res.data.insureType ? res.data.insureType.split(',') : [],
            belongCompanyCode: res.data.belongCompanyCode,
            belongCompany: res.data.belongCompany,
            payInsureCodeId: res.data.payInsureCodeId
          }
          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: this.editId }).then(res => {
          this.mainForm = {
            parentId: res.data.parentId,
            name: res.data.name,
            linkName: res.data.linkName,
            websitId: res.data.websitId,
            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,
            partsWebsitId: res.data.partsWebsitId,
            partsWebsitAttr: res.data.partsWebsitAttr,
            partsIsCash: res.data.partsIsCash,
            payConfigList: res.data.payConfigList || [],
            isIncre: res.data.isIncre,
            joinCode: res.data.joinCode,
            type: res.data.type,
            legalName: res.data.legalName,
            legalMobile: res.data.legalMobile,
            legalIdCard: res.data.legalIdCard,
            openBank: res.data.openBank,
            bankAccount: res.data.bankAccount,
            email: res.data.email,
            fax: res.data.fax,
            zipCode: res.data.zipCode,
            linkMobile: res.data.linkMobile,
            attr: res.data.attr,
            level: res.data.level,
            insureType: res.data.insureType ? res.data.insureType.split(',') : [],
            belongCompanyCode: res.data.belongCompanyCode,
            belongCompany: res.data.belongCompany,
            payInsureCodeId: res.data.payInsureCodeId
          }
          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>