Newer
Older
KaiFengPC / src / views / spongePerformance / ManagingPerformance / planningcontrol / index.vue
@zhangdeliang zhangdeliang on 23 May 10 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" 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="70%" :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: 45%">
  92. <el-input v-model="formData.regulationName" placeholder="请输入规划管控制度" clearable />
  93. </el-form-item>
  94. <el-form-item label="类型:" prop="examineFileType" style="width: 45%">
  95. <el-select clearable v-model="formData.examineFileType" class="m-2" placeholder="请选择" size="mini" style="width: 100%">
  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: 45%">
  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: 93%" prop="fileList">
  111. <!-- <el-upload
  112. v-model:file-list="uploadList"
  113. class="upload-demo"
  114. action="/prod-api/system/upload"
  115. :headers="uploadHeader"
  116. multiple
  117. :on-preview="handlePreview"
  118. >
  119. <el-button type="primary">选择文件</el-button>
  120. </el-upload> -->
  121.  
  122. <ImageFileUpload v-model:saveFileArr="formData.fileSaveRequestList" :listType="'text'" :refType="'ghgkzd'" />
  123. </el-form-item>
  124. </el-row>
  125. </el-form>
  126. <template #footer>
  127. <div class="dialog-footer">
  128. <el-button type="primary" @click="submitForm" v-show="!isDisab">保 存</el-button>
  129. <el-button @click="cancel">关闭</el-button>
  130. </div>
  131. </template>
  132. </el-dialog>
  133. </div>
  134. </template>
  135. <script setup name="planningcontrol">
  136. import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
  137. import { ElMessageBox } from 'element-plus';
  138. import {
  139. performanceUserId,
  140. performanceAdd,
  141. performanceDelete,
  142. performancepaging,
  143. performanceEdit,
  144. FileSystemList,
  145. performancedetails,
  146. } from '@/api/spongePerformance/ManagingPerformance';
  147. import { getToken } from '@/utils/auth';
  148. const { proxy } = getCurrentInstance();
  149. const { examine_file_type, examine_type } = proxy.useDict('examine_file_type', 'examine_type');
  150. const isDisab = ref(false);
  151. const showDialog = ref(false);
  152. const showSearch = ref(true);
  153. const tableLoading = ref(true);
  154. const total = ref(0);
  155. const dialogTitle = ref('');
  156. const tableData = ref([]);
  157. const uploadList = ref([]);
  158. const AllData = reactive({
  159. publishTime: '',
  160. formData: {},
  161. queryParams: {
  162. pageNum: 1,
  163. pageSize: 10,
  164. examineFileType: '',
  165. regulationName: '',
  166. examineType: 'ghgkzd',
  167. },
  168. formRules: {
  169. regulationName: [{ required: true, message: '请输入规划管控制度', trigger: 'blur' }],
  170. publishTime: [{ required: true, message: '请选择发布时间', trigger: 'blur' }],
  171. },
  172. });
  173. const { queryParams, formData, formRules } = toRefs(AllData);
  174.  
  175. /** 表单重置 */
  176. function resetForm() {
  177. formData.value = {
  178. regulationName: undefined,
  179. examineFileType: undefined,
  180. publishTime: undefined,
  181. fileSaveRequestList: [],
  182. examineType: 'ghgkzd',
  183. };
  184. proxy.resetForm('ruleForm');
  185. uploadList.value = [];
  186. }
  187. /** 新增按钮操作 */
  188. function addData() {
  189. resetForm();
  190. isDisab.value = false;
  191. showDialog.value = true;
  192. dialogTitle.value = '新增规划管控制度';
  193. }
  194. //搜索
  195. function searchData() {
  196. if (AllData.publishTime) {
  197. queryParams.value.beginTime = AllData.publishTime[0];
  198. queryParams.value.endTime = AllData.publishTime[1];
  199. } else {
  200. queryParams.value.beginTime = '';
  201. queryParams.value.endTime = '';
  202. }
  203. queryParams.value.pageNum = 1;
  204. getDataList();
  205. }
  206. //重置
  207. function resetData() {
  208. AllData.publishTime = [];
  209. proxy.resetForm('queryRef');
  210. searchData();
  211. }
  212. const uploadHeader = ref({
  213. Authorization: 'Bearer ' + getToken(),
  214. });
  215. /** 文件上传 */
  216. function handlePreview(file) {
  217. console.log(file);
  218. return ElMessageBox.confirm(`下载此文件: ${file.name}?`).then(
  219. () => window.open(file.url),
  220. () => false
  221. );
  222. }
  223.  
  224. /** 查询列表 */
  225. const getDataList = async () => {
  226. tableLoading.value = true;
  227. /** 查询列表 */
  228. tableLoading.value = true;
  229. if (AllData.publishTime) {
  230. queryParams.value.beginTime = AllData.publishTime[0];
  231. queryParams.value.endTime = AllData.publishTime[1];
  232. }
  233. const res = await performancepaging(queryParams.value);
  234. tableData.value = res.data;
  235. total.value = res.total;
  236. tableLoading.value = false;
  237. };
  238. /** 新增弹框 修改弹框 提交按钮 */
  239. async function submitForm() {
  240. proxy.$refs['ruleForm'].validate(valid => {
  241. if (valid) {
  242. uploadList.value.forEach(element => {
  243. if (element.hasOwnProperty('response')) {
  244. element.response.data.refType = 'ghgkzd';
  245. formData.value.fileSaveRequestList.push(element.response.data);
  246. } else {
  247. formData.value.fileSaveRequestList.push(element);
  248. }
  249. });
  250. if (formData.value.id != undefined) {
  251. performanceEdit(formData.value).then(() => {
  252. console.log(formData.value, 'formData.value');
  253. proxy.$modal.msgSuccess('修改成功');
  254. showDialog.value = false;
  255. getDataList();
  256. });
  257. } else {
  258. performanceAdd(formData.value).then(() => {
  259. proxy.$modal.msgSuccess('新增成功');
  260. showDialog.value = false;
  261. getDataList();
  262. });
  263. }
  264. }
  265. });
  266. }
  267. //表格修改
  268. function editData(row) {
  269. isDisab.value = false;
  270. showDialog.value = true;
  271. dialogTitle.value = '修改规划管控制度';
  272. formData.value = { ...row };
  273. formData.value.fileSaveRequestList = [];
  274. formData.value.fileSaveRequestList = row.fileList;
  275. }
  276. // 表格删除
  277. function deleteData(row) {
  278. proxy.$modal
  279. .confirm('是否确认删除?')
  280. .then(async () => {
  281. const res = await performanceDelete(row.id);
  282. if (res?.code !== 200) return;
  283. proxy.$modal.msgSuccess('操作成功!');
  284. getDataList();
  285. })
  286. .catch(() => {});
  287. }
  288. //详情按钮
  289. function checkDetail(row) {
  290. dialogTitle.value = '查看规划管控制度';
  291. isDisab.value = true;
  292. showDialog.value = true;
  293. formData.value = { ...row };
  294. formData.value.fileSaveRequestList = [];
  295. formData.value.fileSaveRequestList = row.fileList;
  296. }
  297.  
  298. /** 取消按钮 */
  299. function cancel() {
  300. showDialog.value = false;
  301. resetForm();
  302. getDataList();
  303. }
  304. onMounted(() => {
  305. getDataList();
  306. });
  307. </script>
  308. <style scoped lang="scss"></style>