cxyy-web2/src/views/two/add/footplate.vue

<template>
  <div class="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <custom-form v-model="form" :fields="formFields" :rules="rules" @save="toSave" @draftSave="toDraftSave">
          <template #file>
            <custom-upload model="file" :list="form.file" :limit="3" listType="picture-card" url="/files/web/cxyy_footplate/upload" @change="onUpload"></custom-upload>
          </template>
          <template #is_use>
            <el-radio v-for="i in isUseList" :key="i.id" :label="i.value">{{ i.label }}</el-radio>
          </template>
          <template #industry>
            <el-option v-for="i in sectorList" :key="i.id" :label="i.title" :value="i.title"></el-option>
          </template>
          <template #area>
            <el-cascader v-model="form.area" :props="{ value: 'name', label: 'name' }" :options="cityList" style="width: 100%" />
          </template>
          <template #tags>
            <el-select v-model="form.tags" multiple filterable allow-create default-first-option :reserve-keyword="false" placeholder="请选择标签" style="width: 100%">
              <el-option v-for="item in tagsList" :key="item.id" :label="item.title" :value="item.title" />
            </el-select>
          </template>
        </custom-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { cloneDeep, get } from 'lodash-es'
const $checkRes = inject('$checkRes')
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 接口
import { FootplateStore } from '@/store/api/platform/footplate'
import { DictDataStore } from '@/store/api/system/dictData'
import { TagsStore } from '@/store/api/system/tags'
import { SectorStore } from '@/store/api/platform/sector'
import { RegionStore } from '@/store/api/system/region'
const regionStore = RegionStore()
const store = FootplateStore()
const dictDataStore = DictDataStore()
const tagsStore = TagsStore()
const sectorStore = SectorStore()
// 加载中
const loading = ref(false)

// 字典表
const isUseList = ref([])
const statusList = ref([])
const cityList = ref([])
const tagsList = ref([])
const sectorList = ref([])

const form = ref({ file: [] })
const formFields = ref([
  { label: '封面', model: 'file', custom: true },
  { label: '名称', model: 'name' },
  { label: '标签', model: 'tags', custom: true },
  { label: '所属产业', model: 'industry', type: 'select' },
  { label: '建设主体', model: 'build' },
  { label: '运营主体', model: 'operate' },
  { label: '服务产业领域', model: 'field' },
  { label: '所在地区', model: 'area', custom: true },
  { label: '地址', model: 'address', type: 'textarea' },
  { label: '联系人', model: 'contacts' },
  { label: '联系电话', model: 'phone' },
  { label: '是否启用', model: 'is_use', type: 'radio' },
  { label: '简介', model: 'brief', type: 'textarea' }
])
const rules = reactive({ name: [{ required: true, message: '请输入平台名称', trigger: 'blur' }] })
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  loading.value = false
})
const searchOther = async () => {
  let result
  // 是否使用
  result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
  if ($checkRes(result)) isUseList.value = result.data
  // 状态
  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
  if ($checkRes(result)) statusList.value = result.data
  // 标签
  result = await tagsStore.query({ is_use: '0' })
  if ($checkRes(result)) tagsList.value = result.data
  // 行业
  result = await sectorStore.query({ is_use: '0' })
  if ($checkRes(result)) sectorList.value = result.data
  // 城市
  result = await regionStore.area({ level: 'province', code: 22 })
  if ($checkRes(result)) cityList.value = result.data
}

const toSave = async () => {
  const data = cloneDeep(form.value)
  const other = { status: '0', user: user.value.id }
  let res
  if (get(data, 'id')) res = await store.update({ ...data, ...other })
  else res = await store.create({ ...data, ...other })
  if ($checkRes(res, true)) {
    ElMessage({ message: `发布成功可以上历史发布查看`, type: 'success' })
    form.value = {}
  }
}
const toDraftSave = async () => {
  const data = cloneDeep(form.value)
  const other = { status: '-2', user: user.value.id }
  let res
  if (get(data, 'id')) res = await store.update({ ...data, ...other })
  else res = await store.create({ ...data, ...other })
  if ($checkRes(res, true)) {
    ElMessage({ message: `发布成功可以上历史发布查看`, type: 'success' })
    form.value = {}
  }
}
// 上传图片
const onUpload = (e) => {
  const { model, value } = e
  form.value[model] = value
}
</script>
<style scoped lang="scss">
.main {
  .one {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 10px 0;
    .one_left {
      background: #1875df;
      padding: 0 10px;
      height: 30px;
      color: #fff;
      line-height: 30px;
      text-align: center;
      font-size: 16px;
      cursor: default;
    }
  }
  .thr {
    display: flex;
    justify-content: center;
    margin: 20px 0 0 0;
  }
}
</style>