style
This commit is contained in:
parent
be24fb0545
commit
0d420c1fa3
@ -7,9 +7,27 @@
|
|||||||
<div class="text">{{ item.value }}</div>
|
<div class="text">{{ item.value }}</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<h3>案件处理></h3>
|
<el-form :model="form">
|
||||||
<el-form></el-form>
|
<h3>案件处理></h3>
|
||||||
<h3>案件结果></h3>
|
<el-form-item label="案情记录：" prop="record">
|
||||||
|
<el-input v-model="form.record" type="textarea" placeholder="请输入"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="现场取证：(照片、视频)"></el-form-item>
|
||||||
|
<el-form-item label="执法文书：">
|
||||||
|
<section>
|
||||||
|
<el-radio-group v-model="form.document">
|
||||||
|
<el-radio :value="0" label="协助调查函"></el-radio>
|
||||||
|
<el-radio :value="1" label="抽样取样凭证"></el-radio>
|
||||||
|
<el-radio :value="2" label="检测报告"></el-radio>
|
||||||
|
<el-radio :value="3" label="其他文书"></el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</section>
|
||||||
|
</el-form-item>
|
||||||
|
<h3>案件结果></h3>
|
||||||
|
<el-form-item label="案件处理结果：">
|
||||||
|
<!-- <el-radio-group ></el-radio-group> -->
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -23,16 +41,21 @@ const props = defineProps({
|
|||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
watch(
|
|
||||||
() => props.visible,
|
|
||||||
(val) => {
|
|
||||||
_visible.value = val;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
/* --------------- data --------------- */
|
/* --------------- data --------------- */
|
||||||
// #region
|
// #region
|
||||||
|
|
||||||
const _visible = ref(false);
|
const _visible = ref(false);
|
||||||
|
watch(
|
||||||
|
() => props.visible,
|
||||||
|
(val) => {
|
||||||
|
_visible.value = val;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
const info = reactive([
|
const info = reactive([
|
||||||
{
|
{
|
||||||
label: '案件名称',
|
label: '案件名称',
|
||||||
@ -76,7 +99,13 @@ const info = reactive([
|
|||||||
line: true,
|
line: true,
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
const form = reactive({
|
||||||
|
record: '',
|
||||||
|
proof: [],
|
||||||
|
document: 0,
|
||||||
|
attrs: [],
|
||||||
|
result: 0,
|
||||||
|
});
|
||||||
// #endregion
|
// #endregion
|
||||||
|
|
||||||
/* --------------- methods --------------- */
|
/* --------------- methods --------------- */
|
||||||
|
|||||||
@ -1,284 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-drawer v-model="_visible" title="土地信息" :size="800" @close="handleClose">
|
|
||||||
<el-card>
|
|
||||||
<div class="title_">基础信息</div>
|
|
||||||
<el-form ref="baseForm" :model="baseInfo" :disabled="props.rowData.isDetails" class="base_form" label-width="120px" :rules="rules">
|
|
||||||
<el-form-item label="土地名称" prop="landName">
|
|
||||||
<el-input v-model="baseInfo.landName" placeholder="请输入名称"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="所属网格" prop="gridId">
|
|
||||||
<CustomSelect
|
|
||||||
v-model:value="baseInfo.gridId"
|
|
||||||
:set="{
|
|
||||||
url: '/land-resource/gridManage/page',
|
|
||||||
props: {
|
|
||||||
value: 'id',
|
|
||||||
label: 'gridName',
|
|
||||||
},
|
|
||||||
}"
|
|
||||||
placeholder="请选择所属网格"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="用地分类" prop="landClassificationType">
|
|
||||||
<LandClassificationType v-model:value="baseInfo.landClassificationType" placeholder="请选择用地分类" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="位置" prop="villageCode">
|
|
||||||
<el-input v-model="baseInfo.villageCode" placeholder="请输入"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="是否土地流转" prop="isTransfer">
|
|
||||||
<LandIsTransfer v-model:value="baseInfo.isTransfer" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="面积" prop="area">
|
|
||||||
<el-input v-model="baseInfo.area" placeholder="请输入面积"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="产权人" prop="owner">
|
|
||||||
<el-input v-model="baseInfo.owner" placeholder="请输入产权人姓名"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="土壤类型">
|
|
||||||
<el-input v-model="baseInfo.soilType" placeholder="请输入土壤类型"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-card>
|
|
||||||
<br />
|
|
||||||
<el-card>
|
|
||||||
<div class="title_">土地产权信息</div>
|
|
||||||
<el-form ref="propertyForm" :model="propertyInfo" :disabled="props.rowData.isDetails" class="property_form" label-width="120px">
|
|
||||||
<el-form-item label="产权人姓名" prop="propertyName">
|
|
||||||
<el-input v-model="propertyInfo.propertyName" placeholder="请输入联系人"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="产权人联系电话" prop="propertyPhone">
|
|
||||||
<el-input v-model="propertyInfo.propertyPhone" placeholder="请输入联系人"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="产权编号" prop="landCode" class="land_code">
|
|
||||||
<el-input v-model="propertyInfo.landCode" placeholder="请输入联系人"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="产权证书" prop="propertyCertificateUrl" class="attrs_content">
|
|
||||||
<el-upload class="custom-form__uploader" action="#" :show-file-list="false" accept="image/*" :limit="20" :http-request="rowUploadPicture">
|
|
||||||
<el-icon class="custom-form__uploader__icon"><Plus /></el-icon>
|
|
||||||
</el-upload>
|
|
||||||
<div v-for="item in propertyInfo.propertyCertificateUrl" :key="`attr_${item.id}`" class="attrs_content__item">
|
|
||||||
<img :src="item.url" :alt="item.name" style="width: 100%; height: 100%" />
|
|
||||||
<el-icon class="clear_btn" @click="handleClearAttr(item.id)"><CircleCloseFilled /></el-icon>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-card>
|
|
||||||
<section class="btns">
|
|
||||||
<el-button type="primary" :disabled="props.rowData.isDetails" @click="handleSubmit">保存并提交审核</el-button>
|
|
||||||
<!-- <el-button type="warning" :disabled="props.rowData.info" @click="handleSubmit">保存草稿</el-button> -->
|
|
||||||
<el-button @click="handleClose">取消</el-button>
|
|
||||||
</section>
|
|
||||||
</el-drawer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { reactive, ref, watch } from 'vue';
|
|
||||||
import LandClassificationType from '@/components/LandClassificationType.vue';
|
|
||||||
import CustomSelect from '@/components/CustomSelect.vue';
|
|
||||||
import LandIsTransfer from '@/components/LandIsTransfer.vue';
|
|
||||||
import { saveLand } from '@/apis/land';
|
|
||||||
import { ElMessage } from 'element-plus';
|
|
||||||
import { CommonUpload } from '@/apis';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
visible: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
landType: {
|
|
||||||
type: String,
|
|
||||||
default: '0',
|
|
||||||
},
|
|
||||||
rowData: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const emit = defineEmits(['close']);
|
|
||||||
/* --------------- data --------------- */
|
|
||||||
// #region
|
|
||||||
|
|
||||||
const _visible = ref(false);
|
|
||||||
const editId = ref(null);
|
|
||||||
const baseInfo = reactive({
|
|
||||||
landName: '',
|
|
||||||
gridId: '',
|
|
||||||
landClassificationType: '',
|
|
||||||
villageCode: '',
|
|
||||||
isTransfer: '1',
|
|
||||||
area: '',
|
|
||||||
owner: '',
|
|
||||||
soilType: '',
|
|
||||||
});
|
|
||||||
const propertyInfo = reactive({
|
|
||||||
propertyName: '',
|
|
||||||
propertyPhone: '',
|
|
||||||
landCode: '',
|
|
||||||
propertyCertificateUrl: [],
|
|
||||||
});
|
|
||||||
watch(
|
|
||||||
() => props.visible,
|
|
||||||
() => {
|
|
||||||
_visible.value = props.visible;
|
|
||||||
if (!props.rowData.id) {
|
|
||||||
editId.value = props.rowData.id;
|
|
||||||
} else {
|
|
||||||
for (let key in baseInfo) {
|
|
||||||
baseInfo[key] = props.rowData[key];
|
|
||||||
}
|
|
||||||
baseInfo.isTransfer = props.rowData.landTransfer || '0';
|
|
||||||
for (let key in propertyInfo) {
|
|
||||||
propertyInfo[key] = props.rowData[key];
|
|
||||||
}
|
|
||||||
if (propertyInfo.propertyCertificateUrl) {
|
|
||||||
propertyInfo.propertyCertificateUrl = props.rowData.propertyCertificateUrl.map((item, i) => {
|
|
||||||
return {
|
|
||||||
url: item.url,
|
|
||||||
id: `id_${i}_${Date.now()}`,
|
|
||||||
name: item.name || `name_${i}_${Date.now()}`,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
watch(
|
|
||||||
() => baseInfo,
|
|
||||||
() => {
|
|
||||||
console.log('---', baseInfo);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
const baseForm = ref();
|
|
||||||
const propertyForm = ref();
|
|
||||||
const rules = reactive({
|
|
||||||
landName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
|
||||||
gridId: [{ required: true, message: '请选择所属网格', trigger: 'blur' }],
|
|
||||||
landClassificationType: [{ required: true, message: '请选择用地分类', trigger: 'blur' }],
|
|
||||||
villageCode: [{ required: true, message: '请输入位置', trigger: 'blur' }],
|
|
||||||
});
|
|
||||||
// #endregion
|
|
||||||
|
|
||||||
/* --------------- methods --------------- */
|
|
||||||
// #region
|
|
||||||
const rowUploadPicture = async ({ file }) => {
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append('file', file);
|
|
||||||
const res = await CommonUpload(formData);
|
|
||||||
if (res.code === 200) {
|
|
||||||
propertyInfo.propertyCertificateUrl.push({
|
|
||||||
...res.data,
|
|
||||||
id: 'id_' + Date.now(),
|
|
||||||
});
|
|
||||||
console.log('---', res);
|
|
||||||
// state.form.productUrl = res.data.url;
|
|
||||||
// const base64 = await imageToBase64(file);
|
|
||||||
// state.form.base64 = base64;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
function handleClearAttr(id) {
|
|
||||||
propertyInfo.propertyCertificateUrl = propertyInfo.propertyCertificateUrl.filter((item) => item.id !== id);
|
|
||||||
}
|
|
||||||
async function handleSubmit() {
|
|
||||||
baseForm.value.validate().then(async () => {
|
|
||||||
const data = {
|
|
||||||
...baseInfo,
|
|
||||||
...propertyInfo,
|
|
||||||
isDraftsSave: 0,
|
|
||||||
landType: props.landType,
|
|
||||||
};
|
|
||||||
let ids = [];
|
|
||||||
propertyInfo.propertyCertificateUrl.map((item) => ids.push(item.url));
|
|
||||||
data.propertyCertificateUrl = ids.join();
|
|
||||||
editId.value && (data.id = editId.value);
|
|
||||||
const res = await saveLand(data);
|
|
||||||
if (res.code == 200) {
|
|
||||||
ElMessage.success('保存成功');
|
|
||||||
resFrom();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
function handleClose() {
|
|
||||||
resFrom();
|
|
||||||
emit('close');
|
|
||||||
}
|
|
||||||
function resFrom() {
|
|
||||||
baseForm.value.resetFields();
|
|
||||||
propertyForm.value.resetFields();
|
|
||||||
for (let key in baseInfo) {
|
|
||||||
baseInfo[key] = '';
|
|
||||||
}
|
|
||||||
for (let key in propertyInfo) {
|
|
||||||
propertyInfo[key] = '';
|
|
||||||
}
|
|
||||||
propertyInfo.propertyCertificateUrl = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// #endregion
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.title_ {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.base_form,
|
|
||||||
.property_form {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
.btns {
|
|
||||||
margin-top: 12px;
|
|
||||||
display: grid;
|
|
||||||
justify-content: center;
|
|
||||||
grid-template-columns: auto auto auto;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
.attrs_content__item {
|
|
||||||
position: relative;
|
|
||||||
padding: 6px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
img {
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.clear_btn {
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
top: 0px;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #f15c5c;
|
|
||||||
opacity: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
.clear_btn {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
::v-deep() {
|
|
||||||
.land_code {
|
|
||||||
.el-form-item__content {
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.attrs_content {
|
|
||||||
.el-form-item__content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 10px;
|
|
||||||
> div {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -547,46 +547,4 @@ async function handleRowSave(val, done, loading) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.create_land_attrs_content_ {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
box-sizing: border-box;
|
|
||||||
gap: 20px;
|
|
||||||
.custom-form__uploader {
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
> div {
|
|
||||||
width: calc(50% - 10px);
|
|
||||||
aspect-ratio: 1 / 1;
|
|
||||||
}
|
|
||||||
.attrs_content__item {
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
padding: 6px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.clear_btn {
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
top: 0px;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #f15c5c;
|
|
||||||
opacity: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
.clear_btn {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user