cxyy-web/src/views/center/parts/company.vue

<template>
  <div class="index">
    <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="auto" class="form" label-position="left">
      <el-row>
        <el-form-item label="企业Logo" prop="logo">
          <custom-upload model="logo" :list="form.logo" :limit="1" url="/files/web/cxyy_company/upload" @change="onUpload" listType="picture-card"></custom-upload>
        </el-form-item>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="企业名称" prop="name">
            <el-input size="large" clearable v-model="form.name" placeholder="请输入企业名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业类型" prop="pattern">
            <el-select size="large" clearable v-model="form.pattern" placeholder="请选择企业类型">
              <el-option v-for="(item, index) in patternList" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="企业规模" prop="scale">
            <el-select size="large" clearable v-model="form.scale" placeholder="请选择企业规模">
              <el-option v-for="item in scaleList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="统一信用代码" prop="code">
            <el-input size="large" clearable v-model="form.code" placeholder="请输入统一信用代码" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="所属行业" prop="type">
            <el-select size="large" clearable v-model="form.type" placeholder="请选择所属行业">
              <el-option v-for="(item, index) in IndustryList" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在地区" prop="area">
            <el-cascader size="large" v-model="form.area" :props="{ value: 'name', label: 'name' }" :options="cityList" clearable placeholder="请选择所在地区" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="法定代表人" prop="representative">
            <el-input size="large" clearable v-model="form.representative" placeholder="请输入法定代表人名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电子邮箱" prop="email">
            <el-input size="large" clearable v-model="form.email" type="email" placeholder="请输入电子邮箱" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="员工人数" prop="person">
            <el-input size="large" clearable v-model="form.person" placeholder="请输入员工人数" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="注册资本" prop="register">
            <el-input size="large" clearable v-model="form.register" placeholder="请输入注册资本(万元)" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="成立时间" prop="create_time">
            <el-date-picker size="large" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="form.create_time" type="date" placeholder="请选择成立时间" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业地址" prop="address">
            <el-input size="large" clearable v-model="form.address" placeholder="请输入企业地址" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="是否公开" prop="is_show">
            <el-radio-group size="large" v-model="form.is_show">
              <el-radio v-for="i in isUseList" :key="i._id" :label="i.value">{{ i.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业产品" prop="products">
            <el-input size="large" clearable v-model="form.products" placeholder="请输入企业产品" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-col :span="24">
        <el-form-item label="简介" prop="brief">
          <el-input size="large" v-model="form.brief" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入简介" />
        </el-form-item>
      </el-col>
      <el-col :span="24" class="button">
        <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
      </el-col>
    </el-form>
  </div>
</template>
<script setup>
// 基础
const $checkRes = inject('$checkRes')
const cloneDeep = inject('cloneDeep')
// 用户信息
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 表单
const ruleFormRef = ref()
// 字典表
const patternList = inject('patternList')
const scaleList = inject('scaleList')
const IndustryList = inject('IndustryList')
const cityList = inject('cityList')
const isUseList = inject('isUseList')
// 接口
import { CompanyStore } from '@/store/api/user/company'
const companyStore = CompanyStore()
const form = ref({ logo: [] })
const rules = reactive({
  logo: [{ required: true, message: '请输入企业Logo', trigger: 'blur' }],
  name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
  pattern: [{ required: true, message: '请输入企业类型', trigger: 'blur' }],
  scale: [{ required: true, message: '请输入企业规模', trigger: 'blur' }],
  type: [{ required: true, message: '请输入所属行业', trigger: 'blur' }],
  representative: [{ required: true, message: '请输入法定代表人', trigger: 'blur' }],
  companyStatus: [{ required: true, message: '请输入公司状态', trigger: 'blur' }],
  create_time: [{ required: true, message: '请输入成立时间', trigger: 'blur' }],
  code: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
  email: [{ required: true, message: '请输入电子邮箱', trigger: 'blur' }],
  person: [{ required: true, message: '请输入员工人数', trigger: 'blur' }],
  region: [{ required: true, message: '请选择地区', trigger: 'blur' }],
  register: [{ required: true, message: '请输入注册资金', trigger: 'blur' }],
  is_show: [{ required: true, message: '请选择是否公开', trigger: 'blur' }],
  brief: [{ required: true, message: '请输入简介', trigger: 'blur' }],
  products: [{ required: true, message: '请输入产品', trigger: 'blur' }],
  address: [{ required: true, message: '请输入地址', trigger: 'blur' }]
})
// 上传图片
const onUpload = (e) => {
  const { model, value } = e
  form.value[model] = value
}
// 注册
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const data = cloneDeep(form.value)
      data.status = '0'
      data.industry = user.value.industry
      let res
      if (data.id) res = await companyStore.update(data)
      else res = await companyStore.create({ ...data, user: user.value.id })
      if ($checkRes(res, true)) {
        search()
      } else ElMessage.error(res.message)
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 请求
onMounted(async () => {
  await search()
})
const search = async () => {
  if (user.value.id) {
    let res = await companyStore.query({ user: user.value.id })
    if (res.errcode == '0') form.value = res.data[0] || { logo: [] }
  }
}
</script>
<style scoped lang="scss">
.index {
  .button {
    text-align: center;
  }
}
</style>