middleground_code_v2/src/views/masterDataOptions/displayInfo/settingChunk.vue

<template>
  <div class="settingChunk">
    <div class="leftAll">
      <div class="search">
        <el-input
            placeholder="搜索"
            prefix-icon="el-icon-search"
            v-model="searchValue"
        >
        </el-input>
      </div>
      <div class="checkBoxList">
        <!--        字段-->
        <template v-if="showFiledFlag">
          <el-checkbox-group v-model="pickList" @change="checkBoxChangeHandle">
            <template v-for="(item,index) in allBtnList">
              <div class="checkBoxItem" :key="item.id" v-if="item.name.includes(searchValue)">
                <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
              </div>
            </template>
          </el-checkbox-group>
        </template>
        <!--        按钮类型-->
        <template v-else>
          <el-checkbox-group v-model="pickList" @change="changeBtnBoxHandle">
            <template v-for="(item,index) in allFiledList">
              <div class="checkBoxItem" :key="item.buttonType" v-if="item.buttonName.includes(searchValue)">
                <el-checkbox :label="item.buttonType">{{ item.buttonName }}</el-checkbox>
              </div>
            </template>
          </el-checkbox-group>
        </template>
      </div>
    </div>
    <div class="rightAdd">
      <div class="pickTitle">已选择（{{ pickShowList.length }}）</div>
      <div class="showCheckBoxList">
        <draggable v-model="pickShowList">
          <template v-if="showFiledFlag">
            <div class="showCheckBoxItem" v-for="(item,index) in pickShowList" :key="item.viewFiled">
              <div class="name">{{ item.name }}</div>
              <div class="btn" @click="deleShowList(item,index)">x</div>
            </div>
          </template>
          <template v-else>
            <div class="showCheckBoxItem" v-for="(item,index) in pickShowList" :key="item.buttonType">
              <div class="name">{{ item.buttonName }}</div>
              <div class="btn" @click="deleBtnShowList(item,index)">x</div>
            </div>
          </template>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { authApi } from '@/api/apis/auth'

export default {
  name: 'settingChunk',
  data() {
    return {
      searchValue: '',//搜索值
      allBtnList: [],//所有选项
      allFiledList: [
        {
          buttonName: '新建',
          buttonValue: 'new',
          buttonType: '1'
        }, {
          buttonName: '重置',
          buttonValue: 'resize',
          buttonType: '2'
        }, {
          buttonName: '查询',
          buttonValue: 'search',
          buttonType: '3'
        }, {
          buttonName: '修改',
          buttonValue: 'edit',
          buttonType: '4'
        }, {
          buttonName: '删除',
          buttonValue: 'dele',
          buttonType: '5'
        }, {
          buttonName: '查看',
          buttonValue: 'view',
          buttonType: '6'
        }, {
          buttonName: '下发',
          buttonValue: 'send',
          buttonType: '7'
        },
        {
          buttonName: '查看数据格式',
          buttonValue: 'viewData',
          buttonType: '8'
        }
      ],//所有按钮
      //key字段【'待选字段'，‘选中字段’，viewType】
      dist: {
        '查询': ['queryFiled', 'dbQueryFiled', 1],
        '列表': ['listFiled', 'dbListFiled', 2],
        '新增': ['addFiled', 'dbAddFiled', 3],
        '修改': ['editFiled', 'dbEditFiled', 4],
        '查看': ['showFiled', 'dbShowFiled', 5]
      },
      pickDist: {},//多选框字典
      pickList: [],//用于绑定选中的多选框
      pickShowList: [],//用于展示选中的多选框
      thisKey: '',//当前key
      showFiledFlag: true//判断当前是字段还是按钮
    }
  },
  methods: {
    //显示字段获取
    async getAllBtn(key) {
      this.showFiledFlag = true
      this.thisKey = key
      //重置数据
      this.pickShowList = []
      this.pickList = []
      this.searchValue = ''
      this.allBtnList = []
      this.pickDist = {}

      //有就走字段逻辑 没有则走按钮逻辑
      if (this.dist[key]) {
        const res = await authApi('mdmModuleService', '', 'queryMdmViewField', '', {
          id: this.$route.query.id
        })
        let tempArr = this.dist[key]
        res.attribute[tempArr[0]].forEach(item => {
          this.$set(this.pickDist, item.id, item.name)
        })
        this.allBtnList = res.attribute[tempArr[0]]
        res.attribute[tempArr[1]].forEach(item => {
          this.pickList.push(item.viewFiled)
          this.checkBoxChangeHandle()
        })
      } else {
        this.showFiledFlag = false
        const res = await authApi('mdmModuleService', '', 'queryMdmViewButton', '', {
          mdmId: this.$route.query.id
        })
        res.attribute.forEach(item => {
          this.pickList.push(item.buttonType)
        })
        this.changeBtnBoxHandle()

      }
    },
    //当多选框改变时
    checkBoxChangeHandle() {
      let tempList = []
      this.pickShowList = []
      //这边需要将选中的list通过dist变成一个可用的结构
      this.pickList.forEach(item => {
        this.pickShowList.push({
          name: this.pickDist[item],
          viewFiled: item
        })
      })
    },
    //当按钮多选改变时
    changeBtnBoxHandle() {
      this.pickShowList = []
      this.pickList.forEach(item => {
        let obj = this.allFiledList[item - 1]
        this.pickShowList.push(obj)
      })
    },
    //选择栏目删除按钮
    deleShowList(item, index) {
      this.pickShowList.splice(index, 1)
      //这里是为了让右边选中box同步修改
      let tempArr = []
      this.pickShowList.forEach((item) => {
        tempArr.push(item.viewFiled)
      })
      this.pickList = tempArr
    },
    //删除按钮
    deleBtnShowList(item, index) {
      this.pickShowList.splice(index, 1)
      let tempArr = []
      this.pickShowList.forEach((item) => {
        tempArr.push(item.buttonType)
      })
      this.pickList = tempArr
    },
    //保存方法
    async saveHandle() {
      //首先需要判断是字段设置还是按钮
      if (this.showFiledFlag) {
        //字段
        let keyArr = this.dist[this.thisKey]
        let params = {
          mdmId: this.$route.query.id,
          viewType: keyArr[2]
        }
        params[keyArr[1]] = this.pickShowList
        this.openLoading("submit")
        const res = await authApi('mdmModuleService', '', 'saveOrUpdateMdmViewField', '', params)
        this.$vmNews('保存成功！', 'success')
        this.$emit('saveSuccessEmit')
      } else {
        //按钮
        let params = {
          mdmId: this.$route.query.id,
          dbButtonFiled: this.pickShowList
        }
        this.openLoading("submit")
        const res = await authApi('mdmModuleService', '', 'saveOrUpdateMdmViewButton', '', params)
        this.$vmNews('保存成功！', 'success')
        this.$emit('saveSuccessEmit')
      }

    }
  },
  mounted() {
  },
  components: {
    draggable
  }
}
</script>


<style scoped lang="scss">
.settingChunk {
  display: flex;
  height: 80vh;

  .leftAll {
    flex: 1;
    padding: 0 20px;
    border-right: 1px solid #EBEBEB;

    .search {
      width: 100%;
    }

    .checkBoxList {
      height: 70vh;
      overflow: auto;
    }

    .checkBoxItem {
      margin: 20px 0 16px;
    }
  }

  .rightAdd {
    flex: 1;
    padding: 0 20px;

    .pickTitle {

      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
      line-height: 20px;
      text-align: left;
      font-style: normal;
    }

    .showCheckBoxList {
      height: 70vh;
      overflow: auto;
    }

    .showCheckBoxItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0 10px;
      padding: 15px 10px;
      background: #F8F8F8;
      border-radius: 4px;
      cursor: move; /* 将指针换成拖动样式 */
      user-select: none; /* 禁止选择文字 */
      .btn {
        color: grey;
        cursor: pointer;
      }
    }
  }
}
</style>