erp_ehsd/src/views/system/userJoin/index.vue

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