给商品列表增加列设置的功能

jshERP-web/src/views/material/MaterialList.vue

@@ -109,6 +109,24 @@
               批量操作 <a-icon type="down" />
             </a-button>
           </a-dropdown>
+          <a-popover trigger="click" placement="right">
+            <template slot="content">
+              <a-checkbox-group @change="onColChange" v-model="settingColumns" :defaultValue="settingColumns">
+                <a-row style="width: 500px">
+                  <template v-for="(item,index) in defColumns">
+                    <template>
+                      <a-col :span="8">
+                        <a-checkbox :value="item.dataIndex">
+                          <j-ellipsis :value="item.title" :length="10"></j-ellipsis>
+                        </a-checkbox>
+                      </a-col>
+                    </template>
+                  </template>
+                </a-row>
+              </a-checkbox-group>
+            </template>
+            <a-button icon="setting">列设置</a-button>
+          </a-popover>
         </div>
         <!-- table区域-begin -->
         <div>
@@ -122,7 +140,7 @@
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"
-            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, columnWidth:'2%'}"
             @change="handleTableChange">
             <span slot="action" slot-scope="text, record">
               <a @click="handleEdit(record)">编辑</a>
@@ -154,17 +172,20 @@
 </template>
 <script>
   import MaterialModal from './modules/MaterialModal'
-  import {queryMaterialCategoryTreeList} from '@/api/api'
+  import { queryMaterialCategoryTreeList } from '@/api/api'
   import { postAction } from '@/api/manage'
-  import { getMpListShort } from "@/utils/util"
+  import { getMpListShort } from '@/utils/util'
   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+  import JEllipsis from '@/components/jeecg/JEllipsis'
   import JDate from '@/components/jeecg/JDate'
   import Vue from 'vue'
+
   export default {
     name: "MaterialList",
     mixins:[JeecgListMixin],
     components: {
       MaterialModal,
+      JEllipsis,
       JDate
     },
     data () {
@@ -194,8 +215,13 @@
           remark:'',
           mpList: getMpListShort(Vue.ls.get('materialPropertyList'))  //扩展属性
         },
-        // 表头
-        columns: [
+        // 实际表头
+        columns:[],
+        // 初始化设置的表头
+        settingColumns:['mBarCode','name','standard','model','color','categoryName','materialOther','unit', 'stock',
+          'purchaseDecimal','commodityDecimal','wholesaleDecimal','lowDecimal','enabled','enableSerialNumber','enableBatchNumber','action'],
+        // 默认的列
+        defColumns: [
           {title: '条码', dataIndex: 'mBarCode', width: '8%'},
           {title: '名称', dataIndex: 'name', width: '10%', ellipsis:true},
           {title: '规格', dataIndex: 'standard', width: '6%', ellipsis:true},
@@ -215,12 +241,14 @@
               }
             }
           },
+          {title: '基础重量', dataIndex: 'weight', width: '5%'},
           {title: '保质期', dataIndex: 'expiryNum', width: '4%'},
           {title: '库存', dataIndex: 'stock', width: '5%'},
           {title: '采购价', dataIndex: 'purchaseDecimal', width: '5%'},
           {title: '零售价', dataIndex: 'commodityDecimal', width: '5%'},
           {title: '销售价', dataIndex: 'wholesaleDecimal', width: '5%'},
           {title: '最低售价', dataIndex: 'lowDecimal', width: '5%'},
+          {title: '备注', dataIndex: 'remark', width: '5%', ellipsis:true},
           {title: '状态', dataIndex: 'enabled', width: '4%', align: "center",
             scopedSlots: { customRender: 'customRenderEnabled' }
           },
@@ -251,6 +279,7 @@
     },
     created() {
       this.model = Object.assign({}, {});
+      this.initColumnsSetting()
       this.loadTreeData();
     },
     computed: {
@@ -259,6 +288,30 @@
       }
     },
     methods: {
+      //加载初始化列
+      initColumnsSetting(){
+        let columnsStr = Vue.ls.get('materialColumns')
+        if(columnsStr && columnsStr.indexOf(',')>-1) {
+          this.settingColumns = columnsStr.split(',')
+        }
+        this.columns = this.defColumns.filter(item => {
+          if (this.settingColumns.includes(item.dataIndex)) {
+            return true
+          }
+          return false
+        })
+      },
+      //列设置更改事件
+      onColChange (checkedValues) {
+        this.columns = this.defColumns.filter(item => {
+          if (checkedValues.includes(item.dataIndex)) {
+            return true
+          }
+          return false
+        })
+        let columnsStr = checkedValues.join()
+        Vue.ls.set('materialColumns', columnsStr)
+      },
       loadTreeData(){
         let that = this;
         let params = {};