Просмотр исходного кода

1、封装公用form表单,src\components\TemplateForm
2、人员管理-代理人管理新增导入新用户功能

lihongxiao 3 лет назад
Родитель
Сommit
0e368c969a

+ 96 - 0
src/components/TemplateForm/index.vue

@@ -0,0 +1,96 @@
+<template>
+    <el-form :model="formData"  ref="formData" :inline="true" size="small">
+        <el-row :gutter="20"> 
+            <el-col :span="8" v-for="f in ruleForm" :key="f.prop">
+                <el-form-item :label="f.label" :prop="f.prop" label-width="120px">
+                    <template>
+                        <template v-if="f.type === 'input'">
+                            <el-input clearable v-model.trim="formData[f.prop]" 
+                                :placeholder="'请输入' + f.label"></el-input>
+                        </template>
+                        <template v-else-if="f.type === 'company'">
+                            <el-select size="small" clearable v-model="formData[f.prop]"
+                                :placeholder="'请输入' + f.label">
+                                <el-option label="不限" value v-if="f.selectAuto"></el-option>
+                                <el-option v-for="(s, i) in InsCompanyList" :key="i" :label="s.name"
+                                    :value="s.id"></el-option>
+                            </el-select>
+                        </template>
+                        <template v-if="f.type === 'dept'">
+                            <el-cascader
+                                :options="option"
+                                v-model.trim="formData[f.prop]"
+                                clearable
+                                :show-all-levels="false"
+                                :props="{
+                                    value: 'id',
+                                    label: 'name',
+                                    checkStrictly: true,
+                                }"
+                                @change="handleChange"
+                                >
+                                </el-cascader>
+                        </template>
+                        <template v-else-if="f.type === 'select'">
+                            <el-select size="small" clearable v-model="formData[f.prop]"
+                                :placeholder="'请输入' + f.label">
+                                <el-option label="不限" value v-if="f.selectAuto"></el-option>
+                                <el-option v-for="(s, i) in f.options" :key="i" :label="s.label"
+                                    :value="s.value"></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="formData[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="formData[f.prop]" placeholder="选择日期"
+                                value-format="yyyy-MM-dd"></el-date-picker>
+                        </template>
+                    </template>
+                </el-form-item>
+            </el-col>
+        </el-row>
+    </el-form>
+</template>
+  
+
+<script >
+export default {
+    props: {
+        ruleForm: {
+            type: Array,
+            default: []
+        },
+        formData: {
+            type: Object,
+            default: {}
+        }
+    },
+    data() {
+        return {
+            option: [], //机构列表
+
+        }
+    },
+    created(){
+    this.$api.dept.findDeptTree().then((res) => {
+        this.option = res.data;
+      });
+    },
+    methods:{
+        handleChange(val){
+            this.$emit('handleChange',val)
+        }
+    }
+    
+
+}
+</script>
+  
+<style lang="scss" scoped>
+</style>
+  

+ 8 - 0
src/http/moudules/dept.js

@@ -118,3 +118,11 @@ export const getDeptById = (id) => {
         method: 'get'
     })
 }
+// 新用户导入
+export const newUserImport = (data) => {
+    return axios({
+        url: '/user/newUserImport',
+        method: 'post',
+        data
+    })
+}

+ 63 - 6
src/views/PeopleManage/Agent/AgentManage.vue

@@ -76,6 +76,7 @@
                     <el-select
               style="width:200px"
               clearable 
+              size="small"
                 v-model="pageData.status"
                 placeholder="请选择"
               >
@@ -84,14 +85,25 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="4">
-                  <el-form-item label="">
                     <el-button
                       size="small"
                       type="primary"
                       @click="queryStaffInfo"
                       >查询</el-button
                     >
-                  </el-form-item>
+                    <div style="display:inline-block;margin:0 10px">
+                <el-upload
+                  class="upload"
+                  ref="upload"
+                  :show-file-list="false"
+                  :limit="1"
+                  action="#"
+                  :http-request="carfrontChange"
+                  :multiple="false"
+                >
+                  <el-button type="primary" size="small" @click="$refs.upload.clearFiles()">导入新用户</el-button>
+                </el-upload>
+              </div>
                 </el-col>
               </el-row>
             </el-form>
@@ -127,6 +139,7 @@
       @close="closeDialog"
       v-dialogDrag
     >
+    <!-- <TemplateForm ref="TemplateForm"  :formData="formData" :ruleForm="ruleForm"></TemplateForm> -->
       <el-form
         :model="formData"
         :rules="formDataRules"
@@ -159,10 +172,11 @@
             <el-input v-model="formData.id" disabled></el-input>
           </el-form-item>
           </el-col>
-          <el-col :span="8"></el-col>
-          <el-form-item label="手机号" prop="mobile">
+          <el-col :span="8">
+            <el-form-item label="手机号" prop="mobile">
             <el-input v-model="formData.mobile"></el-input>
           </el-form-item>
+          </el-col>
           <el-col :span="8">
             <el-form-item label="邮箱" prop="email">
               <el-input v-model="formData.email"></el-input>
@@ -238,12 +252,14 @@
 import Cookies from "js-cookie";
 import KtButton from "@/views/Core/KtButton"; // 按钮权限组件
 import tree from "@/components/ztree.vue"; // 机构树组件
+import TemplateForm from "@/components/TemplateForm/index.vue"; // 机构树组件
 import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
 export default {
   components: {
     KtButton,
     tree,
     KtCommonTable,
+    TemplateForm
   },
   data() {
     //验证身份证
@@ -280,6 +296,30 @@ export default {
     };
 
     return {
+      // ruleForm:[
+      //   {
+      //     label:'员工工号',
+      //     prop:'111111111',
+      //     type:'input'
+      //   },
+      //   {
+      //     label:'员工工号',
+      //     prop:'111111111',
+      //     type:'dept'
+      //   },{
+      //     label:'员工工号',
+      //     prop:'111111111',
+      //     type:'input'
+      //   },{
+      //     label:'员工工号',
+      //     prop:'111111111',
+      //     type:'input'
+      //   },{
+      //     label:'员工工号',
+      //     prop:'111111111',
+      //     type:'input'
+      //   },
+      // ],
       pageData:{
         pageNum: 1,
         pageSize: 20,
@@ -405,6 +445,23 @@ export default {
     },
   },
   methods: {
+      // excel导入
+    carfrontChange(file) {
+      const params = new FormData(); // 声明formData数据类型
+      params.append("file", file.file);
+      params.append("deptId", this.pageData.deptId);
+      this.$api.dept.newUserImport(params).then(res => {
+        if (res.code == 200) {
+          this.$message({
+            message: res.msg,
+            type: "success"
+          });
+          this.findPage();
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
     // 查询Start
     queryStaffInfo() {
       this.findPage();
@@ -494,7 +551,7 @@ export default {
           this.formData.password=''
         }
       })
-      this.dialogTitle = "编辑后线人员";
+      this.dialogTitle = "编辑代理人";
       this.dialogVisible = true;
     },
     // 删除单个人员
@@ -527,7 +584,7 @@ export default {
         this.formData.deptId = this.formData.deptId.at(-1);
       }
       this.formData.roleId='20'
-      this.dialogTitle = "新增后线人员";
+      this.dialogTitle = "新增代理人";
       this.dialogVisible = true;
     },
     // 新增或修改的弹出框Start

+ 3 - 2
src/views/PeopleManage/Staff/StaffManage.vue

@@ -165,10 +165,11 @@
             <el-input v-model="formData.id" disabled></el-input>
           </el-form-item>
           </el-col>
-          <el-col :span="8"></el-col>
-          <el-form-item label="手机号" prop="mobile">
+          <el-col :span="8">
+            <el-form-item label="手机号" prop="mobile">
             <el-input v-model="formData.mobile"></el-input>
           </el-form-item>
+          </el-col>
           <el-col :span="8">
             <el-form-item label="邮箱" prop="email">
               <el-input v-model="formData.email"></el-input>

+ 3 - 2
src/views/PeopleManage/TeamLeader/TeamLeaderManage.vue

@@ -159,10 +159,11 @@
             <el-input v-model="formData.id" disabled></el-input>
           </el-form-item>
           </el-col>
-          <el-col :span="8"></el-col>
-          <el-form-item label="手机号" prop="mobile">
+          <el-col :span="8">
+            <el-form-item label="手机号" prop="mobile">
             <el-input v-model="formData.mobile"></el-input>
           </el-form-item>
+          </el-col>
           <el-col :span="8">
             <el-form-item label="邮箱" prop="email">
               <el-input v-model="formData.email"></el-input>