parent
19a3825c62
commit
add9532e04
@ -0,0 +1,235 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import ModalAdd from './src/ModalAdd.vue'
|
||||||
|
import ModalEdit from './src/ModalEdit.vue'
|
||||||
|
import { ref, h } from 'vue'
|
||||||
|
import { EditOutlined, DeleteOutlined, PlusOutlined, SearchOutlined, UndoOutlined } from '@ant-design/icons-vue';
|
||||||
|
|
||||||
|
const activeKey = ref('1');
|
||||||
|
const columns: any = [
|
||||||
|
{
|
||||||
|
title: '分支机构名称',
|
||||||
|
dataIndex: 'k1a',
|
||||||
|
key: 'k1a',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '机构类型',
|
||||||
|
dataIndex: 'k2',
|
||||||
|
key: 'k2',
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '关联子公司',
|
||||||
|
dataIndex: 'k3',
|
||||||
|
key: 'k3',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '包含业务线',
|
||||||
|
dataIndex: 'k4',
|
||||||
|
key: 'k4',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '关联员工',
|
||||||
|
dataIndex: 'k5',
|
||||||
|
key: 'k5',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '管理员',
|
||||||
|
dataIndex: 'k6',
|
||||||
|
key: 'k6',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '联系电话',
|
||||||
|
dataIndex: 'k7',
|
||||||
|
key: 'k7',
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '更新时间',
|
||||||
|
dataIndex: 'k8',
|
||||||
|
key: 'k8',
|
||||||
|
sorter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
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: '详情',
|
||||||
|
}
|
||||||
|
];
|
||||||
|
// 新增
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<a-row :wrap="false" class="y1-enterprise-centre-branch">
|
||||||
|
<a-col flex="1 1 auto">
|
||||||
|
<a-row :wrap="false" class="y1y1">
|
||||||
|
<a-col flex="1 1 auto">
|
||||||
|
<a-row :wrap="false">
|
||||||
|
<a-col flex="1 1 300px" class="y1y1x1">
|
||||||
|
<a-space>
|
||||||
|
<a-input placeholder="部门名称" />
|
||||||
|
<a-button type="primary" :icon="h(SearchOutlined)">查询</a-button>
|
||||||
|
<a-button :icon="h(UndoOutlined)">重置</a-button>
|
||||||
|
</a-space>
|
||||||
|
</a-col>
|
||||||
|
<a-col flex="0 0 200px" class="y1y1x2">
|
||||||
|
<a-button type="primary" :icon="h(PlusOutlined)" @click="doShowModalAdd(true)">新建机构</a-button>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row :wrap="false" class="y1y2">
|
||||||
|
<a-col flex="1 1 auto">
|
||||||
|
<a-table class="ant-table-striped" :dataSource="dataSource" :columns="columns"
|
||||||
|
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')">
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<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.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>
|
||||||
|
<ModalAdd :isShow="isShowModalAdd" @do-cancel="doShowModalAdd"></ModalAdd>
|
||||||
|
<ModalEdit :isShow="isShowModalEdit" :record="record" @do-cancel="doShowModalEdit"></ModalEdit>
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,77 @@
|
|||||||
|
|
||||||
|
<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
|
||||||
|
})
|
||||||
|
const emit = defineEmits(['doCancel'])
|
||||||
|
// 模态显示
|
||||||
|
// const isOpen: any = ref(true);
|
||||||
|
// 确认
|
||||||
|
const doOk = (e: MouseEvent) => {
|
||||||
|
console.log('ok');
|
||||||
|
emit('doCancel', false)
|
||||||
|
}
|
||||||
|
// 取消
|
||||||
|
const doCancel = (e: MouseEvent) => {
|
||||||
|
emit('doCancel', false)
|
||||||
|
}
|
||||||
|
const onFinish = (values: any) => {
|
||||||
|
console.log('Success:', values);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onFinishFailed = (errorInfo: any) => {
|
||||||
|
console.log('Failed:', errorInfo);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSelect = (errorInfo: any) => {
|
||||||
|
console.log('onSelect');
|
||||||
|
};
|
||||||
|
|
||||||
|
</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" />
|
||||||
|
</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="true"></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,58 @@
|
|||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
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
|
||||||
|
})
|
||||||
|
const emit = defineEmits(['doCancel'])
|
||||||
|
// 模态显示
|
||||||
|
// const isOpen: any = ref(true);
|
||||||
|
// 确认
|
||||||
|
const doOk = (e: MouseEvent) => {
|
||||||
|
console.log('ok');
|
||||||
|
emit('doCancel', false)
|
||||||
|
}
|
||||||
|
// 取消
|
||||||
|
const doCancel = (e: MouseEvent) => {
|
||||||
|
emit('doCancel', false)
|
||||||
|
}
|
||||||
|
const onFinish = (values: any) => {
|
||||||
|
console.log('Success:', values);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onFinishFailed = (errorInfo: any) => {
|
||||||
|
console.log('Failed:', errorInfo);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSelect = (errorInfo: any) => {
|
||||||
|
console.log('onSelect');
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<template v-if="props.isShow">
|
||||||
|
<a-modal :open="true" title="选择负责人员" @ok="doOk" @cancel="doCancel">
|
||||||
|
cs
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
Loading…
Reference in new issue