协管副科长

src/components/UserPicker/index.vue

@@ -1,25 +1,29 @@
 <template>
-  <el-select :size="size"
-             clearable
-             :popper-append-to-body="popperAppendToBody"
-             :style="{ width: width }"
-             value-key="id"
-             filterable
-             :multiple="multiple"
-             :loading="loading"
-             v-model="myValue"
-             @change="e => $emit('input',e)">
-    <el-option v-for="(item, index) in list"
-               :key="item.id"
-               :label="item.name"
-               :value="item.id">
-    </el-option>
+  <el-select
+    v-model="myValue"
+    :size="size"
+    clearable
+    :popper-append-to-body="popperAppendToBody"
+    :style="{ width: width }"
+    value-key="id"
+    collapse-tags
+    filterable
+    :multiple="multiple"
+    :loading="loading"
+    @change="e => $emit('input',e)"
+  >
+    <el-option
+      v-for="(item) in list"
+      :key="item.id"
+      :label="item.name"
+      :value="item.id"
+    />
   </el-select>
 </template>
 
 <script>
-let listData = [];
-import { index } from "@/api/user"
+let listData = []
+import { index } from '@/api/user'
 export default {
   props: {
     popperAppendToBody: {
@@ -30,8 +34,8 @@ export default {
     multiple: Boolean,
     size: String,
     value: {
-      type: [String,Number],
-      default: "",
+      type: [String, Number],
+      default: '',
       required: true
     }
   },
@@ -39,7 +43,7 @@ export default {
     return {
       total: 0,
       loading: false,
-      myValue: "",
+      myValue: '',
       list: [],
       // select: {
       //   rows: 20,
@@ -48,13 +52,29 @@ export default {
       // },
       select: {
         rows: 9999,
-        page: 1,
+        page: 1
       }
     }
   },
+  computed: {},
+  watch: {
+    value: {
+      handler: function(newVal) {
+        this.myValue = newVal
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.getList()
+    // this.initLoadMore();
+  },
+  beforeDestroy() {
+    // this.$el?.querySelector(".el-scrollbar__wrap")?.removeEventListener("scroll",this.loadListener)
+  },
   methods: {
-    remoteMethod (query) {
-      if (query !== "") {
+    remoteMethod(query) {
+      if (query !== '') {
         this.select.keyword = query
         this.select.page = 1
         this.list = []
@@ -65,20 +85,20 @@ export default {
         this.getList()
       }
     },
-    async getList () {
+    async getList() {
       if (listData instanceof Array && listData.length > 0) {
-        this.list = listData;
+        this.list = listData
       } else {
-        this.loading = true;
+        this.loading = true
         try {
-          const res = await index(this.select);
-          listData = res.data;
-          this.list = res.data;
-          this.total = res.total;
+          const res = await index(this.select)
+          listData = res.data
+          this.list = res.data
+          this.total = res.total
 
-          this.loading = false;
+          this.loading = false
         } catch (err) {
-          this.loading = false;
+          this.loading = false
         }
       }
     },
@@ -100,32 +120,16 @@ export default {
 
     initLoadMore() {
       this.$nextTick(() => {
-        this.$el.querySelector(".el-scrollbar__wrap").addEventListener("scroll",this.loadListener)
+        this.$el.querySelector('.el-scrollbar__wrap').addEventListener('scroll', this.loadListener)
       })
     },
     loadListener(e) {
-      let sign = 0
+      const sign = 0
       const scrollDistance = e.scrollHeight - e.scrollTop - e.clientHeight
       if (scrollDistance <= sign) {
         this.getList()
       }
     }
-  },
-  computed: {},
-  watch: {
-    value: {
-      handler: function(newVal) {
-        this.myValue = newVal
-      },
-      immediate: true
-    }
-  },
-  mounted() {
-    this.getList();
-    //this.initLoadMore();
-  },
-  beforeDestroy() {
-    //this.$el?.querySelector(".el-scrollbar__wrap")?.removeEventListener("scroll",this.loadListener)
   }
 }
 </script>

src/views/system/components/AddDepartment.vue

@@ -33,6 +33,12 @@
         <el-form-item label="分管领导" prop="leader_id">
           <user-picker v-model="form.leader_id" width="100%" />
         </el-form-item>
+        <el-form-item label="协管" prop="assistant_id">
+          <user-picker v-model="form.assistant_id" width="100%" />
+        </el-form-item>
+        <el-form-item label="副科长" prop="deputy_manager_id">
+          <user-picker v-model="form.deputy_manager_id" multiple width="100%" />
+        </el-form-item>
         <el-form-item label="排序" prop="sortnumber">
           <el-input-number v-model="form.sortnumber" controls-position="right" :precision="0" />
         </el-form-item>
@@ -71,6 +77,8 @@ export default {
         pid: 0,
         manager_id: '',
         leader_id: '',
+        assistant_id: '',
+        deputy_manager_id: '',
         sortnumber: 0
       },
       rules: {

src/views/system/department.vue

@@ -24,12 +24,25 @@
         <vxe-column field="name" width="160" title="部门名称" :edit-render="{ name: 'input', attrs: { type: 'text'} }" />
         <vxe-column field="manager.name" width="180" title="科室负责人" :edit-render="{}">
           <template #edit="{ row }">
-            <UserPicker v-model="row.manager_id" size="small" />
+            <user-picker v-model="row.manager_id" size="small" />
           </template>
         </vxe-column>
         <vxe-column field="leader.name" width="180" title="分管领导" :edit-render="{}">
           <template #edit="{ row }">
-            <UserPicker v-model="row.leader_id" size="small" />
+            <user-picker v-model="row.leader_id" size="small" />
+          </template>
+        </vxe-column>
+        <vxe-column field="assistant.name" width="180" title="协管" :edit-render="{}">
+          <template #edit="{ row }">
+            <user-picker v-model="row.assistant_id" size="small" />
+          </template>
+        </vxe-column>
+        <vxe-column field="deputy_manager" width="180" title="副科长" :edit-render="{}">
+          <template #default="{ row }">
+            <span v-if="row.deputy_manager && row.deputy_manager instanceof Array">{{ row.deputy_manager.map(i => i.name).toString() }}</span>
+          </template>
+          <template #edit="{ row }">
+            <user-picker v-model="row.deputy_manager_id" multiple size="small" />
           </template>
         </vxe-column>
         <vxe-column field="sortnumber" width="80" title="排序" align="center" :edit-render="{ name: 'input', attrs: { type: 'number' } }" />
@@ -82,6 +95,8 @@ export default {
         name: '',
         manager_id: '',
         leader_id: '',
+        deputy_manager_id: '',
+        assistant_id: '',
         sortnumber: 0
       }
     }