Commit 57bf5a645249e5e0b3d60f8900943e2cd8c8a600

Authored by gesilong
1 parent c53e0702

commit: 维修工单上传图片优化

@@ -11,16 +11,9 @@ @@ -11,16 +11,9 @@
11 > 11 >
12 <div> 12 <div>
13 <BasicForm @register="registerForm" /> 13 <BasicForm @register="registerForm" />
14 - <div style="display: flex;width: 70%;margin-left: 70px">  
15 - <div style="width: 122px;text-align: center">  
16 - 报修人  
17 - </div>  
18 - <a-input  
19 - placeholder="请选择"  
20 - :disabled="true"  
21 - v-model:value="selectedUsername"  
22 - >  
23 - </a-input> 14 + <div style="display: flex; width: 70%; margin-left: 70px">
  15 + <div style="width: 122px; text-align: center"> 报修人 </div>
  16 + <a-input placeholder="请选择" :disabled="true" v-model:value="selectedUsername" />
24 <a-button type="primary" @click="goChoose">选人</a-button> 17 <a-button type="primary" @click="goChoose">选人</a-button>
25 </div> 18 </div>
26 </div> 19 </div>
@@ -32,9 +25,9 @@ @@ -32,9 +25,9 @@
32 @ok="handleUserOk" 25 @ok="handleUserOk"
33 @cancel="handleUserCancel" 26 @cancel="handleUserCancel"
34 > 27 >
35 - <div style="padding: 20px;display: flex">  
36 - <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" isOpen="true"/>  
37 - <div style="margin-top: 20px;margin-left: 30px"> 28 + <div style="padding: 20px; display: flex">
  29 + <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" isOpen="true" />
  30 + <div style="margin-top: 20px; margin-left: 30px">
38 <a-radio-group v-model:value="selectedItem"> 31 <a-radio-group v-model:value="selectedItem">
39 <template v-for="item in Options" :key="`${item.id}`"> 32 <template v-for="item in Options" :key="`${item.id}`">
40 <a-radio :style="radioStyle" :value="item">{{ item.username }}</a-radio> 33 <a-radio :style="radioStyle" :value="item">{{ item.username }}</a-radio>
@@ -47,163 +40,167 @@ @@ -47,163 +40,167 @@
47 </div> 40 </div>
48 </template> 41 </template>
49 <script setup lang="ts"> 42 <script setup lang="ts">
50 -import {BasicModal, useModalInner} from "/@/components/Modal";  
51 -import {BasicForm, useForm} from "/@/components/Form";  
52 -import {computed, reactive, ref, unref} from "vue";  
53 -import {useI18n} from "/@/hooks/web/useI18n";  
54 -import {schemas} from "../index";  
55 -import {getUserListByOrg} from "/@/api/equipment/ledger";  
56 -import {useUserStore} from "/@/store/modules/user";  
57 -import {saveOrder} from "/@/api/repair/order";  
58 -import {useMessage} from "/@/hooks/web/useMessage";  
59 -import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';  
60 -const { t } = useI18n();  
61 -const isUpdate = ref<Boolean>(false);  
62 -const recordInfo = ref<any>({});  
63 -// 定义人员选项  
64 -const userInfo = useUserStore();  
65 -const { createMessage } = useMessage();  
66 -  
67 -const userOptions = ref([]);  
68 -const Options = ref([]);  
69 -const searchInfo = reactive<Recordable>({});  
70 -const { organizationIdTreeRef } = useResetOrganizationTree(searchInfo);  
71 -const userVisible = ref(false);  
72 -const userModalTitle = ref('选人');  
73 -const selectedItem = ref<{ id: string; username: string } | null>(null);  
74 -const radioStyle = reactive({  
75 - display: 'block',  
76 - height: '30px',  
77 - lineHeight: '30px',  
78 -});  
79 -// 计算属性实现双向绑定  
80 -const selectedUsername = computed({  
81 - get: () => selectedItem.value?.username || '',  
82 - set: (value) => {  
83 - if (selectedItem.value) {  
84 - selectedItem.value.username = value;  
85 - }  
86 - },  
87 -});  
88 -  
89 -const emit = defineEmits(['handleReload', 'register']); 43 + import { BasicModal, useModalInner } from '/@/components/Modal';
  44 + import { BasicForm, useForm } from '/@/components/Form';
  45 + import { computed, reactive, ref, unref } from 'vue';
  46 + import { useI18n } from '/@/hooks/web/useI18n';
  47 + import { schemas } from '../index';
  48 + import { getUserListByOrg } from '/@/api/equipment/ledger';
  49 + import { useUserStore } from '/@/store/modules/user';
  50 + import { saveOrder } from '/@/api/repair/order';
  51 + import { useMessage } from '/@/hooks/web/useMessage';
  52 + import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
  53 + const { t } = useI18n();
  54 + const isUpdate = ref<Boolean>(false);
  55 + const recordInfo = ref<any>({});
  56 + // 定义人员选项
  57 + const userInfo = useUserStore();
  58 + const { createMessage } = useMessage();
  59 +
  60 + const userOptions = ref([]);
  61 + const Options = ref([]);
  62 + const searchInfo = reactive<Recordable>({});
  63 + const { organizationIdTreeRef } = useResetOrganizationTree(searchInfo);
  64 + const userVisible = ref(false);
  65 + const userModalTitle = ref('选人');
  66 + const selectedItem = ref<{ id: string; username: string } | null>(null);
  67 + const radioStyle = reactive({
  68 + display: 'block',
  69 + height: '30px',
  70 + lineHeight: '30px',
  71 + });
  72 + // 计算属性实现双向绑定
  73 + const selectedUsername = computed({
  74 + get: () => selectedItem.value?.username || '',
  75 + set: (value) => {
  76 + if (selectedItem.value) {
  77 + selectedItem.value.username = value;
  78 + }
  79 + },
  80 + });
90 81
91 -const getTitle = computed(() =>  
92 - !unref(isUpdate)  
93 - ? t('repair.order.createOrderText')  
94 - : t('repair.order.editOrderText')  
95 -); 82 + const emit = defineEmits(['handleReload', 'register']);
96 83
97 -const [registerForm, { getFieldsValue, setFieldsValue, validate,updateSchema }] = useForm({  
98 - labelWidth: 140,  
99 - schemas,  
100 - actionColOptions: {  
101 - span: 14,  
102 - },  
103 - showActionButtonGroup: false,  
104 -}); 84 + const getTitle = computed(() =>
  85 + !unref(isUpdate) ? t('repair.order.createOrderText') : t('repair.order.editOrderText')
  86 + );
105 87
106 -const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {  
107 - setModalProps({ confirmLoading: false, loading: true });  
108 - isUpdate.value = data?.isUpdate;  
109 - recordInfo.value = data?.record;  
110 - if (!selectedItem.value) {  
111 - selectedItem.value = { id: '', username: '' };  
112 - }  
113 - selectedItem.value.username = data?.record?.reportByName || '';  
114 - selectedItem.value.id = data?.record?.reportBy || '';  
115 - updateSchema({  
116 - field: 'situationImg',  
117 - componentProps: {  
118 - onChange: handleOrgChange, 88 + const [registerForm, { getFieldsValue, setFieldsValue, validate, updateSchema }] = useForm({
  89 + labelWidth: 140,
  90 + schemas,
  91 + actionColOptions: {
  92 + span: 14,
119 }, 93 },
  94 + showActionButtonGroup: false,
120 }); 95 });
121 - if (data?.record) {  
122 - setFieldsValue(data?.record);  
123 - }  
124 - setModalProps({ loading: false });  
125 -});  
126 96
127 -  
128 -// 监听 org 字段的变化  
129 -const handleOrgChange = async (orgId: string) => {  
130 - if (!orgId) {  
131 - userOptions.value = []; // 清空人员选项 97 + const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
  98 + setModalProps({ confirmLoading: false, loading: true });
  99 + isUpdate.value = data?.isUpdate;
  100 + recordInfo.value = data?.record;
  101 + if (!selectedItem.value) {
  102 + selectedItem.value = { id: '', username: '' };
  103 + }
  104 + selectedItem.value.username = data?.record?.reportByName || '';
  105 + selectedItem.value.id = data?.record?.reportBy || '';
132 updateSchema({ 106 updateSchema({
133 - field: 'report',  
134 - componentProps: { options: [] }, 107 + field: 'situationImg',
  108 + componentProps: {
  109 + onChange: handleOrgChange,
  110 + },
135 }); 111 });
136 - return;  
137 - }  
138 - const _data = {  
139 - page: '1',  
140 - pageSize: '999',  
141 - tenantId: userInfo.getUserInfo.tenantId!,  
142 - organizationId: orgId  
143 - }  
144 - // 调用接口 B 获取人员数据  
145 - const userList = await getUserListByOrg(_data);  
146 - userOptions.value = userList?.items.map(user => ({  
147 - label: user.username,  
148 - value: user.id,  
149 - }));  
150 -  
151 - // 更新 user 字段的选项  
152 - updateSchema({  
153 - field: 'report',  
154 - componentProps: { options: userOptions.value }, 112 + if (data?.record) {
  113 + setFieldsValue(data?.record);
  114 + }
  115 + setModalProps({ loading: false });
155 }); 116 });
156 -};  
157 -  
158 -const handleCancel = () => {  
159 - closeModal();  
160 -};  
161 117
162 -const handleOk = async () => {  
163 - await validate();  
164 - let values = getFieldsValue();  
165 - if (unref(isUpdate)) {  
166 - values = { ...values, id: unref(recordInfo).id, situationImg: values.situationImg?.[0]?.url, reportBy: selectedItem.value?.id || ''};  
167 - }else {  
168 - values = { ...values, situationImg: values.situationImg?.[0]?.url, reportBy: selectedItem.value?.id || ''};  
169 - }  
170 - await saveOrder(values);  
171 - createMessage.success(t('common.operationSuccessText'));  
172 - emit('handleReload');  
173 - handleCancel();  
174 -};  
175 -  
176 -const goChoose = () => {  
177 - userVisible.value = true;  
178 - selectedItem.value = null;  
179 -}  
180 -  
181 -// 确认按钮的回调  
182 -const handleUserOk = () => {  
183 - if (!selectedItem.value) {  
184 - createMessage.warning('请选择一个用户');  
185 - return;  
186 - }  
187 -  
188 - userVisible.value = false; // 关闭弹框  
189 -};  
190 -  
191 -const handleUserCancel = () => {  
192 - selectedItem.value = null;  
193 - userVisible.value = false;  
194 -};  
195 -  
196 -const handleSelect = async (organizationId: string) => {  
197 - searchInfo.organizationId = organizationId;  
198 - const _data = {  
199 - page: '1',  
200 - pageSize: '999',  
201 - tenantId: userInfo.getUserInfo.tenantId!,  
202 - organizationId: organizationId  
203 - }  
204 - const response = await getUserListByOrg(_data); // 调用接口  
205 - Options.value = response.items;  
206 -  
207 -}; 118 + // 监听 org 字段的变化
  119 + const handleOrgChange = async (orgId: string) => {
  120 + if (!orgId) {
  121 + userOptions.value = []; // 清空人员选项
  122 + updateSchema({
  123 + field: 'report',
  124 + componentProps: { options: [] },
  125 + });
  126 + return;
  127 + }
  128 + const _data = {
  129 + page: '1',
  130 + pageSize: '999',
  131 + tenantId: userInfo.getUserInfo.tenantId!,
  132 + organizationId: orgId,
  133 + };
  134 + // 调用接口 B 获取人员数据
  135 + const userList = await getUserListByOrg(_data);
  136 + userOptions.value = userList?.items.map((user) => ({
  137 + label: user.username,
  138 + value: user.id,
  139 + }));
  140 +
  141 + // 更新 user 字段的选项
  142 + updateSchema({
  143 + field: 'report',
  144 + componentProps: { options: userOptions.value },
  145 + });
  146 + };
  147 +
  148 + const handleCancel = () => {
  149 + closeModal();
  150 + };
  151 +
  152 + const handleOk = async () => {
  153 + await validate();
  154 + let values = getFieldsValue();
  155 + if (unref(isUpdate)) {
  156 + values = {
  157 + ...values,
  158 + id: unref(recordInfo).id,
  159 + situationImg: values.image?.[0]?.url,
  160 + reportBy: selectedItem.value?.id || '',
  161 + };
  162 + } else {
  163 + values = {
  164 + ...values,
  165 + situationImg: values.image?.[0]?.url,
  166 + reportBy: selectedItem.value?.id || '',
  167 + };
  168 + }
  169 + await saveOrder(values);
  170 + createMessage.success(t('common.operationSuccessText'));
  171 + emit('handleReload');
  172 + handleCancel();
  173 + };
  174 +
  175 + const goChoose = () => {
  176 + userVisible.value = true;
  177 + selectedItem.value = null;
  178 + };
  179 +
  180 + // 确认按钮的回调
  181 + const handleUserOk = () => {
  182 + if (!selectedItem.value) {
  183 + createMessage.warning('请选择一个用户');
  184 + return;
  185 + }
208 186
  187 + userVisible.value = false; // 关闭弹框
  188 + };
  189 +
  190 + const handleUserCancel = () => {
  191 + selectedItem.value = null;
  192 + userVisible.value = false;
  193 + };
  194 +
  195 + const handleSelect = async (organizationId: string) => {
  196 + searchInfo.organizationId = organizationId;
  197 + const _data = {
  198 + page: '1',
  199 + pageSize: '999',
  200 + tenantId: userInfo.getUserInfo.tenantId!,
  201 + organizationId: organizationId,
  202 + };
  203 + const response = await getUserListByOrg(_data); // 调用接口
  204 + Options.value = response.items;
  205 + };
209 </script> 206 </script>
1 import { FormSchema, useComponentRegister } from '/@/components/Form'; 1 import { FormSchema, useComponentRegister } from '/@/components/Form';
2 import { useI18n } from '/@/hooks/web/useI18n'; 2 import { useI18n } from '/@/hooks/web/useI18n';
3 import { BasicColumn } from '/@/components/Table'; 3 import { BasicColumn } from '/@/components/Table';
4 -import {getLedgerList} from "/@/api/equipment/ledger"; 4 +import { getLedgerList } from '/@/api/equipment/ledger';
5 const { t } = useI18n(); 5 const { t } = useI18n();
6 import { OrgTreeSelect } from '../../common/OrgTreeSelect'; 6 import { OrgTreeSelect } from '../../common/OrgTreeSelect';
7 -import {uploadThumbnail} from "/@/api/configuration/center/configurationCenter";  
8 -import {createImgPreview} from "/@/components/Preview"; 7 +import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
  8 +import { createImgPreview } from '/@/components/Preview';
9 useComponentRegister('OrgTreeSelect', OrgTreeSelect); 9 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
10 10
11 const statusOptions = [ 11 const statusOptions = [
@@ -82,12 +82,12 @@ export const searchFormSchema: FormSchema[] = [ @@ -82,12 +82,12 @@ export const searchFormSchema: FormSchema[] = [
82 componentProps: { 82 componentProps: {
83 options: statusOptions, 83 options: statusOptions,
84 }, 84 },
85 - } 85 + },
86 ]; 86 ];
87 87
88 export const schemas: FormSchema[] = [ 88 export const schemas: FormSchema[] = [
89 { 89 {
90 - field: 'situationImg', 90 + field: 'image',
91 label: t('deviceManagement.product.imageText'), 91 label: t('deviceManagement.product.imageText'),
92 component: 'ApiUpload', 92 component: 'ApiUpload',
93 changeEvent: 'update:fileList', 93 changeEvent: 'update:fileList',