From a6b40a1b80b586f7dbd874f3939f5e06fcc752d2 Mon Sep 17 00:00:00 2001
From: 付延余 <f-yanyu@outlook.com>
Date: 星期三, 04 一月 2023 19:24:14 +0800
Subject: [PATCH] '页面尺寸自适应初期调整'
---
src/views/padSunmaryProcedure/padFrom.vue | 326 +++++++++++++++++++++++++++++++-----------------------
1 files changed, 186 insertions(+), 140 deletions(-)
diff --git a/src/views/padSunmaryProcedure/padFrom.vue b/src/views/padSunmaryProcedure/padFrom.vue
index 1f30d69..e64501a 100644
--- a/src/views/padSunmaryProcedure/padFrom.vue
+++ b/src/views/padSunmaryProcedure/padFrom.vue
@@ -1,24 +1,30 @@
<template>
- <el-main style="width: 100%;margin: 0 auto">
- <el-form ref="form" :rules="dataRules" :model="form" label-width="130px" size="medium">
- <el-form-item label="妗堢敱" prop="casePoint">
- <el-input v-model="form.casePoint" placeholder="璇峰～鍐欐鐢�"></el-input>
+ <!-- 鍒涘缓 -->
+ <el-main style="width: 96%;margin: 20px auto 0;">
+ <el-form ref="form"
+ :rules="dataRules"
+ :model="form"
+ label-width="130px"
+ size="medium">
+ <el-form-item label="妗堢敱"
+ prop="casePoint">
+ <el-input v-model="form.casePoint"
+ placeholder="璇峰～鍐欐鐢�"></el-input>
</el-form-item>
<el-row>
<el-col :span="12">
- <el-form-item label="褰撲簨浜哄鍚�" prop="litigant">
- <el-autocomplete
- style="width: 100%!important;"
- v-model="form.litigant"
- filterable
- :fetch-suggestions="querySearchHandle"
- placeholder="褰撲簨浜哄鍚�"
- :trigger-on-focus="false"
- @select="handleSelect"
- >
+ <el-form-item label="褰撲簨浜哄鍚�"
+ prop="litigant">
+ <el-autocomplete style="width: 100%!important;"
+ v-model="form.litigant"
+ filterable
+ :fetch-suggestions="querySearchHandle"
+ placeholder="褰撲簨浜哄鍚�"
+ :trigger-on-focus="false"
+ @select="handleSelect">
</el-autocomplete>
-<!-- <el-select v-model="form.litigant" placeholder="璇烽�夋嫨褰撲簨浜�"
+ <!-- <el-select v-model="form.litigant" placeholder="璇烽�夋嫨褰撲簨浜�"
style="width: 100%;" @change="marketChange">
<el-option
v-for="item in marketList"
@@ -30,30 +36,44 @@
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="娉曚汉" prop="legalPerson">
- <el-input v-model="form.legalPerson" placeholder="璇峰～鍐欐硶浜哄鍚�"></el-input>
+ <el-form-item label="娉曚汉"
+ prop="legalPerson">
+ <el-input v-model="form.legalPerson"
+ placeholder="璇峰～鍐欐硶浜哄鍚�"></el-input>
</el-form-item>
</el-col>
</el-row>
- <el-form-item label="璇佷欢鍙�/淇＄敤鐮�" prop="certNo">
- <el-input v-model="form.certNo" placeholder="璇峰～鍐欒瘉浠跺彿/淇＄敤鐮�"></el-input>
+ <el-form-item label="璇佷欢鍙�/淇＄敤鐮�"
+ prop="certNo">
+ <el-input v-model="form.certNo"
+ placeholder="璇峰～鍐欒瘉浠跺彿/淇＄敤鐮�"></el-input>
</el-form-item>
- <el-form-item label="鑱旂郴鐢佃瘽" prop="phone">
- <el-input v-model="form.phone" placeholder="璇峰～鍐欏綋浜嬩汉鐢佃瘽"></el-input>
+ <el-form-item label="鑱旂郴鐢佃瘽"
+ prop="phone">
+ <el-input v-model="form.phone"
+ placeholder="璇峰～鍐欏綋浜嬩汉鐢佃瘽"></el-input>
</el-form-item>
- <el-form-item label="浣忓潃" prop="address">
- <el-input v-model="form.address" placeholder="璇峰～鍐欏綋浜嬩汉浣忓潃"></el-input>
+ <el-form-item label="浣忓潃"
+ prop="address">
+ <el-input v-model="form.address"
+ placeholder="璇峰～鍐欏綋浜嬩汉浣忓潃"></el-input>
</el-form-item>
- <el-form-item label="鍔炴浜哄憳" prop="hanlderIds">
- <el-select v-model="form.hanlderIds" clearable filterable multiple :multiple-limit="2"
- placeholder="璇烽�夋嫨" style="width: 100%;" @change="setPersonname($event)">
- <el-option
- v-for="item in organPersons"
- :key="item.userId"
- :label="item.realName"
- :value="item.userId">
+ <el-form-item label="鍔炴浜哄憳"
+ prop="hanlderIds">
+ <el-select v-model="form.hanlderIds"
+ clearable
+ filterable
+ multiple
+ :multiple-limit="2"
+ placeholder="璇烽�夋嫨"
+ style="width: 100%;"
+ @change="setPersonname($event)">
+ <el-option v-for="item in organPersons"
+ :key="item.userId"
+ :label="item.realName"
+ :value="item.userId">
<span style="float: left">{{ item.realName }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">鎵ф硶璇佸彿锛歿{ item.lawCert }}</span>
</el-option>
@@ -61,36 +81,46 @@
</el-form-item>
<el-row>
<el-col :span="12">
- <el-form-item label="鎵�灞炲煄闀�" prop="city">
- <el-select v-model="form.city" filterable placeholder="璇烽�夋嫨鎵�灞炲煄闀�" style="width: 100%;">
- <el-option
- v-for="item in areaList"
- :label="item.label"
- :value="item.value">
+ <el-form-item label="鎵�灞炲煄闀�"
+ prop="city">
+ <el-select v-model="form.city"
+ filterable
+ placeholder="璇烽�夋嫨鎵�灞炲煄闀�"
+ style="width: 100%;">
+ <el-option v-for="item in areaList"
+ :label="item.label"
+ :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="鎵�灞為鍩�" prop="category">
- <el-select v-model="form.category" placeholder="璇烽�夋嫨鎵�灞為鍩�" style="width: 100%;">
- <el-option
- v-for="item in categoryList"
- :label="item.label"
- :value="item.value">
+ <el-form-item label="鎵�灞為鍩�"
+ prop="category">
+ <el-select v-model="form.category"
+ placeholder="璇烽�夋嫨鎵�灞為鍩�"
+ style="width: 100%;">
+ <el-option v-for="item in categoryList"
+ :label="item.label"
+ :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
- <el-form-item label="缁忕含搴�" style="display:none;">
- <el-input v-model="form.latitude" placeholder="璇峰～鍐欑粡绾害"></el-input>
+ <el-form-item label="缁忕含搴�"
+ style="display:none;">
+ <el-input v-model="form.latitude"
+ placeholder="璇峰～鍐欑粡绾害"></el-input>
</el-form-item>
- <el-form-item label="杩濇硶鍦扮偣" prop="place">
- <el-input v-model="form.place" placeholder="璇峰～鍐欒繚娉曞湴鐐�"></el-input>
+ <el-form-item label="杩濇硶鍦扮偣"
+ prop="place">
+ <el-input v-model="form.place"
+ placeholder="璇峰～鍐欒繚娉曞湴鐐�"></el-input>
</el-form-item>
<el-form-item>
- <el-button type="primary" @click="onSubmit">绔嬪嵆鍒涘缓</el-button>
+ <el-button type="primary"
+ @click="onSubmit">绔嬪嵆鍒涘缓</el-button>
<el-button @click="backAll">鍙栨秷</el-button>
</el-form-item>
</el-form>
@@ -98,35 +128,35 @@
</template>
<script>
-import {easycase, getMarketList, getIdByToken} from '../../api/News/pad'
-import {getfindAll} from "../../api/News/useres";
-import {remote} from "@/api/admin/dict"
+import { easycase, getMarketList, getIdByToken } from '../../api/News/pad'
+import { getfindAll } from '../../api/News/useres'
+import { remote } from '@/api/admin/dict'
export default {
- name: "padFrom",
+ name: 'padFrom',
data() {
var validatePerson = (rule, value, callback) => {
if (value.length != 2) {
- callback(new Error('鍔炴浜哄憳蹇呴』閫夋嫨涓や綅'));
+ callback(new Error('鍔炴浜哄憳蹇呴』閫夋嫨涓や綅'))
} else {
- callback();
+ callback()
}
- };
+ }
return {
form: {
casePoint: '',
- litigant: "",
- legalPerson: "",
- certNo: "",
- phone: "",
- address: "",
+ litigant: '',
+ legalPerson: '',
+ certNo: '',
+ phone: '',
+ address: '',
hanlderIds: [],
- place: "",
- category: "",
- city: "",
- latitude:"",
+ place: '',
+ category: '',
+ city: '',
+ latitude: '',
},
- latlng:'',
+ latlng: '',
//鍔炴浜哄憳鏁版嵁
organPersons: [],
//褰撲簨浜烘暟鎹�
@@ -138,37 +168,53 @@
// 濉啓楠岃瘉
dataRules: {
casePoint: [
- {required: true, message: "妗堜欢鏂囧彿涓嶈兘涓虹┖", trigger: "blur"},
+ { required: true, message: '妗堜欢鏂囧彿涓嶈兘涓虹┖', trigger: 'blur' },
],
litigant: [
- {required: true, message: "褰撲簨浜哄鍚嶄笉鑳戒负绌�", trigger: "blur"},
+ { required: true, message: '褰撲簨浜哄鍚嶄笉鑳戒负绌�', trigger: 'blur' },
],
/*legalPerson: [
{required: true, message: "娉曞畾浠ｈ〃浜哄鍚嶄笉鑳戒负绌�", trigger: "blur"},
],*/
certNo: [
- {required: true, message: "褰撲簨浜鸿瘉浠跺彿鐮佷笉鑳戒负绌�", trigger: "blur"},
+ {
+ required: true,
+ message: '褰撲簨浜鸿瘉浠跺彿鐮佷笉鑳戒负绌�',
+ trigger: 'blur',
+ },
],
address: [
- {required: true, message: "褰撲簨浜轰綇鍧�涓嶈兘涓虹┖", trigger: "blur"},
+ { required: true, message: '褰撲簨浜轰綇鍧�涓嶈兘涓虹┖', trigger: 'blur' },
],
phone: [
- {required: true, message: "鎵嬫満鍙锋牸寮忎笉姝ｇ‘", trigger: "blur"},
- {min: 11, message: "鎵嬫満鍙锋牸寮忎笉姝ｇ‘", trigger: "blur"},
+ { required: true, message: '鎵嬫満鍙锋牸寮忎笉姝ｇ‘', trigger: 'blur' },
+ { min: 11, message: '鎵嬫満鍙锋牸寮忎笉姝ｇ‘', trigger: 'blur' },
],
hanlderIds: [
- {required: true, message: "鍔炴浜哄憳涓嶈兘涓虹┖", trigger: "blur"},
- {validator: validatePerson, trigger: "blue"}
+ { required: true, message: '鍔炴浜哄憳涓嶈兘涓虹┖', trigger: 'blur' },
+ { validator: validatePerson, trigger: 'blue' },
],
category: [
- {required: true, message: "璇ユ浠剁殑鎵�灞為鍩熶笉鑳戒负绌�", trigger: ["blur", "change"]},
+ {
+ required: true,
+ message: '璇ユ浠剁殑鎵�灞為鍩熶笉鑳戒负绌�',
+ trigger: ['blur', 'change'],
+ },
],
city: [
- {required: true, message: "鎵�灞炲煄闀囦笉鑳戒负绌�", trigger: ["blur", "change"]},
+ {
+ required: true,
+ message: '鎵�灞炲煄闀囦笉鑳戒负绌�',
+ trigger: ['blur', 'change'],
+ },
],
place: [
- {required: true, message: "杩濇硶鍦板潃涓嶈兘涓虹┖", trigger: ["blur", "change"]}
- ]
+ {
+ required: true,
+ message: '杩濇硶鍦板潃涓嶈兘涓虹┖',
+ trigger: ['blur', 'change'],
+ },
+ ],
},
}
},
@@ -179,7 +225,7 @@
methods: {
tiaoZhuan() {
this.$router.push({
- path: '/padWord'
+ path: '/padWord',
})
},
init() {
@@ -187,44 +233,45 @@
// getIdByToken().then(res => {
// console.log(res, 'getIdByToken')
// let a = res.data.data;
- // let b = parseInt(a)
- // this.form.hanlderIds.push(a)
+ // let b = parseInt(a)
+ // this.form.hanlderIds.push(a)
// })
//鏌ヨ鍔炴浜哄憳淇℃伅
getfindAll().then((res) => {
- this.organPersons = res.data.data;
+ this.organPersons = res.data.data
})
//鎵�灞為鍩�
- remote('before_dept').then(res => {
- this.categoryList = res.data.data;
+ remote('before_dept').then((res) => {
+ this.categoryList = res.data.data
})
//鎵�灞炲煄甯�
- remote('area_address').then(res => {
- this.areaList = res.data.data;
+ remote('area_address').then((res) => {
+ this.areaList = res.data.data
})
- let obj = this.latlng.split(',');
- this.form.place = obj[2];
- let arr =[];
- arr.push(obj[0]);
+ let obj = this.latlng.split(',')
+ this.form.place = obj[2]
+ let arr = []
+ arr.push(obj[0])
arr.push(obj[1])
- this.form.latitude = arr.join(',');
+ this.form.latitude = arr.join(',')
// })
},
//妯＄硦鎼滅储鏌ヨ褰撲簨浜�
- querySearchHandle(queryString, cb) { //妯＄硦鎼滅礌
- getMarketList(queryString).then(res => {
- console.log(res.data.data,'res-------')
+ querySearchHandle(queryString, cb) {
+ //妯＄硦鎼滅礌
+ getMarketList(queryString).then((res) => {
+ console.log(res.data.data, 'res-------')
this.marketList = []
let resultList = res.data.data
- resultList.forEach(item => {
+ resultList.forEach((item) => {
this.marketList.push({
value: item.subjectName,
- address:item.address,
- legalPerson:item.legalPerson,
- idCard:item.idCard,
- subjectType:item.subjectType,
- phone:item.phone
+ address: item.address,
+ legalPerson: item.legalPerson,
+ idCard: item.idCard,
+ subjectType: item.subjectType,
+ phone: item.phone,
// id: item.id
})
})
@@ -232,41 +279,41 @@
})
},
handleSelect(item) {
- console.log(item,'item')
- this.form.litigant = item.value;
- this.form.phone = item.phone;
- this.form.subjectType = item.subjectType;
- this.form.certNo = item.idCard;
- this.form.legalPerson = item.legalPerson;
- this.form.address = item.address;
+ console.log(item, 'item')
+ this.form.litigant = item.value
+ this.form.phone = item.phone
+ this.form.subjectType = item.subjectType
+ this.form.certNo = item.idCard
+ this.form.legalPerson = item.legalPerson
+ this.form.address = item.address
},
marketChange(item) {
- this.form.litigant = "";
- this.form.legalPerson = "";
- this.form.litigantCert = "";
- this.form.certNo = "";
- this.form.address = "";
- this.form.phone = "";
- this.form.litigantId = item.id;
- if ("缁忚惀鑰�" == item.subjectType || "涓綋宸ュ晢鎴�" == item.subjectType) {
- this.form.litigant = item.subjectName;
- this.form.legalPerson = item.legalPerson;
- this.form.litigantCert = "钀ヤ笟鎵х収";
- this.form.certNo = item.idCard;
- this.form.address = item.address;
- this.form.phone = item.phone;
- } else if ("鍏皯" == item.subjectType) {
- this.form.litigant = item.subjectName;
- this.form.litigantCert = "灞呮皯韬唤璇�";
- this.form.certNo = item.idCard;
- this.form.address = item.address;
- this.form.phone = item.phone;
- } else if ("鍏朵粬缁勭粐" == item.subjectType) {
- this.form.litigant = item.subjectName;
- this.form.legalPerson = item.legalPerson;
- this.form.certNo = item.idCard;
- this.form.address = item.address;
- this.form.phone = item.phone;
+ this.form.litigant = ''
+ this.form.legalPerson = ''
+ this.form.litigantCert = ''
+ this.form.certNo = ''
+ this.form.address = ''
+ this.form.phone = ''
+ this.form.litigantId = item.id
+ if ('缁忚惀鑰�' == item.subjectType || '涓綋宸ュ晢鎴�' == item.subjectType) {
+ this.form.litigant = item.subjectName
+ this.form.legalPerson = item.legalPerson
+ this.form.litigantCert = '钀ヤ笟鎵х収'
+ this.form.certNo = item.idCard
+ this.form.address = item.address
+ this.form.phone = item.phone
+ } else if ('鍏皯' == item.subjectType) {
+ this.form.litigant = item.subjectName
+ this.form.litigantCert = '灞呮皯韬唤璇�'
+ this.form.certNo = item.idCard
+ this.form.address = item.address
+ this.form.phone = item.phone
+ } else if ('鍏朵粬缁勭粐' == item.subjectType) {
+ this.form.litigant = item.subjectName
+ this.form.legalPerson = item.legalPerson
+ this.form.certNo = item.idCard
+ this.form.address = item.address
+ this.form.phone = item.phone
}
},
backAll() {
@@ -275,24 +322,24 @@
})
},
setPersonname(val) {
- let names = "";
+ let names = ''
for (let i in this.organPersons) {
if (val.indexOf(this.organPersons[i].userId) > -1) {
- names += this.organPersons[i].realName + ",";
+ names += this.organPersons[i].realName + ','
}
}
- if (names != "") {
- this.form.hanlders = names.substring(0, names.length - 1);
- console.log(this.form.hanlders,'this.form.hanlders')
+ if (names != '') {
+ this.form.hanlders = names.substring(0, names.length - 1)
+ console.log(this.form.hanlders, 'this.form.hanlders')
}
},
onSubmit() {
console.log(this.form.hanlderIds, 'this.form.hanlderIds')
this.form.hanlderIds = this.form.hanlderIds.toString()
if (this.form.hanlderIds.length < 1) {
- this.form.hanlders = '';
+ this.form.hanlders = ''
}
- easycase(this.form).then(res => {
+ easycase(this.form).then((res) => {
this.backAll()
})
},
@@ -301,5 +348,4 @@
</script>
<style scoped>
-
</style>
--
Gitblit v1.9.1