aiwen-cuotiben/src/pages/admin/back/ctfx.vue

<script setup lang='ts'>
import { Search } from '@element-plus/icons-vue'
import { RouteLocationRaw, useRouter } from 'vue-router'
import { Grade, Status, Subject } from '~/store/info'
import user from '~/store/user'

const router = useRouter()
function routerPush(_route: RouteLocationRaw) {
  router.push(_route)
}

const tableData = ref([])
const total = ref(0)
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const queryForm = reactive({
  dc_grade_id: undefined,
  dc_subject_id: undefined,
  dc_check: undefined,
  dc_keyword: undefined,
  page: 1
})

watch(queryForm, () => {
  doQuery()
}, { deep: true, immediate: true })

function doQuery() {
  request({
    url: '/dyaw/ctfx/index',
    data: {
      ...queryForm,
      // 管理员不需要传递sm_id
      // sm_id: user.sm_info.sm_id,
      // create_user_id: user.user_id
    }
  }).then(res => {
    if (res.code === "1") {
      tableData.value = res.data.page_data
      total.value = parseInt(res.data.total_rows)
    }
  })
}

function doDelete() {
  request({
    url: '/dyaw/ctfx/delete',
    data: {
      dc_id: multipleSelection.value.map(item => item.dc_id)
    }
  }).then(
    res => {
      if (res.code === "1") {
        ElMessage.success('删除成功')
        doQuery()
      }
    }
  )
}


function formatTime(s: string) {
  return (new Date(s * 1000)).toLocaleString()
}

const dialogFormVisible = ref(false)
const dialogForm = reactive({
  dc_id: undefined,
  dc_check: '1',
  dc_check_desc: ''
})
function doJudge(id) {
  // init doJudge
  dialogForm.dc_id = id
  dialogForm.dc_check = '1'
  dialogForm.dc_check_desc = ''

  dialogFormVisible.value = true
}

function doSubmit() {
  request({
    url: '/dyaw/ctfx/edit',
    data: {
      dc_id: dialogForm.dc_id,
      dyaw_ctfx: {
        dc_check: dialogForm.dc_check,
        dc_check_desc: dialogForm.dc_check_desc,
        dc_check_user_id: user.user_id
      }
    }
  }).then(
    res => {
      if (res.code === "1") {
        ElMessage.success('审核成功')
        dialogFormVisible.value = false
        doQuery()
      }
    }
  )
}

</script>

<template>
  <div class="w-full h-640px flex flex-col">
    <div class="flex justify-end items-center">
      <div class="flex space-x-2">
        <el-select clearable size="large" placeholder="年级" v-model="queryForm.dc_grade_id">
          <el-option v-for="({ grade_id, grade_name }) in Grade" :key="grade_id" :label="grade_name" :value="grade_id" />
        </el-select>
        <el-select clearable size="large" placeholder="科目" v-model="queryForm.dc_subject_id">
          <el-option v-for="({ subject_id, subject_name }) in Subject" :key="subject_id" :label="subject_name"
            :value="subject_id" />
        </el-select>
        <el-select clearable size="large" placeholder="状态" v-model="queryForm.dc_check">
          <el-option v-for="(k) in Object.keys(Status)" :key="k" :label="Status[k]" :value="k" />
        </el-select>
        <el-input clearable size="large" placeholder="关键字搜索" class="max-w-240px" :suffix-icon="Search"
          v-model="queryForm.dc_keyword"></el-input>
        <el-button size="large" type="danger" @click="doDelete">删除</el-button>
      </div>
    </div>

    <div class="flex-auto flex-col flex mt-4 justify-between">
      <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column property="dc_title" label="标题" width="auto" show-overflow-tooltip />
        <el-table-column property="dc_grade_name" label="年级" width="120" />
        <el-table-column property="dc_subject_name" label="科目" width="120" />
        <el-table-column property="dc_keyword" label="关键词" width="160" />
        <el-table-column property="create_user_realname" label="上传教师" width="120" />
        <el-table-column property="create_dateline" label="上传时间" width="180">
          <template #default="{ row }">
            <span>{{ formatTime(row.create_dateline) }}</span>
          </template>
        </el-table-column>
        <el-table-column property="name" label="状态" width="120">
          <template #default="{ row }">
            <span
              :class="row.dc_check === '1' ? 'text-green-500' : row.dc_check === '2' ? 'text-red-500' : 'text-blue-500'">{{
                Status[row.dc_check] }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="{ row }">
            <el-button link type="primary" size="small" :disabled="row.dc_check !== '0'"
              @click="doJudge(row.dc_id)">审核</el-button>
            <el-button link type="primary" size="small"
              @click="routerPush({ name: 'admin_back_ctfx_detail', params: { id: row.dc_id } })">查看</el-button>

          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end mt-6">
        <el-pagination v-model:current-page="queryForm.page" background layout="prev, pager, next"
          :total="total"></el-pagination>
      </div>

    </div>

    <el-dialog v-model="dialogFormVisible" title="审核">
      <el-form :model="dialogForm">
        <el-form-item label="审核结果">
          <el-radio-group v-model="dialogForm.dc_check">
            <el-radio label="1">通过</el-radio>
            <el-radio label="2">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="处理意见" v-show="dialogForm.dc_check === '2'">
          <el-input v-model="dialogForm.dc_check_desc" type="textarea" :rows="5" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="w-full justify-end space-x-4">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="doSubmit">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<style scoped lang="scss">
.tab_selected {
  color: #007DFF;

  &::after {
    content: '-';
    color: transparent;
    position: absolute;
    left: -5px;
    right: -5px;
    bottom: -4px;
    height: 15px;
    background: rgba(0, 125, 255, 0.30);
    border-radius: 8px;
  }
}
</style>