Commit d308e6f839c6fb5a5fd476605a1dac0926f5e80f

Authored by gesilong
1 parent 1cfc0eb0

commit: 选人组件,先注释掉用法,组件未完成

... ... @@ -133,6 +133,7 @@ export type ComponentType =
133 133 | 'JSONEditor'
134 134 | 'OrgTreeSelect'
135 135 | 'CategoryTreeSelect'
  136 + | 'UserSelector'
136 137 | 'CreateSpeed'
137 138 | 'ExtendDesc'
138 139 | 'JavaScriptFunctionEditor'
... ...
  1 +export { default as UserSelector } from './index.vue';
... ...
  1 +<template>
  2 + <div>
  3 + <div style="display: flex; width: 100%; align-items: center">
  4 + <a-input
  5 + :placeholder="placeholder"
  6 + :disabled="disabled"
  7 + :value="displayValue"
  8 + readonly
  9 + style="flex: 1"
  10 + />
  11 + <a-button type="primary" @click="openModal" :disabled="disabled">选人</a-button>
  12 + </div>
  13 +
  14 + <a-modal
  15 + v-model:visible="visible"
  16 + :title="title"
  17 + width="60vw"
  18 + @ok="handleOk"
  19 + @cancel="handleCancel"
  20 + >
  21 + <div class="modal-content">
  22 + <OrganizationIdTree
  23 + @select="handleOrgSelect"
  24 + isOpen="true"
  25 + class="org-tree"
  26 + />
  27 + <div class="user-list">
  28 + <a-radio-group
  29 + v-if="mode === 'single'"
  30 + v-model:value="selectedValue"
  31 + >
  32 + <a-radio
  33 + v-for="user in userList"
  34 + :key="user.id"
  35 + :value="user"
  36 + :style="radioStyle"
  37 + >
  38 + {{ user.username }}
  39 + </a-radio>
  40 + </a-radio-group>
  41 +
  42 + <a-checkbox-group
  43 + v-else
  44 + v-model:value="selectedValues"
  45 + >
  46 + <a-checkbox
  47 + v-for="user in userList"
  48 + :key="user.id"
  49 + :value="user"
  50 + :style="checkboxStyle"
  51 + >
  52 + {{ user.username }}
  53 + </a-checkbox>
  54 + </a-checkbox-group>
  55 + </div>
  56 + </div>
  57 + </a-modal>
  58 + </div>
  59 +</template>
  60 +<script setup lang="ts">
  61 +import { ref} from 'vue';
  62 +import { useUserStore } from '/@/store/modules/user';
  63 +import { OrganizationIdTree } from '/@/views/common/organizationIdTree';
  64 +
  65 +const props = defineProps({
  66 + modelValue: { type: [Object, Array] }, // 单选对象/多选数组
  67 + mode: { type: String, default: 'single' }, // single/multiple
  68 + label: { type: String, default: '报修人' },
  69 + placeholder: { type: String, default: '请选择' },
  70 + disabled: Boolean,
  71 + required: Boolean,
  72 + title: { type: String, default: '选择人员' },
  73 + showLabel: { type: Boolean, default: true },
  74 + // 新增字段映射配置
  75 + valueField: { type: String, default: 'id' },
  76 + displayField: { type: String, default: 'username' }
  77 +});
  78 +
  79 +const emit = defineEmits(['update:modelValue', 'change']);
  80 +
  81 +const userStore = useUserStore();
  82 +const visible = ref(false);
  83 +const displayValue = ref('');
  84 +const userList = ref([]);
  85 +const selectedValue = ref(null);
  86 +const selectedValues = ref([]);
  87 +
  88 +
  89 +// 处理多选模式初始化
  90 +const openModal = async () => {
  91 + visible.value = true;
  92 + console.log(userList,'userList')
  93 +
  94 + if (props.mode === 'single') {
  95 + selectedValue.value = userList.value.find(u => u.id === props.modelValue);
  96 + } else {
  97 + // 将父组件传递的 ID 数组转换为用户对象数组
  98 + const selectedIds = props.modelValue || [];
  99 + selectedValues.value = userList.value.filter(u =>
  100 + selectedIds.includes(u[props.valueField])
  101 + );
  102 + }
  103 +};
  104 +
  105 +// 修改确认逻辑
  106 +const handleOk = () => {
  107 + if (props.mode === 'single') {
  108 + if (!selectedValue.value && props.required) {
  109 + return Promise.reject('请选择人员');
  110 + }
  111 + // 发送完整用户对象给父组件
  112 + emit('update:modelValue', {
  113 + id: selectedValue.value.id,
  114 + username: selectedValue.value.username
  115 + });
  116 + displayValue.value = selectedValue?.value?.username || '';
  117 +
  118 + } else {
  119 + // 提取指定字段的值
  120 + const output = selectedValues.value.map(u => u[props.valueField]);
  121 +
  122 + // 更新显示值
  123 + displayValue.value = selectedValues.value
  124 + .map(u => u[props.displayField])
  125 + .join(', ');
  126 +
  127 + // 发送给父组件
  128 + emit('update:modelValue', output);
  129 + emit('change', output);
  130 + console.log(selectedValue,'selectedValue?.value')
  131 + }
  132 + visible.value = false;
  133 +};
  134 +
  135 +// 取消选择
  136 +const handleCancel = () => {
  137 + visible.value = false;
  138 +};
  139 +
  140 +// 样式配置
  141 +const radioStyle = {
  142 + display: 'block',
  143 + height: '30px',
  144 + lineHeight: '30px'
  145 +};
  146 +
  147 +const checkboxStyle = {
  148 + display: 'block',
  149 + height: '30px',
  150 + lineHeight: '30px',
  151 + width: '100%',
  152 + marginLeft: 0
  153 +};
  154 +</script>
  155 +
  156 +<style scoped>
  157 +.modal-content {
  158 + display: flex;
  159 + padding: 20px;
  160 + height: 50vh;
  161 + overflow: hidden;
  162 +}
  163 +
  164 +.org-tree {
  165 + flex: 0 0 30%;
  166 + overflow-y: auto;
  167 + padding-right: 20px;
  168 + border-right: 1px solid #e8e8e8;
  169 +}
  170 +
  171 +.user-list {
  172 + flex: 1;
  173 + padding-left: 20px;
  174 + overflow-y: auto;
  175 +}
  176 +
  177 +.inputTitle.required::before {
  178 + display: inline-block;
  179 + margin-right: 4px;
  180 + color: #ff4d4f;
  181 + font-size: 14px;
  182 + font-family: SimSun, sans-serif;
  183 + line-height: 1;
  184 + content: '*';
  185 +}
  186 +</style>
... ...
1   -import { FormSchema, useComponentRegister } from '/@/components/Form';
  1 +import { FormSchema } from '/@/components/Form';
2 2 import { useI18n } from '/@/hooks/web/useI18n';
3 3 import { BasicColumn } from '/@/components/Table';
4 4 import { getLedgerList } from '/@/api/equipment/ledger';
5 5 const { t } = useI18n();
6   -import { OrgTreeSelect } from '../../common/OrgTreeSelect';
  6 +// import { UserSelector } from '../../common/UserSelector';
7 7 import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
8 8 import { createImgPreview } from '/@/components/Preview';
9   -useComponentRegister('OrgTreeSelect', OrgTreeSelect);
  9 +// useComponentRegister('UserSelector', UserSelector);
10 10
11 11 const statusOptions = [
12 12 { label: t('repair.order.DRAFT'), value: 'DRAFT' },
... ... @@ -177,4 +177,20 @@ export const schemas: FormSchema[] = [
177 177 placeholder: '请输入描述',
178 178 },
179 179 },
  180 + // {
  181 + // field: 'repairBy',
  182 + // label: '报修人',
  183 + // component: 'UserSelector',
  184 + // colProps: { span: 24 },
  185 + // required: true,
  186 + // componentProps: {
  187 + // // 告诉组件需要接收对象格式 {id, username}
  188 + // valueType: 'object',
  189 + // mode: 'single',
  190 + // // 显示格式处理
  191 + // displayFormat: (user) => user?.username || '',
  192 + // // 验证规则
  193 + // rules: [{ required: true, message: '请选择报修人' }]
  194 + // },
  195 + // }
180 196 ];
... ...