员工交接页面

src/views/system/userJoin/index.vue

@@ -0,0 +1,273 @@
+<template>
+	<div class="tenant">
+		<div class="content">
+			<byTable
+				:source="sourceList.data"
+				:pagination="sourceList.pagination"
+				:config="config"
+				:loading="loading"
+				:selectConfig="selectConfig"
+				highlight-current-row
+				:action-list="[
+					{
+						text: '添加交接',
+						action: () => openModal(),
+					},
+				]"
+				@get-list="getList"
+			>
+			</byTable>
+		</div>
+
+		<el-dialog
+			:title="modalType == 'add' ? '新增' : '编辑'"
+			v-if="dialogVisible"
+			v-model="dialogVisible"
+			width="500"
+			v-loading="loadingOperation"
+		>
+			<byForm
+				:formConfig="formConfig"
+				:formOption="formOption"
+				v-model="formData.data"
+				:rules="rules"
+				ref="submit"
+			>
+			</byForm>
+			<template #footer>
+				<el-button @click="dialogVisible = false" size="large"
+					>取 消</el-button
+				>
+				<el-button type="primary" @click="submitForm()" size="large"
+					>确 定</el-button
+				>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup>
+import { ElMessage, ElMessageBox } from 'element-plus'
+import byTable from '@/components/byTable/index'
+import byForm from '@/components/byForm/index'
+import { computed, ref } from 'vue'
+import Editor from '@/components/Editor/index.vue'
+import useUserStore from "@/store/modules/user";
+const { proxy } = getCurrentInstance()
+const loading = ref(false)
+const companyList = ref({})
+const sourceList = ref({
+	data: [],
+	pagination: {
+		total: 0,
+		pageNum: 1,
+		pageSize: 10,
+		corporationId: '',
+		keyword: '',
+	},
+})
+const selectConfig = computed(() => {
+	return [
+	]
+})
+const config = computed(() => {
+	return [
+		{
+			attrs: {
+				label: '交接人',
+				prop: 'handoverPersonName',
+			},
+		},
+		{
+			attrs: {
+				label: '接收人',
+				prop: 'recipientName',
+			},
+		},
+		{
+			attrs: {
+				label: '交接时间',
+				prop: 'createTime',
+			},
+		},
+		{
+			attrs: {
+				label: '交接原因',
+				prop: 'reason',
+			},
+		},
+		{
+			attrs: {
+				label: '交接内容',
+				prop: 'content',
+			},
+			render(content) {
+				const a = content.split(',').map((item) => {
+					return contentObj[item]
+				})
+				return a.join(',')
+			},
+		},
+        {
+			attrs: {
+				label: '备注',
+				prop: 'remark',
+			},
+		},
+	]
+})
+const contentObj = {
+	1: '客户信息',
+}
+const getDict = () => {
+	proxy
+		.post('/corporation/page', { pageNum: 1, pageSize: 999 })
+		.then((res) => {
+			companyList.value = res.rows.map((item) => {
+				return {
+					label: item.name,
+					value: item.id,
+				}
+			})
+		})
+}
+const getList = async (req) => {
+	sourceList.value.pagination = { ...sourceList.value.pagination, ...req }
+	loading.value = true
+	proxy.post('/employeeHandover/page', sourceList.value.pagination).then((res) => {
+		sourceList.value.data = res.rows
+		sourceList.value.pagination.total = res.total
+		setTimeout(() => {
+			loading.value = false
+		}, 200)
+	})
+}
+getDict()
+getList()
+const modalType = ref('add')
+const dialogVisible = ref(false)
+const loadingOperation = ref(false)
+const submit = ref(null)
+const formData = reactive({
+	data: {
+		countryId: '44',
+	},
+})
+const formOption = reactive({
+	inline: true,
+	labelWidth: 100,
+	itemWidth: 100,
+	rules: [],
+})
+const formConfig = computed(() => {
+	return [
+		{
+			label: '交接信息',
+		},
+		{
+			type: 'select',
+			prop: 'handoverPersonId',
+			label: '交接人',
+            data: [],
+            itemWidth: '50',
+		},
+        {
+			type: 'select',
+			prop: 'recipientId',
+			label: '接收人',
+            data: [],
+            itemWidth: '50',
+		},
+        {
+            type: 'input',
+            prop: 'reason',
+            label: '交接原因',
+            itemType: 'textarea',
+            placeholder: '请输入交接原因',
+        },
+        {
+			type: 'checkbox',
+			prop: 'content',
+			label: '交接内容',
+            data: [{
+                label: '客户信息',
+                value: '1',
+            }],
+		},
+        {
+            type: 'input',
+            prop: 'remark',
+            label: '备注',
+            itemType: 'textarea',
+            placeholder: '请输入备注',
+        },
+
+	]
+})
+let rules = ref({
+	handoverPersonId: [
+		{ required: true, message: '请选择交接人', trigger: 'blur' },
+	],
+	recipientId: [
+		{ required: true, message: '请选择接收人', trigger: 'change' },
+	],
+    reason: [
+        { required: true, message: '请输入交接原因', trigger: 'blur' },
+    ],
+    content: [
+        { required: true, message: '请输入交接内容', trigger: 'blur' },
+    ],
+})
+const openModal = () => {
+	modalType.value = 'add'
+	formData.data = {}
+	loadingOperation.value = false
+	dialogVisible.value = true
+}
+const submitForm = () => {
+	submit.value.handleSubmit(() => {
+		loadingOperation.value = true
+		proxy.post('/employeeHandover/add', {...formData.data,content:formData.data.content.join(',')}).then(
+			() => {
+				ElMessage({
+					message: modalType.value == 'add' ? '添加成功' : '添加成功',
+					type: 'success',
+				})
+				dialogVisible.value = false
+				getList()
+			},
+			(err) => {
+				console.log(err)
+				loadingOperation.value = false
+			}
+		)
+	})
+}
+let  userList = ref([])
+const getUser = () => {
+  proxy
+    .get("/tenantUser/list", {
+      pageNum: 1,
+      pageSize: 999,
+      tenantId: useUserStore().user.tenantId,
+    })
+    .then((res) => {
+        console.log(formConfig);
+        res.rows = res.rows.map((item) => {
+            return {
+                label: item.nickName,
+                value: item.userId,
+            };
+        });
+        formConfig.value[1].data = res.rows
+        formConfig.value[2].data = res.rows
+    });
+};
+getUser()
+</script>
+
+<style lang="scss" scoped>
+.tenant {
+	padding: 20px;
+}
+</style>