Merge branch 'zzq' into dev
commit
26c2c2948d
|
|
@ -6,6 +6,8 @@ enum Api {
|
|||
FORMSTYPES_LIST = '/api/SysDataItemDetail/Load', //字典
|
||||
FORMS_LIST = '/api/FormScheme/LoadFormPage', //查询表单列表
|
||||
DATABASE_LIST = '/api/CodeTable/LoadCodeTablePage', //数据对象选择表
|
||||
GETIMPORTDATA_FORM = '/api/FormModule/GetTableList', // 查询导入数据表列表
|
||||
IMPORTDATABASE_TABLE = '/api/CodeTable/ImportTable?dbCode=', //导入数据表
|
||||
OUTKEY_LIST = '/api/CodeTable/GetForms', //获取数据表
|
||||
GETBASE_LIST = '/api/FormScheme/GetForm', //获取列表详情
|
||||
ADDFORM_DATA = '/api/FormScheme/AddForm', //新增表单设计
|
||||
|
|
@ -13,6 +15,7 @@ enum Api {
|
|||
ADDSql_DATA = '/api/FormScheme/GetDataColName?dbCode=', // 添加编辑SQL
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @description: Get sample options value
|
||||
*/
|
||||
|
|
@ -40,5 +43,11 @@ export const editFormDesignData = (params: NoOptionsParam) =>
|
|||
export const addFormSqlData = (params: NoOptionsParam) =>
|
||||
defHttp.post<AccountListGetResultModel>({ url: Api.ADDSql_DATA+params.dbCode+"&sql="+params.sql, params });
|
||||
|
||||
export const getImportBaseTableList = (params: NoOptionsParam) =>
|
||||
defHttp.get<AccountListGetResultModel>({ url: Api.GETIMPORTDATA_FORM, params });
|
||||
|
||||
export const importDataBaseTable = (params: NoOptionsParam) =>
|
||||
defHttp.post<AccountListGetResultModel>({ url: Api.IMPORTDATABASE_TABLE+params.dbCode, params });
|
||||
|
||||
|
||||
|
||||
|
|
@ -17,7 +17,7 @@ const dashboard: AppRouteModule = {
|
|||
{
|
||||
path: '/dashboard/analysis',
|
||||
name: 'Analysis',
|
||||
component: () => import('@/views/demo/onlineform/formdesign/index.vue'),
|
||||
component: () => import('@/views/dashboard/analysis/index.vue'),
|
||||
meta: {
|
||||
// affix: true,
|
||||
title: t('routes.dashboard.analysis'),
|
||||
|
|
|
|||
|
|
@ -7,6 +7,14 @@
|
|||
<Empty class="hint-box" v-if="!formConfig.currentItem.key" description="未选择控件" />
|
||||
<Form v-else label-align="left" layout="vertical">
|
||||
<div v-for="item of baseFormItemProps" :key="item.name">
|
||||
<template #dataTable>
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="fieldTableValue"
|
||||
:options="SelectArr"
|
||||
@change="handleFieldTableChange"
|
||||
></a-select>
|
||||
</template>
|
||||
<FormItem :label="item.label" v-if="showProps(item.exclude)">
|
||||
<component
|
||||
v-if="item.component"
|
||||
|
|
@ -72,7 +80,7 @@
|
|||
advanceFormItemProps,
|
||||
advanceFormItemColProps,
|
||||
} from '../../VFormDesign/config/formItemPropsConfig';
|
||||
|
||||
|
||||
import { Empty, Input, Form, FormItem, Switch, Checkbox, Col, SelectProps } from 'ant-design-vue';
|
||||
|
||||
import RuleProps from './RuleProps.vue';
|
||||
|
|
|
|||
|
|
@ -57,13 +57,14 @@
|
|||
visible: false,
|
||||
fApi: {} as IVFormMethods,
|
||||
});
|
||||
|
||||
console.log('jsonModal',jsonModal)
|
||||
console.log('state',state)
|
||||
/**
|
||||
* 显示Json数据弹框
|
||||
* @param jsonData
|
||||
*/
|
||||
const showModal = (jsonData: IFormConfig) => {
|
||||
// console.log('showModal-', jsonData);
|
||||
console.log('showModal-', jsonData);
|
||||
formatRules(jsonData.schemas);
|
||||
state.formConfig = jsonData as any;
|
||||
state.visible = true;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,103 @@
|
|||
<!--
|
||||
* @Description: 渲染组件，无法使用Vben的组件
|
||||
-->
|
||||
<template>
|
||||
<Modal
|
||||
title="新增数据"
|
||||
:open="visible"
|
||||
@ok="handleGetData"
|
||||
@cancel="handleCancel"
|
||||
:destroyOnClose="true"
|
||||
:width="900"
|
||||
>
|
||||
<VFormCreate
|
||||
:form-config="formConfig as any"
|
||||
v-model:fApi="fApi"
|
||||
v-model:formModel="formModel"
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<template #slotName="{ formModel, field }">
|
||||
<a-input v-model:value="formModel[field]" placeholder="我是插槽传递的输入框" />
|
||||
</template>
|
||||
</VFormCreate>
|
||||
<JsonModal ref="jsonModal" />
|
||||
</Modal>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, toRefs } from 'vue';
|
||||
import { IFormConfig } from '../../typings/v-form-component';
|
||||
import { IAnyObject } from '../../typings/base-type';
|
||||
import VFormCreate from '../VFormCreate/index.vue';
|
||||
import { formatRules } from '../../utils';
|
||||
import { IVFormMethods } from '../../hooks/useVFormMethods';
|
||||
import JsonModal from '../VFormDesign/components/JsonModal.vue';
|
||||
import { IToolbarMethods } from '../../typings/form-type';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'VFormPreview',
|
||||
components: {
|
||||
JsonModal,
|
||||
VFormCreate,
|
||||
Modal,
|
||||
},
|
||||
emits: ['renderdata'],
|
||||
setup(props, { emit }) {
|
||||
const jsonModal = ref<IToolbarMethods | null>(null);
|
||||
const state = reactive<{
|
||||
formModel: IAnyObject;
|
||||
visible: boolean;
|
||||
formConfig: IFormConfig;
|
||||
fApi: IVFormMethods;
|
||||
}>({
|
||||
formModel: {},
|
||||
formConfig: {} as IFormConfig,
|
||||
visible: false,
|
||||
fApi: {} as IVFormMethods,
|
||||
});
|
||||
|
||||
/**
|
||||
* 显示Json数据弹框
|
||||
* @param jsonData
|
||||
*/
|
||||
const showModal = (jsonData: IFormConfig) => {
|
||||
// console.log('showModal-', jsonData);
|
||||
formatRules(jsonData.schemas);
|
||||
state.formConfig = jsonData as any;
|
||||
state.visible = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取表单数据
|
||||
* @return {Promise<void>}
|
||||
*/
|
||||
const handleCancel = () => {
|
||||
state.visible = false;
|
||||
state.formModel = {};
|
||||
};
|
||||
const handleGetData = async () => {
|
||||
const _data = await state.fApi.submit?.();
|
||||
console.log('_data',_data)
|
||||
emit('renderdata', _data);
|
||||
//jsonModal.value?.showModal?.(_data)
|
||||
};
|
||||
|
||||
const onSubmit = (_data: IAnyObject) => {
|
||||
|
||||
//
|
||||
};
|
||||
const onCancel = () => {
|
||||
state.formModel = {};
|
||||
};
|
||||
return {
|
||||
handleGetData,
|
||||
handleCancel,
|
||||
...toRefs(state),
|
||||
showModal,
|
||||
jsonModal,
|
||||
onSubmit,
|
||||
onCancel,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!--
|
||||
* @Description: 使用vbenForm的功能进行渲染
|
||||
-->
|
||||
<template>
|
||||
<Modal
|
||||
title="预览(不支持布局)"
|
||||
:open="state.visible"
|
||||
@ok="handleGetData"
|
||||
@cancel="handleCancel"
|
||||
okText="获取数据"
|
||||
cancelText="关闭"
|
||||
style="top: 20px"
|
||||
:destroyOnClose="true"
|
||||
:width="900"
|
||||
>
|
||||
<BasicForm v-bind="attrs" @register="registerForm" />
|
||||
<JsonModal ref="jsonModal" />
|
||||
</Modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { BasicForm, useForm } from '@/components/Form';
|
||||
import { reactive, ref, computed } from 'vue';
|
||||
import { IFormConfig } from '../../typings/v-form-component';
|
||||
import { IAnyObject } from '../../typings/base-type';
|
||||
import JsonModal from '../VFormDesign/components/JsonModal.vue';
|
||||
import { IToolbarMethods } from '../../typings/form-type';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
|
||||
const jsonModal = ref<IToolbarMethods | null>(null);
|
||||
const state = reactive<{
|
||||
formModel: IAnyObject;
|
||||
visible: boolean;
|
||||
formConfig: IFormConfig;
|
||||
}>({
|
||||
formModel: {},
|
||||
formConfig: {} as IFormConfig,
|
||||
visible: false,
|
||||
});
|
||||
|
||||
const attrs = computed(() => {
|
||||
return {
|
||||
...state.formConfig,
|
||||
} as Recordable;
|
||||
});
|
||||
|
||||
/**
|
||||
* 显示Json数据弹框
|
||||
* @param jsonData
|
||||
*/
|
||||
const showModal = (jsonData: IFormConfig) => {
|
||||
state.formConfig = jsonData as any;
|
||||
state.visible = true;
|
||||
};
|
||||
|
||||
//表单
|
||||
const [registerForm, { validate }] = useForm();
|
||||
|
||||
const handleCancel = () => {
|
||||
state.visible = false;
|
||||
};
|
||||
/**
|
||||
* 获取表单数据
|
||||
* @return {Promise<void>}
|
||||
*/
|
||||
const handleGetData = async () => {
|
||||
let data = await validate();
|
||||
jsonModal.value?.showModal?.(data);
|
||||
};
|
||||
|
||||
defineExpose({ showModal });
|
||||
</script>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { h } from 'vue';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '分类',
|
||||
dataIndex: 'category',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'formType',
|
||||
width: 80,
|
||||
customRender: ({ record }) => {
|
||||
const status = record.formType;
|
||||
const enable = ~~status === 0;
|
||||
const color = enable ? '#67c23a' : '#e6a23c';
|
||||
const text = enable ? '常规表单' : '视图表单';
|
||||
return h(Tag, { color: color }, () => text);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
dataIndex: 'createUserName'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createDate'
|
||||
},
|
||||
// {
|
||||
// title: '备注',
|
||||
// dataIndex: 'remark',
|
||||
// },
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'key',
|
||||
label: '关键字',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<template>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction :actions="[
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
color: 'error',
|
||||
popConfirm: {
|
||||
title: '是否删除该数据',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
},
|
||||
}
|
||||
]" />
|
||||
</template>
|
||||
</template>
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="handleAddForm(eFormPreview!)"> 新增 </a-button>
|
||||
|
||||
</template>
|
||||
</BasicTable>
|
||||
|
||||
<VformRender ref="eFormPreview" :formConfig="formConfig" @renderdata="renderdata" />
|
||||
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, nextTick, unref,reactive } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { getFormGroupList,getBaseConfigList } from '@/api/formdesign/index';
|
||||
import { columns, searchFormSchema } from './index.data';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import VformRender from '../../form-design/components/VformRender/index.vue';
|
||||
import { IFormConfig,IToolbarMethods } from '../../form-design/typings/v-form-component';
|
||||
|
||||
const eFormPreview = ref<null | IToolbarMethods>(null);
|
||||
|
||||
const [registerTable, { reload, getSelectRows }] = useTable({
|
||||
title: '表单列表',
|
||||
api: getFormGroupList,
|
||||
rowKey: 'f_Id',
|
||||
columns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
beforeFetch: (data) => {
|
||||
// 接口请求前 参数处理
|
||||
var temp = {
|
||||
page: data.page,
|
||||
limit: data.limit,
|
||||
keyWord: data.key,
|
||||
category: data.f_Category
|
||||
};
|
||||
return temp;
|
||||
},
|
||||
afterFetch: (data) => {
|
||||
|
||||
},
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
actionColumn: {
|
||||
width: 180,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
// slots: { customRender: 'action' },
|
||||
fixed: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
const formConfig = ref<IFormConfig>({
|
||||
// 表单配置
|
||||
schemas: [],
|
||||
layout: 'horizontal',
|
||||
labelLayout: 'flex',
|
||||
labelWidth: 100,
|
||||
labelCol: {},
|
||||
wrapperCol: {},
|
||||
currentItem: {
|
||||
component: '',
|
||||
componentProps: {},
|
||||
},
|
||||
activeKey: 1,
|
||||
});
|
||||
|
||||
const handleAddForm = (Modal: IToolbarMethods) => {
|
||||
console.log('formConfig',formConfig)
|
||||
const config = cloneDeep(formConfig.value);
|
||||
Modal?.showModal(config);
|
||||
}
|
||||
function handleEdit(record: Recordable) {
|
||||
|
||||
}
|
||||
function handleDelete(record: Recordable) {
|
||||
// openAccountModal(true, {
|
||||
// record,
|
||||
// });
|
||||
}
|
||||
function getPublicForm(){
|
||||
getBaseConfigList({ id: "ed985a1e-b007-43d1-af14-be4e44018c8b" }).then((res: AreaRespVO[]) =>{
|
||||
let obj = JSON.parse(res.scheme.scheme)
|
||||
console.log('res',obj.formInfo)
|
||||
formConfig.value.schemas = obj.formInfo.schemas
|
||||
})
|
||||
}
|
||||
//表单填写数据
|
||||
function renderdata(e){
|
||||
console.log('renderdata',e)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getPublicForm()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -135,17 +135,30 @@
|
|||
console.log('adddata',data)
|
||||
if(data.table){
|
||||
data.table.forEach(item =>{
|
||||
arr.push(item)
|
||||
arr.push({
|
||||
field: item.field,
|
||||
name: item.name,
|
||||
relationField: item.relationField,
|
||||
relationName: item.relationName,
|
||||
type: item.type
|
||||
})
|
||||
})
|
||||
}
|
||||
if(isAddVisible.value){ //新增
|
||||
let schems
|
||||
if(saveFormDatas.value.scheme.scheme){
|
||||
schems = JSON.parse(saveFormDatas.value.scheme.scheme)
|
||||
schems = JSON.parse(saveFormDatas.value.scheme.scheme) || {
|
||||
db: arr,
|
||||
rdb: data.connect || [],
|
||||
dbCode: data.form.DbCode,
|
||||
formInfo:{}
|
||||
}
|
||||
|
||||
schems.db = arr
|
||||
schems.rdb = data.connect || [],
|
||||
schems.dbCode = data.form.DbCode
|
||||
}else{
|
||||
|
||||
schems = {
|
||||
db: arr,
|
||||
rdb: data.connect || [],
|
||||
|
|
@ -153,14 +166,14 @@
|
|||
formInfo:{}
|
||||
}
|
||||
}
|
||||
|
||||
let loginUser = localStorage.getItem('fireUserLoginName')
|
||||
saveFormDatas.value.info = data.form
|
||||
saveFormDatas.value.info.createUserName = loginUser
|
||||
saveFormDatas.value.scheme.scheme = JSON.stringify(schems)
|
||||
|
||||
console.log('add')
|
||||
console.log('add',saveFormDatas.value.scheme)
|
||||
}else{ //编辑
|
||||
console.log('edit')
|
||||
|
||||
let schems = JSON.parse(saveFormDatas.value.scheme.scheme)
|
||||
schems.db = arr
|
||||
schems.rdb = data.connect || [],
|
||||
|
|
|
|||
|
|
@ -1,95 +0,0 @@
|
|||
<template>
|
||||
<div class="m-4 mr-0 overflow-hidden bg-white">
|
||||
<BasicTree ref="asyncExpandTreeRef" title="菜单列表" toolbar search
|
||||
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" loadData :actionList="actionList"
|
||||
:renderIcon="createIcon" :clickRowToExpand="false" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }"
|
||||
:defaultExpandAll="true" @select="handleSelect" />
|
||||
<BasicModal @register="register" title="删除" :helpMessage="['提示1', '提示2']" @ok="handleSubmit">
|
||||
确认要删除菜单吗？
|
||||
</BasicModal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, h, nextTick, unref } from 'vue';
|
||||
import { BasicTree, TreeItem, TreeActionItem } from '@/components/Tree';
|
||||
import { getMenuList, deleteMenu } from '@/api/demo/system';
|
||||
import { FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import { BasicModal, useModal } from '@/components/Modal';
|
||||
import { router } from '@/router';
|
||||
const [register, { closeModal, openModal }] = useModal();
|
||||
defineOptions({ name: 'DeptTree' });
|
||||
|
||||
const emit = defineEmits(['select', 'edit']);
|
||||
|
||||
const treeData = ref < TreeItem[] > ([]);
|
||||
let selectItemId = ref('')
|
||||
const asyncExpandTreeRef = ref < Nullable < TreeActionType >> (null);
|
||||
|
||||
async function handleSubmit() {
|
||||
var query = [selectItemId.value]
|
||||
const data = await deleteMenu(query);
|
||||
closeModal();
|
||||
|
||||
}
|
||||
|
||||
async function fetch() {
|
||||
treeData.value = (await getMenuList()) as unknown as TreeItem[];
|
||||
// 展开全部
|
||||
nextTick(() => {
|
||||
unref(asyncExpandTreeRef)?.expandAll(true);
|
||||
});
|
||||
}
|
||||
|
||||
function handleSelect(keys) {
|
||||
emit('select', keys[0]);
|
||||
}
|
||||
const btnList = router.currentRoute.value.meta.elements
|
||||
const actionList: TreeActionItem[] = []
|
||||
btnList.forEach(element => {
|
||||
if (element.domId == 'btnEdit') {
|
||||
actionList.push({
|
||||
render: (node) => {
|
||||
return h(FormOutlined, {
|
||||
class: 'ml-2',
|
||||
onClick: () => {
|
||||
emit('edit', node);
|
||||
},
|
||||
});
|
||||
},
|
||||
})
|
||||
} else if (element.domId == 'btnDelete') {
|
||||
actionList.push({
|
||||
render: (node) => {
|
||||
return h(DeleteOutlined, {
|
||||
class: 'ml-2',
|
||||
onClick: () => {
|
||||
selectItemId.value = node.id
|
||||
openModal(true, {
|
||||
isUpdate: false,
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
function createIcon({ level }) {
|
||||
if (level === 1) {
|
||||
return 'ion:git-compare-outline';
|
||||
}
|
||||
if (level === 2) {
|
||||
return 'ion:home';
|
||||
}
|
||||
if (level === 3) {
|
||||
return 'ion:airplane';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
});
|
||||
defineExpose({
|
||||
fetch
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,802 +0,0 @@
|
|||
<template>
|
||||
<div class="l-rblock" >
|
||||
<div v-show="steps(0)" class="l-rblock" style="padding:24px;" >
|
||||
<div class="l-page-panel" >
|
||||
<el-form :model="formData" :rules="rules" size="mini" ref="baseInfo" label-width="88px" >
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('名称')" prop="f_Name">
|
||||
<el-input v-model="formData.f_Name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('分类')" prop="f_Category">
|
||||
<l-tree-select
|
||||
v-model="formData.f_Category"
|
||||
:placeholder="$t('请选择')"
|
||||
:options="lr_dataItemTree(lr_dataItem['FormSort'])"
|
||||
|
||||
>
|
||||
</l-tree-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('数据库')" prop="f_DbCode">
|
||||
<el-select v-model="formData.f_DbCode" :placeholder="$t('请选择')">
|
||||
<el-option-group
|
||||
v-for="group in lr_dblinkTree"
|
||||
:key="group.id"
|
||||
:label="group.label">
|
||||
<el-option
|
||||
v-for="item in group.children"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('状态')" prop="f_EnabledMark">
|
||||
<el-switch
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
v-model="formData.f_EnabledMark"
|
||||
>
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('类型')" prop="f_FormType" >
|
||||
<l-radio
|
||||
:options="[{value:0,label:$t('常规表单')},{value:1,label:$t('视图表单')}]"
|
||||
v-model="formData.f_FormType"
|
||||
|
||||
@change="handleFormTypeChange"
|
||||
>
|
||||
</l-radio>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('描述')" prop="f_Description">
|
||||
<el-input type="textarea" v-model="formData.f_Description"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
<template v-if="formData.f_FormType != 1" >
|
||||
<el-col :span="24">
|
||||
<div class="l-title" >{{$t('添加数据库表（请先选择数据库）')}}</div>
|
||||
</el-col>
|
||||
<el-col :key="1" :span="24">
|
||||
<l-edit-table
|
||||
addBtnText="添加"
|
||||
:dataSource="dbTableData"
|
||||
|
||||
@addRow="addRow"
|
||||
@deleteRow="deleteRow"
|
||||
>
|
||||
<el-table-column
|
||||
prop="type"
|
||||
:label="$t('类别')"
|
||||
width="64"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.type == 'main'" size="mini" >主表</el-tag>
|
||||
<el-tag @click="chlidTagClick(scope.row)" v-else size="mini" style="cursor: pointer;" type="warning">子表</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
:label="$t('表名')"
|
||||
minWidth="100">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="field"
|
||||
:label="$t('外键')"
|
||||
minWidth="100">
|
||||
<template v-if="scope.row.type != 'main' " slot-scope="scope">
|
||||
<el-select size="mini" v-model="scope.row.field" :placeholder="$t('请选择')">
|
||||
<el-option
|
||||
v-for="item in scope.row.columns || []"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="relationName"
|
||||
:label="$t('关联表')"
|
||||
minWidth="100">
|
||||
<template v-if="scope.row.type != 'main' " slot-scope="scope">
|
||||
<el-select size="mini" v-model="scope.row.relationName" :placeholder="$t('请选择')">
|
||||
<el-option
|
||||
v-for="item in relationTables(scope.row.name)"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="relationField"
|
||||
:label="$t('关联主键')"
|
||||
minWidth="100">
|
||||
<template v-if="scope.row.type != 'main' && scope.row.relationName " slot-scope="scope">
|
||||
<el-select size="mini" v-model="scope.row.relationField" :placeholder="$t('请选择')">
|
||||
<el-option
|
||||
v-for="item in relationTableFields(scope.row.relationName)"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</l-edit-table >
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<div class="l-title" >{{$t('添加数据库关联表，只用来做数据权限设置（请先选择数据库）')}}</div>
|
||||
</el-col>
|
||||
<el-col :key="2" :span="24">
|
||||
<l-edit-table
|
||||
addBtnText="添加"
|
||||
:dataSource="dbTableRData"
|
||||
|
||||
@addRow="addDbTableRData"
|
||||
@deleteRow="deleteDbTableRData"
|
||||
>
|
||||
<el-table-column
|
||||
prop="fname"
|
||||
:label="$t('名称')"
|
||||
minWidth="160" >
|
||||
<template slot-scope="scope" >
|
||||
<el-input size="mini" v-model="scope.row.fname" ></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
:label="$t('表名')"
|
||||
minWidth="160">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="cfield"
|
||||
:label="$t('比较字段')"
|
||||
minWidth="160">
|
||||
<template slot-scope="scope">
|
||||
<el-select size="mini" v-model="scope.row.cfield" :placeholder="$t('请选择')">
|
||||
<el-option
|
||||
v-for="item in scope.row.columns || []"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="field"
|
||||
:label="$t('外键')"
|
||||
minWidth="160">
|
||||
<template slot-scope="scope">
|
||||
<el-select size="mini" v-model="scope.row.field" :placeholder="$t('请选择')">
|
||||
<el-option
|
||||
v-for="item in scope.row.columns || []"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="relationName"
|
||||
:label="$t('关联表')"
|
||||
minWidth="160">
|
||||
<template v-if="scope.row.type != 'main' " slot-scope="scope">
|
||||
<el-select size="mini" v-model="scope.row.relationName" :placeholder="$t('请选择')">
|
||||
<el-option
|
||||
v-for="item in dbTableData"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="relationField"
|
||||
:label="$t('关联主键')"
|
||||
minWidth="160">
|
||||
<template v-if="scope.row.relationName " slot-scope="scope">
|
||||
<el-select size="mini" v-model="scope.row.relationField" :placeholder="$t('请选择')">
|
||||
<el-option
|
||||
v-for="item in relationTableFields(scope.row.relationName)"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</l-edit-table >
|
||||
</el-col>
|
||||
</template>
|
||||
<template v-else >
|
||||
<el-col :span="24">
|
||||
<div class="l-title" >{{$t('添加数据视图（请先选择数据库）')}}</div>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<l-edit-table
|
||||
addBtnText="添加"
|
||||
|
||||
:dataSource="dbTableData"
|
||||
|
||||
@addRow="addSqlData"
|
||||
@deleteRow="deleteSqlData"
|
||||
>
|
||||
|
||||
<el-table-column
|
||||
prop="type"
|
||||
:label="$t('类别')"
|
||||
width="64"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.type == 'main'" size="mini" >主</el-tag>
|
||||
<el-tag v-else size="mini" type="warning">子</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
:label="$t('名称')"
|
||||
minWidth="160" >
|
||||
<el-button type="text" slot-scope="scope" @click.stop="editSqlData(scope.row)" >{{scope.row.name}}</el-button>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="relationField"
|
||||
:label="$t('关联字段')"
|
||||
minWidth="160" >
|
||||
<el-select v-if="scope.row.type != 'main'" slot-scope="scope" size="mini" v-model="scope.row.relationField" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in sqlMainCols || []"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-table-column>
|
||||
</l-edit-table>
|
||||
</el-col>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="steps(1)" class="l-rblock" >
|
||||
<l-form-design
|
||||
:dbTables="dbTableData"
|
||||
ref="formDesign"
|
||||
></l-form-design>
|
||||
</div>
|
||||
<l-codetable-selectdialog
|
||||
:visible.sync="dbtableSelectdialog"
|
||||
:dbCode="formData.f_DbCode"
|
||||
:isOkClose="false"
|
||||
@select="dbSelect"
|
||||
>
|
||||
</l-codetable-selectdialog>
|
||||
|
||||
<l-dialog
|
||||
:title="sqlDialogTitle"
|
||||
:visible.sync="addSqlDialog"
|
||||
|
||||
:width="640"
|
||||
|
||||
@ok="sqlDialogSave"
|
||||
@closed="sqlDialogClosed"
|
||||
@opened="sqlDialogOpened"
|
||||
|
||||
>
|
||||
<sql-form ref="sqlForm" ></sql-form>
|
||||
</l-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const apiScheme = window.$api.custmerForm.scheme
|
||||
const apiCodeTable = window.$api.data.codeTable
|
||||
|
||||
import SqlForm from './sqlForm.vue'
|
||||
export default {
|
||||
props: {
|
||||
stepActive:{
|
||||
type:Number,
|
||||
default:0
|
||||
}
|
||||
},
|
||||
components:{
|
||||
SqlForm
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
formData:{
|
||||
f_Name:'',
|
||||
f_Category:'',
|
||||
f_DbCode:'',
|
||||
f_EnabledMark:1,
|
||||
f_FormType:0,
|
||||
f_Description:''
|
||||
},
|
||||
rules: {
|
||||
f_Name: [
|
||||
{ required: true, message: this.$t('请输入'), trigger: 'blur' },
|
||||
],
|
||||
f_Category: [
|
||||
{ required: true, message: this.$t('请选择'), trigger: 'change' }
|
||||
],
|
||||
f_DbCode: [
|
||||
{ required: true, message: this.$t('请选择'), trigger: 'change' }
|
||||
]
|
||||
},
|
||||
dbTableData:[],
|
||||
dbtableSelectdialog:false,
|
||||
|
||||
dbTableRData:[], // 关联表数据用于数据权限
|
||||
isAddDbTableRData:false,
|
||||
|
||||
addSqlDialog:false,
|
||||
editSql:false,
|
||||
sqlDialogTitle:'',
|
||||
sqlDialogRow:null,
|
||||
|
||||
isNotFetchTables:false,
|
||||
tableColumns:{} // 缓存列信息
|
||||
|
||||
};
|
||||
},
|
||||
created () {
|
||||
this.initData()
|
||||
},
|
||||
computed:{
|
||||
sqlMainCols(){
|
||||
const table = this.dbTableData.find(t=>t.type == 'main')
|
||||
return table.columns
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
initData(){
|
||||
this.lr_loadDblink()
|
||||
},
|
||||
async dbSelect(list,showLoading, hideLoading){
|
||||
showLoading()
|
||||
const tableList = []
|
||||
const notAddTable = []
|
||||
list.forEach(item => {
|
||||
const table = {id:item.f_TableName,name:item.f_TableName,comment:item.f_Description,columns:[]}
|
||||
// 加载表的列信息
|
||||
if(this.tableColumns[table.name]){
|
||||
table.columns = this.tableColumns[table.name]
|
||||
}
|
||||
else{
|
||||
tableList.push(table)
|
||||
}
|
||||
|
||||
if(this.isAddDbTableRData){
|
||||
if(this.dbTableData.find(t => { return t.name == table.name }) == undefined){
|
||||
this.dbTableRData.push(table)
|
||||
}
|
||||
else{
|
||||
notAddTable.push(table.name)
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
else{
|
||||
if(this.dbTableData.length == 0){
|
||||
table.type = 'main'
|
||||
this.dbTableData.push(table)
|
||||
}
|
||||
else if(this.dbTableData.find(t => { return t.name == table.name }) == undefined){
|
||||
table.type = 'chlid'
|
||||
this.dbTableData.push(table)
|
||||
}
|
||||
else{
|
||||
notAddTable.push(table.name)
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if(tableList.length > 0 ){
|
||||
const codeTables = await this.$awaitWraper(apiCodeTable.getList(this.formData.f_DbCode,String(tableList.map(t=>t.name))))
|
||||
for(const tableItem of tableList){
|
||||
const codeTable = codeTables.find(t=>t.lr_db_codetableEntity.f_TableName == tableItem.name)
|
||||
tableItem.columns = codeTable.lr_db_codecolumnsList.map(t=>({
|
||||
name:t.f_DbColumnName,
|
||||
csType:t.f_CsType,
|
||||
isIdentity:t.f_IsIdentity == 1,
|
||||
isPrimary:t.f_IsPrimaryKey == 1,
|
||||
isNullable:t.f_IsNullable == 1,
|
||||
coment:t.f_Description
|
||||
}))
|
||||
|
||||
this.tableColumns[tableItem.name] = tableItem.columns
|
||||
}
|
||||
}
|
||||
|
||||
if(notAddTable.length > 0){
|
||||
if(this.isAddDbTableRData){
|
||||
this.$message({
|
||||
message: `不能是表单已经绑定的表【${String(notAddTable)}】`,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
message: `重复添加表【${String(notAddTable)}】`,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
this.dbtableSelectdialog = false
|
||||
|
||||
hideLoading()
|
||||
},
|
||||
chlidTagClick(row){
|
||||
this.dbTableData.find(t => { return t.type == 'main' }).type = 'chlid';
|
||||
row.type = 'main';
|
||||
this.$set(this.dbTableData, 0, this.dbTableData[0])
|
||||
},
|
||||
addRow(){
|
||||
this.isAddDbTableRData = false
|
||||
if(this.formData.f_DbCode){
|
||||
this.dbtableSelectdialog = true;
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
message: '请选择数据库',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
},
|
||||
deleteRow(data){
|
||||
this.dbTableData.splice(data.index,1);
|
||||
if(data.row.type == 'main' && this.dbTableData.length > 0){
|
||||
this.dbTableData[0].type = 'main';
|
||||
this.$set(this.dbTableData, 0, this.dbTableData[0]);
|
||||
}
|
||||
},
|
||||
relationTables(myName){
|
||||
let list = [];
|
||||
this.dbTableData.forEach(item =>{
|
||||
if(item.name != myName){
|
||||
list.push(item);
|
||||
}
|
||||
})
|
||||
return list;
|
||||
},
|
||||
relationTableFields(tableName){
|
||||
const table = this.dbTableData.find(t => { return t.name == tableName }) || {}
|
||||
return table.columns || []
|
||||
},
|
||||
|
||||
addDbTableRData(){
|
||||
this.isAddDbTableRData = true
|
||||
if(this.formData.f_DbCode){
|
||||
this.dbtableSelectdialog = true
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
message: '请选择数据库',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
},
|
||||
deleteDbTableRData(data){
|
||||
this.dbTableRData.splice(data.index,1)
|
||||
},
|
||||
|
||||
|
||||
validateSteps(){
|
||||
return new Promise((resolve) => {
|
||||
if(this.stepActive == 0){
|
||||
// 判断基础信息是否填写完整
|
||||
this.validateBaseInfo().then(res=>{
|
||||
resolve(res)
|
||||
})
|
||||
}
|
||||
else{
|
||||
resolve(true)
|
||||
}
|
||||
});
|
||||
},
|
||||
steps(num){
|
||||
return this.stepActive == num
|
||||
},
|
||||
validateBaseInfo(){
|
||||
return new Promise((resolve) => {
|
||||
this.$refs.baseInfo.validate((valid) => {
|
||||
if(valid){
|
||||
if(this.isNotFetchTables){
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: '请将数据表的对象导入,点击数据表添加按钮,导入表重新编辑页面!'
|
||||
})
|
||||
resolve(false)
|
||||
return
|
||||
}
|
||||
|
||||
if(this.dbTableData.length > 0){
|
||||
if(this.formData.f_FormType != 1){
|
||||
if(this.dbTableData.find(t=>t.type != 'main' && (this.$validatenull(t.field) || this.$validatenull(t.relationName) || this.$validatenull(t.relationField))) != undefined){
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: '请完善数据库表信息!'
|
||||
})
|
||||
resolve(false)
|
||||
return
|
||||
}
|
||||
}
|
||||
else{
|
||||
if(this.dbTableData.find(t=>t.type != 'main' && this.$validatenull(t.relationField)) != undefined){
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: '请完善子试图和主视图关联!'
|
||||
});
|
||||
resolve(false)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: this.formData.f_FormType != 1? '请添加数据库表!':'请添加视图语句'
|
||||
});
|
||||
resolve(false)
|
||||
return
|
||||
}
|
||||
|
||||
if(this.dbTableRData.length > 0){
|
||||
if(this.dbTableRData.find(t=>this.$validatenull(t.fname) || this.$validatenull(t.cfield) || this.$validatenull(t.field) || this.$validatenull(t.relationName) || this.$validatenull(t.relationField)) != undefined){
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: '请完善数据库关联表信息!'
|
||||
});
|
||||
resolve(false)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.formDesign.updateTable()
|
||||
})
|
||||
|
||||
resolve(true)
|
||||
}
|
||||
else{
|
||||
resolve(false)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
resetForm(){
|
||||
this.$refs.formDesign.clear()
|
||||
this.$formClear(this.$refs.baseInfo)
|
||||
this.isNotFetchTables = false
|
||||
this.dbTableData = []
|
||||
this.dbTableRData = []
|
||||
this.tableColumns = {}
|
||||
},
|
||||
validateForm(){
|
||||
return this.$refs.formDesign.validate()
|
||||
},
|
||||
async setForm(id){
|
||||
const data = await this.$awaitWraper(apiScheme.get(id))
|
||||
if(data){
|
||||
let scheme = JSON.parse(data.scheme.f_Scheme)
|
||||
data.info.f_DbCode = scheme.dbCode
|
||||
this.formData = data.info
|
||||
this.dbTableData = scheme.db
|
||||
this.dbTableRData = scheme.rdb || []
|
||||
|
||||
if(this.formData.f_FormType != 1){
|
||||
let tableNames = []
|
||||
tableNames.push(...this.dbTableData.map(t=>t.name))
|
||||
tableNames.push(...this.dbTableRData.map(t=>t.name))
|
||||
|
||||
tableNames = this.$unique(tableNames)
|
||||
// 加载表数据
|
||||
const codeTables = await this.$awaitWraper(apiCodeTable.getList(scheme.dbCode,String(tableNames)))
|
||||
// 新版本加入数据模型这个概念，表单设计模版里不保存列的信息
|
||||
// 当数据对象被改变时会直接影响到表单
|
||||
if(codeTables.length < tableNames.length ){
|
||||
// 表示部分数据表没有加载到，需要导入或添加
|
||||
this.isNotFetchTables = true
|
||||
}
|
||||
else{
|
||||
const tableList = [...this.dbTableData,...this.dbTableRData]
|
||||
for(const table of tableList){
|
||||
const codeTable = codeTables.find(t=>t.lr_db_codetableEntity.f_TableName == table.name)
|
||||
|
||||
table.columns = codeTable.lr_db_codecolumnsList.map(t=>({
|
||||
name:t.f_DbColumnName,
|
||||
csType:t.f_CsType,
|
||||
isIdentity:t.f_IsIdentity == 1,
|
||||
isPrimary:t.f_IsPrimaryKey == 1,
|
||||
isNullable:t.f_IsNullable == 1,
|
||||
coment:t.f_Description
|
||||
}))
|
||||
|
||||
this.tableColumns[table.name] = table.columns
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$refs.formDesign.setData(scheme.formInfo)
|
||||
return true
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
message: '数据加载失败',
|
||||
type: 'warning'
|
||||
})
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
getForm(isDraft){
|
||||
const db = []
|
||||
const rdb = []
|
||||
let primaryKey = ''
|
||||
if(this.formData.f_FormType != 1){
|
||||
// 普通表单
|
||||
const mainTable = this.dbTableData.find(t=>t.type == 'main')
|
||||
const primaryKeyObj = mainTable.columns.find(t=>t.isPrimary)
|
||||
if(primaryKeyObj){
|
||||
primaryKey = primaryKeyObj.name
|
||||
}
|
||||
}
|
||||
|
||||
const dbTableData = this.$deepClone(this.dbTableData)
|
||||
const dbTableRData = this.$deepClone(this.dbTableRData)
|
||||
|
||||
for(const item of dbTableData){
|
||||
if(this.formData.f_FormType != 1){
|
||||
delete item.columns
|
||||
}
|
||||
db.push(item)
|
||||
}
|
||||
for(const item of dbTableRData){
|
||||
if(this.formData.f_FormType != 1){
|
||||
delete item.columns
|
||||
}
|
||||
rdb.push(item)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
let scheme = {
|
||||
dbCode:this.formData.f_DbCode,
|
||||
db:db,
|
||||
rdb:rdb,
|
||||
primaryKey:primaryKey,
|
||||
formInfo:this.$refs.formDesign.getData(),
|
||||
formType:this.formData.f_FormType
|
||||
}
|
||||
let postData = {
|
||||
info:this.$deepClone(this.formData),
|
||||
scheme:{
|
||||
F_Scheme:JSON.stringify(scheme),
|
||||
F_Type:isDraft?2:1
|
||||
}
|
||||
}
|
||||
return postData
|
||||
},
|
||||
|
||||
handleFormTypeChange(){
|
||||
this.dbTableData = []
|
||||
this.dbTableRData = []
|
||||
},
|
||||
|
||||
addSqlData(){// 添加试图语句
|
||||
if(this.formData.f_DbCode){
|
||||
this.editSql = false
|
||||
this.sqlDialogTitle = '添加SQL'
|
||||
this.addSqlDialog = true
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
message: '请选择数据库',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
},
|
||||
editSqlData(row){
|
||||
if(this.formData.f_DbCode){
|
||||
this.editSql = true
|
||||
this.sqlDialogRow = row
|
||||
this.sqlDialogTitle = '编辑SQL'
|
||||
this.addSqlDialog = true
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
message: '请选择数据库',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
},
|
||||
deleteSqlData({index,row}){// 删除试图语句
|
||||
if(row.type != 'main'){
|
||||
this.dbTableData.splice(index,1)
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
message: '主语句无法删除',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
},
|
||||
async sqlDialogSave(showLoading,hideLoading){
|
||||
showLoading('保存中...')
|
||||
if(await this.$refs.sqlForm.validateForm()){
|
||||
const data = this.$refs.sqlForm.getForm()
|
||||
if(this.dbTableData.length != 0 && data.type != 'main'){
|
||||
if(data.sql.indexOf('@param') == -1){
|
||||
this.$message({
|
||||
message: '请在语句中设置关联参数',
|
||||
type: 'warning'
|
||||
})
|
||||
hideLoading()
|
||||
return
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 加载列字段
|
||||
const list = await this.$awaitWraper(apiScheme.geColnames(this.formData.f_DbCode,data.sql))
|
||||
if(list == null){
|
||||
hideLoading()
|
||||
return
|
||||
}
|
||||
data.columns = list.map(t=>{ return {name:t}})
|
||||
|
||||
if(this.editSql){
|
||||
const index = this.dbTableData.findIndex(t=>t.id = data.id)
|
||||
this.$set(this.dbTableData, index, data)
|
||||
}
|
||||
else{
|
||||
if(this.dbTableData.length == 0){
|
||||
data.type = 'main'
|
||||
}
|
||||
else{
|
||||
data.type = 'chlid'
|
||||
}
|
||||
data.id = this.$uuid()
|
||||
this.dbTableData.push(data)
|
||||
}
|
||||
|
||||
this.addSqlDialog = false
|
||||
}
|
||||
|
||||
hideLoading()
|
||||
},
|
||||
sqlDialogClosed(){
|
||||
this.$refs.sqlForm.resetForm()
|
||||
},
|
||||
sqlDialogOpened(){
|
||||
if(this.editSql){
|
||||
this.$refs.sqlForm.setForm(this.sqlDialogRow)
|
||||
}
|
||||
else{
|
||||
this.$refs.sqlForm.resetSql()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<template>
|
||||
<BasicTable @register="registerContanctTable">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction :actions="[
|
||||
{
|
||||
label: '删除',
|
||||
color: 'error',
|
||||
popConfirm: {
|
||||
title: '是否删除该数据',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
},
|
||||
}
|
||||
]" />
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps,watch } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { columns } from './databasetable.data';
|
||||
|
||||
let props = defineProps(["workOrder"]);
|
||||
|
||||
|
||||
// watchEffect(()=>{
|
||||
// const x1 = props.workOrder
|
||||
// console.log(x1,'watchEffect配置的回调执行了')
|
||||
// })
|
||||
// console.log('props',props)
|
||||
|
||||
watch(()=>props.workOrder,(newValue,oldValue)=>{
|
||||
// handleEmitsBase()
|
||||
console.log('newValuenewValue',newValue)
|
||||
},{immediate:true,deep:true})
|
||||
|
||||
const [registerContanctTable, { reload, setTableData, getColumns }] = useTable({
|
||||
title: '',
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
},
|
||||
useSearchForm: false,
|
||||
showTableSetting: false,
|
||||
bordered: false,
|
||||
pagination: false,
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
fixed: undefined,
|
||||
},
|
||||
});
|
||||
function handleEmitsBase() {
|
||||
console.log('workOrder变化了',props.workOrder[0])
|
||||
// let arr = [
|
||||
// { f_TableName: '11' , f_ClassName: '22' },
|
||||
// { f_TableName: '33' , f_ClassName: '44' }
|
||||
// ]
|
||||
// setTableData(arr)
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="less">
|
||||
.form-box{
|
||||
width: 100%;
|
||||
height: calc(100% - 55px);
|
||||
position:fixed;
|
||||
top:55px;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,18 @@
|
|||
<template>
|
||||
<BasicModal
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerImportModal"
|
||||
:canFullscreen="false"
|
||||
:defaultFullscreen="false"
|
||||
:maskClosable="false"
|
||||
:width="800"
|
||||
title="数据表选择"
|
||||
@ok="dataBaseClick"
|
||||
>
|
||||
<BasicTable @register="registerImportTable"></BasicTable>
|
||||
</BasicModal>
|
||||
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
:canFullscreen="false"
|
||||
|
|
@ -9,43 +22,52 @@
|
|||
title="数据对象选择"
|
||||
@ok="modalSuReClick"
|
||||
>
|
||||
<BasicTable @register="registerDataTable">
|
||||
<BasicTable @register="registerDataTable"></BasicTable>
|
||||
<template #centerFooter>
|
||||
<a-button type="success" @click="handleAddForm"> 导入表 </a-button>
|
||||
</template>
|
||||
|
||||
</BasicTable>
|
||||
</BasicModal>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
|
||||
import { columns } from './dataobject.data';
|
||||
import { ref,defineProps,watch } from 'vue';
|
||||
import { columns , searchFormSchema,importColumns } from './dataobject.data';
|
||||
import { BasicTable, useTable } from '@/components/Table';
|
||||
import { getDataBaseTableList } from '@/api/formdesign/index';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
|
||||
import { getDataBaseTableList,getImportBaseTableList,importDataBaseTable } from '@/api/formdesign/index';
|
||||
import { BasicModal,useModal, useModalInner } from '/@/components/Modal';
|
||||
import { message } from 'ant-design-vue';
|
||||
const emit = defineEmits(['backrows']);
|
||||
const receiceDbCode = ref()
|
||||
|
||||
const [registerModal, { closeModal, setModalProps }] = useModalInner((data: any) => {
|
||||
clearSelectedRowKeys()
|
||||
const [registerModal, { closeModal:closeBaseModal }] = useModalInner((data: any) => {
|
||||
receiceDbCode.value = data.dbCode
|
||||
clearBaseSelectedRowKeys()
|
||||
})
|
||||
|
||||
const [registerImportModal, {openModal:openImportTableModal , closeModal:closeImportModal }] = useModal()
|
||||
|
||||
|
||||
|
||||
const [registerDataTable, { clearSelectedRowKeys, getSelectRows }] = useTable({
|
||||
const [registerDataTable, { reload,clearSelectedRowKeys:clearBaseSelectedRowKeys, getSelectRows:getBaseSelectRows }] = useTable({
|
||||
title: '',
|
||||
rowKey: 'id',
|
||||
api: getDataBaseTableList,
|
||||
formConfig: {
|
||||
labelWidth: 80,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
columns,
|
||||
size: 'small',
|
||||
rowSelection: {//多选框
|
||||
type: 'checkbox',
|
||||
// type: 'radio',
|
||||
},
|
||||
useSearchForm: false,
|
||||
useSearchForm: true,
|
||||
showTableSetting: false,
|
||||
canResize: false,
|
||||
bordered: true,
|
||||
pagination:{
|
||||
pageSize: 10
|
||||
|
|
@ -56,7 +78,7 @@
|
|||
pageIndex: data.page,
|
||||
pageSize: data.limit,
|
||||
keyWord: data.key,
|
||||
dbCode: "lrsystemdb"
|
||||
dbCode: receiceDbCode.value
|
||||
};
|
||||
return temp;
|
||||
},
|
||||
|
|
@ -66,10 +88,59 @@
|
|||
}
|
||||
|
||||
});
|
||||
const [registerImportTable, { clearSelectedRowKeys:clearImportSelectedRowKeys, getSelectRows:getImportSelectRows }] = useTable({
|
||||
title: '',
|
||||
rowKey: 'name',
|
||||
api: getImportBaseTableList,
|
||||
formConfig: {
|
||||
labelWidth: 80,
|
||||
},
|
||||
columns:importColumns,
|
||||
size: 'small',
|
||||
rowSelection: {//多选框
|
||||
type: 'checkbox',
|
||||
// type: 'radio',
|
||||
},
|
||||
useSearchForm: false,
|
||||
showTableSetting: false,
|
||||
canResize: false,
|
||||
bordered: true,
|
||||
pagination:{
|
||||
pageSize: 10
|
||||
},
|
||||
beforeFetch: (data) => {
|
||||
var temp = {
|
||||
dbCode: receiceDbCode.value
|
||||
};
|
||||
return temp;
|
||||
}
|
||||
})
|
||||
|
||||
function modalSuReClick(){
|
||||
let rows = getSelectRows();
|
||||
let rows = getBaseSelectRows();
|
||||
emit('backrows', rows);
|
||||
closeModal()
|
||||
closeBaseModal()
|
||||
}
|
||||
|
||||
function handleAddForm(){
|
||||
openImportTableModal(true)
|
||||
setTimeout(()=>{
|
||||
clearImportSelectedRowKeys()
|
||||
},200)
|
||||
}
|
||||
function dataBaseClick(){
|
||||
let rows = getImportSelectRows()
|
||||
console.log('rowww',rows)
|
||||
let param = {
|
||||
dbCode: receiceDbCode.value,
|
||||
tableList: rows
|
||||
}
|
||||
importDataBaseTable( param ).then((res: AreaRespVO[]) =>{
|
||||
console.log('res',)
|
||||
message.success('导入成功',2);
|
||||
closeImportModal()
|
||||
reload()
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { getOutKeyList } from '@/api/formdesign/index'
|
||||
import { h } from 'vue';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
|
||||
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'f_TableName',
|
||||
width: 100,
|
||||
|
||||
},
|
||||
{
|
||||
title: '表名',
|
||||
dataIndex: 'f_ClassName',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '比较字段',
|
||||
width: 150,
|
||||
key: 'relationFieldConnect',
|
||||
dataIndex: 'relationFieldConnect',
|
||||
},
|
||||
{
|
||||
title: '外键',
|
||||
width: 150,
|
||||
key: 'relationFieldConnect',
|
||||
dataIndex: 'relationFieldConnect',
|
||||
},
|
||||
{
|
||||
title: '关联表',
|
||||
width: 150,
|
||||
key: 'relationFieldConnect',
|
||||
dataIndex: 'relationFieldConnect',
|
||||
},
|
||||
{
|
||||
title: '关联主键',
|
||||
width: 150,
|
||||
key: 'relationFieldConnect',
|
||||
dataIndex: 'relationFieldConnect',
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { BasicColumn } from '@/components/Table';
|
||||
import { BasicColumn,FormSchema } from '@/components/Table';
|
||||
import { h } from 'vue';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
|
||||
|
|
@ -30,8 +30,26 @@ export const columns: BasicColumn[] = [
|
|||
},
|
||||
}
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'key',
|
||||
label: '关键字',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
export const importColumns: BasicColumn[] = [
|
||||
{
|
||||
title: '表名',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'description'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -66,7 +66,6 @@
|
|||
</template>
|
||||
<template #addDatabaseContantSlot="{ model, field }">
|
||||
<div class="connectTableTitle">添加数据库关联表，只用来做数据权限设置（请先选择数据库）</div>
|
||||
<!-- <DataBaseTable :workOrder="connectTabBase" ></DataBaseTable> -->
|
||||
<BasicTable @register="registerContanctTable">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'fname'">
|
||||
|
|
@ -199,7 +198,6 @@
|
|||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { BasicModal , useModal , useModalInner } from '/@/components/Modal';
|
||||
import DataObject from './DataObject.vue'
|
||||
import DataBaseTable from './DataBaseTable.vue'
|
||||
import sqlModal from './sqlModal.vue'
|
||||
|
||||
const emit = defineEmits(['formDataBack','formDataNoBack']);
|
||||
|
|
@ -249,6 +247,7 @@
|
|||
}
|
||||
},{immediate:true,deep:true})
|
||||
watch(()=>props.isNextSteps,(newValue,oldValue)=>{
|
||||
console.log('steeeeeeps')
|
||||
if(newValue){
|
||||
validate()
|
||||
let formArr = getFieldsValue()
|
||||
|
|
@ -266,20 +265,17 @@
|
|||
}
|
||||
let tabArr = []
|
||||
if(tableArr && tableArr.length > 0){
|
||||
if(tableArr.length == 1){
|
||||
emit('formDataBack', obj);
|
||||
}else{
|
||||
tableArr.forEach(item =>{
|
||||
if( item.type != 'main'){
|
||||
tabArr.push(item.field)
|
||||
}
|
||||
})
|
||||
}
|
||||
tableArr.forEach(item =>{
|
||||
if( item.type != 'main'){
|
||||
tabArr.push(item.field)
|
||||
}
|
||||
})
|
||||
}else{
|
||||
emit('formDataNoBack');
|
||||
message.error("请添加数据库表",2)
|
||||
message.error("请添加视图语句",2)
|
||||
return
|
||||
}
|
||||
|
||||
if(tabArr.includes(undefined)){
|
||||
emit('formDataNoBack');
|
||||
message.error("请完善数据库表信息",2)
|
||||
|
|
@ -306,20 +302,11 @@
|
|||
}
|
||||
|
||||
if(tableArr && tableArr.length > 0){
|
||||
if(tableArr.length == 1){
|
||||
if(connectArr.includes(undefined)){
|
||||
// emit('formDataNoBack');
|
||||
// message.error("请完善数据库关联表信息",2)
|
||||
}else{
|
||||
emit('formDataBack', obj);
|
||||
tableArr.forEach(item =>{
|
||||
if( item.type != 'main'){
|
||||
tabArr.push(item.field,item.relationField,item.relationName)
|
||||
}
|
||||
}else{
|
||||
tableArr.forEach(item =>{
|
||||
if( item.type != 'main'){
|
||||
tabArr.push(item.field,item.relationField,item.relationName)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}else{
|
||||
emit('formDataNoBack');
|
||||
message.error("请添加数据库表",2)
|
||||
|
|
@ -439,7 +426,7 @@
|
|||
const anyformobj = ref<any>(myDataBaseFormRef.value.getFieldsValue());
|
||||
|
||||
if(anyformobj.value.DbCode){
|
||||
openBaseDataTableModal(true, {});
|
||||
openBaseDataTableModal(true, {dbCode:anyformobj.value.DbCode});
|
||||
}else{
|
||||
message.warning("请选择数据库")
|
||||
}
|
||||
|
|
@ -451,7 +438,7 @@
|
|||
const anyformobj = ref<any>(myDataBaseFormRef.value.getFieldsValue());
|
||||
|
||||
if(anyformobj.value.DbCode){
|
||||
openBaseDataTableModal(true, {});
|
||||
openBaseDataTableModal(true, {dbCode:anyformobj.value.DbCode});
|
||||
}else{
|
||||
message.warning("请选择数据库")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,6 +88,10 @@
|
|||
import { useDesign } from '@/hooks/web/useDesign';
|
||||
//import { onKeyStroke } from '@vueuse/core';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const ACol = Col;
|
||||
const ARow = Row;
|
||||
const FormItem = Form.Item;
|
||||
|
|
@ -128,6 +132,8 @@
|
|||
mode: 'modal', //不要默认的错误提示
|
||||
});
|
||||
console.log(userInfo)
|
||||
|
||||
localStorage.setItem('fireUserLoginName',userInfo.name)
|
||||
if (userInfo) {
|
||||
notification.success({
|
||||
message: t('sys.login.loginSuccessTitle'),
|
||||
|
|
|
|||
Loading…
Reference in New Issue