refector: ep.vue增加筛选条件

src/views/hrm/employee.vue

@@ -2,29 +2,89 @@
   <el-container>
     <el-header>
       <div class="left-panel">
-        <el-select v-model="query.type" placeholder="人员类型" @change="handleQuery" clearable style="margin-left: 2px">
+        <el-select
-          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          v-model="query.type"
+          placeholder="人员类型"
+          @change="handleQuery"
+          clearable
+          style="margin-left: 2px"
+        >
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
         </el-select>
-        <el-cascader v-model="query.belong_dept" :options="deptData" clearable placeholder="部门/单位" @change="handleQuery" :show-all-levels="false" :props="{emitPath:false,checkStrictly: true}" style="margin-left:4px"/>
+        <el-select
+          v-model="query.job_state"
+          placeholder="人员状态"
+          @change="handleQuery"
+          clearable
+          style="margin-left: 2px"
+        >
+          <el-option
+            v-for="item in jobOptions2"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+        <el-cascader
+          v-model="query.belong_dept"
+          :options="deptData"
+          clearable
+          placeholder="部门/单位"
+          @change="handleQuery"
+          :show-all-levels="false"
+          :props="{ emitPath: false, checkStrictly: true }"
+          style="margin-left: 4px"
+        />
       </div>
       <div class="right-panel">
         <div class="right-panel-search">
-          <el-input v-model="query.search" placeholder="姓名/手机号" clearable @keyup.enter="handleQuery"></el-input>
+          <el-input
-          <el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
+            v-model="query.search"
+            placeholder="姓名/手机号"
+            clearable
+            @keyup.enter="handleQuery"
+          ></el-input>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            @click="handleQuery"
+          ></el-button>
         </div>
       </div>
     </el-header>
     <el-main class="nopadding">
-      <scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe
+      <scTable
-        @resetQuery="resetQuery">
+        ref="table"
+        :apiObj="apiObj"
+        row-key="id"
+        @selection-change="selectionChange"
+        stripe
+        @resetQuery="resetQuery"
+      >
         <!-- <el-table-column type="selection" width="50"></el-table-column> -->
         <el-table-column label="#" type="index" width="50"></el-table-column>
         <el-table-column label="人员类型" prop="type" width="160">
           <template #default="scope">
-            <span v-if="scope.row.type == 'employee' || scope.row.type == 'remployee'">[{{ jobOptions[scope.row.job_state] }}]
+            <span
+              v-if="
+                scope.row.type == 'employee' || scope.row.type == 'remployee'
+              "
+              >[{{ jobOptions[scope.row.job_state] }}]
             </span>
             <span>{{ userTypeOptions[scope.row.type] }}</span>
-            <span v-if="scope.row.type == 'employee' && scope.row.is_atwork" style="color:green;font-weight:bold">
+            <span
+              v-if="
+                (scope.row.type == 'employee' ||
+                  scope.row.type == 'remployee') &&
+                scope.row.is_atwork
+              "
+              style="color: green; font-weight: bold"
+            >
               在岗
             </span>
           </template>
@@ -38,28 +98,53 @@
             <el-avatar :size="50" :src="scope.row.photo" shape="square" />
           </template>
         </el-table-column>
-        <el-table-column label="手机号" prop="phone" width="120"></el-table-column>
+        <el-table-column
-        <el-table-column label="部门" prop="belong_dept" width="180" :show-overflow-tooltip="true">
+          label="手机号"
+          prop="phone"
+          width="120"
+        ></el-table-column>
+        <el-table-column
+          label="部门"
+          prop="belong_dept"
+          width="180"
+          :show-overflow-tooltip="true"
+        >
           <template #default="scope">
             <span v-if="scope.row.belong_dept_">{{
               scope.row.belong_dept_.name
             }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="身份证号" prop="id_number" width="180" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column
-        <el-table-column label="系统账号" prop="user" width="180" ><template #default="scope">
+          label="身份证号"
-            <span v-if="scope.row.user">{{
+          prop="id_number"
-                scope.row.user_.username
+          width="180"
-            }}</span>
+          :show-overflow-tooltip="true"
-          </template></el-table-column>
+        ></el-table-column>
-        <el-table-column label="定位卡号" prop="blt_" width="180">
+        <el-table-column label="系统账号" prop="user" width="180"
+          ><template #default="scope">
+            <span v-if="scope.row.user">{{ scope.row.user_.username }}</span>
+          </template></el-table-column
+        >
+        <el-table-column label="定位卡号" prop="blt_" width="180" :show-overflow-tooltip="true">
           <template #default="scope">
-            <span v-if="scope.row.blt_">{{
+            <div v-if="scope.row.blt_">
-                scope.row.blt_.code
+              <div>{{ scope.row.blt_.code }}</div>
-            }}</span>
+              <div v-if="scope.row.location">
+                {{ scope.row.location.area_fix_name }}-
+                <span v-if="scope.row.location.xx_detail"
+                  >({{ scope.row.location.xx_detail.longitude }},
+                  {{ scope.row.location.xx_detail.latitude }})</span
+                >
+              </div>
+            </div>
           </template>
         </el-table-column>
-        <el-table-column label="创建时间" prop="create_time" width="180"></el-table-column>
+        <el-table-column
+          label="创建时间"
+          prop="create_time"
+          width="180"
+        ></el-table-column>
         <el-table-column label="操作" fixed="right" align="left" width="170">
           <template #default="scope">
             <!-- <el-button
@@ -70,25 +155,58 @@
 							v-auth="'employee.update'"
 						>证书
 						</el-button> -->
-            <el-button link type="success" size="small" @click="handleForm('show', scope.row)">查看
+            <el-button
+              link
+              type="success"
+              size="small"
+              @click="handleForm('show', scope.row)"
+              >查看
             </el-button>
-            <el-button link type="warning" size="small" v-auth="'employee.update'"
+            <el-button
-              @click="handleForm('edit', scope.row)">编辑
+              link
+              type="warning"
+              size="small"
+              v-auth="'employee.update'"
+              @click="handleForm('edit', scope.row)"
+              >编辑
             </el-button>
-            <el-button v-if="scope.row.blt_" link type="danger" size="small" @click="handleBindBlt(20, scope.row)">解绑
+            <el-button
+              v-if="scope.row.blt_"
+              link
+              type="danger"
+              size="small"
+              @click="handleBindBlt(20, scope.row)"
+              >解绑
             </el-button>
-            <el-button v-else link type="primary" size="small" @click="handleBindBlt(10, scope.row)">绑卡
+            <el-button
+              v-else
+              link
+              type="primary"
+              size="small"
+              @click="handleBindBlt(10, scope.row)"
+              >绑卡
             </el-button>
           </template>
         </el-table-column>
       </scTable>
     </el-main>
   </el-container>
-  <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save = false">
+  <save-dialog
+    v-if="dialog.save"
+    ref="saveDialog"
+    @success="handleSaveSuccess"
+    @closed="dialog.save = false"
+  >
   </save-dialog>
 
-  <ScBind v-if="showBindBlt" :bindBtl="bindBtl" :bindType="bindType" :bindName="bindName" :bindEmployee="bindEmployee"
+  <ScBind
-    @closed="closed"></ScBind>
+    v-if="showBindBlt"
+    :bindBtl="bindBtl"
+    :bindType="bindType"
+    :bindName="bindName"
+    :bindEmployee="bindEmployee"
+    @closed="closed"
+  ></ScBind>
   <!-- <el-Dialog
     title="绑定定位卡"
     v-model="showBindBlt"
@@ -130,7 +248,7 @@ export default {
   name: "employee",
   components: {
     saveDialog,
-    ScBind
+    ScBind,
   },
   data() {
     return {
@@ -138,7 +256,7 @@ export default {
         save: false,
         permission: false,
       },
-      deptData:[],
+      deptData: [],
       apiObj: this.$API.hrm.employee.list,
       query: {},
       tdevice: [],
@@ -152,7 +270,7 @@ export default {
       bindName: "",
       bindType: 10,
       bindBtl: null,
-      bindEmployee: '',
+      bindEmployee: "",
       form: {
         type: 10,
         blt: "",
@@ -162,18 +280,24 @@ export default {
         employee: "正式员工",
         remployee: "相关方",
         visitor: "访客",
-        driver: "货车司机"
+        driver: "货车司机",
       },
       jobOptions: {
         10: "在职",
         20: "离职",
+        30: "退休",
       },
       typeOptions: [
         { label: "正式员工", value: "employee" },
         { label: "相关方", value: "remployee" },
         { label: "访客", value: "visitor" },
-        { label: "货车司机", value: "driver" }
+        { label: "货车司机", value: "driver" },
-      ]
+      ],
+      jobOptions2: [
+        { label: "在职", value: 10 },
+        { label: "离职", value: 20 },
+        { label: "退休", value: 30 },
+      ],
     };
   },
   mounted() {
@@ -182,7 +306,10 @@ export default {
   },
   methods: {
     async getDept() {
-      let res = await this.$API.system.dept.list.req({ page: 0, type__in: 'dept,rparty' });
+      let res = await this.$API.system.dept.list.req({
+        page: 0,
+        type__in: "dept,rparty",
+      });
       this.deptData = genTree(res);
     },
     //人员证书添加
@@ -260,7 +387,7 @@ export default {
           loading.close();
           this.$message.success("操作成功");
         })
-        .catch(() => { });
+        .catch(() => {});
     },
     //表格选择后回调事件
     selectionChange(selection) {
@@ -316,7 +443,9 @@ export default {
 
     getBltList() {
       let that = this;
-      that.$API.third.tdevice.list.req({ type: 30, page: 0, state: 'unused' }).then((res) => {
+      that.$API.third.tdevice.list
+        .req({ type: 30, page: 0, state: "unused" })
+        .then((res) => {
           that.tdevice = res;
           that.bltList = res.filter((item) => {
             return item.employee_ === null;