style
This commit is contained in:
parent
be24fb0545
commit
0d420c1fa3
@ -7,9 +7,27 @@
|
||||
<div class="text">{{ item.value }}</div>
|
||||
</div>
|
||||
</section>
|
||||
<el-form :model="form">
|
||||
<h3>案件处理></h3>
|
||||
<el-form></el-form>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@ -23,16 +41,21 @@ const props = defineProps({
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
_visible.value = val;
|
||||
}
|
||||
);
|
||||
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
|
||||
const _visible = ref(false);
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
_visible.value = val;
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
const info = reactive([
|
||||
{
|
||||
label: '案件名称',
|
||||
@ -76,7 +99,13 @@ const info = reactive([
|
||||
line: true,
|
||||
},
|
||||
]);
|
||||
|
||||
const form = reactive({
|
||||
record: '',
|
||||
proof: [],
|
||||
document: 0,
|
||||
attrs: [],
|
||||
result: 0,
|
||||
});
|
||||
// #endregion
|
||||
|
||||
/* --------------- 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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user