Merge branch 'master' of http://62.234.61.92:3000/wjm/mec-cloud_IntelligentManufacturing_CLIENT

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

@@ -0,0 +1,81 @@
+<template>
+  <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"  :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"
+        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>
+  </div>
+</template>
+
+<script>
+import selsetHeader from './selsetHeader.vue'
+export default {
+  name: 'operateTable',
+  components: { selsetHeader },
+  props: {
+    options: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    data: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      optionsValue: [],
+      optionsData: [],
+      loading: false
+    }
+  },
+  watch: {
+    options() {
+      this.setData();
+    }
+  },
+  mounted() {
+    this.setData();
+  },
+  methods: {
+    cascaderChangeFun(e) {
+      this.optionsData = e
+      this.$nextTick(() => {
+        this.$refs['tableTree'].doLayout();
+      });
+    },
+    setData() {
+      this.optionsValue = this.options.slice(1, this.options.length - 1)
+    },
+    load() {
+      this.$emit('load')
+    }
+  }
+}
+</script>
+
+<style scoped lang='scss'></style>

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

@@ -0,0 +1,196 @@
+<!-- 参考：https://blog.csdn.net/weixin_44384273/article/details/132826286 -->
+
+<template>
+  <el-cascader ref="cascaderEle" popper-class="gy-cascader" :options="optionList" :props="config"
+    :filterable="filterable" :size="size" v-model="choiceEle" @change="selectChange" 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: true
+      }
+    }
+  },
+  // 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, 6));
+      // 记录下全部选中时的个数
+      this.allLength = this.optionList.length
+      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';
+      });
+      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() {
+      console.log(this.choiceEle, this.options)
+      const matchedObjects = this.options.filter(obj =>
+      this.choiceEle.some(innerArray => innerArray.includes(obj.value))
+      );
+      this.$emit('change', matchedObjects);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.el-cascader {
+  width: 100%;
+}
+
+.gy-cascader {
+  max-width: 500px;
+  background: red;
+  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/index.vue

@@ -2,51 +2,27 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="物料编码" prop="materialCode">
-        <el-input
-          v-model="queryParams.materialCode"
-          placeholder="请输入物料编码"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.materialCode" placeholder="请输入物料编码" clearable
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="物料名称" prop="materialName">
-        <el-input
-          v-model="queryParams.materialName"
-          placeholder="请输入物料名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.materialName" placeholder="请输入物料名称" clearable
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="型号" prop="modelNumber">
-        <el-input
-          v-model="queryParams.modelNumber"
-          placeholder="请输入型号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.modelNumber" placeholder="请输入型号" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="规格" prop="specification">
-        <el-input
-          v-model="queryParams.specification"
-          placeholder="请输入规格"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.specification" placeholder="请输入规格" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
 
       <el-form-item label="生效日期" prop="effectiveDate">
-        <el-date-picker clearable
-          v-model="queryParams.effectiveDate"
-          type="date"
-          value-format="yyyy-MM-dd"
+        <el-date-picker clearable v-model="queryParams.effectiveDate" type="date" value-format="yyyy-MM-dd"
           placeholder="请选择生效日期">
         </el-date-picker>
       </el-form-item>
       <el-form-item label="失效日期" prop="expirationDate">
-        <el-date-picker clearable
-          v-model="queryParams.expirationDate"
-          type="date"
-          value-format="yyyy-MM-dd"
+        <el-date-picker clearable v-model="queryParams.expirationDate" type="date" value-format="yyyy-MM-dd"
           placeholder="请选择失效日期">
         </el-date-picker>
       </el-form-item>
@@ -58,235 +34,89 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:materials:add']"
-        >新增</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+          v-hasPermi="['system:materials:add']">新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:materials:edit']"
-        >修改</el-button>
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+          v-hasPermi="['system:materials:edit']">修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['system:materials:remove']"
-        >删除</el-button>
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['system:materials:remove']">删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:materials:export']"
-        >导出</el-button>
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+          v-hasPermi="['system:materials:export']">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-<!--    /** 主键 */-->
-<!--    private Long id;-->
+    <!--    /** 主键 */-->
+    <!--    private Long id;-->
 
-<!--    /** 父级别id */-->
-<!--    @Excel(name = "父级别id")-->
-<!--    private String fid;-->
+    <!--    /** 父级别id */-->
+    <!--    @Excel(name = "父级别id")-->
+    <!--    private String fid;-->
 
-<!--    /** 物料编码 */-->
-<!--    @Excel(name = "物料编码")-->
-<!--    private String materialCode;-->
+    <!--    /** 物料编码 */-->
+    <!--    @Excel(name = "物料编码")-->
+    <!--    private String materialCode;-->
 
-<!--    /** 物料名称 */-->
-<!--    @Excel(name = "物料名称")-->
-<!--    private String materialName;-->
+    <!--    /** 物料名称 */-->
+    <!--    @Excel(name = "物料名称")-->
+    <!--    private String materialName;-->
 
-<!--    /** 型号 */-->
-<!--    @Excel(name = "型号")-->
-<!--    private String modelNumber;-->
-      <div>
-
-      </div>
-      <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
-          prop="specification"
-          align="center"
-          label="规格">
-        </el-table-column>
-        <el-table-column
-          prop="dosageMolecular"
-          align="center"
-          label="用量分子">
-        </el-table-column>
-        <el-table-column
-          prop="usageDenominator"
-          align="center"
-          label="用量:分母">
-        </el-table-column>
-        <el-table-column
-          prop="skipOrNot"
-          align="center"
-          label="是否跳层">
-        </el-table-column>
-        <el-table-column
-          prop="materialProperty"
-          align="center"
-          label="物料属性">
-        </el-table-column>
-        <el-table-column
-          prop="dataState"
-          align="center"
-          label="数据状态">
-        </el-table-column>
-        <el-table-column
-          prop="bomVersion"
-          align="center"
-          label="BOM版本">
-        </el-table-column>
-        <el-table-column
-          prop="materialIssueMethod"
-          align="center"
-          label="发料方式">
-        </el-table-column>
-        <el-table-column
-          prop="job"
-          align="center"
-          label="作业">
-        </el-table-column>
-        <el-table-column
-          prop="subitemType"
-          align="center"
-          label="子项类型">
-        </el-table-column>
-        <el-table-column
-          prop="standardDosage"
-          align="center"
-          label="标准用量">
-        </el-table-column>
-        <el-table-column
-          prop="actualQuantity"
-          align="center"
-          label="实际数量">
-        </el-table-column>
-        <el-table-column
-          prop="auxiliaryAttribute"
-          align="center"
-          label="辅助属性">
-        </el-table-column>
-        <el-table-column
-          prop="dosageType"
-          align="center"
-          label="用量类型">
-        </el-table-column>
-        <el-table-column
-          prop="dosageType"
-          align="center"
-          label="用量类型">
-        </el-table-column>
-        <el-table-column
-          prop="fixedLoss"
-          align="center"
-          label="固定损耗">
-        </el-table-column>
-        <el-table-column
-          prop="changeTheAttritionRate"
-          align="center"
-          label="变动损耗率">
-        </el-table-column>
-        <el-table-column
-          prop="alternativeStrategy"
-          align="center"
-          label="替代策略">
-        </el-table-column>
-        <el-table-column
-          prop="alternativeMode"
-          align="center"
-          label="替代方式">
-        </el-table-column>
-        <el-table-column
-          prop="substituteMaterial"
-          align="center"
-          label="替代主料">
-        </el-table-column>
-        <el-table-column
-          prop="effectiveDate"
-          align="center"
-          label="生效日期">
-        </el-table-column>
-        <el-table-column
-          prop="expirationDate"
-          align="center"
-          label="失效日期">
-        </el-table-column>
-        <el-table-column
-          prop="presenceOfCobyproducts"
-          align="center"
-          label="存在联副产品">
-        </el-table-column>
-        <el-table-column
-          prop="standardSubitemUsage"
-          align="center"
-          label="标准子项清单">
-        </el-table-column>
-        <el-table-column
-          prop="actualSubitemUsage"
-          align="center"
-          label="实际子项用量">
-        </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"
-    />
+    <!--    /** 型号 */-->
+    <!--    @Excel(name = "型号")-->
+    <!--    private String modelNumber;-->
+    <!-- 表格 -->
+    <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" />
 
     <!-- 添加或修改物料清单对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
@@ -298,14 +128,15 @@
             </el-form-item>
           </el-col>
           <el-col :span="8">
-             <el-form-item label="物料编码" prop="materialCode">
-                 <el-input v-model="form.materialCode" placeholder="请输入物料编码" />
-             </el-form-item>
+            <el-form-item label="物料编码" prop="materialCode">
+              <el-input v-model="form.materialCode" placeholder="请输入物料编码" />
+            </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="物料父级" prop="fid">
               <treeselect v-model="form.fid" :options="materialRows" :multiple="false" :disable-branch-nodes="false"
-                          :clear-on-select="true" :flat="true" :show-count="true" placeholder="请选择父级物料信息" style="width: 286.66px" />
+                :clear-on-select="true" :flat="true" :show-count="true" placeholder="请选择父级物料信息"
+                style="width: 286.66px" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -329,7 +160,6 @@
 
         </el-row>
 
-
         <el-row type="flex" class="row-bg" justify="space-between">
           <el-col :span="8">
             <el-form-item label="用量:分母" prop="usageDenominator">
@@ -347,7 +177,7 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row  type="flex" class="row-bg" justify="space-between">
+        <el-row type="flex" class="row-bg" justify="space-between">
           <el-col :span="8">
             <el-form-item label="数据状态" prop="dataState">
               <el-input v-model="form.dataState" placeholder="请输入数据状态" />
@@ -421,22 +251,15 @@
         <el-row type="flex" class="row-bg" justify="space-between">
           <el-col :span="8">
             <el-form-item label="生效日期" prop="effectiveDate">
-              <el-date-picker clearable
-                              style="width: 286.66px"
-                              v-model="form.effectiveDate"
-                              type="date"
-                              value-format="yyyy-MM-dd"
-                              placeholder="请选择生效日期">
+              <el-date-picker clearable style="width: 286.66px" v-model="form.effectiveDate" type="date"
+                value-format="yyyy-MM-dd" placeholder="请选择生效日期">
               </el-date-picker>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="失效日期" prop="expirationDate">
-              <el-date-picker clearable style="width: 286.66px"
-                              v-model="form.expirationDate"
-                              type="date"
-                              value-format="yyyy-MM-dd"
-                              placeholder="请选择失效日期">
+              <el-date-picker clearable style="width: 286.66px" v-model="form.expirationDate" type="date"
+                value-format="yyyy-MM-dd" placeholder="请选择失效日期">
               </el-date-picker>
             </el-form-item>
           </el-col>
@@ -446,9 +269,9 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row type="flex" class="row-bg" justify="space-between" >
+        <el-row type="flex" class="row-bg" justify="space-between">
           <el-col :span="8">
-            <el-form-item label="存在联副产品" label-width="100px"  prop="presenceOfCobyproducts">
+            <el-form-item label="存在联副产品" label-width="100px" prop="presenceOfCobyproducts">
               <el-input v-model="form.presenceOfCobyproducts" placeholder="请输入存在联副产品" />
             </el-form-item>
           </el-col>
@@ -467,7 +290,7 @@
         <el-row>
           <el-col :span="24">
             <el-form-item label="备注" prop="remark">
-              <el-input  type="textarea" v-model="form.remark" placeholder="请输入备注" />
+              <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -481,16 +304,17 @@
 </template>
 
 <script>
-import { listMaterials,delMaterialsUpdate,selectListTree,getTreeInfo,listMaterialsTree, getMaterials, delMaterials, addMaterials, updateMaterials } from "@/api/amichi/materiel/materials";
+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 selsetHeader from './components/selsetHeader.vue'
 export default {
   name: "Materials",
-  components: { Treeselect },
+  components: { Treeselect, selsetHeader },
   data() {
     return {
       maps: new Map(),
-      materialRows:[],
+      materialRows: [],
       // 遮罩层
       loading: true,
       // 选中数组
@@ -555,123 +379,126 @@ export default {
       rules: {
       },
       tableHeadData: [{
+        label: '子项物料编码',
+        value: 'materialCode',
+      }, {
         label: '物料名称',
         value: 'materialName',
-        isCheck: true
-      },{
-        label: '物料编码',
-        value: 'materialCode',
-        isCheck: true
-      },{
-        label: '物料父级',
-        value: 'fid',
-        isCheck: true
-      },{
+      }, {
         label: '型号',
         value: 'modelNumber',
-        isCheck: true
-      },{
+      }, {
         label: '规格',
         value: 'specification',
-        isCheck: true
-      },{
-        label: '用量分子',
+      }, {
+        label: '用量:分子',
         value: 'dosageMolecular',
-        isCheck: false
-      },{
+      }, {
         label: '用量:分母',
         value: 'usageDenominator',
-        isCheck: false
+      }, {
+        label: '单位',
+        value: 'unit',
+      }, {
+        label: '备注',
+        value: 'remark',
       },{
         label: '是否跳层',
         value: 'skipOrNot',
-        isCheck: false
       },{
         label: '物料属性',
         value: 'materialProperty',
-        isCheck: false
-      },{
+      }, {
         label: '数据状态',
         value: 'dataState',
-        isCheck: false
       },{
         label: 'BOM版本',
         value: 'bomVersion',
-        isCheck: false
-      },{
+      }, {
         label: '发料方式',
         value: 'materialIssueMethod',
-        isCheck: false
-      },{
+      }, {
         label: '作业',
         value: 'job',
-        isCheck: false
+      }, {
+        label: '子项类型',
+        value: 'subitemType',
       },{
         label: '标准用量',
-        value: 'materialName',
-        isCheck: false
-      },{
+        value: 'standardDosage',
+      }, {
         label: '实际数量',
         value: 'actualQuantity',
-        isCheck: false
-      },{
+      }, {
         label: '辅助属性',
         value: 'fixedLoss',
-        isCheck: false
+      }, {
+        label: '用量类型',
+        value: 'dosageType'
+      },{
+        label: '固定损耗',
+        value: 'fixedLoss'
       },{
         label: '变动损耗率',
         value: 'changeTheAttritionRate',
-        isCheck: false
       },{
         label: '替代策略',
         value: 'alternativeStrategy',
-        isCheck: false
       },{
         label: '替代方式',
         value: 'alternativeMode',
-        isCheck: false
-      },{
+      }, {
         label: '替代主料',
         value: 'substituteMaterial',
-        isCheck: false
       },{
         label: '生效日期',
         value: 'effectiveDate',
-        isCheck: false
-      },{
+      }, {
         label: '失效日期',
         value: 'expirationDate',
-        isCheck: false
-      },{
-        label: '库存量',
-        value: 'inventory',
-        isCheck: false
-      },{
+      }, {
         label: '存在联副产品',
         value: 'presenceOfCobyproducts',
-        isCheck: false
-      },{
+      }, {
         label: '标准子项清单',
         value: 'standardSubitemUsage',
-        isCheck: false
-      },{
+      }, {
         label: '实际子项用量',
         value: 'actualSubitemUsage',
-        isCheck: false
-      },{
-        label: '备注',
-        value: 'remark',
-        isCheck: false
-      }]
+      }, {
+        label: '库存量',
+        value: 'inventory',
+      }],
+      optionsData: [{
+        label: '物料名称',
+        value: 'materialName',
+      }, {
+        label: '型号',
+        value: 'modelNumber',
+      }, {
+        label: '规格',
+        value: 'specification',
+      }, {
+        label: '用量:分子',
+        value: 'dosageMolecular',
+      }], //表头存储
     };
   },
   created() {
     //初始化用的
-    this.queryParams.fid="0"
+    this.queryParams.fid = "0"
     this.getList();
     this.selectListTree();
   },
   methods: {
+    // 表头筛选
+    cascaderChangeFun(e) {
+      this.optionsData = e
+      this.$nextTick(() => {
+        this.$refs['tableTree'].doLayout();
+      });
+    },
+
     //查询租户信息列表
     // getCodeTenantAllList(){
     //   getCodeTenantAllList().then((response) => {
@@ -679,9 +506,9 @@ export default {
     //     this.tenantRows = response.rows;
     //   });
     // },
-    selectListTree(){
+    selectListTree() {
       selectListTree().then(response => {
-        this.materialRows=response.data;
+        this.materialRows = response.data;
       });
     },
     //下拉菜单点击事件
@@ -700,42 +527,42 @@ export default {
           break;
       }
     },
-    refreshRow(row){
-      const {fid} = row  //取出当前删除行的pid
+    refreshRow(row) {
+      const { fid } = row  //取出当前删除行的pid
       console.log(fid)
       console.log(this.maps.get(parseInt(fid)))
       const { tree, treeNode, resolve } = this.maps.get(parseInt(fid)) //根据pid取出对应的节点数据
       this.$set(this.$refs.tableTree.store.states.lazyTreeNodeMap, fid, []); //将对应节点下的数据清空，从而实现数据的重新加载
-      this.load( tree, treeNode,resolve )
+      this.load(tree, treeNode, resolve)
     },
     load(tree, treeNode, resolve) {
-        const pid = tree.id
-        this.maps.set(pid,{tree,treeNode,resolve })  //将当前选中节点数据存储到maps中
-        console.log( this.maps.get(10))
-        console.log(this.maps,"村进去");
-        getTreeInfo(tree.id).then(response => {
-          resolve(response.data);
-        });
-        // // console.log(resolve,"c")
-        // setTimeout(() => {
-        //   resolve([
-        //     {
-        //       id: 31,
-        //       date: '2016-05-01',
-        //       name: '王小虎',
-        //       address: '上海市普陀区金沙江路 1519 弄'
-        //     }, {
-        //       id: 32,
-        //       date: '2016-05-01',
-        //       name: '王小虎',
-        //       address: '上海市普陀区金沙江路 1519 弄'
-        //     }
-        //   ])
-        // }, 1000)},
+      const pid = tree.id
+      this.maps.set(pid, { tree, treeNode, resolve })  //将当前选中节点数据存储到maps中
+      console.log(this.maps.get(10))
+      console.log(this.maps, "村进去");
+      getTreeInfo(tree.id).then(response => {
+        resolve(response.data);
+      });
+      // // console.log(resolve,"c")
+      // setTimeout(() => {
+      //   resolve([
+      //     {
+      //       id: 31,
+      //       date: '2016-05-01',
+      //       name: '王小虎',
+      //       address: '上海市普陀区金沙江路 1519 弄'
+      //     }, {
+      //       id: 32,
+      //       date: '2016-05-01',
+      //       name: '王小虎',
+      //       address: '上海市普陀区金沙江路 1519 弄'
+      //     }
+      //   ])
+      // }, 1000)},
     },
     /** 查询物料清单列表 */
     getList() {
-      this.materialsList=[];
+      this.materialsList = [];
       this.loading = true;
       listMaterialsTree(this.queryParams).then(response => {
         this.materialsList = response.rows;
@@ -798,21 +625,21 @@ export default {
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.fid=""
+      this.queryParams.fid = ""
       this.queryParams.pageNum = 1;
       this.getList();
     },
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
-      this.queryParams.fid="0"
+      this.queryParams.fid = "0"
       this.queryParams.pageNum = 1;
       this.getList();
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -820,7 +647,7 @@ export default {
       this.reset();
       this.selectListTree();
       this.open = true;
-      this.form.fid=row.id;
+      this.form.fid = row.id;
       console.log("新增回显0k")
       this.title = "添加物料清单";
     },
@@ -863,7 +690,7 @@ export default {
         }
       });
     },
-    handleDeleteOne(row){
+    handleDeleteOne(row) {
       const ids = row.id;
       console.log(row)
       this.$confirm('是否确认删除物料清单编号为"' + ids + '"的数据项？', '提示', {
@@ -871,13 +698,13 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        delMaterialsUpdate(ids).then(data=>{
-          if(data.code==666){
+        delMaterialsUpdate(ids).then(data => {
+          if (data.code == 666) {
             this.$message({
               message: data.msg,
               type: 'warning'
             });
-          }else if(data.code==200){
+          } else if (data.code == 200) {
             this.$modal.msgSuccess("删除成功");
             this.refreshRow(row);
           }
@@ -893,12 +720,12 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除物料清单编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除物料清单编号为"' + ids + '"的数据项？').then(function () {
         return delMaterialsUpdate(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -910,13 +737,14 @@ export default {
 };
 </script>
 <style scoped lang='scss'>
-  // el-table表格对齐
-  .sysDictInfoTable ::v-deep .el-table__row:not([class*="el-table__row--level-"]) {
-    td:first-child {
-      padding-left: 23px !important;    //一级数据无Child缩进
-    }
-  }
-  .sysDictInfoTable ::v-deep  .el-table__placeholder{
-    margin-left: 3px;        //子节点无Child缩进
+// el-table表格对齐
+.sysDictInfoTable ::v-deep .el-table__row:not([class*="el-table__row--level-"]) {
+  td:first-child {
+    padding-left: 23px !important; //一级数据无Child缩进
   }
+}
+
+.sysDictInfoTable ::v-deep .el-table__placeholder {
+  margin-left: 3px; //子节点无Child缩进
+}
 </style>