Newer
Older
KaiFengPC / src / views / spongePerformance / ManagingPerformance / trainingpublicity / index.vue
@zhangdeliang zhangdeliang on 23 May 9 KB 初始化项目
  1. <template>
  2. <!-- <>培训宣传及公众参与 -->
  3. <div class="publicContainer">
  4. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
  5. <el-form-item label="名称:" prop="regulationName">
  6. <el-input
  7. v-model="queryParams.regulationName"
  8. placeholder="请输入关键字"
  9. clearable
  10. @keyup.enter="searchData"
  11. style="width: 240px"
  12. />
  13. </el-form-item>
  14. <el-form-item label="类型:" prop="examineFileType">
  15. <el-select clearable v-model="queryParams.examineFileType" class="m-2" placeholder="请选择" size="mini">
  16. <el-option v-for="item in examine_file_type" :key="item.value" :label="item.label" :value="item.value" />
  17. </el-select>
  18. </el-form-item>
  19.  
  20. <el-form-item label="发布时间" prop="publishTime">
  21. <el-date-picker
  22. style="width: 240px"
  23. format="YYYY-MM-DD"
  24. value-format="YYYY-MM-DD"
  25. v-model="AllData.publishTime"
  26. type="daterange"
  27. unlink-panels
  28. range-separator="至"
  29. start-placeholder="开始时间"
  30. end-placeholder="结束时间"
  31. />
  32. </el-form-item>
  33.  
  34. <el-form-item>
  35. <el-button type="primary" icon="Search" @click="searchData">搜索</el-button>
  36. <el-button icon="Refresh" @click="resetData">重置</el-button>
  37. </el-form-item>
  38. </el-form>
  39. <!-- 操作栏 -->
  40. <el-row :gutter="10" class="mb8">
  41. <el-col :span="1.5">
  42. <el-button type="primary" plain icon="Plus" @click="addData" v-hasPermi="['system:post:add']">新增</el-button>
  43. </el-col>
  44. <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
  45. </el-row>
  46. <!-- 表格 -->
  47. <el-table :data="tableData" v-loading="tableLoading" :max-height="600">
  48. <el-table-column type="index" width="55" label="序号" />
  49. <el-table-column label="培训宣传及公众参与记录" prop="regulationName" />
  50. <el-table-column label="类型" prop="examineFileType" show-overflow-tooltip>
  51. <template #default="{ row }">
  52. <dict-tag :options="examine_file_type" :value="row.examineFileType" />
  53. </template>
  54. </el-table-column>
  55. <el-table-column label="发布时间" prop="publishTime" />
  56. <el-table-column label="修改时间" prop="updateTime" />
  57. <el-table-column label="修改人" prop="updateBy" />
  58. <el-table-column label="附件" prop="fileList" show-overflow-tooltip>
  59. <template #default="{ row }">
  60. <p style="color: rgb(16, 142, 233)" @click="handlePreview(item)" v-for="item in row.fileList" :key="item.id" :title="item.name">
  61. {{ item.name }}
  62. </p>
  63. </template>
  64. </el-table-column>
  65. <el-table-column label="操作" show-overflow-tooltip width="250">
  66. <template #default="{ row }">
  67. <el-button link icon="View" type="primary" @click="checkDetail(row)">详情</el-button>
  68. <el-button link icon="Edit" type="warning" @click="editData(row)">修改</el-button>
  69. <el-button link icon="Delete" type="danger" @click="deleteData(row)">删除</el-button>
  70. </template>
  71. </el-table-column>
  72. </el-table>
  73. <!-- 分页 -->
  74. <pagination
  75. v-show="total > 0"
  76. :total="total"
  77. v-model:page="queryParams.pageNum"
  78. v-model:limit="queryParams.pageSize"
  79. @pagination="getDataList"
  80. />
  81. <!-- 添加 修改 查看彈框 -->
  82. <el-dialog :title="dialogTitle" v-model="showDialog" width="70%" :close-on-click-modal="false">
  83. <el-form ref="ruleForm" :model="formData" :rules="formRules" label-width="auto" :disabled="isDisab">
  84. <el-row>
  85. <el-form-item label="培训宣传及公众参与记录:" prop="regulationName" style="width: 45%">
  86. <el-input v-model="formData.regulationName" placeholder="请输入培训宣传及公众参与记录" clearable />
  87. </el-form-item>
  88. <el-form-item label="类型:" prop="examineFileType" style="width: 45%">
  89. <el-select clearable v-model="formData.examineFileType" class="m-2" placeholder="请选择" size="mini" style="width: 100%">
  90. <el-option v-for="item in examine_file_type" :key="item.value" :label="item.label" :value="item.value" />
  91. </el-select>
  92. </el-form-item>
  93. <el-form-item label="发布时间:" prop="publishTime" style="width: 45%">
  94. <el-date-picker
  95. style="width: 100%"
  96. clearable
  97. format="YYYY-MM-DD"
  98. value-format="YYYY-MM-DD"
  99. v-model="formData.publishTime"
  100. type="date"
  101. placeholder="请选择发布时间"
  102. />
  103. </el-form-item>
  104. <el-form-item label="附件:" style="width: 93%">
  105. <ImageFileUpload v-model:saveFileArr="formData.fileSaveRequestList" :listType="'text'" :refType="'pxxcjgzxh'" />
  106. </el-form-item>
  107. </el-row>
  108. </el-form>
  109. <template #footer>
  110. <div class="dialog-footer">
  111. <el-button type="primary" @click="submitForm" v-show="!isDisab">保 存</el-button>
  112. <el-button @click="cancel">关闭</el-button>
  113. </div>
  114. </template>
  115. </el-dialog>
  116. </div>
  117. </template>
  118. <script setup name="trainingpublicity">
  119. import { ElMessageBox } from 'element-plus';
  120. import {
  121. performanceUserId,
  122. performanceAdd,
  123. performanceDelete,
  124. performancepaging,
  125. performanceEdit,
  126. FileSystemList,
  127. performancedetails,
  128. } from '@/api/spongePerformance/ManagingPerformance';
  129. import { getToken } from '@/utils/auth';
  130. const { proxy } = getCurrentInstance();
  131. const { examine_file_type, examine_type } = proxy.useDict('examine_file_type', 'examine_type');
  132. const isDisab = ref(false);
  133. const showDialog = ref(false);
  134. const showSearch = ref(true);
  135. const tableLoading = ref(true);
  136. const total = ref(0);
  137. const dialogTitle = ref('');
  138. const tableData = ref([]);
  139. const AllData = reactive({
  140. publishTime: '',
  141. formData: {},
  142. queryParams: {
  143. pageNum: 1,
  144. pageSize: 10,
  145. examineFileType: '',
  146. regulationName: '',
  147. examineType: 'pxxcjgzxh',
  148. },
  149. formRules: {
  150. regulationName: [{ required: true, message: '请输入规划管控制度', trigger: 'blur' }],
  151. publishTime: [{ required: true, message: '请选择发布时间', trigger: 'blur' }],
  152. },
  153. });
  154. const { queryParams, formData, formRules } = toRefs(AllData);
  155.  
  156. /** 表单重置 */
  157. function resetForm() {
  158. formData.value = {
  159. regulationName: undefined,
  160. examineFileType: undefined,
  161. publishTime: undefined,
  162. fileSaveRequestList: [],
  163. examineType: 'pxxcjgzxh',
  164. };
  165. proxy.resetForm('ruleForm');
  166. }
  167. /** 新增按钮操作 */
  168. function addData() {
  169. resetForm();
  170. isDisab.value = false;
  171. showDialog.value = true;
  172. dialogTitle.value = '新增培训宣传及公众参与记录';
  173. }
  174. //搜索
  175. function searchData() {
  176. if (AllData.publishTime) {
  177. queryParams.value.beginTime = AllData.publishTime[0];
  178. queryParams.value.endTime = AllData.publishTime[1];
  179. } else {
  180. queryParams.value.beginTime = '';
  181. queryParams.value.endTime = '';
  182. }
  183. queryParams.value.pageNum = 1;
  184. getDataList();
  185. }
  186. //重置
  187. function resetData() {
  188. AllData.publishTime = [];
  189. proxy.resetForm('queryRef');
  190. searchData();
  191. }
  192. const uploadHeader = ref({
  193. Authorization: 'Bearer ' + getToken(),
  194. });
  195. /** 文件上传 */
  196. function handlePreview(file) {
  197. console.log(file);
  198. return ElMessageBox.confirm(`下载此文件: ${file.name}?`).then(
  199. () => window.open(file.url),
  200. () => false
  201. );
  202. }
  203.  
  204. /** 查询列表 */
  205. const getDataList = async () => {
  206. tableLoading.value = true;
  207. /** 查询列表 */
  208. tableLoading.value = true;
  209. if (AllData.publishTime) {
  210. queryParams.value.beginTime = AllData.publishTime[0];
  211. queryParams.value.endTime = AllData.publishTime[1];
  212. }
  213. const res = await performancepaging(queryParams.value);
  214. tableData.value = res.data;
  215. total.value = res.total;
  216. tableLoading.value = false;
  217. };
  218. /** 新增弹框 修改弹框 提交按钮 */
  219. async function submitForm() {
  220. proxy.$refs['ruleForm'].validate(valid => {
  221. if (valid) {
  222. if (formData.value.id != undefined) {
  223. performanceEdit(formData.value).then(() => {
  224. console.log(formData.value, 'formData.value');
  225. proxy.$modal.msgSuccess('修改成功');
  226. showDialog.value = false;
  227. getDataList();
  228. });
  229. } else {
  230. performanceAdd(formData.value).then(() => {
  231. proxy.$modal.msgSuccess('新增成功');
  232. showDialog.value = false;
  233. getDataList();
  234. });
  235. }
  236. }
  237. });
  238. }
  239. //表格修改
  240. function editData(row) {
  241. isDisab.value = false;
  242. showDialog.value = true;
  243. dialogTitle.value = '修改培训宣传及公众参与记录';
  244. formData.value = { ...row };
  245. formData.value.fileSaveRequestList = [];
  246. formData.value.fileSaveRequestList = row.fileList;
  247. }
  248. // 表格删除
  249. function deleteData(row) {
  250. proxy.$modal
  251. .confirm('是否确认删除?')
  252. .then(async () => {
  253. const res = await performanceDelete(row.id);
  254. if (res?.code !== 200) return;
  255. proxy.$modal.msgSuccess('操作成功!');
  256. getDataList();
  257. })
  258. .catch(() => {});
  259. }
  260. //详情按钮
  261. function checkDetail(row) {
  262. dialogTitle.value = '查看培训宣传及公众参与记录';
  263. isDisab.value = true;
  264. showDialog.value = true;
  265. formData.value = { ...row };
  266. formData.value.fileSaveRequestList = row.fileList;
  267. }
  268.  
  269. /** 取消按钮 */
  270. function cancel() {
  271. showDialog.value = false;
  272. resetForm();
  273. getDataList();
  274. }
  275. onMounted(() => {
  276. getDataList();
  277. });
  278. </script>
  279. <style scoped lang="scss"></style>