drp-ui/src/components/query-scheme/sizer/index.vue

<script>
import { getOperators } from './operators';
import { Columns } from '../colums';
import { getDicts as getDicts } from '@/api/system/dict/data'
export default {
  name:'Sizer',
  props:{
    value:{
      type:[Array],
      require:true,
    },
    candidate:{
      type:[Array],
      require:true,
    },
  },
  components:{
    ElDraggable: () => import("@/components/draggable/index.vue"),
    ElFileUpload: () => import("@/components/FileUpload/index.vue"),
    ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
    ElPopoverMultipleSelectV2: () =>
      import("@/components/popover-select-v2/multiple.vue"),
    ElPopoverTreeSelect: () =>
      import("@/components/popover-tree-select/index.vue"),
    ElPopoverMultipleTreeSelect: () =>
      import("@/components/popover-tree-select/multiple.vue"),
    ElDateWrapper: () => import("@/components/date-wrapper/index.vue"),
  
  },
  computed:{
    innerValue:{
      get(){
        return this.$props.value;
      },
      set(value){
        this.$emit("input",value);
      },
    }
  },
  data(){
    return {
      showColumns:Columns,
    }
  },
  methods:{

    // 增
    onRowAdd(){

      this.innerValue.push({
       ...this.$init.params([...this.showColumns]),
       attr: {
         is: 'el-input'
       }
      });
    },
    // 删
    onRowRemove(prop){
      console.log(prop,'prop');
      const { $index, row } = prop;
      this.innerValue.splice($index,1)
    },
    // 条件选择
    canidateChange(prop){
      
      let {$index, row} = prop;

      let selectValue = this.candidate.filter(({item}) => item.key === row.candidate)[0];
    
      let operators = selectValue ? getOperators(this.judgeOperatorType(selectValue.attr)) : [];
      
      let attr = selectValue.attr ?  selectValue.attr : { is: 'el-input'};
      console.log(attr.is,'attr');

      // 方案存储
      this.innerValue = this.innerValue.map((tableItem,index) =>{

        if(row.candidate === tableItem.candidate && $index === index){

          tableItem.options = '';

          tableItem.value = '';

          tableItem.operators = operators;

          tableItem.attr = attr
        
        }

        return tableItem
       
      })

      // 值框的选择
      // this.showColumns = this.showColumns

    },
    // 操作选择
    optionChange(prop){
      console.log(prop,'prop');
      // this.$emit("update:value",this.innerValue);
    },
    judgeOperatorType(type){

      switch (type.is) {

        case 'el-popover-multiple-select-v2':
          return 'array';

        case 'el-popover-multiple-tree-select':
          return 'array';

        case 'el-input-number':
          return 'number';

        case 'el-date-picker':
          return 'datetime';

        case 'el-select':
          let dictName = type.dictName;
          if(dictName === 'sys_number_yes_no' 
            || dictName === 'sys_yes_no' 
            || dictName === 'sys_true_false' ){
            return 'boolean';
          }
          return 'string';

        default:
          return 'string';

        }
    },
  },
  created(){
  }
}
</script>

<template>
  <el-main>
    <el-table
      :data="innerValue"
      style="width: 100%"
      :show-header="false"
      :height="320"
      empty-text=" "
      v-bind="$attrs"
      v-on="$listeners"
    >
      <el-table-column 
        v-for="({item,attr},index) in showColumns"
        :key="item.key + index"
        :prop="item.key"
        :label="item.title"
        :fixed="item.fixed"
        :width="item.width || 200"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
  
          <el-select 
            v-if="item.key === 'candidate'"
            v-model="scope.row[item.key]" 
            :size="$attrs.size"
            filterable
            placeholder="请选择"
            @change="canidateChange(scope)"
          >
            <el-option
              v-for="(c, index) in candidate"
              :key="index + c.item.key"
              :label="c.item.title"
              :value="c.item.key"
            ></el-option>
          </el-select>

          <el-select 
            v-if="item.key === 'options'"
            v-model="scope.row[item.key]" 
            :size="$attrs.size"
            placeholder="请选择"
            @change="optionChange"
          >
            <el-option
              v-for="op in scope.row['operators']"
              :key="op.value"
              :label="op.label"
              :value="op.value">
            </el-option>
          </el-select>
        
          <template v-if="item.key === 'value'">
            <component
              v-if="scope.row.attr.is === 'el-select'"
              v-bind="scope.row.attr"
              :size="$attrs.size"
              v-model="scope.row[item.key]"
            >
              <template>
                <el-option
                  v-for="item in dict.type[attr.dictName]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </template>
            </component>
            <component
              v-else-if="scope.row.attr.is === 'el-popover-select-v2'"
              v-bind="scope.row.attr"
              v-model="scope.row[item.key]"
              :title="item.title"
              :size="$attrs.size"
              :source.sync="scope.row"
              style="width: 100%"
            >
            </component>
            <component
              v-else
              v-bind="scope.row.attr"
              :size="$attrs.size"
              v-model="scope.row[item.key]"
              style="width: 100%"
            >
            </component>
          </template>
          
        </template>
        
      
      </el-table-column>
      <el-table-column label="操作" width="50">
        <template slot-scope="scope">
          <i class="el-icon-delete" 
            @click.prevent="onRowRemove(scope)"
            style="cursor: pointer;"
          ></i>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col style="padding-left: 10px;">
        <el-button 
          type="text" 
          @click.native.prevent="onRowAdd"
        >
          <i class="el-icon-plus"></i>
          新增筛选条件
        </el-button>
      </el-col>
    </el-row>
  </el-main>

</template>

<style lang="scss" scoped>
::v-deep.el-table::before{
  display: none;
}

::v-deep.el-table {

  th,td,th.is-leaf{
    border:none;
  }

  .el-table__cell{
    padding: 2px 0;
  }

}

</style>