- <template>
- <div class="btns" v-show="opts !== 'view'">
- <el-button type="primary" plain icon="Plus" @click="openDialog({}, 'add')">新增</el-button>
- </div>
- <el-table class="table" :data="tableData" v-loading="loading" max-height="680" element-loading-text="数据加载中...">
- <el-table-column type="index" width="55" label="序号" />
- <el-table-column label="用地类型" prop="landType" width="180">
- <template #default="{ row }">
- <span>{{ findText('sponge_land_type', row.landType) }}</span>
- </template>
- </el-table-column>
- <el-table-column v-for="column in columns" :label="column.label">
- <el-table-column v-for="item in column.list" :label="item.label" :prop="item.prop" width="200"> </el-table-column>
- </el-table-column>
- <template v-if="opts !== 'add'">
- <el-table-column label="修改时间" prop="updateTime" width="160" show-overflow-tooltip />
- <el-table-column label="修改人" prop="updateBy" show-overflow-tooltip />
- </template>
- <template v-if="opts !== 'view'">
- <el-table-column label="操作" width="150">
- <template #default="{ row, index }">
- <el-button type="primary" link size="small" @click="openDialog(row, 'view')">查看</el-button>
- <el-button type="primary" link size="small" @click="openDialog(row, 'edit')">修改</el-button>
- <el-button type="danger" link size="small" @click="del(row, index)">删除</el-button>
- </template>
- </el-table-column>
- </template>
- </el-table>
- <el-dialog
- v-model="visible"
- :title="`${configOpts.text}建议比例系数`"
- :close-on-click-modal="false"
- width="50%"
- :before-close="closeDialog"
- class="dialog"
- >
- <el-form ref="ruleForm" :model="form" :rules="rules" class="dialogForm" :disabled="configOpts.type === 'view'">
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="用地类型:" prop="landType">
- <el-select v-model="form.landType" placeholder="请选择用地类型" style="width: 100%">
- <el-option v-for="dict in sponge_land_type" :key="dict.value" :label="dict.label" :value="dict.value" />
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-card class="box-card" shadow="never">
- <template #header>
- <span class="title">综合治理类</span>
- </template>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="下沉式绿地率%:" prop="comprehensiveSinkRate" class="beforeFormItem">
- <el-input v-model="form.comprehensiveSinkRate" placeholder="请输入正整数" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="绿色屋顶率:" prop="comprehensiveRoofRate" class="formItem">
- <el-input v-model="form.comprehensiveRoofRate" placeholder="请输入正整数" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="透水铺装率:" prop="comprehensivePermeableRate" class="beforeFormItem" style="margin-bottom: 0">
- <el-input v-model="form.comprehensivePermeableRate" placeholder="请输入正整数" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="不透水下垫面径流控制率:" prop="comprehensiveUnpermeableRate" class="formItem" style="margin-bottom: 0">
- <el-input v-model="form.comprehensiveUnpermeableRate" placeholder="请输入正整数" />
- </el-form-item>
- </el-col>
- </el-row>
- </el-card>
- <el-card class="box-card" shadow="never" style="margin-top: 10px">
- <template #header>
- <span class="title">规划新建类</span>
- </template>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="下沉式绿地率%:" prop="newSinkRate" class="beforeFormItem">
- <el-input v-model="form.newSinkRate" placeholder="请输入正整数" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="绿色屋顶率:" prop="newRoofRate" class="formItem">
- <el-input v-model="form.newRoofRate" placeholder="请输入正整数" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="透水铺装率:" prop="newPermeableRate" class="beforeFormItem" style="margin-bottom: 0">
- <el-input v-model="form.newPermeableRate" placeholder="请输入正整数" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="不透水下垫面径流控制率:" prop="newUnpermeableRate" class="formItem" style="margin-bottom: 0">
- <el-input v-model="form.newUnpermeableRate" placeholder="请输入正整数" />
- </el-form-item>
- </el-col>
- </el-row>
- </el-card>
- </el-form>
- <template #footer v-if="configOpts.type !== 'view'">
- <div class="dialog-footer">
- <el-button type="primary" @click="submit">确定</el-button>
- <el-button @click="closeDialog">取消</el-button>
- </div>
- </template>
- </el-dialog>
- </template>
-
- <script setup>
- import { ref, reactive, onMounted } from 'vue';
- import { inheritAttr } from '@/utils/v3';
- import { optTextMap } from '@/utils/map';
- import { isNumber, required } from '@/utils/validate-helper';
- import {
- facilitiesSuggestRateConfigItemAdd,
- facilitiesSuggestRateConfigItemEdit,
- facilitiesSuggestRateConfigItemDel,
- facilitiesSuggestRateConfigItemList,
- } from '@/api/preassess/scaleConfig';
- import { useDicts } from '@/hooks';
- const { proxy } = getCurrentInstance();
- const { sponge_land_type, findText } = useDicts(proxy);
- const columns = reactive([
- {
- label: '综合整治类',
- list: [
- { label: '下沉式绿地率%', prop: 'comprehensiveSinkRate' },
- { label: '绿色屋顶率', prop: 'comprehensiveRoofRate' },
- { label: '透水铺装率', prop: 'comprehensivePermeableRate' },
- { label: '不透水下垫面径流控制率', prop: 'comprehensiveUnpermeableRate' },
- ],
- },
- {
- label: '规划新建类',
- list: [
- { label: '下沉式绿地率%', prop: 'newSinkRate' },
- { label: '绿色屋顶率', prop: 'newRoofRate' },
- { label: '透水铺装率', prop: 'newPermeableRate' },
- { label: '不透水下垫面径流控制率', prop: 'newUnpermeableRate' },
- ],
- },
- ]);
- const props = defineProps({
- id: {
- type: [String, Number],
- default: '',
- },
- opts: {
- type: String,
- default: '',
- },
- });
- const emit = defineEmits(['close']);
-
- const { id, opts } = props;
- const loading = ref(false);
- const tableData = ref([]);
- const visible = ref(false);
- const form = reactive({
- comprehensiveSinkRate: '',
- comprehensiveRoofRate: '',
- comprehensivePermeableRate: '',
- comprehensiveUnpermeableRate: '',
- newSinkRate: '',
- newRoofRate: '',
- newPermeableRate: '',
- newUnpermeableRate: '',
- landType: '',
- });
- const rules = reactive({
- comprehensiveSinkRate: isNumber('下沉式绿地率%', { required: true, min: 0, max: 100 }),
- comprehensiveRoofRate: isNumber('绿色屋顶率', { required: true, min: 0, max: 100 }),
- comprehensivePermeableRate: isNumber('透水铺装率', { required: true, min: 0, max: 100 }),
- comprehensiveUnpermeableRate: isNumber('不透水下垫面径流控制率', { required: true, min: 0, max: 100 }),
- comprehensiveUnpermeableRate: isNumber('不透水下垫面径流控制率', { required: true, min: 0, max: 100 }),
- newSinkRate: isNumber('下沉式绿地率%', { required: true, min: 0, max: 100 }),
- newRoofRate: isNumber('绿色屋顶率', { required: true, min: 0, max: 100 }),
- newPermeableRate: isNumber('透水铺装率', { required: true, min: 0, max: 100 }),
- newUnpermeableRate: isNumber('不透水下垫面径流控制率', { required: true, min: 0, max: 100 }),
- landType: required('用地类型', { required: true }),
- });
-
- let configOpts = reactive({
- type: '',
- text: '',
- });
- let row = {};
-
- const getTableList = async () => {
- loading.value = true;
- const res = await facilitiesSuggestRateConfigItemList({
- configId: id,
- });
- loading.value = false;
- if (res?.code === 200) {
- tableData.value = res.data;
- }
- };
-
- const openDialog = (data, opt) => {
- row = data;
- configOpts.type = opt;
- configOpts.text = optTextMap.get(opt);
- visible.value = true;
- nextTick(() => {
- inheritAttr(data, form);
- console.log(form);
- });
- };
-
- const closeDialog = () => {
- proxy.$refs.ruleForm.resetFields();
- visible.value = false;
- };
-
- const submit = () => {
- proxy.$refs.ruleForm.validate(async (valid, fields) => {
- if (valid) {
- if (opts === 'add') {
- if (configOpts.type === 'add') {
- tableData.value.push({ ...form });
- } else {
- inheritAttr(form, row);
- }
- proxy.$modal.msgSuccess('操作成功!');
- } else {
- let method = configOpts.type === 'add' ? facilitiesSuggestRateConfigItemAdd : facilitiesSuggestRateConfigItemEdit;
- const params = { configId: id, ...form };
- if (configOpts.type === 'edit') {
- params.id = row.id;
- }
- const res = await method(params);
- if (res?.code !== 200) return;
- proxy.$modal.msgSuccess('操作成功!');
- getTableList();
- }
- closeDialog();
- } else {
- console.log('error submit!', fields);
- }
- });
- };
-
- const del = (row, index) => {
- proxy.$modal
- .confirm('是否确认删除?')
- .then(async () => {
- if (opts === 'add') {
- tableData.value.splice(index, 1);
- } else {
- const res = await facilitiesSuggestRateConfigItemDel(row.id);
- if (res?.code !== 200) return;
- proxy.$modal.msgSuccess('操作成功!');
- getTableList();
- }
- })
- .catch(() => {});
- };
-
- onMounted(() => {
- if (id) getTableList();
- });
-
- defineExpose({
- tableData,
- });
- </script>
-
- <style lang="scss" scoped>
- .btns {
- display: flex;
- justify-content: flex-end;
- margin-bottom: 15px;
- }
- .title {
- font-weight: 700;
- font-size: 16px;
- }
- :deep(.formItem) {
- label {
- width: 200px;
- word-break: keep-all;
- }
- }
- :deep(.beforeFormItem) {
- label {
- width: 120px;
- word-break: keep-all;
- }
- }
- </style>