zhanghua
2024-03-31 2abaf1a68cc38303724d7aa74d2d3ed81af6466f
src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue
@@ -2,44 +2,89 @@
    <div class="evidence">
        <div class="evidence-title">调查取证</div>
        <div class="evidence-form">
            <el-form ref="evidenceForm" label-width="160px" :model="evidence" :rules="evidenceRules" autoComplete="on">
            <el-form
                ref="evidenceForm"
                label-width="160px"
                :model="evidence"
                :rules="evidenceRules"
                autoComplete="on"
            >
                <div class="evidence-item">
                    <!-- 承办队员 -->
                    <el-form-item label="承办队员:" prop="undertaker">
                        <el-input v-model="evidence.undertaker" placeholder="请输入姓名"></el-input>
                        <el-input
                            v-model="evidence.undertaker"
                            placeholder="请输入姓名"
                        ></el-input>
                    </el-form-item>
                    <!-- 协办队员 -->
                    <el-form-item label="协办队员:" label-width="100px" prop="assistant">
                        <el-input v-model="evidence.assistant" placeholder="请输入姓名"></el-input>
                    <el-form-item
                        label="协办队员:"
                        label-width="100px"
                        prop="assistant"
                    >
                        <el-input
                            v-model="evidence.assistant"
                            placeholder="请输入姓名"
                        ></el-input>
                    </el-form-item>
                </div>
                <!-- 时间 -->
                <el-form-item label="时间:" prop="investigationTime">
                    <el-date-picker v-model="evidence.investigationTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择时间">
                    <el-date-picker
                        v-model="evidence.investigationTime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        placeholder="选择时间"
                    >
                    </el-date-picker>
                </el-form-item>
                <!-- 地址 -->
                <el-form-item label="地址:" prop="address">
                    <el-input v-model="evidence.address" placeholder="请输入地址"></el-input>
                    <el-input
                        v-model="evidence.address"
                        placeholder="请输入地址"
                    ></el-input>
                </el-form-item>
                <!-- 案由 -->
                <el-form-item label="案由:" prop="caseAction">
                    <el-input v-model="evidence.caseAction" placeholder="请输入案由"></el-input>
                    <el-input
                        v-model="evidence.caseAction"
                        placeholder="请输入案由"
                    ></el-input>
                </el-form-item>
                <!-- 当事人信息 -->
                <el-form-item label="当事人信息:" prop="userInfo" class="sp-user-info">
                    <el-input suffix-icon="el-icon-s-order" v-model="evidence.userInfo" @focus="openDialog"></el-input>
                <el-form-item
                    label="当事人信息:"
                    prop="userInfo"
                    class="sp-user-info"
                >
                    <el-input
                        suffix-icon="el-icon-s-order"
                        v-model="evidence.userInfo"
                        @focus="openDialog"
                    ></el-input>
                </el-form-item>
                <!-- 情况描述 -->
                <el-form-item label="处置结果:" prop="description">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" maxlength="200" show-word-limit
                        v-model="evidence.description" placeholder="请输入处置结果,限制200字以内"></el-input>
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4 }"
                        maxlength="200"
                        show-word-limit
                        v-model="evidence.description"
                        placeholder="请输入处置结果,限制200字以内"
                    ></el-input>
                </el-form-item>
                <!-- 照片附件 -->
                <el-form-item label="照片附件:" prop="pic">
                    <div class="upImg">
                        <MyUpload :picture-list="evidence.pic" @setPictureUrl="setPicUrl" @delPictureUrl="delPicUrl"></MyUpload>
                        <div class="tip">{{evidence.pic.length}} / 4</div>
                        <MyUpload
                            :picture-list="evidence.pic"
                            @setPictureUrl="setPicUrl"
                            @delPictureUrl="delPicUrl"
                        ></MyUpload>
                        <div class="tip">{{ evidence.pic.length }} / 4</div>
                    </div>
                </el-form-item>
            </el-form>
@@ -50,9 +95,19 @@
                <i class="el-icon-close" @click="closeUserForm"></i>
            </div>
            <div class="user-form-content">
                <el-form ref="userForm" label-width="120px" :model="user" :rules="userRules" autoComplete="on">
                <el-form
                    ref="userForm"
                    label-width="120px"
                    :model="user"
                    :rules="userRules"
                    autoComplete="on"
                >
                    <!-- 类型 -->
                    <el-form-item label="类型:" prop="illegalType" :disabled="true">
                    <el-form-item
                        label="类型:"
                        prop="illegalType"
                        :disabled="true"
                    >
                        <el-input v-model="user.illegalType"></el-input>
                    </el-form-item>
                    <!-- 姓名、手机号 -->
@@ -69,9 +124,16 @@
                    <!-- 证件 -->
                    <div class="user-item">
                        <el-form-item label="证件类型:" prop="certificateType">
                            <el-select v-model="user.certificateType" placeholder="请选择">
                                <el-option v-for="item in cardOptions" :key="item.id" :label="item.name"
                                    :value="item.id">
                            <el-select
                                v-model="user.certificateType"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in cardOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
@@ -83,9 +145,16 @@
                    <div class="user-item">
                        <!-- 文化程度 -->
                        <el-form-item label="文化程度:" prop="educationDegree">
                            <el-select v-model="user.educationDegree" placeholder="请选择">
                                <el-option v-for="item in degreeOptions" :key="item.id" :label="item.name"
                                    :value="item.id">
                            <el-select
                                v-model="user.educationDegree"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in degreeOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
@@ -102,9 +171,16 @@
                    <div class="user-item">
                        <!-- 民族 -->
                        <el-form-item label="民族:" prop="nation">
                            <el-select v-model="user.nation" placeholder="请选择">
                                <el-option v-for="item in nationOptions" :key="item.id" :label="item.name"
                                    :value="item.id">
                            <el-select
                                v-model="user.nation"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in nationOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
@@ -134,7 +210,7 @@
import { deepClone, getTypeList } from '@/utils/helper'
import { validateName, validatePhone, validateCardId } from '@/utils/validate'
import MyUpload from "@/components/myUpload"
import { FILE_ORIGINAL_URL } from "@/utils";
import { FILE_ORIGINAL_PATH } from "@/utils";
export default {
    components: {
        MyUpload
@@ -220,10 +296,10 @@
            },
            userRules: {
                illegalType: [{ trigger: ['change', 'blur'], message: '案件类型不能为空', required: true }],
                name: [{ required: true,trigger: ['change', 'blur'], validator: checkUserName }],
                phoneCode: [{ required: true,trigger: ['change', 'blur'], validator: checkPhone }],
                name: [{ required: true, trigger: ['change', 'blur'], validator: checkUserName }],
                phoneCode: [{ required: true, trigger: ['change', 'blur'], validator: checkPhone }],
                certificateType: [{ trigger: ['change', 'blur'], validator: checkCard }],
                certificateCode: [{ required: true,trigger: ['change', 'blur'], validator: checkCode }],
                certificateCode: [{ required: true, trigger: ['change', 'blur'], validator: checkCode }],
                educationDegree: [{ required: true, trigger: ['change', 'blur'], message: '文化程度不能为空' }],
                nation: [{ required: true, trigger: ['change', 'blur'], message: '民族不能为空' }],
                liveAddress: [{ required: true, trigger: ['change', 'blur'], message: '现住址不能为空' }],
@@ -272,15 +348,15 @@
        }
    },
    async created() {
      await this.getCardTypeList();
      await this.getSchoolList();
      await this.getNationList();
      this.$set(this.user, 'illegalType', this.illegalType);
      if (this.evidenceData) {
          this.evidence = deepClone(this.evidenceData);
          this.evidence.pic = this.evidenceData.pic.split(',');
          this.user = this.evidence.partyInfo;
          this.evidence.userInfo = this.evidence.partyInfo.name;
        await this.getCardTypeList();
        await this.getSchoolList();
        await this.getNationList();
        this.$set(this.user, 'illegalType', this.illegalType);
        if (this.evidenceData) {
            this.evidence = deepClone(this.evidenceData);
            this.evidence.pic = this.evidenceData.pic.split(',');
            this.user = this.evidence.partyInfo;
            this.evidence.userInfo = this.evidence.partyInfo.name;
        }
    },
    methods: {
@@ -307,8 +383,8 @@
        checkUser() {
            this.$refs.userForm.validate((valid) => {
                if (valid) {
                  this.evidence.userInfo = this.user.name + '...';
                  this.userFlag = false;
                    this.evidence.userInfo = this.user.name + '...';
                    this.userFlag = false;
                } else {
                    this.evidence.userInfo = null;
                    this.$message.warning('请检查必填项');
@@ -340,29 +416,28 @@
        async getNationList() {
            this.nationOptions = await getTypeList(1, '05');
        },
         // 设置上传成功之后的图片地址
         setPicUrl({ url }) {
        // 设置上传成功之后的图片地址
        setPicUrl({ url }) {
            const baseUrl = '';
            if (this.evidence.pic.length < 4) {
                url = url.replace("http://111.1.140.92:28081/sccg/API/img?fileUrl=","")
                this.evidence.pic.push(`${FILE_ORIGINAL_URL}sccg/API/img?fileUrl=${url}`)
                this.evidence.pic.push(FILE_ORIGINAL_PATH + url)
            }
        },
        //删除图片
        delPicUrl({url}){
        delPicUrl({ url }) {
            const baseUrl = '';
            this.evidence.pic.splice(this.evidence.pic.indexOf(baseUrl + url),1);
            this.evidence.pic.splice(this.evidence.pic.indexOf(baseUrl + url), 1);
        }
    },
    props:['evidenceData', 'illegalType']
    props: ['evidenceData', 'illegalType']
}
</script>
<style lang="scss" scoped>
.evidence {
    line-height: 60px;
    position: relative;
    .evidence-item{
    .evidence-item {
        display: flex;
    }
    .evidence-title {
@@ -437,8 +512,8 @@
    padding-bottom: 60px;
}
.sp-user-info{
    ::v-deep .el-input{
.sp-user-info {
    ::v-deep .el-input {
        width: 200px;
    }
}
@@ -456,7 +531,7 @@
        .el-select {
            flex: 1;
            :deep(.el-input__inner){
            :deep(.el-input__inner) {
                padding: 0px 15px;
            }
        }