zdxtLawEnforcementCodeView/src/views/enforce/enforcementPlanAdd.vue

<template>
    <div class="address_edit">
        <!-- 导航栏 -->
<!--        <div class="header_body">
            <header-nav
                    :slefBack="true"
                    @goBack="goBack"
                    :titelText="`执法检查计划`"
            >
            </header-nav>
        </div>-->
        <!-- 中间 -->
        <div class="warp_body">
            <van-form @failed="onFailed" @submit="submit">
                <van-cell-group>
<!--                    <van-field-->
<!--                            v-model="submitData.planYear"-->
<!--                            required-->
<!--                            label="计划年度"-->
<!--                            placeholder="必填"-->
<!--                            readonly-->
<!--                            :rules="[{ required: true, message: '请选择年度计划' }]"-->
<!--                            @click="selectDate"-->
<!--                    />-->
                    <van-popup v-model:show="data.showDatePicker" position="bottom">
                        <van-date-picker
                                title="选择日期"
                                v-model="data.currentDate"
                                :min-date="data.minDate"
                                :max-date="data.maxDate"
                                :columns-type="data.columnsType"
                                @confirm="onDateConfirm"
                                @cancel="cancelSelectDate"
                        />
                    </van-popup>

                    <van-field
                            v-model="submitData.planName"
                            label="计划名称"
                            placeholder="请输入"
                            required
                            :rules="[{ required: true, message: '请输入计划名称' }]"
                    />

                      <div class="plan-attach">
                        <div class="plan-time">
                            <van-field
                                    v-model="data.fieldValue"
                                    is-link
                                    readonly
                                    placeholder="选择时段"
                                    @click="data.dateShowPicker = true"
                            />
                        </div>
                        <div class="plan-text">行政检查计划</div>
                    </div>
                    <van-popup v-model:show="data.dateShowPicker" round position="bottom">
                        <van-picker
                                :columns="data.dateColumns"
                                @cancel="data.dateShowPicker = false"
                                @confirm="dateOnConfirm"
                        />
                    </van-popup>
                    <van-field
                            v-model="submitData.bureauDeptName"
                            label="执法部门"
                            placeholder="请选择"
                            @click=""
                            required
                            readonly
                            :rules="[{ required: true, message: '请选择执法部门'}]"
                    />
                    <van-field
                      v-model="submitData.enforcementTime"
                      label="上传时间"
                      placeholder="请选择"
                      clickable
                      is-link
                      readonly
                      required
                      :rules="[{ required: true, message: '请选择上传时间'}]"
                      @click="selectEnforcementTime"
                    />
                    <van-popup v-model:show="data.showPicker" position="bottom">
                        <van-date-picker
                                title="选择日期"
                                v-model="data.currentDate1"
                                :min-date="data.minDate"
                                :max-date="data.maxDate"
                                :columns-type="data.columnsTypes"
                                @confirm="onEnforcementTimeConfirm"
                                @cancel="cancelEnforcementTime"
                        />
                    </van-popup>
                    <van-field
                            v-model="submitData.enforcementArea"
                            label="执法区域"
                            placeholder="请输入"
                            required
                            :rules="[{ required: true, message: '请输入执法区域'}]"
                    />
                    <div class="file-upload">
                        <div class="file-upload-center">
                            文件上传 <span>(不多于9张)</span>
                        </div>
                        <van-uploader v-model="data.fileListObj" max-count="9" class="file" :after-read="uploadFiles"
                                      multiple @oversize="onOversize" :before-delete="deleteFile" accept=".pdf">
                            <template #preview-cover="{ file }">
                                <div class="preview-cover van-ellipsis">{{ file.name }}</div>
                            </template>
                        </van-uploader>
                    </div>
                </van-cell-group>
                <van-action-bar>
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </van-action-bar>
            </van-form>
        </div>
    </div>
</template>

<script setup name="register">

    import {showToast, showSuccessToast, showLoadingToast, closeToast} from 'vant';
    import {addEnforcementInspectionProgram, queryUserInfo} from '@/api/enforce'
    import {getDict} from '../../api/Home'
    import {uploadFile} from '../../util/fileUpload'
    import {reactive, ref} from "vue";
    import {showConfirmDialog} from 'vant';

    const {useCommon, useMy} = $globalStore;

    const router = useRouter();
    const route = useRoute();
    let queryaddressId = ref("");
    const data = reactive({
        searchResult: [],
        showPicker: false,
        columns: [],
        selectTypeValue: ref[0],
        showDatePicker: ref(false),
        columnsType: ['year'],
        columnsTypes: ['year', 'month', 'day'],
        currentDate: ref(['2024']),
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2125, 5, 1),
        currentDate1: ref(['2024', '03', '01']),
        //vant组件上传照片列表
        fileListObj: [],
        dateShowPicker: false,
        fieldValue: "年度",
        dateColumns: [
            { text: '年度', value: 'year' },
            { text: '月度', value: 'month' },
            { text: '季度', value: 'quarter' },
        ],
    });
    //保存参数
    const submitData = reactive({
        //用户id
        userId: useCommon.userId,
        //关联案件ID
        relId: "",
        //计划年度
        planYear: "",
        //计划名称
        planName: "",
        //执法部门
        enforcementDepartment: "",
        //执法部门ID
        enforcementDepartmentId: "",
        //执法时间
        enforcementTime: "",
        //执法区域
        enforcementArea: "",
        //是否发布年度执法计划
        isPublish: 0,
        //后台保存图片列表
        fileList: [],
        /**局级部门 */
        bureauDeptId:"",
        bureauDeptName:""
    })


    // 返回
    const goBack = () => {
        router.go(-1);
    };

    const submit = () => {
        submitData.planName = submitData.planName + data.fieldValue +"行政检查计划"
        showConfirmDialog(submitData).then(() => {
            console.log(1)
            submitData.isPublish = 1
            addEnforcementInspectionProgram(submitData, success => {
                console.log(success)
                //跳转企业二维码地址
                if (success.success) {
                    console.log("保存成功");
                    showSuccessToast('保存成功');
                    goBack();
                }
            }, error => {
                console.log("保存失败")
            })
        }).catch(() => {
            console.log(0)
            showSuccessToast('保存成功');
            submitData.isPublish = 0
            addEnforcementInspectionProgram(submitData, success => {
                console.log(success)
                //跳转企业二维码地址
                if (success.success) {
                    console.log("保存成功");
                    showSuccessToast('保存成功');
                    goBack();
                }
            }, error => {
                console.log("保存失败")
            })
        });

    }

    const onFailed = (errorInfo) => {
        console.log('failed', errorInfo);
    };
    //消息提醒
    // const toast = showLoadingToast({
    //   duration: 0,
    //   forbidClick: true,
    //   message: '提交成功',
    // });
    // let second = 3;
    // const timer = setInterval(() => {
    //   second--;
    //   if (second) {
    //   } else {
    //     clearInterval(timer);
    //     closeToast();
    //   }
    // }, 1000);
    // 保存地址操作
    const onSave = () => {
        router.replace({name: "addressList"});
    };

    const onConfirm = (value) => {
        data.showPicker = false;
        console.log(value)
        submitData.enforceType = value.selectedValues[0];
        submitData.enforceTypeText = value.selectedOptions[0].text;
    }
    const selectType = () => {
        data.showPicker = true;
        // console.log(data)
    }

    const uploadFiles = (file) => {
        uploadFile(file, (res) => {
            console.log(file.fileName);
            submitData.fileList.push({
                fileUrl: res.url,
                fileName: file.file.name
            })
            console.log(submitData.fileList);
        });

    }
    const deleteFile = (file, index) => {
        // data.fileListObj.filter((item, indexs) => {
        //   if (index.index == indexs) {
        //     data.fileListObj.splice(indexs, 1);//splice 删除
        //   }
        //  });
        submitData.fileList.filter((item, indexs) => {
            if (index.index == indexs) {
                submitData.fileList.splice(indexs, 1);//splice 删除
            }
        });
        return true;
    }
    onMounted(() => {
        console.log(route?.query?.id);
        console.log(route?.query?.lawEnforcementIncident);
        submitData.relId = route?.query?.id;
        submitData.lawEnforcementIncident = route?.query?.lawEnforcementIncident;
        getDict({"dictType": "caseType"}, success => {
            console.log(success);
            success.data.forEach(res => {
                console.log(res)
                var obj = {text: res.dictLabel, value: res.dictValue};
                data.columns.push(obj)
            })
        }, error => {

        })
        //查询企业信息
        queryUserInfo(useCommon.userId, success => {
            submitData.enforcementDepartment = success.data.dept.deptName;
            submitData.enforcementDepartmentId = success.data.dept.deptId;
            //局级部门
            submitData.bureauDeptName = success.data.bureauDept.deptName;
            submitData.bureauDeptId = success.data.bureauDept.deptId;
        }, error => {

        })
    });

    const selectDate = () => {
        data.showDatePicker = true;
        console.log(data.showDatePicker)
    }
    const onDateConfirm = (value) => {
        console.log(value);

        value.selectedValues.forEach((item, index) => {
            console.log(item);
            submitData.planYear = item;
        });
        // submitData.establishmentTime = "2023-04-21"
        data.showDatePicker = false;
    }
    //取消日期选择
    const cancelSelectDate = () => {
        data.showDatePicker = false;
    }
    //取消
    const cancelEnforcementTime = () => {
        data.showPicker = false;
    }

    const selectEnforcementTime = () => {
        data.showPicker = true;
    }

    const onEnforcementTimeConfirm = (value) => {
        console.log(value);

        value.selectedValues.forEach((item, index) => {
            console.log(item);
        });
        submitData.enforcementTime = value.selectedValues[0] + "-" + value.selectedValues[1] + "-" + value.selectedValues[2] + " 00:00:00";
        data.showPicker = false;
    }

    const dateOnConfirm = ({ selectedOptions }) => {
        data.dateShowPicker = false;
        data.fieldValue = selectedOptions[0].text;
    };



</script>
<style lang="less" scoped>
    .address_edit {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        background-color: #ebf3fb;
    }

    .warp_body {
      margin: 0 3%;
      padding-bottom: 3rem;
      width: 94%;
      height: 98%;
      background-color: #ebf3fb;
      overflow-y: auto;
      margin-top: 0.15rem;
    }

    /* vant4的 Toast 和 Popup 样式冲突,会导致 Toast 变成白底 */
    // .van-popup.van-toast{
    //     background: var(--van-toast-background) !important;
    //     box-sizing: content-box !important;
    //     /* 下面3条css,影响不大 */
    //     transition: all var(--van-duration-fast) !important;
    //     width: var(--van-toast-default-width) !important;
    //     max-width: var(--van-toast-max-width) !important;
    // }
    // .van-popup.van-toast .van-toast__icon{
    //     font-size: var(--van-toast-icon-size) !important;
    // }
    .file-upload {
      position: relative;
      min-height: 4.2rem;
      padding: 0.27rem 0.43rem;
      box-sizing: border-box;
    }

    .file-upload-center {
        position: absolute;
        height: 20%;
        top: 10%;
        left: 0.43rem;
        font-size: 0.38rem;

        span {
            font-size: 0.32rem;
            color: rgb(221, 229, 227);
        }
    }

    .file {
        position: absolute;
        bottom: 10%;
        left: 0.43rem;
        width: calc(100% - 0.86rem);
    }

    .preview-cover {
        position: absolute;
        bottom: 0;
        box-sizing: border-box;
        width: 100%;
        padding: 0.12rem;
        color: #fff;
        font-size: 0.32rem;
        text-align: center;
        background: rgba(0, 0, 0, 0.3);
    }

    /deep/ .van-button {
        margin: 5% 3%;
        padding: 0;
        width: 94%;
        height: 1rem;
        color: #fff;
        font-size: 0.4rem;
        border-radius: 1rem;
        background: #1367fe;
        border: 1px solid #1367fe;
        text-align: center;
    }

    /deep/ .van-action-bar {
      box-shadow: 0 0 0.27rem #e5e5e5;
    }

    :root {
        --van-dialog-width: 16rem;
    }

    .plan-attach {
      display: flex;
      align-items: center;
      width: 100%;
      white-space: nowrap;
    }

    .plan-time {
      margin-left: 2.67rem;
      width: 2.25rem;
    }

    .plan-text {
      min-width: 30%;
      font-size: 0.37rem;
      line-height: 3.25;
    }
</style>