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

<template>
  <div>
    <el-dialog custom-class="myFields" :title="sign?'筛选字段':'显示栏位管理'" :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>
            <draggable ref="el" v-model="filedList" @end="end" :options="{disabled: !order}" filter=".disabled">
              <div v-for="(field, index) in filedList" :key="field.value"  style="padding:5px 0;">
                <el-checkbox :label="field.value" :disabled="field.disabled">
                  <div>
                    <div :class="field.disabled?'disabled':''" :style="{'cursor':order?'move':'pointer'}">{{ field.name }}</div>
                    <div v-if="order && !field.disabled">
                      <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 == 1" class="up"><i class="el-icon-sort-up"
                          @click.stop.prevent="up(index, field)"></i></el-button>
                    </div>
                  </div>
                </el-checkbox>
              </div>
            </draggable>
          </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>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },
  props: {
    type: {
      type: String,
      default: null
    },
    projectId: {
      default: null,
    },
    taskId: {
      default: null,
    },
    sign: {
      type:Boolean,
      default: false,
    },
    productId:{
      default: null
    },
    url:{
      default:null
    },
    order:{
      default:true
    }
  },
  data() {
    return {
      //控制显示弹窗
      dialogVisible: false,
      //是否全选
      isIndeterminate: false,
      //全选
      checkAll: false,
      //选择
      checked: [],
      //显示栏位
      filedList: [],
      //按钮加载
      loading: false
    };
  },
  watch: {},
  computed: {},
  created() { },
  mounted() {
  },
  methods: {

    end(val){
        
    },
    //打开栏位
    open(data) {
      this.filedList = JSON.parse(JSON.stringify(data)).map(item=>{
        if(item.value == 'patentNo'){
          item.disabled = true
        }
        return item
      })
      this.checked = data.filter(item => {
        return item.ifHidden == false
      }).map(item => {
        return item.value
      })
      this.handleCheckedChange(this.checked)
      this.dialogVisible = true;
    },
    //下移
    down(index, file) {
      if(index == this.filedList.length -1){
        return
      }
      var arr = this.filedList
      this.filedList.splice(index, 2, arr[index + 1], arr[index])
    },
    //上移
    up(index, file) {
      if(index == 1){
        return
      }
      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++) {
        this.filedList[i].order = 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,
        projectId: this.projectId,
        taskId: this.taskId,
        productId:this.productId,
      }
      var apiItem = ''
      if(this.url){
        apiItem = this.url
      }else{
        // apiItem = (this.projectId == 0|| this.projectId || this.productId) ? 'setTableColumns' : 'setCustomField'
        apiItem = 'setTableColumns'
      }
      
      // sign为true时是统计栏位
      if (this.sign) {
        apiItem = 'setShowCountColumns'
        params.value = this.filedList.filter(item => {
          return item.ifHidden == false
        })
      }
      this.loading = true
      this.$api[apiItem](params).then((response) => {
        if (response.code == 200) {
          this.loading = false
          this.handleClose()
          // if (this.sign) {
          //   this.$emit('getFieldList', this.filedList)
          // } else {
            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>
<style lang="scss" scoped>
  .disabled{
    cursor: not-allowed;
  }
</style>