ohplay_business/src/views/review/list/index.vue

<template>
  <div class='app-container'>
    <!-- 搜索 -->
    <el-form inline>
      <el-form-item label="音频ID：">
        <el-input v-model="data.form.id" placeholder="请输入音频ID" />
      </el-form-item>
      <el-form-item label="音频文件：">
        <el-input v-model="data.form.name" placeholder="请输入音频文件名称" />
      </el-form-item>
      <el-form-item label="当前状态：">
        <el-select v-model="data.form.auditStatus" placeholder="请选择当前状态">
          <el-option v-for="item in data.statusOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="getSearch">搜索</el-button>
        <el-button icon="Refresh" @click="getRefresh">重置</el-button>
        <el-button type="danger" icon="delete" :disabled="disabled()" @click="getDelete()" v-hasPermi="['review:list:delete']">批量删除</el-button>
      </el-form-item>
    </el-form>

    <!-- 列表 -->
    <el-table :data="data.tableData" v-loading="loading" @selection-change="handleSelectionChange">
      <el-table-column type="selection" />
      <el-table-column label="音频ID" prop="id" align="center"></el-table-column>
      <el-table-column label="音频文件" prop="name" align="center"></el-table-column>
      <el-table-column label="上传账号" prop="createBy" align="center"></el-table-column>
      <el-table-column label="上传企业/门店" prop="tenantNmaeOrStoreName" align="center"></el-table-column>
      <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
      <el-table-column label="当前状态" prop="auditStatus" align="center" :formatter="statusFormatter" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button v-if="scope.row.auditStatus === 0" type="primary" link @click="getDialog(scope.row)" v-hasPermi="['review:list:check']">审核</el-button>
          <el-button type="danger" link @click="getDelete(scope.row.id)" v-hasPermi="['review:list:delete']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="data.form.pageNum" v-model:limit="data.form.pageSize"
      @pagination="getList" />

    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" title="审核" width="500" :before-close="getClose">
      <el-form :model="data.dialogForm" ref="dialogForm" :rules="data.rules" label-width="100px">
        <el-form-item label="音频文件：">
          <div class="file">
            <img src="@/assets/icons/svg/file.svg" width="50" height="50">
            <span>{{ data.dialogForm.name }}</span>
          </div>
        </el-form-item>
        <el-form-item label="上传账号：">
          <span>{{ data.dialogForm.createBy }}</span>
        </el-form-item>
        <el-form-item label="审核：">
          <el-select v-model="data.dialogForm.status" placeholder="请选择审核结果">
            <el-option v-for="item in data.statusOptions.slice(1)" :key="item.value" :value="item.value"
              :label="item.label" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="getClose">取消</el-button>
        <el-button type="primary" @click="getSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { list, submit, remove } from '@/api/review/list'

const { proxy } = getCurrentInstance();

// 遮罩层
const loading = ref(false)

const data = reactive({
  form: {
    pageNum: 1,
    pageSize: 10
  },
  tableData: [],
  // 审核状态
  statusOptions: [{
    value: 0,
    label: '待审核'
  }, {
    value: 1,
    label: '不通过'
  }, {
    value: 2,
    label: '通过'
  }],
  dialogForm: {},
  // 删除
  ids: []
})

// 总数据
const total = ref(0)

const getList = () => {
  loading.value = true
  list(data.form).then(res => {
    if (res.code === 0) {
      data.tableData = res.data.records
      total.value = res.data.total
      loading.value = false
    }
  })
}
getList()

// 搜索
const getSearch = () => {
  data.form.pageNum = 1
  getList()
}

// 重置
const getRefresh = () => {
  data.form = {
    pageNum: 1,
    pageSize: 10
  }
  getList()
}

// 多选
const handleSelectionChange = (e) => {
  data.ids = []
  e.map(i => data.ids.push(i.id))
}

// 禁用
const disabled = () => {
  return data.ids.length > 1 ? false : true
}

// 删除
const getDelete = (id) => {
  if (id) {
    data.ids.push(id)
  }
  proxy.$modal.confirm('是否删除当前数据?').then(() => {
    remove({ ids: data.ids }).then(res => {
      if (res.code === 0) {
        data.ids = []
        proxy.$modal.msgSuccess('删除成功！')
        getList()
      }
    })
  })
}

// 弹窗
const dialogVisible = ref(false)

const getDialog = (row) => {
  dialogVisible.value = true
  data.dialogForm = row
}

// 确定
const getSubmit = () => {
  submit(data.dialogForm).then(res => {
    if (res.code === 0) {
      proxy.$modal.msgSuccess('审核成功！')
      getClose()
    }
  })
}

// 取消
const getClose = () => {
  dialogVisible.value = false
  data.dialogForm = {}
  proxy.$refs.dialogForm.resetFields()
}

const statusFormatter = (row) => {
  return proxy.selectDictLabel(data.statusOptions, row.auditStatus)
}
</script>

<style lang="scss" scoped>
.file {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>