Newer
Older
KaiFengPC / src / views / preassess / targetManage / index.vue
@鲁yixuan 鲁yixuan on 19 Aug 8 KB updata
  1. <template>
  2. <div class="targetManage">
  3. <div class="top">
  4. <el-form ref="ruleForm" :model="form">
  5. <el-row :gutter="20">
  6. <el-col :span="5">
  7. <el-form-item label="建设工程:" prop="projectName">
  8. <el-input v-model="form.projectName" placeholder="建设工程" style="width: 100%" /> </el-form-item
  9. ></el-col>
  10. <el-col :span="3">
  11. <el-form-item label="建设类型:" prop="buildCategory">
  12. <el-select v-model="form.buildCategory" placeholder="建设类型" style="width: 100%">
  13. <el-option label="全部" value="" />
  14. <el-option v-for="dict in build_category" :key="dict.value" :label="dict.label" :value="dict.value" />
  15. </el-select>
  16. </el-form-item>
  17. </el-col>
  18. <el-col :span="4">
  19. <el-form-item label="工程类型:" prop="engineeringType">
  20. <el-select v-model="form.engineeringType" placeholder="工程类型" style="width: 100%">
  21. <el-option label="全部" value="" />
  22. <el-option v-for="dict in sponge_engineering_type" :key="dict.value" :label="dict.label" :value="dict.value" />
  23. </el-select>
  24. </el-form-item>
  25. </el-col>
  26. <el-col :span="5">
  27. <el-form-item label="修改时间:" prop="time">
  28. <el-date-picker
  29. v-model="form.time"
  30. type="daterange"
  31. range-separator="~"
  32. start-placeholder="开始时间"
  33. end-placeholder="结束时间"
  34. format="YYYY-MM-DD"
  35. value-format="YYYY-MM-DD"
  36. style="width: 100%"
  37. />
  38. </el-form-item>
  39. </el-col>
  40. <el-col :span="7">
  41. <el-form-item>
  42. <el-button type="primary" icon="Search" @click="search"> 搜索</el-button>
  43. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  44. </el-form-item>
  45. </el-col>
  46. </el-row>
  47. </el-form>
  48. <el-row class="mb8">
  49. <el-button class="mr10" type="primary" plain icon="Plus" @click="openDialog({}, 'add')">新增</el-button>
  50. <!-- <upload class="mr10" :upload-config="uploadConfig" @success="uploadSuccess">
  51. <el-button type="primary" plain icon="Upload">导入</el-button>
  52. </upload>
  53. <el-button type="primary" plain icon="Download" @click="downloadTemplate">下载模板</el-button> -->
  54. </el-row>
  55. </div>
  56. <el-table :data="tableData" v-loading="loading" :max-height="600">
  57. <el-table-column type="index" width="55" label="序号" />
  58. <el-table-column label="建设工程名称" prop="projectName" show-overflow-tooltip width="200">
  59. <template #default="{ row }">
  60. <span style="color: #409eef">{{ row.projectName }}</span>
  61. </template>
  62. </el-table-column>
  63. <el-table-column label="年径流总量控制率%,≥" prop="annualRunoffTotalControlRate" show-overflow-tooltip width="100" />
  64. <el-table-column label="设计降雨量mm" prop="designRainfall" show-overflow-tooltip width="130">
  65. <template #header>
  66. <span>设计降雨量mm</span>
  67. <popover :width="600">
  68. <div class="box">
  69. <div class="img" style="width: 426px; height: 270px">
  70. <img :src="u400" alt="" />
  71. </div>
  72. <p class="description">根据目标年径流总量控制率跟设计降雨关系曲线,由年径流总量控制率推算设计降雨</p>
  73. </div>
  74. </popover>
  75. </template>
  76. </el-table-column>
  77. <el-table-column label="年径流污染控制率%,≥" prop="annualRunoffPollutionControlRate" show-overflow-tooltip width="100" />
  78. <el-table-column label="硬质地面率%,<" prop="hardGroundRate" show-overflow-tooltip width="100" />
  79. <el-table-column label="工程类型" prop="engineeringType" show-overflow-tooltip width="100">
  80. <template #default="{ row }">
  81. {{ findText('sponge_engineering_type', row.engineeringType) }}
  82. </template>
  83. </el-table-column>
  84. <el-table-column label="建设分区" prop="drainagePartition" show-overflow-tooltip>
  85. <template #default="{ row }">
  86. {{ findText('drainage_partition', row.drainagePartition) }}
  87. </template>
  88. </el-table-column>
  89. <el-table-column label="建设类型" prop="buildCategory" show-overflow-tooltip>
  90. <template #default="{ row }">
  91. {{ findText('build_category', row.buildCategory) }}
  92. </template>
  93. </el-table-column>
  94. <el-table-column label="建设单位" prop="constructionUnit" show-overflow-tooltip width="240" />
  95. <el-table-column label="责任人" prop="dutyPerson" show-overflow-tooltip />
  96. <el-table-column label="修改日期" prop="updateTime" show-overflow-tooltip width="160" />
  97. <el-table-column label="操作" show-overflow-tooltip width="158">
  98. <template #default="{ row }">
  99. <el-button type="primary" link @click="openDialog(row, 'view')">查看</el-button>
  100. <el-button type="primary" link @click="openDialog(row, 'edit')">修改</el-button>
  101. <el-button type="danger" link @click="del(row)">删除</el-button>
  102. </template>
  103. </el-table-column>
  104. </el-table>
  105. <pagination :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getTableList" />
  106. <el-dialog v-model="visible" :title="`${opts.text}项目工程目标`" :close-on-click-modal="false" width="50%" :before-close="close">
  107. <dialogForm v-if="visible" ref="dialogFormRef" :id="row.id || ''" :opts="opts.type" @close="close"></dialogForm>
  108. <template #footer v-if="opts.type !== 'view'">
  109. <div class="dialog-footer">
  110. <el-button type="primary" @click="handleOk">确定</el-button>
  111. <el-button @click="close">取消</el-button>
  112. </div>
  113. </template>
  114. </el-dialog>
  115. </div>
  116. </template>
  117.  
  118. <script setup>
  119. import dialogForm from './dialogForm.vue';
  120. import { ref, reactive, onMounted } from 'vue';
  121. import { optTextMap } from '@/utils/map';
  122. import { usePagination } from '@/hooks';
  123. import { getProjectBuildTargetConfigPage, projectBuildTargetConfigInfoDel } from '@/api/preassess/targetManage';
  124. import u400 from '@/assets/images/preassess/u400.png';
  125. import popover from '@/components/popover';
  126. const { proxy } = getCurrentInstance();
  127.  
  128. const { build_category } = proxy.useDict('build_category');
  129. const { drainage_partition } = proxy.useDict('drainage_partition');
  130. const { sponge_engineering_type } = proxy.useDict('sponge_engineering_type');
  131. const dicts = {
  132. build_category,
  133. drainage_partition,
  134. sponge_engineering_type,
  135. };
  136. const findText = (prop, type) => {
  137. const item = dicts[prop].value.find(it => it.value === type);
  138. return item?.label || '';
  139. };
  140. const form = reactive({
  141. projectName: '',
  142. buildCategory: '',
  143. engineeringType: '',
  144. time: [],
  145. });
  146.  
  147. const params = computed(() => {
  148. const args = JSON.parse(JSON.stringify(form));
  149. const { time } = args;
  150. delete args.time;
  151. return {
  152. ...args,
  153. updateStartTime: time[0] || '',
  154. updateEndTime: time[1] || '',
  155. };
  156. });
  157.  
  158. const { pageNum, pageSize, tableData, total, loading, getTableList } = usePagination(getProjectBuildTargetConfigPage, params);
  159.  
  160. const uploadConfig = reactive({
  161. url: '/prod-api/a/b',
  162. });
  163. const visible = ref(false);
  164. const row = ref({});
  165. const opts = reactive({
  166. type: '',
  167. text: '',
  168. });
  169.  
  170. const search = () => {
  171. pageNum.value = 1;
  172. getTableList();
  173. };
  174.  
  175. const resetQuery = () => {
  176. proxy.$refs.ruleForm.resetFields();
  177. search();
  178. };
  179.  
  180. const uploadSuccess = () => {
  181. console.log('上传成功');
  182. };
  183.  
  184. const downloadTemplate = () => {};
  185.  
  186. const openDialog = (data, type) => {
  187. visible.value = true;
  188. opts.type = type;
  189. opts.text = optTextMap.get(type);
  190. row.value = data;
  191. };
  192.  
  193. const close = type => {
  194. proxy.$refs.dialogFormRef.restForm();
  195. visible.value = false;
  196. opts.type = '';
  197. opts.text = '';
  198. row.value = {};
  199. if (type === 'add') search();
  200. else if (type === 'edit') getTableList();
  201. };
  202.  
  203. const handleOk = () => {
  204. proxy.$refs.dialogFormRef.submit();
  205. };
  206.  
  207. const del = row => {
  208. proxy.$modal
  209. .confirm('是否确认删除?')
  210. .then(async () => {
  211. const res = await projectBuildTargetConfigInfoDel(row.id);
  212. if (res?.code !== 200) return;
  213. proxy.$modal.msgSuccess('操作成功!');
  214. getTableList();
  215. })
  216. .catch(() => {});
  217. };
  218.  
  219. onMounted(() => {
  220. getTableList();
  221. });
  222. </script>
  223.  
  224. <style lang="scss" scoped>
  225. .targetManage {
  226. padding: 20px;
  227. height: 90vh;
  228. overflow-y: hidden;
  229. .top {
  230. margin-bottom: 15px;
  231. }
  232. }
  233.  
  234. :deep(.el-table) {
  235. .el-table__header {
  236. .cell {
  237. .el-tooltip__trigger.el-icon {
  238. margin-top: 0 !important;
  239. transform: translateY(2px);
  240. }
  241. }
  242. }
  243. }
  244. .box {
  245. display: flex;
  246. padding: 10px;
  247. .img {
  248. flex-shrink: 0;
  249. img {
  250. width: 100%;
  251. height: 100%;
  252. }
  253. }
  254. p {
  255. padding-left: 10px;
  256. text-indent: 2em;
  257. }
  258. }
  259. </style>