更新查询方案

src/components/query-scheme/colums.js

@@ -0,0 +1,27 @@
+export const Columns = [
+  {
+    item:{
+      key: 'candidate',
+      title:'候选条件',
+    },
+    attr:{}
+  },
+  {
+    item:{
+      key: 'options',
+      title:'操作符',
+      width: 150,
+    },
+    attr:{}
+  },
+  {
+    item:{
+      key: 'value',
+      title:'值'
+    },
+    attr:{
+      is:'el-input',
+    }
+  },
+
+]

src/components/query-scheme/index.vue

@@ -0,0 +1,141 @@
+
+<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>

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

@@ -0,0 +1,274 @@
+<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>

src/components/query-scheme/sizer/operators.js

@@ -0,0 +1,94 @@
+const OPERATORS_STRING = [
+  {
+    label: '等于',
+    value: 'eq',
+  },
+  {
+    label: '模糊',
+    value: 'like',
+  },
+];
+
+const OPERATORS_NUMBER = [
+  {
+    label: '等于',
+    value: 'eq',
+  },
+  {
+    label: '大于',
+    value: 'gt',
+  },
+  {
+    label: '小于',
+    value: 'lt',
+  },
+  {
+    label: '大于等于',
+    value: 'gte',
+  },
+  {
+    label: '小于等于',
+    value: 'lte',
+  },
+  {
+    label: '不等于',
+    value: 'ne',
+  },
+];
+
+const OPERATORS_DATE = [
+  {
+    label: '范围',
+    value: 'range',
+  },
+];
+
+const OPERATORS_BOOL = [
+  {
+    label: '等于',
+    value: 'eq',
+  },
+  {
+    label: '不等于',
+    value: 'ne',
+  },
+];
+
+const OPERATORS_ARRAY_MULTIPLE = [
+  {
+    label: '同时包含',
+    value: 'fullSubset',
+  },
+  {
+    label: '包含任一一个',
+    value: 'intersection',
+  },
+];
+
+const OPERATORS_LABEL_VALUE = [
+  {
+    label: '等于',
+    value: 'eq',
+  },
+  {
+    label: '不等于',
+    value: 'ne',
+  },
+];
+
+export const getOperators = (type) => {
+  switch (type) {
+  case 'array':
+    return OPERATORS_ARRAY_MULTIPLE;
+  case 'number':
+    return OPERATORS_NUMBER;
+  case 'datetime':
+    return OPERATORS_DATE;
+  case 'boolean':
+    return OPERATORS_BOOL;
+  case 'label-value':
+    return OPERATORS_LABEL_VALUE;
+  default:
+    return OPERATORS_STRING;
+  }
+}

src/views/purchase/purchase-order/index.vue

@@ -33,6 +33,7 @@ export default {
     ElSuperSearch: () => import("@/components/super-search/index.vue"),
     Retrieve: () => import("@/components/Retrieve/index.vue"),
     ZpButton: () => import("./zhuan-pai/index.vue"),
+    QueryScheme: () => import('@/components/query-scheme/index.vue')
     },
   data() {
     const initTabColumns = () => TabColumns;
@@ -59,6 +60,74 @@ export default {
       timer:300,
       timeOut:null,
       size:'mini',
+      candidate:[
+        {
+          item:{
+            key: "orderCode",
+            title: "订单编号",  
+          },
+          attr: {
+            clearable:true,
+            is: "el-input",
+            placeholder:'请输入订单编号，多个使用,隔开',
+          },
+        },
+        {
+          item:{
+            key: "materialCode",
+            title: "物料编码",
+          },
+          attr: {
+            clearable:true,
+            is: "el-input",
+            placeholder:'请输入物料编码，多个使用,隔开',
+            // is: "el-popover-multiple-select-v2",
+            // valueKey: "code",
+            // referName: "MATERIAL_PARAM",
+          },
+        },
+        {
+          item:{
+            key: "date",
+            title: "订单日期",  
+          
+          },
+          attr: {
+            clearable:true,
+            is: "el-date-picker",
+            type: "daterange",
+            unlinkPanels: true,
+            rangeSeparator: "至",
+            valueFormat: "yyyy-MM-dd",
+            endPlaceholder: "结束日期",
+            startPlaceholder: "开始日期",
+            value: [],
+          },
+        },
+        {
+          item:{
+            key: "puOrgIds",
+            title: "采购组织",
+          },
+          attr: {
+            clearable:true,
+            is: "el-popover-multiple-select-v2",
+            valueKey: "id",
+            referName: "ORG_PARAM",
+          },
+        },
+        {
+          item:{
+            key: "source",
+            title: "订单来源",  
+          },
+          attr:{
+            clearable:true,
+            is: "el-select",
+            dictName: "order_source",
+          },
+        },
+      ]
     };
   },
 
@@ -116,6 +185,10 @@ export default {
       }
     },
 
+    queryScheme(prop){
+      console.log(prop,'查询');
+    },
+
     async handleDownload(){
       console.log(this.params,'条件');
       this.download('/pu/order/export', {...this.params}, `采购订单维护${new Date().getTime()}.xlsx`);
@@ -698,6 +771,10 @@ export default {
     <!-- 操作 -->
     <el-row :gutter="24" type="flex" justify="end" style="margin: 20px 0;">
       <el-col :span="24" style="text-align: right;">
+        <!-- <query-scheme 
+          :candidate="candidate"
+          @submit="queryScheme"
+        ></query-scheme> -->
         <el-button :size="size" type="primary" @click="handleOpenAddDrawer"
           v-hasPermi="['material:order:add']">新增</el-button>