Skip to content

广
广东建设用地-前端
提交 d1ec83c4 authored 作者: gjx's avatar gjx
浏览文件
操作

地块搜索里面接口调用

上级 b46f1a43
隐藏空白字符变更
内嵌 并排
正在显示 包含 368 行增加 和 148 行删除
src/api/common/api.ts
浏览文件 @ d1ec83c4
...@@ -16,6 +16,14 @@ enum Api { ...@@ -16,6 +16,14 @@ enum Api {
getCategoryData = '/sys/category/loadAllData', getCategoryData = '/sys/category/loadAllData',
} }
// 获取地市行政区域
export const getTown = (params) => {
return defHttp.get({ url: `/sys/api/xzbm/${params}` });
}
// 字典
export const dict = (params) => {
return defHttp.get({ url: `/sys/api/queryDictItemsByCode/${params}` });
}
/** /**
* 上传父路径 * 上传父路径
*/ */
......
src/components/FormModel.vue
浏览文件 @ d1ec83c4
<template> <template>
<a-form ref="formRef" autocomplete="off" :model="form" class="forms" :layout="layout"> <div>
<template v-for="v in FormData" :key="v?.name"> <a-form ref="formRef" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" :model="form"
<a-form-item :field="v?.name" :label="v?.label" v-if="v?.type === 'data'"> class="forms" :layout="layout">
<a-date-picker v-model:value="form[v.name]" /> <template v-for="v in FormData" :key="v?.name">
<a-form-item :field="v?.name" :label="v?.label" v-if="v?.type === 'data'">
<a-date-picker v-model:value="form[v.name]" />
</a-form-item>
<a-form-item :label="v.label" v-else-if="v?.type === 'range'">
<a-range-picker v-model:value="form[v.name]" show-time format="YYYY-MM-DD HH:mm" />
</a-form-item>
<a-form-item :label="v.label" v-else-if="v?.type === 'select'">
<a-select v-model:value="form[v.name]" :mode="v.tags" :show-search="v.search" :placeholder="`请选择${v.label}`" @search="v?.handleSearch" @select="v.select">
<a-select-option v-for="item in v.data" :key="item.id" :value="item.id" :label="item.name">{{
item.name
}}</a-select-option>
</a-select>
</a-form-item>
<a-form-item :label="v.label" v-else-if="v?.type === 'cascader'">
<div class="catetory">
<div class="cateto-cont" @click="v.show = true">{{ categoryTtle || `请选择${v.label}` }}</div>
<div style="justify-content: end;" @click="del(v)">
<CloseOutlined />
</div>
</div>
<a-modal v-model:visible="v.show" :footer="false" title="选择行业类别">
<ModelCategory @getValue="getCategory" />
</a-modal>
</a-form-item>
<a-form-item :label="v.label" :auto-label-width="true" v-else>
<a-input v-model:value="form[v.name]" :placeholder="`请输入${v.label}`" />
</a-form-item>
</template>
<a-form-item>
<a-button type="primary" @click="handleSubmit" class="mr-6 ml-6">
<SearchOutlined />搜索
</a-button>
<a-button @click="reset">
<RollbackOutlined />重置
</a-button>
</a-form-item> </a-form-item>
<a-form-item :label="v.label" v-else-if="v?.type === 'range'"> </a-form>
<a-range-picker v-model:value="form[v.name]" show-time format="YYYY-MM-DD HH:mm" />
</a-form-item> </div>
<a-form-item :label="v.label" v-else-if="v?.type === 'select'">
<a-select v-model:value="form[v.name]" :placeholder="`请选择${v.label}`">
<a-select-option v-for="item in v.data" :key="item.name" :value="item.value" :label="item.label">{{
item.label
}}</a-select-option>
</a-select>
</a-form-item>
<a-form-item :label="v.label" v-else-if="v?.type === 'cascader'">
<a-cascader :options="v.data" v-model="form[v.name]" :placeholder="`请输入${v.label}`" allow-clear />
</a-form-item>
<a-form-item :label="v.label" :auto-label-width="true" v-else>
<a-input v-model:value="form[v.name]" :placeholder="`请输入${v.label}`" />
</a-form-item>
</template>
<a-form-item>
<a-button type="primary" @click="handleSubmit" class="mr-6 ml-6">查询</a-button>
<a-button @click="reset">重置</a-button>
</a-form-item>
</a-form>
</template> </template>
<script setup > <script setup lang="ts">
import { computed, ref, reactive, defineEmits } from 'vue'; import { ref, defineEmits, watch } from 'vue';
import { SearchOutlined, CloseOutlined,RollbackOutlined } from '@ant-design/icons-vue';
import ModelCategory from './ModelCategory.vue';
const props = defineProps({ const props = defineProps({
FormData: Object, FormData: Object,
...@@ -41,30 +59,77 @@ const props = defineProps({ ...@@ -41,30 +59,77 @@ const props = defineProps({
const emit = defineEmits('submits') const emit = defineEmits('submits')
const formRef = ref() const formRef = ref()
const form = ref({}) const form = ref({})
props.FormData?.forEach(v => {
form.value[v.name] = v.value
}); watch(
() => props.FormData,
(item: any) => {
item.forEach((v: any) => {
form.value[v.name] = v.value
});
}, { deep: true }
);
// 点击提交 // 点击提交
function handleSubmit(data) { function handleSubmit() {
emit('submits', form.value) emit('submits', form.value)
} }
function reset() { function reset() {
formRef.value.resetFields(); formRef.value.resetFields();
// 不知道为啥不起作用 // 不知道为啥不起作用
for (let k in form.value) { for (let k in form.value) {
form.value[k] = '' form.value[k] = null
} }
categoryTtle.value = ''
}
// 行业类编相关的
const categoryTtle = ref()
function getCategory(val: any) {
props.FormData?.forEach(v => {
if (v.name === 'category') {
v.value = val.id;
form.value[v.name] = val.id;
categoryTtle.value = val.label
v.show = false
}
})
}
function del(v: any) {
v.value = null
form.value[v.name] = null;
categoryTtle.value = ""
} }
</script> </script>
<style lang="less"> <style lang="less">
.forms { .forms {
width: 100%; width: 100%;
padding: 25px 0; padding: 35px 0;
border-bottom: 1px solid #F0F0F0; border-bottom: 1px solid #F0F0F0;
.catetory {
border: 1px solid #F0F0F0;
height: 35px;
line-height: 35px;
text-indent: 12px;
display: flex;
}
.cateto-cont {
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ant-form-item {
width: 16%;
min-width: 16%;
}
.ant-col { .ant-col {
width: 130px;
margin-top: 15px; margin-top: 15px;
} }
} }
......
src/components/ModelCategory.vue 0 → 100644
浏览文件 @ d1ec83c4
<template>
<div>
<a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="Search" />
<a-tree :expanded-keys="expandedKeys" :auto-expand-parent="autoExpandParent" :tree-data="list" @select="onSelect"
@expand="onExpand">
<template #title="{ title }">
<span v-if="title.indexOf(searchValue) > -1">
{{ title.substr(0, title.indexOf(searchValue)) }}
<span style="color: #f50">{{ searchValue }}</span>
{{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
</span>
<span v-else>{{ title }}</span>
</template>
</a-tree>
</div>
</template>
<script setup lang="ts">
import { categoryStore } from '/@/store/Category'
import { ref, watch,defineEmits } from 'vue';
const emit = defineEmits('getValue')
const list = categoryStore().category
const expandedKeys = ref<(string | number)[]>([]);
const searchValue = ref<string>('');
const autoExpandParent = ref<boolean>(true);
const dataList: any = ref([]);
const onExpand = (keys: string[]) => {
expandedKeys.value = keys;
autoExpandParent.value = false;
};
const onSelect = (keys: any, nodes: any) => {
console.log(nodes, 33)
console.log(nodes.node.title, 33)
emit('getValue', {
label: nodes.node.title,
id:nodes.node.key
})
}
watch(searchValue, value => {
const expanded = dataList.value
.map((item: any) => {
if (item.title.indexOf(value) > -1) {
return getParentKey(item.key, list.value);
}
return null;
})
.filter((item, i, self) => item && self.indexOf(item) === i);
expandedKeys.value = expanded;
searchValue.value = value;
autoExpandParent.value = true;
});
const getParentKey = (
key: string | number,
tree: any,
): string | number | undefined => {
let parentKey;
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.children) {
if (node.children.some(item => item.key === key)) {
parentKey = node.key;
} else if (getParentKey(key, node.children)) {
parentKey = getParentKey(key, node.children);
}
}
}
return parentKey;
};
</script>
\ No newline at end of file
src/store/Category.ts 0 → 100644
浏览文件 @ d1ec83c4
// 行业类别
import { defHttp } from '/@/utils/http/axios';
import { defineStore } from 'pinia'
// 获取行业类别接口并存起来
const categoryList = () => {
return defHttp.get({
url: '/sys/api/tree/hylb'
});
};
// 获取行业类别的数据
let list = []
async function getCategoryList() {
const res = await categoryList()
list = transformArray(res)
}
getCategoryList()
function transformArray(arr) {
return arr.map(node => {
const newNode = {};
for (const key in node) {
if (key === 'name') {
newNode['title'] = node[key];
} else if (key === 'id') {
newNode['key'] = node[key];
} else if (Array.isArray(node[key])) {
newNode[key] = transformArray(node[key]);
} else {
newNode[key] = node[key];
}
}
return newNode;
});
}
interface Category {
category: any,
}
export const categoryStore = defineStore('category', {
state: (): Category => ({
category: list || [],
}),
getters: {
getCategory(): any {
return this.category
}
},
actions: {
setCategory(text: any) {
this.category = text
}
}
})
src/utils/modifFiled.ts 0 → 100644
浏览文件 @ d1ec83c4
// 把后台的字段改成前端需要的
export function transformArray(arr: any, origA: any, origB: any, newA: any, newB: any) {
return arr.map(node => {
const newNode = {};
for (const key in node) {
if (key === origA) {
newNode[newA] = node[key];
} else if (key === origB) {
newNode[newB] = node[key];
} else if (Array.isArray(node[key])) {
newNode[key] = transformArray(node[key], origA, origB, newA, newB);
} else {
newNode[key] = node[key];
}
}
return newNode;
});
}
\ No newline at end of file
src/views/dkgl/DkglList.vue
浏览文件 @ d1ec83c4
...@@ -27,92 +27,77 @@ ...@@ -27,92 +27,77 @@
</div> </div>
</template> </template>
<script setup > <script setup lang="ts">
import { ref, reactive } from 'vue'; import { ref, reactive } from 'vue';
import Form from '/@/components/FormModel.vue' import Form from '/@/components/FormModel.vue'
import { DownloadOutlined } from '@ant-design/icons-vue'; import { DownloadOutlined } from '@ant-design/icons-vue';
import { list as getList } from '/@/api/dkgl' import { list as getList } from '/@/api/dkgl'
import { getTown, dict } from '/@/api/common/api'
import { transformArray } from '/@/utils/modifFiled'
const current = ref(1) const pageNo = ref<any>(1)
const pageSize = ref(10) const pageSize = ref<any>(10)
const pagination = ref({ const pagination = ref<any>({
total: 0, total: 0,
current: current.value, pageNo: pageNo.value,
pagination: pageSize.value pagination: pageSize.value
}); });
const FormData = ref( // 获取城镇的
async function tomnData(v: any) {
const res = await getTown(v)
if (v === '440000') {
FormData.value[0].data = res
} else {
FormData.value[1].value = null
FormData.value[1].data = res
}
}
tomnData('440000')
// 获取行业类编
async function getClass(v: any) {
const res = await dict(v)
// 转字段名称，下拉框 用的 name 跟 id字段
FormData.value[2].data = transformArray(res, 'text', 'value', 'name', 'id')
}
getClass('org_category')
const FormData = ref<any>(
[ [
{ {
name: 'name', name: 'cityCode',
label: '行政区', label: '行政区',
type: 'select', type: 'select',
value: '', value: null,
data: [ select: (v) => {
{ FormData.value[0].value = v
label: '北京', tomnData(v)
value: 3 },
}, data: []
{
label: '上海',
value: 4
}
]
}, },
{ {
name: 'city', name: 'countyCode',
label: '区县', label: '区县',
type: 'select', type: 'select',
value: '', value: null,
data: [ data: [],
{ select: (v) => {
label: '北京', FormData.value[1].value = v
value: 3 },
},
{
label: '上海',
value: 4
}
]
}, },
{ {
name: 'class', name: 'hyfl',
label: '行业分类', label: '行业分类',
type: 'select', type: 'select',
value: '', value: '',
data: [ data: []
{
label: '北京',
value: 3
},
{
label: '上海',
value: 4
}
]
}, },
{ {
name: 'leibie', name: 'category',
label: '行业类别', label: '行业类别',
type: 'cascader', type: 'cascader',
value: '', value: 'org_category',
data: [ show: false,
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
]
}
]
}, },
{ {
name: 'leixing', name: 'leixing',
...@@ -142,76 +127,91 @@ const FormData = ref( ...@@ -142,76 +127,91 @@ const FormData = ref(
}, },
] ]
) )
const rowSelection = reactive({ const rowSelection = reactive<any>({
type: 'checkbox', type: 'checkbox',
showCheckedAll: true, showCheckedAll: true,
onlyCurrent: false, onlyCurrent: false,
}); });
const columns = ref([{ const columns = ref<any>([
title: '序号', {
key: 'index', title: '地块名称',
}, dataIndex: 'landname',
{ },
title: '地块名称', {
dataIndex: 'landname', title: '地块编码',
}, dataIndex: 'codeLand',
{ },
title: '地块编码', {
dataIndex: 'codeLand', title: '市',
}, dataIndex: 'cityCode',
{ },
title: '市', {
dataIndex: 'email', title: '县',
}, dataIndex: 'countyCode',
{ },
title: '县', {
dataIndex: 'email', title: '行业类别',
}, dataIndex: 'tradename',
{ },
title: '行业类别', {
dataIndex: 'tradename', title: '政策依据',
}, dataIndex: 'policy',
{ ellipsis: true,
title: '政策依据', },
dataIndex: 'policy', {
}, title: '地块类型',
{ dataIndex: 'nameLandtype',
title: '地块类型', },
dataIndex: 'nameLandtype', {
}, title: '更新时间',
{ dataIndex: 'modifyDate',
title: '更新时间', },
dataIndex: 'modifyDate', {
}, title: '登录账号',
{ dataIndex: 'username',
title: '登录账号', },
dataIndex: 'username', {
}, title: '操作',
{ key: 'action',
title: '操作', },
key: 'action',
},
]) ])
const list = ref([]) const list = ref<any>([])
const form = ref({}) const form = ref<any>({})
function submit(val) { function submit(val: any) {
form.value = val form.value = val
// 其中行业类编里面。如果值的长度是1 传'hyml'字段 则代表一类 如果值的长度是2 hydl
// 长度是3 hyzl 长度是4 hyxl
console.log(form.value, 'val') console.log(form.value, 'val')
init() init()
} }
async function init() { async function init() {
const res = await getList({ ...form.value, current: current.value, pageSize: pageSize.value }) let params: any = {}
params = form.value
if (params?.category) {
if (params?.category.length == 1) {
params.hyml = params.category
} else if (params?.category.length == 2) {
params.hydl = params.category
} else if (params?.category.length == 3) {
params.hyzl = params.category
} else if (params?.category.length == 4) {
params.hyxl = params.category
}
delete params.category
console.log(params, 3)
}
const res = await getList({ ...params, pageNo: pageNo.value, pageSize: pageSize.value })
list.value = res.records list.value = res.records
pagination.value.total = res.total pagination.value.total = res.total
pagination.value.current = res.current
pagination.value.pageSize = res.size pagination.value.pageSize = res.size
} }
init() init()
function handleTableChange(val) { function handleTableChange(val: any) {
current.value = val.current pageNo.value = val.current
pageSize.value = val.pageSize pageSize.value = val.pageSize
init() init()
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.dk-list { .dk-list {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论