feat: 新增用户选择组件及抄表人选择功能

src/components/user-select/user-select-search.vue

@@ -0,0 +1,94 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    size="small"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="24">
+      <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
+      <el-form-item>
+          <el-input
+            clearable
+            size="small"
+            v-model.trim="where.jobNumber"
+            placeholder="请输入工号"
+          />
+        </el-form-item>
+        </el-col>
+
+      <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
+
+
+        <el-form-item>
+          <el-input
+            clearable
+            size="small"
+            v-model.trim="where.loginName"
+            placeholder="请输入用户账号"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
+        <el-form-item>
+          <el-input
+            clearable
+            size="small"
+            v-model.trim="where.name"
+            placeholder="请输入姓名"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ?  { md: 6 } : { span: 6 }">
+        <el-form-item>
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+          >
+            查询
+          </el-button>
+          <el-button @click="reset">重置</el-button>
+          <slot></slot>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+  export default {
+    data() {
+      // 默认表单数据
+      const defaultWhere = {
+        jobNumber: '',
+        loginName: '',
+        name: ''
+      };
+      return {
+        // 表单数据
+        where: { ...defaultWhere }
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      /* 搜索 */
+      search() {
+        this.$emit('search', this.where);
+      },
+      /*  重置 */
+      reset() {
+        this.where = { ...this.defaultWhere };
+        this.search();
+      }
+    }
+  };
+</script>

src/components/user-select/user-select.vue

@@ -0,0 +1,276 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="visible"
+    :before-close="handleClose"
+    :close-on-click-modal="false"
+    top="5vh"
+    :close-on-press-escape="false"
+    append-to-body
+    width="70%"
+  >
+    <el-card shadow="never">
+      <ele-split-layout
+        width="244px"
+        allow-collapse
+        :right-style="{ overflow: 'hidden' }"
+      >
+        <div class="ele-border-lighter split-layout-right-content">
+          <DepartmentTree
+            @handleNodeClick="handleNodeClick"
+            :isFirstRefreshTable="false"
+            ref="treeList"
+          />
+        </div>
+        <!-- 表格 -->
+        <template v-slot:content>
+          <user-select-search @search="reload"></user-select-search>
+          <ele-pro-table
+            ref="table"
+            :columns="currentColumns"
+            :datasource="datasource"
+            row-key="id"
+            height="calc(100vh - 430px)"
+            class="dict-table"
+            @cell-click="cellClick"
+            @selection-change="handleSelectionChange"
+          >
+            <!-- 表头工具栏 -->
+            <template v-slot:action="{ row }" v-if="!isMultiple">
+              <el-radio class="radio" v-model="radio" :label="row.id"
+                ><i></i
+              ></el-radio>
+            </template>
+          </ele-pro-table>
+        </template>
+      </ele-split-layout>
+    </el-card>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" size="small" @click="selected">选择</el-button>
+      <el-button size="small" @click="handleClose">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { getUserPage } from '@/api/system/organization';
+  import DepartmentTree from '@/components/DepartmentTree/index.vue';
+  import userSelectSearch from './user-select-search.vue';
+  export default {
+    components: {
+      DepartmentTree,
+      userSelectSearch
+    },
+    props: {
+      disabledList: {
+        default: () => {
+          return [];
+        }
+      }
+    },
+    data() {
+      return {
+        currentIndex: 0,
+        title: '选择',
+        visible: false,
+        isMultiple: false,
+        selectedRows: [],
+        current: null,
+        statusOptions: [
+          { value: 1, label: '全职' },
+          { value: 2, label: '兼职' },
+          { value: 3, label: '实习' },
+          { value: 4, label: '正式' },
+          { value: 5, label: '试用' },
+          { value: 6, label: '离职' }
+        ],
+        columns: [
+          {
+            action: 'action',
+            slot: 'action',
+            align: 'center',
+            label: '选择'
+          },
+          {
+            columnKey: 'index',
+            label: '序号',
+            type: 'index',
+            width: 55,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
+          {
+            prop: 'name',
+            label: '姓名',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'jobNumber',
+            label: '工号',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'loginName',
+            label: '用户账号',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'sex',
+            label: '性别',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 80,
+            formatter: (_row, _column, cellValue) => {
+              return cellValue == 1 ? '男' : cellValue == 2 ? '女' : '';
+            }
+          },
+          {
+            prop: 'status',
+            label: '状态',
+            align: 'center',
+            sortable: 'custom',
+            width: 80,
+            formatter: (_row, _column, cellValue) => {
+              const dom = this.statusOptions.find((item) => {
+                return item.value == cellValue;
+              });
+              return dom ? dom.label : '';
+            }
+          }
+        ],
+
+        radio: null
+      };
+    },
+
+    computed: {
+      currentColumns() {
+        if (this.isMultiple) {
+          return [
+            {
+              type: 'selection',
+              width: 55,
+              align: 'center',
+              selectable: (row, index) => {
+                return !this.disabledList
+                  .map((item) => item.id)
+                  .includes(row.id);
+              }
+            },
+            ...this.columns
+          ];
+        }
+        return this.columns;
+      }
+    },
+
+    watch: {},
+    methods: {
+      open(item, index = 0, multiple = false) {
+        this.isMultiple = multiple;
+        this.selectedRows = [];
+        if (item) {
+          this.radio = item.id;
+        }
+        this.currentIndex = index;
+        this.$nextTick(() => {
+          this.$refs.table.clearSelection();
+        });
+
+        this.visible = true;
+      },
+
+      /* 表格数据源 */
+      datasource({ page, limit, where, order }) {
+        return getUserPage({
+          pageNum: page,
+          size: limit,
+          ...where
+        });
+      },
+
+      /* 刷新表格 */
+      reload(where) {
+        this.$refs.table.reload({ pageNum: 1, where: where });
+      },
+
+      handleNodeClick(data, node) {
+        this.curNodeData = data;
+        this.reload({ groupId: data.id });
+      },
+
+      // 单击获取id
+      cellClick(row) {
+        if (this.isMultiple) return;
+        this.current = row;
+        this.radio = row.id;
+      },
+
+      handleSelectionChange(rows) {
+        this.selectedRows = rows;
+      },
+
+      handleClose() {
+        this.visible = false;
+        this.current = null;
+        this.radio = '';
+        this.selectedRows = [];
+      },
+
+      selected() {
+        if (this.isMultiple) {
+          if (!this.selectedRows.length) {
+            return this.$message.warning('请至少选择一项');
+          }
+          this.$emit('changeParent', this.selectedRows, this.currentIndex);
+        } else {
+          if (!this.current) {
+            return this.$message.warning('请至少选择一项');
+          }
+          this.$emit('changeParent', this.current, this.currentIndex);
+        }
+        this.handleClose();
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .tree_col {
+    border: 1px solid #eee;
+    padding: 10px 0;
+    box-sizing: border-box;
+    height: 500px;
+    overflow: auto;
+  }
+
+  .table_col {
+    padding-left: 10px;
+
+    ::v-deep .el-table th.el-table__cell {
+      background: #f2f2f2;
+    }
+  }
+
+  .pagination {
+    text-align: right;
+    padding: 10px 0;
+  }
+
+  .btns {
+    text-align: center;
+    padding: 10px 0;
+  }
+
+  .topsearch {
+    margin-bottom: 15px;
+  }
+</style>

src/views/centralizedMeterReading/meterReadingDialog.vue

@@ -56,6 +56,8 @@
         <el-input
           v-model="form.meterReadingName"
           placeholder="请输入抄表人"
+          readonly
+          @click.native="addUser"
           :disabled="isView"
         ></el-input>
       </el-form-item>
@@ -100,6 +102,7 @@
       v-if="activeComp == 'bpm' && form.processInstanceId"
       :id="form.processInstanceId"
     ></bpmDetail>
+    <userSelect ref="userSelectRef" @changeParent="changePersonel"></userSelect>
   </ele-modal>
 </template>
 
@@ -113,6 +116,7 @@
   import dayjs from 'dayjs';
   import bpmDetail from '@/views/bpm/processInstance/detail.vue';
   import { energyConsumingUnitList } from '@/enum/dict.js';
+  import userSelect from '@/components/user-select/user-select.vue';
 
   const defForm = {
     id: '',
@@ -134,7 +138,8 @@
     name: 'MeterReadingDialog',
     components: {
       MaterialAdd,
-      bpmDetail
+      bpmDetail,
+      userSelect
     },
     data() {
       return {
@@ -217,6 +222,14 @@
         }
         this.$refs.materialAddRef.open();
       },
+      addUser() {
+        this.$refs.userSelectRef.open(null, 0, false);
+      },
+      changePersonel(data) {
+        this.form.meterReadingName = data?.name || '';
+        this.form.meterReadingId = data?.id || '';
+        console.log(data, 'data');
+      },
       // 选择设备回调
       handleChooseEquipment(row) {
         console.log('选择设备：', row);

src/views/energyConsumptionStatistics/components/LeftSidebar.vue

@@ -25,7 +25,7 @@
                   marginRight: '5px'
                 }"
               ></i>
-              <span>{{ node.label }}</span>
+              <span>{{ data.categoryName||node.label }}</span>
               <span v-if="data.nodeType!='category'">{{ node.codeNumber?' '+node.codeNumber:'' }}</span>
             </span>
           </template>