feat: 业务管理页面开发
JINGYJ
11 months ago
parent
3194d116fe
commit
af67f7414f
@ -0,0 +1,24 @@
|
|||||||
|
export default {
|
||||||
|
path: "/businessManagement",
|
||||||
|
redirect: "/businessManagement/processConfiguration",
|
||||||
|
meta: {
|
||||||
|
title: "业务管理",
|
||||||
|
icon: 2,
|
||||||
|
rank: 10
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "/businessManagement/processConfiguration",
|
||||||
|
name: "ProcessConfiguration",
|
||||||
|
component: () =>
|
||||||
|
import("@/views/businessManagement/processConfiguration/index.vue"),
|
||||||
|
meta: {
|
||||||
|
title: "流程配置",
|
||||||
|
|
||||||
|
showLink: true,
|
||||||
|
showParent: true,
|
||||||
|
roles: ["admin", "common"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
} as RouteConfigsTable;
|
||||||
@ -0,0 +1,260 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref, watch } from "vue";
|
||||||
|
import type { CheckboxValueType } from "element-plus";
|
||||||
|
defineOptions({
|
||||||
|
name: "ProcessConfiguration"
|
||||||
|
});
|
||||||
|
const seachForm = reactive({
|
||||||
|
title: "",
|
||||||
|
publishDeptName: "",
|
||||||
|
status: ""
|
||||||
|
});
|
||||||
|
const processForm = reactive({
|
||||||
|
title: "",
|
||||||
|
publishDeptName: "",
|
||||||
|
status: ""
|
||||||
|
});
|
||||||
|
const pagination = reactive({
|
||||||
|
total: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
currentPage: 1,
|
||||||
|
background: true
|
||||||
|
});
|
||||||
|
const columns: TableColumnList = [
|
||||||
|
{
|
||||||
|
label: "序号",
|
||||||
|
prop: "diseaseName"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "流程名称",
|
||||||
|
prop: "diseaseName"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "创建人",
|
||||||
|
prop: "diseaseName"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "备注",
|
||||||
|
prop: "diseaseName"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "最新时间",
|
||||||
|
prop: "diseaseName"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "操作",
|
||||||
|
fixed: "right",
|
||||||
|
width: 350,
|
||||||
|
slot: "operation"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
const dataList = ref([]);
|
||||||
|
const search = () => {
|
||||||
|
pagination.currentPage = 1;
|
||||||
|
pagination.pageSize = 10;
|
||||||
|
};
|
||||||
|
|
||||||
|
const reset = () => {
|
||||||
|
seachForm.title = "";
|
||||||
|
seachForm.publishDeptName = "";
|
||||||
|
// search();
|
||||||
|
};
|
||||||
|
const createFlag = ref(false);
|
||||||
|
|
||||||
|
const create = () => {
|
||||||
|
createFlag.value = true;
|
||||||
|
// search();
|
||||||
|
};
|
||||||
|
// const changeStatus = item => {
|
||||||
|
// seachForm.status = item.id;
|
||||||
|
// };
|
||||||
|
const checkAll = ref(false);
|
||||||
|
const indeterminate = ref(false);
|
||||||
|
const value = ref<CheckboxValueType[]>([]);
|
||||||
|
const cities = ref([
|
||||||
|
{
|
||||||
|
value: "Beijing",
|
||||||
|
label: "Beijing"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "Shanghai",
|
||||||
|
label: "Shanghai"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "Nanjing",
|
||||||
|
label: "Nanjing"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "Chengdu",
|
||||||
|
label: "Chengdu"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "Shenzhen",
|
||||||
|
label: "Shenzhen"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "Guangzhou",
|
||||||
|
label: "Guangzhou"
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
watch(value, val => {
|
||||||
|
if (val.length === 0) {
|
||||||
|
checkAll.value = false;
|
||||||
|
indeterminate.value = false;
|
||||||
|
} else if (val.length === cities.value.length) {
|
||||||
|
checkAll.value = true;
|
||||||
|
indeterminate.value = false;
|
||||||
|
} else {
|
||||||
|
indeterminate.value = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleCheckAll = (val: CheckboxValueType) => {
|
||||||
|
indeterminate.value = false;
|
||||||
|
if (val) {
|
||||||
|
value.value = cities.value.map(_ => _.value);
|
||||||
|
} else {
|
||||||
|
value.value = [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="sublibrary_management app-main-content">
|
||||||
|
<div class="seach">
|
||||||
|
<div class="seach-title"><span>流程配置</span></div>
|
||||||
|
<el-form :model="seachForm">
|
||||||
|
<el-row>
|
||||||
|
<el-form-item label="流程名称">
|
||||||
|
<el-input v-model="seachForm.title" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-button class="ml-8" @click="search" type="primary"
|
||||||
|
>搜索</el-button
|
||||||
|
>
|
||||||
|
<el-button @click="reset">重置</el-button>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<div class="main-table">
|
||||||
|
<div class="main-table-header">
|
||||||
|
<div class="header-btn">
|
||||||
|
<el-button @click="create" type="primary">新建流程</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<pure-table
|
||||||
|
showOverflowTooltip
|
||||||
|
alignWhole="center"
|
||||||
|
:data="dataList"
|
||||||
|
:columns="columns"
|
||||||
|
:header-cell-style="{
|
||||||
|
background: 'var(--el-table-row-hover-bg-color)',
|
||||||
|
color: 'var(--el-text-color-primary)'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<template #operation="{ row }">
|
||||||
|
<el-button link type="danger" @click="handleDelete(row)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template></pure-table
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<el-drawer
|
||||||
|
v-model="createFlag"
|
||||||
|
modal-class="drawer_content"
|
||||||
|
:with-header="false"
|
||||||
|
>
|
||||||
|
<div class="drawer_header">
|
||||||
|
<span>新建流程</span>
|
||||||
|
</div>
|
||||||
|
<div class="drawer_box">
|
||||||
|
<el-form :model="processForm">
|
||||||
|
<el-form-item label="子库名称">
|
||||||
|
<el-input v-model="processForm.title" autocomplete="off" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="子库编码">
|
||||||
|
<el-input v-model="processForm.title" autocomplete="off" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="关联部门">
|
||||||
|
<el-select
|
||||||
|
v-model="value"
|
||||||
|
multiple
|
||||||
|
clearable
|
||||||
|
collapse-tags
|
||||||
|
placeholder="Select"
|
||||||
|
popper-class="custom-header"
|
||||||
|
:max-collapse-tags="3"
|
||||||
|
style="width: 240px"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in cities"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
<el-checkbox
|
||||||
|
v-model="checkAll"
|
||||||
|
:indeterminate="indeterminate"
|
||||||
|
@change="handleCheckAll"
|
||||||
|
>
|
||||||
|
All
|
||||||
|
</el-checkbox>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div class="drawer_footer">
|
||||||
|
<el-button plain>重置</el-button>
|
||||||
|
<el-button type="primary">确定</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-drawer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.sublibrary_management {
|
||||||
|
.main-table {
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
.main-table-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-drawer__body) {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer_content {
|
||||||
|
.drawer_header {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 96px;
|
||||||
|
padding: 24px;
|
||||||
|
line-height: 65px;
|
||||||
|
border-bottom: 1px solid #e9e9e9;
|
||||||
|
|
||||||
|
span {
|
||||||
|
padding-left: 8px;
|
||||||
|
font-size: 20px;
|
||||||
|
border-left: 6px solid #0052d9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer_box {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: calc(100vh - 96px);
|
||||||
|
padding: 24px;
|
||||||
|
|
||||||
|
.drawer_footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue