人员管理-代理人管理使用封装表格

src/components/TemplateTable/index.vue

@@ -74,8 +74,11 @@
       <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 v-if="btnGroup.length>0">
+          <span v-for="(val, idx) in btnGroup" :key="idx"  style="margin-left:10px">
+            <slot v-if="val.slot" show-overflow-tooltip :name="val.name"></slot>
+            <el-button v-else :type="val.type || 'primary'" size="small" @click="val.click()">{{ val.name }}</el-button>
+          </span>
       </template>
       </el-form-item>
       <!-- <el-form-item v-if="btnGroup.length>0" >
@@ -100,7 +103,7 @@
         :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" />
+            <el-table-column type="index" :width="tableConfig.indexWidth || '50'" v-if="tableConfig.isShowIndex" align="center" label="序号" />
             <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" >

src/views/Core/KtCommonTable.vue

@@ -459,11 +459,11 @@ export default {
       let bottomTop = that.$refs.bottomFixed.offsetTop;
       that.tableHeight = bottomTop - tableTop - 120 + "px";
     }, 10);
-    window.onresize = function () {
-      let tableTop = that.$refs.commonTable.offsetTop;
-      let bottomTop = that.$refs.bottomFixed.offsetTop;
-      that.tableHeight = bottomTop - tableTop - 120 + "px";
-    };
+      // window.onresize = function () {
+      //   let tableTop = that.$refs.commonTable.offsetTop;
+      //   let bottomTop = that.$refs.bottomFixed.offsetTop;
+      //   that.tableHeight = bottomTop - tableTop - 120 + "px";
+      // };
   },
 };
 </script>

src/views/PeopleManage/Agent/AgentManage.vue

@@ -37,65 +37,21 @@
 
         <!-- 右侧列表页面Start -->
         <SplitArea :size="rightSplitWidth">
-          <!-- 筛选区域Start -->
-          <el-row class="queryFrom">
-            <el-form ref="queryFormRef" :model="pageData" label-width="80px">
-              <el-row>
-                <el-col :span="5">
-                  <el-form-item label="工号">
-                    <el-input
-                      clearable
-                      size="small"
-                      placeholder="工号"
-                      v-model="pageData.userId"
-                    ></el-input>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="5">
-                  <el-form-item label="姓名">
-                    <el-input
-                      clearable
-                      size="small"
-                      placeholder="姓名"
-                      v-model="pageData.name"
-                    ></el-input>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="5">
-                  <el-form-item label="手机号">
-                    <el-input
-                      clearable
-                      size="small"
-                      placeholder="手机号"
-                      v-model="pageData.mobile"
-                    ></el-input>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="5">
-                  <el-form-item label="状态">
-                    <el-select
-                      style="width:200px"
-                      clearable 
-                      size="small"
-                        v-model="pageData.status"
-                        placeholder="请选择"
-                      >
-                      <el-option v-for="val in user_statusoptions" :label="val.label" :value="val.value" :key="val.id"></el-option>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="4">
-                    <el-button
-                      size="small"
-                      type="primary"
-                      @click="queryStaffInfo"
-                      >查询</el-button
-                    >
-                    <div style="display:inline-block;margin:0 10px">
+          <templateTable
+            :formList="formList"
+            :searchData.sync="queryFrom"
+            :tableConfig="tableConfig"
+            :btnGroup="btnGroup"
+            :data="pageResult"
+            @getList="findPage"
+            @handleSearchList="handleSearchList"
+            :pagination="pageData"
+          >
+            <div style="display:inline-block;"  slot="upload" >
                 <el-upload
                   class="upload"
                   ref="upload"
-                  :show-file-list="false"
+                  :show-file-list="false" 
                   :limit="1"
                   action="#"
                   :http-request="carfrontChange"
@@ -104,30 +60,12 @@
                   <el-button type="primary" size="small" @click="$refs.upload.clearFiles()">导入新用户</el-button>
                 </el-upload>
               </div>
-                </el-col>
-              </el-row>
-            </el-form>
-          </el-row>
-
-            <kt-common-table
-              permsEdit="sys:agent:edit"
-              permsDelete="sys:agent:delete"
-              :data="pageResult"
-              :columns="columns"
-              editButtonName="编辑"
-              :showBatchDelete="false"
-              @findPage="findPage"
-              @handleEdit="handleTableEdit"
-            >
-            </kt-common-table>
-         
+          </templateTable>
         </SplitArea>
         <!-- 右侧列表页面End -->
       </Split>
     </el-main>
 
-
-
 <!-- 新新增修改界面 -->
 
 <el-dialog
@@ -251,56 +189,87 @@
 import Cookies from "js-cookie";
 import KtButton from "@/views/Core/KtButton"; // 按钮权限组件
 import tree from "@/components/ztree.vue"; // 机构树组件
-import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+import templateTable from '../../../components/TemplateTable/index.vue'
+
 export default {
   components: {
     KtButton,
     tree,
-    KtCommonTable,
+    templateTable
   },
   data() {
-    //验证身份证
-    var validateIdCard = (rule, value, callback) => {
-      let that = this;
-      var pattern =
-        /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/;
-      if (!pattern.test(value) || value == "") {
-        callback(new Error("身份证输入有误"));
-      } else {
-        let upperCaseValue = value.toUpperCase();
-        var such = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
-        var sum = 0;
-        for (var i = 0; i < value.length - 1; i++) {
-          var product = value[i] * such[i];
-          sum += product;
-        }
-        var result = sum % 11;
-        var example = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"];
-        if (upperCaseValue[17] == example[result]) {
-          that.formData.identity = upperCaseValue;
-          that.formData.birthday =
-            value.substr(6, 4) +
-            "-" +
-            value.substr(10, 2) +
-            "-" +
-            value.substr(12, 2);
-          that.formData.sex = value.substr(16, 1) % 2 == 0 ? "女" : "男";
-          callback();
-        } else {
-          callback(new Error("身份证输入有误"));
-        }
-      }
-    };
-
     return {
+      formList:[
+        {
+          label: "工号",
+          prop: "userId",
+          type: 'input'
+        },
+        {
+          label: "姓名",
+          prop: "name",
+          type: 'input'
+        },
+        {
+          label: "手机号",
+          prop: "mobile",
+          type: 'input'
+        },
+        {
+          label: "状态",
+          prop: "status",
+          type: "select",
+          options: JSON.parse(localStorage.getItem('user_statusoptions')) 
+        },
+      ],
+      btnGroup:[{
+        name:'upload',
+        slot:true
+      },],
+      tableConfig:{
+        columns: [
+        // 数据列
+        { prop: "deptId", label: "部门编码",type:'text' },
+        {
+          prop: "pdeptName",
+          label: "机构名称",type:'text',
+        },
+
+        { prop: "deptName", label: "部门名称",type:'text', },
+      
+        { prop: "userId", label: "工号",type:'text', },
+        { prop: "name", label: "姓名",type:'text', },
+        {
+          prop: "sex",
+          label: "性别",type:'text',
+        },
+        { prop: "mobile", label: "联系电话",type:'text', },
+          {
+          prop: "roleId",
+          label: "角色",type:'text',
+        },
+        {
+          prop: "status",
+          label: "状态",type:'text',
+        },],
+        loading:true,
+        isPaginationShow:true,
+        isShowIndex:true,
+        optBtns:[
+          {
+            type:'primary',
+            label:'编辑',
+            icon:"fa fa-edit",
+            click:(row, index) => {return this.handleTableEdit(row)},
+          }
+        ]
+      },
       pageData:{
         pageNum: 1,
-        pageSize: 20,
-        deptId:JSON.parse(localStorage.getItem('user_data')).deptId  ,
-        userId:'',
-        realName:'',
-        mobile:'',
+        pageSize: 10,
+        totalSize: 0
       },
+      deptId:JSON.parse(localStorage.getItem('user_data')).deptId ,
       formData:{
         roleId:'20'
       },
@@ -346,42 +315,8 @@ export default {
       currentTreeNode: null,
       // 右侧列表查询数据Start
       queryFrom: {},
-      pageResult: {},
+      pageResult: [],
       containsSubDeptChecked: true, //是否包含下级机构
-      columns: [
-        // 数据列
-        { prop: "deptId", label: "部门编码", minWidth: 80, sortable: false },
-        {
-          prop: "pdeptName",
-          label: "机构名称",
-          minWidth: 120,
-          sortable: false,
-        },
-
-        { prop: "deptName", label: "部门名称", minWidth: 80, sortable: false },
-      
-        { prop: "userId", label: "工号", minWidth: 80, sortable: false },
-        { prop: "name", label: "姓名", minWidth: 120, sortable: false },
-        {
-          prop: "sex",
-          label: "性别",
-          minWidth: 50,
-          sortable: false,
-        },
-        { prop: "mobile", label: "联系电话", minWidth: 100, sortable: false },
-          {
-          prop: "roleId",
-          label: "角色",
-          minWidth: 80,
-          sortable: false,
-        },
-        {
-          prop: "status",
-          label: "状态",
-          minWidth: 50,
-          sortable: false,
-        },
-      ],
       dialogTitle: "",
       dialogVisible: false, // 新增编辑界面是否显示
       departmentList: [], // 选中公司的所有部门的集合
@@ -400,6 +335,7 @@ export default {
     // this.getDictItems("sex");
     // this.getDictItems("user_status");
     this.findLeftTreeData(); // 获取机构树的数据
+    this.findPage()
 
   },
   mounted() {
@@ -421,7 +357,7 @@ export default {
     carfrontChange(file) {
       const params = new FormData(); // 声明formData数据类型
       params.append("file", file.file);
-      params.append("deptId", this.pageData.deptId);
+      params.append("deptId", this.deptId);
       this.$api.dept.newUserImport(params).then(res => {
         if (res.code == 200) {
           this.$message({
@@ -458,7 +394,7 @@ export default {
     onZTreeClick: function (evt, treeId, treeNode) {
       // 点击事件
       this.currentTreeNode = evt;
-      this.pageData.deptId = this.currentTreeNode.id;
+      this.deptId = this.currentTreeNode.id;
       this.pageData.pageNum =1;
       this.findPage();
       // this.formData.deptId = [];
@@ -474,52 +410,47 @@ export default {
     //联级选择器触发事件
     handleChange(val) {
       this.formData.deptId=val
-      if (val.length !== 0) {
-        // this.formData.deptId=val
+      if (val&&val.length !== 0) {
         this.formData.deptId = val.at(-1);
       }
      
     },
     // 右侧列表的方法Start
     findPage(data) {
-      // 获取分页数据
-      if (data && data.pageRequest) {
-        this.pageData.pageNum = data.pageRequest.pageNum;
-        this.pageData.pageSize = data.pageRequest.pageSize;
-      }
-       let dto={
-        deptId:this.pageData.deptId,
-        mobile:this.pageData.mobile,
-        name:this.pageData.name,
-        userId:this.pageData.userId,
-        status:this.pageData.status,
-        roleId:'20',
-      }
+      this.tableConfig.loading = true;
       this.$api.user
-        .findPage({dto,pageNum:this.pageData.pageNum,pageSize:this.pageData.pageSize})
+        // .findPage({dto,pageNum:this.pageData.pageNum,pageSize:this.pageData.pageSize})
+        .findPage({...this.pageData,dto:{...data,roleId:'20',deptId:this.deptId} })
         .then((res) => {
-          res.data.content.forEach(val=>{
-            if(val.sex&& val.sex!==''&& val.sex!==null){
-              val.sex=this.sexoptions.find(ele=>ele.value==val.sex).label
-            }
-            if(val.status&& val.status!==''&& val.status!==null){
-              val.status=this.user_statusoptions.find(ele=>ele.value==val.status).label
-            }
-            if(val.roleId&& val.roleId!==''&& val.roleId!==null){
-              val.roleId=this.roles.find(ele=>ele.id==val.roleId).name
-            }
-            
-          })
-          this.pageResult = res.data;
+          if(res.code==200&& res.data.content.length>0){
+              res.data.content.forEach(val=>{
+              if(val.sex&& val.sex!==''&& val.sex!==null){
+                val.sex=this.sexoptions.find(ele=>ele.value==val.sex).label
+              }
+              if(val.status&& val.status!==''&& val.status!==null){
+                val.status=this.user_statusoptions.find(ele=>ele.value==val.status).label
+              }
+              if(val.roleId&& val.roleId!==''&& val.roleId!==null){
+                val.roleId=this.roles.find(ele=>ele.id==val.roleId).name
+              }
+            })
+          }
+          this.tableConfig.loading = false;
+          this.pageResult = res.data.content;
+          this.pageData.pageNum=res.data.pageNum;
+          this.pageData.pageSize=res.data.pageSize;
+          this.pageData.totalSize=res.data.totalSize;
         })
        
     },
-   
+    handleSearchList(data){
+      this.findPage(data)
+    },
     handleTableEdit(params) {
       this.$api.dept.findDeptTree().then((res) => {
         this.option = res.data;
       });
-      this.$api.user.getUserDatail(params.row.userId).then((result) => {
+      this.$api.user.getUserDatail(params.userId).then((result) => {
         if(result.code==200){
             result.data.status+=''
           this.formData=result.data
@@ -557,7 +488,7 @@ export default {
       }
       this.formData={
         roleId:'20',
-        deptId:this.pageData.deptId
+        deptId:this.deptId
       }
       this.dialogTitle = "新增代理人";
       this.dialogVisible = true;