zkzx_question/src/views/answer/detail.vue

<template>
  <div id="detail">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" class="one">
          <cSearch :is_title="false" :is_search="true" :fields="fields" @search="toSearch"> </cSearch>
        </el-col>
        <el-col :span="24" class="thr">
          <cTable :fields="fields" :opera="opera" :list="list" @query="search" :total="total" @view="toView"> </cTable>
        </el-col>
      </el-col>
    </el-row>
    <cDialog :dialog="dialog" @toClose="toClose">
      <template v-slot:info>
        <el-col :span="24" class="dialog_one" v-if="dialog.type == '1'">
          <el-col :span="24" class="list" v-for="(i, index) in info.answer" :key="index">
            <el-col :span="24" class="list_1">
              <span>{{ index + 1 }}.</span>
              <span>{{ i.label }}</span>
            </el-col>
            <el-col :span="24" class="list_2">{{ getDict(i.value) }}</el-col>
          </el-col>
        </el-col>
      </template>
    </cDialog>
  </div>
</template>

<script setup lang="ts">
// 基础
import _ from 'lodash';
import type { Ref } from 'vue';
import { onMounted, ref, getCurrentInstance } from 'vue';
import { useRoute } from 'vue-router';
// 接口
import { AnswerStore } from '@common/src/stores/question/answer';
import type { IQueryResult } from '@/util/types.util';
const answertAxios = AnswerStore();

const { proxy } = getCurrentInstance() as any;

// 路由
const route = useRoute();

// 加载中
const loading: Ref<any> = ref(false);
const list: Ref<any> = ref([]);
const total: Ref<any> = ref(0);
const skip = 0;
const limit = proxy.limit;
const fields: Ref<any[]> = ref([
  { label: '用户姓名', model: 'user_name', isSearch: true },
  { label: '手机号', model: 'phone', isSearch: true },
  { label: '答题时间', model: 'answer_date' }
]);
const opera: Ref<any[]> = ref([{ label: '查看答案', method: 'view' }]);

// 查询
const searchInfo: Ref<any> = ref({});

// 弹框
const dialog: Ref<any> = ref({ title: '答题信息', show: false, type: '1' });
const info: Ref<any> = ref({ answer: [] });

// 请求
onMounted(async () => {
  loading.value = true;
  await search({ skip, limit });
  loading.value = false;
});
const search = async (e: { skip: number; limit: number }) => {
  let id = route.query.id;
  const info = { skip: e.skip, limit: e.limit, ...searchInfo.value, questionnaire_id: id };
  const res: IQueryResult = await answertAxios.query(info);
  if (res.errcode == '0') {
    list.value = res.data;
    total.value = res.total;
  }
};
const toSearch = (query) => {
  searchInfo.value = query;
  search({ skip, limit });
};

const toView = (data) => {
  info.value = data;
  dialog.value = { title: '答题信息', show: true, type: '1' };
};
const getDict = (data) => {
  if (_.isArray(data)) {
    return data.join(',');
  } else {
    return data;
  }
};
// 关闭弹框
const toClose = () => {
  info.value = {};
  search({ skip, limit });
  dialog.value = { title: '答题信息', show: false, type: '1' };
};
</script>
<style scoped lang="scss">
.dialog_one {
  .list {
    margin: 0 0 10px 0;
    .list_1 {
      margin: 0 0 10px 0;
      span {
        margin: 0 0 10px 0;
        font-weight: bold;
        font-size: 16px;
        font-family: monospace;
      }
    }
    .list_2 {
      color: #ff0000;
    }
  }
}
</style>