2 changed files with 482 additions and 0 deletions
@ -0,0 +1,138 @@
|
||||
<template> |
||||
<section class="select-wrapper" v-if="show"> |
||||
<!-- 左侧部门树 --> |
||||
<section class="dept-wrapper"> |
||||
<DeptTree @node-click="handleDeptNodeClick" /> |
||||
</section> |
||||
<section class="dept-wrapper"> |
||||
<el-table v-loading="loading" :data="list" @row-click="handleClickRow"> |
||||
<el-table-column label="用户编号" align="center" key="id" prop="id" /> |
||||
<el-table-column |
||||
label="用户名称" |
||||
align="center" |
||||
prop="username" |
||||
:show-overflow-tooltip="true" |
||||
/> |
||||
<el-table-column |
||||
label="用户昵称" |
||||
align="center" |
||||
prop="nickname" |
||||
:show-overflow-tooltip="true" |
||||
/> |
||||
<el-table-column |
||||
label="部门" |
||||
align="center" |
||||
key="deptName" |
||||
prop="deptName" |
||||
:show-overflow-tooltip="true" |
||||
/> |
||||
</el-table> |
||||
<Pagination |
||||
:total="total" |
||||
v-model:page="queryParams.pageNo" |
||||
v-model:limit="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
<el-button type="primary" class="close" circle size="small" @click="close"> |
||||
<Icon icon="ep:close" /> |
||||
</el-button> |
||||
</section> |
||||
</section> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
import * as UserApi from '@/api/system/user' |
||||
import DeptTree from '@/views/system/user/DeptTree.vue' |
||||
import {getPcUserPage} from "@/api/system/user"; |
||||
const show = ref(false) |
||||
const loading = ref(true) // 列表的加载中 |
||||
const total = ref(0) // 列表的总页数 |
||||
const list = ref([]) // 列表的数 |
||||
const queryParams = reactive({ |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
username: undefined, |
||||
mobile: undefined, |
||||
status: undefined, |
||||
deptId: undefined, |
||||
createTime: [] |
||||
}) |
||||
const emit = defineEmits(['select', 'close']) |
||||
/** 查询列表 */ |
||||
const getList = async () => { |
||||
loading.value = true |
||||
try { |
||||
const data = await UserApi.getPcUserPage(queryParams) |
||||
list.value = data.list |
||||
total.value = data.total |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
|
||||
/** 处理部门被点击 */ |
||||
const handleDeptNodeClick = async (row) => { |
||||
queryParams.deptId = row.id |
||||
await getList() |
||||
} |
||||
|
||||
function handleClickRow(row) { |
||||
emit('select', row) |
||||
} |
||||
function open() { |
||||
getList() |
||||
show.value = true |
||||
} |
||||
|
||||
function close() { |
||||
show.value = false |
||||
emit('close') |
||||
} |
||||
defineExpose({ open }) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.select-wrapper { |
||||
display: flex; |
||||
flex-flow: row nowrap; |
||||
background-color: #fff; |
||||
padding: 10px; |
||||
padding-top: 50px; |
||||
border-radius: 6px; |
||||
min-height: 50vh; |
||||
position: relative; |
||||
.close { |
||||
position: absolute; |
||||
top: 10px; |
||||
right: 10px; |
||||
} |
||||
.selec-wrapper { |
||||
max-width: 400px; |
||||
display: flex; |
||||
flex-flow: row nowrap; |
||||
gap: 5px; |
||||
|
||||
.users { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-flow: row wrap; |
||||
gap: 5px; |
||||
} |
||||
|
||||
.select { |
||||
cursor: pointer; |
||||
background-color: #f1faff; |
||||
border: 1px dashed #00a3ff; |
||||
padding: 0px 15px; |
||||
color: #00a3ff; |
||||
// color: #00a3ff; |
||||
// text-decoration: underline; |
||||
border-radius: 6px; |
||||
height: fit-content; |
||||
|
||||
&:hover { |
||||
opacity: 0.8; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,344 @@
|
||||
<template> |
||||
<ContentWrap title="企业基本信息"> |
||||
<section class="taskForm"> |
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="auto" v-loading="loading"> |
||||
<el-form-item label="企业类型" prop="type"> |
||||
<el-select v-model="formData.type" placeholder="请选择企业类型"> |
||||
<el-option |
||||
v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_TYPE)" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="企业所属区域" prop="region"> |
||||
<el-select v-model="formData.region" placeholder="请选择企业所属区域"> |
||||
<el-option |
||||
v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_AREA)" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
|
||||
|
||||
<el-form-item label="专管员" prop="startUserSelectAssignees"> |
||||
<section class="selec-wrapper"> |
||||
<section class="users"> |
||||
<el-tag |
||||
v-for="user in formData.startUserSelectAssignees" |
||||
:key="user.id" |
||||
closable |
||||
@close="removeUser(user.id)" |
||||
> |
||||
{{ user.nickname }} {{ user.deptName }} |
||||
</el-tag> |
||||
</section> |
||||
<section class="select" @click="handlerClickSelect"> 请选择专管员</section> |
||||
</section> |
||||
</el-form-item> |
||||
|
||||
|
||||
<el-form-item label="企业名称" prop="enterprisesName"> |
||||
<el-input v-model="formData.enterprisesName" placeholder="请输入企业名称" /> |
||||
</el-form-item> |
||||
<el-form-item label="企业地址" prop="address"> |
||||
<el-input v-model="formData.address" type="textarea" placeholder="请输入企业地址" /> |
||||
</el-form-item> |
||||
<el-form-item label="环保负责人姓名" prop="contactName"> |
||||
<el-input v-model="formData.contactName" placeholder="请输入环保负责人姓名" /> |
||||
</el-form-item> |
||||
<el-form-item label="企业环保负责人联系电话" prop="environmentalContactPhone"> |
||||
<el-input v-model="formData.environmentalContactPhone" placeholder="请输入企业环保负责人联系电话" /> |
||||
</el-form-item> |
||||
<el-form-item label="企业注册号" prop="registrationNumber"> |
||||
<el-input v-model="formData.registrationNumber" placeholder="请输入企业注册号" /> |
||||
</el-form-item> |
||||
<el-form-item label="企业介绍" prop="introduction"> |
||||
<el-input v-model="formData.introduction" type="textarea" placeholder="请输入企业介绍" /> |
||||
</el-form-item> |
||||
<el-form-item label="企业照片" prop="size"> |
||||
<InnerUploadImg |
||||
:uploadList="uploadList" |
||||
@handler-success="uploadSuccess" |
||||
ref="uploadRef" |
||||
@handler-remove="uploadRemove" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="企业成立时间" prop="establishmentDate"> |
||||
<el-date-picker |
||||
v-model="formData.establishmentDate" |
||||
type="date" |
||||
value-format="x" |
||||
placeholder="选择企业成立时间" |
||||
/> |
||||
</el-form-item> |
||||
|
||||
|
||||
<el-form-item label="企业经纬度" prop="gpsLocation"> |
||||
<el-input |
||||
v-model="formData.gpsLocation" |
||||
placeholder="点击按钮选择坐标" |
||||
readonly |
||||
> |
||||
<template #append> |
||||
<!-- 选择坐标按钮 --> |
||||
<el-button @click="showMap = true">选择坐标</el-button> |
||||
</template> |
||||
</el-input> |
||||
</el-form-item> |
||||
|
||||
<!-- 地图弹窗 --> |
||||
<el-dialog |
||||
v-model="showMap" |
||||
title="选择坐标" |
||||
width="80%" |
||||
:before-close="handleClose" |
||||
> |
||||
<div id="map-container" style="width: 100%; height: 400px;"></div> |
||||
<template #footer> |
||||
<el-button @click="showMap = false">取消</el-button> |
||||
<el-button type="primary" @click="confirmCoordinate">确定</el-button> |
||||
</template> |
||||
</el-dialog> |
||||
|
||||
<el-form-item label="签到半径" prop="gpsLocation" > |
||||
<el-input v-model="formData.signRadius" placeholder="请输入签到半径" style="width: 280px;" /><span style="margin-left: 10px">单位：元</span> |
||||
</el-form-item> |
||||
|
||||
|
||||
</el-form> |
||||
</section> |
||||
|
||||
<el-dialog v-model="dialogVisible" title="选择用户"> |
||||
<!-- 将 SelectUser 组件放入弹框中 --> |
||||
<template #content> |
||||
<SelectUser ref="selectUserRef" @select="handlerSelectUser" /> |
||||
</template> |
||||
<!-- 弹框底部的取消和确定按钮 --> |
||||
<template #footer> |
||||
<el-button @click="dialogVisible = false">取消</el-button> |
||||
<el-button type="primary" @click="dialogVisible = false">确定</el-button> |
||||
</template> |
||||
</el-dialog> |
||||
|
||||
</ContentWrap> |
||||
</template> |
||||
<script setup lang="ts"> |
||||
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict' |
||||
import { EnterprisesApi, EnterprisesVO } from '@/api/enterprises' |
||||
import { FileInfoApi } from '@/api/enterprises/fileinfo' |
||||
import { ElMessage } from 'element-plus' |
||||
import SelectUser from '@/views/enterprises/components/SelectUser.vue' |
||||
/** 企业 表单 */ |
||||
defineOptions({ name: 'UpdateEnterprises' }) |
||||
|
||||
const { t } = useI18n() // 国际化 |
||||
const message = useMessage() // 消息弹窗 |
||||
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||
const dialogTitle = ref('') // 弹窗的标题 |
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
||||
const selectUserRef = ref() |
||||
const loading = ref(false) |
||||
const formData = ref({ |
||||
id: undefined, |
||||
departmentId: undefined, |
||||
userId: undefined, |
||||
type: undefined, |
||||
region: undefined, |
||||
enterprisesName: undefined, |
||||
address: undefined, |
||||
contactName: undefined, |
||||
environmentalContactPhone: undefined, |
||||
registrationNumber: undefined, |
||||
introduction: undefined, |
||||
establishmentDate: undefined, |
||||
gpsLocation: undefined, |
||||
managerDeptId: undefined, |
||||
ides:undefined, |
||||
startUserSelectAssignees: [] |
||||
}) |
||||
const formRules = reactive({ |
||||
type: [{ required: true, message: '企业类型不能为空', trigger: 'change' }], |
||||
enterprisesName: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }], |
||||
}) |
||||
const formRef = ref() // 表单 Ref |
||||
const {query}=useRoute() |
||||
|
||||
function init(){ |
||||
if(query.id){ |
||||
EnterprisesApi.getEnterprises(query.id).then(res=>{ |
||||
formData.value=res |
||||
}) |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
onMounted(()=>{ |
||||
init() |
||||
}) |
||||
|
||||
|
||||
function handlerClickSelect() { |
||||
dialogVisible.value = true; |
||||
// 调用 SelectUser 组件的 open 方法 |
||||
unref(selectUserRef)?.open(); |
||||
} |
||||
|
||||
|
||||
function handlerSelectUser(row) { |
||||
if (formData.value.startUserSelectAssignees.findIndex((i) => i.id == row.id) > -1) return |
||||
formData.value.startUserSelectAssignees.push(row) |
||||
} |
||||
|
||||
/** 提交表单 */ |
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||
const submitForm = async () => { |
||||
// 校验表单 |
||||
await formRef.value.validate() |
||||
// 提交请求 |
||||
loading.value = true |
||||
try { |
||||
const data = formData.value as unknown as EnterprisesVO |
||||
if (formType.value === 'create') { |
||||
await EnterprisesApi.createEnterprises(data) |
||||
message.success(t('common.createSuccess')) |
||||
} else { |
||||
await EnterprisesApi.updateEnterprises(data) |
||||
message.success(t('common.updateSuccess')) |
||||
} |
||||
dialogVisible.value = false |
||||
// 发送操作成功的事件 |
||||
emit('success') |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
|
||||
/** 重置表单 */ |
||||
const resetForm = () => { |
||||
formData.value = { |
||||
id: undefined, |
||||
departmentId: undefined, |
||||
userId: undefined, |
||||
type: undefined, |
||||
region: undefined, |
||||
enterprisesName: undefined, |
||||
address: undefined, |
||||
contactName: undefined, |
||||
environmentalContactPhone: undefined, |
||||
registrationNumber: undefined, |
||||
introduction: undefined, |
||||
establishmentDate: undefined, |
||||
gpsLocation: undefined, |
||||
managerDeptId: undefined, |
||||
startUserSelectAssignees: [] |
||||
} |
||||
formRef.value?.resetFields() |
||||
} |
||||
|
||||
const uploadList: any = ref([]) |
||||
|
||||
async function uploadSuccess(res) { |
||||
if (res) { |
||||
await FileInfoApi.createFileInfo({ |
||||
unitId: formData.value.id || id.value, |
||||
attachmentPath: res.data, |
||||
attachmentName: res.filename, |
||||
attachmentSuffix: res.type |
||||
//type: 4 |
||||
}).then(() => { |
||||
loading.value.close() |
||||
dialogVisible.value = false |
||||
emit('success') |
||||
}) |
||||
} else { |
||||
loading.value.close() |
||||
dialogVisible.value = false |
||||
emit('success') |
||||
} |
||||
} |
||||
|
||||
function getCarImg() { |
||||
loading.value = true |
||||
FileInfoApi.getFileInfoPage({ unitId: formData.value.id, type: 4 }).then((res) => { |
||||
uploadList.value = res.list.map((item) => { |
||||
return { |
||||
...item, |
||||
url: item.attachmentPath, |
||||
name: item.attachmentName |
||||
} |
||||
}) |
||||
loading.value = false |
||||
}) |
||||
} |
||||
|
||||
function uploadRemove(file) { |
||||
FileInfoApi.deleteFileInfo(file.id).then(() => { |
||||
ElMessage.success('删除成功') |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.selec-wrapper { |
||||
max-width: 400px; |
||||
display: flex; |
||||
flex-flow: row nowrap; |
||||
gap: 5px; |
||||
|
||||
.users { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-flow: row wrap; |
||||
gap: 5px; |
||||
} |
||||
|
||||
.select { |
||||
cursor: pointer; |
||||
background-color: #f1faff; |
||||
border: 1px dashed #00a3ff; |
||||
padding: 0px 15px; |
||||
color: #00a3ff; |
||||
// color: #00a3ff; |
||||
// text-decoration: underline; |
||||
border-radius: 6px; |
||||
height: fit-content; |
||||
|
||||
&:hover { |
||||
opacity: 0.8; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.modal-enter-from { |
||||
opacity: 0; |
||||
transition: 0.2s all; |
||||
} |
||||
|
||||
.modal-leave-to { |
||||
opacity: 0; |
||||
} |
||||
|
||||
.modal-enter-from .modal-container, |
||||
.modal-leave-to .modal-container { |
||||
-webkit-transform: scale(1.1); |
||||
transform: scale(1.1); |
||||
} |
||||
|
||||
#map-container { |
||||
width: 100%; |
||||
height: 400px; |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
|
||||
|
||||
</style> |
||||
Loading…
Reference in new issue