From 91b655e12aa2c776b75151f4ac3d61e1d71cf3c9 Mon Sep 17 00:00:00 2001
From: "JinLu.Yin" <411641505@qq.com>
Date: Mon, 6 Jun 2022 21:08:09 +0800
Subject: [PATCH] =?UTF-8?q?=E7=8F=AD=E7=BB=84=E6=88=90=E5=91=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mes/cal/teammember.js        |   9 -
 src/components/userSelect/multi.vue  | 242 +++++++++++++++++++++++++++
 src/components/userSelect/single.vue |   0
 src/views/mes/cal/team/index.vue     |  26 ++-
 src/views/mes/cal/team/member.vue    | 117 ++++---------
 5 files changed, 295 insertions(+), 99 deletions(-)
 create mode 100644 src/components/userSelect/multi.vue
 create mode 100644 src/components/userSelect/single.vue

diff --git a/src/api/mes/cal/teammember.js b/src/api/mes/cal/teammember.js
index 7070f6f..81631dd 100644
--- a/src/api/mes/cal/teammember.js
+++ b/src/api/mes/cal/teammember.js
@@ -26,15 +26,6 @@ export function addTeammember(data) {
   })
 }
 
-// 修改班组成员
-export function updateTeammember(data) {
-  return request({
-    url: '/mes/cal/teammember',
-    method: 'put',
-    data: data
-  })
-}
-
 // 删除班组成员
 export function delTeammember(memberId) {
   return request({
diff --git a/src/components/userSelect/multi.vue b/src/components/userSelect/multi.vue
new file mode 100644
index 0000000..993200b
--- /dev/null
+++ b/src/components/userSelect/multi.vue
@@ -0,0 +1,242 @@
+<template>
+  <el-dialog title="人员选择"
+    v-if="showFlag"
+    :visible.sync="showFlag"
+    :modal= false
+    width="80%"
+    center
+  >
+    <el-row :gutter="20">
+      <!--部门数据-->
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input
+            v-model="deptName"
+            placeholder="请输入部门名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container">
+          <el-tree
+            :data="deptOptions"
+            :props="defaultProps"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            ref="tree"
+            default-expand-all
+            @node-click="handleNodeClick"
+          />
+        </div>
+      </el-col>
+      <!--用户数据-->
+      <el-col :span="20" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+          <el-form-item label="用户名称" prop="userName">
+            <el-input
+              v-model="queryParams.userName"
+              placeholder="请输入用户名称"
+              clearable
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="手机号码" prop="phonenumber">
+            <el-input
+              v-model="queryParams.phonenumber"
+              placeholder="请输入手机号码"
+              clearable
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="50" align="center" />
+          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
+          <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
+          <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
+            <template slot-scope="scope">
+              <el-switch
+                v-model="scope.row.status"
+                active-value="0"
+                inactive-value="1"
+                @change="handleStatusChange(scope.row)"
+              ></el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>         
+        </el-table>
+
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </el-col>
+    </el-row>
+    <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="confirmSelect">确 定</el-button>
+        <el-button @click="showFlag=false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus } from "@/api/system/user";
+import { getToken } from "@/utils/auth";
+import { treeselect } from "@/api/system/dept";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  name: "UserMultiSelect",
+  dicts: ['sys_normal_disable', 'sys_user_sex'],
+  components: { Treeselect },
+  data() {
+    return {
+      showFlag:false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      selectedRows: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      userList: null,
+      // 弹出层标题
+      title: "",
+      // 部门树选项
+      deptOptions: undefined,
+      // 是否显示弹出层
+      open: false,
+      // 部门名称
+      deptName: undefined,
+
+      // 日期范围
+      dateRange: [],
+      // 岗位选项
+      postOptions: [],
+      // 角色选项
+      roleOptions: [],
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        userName: undefined,
+        phonenumber: undefined,
+        status: undefined,
+        deptId: undefined
+      },
+      // 列信息
+      columns: [
+        { key: 0, label: `用户编号`, visible: true },
+        { key: 1, label: `用户名称`, visible: true },
+        { key: 2, label: `用户昵称`, visible: true },
+        { key: 3, label: `部门`, visible: true },
+        { key: 4, label: `手机号码`, visible: true },
+        { key: 5, label: `状态`, visible: true },
+        { key: 6, label: `创建时间`, visible: true }
+      ],
+    };
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  created() {
+    this.getList();
+    this.getTreeselect();
+  },
+  methods: {
+    /** 查询用户列表 */
+    getList() {
+      this.loading = true;
+      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.userList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    /** 查询部门下拉树结构 */
+    getTreeselect() {
+      treeselect().then(response => {
+        debugger;
+        this.deptOptions = response.data;
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id;
+      this.handleQuery();
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.userId);
+      this.selectedRows = selection;
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    //确定选中
+    confirmSelect(){
+        if(this.selectedRows == null || this.selectedRows.size == 0){
+            this.$notify({
+                title:'提示',
+                type:'warning',
+                message: '请至少选择一条数据!'
+            });
+            return;
+        }
+        this.$emit('onSelected',this.selectedRows);
+        this.showFlag = false;
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/components/userSelect/single.vue b/src/components/userSelect/single.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/mes/cal/team/index.vue b/src/views/mes/cal/team/index.vue
index 46d00ba..1a468eb 100644
--- a/src/views/mes/cal/team/index.vue
+++ b/src/views/mes/cal/team/index.vue
@@ -71,7 +71,15 @@
 
     <el-table v-loading="loading" :data="teamList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="班组编号" align="center" prop="teamCode" />
+      <el-table-column label="班组编号" align="center" prop="teamCode" >
+          <template slot-scope="scope">
+                <el-button              
+                  type="text"
+                  @click="handleView(scope.row)"
+                  v-hasPermi="['mes:cal:team:query']"
+                >{{scope.row.teamCode}}</el-button>
+          </template>
+      </el-table-column>
       <el-table-column label="班组名称" align="center" prop="teamName" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -135,6 +143,7 @@
         </el-row>
       </el-form>
       <el-divider v-if="form.teamId !=null" content-position="center">项目组成员</el-divider>
+      <Teammember v-if="form.teamId !=null" :optType="optType" :teamId="form.teamId"></Teammember>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="cancel" v-if="optType =='view'">返回</el-button>
         <el-button type="primary" @click="submitForm" v-else>确 定</el-button>
@@ -146,9 +155,11 @@
 
 <script>
 import { listTeam, getTeam, delTeam, addTeam, updateTeam } from "@/api/mes/cal/team";
+import Teammember from "./member";
 import {genCode} from "@/api/system/autocode/rule"
 export default {
   name: "Team",
+  components: {Teammember},
   data() {
     return {
       //自动生成编码
@@ -249,6 +260,18 @@ export default {
       this.reset();
       this.open = true;
       this.title = "添加班组";
+      this.optType = "add";
+    },
+        // 查询明细按钮操作
+    handleView(row){
+      this.reset();
+      const teamId = row.teamId || this.ids
+      getTeam(teamId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "查看班组";
+        this.optType = "view";
+      });
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -258,6 +281,7 @@ export default {
         this.form = response.data;
         this.open = true;
         this.title = "修改班组";
+        this.optType = "edit";
       });
     },
     /** 提交按钮 */
diff --git a/src/views/mes/cal/team/member.vue b/src/views/mes/cal/team/member.vue
index a038615..bffd73a 100644
--- a/src/views/mes/cal/team/member.vue
+++ b/src/views/mes/cal/team/member.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="10" class="mb8">
+    <el-row v-if="optType !='view'" :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
           type="primary"
@@ -10,17 +10,7 @@
           @click="handleAdd"
           v-hasPermi="['mes:cal:team:add']"
         >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['mes:cal:team:edit']"
-        >修改</el-button>
+        <UserMultiSelect ref="userSelect" @onSelected="userSelected"></UserMultiSelect>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -51,15 +41,8 @@
       <el-table-column label="用户名" align="center" prop="userName" />
       <el-table-column label="用户昵称" align="center" prop="nickName" />
       <el-table-column label="电话" align="center" prop="tel" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" v-if="optType !='view'" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['cal:teammember:edit']"
-          >修改</el-button>
           <el-button
             size="mini"
             type="text"
@@ -78,36 +61,19 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
-
-    <!-- 添加或修改班组成员对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="用户名" prop="userName">
-          <el-input v-model="form.userName" placeholder="请输入用户名" />
-        </el-form-item>
-        <el-form-item label="用户昵称" prop="nickName">
-          <el-input v-model="form.nickName" placeholder="请输入用户昵称" />
-        </el-form-item>
-        <el-form-item label="电话" prop="tel">
-          <el-input v-model="form.tel" placeholder="请输入电话" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listTeammember, getTeammember, delTeammember, addTeammember, updateTeammember } from "@/api/mes/cal/teammember";
-
+import { listTeammember, getTeammember, delTeammember, addTeammember } from "@/api/mes/cal/teammember";
+import UserMultiSelect from "@/components/userSelect/multi.vue"
 export default {
   name: "Teammember",
+  components: {UserMultiSelect},
+  props:{
+    teamId:null,
+    optType:null
+  },
   data() {
     return {
       // 遮罩层
@@ -132,7 +98,7 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        teamId: null,
+        teamId: this.teamId,
         userId: null,
         userName: null,
         nickName: null,
@@ -140,18 +106,6 @@ export default {
       },
       // 表单参数
       form: {},
-      // 表单校验
-      rules: {
-        teamId: [
-          { required: true, message: "班组ID不能为空", trigger: "blur" }
-        ],
-        userId: [
-          { required: true, message: "用户ID不能为空", trigger: "blur" }
-        ],
-        userName: [
-          { required: true, message: "用户名不能为空", trigger: "blur" }
-        ],
-      }
     };
   },
   created() {
@@ -211,44 +165,29 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
+      this.$refs.userSelect.showFlag = true;
       this.open = true;
       this.title = "添加班组成员";
     },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const memberId = row.memberId || this.ids
-      getTeammember(memberId).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改班组成员";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.memberId != null) {
-            updateTeammember(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addTeammember(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
+    userSelected(rows){
+      if(rows !=null){
+        rows.forEach(user => {
+          this.form.teamId = this.teamId;
+          this.form.userId = user.userId;
+          this.form.userName = user.userName;
+          this.form.nickName = user.nickName;
+          this.form.tel = user.phonenumber;  
+          addTeammember(this.form).then(response => {              
+            this.getList();  
+          });
+        });
+      }
     },
+
     /** 删除按钮操作 */
     handleDelete(row) {
       const memberIds = row.memberId || this.ids;
-      this.$modal.confirm('是否确认删除班组成员编号为"' + memberIds + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除班组成员？').then(function() {
         return delTeammember(memberIds);
       }).then(() => {
         this.getList();
@@ -257,7 +196,7 @@ export default {
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('cal/teammember/export', {
+      this.download('mes/cal/teammember/export', {
         ...this.queryParams
       }, `teammember_${new Date().getTime()}.xlsx`)
     }