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 {
  name: 'ServiceEdit',
  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>