'页面尺寸自适应初期调整'

付延余

2023-01-04 a6b40a1b80b586f7dbd874f3939f5e06fcc752d2

 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>