简柏林 / thingskit-front · Commits

Commit 0ec5a22fa5b1d0d1e9ff32f0f7a50cf732e46820

Authored by fengwotao
1 parent be28a5e3

fix：DEFECT-659 租户默认设备配置名字不能修改

Inline Side-by-side
Showing 3 changed files with 418 additions and 419 deletions
1 1 <template>
2 2 <div>
3   - <BasicModal
4   - v-bind="$attrs"
5   - width="55rem"
6   - @register="register"
7   - :title="getTitle"
8   - @ok="handleSubmit"
9   - @cancel="handleCancel"
10   - :showOkBtn="isShowOkBtnFalse"
11   - >
  3 + <BasicModal v-bind="$attrs" width="55rem" @register="register" :title="getTitle" @ok="handleSubmit"
  4 + @cancel="handleCancel" :showOkBtn="isShowOkBtnFalse">
12 5 <div class="step-form-form">
13 6 <a-steps :current="current">
14 7 <a-step title="设备配置" />
... ... @@ -18,281 +11,289 @@
18 11 <div class="mt-5">
19 12 <!-- 设备配置 -->
20 13 <div v-show="current === 0">
21   - <DeviceProfileStep1 ref="DeviceProfileStep1Ref" @next="handleStepNext1"
22   - /></div>
  14 + <DeviceProfileStep1 ref="DeviceProfileStep1Ref" @next="handleStepNext1" />
  15 + </div>
23 16 <!-- 设备配置 -->
24 17 <!-- 传输配置 -->
25 18 <div v-show="current === 1">
26   - <DeviceProfileStep2 ref="DeviceProfileStep2Ref" @prev="handleStepPrev"
27   - /></div>
  19 + <DeviceProfileStep2 ref="DeviceProfileStep2Ref" @prev="handleStepPrev" />
  20 + </div>
28 21 <!-- 传输配置 -->
29 22 </div>
30 23 </BasicModal>
31 24 </div>
32 25 </template>
33 26 <script lang="ts">
34   - import {
35   - defineComponent,
36   - nextTick,
37   - ref,
38   - computed,
39   - unref,
40   - getCurrentInstance,
41   - reactive,
42   - } from 'vue';
43   - import { BasicModal, useModalInner } from '/@/components/Modal';
44   - import DeviceProfileStep1 from '/@/views/device/profiles/step/DeviceProfileStep1.vue';
45   - import DeviceProfileStep2 from '/@/views/device/profiles/step/DeviceProfileStep2.vue';
46   - import { Steps } from 'ant-design-vue';
47   - import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
48   - import { useMessage } from '/@/hooks/web/useMessage';
  27 +import {
  28 + defineComponent,
  29 + nextTick,
  30 + ref,
  31 + computed,
  32 + unref,
  33 + getCurrentInstance,
  34 + reactive,
  35 +} from 'vue';
  36 +import { BasicModal, useModalInner } from '/@/components/Modal';
  37 +import DeviceProfileStep1 from '/@/views/device/profiles/step/DeviceProfileStep1.vue';
  38 +import DeviceProfileStep2 from '/@/views/device/profiles/step/DeviceProfileStep2.vue';
  39 +import { Steps } from 'ant-design-vue';
  40 +import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
  41 +import { useMessage } from '/@/hooks/web/useMessage';
  42 +
  43 +export default defineComponent({
  44 + name: 'DeviceModal',
  45 + components: {
  46 + BasicModal,
  47 + DeviceProfileStep1,
  48 + DeviceProfileStep2,
  49 + [Steps.name]: Steps,
  50 + [Steps.Step.name]: Steps.Step,
  51 + },
  52 + props: {
  53 + userData: { type: Object },
  54 + },
  55 + emits: ['success', 'register', 'handleStepPrev', 'handleStep3Next', 'handleRedo'],
  56 + setup(_, { emit }) {
  57 + const { proxy } = getCurrentInstance() as any;
  58 + const DeviceProfileStep1Ref = ref(null);
  59 + const DeviceProfileStep2Ref = ref(null);
  60 + const { createMessage } = useMessage();
  61 + let postDeviceConfogData: any = reactive({});
  62 + let getStepOneData: any = reactive({});
  63 + let getStepTwoData: any = reactive({});
  64 + const editData: any = ref({});
  65 + const postEditId = ref('');
  66 + const createTime = ref('');
  67 + const current = ref(0);
  68 + const isUpdate = ref(0);
  69 + const isShowOkBtnFalse = ref(true);
  70 + const isNextStatus = ref(false);
  71 + let transportTypeObj = reactive({
  72 + transportType: '',
  73 + });
  74 + let profileDataObj: any = reactive({
  75 + profileData: null,
  76 + });
  77 + let isEdit = ref(true);
  78 + let noEditObj: any = reactive({});
  79 + const getTitle = computed(() =>
  80 + isUpdate.value == 1 ? '新增设备配置' : isUpdate.value == 2 ? '编辑设备配置' : '设备配置详情'
  81 + );
  82 + const editTransportType = ref('');
  83 + const getViewTitle = computed(() => (!unref(isShowOkBtnFalse) ? '设备配置详情' : ''));
  84 + const [register, { closeModal }] = useModalInner(async (data) => {
  85 + isUpdate.value = data.isUpdate;
  86 + if (isUpdate.value == 1) {
  87 + handleCancel();
  88 + isShowOkBtnFalse.value = true;
  89 + current.value = 0;
  90 + isEdit.value = false;
  91 + proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(false)
  92 + } else if (isUpdate.value == 2) {
  93 + isEdit.value = true;
  94 + handleCancel();
  95 + isShowOkBtnFalse.value = true;
  96 + current.value = 0;
  97 + postEditId.value = data.record.id;
  98 + createTime.value = data.record.createTime;
  99 + editTransportType.value = data.record.transportType;
  100 + editData.value = await deviceConfigGetDetail(postEditId.value);
  101 + proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
  102 + name: editData.value.name,
  103 + defaultRuleChainId: editData.value.defaultRuleChainId,
  104 + defaultQueueName: editData.value.defaultQueueName,
  105 + description: editData.value.description,
  106 + image: editData.value.image,
  107 + });
  108 + if (editData.value.default) {
  109 + proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(true)
  110 +
  111 + } else {
  112 + proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(false)
49 113
50   - export default defineComponent({
51   - name: 'DeviceModal',
52   - components: {
53   - BasicModal,
54   - DeviceProfileStep1,
55   - DeviceProfileStep2,
56   - [Steps.name]: Steps,
57   - [Steps.Step.name]: Steps.Step,
58   - },
59   - props: {
60   - userData: { type: Object },
61   - },
62   - emits: ['success', 'register', 'handleStepPrev', 'handleStep3Next', 'handleRedo'],
63   - setup(_, { emit }) {
64   - const { proxy } = getCurrentInstance() as any;
65   - const DeviceProfileStep1Ref = ref(null);
66   - const DeviceProfileStep2Ref = ref(null);
67   - const { createMessage } = useMessage();
68   - let postDeviceConfogData: any = reactive({});
69   - let getStepOneData: any = reactive({});
70   - let getStepTwoData: any = reactive({});
71   - const editData: any = ref({});
72   - const postEditId = ref('');
73   - const createTime = ref('');
74   - const current = ref(0);
75   - const isUpdate = ref(0);
76   - const isShowOkBtnFalse = ref(true);
77   - const isNextStatus = ref(false);
78   - let transportTypeObj = reactive({
79   - transportType: '',
80   - });
81   - let profileDataObj: any = reactive({
82   - profileData: null,
83   - });
84   - let isEdit = ref(true);
85   - let noEditObj: any = reactive({});
86   - const getTitle = computed(() =>
87   - isUpdate.value == 1 ? '新增设备配置' : isUpdate.value == 2 ? '编辑设备配置' : '设备配置详情'
88   - );
89   - const editTransportType = ref('');
90   - const getViewTitle = computed(() => (!unref(isShowOkBtnFalse) ? '设备配置详情' : ''));
91   - const [register, { closeModal }] = useModalInner(async (data) => {
92   - isUpdate.value = data.isUpdate;
93   - if (isUpdate.value == 1) {
94   - handleCancel();
95   - isShowOkBtnFalse.value = true;
96   - current.value = 0;
97   - isEdit.value = false;
98   - } else if (isUpdate.value == 2) {
99   - isEdit.value = true;
100   - handleCancel();
101   - isShowOkBtnFalse.value = true;
102   - current.value = 0;
103   - postEditId.value = data.record.id;
104   - createTime.value = data.record.createTime;
105   - editTransportType.value = data.record.transportType;
106   - editData.value = await deviceConfigGetDetail(postEditId.value);
107   - proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
108   - name: editData.value.name,
109   - defaultRuleChainId: editData.value.defaultRuleChainId,
110   - defaultQueueName: editData.value.defaultQueueName,
111   - description: editData.value.description,
112   - image: editData.value.image,
113   - });
114   - noEditObj = {
115   - id: editData.value.id,
116   - name: editData.value?.name,
117   - createTime: createTime.value,
118   - transportType: editTransportType.value,
119   - type: editData.value?.type,
120   - profileData: editData.value?.profileData,
121   - defaultQueueName: editData.value.defaultQueueName,
122   - image: editData.value.image,
123   - defaultRuleChainId: editData.value.defaultRuleChainId,
124   - description: editData.value.description,
125   - tenantId: editData.value.tenantId,
126   - };
127   - } else if (isUpdate.value == 3) {
128   - handleCancel();
129   - isShowOkBtnFalse.value = false;
130   - current.value = 0;
131   - postEditId.value = data.record.id;
132   - createTime.value = data.record.createTime;
133   - editData.value = await deviceConfigGetDetail(postEditId.value);
134   - proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
135   - name: editData.value.name,
136   - defaultRuleChainId: editData.value.defaultRuleChainId,
137   - defaultQueueName: editData.value.defaultQueueName,
138   - description: editData.value.description,
139   - image: editData.value.image,
140   - });
141   - }
142   - });
143   - function handleStepPrev() {
144   - current.value--;
145   - if (isUpdate.value == 2) {
146   - isEdit.value = true;
147   - noEditObj = {
148   - id: editData.value.id,
149   - name: editData.value?.name,
150   - createTime: createTime.value,
151   - transportType: editTransportType.value,
152   - type: editData.value?.type,
153   - profileData: editData.value?.profileData,
154   - defaultQueueName: editData.value.defaultQueueName,
155   - image: editData.value.image,
156   - defaultRuleChainId: editData.value.defaultRuleChainId,
157   - description: editData.value.description,
158   - tenantId: editData.value.tenantId,
159   - };
160   - nextTick(async () => {
161   - let getPic = null;
162   - const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
163   - getPic = getStep1Obj.icon;
164   - Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);
165   - });
166   - }
167   - }
168   - //第一步
169   - function handleStepNext1(v, v1) {
170   - isNextStatus.value = true;
171   - if (isNextStatus.value) {
172   - getStepOneData = {
173   - ...v,
174   - ...{ image: v1 },
175   - };
176   - }
177   - current.value++;
178   - if (isUpdate.value == 2) {
179   - isEdit.value = false;
180   - proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
181   - } else if (isUpdate.value == 3) {
182   - proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
183 114 }
  115 + noEditObj = {
  116 + id: editData.value.id,
  117 + name: editData.value?.name,
  118 + createTime: createTime.value,
  119 + transportType: editTransportType.value,
  120 + type: editData.value?.type,
  121 + profileData: editData.value?.profileData,
  122 + defaultQueueName: editData.value.defaultQueueName,
  123 + image: editData.value.image,
  124 + defaultRuleChainId: editData.value.defaultRuleChainId,
  125 + description: editData.value.description,
  126 + tenantId: editData.value.tenantId,
  127 + };
  128 + } else if (isUpdate.value == 3) {
  129 + handleCancel();
  130 + isShowOkBtnFalse.value = false;
  131 + current.value = 0;
  132 + postEditId.value = data.record.id;
  133 + createTime.value = data.record.createTime;
  134 + editData.value = await deviceConfigGetDetail(postEditId.value);
  135 + proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
  136 + name: editData.value.name,
  137 + defaultRuleChainId: editData.value.defaultRuleChainId,
  138 + defaultQueueName: editData.value.defaultQueueName,
  139 + description: editData.value.description,
  140 + image: editData.value.image,
  141 + });
184 142 }
185   - const handleSubmit = async () => {
186   - let getPic = null;
187   - getStepTwoData = await proxy.$refs.DeviceProfileStep2Ref?.getStep2DataFunc();
188   - profileDataObj.profileData = getStepTwoData;
189   - transportTypeObj.transportType = getStepTwoData?.transportConfiguration?.transportType;
190   - delete profileDataObj?.profileData?.transportConfiguration?.transportType;
191   - //没有点击下一步
192   - if (!isNextStatus.value) {
  143 + });
  144 + function handleStepPrev() {
  145 + current.value--;
  146 + if (isUpdate.value == 2) {
  147 + isEdit.value = true;
  148 + noEditObj = {
  149 + id: editData.value.id,
  150 + name: editData.value?.name,
  151 + createTime: createTime.value,
  152 + transportType: editTransportType.value,
  153 + type: editData.value?.type,
  154 + profileData: editData.value?.profileData,
  155 + defaultQueueName: editData.value.defaultQueueName,
  156 + image: editData.value.image,
  157 + defaultRuleChainId: editData.value.defaultRuleChainId,
  158 + description: editData.value.description,
  159 + tenantId: editData.value.tenantId,
  160 + };
  161 + nextTick(async () => {
  162 + let getPic = null;
193 163 const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
194 164 getPic = getStep1Obj.icon;
195   - getStepOneData = {
196   - ...getStep1Obj.key,
197   - ...{ image: getPic },
198   - };
199 165 Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);
200   - }
201   - const id = isUpdate.value == 1 ? '' : postEditId.value;
202   - const createTimePost = isUpdate.value == 1 ? {} : { createTime: createTime.value };
203   -
204   - if (Object.keys(getStepTwoData?.transportConfiguration).length == 0) {
205   - profileDataObj.profileData = null;
206   - }
207   - postDeviceConfogData = {
208   - ...getStepOneData,
209   - ...profileDataObj,
210   - ...transportTypeObj,
211   - id,
212   - ...createTimePost,
  166 + });
  167 + }
  168 + }
  169 + //第一步
  170 + function handleStepNext1(v, v1) {
  171 + isNextStatus.value = true;
  172 + if (isNextStatus.value) {
  173 + getStepOneData = {
  174 + ...v,
  175 + ...{ image: v1 },
213 176 };
214   - if (isUpdate.value == 1) {
215   - delete postDeviceConfogData.id;
216   - }
217   - let isMappingsKey = ref(false);
218   - let isMappingValue = ref(false);
219   - let isQueryings = ref(false);
220   - let isOIDRepet = ref(false);
221   - postDeviceConfogData?.profileData?.transportConfiguration?.communicationConfigs?.forEach(
222   - (f: any) => {
223   - if (f.spec == 'TELEMETRY_QUERYING' || f.spec == 'CLIENT_ATTRIBUTES_QUERYING') {
224   - if (f.queryingFrequencyMs == null) {
225   - isQueryings.value = true;
226   - return createMessage.error('请填写查询频率');
227   - } else {
228   - isQueryings.value = false;
229   - }
230   - }
231   - if (f.mappings.length == 0) {
232   - isMappingsKey.value = true;
233   - isMappingValue.value = true;
  177 + }
  178 + current.value++;
  179 + if (isUpdate.value == 2) {
  180 + isEdit.value = false;
  181 + proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
  182 + } else if (isUpdate.value == 3) {
  183 + proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
  184 + }
  185 + }
  186 + const handleSubmit = async () => {
  187 + let getPic = null;
  188 + getStepTwoData = await proxy.$refs.DeviceProfileStep2Ref?.getStep2DataFunc();
  189 + profileDataObj.profileData = getStepTwoData;
  190 + transportTypeObj.transportType = getStepTwoData?.transportConfiguration?.transportType;
  191 + delete profileDataObj?.profileData?.transportConfiguration?.transportType;
  192 + //没有点击下一步
  193 + if (!isNextStatus.value) {
  194 + const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
  195 + getPic = getStep1Obj.icon;
  196 + getStepOneData = {
  197 + ...getStep1Obj.key,
  198 + ...{ image: getPic },
  199 + };
  200 + Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);
  201 + }
  202 + const id = isUpdate.value == 1 ? '' : postEditId.value;
  203 + const createTimePost = isUpdate.value == 1 ? {} : { createTime: createTime.value };
  204 +
  205 + if (Object.keys(getStepTwoData?.transportConfiguration).length == 0) {
  206 + profileDataObj.profileData = null;
  207 + }
  208 + postDeviceConfogData = {
  209 + ...getStepOneData,
  210 + ...profileDataObj,
  211 + ...transportTypeObj,
  212 + id,
  213 + ...createTimePost,
  214 + };
  215 + if (isUpdate.value == 1) {
  216 + delete postDeviceConfogData.id;
  217 + }
  218 + let isMappingsKey = ref(false);
  219 + let isMappingValue = ref(false);
  220 + let isQueryings = ref(false);
  221 + let isOIDRepet = ref(false);
  222 + postDeviceConfogData?.profileData?.transportConfiguration?.communicationConfigs?.forEach(
  223 + (f: any) => {
  224 + if (f.spec == 'TELEMETRY_QUERYING' || f.spec == 'CLIENT_ATTRIBUTES_QUERYING') {
  225 + if (f.queryingFrequencyMs == null) {
  226 + isQueryings.value = true;
  227 + return createMessage.error('请填写查询频率');
234 228 } else {
235   - f.mappings.forEach((f1) => {
236   - const findNoneKey = Object.keys(f1).includes('');
237   - if (findNoneKey) {
238   - isMappingsKey.value = true;
239   - }
240   - });
241   - f.mappings.forEach((f2) => {
242   - const findNoneVal = Object.values(f2).includes('');
243   - if (findNoneVal) {
244   - isMappingValue.value = true;
245   - }
246   - });
247   - //新增OID不能重复=====同一层级的OID不能重复
248   - f.mappings.forEach((item, _) => {
249   - if (f.mappings.some((citem) => citem !== item && citem.oid === item.oid)) {
250   - isOIDRepet.value = true;
251   - }
252   - });
  229 + isQueryings.value = false;
253 230 }
254 231 }
255   - );
256   - if (isQueryings.value) return createMessage.error('请填写查询频率');
257   - if (isMappingsKey.value) return createMessage.error('请填写Date key和OID');
258   - if (isMappingValue.value) return createMessage.error('请填写Date key和OID');
259   - if (isOIDRepet.value) return createMessage.error('OID不能重复');
260   - deviceConfigAddOrEdit(isEdit.value ? noEditObj : postDeviceConfogData)
261   - .then((res) => {
262   - if (!res) return;
263   - createMessage.success(isUpdate.value == 1 ? '新增' + '成功' : '编辑' + '成功');
264   - closeModal();
265   - emit('success');
266   - isNextStatus.value = false;
267   - })
268   - .catch((e) => {
269   - createMessage.error(e);
270   - });
271   - };
272   - const handleCancel = () => {
273   - nextTick(() => {
274   - proxy.$refs.DeviceProfileStep1Ref?.customResetStepOneFunc();
275   - proxy.$refs.DeviceProfileStep2Ref?.customClearStepTwoValueFunc();
  232 + if (f.mappings.length == 0) {
  233 + isMappingsKey.value = true;
  234 + isMappingValue.value = true;
  235 + } else {
  236 + f.mappings.forEach((f1) => {
  237 + const findNoneKey = Object.keys(f1).includes('');
  238 + if (findNoneKey) {
  239 + isMappingsKey.value = true;
  240 + }
  241 + });
  242 + f.mappings.forEach((f2) => {
  243 + const findNoneVal = Object.values(f2).includes('');
  244 + if (findNoneVal) {
  245 + isMappingValue.value = true;
  246 + }
  247 + });
  248 + //新增OID不能重复=====同一层级的OID不能重复
  249 + f.mappings.forEach((item, _) => {
  250 + if (f.mappings.some((citem) => citem !== item && citem.oid === item.oid)) {
  251 + isOIDRepet.value = true;
  252 + }
  253 + });
  254 + }
  255 + }
  256 + );
  257 + if (isQueryings.value) return createMessage.error('请填写查询频率');
  258 + if (isMappingsKey.value) return createMessage.error('请填写Date key和OID');
  259 + if (isMappingValue.value) return createMessage.error('请填写Date key和OID');
  260 + if (isOIDRepet.value) return createMessage.error('OID不能重复');
  261 + deviceConfigAddOrEdit(isEdit.value ? noEditObj : postDeviceConfogData)
  262 + .then((res) => {
  263 + if (!res) return;
  264 + createMessage.success(isUpdate.value == 1 ? '新增' + '成功' : '编辑' + '成功');
  265 + closeModal();
  266 + emit('success');
  267 + isNextStatus.value = false;
  268 + })
  269 + .catch((e) => {
  270 + createMessage.error(e);
276 271 });
277   - };
278   - function handleRedo() {
279   - current.value = 0;
280   - }
281   - return {
282   - isShowOkBtnFalse,
283   - DeviceProfileStep2Ref,
284   - DeviceProfileStep1Ref,
285   - editData,
286   - handleSubmit,
287   - handleCancel,
288   - register,
289   - getTitle,
290   - getViewTitle,
291   - current,
292   - handleStepPrev,
293   - handleStepNext1,
294   - handleRedo,
295   - };
296   - },
297   - });
  272 + };
  273 + const handleCancel = () => {
  274 + nextTick(() => {
  275 + proxy.$refs.DeviceProfileStep1Ref?.customResetStepOneFunc();
  276 + proxy.$refs.DeviceProfileStep2Ref?.customClearStepTwoValueFunc();
  277 + });
  278 + };
  279 + function handleRedo() {
  280 + current.value = 0;
  281 + }
  282 + return {
  283 + isShowOkBtnFalse,
  284 + DeviceProfileStep2Ref,
  285 + DeviceProfileStep1Ref,
  286 + editData,
  287 + handleSubmit,
  288 + handleCancel,
  289 + register,
  290 + getTitle,
  291 + getViewTitle,
  292 + current,
  293 + handleStepPrev,
  294 + handleStepNext1,
  295 + handleRedo,
  296 + };
  297 + },
  298 +});
298 299 </script>
... ...
... ... @@ -4,21 +4,9 @@
4 4 <div>
5 5 <BasicForm @register="register">
6 6 <template #imageSelect>
7   - <Upload
8   - style="width: 20vw"
9   - name="avatar"
10   - list-type="picture-card"
11   - class="avatar-uploader"
12   - :show-upload-list="false"
13   - :customRequest="customUploadqrcodePic"
14   - :before-upload="beforeUploadqrcodePic"
15   - >
16   - <img
17   - v-if="peresonalPic"
18   - :src="peresonalPic"
19   - alt="avatar"
20   - style="width: 6.25rem; height: 6.25rem"
21   - />
  7 + <Upload style="width: 20vw" name="avatar" list-type="picture-card" class="avatar-uploader"
  8 + :show-upload-list="false" :customRequest="customUploadqrcodePic" :before-upload="beforeUploadqrcodePic">
  9 + <img v-if="peresonalPic" :src="peresonalPic" alt="avatar" style="width: 6.25rem; height: 6.25rem" />
22 10 <div v-else>
23 11 <LoadingOutlined v-if="loading" />
24 12 <PlusOutlined v-else />
... ... @@ -32,154 +20,161 @@
32 20 </div>
33 21 </template>
34 22 <script lang="ts">
35   - import { defineComponent, ref } from 'vue';
36   - import { BasicForm, useForm } from '/@/components/Form';
37   - import { step1Schemas } from './data';
38   - import { Select, Input, Divider } from 'ant-design-vue';
39   - import { uploadApi } from '/@/api/personal/index';
40   - import { Upload } from 'ant-design-vue';
41   - import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
42   - import { useMessage } from '/@/hooks/web/useMessage';
43   - import type { FileItem } from '/@/components/Upload/src/typing';
  23 +import { defineComponent, ref } from 'vue';
  24 +import { BasicForm, useForm } from '/@/components/Form';
  25 +import { step1Schemas } from './data';
  26 +import { Select, Input, Divider } from 'ant-design-vue';
  27 +import { uploadApi } from '/@/api/personal/index';
  28 +import { Upload } from 'ant-design-vue';
  29 +import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
  30 +import { useMessage } from '/@/hooks/web/useMessage';
  31 +import type { FileItem } from '/@/components/Upload/src/typing';
44 32
45   - export default defineComponent({
46   - components: {
47   - BasicForm,
48   - [Select.name]: Select,
49   - [Input.name]: Input,
50   - [Input.Group.name]: Input.Group,
51   - [Divider.name]: Divider,
52   - Upload,
53   - PlusOutlined,
54   - LoadingOutlined,
55   - },
56   - emits: ['next', 'resetFunc', 'register'],
57   - setup(_, { emit }) {
58   - const loading = ref(false);
  33 +export default defineComponent({
  34 + components: {
  35 + BasicForm,
  36 + [Select.name]: Select,
  37 + [Input.name]: Input,
  38 + [Input.Group.name]: Input.Group,
  39 + [Divider.name]: Divider,
  40 + Upload,
  41 + PlusOutlined,
  42 + LoadingOutlined,
  43 + },
  44 + emits: ['next', 'resetFunc', 'register'],
  45 + setup(_, { emit }) {
  46 + const loading = ref(false);
59 47
60   - const { createMessage } = useMessage();
61   - const peresonalPic = ref('');
  48 + const { createMessage } = useMessage();
  49 + const peresonalPic = ref('');
62 50
63   - const [register, { validate, setFieldsValue, resetFields }] = useForm({
64   - labelWidth: 100,
65   - schemas: step1Schemas,
66   - actionColOptions: {
67   - span: 14,
68   - },
69   - showResetButton: false,
70   - submitButtonOptions: {
71   - text: '下一步',
72   - },
73   - submitFunc: customSubmitFunc,
74   - });
75   - //回显数据
76   - const setStepOneFieldsValueFunc = (v) => {
77   - setFieldsValue(v);
78   - peresonalPic.value = v.image;
79   - };
80   - const customUploadqrcodePic = async ({ file }) => {
81   - if (beforeUploadqrcodePic(file)) {
82   - peresonalPic.value = '';
83   - loading.value = true;
84   - const formData = new FormData();
85   - formData.append('file', file);
86   - const response = await uploadApi(formData);
87   - if (response.fileStaticUri) {
88   - peresonalPic.value = response.fileStaticUri;
89   - loading.value = false;
90   - }
91   - }
92   - };
93   - const beforeUploadqrcodePic = (file: FileItem) => {
94   - const isJpgOrPng =
95   - file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
96   - if (!isJpgOrPng) {
97   - createMessage.error('只能上传图片文件!');
98   - }
99   - const isLt2M = (file.size as number) / 1024 / 1024 < 5;
100   - if (!isLt2M) {
101   - createMessage.error('图片大小不能超过5MB!');
102   - }
103   - return isJpgOrPng && isLt2M;
104   - };
105   -
106   - async function customSubmitFunc() {
107   - const values = await validate();
108   - emit('next', values, peresonalPic.value);
  51 + const [register, { validate, setFieldsValue, resetFields, updateSchema }] = useForm({
  52 + labelWidth: 100,
  53 + schemas: step1Schemas,
  54 + actionColOptions: {
  55 + span: 14,
  56 + },
  57 + showResetButton: false,
  58 + submitButtonOptions: {
  59 + text: '下一步',
  60 + },
  61 + submitFunc: customSubmitFunc,
  62 + });
  63 + const editOrAddNameStatus = (nameStatus) => updateSchema({
  64 + field: 'name', componentProps: {
  65 + disabled: nameStatus
109 66 }
110   - //清空数据
111   - const customResetStepOneFunc = () => {
112   - resetFields();
  67 + })
  68 + //回显数据
  69 + const setStepOneFieldsValueFunc = (v) => {
  70 + setFieldsValue(v);
  71 + peresonalPic.value = v.image;
  72 + };
  73 + const customUploadqrcodePic = async ({ file }) => {
  74 + if (beforeUploadqrcodePic(file)) {
113 75 peresonalPic.value = '';
114   - };
115   - const getStep1Func = async () => {
116   - const valueStep1 = await validate();
117   - const pic = peresonalPic.value;
118   - return {
119   - key: valueStep1,
120   - icon: pic,
121   - };
122   - };
  76 + loading.value = true;
  77 + const formData = new FormData();
  78 + formData.append('file', file);
  79 + const response = await uploadApi(formData);
  80 + if (response.fileStaticUri) {
  81 + peresonalPic.value = response.fileStaticUri;
  82 + loading.value = false;
  83 + }
  84 + }
  85 + };
  86 + const beforeUploadqrcodePic = (file: FileItem) => {
  87 + const isJpgOrPng =
  88 + file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
  89 + if (!isJpgOrPng) {
  90 + createMessage.error('只能上传图片文件!');
  91 + }
  92 + const isLt2M = (file.size as number) / 1024 / 1024 < 5;
  93 + if (!isLt2M) {
  94 + createMessage.error('图片大小不能超过5MB!');
  95 + }
  96 + return isJpgOrPng && isLt2M;
  97 + };
  98 +
  99 + async function customSubmitFunc() {
  100 + const values = await validate();
  101 + emit('next', values, peresonalPic.value);
  102 + }
  103 + //清空数据
  104 + const customResetStepOneFunc = () => {
  105 + resetFields();
  106 + peresonalPic.value = '';
  107 + };
  108 + const getStep1Func = async () => {
  109 + const valueStep1 = await validate();
  110 + const pic = peresonalPic.value;
123 111 return {
124   - register,
125   - setStepOneFieldsValueFunc,
126   - customResetStepOneFunc,
127   - uploadApi,
128   - peresonalPic,
129   - beforeUploadqrcodePic,
130   - customUploadqrcodePic,
131   - getStep1Func,
132   - loading,
  112 + key: valueStep1,
  113 + icon: pic,
133 114 };
134   - },
135   - });
  115 + };
  116 + return {
  117 + register,
  118 + setStepOneFieldsValueFunc,
  119 + customResetStepOneFunc,
  120 + uploadApi,
  121 + peresonalPic,
  122 + beforeUploadqrcodePic,
  123 + customUploadqrcodePic,
  124 + getStep1Func,
  125 + loading,
  126 + editOrAddNameStatus
  127 + };
  128 + },
  129 +});
136 130 </script>
137 131 <style lang="less" scoped>
138   - .step1 {
139   - &-form {
140   - width: 500px;
141   - margin: 0 auto;
142   - }
143   -
144   - h3 {
145   - margin: 0 0 12px;
146   - font-size: 16px;
147   - line-height: 32px;
148   - color: @text-color;
149   - }
  132 +.step1 {
  133 + &-form {
  134 + width: 500px;
  135 + margin: 0 auto;
  136 + }
150 137
151   - h4 {
152   - margin: 0 0 4px;
153   - font-size: 14px;
154   - line-height: 22px;
155   - color: @text-color;
156   - }
  138 + h3 {
  139 + margin: 0 0 12px;
  140 + font-size: 16px;
  141 + line-height: 32px;
  142 + color: @text-color;
  143 + }
157 144
158   - p {
159   - color: @text-color;
160   - }
161   - .device-icon-style {
162   - :deep .ant-upload-select-picture-card {
163   - display: inherit;
164   - float: none;
165   - width: 4.9vw;
166   - height: 9.5vh;
167   - margin-right: 8px;
168   - text-align: center;
169   - vertical-align: top;
170   - background-color: #fafafa;
171   - border: 1px dashed #d9d9d9;
172   - cursor: pointer;
173   - transition: border-color 0.3s ease;
174   - }
175   - }
  145 + h4 {
  146 + margin: 0 0 4px;
  147 + font-size: 14px;
  148 + line-height: 22px;
  149 + color: @text-color;
176 150 }
177 151
178   - .pay-select {
179   - width: 20%;
  152 + p {
  153 + color: @text-color;
180 154 }
181 155
182   - .pay-input {
183   - width: 70%;
  156 + .device-icon-style {
  157 + :deep .ant-upload-select-picture-card {
  158 + display: inherit;
  159 + float: none;
  160 + width: 4.9vw;
  161 + height: 9.5vh;
  162 + margin-right: 8px;
  163 + text-align: center;
  164 + vertical-align: top;
  165 + background-color: #fafafa;
  166 + border: 1px dashed #d9d9d9;
  167 + cursor: pointer;
  168 + transition: border-color 0.3s ease;
  169 + }
184 170 }
  171 +}
  172 +
  173 +.pay-select {
  174 + width: 20%;
  175 +}
  176 +
  177 +.pay-input {
  178 + width: 70%;
  179 +}
185 180 </style>
... ...
... ... @@ -4,7 +4,7 @@ import { findDictItemByCode } from '/@/api/system/dict';
4 4
5 5 export const step1Schemas: FormSchema[] = [
6 6 {
7   - field: 'name',
  7 + field: 'image',
8 8 label: '上传图片',
9 9 component: 'Input',
10 10 slot: 'imageSelect',
... ... @@ -14,9 +14,12 @@ export const step1Schemas: FormSchema[] = [
14 14 label: '配置名称',
15 15 required: true,
16 16 component: 'Input',
17   - componentProps: {
18   - maxLength: 255,
19   - placeholder: '请输入配置名称',
  17 + componentProps() {
  18 + return {
  19 + disabled: false,
  20 + ength: 255,
  21 + placeholder: '请输入配置名称',
  22 + };
20 23 },
21 24 },
22 25 {
... ...