细节调节

zhangxiaoxu123

2023-01-11 539d1ce6b955d5d56b21d97590a2a684c400f64a

 src/views/padSunmaryProcedure/padFrom.vue

@@ -1,94 +1,363 @@
<template>
<el-main style="width: 60vw;margin: 0 auto">
  <el-form ref="form" :model="form" label-width="85px" size="medium">
    <el-form-item label="案由">
      <el-input v-model="form.casePoint" placeholder="请填写案由"></el-input>
    </el-form-item>
    <el-form-item label="当事人姓名">
      <el-input v-model="form.litigant" placeholder="请填写当事人姓名" ></el-input>
    </el-form-item>
    <el-form-item label="联系电话">
      <el-input v-model="form.phone" 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">
          <span style="float: left">{{ item.realName }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">执法证号：{{ item.lawCert }}</span>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button @click="backAll">取消</el-button>
    </el-form-item>
  </el-form>
</el-main>
  <!-- 创建 -->
  <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-autocomplete>
            <!--            <el-select v-model="form.litigant" placeholder="请选择当事人"
                       style="width: 100%;" @change="marketChange">
              <el-option
                v-for="item in marketList"
                :key="item.subjectName"
                :label="item.subjectName"
                :value="item">
              </el-option>
            </el-select>-->
          </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>
        </el-col>
      </el-row>
      <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>

      <el-form-item label="住址"
                    prop="address">
        <el-input v-model="form.address"
                  placeholder="请填写当事人住址"></el-input>
      </el-form-item>

      <el-form-item label="办案人员"
                    prop="hanlderName">
        <el-select v-model="form.hanlderName"
                   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>
        </el-select>
      </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-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-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>
      <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('form')">立即创建</el-button>
        <el-button @click="backAll">取消</el-button>
      </el-form-item>
    </el-form>
  </el-main>
</template>

<script>
import {easycase,marketb} from '../../api/News/pad'
import {getfindAll} from "../../api/News/useres";
import { easycase, getMarketList, getIdByToken } from '../../api/News/pad'
import { getfindAll } from '../../api/News/useres'
import { remote } from '@/api/admin/dict'

export default {
  name: "padFrom",
  data(){
    return{
      form:{
        casePoint:'',
        litigant:"",
        phone:"",
        hanlderIds:"",
  name: 'padFrom',
  data() {
    var validatePerson = (rule, value, callback) => {
        console.log(value,'value===')
      if (value.length != 2) {
        callback(new Error('办案人员必须选择两位'))
      } else {
        callback()
      }
    }
    return {
      form: {
        casePoint: '',
        litigant: '',
        legalPerson: '',
        certNo: '',
        phone: '',
        address: '',
        hanlderIds: '',
        hanlderName:[],
        place: '',
        category: '',
        city: '',
        latitude: '',
      },
      organPersons:[]
      latlng: '',
      //办案人员数据
      organPersons: [],
      //当事人数据
      marketList: [],
      //所属领域
      categoryList: [],
      // 违法城镇
      areaList: [],
      // 填写验证
      dataRules: {
        casePoint: [
          { required: true, message: '案件文号不能为空', trigger: 'blur' },
        ],
        litigant: [
          { required: true, message: '当事人姓名不能为空', trigger: 'blur' },
        ],
        /*legalPerson: [
          {required: true, message: "法定代表人姓名不能为空", trigger: "blur"},
        ],*/
        certNo: [
          {
            required: true,
            message: '当事人证件号码不能为空',
            trigger: 'blur',
          },
        ],
        address: [
          { required: true, message: '当事人住址不能为空', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '手机号格式不正确', trigger: 'blur' },
          { min: 11, message: '手机号格式不正确', trigger: 'blur' },
        ],
        hanlderName: [
          { required: true, message: '办案人员不能为空', trigger: ['blur','change'] },
          { validator: validatePerson, trigger: ['blur','change'] },
        ],
        category: [
          {
            required: true,
            message: '该案件的所属领域不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        city: [
          {
            required: true,
            message: '所属城镇不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        place: [
          {
            required: true,
            message: '违法地址不能为空',
            trigger: ['blur', 'change'],
          },
        ],
      },
    }
  },
  created() {
    // this.latlng = window.android.getAddress();
    this.init()
  },
  methods:{
    init(){
  methods: {
    tiaoZhuan() {
      this.$router.push({
        path: '/padWord',
      })
    },
    init() {
      // this.$nextTick(()=>{
        //查询当事人信息
        getfindAll().then((res) => {
          this.organPersons = res.data.data;
        })
      // getIdByToken().then(res => {
      //   console.log(res, 'getIdByToken')
      //   let a = res.data.data;
      // let b = parseInt(a)
      // this.form.hanlderIds.push(a)
      // })
      //查询办案人员信息
      getfindAll().then((res) => {
        this.organPersons = res.data.data
      })
      //所属领域
      remote('before_dept').then((res) => {
        this.categoryList = 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])
      arr.push(obj[1])
      this.form.latitude = arr.join(',')
      // })
    },
    marketb(){},
    backAll(){
    //模糊搜索查询当事人
    querySearchHandle(queryString, cb) {
      //模糊搜素
      getMarketList(queryString).then((res) => {
        console.log(res.data.data, 'res-------')
        this.marketList = []
        let resultList = res.data.data
        resultList.forEach((item) => {
          this.marketList.push({
            value: item.subjectName,
            address: item.address,
            legalPerson: item.legalPerson,
            idCard: item.idCard,
            subjectType: item.subjectType,
            phone: item.phone,
            // id: item.id
          })
        })
        cb(this.marketList)
      })
    },
    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
    },
    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
      }
    },
    backAll() {
      this.$router.push({
        path: '/pad',
      })
    },
    setPersonname(val) {
      let names = "";
      for (let i in this.organPersons) {
        if (val.indexOf(this.organPersons[i].userId) > -1) {
          names += this.organPersons[i].realName + ",";
        console.log(val,'val===')
      // let names = ''
      // for (let i in this.organPersons) {
      //     console.log(this.organPersons[i],'this.organPersons[i]')
      //   if (val.indexOf(this.organPersons[i].userId) > -1) {
      //     names += this.organPersons[i].realName + ','
      //   }
      // }
      // if (names != '') {
      //   this.form.hanlders = names.substring(0, names.length - 1)
      // }
        if(val.length) {
            this.$set(this.form, 'hanlderIds', val.toString())
        }
      }
      if (names != "") {
        this.dataForm.hanlders = names.substring(0, names.length - 1);
      }

    },
    onSubmit(){
      this.form.hanlderIds=this.form.hanlderIds.toString()
      if (this.dataForm.hanlderIds.length < 1) {
        this.dataForm.hanlders = '';
      }
      easycase(this.form).then(res =>{
        this.backAll()
      })
    onSubmit(formName) {
        console.log(this.form.hanlderIds,'this.form.hanlderIds====222')
        this.$refs[formName].validate((valid) => {
            if(valid) {
                easycase(this.form).then((res) => {
                    if(res.data.code == 0) {
                        this.$message.success('添加成功')
                        this.backAll()
                    }
                })
            }else {
                return false
            }
        })
    },
  },
}
</script>

<style scoped>

</style>