表单设置
parent
5f061ddf33
commit
5f4931250f
@ -1,110 +0,0 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
:use-wrapper="true"
|
||||
title="表单设置"
|
||||
width="50%"
|
||||
@register="registerModal"
|
||||
@ok="handleSave"
|
||||
>
|
||||
<BasicForm @register="registerForm" />
|
||||
<!--右下角按钮-->
|
||||
<template #footer>
|
||||
<a-button
|
||||
pre-icon="ant-design:close-outlined"
|
||||
type="warning"
|
||||
:loading="loading"
|
||||
ghost
|
||||
style="margin-right: 0.8rem"
|
||||
@click="closeModal"
|
||||
>取消</a-button
|
||||
>
|
||||
<a-button
|
||||
type="success"
|
||||
:loading="loading"
|
||||
pre-icon="ant-design:check-outlined"
|
||||
style="margin-right: 0.8rem"
|
||||
@click="handleSave(true)"
|
||||
>
|
||||
确定
|
||||
</a-button>
|
||||
</template>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref, h } from 'vue'
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal'
|
||||
import { BasicForm, useForm } from '/@/components/Form/index'
|
||||
// import { formSchema } from './columns'
|
||||
import { editCodeGoodsType, getCodeGoodsTypeInfo } from './api'
|
||||
import { useMessage } from '/@/hooks/web/useMessage'
|
||||
import { Icon } from '/@/components/Icon'
|
||||
import { useModal } from '/@/components/Modal'
|
||||
import { getColumns } from '/@/api/system/role'
|
||||
const props = defineProps({
|
||||
schemaArr: { type: Array },
|
||||
})
|
||||
let formSchema = props.schemaArr
|
||||
const [register, { openModal }] = useModal()
|
||||
// 声明Emits
|
||||
const emit = defineEmits(['contentOk', 'register'])
|
||||
const isUpdate = ref(true)
|
||||
const loading = ref(false)
|
||||
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
|
||||
labelWidth: 100,
|
||||
schemas: formSchema,
|
||||
showActionButtonGroup: false,
|
||||
})
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
resetFields()
|
||||
setModalProps({ confirmLoading: false, loading: true })
|
||||
isUpdate.value = !!data?.isUpdate
|
||||
if (unref(isUpdate)) {
|
||||
let obj = {}
|
||||
JSON.parse(data.record.content).forEach((e) => {
|
||||
obj[`${e.field}-defaultValue`] = e.defaultValue
|
||||
obj[`${e.field}-required`] = e.required
|
||||
obj[`${e.field}-show`] = e.show
|
||||
})
|
||||
setFieldsValue(obj)
|
||||
setModalProps({ confirmLoading: false })
|
||||
} else {
|
||||
setFieldsValue({ permissionIdentity: unref(2) })
|
||||
}
|
||||
setModalProps({ loading: false })
|
||||
})
|
||||
|
||||
async function handleSave(exit) {
|
||||
try {
|
||||
const values = await validate()
|
||||
setModalProps({ confirmLoading: true, loading: true })
|
||||
// TODO custom api
|
||||
console.log(values)
|
||||
let Arr = []
|
||||
Object.keys(values).forEach((e) => {
|
||||
let type = true
|
||||
Arr.forEach((item) => {
|
||||
if (item.field == e.split('-')[0]) {
|
||||
item[e.split('-')[1]] = values[e]
|
||||
type = false
|
||||
}
|
||||
})
|
||||
if (type) {
|
||||
let obj = {
|
||||
field: e.split('-')[0],
|
||||
}
|
||||
obj[e.split('-')[1]] = values[e]
|
||||
Arr.push(obj)
|
||||
}
|
||||
|
||||
// console.log()
|
||||
})
|
||||
emit('contentOk', JSON.stringify(Arr))
|
||||
|
||||
exit && closeModal()
|
||||
} finally {
|
||||
// loading.value = false;
|
||||
setModalProps({ confirmLoading: false, loading: false })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,230 +0,0 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
:use-wrapper="true"
|
||||
:title="getTitle"
|
||||
width="35%"
|
||||
@register="registerModal"
|
||||
@ok="handleSave"
|
||||
>
|
||||
<BasicForm @register="registerForm" />
|
||||
<!--右下角按钮-->
|
||||
<template #footer>
|
||||
<a-button
|
||||
pre-icon="ant-design:close-outlined"
|
||||
type="warning"
|
||||
:loading="loading"
|
||||
ghost
|
||||
style="margin-right: 0.8rem"
|
||||
@click="closeModal"
|
||||
>取消</a-button
|
||||
>
|
||||
<a-button
|
||||
type="success"
|
||||
:loading="loading"
|
||||
pre-icon="ant-design:check-outlined"
|
||||
style="margin-right: 0.8rem"
|
||||
@click="handleSave(false)"
|
||||
>仅保存</a-button
|
||||
>
|
||||
<a-button
|
||||
pre-icon="ant-design:check-circle-outlined"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleSave(true)"
|
||||
>保存并关闭</a-button
|
||||
>
|
||||
</template>
|
||||
</BasicModal>
|
||||
<Modal v-if="ModalType" :schema-arr="schemaArr" @register="register" @contentOk="contentOk" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref, h } from 'vue'
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal'
|
||||
import { BasicForm, useForm } from '/@/components/Form/index'
|
||||
import { formSchema } from './columns'
|
||||
import { editCodeGoodsType, getCodeGoodsTypeInfo } from './api'
|
||||
import { useMessage } from '/@/hooks/web/useMessage'
|
||||
import { Icon } from '/@/components/Icon'
|
||||
import { useModal } from '/@/components/Modal'
|
||||
import Modal from './Modal.vue'
|
||||
import { getColumnsByClient } from '/@/views/baseinfo/formcopy/api'
|
||||
const [register, { openModal }] = useModal()
|
||||
// 声明Emits
|
||||
const emit = defineEmits(['success', 'register'])
|
||||
const isUpdate = ref(true)
|
||||
const loading = ref(false)
|
||||
const rowId = ref('')
|
||||
const schemaArr = ref([])
|
||||
const ModalType = ref(false)
|
||||
const { createMessage } = useMessage()
|
||||
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
|
||||
labelWidth: 100,
|
||||
schemas: formSchema,
|
||||
showActionButtonGroup: false,
|
||||
})
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
resetFields()
|
||||
setModalProps({ confirmLoading: false, loading: true })
|
||||
isUpdate.value = !!data?.isUpdate
|
||||
if (unref(isUpdate)) {
|
||||
// setModalProps({ confirmLoading: true });
|
||||
rowId.value = data.record.id
|
||||
const res: API.DataResult = await getCodeGoodsTypeInfo({ id: unref(rowId) })
|
||||
if (res.succeeded) {
|
||||
console.log(res, 2222)
|
||||
setFieldsValue({
|
||||
...res.data,
|
||||
})
|
||||
// console.log('返回数据Form', getFieldsValue());
|
||||
// setFieldsValue({ trainId: unref(res.data.trainId) });
|
||||
}
|
||||
// setModalProps({ confirmLoading: false });
|
||||
} else {
|
||||
setFieldsValue({ permissionIdentity: unref(2) })
|
||||
}
|
||||
updateSchema({
|
||||
field: 'setting',
|
||||
label: '',
|
||||
component: 'Input',
|
||||
colProps: { span: 2 },
|
||||
// 通过函数渲染一个 Input
|
||||
render: ({ model, field }) => {
|
||||
return h(Icon, {
|
||||
icon: 'ant-design:setting-filled',
|
||||
style: { marginLeft: '10px', cursor: 'pointer' },
|
||||
// value: model[field],
|
||||
// onChange: (e: ChangeEvent) => {
|
||||
// model[field] = e.target.value
|
||||
// },
|
||||
onClick: async (e) => {
|
||||
if (model.columnView) {
|
||||
schemaArr.value = []
|
||||
let schemaA = []
|
||||
const res: API.DataResult = await getColumnsByClient({
|
||||
tableViewName: model.columnView,
|
||||
})
|
||||
// const res: API.DataResult = await getCodeGoodsTypeInfo({ id: unref(rowId) })
|
||||
if (res.succeeded) {
|
||||
res.data.forEach((e) => {
|
||||
schemaA.push(
|
||||
...[
|
||||
{
|
||||
field: `divider-${e.dbColumnName}`,
|
||||
component: 'Divider',
|
||||
label: e.columnDescription,
|
||||
colProps: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: `${e.dbColumnName}-defaultValue`,
|
||||
label: '默认值',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
defaultValue: '',
|
||||
},
|
||||
{
|
||||
field: `${e.dbColumnName}-required`,
|
||||
label: '是否必填',
|
||||
component: 'RadioButtonGroup',
|
||||
defaultValue: false,
|
||||
colProps: { span: 8 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '是', value: true },
|
||||
{ label: '否', value: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: `${e.dbColumnName}-show`,
|
||||
label: '是否显示',
|
||||
component: 'RadioButtonGroup',
|
||||
defaultValue: false,
|
||||
colProps: { span: 8 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '是', value: true },
|
||||
{ label: '否', value: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
)
|
||||
// schemaA.push({
|
||||
// field: e.dbColumnName,
|
||||
// label: e.columnDescription,
|
||||
// defaultValue: '',
|
||||
// show: true,
|
||||
// required: false,
|
||||
// })
|
||||
})
|
||||
schemaArr.value = schemaA
|
||||
}
|
||||
ModalType.value = true
|
||||
setTimeout(() => {
|
||||
openModal(true, {
|
||||
record: model,
|
||||
isUpdate: model.content ? true : false,
|
||||
})
|
||||
}, 300)
|
||||
} else {
|
||||
createMessage.warning('请先选择中文视图名')
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
})
|
||||
setModalProps({ loading: false })
|
||||
})
|
||||
function contentOk(data) {
|
||||
console.log(data)
|
||||
setFieldsValue({
|
||||
content: data,
|
||||
})
|
||||
}
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增表单设置' : '编辑表单设置'))
|
||||
|
||||
async function handleSave(exit) {
|
||||
try {
|
||||
const values = await validate()
|
||||
console.log(values,111)
|
||||
setModalProps({ confirmLoading: true, loading: true })
|
||||
// TODO custom api
|
||||
console.log(values)
|
||||
// loading.value = true;
|
||||
const res: API.DataResult = await editCodeGoodsType(values)
|
||||
console.log(res)
|
||||
if (res.succeeded) {
|
||||
createMessage.success(res.message)
|
||||
emit('success')
|
||||
//刷新页面
|
||||
if (!exit) {
|
||||
if (unref(isUpdate)) {
|
||||
await refresh()
|
||||
} else {
|
||||
rowId.value = res.data
|
||||
isUpdate.value = true
|
||||
await refresh()
|
||||
}
|
||||
}
|
||||
} else {
|
||||
createMessage.error(res.message)
|
||||
}
|
||||
ModalType.value = false
|
||||
exit && closeModal()
|
||||
} finally {
|
||||
// loading.value = false;
|
||||
setModalProps({ confirmLoading: false, loading: false })
|
||||
}
|
||||
}
|
||||
async function refresh() {
|
||||
const res: API.DataResult = await getCodeGoodsTypeInfo({ id: unref(rowId) })
|
||||
if (res.succeeded) {
|
||||
await setFieldsValue({
|
||||
...res.data,
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
:use-wrapper="true"
|
||||
:title="getTitle"
|
||||
width="90%"
|
||||
@register="registerModal"
|
||||
@ok="handleSave"
|
||||
>
|
||||
{{ $attrs }}
|
||||
<ds-form ref="FormDragRef" :content="content" />
|
||||
<!--右下角按钮-->
|
||||
<template #footer>
|
||||
<a-button
|
||||
pre-icon="ant-design:close-outlined"
|
||||
type="warning"
|
||||
ghost
|
||||
style="margin-right: 0.8rem"
|
||||
@click="closeModal"
|
||||
>
|
||||
取消
|
||||
</a-button>
|
||||
<a-button
|
||||
type="success"
|
||||
pre-icon="ant-design:check-outlined"
|
||||
style="margin-right: 0.8rem"
|
||||
@click="handleSave(false)"
|
||||
>
|
||||
仅保存
|
||||
</a-button>
|
||||
<a-button
|
||||
pre-icon="ant-design:check-circle-outlined"
|
||||
type="primary"
|
||||
@click="handleSave(true)"
|
||||
>
|
||||
保存并关闭
|
||||
</a-button>
|
||||
</template>
|
||||
</BasicModal>
|
||||
<!-- <Modal v-if="ModalType" :schema-arr="schemaArr" @register="register" @contentOk="contentOk" /> -->
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref, defineEmits } from 'vue'
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal'
|
||||
import { editCodeGoodsType, getCodeGoodsTypeInfo } from './../api'
|
||||
import { useMessage } from '/@/hooks/web/useMessage'
|
||||
// 引入表单区域的回显组件
|
||||
import DsForm from './form.vue'
|
||||
// 声明Emits
|
||||
const emit = defineEmits(['success', 'register'])
|
||||
const isUpdate = ref(true)
|
||||
const loading = ref(false)
|
||||
const rowId = ref('')
|
||||
const content = ref({})
|
||||
var postData = {}
|
||||
const FormDragRef = ref()
|
||||
const { createMessage } = useMessage()
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
setModalProps({ confirmLoading: false, loading: true })
|
||||
isUpdate.value = !!data?.isUpdate
|
||||
if (unref(isUpdate)) {
|
||||
// setModalProps({ confirmLoading: true });
|
||||
rowId.value = data.record.id
|
||||
const res: API.DataResult = await getCodeGoodsTypeInfo({ id: unref(rowId) })
|
||||
if (res.succeeded) {
|
||||
postData = res.data
|
||||
content.value = JSON.parse(res.data.content)
|
||||
}
|
||||
}
|
||||
setModalProps({ loading: false })
|
||||
})
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增表单设置' : '编辑表单设置'))
|
||||
|
||||
async function handleSave(exit) {
|
||||
const contents = await FormDragRef.value.validate()
|
||||
if (contents) {
|
||||
setModalProps({ confirmLoading: true, loading: true })
|
||||
postData.content = JSON.stringify({ columns: contents })
|
||||
editCodeGoodsType(postData).then(res => {
|
||||
if (exit) {
|
||||
closeModal()
|
||||
}
|
||||
createMessage.success(res.message)
|
||||
setModalProps({ confirmLoading: false, loading: false })
|
||||
})
|
||||
.catch((err) => {
|
||||
createMessage.error(err.message)
|
||||
setModalProps({ confirmLoading: false, loading: false })
|
||||
})
|
||||
}
|
||||
// try {
|
||||
// const values = await validate()
|
||||
// console.log(values,111)
|
||||
// setModalProps({ confirmLoading: true, loading: true })
|
||||
// // TODO custom api
|
||||
// console.log(values)
|
||||
// // loading.value = true;
|
||||
// const res: API.DataResult = await editCodeGoodsType(values)
|
||||
// console.log(res)
|
||||
// if (res.succeeded) {
|
||||
// createMessage.success(res.message)
|
||||
// emit('success')
|
||||
// //刷新页面
|
||||
// if (!exit) {
|
||||
// if (unref(isUpdate)) {
|
||||
// await refresh()
|
||||
// } else {
|
||||
// rowId.value = res.data
|
||||
// isUpdate.value = true
|
||||
// await refresh()
|
||||
// }
|
||||
// }
|
||||
// } else {
|
||||
// createMessage.error(res.message)
|
||||
// }
|
||||
// ModalType.value = false
|
||||
// exit && closeModal()
|
||||
// } finally {
|
||||
// // loading.value = false;
|
||||
// setModalProps({ confirmLoading: false, loading: false })
|
||||
// }
|
||||
}
|
||||
async function refresh() {
|
||||
const res: API.DataResult = await getCodeGoodsTypeInfo({ id: unref(rowId) })
|
||||
if (res.succeeded) {
|
||||
await setFieldsValue({
|
||||
...res.data,
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,249 @@
|
||||
<!--
|
||||
* @Description: 基础配置 -> 表单设置 -> 表单设置弹窗内容组件
|
||||
* @Author: lijj
|
||||
* @Date: 2024-04-16 10:33:31
|
||||
-->
|
||||
<template>
|
||||
<div class="form-set-drag-box">
|
||||
<div class="table-box">
|
||||
<!-- 表单区域组件 -->
|
||||
<a-form>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-for="(item, index) in formItems.list"
|
||||
:class="{active: activeClass == item.field}"
|
||||
:key="index"
|
||||
:span="item?.colProps?.span"
|
||||
:draggable="true"
|
||||
@dragstart="handleDragStart($event, item)"
|
||||
@dragover.prevent="handleDragOver($event)"
|
||||
@dragenter="handleDragEnter($event, item)"
|
||||
@dragend="handleDragEnd"
|
||||
>
|
||||
<a-form-item v-if="item.field != 'id'" :label="item.label" :name="item.label" @click="chooseItem(item)">
|
||||
<div class="model-input">占位使用</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="opt-box">
|
||||
<h3>字段属性设置</h3>
|
||||
<!-- 表格操作列组件 -->
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="formItems.formData"
|
||||
:rules="rules"
|
||||
>
|
||||
<a-form-item label="字段名称（中文）" name="label">
|
||||
<a-input v-model:value="formItems.formData.label" :disabled="formDisable" placeholder="请输入" />
|
||||
</a-form-item>
|
||||
<a-form-item label="字段名称（英文）" name="enLabel">
|
||||
<a-input v-model:value="formItems.formData.enLabel" :disabled="formDisable" placeholder="请输入" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="/^InputTextArea|RadioButtonGroup|Select|Input$/.test(formItems.formData.component)" label="默认值" name="defaultValue">
|
||||
<a-select
|
||||
v-if="formItems.formData.component == 'Select' || formItems.formData.component == 'RadioButtonGroup'"
|
||||
v-model="formItems.formData.defaultValue"
|
||||
placeholder="请选择"
|
||||
:disabled="formDisable"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in formItems.formData.options"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-input v-else v-model:value="formItems.formData.defaultValue" :disabled="formDisable" placeholder="请输入" />
|
||||
</a-form-item>
|
||||
<a-form-item label="是否必填" name="required">
|
||||
<a-radio-group v-model:value="formItems.formData.required" :disabled="formDisable">
|
||||
<a-radio :value="true">是</a-radio>
|
||||
<a-radio :value="false">否</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否显示" name="show">
|
||||
<a-radio-group v-model:value="formItems.formData.show" :disabled="formDisable">
|
||||
<a-radio :value="true">是</a-radio>
|
||||
<a-radio :value="false">否</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="所占列宽(支持输入1~24)" name="colProps">
|
||||
<a-input-number
|
||||
v-model:value="formItems.formData.colProps.span"
|
||||
:min="1"
|
||||
:max="24"
|
||||
palceholder="请输入1~24的整数"
|
||||
:disabled="formDisable"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FormSchema } from '/@/components/Table'
|
||||
import { ref, reactive, defineProps, computed, watch, unref } from 'vue'
|
||||
const props = defineProps({
|
||||
// 表单字段集合
|
||||
content: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
// 左边所有字段集合
|
||||
let formItems = reactive({
|
||||
list: [],
|
||||
formData: <FormSchema> {
|
||||
colProps: {
|
||||
span: ''
|
||||
}
|
||||
}
|
||||
})
|
||||
// 右边操作表单是否禁用状态
|
||||
const formDisable = ref(true)
|
||||
// 表单
|
||||
const form = ref()
|
||||
const getProps = computed(() => {
|
||||
return { ...props }
|
||||
})
|
||||
// 表单校验规则
|
||||
const rules = {
|
||||
label: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入中文字段名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
enLabel: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入英文字段名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
// 定义拖动开始的数据容器
|
||||
let dragging = {}
|
||||
// 定义拖动结束的数据容器
|
||||
let ending = {}
|
||||
const activeClass = ref()
|
||||
// 拖动开始回调
|
||||
const handleDragStart = (e, item) => {
|
||||
dragging = item
|
||||
}
|
||||
// 选择字段触发编辑
|
||||
const chooseItem = (item) => {
|
||||
if (formItems.formData.field) {
|
||||
form.value.validate()
|
||||
.then(() => {
|
||||
formToggle(item)
|
||||
})
|
||||
} else {
|
||||
formToggle(item)
|
||||
}
|
||||
}
|
||||
const formToggle = (item) => {
|
||||
form.value.clearValidate()
|
||||
activeClass.value = item.field
|
||||
formItems.formData = item
|
||||
formDisable.value = false
|
||||
}
|
||||
// 拖动覆盖过程回调
|
||||
const handleDragOver = (e) => {
|
||||
e.dataTransfer.dropEffect = 'move'
|
||||
}
|
||||
// 拖动进入把节点改成可移动节点
|
||||
const handleDragEnter = (e, item) => {
|
||||
e.dataTransfer.effectAllowed = 'move'
|
||||
ending = item
|
||||
}
|
||||
// 拖动结束处理数据
|
||||
const handleDragEnd = () => {
|
||||
if (ending.field === dragging.field) {
|
||||
return
|
||||
}
|
||||
// 新的数组
|
||||
let newItems = [...formItems.list]
|
||||
// 拖动开始时候的节点下标
|
||||
const src = newItems.indexOf(dragging)
|
||||
// 拖动结束时候的节点下标
|
||||
const dst = newItems.indexOf(ending)
|
||||
newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]))
|
||||
formItems.list = newItems
|
||||
}
|
||||
// 表单提交
|
||||
const validate = async () => {
|
||||
if (!formDisable.value) {
|
||||
const flag = await new Promise((resolve) => {
|
||||
form.value.validate()
|
||||
.then(() => {
|
||||
return resolve(formItems.list)
|
||||
})
|
||||
.catch(() => {
|
||||
return resolve(false)
|
||||
})
|
||||
})
|
||||
return flag
|
||||
} else {
|
||||
return formItems.list
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => unref(getProps).content,
|
||||
(content) => {
|
||||
// 监听数据变化接受表单字段数据
|
||||
formItems.list = content.columns
|
||||
},
|
||||
)
|
||||
defineExpose({
|
||||
validate
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.form-set-drag-box {
|
||||
display: flex;
|
||||
.opt-box {
|
||||
width: 200px;
|
||||
border-left: 1px solid #d9d9d9;
|
||||
.ant-form-item {
|
||||
display: table-caption;
|
||||
margin: 0 0 10px 15px;
|
||||
width: 170px;
|
||||
}
|
||||
.ant-form-item-label > label {
|
||||
color: #262626;
|
||||
height: 27px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.table-box {
|
||||
padding: 0 15px;
|
||||
flex: 1;
|
||||
.ant-input-disabled {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ant-form-item {
|
||||
margin: 12px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
.model-input {
|
||||
border: 1px solid #d9d9d9;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding-left: 15px;
|
||||
color:rgba(0, 0, 0, 0.45);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue