Newer
Older
KaiFengPC / src / views / spongePerformance / financialperformance / fundrelease / 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 />
  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="'zjxtx'"
  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="fundrelease">
  112. import { ElMessageBox } from 'element-plus';
  113. import { performanceAdd, performanceDelete, performancepaging, performanceEdit } from '@/api/spongePerformance/ManagingPerformance';
  114. import ImageFileUpload from '@/components/ImageFileUpload'; //图片文件上传
  115. import { getToken } from '@/utils/auth';
  116. const { proxy } = getCurrentInstance();
  117. const isDisab = ref(false);
  118. const showDialog = ref(false);
  119. const showSearch = ref(true);
  120. const tableLoading = ref(true);
  121. const total = ref(0);
  122. const dialogTitle = ref('');
  123. const tableData = ref([]);
  124. const uploadList = ref([]);
  125. const AllData = reactive({
  126. publishTime: '',
  127. formData: {},
  128. queryParams: {
  129. pageNum: 1,
  130. pageSize: 10,
  131. examineFileType: '',
  132. regulationName: '',
  133. examineType: 'zjxtx',
  134. },
  135. formRules: {
  136. regulationName: [{ required: true, message: '请输入资金的协同性', trigger: 'blur' }],
  137. publishTime: [{ required: true, message: '请选择发布时间', trigger: 'blur' }],
  138. },
  139. });
  140. const { queryParams, formData, formRules } = toRefs(AllData);
  141.  
  142. /** 表单重置 */
  143. function resetForm() {
  144. formData.value = {
  145. regulationName: undefined,
  146. examineFileType: undefined,
  147. publishTime: undefined,
  148. fileSaveRequestList: [],
  149. examineType: 'zjxtx',
  150. };
  151. proxy.resetForm('ruleForm');
  152. }
  153. /** 新增按钮操作 */
  154. function addData() {
  155. resetForm();
  156. isDisab.value = false;
  157. showDialog.value = true;
  158. dialogTitle.value = '新增资金协同';
  159. }
  160. //搜索
  161. function searchData() {
  162. if (AllData.publishTime) {
  163. queryParams.value.beginTime = AllData.publishTime[0];
  164. queryParams.value.endTime = AllData.publishTime[1];
  165. } else {
  166. queryParams.value.beginTime = '';
  167. queryParams.value.endTime = '';
  168. }
  169. queryParams.value.pageNum = 1;
  170. getDataList();
  171. }
  172. //重置
  173. function resetData() {
  174. AllData.publishTime = [];
  175. proxy.resetForm('queryRef');
  176. searchData();
  177. }
  178. const uploadHeader = ref({
  179. Authorization: 'Bearer ' + getToken(),
  180. });
  181. /** 文件上传 */
  182. function handlePreview(file) {
  183. console.log(file);
  184. return ElMessageBox.confirm(`下载此文件: ${file.name}?`).then(
  185. () => window.open(file.url),
  186. () => false
  187. );
  188. }
  189.  
  190. /** 搜索列表 */
  191. const getDataList = async () => {
  192. tableLoading.value = true;
  193. /** 搜索列表 */
  194. tableLoading.value = true;
  195. if (AllData.publishTime) {
  196. queryParams.value.beginTime = AllData.publishTime[0];
  197. queryParams.value.endTime = AllData.publishTime[1];
  198. }
  199. const res = await performancepaging(queryParams.value);
  200. tableData.value = res.data;
  201. total.value = res.total;
  202. tableLoading.value = false;
  203. };
  204. /** 新增弹框 修改弹框 提交按钮 */
  205. async function submitForm() {
  206. proxy.$refs['ruleForm'].validate(valid => {
  207. if (valid) {
  208. if (formData.value.id != undefined) {
  209. performanceEdit(formData.value).then(() => {
  210. console.log(formData.value, 'formData.value');
  211. proxy.$modal.msgSuccess('修改成功');
  212. showDialog.value = false;
  213. getDataList();
  214. });
  215. } else {
  216. performanceAdd(formData.value).then(() => {
  217. proxy.$modal.msgSuccess('新增成功');
  218. showDialog.value = false;
  219. getDataList();
  220. });
  221. }
  222. }
  223. });
  224. }
  225. //表格修改
  226. function editData(row) {
  227. isDisab.value = false;
  228. showDialog.value = true;
  229. dialogTitle.value = '修改资金协同';
  230. formData.value = { ...row };
  231. formData.value.fileSaveRequestList = row.fileList;
  232. }
  233. // 表格删除
  234. function deleteData(row) {
  235. proxy.$modal
  236. .confirm('是否确认删除?')
  237. .then(async () => {
  238. const res = await performanceDelete(row.id);
  239. if (res?.code !== 200) return;
  240. proxy.$modal.msgSuccess('操作成功!');
  241. getDataList();
  242. })
  243. .catch(() => {});
  244. }
  245. //详情按钮
  246. function checkDetail(row) {
  247. dialogTitle.value = '查看资金协同';
  248. isDisab.value = true;
  249. showDialog.value = true;
  250. formData.value = { ...row };
  251. formData.value.fileSaveRequestList = row.fileList;
  252. }
  253.  
  254. /** 取消按钮 */
  255. function cancel() {
  256. showDialog.value = false;
  257. resetForm();
  258. getDataList();
  259. }
  260. onMounted(() => {
  261. getDataList();
  262. });
  263. </script>
  264. <style scoped lang="scss"></style>