pref:修改工作人员页面

base-manager-ui/admin/src/pages/basicset/dept/department.vue

@@ -763,6 +763,7 @@ export default {
 // }
 .business-list {
   display: flex;
+  align-items: flex-start;
   /deep/ .ant-form-item-label {
     line-height: 20px;
   }

base-manager-ui/admin/src/pages/basicset/workman/personnel.vue

@@ -6,7 +6,43 @@
       <div class="person_chang">
         <div class="person_gruop">选择部门：</div>
         <div class="person_gruop1">
-          <a-radio-group
+          <div class="dept-select flex aic">
+            <div
+              class="item dept-select-item1"
+              :class="{ active: deptSearch === '' }"
+              @click="handleAllDept"
+            >
+              全部
+            </div>
+            <div
+              v-show="deptSearch !== ''"
+              class="item dept-select-item2 active"
+            >
+              {{ curDept }}
+            </div>
+            <a-popover arrowPointAtCenter placement="rightTop" title="部门列表">
+              <template slot="content">
+                <div class="dept-list" v-if="deptData.length">
+                  <a-radio-group v-model="deptSearch" @change="changeDept">
+                    <a-radio
+                      :data-name="v.name"
+                      v-for="v in deptData"
+                      :key="v.id"
+                      :value="v.id"
+                    >
+                      {{ v.name }}
+                    </a-radio>
+                  </a-radio-group>
+                </div>
+                <a-empty style="margin-top: 20px" :image="simpleImage" v-else />
+              </template>
+
+              <div class="item dept-select-item3">
+                <a-icon type="double-right" />
+              </div>
+            </a-popover>
+          </div>
+          <!-- <a-radio-group
             button-style="solid"
             v-model="deptSearch"
             @change="handleDeptSearch"
@@ -15,13 +51,52 @@
             <a-radio-button v-for="v in deptData" :key="v.id" :value="v.id">{{
               v.name
             }}</a-radio-button>
-          </a-radio-group>
+          </a-radio-group> -->
         </div>
       </div>
       <div class="person_chang">
         <div class="person_window">选择窗口：</div>
         <div class="person_window1">
+          <div class="dept-select flex aic">
+            <div
+              class="item dept-select-item1"
+              :class="{ active: windowSearch === '' }"
+              @click="handleAllWindow"
+            >
+              全部
+            </div>
+            <div
+              v-show="windowSearch !== ''"
+              class="item dept-select-item2 active"
+            >
+              {{ curWindow }}
+            </div>
+            <a-popover arrowPointAtCenter placement="rightTop" title="窗口列表">
+              <template slot="content">
+                <div class="dept-list" v-if="windowData.length">
                   <a-radio-group
+                    v-model="windowSearch"
+                    @change="handleWindowSearch"
+                  >
+                    <a-radio
+                      :data-name="v.name"
+                      v-for="v in windowData"
+                      :key="v.id"
+                      :value="v.id"
+                    >
+                      {{ v.name }}
+                    </a-radio>
+                  </a-radio-group>
+                </div>
+                <a-empty style="margin-top: 20px" :image="simpleImage" v-else />
+              </template>
+
+              <div class="item dept-select-item3">
+                <a-icon type="double-right" />
+              </div>
+            </a-popover>
+          </div>
+          <!-- <a-radio-group
             button-style="solid"
             v-model="windowSearch"
             @change="handleWindowSearch"
@@ -30,7 +105,7 @@
             <a-radio-button v-for="v in windowData" :key="v.id" :value="v.id">{{
               v.name
             }}</a-radio-button>
-          </a-radio-group>
+          </a-radio-group> -->
         </div>
       </div>
       <div class="on btn">
@@ -48,7 +123,7 @@
                 <a style="color: #1890ff" @click="changePwd"> 修改密码</a>
               </a-menu-item> -->
             </a-menu>
-            <a-button type="primary" style="margin-left: 8px">
+            <a-button style="margin-left: 8px">
               更多操作 <a-icon type="down" />
             </a-button>
           </a-dropdown>
@@ -159,6 +234,7 @@ import addpersonnel from "./components/addpersonnel.vue";
 import EditPwd from "./components/EditPwd";
 import EditPersonel from "./components/EditPersonel.vue";
 import local from "@/utils/local";
+import { Empty } from "ant-design-vue";
 // import axios from "axios";
 import {
   getDeptList,
@@ -246,6 +322,7 @@ export default {
   data() {
     return {
       columns,
+      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
       loading: false,
       visibleEditPwd: false,
       editVisible: false,
@@ -265,6 +342,8 @@ export default {
       pageSizeOptions: ["10", "30", "50", "100"],
       designationDict: {}, // 称号字典
       politicalDict: {}, // 政治面貌字典
+      curDept: "", // 当前选中部门
+      curWindow: "", // 当前选中窗口
     };
   },
   created() {
@@ -315,14 +394,30 @@ export default {
       this.politicalDict = dict.politicalstatus;
       this.loading = false;
     },
-    // 部门搜索
-    handleDeptSearch() {
+    // 选择全部部门
+    handleAllDept() {
+      this.deptSearch = "";
+      this.windowSearch = "";
+      this.getWindowData();
+      this.getWorkmanData();
+    },
+    // 选择部门
+    changeDept(e) {
+      let name = e.nativeEvent.target.labels[0].dataset.name;
+      this.curDept = name;
+      this.windowSearch = "";
       this.getWindowData();
       this.getWorkmanData();
+    },
+    // 选择全部窗口
+    handleAllWindow() {
       this.windowSearch = "";
+      this.getWorkmanData();
     },
     // 窗口搜索
-    handleWindowSearch() {
+    handleWindowSearch(e) {
+      let name = e.nativeEvent.target.labels[0].dataset.name;
+      this.curWindow = name;
       this.getWorkmanData();
     },
     // 删除
@@ -602,4 +697,45 @@ export default {
 /deep/.ant-upload-list {
   width: 250px;
 }
+.dept-select {
+  .item {
+    padding: 4px 10px;
+    cursor: pointer;
+    &:hover {
+      color: #1890ff;
+    }
+  }
+  .dept-select-item1 {
+    border: 1px solid #ccc;
+    border-radius: 4px 0px 0px 4px;
+    border-right: none;
+  }
+  .dept-select-item2 {
+    border: 1px solid #ccc;
+    border-right: none;
+  }
+  .dept-select-item3 {
+    border: 1px solid #ccc;
+    border-radius: 0px 4px 4px 0px;
+  }
+  .active {
+    background-color: #1890ff;
+    border-color: #1890ff;
+    color: #fff;
+    &:hover {
+      color: #fff;
+    }
+  }
+}
+.dept-list {
+  width: 500px;
+  min-height: 50px;
+  max-height: 400px;
+  overflow-y: auto;
+  .ant-radio-group {
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-gap: 10px;
+  }
+}
 </style>
\ No newline at end of file