员工管理 [修复] 级别名称必选导致无法提交的问题、岗位类型没有读取接口的问题 [优化] 统一样式

src/components/system/staff.vue

 <template>
-  <div class="user" v-loading="loading">
-    <el-form ref="searchFrom" :model="searchFrom" label-width="80px" inline>
-      <el-form-item label="ID">
-        <el-input v-model="searchFrom.id" clearable></el-input>
+  <div class="admin-refresh" v-loading="loading">
+    <el-form class="section-search" inline size="small">
+      <el-form-item>
+        <el-input style="width: 160px;" placeholder="ID" @change="getData" v-model="searchFrom.id" clearable></el-input>
       </el-form-item>
-      <el-form-item label="姓名">
-        <el-input v-model="searchFrom.name" clearable></el-input>
+      <el-form-item>
+        <el-input style="width: 160px;" placeholder="姓名" @change="getData" v-model="searchFrom.name" clearable></el-input>
       </el-form-item>
-      <el-form-item label="手机号码">
-        <el-input v-model="searchFrom.mobile" clearable></el-input>
+      <el-form-item>
+        <el-input style="width: 160px;" placeholder="手机号码" @change="getData" v-model="searchFrom.mobile" clearable></el-input>
       </el-form-item>
-      <el-form-item label="身份证号">
-        <el-input v-model="searchFrom.id_card" clearable></el-input>
+      <el-form-item>
+        <el-input style="width: 160px;" placeholder="身份证号" @change="getData" v-model="searchFrom.id_card" clearable></el-input>
       </el-form-item>
-      <el-form-item label="岗位">
-        <el-select v-model="searchFrom.type" placeholder="请选择" clearable>
+      <el-form-item>
+        <el-select style="width: 160px;" placeholder="岗位" @change="getData" v-model="searchFrom.type" clearable :disabled="!staffType.length">
           <el-option
-            v-for="item in STAFF_TYPE"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
+            v-for="item in staffType"
+            :key="item.type"
+            :label="item.name"
+            :value="item.type">
           </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="状态">
-        <el-select v-model="searchFrom.status" clearable>
+      <el-form-item>
+        <el-select style="width: 160px;" placeholder="状态" @change="getData" v-model="searchFrom.status" clearable>
           <el-option label="在职" value="0"></el-option>
           <el-option label="离职" value="1"></el-option>
         </el-select>
@@ -42,12 +42,12 @@
       </el-form-item>-->
       <el-form-item>
         <!--<div class="flexRow">-->
-          <el-button @click="onSearch" type="primary" plain>搜索</el-button>
-          <el-button v-if="!$store.state.readonly" @click="onAdd" type="success" plain>添加</el-button>
+        <el-button @click="onSearch" type="primary" plain>搜索</el-button>
+        <el-button v-if="!$store.state.readonly" @click="onAdd" type="success" plain>添加</el-button>
         <!--</div>-->
       </el-form-item>
     </el-form>
-    <el-table :data="tableData">
+    <el-table :data="tableData" border>
       <el-table-column prop="id" label="ID"></el-table-column>
       <el-table-column prop="name" label="真实姓名"></el-table-column>
       <el-table-column prop="mobile" label="手机号码"></el-table-column>
@@ -58,10 +58,11 @@
           </span>
         </template>
       </el-table-column>
-      <el-table-column label="岗位" width="80">
+      <el-table-column label="岗位">
         <template slot-scope="scope">
           <!--{{scope.row.type == 1 ? '销售' : ''}}-->
-          {{filterName(scope.row.type, 'STAFF_TYPE')}}
+          <!--{{filterName(scope.row.type, 'STAFF_TYPE')}}-->
+          {{filterName(scope.row.type, 'staffType')}}
         </template>
       </el-table-column>
       <el-table-column prop="in_at" label="入职时间"></el-table-column>
@@ -95,12 +96,13 @@
           <el-input v-model="dialog.form.id_card" type="text"></el-input>
         </el-form-item>
         <el-form-item label="岗位：" prop="type">
-          <el-select v-model="dialog.form.type" placeholder="请选择">
+          <el-select v-model="dialog.form.type" placeholder="请选择" :disabled="!staffType.length">
+            <!--v-for="item in STAFF_TYPE"-->
             <el-option
-              v-for="item in STAFF_TYPE"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
+              v-for="item in staffType"
+              :key="item.type"
+              :label="item.name"
+              :value="item.type">
             </el-option>
           </el-select>
         </el-form-item>
@@ -135,9 +137,15 @@
 </template>
 
 <script>
-  import {getStaffListApi, postStaffListApi, putStaffListApi, getLevelListApi} from "../../service/api";
+  import {
+    getTeacherTypeListApi,
+    getStaffListApi,
+    postStaffListApi,
+    putStaffListApi,
+    getLevelListApi
+  } from "../../service/api";
   import page from '../framework/page'
-  import {STAFF_TYPE} from '@/util/wordbook'
+  // import {STAFF_TYPE} from '@/util/wordbook'
 
   export default {
     name: "index",
@@ -174,11 +182,12 @@
               id_card: [{required: true, message: '请输入', trigger: 'blur'}],
               type: [{required: true, message: '请选择', trigger: 'change'}],
               in_at: [{required: true, message: '请选择', trigger: 'change'}],
-              sale_level_id: [{required: true, message: '请选择', trigger: 'change'}],
+              // sale_level_id: [{required: true, message: '请选择', trigger: 'change'}],
             },
           }
         },
-        STAFF_TYPE: STAFF_TYPE,
+        // STAFF_TYPE: STAFF_TYPE,
+        staffType: [],
         dialogDetail: {
           show: false,
           id: ''
@@ -202,15 +211,35 @@
         loading: false
       }
     },
-    components: { page },
+    components: {page},
     mounted() {
       console.log(this.dialog);
-      this.getData()
+
+      this.getData();
+      this.getLevelName();
+      this.getStaffType();
     },
     methods: {
 
+      getStaffType() {
+        getTeacherTypeListApi().then(res => {
+          this.staffType = res
+        });
+      },
+
+      getLevelName() {
+        let data = {page: 1, limit: 100}
+        getLevelListApi(data).then(res => {
+          this.levelNameArr = res.list
+        })
+      },
+
       filterName(string, type) {
-        return this[type].find(i => {return i.value == string}).label
+        if (this[type].length) {
+          return this[type].find(i => {
+            return i.type == string
+          }).name
+        }
       },
       dialogToggle() {
         this.dialog.show = !this.dialog.show;
@@ -226,7 +255,7 @@
         this.dialog.form.id_card = '';
         this.dialog.form.type = '';
         this.dialog.form.in_at = '';*/
-        this.$nextTick(()=>{
+        this.$nextTick(() => {
           this.$refs['dialogForm'].resetFields();
         })
       },
@@ -239,8 +268,11 @@
               id_card: this.dialog.form.id_card,
               type: this.dialog.form.type,
               in_at: this.dialog.form.in_at,
-              sale_level_id: this.dialog.form.sale_level_id
+              // sale_level_id: this.dialog.form.sale_level_id
             };
+            if (this.dialog.form.sale_level_id) {
+              json.sale_level_id = this.dialog.form.sale_level_id
+            }
             if (this.dialog.form.id) { // 编辑
               json.id = this.dialog.form.id;
               // 离职
@@ -252,13 +284,13 @@
                 json.status = 0
               }
               putStaffListApi(json).then(res => {
-                this.$message({ type: 'success', message: '编辑成功!' });
+                this.$message({type: 'success', message: '编辑成功!'});
                 this.dialogToggle();
                 this.getData();
               })
             } else {
               postStaffListApi(json).then(res => {
-                this.$message({ type: 'success', message: '添加成功!' });
+                this.$message({type: 'success', message: '添加成功!'});
                 this.dialogToggle();
                 this.getData();
               })
@@ -275,31 +307,27 @@
           limit: this.limit,
           page: this.nowPage
         };
-        this.searchFrom.id?json.id = this.searchFrom.id:'';
-        this.searchFrom.name?json.name = this.searchFrom.name:'';
-        this.searchFrom.mobile?json.mobile = this.searchFrom.mobile:'';
-        this.searchFrom.id_card?json.id_card = this.searchFrom.id_card:'';
-        this.searchFrom.type?json.type = this.searchFrom.type:'';
-        this.searchFrom.status?json.status = this.searchFrom.status:'';
-        if(this.$route.params.model) {
-          json = Object.assign({}, json, { mobile: this.$route.params.model })
+        this.searchFrom.id ? json.id = this.searchFrom.id : '';
+        this.searchFrom.name ? json.name = this.searchFrom.name : '';
+        this.searchFrom.mobile ? json.mobile = this.searchFrom.mobile : '';
+        this.searchFrom.id_card ? json.id_card = this.searchFrom.id_card : '';
+        this.searchFrom.type || (this.searchFrom.type == 0) ? json.type = this.searchFrom.type : '';
+        this.searchFrom.status ? json.status = this.searchFrom.status : '';
+        if (this.$route.params.model) {
+          json = Object.assign({}, json, {mobile: this.$route.params.model})
           this.searchFrom.mobile = this.$route.params.model
         }
         getStaffListApi(json).then(res => {
           this.tableData = res.list;
-          this.total = res.total
+          this.total = res.total;
           this.$route.query.model = ''
         });
-        let data = { page: 1, limit: 100 }
-        getLevelListApi(data).then(res => {
-          this.levelNameArr = res.list
-        })
       },
 
       onAdd() {
         this.dialog.title = '添加员工';
         this.dialogToggle();
-        this.$nextTick(()=>{
+        this.$nextTick(() => {
           this.dialogReset();
         });
       },
@@ -307,7 +335,7 @@
       onEdit(item) {
         this.dialogToggle();
         this.dialogReset();
-        this.$nextTick(()=>{
+        this.$nextTick(() => {
           this.dialog.title = '编辑员工';
           this.dialog.form.id = item.id;
           this.dialog.form.name = item.name;
@@ -315,7 +343,7 @@
           this.dialog.form.id_card = item.id_card;
           this.dialog.form.type = item.type;
           this.dialog.form.in_at = item.in_at;
-          this.dialog.form.sale_level_id = item.sale_level_id
+          this.dialog.form.sale_level_id = item.sale_level_id ? item.sale_level_id : '';
           if (item.status == 1) { // 离职
             this.dialog.form.over_at = item.over_at;
           } else {
@@ -324,7 +352,7 @@
         });
       },
 
-      onSearch(){
+      onSearch() {
         this.getData();
         this.$route.params.model = ''
       },
@@ -345,12 +373,6 @@
 <style scoped lang="less">
   @import "../../util/public";
 
-  .el-form {
-    .el-form-item:last-child {
-      margin-bottom: 0;
-    }
-  }
-
   .avatar {
     width: 50px;
     margin-right: 5px;