xiaoshi_system/src/views/components/dialog/fields.vue

<template>
  <div>
    <el-dialog
      custom-class="myFields"
      title="显示栏位管理"
      :visible.sync="dialogVisible"
      width="300px"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div>
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <p></p>
        <el-checkbox-group v-model="checked" @change="handleCheckedChange">
          <template>
            <div  v-for="(field,index) in filedList" :key="field.value" style="padding:5px 0;">
              <el-checkbox :label="field.value">
                <div>
                  <div>{{ field.name }}</div>
                  <div>
                    <el-button type="text" :disabled="index == filedList.length-1" class="down"> <i class="el-icon-sort-down"  @click.stop.prevent="down(index,field)"></i></el-button>
                    <el-button type="text" :disabled="index == 0" class="up"><i class="el-icon-sort-up" @click.stop.prevent="up(index,field)"></i></el-button>
                  </div>
                </div>
              </el-checkbox>
            </div>
          </template>
          
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    type:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      //控制显示弹窗
      dialogVisible: false,
      //是否全选
      isIndeterminate: false,
      //全选
      checkAll: false,
      //选择
      checked: [],
      //显示栏位
      filedList:[],
      //按钮加载
      loading:false
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
  },
  methods: {

    //打开栏位
    open(data) {
      this.filedList  = JSON.parse(JSON.stringify(data))
      this.checked = data.filter(item=>{
        return item.ifHidden == false
      }).map(item=>{
        return item.value
      })
      this.handleCheckedChange(this.checked)
      this.dialogVisible = true;
    },
    //下移
    down(index,file){
      var arr = this.filedList
      this.filedList.splice(index, 2, arr[index + 1], arr[index])
    },
    //上移
    up(index,file){
      var arr = this.filedList
      this.filedList.splice(index - 1, 2, arr[index], arr[index - 1])
    },
    //关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },
    //提交更改
    submit() {
      for(var i = 0; i < this.filedList.length; i++ ){
        if(this.checked.includes(this.filedList[i].value)){
          this.filedList[i].ifHidden = false
        }else{
          this.filedList[i].ifHidden = true
        }
      }
      var params = {
        tableName : this.type,
        value:this.filedList
      }
      this.loading = true
      this.$api.setCustomField(params).then((response)=>{
        if(response.code == 200){
          this.loading = false
          this.handleClose()
          this.$emit('getFieldList',this.filedList)
        }
      }).catch(error=>{
        this.loading = false
      })
    },
    //全选
    handleCheckAllChange(val) {
      this.checked = val ? this.filedList.map(item=>{
        return item.value
      }) : [];
      this.isIndeterminate = false;
    },
    //勾选
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.filedList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.filedList.length;
    },
  },
};
</script>
<style lang="scss">
.myFields{
  .el-checkbox{
    width: 100%;
    .el-checkbox__label{
      width:calc(100% - 10px);
      div{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .down,.up{
          padding: 0;
          margin: 0;
        }
        i{
          color: #999;
        }
        i:hover{
          color: #409EFF;
        }
      }
    }
  }
}
</style>