technique_admin/src/views/support/index.vue

<template>
  <div class="main animate__animated animate__backInRight" v-loading="loading">
    <custom-search-bar :fields="fields.filter((f) => f.isSearch)" v-model="searchForm" @search="search" @reset="toReset">
      <template #industry>
        <el-option v-for="i in sectorList" :key="i.id" :label="i.title" :value="i.title"></el-option>
      </template>
    </custom-search-bar>
    <custom-button-bar :fields="buttonFields" @add="toAdd" @select="toMoreDelect"></custom-button-bar>
    <custom-table :data="data" :fields="fields" @query="search" :total="total" :opera="opera" @exam="toExam" @edit="toEdit" @delete="toDelete" @toSelect="toSelect" :select="true">
      <template #is_use="{ row }">
        <el-tag v-if="row.is_use == '0'" type="success" @click="toUse(row, '1')">启用</el-tag>
        <el-tag v-else type="info" @click="toUse(row, '0')">禁用</el-tag>
      </template>
    </custom-table>
    <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="form" :fields="formFields" :rules="rules" @save="toSave">
            <template #file>
              <custom-upload model="file" :list="form.file" :limit="3" listType="picture-card" url="/files/web/cxyy_support/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-col :span="24" v-if="dialog.type == '2'">
          <custom-form v-model="examForm" :fields="examFormFields" :rules="examRules" @save="toExamSave">
            <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'
const $checkRes = inject('$checkRes')
const { t } = useI18n()
// 接口
import { SupportStore } from '@/store/api/platform/support'
import { DictDataStore } from '@/store/api/system/dictData'
import { TagsStore } from '@/store/api/system/tags'
import { SectorStore } from '@/store/api/system/sector'
import { RegionStore } from '@/store/api/system/region'
const regionStore = RegionStore()
const store = SupportStore()
const dictDataStore = DictDataStore()
const tagsStore = TagsStore()
const sectorStore = SectorStore()
const data = ref([])
const searchForm = ref({})
const fields = [
  { label: t('pages.support.name'), model: 'name', isSearch: true },
  { label: t('pages.support.industry'), model: 'industry', isSearch: true, type: 'select' },
  { label: t('pages.support.tags'), model: 'tags', isSearch: true, format: (i) => getDict(i, 'tags') },
  { label: t('pages.support.field'), model: 'field', isSearch: true },
  { label: t('pages.support.time'), model: 'time', isSearch: true },
  { label: t('pages.support.is_use'), model: 'is_use', custom: true, format: (i) => getDict(i, 'is_use') },
  { label: t('pages.support.status'), model: 'status', format: (i) => getDict(i, 'status') }
]
const opera = [
  { label: t('common.update'), method: 'edit' },
  { label: t('common.exam'), method: 'exam', type: 'warning', display: (i) => i.status === '0' },
  { label: t('common.delete'), method: 'delete', confirm: true, type: 'danger', display: (i) => i.is_use === '1' }
]
const buttonFields = [
  { label: t('common.create'), method: 'add' },
  { label: t('common.select'), method: 'select', type: 'danger' }
]
let skip = 0
let limit = inject('limit')
const total = ref(0)
// 字典表
const isUseList = ref([])
const statusList = ref([])
const cityList = ref([])
const tagsList = ref([])
const sectorList = ref([])
// 多选列表
const selectList = ref([])
// 加载中
const loading = ref(false)
const formFields = ref([
  { label: t('pages.support.file'), model: 'file', custom: true },
  { label: t('pages.support.name'), model: 'name' },
  { label: t('pages.support.tags'), model: 'tags', custom: true },
  { label: t('pages.support.industry'), model: 'industry', type: 'select' },
  { label: t('pages.support.field'), model: 'field' },
  { label: t('pages.support.time'), model: 'time', type: 'date' },
  { label: t('pages.support.area'), model: 'area', custom: true },
  { label: t('pages.support.address'), model: 'address', type: 'textarea' },
  { label: t('pages.support.contacts'), model: 'contacts' },
  { label: t('pages.support.phone'), model: 'phone' },
  { label: t('pages.support.is_use'), model: 'is_use', type: 'radio' },
  { label: t('pages.support.brief'), model: 'brief', type: 'textarea' }
])
const rules = reactive({ name: [{ required: true, message: t('pages.support.titleMessage'), trigger: 'blur' }] })
const dialog = ref({ type: '1', show: false, title: t('pages.support.addDialogTitle') })
const form = ref({ file: [] })
// 审核
const examFormFields = [{ label: t('pages.support.status'), model: 'status', type: 'select' }]
const examRules = reactive({ status: [{ required: true, message: t('common.statusMessage'), trigger: 'blur' }] })
const examForm = ref({})
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search({ skip, limit })
  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.query({ level: 'city', parent_code: 22 })
  if ($checkRes(result)) cityList.value = result.data
}
const search = async (query = { skip, limit }) => {
  skip = query.skip
  limit = query.limit
  const info = { skip: query.skip, limit: query.limit, ...searchForm.value }
  const res = await store.query(info)
  if (res.errcode == '0') {
    data.value = res.data
    total.value = res.total
  }
}
// 字典数据转换
const getDict = (data, model) => {
  if (data) {
    let res
    if (model == 'is_use') res = isUseList.value.find((f) => f.value == data)
    else if (model == 'status') res = statusList.value.find((f) => f.value == data)
    else if (model == 'tags') return data.join(',')
    return get(res, 'label')
  }
}
// 多选
const toSelect = (val) => {
  selectList.value = val
}
// 批量删除
const toMoreDelect = () => {
  if (selectList.value.length > 0) {
    ElMessageBox.confirm(`确定批量删除数据?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
      .then(async () => {
        console.log(selectList.value)
      })
      .catch(() => {})
  } else {
    ElMessage({
      message: '未选择要处理的数据！',
      type: 'warning'
    })
  }
}
// 添加
const toAdd = () => {
  form.value = {}
  dialog.value = { type: '1', show: true, title: t('pages.support.addDialogTitle') }
}
// 修改
const toEdit = (data) => {
  if (!data.file) data.file = []
  form.value = data
  dialog.value = { type: '1', show: true, title: t('pages.support.upDialogTitle') }
}
// 删除
const toDelete = async (data) => {
  const res = await store.del(data.id)
  if ($checkRes(res, true)) {
    search({ skip, limit })
  }
}
const toSave = async () => {
  const data = cloneDeep(form.value)
  const other = { status: '0' }
  let res
  if (get(data, 'id')) res = await store.update({ ...data, ...other })
  else res = await store.create({ ...data, ...other })
  if ($checkRes(res, true)) {
    search({ skip, limit })
    toClose()
  }
}
// 上传图片
const onUpload = (e) => {
  const { model, value } = e
  form.value[model] = value
}
// 审核
const toExam = (data) => {
  examForm.value = data
  dialog.value = { type: '2', show: true, title: t('pages.support.examDialogTitle') }
}
// 审核保存
const toExamSave = async () => {
  const data = cloneDeep(examForm.value)
  let res = await store.update({ id: data.id, status: data.status })
  if ($checkRes(res, true)) {
    search({ skip, limit })
    toClose()
  }
}
// 开启或禁用
const toUse = async (data, is_use) => {
  ElMessageBox.confirm(`确定修改【${data.name}】数据?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
    .then(async () => {
      let res = await store.update({ id: get(data, 'id'), is_use })
      if ($checkRes(res, true)) {
        search({ skip, limit })
      }
    })
    .catch(() => {})
}
// 重置
const toReset = async () => {
  searchForm.value = {}
  await search({ skip, limit })
}
const toClose = () => {
  form.value = { file: [] }
  dialog.value = { show: false }
}
</script>
<style scoped lang="scss"></style>