xinyin025/hotgo
1
0
Fork 0
mirror of https://github.com/bufanyun/hotgo.git synced 2025-11-28 03:29:25 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

修改字段页面,增加一些字段属性

Browse Source
This commit is contained in:
嘉泽
2023-11-30 22:21:25 +08:00
parent cbd887701b
commit db61f050d4
12 changed files with 547 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/views/curdDemo/view.vue
View File

@@ -68,6 +68,11 @@
>
</n-descriptions-item>
<n-descriptions-item>
<template #label>修改时间</template>
{{ formValue.updatedAt }}
</n-descriptions-item>
</n-descriptions>
</n-card>

263
web/src/views/develop/code/components/EditField.vue Normal file
View File

@@ -0,0 +1,263 @@
<template>
<basicModal
@register="modalRegister"
ref="modalRef"
class="basicModal"
@on-ok="okModal"
@on-close="close"
:style="{
width: dialogWidth,
}"
>
<template #default>
<n-form
ref="formRef"
inline
:label-width="90"
:model="formValue"
size="medium"
label-placement="left"
>
<n-tabs type="line" animated>
<n-tab-pane name="basic" tab="基本信息">
<n-grid x-gap="24" :cols="2">
<n-gi :span="1">
<n-form-item label="字段描述" path="dc">
<n-input v-model:value="formValue.dc" placeholder="字段描述" />
</n-form-item>
</n-gi>
<n-gi :span="1">
<n-form-item label="字段列名" path="name">
<n-input disabled v-model:value="formValue.name" placeholder="字段列名" />
</n-form-item>
</n-gi>
<n-gi :span="1">
<n-form-item label="表单组件" path="formMode">
<n-select
:disabled="formValue.name === 'id'"
v-model:value="formValue.formMode"
:options="getFormModeOptions(formValue.tsType)"
placeholder="表单组件"
/>
</n-form-item>
</n-gi>
<n-gi :span="1">
<n-form-item label="默认值" path="defaultValue">
<n-input
:disabled="formValue.name === 'id'"
v-model:value="formValue.defaultValue"
placeholder="默认值"
/>
</n-form-item>
</n-gi>
<n-gi :span="1">
<n-form-item label="显示状态" path="listShow">
<n-select
v-model:value="formValue.listShow"
:options="props.selectList?.listShow ?? []"
placeholder="显示状态"
/>
</n-form-item>
</n-gi>
<n-gi :span="1">
<n-form-item label="字典类型" path="dictType">
<n-treeSelect
:disabled="formValue.name === 'id'"
v-model:value="formValue.dictType"
:options="props.selectList?.dictMode ?? []"
placeholder="字典类型"
clearable
/>
</n-form-item>
</n-gi>
<n-gi :span="1">
<n-form-item label="单元格宽度" path="width">
<n-input v-model:value="formValue.width" placeholder="单元格宽度" />
</n-form-item>
</n-gi>
<n-gi :span="1">
<n-form-item label="表单验证" path="formRole">
<n-select
:disabled="formValue.name === 'id'"
v-model:value="formValue.formRole"
:options="props.selectList?.formRole ?? []"
placeholder="表单验证"
/>
</n-form-item>
</n-gi>
</n-grid>
<n-grid x-gap="12" :cols="7">
<n-gi>
<n-form-item label="是否编辑" path="isEdit">
<n-checkbox
:disabled="formValue.name === 'id'"
v-model:checked="formValue.isEdit"
/>
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="是否必填" path="required">
<n-checkbox
:disabled="formValue.name === 'id'"
v-model:checked="formValue.required"
/>
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="是否唯一" path="unique">
<n-checkbox
:disabled="formValue.name === 'id'"
v-model:checked="formValue.unique"
/>
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="列表显示" path="isList">
<n-checkbox v-model:checked="formValue.isList" />
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="字段导出" path="isExport">
<n-checkbox v-model:checked="formValue.isExport" />
</n-form-item>
</n-gi>
<n-gi>
<n-form-item label="字段查询" path="isQuery">
<n-checkbox v-model:checked="formValue.isQuery" />
</n-form-item>
</n-gi>
</n-grid>
<n-grid x-gap="12" :cols="1">
<n-gi :span="6">
<n-form-item label="查询条件" path="queryWhere">
<n-select
:disabled="formValue.name === 'id'"
v-model:value="formValue.queryWhere"
:options="props.selectList?.whereMode ?? []"
placeholder="查询条件"
/>
</n-form-item>
</n-gi>
</n-grid>
</n-tab-pane>
<n-tab-pane name="expand" tab="拓展信息">
<n-grid x-gap="24" :cols="1">
<n-gi :span="1">
<n-form-item label="文本说明" path="placeholder">
<n-input
:disabled="formValue.name === 'id'"
v-model:value="formValue.placeholder"
placeholder="输入placeholder，占位符"
/>
</n-form-item>
</n-gi>
</n-grid>
<n-grid x-gap="24" :cols="1">
<n-gi :span="1">
<n-form-item label="显示条件" path="showCondition">
<n-input
:disabled="formValue.name === 'id'"
v-model:value="formValue.showCondition"
placeholder="输入框显示条件 如 params.status == 1"
/>
</n-form-item>
</n-gi>
</n-grid>
<n-grid x-gap="24" :cols="1">
<n-gi :span="1">
<n-form-item label="其他属性" path="attribute">
<n-checkbox-group v-model:value="formValue.attribute">
<n-checkbox value="sort" label="表头排序" />
</n-checkbox-group>
</n-form-item>
</n-gi>
</n-grid>
</n-tab-pane>
</n-tabs>
</n-form>
</template>
</basicModal>
</template>
<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import { basicModal, useModal } from '@/components/Modal';
import { cloneDeep } from 'lodash-es';
import { selectListObj } from '@/views/develop/code/components/model';
const dialogWidth = ref('40%');
const emit = defineEmits(['updateShowModal', 'updateFieldInfo']);
interface Props {
showModal: boolean;
fieldInfo?: object;
selectList: any;
}
const props = withDefaults(defineProps<Props>(), {
showModal: false,
fieldInfo: () => {
return {};
},
selectList: selectListObj,
});
const isShowModal = computed({
get: () => {
return props.showModal;
},
set: (value) => {
emit('updateShowModal', value);
},
});
const formValue = ref<any>(cloneDeep(props.fieldInfo));
const [modalRegister, { openModal, closeModal }] = useModal({
title: '更新字段',
});
async function okModal() {
emit('updateFieldInfo', formValue);
closeModal();
}
function showModal() {
openModal();
}
function close() {
isShowModal.value = false;
}
watch(
() => props.showModal,
(value) => {
if (isShowModal.value) {
formValue.value = cloneDeep(props.fieldInfo);
showModal();
}
}
);
function getFormModeOptions(type: string) {
const options = cloneDeep(props.selectList.formMode ?? []);
if (options.length === 0) {
return [];
}
switch (type) {
case 'number':
for (let i = 0; i < options.length; i++) {
const allows = ['InputNumber', 'Radio', 'Select', 'Switch', 'Rate'];
if (!allows.includes(options[i].value)) {
options[i].disabled = true;
}
}
break;
default:
}
return options;
}
</script>
<style lang="less" scoped></style>

337
web/src/views/develop/code/components/EditMasterCell.vue
View File

@@ -14,8 +14,8 @@
ref="actionRef"
:canResize="true"
:pagination="false"
:scroll-x="3000"
:scroll-y="720"
:actionColumn="actionColumn"
>
<template #tableTitle>
<n-tooltip placement="top-start" trigger="hover">
@@ -35,17 +35,25 @@
</BasicTable>
</n-card>
</n-spin>
<Field
@updateShowModal="updateShowModal"
@updateFieldInfo="updateFieldInfo"
:showModal="showModal"
:fieldInfo="fieldInfo"
:selectList="selectList"
/>
</template>
<script lang="ts" setup>
import { computed, h, onMounted, ref } from 'vue';
import { BasicTable } from '@/components/Table';
import { computed, h, onMounted, ref, reactive } from 'vue';
import { BasicTable, TableAction } from '@/components/Table';
import { genInfoObj, selectListObj } from '@/views/develop/code/components/model';
import { ColumnList } from '@/api/develop/code';
import { NButton, NCheckbox, NInput, NSelect, NTooltip, NTreeSelect } from 'naive-ui';
import { NButton, NCheckbox, NInput, NTooltip } from 'naive-ui';
import { HelpCircleOutline, Reload } from '@vicons/ionicons5';
import { renderIcon } from '@/utils';
import { cloneDeep } from 'lodash-es';
//import { cloneDeep } from 'lodash-es';
import Field from '@/views/develop/code/components/EditField.vue';
const renderTooltip = (trigger, content) => {
return h(NTooltip, null, {
@@ -79,6 +87,9 @@
const columns = ref<any>([]);
const show = ref(false);
const dataSource = ref(formValue.value.masterColumns);
const showModal = ref(false);
const fieldInfo = ref<any>({});
const selectList = ref<any>(selectListObj);
async function reloadFields(loading = false) {
dataSource.value = [];
@@ -96,6 +107,45 @@
}
}
const actionColumn = reactive({
width: 60,
title: '操作',
key: 'action',
fixed: 'right',
render(record) {
return h(TableAction as any, {
style: 'button',
actions: [
{
label: '编辑',
onClick: handleEdit.bind(null, record),
},
],
});
},
});
function updateShowModal(value) {
showModal.value = value;
}
function updateFieldInfo(field) {
const newData = dataSource.value.map((item) => {
if (item.name === field.value.name) {
return field.value;
}
return item;
});
dataSource.value = newData;
formValue.value.masterColumns = dataSource.value;
}
function handleEdit(record: Recordable) {
showModal.value = true;
fieldInfo.value = record;
selectList.value = props.selectList;
}
onMounted(async () => {
show.value = true;
if (formValue.value.masterColumns.length === 0) {
@@ -200,7 +250,8 @@
width: 50,
render(row) {
return h(NCheckbox, {
defaultChecked: row.isEdit,
//defaultChecked: row.isEdit,
checked: row.isEdit,
disabled: row.name === 'id',
onUpdateChecked: function (e) {
row.isEdit = e;
@@ -215,7 +266,8 @@
align: 'center',
render(row) {
return h(NCheckbox, {
defaultChecked: row.required,
//defaultChecked: row.required,
checked: row.required,
disabled: row.name === 'id',
onUpdateChecked: function (e) {
row.required = e;
@@ -230,7 +282,8 @@
align: 'center',
render(row) {
return h(NCheckbox, {
defaultChecked: row.unique,
//defaultChecked: row.unique,
checked: row.unique,
disabled: row.name === 'id',
onUpdateChecked: function (e) {
row.unique = e;
@@ -238,147 +291,147 @@
});
},
},
{
title: '表单组件',
key: 'formMode',
width: 200,
render(row) {
return h(NSelect, {
value: row.formMode,
options: getFormModeOptions(row.tsType),
// render: function (row) {
// return props.selectList?.formMode ?? [];
// },
// onFocus: function (e) {
// console.log('表单组件 onFocus row:', e);
// },
onUpdateValue: function (e) {
row.formMode = e;
},
});
},
},
{
title: '表单验证',
key: 'formRole',
width: 200,
render(row) {
return h(NSelect, {
value: row.formRole,
disabled: row.name === 'id',
options: props.selectList?.formRole ?? [],
onUpdateValue: function (e) {
row.formRole = e;
},
});
},
},
{
title: '字典类型',
key: 'dictType',
width: 300,
render(row) {
return h(NTreeSelect, {
value: row.dictType,
disabled: row.name === 'id',
clearable: true,
options: props.selectList?.dictMode ?? [],
onUpdateValue: function (e) {
row.dictType = e;
},
});
},
},
],
},
{
width: 800,
title: '列表',
key: 'list',
align: 'center',
children: [
{
title: '列表',
key: 'isList',
width: 50,
align: 'center',
render(row) {
return h(NCheckbox, {
defaultChecked: row.isList,
onUpdateChecked: function (e) {
row.isList = e;
},
});
},
},
{
title: '导出',
key: 'isExport',
width: 50,
align: 'center',
render(row) {
return h(NCheckbox, {
defaultChecked: row.isExport,
onUpdateChecked: function (e) {
row.isExport = e;
},
});
},
},
{
title: '查询',
key: 'isQuery',
width: 50,
align: 'center',
render(row) {
return h(NCheckbox, {
defaultChecked: row.isQuery,
onUpdateChecked: function (e) {
row.isQuery = e;
},
});
},
},
{
title: '查询条件',
key: 'queryWhere',
width: 300,
render(row) {
return h(NSelect, {
value: row.queryWhere,
disabled: row.name === 'id',
options: props.selectList?.whereMode ?? [],
onUpdateValue: function (e) {
row.queryWhere = e;
},
});
},
},
// {
// title: '表单组件',
// key: 'formMode',
// width: 200,
// render(row) {
// return h(NSelect, {
// value: row.formMode,
// options: getFormModeOptions(row.tsType),
// // render: function (row) {
// // return props.selectList?.formMode ?? [];
// // },
// // onFocus: function (e) {
// // console.log('表单组件 onFocus row:', e);
// // },
// onUpdateValue: function (e) {
// row.formMode = e;
// },
// });
// },
// },
// {
// title: '表单验证',
// key: 'formRole',
// width: 200,
// render(row) {
// return h(NSelect, {
// value: row.formRole,
// disabled: row.name === 'id',
// options: props.selectList?.formRole ?? [],
// onUpdateValue: function (e) {
// row.formRole = e;
// },
// });
// },
// },
// {
// title: '字典类型',
// key: 'dictType',
// width: 300,
// render(row) {
// return h(NTreeSelect, {
// value: row.dictType,
// disabled: row.name === 'id',
// clearable: true,
// options: props.selectList?.dictMode ?? [],
// onUpdateValue: function (e) {
// row.dictType = e;
// },
// });
// },
// },
],
},
// {
// width: 800,
// title: '列表',
// key: 'list',
// align: 'center',
// children: [
// {
// title: '列表',
// key: 'isList',
// width: 50,
// align: 'center',
// render(row) {
// return h(NCheckbox, {
// defaultChecked: row.isList,
// onUpdateChecked: function (e) {
// row.isList = e;
// },
// });
// },
// },
// {
// title: '导出',
// key: 'isExport',
// width: 50,
// align: 'center',
// render(row) {
// return h(NCheckbox, {
// defaultChecked: row.isExport,
// onUpdateChecked: function (e) {
// row.isExport = e;
// },
// });
// },
// },
// {
// title: '查询',
// key: 'isQuery',
// width: 50,
// align: 'center',
// render(row) {
// return h(NCheckbox, {
// defaultChecked: row.isQuery,
// onUpdateChecked: function (e) {
// row.isQuery = e;
// },
// });
// },
// },
// {
// title: '查询条件',
// key: 'queryWhere',
// width: 300,
// render(row) {
// return h(NSelect, {
// value: row.queryWhere,
// disabled: row.name === 'id',
// options: props.selectList?.whereMode ?? [],
// onUpdateValue: function (e) {
// row.queryWhere = e;
// },
// });
// },
// },
// ],
// },
];
show.value = false;
});
function getFormModeOptions(type: string) {
const options = cloneDeep(props.selectList?.formMode ?? []);
if (options.length === 0) {
return [];
}
switch (type) {
case 'number':
for (let i = 0; i < options.length; i++) {
const allows = ['InputNumber', 'Radio', 'Select', 'Switch', 'Rate'];
if (!allows.includes(options[i].value)) {
options[i].disabled = true;
}
}
break;
default:
}
return options;
}
// function getFormModeOptions(type: string) {
// const options = cloneDeep(props.selectList?.formMode ?? []);
// if (options.length === 0) {
// return [];
// }
// switch (type) {
// case 'number':
// for (let i = 0; i < options.length; i++) {
// const allows = ['InputNumber', 'Radio', 'Select', 'Switch', 'Rate'];
// if (!allows.includes(options[i].value)) {
// options[i].disabled = true;
// }
// }
// break;
// default:
// }
// return options;
// }
</script>
<style lang="less" scoped></style>