Newer
Older
KaiFengPC / src / views / preassess / scaleConfig / tableDalgo.vue
@鲁yixuan 鲁yixuan on 19 Aug 10 KB updata
  1. <template>
  2. <div class="btns" v-show="opts !== 'view'">
  3. <el-button type="primary" plain icon="Plus" @click="openDialog({}, 'add')">新增</el-button>
  4. </div>
  5. <el-table class="table" :data="tableData" v-loading="loading" max-height="680" element-loading-text="数据加载中...">
  6. <el-table-column type="index" width="55" label="序号" />
  7. <el-table-column label="用地类型" prop="landType" width="180">
  8. <template #default="{ row }">
  9. <span>{{ findText('sponge_land_type', row.landType) }}</span>
  10. </template>
  11. </el-table-column>
  12. <el-table-column v-for="column in columns" :label="column.label">
  13. <el-table-column v-for="item in column.list" :label="item.label" :prop="item.prop" width="200"> </el-table-column>
  14. </el-table-column>
  15. <template v-if="opts !== 'add'">
  16. <el-table-column label="修改时间" prop="updateTime" width="160" show-overflow-tooltip />
  17. <el-table-column label="修改人" prop="updateBy" show-overflow-tooltip />
  18. </template>
  19. <template v-if="opts !== 'view'">
  20. <el-table-column label="操作" width="150">
  21. <template #default="{ row, index }">
  22. <el-button type="primary" link size="small" @click="openDialog(row, 'view')">查看</el-button>
  23. <el-button type="primary" link size="small" @click="openDialog(row, 'edit')">修改</el-button>
  24. <el-button type="danger" link size="small" @click="del(row, index)">删除</el-button>
  25. </template>
  26. </el-table-column>
  27. </template>
  28. </el-table>
  29. <el-dialog
  30. v-model="visible"
  31. :title="`${configOpts.text}建议比例系数`"
  32. :close-on-click-modal="false"
  33. width="50%"
  34. :before-close="closeDialog"
  35. class="dialog"
  36. >
  37. <el-form ref="ruleForm" :model="form" :rules="rules" class="dialogForm" :disabled="configOpts.type === 'view'">
  38. <el-row :gutter="20">
  39. <el-col :span="12">
  40. <el-form-item label="用地类型:" prop="landType">
  41. <el-select v-model="form.landType" placeholder="请选择用地类型" style="width: 100%">
  42. <el-option v-for="dict in sponge_land_type" :key="dict.value" :label="dict.label" :value="dict.value" />
  43. </el-select>
  44. </el-form-item>
  45. </el-col>
  46. </el-row>
  47. <el-card class="box-card" shadow="never">
  48. <template #header>
  49. <span class="title">综合治理类</span>
  50. </template>
  51. <el-row :gutter="20">
  52. <el-col :span="12">
  53. <el-form-item label="下沉式绿地率%:" prop="comprehensiveSinkRate" class="beforeFormItem">
  54. <el-input v-model="form.comprehensiveSinkRate" placeholder="请输入正整数" />
  55. </el-form-item>
  56. </el-col>
  57. <el-col :span="12">
  58. <el-form-item label="绿色屋顶率:" prop="comprehensiveRoofRate" class="formItem">
  59. <el-input v-model="form.comprehensiveRoofRate" placeholder="请输入正整数" />
  60. </el-form-item>
  61. </el-col>
  62. </el-row>
  63. <el-row :gutter="20">
  64. <el-col :span="12">
  65. <el-form-item label="透水铺装率:" prop="comprehensivePermeableRate" class="beforeFormItem" style="margin-bottom: 0">
  66. <el-input v-model="form.comprehensivePermeableRate" placeholder="请输入正整数" />
  67. </el-form-item>
  68. </el-col>
  69. <el-col :span="12">
  70. <el-form-item label="不透水下垫面径流控制率:" prop="comprehensiveUnpermeableRate" class="formItem" style="margin-bottom: 0">
  71. <el-input v-model="form.comprehensiveUnpermeableRate" placeholder="请输入正整数" />
  72. </el-form-item>
  73. </el-col>
  74. </el-row>
  75. </el-card>
  76. <el-card class="box-card" shadow="never" style="margin-top: 10px">
  77. <template #header>
  78. <span class="title">规划新建类</span>
  79. </template>
  80. <el-row :gutter="20">
  81. <el-col :span="12">
  82. <el-form-item label="下沉式绿地率%:" prop="newSinkRate" class="beforeFormItem">
  83. <el-input v-model="form.newSinkRate" placeholder="请输入正整数" />
  84. </el-form-item>
  85. </el-col>
  86. <el-col :span="12">
  87. <el-form-item label="绿色屋顶率:" prop="newRoofRate" class="formItem">
  88. <el-input v-model="form.newRoofRate" placeholder="请输入正整数" />
  89. </el-form-item>
  90. </el-col>
  91. </el-row>
  92. <el-row :gutter="20">
  93. <el-col :span="12">
  94. <el-form-item label="透水铺装率:" prop="newPermeableRate" class="beforeFormItem" style="margin-bottom: 0">
  95. <el-input v-model="form.newPermeableRate" placeholder="请输入正整数" />
  96. </el-form-item>
  97. </el-col>
  98. <el-col :span="12">
  99. <el-form-item label="不透水下垫面径流控制率:" prop="newUnpermeableRate" class="formItem" style="margin-bottom: 0">
  100. <el-input v-model="form.newUnpermeableRate" placeholder="请输入正整数" />
  101. </el-form-item>
  102. </el-col>
  103. </el-row>
  104. </el-card>
  105. </el-form>
  106. <template #footer v-if="configOpts.type !== 'view'">
  107. <div class="dialog-footer">
  108. <el-button type="primary" @click="submit">确定</el-button>
  109. <el-button @click="closeDialog">取消</el-button>
  110. </div>
  111. </template>
  112. </el-dialog>
  113. </template>
  114.  
  115. <script setup>
  116. import { ref, reactive, onMounted } from 'vue';
  117. import { inheritAttr } from '@/utils/v3';
  118. import { optTextMap } from '@/utils/map';
  119. import { isNumber, required } from '@/utils/validate-helper';
  120. import {
  121. facilitiesSuggestRateConfigItemAdd,
  122. facilitiesSuggestRateConfigItemEdit,
  123. facilitiesSuggestRateConfigItemDel,
  124. facilitiesSuggestRateConfigItemList,
  125. } from '@/api/preassess/scaleConfig';
  126. import { useDicts } from '@/hooks';
  127. const { proxy } = getCurrentInstance();
  128. const { sponge_land_type, findText } = useDicts(proxy);
  129. const columns = reactive([
  130. {
  131. label: '综合整治类',
  132. list: [
  133. { label: '下沉式绿地率%', prop: 'comprehensiveSinkRate' },
  134. { label: '绿色屋顶率', prop: 'comprehensiveRoofRate' },
  135. { label: '透水铺装率', prop: 'comprehensivePermeableRate' },
  136. { label: '不透水下垫面径流控制率', prop: 'comprehensiveUnpermeableRate' },
  137. ],
  138. },
  139. {
  140. label: '规划新建类',
  141. list: [
  142. { label: '下沉式绿地率%', prop: 'newSinkRate' },
  143. { label: '绿色屋顶率', prop: 'newRoofRate' },
  144. { label: '透水铺装率', prop: 'newPermeableRate' },
  145. { label: '不透水下垫面径流控制率', prop: 'newUnpermeableRate' },
  146. ],
  147. },
  148. ]);
  149. const props = defineProps({
  150. id: {
  151. type: [String, Number],
  152. default: '',
  153. },
  154. opts: {
  155. type: String,
  156. default: '',
  157. },
  158. });
  159. const emit = defineEmits(['close']);
  160.  
  161. const { id, opts } = props;
  162. const loading = ref(false);
  163. const tableData = ref([]);
  164. const visible = ref(false);
  165. const form = reactive({
  166. comprehensiveSinkRate: '',
  167. comprehensiveRoofRate: '',
  168. comprehensivePermeableRate: '',
  169. comprehensiveUnpermeableRate: '',
  170. newSinkRate: '',
  171. newRoofRate: '',
  172. newPermeableRate: '',
  173. newUnpermeableRate: '',
  174. landType: '',
  175. });
  176. const rules = reactive({
  177. comprehensiveSinkRate: isNumber('下沉式绿地率%', { required: true, min: 0, max: 100 }),
  178. comprehensiveRoofRate: isNumber('绿色屋顶率', { required: true, min: 0, max: 100 }),
  179. comprehensivePermeableRate: isNumber('透水铺装率', { required: true, min: 0, max: 100 }),
  180. comprehensiveUnpermeableRate: isNumber('不透水下垫面径流控制率', { required: true, min: 0, max: 100 }),
  181. comprehensiveUnpermeableRate: isNumber('不透水下垫面径流控制率', { required: true, min: 0, max: 100 }),
  182. newSinkRate: isNumber('下沉式绿地率%', { required: true, min: 0, max: 100 }),
  183. newRoofRate: isNumber('绿色屋顶率', { required: true, min: 0, max: 100 }),
  184. newPermeableRate: isNumber('透水铺装率', { required: true, min: 0, max: 100 }),
  185. newUnpermeableRate: isNumber('不透水下垫面径流控制率', { required: true, min: 0, max: 100 }),
  186. landType: required('用地类型', { required: true }),
  187. });
  188.  
  189. let configOpts = reactive({
  190. type: '',
  191. text: '',
  192. });
  193. let row = {};
  194.  
  195. const getTableList = async () => {
  196. loading.value = true;
  197. const res = await facilitiesSuggestRateConfigItemList({
  198. configId: id,
  199. });
  200. loading.value = false;
  201. if (res?.code === 200) {
  202. tableData.value = res.data;
  203. }
  204. };
  205.  
  206. const openDialog = (data, opt) => {
  207. row = data;
  208. configOpts.type = opt;
  209. configOpts.text = optTextMap.get(opt);
  210. visible.value = true;
  211. nextTick(() => {
  212. inheritAttr(data, form);
  213. console.log(form);
  214. });
  215. };
  216.  
  217. const closeDialog = () => {
  218. proxy.$refs.ruleForm.resetFields();
  219. visible.value = false;
  220. };
  221.  
  222. const submit = () => {
  223. proxy.$refs.ruleForm.validate(async (valid, fields) => {
  224. if (valid) {
  225. if (opts === 'add') {
  226. if (configOpts.type === 'add') {
  227. tableData.value.push({ ...form });
  228. } else {
  229. inheritAttr(form, row);
  230. }
  231. proxy.$modal.msgSuccess('操作成功!');
  232. } else {
  233. let method = configOpts.type === 'add' ? facilitiesSuggestRateConfigItemAdd : facilitiesSuggestRateConfigItemEdit;
  234. const params = { configId: id, ...form };
  235. if (configOpts.type === 'edit') {
  236. params.id = row.id;
  237. }
  238. const res = await method(params);
  239. if (res?.code !== 200) return;
  240. proxy.$modal.msgSuccess('操作成功!');
  241. getTableList();
  242. }
  243. closeDialog();
  244. } else {
  245. console.log('error submit!', fields);
  246. }
  247. });
  248. };
  249.  
  250. const del = (row, index) => {
  251. proxy.$modal
  252. .confirm('是否确认删除?')
  253. .then(async () => {
  254. if (opts === 'add') {
  255. tableData.value.splice(index, 1);
  256. } else {
  257. const res = await facilitiesSuggestRateConfigItemDel(row.id);
  258. if (res?.code !== 200) return;
  259. proxy.$modal.msgSuccess('操作成功!');
  260. getTableList();
  261. }
  262. })
  263. .catch(() => {});
  264. };
  265.  
  266. onMounted(() => {
  267. if (id) getTableList();
  268. });
  269.  
  270. defineExpose({
  271. tableData,
  272. });
  273. </script>
  274.  
  275. <style lang="scss" scoped>
  276. .btns {
  277. display: flex;
  278. justify-content: flex-end;
  279. margin-bottom: 15px;
  280. }
  281. .title {
  282. font-weight: 700;
  283. font-size: 16px;
  284. }
  285. :deep(.formItem) {
  286. label {
  287. width: 200px;
  288. word-break: keep-all;
  289. }
  290. }
  291. :deep(.beforeFormItem) {
  292. label {
  293. width: 120px;
  294. word-break: keep-all;
  295. }
  296. }
  297. </style>