web-retail-admin/src/views/configManage/noticeConfig/noticeBack.vue

<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-10-24 15:45:01
-->
<template>
  <div class="page">
    <div class="topbox">
      <topBar v-if="topList.length > 0"
              :topList="topList"
              :moren="moren"></topBar>
    </div>
    <div class="main">
      <div class="table_b">
        <div class="table_c">
          <div class="change_i table_cc"
               style="justify-content: center;">
            角色
          </div>
          <div style="margin: 0 auto;">
            {{ $t('MN_F_T_774') }}
          </div>
        </div>
        <div v-for="(ctem,cndex) in typeList"
             :key="cndex"
             class="table_c">
          <div class="change_i table_cc">
            <el-checkbox v-model="ctem.changed"
                         @change="checkClickA($event,cndex)">{{ ctem.roleName }}</el-checkbox>
          </div>
          <div v-for="(stem,sndex) in ctem.sysUserList"
               :key="sndex">
            <div class="change_i">
              <el-checkbox v-model="stem.changed"
                           @change="checkClickB($event,cndex,sndex)">{{ stem.nickName }}</el-checkbox>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button size="small"
                 class="thebtn2"> {{ $t('ENU_P_TYPE0') }}</el-button>
      <el-button size="small"
                 @click="submit"
                 class="thebtn1"> {{ $t('MN_F_32') }}</el-button>
    </div>
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import * as api from '@/api/notice.js'
export default {
  name: 'Bzpz',
  components: {
    topBar,
  },
  data() {
    return {
      tabActive: 0,
      topList: [
        {
          name: '前台公告',
          id: 0,
        },
        {
          name: '后台公告',
          id: 1,
        },
        {
          name: '站内信配置',
          id: 2,
        },
      ],
      typeList: [],
      gradeList: [],
      rangList: [],
      awardList: [],
      menuList: [],
      moren: '/configManage/noticeConfig/noticeBack',
      topList: [
        {
          name: '前台公告',
          path: '/configManage/noticeConfig/noticeConfig',
        },
        {
          name: '后台公告',
          path: '/configManage/noticeConfig/noticeBack',
        },
        {
          name: '站内信配置',
          path: '/configManage/noticeConfig/email',
        },
      ],
    }
  },
  mounted() {
    // 获取列表
    this.getDataList()
  },
  methods: {
    getNoticeList() {
      api.noticeAdminData().then((res) => {
        console.log(
          '%c [ res ]-106',
          'font-size:13px; background:#724770; color:#b68bb4;',
          res
        )
        this.typeList.forEach((item) => {
          res.data.forEach((ctem) => {
            if (item.roleId == ctem.secondCategory) {
              item.sysUserList.forEach((stem) => {
                ctem.contentVOList.forEach((sstem) => {
                  if (stem.userId == sstem) {
                    item.changed = true
                    stem.changed = true
                  }
                })
              })
            }
          })
        })
        this.$forceUpdate()
        console.log(
          '%c [ this.typeList ]-108',
          'font-size:13px; background:#b96843; color:#fdac87;',
          this.typeList
        )
      })
    },
    handleLink(item) {
      this.tabActive = item.id
    },
    submit() {
      let obj = []
      this.typeList.forEach((item) => {
        if (item.changed) {
          obj.push({
            secondCategory: item.roleId,
            contentVOList: [],
          })
        }
      })
      this.typeList.forEach((item, index) => {
        item.sysUserList.forEach((ctem) => {
          obj.forEach((stem) => {
            if (stem.secondCategory == item.roleId && ctem.changed) {
              stem.contentVOList.push(ctem.userId)
            }
          })
        })
      })
      api.noticeAdminSave(obj).then((res) => {
        this.$message({
          message: res.msg,
          type: 'success',
        })
      })
    },
    getDataList() {
      // 获取公告类型
      api.noticeAdmin().then((res) => {
        this.typeList = res.data
        // 获取回显
        this.getNoticeList()
      })
    },
    setNewArr() {},
    checkClickA(e, index) {
      if (e) {
        this.typeList[index].changed = true
      } else {
        this.typeList[index].changed = false
        this.typeList[index].sysUserList.forEach((item) => {
          item.changed = false
        })
      }
      this.$forceUpdate()
    },
    checkClickB(e, index, cndex) {
      if (e) {
        this.typeList[index].sysUserList[cndex].changed = true
        this.typeList[index].changed = true
        // this.typeList[index].checkArr = []
        // this.typeList[index].sysUserList.forEach((item) => {
        //   if (item.changed) {
        //     this.typeList[index].checkArr.push(item.userId)
        //   }
        // })
      } else {
        this.typeList[index].sysUserList[cndex].changed = false
        // this.typeList[index].checkArr = []
        // this.typeList[index].sysUserList.forEach((item) => {
        //   if (item.changed) {
        //     this.typeList[index].checkArr.push(item.value)
        //   }
        // })
        this.typeList[index].sysUserList.forEach((item) => {
          this.typeList[index].changed = false
          if (item.changed) {
            this.typeList[index].changed = true
          }
        })
      }
      console.log(
        '%c [ this.typeList ]-196',
        'font-size:13px; background:#b058fa; color:#f49cff;',
        this.typeList
      )
      this.$forceUpdate()
    },
  },
}
</script>
<style scoped lang="scss">
.page {
  background: #f9f9f9;
  padding: 20px;
}
.topbox {
  align-items: center;
  padding: 0px 0 15px 0;
  display: flex;
  //   background: skyblue;
  .levelList_i {
    margin-left: 20px;
    position: relative;
    cursor: pointer;
    padding: 0 5px;
    min-width: 88px;
    height: 34px;
    border-radius: 17px;
    border: 1px solid #cccccc;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    text-align: center;
    line-height: 34px;
  }
}
.act {
  color: #ffffff;
  background: #08143f;
}
.act1 {
  border-bottom: 3px solid #1890ff !important;
}
.cha {
  font-size: 16px;
  color: #606266;
  position: absolute;
  top: 10px;
}
.li {
  width: 40px;
  margin: 0 auto;
  border-bottom: 3px solid transparent;
}
.main {
  background: #fff;
  border-top: 1px solid #ccc;
}
.table_a {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  // border-top: 1px solid #ccc;
}
.table_b {
  display: flex;
  flex-direction: column;
  // border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  // border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.table_c {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.table_cc {
  width: 140px;
  border-right: 1px solid #ccc;
}
.change_l {
  padding: 0 44px;
}
.change_i {
  display: flex;
  align-items: center;
  padding: 30px 20px;
}
.footer {
  height: 68px;
  background: #ffffff;
  box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  // margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  .thebtn1 {
    background: #3181e5;
    color: #ffffff;
    padding: 9px 45px;
  }
  .thebtn2 {
    background: #cccccc;
    color: #ffffff;
    padding: 9px 45px;
  }
}
</style>