<script setup>
|
import { ref, nextTick, reactive } from 'vue';
|
import { get, post, postBlob, postForm } from '@/utils/request.js'
|
import { formatMessage } from '@/utils/localeUtils.js';
|
import { message } from 'ant-design-vue';
|
import {
|
MinusCircleOutlined,
|
} from "@ant-design/icons-vue";
|
|
const formTable = ref(null);
|
const submitButton = ref(null);
|
const open = ref(false);
|
const initFormData = {}
|
let formData = ref([]);
|
|
const dynamicField = reactive({
|
col: [],
|
});
|
|
const removeCol = item => {
|
const index = dynamicField.col.indexOf(item);
|
if (index !== -1) {
|
dynamicField.col.splice(index, 1);
|
}
|
};
|
const addCol = () => {
|
dynamicField.col.push({
|
name: '',
|
type: '',
|
require: false,
|
desc: '',
|
language: '',
|
});
|
};
|
|
const emit = defineEmits(['tableReload'])
|
|
const handleOk = (e) => {
|
nextTick(() => {
|
setTimeout(() => {
|
submitButton.value.$el.click();
|
}, 100);
|
});
|
};
|
|
const onFinish = values => {
|
// console.log('Success:', values);
|
// console.log(dynamicField);
|
open.value = false;
|
// post('/api/mat/addField', dynamicField).then((resp) => {
|
// let result = resp.data;
|
// if (result.code === 200) {
|
// message.success(isSave.value ? formatMessage('page.add.success', '新增成功') : formatMessage('page.update.success', '更新成功'));
|
// } else {
|
// message.error(result.msg);
|
// }
|
// emit('tableReload', 'reload')
|
// nextTick(() => {
|
// formTable.value.resetFields()
|
// })
|
// })
|
};
|
const onFinishFailed = errorInfo => {
|
console.log('Failed:', errorInfo);
|
};
|
|
|
defineExpose({
|
open,
|
})
|
|
</script>
|
|
<script>
|
export default {
|
name: '商品档案-field'
|
}
|
</script>
|
|
<template>
|
<div>
|
<a-modal v-model:open="open"
|
:title="formatMessage('page.add.field', '添加字段')" @ok="handleOk"
|
style="width: 600px;">
|
<a-form :model="formData" ref="formTable" name="formTable" :label-col="{ span: 8 }"
|
:wrapper-col="{ span: 16 }" style="display: flex;justify-content: space-between;flex-wrap: wrap;"
|
autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
|
<div v-for="(item, index) in dynamicField.col" :key="item.id"
|
style="display: flex;justify-content: space-between;flex-wrap: wrap;">
|
<a-form-item :label="formatMessage('dynamicField.name', '字段')" :name="['col-name', index,]"
|
style="width: 250px;">
|
<a-input v-model:value="item.name" />
|
</a-form-item>
|
<a-form-item :label="formatMessage('dynamicField.type', '类型')" :name="['col-type', index]"
|
style="width: 250px;">
|
<a-input v-model:value="item.type"/>
|
</a-form-item>
|
<a-form-item :label="formatMessage('dynamicField.desc', '描述')" :name="['col-desc', index]"
|
style="width: 250px;">
|
<a-input v-model:value="item.desc"/>
|
</a-form-item>
|
<a-form-item :label="formatMessage('dynamicField.language', '国际化')"
|
:name="['col-language', index]" style="width: 250px;">
|
<a-input v-model:value="item.language"/>
|
</a-form-item>
|
<a-form-item :label="formatMessage('dynamicField.delete', '删除')"
|
:name="['col-delete', index]" style="width: 250px;">
|
<MinusCircleOutlined @click="removeCol(item)" />
|
</a-form-item>
|
</div>
|
|
<a-form-item>
|
<a-button type="primary" html-type="submit" ref="submitButton"
|
style="visibility: hidden;">Submit</a-button>
|
</a-form-item>
|
|
</a-form>
|
|
<a-button type="dashed" style="width: 100%" @click="addCol">
|
<PlusOutlined />
|
{{ formatMessage('page.add.field', '添加字段') }}
|
</a-button>
|
</a-modal>
|
</div>
|
</template>
|
|
<style></style>
|
