yudao-web/src/views/enterprises/update.vue

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