新增表格筛选功能

zkqy-ui/src/views/amichi/materiel/components/operateTable.vue

@@ -2,8 +2,8 @@
   <div style="width: 100%;">
     <selsetHeader :options="optionsValue" @change="cascaderChangeFun"></selsetHeader>
     <el-table class="sysDictInfoTable" :data="data" style="width: 100%;margin-top: 20px" row-key="id" lazy
-      ref="tableTree" v-loading="loading" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
-      <el-table-column :prop="options[0].value" :label="options[0].label"
+      ref="tableTree"  :load="load" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+      <el-table-column :prop="options[0].value"  :label="options[0].label"
         align="center" width="180">
       </el-table-column>
       <el-table-column v-for="(item, index) in optionsData" :key="index" :prop="item.value" :label="item.label"
@@ -63,22 +63,16 @@ export default {
   },
   methods: {
     cascaderChangeFun(e) {
-      console.log('slect', e)
-      // this.loading = true
       this.optionsData = e
       this.$nextTick(() => {
-        // 在数据加载完，重新渲染表格
         this.$refs['tableTree'].doLayout();
       });
-      // setTimeout(function (){
-      //   this.loading = false
-      // },200)
     },
     setData() {
-      console.log('setData', this.options)
       this.optionsValue = this.options.slice(1, this.options.length - 1)
-      // this.optionsData = this.options.slice(1, 6)
-      this.loading = false
+    },
+    load() {
+      this.$emit('load')
     }
   }
 }

zkqy-ui/src/views/amichi/materiel/components/selsetHeader copy.vue

@@ -1,193 +0,0 @@
-<template>
-  <el-cascader
-    ref="cascaderEle"
-    :options="optionList"
-    :props="config"
-    :filterable="filterable"
-    :size="size"
-    v-model="choiceEle"
-    @change="selectChange"
-    popper-class="gy-cascader"
-    clearable>
-  </el-cascader>
-</template>
-
-<script>
-/**
- * options [{ value: "", label: "", childList: []}]
- * checkStrictly 设置父子节点取消选中关联
- * 获取选中结果 change事件
- * all 是全部
- * size 大小
- * filterable 是否支持筛选
-  */
-export default {
-  name: 'selsetHeader',
-  props: {
-    options: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    width: {
-      type: Number,
-      default: 500
-    },
-    checkStrictly: {
-      type: Boolean,
-      default: false
-    },
-    filterable: {
-      type: Boolean,
-      default: true
-    },
-    size: {
-      type: String,
-      default: "mini"
-    }
-  },
-  data() {
-    return {
-      optionList: [],
-      lastSelectedList: [],
-      choiceEle: [],
-      allLength: 0,
-      allOptions: [{ value: "all", label: "全部", childList: null }],
-      config: {
-        multiple: true,
-        checkStrictly: false
-      }
-    }
-  },
-  watch: {
-    options() {
-      this.setData();
-    }
-  },
-  mounted() {
-    this.setData();
-    this.config.checkStrictly = this.checkStrictly;
-  },
-  methods: {
-    setData() {
-      this.optionList = [];
-      this.optionList = this.allOptions.concat(this.options);
-      this.loopSelectData(this.optionList.slice(1,5));
-      // 记录下全部选中时的个数
-      this.allLength = this.optionList.length
-      console.log(this.allLength)
-      this.lastSelectedList = [...this.optionList];
-      this.sendInfo();
-    },
-    selectChange(val) {
-      console.log(val)
-      let lastHasAll = this.lastSelectedList.find(arr => {
-        return arr[0] === 'all';
-      });
-      let nowHasAll = val.find(arr => {
-        return arr[0] === 'all';
-      });
-      console.log(this.lastSelectedList, lastHasAll, nowHasAll)
-      if (lastHasAll && !nowHasAll) {
-        // 点击取消了 全选
-        // this.clearCascader();
-        this.choiceEle = [];
-        this.lastSelectedList = [];
-        this.$nextTick(() => {
-          this.sendInfo();
-        });
-        return;
-      }
-      if (!lastHasAll && nowHasAll) {
-        this.choiceEle = [];
-        // 点击了 全选
-        this.loopSelectData(this.optionList);
-        this.lastSelectedList = [...this.choiceEle];
-        this.$nextTick(() => {
-          this.sendInfo();
-        });
-        return;
-      }
-      // 当点选了除全部按钮外的所有 选中全部按钮
-      if (!nowHasAll && val.length === this.allLength - 1) {
-        console.log('all===')
-        this.choiceEle = [['all']].concat(this.choiceEle);
-        val = [['all']].concat(val);
-      }
-      // 当全部选项都选中 这时取消了除全部按钮外的一个 去掉选中全部按钮
-      if (nowHasAll && val.length < this.allLength) {
-        console.log('all===111')
-
-        val = val.filter(arr => {
-          return arr[0] !== 'all';
-        });
-        console.log('val', val)
-        this.$nextTick(() => {
-          this.choiceEle = [...val];
-        });
-        console.log('this.choiceEle', this.choiceEle)
-
-      }
-      this.sendInfo();
-      this.lastSelectedList = [...val];
-    },
-    loopSelectData(list, parentNode = []) {
-      list.length > 0 &&
-      list.forEach((e) => {
-        console.log('ee==ee',e)
-        let pNode = [...parentNode]; // 注意这里必须是深拷贝，否则会由于引用类型赋值的是地址（指针），导致parentNode在pNode更新时，同时被更新
-        if (e.children && e.children.length > 0) {
-          pNode.push(e.value);
-          // 当没有关联时 需要每一级都存下
-          if (this.checkStrictly) {
-            this.choiceEle.push([...pNode]);
-          }
-          this.loopSelectData(e.children, pNode);
-        } else {
-          if (parentNode.length > 0) {
-            this.choiceEle.push([...parentNode, e.value]);
-          } else {
-            this.choiceEle.push([e.value]);
-          }
-        }
-      });
-    },
-    sendInfo() {
-      this.$emit('change', this.choiceEle);
-    }
-  }
-};
-</script>
-
-<style scoped>
-.el-cascader {
-  width: 100%;
-}
-.gy-cascader{
-  max-width: 500px;
-  overflow-x: auto;
-  &::-webkit-scrollbar-track-piece {
-    background-color: #f8f8f800;
-  }
-  &::-webkit-scrollbar {
-    transition: all 2s;
-    height: 6px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #ebeaef;
-    border-radius: 10px;
-  }
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: #bbb;
-  }
-  &::-webkit-scrollbar-track {
-    background: #ffffff;
-    border-radius: 10px;
-  }
-  &::-webkit-scrollbar-corner {
-    background-color: rgba(255, 255, 255, 0);
-  }
-}
-</style>
-

zkqy-ui/src/views/amichi/materiel/components/selsetHeader.vue

@@ -54,11 +54,11 @@ export default {
       }
     }
   },
-  watch: {
-    options() {
-      this.setData();
-    }
-  },
+  // watch: {
+  //   options() {
+  //     this.setData();
+  //   }
+  // },
   mounted() {
     this.setData();
     this.config.checkStrictly = this.checkStrictly;

zkqy-ui/src/views/amichi/materiel/index.vue

@@ -71,8 +71,50 @@
     <!--    @Excel(name = "型号")-->
     <!--    private String modelNumber;-->
     <!-- 表格 -->
-    <operateTable :options="tableHeadData" :data="materialsList">
-    </operateTable>
+    <selsetHeader :options="tableHeadData.slice(1, tableHeadData.length -1 )" @change="cascaderChangeFun"></selsetHeader>
+    <el-table class="sysDictInfoTable" :data="materialsList" style="width: 100%;margin-top: 20px" row-key="id" lazy
+      ref="tableTree"  :load="load" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+      <el-table-column :prop="tableHeadData[0].value"  :label="tableHeadData[0].label"
+        align="center" width="180">
+      </el-table-column>
+      <el-table-column v-for="(item, index) in optionsData" :key="index" :prop="item.value" :label="item.label"
+        align="center">
+      </el-table-column>
+      <el-table-column label="操作"  align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-dropdown @command="(command) => { handleCommand(command, scope.row) }">
+            <el-button type="warning">
+              操作<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item icon="el-icon-circle-plus-outline" command="handleAdd">新增</el-dropdown-item>
+              <el-dropdown-item icon="el-icon-edit" command="handleUpdate">修改</el-dropdown-item>
+              <el-dropdown-item icon="el-icon-delete" command="handleDelete">删除</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- <el-table class="sysDictInfoTable" :data="materialsList" style="width: 100%;margin-top: 20px" row-key="id" lazy
+      ref="tableTree" :load="load" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+      <el-table-column v-for="(item, index) in tableHeadData" :key="index" :prop="item.value" :label="item.label"
+        align="center" width="180">
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-dropdown @command="(command) => { handleCommand(command, scope.row) }">
+            <el-button type="warning">
+              操作<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item icon="el-icon-circle-plus-outline" command="handleAdd">新增</el-dropdown-item>
+              <el-dropdown-item icon="el-icon-edit" command="handleUpdate">修改</el-dropdown-item>
+              <el-dropdown-item icon="el-icon-delete" command="handleDelete">删除</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table> -->
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
       @pagination="getList" />
 
@@ -265,10 +307,10 @@
 import { listMaterials, delMaterialsUpdate, selectListTree, getTreeInfo, listMaterialsTree, getMaterials, delMaterials, addMaterials, updateMaterials } from "@/api/amichi/materiel/materials";
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import operateTable from './components/operateTable.vue'
+import selsetHeader from './components/selsetHeader.vue'
 export default {
   name: "Materials",
-  components: { Treeselect, operateTable },
+  components: { Treeselect, selsetHeader },
   data() {
     return {
       maps: new Map(),
@@ -426,7 +468,20 @@ export default {
       }, {
         label: '库存量',
         value: 'inventory',
-      }]
+      }],
+      optionsData: [{
+        label: '物料名称',
+        value: 'materialName',
+      }, {
+        label: '型号',
+        value: 'modelNumber',
+      }, {
+        label: '规格',
+        value: 'specification',
+      }, {
+        label: '用量:分子',
+        value: 'dosageMolecular',
+      }], //表头存储
     };
   },
   created() {
@@ -436,6 +491,13 @@ export default {
     this.selectListTree();
   },
   methods: {
+    // 表头筛选
+    cascaderChangeFun(e) {
+      this.optionsData = e
+      this.$nextTick(() => {
+        this.$refs['tableTree'].doLayout();
+      });
+    },
 
     //查询租户信息列表
     // getCodeTenantAllList(){