caimei-authentic-manager/src/views/admin/member/settings/service-edit.vue

<template>
  <div v-loading="isLoading" class="app-container">
    <div class="list">
      <!-- 会员基础功能服务配置 -->
      <div class="section">
        <!-- 搜索区域 -->
        <div class="filter-container">
          <div class="filter-control tip">会员基础功能服务配置<span>（以下为会员基础拥有功能）</span></div>
          <div class="filter-control" />
        </div>
        <!-- 表格区域 -->
        <el-table :data="baseMenuList" border fit height="600" highlight-current-row @cell-click="handleCellClick">
          <el-table-column label="选择" align="center" width="120">
            <template slot-scope="{ row }">
              <el-checkbox v-model="row.checked" :disabled="row.moveFlag === 0" />
            </template>
          </el-table-column>
          <el-table-column label="序号" type="index" width="80" align="center" />
          <el-table-column label="订制需求" prop="title" align="center" />
          <el-table-column label="是否配置" align="center" width="120">
            <template slot-scope="{ row }">
              <el-checkbox v-model="row.status" :true-label="0" :false-label="1" :disabled="row.moveFlag === 0" />
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 交换按钮 -->
      <div class="switch-control">
        <el-tooltip class="item" effect="dark" content="将右侧勾选项加入左侧列表" placement="top">
          <el-button type="primary" icon="el-icon-arrow-left" @click="handleJoinLeft" />
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="将左侧勾选项加入右侧列表" placement="top">
          <el-button type="primary" icon="el-icon-arrow-right" @click="handleJoinRight" />
        </el-tooltip>
      </div>

      <!-- 会员订制功能服务配置 -->
      <div class="section">
        <!-- 搜索区域 -->
        <div class="filter-container">
          <div class="filter-control tip">会员订制功能服务配置<span>（以下为设置会员特定的订制服务功能）</span></div>
          <div class="filter-control" />
        </div>
        <!-- 表格区域 -->
        <el-table :data="upMenuList" border fit height="600" highlight-current-row @cell-click="handleCellClick">
          <el-table-column label="选择" align="center" width="120">
            <template slot-scope="{ row }">
              <el-checkbox v-model="row.checked" :disabled="row.moveFlag === 0" />
            </template>
          </el-table-column>
          <el-table-column label="序号" type="index" width="80" align="center" />
          <el-table-column label="订制需求" prop="title" align="center" />
          <el-table-column label="是否配置" align="center" width="120">
            <template slot-scope="{ row }">
              <el-checkbox v-model="row.status" :true-label="0" :false-label="1" :disabled="row.moveFlag === 0" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 确认 取消 -->
    <div class="control-box">
      <el-button type="warning" @click="navigateBack">返回</el-button>
      <el-button type="primary" @click="updateVipMenusConfigure">保存</el-button>
    </div>
  </div>
</template>

<script>
import { fetchVipMenusConfigure, updateVipMenusConfigure } from '@/api/member'
export default {
  data() {
    return {
      isLoading: false,
      listQuery: {
        pacakgeId: ''
      },
      baseMenuList: [],
      upMenuList: []
    }
  },
  created() {
    this.fetchVipMenusConfigure()
  },
  methods: {
    getList() {},
    // 获取菜单配置列表
    fetchVipMenusConfigure() {
      this.isLoading = true
      fetchVipMenusConfigure().then(res => {
        console.log(res)
        this.baseMenuList = res.data.baseMenuList.map(item => {
          item.checked = false
          return item
        })
        this.upMenuList = res.data.upMenuList.map(item => {
          item.checked = false
          return item
        })
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 修改菜单配置列表
    updateVipMenusConfigure() {
      this.isLoading = true
      updateVipMenusConfigure({
        upMenuList: this.upMenuList,
        baseMenuList: this.baseMenuList
      }).then(res => {
        this.$message.success('保存配置成功')
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.back()
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 添加到左边
    handleJoinLeft() {
      const beforeJoinList = this.upMenuList.filter(item => item.checked)
      this.upMenuList = this.upMenuList.filter(item => !item.checked)
      this.baseMenuList.push(...beforeJoinList.map(item => {
        item.checked = false
        return item
      }))
    },
    // 添加到右边
    handleJoinRight() {
      const beforeJoinList = this.baseMenuList.filter(item => item.checked)
      this.baseMenuList = this.baseMenuList.filter(item => !item.checked)
      this.upMenuList.push(...beforeJoinList.map(item => {
        item.checked = false
        return item
      }))
    },
    handleCellClick(row) {
      console.log(row)
      if (row.moveFlag) {
        row.checked = !row.checked
      }
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  width: 100%;
  overflow-x: auto;
  margin: 0 auto;

  .list{
    width: 1350px;
    margin: 30px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .section{
    width: 600px;
  }

  .filter-container {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 16px;

    .filter-control {
      margin: 0;

      .el-select{
        width: 100px;
      }
    }
  }
  .tip {
    font-size: 14px;
    span {
      color: #f56c6c;
    }
  }
  .control-box {
    margin: 40px 0;
    text-align: center;
    .el-button {
      width: 140px;
      margin: 0 8px;
    }
  }
}
</style>