封装带搜索的table，TemplateTable

src/components/TemplateTable/index.vue

@@ -0,0 +1,266 @@
+<template>
+  <div>
+    <!-- 搜索栏 -->
+    <el-form
+      v-if="formList.length > 0"
+      :inline="true"
+      :model="searchDataClone"
+      label-width="95px"
+      ref="searchDataClone"
+      class="demo-form-inline device-wrapper"
+    >
+      <el-form-item v-for="f in formList" :key="f.prop" :label="f.label" :prop="f.prop">
+        <template>
+          <template v-if="f.type === 'input'">
+            <el-input clearable v-model.trim="searchDataClone[f.prop]" size="small"></el-input>
+          </template>
+          <template v-else-if="f.type === 'select'">
+            <el-select size="small" v-model="searchDataClone[f.prop]" placeholder="请选择">
+              <el-option label="不限" value v-if="f.selectAuto"></el-option>
+              <el-option
+                v-for="(s, i) in f.selectList"
+                :key="i"
+                :label="s[f.optionLabel]"
+                :value="s[f.optionValue]"
+              ></el-option>
+            </el-select>
+          </template>
+          <template v-else-if="f.type === 'datePicker'">
+            <!-- 日期区间 -->
+            <el-date-picker
+              v-if="f.dateType === 'daterange'"
+              type="daterange"
+              size="small"
+              v-model="searchDataClone[f.prop]"
+              align="right"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              :default-time="['00:00:00', '23:59:59']"
+              :clearable="true"
+            ></el-date-picker>
+            <!-- 一天 -->
+            <el-date-picker
+              v-if="f.dateType === 'date'"
+              type="date"
+              size="small"
+              v-model="searchDataClone[f.prop]"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+            ></el-date-picker>
+          </template>
+          <template v-else-if="f.type === 'radio'">
+            <el-radio-group v-model="searchDataClone[f.prop]">
+                <el-radio  v-for="(r, i) in f.radioList" :key="i" :label="r.value">{{r.label}}</el-radio>
+              </el-radio-group>
+          </template>
+        </template>
+      </el-form-item>
+      
+      
+      <el-form-item>
+        <el-button style="margin-left:30px" size="small" @click="resetForm('searchDataClone')">重置</el-button>
+        <el-button type="primary" size="small" @click="handleSearchList()">查询</el-button>
+        <template v-if="btnGroup.length>0" >
+            <el-button v-for="(val, idx) in btnGroup" :key="idx" :type="val.type || 'primary'" size="small" @click="val.click()">{{ val.name }}</el-button>
+      </template>
+      </el-form-item>
+      <!-- <el-form-item v-if="btnGroup.length>0" >
+            <el-button v-for="(val, idx) in btnGroup" :key="idx" :type="val.type || 'primary'" size="small" @click="tabFun(val)">{{ val.name }}</el-button>
+      </el-form-item> -->
+    </el-form>
+
+      <!--表格-->
+    
+      <el-table 
+        :data="data"  
+        border
+        size="small"
+        style="width: 100%" 
+        v-loading="tableConfig.loading" 
+        element-loading-text="数据加载中" 
+        element-loading-spinner="el-icon-loading" 
+        @selection-change="handleTableCurrentChange"
+        :row-style="{ height: '55px' }"
+        :cell-style="{ padding: '0px' }"
+        :header-cell-style="{ background: '#F2F7FC', fontWeight: '700', color: '#606266' }"
+        :cell-class-name="rowClass"
+        >
+            <el-table-column type="selection" :width="tableConfig.selectionWidth || '50'" v-if="tableConfig.isCheckBox" align="center" />
+            <el-table-column type="index" :width="tableConfig.indexWidth || '50'" v-if="tableConfig.isShowIndex" align="center" />
+            <template v-for="(item,index) in tableConfig.columns">
+                <!-- 日期内容 -->
+                <el-table-column v-if="item.type ==='date'" :align="'center'" :fixed="item.fixed" :width="item.width || 150"   show-overflow-tooltip :label="item.label"   :key="item.prop" >
+                    <template slot-scope="scope">
+                        <div>{{ scope.row[item.prop] | formateDate }}</div>
+                    </template>
+                </el-table-column>
+                <!-- 字典项 -->
+                <el-table-column v-if="item.type === 'dic'"  :align="'center'"  :width="item.width || ''"  :fixed="item.fixed" show-overflow-tooltip :label="item.label"  :key="item.prop"  :prop="item.prop">
+                    <template slot-scope="scope">
+                    <span>{{ selectDictLabel(dictData[item.dic], scope.row[item.prop]) }}</span>
+                    </template>
+                </el-table-column>
+                <!-- 自定义内容 -->
+                <slot v-if="item.type ==='slot'" show-overflow-tooltip :name="item.name"></slot>
+                <!-- 常规文本内容 -->
+                <el-table-column v-else :align="'center'"  :width="item.width || ''"  :fixed="item.fixed" show-overflow-tooltip :label="item.label"  :key="item.prop"  :prop="item.prop"></el-table-column>
+
+            </template>
+            <!-- <slot name="operate" :row="scope.row"></slot> -->
+            <!-- 自定义操作栏 -->
+            <el-table-column v-if="tableConfig.operateShow" label="操作" align="center" :min-width="tableConfig.operationWidth || '100'"  fixed="right">
+                <template slot-scope="scope">
+                <slot name="operate" :row="scope.row"></slot>
+                </template>
+            </el-table-column>  
+            <!-- 数组形式的操作栏，用于普通按钮 -->
+            <!-- // optBtns:[
+            //   {
+            //     type:'primary',
+            //     label:'修改',
+            //     hide:(row) => {
+            //      return row.importStatus == 1?true:false
+            //     },
+            //     click:(row, index) => {return this.modifyFun(row)},
+            //   }
+            // ] -->
+            <el-table-column v-if="tableConfig.optBtns" :min-width="tableConfig.operationWidth || '100'" label="操作" fixed="right"   header-align="center" align="center" >
+                <template slot-scope="scope">
+                    <span v-for="(btn, index) in tableConfig.optBtns" :key="index">
+                        <el-button style="margin:0 10px"  v-permission="btn.perm"  v-if="btn.hide(scope.row)"  @click="btn.click(scope.row, index)" :type="btn.type" :icon="btn.icon" size="small">{{ btn.label }} </el-button>                   
+                   </span>
+                </template>
+              </el-table-column>
+
+        </el-table>
+      <!-- 分页 -->
+      <div class="block">
+        <el-pagination
+            v-if="tableConfig.isPaginationShow && pagination.totalSize"
+            style="margin-top: 10px"
+            :page-size="pagination.pageSize"
+            :current-page.sync="pagination.pageNum"
+            :total="pagination.totalSize"
+            layout="total, sizes,prev, pager, next,jumper"
+            :page-sizes="[10, 20, 50, 100]"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+        />
+      </div>
+  </div>
+</template>
+  
+  <script type="text/ecmascript-6">
+
+export default {
+  props: {
+    formList: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    btnGroup: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    tableConfig: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    searchDataClone: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    pagination: {
+        type: Object,
+        default: () => ({
+            pageNum: 1,
+            pageSize: 10,
+            totalSize: 0,
+        }),
+    },
+    rowClass:{
+        type: Function,
+        default: ()=>'',
+    },
+    data:{
+        type:Array,
+        default:()=> []
+    },
+  },
+  data() {
+    return {
+    };
+  },
+  created() {
+  },
+  filters: {
+        formateDate(val) {
+            return formatDateTime(val)
+        }
+    },
+  methods: {
+    selectDictLabel(dicts, value) {
+        if (value === undefined) {
+            return '';
+        }
+        if (dicts === undefined) {
+            return '';
+        }
+        const actions = [];
+        Object.keys(dicts).some((key) => {
+            if (dicts[key].value === `${value}`) {
+            actions.push(dicts[key].label);
+            return true;
+            }
+        });
+        if (actions.length === 0) {
+            actions.push(value);
+        }
+        return actions.join('');
+    },
+    // 表格多选
+    selectionChange(e) {
+      this.$emit("selectionChange", e);
+    },
+    // 单选
+    handleTableCurrentChange(currentRow) {
+        this.$emit('changeCurrent', currentRow);
+    },
+
+    handleSizeChange(value) {
+        this.pagination.pageSize = value;
+        this.$emit('getList');
+    },
+    handleCurrentChange(val) {
+        this.pagination.pageNum = val;
+        this.$emit('getList');
+    },
+    // 搜索
+    handleSearchList() {
+      // 更新父组件searchData
+      this.pagination.pageNum = 1;
+      this.pagination.pageSize = 10;
+      this.$emit("handleSearchList", this.searchDataClone);
+    },
+    // 重置
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.handleSearchList();
+    },
+    handleOpt(row,index) {
+        this.$emit('handleOpt', row, index)
+    },
+  }
+};
+</script>

src/utils/btnPermission.js

@@ -11,7 +11,6 @@ const permission = {
         // sessionStorage.setItem('ButtonPermissions',JSON.stringify(['role:add']))
         // 自定义指令的执行函数，，取到登录缓存的按钮权限数组，赋值给全局对象userMsg
         global.ButtonPermissions = store.state.user.perms
-        console.log(store.state,111111111)
         // global.ButtonPermissions = JSON.parse(sessionStorage.getItem('ButtonPermissions'))
         if (global.ButtonPermissions && global.ButtonPermissions.indexOf(value) < 0) {
             el.style.display = 'none'

src/views/FinancialManagement/CostVerification/Baosi.vue

@@ -1,78 +1,28 @@
 <template>
   <!--布局容器-->
   <div class="container" style="width: 99%; margin-top: 0px">
-    <!-- 顶部查询 -->
-    <el-row class="top">
-      <el-form v-model="queryFrom" label-width="95px" class="form">
-        <el-row>
-          <el-col :span="7">
-            <el-form-item label="导入日期:">
-              <el-date-picker
-                style="width:20vw"
-                v-model="queryFrom.importTime"
-                size="small"
-                type="datetimerange"
-                range-separator="至"
-                start-placeholder="起导入日期"
-                end-placeholder="止导入日期"
-                value-format="yyyy-MM-dd"
-              ></el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col :span="4">
-            <el-form-item  label=" " prop="importStatus">
-              <el-radio-group v-model="queryFrom.importStatus" style="width:165px">
-                <el-radio :label="1">已导入</el-radio>
-                <el-radio :label="0">未导入</el-radio>
-              </el-radio-group>
-              <!-- <el-checkbox-group v-model="queryFrom.importStatus">
-                                <el-checkbox label="已导入">已导入</el-checkbox>
-                                <el-checkbox label="未导入">未导入</el-checkbox>
-              </el-checkbox-group>-->
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label-width="95px">
-              <el-button type="primary" size="small">模板下载</el-button>
-              <el-button type="primary" size="small" @click="importFun">excel导入</el-button>
-              <el-button type="primary" size="small" @click="queryStaffInfo">查询</el-button>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-    </el-row>
-
-    <!-- 表格 -->
-    <el-table
-      size="small"
+    <templateTable
+      :formList="formList"
+      :searchData.sync="searchData"
+      :tableConfig="tableConfig"
+      :btnGroup="btnGroup"
       :data="tableData"
-      height="590"
-      border
-      v-loading="loading"
-      highlight-current-row
-      stripe
-      ref="expandTable"
-      :header-cell-style="{ background: '#F2F7FC', fontWeight: '700', color: '#606266' }"
+      @getList="getList"
+      @handleSearchList="handleSearchList"
+      :pagination="queryFrom"
     >
-      <el-table-column prop="id" label="批次号" align="center">
+    <el-table-column slot="id"  label="批次号" align="center">
         <template slot-scope="scope">
           <span class="batchStyle" @click="redirectDetail(scope.row)">{{ scope.row.id }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="insCompanyName" label="保险公司" align="center"></el-table-column>
-      <el-table-column prop="mlifta" label="交强险保费" align="center"></el-table-column>
-      <el-table-column prop="vavt" label="车船税" align="center"></el-table-column>
-      <el-table-column prop="other" label="其他保费" align="center"></el-table-column>
-      <el-table-column prop="inventoryQuantity" label="清单数量" align="center"></el-table-column>
-      <el-table-column prop="createTime" label="导入日期" align="center"></el-table-column>
-      <el-table-column prop="createBy" label="操作人" align="center"  width="80"    ></el-table-column>
-      <el-table-column prop="importStatus" label="导入状态" align="center" width="80">
+      <el-table-column slot="importStatus" label="导入状态" align="center" width="80">
         <template slot-scope="scope">
           <span v-if="scope.row.importStatus == 1" style="color: green;">成功</span>
           <span v-if="scope.row.importStatus == 0" style="color: red;">失败</span>
         </template>
       </el-table-column>
-      <el-table-column prop="错误信息" label="错误信息" align="center">
+      <el-table-column slot="error" label="错误信息" align="center">
         <template slot-scope="scope">
           <el-popover
             placement="bottom"
@@ -85,9 +35,9 @@
           </el-popover>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" min-width="100">
-        <template slot-scope="scope">
-          <el-button
+      
+      <template slot="operate" slot-scope="scope"> 
+        <el-button
             v-if="scope.row.importStatus == 1"
             size="mini"
             type="primary"
@@ -118,24 +68,8 @@
               >重新导入</el-button>
             </el-upload>
           </div>
-
-          <!-- <el-button v-if="scope.row.importStatus == 0" size="mini" type="primary"
-          @click="reImportFun(scope.row)">重新导入</el-button>-->
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页功能 -->
-    <div class="block">
-      <el-pagination
-        @size-change="tablePageChange"
-        @current-change="tableCurrentChange"
-        :current-page="queryFrom.pageNum"
-        :page-size="queryFrom.pageSize"
-        :page-sizes="[20, 30, 50, 100]"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="queryFrom.totalSize"
-      ></el-pagination>
-    </div>
+    </template>
+    </templateTable>
     <el-dialog
       v-dialogDrag
       title="修改"
@@ -308,10 +242,14 @@
 </template>
 <script>
 import batchDialog from './components/batchDialog.vue'
+import templateTable from '../../../components/TemplateTable/index.vue'
+import { mapState } from 'vuex'
+
 export default {
   name: "baosi",
-  components: { batchDialog },
+  components: { batchDialog,templateTable },
   created() {
+    console.log(this.perms,1111111111)
     this.$api.cost.gainTopList().then(res => {
       if (res.data) {
         this.InsCompanyList = res.data;
@@ -319,21 +257,99 @@ export default {
     });
     this.getList();
   },
+  computed: {
+    ...mapState({
+      perms: state =>state.user.perms
+    })
+  },
   data() {
     return {
+      formList:[
+        {
+          label: "导入日期：",
+          prop: "importTime",
+          type: "datePicker",
+          dateType:'daterange'
+        },
+        {
+          label: " ",
+          prop: "importStatus",
+          type: "radio",
+          radioList:[
+            {
+              value: "1",
+              label: "已导入",
+            },
+            {
+              value: "0",
+              label: "未导入",
+            },
+
+          ]
+        },
+      ],
+      searchData:{},
+      tableConfig:{
+        columns:[
+        {
+          type:'slot',
+          name:'id',
+        },
+        {
+          prop:'insCompanyName',label:'保险公司',
+        },
+        {
+          prop:'mlifta',label:'交强险保费',
+        },
+        {
+          prop:'vavt',label:'车船税',
+        }, {
+          prop:'other',label:'其他保费',
+        },{
+          prop:'inventoryQuantity',label:'清单数量',
+        },{
+          prop:'createTime',label:'导入日期',
+        },{
+          prop:'createBy',label:'操作人',
+        },{
+          type:'slot',
+          name:'importStatus',
+        },{
+          type:'slot',
+          name:'error',
+        },
+        ],
+        loading:true,
+        operateShow:true,
+        isPaginationShow:true
+        // optBtns:[
+        //   {
+        //     type:'primary',
+        //     label:'修改',
+        //     hide:(row) => {
+        //      return row.importStatus == 1?true:false
+        //     },
+        //     click:(row, index) => {return this.modifyFun(row)},
+        //   }
+        // ]
+      },
+      btnGroup:[{
+        name:'模板下载',
+        click: "changs",
+      },
+      {
+        name:'excel导入',
+        click: () => {return this.importFun()}
+      }],
       InsCompanyList: [],
       queryFrom: {
-        importTime: "",
-        importStartTime: "",
-        importEndTime: "",
-        importStatus: "",
         pageNum: 1,
-        pageSize: 20,
+        pageSize: 10,
         totalSize: 0
       },
       queryBatchFrom: {
         pageNum: 1,
-        pageSize: 20,
+        pageSize: 10,
         totalSize: 0
       },
       batchNum: 0,
@@ -399,6 +415,23 @@ export default {
     };
   },
   methods: {
+    changs(index){
+      console.log(index,1111111)
+    },
+    handleSearchList(data){
+      if (
+        data.importTime == undefined ||
+        data.importTime == null ||
+        data.importTime == ""
+      ) {
+        (data.importStartTime = ""),
+          (data.importEndTime = "");
+      } else {
+        data.importStartTime = data.importTime[0];
+        data.importEndTime =data.importTime[1];
+      }
+      this.getList(data)
+    },
     // 查询
     queryStaffInfo() {
       if (
@@ -415,17 +448,18 @@ export default {
       this.getList();
     },
     //列表数据
-    getList() {
-      this.loading = true;
-      this.$api.cost.getQueryPage({ ...this.queryFrom, flag: 1 }).then(res => {
+    getList(data) {
+      this.tableConfig.loading = true;
+      this.$api.cost.getQueryPage({ ...data,...this.queryFrom, flag: 1 }).then(res => {
         if (res.data) {
           this.tableData = res.data.content;
           this.queryFrom.pageNum = res.data.pageNum;
           this.queryFrom.pageSize = res.data.pageSize;
           this.queryFrom.totalSize = res.data.totalSize;
-          this.loading = false;
+          this.tableConfig.loading = false;
+
         } else {
-          this.loading = false;
+          this.tableConfig.loading = false;
         }
       });
     },
@@ -523,10 +557,6 @@ export default {
     handleTableDetail() {
       this.dialogBVatchVisible = true;
     },
-    // 选中保险公司
-    InsCompanychange(e) {
-      console.log(e);
-    },
     importFun() {
       this.dialogImport = true;
       this.InsCompany = "";