You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
308 lines
8.3 KiB
Vue
308 lines
8.3 KiB
Vue
<template>
|
|
<div class="data-list-div" style="padding-top: 1px;">
|
|
<div v-for="(item, index) in props.dataList" :key="index" class="data-list-item">
|
|
<div class="back-box" v-if="showDrawBack(item)">{{ drawBackSpan(item) }}</div>
|
|
<div class="data-list-layout-div">
|
|
<div class="data-list-title-div">
|
|
<img src="/positioning.png" class="map-mark" style="cursor:pointer;" @click="locationFun(item)"/>
|
|
<div class="label-div">
|
|
<div class="item-label">{{item.countyname}}</div>
|
|
<div class="item-sub-label">
|
|
<span style="margin-right:12px;">{{item.streetname}}</span>
|
|
<span>{{item.caseno}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="item-mark" v-if="item.isbuildname">{{item.isbuildname}}</div>
|
|
</div>
|
|
<div class="data-item-type-div" style="cursor:pointer;" @click="goAudit(item)">
|
|
{{item.unitname}}
|
|
</div>
|
|
</div>
|
|
<div class="data-list-info-div">
|
|
<div class="info-layout-div">
|
|
<div class="info-item" style="width: 130px;">
|
|
<div class="info-label">总面积</div>
|
|
<div class="info-data" :title="dataProcessing(item.area)">{{dataProcessing(item.area)}}</div>
|
|
</div>
|
|
<div class="info-item" style="width: 130px;">
|
|
<div class="info-label">违法</div>
|
|
<div class="info-data" :title="dataProcessing(item.nongyongdiarea)">{{dataProcessing(item.nongyongdiarea)}}</div>
|
|
</div>
|
|
<div class="info-item" style="width: 130px;">
|
|
<div class="info-label">耕地</div>
|
|
<div class="info-data" :title="dataProcessing(item.gengdiarea)">{{dataProcessing(item.gengdiarea)}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-layout-div">
|
|
<div>
|
|
<img src="@/assets/images/tiankongdi/collect-active.png" class="img-box" @click="collectItem(item)" v-if="item.fid"/>
|
|
<img src="@/assets/images/tiankongdi/collect.png" class="img-box" @click="collectItem(item)" v-else/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a-modal
|
|
width="100%"
|
|
wrap-class-name="full-modal"
|
|
v-model:open="auditOpen"
|
|
title="接收办理"
|
|
footer=""
|
|
:destroyOnClose="true"
|
|
>
|
|
<template #footer> </template>
|
|
<div class="handoff">
|
|
<a-button
|
|
type="primary"
|
|
style="margin-right: 25px;"
|
|
@click="prevData"
|
|
>上一条</a-button>
|
|
<a-button
|
|
type="primary"
|
|
@click="nextData"
|
|
>下一条</a-button>
|
|
</div>
|
|
<Audit
|
|
v-if="handoffShow"
|
|
ref="posRef"
|
|
:processId="processId"
|
|
:taskId="taskId"
|
|
:isRead="isRead"
|
|
:type="type"
|
|
@closeModel="closeMolder"
|
|
/>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineProps, defineEmits, ref } from "vue"
|
|
import {showDrawBack, drawBackSpan} from '@/views/demo/util'
|
|
import { dataProcessing } from '@/views/demo/tiankongdi/util'
|
|
import { message } from 'ant-design-vue'
|
|
import { useUserStore } from '@/store/modules/user'
|
|
import { flowStore } from '@/store/modules/flow';
|
|
import { getDetail } from '@/api/sys/WFSchemeInfo';
|
|
import { Audit } from '@/views/demo/workflow/task/process/page';
|
|
// TODO 更换接口
|
|
import { addTaskFavorite,deleteTaskCase } from '@/api/tiankongdi/index';
|
|
|
|
const userStore = useUserStore()
|
|
const flowWfDataStore = flowStore();
|
|
|
|
const props = defineProps(["dataList"])
|
|
const emits = defineEmits(["changeTask","query"])
|
|
|
|
const mapNo = ref('')
|
|
const searchList = ref([])
|
|
const showDataId = ref()
|
|
const auditOpen = ref(false);
|
|
const processId = ref('');
|
|
const taskId = ref('');
|
|
const type = ref('');
|
|
const isRead: any = ref(0);
|
|
const handoffShow = ref(true)
|
|
|
|
const locationFun = (record) => {
|
|
console.log(record);
|
|
emits('changeTask', record.geomid);
|
|
}
|
|
const goAudit = async (record) => {
|
|
showDataId.value = record.id
|
|
let data = await getDetail({ code: record.processcode });
|
|
let scheme = JSON.parse(data.scheme.content);
|
|
let wfData = scheme.wfData;
|
|
flowWfDataStore.setWfDataAll(wfData);
|
|
auditOpen.value = true;
|
|
processId.value = record.processid;
|
|
taskId.value = record.taskid;
|
|
type.value = record.type;
|
|
}
|
|
const collectItem = (item) => {
|
|
console.log(item,userStore.getUserInfo)
|
|
if(item.fid){
|
|
cancelCollectItem(item)
|
|
return
|
|
}
|
|
let userInfo = userStore.getUserInfo
|
|
let params = {
|
|
taskId: item.taskid,
|
|
favoriteUserId: userInfo.id
|
|
}
|
|
addTaskFavorite(params).then(res => {
|
|
console.log(res)
|
|
message.success('收藏成功')
|
|
emits('query')
|
|
})
|
|
}
|
|
const cancelCollectItem = (item) => {
|
|
deleteTaskCase(item.fid).then(res => {
|
|
message.success('取消收藏成功')
|
|
emits('query')
|
|
})
|
|
}
|
|
const prevData = () => {
|
|
}
|
|
const nextData = () => {
|
|
}
|
|
const closeMolder = () => {
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.data-list-div{
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: 10px;
|
|
scrollbar-width: none; /* firefox */
|
|
-ms-overflow-style: none; /* IE 10+ */
|
|
.data-list-item{
|
|
background:#fff;
|
|
padding:20px 10px 10px 10px;
|
|
// border-radius:6px;
|
|
margin-bottom:1px;
|
|
position: relative;
|
|
.back-box{
|
|
position: absolute;
|
|
right: 0;
|
|
top:0;
|
|
background: #EA1C06;
|
|
padding: 3px 6px;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
border-radius: 0px 0px 0px 8px;
|
|
}
|
|
.data-list-layout-div{
|
|
display:flex;
|
|
justify-content: space-between;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid #E5E5E5;
|
|
height: 45px;
|
|
.data-list-title-div{
|
|
display:flex;
|
|
align-items: center;
|
|
.map-mark{
|
|
width:17px;
|
|
height:17px;
|
|
}
|
|
.label-div{
|
|
display: flex;
|
|
align-items: baseline;
|
|
margin-right: 12px
|
|
}
|
|
.item-label{
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 500;
|
|
font-size: 23px;
|
|
color: #000000;
|
|
margin-left: 9px;
|
|
margin-right:10px;
|
|
}
|
|
.item-sub-label{
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 500;
|
|
font-size: 17px;
|
|
color: #000000;
|
|
}
|
|
.item-mark{
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 500;
|
|
font-size: 13px;
|
|
margin-left: 17px;
|
|
color: #696969;
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
.data-item-type-div{
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 500;
|
|
font-size: 15px;
|
|
color: #696969;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor:pointer;
|
|
user-select: none;
|
|
}
|
|
}
|
|
.data-list-info-div{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
height: 40px;
|
|
.info-layout-div{
|
|
display:flex;
|
|
align-items: center;
|
|
.info-time{
|
|
font-family: HarmonyOS Sans;
|
|
font-weight: 500;
|
|
font-size: 15px;
|
|
color: #000000;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.info-item{
|
|
display:flex;
|
|
background: rgba(237, 237, 237, 0.55);
|
|
align-items: center;
|
|
width: 110px;
|
|
border-radius: 7px;
|
|
margin-right: 8px;
|
|
height: 33px;
|
|
justify-content: center;
|
|
.info-label{
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
font-size: 13px;
|
|
color: #959494;
|
|
// width:45%;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-right: 5px;
|
|
white-space: nowrap;
|
|
}
|
|
.info-data{
|
|
font-family: HarmonyOS Sans;
|
|
font-weight: 500;
|
|
font-size: 13px;
|
|
color: #000000;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.data-list-item:nth-last-child(1){
|
|
border-bottom-left-radius: 6px;
|
|
border-bottom-right-radius: 6px
|
|
}
|
|
}
|
|
.data-list-div::-webkit-scrollbar {
|
|
display: none; /* Chrome Safari */
|
|
}
|
|
.img-box{
|
|
width: 25px;
|
|
cursor: pointer;
|
|
}
|
|
.full-modal {
|
|
.ant-modal {
|
|
min-width: 100vw;
|
|
top: 0px;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
.ant-modal-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.ant-modal-body {
|
|
flex: 1;
|
|
}
|
|
}
|
|
.handoff{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding-right: 25px;
|
|
}
|
|
</style>
|