Yaxin
/
know_sub_web
31
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 业务管理 系统管理页面开发

Browse Source
dev_1.0.0
JINGYJ 11 months ago
parent 2c78f0852b
commit d4cb3d99f5
5 changed files with 473 additions and 188 deletions
Show Stats Download Patch File Download Diff File

339
src/views/businessManagement/processConfiguration/components/createForm.vue
Unescape Escape View File

@ -0,0 +1,339 @@
<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { FormInstance, FormRules, type CheckboxValueType } from "element-plus";
defineOptions({
name: "CreateForm"
});
const props = defineProps({
createFlag: {
type: Boolean,
default: false
},
closeDrawer: {
type: Function
}
});
const modalVisible = ref(false);
// 监听 props.message 的变化，并更新 modalVisible
watch(
() => props.createFlag,
newValue => {
modalVisible.value = newValue; // 更新 modalVisible
}
);
const ruleFormRef = ref<FormInstance>();
const processForm = reactive({
title: "",
sublibraryName: [],
dataType: "",
link: [
{
linkName: "",
directorRole: "",
directorName: ""
}
],
desc: ""
});
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"
}
]);
const rules = reactive<FormRules>({
title: [{ required: true, message: "请输入", trigger: "blur" }],
sublibraryName: [
{
required: true,
message: "请选择",
trigger: "change"
}
],
dataType: [
{
required: true,
message: "请选择",
trigger: "change"
}
],
linkName: [{ required: true, message: "请输入", trigger: "blur" }],
directorRole: [
{
required: true,
message: "请选择",
trigger: "change"
}
],
directorName: [
{
required: true,
message: "请选择",
trigger: "change"
}
],
desc: [{ required: true, message: "请输入", trigger: "blur" }]
});
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) {
processForm.sublibraryName = cities.value.map(_ => _.value);
} else {
processForm.sublibraryName = [];
}
};
// const submitForm = () => {
// props.closeDrawer();
// };
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
console.log("submit!");
} else {
console.log("error submit!", fields);
}
});
};
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
};
const handleDrawerClosed = () => {
props.closeDrawer();
};
const addLink = () => {
processForm.link.push({
linkName: "",
directorRole: "",
directorName: ""
});
};
</script>
<template>
<div>
<el-drawer
v-model="modalVisible"
modal-class="drawer_content"
:with-header="false"
@closed="handleDrawerClosed"
>
<div class="drawer_header">
<span>新建流程</span>
</div>
<div class="drawer_box">
<el-form
:model="processForm"
label-width="auto"
:rules="rules"
ref="ruleFormRef"
>
<div class="text-[20px] text-[#333] font-bold mb-6">基本信息</div>
<el-form-item label="流程名称" prop="title">
<el-input
v-model="processForm.title"
autocomplete="off"
placeholder="请输入"
/>
</el-form-item>
<el-form-item label="子库名称" prop="sublibraryName">
<el-select
v-model="processForm.sublibraryName"
multiple
clearable
collapse-tags
popper-class="custom-header"
:max-collapse-tags="3"
placeholder="请选择"
class="w-[80%]"
>
<el-option
v-for="item in cities"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-checkbox
class="ml-6"
v-model="checkAll"
:indeterminate="indeterminate"
@change="handleCheckAll"
>
全部
</el-checkbox>
</el-form-item>
<el-form-item label="数据类型" prop="dataType">
<el-radio-group v-model="processForm.dataType">
<el-radio label="1">知识报送</el-radio>
<el-radio label="2">知识删除</el-radio>
<el-radio label="3">知识撤回</el-radio>
</el-radio-group>
</el-form-item>
<div class="text-[20px] text-[#333] font-bold mb-6">流程设计</div>
<div v-for="(item, index) in processForm.link" :key="index">
<el-form-item
label="环节名称"
:prop="'link.' + index + '.linkName'"
:rules="{
required: true,
message: '请输入',
trigger: 'blur'
}"
>
<el-input
v-model="item.linkName"
autocomplete="off"
placeholder="请输入"
/>
</el-form-item>
<el-form-item label="负责人" required>
<el-col :span="8">
<el-form-item
:prop="'link.' + index + '.directorRole'"
:rules="{
required: true,
message: '请选择',
trigger: 'change'
}"
>
<el-select
v-model="item.directorRole"
clearable
popper-class="custom-header"
placeholder="请选择"
class="w-[100%]"
>
<el-option
v-for="item in cities"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="2" class="text-center" />
<el-col :span="14">
<el-form-item
:prop="'link.' + index + '.directorName'"
:rules="{
required: true,
message: '请选择',
trigger: 'change'
}"
>
<el-select
v-model="item.directorName"
clearable
popper-class="custom-header"
placeholder="请选择"
class="w-[100%]"
>
<el-option
v-for="item in cities"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-form-item>
<el-divider
border-style="double"
v-if="index < processForm.link.length - 1"
/>
</div>
<el-form-item label=" ">
<el-button @click="addLink">+添加审批环节</el-button>
</el-form-item>
<el-form-item label="备注" prop="desc">
<el-input v-model="processForm.desc" type="textarea" />
</el-form-item>
</el-form>
<div class="drawer_footer">
<el-button plain @click="resetForm(ruleFormRef)">重置</el-button>
<el-button type="primary" @click="submitForm(ruleFormRef)"
>确定</el-button
>
</div>
</div>
</el-drawer>
</div>
</template>
<style lang="scss" scoped>
: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>

152
src/views/businessManagement/processConfiguration/index.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, watch } from "vue"; import { reactive, ref } from "vue";
import type { CheckboxValueType } from "element-plus"; import CreateForm from "./components/createForm.vue";
defineOptions({ defineOptions({
name: "ProcessConfiguration" name: "ProcessConfiguration"
}); });
@ -9,11 +9,6 @@ const seachForm = reactive({
publishDeptName: "", publishDeptName: "",
status: "" status: ""
}); });
const processForm = reactive({
title: "",
publishDeptName: "",
status: ""
});
const pagination = reactive({ const pagination = reactive({
total: 0, total: 0,
pageSize: 10, pageSize: 10,
@ -65,59 +60,12 @@ const create = () => {
createFlag.value = true; createFlag.value = true;
// search(); // search();
}; };
const closeDrawer = () => {
createFlag.value = false;
};
// const changeStatus = item => { // const changeStatus = item => {
// seachForm.status = item.id; // 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> </script>
<template> <template>
@ -152,62 +100,14 @@ const handleCheckAll = (val: CheckboxValueType) => {
color: 'var(--el-text-color-primary)' color: 'var(--el-text-color-primary)'
}" }"
> >
<template #operation="{ row }"> <!-- <template #operation="{ row }">
<el-button link type="danger" @click="handleDelete(row)"> <el-button link type="danger" @click="handleDelete(row)">
删除 删除
</el-button> </el-button>
</template></pure-table </template> -->
> </pure-table>
</div> </div>
<el-drawer <CreateForm :createFlag="createFlag" :closeDrawer="closeDrawer" />
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> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -222,39 +122,5 @@ const handleCheckAll = (val: CheckboxValueType) => {
margin-bottom: 24px; 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> </style>

51
src/views/systemManagement/dictionaryManagement/columns.tsx
Unescape Escape View File

@ -0,0 +1,51 @@
import { ref } from "vue";
export function useColumns() {
const dataList1 = ref([]);
const columns1: TableColumnList = [
{
label: "字典标签",
prop: "name",
cellRenderer: ({ row }) => <el-input v-model={row.name} />
},
{
label: "字典数值",
prop: "name",
cellRenderer: ({ row }) => <el-input v-model={row.name} />
},
{
label: "字典排序",
prop: "name",
cellRenderer: ({ row }) => <el-input v-model={row.name} />
},
{
label: "操作",
fixed: "right",
width: 90,
slot: "operation"
}
];
function onAdd() {
dataList1.value.push({
id: dataList1.value.length + 1,
name: "",
sex: 0,
hobby: "",
date: ""
});
}
function onDel(row) {
const index = dataList1.value.indexOf(row);
if (index !== -1) dataList1.value.splice(index, 1);
}
return {
columns1,
dataList1,
onAdd,
onDel
};
}

113
src/views/systemManagement/dictionaryManagement/index.vue
Unescape Escape View File

@ -1,9 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, watch } from "vue"; import { reactive, ref, watch } from "vue";
import type { CheckboxValueType } from "element-plus"; import type { CheckboxValueType } from "element-plus";
import { useColumns } from "./columns";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ep/plus";
import Delete from "@iconify-icons/ep/delete";
defineOptions({ defineOptions({
name: "DictionaryManagement" name: "DictionaryManagement"
}); });
const { columns1, dataList1, onAdd, onDel } = useColumns();
const seachForm = reactive({ const seachForm = reactive({
title: "", title: "",
publishDeptName: "", publishDeptName: "",
@ -11,8 +16,8 @@ const seachForm = reactive({
}); });
const dictionaryForm = reactive({ const dictionaryForm = reactive({
title: "", title: "",
publishDeptName: "", code: "",
status: "" desc: ""
}); });
const pagination = reactive({ const pagination = reactive({
total: 0, total: 0,
@ -60,9 +65,10 @@ const reset = () => {
// search(); // search();
}; };
const createFlag = ref(false); const createFlag = ref(false);
const updateFlag = ref(false);
const create = () => { const create = () => {
createFlag.value = true; updateFlag.value = true;
// search(); // search();
}; };
// const changeStatus = item => { // const changeStatus = item => {
@ -109,15 +115,6 @@ watch(value, val => {
indeterminate.value = true; indeterminate.value = true;
} }
}); });
const handleCheckAll = (val: CheckboxValueType) => {
indeterminate.value = false;
if (val) {
value.value = cities.value.map(_ => _.value);
} else {
value.value = [];
}
};
</script> </script>
<template> <template>
@ -139,7 +136,7 @@ const handleCheckAll = (val: CheckboxValueType) => {
<div class="main-table"> <div class="main-table">
<div class="main-table-header"> <div class="main-table-header">
<div class="header-btn"> <div class="header-btn">
<el-button @click="create" type="primary">新建子库</el-button> <el-button @click="create" type="primary">新建字典</el-button>
</div> </div>
</div> </div>
<pure-table <pure-table
@ -152,12 +149,12 @@ const handleCheckAll = (val: CheckboxValueType) => {
color: 'var(--el-text-color-primary)' color: 'var(--el-text-color-primary)'
}" }"
> >
<template #operation="{ row }"> <!-- <template #operation="{ row }">
<el-button link type="danger" @click="handleDelete(row)"> <el-button link type="danger" @click="handleDelete(row)">
删除 删除
</el-button> </el-button>
</template></pure-table </template> -->
> </pure-table>
</div> </div>
<el-drawer <el-drawer
v-model="createFlag" v-model="createFlag"
@ -168,39 +165,71 @@ const handleCheckAll = (val: CheckboxValueType) => {
<span>新建字典</span> <span>新建字典</span>
</div> </div>
<div class="drawer_box"> <div class="drawer_box">
<el-form :model="dictionaryForm"> <el-form :model="dictionaryForm" label-width="auto">
<el-form-item label="字典名称"> <el-form-item label="字典名称">
<el-input v-model="dictionaryForm.title" autocomplete="off" /> <el-input v-model="dictionaryForm.title" autocomplete="off" />
</el-form-item> </el-form-item>
<el-form-item label="字典编码"> <el-form-item label="字典编码">
<el-input v-model="dictionaryForm.code" autocomplete="off" />
</el-form-item>
<el-form-item label="备注">
<el-input v-model="dictionaryForm.desc" type="textarea" />
</el-form-item>
</el-form>
<div class="drawer_footer">
<el-button plain>重置</el-button>
<el-button type="primary">确定</el-button>
</div>
</div>
</el-drawer>
<el-drawer
v-model="updateFlag"
modal-class="drawer_content"
:with-header="false"
>
<div class="drawer_header">
<span>新建字典</span>
</div>
<div class="drawer_box">
<el-form :model="dictionaryForm" label-width="auto">
<el-form-item label="字典名称">
<el-input v-model="dictionaryForm.title" autocomplete="off" /> <el-input v-model="dictionaryForm.title" autocomplete="off" />
</el-form-item> </el-form-item>
<el-form-item label="关联部门"> <div>
<el-select <pure-table
v-model="value" row-key="id"
multiple align-whole="center"
clearable :header-cell-style="{
collapse-tags background: 'var(--el-fill-color-light)',
placeholder="Select" color: 'var(--el-text-color-primary)'
popper-class="custom-header" }"
:max-collapse-tags="3" :data="dataList1"
style="width: 240px" :columns="columns1"
>
<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 <!-- <template #empty>
</el-checkbox> <Empty fill="var(--el-svg-monochrome-grey)" class="m-auto" />
</el-form-item> </template> -->
<template #append>
<el-button
plain
class="w-full my-2"
:icon="useRenderIcon(AddFill)"
@click="onAdd"
>
添加
</el-button>
</template>
<template #operation="{ row }">
<el-button
class="reset-margin"
link
type="primary"
:icon="useRenderIcon(Delete)"
@click="onDel(row)"
/>
</template>
</pure-table>
</div>
</el-form> </el-form>
<div class="drawer_footer"> <div class="drawer_footer">
<el-button plain>重置</el-button> <el-button plain>重置</el-button>

6
src/views/systemManagement/sublibraryManagement/index.vue
Unescape Escape View File

@ -152,12 +152,12 @@ const handleCheckAll = (val: CheckboxValueType) => {
color: 'var(--el-text-color-primary)' color: 'var(--el-text-color-primary)'
}" }"
> >
<template #operation="{ row }"> <!-- <template #operation="{ row }">
<el-button link type="danger" @click="handleDelete(row)"> <el-button link type="danger" @click="handleDelete(row)">
删除 删除
</el-button> </el-button>
</template></pure-table </template> -->
> </pure-table>
</div> </div>
<el-drawer <el-drawer
v-model="createFlag" v-model="createFlag"

Write Preview
Loading…
Cancel
Save