From d4cb3d99f5a17132ed1ff5e6a9a5b218a68df2fc Mon Sep 17 00:00:00 2001
From: JINGYJ <1458671527@qq.com>
Date: Fri, 28 Jun 2024 17:54:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=9A=E5=8A=A1=E7=AE=A1=E7=90=86=20?=
=?UTF-8?q?=E7=B3=BB=E7=BB=9F=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E5=BC=80?=
=?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/createForm.vue | 339 ++++++++++++++++++
.../processConfiguration/index.vue | 152 +-------
.../dictionaryManagement/columns.tsx | 51 +++
.../dictionaryManagement/index.vue | 113 +++---
.../sublibraryManagement/index.vue | 6 +-
5 files changed, 473 insertions(+), 188 deletions(-)
create mode 100644 src/views/businessManagement/processConfiguration/components/createForm.vue
create mode 100644 src/views/systemManagement/dictionaryManagement/columns.tsx
diff --git a/src/views/businessManagement/processConfiguration/components/createForm.vue b/src/views/businessManagement/processConfiguration/components/createForm.vue
new file mode 100644
index 0000000..23a40c0
--- /dev/null
+++ b/src/views/businessManagement/processConfiguration/components/createForm.vue
@@ -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>
diff --git a/src/views/businessManagement/processConfiguration/index.vue b/src/views/businessManagement/processConfiguration/index.vue
index eb97337..bcbdc5a 100644
--- a/src/views/businessManagement/processConfiguration/index.vue
+++ b/src/views/businessManagement/processConfiguration/index.vue
@@ -1,6 +1,6 @@
<script setup lang="ts">
-import { reactive, ref, watch } from "vue";
-import type { CheckboxValueType } from "element-plus";
+import { reactive, ref } from "vue";
+import CreateForm from "./components/createForm.vue";
defineOptions({
name: "ProcessConfiguration"
});
@@ -9,11 +9,6 @@ const seachForm = reactive({
publishDeptName: "",
status: ""
});
-const processForm = reactive({
- title: "",
- publishDeptName: "",
- status: ""
-});
const pagination = reactive({
total: 0,
pageSize: 10,
@@ -65,59 +60,12 @@ const create = () => {
createFlag.value = true;
// search();
};
+const closeDrawer = () => {
+ createFlag.value = false;
+};
// 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>
@@ -152,62 +100,14 @@ const handleCheckAll = (val: CheckboxValueType) => {
color: 'var(--el-text-color-primary)'
}"
>
- <template #operation="{ row }">
+ <!-- <template #operation="{ row }">
<el-button link type="danger" @click="handleDelete(row)">
删除
</el-button>
- </template></pure-table
- >
+ </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>
+ <CreateForm :createFlag="createFlag" :closeDrawer="closeDrawer" />
</div>
</template>
<style lang="scss" scoped>
@@ -222,39 +122,5 @@ const handleCheckAll = (val: CheckboxValueType) => {
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>
diff --git a/src/views/systemManagement/dictionaryManagement/columns.tsx b/src/views/systemManagement/dictionaryManagement/columns.tsx
new file mode 100644
index 0000000..c975964
--- /dev/null
+++ b/src/views/systemManagement/dictionaryManagement/columns.tsx
@@ -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
+ };
+}
diff --git a/src/views/systemManagement/dictionaryManagement/index.vue b/src/views/systemManagement/dictionaryManagement/index.vue
index b5ed1ae..effa254 100644
--- a/src/views/systemManagement/dictionaryManagement/index.vue
+++ b/src/views/systemManagement/dictionaryManagement/index.vue
@@ -1,9 +1,14 @@
<script setup lang="ts">
import { reactive, ref, watch } from "vue";
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({
name: "DictionaryManagement"
});
+const { columns1, dataList1, onAdd, onDel } = useColumns();
const seachForm = reactive({
title: "",
publishDeptName: "",
@@ -11,8 +16,8 @@ const seachForm = reactive({
});
const dictionaryForm = reactive({
title: "",
- publishDeptName: "",
- status: ""
+ code: "",
+ desc: ""
});
const pagination = reactive({
total: 0,
@@ -60,9 +65,10 @@ const reset = () => {
// search();
};
const createFlag = ref(false);
+const updateFlag = ref(false);
const create = () => {
- createFlag.value = true;
+ updateFlag.value = true;
// search();
};
// const changeStatus = item => {
@@ -109,15 +115,6 @@ watch(value, val => {
indeterminate.value = true;
}
});
-
-const handleCheckAll = (val: CheckboxValueType) => {
- indeterminate.value = false;
- if (val) {
- value.value = cities.value.map(_ => _.value);
- } else {
- value.value = [];
- }
-};
</script>
<template>
@@ -139,7 +136,7 @@ const handleCheckAll = (val: CheckboxValueType) => {
<div class="main-table">
<div class="main-table-header">
<div class="header-btn">
- <el-button @click="create" type="primary">新建子库</el-button>
+ <el-button @click="create" type="primary">新建字典</el-button>
</div>
</div>
<pure-table
@@ -152,12 +149,12 @@ const handleCheckAll = (val: CheckboxValueType) => {
color: 'var(--el-text-color-primary)'
}"
>
- <template #operation="{ row }">
+ <!-- <template #operation="{ row }">
<el-button link type="danger" @click="handleDelete(row)">
删除
</el-button>
- </template></pure-table
- >
+ </template> -->
+ </pure-table>
</div>
<el-drawer
v-model="createFlag"
@@ -168,39 +165,71 @@ const handleCheckAll = (val: CheckboxValueType) => {
<span>新建字典</span>
</div>
<div class="drawer_box">
- <el-form :model="dictionaryForm">
+ <el-form :model="dictionaryForm" label-width="auto">
<el-form-item label="字典名称">
<el-input v-model="dictionaryForm.title" autocomplete="off" />
</el-form-item>
<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-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"
+ <div>
+ <pure-table
+ row-key="id"
+ align-whole="center"
+ :header-cell-style="{
+ background: 'var(--el-fill-color-light)',
+ color: 'var(--el-text-color-primary)'
+ }"
+ :data="dataList1"
+ :columns="columns1"
>
- All
- </el-checkbox>
- </el-form-item>
+ <!-- <template #empty>
+ <Empty fill="var(--el-svg-monochrome-grey)" class="m-auto" />
+ </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>
<div class="drawer_footer">
<el-button plain>重置</el-button>
diff --git a/src/views/systemManagement/sublibraryManagement/index.vue b/src/views/systemManagement/sublibraryManagement/index.vue
index b294ef7..30e107d 100644
--- a/src/views/systemManagement/sublibraryManagement/index.vue
+++ b/src/views/systemManagement/sublibraryManagement/index.vue
@@ -152,12 +152,12 @@ const handleCheckAll = (val: CheckboxValueType) => {
color: 'var(--el-text-color-primary)'
}"
>
- <template #operation="{ row }">
+ <!-- <template #operation="{ row }">
<el-button link type="danger" @click="handleDelete(row)">
删除
</el-button>
- </template></pure-table
- >
+ </template> -->
+ </pure-table>
</div>
<el-drawer
v-model="createFlag"