You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
284 lines
8.3 KiB
284 lines
8.3 KiB
<template> |
|
<content-wrap> |
|
<section class="view-wrapper"> |
|
<section class="w-70%"> |
|
<section class="mb-40px"> |
|
<section class="title-wrapper"> 基本信息</section> |
|
<el-form :rules="formRules" :model="formData" label-width="100px"> |
|
<section class="base-form"> |
|
<el-form-item label="企业名称" prop="enterprisesName"> |
|
<el-input v-model="formData.enterprisesName" placeholder="请输入企业名称" /> |
|
</el-form-item> |
|
<el-form-item label="所属区域" prop="region"> |
|
<el-select v-model="formData.region" placeholder="请选择所属区域" clearable> |
|
<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="address"> |
|
<el-input v-model="formData.address" placeholder="请选择企业地址" readonly @click="getGaps"> |
|
<template #append> |
|
<Icon icon="ep:position" @click.stop="getGaps"/> |
|
</template> |
|
</el-input> |
|
</el-form-item> |
|
<el-form-item label="行业类别" prop="tags"> |
|
<el-select |
|
v-model="formData.tags" |
|
placeholder="请选择行业类型" |
|
clearable |
|
multiple |
|
collapse-tags |
|
collapse-tags-tooltip |
|
> |
|
<el-option |
|
v-for="dict in typeList" |
|
:key="dict.value" |
|
:label="dict.label" |
|
:value="dict.value" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="企业介绍" class="form-textarea" prop="introduction"> |
|
<el-input |
|
v-model="formData.introduction" |
|
placeholder="请输入企业介绍" |
|
type="textarea" |
|
maxlength="500" |
|
show-word-limit |
|
resize="none" |
|
/> |
|
</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="photo" class="form-photo"> |
|
<UploadImgs v-model="formData.photo" /> |
|
</el-form-item> |
|
<section class="form-sub-title"> 执法配置</section> |
|
<el-form-item label="执法人员" prop="userId"> |
|
<el-select |
|
v-model="formData.userId" |
|
placeholder="请选择执法人员" |
|
filterable |
|
clearable |
|
> |
|
<el-option |
|
v-for="item in userList" |
|
:key="item.userId" |
|
:label="item.realName" |
|
:value="item.userId" |
|
popper-class="user-wrapper" |
|
> |
|
<el-avatar :src="item.avatar" :size="30" /> <span>{{ item.realName }}</span> |
|
</el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="签到半径" prop="signRadius"> |
|
<el-input-number |
|
v-model="formData.signRadius" |
|
:min="10" |
|
:step="1" |
|
placeholder="请输入执法半径" |
|
controls-position="right" |
|
class="!w-100%" |
|
> |
|
<template #suffix> |
|
<span>米</span> |
|
</template> |
|
</el-input-number> |
|
</el-form-item> |
|
</section> |
|
</el-form> |
|
</section> |
|
</section> |
|
<section class="flex-1"> |
|
<section class="title-wrapper"> 相关资质 </section> |
|
</section> |
|
</section> |
|
<section> |
|
<el-button>保存</el-button> |
|
</section> |
|
</content-wrap> |
|
|
|
<GpsDialog ref="GpsDialogRef" @success="setGps" /> |
|
</template> |
|
<script setup lang="ts"> |
|
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict' |
|
import { TagLibraryApi } from '@/api/system/taglibrary' |
|
import { getEnterpriseManager } from '@/api/system/user' |
|
import { UploadImgs } from '@/components/UploadFile' |
|
import GpsDialog from './components/getGpsByQq.vue' |
|
|
|
/** 企业 表单 */ |
|
defineOptions({ name: 'UpdateEnterprises' }) |
|
//行业类别 |
|
const typeList = ref([] as any) |
|
const userList = ref([] as any) |
|
const GpsDialogRef=ref() |
|
const formData = ref({ |
|
id: undefined, |
|
departmentId: undefined, |
|
userId: undefined, |
|
type: undefined, |
|
region: undefined, |
|
enterprisesName: undefined, |
|
address: undefined, |
|
contactName: undefined, |
|
enterprisesStatus: undefined, |
|
environmentalContactPhone: undefined, |
|
registrationNumber: undefined, |
|
introduction: undefined, |
|
establishmentDate: undefined, |
|
gpsLocation: undefined, |
|
searchQuery: undefined, |
|
managerDeptId: undefined, |
|
ides: undefined, |
|
startUserSelectAssignees: undefined, |
|
enterpriseUserId: undefined, |
|
tags: undefined, |
|
photo: undefined, |
|
signRadius: 30 |
|
}) |
|
const formRules = reactive({ |
|
type: [{ required: true, message: '企业类型不能为空', trigger: 'change' }], |
|
enterprisesName: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }], |
|
contactName: [{ required: true, message: '负责人不能为空', trigger: 'blur' }], |
|
environmentalContactPhone: [ |
|
{ required: true, message: '企业环保负责人联系电话不能为空', trigger: 'blur' } |
|
], |
|
userId: [ |
|
{ |
|
required: true, |
|
message: '请选择执法人员', |
|
trigger: 'change' |
|
} |
|
], |
|
signRadius: [ |
|
{ |
|
required: true, |
|
message: '请输入执法半径', |
|
trigger: 'change' |
|
} |
|
], |
|
photo: [ |
|
{ |
|
required: true, |
|
message: '请上传企业照片', |
|
trigger: 'change' |
|
} |
|
], |
|
introduction: [ |
|
{ |
|
required: true, |
|
message: '请输入企业介绍', |
|
trigger: 'change' |
|
} |
|
], |
|
address: [ |
|
{ |
|
required: true, |
|
message: '请输入企业地址', |
|
trigger: 'change' |
|
} |
|
], |
|
tags: [ |
|
{ |
|
required: true, |
|
message: '请选择行业类别', |
|
trigger: 'change' |
|
} |
|
], |
|
region: [ |
|
{ |
|
required: true, |
|
message: '请选择所属区域', |
|
trigger: 'change' |
|
} |
|
] |
|
}) |
|
/** 查询搜索项列表 */ |
|
const getSelectOption = async () => { |
|
userList.value = await getEnterpriseManager() |
|
const res = await TagLibraryApi.tagLibraryList('hy') |
|
typeList.value = res[0].children.map((t) => { |
|
return { |
|
label: t.tagName, |
|
value: t.id |
|
} |
|
}) |
|
} |
|
|
|
const setGps = (gps) => { |
|
formData.value.gpsLocation = gps |
|
} |
|
|
|
const getGaps=()=>{ |
|
unref(GpsDialogRef).open() |
|
} |
|
|
|
getSelectOption() |
|
onMounted(() => {}) |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.view-wrapper { |
|
display: flex; |
|
flex-flow: row nowrap; |
|
gap: 40px; |
|
.title-wrapper { |
|
font-size: 16px; |
|
line-height: 140%; |
|
font-weight: 700; |
|
margin-bottom: 40px; |
|
} |
|
.form-photo { |
|
grid-column: span 2; |
|
} |
|
.base-form { |
|
display: grid; |
|
grid-template-columns: repeat(2, 1fr); |
|
gap: 40px; |
|
.form-textarea { |
|
grid-row: span 2; |
|
::v-deep(.el-textarea) { |
|
height: 100%; |
|
.el-textarea__inner { |
|
height: 100%; |
|
white-space: pre-wrap; |
|
&::-webkit-scrollbar { |
|
width: 4px; |
|
} |
|
&::-webkit-scrollbar-thumb { |
|
background-color: #ccc; |
|
border-radius: 10px; |
|
} |
|
&::-webkit-scrollbar-track { |
|
background-color: transparent; |
|
} |
|
&::-webkit-scrollbar-button { |
|
display: none; |
|
height: 2px; |
|
} |
|
} |
|
} |
|
} |
|
.form-sub-title { |
|
font-size: 16px; |
|
line-height: 140%; |
|
font-weight: 700; |
|
grid-column: span 2; |
|
} |
|
} |
|
} |
|
</style>
|
|
|