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

<script>
import { Columns } from './colums';
export default {
  name:'Inquire',
  components:{
    Sizer: () => import('./sizer/index.vue'),
  },
  props:{
    size:{
      type:String,
      default:'mini',
    },
    // 候选条件
    candidate:{
      type:Array,
      default: () =>[]
    },
  },
  data(){
    return {
      title: '查询方案',
      visible: false,
      tableData:[ 
        { 
          candidate: "orderCode", 
          options: "like", 
          value: "12315465416546", 
          operators: [ { "label": "等于", "value": "eq" }, { "label": "模糊", "value": "like" } ],
          attr:{ is: 'el-input'}
        }, 
        { 
          candidate: "date", 
          options: "range", 
          value: "3333", 
          operators: [ { "label": "范围", "value": "range" } ] ,
          attr:{ is: 'el-input'}
        }, 
      ]
      
    }
  },
  computed:{
    $dicts:{
      get(){
        console.log(this.tableData,'tableData');
        console.log(this.candidate,'candidate');
        return []
      },
      set(){}
    }
  },
  methods:{
    open(){
      this.visible = true;
    },
    onClose(){
      this.visible = false;
    },
    addCase(){
      console.log('addCase');
    },
  },
  created(){},
}
</script>

<template>
  <el-button
    :size="size"
    @click="open"
  >
    {{ title }}
    <el-dialog
      width="72%"
      class="inquire"
      append-to-body
      :visible.sync="visible"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div slot="title" style="display: flex; justify-content: space-between">
        <h4 style="margin: 0;">{{ title }}</h4>
        <div>
          <el-button 
            type="primary" 
            :size="size" 
            icon="el-icon-search"
            @click.native.prevent="$emit('submit',tableData)"
          >筛 选</el-button>
          <el-button :size="size" @click.native.prevent="onClose">取 消</el-button>
        </div>
      </div>
      <el-container>
        <el-aside 
          width="200px" 
          style="height: 350px;
          position: relative;
          border-right: 1px solid rgb(228, 228, 228);
          background-color: rgb(255, 255, 255)"
        >
          Aside
          <el-row style="position: absolute; bottom: 0;left: 10;">
            <el-col>
              <el-button 
                type="primary"
                :size="size"
                @click.native.prevent="addCase"
              >保存方案
              </el-button>
            </el-col>
          </el-row>
        </el-aside>
        
          <Sizer
            v-model="tableData"
            :size="size"
            :candidate="candidate" 
          ></Sizer>

      </el-container>
      
    </el-dialog>
  </el-button>
</template>

<style lang="scss" scoped>
::v-deep.inquire .el-dialog__header{
  padding: 15px 15px 10px;
}
::v-deep.inquire .el-dialog__body{
  padding: 5px;
  .el-aside,
  .el-main{
    padding: 0 10px;
  }
}


</style>