learn_admin/src/views/core/opinion/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 #type>
        <el-option v-for="i in typeList" :key="i._id" :label="i.label" :value="i.value"></el-option>
      </template>
      <template #status>
        <el-select clearable filterable allow-create default-first-option v-model="searchForm.status" placeholder="请选择状态" style="width: 100%; min-width: 200px">
          <el-option v-for="i in statusList" :key="i._id" :label="i.label" :value="i.value"></el-option>
        </el-select>
      </template>
      <template #userType>
        <el-option v-for="i in userTypeList" :key="i._id" :label="i.label" :value="i.value"></el-option>
      </template>
    </custom-search-bar>
    <custom-table :data="data" :fields="fields" @query="search" :total="total" :opera="opera" @view="toView">
      <template #status="{ row }">
        <el-tag v-if="row.status == '1'" type="success">已解决</el-tag>
        <el-tag v-else type="info">未解决</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" @save="toSave">
            <template #file>
              <el-image class="images" v-for="i in form.file" :key="i.id" :src="i.url" :preview-src-list="getFlie(form.file)"></el-image>
            </template>
            <template #status>
              <el-option v-for="i in statusList" :key="i._id" :label="i.label" :value="i.value"></el-option>
            </template>
            <template #type>
              <el-option disabled v-for="i in typeList" :key="i._id" :label="i.label" :value="i.value"></el-option>
            </template>
            <template #userType>
              <el-option disabled v-for="i in userTypeList" :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 { t } = useI18n()
const $checkRes = inject('$checkRes')
// 接口
import { OpinionStore } from '@/store/api/core/opinion'
import { DictDataStore } from '@/store/api/system/dictData'
const dictDataStore = DictDataStore()
const store = OpinionStore()
const data = ref([])
const searchForm = ref({})
const fields = [
  { label: t('pages.opinion.user_name'), model: 'user_name' },
  { label: t('pages.opinion.userType'), model: 'userType', format: (i) => getDict(i, 'userType'), type: 'select', isSearch: true },
  { label: t('pages.opinion.type'), model: 'type', format: (i) => getDict(i, 'type'), type: 'select', isSearch: true },
  { label: t('pages.opinion.time'), model: 'time', type: 'date' },
  { label: t('pages.opinion.status'), model: 'status', custom: true, isSearch: true }
]
let skip = 0
let limit = inject('limit')
const total = ref(0)
const opera = [{ label: t('common.view'), method: 'view' }]
const dialog = ref({ type: '1', show: false, title: t('pages.video.addDialogTitle') })
const form = ref({})
const formFields = [
  { label: t('pages.opinion.user_name'), model: 'user_name', options: { readonly: true } },
  { label: t('pages.opinion.type'), model: 'type', type: 'select' },
  { label: t('pages.opinion.time'), model: 'time', type: 'date', options: { readonly: true } },
  { label: t('pages.opinion.brief'), model: 'brief', type: 'textarea', options: { readonly: true } },
  { label: t('pages.opinion.file'), model: 'file', custom: true },
  { label: t('pages.opinion.status'), model: 'status', type: 'select' }
]
// 加载中
const loading = ref(false)
// 字典表
const statusList = ref([])
const typeList = ref([])
const userTypeList = 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: 'opinionType', is_use: '0' })
  if ($checkRes(result)) typeList.value = result.data
  // 状态
  result = await dictDataStore.query({ code: 'opinionStatus', is_use: '0' })
  if ($checkRes(result)) statusList.value = result.data
  // 用户类型
  result = await dictDataStore.query({ code: 'role', is_use: '0' })
  if ($checkRes(result)) userTypeList.value = result.data
}
const search = async (query = { skip: 0, 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) => {
  let res
  if (model == 'status') res = statusList.value.find((f) => f.value == data)
  else if (model == 'type') res = typeList.value.find((f) => f.value == data)
  else if (model == 'userType') res = userTypeList.value.find((f) => f.value == data)
  return get(res, 'label')
}
// 修改
const toView = (data) => {
  form.value = data
  dialog.value = { type: '1', show: true, title: t('pages.video.upDialogTitle') }
}
// 重置
const toReset = async () => {
  searchForm.value = {}
  await search({ skip, limit })
}
// 图片处理
const getFlie = (file) => {
  if (file && file.length > 0) {
    const urls = file.map((i) => {
      return i.url
    })
    return urls
  }
}
const toClose = () => {
  form.value = {}
  dialog.value = { show: false }
}
// 保存
const toSave = async () => {
  const data = cloneDeep(form.value)
  delete data.user_name
  let res = await store.update(data)
  if ($checkRes(res, true)) {
    search({ skip: 0, limit })
    toClose()
  }
}
</script>
<style scoped lang="scss">
.images {
  width: 100px;
  height: 100px;
  margin: 0 1vw 0 0;
}
</style>