From 1b600c85bd83b0c0ca37e57c214d7614031aab54 Mon Sep 17 00:00:00 2001
From: soul2 <1052986332@qq.com>
Date: Sat, 21 Sep 2024 20:17:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/answer.js            |  10 ++
 src/api/questionnaire.js     |   7 +
 src/router/index.js          |  13 ++
 src/settings.js              |   1 +
 src/views/answer/details.vue |  90 ++++++++++++
 src/views/answer/index.vue   | 274 +++++++++++++++++++++++++++++++++++
 src/views/qr/edit.vue        |  50 ++++++-
 src/views/qr/index.vue       |  41 +++++-
 8 files changed, 478 insertions(+), 8 deletions(-)
 create mode 100644 src/api/answer.js
 create mode 100644 src/views/answer/details.vue
 create mode 100644 src/views/answer/index.vue

diff --git a/src/api/answer.js b/src/api/answer.js
new file mode 100644
index 0000000..78aab76
--- /dev/null
+++ b/src/api/answer.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+let prefix = 'answer'
+
+export function page(data) {
+  return request({
+    url: `/${prefix}/page`,
+    data
+  })
+}
diff --git a/src/api/questionnaire.js b/src/api/questionnaire.js
index dae86ff..1101c19 100644
--- a/src/api/questionnaire.js
+++ b/src/api/questionnaire.js
@@ -36,3 +36,10 @@ export function ref(data) {
     data
   })
 }
+
+export function options(data) {
+  return request({
+    url: `/${prefix}/options`,
+    data
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index df775d5..daa3031 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -106,6 +106,19 @@ export const constantRoutes = [
     ]
   },
 
+  {
+    path: '/answer',
+    component: Layout,
+    children: [
+      {
+        path: '',
+        name: 'Answer',
+        component: () => import('@/views/answer/index'),
+        meta: { title: '答卷', icon: 'el-icon-edit-outline' }
+      }
+    ]
+  },
+
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]
diff --git a/src/settings.js b/src/settings.js
index 3efc555..7e76277 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -13,4 +13,5 @@ module.exports = {
    * @description Whether show the logo in sidebar
    */
   sidebarLogo: false
+
 }
diff --git a/src/views/answer/details.vue b/src/views/answer/details.vue
new file mode 100644
index 0000000..9d8912c
--- /dev/null
+++ b/src/views/answer/details.vue
@@ -0,0 +1,90 @@
+<template>
+  <el-dialog ref="dialogForm" width="45%" :title="title" :visible.sync="visible" @close="closeDialog">
+    <div class="details">
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="答题者">{{ row.respondent || '无数据' }}</el-descriptions-item>
+        <el-descriptions-item label="提交时间">{{ row.submitTime || '无数据' }}</el-descriptions-item>
+      </el-descriptions>
+
+      <!--      <el-descriptions :column="1" size="small" border>-->
+      <!--        <el-descriptions-item v-for="(e,i) in row.details">-->
+      <!--            <template slot="label">-->
+      <!--              <el-tag v-if="e.type === 0" size="mini">单选</el-tag>-->
+      <!--              <el-tag v-if="e.type === 1" size="mini">多选</el-tag>-->
+      <!--              <el-tag v-if="e.type === 2" size="mini">文字</el-tag>-->
+      <!--              {{ e.title }}-->
+      <!--              {{ e.content }}-->
+      <!--            </template>-->
+      <!--            {{ e.answerContent }}-->
+      <!--        </el-descriptions-item>-->
+      <!--      </el-descriptions>-->
+      <el-card shadow="never" style="margin-top: 3px">
+        <div v-for="(e,i) in row.details">
+          <el-row style="margin-top: 5px">
+            <div style="margin-right: 8px;display:inline-block;">
+              <el-tag v-if="e.type === 0" size="small">单选</el-tag>
+              <el-tag v-if="e.type === 1" size="small">多选</el-tag>
+              <el-tag v-if="e.type === 2" size="small">文字</el-tag>
+            </div>
+            <span style="color:#535bf2;margin-right: 15px;display:inline-block;">{{ e.title }}</span>
+            {{ e.content }}
+          </el-row>
+          <el-row style="margin-top: 12px; margin-bottom: 25px;">
+            <el-tag size="small" type="success">答题内容:</el-tag>
+            {{ e.answerContent }}
+          </el-row>
+        </div>
+      </el-card>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'DetailsDialog',
+  props: {
+    row: {
+      type: Object,
+      require: true
+    },
+    show: {
+      type: Boolean,
+      default: () => false
+    }
+  },
+  components: {},
+  data() {
+    return {
+      visible: this.show
+    }
+  },
+  computed: {
+    title() {
+      return this.row.qnName
+    }
+  },
+  watch: {
+    visible() {
+      this.$emit('update:show', false)
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+    console.log('row -> ', this.row)
+  },
+  methods: {
+    closeDialog() {
+      // 关闭
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/answer/index.vue b/src/views/answer/index.vue
new file mode 100644
index 0000000..0c7ca0e
--- /dev/null
+++ b/src/views/answer/index.vue
@@ -0,0 +1,274 @@
+<template>
+  <div class="app-container full-height">
+    <!-- 查询条件 -->
+    <el-card class="filter-container" shadow="never">
+      <el-form label-width="110px" :inline="true" :model="condition" @submit.native.prevent
+               @keyup.enter.native="conditionQuery"
+      >
+        <!--查询条件-->
+        <el-form-item label="问卷" prop="name">
+          <el-select v-model="condition.qnId" placeholder="请选择" clearable>
+            <el-option
+              v-for="item in qnOptions"
+              :key="item.code"
+              :label="item.label"
+              :value="item.code"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <!--        <el-form-item label="" prop="">-->
+        <!--          <el-input v-model="condition." placeholder="请输入" />-->
+        <!--        </el-form-item>-->
+        <!--End-->
+        <el-form-item>
+          <el-button type="primary" @click="conditionQuery">查询</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleResetCondition">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 表格操作 -->
+    <el-card class="table-operate-container" shadow="never">
+      <el-button size="mini" icon="el-icon-plus" type="primary" plain @click="addRow">添加</el-button>
+      <el-button :disabled="!hasSelection" type="danger" size="mini" @click="removeBatchRows">批量删除
+      </el-button>
+    </el-card>
+
+    <!-- 表格 -->
+    <div ref="tableContainer" class="table-container">
+      <!-- 表格主体 -->
+      <el-table ref="listTable" v-loading="selectLoading" :max-height="tableMaxHeight" :data="tableData" border
+                style="width: 100%" @row-click="handleRowClick" @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="40" align="center"/>
+        <el-table-column type="index" label="序号" width="60" align="center"/>
+        <el-table-column property="qnName" label="问卷" min-width="25%" align="center"/>
+        <el-table-column property="respondent" label="答题者" min-width="25%" align="center"/>
+        <el-table-column property="submitTime" label="提交时间" width="200" align="center"/>
+        <!--<el-table-column property="" label="" min-width="25%" align="center" />-->
+        <!--<el-table-column property="" label="" width="200" align="center" />-->
+        <el-table-column label="操作" width="180" align="center">
+          <template v-slot="scope">
+            <el-button size="mini" @click.stop="handleLookDetails(scope.row)">详细答卷</el-button>
+            <!--            <el-button size="mini" @click.stop="handleEdit(scope.row)">编辑</el-button>-->
+            <!--            <el-button type="danger" plain size="mini" @click.stop="handleRemove(scope.row)">删除</el-button>-->
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- End 表格主体 -->
+
+      <!-- 表格页码控件 -->
+      <div class="pagination-container">
+        <el-pagination background layout="total, sizes, prev, pager, next,jumper"
+                       :current-page.sync="condition.pageNumber" :page-size.sync="condition.pageSize"
+                       :page-sizes="[10, 20, 30, 50, 100]" :total="total" @size-change="conditionQuery"
+                       @current-change="conditionQuery"
+        />
+      </div>
+      <!-- End 表格页码控件 -->
+    </div>
+    <!-- End 表格 -->
+
+    <details-dialog v-if="detailsDialog.show" :row="detailsDialog.row" :show.sync="detailsDialog.show"/>
+
+    <!-- 编辑弹窗 -->
+    <!-- <edit-dialog v-if="showDialog" :row="editRowData" :show.sync="showDialog" :is-add="isAddDialog"
+                 @saved="conditionQuery"
+    /> -->
+
+  </div>
+</template>
+
+<script>
+
+/**
+ * @version 2.0
+ */
+
+/* Base */
+import { options } from '@/api/questionnaire'
+import { page } from '@/api/answer'
+import DetailsDialog from '@/views/answer/details'
+
+const default_condition = {
+  pageNumber: 1,
+  pageSize: 10
+}
+/* ↑ Base */
+export default {
+  name: 'Answer',
+  components: { DetailsDialog },
+  data() {
+    return {
+      detailsDialog: {
+        show: false,
+        row: null
+      },
+      qnOptionsList: [],
+      /* Edit Dialog */
+      editRowData: null,
+      showDialog: false,
+      isAddDialog: null,
+      /* ↑ Edit Dialog */
+      /* Base */
+      condition: JSON.parse(JSON.stringify(default_condition)),
+      tableData: [],
+      total: null,
+      selectLoading: false,
+      tableMaxHeight: null,
+      multipleSelection: []
+      /* ↑ Base */
+    }
+  },
+  computed: {
+    hasSelection() {
+      return this.multipleSelection.length > 1
+    },
+    qnOptions() {
+      return this.qnOptionsList
+    }
+  },
+  watch: {},
+  created() {
+
+  },
+  mounted() {
+    /* Base */
+    this.resizeTable()
+    window.onresize = () => {
+      return (() => {
+        this.resizeTable()
+      })()
+    }
+    /* ↑ Base */
+    this.conditionQuery()
+    this.queryQnOptions()
+  },
+  methods: {
+    queryQnOptions() {
+      options({ status: -1 }).then(r => {
+        this.qnOptionsList = r.data
+      }).catch(err => {
+        console.log('err -> ', err)
+      })
+    },
+    handleLookDetails(row) {
+      // open dialog look details
+      this.detailsDialog.show = true
+      this.detailsDialog.row = row
+    },
+    /* Base */
+    addRow() {
+      // 表格操作 - 添加
+      this.isAddDialog = true
+      this.editRowData = null
+      this.showDialog = true
+    },
+    handleRemove(row) {
+      // 表格 - 操作列 - 删除
+      let title = '确定要删除吗? 该操作可能无法恢复!'
+      this.$confirm(title, '提示', {
+        type: 'warning'
+      }).then(() => {
+        const loading = this.$loading({
+          background: this.$elementGlobal.loadingBackground
+        })
+        remove([row.id]).then(r => { //todo remove函数未导入
+          loading.close()
+          if (r.data) {
+            this.$message({
+              type: 'success',
+              message: '操作成功!'
+            })
+          } else {
+            this.$message({
+              type: 'error',
+              message: '操作失败!'
+            })
+          }
+          this.conditionQuery()
+        }).catch(e => {
+          loading.close()
+          console.log(e)
+        })
+      }).catch(() => {
+
+      })
+    },
+    removeBatchRows() {
+      // 表格操作 - 批量删除
+      const h = this.$createElement
+      this.$confirm(h('p', null, [
+        h('p', null, '确定要删除 ' + this.multipleSelection.length + ' 个吗?'),
+        h('p', { style: 'color: #f80' }, ' 该操作可能无法恢复!')
+      ]), '提示', {
+        type: 'warning'
+      }).then(() => {
+        const loading = this.$loading({
+          background: this.$elementGlobal.loadingBackground
+        })
+        remove(this.multipleSelection.map(e => e.id)).then(r => { //todo remove函数未导入
+          loading.close()
+          if (r.data) {
+            this.$message({
+              type: 'success',
+              message: '操作成功!'
+            })
+          } else {
+            this.$message({
+              type: 'error',
+              message: '操作失败!'
+            })
+          }
+          this.conditionQuery()
+        }).catch(e => {
+          loading.close()
+          console.log(e)
+        })
+      }).catch(() => {
+
+      })
+    },
+    // 表格 - 编辑行
+    handleEdit(row) {
+      this.isAddDialog = false
+      this.showDialog = true
+      this.editRowData = row
+    },
+    // 表格 - 查询表数据
+    conditionQuery() {
+      this.selectLoading = true
+      page(this.condition).then(r => {
+        this.selectLoading = false
+        this.tableData = r.data.rows
+        this.total = r.data.total
+      }).catch(e => {
+        this.selectLoading = false
+        console.log('query error -> ', e)
+      })
+    },
+    resizeTable() {
+      this.tableMaxHeight = window.innerHeight - (this.$refs.tableContainer.offsetTop + 100)
+    },
+    // 重置表格查询条件
+    handleResetCondition() {
+      this.condition = Object.assign({}, default_condition)
+    },
+    // [事件]表格 - 点击行
+    handleRowClick(row) {
+      this.$refs.listTable.toggleRowSelection(row)
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    }
+    /* ↑ Base */
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/qr/edit.vue b/src/views/qr/edit.vue
index 347dbb2..7c8c390 100644
--- a/src/views/qr/edit.vue
+++ b/src/views/qr/edit.vue
@@ -8,8 +8,29 @@
         </el-col>
       </el-form-item>
       <el-form-item label="二维码Url" prop="qrUrl">
-        <el-col :span="18">
-          <el-input v-model="edit.qrUrl"/>
+        <el-col :span="9">
+          <el-radio-group size="mini" v-model="qrUrlTypeValue">
+            <el-radio-button size="mini" :label="0">指定问卷</el-radio-button>
+            <el-radio-button size="mini" :label="1">外部网址</el-radio-button>
+          </el-radio-group>
+        </el-col>
+        <el-col :span="12">
+          <div v-if="qrUrlType === 1">
+            <el-input v-model="edit.qrUrl">
+              <template slot="prepend">http://</template>
+            </el-input>
+          </div>
+          <div v-if="qrUrlType === 0">
+            <el-select v-model="edit.qnId" placeholder="请选择" clearable>
+              <el-option
+                v-for="item in qnOptions"
+                :key="item.code"
+                :label="item.label"
+                :value="item.code"
+              >
+              </el-option>
+            </el-select>
+          </div>
         </el-col>
       </el-form-item>
       <el-form-item label="备注" prop="tip">
@@ -27,6 +48,7 @@
 
 <script>
 import { saveOrUpdate } from '@/api/qr'
+import { options } from '@/api/questionnaire'
 
 export default {
   name: 'EditDialog',
@@ -43,6 +65,8 @@ export default {
   components: {},
   data() {
     return {
+      qnOptionsList: [],
+      qrUrlTypeValue: 0, //0 = 'qn', The other is the 1 = 'url'
       edit: { id: null },
       visible: this.show,
       rules: {
@@ -53,6 +77,12 @@ export default {
   computed: {
     title() {
       return (this.edit.id === null ? '新增' : '编辑')
+    },
+    qnOptions() {
+      return this.qnOptionsList
+    },
+    qrUrlType() {
+      return this.qrUrlTypeValue
     }
   },
   watch: {
@@ -68,12 +98,28 @@ export default {
       this.edit = JSON.parse(JSON.stringify(this.row))
       // console.log(this.edit)
     }
+    this.queryQnOptions()
   },
   methods: {
+    queryQnOptions() {
+      options({ status: -1 }).then(r => {
+        this.qnOptionsList = r.data
+      }).catch(err => {
+        console.log('err -> ', err)
+      })
+    },
     closeDialog() {
       // 关闭
     },
     beforeSave() {
+      if (this.qrUrlType === 0) {
+        this.edit.qrUrl = ''
+        this.edit.toUrl = ''
+      }
+      if (this.qrUrlType === 1) {
+        this.edit.qnId = ''
+        this.edit.toUrl = this.edit.qrUrl
+      }
       if (this.row && this.row.qrUrl != null && this.row.qrUrl !== this.edit.qrUrl) {
         this.$confirm('你更改了二维码Url,这可能带来一些意外的结果, 是否继续?', '警告', {
           confirmButtonText: '确定',
diff --git a/src/views/qr/index.vue b/src/views/qr/index.vue
index 1097a09..37fea7e 100644
--- a/src/views/qr/index.vue
+++ b/src/views/qr/index.vue
@@ -40,8 +40,25 @@
       >
         <el-table-column type="selection" width="40" align="center"/>
         <el-table-column type="index" label="序号" width="60" align="center"/>
-        <el-table-column property="toUrl" show-overflow-tooltip label="指向Url" width="230" align="center"/>
-        <el-table-column property="qrUrl" show-overflow-tooltip label="二维码Url" width="230" align="center"/>
+        <el-table-column property="toUrl" show-overflow-tooltip label="指向Url" width="230" align="center">
+          <template v-slot="scope">
+            <el-link :href="`http://${qrToPrefix}?qr=${scope.row.id}`" target="_blank">
+              {{ scope.row.toUrl || '立即跳转' }}
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column property="qrUrl" show-overflow-tooltip label="二维码Url" width="230" align="center">
+          <template slot-scope="scope">
+            <div v-if="scope.row.qrUrl && scope.row.qrUrl.trim().length > 0">
+              {{ scope.row.qrUrl }}
+            </div>
+            <div v-else>
+              <el-link :href="`http://${qrToPrefix}?qr=${scope.row.id}`" target="_blank">
+                {{ scope.row.qnName }}
+              </el-link>
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column property="tip" show-overflow-tooltip label="备注" min-width="25%" align="center"/>
         <el-table-column property="status" label="状态" width="90" align="center">
           <template slot-scope="scope">
@@ -64,7 +81,7 @@
         <!--<el-table-column property="" label="" width="200" align="center" />-->
         <el-table-column label="操作" width="250" align="center">
           <template slot-scope="scope">
-            <el-button size="mini" @click="buildQR(scope.row.toUrl)">二维码
+            <el-button size="mini" @click="buildQR(scope.row)">二维码
             </el-button>
             <el-button size="mini" @click.stop="handleEdit(scope.row)">编辑</el-button>
             <el-button type="danger" plain size="mini" @click.stop="handleRemove(scope.row)">删除</el-button>
@@ -112,6 +129,7 @@ const default_condition = {
   pageNumber: 1,
   pageSize: 10
 }
+
 /* ↑ Base */
 export default {
   name: 'QR',
@@ -138,8 +156,14 @@ export default {
   computed: {
     hasSelection() {
       return this.multipleSelection.length > 1
+    },
+    qrToPrefix() {
+      if (process.env.NODE_ENV === 'development') {
+        return 'localhost:7620'
+      } else {
+        return 'test.soul2.cn/thli/jyjc/mobile'
+      }
     }
-
   },
   watch: {},
   created() {
@@ -166,9 +190,13 @@ export default {
     formatterStatus(status) {
       return status === 0 ? '禁用' : '启用'
     },
-    buildQR(url) {
+    buildQR(row) {
       this.showQr = true
-      this.QrUrl = url
+      if (row.qrUrl && row.qrUrl.trim().length > 0) {
+        this.QrUrl = row.qrUrl
+      } else {
+        this.QrUrl = `${this.qrToPrefix}?qr=${row.id}`
+      }
     },
     handleStatusChange(row) {
       // 保存点击之后v-modeld的值(1，0) ，类型不同，不能生效
@@ -279,6 +307,7 @@ export default {
         this.selectLoading = false
         this.tableData = r.data.rows
         this.total = r.data.total
+        console.log('r.data.rows -> ', r.data.rows)
       }).catch(e => {
         this.selectLoading = false
         console.log('query error -> ', e)