17602169347
1 year ago
parent
ffaf675fb8
commit
ae8bf17d9e
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" :title="isUpdate ? t('action.edit') : t('action.create')" @ok="handleSubmit">
|
||||
<BasicForm @register="registerForm" />
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref } from 'vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useMessage } from '@/hooks/web/useMessage'
|
||||
import { BasicForm, useForm } from '@/components/Form'
|
||||
import { BasicModal, useModalInner } from '@/components/Modal'
|
||||
import { createFormSchema, updateFormSchema } from './customer.data'
|
||||
import { createEnterprise, getEnterprise, updateEnterprise } from '@/api/system/enterprise'
|
||||
|
||||
|
||||
defineOptions({ name: 'EnterpriseModal' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const { createMessage } = useMessage()
|
||||
const emit = defineEmits(['success', 'register'])
|
||||
const isUpdate = ref(true)
|
||||
|
||||
const [registerForm, { setFieldsValue, resetFields, resetSchema, validate }] = useForm({
|
||||
labelWidth: 120,
|
||||
baseColProps: { span: 24 },
|
||||
schemas: createFormSchema,
|
||||
showActionButtonGroup: false,
|
||||
actionColOptions: { span: 23 }
|
||||
})
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
resetFields()
|
||||
setModalProps({ confirmLoading: false })
|
||||
isUpdate.value = !!data?.isUpdate
|
||||
if (unref(isUpdate)) {
|
||||
resetSchema(updateFormSchema)
|
||||
const res = await getEnterprise(data.record.id)
|
||||
setFieldsValue({ ...res })
|
||||
}
|
||||
})
|
||||
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const values = await validate()
|
||||
setModalProps({ confirmLoading: true })
|
||||
if (unref(isUpdate)) {
|
||||
await updateEnterprise(values)
|
||||
} else {
|
||||
await createEnterprise(values)
|
||||
}
|
||||
closeModal()
|
||||
emit('success')
|
||||
createMessage.success(t('common.saveSuccessText'))
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,403 @@
|
||||
<script lang="ts" setup>
|
||||
import ModalAdd from './src/ModalAdd.vue'
|
||||
import ModalEdit from './src/ModalEdit.vue'
|
||||
import DrawerFilter from './src/DrawerFilter.vue'
|
||||
import { onMounted, reactive, ref, h } from 'vue'
|
||||
import { EditOutlined, DeleteOutlined, PlusOutlined, SearchOutlined, UndoOutlined, FilterOutlined } from '@ant-design/icons-vue';
|
||||
import {
|
||||
getSubjectBasicPage,
|
||||
getSubjectBasic,
|
||||
createSubjectBasic,
|
||||
updateSubjectBasic,
|
||||
deleteSubjectBasic,
|
||||
exportSubjectBasic,
|
||||
} from '@/api/xxjj/subjectBasic/index'
|
||||
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
|
||||
import { useRender } from '@/components/Table'
|
||||
const headStyleV: any = { color: '#262626', 'background-color': '#F7F8FA', 'border-radius': '3px' }
|
||||
const activeKey = ref('1');
|
||||
const columns: any = [
|
||||
{
|
||||
title: '客户名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
sorter: true,
|
||||
width: 250
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'customerStatus',
|
||||
key: 'customer_status',
|
||||
sorter: true,
|
||||
customRender: ({ text }) => {
|
||||
return useRender.renderDict(text, DICT_TYPE.CUSTOMER_STATUS)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '客户分类',
|
||||
dataIndex: 'calssify',
|
||||
key: 'calssify',
|
||||
sorter: true,
|
||||
customRender: ({ text }) => {
|
||||
return useRender.renderDict(text, DICT_TYPE.CUSTOMER_CALSSIFY)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '企业性质',
|
||||
dataIndex: 'enterpriseNature',
|
||||
key: 'enterprise_nature',
|
||||
sorter: true,
|
||||
customRender: ({ text }) => {
|
||||
return useRender.renderDict(text, DICT_TYPE.enterpriseNature)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '行业分类',
|
||||
dataIndex: 'industryClassify',
|
||||
key: 'industry_classify',
|
||||
sorter: true,
|
||||
customRender: ({ text }) => {
|
||||
return useRender.renderDict(text, DICT_TYPE.industryClassify)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '信用等级',
|
||||
dataIndex: 'customerStarrating',
|
||||
key: 'customer_starrating',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '业务进度',
|
||||
dataIndex: 'industrySchedule',
|
||||
key: 'industry_schedule',
|
||||
sorter: true,
|
||||
customRender: ({ text }) => {
|
||||
return useRender.renderDict(text, DICT_TYPE.industrySchedule)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '归属人员',
|
||||
dataIndex: 'belongingPeople',
|
||||
key: 'belongingPeople',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '生效时间',
|
||||
dataIndex: 'collaborationStart',
|
||||
key: 'collaboration_start',
|
||||
sorter: true,
|
||||
customRender: ({ text }) => {
|
||||
return useRender.renderDate(text, 'YYYY-MM-DD')
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '添加时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'create_time',
|
||||
sorter: true,
|
||||
customRender: ({ text }) => {
|
||||
return useRender.renderDate(text)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updateTime',
|
||||
key: 'update_time',
|
||||
sorter: true,
|
||||
customRender: ({ text }) => {
|
||||
return useRender.renderDate(text)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
}
|
||||
]
|
||||
const dataSource = reactive([])
|
||||
/* const dataSource: any = [
|
||||
{
|
||||
key: '1',
|
||||
k1a: '济钢城市矿产科技有限公司',
|
||||
k1b: 'JGCSKC202309030001',
|
||||
k1c: 'JGCSKC202309030001',
|
||||
k2: '总公司',
|
||||
k3: 4,
|
||||
k4: 100,
|
||||
k5: 100,
|
||||
k6: '魏杰',
|
||||
k7: '18612345678',
|
||||
k8: '2023-09-11 23:26:08',
|
||||
k9: '详情',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
k1a: '济钢城市矿产科技有限公司',
|
||||
k1b: 'JGCSKC202309030001',
|
||||
k1c: 'JGCSKC202309030001',
|
||||
k2: '子公司',
|
||||
k3: 1,
|
||||
k4: 100,
|
||||
k5: 100,
|
||||
k6: '徐守亮',
|
||||
k7: '18612345678',
|
||||
k8: '2023-09-11 23:26:08',
|
||||
k9: '详情',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
k1a: '日照济钢金属科技有限公司',
|
||||
k1b: 'JGCSKC202309030001',
|
||||
k1c: 'JGCSKC202309030001',
|
||||
k2: '子公司',
|
||||
k3: 1,
|
||||
k4: 50,
|
||||
k5: 200,
|
||||
k6: '高鹏',
|
||||
k7: '18612344321',
|
||||
k8: '2023-09-11 23:26:08',
|
||||
k9: '详情',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
k1a: '济钢城市矿产科技（佛山）有限公司',
|
||||
k1b: 'JGCSKC202309030001',
|
||||
k1c: 'JGCSKC202309030001',
|
||||
k2: '子公司',
|
||||
k3: 2,
|
||||
k4: 20,
|
||||
k5: 300,
|
||||
k6: '王恒山',
|
||||
k7: '18612344321',
|
||||
k8: '2023-09-11 23:26:08',
|
||||
k9: '详情',
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
k1a: '山东济钢愿景工业科技有限公司',
|
||||
k1b: 'JGCSKC202309030001',
|
||||
k1c: 'JGCSKC202309030001',
|
||||
k2: '子公司',
|
||||
k3: 1,
|
||||
k4: 30,
|
||||
k5: 400,
|
||||
k6: '邹慧丽',
|
||||
k7: '18612344321',
|
||||
k8: '2023-09-11 23:26:08',
|
||||
k9: '详情',
|
||||
}
|
||||
]; */
|
||||
const pagination = reactive({
|
||||
total: 200,
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const handleTableChange = async(page, filters, sorter, aaa) => {
|
||||
let param = {businessType: 0, pageNo: page.current, pageSize: page.pageSize};
|
||||
if(sorter.columnKey){
|
||||
param.sidx = sorter.columnKey;
|
||||
if(sorter.order.indexOf('asc')){
|
||||
param.sort = 'asc';
|
||||
}else{
|
||||
param.sort = 'desc';
|
||||
}
|
||||
}
|
||||
debugger
|
||||
const result = await getSubjectBasicPage(param);
|
||||
debugger
|
||||
pagination.current = page.current;
|
||||
pagination.pageSize = page.pageSize;
|
||||
pagination.total = result.total;
|
||||
state.dataSource = result.list;
|
||||
};
|
||||
|
||||
const state = reactive({
|
||||
dataSource: [],
|
||||
})
|
||||
onMounted( async () => {
|
||||
state.dataSource = await handlePage()
|
||||
})
|
||||
const handlePage = async () => {
|
||||
let param = {businessType: 0, pageNo: pagination.current, pageSize: pagination.pageSize};
|
||||
const result = await getSubjectBasicPage(param);
|
||||
pagination.total = result.total;
|
||||
return result.list;
|
||||
/* if(state.userUpdatePasswordReqVO.newPassword != state.userUpdatePasswordReqVO.newPassword2){
|
||||
message.error('新密码两次输入不一致');
|
||||
return false
|
||||
}
|
||||
|
||||
if(result){
|
||||
message.success('修改成功');
|
||||
}else{
|
||||
message.error('修改失败');
|
||||
} */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 新增
|
||||
let isShowModalAdd = ref(false);
|
||||
const doShowModalAdd = (isshow: boolean) => {
|
||||
isShowModalAdd.value = isshow;
|
||||
}
|
||||
// 编辑
|
||||
let isShowModalEdit = ref(false);
|
||||
const doShowModalEdit = (isshow: boolean, record: any) => {
|
||||
console.log(record);
|
||||
isShowModalEdit.value = isshow;
|
||||
}
|
||||
// 高级筛选
|
||||
let isShowDrawerFilter = ref(false);
|
||||
const doShowDrawerFilter = (isshow: boolean) => {
|
||||
isShowDrawerFilter.value = isshow;
|
||||
}
|
||||
const doCloseDrawerFilter = (isshow: boolean) => {
|
||||
isShowDrawerFilter.value = isshow;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-row :wrap="false" class="y1-enterprise-centre-branch">
|
||||
<a-col flex="1 1 auto">
|
||||
<a-card title="分支机构" :bordered="false" style="border-radius: 3px;" :headStyle="headStyleV">
|
||||
<a-row :wrap="false" class="y1y1">
|
||||
<a-col flex="1 1 auto">
|
||||
|
||||
<a-row :wrap="false">
|
||||
<a-col flex="1 1 auto" class="y1y1x1">
|
||||
<a-space>
|
||||
<a-input placeholder="部门名称" />
|
||||
<a-button type="primary" :icon="h(SearchOutlined)" @click="doShowDrawerFilter(true)">查询</a-button>
|
||||
<a-button :icon="h(UndoOutlined)">重置</a-button>
|
||||
<a-button type="link" :icon="h(FilterOutlined)" @click="doShowDrawerFilter(true)">高级筛选</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :wrap="false" class="y1y2">
|
||||
<a-col flex="1 1 auto">
|
||||
<a-row :wrap="false">
|
||||
<a-col flex="1 1 300px" class="y1y1x1">
|
||||
<a-space>
|
||||
<a-button type="primary" :icon="h(PlusOutlined)" @click="doShowModalAdd(true)">新建机构</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col flex="0 0 250px" class="y1y1x2">
|
||||
<a-space>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :wrap="false" class="y1y3">
|
||||
<a-col flex="1 1 auto">
|
||||
<a-table class="ant-table-striped" :dataSource="state.dataSource" :columns="columns" :pagination="pagination" @change="handleTableChange"
|
||||
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'name'">
|
||||
<a-row>
|
||||
<a-col :span="5">
|
||||
<div style="text-align: center;">
|
||||
<a-image :width="40"
|
||||
:src="record.logo" />
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="19">
|
||||
<div>{{ record.name }}</div>
|
||||
<template v-if="record.reservedFields1 == 1">
|
||||
<div>国内客户</div>
|
||||
</template>
|
||||
<template v-if="record.reservedFields1 == 2">
|
||||
<div>国外客户</div>
|
||||
</template>
|
||||
<template v-if="record.reservedFields1 == 3">
|
||||
<div>济钢内部</div>
|
||||
</template>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<!-- <template v-if="column.key === 'k1a'">
|
||||
<a-row>
|
||||
<a-col :span="5">
|
||||
<div style="text-align: center;">
|
||||
<a-image :width="40"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="19">
|
||||
<div>{{ record.k1a }}</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template> -->
|
||||
<template v-else-if="column.dataIndex === 'customerStarrating'">
|
||||
<a-rate v-model:value="record.customerStarrating" :disabled="true" />
|
||||
</template>
|
||||
<template v-else-if="column.key === 'k7'">
|
||||
<template v-if="record.k7 == true">
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<div class="dot-true"></div>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<div>启用</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<div class="dot-false"></div>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<div>禁用</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space size="0">
|
||||
<template #split>
|
||||
<a-divider type="vertical" />
|
||||
</template>
|
||||
<!-- <a-button type="link" :icon="h(EditOutlined)" @click=doShowModalEdit(true, record)>编辑</a-button> -->
|
||||
<a-button type="link" :icon="h(DeleteOutlined)" danger>删除</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<ModalAdd :isShow="isShowModalAdd" @do-cancel="doShowModalAdd"></ModalAdd>
|
||||
<ModalEdit :isShow="isShowModalEdit" :record="record" @do-cancel="doShowModalEdit"></ModalEdit>
|
||||
<DrawerFilter :isShow="isShowDrawerFilter" @do-close="doCloseDrawerFilter"></DrawerFilter>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.y1-enterprise-centre-branch {
|
||||
margin: 24px;
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.y1y1 {
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.y1y2 {
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.y1y3 {
|
||||
margin: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,86 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import TransferList from './TransferList.vue'
|
||||
|
||||
interface FormState {
|
||||
k1: string;
|
||||
k2: string;
|
||||
k3: string;
|
||||
k4: string;
|
||||
k5: string;
|
||||
}
|
||||
|
||||
const formState = reactive<FormState>({
|
||||
k1: '',
|
||||
k2: '济钢城市矿产科技有限公司',
|
||||
k3: '',
|
||||
k4: '',
|
||||
k5: '',
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
isShow: Boolean
|
||||
})
|
||||
const emit = defineEmits(['doCancel'])
|
||||
// 模态显示
|
||||
// const isOpen: any = ref(true);
|
||||
// 确认
|
||||
const doOk = () => {
|
||||
console.log('ok');
|
||||
emit('doCancel', false)
|
||||
}
|
||||
// 取消
|
||||
const doCancel = () => {
|
||||
emit('doCancel', false)
|
||||
}
|
||||
const onFinish = (values: any) => {
|
||||
console.log('Success:', values);
|
||||
};
|
||||
|
||||
const onFinishFailed = (errorInfo: any) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
|
||||
// 传输框
|
||||
let isShowTransferList = ref(false);
|
||||
// const doShowModalAdd = (isshow: boolean) => {
|
||||
// isShowModalAdd.value = isshow;
|
||||
// }
|
||||
const onSelect = (formState: any) => {
|
||||
isShowTransferList.value = true;
|
||||
console.log(formState.k3);
|
||||
};
|
||||
// 取消传输选择
|
||||
const doCancelA = (isshow: boolean) => {
|
||||
isShowTransferList.value = isshow
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="props.isShow">
|
||||
<a-modal :open="true" title="新建机构" @ok="doOk" @cancel="doCancel">
|
||||
<a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
|
||||
@finish="onFinish" @finishFailed="onFinishFailed">
|
||||
<a-form-item label="机构名称" name="k1" :rules="[{ required: true, message: '请输入机构名称!' }]">
|
||||
<a-input v-model:value="formState.k1" placeholder="输入内容" />
|
||||
</a-form-item>
|
||||
<a-form-item label="上级机构" name="k2" :rules="[]">
|
||||
<a-input v-model:value="formState.k2" disabled />
|
||||
</a-form-item>
|
||||
<a-form-item label=" 负责人员" name="k3" :rules="[{ required: true, message: '请选择负责人员!' }]">
|
||||
<a-input v-model:value="formState.k3" placeholder="选择人员" @click="onSelect(formState)" />
|
||||
</a-form-item>
|
||||
<a-form-item label=" 联系电话" name="k4" :rules="[{ required: true, message: '请输入联系电话!' }]">
|
||||
<a-input v-model:value="formState.k4" placeholder="输入内容" />
|
||||
</a-form-item>
|
||||
<a-form-item label=" 机构描述" name="k5" :rules="[]">
|
||||
<a-textarea v-model:value="formState.k5" placeholder="输入内容" :auto-size="{ minRows: 4, maxRows: 6 }" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
<TransferList :isShow="isShowTransferList" @do-cancel="doCancelA"></TransferList>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -0,0 +1,73 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import TransferList from './TransferList.vue'
|
||||
import { reactive } from 'vue';
|
||||
|
||||
interface FormState {
|
||||
k1: string;
|
||||
k2: string;
|
||||
k3: string;
|
||||
k4: string;
|
||||
k5: string;
|
||||
}
|
||||
|
||||
const formState = reactive<FormState>({
|
||||
k1: '',
|
||||
k2: '济钢城市矿产科技有限公司',
|
||||
k3: '',
|
||||
k4: '',
|
||||
k5: '',
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
isShow: Boolean,
|
||||
record: Object
|
||||
})
|
||||
const emit = defineEmits(['doCancel'])
|
||||
// 模态显示
|
||||
// const isOpen: any = ref(true);
|
||||
// 确认
|
||||
const doOk = (e: MouseEvent) => {
|
||||
console.log('ok');
|
||||
emit('doCancel', [false, null])
|
||||
}
|
||||
// 取消
|
||||
const doCancel = (e: MouseEvent) => {
|
||||
emit('doCancel', [false, null])
|
||||
}
|
||||
const onFinish = (values: any) => {
|
||||
console.log('Success:', values);
|
||||
};
|
||||
|
||||
const onFinishFailed = (errorInfo: any) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="props.isShow">
|
||||
<a-modal :open="true" title="新建机构" @ok="doOk" @cancel="doCancel">
|
||||
<a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
|
||||
@finish="onFinish" @finishFailed="onFinishFailed">
|
||||
<a-form-item label="机构名称" name="k1" :rules="[{ required: true, message: '请输入机构名称!' }]">
|
||||
<a-input v-model:value="formState.k1" placeholder="输入内容" />
|
||||
</a-form-item>
|
||||
<a-form-item label="上级机构" name="k2" :rules="[]">
|
||||
<a-input v-model:value="formState.k2" disabled />
|
||||
</a-form-item>
|
||||
<a-form-item label=" 负责人员" name="k3" :rules="[{ required: true, message: '请选择负责人员!' }]">
|
||||
<a-input v-model:value="formState.k3" placeholder="选择人员" />
|
||||
</a-form-item>
|
||||
<a-form-item label=" 联系电话" name="k4" :rules="[{ required: true, message: '请输入联系电话!' }]">
|
||||
<a-input v-model:value="formState.k4" placeholder="输入内容" />
|
||||
</a-form-item>
|
||||
<a-form-item label=" 机构描述" name="k5" :rules="[]">
|
||||
<a-textarea v-model:value="formState.k5" placeholder="输入内容" :auto-size="{ minRows: 4, maxRows: 6 }" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -0,0 +1,105 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, computed, watch } from 'vue';
|
||||
import type { TransferProps, TreeProps } from 'ant-design-vue';
|
||||
|
||||
const props = defineProps({
|
||||
isShow: Boolean
|
||||
})
|
||||
|
||||
const emit = defineEmits(['doCancel'])
|
||||
|
||||
const tData: TransferProps['dataSource'] = [
|
||||
{ key: 'k1', title: 'v1' },
|
||||
{
|
||||
key: 'k2',
|
||||
title: 'v2',
|
||||
children: [
|
||||
{ key: 'k2-1', title: 'v2-1' },
|
||||
{
|
||||
key: 'k2-2', title: 'v2-2', children: [
|
||||
{ key: 'k2-2-1', title: 'v2-2-1' },
|
||||
{ key: 'k2-2-2', title: 'v2-2-2' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{ key: 'k3', title: 'v3' },
|
||||
];
|
||||
|
||||
const transferDataSource: TransferProps['dataSource'] = [];
|
||||
|
||||
function flatten(list: TransferProps['dataSource'] = []) {
|
||||
list.forEach(item => {
|
||||
transferDataSource.push(item);
|
||||
flatten(item.children);
|
||||
});
|
||||
}
|
||||
|
||||
flatten(JSON.parse(JSON.stringify(tData)));
|
||||
|
||||
function isChecked(selectedKeys: (string | number)[], eventKey: string | number) {
|
||||
return selectedKeys.indexOf(eventKey) !== -1;
|
||||
}
|
||||
|
||||
function handleTreeData(treeNodes: TransferProps['dataSource'], targetKeys: string[] = []) {
|
||||
return treeNodes.map(({ children, ...props }) => ({
|
||||
...props,
|
||||
disabled: targetKeys.includes(props.key as string),
|
||||
children: handleTreeData(children ?? [], targetKeys),
|
||||
}));
|
||||
}
|
||||
|
||||
const targetKeys = ref<string[]>([]);
|
||||
const dataSource = ref(transferDataSource);
|
||||
const treeData = computed(() => {
|
||||
return handleTreeData(tData, targetKeys.value);
|
||||
});
|
||||
const onChecked = (
|
||||
e: Parameters<TreeProps['onCheck']>[1] | Parameters<TreeProps['onSelect']>[1],
|
||||
checkedKeys: string[],
|
||||
onItemSelect: (n: any, c: boolean) => void,
|
||||
) => {
|
||||
const { eventKey } = e.node;
|
||||
onItemSelect(eventKey, !isChecked(checkedKeys, eventKey));
|
||||
};
|
||||
|
||||
console.log(tData);
|
||||
console.log(transferDataSource);
|
||||
console.log(targetKeys);
|
||||
console.log(dataSource);
|
||||
console.log(treeData);
|
||||
// 确认
|
||||
const doOk = () => {
|
||||
console.log(console.log(targetKeys.value));
|
||||
//emit('doCancel', false)
|
||||
}
|
||||
// 取消
|
||||
const doCancel = () => {
|
||||
emit('doCancel', false)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="props.isShow">
|
||||
<a-modal :open="true" title="选择负责人员" @ok="doOk" @cancel="doCancel" style="padding: 24px;">
|
||||
<a-transfer v-model:target-keys="targetKeys" class="tree-transfer" :render="item => item.title"
|
||||
:show-select-all="false" :data-source="dataSource">
|
||||
<template #children="{ direction, selectedKeys, onItemSelect }">
|
||||
<template v-if="direction === 'left'">
|
||||
<div style="margin: 24px;">
|
||||
<a-tree defaultExpandAll block-node checkable check-strictly :tree-data="treeData"
|
||||
:checked-keys="[...selectedKeys, ...targetKeys]"
|
||||
@check="(_, props) => { onChecked(props, [...selectedKeys, ...targetKeys], onItemSelect); }"
|
||||
@select="(_, props) => { onChecked(props, [...selectedKeys, ...targetKeys], onItemSelect); }">
|
||||
</a-tree>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-transfer>
|
||||
</a-modal>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
Loading…
Reference in new issue