Newer
Older
KaiFengPC / src / views / publicService / quesNaire.vue
@zhangdeliang zhangdeliang on 3 Sep 13 KB update
  1. <template>
  2. <!-- 排水防涝子系统 公众服务 问卷调查-->
  3. <div class="publicContainer">
  4. <!-- 搜索区域 -->
  5. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
  6. <!-- <el-form-item label="问卷调查名称" prop="topicName">
  7. <el-input v-model="queryParams.topicName" placeholder="请输入" clearable @keyup.enter="handleQuery" />
  8. </el-form-item> -->
  9. <!-- <el-form-item label="调查状态" prop="ifStart">
  10. <el-select v-model="queryParams.ifStart" placeholder="请选择" clearable>
  11. <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
  12. </el-select>
  13. </el-form-item> -->
  14. <el-form-item>
  15. <!-- <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  16. <el-button icon="Refresh" @click="resetQuery">重置</el-button> -->
  17. </el-form-item>
  18. </el-form>
  19. <!-- 按钮区域 -->
  20. <el-row :gutter="10" class="mb8">
  21. <el-col :span="1.5">
  22. <el-button type="primary" plain icon="Plus" @click="handleAdd" v-if="tableData.length == '' || allData.ifStartQy == false"
  23. >新增</el-button
  24. >
  25. </el-col>
  26. <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
  27. </el-row>
  28. <!-- 表格 -->
  29. <el-table v-loading="tableLoading" :data="tableData" max-height="700">
  30. <el-table-column label="调查问卷调查名称" prop="topicName" />
  31. <el-table-column label="问卷状态" prop="ifStart">
  32. <template #default="scope">
  33. <span :class="scope.row.ifStart == 1 ? 'green' : 'red'">{{ scope.row.ifStart == 1 ? '启用' : '未启用' }}</span>
  34. </template>
  35. </el-table-column>
  36. <el-table-column label="创建时间" prop="createTime" />
  37. <el-table-column label="操作" width="260" class-name="small-padding fixed-width">
  38. <template #default="scope">
  39. <el-button
  40. type="primary"
  41. icon="Edit"
  42. @click="handleUpdate(scope.row)"
  43. v-if="scope.row.ifStart == 0 && scope.row.ifStart != 'ended'"
  44. >
  45. 修改
  46. </el-button>
  47. <el-button
  48. type="danger"
  49. icon="Delete"
  50. @click="handleDelete(scope.row)"
  51. v-if="scope.row.ifStart == 0 && scope.row.ifStart != 'ended'"
  52. >
  53. 删除
  54. </el-button>
  55. <el-button type="warning" @click="handleCount(scope.row)" v-if="scope.row.ifStart == 1 || allData.ifStartQy == true">
  56. 满意度统计
  57. </el-button>
  58. </template>
  59. </el-table-column>
  60. </el-table>
  61. <!-- 分页 -->
  62. <pagination
  63. v-show="total > 0"
  64. :total="total"
  65. v-model:page="queryParams.pageNum"
  66. v-model:limit="queryParams.pageSize"
  67. @pagination="getDataList"
  68. />
  69.  
  70. <!-- 添加或修改弹窗 -->
  71. <el-dialog :title="dialogTitle" v-model="dialogShow" width="600px" append-to-body>
  72. <el-form ref="formRef" :model="formData" :rules="rulesForm" label-width="120px" class="publicForm">
  73. <el-form-item label="问卷调查名称" prop="topicName">
  74. <el-input v-model="formData.topicName" />
  75. </el-form-item>
  76. <!-- <el-form-item label="年份选择" prop="year">
  77. <el-date-picker type="year" v-model="formData.year" value-format="YYYY" placeholder="请选择日期"> </el-date-picker>
  78. </el-form-item> -->
  79. <el-form-item label="问卷状态" prop="ifStart">
  80. <el-radio-group v-model="formData.ifStart">
  81. <el-radio :label="1">启用</el-radio>
  82. <el-radio :label="0">未启用</el-radio>
  83. </el-radio-group>
  84. </el-form-item>
  85. <!-- <el-form-item label="问卷介绍" prop="introduce">
  86. <el-input type="textarea" v-model="formData.introduce" />
  87. </el-form-item> -->
  88. <el-divider />
  89. <el-button type="primary" plain icon="Plus" @click="addQues">新增标题内容</el-button>
  90. <el-table :data="formData.problemConfigList" style="margin-top: 10px" max-height="300">
  91. <el-table-column label="问题名称" prop="problemName" />
  92. <el-table-column label="问题类型" prop="problemType">
  93. <template #default="scope">
  94. <dict-tag :options="typeList" :value="scope.row.problemType" />
  95. </template>
  96. </el-table-column>
  97. <el-table-column label="操作" width="240" class-name="small-padding fixed-width">
  98. <template #default="scope">
  99. <el-button type="primary" icon="Edit" @click="changeQues(scope.row)"> 修改 </el-button>
  100. <el-button type="danger" icon="Delete" @click="deleteQues(scope.row)"> 删除 </el-button>
  101. </template>
  102. </el-table-column>
  103. </el-table>
  104. </el-form>
  105. <template #footer>
  106. <div class="dialog-footer">
  107. <el-button type="info" @click="cancelForm">取 消</el-button>
  108. <el-button type="primary" @click="submitForm">确 定</el-button>
  109. </div>
  110. </template>
  111. </el-dialog>
  112. <!-- 问题答案编辑 -->
  113. <el-dialog :title="dialogTitleAns" v-model="dialogShowAns" width="500px" append-to-body>
  114. <el-form ref="formRefAns" :model="formDataAns" :rules="rulesFormAns" label-width="80px" class="publicForm">
  115. <el-form-item label="问题名称" prop="problemName">
  116. <el-input v-model="formDataAns.problemName" />
  117. </el-form-item>
  118. <el-form-item label="满分" prop="fullScore">
  119. <el-input v-model="formDataAns.fullScore" placeholder="分值" />
  120. </el-form-item>
  121. <el-form-item label="问题类型" prop="problemType">
  122. <el-select v-model="formDataAns.problemType" placeholder="请选择">
  123. <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
  124. </el-select>
  125. </el-form-item>
  126. <el-divider />
  127. <el-button type="primary" plain icon="Plus" @click="addAnswer">新增问题答案</el-button>
  128. <!-- 批量新增 可新增区域 -->
  129. <el-table :data="formDataAns.problemOptionList" style="margin-top: 10px">
  130. <el-table-column label="问题选项" prop="optionName">
  131. <template #default="scope">
  132. <el-input v-model="scope.row.optionName" />
  133. </template>
  134. </el-table-column>
  135. <el-table-column label="分数" prop="score">
  136. <template #default="scope">
  137. <el-input v-model="scope.row.score" placeholder="分值" />
  138. </template>
  139. </el-table-column>
  140. <el-table-column label="操作" width="160" class-name="small-padding fixed-width">
  141. <template #default="scope">
  142. <el-button type="danger" icon="Delete" @click="deleteAnswer(scope.row)"> 删除 </el-button>
  143. </template>
  144. </el-table-column>
  145. </el-table>
  146. </el-form>
  147. <template #footer>
  148. <div class="dialog-footer">
  149. <el-button type="info" @click="sureAnswer">确定</el-button>
  150. </div>
  151. </template>
  152. </el-dialog>
  153. <!-- 满意度统计 -->
  154. <el-dialog title="满意度统计" v-model="dialogCount" width="1200px" append-to-body>
  155. <!-- <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['floodSys:paikou:export']">导出</el-button> -->
  156. <!-- <el-divider /> -->
  157. <div class="satisfied">
  158. <div class="part" v-for="(item, index) in tableDataCount" :key="item.id">
  159. <p>
  160. <span>{{ index + 1 }},题目名称:{{ item.problemName }},</span>
  161. <span> 题目类型:{{ item.problemType == 'radio' ? '单选' : item.problemType == 'answers' ? '简答题' : '--' }} </span>
  162. <span>,本题有效填写人次:{{ item.fillTimes || 0 }}</span>
  163. </p>
  164. <el-table :data="item.problemOptionList">
  165. <el-table-column label="选项名称" prop="optionName" />
  166. <el-table-column label="问题选项填报次数" prop="optionTimes" />
  167. <el-table-column label="问题选项填报百分比" prop="percentage" />
  168. </el-table>
  169. </div>
  170. </div>
  171. </el-dialog>
  172. </div>
  173. </template>
  174.  
  175. <script setup name="问卷调查">
  176. import { quesNairePage, quesNaireAdd, quesNaireDel, quesNaireDetail, quesNaireEdit, quesNaireCount } from '@/api/publicService/index';
  177.  
  178. const { proxy } = getCurrentInstance();
  179.  
  180. const tableData = ref([]);
  181. const tableLoading = ref(true);
  182. const total = ref(0);
  183. const dialogShow = ref(false);
  184. const dialogTitle = ref('');
  185. const showSearch = ref(true);
  186. const dialogCount = ref(false);
  187. const tableDataCount = ref([]);
  188. const dialogTitleAns = ref('');
  189. const dialogShowAns = ref(false);
  190.  
  191. const allData = reactive({
  192. ifStartQy: true,
  193. isAddData: 0,
  194. queryParams: {
  195. pageNum: 1,
  196. pageSize: 10,
  197. topicName: undefined,
  198. ifStart: undefined,
  199. },
  200. formData: {
  201. topicName: '',
  202. ifStart: 1,
  203. year: null,
  204. introduce: '',
  205. problemConfigList: [],
  206. },
  207. rulesForm: {
  208. topicName: [{ required: true, message: '请输入', trigger: 'blur' }],
  209. ifStart: [{ required: true, message: '请输入', trigger: 'change' }],
  210. year: [{ required: true, message: '请输入', trigger: 'change' }],
  211. },
  212. formDataAns: {
  213. problemType: '',
  214. problemName: '',
  215. fullScore: '100',
  216. questionnaireId: '',
  217. problemOptionList: [{ optionName: '', score: '', problemId: '' }],
  218. },
  219. rulesFormAns: {
  220. problemName: [{ required: true, message: '请输入', trigger: 'blur' }],
  221. fullScore: [{ required: true, message: '请输入', trigger: 'blur', type: 'number' }],
  222. problemType: [{ required: true, message: '请选择', trigger: 'change' }],
  223. },
  224. });
  225. const { queryParams, formData, rulesForm, formDataAns, rulesFormAns } = toRefs(allData);
  226. const statusList = ref([
  227. { value: 1, label: '启用' },
  228. // { value: 'executing', label: '执行中' },
  229. { value: 0, label: '未启用' },
  230. ]);
  231. const typeList = ref([
  232. { value: 'radio', label: '单选' },
  233. { value: 'answers', label: '简答题' },
  234. ]);
  235.  
  236. /** 获取搜索数据列表 */
  237. function getDataList() {
  238. tableLoading.value = true;
  239. quesNairePage(queryParams.value).then(response => {
  240. tableData.value = response.data;
  241. // response.data[0].ifStart = 1;
  242. let arr = response.data.filter(item => item.ifStart == 1);
  243. if (arr.length == 0) {
  244. // 未启用
  245. allData.ifStartQy = false;
  246. } else {
  247. // 启用
  248. allData.ifStartQy = true;
  249. }
  250. // console.log(allData.ifStartQy, 'allData.isAddData');
  251. total.value = response.total;
  252. tableLoading.value = false;
  253. });
  254. }
  255. /** 取消按钮 */
  256. function cancelForm() {
  257. dialogShow.value = false;
  258. }
  259. /** 搜索按钮操作 */
  260. function handleQuery() {
  261. queryParams.value.pageNum = 1;
  262. getDataList();
  263. }
  264. /** 重置按钮操作 */
  265. function resetQuery() {
  266. proxy.resetForm('queryRef');
  267. handleQuery();
  268. }
  269. /** 新增按钮操作 */
  270. function handleAdd() {
  271. proxy.resetForm('formRef'); //清空表单
  272. formData.value = {
  273. topicName: '',
  274. ifStart: 1,
  275. year: null,
  276. introduce: '',
  277. problemConfigList: [],
  278. };
  279. dialogShow.value = true;
  280. dialogTitle.value = '添加问卷调查';
  281. }
  282. /** 修改按钮操作 */
  283. function handleUpdate(row) {
  284. const postId = row.id;
  285. quesNaireDetail(postId).then(response => {
  286. dialogShow.value = true;
  287. dialogTitle.value = '修改问卷调查';
  288. nextTick(() => {
  289. formData.value = response.data;
  290. });
  291. });
  292. }
  293. /** 提交按钮 */
  294. function submitForm() {
  295. proxy.$refs['formRef'].validate(valid => {
  296. if (valid) {
  297. if (dialogTitle.value == '修改问卷调查') {
  298. quesNaireEdit(formData.value).then(response => {
  299. proxy.$modal.msgSuccess('修改成功');
  300. dialogShow.value = false;
  301. getDataList();
  302. });
  303. } else {
  304. quesNaireAdd(formData.value).then(response => {
  305. proxy.$modal.msgSuccess('新增成功');
  306. dialogShow.value = false;
  307. getDataList();
  308. });
  309. }
  310. }
  311. });
  312. }
  313. /** 删除按钮操作 */
  314. function handleDelete(row) {
  315. const postIds = row.id;
  316. proxy.$modal
  317. .confirm('是否确认删除该数据项?')
  318. .then(function () {
  319. return quesNaireDel(postIds);
  320. })
  321. .then(() => {
  322. getDataList();
  323. proxy.$modal.msgSuccess('删除成功');
  324. })
  325. .catch(() => {});
  326. }
  327. // 满意度统计
  328. function handleCount(row) {
  329. quesNaireCount(row.id).then(res => {
  330. tableDataCount.value = res.data.problemConfigList;
  331. dialogCount.value = true;
  332. });
  333. }
  334. /** 导出按钮操作 */
  335. function handleExport() {
  336. proxy.download(
  337. 'system/post/export',
  338. {
  339. ...queryParams.value,
  340. },
  341. `问卷调查满意度统计 ${new Date().getTime()}.xlsx`
  342. );
  343. }
  344. // 问题 新增
  345. const addQues = () => {
  346. dialogTitleAns.value = '新增问题答案';
  347. dialogShowAns.value = true;
  348. formDataAns.value = {
  349. problemType: '',
  350. problemName: '',
  351. fullScore: '100',
  352. questionnaireId: '',
  353. problemOptionList: [{ optionName: '', score: '', problemId: '' }],
  354. };
  355. };
  356. // 问题 修改
  357. function changeQues(row) {
  358. formDataAns.value = row;
  359. dialogTitleAns.value = '修改问题答案';
  360. dialogShowAns.value = true;
  361. }
  362. // 问题 删除
  363. function deleteQues(row) {
  364. formData.value.problemConfigList.splice(row, 1);
  365. }
  366.  
  367. // 新增问题答案
  368. function addAnswer() {
  369. formDataAns.value.problemOptionList.push({ optionName: '', score: '', problemId: '' });
  370. }
  371. // 删除问题答案
  372. const deleteAnswer = row => {
  373. formDataAns.value.problemOptionList.splice(row, 1);
  374. };
  375. // 问题答案编辑完成
  376. function sureAnswer() {
  377. if (dialogTitleAns.value == '新增问题答案') {
  378. formData.value.problemConfigList.push(formDataAns.value);
  379. } else {
  380. }
  381. dialogShowAns.value = false;
  382. }
  383. onMounted(() => {
  384. getDataList();
  385. });
  386. </script>
  387.  
  388. <style lang="scss">
  389. .satisfied {
  390. margin-bottom: 20px;
  391. max-height: 800px;
  392. overflow: auto;
  393. .part {
  394. p {
  395. display: flex;
  396. color: #c6c6c6;
  397. }
  398. .el-table {
  399. margin: 10px 0px;
  400. }
  401. }
  402. }
  403. </style>