人员管理 部门修改添加 机构类型和负责人

src/enum/dict.js

@@ -37,7 +37,8 @@ export default {
   三级编码规则: 'Third',
   工艺参数单位: 'parameter_code',
   成型剂类别: 'forming_code',
-  工位编码: 'Station coding'
+  工位编码: 'Station coding',
+  机构类型: 'group_type'
 
 
 };

src/views/system/organization/components/org-edit.vue

@@ -29,6 +29,29 @@
             />
           </el-form-item>
         </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="机构类型"
+            prop="type"
+            style="margin-bottom: 22px"
+          >
+            <DictSelection dictName="机构类型" clearable v-model="form.type" labelName='dictValue'>
+            </DictSelection>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="负责人"
+            prop="manager"
+            style="margin-bottom: 22px"
+          >
+            <el-input
+              @click.native="openStaffSelection"
+              v-model="responsibleName"
+              placeholder="请选择"
+            ></el-input>
+          </el-form-item>
+        </el-col>
       </el-row>
     </el-form>
     <template v-slot:footer>
@@ -37,19 +60,25 @@
         保存
       </el-button>
     </template>
+    <staffSelection
+      ref="staffSelection"
+      @confirm="confirmStaffSelection"
+    ></staffSelection>
   </ele-modal>
 </template>
 
 <script>
   import OrgSelect from './org-select.vue';
   import OrgTypeSelect from './org-type-select.vue';
+  import staffSelection from './staffSelection.vue';
+
   import {
     addOrganization,
     updateOrganization
   } from '@/api/system/organization';
 
   export default {
-    components: { OrgSelect, OrgTypeSelect },
+    components: { OrgSelect, OrgTypeSelect, staffSelection },
     props: {
       // 弹窗是否打开
       visible: Boolean,
@@ -65,15 +94,19 @@
         id: null,
         parentId: null,
         name: '',
-        type: 1
+        type: '',
+        manager: []
       };
       return {
         defaultForm,
+        responsibleName: '',
         // 表单数据
         form: { ...defaultForm },
         // 表单验证规则
         rules: {
-          name: [{ required: true, message: '请输入机构名称', trigger: 'blur' }]
+          name: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
+          manager: [{ required: true, message: '请选择负责人', trigger: 'blur' }],
+          type: [{ required: true, message: '请选择机构类型', trigger: 'blur' }]
         },
         // 提交状态
         loading: false,
@@ -90,6 +123,7 @@
     methods: {
       /* 保存编辑 */
       save() {
+        console.log(this.form);
         this.$refs.form.validate((valid) => {
           if (!valid) {
             return false;
@@ -118,6 +152,17 @@
             });
         });
       },
+      //选择负责人
+      confirmStaffSelection(data) {
+        this.form.manager=JSON.parse(JSON.stringify(data))
+        this.responsibleName=data.map(item=>item.name).toString()
+      },
+      openStaffSelection() {
+        console.log(this.form.manager)
+        this.$refs.staffSelection.open(
+          JSON.parse(JSON.stringify(this.form.manager))||[]
+        );
+      },
       /* 更新visible */
       updateVisible(value) {
         this.$emit('update:visible', value);
@@ -131,6 +176,8 @@
               ...this.data,
               parentId: this.data.parentId == 0 ? '' : this.data.parentId ?? ''
             });
+            this.form.type=''+this.form.type //回显
+            this.responsibleName=this.data.manager&&this.data.manager.map(item=>item.name).toString()
             this.isUpdate = true;
           } else {
             this.form.parentId = this.parentId;
@@ -139,6 +186,7 @@
         } else {
           this.$refs.form.clearValidate();
           this.form = { ...this.defaultForm };
+          this.responsibleName=''
         }
       }
     }

src/views/system/organization/components/staffSelection.vue

@@ -0,0 +1,333 @@
+<template>
+  <div class="container">
+    <!-- 单据弹窗 -->
+    <el-dialog
+      title="员工"
+      :before-close="handleClose"
+      :visible.sync="dialogVisible"
+      :close-on-click-modal="false"
+      :append-to-body="true"
+      width="80%"
+    >
+      <el-row class="zw-page">
+        <el-col :span="6" class="zw-page-left">
+          <el-card>
+            <div class="zw-card-header" slot="header">
+              <span class="zw-header-title details-title">部门</span>
+            </div>
+            <div class="zw-page-left-tree">
+              <el-container class="zw-container">
+                <el-tree
+                  ref="tree"
+                  :data="treeList"
+                  highlight-current
+                  node-key="id"
+                  :props="{ label: 'name' }"
+                  :expand-on-click-node="false"
+                  :default-expand-all="true"
+                  @node-click="handleNodeClick"
+                >
+                </el-tree>
+              </el-container>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="9" class="zw-page-main">
+          <el-card>
+            <div class="zw-card-header" slot="header">
+              <span class="zw-header-title details-title">员工明细 </span>
+            </div>
+            <div class="zw-page-main-list">
+              <el-container class="zw-container">
+                <el-table
+                  :data="staffList"
+                  tooltip-effect="dark"
+                  style="width: 100%"
+                  max-height="500"
+                  :header-cell-style="{
+                    background: '#F0F3F3',
+                    border: 'none'
+                  }"
+                >
+                  <el-table-column prop="code" label="姓名">
+                    <template slot-scope="{ row }">
+                      <div>{{ row.name }}</div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="工号">
+                    <template slot-scope="{ row }">
+                      <div>{{ row.jobNumber }}</div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column width="80" label="操作">
+                    <template slot-scope="{ row }">
+                      <el-button
+                        size="mini"
+                        type="primary"
+                        @click="choiceAsset(row)"
+                        :disabled="row.disabled"
+                        icon="el-icon-arrow-right"
+                        circle
+                      >
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <div
+                  v-if="staffList.length !== 0 && isMore"
+                  class="zw-page-list-more"
+                >
+                  <el-link @click="getMore()" type="primary"
+                    >更多<i class="el-icon-caret-bottom"></i>
+                  </el-link>
+                </div>
+              </el-container>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="9" class="zw-page-right">
+          <el-card>
+            <div class="zw-card-header" slot="header">
+              <span class="zw-header-title">已选员工</span>
+            </div>
+            <div class="zw-page-right-list">
+              <el-container class="zw-container">
+                <el-table
+                  :data="selectStafflist"
+                  tooltip-effect="dark"
+                  style="width: 100%"
+                  max-height="500"
+                  :header-cell-style="{
+                    background: '#F0F3F3',
+                    border: 'none'
+                  }"
+                >
+                  <el-table-column prop="code" label="姓名">
+                    <template slot-scope="{ row }">
+                      <div>{{ row.name }}</div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="工号">
+                    <template slot-scope="{ row }">
+                      <div>{{ row.jobNumber }}</div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column width="80" label="操作">
+                    <template slot-scope="scope">
+                      <el-button
+                        @click="deleteSelectStaff(scope.row, scope.$index)"
+                        size="mini"
+                        type="danger"
+                        >删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-container>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="handleClose">关 闭</el-button>
+        <el-button size="small" @click="sumbit" type="primary">确 认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import { listOrganizations, getUserPage } from '@/api/system/organization';
+  export default {
+    data() {
+      return {
+        form: {
+          groupId: null
+        },
+        treeList: [],
+        staffList: [],
+        selectStafflist: [], //已选员工
+        defaultProps: {
+          children: 'children',
+          label: 'name',
+          value: 'code'
+        },
+        pageNum: 1, //设备当前页数
+        size: 10,
+        isMore: false,
+        dialogVisible: false
+      };
+    },
+    created() {},
+    methods: {
+      open(selectedList) {
+
+        this.dialogVisible = true;
+        this.selectStafflist = selectedList;
+        this.getInfo();
+      },
+      //初始数据
+      async getInfo() {
+        let list = await listOrganizations();
+        this.treeList = this.$util.toTreeData({
+          data: list,
+          idField: 'id',
+          parentIdField: 'parentId'
+        });
+        //this.treeList = res.data;
+      },
+      //选择分类
+      handleNodeClick(data) {
+        this.staffList = [];
+
+        this.form.groupId = data.id;
+        let params = {
+          pageNum: 1,
+          size: this.size,
+          groupId: this.form.groupId
+        };
+        this.getStaffList(params);
+      },
+      //获取员工列表
+      async getStaffList(params) {
+        let res = await getUserPage(params);
+        let list = res.list;
+        if (list.length < res.count) {
+          this.isMore = true;
+        } else {
+          this.isMore = false;
+        }
+        list.forEach((el) => {
+          let _index = this.selectStafflist.findIndex((n) => n.id == el.id);
+          if (_index !== -1) {
+            el.disabled = true;
+          } else {
+            el.disabled = false;
+          }
+        });
+        this.staffList = [...this.staffList, ...list];
+        // this.pageNum = res.pageNum;
+      },
+      //查询更多员工
+      async getMore() {
+        this.pageNum = this.pageNum + 1;
+        let params = {
+          pageNum: this.pageNum,
+          size: this.size,
+          groupId: this.form.groupId
+        };
+        this.getStaffList(params);
+      },
+      //选择员工
+      choiceAsset(info) {
+        let data = JSON.parse(JSON.stringify(info));
+        this.selectStafflist.push(data);
+        info.disabled = true;
+      },
+      //删除已选员工
+      deleteSelectStaff(info, index) {
+        this.staffList.forEach((el) => {
+          if (el.id == info.id) {
+            el.disabled = false;
+          }
+        });
+        this.selectStafflist.splice(index, 1);
+      },
+      //保存
+      sumbit() {
+        if (this.selectStafflist.length === 0) {
+          this.$message.warning('请选择员工');
+        } else {
+          this.$emit(
+            'confirm',
+            JSON.parse(JSON.stringify(this.selectStafflist))
+          );
+          this.handleClose();
+        }
+      },
+      handleClose() {
+        this.staffList = [];
+        this.selectStafflist = [];
+        this.dialogVisible = false;
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    padding: 10px 0;
+  }
+  .zw-container {
+    height: 500px;
+    overflow-y: auto;
+  }
+  .zw-header-title {
+    display: inline-block;
+    margin-right: 10px;
+    font-weight: 600;
+  }
+  .details-title {
+    line-height: 32px;
+    height: 32px;
+  }
+  .zw-page-list-p {
+    font-size: 14px;
+    margin-bottom: 18px;
+    display: flex;
+    justify-content: space-between;
+    // align-items: center;
+    .zw-page-list-right {
+      display: flex;
+    }
+  }
+  .zw-page {
+    background: #fff;
+    //padding: 20px 0;
+    height: 600px;
+    .zw-page-left {
+      padding: 0 10px;
+    }
+    .zw-page-main {
+      padding: 0 10px;
+      .zw-page-main-list {
+        span {
+          margin-right: 10px;
+        }
+        .zw-page-span-num {
+          font-size: 12px;
+          color: #157a2c;
+        }
+        .zw-page-p-operation {
+          text-align: right;
+          // width: 200px;
+        }
+        .zw-page-operation-num {
+          width: 100px;
+          margin: 0 10px;
+        }
+      }
+      .zw-page-list-more {
+        text-align: center;
+      }
+    }
+    .zw-page-right {
+      .zw-card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 32px;
+      }
+      span {
+        margin-right: 10px;
+      }
+      .zw-page-span-num {
+        font-size: 12px;
+        color: #157a2c;
+      }
+    }
+  }
+  .notes {
+    font-size: 12px;
+    color: #909090;
+  }
+</style>