Commit 57bf5a645249e5e0b3d60f8900943e2cd8c8a600

Authored by gesilong
1 parent c53e0702

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

... ... @@ -11,16 +11,9 @@
11 11 >
12 12 <div>
13 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 17 <a-button type="primary" @click="goChoose">选人</a-button>
25 18 </div>
26 19 </div>
... ... @@ -32,9 +25,9 @@
32 25 @ok="handleUserOk"
33 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 31 <a-radio-group v-model:value="selectedItem">
39 32 <template v-for="item in Options" :key="`${item.id}`">
40 33 <a-radio :style="radioStyle" :value="item">{{ item.username }}</a-radio>
... ... @@ -47,163 +40,167 @@
47 40 </div>
48 41 </template>
49 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 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 206 </script>
... ...
1 1 import { FormSchema, useComponentRegister } from '/@/components/Form';
2 2 import { useI18n } from '/@/hooks/web/useI18n';
3 3 import { BasicColumn } from '/@/components/Table';
4   -import {getLedgerList} from "/@/api/equipment/ledger";
  4 +import { getLedgerList } from '/@/api/equipment/ledger';
5 5 const { t } = useI18n();
6 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 9 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
10 10
11 11 const statusOptions = [
... ... @@ -82,12 +82,12 @@ export const searchFormSchema: FormSchema[] = [
82 82 componentProps: {
83 83 options: statusOptions,
84 84 },
85   - }
  85 + },
86 86 ];
87 87
88 88 export const schemas: FormSchema[] = [
89 89 {
90   - field: 'situationImg',
  90 + field: 'image',
91 91 label: t('deviceManagement.product.imageText'),
92 92 component: 'ApiUpload',
93 93 changeEvent: 'update:fileList',
... ...