Newer
Older
KaiFengPC / src / views / project / components / threeLevel.vue
@zhangdeliang zhangdeliang on 23 May 7 KB 初始化项目
  1. <template>
  2. <div class="threeLevel">
  3. <div class="top">
  4. <el-form ref="ruleForm" :model="form">
  5. <el-row :gutter="20">
  6. <el-col :span="6">
  7. <el-form-item label="分区名称:" prop="partitionName">
  8. <el-input v-model="form.partitionName" placeholder="请输入二级分区名称" style="width: 100%"></el-input>
  9. </el-form-item>
  10. </el-col>
  11. <el-col :span="6">
  12. <el-form-item>
  13. <el-button type="primary" icon="Search" @click="search"> 查询</el-button>
  14. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  15. </el-form-item>
  16. </el-col>
  17. </el-row>
  18. </el-form>
  19. </div>
  20. <el-table :data="tableData" v-loading="loading" stripe max-height="650" :span-method="objectSpanMethod">
  21. <el-table-column type="index" label="序号" width="60" />
  22. <el-table-column label="二级分区名称" prop="parentName" show-overflow-tooltip />
  23. <el-table-column label="三级分区编号" prop="partitionNum" show-overflow-tooltip />
  24. <el-table-column label="分区面积(k㎡)" prop="partitionArea" show-overflow-tooltip />
  25. <el-table-column label="年径流总量控制率指标%" prop="annualRunoffTarget" show-overflow-tooltip />
  26. <el-table-column label="设计降雨量mm" prop="designRainfall" show-overflow-tooltip />
  27. <template v-if="disabled">
  28. <el-table-column label="年径流总量控制率实际值%" prop="annualRunoffReality" show-overflow-tooltip />
  29. <el-table-column label="超目标%" prop="superTarget" show-overflow-tooltip>
  30. <template #default="{ row }">
  31. <span :class="row.superTarget ? (row.superTarget >= 0 ? 'green' : 'red') : ''">{{ row.superTarget }}</span>
  32. </template>
  33. </el-table-column>
  34. </template>
  35. <template v-else>
  36. <el-table-column label="修改时间" prop="updateTime" show-overflow-tooltip />
  37. <el-table-column label="操作" show-overflow-tooltip width="170">
  38. <template #default="{ row }">
  39. <el-button type="primary" link @click="openDialog(row, 'view')">查看</el-button>
  40. <el-button type="primary" link @click="openDialog(row, 'edit')">编辑</el-button>
  41. </template>
  42. </el-table-column>
  43. </template>
  44. </el-table>
  45. <el-dialog v-model="visible" :title="opts.text" :close-on-click-modal="false" width="50%" :before-close="close" class="dialog">
  46. <el-form ref="dialogFormRef" label-width="166px" :model="dialogForm" v-if="visible" :disabled="opts.type === 'view'">
  47. <el-row :gutter="20">
  48. <el-col :span="12">
  49. <el-form-item label="三级分区编号:" prop="partitionNum" label-width="112px">
  50. <el-input v-model="dialogForm.partitionNum" disabled />
  51. </el-form-item>
  52. </el-col>
  53. <el-col :span="12">
  54. <el-form-item label="所属二级分区:" prop="parentId">
  55. <el-select v-model="dialogForm.parentId" placeholder="请选择二级分区" style="width: 100%">
  56. <el-option v-for="item in parentList" :key="item.id" :label="item.partitionName" :value="item.id" />
  57. </el-select>
  58. </el-form-item>
  59. </el-col>
  60. </el-row>
  61. <el-row :gutter="20">
  62. <el-col :span="12">
  63. <el-form-item label="分区面积:" prop="partitionArea" label-width="112px">
  64. <el-input v-model="dialogForm.partitionArea" placeholder="请输入分区面积">
  65. <template #append>k㎡</template>
  66. </el-input>
  67. </el-form-item>
  68. </el-col>
  69. <el-col :span="12">
  70. <el-form-item label="年径流总量控制率指标:" prop="annualRunoffTarget">
  71. <el-input v-model="dialogForm.annualRunoffTarget" placeholder="请输入年径流总量控制率指标">
  72. <template #append>%</template>
  73. </el-input>
  74. </el-form-item>
  75. </el-col>
  76. </el-row>
  77. <el-row :gutter="20">
  78. <el-col :span="12">
  79. <el-form-item label="设计降雨:" prop="designRainfall" label-width="112px">
  80. <el-input v-model="dialogForm.designRainfall" disabled>
  81. <template #append>mm</template>
  82. </el-input>
  83. </el-form-item>
  84. </el-col>
  85. </el-row>
  86. </el-form>
  87. <template #footer v-if="opts.type !== 'view'">
  88. <div class="dialog-footer">
  89. <el-button type="primary" @click="submit">确 定</el-button>
  90. <el-button @click="close">取 消</el-button>
  91. </div>
  92. </template>
  93. </el-dialog>
  94. </div>
  95. </template>
  96.  
  97. <script setup>
  98. import { getControlPartitionList, controlPartitionEdit, getControlPartitionTargetList } from '@/api/project/partition';
  99. import { optTextMap } from '@/utils/map';
  100. import { inheritAttr } from '@/utils/v3';
  101. const { proxy } = getCurrentInstance();
  102. const props = defineProps({
  103. disabled: {
  104. type: Boolean,
  105. default: false,
  106. },
  107. });
  108. const form = reactive({
  109. type: 3,
  110. partitionName: '',
  111. });
  112. const tableData = ref([]);
  113. const loading = ref(false);
  114. const visible = ref(false);
  115. const opts = reactive({
  116. text: '',
  117. type: '',
  118. });
  119.  
  120. const dialogForm = reactive({
  121. id: '',
  122. parentId: '',
  123. partitionNum: '',
  124. partitionArea: '',
  125. annualRunoffTarget: '',
  126. designRainfall: '',
  127. });
  128.  
  129. const parentList = ref([]);
  130. let spanArr = [];
  131.  
  132. const getParentList = async () => {
  133. const res = await getControlPartitionList({ type: 2 });
  134. if (res?.code !== 200) return;
  135. parentList.value = res?.data || [];
  136. };
  137. getParentList();
  138.  
  139. const openDialog = (data, type) => {
  140. visible.value = true;
  141. opts.type = type;
  142. opts.text = optTextMap.get(type);
  143. inheritAttr(data, dialogForm);
  144. };
  145.  
  146. const close = () => {
  147. visible.value = false;
  148. opts.type = '';
  149. opts.text = '';
  150. search();
  151. };
  152.  
  153. const submit = () => {
  154. proxy.$refs.dialogFormRef.validate(async (valid, fields) => {
  155. if (valid) {
  156. const { id, parentId, partitionArea, annualRunoffTarget } = dialogForm;
  157. const res = await controlPartitionEdit({ id, parentId, partitionArea, annualRunoffTarget });
  158. if (res?.code !== 200) return;
  159. close();
  160. proxy.$modal.msgSuccess('操作成功');
  161. } else {
  162. console.log(fields);
  163. }
  164. });
  165. };
  166.  
  167. const search = () => {
  168. getTableList();
  169. };
  170.  
  171. const resetQuery = () => {
  172. proxy.$refs.ruleForm.resetFields();
  173. search();
  174. };
  175.  
  176. const getTableList = async () => {
  177. loading.value = true;
  178. try {
  179. let methed = getControlPartitionList;
  180. if (props.disabled) methed = getControlPartitionTargetList;
  181. const res = await methed(form);
  182. loading.value = false;
  183. if (res?.code !== 200) return;
  184. tableData.value = res?.data || [];
  185. tableData.value.forEach(item => {
  186. item.parentId = item.parentId + '';
  187. });
  188. spanArr = [];
  189. getSpanArr(tableData.value);
  190. } catch (error) {
  191. loading.value = false;
  192. }
  193. };
  194.  
  195. const getSpanArr = data => {
  196. let pos = 0;
  197. // data就是我们从后台拿到的数据
  198. for (let i = 0; i < data.length; i++) {
  199. if (i === 0) {
  200. spanArr.push(1);
  201. pos = 0;
  202. } else {
  203. // 判断当前元素与上一个元素是否相同
  204. if (data[i].parentName === data[i - 1].parentName) {
  205. spanArr[pos] += 1;
  206. spanArr.push(0);
  207. } else {
  208. spanArr.push(1);
  209. pos = i;
  210. }
  211. }
  212. }
  213. };
  214.  
  215. const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  216. if (columnIndex === 1) {
  217. const _row = spanArr[rowIndex];
  218. const _col = _row > 0 ? 1 : 0;
  219. // console.log(`rowspan:${_row} colspan:${_col}`);
  220. return {
  221. // [0,0] 表示这一行不显示, [2,1]表示行的合并数
  222. rowspan: _row,
  223. colspan: _col,
  224. };
  225. }
  226. };
  227.  
  228. onMounted(() => {
  229. getTableList();
  230. });
  231. </script>
  232.  
  233. <style lang="scss" scoped>
  234. @import '@/assets/styles/variables.module.scss';
  235. .green {
  236. color: $green;
  237. }
  238. .red {
  239. color: $red;
  240. }
  241. </style>