From 1e82b2b7cdf216b0f3d51a5eecbc32590047ae25 Mon Sep 17 00:00:00 2001
From: MO <448233645@qq.com>
Date: Wed, 1 Nov 2023 14:07:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BA=BA=E5=91=98=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UserSelect/single.vue   | 180 +++++++++++++++++++++++++
 src/views/accounting/voucher/index.vue | 125 ++++++++++-------
 2 files changed, 256 insertions(+), 49 deletions(-)
 create mode 100644 src/components/UserSelect/single.vue

diff --git a/src/components/UserSelect/single.vue b/src/components/UserSelect/single.vue
new file mode 100644
index 00000000..ea3f1781
--- /dev/null
+++ b/src/components/UserSelect/single.vue
@@ -0,0 +1,180 @@
+<template>
+  <el-dialog
+    title="人员选择"
+    v-if="showFlag"
+    :visible.sync="showFlag"
+    :modal="false"
+    width="80%"
+    center
+  >
+    <el-table
+      v-loading="loading"
+      :data="userList"
+      @current-change="handleCurrent"
+      @row-dblclick="handleRowDbClick"
+    >
+      <el-table-column width="50" align="center">
+        <template v-slot="scope">
+          <el-radio
+            v-model="selectedUserId"
+            :label="scope.row.id"
+            @change="handleRowChange(scope.row)"
+            >{{ "" }}</el-radio
+          >
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="用户编号"
+        align="center"
+        key="id"
+        prop="id"
+        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.name"
+        v-if="columns[3].visible"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="手机号码"
+        align="center"
+        key="mobile"
+        prop="mobile"
+        v-if="columns[4].visible"
+        width="120"
+      />
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+    <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 } from "@/api/system/user";
+export default {
+  name: "UserSelect",
+  data() {
+    return {
+      showFlag: false,
+      selectedUserId: undefined,
+      selectedRow: undefined,
+      // 遮罩层
+      loading: true,
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      userList: null,
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+      },
+      // 列信息
+      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 },
+      ],
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询用户列表 */
+    getList() {
+      this.loading = true;
+      listUser(this.queryParams).then((response) => {
+        this.userList = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    handleCurrent(row) {
+      if (row) {
+        this.selectedRow = row;
+      }
+    },
+    //行双击选中
+    handleRowDbClick(row) {
+      if (row) {
+        this.selectedRow = row;
+        this.$emit("onSelected", this.selectedRow);
+        this.showFlag = false;
+      }
+    },
+    // 单选选中数据
+    handleRowChange(row) {
+      if (row) {
+        this.selectedRow = row;
+      }
+    },
+    //确定选中
+    confirmSelect() {
+      if (this.selectedUserId == null || this.selectedUserId == 0) {
+        this.$notify({
+          title: "提示",
+          type: "warning",
+          message: "请至少选择一条数据!",
+        });
+        return;
+      }
+      this.$emit("onSelected", this.selectedRow);
+      this.showFlag = false;
+    },
+  },
+};
+</script>
diff --git a/src/views/accounting/voucher/index.vue b/src/views/accounting/voucher/index.vue
index 2be5793a..3da72b5d 100644
--- a/src/views/accounting/voucher/index.vue
+++ b/src/views/accounting/voucher/index.vue
@@ -207,60 +207,66 @@
         <el-row>
           <el-col :span="8">
             <el-form-item label="审核人" prop="audit">
-              <el-select
+              <el-input
                 v-model="form.audit"
-                filterable
                 placeholder="请选择审核人"
-                value-key="id"
-                @change="handleSelectUser"
+                readonly
               >
-                <el-option
-                  v-for="item in userOptions"
-                  :key="item.id"
-                  :value="item"
-                  :label="item.username"
-                >
-                </el-option>
-              </el-select>
+                <el-button
+                  slot="append"
+                  @click="handleSelectUser1"
+                  icon="el-icon-search"
+                  style="
+                    border-color: #46a6ff;
+                    background-color: #46a6ff;
+                    color: white;
+                  "
+                ></el-button>
+              </el-input>
+              <UserSelect ref="UserSelect1" @onSelected="onUserSelected1" />
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="核准人" prop="checker">
-              <el-select
+              <el-input
                 v-model="form.checker"
-                filterable
-                placeholder="请选择核准人"
-                value-key="id"
-                @change="handleSelectUser1"
+                placeholder="请选择审核人"
+                readonly
               >
-                <el-option
-                  v-for="item in userOptions"
-                  :key="item.id"
-                  :value="item"
-                  :label="item.username"
-                >
-                </el-option>
-              </el-select>
+                <el-button
+                  slot="append"
+                  @click="handleSelectUser2"
+                  icon="el-icon-search"
+                  style="
+                    border-color: #46a6ff;
+                    background-color: #46a6ff;
+                    color: white;
+                  "
+                ></el-button>
+              </el-input>
+              <UserSelect ref="UserSelect2" @onSelected="onUserSelected2" />
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="经办人" prop="handle">
-              <el-select
+              <el-input
                 v-model="form.handle"
-                filterable
-                placeholder="请选择经办人"
-                value-key="id"
-                @change="handleSelectUser2"
+                placeholder="请选择审核人"
+                readonly
               >
-                <el-option
-                  v-for="item in userOptions"
-                  :key="item.id"
-                  :value="item"
-                  :label="item.username"
-                >
-                </el-option>
-              </el-select>
-            </el-form-item>
+                <el-button
+                  slot="append"
+                  @click="handleSelectUser3"
+                  icon="el-icon-search"
+                  style="
+                    border-color: #46a6ff;
+                    background-color: #46a6ff;
+                    color: white;
+                  "
+                ></el-button>
+              </el-input>
+              <UserSelect ref="UserSelect3" @onSelected="onUserSelected3"
+            /></el-form-item>
           </el-col>
         </el-row>
         <el-row>
@@ -477,10 +483,11 @@ import { getAttachmentPage } from "@/api/accounting/attachment";
 import { getFlowPage } from "@/api/accounting/flow";
 import { getInvoicesPage } from "@/api/accounting/invoices";
 import { getBankSlipPage } from "@/api/accounting/bankSlip";
+import UserSelect from "@/components/UserSelect/single.vue";
 
 export default {
   name: "Voucher",
-  components: {},
+  components: { UserSelect },
   data() {
     return {
       propName: {
@@ -776,15 +783,6 @@ export default {
         this.userOptions = response.data.list;
       });
     },
-    handleSelectUser(val) {
-      this.form.audit = val.username;
-    },
-    handleSelectUser1(val) {
-      this.form.checker = val.username;
-    },
-    handleSelectUser2(val) {
-      this.form.handle = val.username;
-    },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
@@ -864,6 +862,35 @@ export default {
         })
         .catch(() => {});
     },
+    // 人员选择弹窗
+    handleSelectUser1() {
+      this.$refs.UserSelect1.showFlag = true;
+    },
+    handleSelectUser2() {
+      this.$refs.UserSelect2.showFlag = true;
+    },
+    handleSelectUser3() {
+      this.$refs.UserSelect3.showFlag = true;
+    },
+    // 审核人选择
+    onUserSelected1(obj) {
+      console.log(obj);
+      if (obj != undefined && obj != null) {
+        this.form.audit = obj.username;
+      }
+    },
+    // 核准人选择
+    onUserSelected2(obj) {
+      if (obj != undefined && obj != null) {
+        this.form.checker = obj.username;
+      }
+    },
+    // 经办人选择
+    onUserSelected3(obj) {
+      if (obj != undefined && obj != null) {
+        this.form.handle = obj.username;
+      }
+    },
   },
 };
 </script>