Newer
Older
KaiFengPC / src / views / spongePerformance / ManagingPerformance / planningcontrol / index.vue
@鲁yixuan 鲁yixuan on 29 Aug 9 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="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" show-overflow-tooltip />
  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. <span
  61. style="color: rgb(16, 142, 233)"
  62. @click="handlePreview(item)"
  63. v-for="item in row.fileList"
  64. :key="item.id"
  65. :title="item.name"
  66. >
  67. {{ item.name }}
  68. </span>
  69. </template>
  70. </el-table-column>
  71. <el-table-column label="操作" show-overflow-tooltip width="250">
  72. <template #default="{ row }">
  73. <el-button link icon="View" type="primary" @click="checkDetail(row)">详情</el-button>
  74. <el-button link icon="Edit" type="warning" @click="editData(row)">修改</el-button>
  75. <el-button link icon="Delete" type="danger" @click="deleteData(row)">删除</el-button>
  76. </template>
  77. </el-table-column>
  78. </el-table>
  79. <!-- 分页 -->
  80. <pagination
  81. v-show="total > 0"
  82. :total="total"
  83. v-model:page="queryParams.pageNum"
  84. v-model:limit="queryParams.pageSize"
  85. @pagination="getDataList"
  86. />
  87. <!-- 添加 修改 查看彈框 -->
  88. <el-dialog :title="dialogTitle" v-model="showDialog" width="600px" :close-on-click-modal="false">
  89. <el-form ref="ruleForm" :model="formData" :rules="formRules" label-width="auto" :disabled="isDisab">
  90. <el-row>
  91. <el-form-item label="规划管控制度:" prop="regulationName" style="width: 100%">
  92. <el-input v-model="formData.regulationName" placeholder="请输入规划管控制度" clearable />
  93. </el-form-item>
  94. <el-form-item label="类型:" prop="examineFileType" style="width: 100%">
  95. <el-select clearable v-model="formData.examineFileType" class="m-2" placeholder="请选择" size="mini">
  96. <el-option v-for="item in examine_file_type" :key="item.value" :label="item.label" :value="item.value" />
  97. </el-select>
  98. </el-form-item>
  99. <el-form-item label="发布时间:" prop="publishTime" style="width: 100%">
  100. <el-date-picker
  101. style="width: 100%"
  102. clearable
  103. format="YYYY-MM-DD"
  104. value-format="YYYY-MM-DD"
  105. v-model="formData.publishTime"
  106. type="date"
  107. placeholder="请选择发布时间"
  108. />
  109. </el-form-item>
  110. <el-form-item label="附件:" style="width: 100%" prop="fileList">
  111. <ImageFileUpload v-model:saveFileArr="formData.fileSaveRequestList" :listType="'text'" :refType="'ghgkzd'" :fileType="['*']" />
  112. </el-form-item>
  113. </el-row>
  114. </el-form>
  115. <template #footer>
  116. <div class="dialog-footer">
  117. <el-button type="primary" @click="submitForm" v-show="!isDisab">确定</el-button>
  118. <el-button @click="cancel">取消</el-button>
  119. </div>
  120. </template>
  121. </el-dialog>
  122. </div>
  123. </template>
  124. <script setup name="planningcontrol">
  125. import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
  126. import { ElMessageBox } from 'element-plus';
  127. import {
  128. performanceUserId,
  129. performanceAdd,
  130. performanceDelete,
  131. performancepaging,
  132. performanceEdit,
  133. FileSystemList,
  134. performancedetails,
  135. } from '@/api/spongePerformance/ManagingPerformance';
  136. import { getToken } from '@/utils/auth';
  137. const { proxy } = getCurrentInstance();
  138. const { examine_file_type, examine_type } = proxy.useDict('examine_file_type', 'examine_type');
  139. const isDisab = ref(false);
  140. const showDialog = ref(false);
  141. const showSearch = ref(true);
  142. const tableLoading = ref(true);
  143. const total = ref(0);
  144. const dialogTitle = ref('');
  145. const tableData = ref([]);
  146. const uploadList = ref([]);
  147. const AllData = reactive({
  148. publishTime: '',
  149. formData: {},
  150. queryParams: {
  151. pageNum: 1,
  152. pageSize: 10,
  153. examineFileType: '',
  154. regulationName: '',
  155. examineType: 'ghgkzd',
  156. },
  157. formRules: {
  158. regulationName: [{ required: true, message: '请输入规划管控制度', trigger: 'blur' }],
  159. publishTime: [{ required: true, message: '请选择发布时间', trigger: 'blur' }],
  160. },
  161. });
  162. const { queryParams, formData, formRules } = toRefs(AllData);
  163.  
  164. /** 表单重置 */
  165. function resetForm() {
  166. formData.value = {
  167. regulationName: undefined,
  168. examineFileType: undefined,
  169. publishTime: undefined,
  170. fileSaveRequestList: [],
  171. examineType: 'ghgkzd',
  172. };
  173. proxy.resetForm('ruleForm');
  174. uploadList.value = [];
  175. }
  176. /** 新增按钮操作 */
  177. function addData() {
  178. resetForm();
  179. isDisab.value = false;
  180. showDialog.value = true;
  181. dialogTitle.value = '新增规划管控制度';
  182. }
  183. //搜索
  184. function searchData() {
  185. if (AllData.publishTime) {
  186. queryParams.value.beginTime = AllData.publishTime[0];
  187. queryParams.value.endTime = AllData.publishTime[1];
  188. } else {
  189. queryParams.value.beginTime = '';
  190. queryParams.value.endTime = '';
  191. }
  192. queryParams.value.pageNum = 1;
  193. getDataList();
  194. }
  195. //重置
  196. function resetData() {
  197. AllData.publishTime = [];
  198. proxy.resetForm('queryRef');
  199. searchData();
  200. }
  201. const uploadHeader = ref({
  202. Authorization: 'Bearer ' + getToken(),
  203. });
  204. /** 文件上传 */
  205. function handlePreview(file) {
  206. console.log(file);
  207. return ElMessageBox.confirm(`下载此文件: ${file.name}?`).then(
  208. () => window.open(file.url),
  209. () => false
  210. );
  211. }
  212.  
  213. /** 搜索列表 */
  214. const getDataList = async () => {
  215. tableLoading.value = true;
  216. /** 搜索列表 */
  217. tableLoading.value = true;
  218. if (AllData.publishTime) {
  219. queryParams.value.beginTime = AllData.publishTime[0];
  220. queryParams.value.endTime = AllData.publishTime[1];
  221. }
  222. const res = await performancepaging(queryParams.value);
  223. tableData.value = res.data;
  224. total.value = res.total;
  225. tableLoading.value = false;
  226. };
  227. /** 新增弹框 修改弹框 提交按钮 */
  228. async function submitForm() {
  229. proxy.$refs['ruleForm'].validate(valid => {
  230. if (valid) {
  231. uploadList.value.forEach(element => {
  232. if (element.hasOwnProperty('response')) {
  233. element.response.data.refType = 'ghgkzd';
  234. formData.value.fileSaveRequestList.push(element.response.data);
  235. } else {
  236. formData.value.fileSaveRequestList.push(element);
  237. }
  238. });
  239. if (formData.value.id != undefined) {
  240. performanceEdit(formData.value).then(() => {
  241. console.log(formData.value, 'formData.value');
  242. proxy.$modal.msgSuccess('修改成功');
  243. showDialog.value = false;
  244. getDataList();
  245. });
  246. } else {
  247. performanceAdd(formData.value).then(() => {
  248. proxy.$modal.msgSuccess('新增成功');
  249. showDialog.value = false;
  250. getDataList();
  251. });
  252. }
  253. }
  254. });
  255. }
  256. //表格修改
  257. function editData(row) {
  258. isDisab.value = false;
  259. showDialog.value = true;
  260. dialogTitle.value = '修改规划管控制度';
  261. formData.value = { ...row };
  262. formData.value.fileSaveRequestList = [];
  263. formData.value.fileSaveRequestList = row.fileList;
  264. }
  265. // 表格删除
  266. function deleteData(row) {
  267. proxy.$modal
  268. .confirm('是否确认删除?')
  269. .then(async () => {
  270. const res = await performanceDelete(row.id);
  271. if (res?.code !== 200) return;
  272. proxy.$modal.msgSuccess('操作成功!');
  273. getDataList();
  274. })
  275. .catch(() => {});
  276. }
  277. //详情按钮
  278. function checkDetail(row) {
  279. dialogTitle.value = '查看规划管控制度';
  280. isDisab.value = true;
  281. showDialog.value = true;
  282. formData.value = { ...row };
  283. formData.value.fileSaveRequestList = [];
  284. formData.value.fileSaveRequestList = row.fileList;
  285. }
  286.  
  287. /** 取消按钮 */
  288. function cancel() {
  289. showDialog.value = false;
  290. resetForm();
  291. getDataList();
  292. }
  293. onMounted(() => {
  294. getDataList();
  295. });
  296. </script>
  297. <style scoped lang="scss"></style>