Commit e95952d2 authored by 张伯涛's avatar 张伯涛

命名字典域模块

parent 9379b45f
<template>
<div style="background-color: white;padding: 20px">
<div style="display:flex;margin-top: 15px;margin-bottom: 15px;justify-content: space-between; align-items: center;" v-if="isShow">
<div style="margin-left: 15px;font-size: 15px;font-weight: bold">
查看版本
<Select
v-model:value="optionValue"
show-search
placeholder="请选择版本"
style="width: 200px"
:options="options"
@change="handleChange"
></Select>
</div>
<div>
<a-button type="primary" @click="contrastButton">版本对比</a-button>
<a-button type="primary" style="margin-left: 10px" @click="resetButton">回滚</a-button>
<a-button type="primary" style="margin-left: 10px" @click="exitButton">退出查看</a-button>
</div>
</div>
<Divider />
<div style="display: flex;justify-content: space-between; align-items: center;margin-bottom: 10px">
<div style="margin-top: 10px;display: flex;margin-left: 10px;align-items: center">
<div>
<Icon icon="ant-design:file-done-outlined" :size="30" :color="'#42C465'" />
</div>
<div>
<div style="font-weight: bold;font-size: 25px;">短编号</div>
<div>域/共享工作区/企业/短编号</div>
</div>
</div>
<div style="margin-top: 10px;display: flex" v-if="!isShow">
<a-button type="primary" @click="dictionaryAssociation">字典关联</a-button>
<a-button type="primary" style="margin-left: 10px" @click="editButton">编辑标准</a-button>
<a-button type="primary" style="margin-left: 10px" @click="versionButton">版本管理</a-button>
</div>
</div>
<Divider />
<div style="margin-top: 10px;display: flex;font-weight: bold;font-size: 25px;margin-left: 10px;padding-bottom: 20px">
<div>
<Icon icon="ant-design:file-done-outlined" :size="25" :color="'#42C465'" />
</div>
<div>短编号</div>
<div style="font-size: 15px;padding-top: 15px;padding-left: 10px">
版本:{{optionValue}}
</div>
</div>
<BasicForm @register="registerForm1" />
<ImportModal @register="registerImport"/>
<DictionaryAssociationModal @register="registerDiction"/>
<!-- 版本管理 弹窗-->
<VersionModal @register="registerModal" @success="handleSuccess" />
</div>
</template>
<script lang="ts" setup>
import { Select } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import { Description } from '@/components/Description';
import { PageWrapper } from '@/components/Page';
import { Divider } from 'ant-design-vue';
import {router} from "@/router";
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Form';
import {detailSchema1,detailSchema3,detailSchema4} from './referenceDocument.data.ts';
import {tableListTwo} from "./mock";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import VersionModal from '@/views/dataStandards/basicStandards/VersionModal.vue'
import {useModal} from "@/components/Modal";
import { useMessage } from '@/hooks/web/useMessage';
import { columnsTwo } from './referenceDocument.data';
import ImportModal from "./importModal.vue";
import DictionaryAssociationModal
from "@/views/dataStandards/namingDictionary/domain/dictionaryAssociationModal.vue";
const route = useRoute()
const title = ref('')
const formData = ref({})
const businessId = ref('')
const isShow = ref(false)
const optionValue = ref('v1')
const [registerModal, { openModal }] = useModal();
const [registerImport, { openModal:openModalImport }] = useModal();
const [registerDiction, { openModal:openModalDiction }] = useModal();
const { createMessage, createConfirm } = useMessage();
const [registerForm1, { setFieldsValue: setFieldsValue1 }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: detailSchema1,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerForm2, { setFieldsValue: setFieldsValue2 }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: detailSchema3,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerForm3, { setFieldsValue: setFieldsValue3 }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: detailSchema4,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,getRowSelection }] = useTable({
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: tableListTwo.length,
code:'',
message:'',
data: tableListTwo,
};
return { ...response};
},
columns: columnsTwo,
useSearchForm: false,
showTableSetting: false,
bordered: true,
actionColumn: {
width: 120,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
const options = ref<any>([
{ value: 'V1', label: 'V1' },
{ value: 'V2', label: 'V2' },
{ value: 'V3', label: 'V3' },
]);
/**编辑标准*/
function editButton(record) {
router.push({
path: '/dataStandards/namingDictionary/domain/edit',
});
}
function dictionaryAssociation() {
openModalDiction(true,{
})
}
function handleImport() {
openModalImport(true,{
});
}
function handleDelete() {}
/**版本管理 弹窗*/
function versionButton(record) {
openModal(true, {
});
}
/**下拉框改变事件*/
function handleChange(value) {
}
/**回滚*/
function resetButton(value) {
createMessage.success('回滚成功!')
}
/**基本标准对比*/
function contrastButton(record) {
router.push({
path: '/dataStandards/basicStandards/basicStandardsContrast',
query: {
businessId:201,
},
});
}
/**退出查看*/
function exitButton(record) {
isShow.value = false
optionValue.value = 'V3'
}
/**版本管理 弹出回调函数*/
function handleSuccess(record) {
optionValue.value = record.values.versionName
isShow.value = true
}
/**初始化*/
onMounted(() => {
setFieldsValue1({
})
});
</script>
<style lang="less" scoped>
.desc-wrap {
padding: 16px;
background-color: @component-background;
}
</style>
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicTable @register="registerTable">
</BasicTable>
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import {dictionColumns} from './referenceDocument.data';
import {tableListDic, treeDataListPath} from './mock'
import { useMessage } from '@/hooks/web/useMessage';
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
//获取接口数据并放在下拉框里(这里是打开了一个弹框)
const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: tableListDic.length,
code:'',
message:'',
data: tableListDic,
};
return { ...response};
},
columns:dictionColumns,
useSearchForm: false,
showTableSetting: false,
bordered: true,
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
console.log('1111111111111111111111111111111')
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
}
});
const getTitle = computed(() => ('字典关联'));
async function handleSubmit() {
try {
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal();
emit('success', { isUpdate: unref(isUpdate), });
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
<template>
<div style="background-color: white;padding: 20px">
<div style="display: flex;justify-content: space-between; align-items: center;margin-bottom: 10px;margin-left: 12px">
<div style="margin-top: 10px;display: flex;margin-left: 10px;align-items: center">
<div>
<Icon icon="ant-design:file-done-outlined" :size="30" :color="'#42C465'" />
</div>
<div>
<div style="font-weight: bold;font-size: 25px;">短编号</div>
<div>域/共享工作区/企业/短编号</div>
</div>
</div>
<div style="margin-top: 10px;display: flex" v-if="!isShow">
<a-button type="primary" >发布</a-button>
<a-button type="primary" style="margin-left: 10px" @click="editButton">保存修改</a-button>
<a-button type="primary" style="margin-left: 10px" @click="editButton">退出编辑</a-button>
<a-button type="primary" disabled style="margin-left: 10px">版本管理</a-button>
</div>
</div>
<Divider />
<div style="margin-top: 10px;display: flex;font-weight: bold;font-size: 25px;margin-left: 10px;padding-bottom: 20px">
<div>
<Icon icon="ant-design:file-done-outlined" :size="25" :color="'#42C465'" />
</div>
<div>短编号</div>
<div style="font-size: 15px;padding-top: 15px;padding-left: 10px">
版本:{{optionValue}}
</div>
</div>
<BasicForm @register="registerForm1" />
<!-- 版本管理 弹窗-->
<VersionModal @register="registerModal" @success="handleSuccess" />
</div>
</template>
<script lang="ts" setup>
import { Select } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import { Description } from '@/components/Description';
import { PageWrapper } from '@/components/Page';
import { Divider } from 'ant-design-vue';
import {router} from "@/router";
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Form';
import {detailSchema2, detailSchema5, detailSchema4,} from './referenceDocument.data.ts';
import {tableListTwo, treeDataList2} from "./mock"
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import VersionModal from '@/views/dataStandards/basicStandards/VersionModal.vue'
import {useModal} from "@/components/Modal";
import { useMessage } from '@/hooks/web/useMessage';
import { columnsTwo } from './referenceDocument.data';
const route = useRoute()
const title = ref('')
const formData = ref({})
const businessId = ref('')
const isShow = ref(false)
const optionValue = ref('v1')
const [registerModal, { openModal }] = useModal();
const { createMessage, createConfirm } = useMessage();
const [registerForm1, { setFieldsValue: setFieldsValue1 }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: detailSchema2,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerForm2, { setFieldsValue: setFieldsValue2,updateSchema:updateSchema2 }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: detailSchema5,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerForm3, { setFieldsValue: setFieldsValue3 }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: detailSchema4,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,getRowSelection }] = useTable({
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: tableListTwo.length,
code:'',
message:'',
data: tableListTwo,
};
return { ...response};
},
columns: columnsTwo,
useSearchForm: false,
showTableSetting: false,
bordered: true,
actionColumn: {
width: 120,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
const options = ref<any>([
{ value: 'V1', label: 'V1' },
{ value: 'V2', label: 'V2' },
{ value: 'V3', label: 'V3' },
]);
/**编辑标准*/
function editButton(record) {
router.push({
path: '/dataStandards/namingDictionary/details',
});
}
function handleDelete() {}
/**版本管理 弹窗*/
function versionButton(record) {
openModal(true, {
});
}
/**下拉框改变事件*/
function handleChange(value) {
}
/**回滚*/
function resetButton(value) {
createMessage.success('回滚成功!')
}
/**退出查看*/
function exitButton(record) {
isShow.value = false
optionValue.value = 'V3'
}
/**版本管理 弹出回调函数*/
function handleSuccess(record) {
optionValue.value = record.values.versionName
isShow.value = true
}
/**初始化*/
onMounted(() => {
updateSchema2([
{
field: 'valueOne',
componentProps: { options:treeDataList2 },
},
]
);
setFieldsValue2({
valueOne: [1,2,3]
});
});
</script>
<style lang="less" scoped>
.desc-wrap {
padding: 16px;
background-color: @component-background;
}
</style>
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { formSchemaImport } from './referenceDocument.data';
import {treeDataListPath} from './mock'
import { useMessage } from '@/hooks/web/useMessage';
import {getMenuList} from "@/api/system/menu/menu";
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
//获取接口数据并放在下拉框里(这里是打开了一个弹框)
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
schemas: formSchemaImport,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
console.log('1111111111111111111111111111111')
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
}
updateSchema({
field: 'path',
componentProps: { treeData:treeDataListPath },
});
});
const getTitle = computed(() => ('导入文件选择'));
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal();
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleAddModal" >元模型</a-button>
<a-button :disabled="getRowSelection().selectedRowKeys <=0" type="primary" @click="handleRemove" >删除</a-button>
<a-button type="primary" >导入域</a-button>
<a-button type="primary" >导出域</a-button>
<a-button type="primary" >批量发布</a-button>
<a-button type="primary" @click="handleAddDomain" >新建域</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '移动',
},
{
label: '删除',
color: 'error',
onClick: handleRemove.bind(null, record),
},
{
label: '复制',
},
{
label: '查看详情',
onClick: handleView.bind(null, record),
},
// {
// // icon: 'ant-design:api-outlined',
// label: '关联关系',
// onClick: relatedRelationshipsButton.bind(null, record),
// },
]"
/>
</template>
</template>
</BasicTable>
<ReferenceDocumentModal @register="registerModal" @success="handleSuccess"/>
<manage-modal @register="registerModalManage" @success="handleSuccess"/>
<RemoveModal @register="registerModalRemove"/>
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive,unref,onDeactivated,onMounted } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import ReferenceDocumentModal from "./referenceDocumentModal.vue";
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import {tableList} from "./mock";
import { columns, searchFormSchema } from './referenceDocument.data';
import { useGo } from '@/hooks/web/usePage';
import { downloadByData } from '@/utils/file/download';
import { useRoute,onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData';
import {useUserStore} from "@/store/modules/user";
import {router} from "@/router";
import ManageModal from "./manageModal.vue";
import RemoveModal from "@/views/dataStandards/namingDictionary/domain/removeModal.vue";
defineOptions({ name: 'AccountManagement' });
const { createMessage,createConfirm } = useMessage();
const filterStore = useFilterStore();
const route = useRoute();
const go = useGo();
const [registerModal, { openModal }] = useModal();
const [registerModalManage, { openModal:openModalManage }] = useModal();
const [registerModalRemove, { openModal:openModalRemove }] = useModal();
const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
title: '域管理列表',
api: async (params) => {
console.log('tableList',tableList)
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: tableList.length,
code:'',
message:'',
data: tableList,
};
return { ...response};
},
rowKey: 'businessId',
rowSelection: true,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info);
return info;
},
actionColumn: {
width: 220,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
function handleAddModal() {
openModal(true, {
isUpdate: false,
});
}
function handleAddDomain() {
openModalManage(true, {
isUpdate: false,
});
}
function handleDeleteIds() {
createConfirm({
iconType: 'warning',
title: '确认删除',
content: '确认批量删除选中数据吗?',
onOk() {
createMessage.success('批量删除成功!');
},
});
}
/** 重置密码弹窗确定按钮*/
/** 删除按钮*/
function handleDelete(record: Recordable) {
createMessage.success('删除成功!');
reload();
}
/** 导出按钮*/
async function handleExport() {
}
function handleRemove() {
openModalRemove(
true,{
}
)
}
function handleView(record: Recordable) {
router.push({
path: '/dataStandards/namingDictionary/domain/details',
});
}
/**删除按钮*/
function deleteButton() {
createMessage.success('删除成功!');
}
/**关联关系*/
function relatedRelationshipsButton(record: Recordable) {
router.push({
path: '/dataStandards/basicStandards/relatedRelationships',
query: {
businessId:201,
},
});
}
/** 导入成功*/
function handleImportSuccess() {
reload();
}
/** 新增/编辑成功*/
function handleSuccess({ isUpdate, values }) {
if (isUpdate) {
// 演示不刷新表格直接更新内部数据。
// 注意:updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
const result = updateTableDataRecord(values.id, values);
console.log(result);
reload();
} else {
reload();
}
}
onMounted(() => {
});
</script>
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import Icon from '@/components/Icon/Icon.vue';
import { BasicForm, useForm } from '@/components/Form';
import { formSchemaManage } from './referenceDocument.data';
import TreeTwo from './treeTwo.vue'
import { useMessage } from '@/hooks/web/useMessage';
import {treeDataList2,options} from "./mock";
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
//获取接口数据并放在下拉框里(这里是打开了一个弹框)
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
schemas: formSchemaManage,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
// 通过id获取行详情信息
// 塞值
setFieldsValue({
...data.record,
});
}
updateSchema([
{
field: 'path',
componentProps: { options:treeDataList2 },
},
{
field: 'modal',
componentProps: { options:options },
},
]
);
});
const getTitle = computed(() => ('新建域'));
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal();
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
<style lang="scss" scoped>
.modalRow{
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
.clearAll{
padding-right: 10px;
font-size: 16px;
}
.right{
display: flex;
align-items: center;
justify-content: space-between;
}
}
.addDialogBG{
margin: 10px;
border-radius: 10px;
padding: 20px;
background-color: #E8ECF7;
width: 98%;
height: 400px;
}
</style>
export const tableList: any[] = [
{
businessId: 1,
name: '短编号',
valueOne: '---',
flag: '已发布',
group: '共享工作组',
},
{
businessId: 2,
name: '短编号',
valueOne: '---',
flag: '已发布',
group: '共享工作组',
},
{
businessId: 3,
name: '短编号',
valueOne: '---',
flag: '已发布',
group: '共享工作组',
},
{
businessId: 4,
name: '短编号',
valueOne: '---',
flag: '已发布',
group: '共享工作组',
},
{
businessId: 5,
name: '短编号',
valueOne: '---',
flag: '已发布',
group: '共享工作组',
},
]
export const tableListRemove = [
{
businessId: 1,
name: '日期类',
dicName: '关联域样例',
path: '命名字典-关联域/关联域样例',
}
]
export const tableListDic = [
{
businessId: 1,
name: '关联域样例',
path: '命名字典-关联域/关联域样例',
},
]
export const treeDataList = [
{
label: '命名字典',
value: 1,
icon: 'home|svg',
children: [
{
label: '关联域',
value: 2,
icon: 'home|svg',
children: [
{ label: '关联域样例',
value: 3,
icon: 'home|svg',
children: [],
},
],
},
],
},
]
export const treeDataList2 = [
{
label: '域',
value: 1,
icon: 'home|svg',
children: [
{
label: '共享工作区',
value: 2,
icon: 'home|svg',
children: [
{ label: '日期类',
value: 3,
icon: 'home|svg',
children: [
],
},
],
},
],
},
]
export const treeDataListPath = [
{
label: '主体管理',
businessId: 1,
children: [
{ label: 'admin_个人工作区', businessId: 2 },
{ label: '共享工作区', businessId: 3 },
{ label: '商城工作区', businessId: 4 },
{ label: '指标工作区', businessId: 5 },
],
},
]
export const treeDataListTwo = [
{
label: '默认工作组',
businessId: 1,
children: [
{ label: '默认工作组01', businessId: 2 },
{ label: '默认工作组02', businessId: 3 },
{ label: '默认工作组03', businessId: 4 },
{ label: '默认工作组04', businessId: 5 },
],
},
]
export const options = [
{
value: '标准数据',
label: '标准数据',
children: [
{
value: '引用文档元模型',
label: '引用文档元模型',
children: [
],
},
],
},
];
export const tableListTwo: any[] = [
{
businessId: 1,
name: '某领域办公办文格式撰写标准',
type: 'DOCX',
},
]
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import Icon from '@/components/Icon/Icon.vue';
import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './referenceDocument.data';
import TreeTwo from './treeTwo.vue'
import { useMessage } from '@/hooks/web/useMessage';
import {treeDataList,options} from "./mock";
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
//获取接口数据并放在下拉框里(这里是打开了一个弹框)
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
schemas: formSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
// 通过id获取行详情信息
// 塞值
setFieldsValue({
...data.record,
});
}
updateSchema([
{
field: 'path',
componentProps: { options:treeDataList },
},
]
);
});
const getTitle = computed(() => ('域'));
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal();
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
<style lang="scss" scoped>
.modalRow{
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
.clearAll{
padding-right: 10px;
font-size: 16px;
}
.right{
display: flex;
align-items: center;
justify-content: space-between;
}
}
.addDialogBG{
margin: 10px;
border-radius: 10px;
padding: 20px;
background-color: #E8ECF7;
width: 98%;
height: 400px;
}
</style>
<template>
<BasicModal width="40%" height="200" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<div>当前所选域已被以下命名字典关联,无法删除,请先在对应命名字典中移除关联并发布后再试</div>
<BasicTable @register="registerTable">
</BasicTable>
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import {removeColumns} from './referenceDocument.data';
import {tableListRemove, treeDataListPath} from './mock'
import { useMessage } from '@/hooks/web/useMessage';
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
//获取接口数据并放在下拉框里(这里是打开了一个弹框)
const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: tableListRemove.length,
code:'',
message:'',
data: tableListRemove,
};
return { ...response};
},
columns:removeColumns,
useSearchForm: false,
showTableSetting: false,
bordered: true,
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
console.log('1111111111111111111111111111111')
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
}
});
const getTitle = computed(() => ('确认删除'));
async function handleSubmit() {
try {
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal();
emit('success', { isUpdate: unref(isUpdate), });
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
<template>
<div class="m-4 mr-0 overflow-hidden bg-white">
<BasicTree
title="工作组"
ref="treeRef"
toolbar
search
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
:clickRowToExpand="true"
:checkable="true"
:defaultExpandAll="true"
:treeData="treeData"
:fieldNames="{ key: 'businessId', title: 'label' }"
@select="handleSelect"
/>
</div>
</template>
<script lang="ts" setup>
import {nextTick, onMounted, ref, unref} from 'vue';
import {BasicTree, TreeActionType, TreeItem} from '@/components/Tree';
import { getDeptList } from '@/api/system/dept/dept';
import {Nullable} from "@vben/types";
import {treeDataListTwo} from "./mock";
defineOptions({ name: 'DeptTree' });
const emit = defineEmits(['select']);
const treeData = ref<TreeItem[]>([]);
const treeRef = ref<Nullable<TreeActionType>>(null);
async function fetch() {
treeData.value = treeDataListTwo
await nextTick(() => {
getTree().expandAll(true)
})
}
function getTree() {
const tree = unref(treeRef);
if (!tree) {
throw new Error('tree is null!');
}
return tree;
}
function handleSelect(keys) {
emit('select', keys[0]);
}
onMounted(() => {
fetch();
});
</script>
<style lang="scss" scoped>
.bg-white{
width: 97%;
}
::v-deep(.vben-tree){
background-color: #E8ECF7!important;
}
</style>
...@@ -18,8 +18,14 @@ ...@@ -18,8 +18,14 @@
{ {
label: '移动', label: '移动',
}, },
{ {
label: '删除', label: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: deleteButton.bind(null, record),
},
}, },
{ {
label: '复制', label: '复制',
...@@ -28,11 +34,11 @@ ...@@ -28,11 +34,11 @@
label: '查看详情', label: '查看详情',
onClick: handleView.bind(null, record), onClick: handleView.bind(null, record),
}, },
{ // {
// icon: 'ant-design:api-outlined', // // icon: 'ant-design:api-outlined',
label: '关联关系', // label: '关联关系',
onClick: relatedRelationshipsButton.bind(null, record), // onClick: relatedRelationshipsButton.bind(null, record),
}, // },
]" ]"
/> />
</template> </template>
...@@ -68,7 +74,7 @@ const [registerModal, { openModal }] = useModal(); ...@@ -68,7 +74,7 @@ const [registerModal, { openModal }] = useModal();
const [registerModalManage, { openModal:openModalManage }] = useModal(); const [registerModalManage, { openModal:openModalManage }] = useModal();
const searchInfo = reactive<Recordable>({}); const searchInfo = reactive<Recordable>({});
const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({ const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
title: '引用文档管理列表', title: '命名字典管理列表',
api: async (params) => { api: async (params) => {
console.log('tableList',tableList) console.log('tableList',tableList)
const response = { const response = {
...@@ -102,7 +108,7 @@ const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,get ...@@ -102,7 +108,7 @@ const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,get
return info; return info;
}, },
actionColumn: { actionColumn: {
width: 230, width: 260,
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
// slots: { customRender: 'action' }, // slots: { customRender: 'action' },
...@@ -148,6 +154,10 @@ function handleView(record: Recordable) { ...@@ -148,6 +154,10 @@ function handleView(record: Recordable) {
path: '/dataStandards/namingDictionary/details', path: '/dataStandards/namingDictionary/details',
}); });
} }
/**删除按钮*/
function deleteButton() {
createMessage.success('删除成功!');
}
/**关联关系*/ /**关联关系*/
function relatedRelationshipsButton(record: Recordable) { function relatedRelationshipsButton(record: Recordable) {
router.push({ router.push({
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment