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

<template>
  <div class="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <div class="one">
          <el-select size="large" style="width: 350px" clearable v-model="company_id" filterable remote reserve-keyword placeholder="请输入想要选择的企业" :remote-method="remoteMethod" :loading="searchLoading">
            <el-option v-for="item in searchList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <el-button class="button" size="large" @click="toSave" type="primary">确定</el-button>
        </div>
        <el-col :span="24" class="two">
          <el-table :data="list" style="width: 100%" size="large" :header-cell-style="{ backgroundColor: '#edf3ff' }">
            <template #empty>
              <el-empty description="暂无数据" />
            </template>
            <el-table-column prop="company_name" align="center" label="企业名称" />
            <el-table-column prop="incubator_name" align="center" label="孵化器名称" />
            <el-table-column prop="time" align="center" label="申请时间" width="180" />
            <el-table-column prop="status" align="center" label="状态" width="180">
              <template #default="scope">
                <div>{{ getDict(scope.row.status, 'status') }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
              <template #default="{ row }">
                <el-link v-if="row.status == '0'" :underline="false" type="warning" size="mini" @click="toExam(row)" style="margin-right: 10px">提交审核</el-link>
                <el-link :underline="false" type="danger" size="mini" @click="toDelete(row)"> 删除 </el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24" class="thr">
          <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
        </el-col>
      </el-col>
    </el-row>
    <el-dialog v-model="dialog.show" :title="dialog.title" :destroy-on-close="false" @close="toClose">
      <el-row>
        <el-col :span="24" v-if="dialog.type == '1'">
          <custom-form v-model="examForm" :fields="examFormFields" :rules="examRules" @save="toExamSave" :DraftSave="false" submitText="提交">
            <template #status>
              <el-option v-for="i in statusList" :key="i.id" :label="i.label" :value="i.value"></el-option>
            </template>
          </custom-form>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup>
import { cloneDeep, get } from 'lodash-es'
import moment from 'moment'
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
const $checkRes = inject('$checkRes')
// 接口
import { CompanyStore } from '@/store/api/user/company'
import { CirelationStore } from '@/store/api/user/cirelation'
import { IncubatorStore } from '@/store/api/user/incubator'
import { DictDataStore } from '@/store/api/system/dictData'
const incubatorStore = IncubatorStore()
const store = CompanyStore()
const cirelationStore = CirelationStore()
const dictDataStore = DictDataStore()
// 加载中
const loading = ref(false)
const searchLoading = ref(false)
const searchList = ref([])
const company_id = ref('')
const incubatorInfo = ref({})
// 字典表

const statusList = ref([])
// 列表
const list = ref([])
let skip = 0
let limit = inject('limit')
const total = ref(0)
const currentPage = ref(1)
const dialog = ref({ type: '1', show: false, title: '审核' })
// 审核
const examFormFields = [{ label: '状态', model: 'status', type: 'select' }]
const examRules = reactive({ status: [{ required: true, message: '请选择状态', trigger: 'blur' }] })
const examForm = ref({})
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search()
  loading.value = false
})
const searchOther = async () => {
  let result
  // 状态
  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
  if ($checkRes(result)) statusList.value = result.data
  if (user.value.id) {
    let res = await incubatorStore.query({ user: user.value.id, status: '1' })
    if (res.errcode == '0') {
      if (!res.data[0].logo) res.data[0].logo = []
      incubatorInfo.value = res.data[0] || { logo: [] }
    }
  }
}
const search = async (query = { skip, limit }) => {
  skip = query.skip
  limit = query.limit
  const info = {
    skip: query.skip,
    limit: query.limit,
    incubator: incubatorInfo.value.id
  }
  const res = await cirelationStore.list(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
const remoteMethod = (query) => {
  if (query) {
    searchLoading.value = true
    setTimeout(async () => {
      searchLoading.value = false
      const info = { status: '1', name: query }
      const res = await store.query(info)
      if (res.errcode == '0') searchList.value = res.data
    }, 200)
  } else {
    searchList.value = []
  }
}
// 字典数据转换
const getDict = (data, model) => {
  if (data) {
    let res
    if (model == 'status') res = statusList.value.find((f) => f.value == data)
    return get(res, 'label')
  }
}
// 删除
const toDelete = (data) => {
  ElMessageBox.confirm(`您确认删除该数据?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
    .then(async () => {
      const res = await cirelationStore.del(data.id)
      if ($checkRes(res, true)) {
        search({ skip, limit })
      }
    })
    .catch(() => {})
}
const toSave = () => {
  ElMessageBox.confirm(`您确认选择该数据?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
    .then(async () => {
      const data = {
        user: user.value.id,
        incubator: incubatorInfo.value.id,
        company: company_id.value,
        time: moment().format('YYYY-MM-DD'),
        status: '1'
      }
      const res = await cirelationStore.create(data)
      if ($checkRes(res, true)) {
        search({ skip, limit })
      }
      company_id.value = ''
    })
    .catch(() => {})
}
// 审核
const toExam = (data) => {
  examForm.value = data
  dialog.value = { type: '1', show: true, title: '审核' }
}
// 审核保存
const toExamSave = async () => {
  const data = cloneDeep(examForm.value)
  let res = await cirelationStore.update({ id: data.id, status: data.status })
  if ($checkRes(res, true)) {
    search({ skip, limit })
    toClose()
  }
}
const toClose = () => {
  examForm.value = {}
  dialog.value = { show: false }
}
// 分页
const changePage = (page = currentPage.value) => {
  search({ skip: (page - 1) * limit, limit: limit })
}
const sizeChange = (limits) => {
  limit = limits
  currentPage.value = 1
  search({ skip: 0, limit: limit })
}
</script>
<style scoped lang="scss">
.main {
  .one {
    display: flex;
    align-items: center;
    margin: 0 0 10px 0;
    .button {
      margin: 0 0 0 5px;
    }
  }

  .thr {
    display: flex;
    justify-content: center;
    margin: 20px 0 0 0;
  }
}
</style>