|
@@ -2,34 +2,28 @@
|
|
|
<BasicModal
|
|
|
v-bind="$attrs"
|
|
|
@register="register"
|
|
|
- :title="t('routes.devices.editCamera')"
|
|
|
+ title="新增相机"
|
|
|
@visible-change="handleVisibleChange"
|
|
|
+ @cancel="resetFields"
|
|
|
@ok="handleSubmit"
|
|
|
>
|
|
|
<div class="pt-2px pr-3px">
|
|
|
- <BasicForm @register="registerForm" />
|
|
|
+ <BasicForm @register="registerForm" :model="model" >
|
|
|
+ <template #text="{ model, field }">
|
|
|
+ {{ model[field] }}
|
|
|
+ </template>
|
|
|
+ </BasicForm>
|
|
|
</div>
|
|
|
</BasicModal>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
- import { defineComponent, ref, nextTick, onMounted } from 'vue';
|
|
|
+ import { defineComponent, ref, nextTick, onMounted, reactive } from 'vue';
|
|
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
|
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
- // allCompanyApi
|
|
|
- import { editCameraApi } from '/@/api/device/list';
|
|
|
+ import { uploadApi, AddAndUpload } from '/@/api/product/index';
|
|
|
import { useI18n } from '/@/hooks/web/useI18n';
|
|
|
|
|
|
- // address: "11111"
|
|
|
- // balance: "111"
|
|
|
- // cameraType: "4"
|
|
|
- // childName: "11111"
|
|
|
- // companyId: 1146
|
|
|
- // orderSn: "1111"
|
|
|
- // own: "0"
|
|
|
- // rnd: 0.9923218970879999
|
|
|
- // snCode: "1111"
|
|
|
- // wifiName: "1111"
|
|
|
const { t } = useI18n();
|
|
|
export default defineComponent({
|
|
|
components: { BasicModal, BasicForm },
|
|
@@ -39,158 +33,113 @@
|
|
|
emits: ['update', 'register'],
|
|
|
setup(props, { emit }) {
|
|
|
const modelRef = ref({});
|
|
|
+ const fileFlow = reactive({
|
|
|
+ file:null
|
|
|
+ })
|
|
|
const { createMessage } = useMessage();
|
|
|
const schemas: FormSchema[] = [
|
|
|
{
|
|
|
- field: 'cameraId',
|
|
|
+ field: 'type',
|
|
|
component: 'Input',
|
|
|
- label: 'id',
|
|
|
- show: false,
|
|
|
- },
|
|
|
- {
|
|
|
- field: 'own',
|
|
|
- component: 'Select',
|
|
|
- label: t('routes.devices.own'),
|
|
|
+ label: t('routes.product.types'),
|
|
|
+ slot: 'text',
|
|
|
colProps: {
|
|
|
span: 24,
|
|
|
},
|
|
|
- componentProps: {
|
|
|
- // disabled: true,
|
|
|
- options: [0, 2, 1, 3].map((ele) => {
|
|
|
- return { value: ele, key: ele, label: renderOwnTypeLabel(ele) };
|
|
|
- }),
|
|
|
- },
|
|
|
- required: true,
|
|
|
+ // required: true,
|
|
|
},
|
|
|
{
|
|
|
- field: 'cameraType',
|
|
|
- component: 'Select',
|
|
|
- label: t('routes.devices.cameraType'),
|
|
|
- required: true,
|
|
|
- colProps: {
|
|
|
- span: 24,
|
|
|
- },
|
|
|
- componentProps: {
|
|
|
- disabled: true,
|
|
|
- options: [4, 1, 9, 10, 6].map((ele) => {
|
|
|
- return { value: ele, key: ele, label: rendercameraTypeLabel(ele) };
|
|
|
- }),
|
|
|
- // onChange: function (val) {
|
|
|
- // console.log('appendSchemaByField', val);
|
|
|
- // if (val !== 6) {
|
|
|
- // appendSchemaByField(
|
|
|
- // {
|
|
|
- // field: 'snCode',
|
|
|
- // component: 'Input',
|
|
|
- // label: t('routes.devices.snCode'),
|
|
|
- // required: true,
|
|
|
- // colProps: {
|
|
|
- // span: 24,
|
|
|
- // },
|
|
|
- // },
|
|
|
- // 'address',
|
|
|
- // );
|
|
|
- // } else {
|
|
|
- // removeSchemaByFiled('snCode');
|
|
|
- // }
|
|
|
- // },
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- field: 'childName',
|
|
|
+ field: 'version',
|
|
|
component: 'Input',
|
|
|
- label: t('routes.devices.childName'),
|
|
|
+ label: t('routes.product.version'),
|
|
|
required: true,
|
|
|
colProps: {
|
|
|
span: 24,
|
|
|
},
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ // @ts-ignore
|
|
|
+ validator: async (rule, value) => {
|
|
|
+ if (!value) {
|
|
|
+ return Promise.reject(t('common.inputText')+t('routes.product.version'));
|
|
|
+ }
|
|
|
+ if(/.*[\u4e00-\u9fa5]+.*$/.test(value)){
|
|
|
+ /* eslint-disable-next-line */
|
|
|
+ return Promise.reject('不支持中文字符');
|
|
|
+ }
|
|
|
+ return Promise.resolve();
|
|
|
+ },
|
|
|
+ trigger: 'change',
|
|
|
+ },
|
|
|
+ ],
|
|
|
componentProps: {
|
|
|
- disabled: true,
|
|
|
+ maxLength: 15,
|
|
|
+ onChange: (data) => {
|
|
|
+ console.log('data', data);
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- field: 'wifiName',
|
|
|
+ field: 'minVersion',
|
|
|
component: 'Input',
|
|
|
- label: t('routes.devices.wifiName'),
|
|
|
+ label: t('routes.product.minVersion'),
|
|
|
required: true,
|
|
|
- componentProps: {
|
|
|
- disabled: true,
|
|
|
- },
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ // @ts-ignore
|
|
|
+ validator: async (rule, value) => {
|
|
|
+ const regPos = /.*[\u4e00-\u9fa5]+.*$/; // 非中文
|
|
|
+ if (!value) {
|
|
|
+ return Promise.reject(t('common.inputText')+t('routes.product.minVersion'));
|
|
|
+ }
|
|
|
+ if (regPos.test(value)) {
|
|
|
+ /* eslint-disable-next-line */
|
|
|
+ return Promise.reject('不支持中文字符');
|
|
|
+ }
|
|
|
+ return Promise.resolve();
|
|
|
+ },
|
|
|
+ trigger: 'change',
|
|
|
+ },
|
|
|
+ ],
|
|
|
colProps: {
|
|
|
span: 24,
|
|
|
},
|
|
|
},
|
|
|
- // {
|
|
|
- // field: 'address',
|
|
|
- // component: 'Input',
|
|
|
- // required: true,
|
|
|
- // label: t('routes.devices.address'),
|
|
|
- // componentProps: {
|
|
|
- // disabled: true,
|
|
|
- // },
|
|
|
- // colProps: {
|
|
|
- // span: 24,
|
|
|
- // },
|
|
|
- // },
|
|
|
{
|
|
|
- field: 'snCode',
|
|
|
- component: 'Input',
|
|
|
- label: t('routes.devices.snCode'),
|
|
|
+ field: 'description',
|
|
|
+ component: 'InputTextArea',
|
|
|
required: true,
|
|
|
- componentProps: {
|
|
|
- disabled: true,
|
|
|
- },
|
|
|
- ifShow: ({ model }) => {
|
|
|
- console.log('record', model.cameraType);
|
|
|
-
|
|
|
- return model.cameraType && model.cameraType !== 6;
|
|
|
- },
|
|
|
+ label: t('routes.product.description'),
|
|
|
colProps: {
|
|
|
span: 24,
|
|
|
},
|
|
|
},
|
|
|
// {
|
|
|
- // field: 'balance',
|
|
|
- // component: 'Input',
|
|
|
- // label: t('routes.devices.balance'),
|
|
|
- // colProps: {
|
|
|
- // span: 24,
|
|
|
+ // field: 'file',
|
|
|
+ // component: 'Upload',
|
|
|
+ // label: t('routes.product.file'),
|
|
|
+ // required: true,
|
|
|
+ // rules: [{ required: true, message: t('common.uploadMessge') }],
|
|
|
+ // itemProps: {
|
|
|
+ // validateTrigger: 'onBlur',
|
|
|
// },
|
|
|
- // },
|
|
|
-
|
|
|
- // {
|
|
|
- // field: 'companyId',
|
|
|
- // component: 'ApiSelect',
|
|
|
- // label: t('routes.devices.companyId'),
|
|
|
// componentProps: {
|
|
|
- // api: allCompanyApi,
|
|
|
- // numberToString: true,
|
|
|
- // labelField: 'companyName',
|
|
|
- // valueField: 'id',
|
|
|
- // immediate: true,
|
|
|
- // params: {
|
|
|
- // page: 1,
|
|
|
- // limit: 1000,
|
|
|
+ // api: uploadApi,
|
|
|
+ // maxNumber: 1,
|
|
|
+ // maxSize: 1000,
|
|
|
+ // fileFlow:true,
|
|
|
+ // accept: ['4dage'],
|
|
|
+ // afterFetch: function (data) {
|
|
|
+ // console.log('uploadApi',data)
|
|
|
+ // Reflect.set(data, 'url', data.file);
|
|
|
+ // fileFlow.file = data.file
|
|
|
+ // return data;
|
|
|
// },
|
|
|
// },
|
|
|
- // colProps: {
|
|
|
- // span: 24,
|
|
|
- // },
|
|
|
- // },
|
|
|
];
|
|
|
- const [
|
|
|
- registerForm,
|
|
|
- {
|
|
|
- // getFieldsValue,
|
|
|
- // validateFields,
|
|
|
- // appendSchemaByField,
|
|
|
- // removeSchemaByFiled,
|
|
|
- setFieldsValue,
|
|
|
- validate,
|
|
|
- // setProps
|
|
|
- },
|
|
|
- ] = useForm({
|
|
|
+ const [registerForm, { validate, resetFields, setFieldsValue }] = useForm({
|
|
|
labelWidth: 120,
|
|
|
schemas,
|
|
|
showActionButtonGroup: false,
|
|
@@ -205,14 +154,12 @@
|
|
|
});
|
|
|
function renderOwnTypeLabel(type: number): string {
|
|
|
switch (type) {
|
|
|
- case 0:
|
|
|
- return t('routes.devices.ownName.0');
|
|
|
case 2:
|
|
|
- return t('routes.devices.ownName.2');
|
|
|
+ return t('routes.product.type.2');
|
|
|
case 1:
|
|
|
- return t('routes.devices.ownName.1');
|
|
|
+ return t('routes.product.type.1');
|
|
|
case 3:
|
|
|
- return t('routes.devices.ownName.3');
|
|
|
+ return t('routes.product.type.3');
|
|
|
default:
|
|
|
return '';
|
|
|
}
|
|
@@ -234,25 +181,31 @@
|
|
|
}
|
|
|
}
|
|
|
function onDataReceive(data) {
|
|
|
- console.log('Data Received', data);
|
|
|
+ modelRef.value = data
|
|
|
+ console.log('onDataReceive',data)
|
|
|
+ resetFields();
|
|
|
setFieldsValue({
|
|
|
...data,
|
|
|
- cameraId: Number(data.id),
|
|
|
- cameraType: Number(data.cameraType),
|
|
|
+ type:renderOwnTypeLabel(Number(data.type)),
|
|
|
});
|
|
|
}
|
|
|
const handleSubmit = async () => {
|
|
|
- // console.log('getFieldsValue()', getFieldsValue());
|
|
|
try {
|
|
|
- const values = await validate();
|
|
|
- console.log('values', values);
|
|
|
- if (values) {
|
|
|
- const res = await editCameraApi(values);
|
|
|
- emit('update');
|
|
|
- console.log('res', res);
|
|
|
- createMessage.success(t('common.optSuccess'));
|
|
|
- closeModal();
|
|
|
+ const params = await validate();
|
|
|
+ const apiData = {
|
|
|
+ data:{
|
|
|
+ ...params as any,
|
|
|
+ type:modelRef.value,
|
|
|
+ file:fileFlow.file,
|
|
|
+ }
|
|
|
}
|
|
|
+ console.log('res', apiData);
|
|
|
+ const res = await AddAndUpload(apiData);
|
|
|
+ console.log('res', res);
|
|
|
+ closeModal();
|
|
|
+ resetFields();
|
|
|
+ createMessage.success(t('common.optSuccess'));
|
|
|
+ emit('update');
|
|
|
} catch (error) {
|
|
|
console.log('not passing', error);
|
|
|
}
|
|
@@ -260,7 +213,6 @@
|
|
|
function handleVisibleChange(v) {
|
|
|
v && props.userData && nextTick(() => onDataReceive(props.userData));
|
|
|
}
|
|
|
-
|
|
|
return {
|
|
|
register,
|
|
|
rendercameraTypeLabel,
|
|
@@ -268,9 +220,11 @@
|
|
|
schemas,
|
|
|
registerForm,
|
|
|
model: modelRef,
|
|
|
+ fileFlow,
|
|
|
handleVisibleChange,
|
|
|
handleSubmit,
|
|
|
addListFunc,
|
|
|
+ resetFields,
|
|
|
t,
|
|
|
};
|
|
|
},
|