Newer
Older
KaiFengPC / src / views / publicService / popular / knowledge.vue
@zhangdeliang zhangdeliang on 23 May 7 KB 初始化项目
  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="title">
  7. <el-input v-model="queryParams.title" placeholder="请输入" clearable @keyup.enter="handleQuery" />
  8. </el-form-item>
  9. <el-form-item label="知识类别" prop="typeId">
  10. <el-select v-model="queryParams.typeId" placeholder="请选择" clearable>
  11. <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id" />
  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 type="success" 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-hasPermi="['floodSys:jing:add']">新增</el-button>
  23. </el-col>
  24. <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
  25. </el-row>
  26. <!-- 表格 -->
  27. <el-table v-loading="tableLoading" :data="tableData" max-height="650">
  28. <el-table-column label="知识名称" prop="title" />
  29. <el-table-column label="缩略图" prop="coverPhotosFileList">
  30. <template #default="scope">
  31. <ImagePreview
  32. :src="scope.row.coverPhotosFileList.length > 0 ? scope.row.coverPhotosFileList[0].url : ''"
  33. :width="50"
  34. :height="50"
  35. ></ImagePreview>
  36. </template>
  37. </el-table-column>
  38. <el-table-column label="知识类别" prop="typeName"></el-table-column>
  39. <el-table-column label="简介" prop="degist" />
  40. <el-table-column label="创建人" prop="createBy" />
  41. <el-table-column label="创建时间" prop="createTime" />
  42. <el-table-column label="操作" width="160" class-name="small-padding fixed-width">
  43. <template #default="scope">
  44. <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['floodSys:jing:edit']">修改</el-button>
  45. <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['floodSys:jing:remove']">
  46. 删除
  47. </el-button>
  48. </template>
  49. </el-table-column>
  50. </el-table>
  51. <!-- 分页 -->
  52. <pagination
  53. v-show="total > 0"
  54. :total="total"
  55. v-model:page="queryParams.pageNum"
  56. v-model:limit="queryParams.pageSize"
  57. @pagination="getDataList"
  58. />
  59.  
  60. <!-- 添加或修改弹窗 -->
  61. <el-dialog :title="dialogTitle" v-model="dialogShow" width="900px" append-to-body>
  62. <el-form ref="formRef" :model="formData" :rules="rulesForm" label-width="90px" class="publicForm">
  63. <el-form-item label="知识名称" prop="title">
  64. <el-input v-model="formData.title" controls-position="right" />
  65. </el-form-item>
  66. <el-form-item label="知识类别" prop="typeId">
  67. <el-select v-model="formData.typeId" placeholder="请选择" clearable>
  68. <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id" />
  69. </el-select>
  70. </el-form-item>
  71. <el-form-item label="缩略图" prop="coverPhotosFileList">
  72. <ImageFileUpload
  73. :limit="1"
  74. :saveFileArr="formData.coverPhotosFileList"
  75. :listType="'picture-card'"
  76. :refType="'public_science_knowledge_config'"
  77. :refField="'coverPhotos'"
  78. ></ImageFileUpload>
  79. </el-form-item>
  80. <el-form-item label="简介" prop="degist">
  81. <el-input type="textarea" v-model="formData.degist" controls-position="right" />
  82. </el-form-item>
  83. <el-form-item label="文章内容" prop="content">
  84. <WangEditor :modelValue="formData.content" :isToolbar="1" @update:modelValue="getWEditVal"></WangEditor>
  85. </el-form-item>
  86. </el-form>
  87. <template #footer>
  88. <div class="dialog-footer">
  89. <el-button type="info" @click="cancelForm">取 消</el-button>
  90. <el-button type="primary" @click="submitForm">确 定</el-button>
  91. </div>
  92. </template>
  93. </el-dialog>
  94. </div>
  95. </template>
  96.  
  97. <script setup name="科普知识">
  98. import { knowledgePage, knowledgeAdd, knowledgeDel, knowledgeDetail, knowledgeEdit, knowledgeTypeList } from '@/api/publicService/index';
  99. import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
  100. import WangEditor from '@/components/WangEditor/index.vue'; //富文本编辑器
  101.  
  102. const { proxy } = getCurrentInstance();
  103.  
  104. const tableData = ref([]);
  105. const tableLoading = ref(true);
  106. const total = ref(0);
  107. const dialogShow = ref(false);
  108. const dialogTitle = ref('');
  109. const showSearch = ref(true);
  110.  
  111. const allData = reactive({
  112. formData: {
  113. coverPhotosFileList: [],
  114. content: '',
  115. degist: '',
  116. title: '',
  117. typeId: '',
  118. },
  119. queryParams: {
  120. pageNum: 1,
  121. pageSize: 10,
  122. title: undefined,
  123. typeId: undefined,
  124. },
  125. rulesForm: {
  126. postName: [{ required: true, message: '请输入', trigger: 'blur' }],
  127. degist: [{ required: true, message: '请输入', trigger: 'blur' }],
  128. typeId: [{ required: true, message: '请选择', trigger: 'change' }],
  129. },
  130. });
  131. const { queryParams, formData, rulesForm } = toRefs(allData);
  132. const typeList = ref([]);
  133.  
  134. /** 获取查询数据列表 */
  135. function getDataList() {
  136. tableLoading.value = true;
  137. knowledgePage(queryParams.value).then(response => {
  138. tableData.value = response.data;
  139. total.value = response.total;
  140. tableLoading.value = false;
  141. });
  142. }
  143. /** 取消按钮 */
  144. function cancelForm() {
  145. dialogShow.value = false;
  146. }
  147. /** 搜索按钮操作 */
  148. function handleQuery() {
  149. queryParams.value.pageNum = 1;
  150. getDataList();
  151. }
  152. /** 重置按钮操作 */
  153. function resetQuery() {
  154. proxy.resetForm('queryRef');
  155. handleQuery();
  156. }
  157. /** 新增按钮操作 */
  158. function handleAdd() {
  159. proxy.resetForm('formRef'); //清空表单
  160. formData.value.content = ' ';
  161. dialogShow.value = true;
  162. dialogTitle.value = '添加科普知识';
  163. }
  164. /** 修改按钮操作 */
  165. function handleUpdate(row) {
  166. const postId = row.id;
  167. knowledgeDetail(postId).then(response => {
  168. dialogShow.value = true;
  169. dialogTitle.value = '修改科普知识';
  170. nextTick(() => {
  171. formData.value = response.data;
  172. });
  173. });
  174. }
  175. /** 提交按钮 */
  176. function submitForm() {
  177. proxy.$refs['formRef'].validate(valid => {
  178. if (valid) {
  179. if (dialogTitle.value == '修改科普知识') {
  180. knowledgeEdit(formData.value).then(response => {
  181. proxy.$modal.msgSuccess('修改成功');
  182. dialogShow.value = false;
  183. getDataList();
  184. });
  185. } else {
  186. if (formData.value.id) delete formData.value.id;
  187. knowledgeAdd(formData.value).then(response => {
  188. proxy.$modal.msgSuccess('新增成功');
  189. dialogShow.value = false;
  190. getDataList();
  191. });
  192. }
  193. }
  194. });
  195. }
  196. /** 删除按钮操作 */
  197. function handleDelete(row) {
  198. const postIds = row.id;
  199. proxy.$modal
  200. .confirm('是否确认删除该数据项?')
  201. .then(function () {
  202. return knowledgeDel(postIds);
  203. })
  204. .then(() => {
  205. getDataList();
  206. proxy.$modal.msgSuccess('删除成功');
  207. })
  208. .catch(() => {});
  209. }
  210. // 富文本编辑器内容获取
  211. function getWEditVal(val) {
  212. formData.value.content = val;
  213. }
  214. // 获取知识类别
  215. function getTypeData() {
  216. knowledgeTypeList().then(res => {
  217. typeList.value = res.data;
  218. });
  219. }
  220.  
  221. onMounted(() => {
  222. getTypeData();
  223. getDataList();
  224. });
  225. </script>