linkage
/
YX-SCM
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

分支机构功能

Browse Source
qhw-dev-1010
mhsnet 1 year ago
parent 19a3825c62
commit add9532e04
5 changed files with 443 additions and 0 deletions
Show Stats Download Patch File Download Diff File

235
yunxi-ui-admin-vben/src/views/stpagea/enterpriseCentre/branch/index.vue
Unescape View File

@ -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
yunxi-ui-admin-vben/src/views/stpagea/enterpriseCentre/branch/src/ConfirmDel.vue
Unescape View File

77
yunxi-ui-admin-vben/src/views/stpagea/enterpriseCentre/branch/src/ModalAdd.vue
Unescape View File

@ -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>

73
yunxi-ui-admin-vben/src/views/stpagea/enterpriseCentre/branch/src/ModalEdit.vue
Unescape View File

@ -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>

58
yunxi-ui-admin-vben/src/views/stpagea/enterpriseCentre/branch/src/TransferList.vue
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save