ss-tiku-manage-web/src/views/Question/VipData/conponents/SimpleData.vue

<template>
  <div>
    <el-form inline label-width="68px" @submit.prevent>
      <el-row :gutter="20">
        <el-form-item label="车型">
          <el-radio-group v-model="queryParams.carTypeId">
            <el-radio label="1001" value="1001">小车</el-radio>
            <el-radio label="1002" value="1002">摩托车</el-radio>
            <!-- <el-radio label="B2">货车</el-radio> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="科目">
          <el-radio-group v-model="queryParams.subject">
            <el-radio label="1" value="1">科一</el-radio>
            <el-radio label="4" value="4">科四</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            v-hasPermi="['question:vip-data:jx:search']"
            @click="
              () => {
                queryParams.pageNo = 1
                getQuestionList()
              }
            "
          >
            查询
          </el-button>
          <el-button type="primary" @click="addMjDetail" v-hasPermi="['question:vip-data:jx:add']">
            新增精选试题
          </el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <el-table v-loading="loading" :data="tableList" height="calc(100vh - 250px)">
      <el-table-column type="index" width="55" align="center" />
      <el-table-column label="题目" align="left" prop="question" min-width="140" />
      <el-table-column label="选项" align="left" min-width="140">
        <template #default="{ row }">
          <p v-if="row.chooseA">A:{{ row.chooseA }}</p>
          <p v-if="row.chooseB">B:{{ row.chooseB }}</p>
          <p v-if="row.chooseC">C:{{ row.chooseC }}</p>
          <p v-if="row.chooseD">D:{{ row.chooseD }}</p>
        </template>
      </el-table-column>
      <el-table-column label="答案" align="center" prop="trueAnswer" width="100" />
      <el-table-column label="科目" align="center" prop="subject" width="100">
        <template #default="{ row }">
          <span v-if="row.subject == '1'">科一</span>
          <span v-if="row.subject == '4'">科四</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center" width="100">
        <template #default="{ row }">
          <el-image
            v-if="row.imageUrl"
            :src="`https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`"
            :preview-src-list="[`https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`]"
            :lazy="true"
            style="width: 80px"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100px">
        <template #default="{ row }">
          <el-button
            size="small"
            type="primary"
            link
            @click="takeoutMj(row)"
            v-hasPermi="['question:vip-data:jx:remove']"
          >
            移出精选
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getQuestionList"
    />

    <el-dialog v-model="showDialog" title="新增试题" width="80%">
      <div style="display: flex; align-items: center; margin-bottom: 20px">
        <el-input v-model="quesName" placeholder="请输入题目" clearable @keyup.enter="searchQues" />
        <el-button style="margin-left: 20px" type="primary" @click="searchQues">搜索</el-button>
      </div>
      <el-table :data="quesLit" highlight-current-row height="calc(100vh - 260px)">
        <el-table-column label="题目" align="left" prop="question" min-width="140" />
        <el-table-column label="选项" align="left" min-width="140">
          <template #default="{ row }">
            <p v-if="row.chooseA">A:{{ row.chooseA }}</p>
            <p v-if="row.chooseB">B:{{ row.chooseB }}</p>
            <p v-if="row.chooseC">C:{{ row.chooseC }}</p>
            <p v-if="row.chooseD">D:{{ row.chooseD }}</p>
          </template>
        </el-table-column>
        <el-table-column label="答案" align="center" prop="trueAnswer" width="100" />
        <el-table-column label="章节" align="center" prop="chapterName" min-width="100" />
        <el-table-column label="图片" align="center" width="100">
          <template #default="{ row }">
            <el-image
              v-if="row.imageUrl"
              :src="`https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`"
              :preview-src-list="[`https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`]"
              :lazy="true"
              style="width: 80px"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template #default="{ row }">
            <el-button type="primary" link @click="sureAddQues(row)">加入精选</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup name="SimpleData">
import { getJxQuestionList, addJx, delJxData } from '@/api/xjapplet/vipdatabase.js'
import { searchQuestion } from '@/api/xjapplet/xjdatabase.js'

const props = defineProps({
  source: {
    type: String,
    default: '1'
  }
})
watch(
  () => props.source,
  (newValue) => {
    queryParams.value.source = newValue
    getQuestionList()
  }
)

const message = useMessage() // 消息弹窗

const queryParams = ref({
  carTypeId: '1001',
  subject: '1',
  pageNo: 1,
  pageSize: 100
})

const total = ref(0)

const loading = ref(false)
const tableList = ref([])
const showDialog = ref(false)
const quesName = ref('')
const quesLit = ref([])

onMounted(() => {
  getQuestionList()
})
function addMjDetail() {
  showDialog.value = true
}
function searchQues() {
  searchQuestion({
    ...queryParams.value,
    pageNo: 1,
    pageSize: 1000,
    question: quesName.value
  }).then((response) => {
    quesLit.value = response.list
  })
}
function takeoutMj(row) {
  message
    .confirm('是否确认将该题移出精选？')
    .then(function () {
      return delJxData(row.id)
    })
    .then(() => {
      getQuestionList()
      message.success('清空题目成功')
    })
    .catch(() => {})
}
function getQuestionList() {
  getJxQuestionList(queryParams.value).then((resp) => {
    tableList.value = resp.list
    total.value = resp.total
  })
}
function sureAddQues(row) {
  addJx({
    questionId: row.questionId,
    carTypeId: queryParams.value.carTypeId,
    subject: queryParams.value.subject
  })
    .then((resp) => {
      if (resp) {
        message.success('添加成功')
        getQuestionList()
      }
    })
    .catch(() => {})
}
</script>

<style lang="scss" scoped></style>