Merge branch 'dev' of http://60.209.125.238:20010/lijingjia/ds-wms-client-web into dev
张同海
7 months ago
commit
02c42d433f
@ -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,102 @@
|
|||||||
|
<!--
|
||||||
|
* @Description:
|
||||||
|
* @Author: lijj
|
||||||
|
* @Date: 2024-04-22 09:04:38
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<BasicModal
|
||||||
|
:use-wrapper="true"
|
||||||
|
:title="getTitle"
|
||||||
|
width="90%"
|
||||||
|
@register="registerModal"
|
||||||
|
@ok="handleSave"
|
||||||
|
>
|
||||||
|
<ds-form v-if="getVisible" 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 rowId = ref('')
|
||||||
|
const content = ref({})
|
||||||
|
var postData = {}
|
||||||
|
const FormDragRef = ref()
|
||||||
|
const { createMessage } = useMessage()
|
||||||
|
const [registerModal, { setModalProps, closeModal, getVisible }] = 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 })
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async function refresh() {
|
||||||
|
const res: API.DataResult = await getCodeGoodsTypeInfo({ id: unref(rowId) })
|
||||||
|
if (res.succeeded) {
|
||||||
|
await setFieldsValue({
|
||||||
|
...res.data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,257 @@
|
|||||||
|
<!--
|
||||||
|
* @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 () => {
|
||||||
|
const list = JSON.parse(JSON.stringify(formItems.list))
|
||||||
|
if (list && list.length) {
|
||||||
|
list.forEach(item => {
|
||||||
|
if (item?.options) {
|
||||||
|
delete item.options
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (!formDisable.value) {
|
||||||
|
const flag = await new Promise((resolve) => {
|
||||||
|
form.value.validate()
|
||||||
|
.then(() => {
|
||||||
|
return resolve(list)
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
return resolve(false)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
return flag
|
||||||
|
} else {
|
||||||
|
return 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