136 lines
4.2 KiB
Vue
136 lines
4.2 KiB
Vue
<!-- 工作票证签发人-弹窗详情 -->
|
|
<template>
|
|
<el-dialog title="工作票证签发人" v-model="props.show" @close="handleClose" width="600px">
|
|
<div class="Cneter-box">
|
|
<el-form :model="formData" label-width="100px" label-position="top">
|
|
<el-form-item label="姓名">
|
|
<el-input v-model="formData.name" placeholder="请输入姓名" />
|
|
<span class="TipsBox">关联业主单位内部账号</span>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="所属部门">
|
|
<el-select v-model="formData.department" placeholder="请选择部门">
|
|
<el-option label="部门1" value="dept1" />
|
|
<el-option label="部门2" value="dept2" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="签发角色">
|
|
<el-checkbox-group v-model="formData.roles">
|
|
<el-checkbox label="工作票签发人" value="role1" />
|
|
<el-checkbox label="危险作业票签发人" value="role2" />
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
<el-form-item label="负责项目范围">
|
|
<div style="width: 100%; border: 1px solid #ccc; padding: 10px;">
|
|
<el-tree
|
|
:data="projectTreeData"
|
|
:props="treeProps"
|
|
ref="projectTreeRef"
|
|
show-checkbox
|
|
node-key="id"
|
|
default-expanded-keys="[1]"
|
|
@check-change="handleCheckChange"
|
|
/>
|
|
</div>
|
|
<div class="TipsBox">已选择 {{ formData.selectedProjects.length }} 个项目</div>
|
|
</el-form-item>
|
|
<el-form-item label="联系电话">
|
|
<el-input v-model="formData.phone" placeholder="请输入手机号码" />
|
|
</el-form-item>
|
|
<el-form-item label="权限有效期">
|
|
<el-date-picker v-model="formData.expireDate" type="date" placeholder="请选择有效期" />
|
|
<div class="TipsBox" style="margin-left: 5px;">默认永久有效</div>
|
|
</el-form-item>
|
|
<el-form-item label="备注">
|
|
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<!-- 底部按钮 -->
|
|
<template #footer>
|
|
<el-button @click="handleClose">取消</el-button>
|
|
<el-button type="primary" @click="handleSubmit">确认配置</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
const props = defineProps({
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
CloseDialog: {
|
|
type: Function,
|
|
default: () => { }
|
|
}
|
|
})
|
|
|
|
|
|
|
|
// 项目树形结构数据
|
|
const projectTreeData = ref([
|
|
{
|
|
id: 1,
|
|
label: '北京市',
|
|
children: [
|
|
{
|
|
id: 2,
|
|
label: '朝阳区',
|
|
children: [
|
|
{ id: 3, label: 'CBD大厦项目' },
|
|
{ id: 4, label: '国贸三期项目' }
|
|
]
|
|
},
|
|
{ id:5, label: '海淀区' }
|
|
]
|
|
}
|
|
])
|
|
|
|
// 树形结构配置
|
|
const treeProps = ref({
|
|
children: 'children',
|
|
label: 'label'
|
|
})
|
|
|
|
// 表单数据
|
|
const formData = ref({
|
|
name: '',
|
|
account: '',
|
|
department: '',
|
|
roles: [],
|
|
selectedProjects: [],
|
|
phone: '',
|
|
expireDate: null,
|
|
forever: false,
|
|
remark: ''
|
|
})
|
|
|
|
// 处理项目选择变化
|
|
const handleCheckChange = (checkedNodes) => {
|
|
console.log('选中的项目节点:', checkedNodes)
|
|
}
|
|
|
|
// 关闭弹窗
|
|
const handleClose = () => {
|
|
props.CloseDialog()
|
|
}
|
|
|
|
const handleSubmit = () => {
|
|
// 提交逻辑
|
|
console.log('提交分配信息', formData.value)
|
|
props.CloseDialog()
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.TipsBox{
|
|
font-size: 12px;
|
|
color: #999;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|