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