Newer
Older
KaiFengPC / src / views / publicService / special.vue
@zhangdeliang zhangdeliang on 24 Oct 8 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="title">
  7. <el-input v-model="queryParams.title" placeholder="请输入培训宣传名称" clearable style="width: 180px" />
  8. </el-form-item>
  9.  
  10. <el-form-item label="年份">
  11. <el-date-picker
  12. type="year"
  13. v-model="queryParams.trainTime"
  14. value-format="YYYY"
  15. placeholder="请选择年"
  16. style="width: 100%"
  17. ></el-date-picker>
  18. </el-form-item>
  19.  
  20. <el-form-item>
  21. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  22. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  23. </el-form-item>
  24. </el-form>
  25. <!-- 按钮区域 -->
  26. <el-row :gutter="10" class="mb8">
  27. <el-col :span="1.5">
  28. <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
  29. </el-col>
  30. <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
  31. </el-row>
  32. <!-- 表格 -->
  33. <el-table v-loading="tableLoading" :data="tableData" max-height="650">
  34. <el-table-column label="序号" type="index" width="55" />
  35. <el-table-column label="培训日期" prop="trainTime" />
  36. <el-table-column label="培训地点" prop="address" />
  37. <el-table-column label="培训宣传名称" prop="title" width="400" />
  38. <el-table-column label="参加人员" prop="people" show-overflow-tooltip />
  39. <el-table-column label="培训内容" prop="content" width="400" show-overflow-tooltip />
  40. <el-table-column label="跳转链接" prop="linkUrl" />
  41. <el-table-column label="封面图" prop="filelist">
  42. <template #default="scope">
  43. <ImagePreview :src="scope.row.filelist.length > 0 ? scope.row.filelist[0].url : ''" :width="50" :height="50"></ImagePreview>
  44. </template>
  45. </el-table-column>
  46.  
  47. <el-table-column label="操作" width="160" class-name="small-padding fixed-width">
  48. <template #default="scope">
  49. <el-button link type="warning" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
  50. <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"> 删除 </el-button>
  51. </template>
  52. </el-table-column>
  53. </el-table>
  54. <!-- 分页 -->
  55. <pagination
  56. v-show="total > 0"
  57. :total="total"
  58. v-model:page="queryParams.pageNum"
  59. v-model:limit="queryParams.pageSize"
  60. @pagination="getDataList"
  61. />
  62.  
  63. <!-- 添加或修改弹窗 -->
  64. <el-dialog :title="dialogTitle" v-model="dialogShow" width="800px" append-to-body>
  65. <el-form ref="formRef" :model="formData" :rules="rulesForm" label-width="120px" class="publicForm">
  66. <el-row :gutter="20">
  67. <el-col :span="12">
  68. <el-form-item label="培训日期:" prop="trainTime">
  69. <el-date-picker type="date" v-model="formData.trainTime" value-format="YYYY-MM-DD" placeholder="请选择日期" />
  70. </el-form-item>
  71. </el-col>
  72. <el-col :span="12">
  73. <el-form-item label="培训地点:" prop="address">
  74. <el-input type="text" v-model="formData.address" placeholder="请输入培训地点" clearable style="width: 100%" />
  75. </el-form-item>
  76. </el-col>
  77. </el-row>
  78.  
  79. <el-row :gutter="20">
  80. <el-col :span="24">
  81. <el-form-item label="培训宣传名称:" prop="title">
  82. <el-input type="textarea" v-model="formData.title" placeholder="请输入培训宣传名称" clearable style="width: 100%" />
  83. </el-form-item>
  84. </el-col>
  85. </el-row>
  86.  
  87. <el-row :gutter="20">
  88. <el-col :span="24">
  89. <el-form-item label="参加人员:" prop="people">
  90. <el-input type="textarea" v-model="formData.people" placeholder="请输入参加人员" clearable style="width: 100%" />
  91. </el-form-item>
  92. </el-col>
  93. </el-row>
  94.  
  95. <el-row :gutter="20">
  96. <el-col :span="24">
  97. <el-form-item label="培训内容:" prop="content">
  98. <el-input
  99. type="textarea"
  100. v-model="formData.content"
  101. placeholder="请输入培训内容"
  102. clearable
  103. style="width: 100%"
  104. :autosize="{ minRows: 6 }"
  105. />
  106. </el-form-item>
  107. </el-col>
  108. </el-row>
  109.  
  110. <el-row :gutter="20">
  111. <el-col :span="24">
  112. <el-form-item label="跳转链接" prop="linkUrl">
  113. <el-input v-model="formData.linkUrl" controls-position="right" />
  114. </el-form-item>
  115. </el-col>
  116. </el-row>
  117.  
  118. <el-row :gutter="20">
  119. <el-col :span="24">
  120. <el-form-item label="缩略图" prop="filelist">
  121. <ImageFileUpload
  122. :limit="1"
  123. :saveFileArr="formData.filelist"
  124. :listType="'picture-card'"
  125. :refType="'public_special_navigation_config'"
  126. :refField="'commentPhotos'"
  127. ></ImageFileUpload>
  128. </el-form-item>
  129. </el-col>
  130. </el-row>
  131. </el-form>
  132. <template #footer>
  133. <div class="dialog-footer">
  134. <el-button type="info" @click="cancelForm">取 消</el-button>
  135. <el-button type="primary" @click="submitForm">确 定</el-button>
  136. </div>
  137. </template>
  138. </el-dialog>
  139. </div>
  140. </template>
  141.  
  142. <script setup name="专题导航">
  143. import { specialNavPage, specialNavAdd, specialNavDel, specialNavDetail, specialNavEdit } from '@/api/publicService/index';
  144. import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
  145. const { proxy } = getCurrentInstance();
  146.  
  147. const tableData = ref([]);
  148. const tableLoading = ref(true);
  149. const total = ref(0);
  150. const dialogShow = ref(false);
  151. const dialogTitle = ref('');
  152. const showSearch = ref(true);
  153.  
  154. const allData = reactive({
  155. formData: {
  156. filelist: [],
  157. linkType: '',
  158. linkUrl: '',
  159. platePosition: '',
  160. },
  161. queryParams: {
  162. pageNum: 1,
  163. pageSize: 10,
  164. trainTime: '',
  165. title: '',
  166. },
  167. rulesForm: {
  168. trainTime: [{ required: true, message: '请选择培训日期', trigger: 'change' }],
  169. // linkUrl: [{ required: true, message: '请输入跳转链接', trigger: 'blur' }],
  170. address: [{ required: true, message: '请输入培训地点', trigger: 'blur' }],
  171. title: [{ required: true, message: '请输入培训宣传名称', trigger: 'blur' }],
  172. people: [{ required: true, message: '请输入参加人员', trigger: 'blur' }],
  173. content: [{ required: true, message: '请输入培训内容', trigger: 'blur' }],
  174. filelist: [{ required: true, message: '请选择缩略图', trigger: 'change', type: 'array' }],
  175. },
  176. });
  177. const { queryParams, formData, rulesForm } = toRefs(allData);
  178. /** 获取搜索数据列表 */
  179. function getDataList() {
  180. tableLoading.value = true;
  181. specialNavPage(queryParams.value).then(response => {
  182. tableData.value = response.data;
  183. total.value = response.total;
  184. tableLoading.value = false;
  185. });
  186. }
  187. /** 取消按钮 */
  188. function cancelForm() {
  189. dialogShow.value = false;
  190. }
  191.  
  192. /** 搜索按钮操作 */
  193. function handleQuery() {
  194. queryParams.value.pageNum = 1;
  195. getDataList();
  196. }
  197. /** 重置按钮操作 */
  198. function resetQuery() {
  199. proxy.resetForm('queryRef');
  200. queryParams.value.trainTime = '';
  201. handleQuery();
  202. }
  203. /** 新增按钮操作 */
  204. function handleAdd() {
  205. proxy.resetForm('formRef'); //清空表单
  206. dialogShow.value = true;
  207. dialogTitle.value = '新增培训宣传';
  208. }
  209. /** 修改按钮操作 */
  210. function handleUpdate(row) {
  211. specialNavDetail(row.id).then(response => {
  212. dialogShow.value = true;
  213. dialogTitle.value = '修改培训宣传';
  214. setTimeout(() => {
  215. formData.value = response.data;
  216. });
  217. });
  218. }
  219. /** 提交按钮 */
  220. function submitForm() {
  221. proxy.$refs['formRef'].validate(valid => {
  222. if (valid) {
  223. if (dialogTitle.value == '修改培训宣传') {
  224. specialNavEdit(formData.value).then(response => {
  225. proxy.$modal.msgSuccess('修改成功');
  226. dialogShow.value = false;
  227. getDataList();
  228. });
  229. } else {
  230. if (formData.value.id) delete formData.value.id;
  231. specialNavAdd(formData.value).then(response => {
  232. proxy.$modal.msgSuccess('新增成功');
  233. dialogShow.value = false;
  234. getDataList();
  235. });
  236. }
  237. }
  238. });
  239. }
  240. /** 删除按钮操作 */
  241. function handleDelete(row) {
  242. const postIds = row.id;
  243. proxy.$modal
  244. .confirm('是否确认删除该数据项?')
  245. .then(function () {
  246. return specialNavDel(postIds);
  247. })
  248. .then(() => {
  249. getDataList();
  250. proxy.$modal.msgSuccess('删除成功');
  251. })
  252. .catch(() => {});
  253. }
  254.  
  255. onMounted(() => {
  256. getDataList();
  257. });
  258. </script>